/* DriveHaus Sell — Interactive Enhancements (theme + spacing + low‑typing) */
:root{
  --nx-ink:#0f1824; --nx-muted:#5d6b7f; --nx-line:#e6eaf0; --nx-surface:#ffffff; --nx-bg:#f6f9fc;
  --nx-brand:#ffb800; --nx-accent:#3aa0ff; --nx-navy:#1f3b75; --nx-radius:14px; --nx-field-h:52px;
  --progress-gradient: linear-gradient(90deg,#40C0FF 0%, #FFD569 100%);
}
.sell-card{ border: 1px solid var(--nx-line); background: var(--nx-surface); }
.sell-card .card-head{ background: linear-gradient(180deg, rgba(255,184,0,.08), rgba(255,184,0,0)); }
.nr-section{ background:#fff; border:1px solid var(--nx-line); border-radius: var(--nx-radius); }
.nr-section summary{ color: var(--nx-ink); }
/* Spacing rhythm */
.form-row{ gap: 12px; }
.form-row + .form-row{ margin-top: 12px; }
.form-group{ min-height: var(--nx-field-h); }
.form-group label{ font-weight: 800; color:#2b3446; }
/* Field base */
.form-group input, .form-group select, .form-group textarea{
  background:#fff; border:1px solid var(--nx-line); border-radius: 12px; padding: 14px 16px;
  height: var(--nx-field-h); line-height: 1.2; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .08s ease;
}
.form-group textarea{ min-height: 120px; height: auto; padding-top: 14px; }
.form-group:focus-within input, .form-group:focus-within select, .form-group:focus-within textarea{
  border-color: rgba(58,160,255,.55); box-shadow: 0 0 0 6px rgba(58,160,255,.10); background:#fff; transform: translateY(-1px);
}
/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.chip{ appearance:none; border:1px solid var(--nx-line); background:#f4f7fb; color:#0f1824; padding: 10px 14px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.chip:hover{ transform: translateY(-1px); }
.chip.is-active{ background: rgba(58,160,255,.12); border-color: rgba(58,160,255,.55); box-shadow: 0 6px 16px rgba(58,160,255,.18); }
/* Segmented control */
.segment{ display:inline-grid; grid-auto-flow: column; gap: 0; border:1px solid var(--nx-line); border-radius: 12px; overflow:hidden; background:#fff; }
.segment button{ padding: 12px 16px; border:0; background:#fff; cursor:pointer; font-weight:800; color:#0f1824; transition: background .2s ease, color .2s ease; }
.segment button + button{ border-left:1px solid var(--nx-line); }
.segment button.is-active{ background: #0f1824; color:#fff; }
/* Range + output */
.range-row{ display:flex; align-items:center; gap: 12px; }
.range-row output{ min-width: 88px; text-align:right; font-weight:800; color: var(--nx-navy); }
input[type=range]{ width:100%; accent-color: var(--nx-accent); }
/* Stepper */
.field-stepper{ position: relative; }
.field-stepper .btn{ position:absolute; top: 6px; width: 40px; height: calc(var(--nx-field-h) - 12px); display:grid; place-items:center; background:#f4f7fb; border:1px solid var(--nx-line); font-weight:800; color:#0f1824; border-radius: 10px; cursor:pointer; transition: background .15s ease, transform .08s ease; }
.field-stepper .btn:active{ transform: translateY(1px) }
.field-stepper .btn.minus{ left: 6px; }
.field-stepper .btn.plus{ right: 6px; }
.field-stepper input{ padding-left: 56px; padding-right: 56px; text-align:center; }
/* Swatches */
.swatches{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 8px; }
.swatch{ width: 34px; height: 34px; border-radius: 10px; border:1px solid var(--nx-line); cursor:pointer; position:relative; overflow:hidden; }
.swatch.is-active{ outline: 3px solid rgba(58,160,255,.4); }
.swatch[aria-label~=Black]{ background:#0b0f14; } .swatch[aria-label~=White]{ background:#ffffff; } .swatch[aria-label~=Silver]{ background:linear-gradient(180deg,#e7e9ee,#cfd6e0); } .swatch[aria-label~=Blue]{ background:#1f3b75; } .swatch[aria-label~=Red]{ background:#b71c1c; } .swatch[aria-label~=Grey]{ background:#9aa3ad; }
/* Helper text */
.helper{ color: var(--nx-muted); font-size: 0.9rem; }

/* Step progress pills */
.steps{
  display:flex; gap:12px; align-items:center;
  padding:8px 10px; border-radius:999px; background:#EEF2F6;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.step{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; height:44px; border-radius:999px;
  background:#F7F9FC; color:#334155; border:1px solid rgba(0,0,0,.06);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, background .16s, color .16s, border-color .16s;
  box-shadow:0 0 0 0 rgba(0,0,0,0); position:relative; white-space:nowrap;
}
.step__icon svg{ width:20px; height:20px; stroke-width:1.8; stroke:currentColor; }
.step__label{ font-weight:600; letter-spacing:.2px; }

.step--active{
  background: var(--progress-gradient);
  color:#fff; border-color: transparent; transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(64,192,255,.25), 0 4px 10px rgba(255,213,105,.25);
}
.step--active .step__icon svg{ stroke:#fff; }
.step--active .step__label{ color:#fff; }

.step--active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-6px; height:4px;
  border-radius:999px; background: currentColor; opacity:.25;
}

.step[aria-selected="false"]{ opacity:.85; }
.step:hover{ transform: translateY(-1px); }
.step:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(59,130,246,.35); }

@media (max-width:640px){
  .steps{ gap:8px; }
  .step{ padding:10px 12px; }
  .step__label{ font-size:.95rem; }
}

@keyframes resultPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.result-pop {
  animation: resultPop .4s ease;
}