/* css/hero-mini-quote.css — Hero mini-quote widget (B-7)
   Turns the static l-preview-card into a real, interactive quote form:
   process / material / qty → POST /api/quote (guest-ok) → live price +
   3 lead tiers + DFM verdict. Optional CAD drop → /api/parse enhances
   geometry, then re-quotes. CTA funnels to quote.html.

   Reuses existing l-mini-upload / l-part-row / l-tiers / l-tier / l-dfm-bar
   from landing.css; only the .l-mq-* form controls are new. */

/* ── Drop zone (enhanced: clickable + dragover state) ── */
.l-mini-upload {
  cursor: pointer;
  outline: none;
}
.l-mini-upload:focus-visible {
  border-color: var(--c-accent, #eab308);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18);
}
.l-mini-upload.is-dragover {
  border-color: var(--c-accent, #eab308);
  background: rgba(234, 179, 8, 0.06);
}
.l-mini-upload.has-file {
  border-style: solid;
  border-color: rgba(34, 197, 94, 0.4);
}

/* ── Form ── */
.l-mq-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l-mq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.l-mq-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.l-mq-field > span {
  font-size: 11px;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.l-mq-field select,
.l-mq-field input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--c-text-1);
  background: var(--c-bg-2);
  border: 1px solid var(--c-border-1);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.l-mq-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.l-mq-field select:focus-visible,
.l-mq-field input:focus-visible {
  border-color: var(--c-accent, #eab308);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18);
}

/* ── Submit button ── */
.l-mq-btn {
  width: 100%;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  background: var(--c-accent, #eab308);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s, box-shadow 0.2s;
  align-self: end;
  white-space: nowrap;
}
.l-mq-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.35);
}
.l-mq-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.l-mq-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Result block ── */
.l-mini-result[hidden] { display: none; }
.l-mini-result .l-part-price em { font-size: 18px; }

/* ── Status line (loading / error) ── */
.l-mq-status {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 6px;
  text-align: center;
}
.l-mq-status[hidden] { display: none; }
.l-mq-status.is-loading {
  color: var(--c-text-2);
  background: var(--c-bg-2);
}
.l-mq-status.is-error {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.08);
}

/* ── CTA ── */
.l-mq-cta {
  display: block;
  margin-top: 12px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--c-accent, #eab308);
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 8px;
  transition: background 0.2s, transform 0.1s;
}
.l-mq-cta:hover {
  background: rgba(234, 179, 8, 0.18);
}
.l-mq-cta:active {
  transform: translateY(1px);
}

/* ── Tier label localized (label_zh / label_en from engine) ── */
.l-tier-name { font-size: 11px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.l-tier-days { font-size: 12px; color: var(--c-text-2); margin: 1px 0; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .l-mq-field select,
  .l-mq-field input { font-size: 14px; padding: 9px 10px; }
}

/* ── Dark theme ── */
[data-theme="dark"] .l-mq-btn { color: #0a0a0a; }
[data-theme="dark"] .l-mq-status.is-error { color: #f87171; }

/* ── Reduced motion: drop the float bob on the card so values stay
   readable while the user reads the quote. (The float keyframe lives
   in landing.css; override here scoped to the widget.) ── */
@media (prefers-reduced-motion: reduce) {
  .l-preview-card.l-mq-card { animation: none; }
}