/**
 * =============================================================================
 * ASC TRADE-IN WIZARD — v2.1.1
 * References the same global CSS custom properties as device-category.css.
 * Design system: fadeInUp animations, translateZ(0) GPU compositing,
 * border-radius: 24px cards, var(--color-eco-green) accent,
 * var(--ease-out-quart) easing, var(--transition) duration.
 * =============================================================================
 */

[x-cloak] { display: none !important; }

/* ── Animations (same keyframes as device-category.css) ─────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.tradein-wizard-page {
  background: var(--color-bg-secondary, #f5f5f7);
  min-height: 100vh;
  padding: 2rem 1rem 2rem;
}

@media (min-width: 768px) {
  .tradein-wizard-page {
    padding: 3rem 1.5rem 3rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* ── Step 0: device selection (full-page, no card) ───────────────────────── */
.tradein-select-page {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  animation: fadeInUp 0.5s var(--ease-out-quart, cubic-bezier(.25,.46,.45,.94)) backwards;
}

/* ── Wizard card (steps 1+) ──────────────────────────────────────────────── */
/* Wrap: position:relative so button can anchor outside card corner.
   Also owns the entrance animation so the card itself stays transform-free. */
.tradein-wizard-wrap {
  position: relative;
  width: 100%;
  max-width: 680px;
  animation: fadeInScale 0.35s var(--ease-out-quart, cubic-bezier(.25,.46,.45,.94)) backwards;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 767px) {
  /* On mobile, wrap must NOT have transform — same rule applies:
     transform creates a containing block that traps fixed children.
     Entrance animation is skipped on mobile, plain fade instead. */
  .tradein-wizard-wrap {
    animation: none;
    will-change: auto;
    transform: none;
  }
}

.tradein-wizard-card {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border-light, #e5e5e5);
  border-radius: 24px;
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06));
  width: 100%;
  min-height: 560px;
  /* NOTE: No transform/will-change/overflow:hidden here —
     any of those would create a new containing block and trap
     position:fixed children (the mobile sticky footer) to the card
     instead of the viewport. Entrance animation is on .tradein-wizard-wrap. */
}

/* ── Card header ─────────────────────────────────────────────────────────── */
/* Top padding must clear the Start Over button (0.75rem position + 36px height + gap) */
.tradein-wizard-header {
  padding: 3.9rem 2rem 0;
}

@media (max-width: 767px) {
  .tradein-wizard-header { padding: 3.5rem 1.25rem 0; }
}

/* ── Segmented progress track ────────────────────────────────────────────── */
.tradein-progress-segments {
  display: flex;
  gap: 5px;
  margin-bottom: 0.75rem;
}

.tradein-progress-seg {
  flex: 1;
  height: 3px;
  border-radius: 980px;
  background: var(--color-border-light, #e5e5e5);
  transition: background 0.4s var(--ease-out-quart, ease);
}

.tradein-progress-seg--done {
  background: var(--color-eco-green, #00a86b);
}

.tradein-step-label {
  font-size: 13px;
  color: var(--color-text-secondary, #6b6b6b);
  margin: 0 0 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.tradein-wizard-body {
  padding: 2rem 2rem 2rem;
}

@media (max-width: 767px) {
  .tradein-wizard-body { padding: 1.5rem 1.25rem 1.5rem; }
}

/* ── Card footer: inline on desktop, sticky on mobile ───────────────────── */
.tradein-wizard-footer {
  border-top: 1px solid var(--color-border-light, #e5e5e5);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-bg, #ffffff);
}

/* Ensure actions group always sits on the right regardless of estimate visibility */
.tradein-footer-actions {
  margin-left: auto;
}

/* Spacer reserves footer height on mobile so body content clears the fixed bar */
.tradein-wizard-footer-spacer {
  display: none;
}

@media (max-width: 767px) {
  .tradein-wizard-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-border-light, #e5e5e5);
    border-radius: 0;
    box-shadow: 0 -8px 20px rgba(0,0,0,.06);
    padding: 1rem 1.25rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 50;
  }

  /* Spacer matches the fixed footer height so card content scrolls above it */
  .tradein-wizard-footer-spacer {
    display: block;
    height: 80px;
  }
}

.tradein-footer-estimate { display: flex; flex-direction: column; min-width: 0; }

.tradein-footer-estimate__label {
  font-size: 12px;
  color: var(--color-text-secondary, #6b6b6b);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.tradein-footer-estimate__value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text, #111111);
  line-height: 1.1;
}

.tradein-footer-actions { display: flex; gap: 0.625rem; flex-shrink: 0; }

/* ── Step panel: fadeInUp with GPU compositing ───────────────────────────── */
.tradein-step-panel {
  animation: fadeInUp 0.4s var(--ease-out-quart, cubic-bezier(.25,.46,.45,.94)) backwards;
  will-change: transform;
  transform: translateZ(0);
}

/* ── Start Over button — absolute top-right of card ─────────────────────── */
.tradein-start-over {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-warning, #FF9F0A);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  transition: transform var(--transition, 250ms ease),
              box-shadow var(--transition, 250ms ease),
              background var(--transition, 250ms ease);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12));
  z-index: 10;
}

.tradein-start-over:hover {
  background: #e8900a;
  transform: scale(1.08);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.15));
}

.tradein-start-over:hover .tradein-start-over__icon {
  transform: rotate(-30deg);
}

.tradein-start-over__icon {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
  flex-shrink: 0;
}

/* Tooltip */
.tradein-start-over::after {
  content: 'Start over';
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-text, #1d1d1f);
  color: var(--color-bg, #ffffff);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  letter-spacing: 0.01em;
}

.tradein-start-over:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── Headings ────────────────────────────────────────────────────────────── */
.tradein-step-heading {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1.75rem;
  color: var(--color-text, #111111);
}

@media (min-width: 768px) {
  .tradein-step-heading { font-size: 2rem; }
}

.tradein-step-subheading {
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #6b6b6b);
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

/* ── Category grid (step 0) ─────────────────────────────────────────────── */
/* ── Category carousel ───────────────────────────────────────────────────── */
/* Horizontal scroll on mobile, wraps naturally on desktop */
.tradein-category-carousel {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px; /* prevent border clip */
}

.tradein-category-carousel::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .tradein-category-carousel {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.tradein-category-card {
  appearance: none;
  flex: 0 0 auto;
  gap: 0.625rem;
  /* base shell (flex-col, border-radius, border, bg) → asc-tradein-shared.css */
  padding: 1.25rem 0.875rem 1rem;
  width: 100px;
  cursor: pointer;
  color: var(--color-text, #111111);
  text-align: center;
  transition:
    border-color var(--transition, 0.2s ease),
    box-shadow var(--transition, 0.2s ease),
    transform var(--transition, 0.2s ease);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (min-width: 640px) {
  .tradein-category-card { width: 108px; }
}

.tradein-category-card:hover {
  border-color: var(--color-border, #c8c8c8);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transform: translateY(-1px) translateZ(0);
}

.tradein-category-card--active {
  border-color: var(--color-eco-green, #00a86b);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(0,168,107,.1);
}

/* Icon container + svg sizing → asc-tradein-shared.css (.asc-tradein-cat-icon) */

/* Label styles → asc-tradein-shared.css (.asc-tradein-cat-label) */

/* ── Series pills — outlined rectangle, 4 per row ────────────────────────── */
.tradein-series-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
}

.tradein-series-pill {
  appearance: none;
  flex: 1 1 calc(25% - 0.5rem);
  min-width: 120px;
  background: var(--color-bg, #ffffff);
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  border-radius: 12px;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  color: var(--color-text, #111111);
  letter-spacing: -0.01em;
  text-align: center;
  transition:
    border-color var(--transition, 0.2s ease),
    color var(--transition, 0.2s ease);
}

.tradein-series-pill:hover {
  border-color: var(--color-border, #c8c8c8);
}

.tradein-series-pill--active {
  border-color: var(--color-eco-green, #00a86b);
  border-width: 2px;
  color: var(--color-eco-green, #00a86b);
  font-weight: 500;
}

/* ── Device grid ─────────────────────────────────────────────────────────── */
.tradein-device-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
  margin-top: 0.5rem;
}

@media (min-width: 540px) {
  .tradein-device-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Stagger animation per card — same pattern as card-device in device-category.css */
.tradein-device-grid .tradein-device-card:nth-child(1) { animation-delay:   0ms; }
.tradein-device-grid .tradein-device-card:nth-child(2) { animation-delay:  60ms; }
.tradein-device-grid .tradein-device-card:nth-child(3) { animation-delay: 120ms; }
.tradein-device-grid .tradein-device-card:nth-child(4) { animation-delay: 180ms; }
.tradein-device-grid .tradein-device-card:nth-child(5) { animation-delay: 240ms; }
.tradein-device-grid .tradein-device-card:nth-child(6) { animation-delay: 300ms; }
.tradein-device-grid .tradein-device-card:nth-child(n+7) { animation-delay: 360ms; }

.tradein-device-card {
  appearance: none;
  background: var(--color-bg, #ffffff);
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  border-radius: 16px;
  padding: 1.125rem 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.375rem;
  cursor: pointer;
  color: var(--color-text, #111111);
  transition:
    border-color var(--transition, 0.2s ease),
    box-shadow var(--transition, 0.2s ease),
    transform var(--transition, 0.2s ease);
  will-change: transform;
  transform: translateZ(0);
  animation: fadeInUp 0.4s var(--ease-out-quart, ease) backwards;
}

.tradein-device-card:hover {
  border-color: var(--color-border, #c8c8c8);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transform: translateY(-1px) translateZ(0);
}

.tradein-device-card--active {
  border-color: var(--color-eco-green, #00a86b);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(0,168,107,.1);
}

.tradein-device-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tradein-device-card__price {
  font-size: 0.8125rem;
  color: var(--color-eco-green, #00a86b);
  font-weight: 500;
}

/* ── Option groups (storage, RAM, color…) ───────────────────────────────── */
/* ── Option group (Storage, Color, RAM etc.) ─────────────────────────────── */
.tradein-option-group { margin-bottom: 1.75rem; }

.tradein-option-group__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary, #6b6b6b);
  margin: 0 0 0.75rem;
}

.tradein-option-card-row {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.tradein-option-card {
  appearance: none;
  flex: 1 1 calc(50% - 0.625rem);
  min-width: 80px;
  background: var(--color-bg, #ffffff);
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  color: var(--color-text, #1d1d1f);
  letter-spacing: -0.01em;
  transition:
    border-color var(--transition-fast, 150ms ease),
    background var(--transition-fast, 150ms ease);
}

.tradein-option-card:hover {
  border-color: var(--color-border, #d2d2d7);
  background: var(--color-bg-secondary, #f5f5f7);
}

.tradein-option-card--active {
  border-color: var(--color-eco-green, #00A86B);
  border-width: 2px;
  background: var(--asc-green-50, #F2FBF8);
  color: var(--color-eco-green, #00A86B);
  font-weight: 600;
}

/* ── Section divider ─────────────────────────────────────────────────────── */
.tradein-question-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary, #6b6b6b);
  margin: 1.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light, #e5e5e5);
}

.tradein-question-section-label:first-child { margin-top: 0; }

/* ── Question groups ─────────────────────────────────────────────────────── */
.tradein-question-group { margin-bottom: 1.75rem; }

.tradein-question-group__label {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  color: var(--color-text, #1d1d1f);
  letter-spacing: -0.01em;
}

.tradein-question-group__helper {
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #86868b);
  margin: 0 0 0.875rem;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

/* ── Radio / checkbox rows — 2-col flex, no dots, border drives selection ─── */
.tradein-radio-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.tradein-radio-row {
  flex: 1 1 calc(50% - 0.625rem);
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.125rem 1.25rem;
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  background: var(--color-bg, #ffffff);
  text-align: center;
  transition:
    border-color var(--transition-fast, 150ms ease),
    background   var(--transition-fast, 150ms ease);
  user-select: none;
}

.tradein-radio-row:hover {
  border-color: var(--color-border, #d2d2d7);
  background: var(--color-bg-secondary, #f5f5f7);
}

.tradein-radio-row--active {
  border-color: var(--color-eco-green, #00A86B);
  border-width: 2px;
  background: var(--asc-green-50, #F2FBF8);
}

/* Hidden input — keeps a11y */
.tradein-radio-input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Dot hidden — selection shown via row border/background only */
.tradein-radio-dot { display: none; }

.tradein-radio-label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text, #1d1d1f);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: center;
}

.tradein-radio-row--active .tradein-radio-label {
  color: var(--color-eco-green, #00A86B);
  font-weight: 500;
}

.tradein-radio-delta {
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #86868b);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 0.375rem;
}

.tradein-radio-row--active .tradein-radio-delta {
  color: var(--color-eco-green, #00A86B);
  opacity: 0.8;
}

/* ── Answer / field wrappers ─────────────────────────────────────────────── */
.tradein-answer-wrap { margin-bottom: 0.625rem; }
.tradein-field-wrap  { margin-bottom: 0.75rem; }

.tradein-field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--color-text-secondary, #6b6b6b);
  letter-spacing: -0.01em;
}

.tradein-text-input,
.tradein-textarea-input,
.tradein-select-input {
  width: 100%;
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem 1rem;
  font-size: 0.9375rem;
  background: var(--color-bg, #ffffff);
  color: var(--color-text, #1d1d1f);
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: border-color var(--transition-fast, 150ms ease);
  box-sizing: border-box;
}

.tradein-text-input:focus,
.tradein-textarea-input:focus,
.tradein-select-input:focus {
  outline: none;
  border-color: var(--color-eco-green, #00A86B);
  border-width: 2px;
}

.tradein-textarea-input { resize: vertical; }

/* slider wrap → see .tradein-slider-wrap below */
.tradein-slider-input { flex: 1; accent-color: var(--color-eco-green, #00a86b); }

.tradein-slider-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #111111);
  min-width: 3rem;
  text-align: right;
}

/* ── Hard-stop / soft banner ─────────────────────────────────────────────── */
.tradein-block-banner {
  background: #fdf2f2;
  border: 1px solid #f5c2c2;
  border-radius: 12px;
  padding: 1rem 1.125rem;
  margin-top: 1rem;
}

.tradein-block-banner__reason {
  font-size: 0.875rem;
  font-weight: 600;
  color: #9b2c2c;
  margin: 0 0 0.25rem;
}

.tradein-block-banner__sub {
  font-size: 0.8125rem;
  color: #9b2c2c;
  margin: 0 0 0.875rem;
  opacity: 0.85;
}

.tradein-block-banner__actions { display: flex; gap: 0.625rem; flex-wrap: wrap; }

.tradein-block-banner--soft {
  background: #fefaf0;
  border-color: #f5e2b8;
}

.tradein-block-banner--soft .tradein-block-banner__reason,
.tradein-block-banner--soft .tradein-block-banner__sub { color: #92660d; }

/* ── Recycling panel ─────────────────────────────────────────────────────── */
.tradein-step-panel--eco { text-align: center; }
.tradein-eco-icon { font-size: 3rem; margin-bottom: 0.5rem; display:flex; align-items:center; justify-content:center; }
.tradein-eco-icon svg { width: 64px; height: 64px; color: var(--color-eco-green, #00A86B); }

.tradein-step-sub {
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #6b6b6b);
  margin: 0 auto 1.75rem;
  max-width: 380px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* ── Photo grid ──────────────────────────────────────────────────────────── */
.tradein-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

@media (min-width: 540px) {
  .tradein-photo-grid { grid-template-columns: repeat(3, 1fr); }
}

.tradein-photo-slot {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px dashed var(--color-border, #d0d0d0);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--color-bg-secondary, #f5f5f7);
  transition:
    border-color var(--transition, 0.2s ease),
    transform var(--transition, 0.2s ease);
  will-change: transform;
  transform: translateZ(0);
}

.tradein-photo-slot:hover {
  border-color: var(--color-border, #d0d0d0);
  transform: translateY(-1px) translateZ(0);
}

.tradein-photo-slot--filled {
  border-style: solid;
  border-color: var(--color-eco-green, #00a86b);
}

.tradein-photo-slot--required::after {
  content: '*';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 16px;
  color: var(--color-eco-green, #00a86b);
  font-weight: 700;
  line-height: 1;
}

.tradein-photo-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.tradein-photo-slot__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary, #6b6b6b);
  text-align: center;
  padding: 0.5rem;
  pointer-events: none;
  letter-spacing: -0.01em;
}

.tradein-photo-slot__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Payout cards ────────────────────────────────────────────────────────── */
.tradein-payout-label {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 1.5rem 0 0.875rem;
  color: var(--color-text, #111111);
  letter-spacing: -0.01em;
}

.tradein-payout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 400px) {
  .tradein-payout-grid { grid-template-columns: 1fr; }
}

.tradein-payout-card {
  position: relative;
  appearance: none;
  background: var(--color-bg-secondary, #f5f5f7);
  border: 1px solid var(--color-border-light, #e5e5e5);
  border-radius: 16px;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  color: var(--color-text, #111111);
  transition:
    border-color var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease);
  will-change: transform;
  transform: translateZ(0);
}

.tradein-payout-card:hover {
  transform: translateY(-1px) translateZ(0);
  box-shadow: 0 4px 8px rgba(0,0,0,.06);
}

.tradein-payout-card--active {
  border-color: var(--color-eco-green, #00a86b) !important;
  border-width: 2px;
}

.tradein-payout-card__badge {
  position: absolute;
  top: -10px; right: 10px;
  background: var(--color-eco-green, #00a86b);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 980px;
}

.tradein-payout-card__name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary, #6b6b6b);
  letter-spacing: -0.01em;
}

.tradein-payout-card__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text, #111111);
  letter-spacing: -0.02em;
}

/* ── Confirmation ────────────────────────────────────────────────────────── */
.tradein-confirmation {
  text-align: center;
  padding: 2rem 0 1rem;
  animation: fadeInScale 0.5s var(--ease-out-quart, ease) backwards;
}

.tradein-confirmation__icon {
  display: block;
  font-size: 48px;
  margin-bottom: 0.875rem;
  color: var(--color-eco-green, #00a86b);
}

.tradein-confirmation__reference {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0.375rem 0 0.875rem;
  color: var(--color-text-secondary, #6b6b6b);
  letter-spacing: -0.01em;
}

.tradein-confirmation__detail {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6b6b6b);
  max-width: 400px;
  margin: 0 auto 1.5rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* ── Buttons — match device-cta-btn from device-category.css ─────────────── */
.tradein-btn-primary {
  appearance: none;
  background: var(--color-eco-green, #00a86b);
  color: #ffffff;
  border: none;
  border-radius: 980px;
  padding: 0.8125rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,168,107,.2);
  transition:
    background-color var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease);
  will-change: transform;
  transform: translateZ(0);
}

.tradein-btn-primary:hover:not(:disabled) {
  background: var(--color-asc-primary-active, #007A4F);
  box-shadow: 0 8px 20px rgba(0,168,107,.3);
  transform: translateY(-1px) translateZ(0);
}

.tradein-btn-primary:active:not(:disabled) {
  transform: scale(0.97) translateZ(0);
  transition-duration: var(--timing-instant, 0.08s);
}

.tradein-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.tradein-btn-secondary {
  appearance: none;
  background: transparent;
  color: var(--color-text, #111111);
  border: 1px solid var(--color-border-light, #e5e5e5);
  border-radius: 980px;
  padding: 0.8125rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: border-color var(--transition-fast, 0.15s ease);
}

.tradein-btn-secondary:hover {
  border-color: var(--color-border, #d0d0d0);
}

.tradein-btn-eco {
  background: var(--color-eco-green, #00a86b);
  color: #ffffff;
  border: none;
  border-radius: 980px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background-color var(--transition-fast, 0.15s ease);
}

.tradein-btn-eco:hover {
  background: var(--color-eco-green-dark, #00956e);
}

.tradein-btn-ghost-sm {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--color-text-secondary, #6b6b6b);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.5rem;
  text-decoration: underline;
  letter-spacing: -0.01em;
}

/* ── Required field indicators ───────────────────────────────────────────── */
.tradein-required-star {
  color: var(--color-eco-green, #00a86b);
  font-weight: 700;
  margin-left: 3px;
  font-size: 0.875rem;
  line-height: 1;
  vertical-align: middle;
}

.tradein-input--missing {
  border-color: #e05555 !important;
  box-shadow: 0 0 0 3px rgba(224,85,85,.15) !important;
  animation: wShake 0.35s ease;
}

@keyframes wShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX( 4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX( 3px); }
}

/* ── Loading skeleton (same shimmer as device-category.css) ──────────────── */
.tradein-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary, #f5f5f7) 0%,
    var(--color-border-light, #e5e5e5) 50%,
    var(--color-bg-secondary, #f5f5f7) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 12px;
}

/* ── Restore banner ──────────────────────────────────────────────────────── */
.tradein-restore-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--color-bg-secondary, #f5f5f7);
  border: 1px solid var(--color-border-light, #e5e5e5);
  border-radius: 12px;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6b6b6b);
}

.tradein-restore-banner__btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--color-eco-green, #00a86b);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

/* ── Estimate placeholder state ──────────────────────────────────────────── */
.tradein-footer-estimate__value--placeholder {
  color: var(--color-text-tertiary, #aaaaaa);
  letter-spacing: 0.04em;
}

/* ── Fade transition helpers (used by x-transition on series/device rows) ── */
.tradein-fade-enter { transition: opacity 0.25s ease, transform 0.25s ease; }
.tradein-fade-enter-start { opacity: 0; transform: translateY(6px); }
.tradein-fade-enter-end   { opacity: 1; transform: translateY(0); }

/* ── Recycling pivot footer — replaces standard footer on hard stop ──────── */
.tradein-wizard-footer--recycling {
  background: var(--asc-green-50, #F2FBF8);
  border-top: 2px solid var(--color-eco-green, #00A86B);
}

.tradein-footer-recycling-msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-eco-green, #00A86B);
}

.tradein-footer-recycling-msg__icon {
  font-size: 1.25rem;
}

/* ── Footer hard-stop state (eligibility step) ───────────────────────────── */
.tradein-footer-hard-stop {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Recycle button always on the right */
  width: 100%;
  gap: 0.75rem;
}

/* ── Floating label fields (recycling form) ──────────────────────────────── */
.tradein-float-field {
  position: relative;
  margin-bottom: 1.25rem;
}

.tradein-float-input {
  width: 100%;
  padding: 1.375rem 1rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text, #1d1d1f);
  background: var(--color-bg, #ffffff);
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  outline: none;
  transition: border-color var(--transition, 250ms ease);
  box-sizing: border-box;
}

.tradein-float-input:focus {
  border-color: var(--color-eco-green, #00A86B);
}

.tradein-float-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--color-text-secondary, #86868b);
  pointer-events: none;
  transition: top var(--transition-fast, 150ms ease),
              font-size var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}

/* Float up when input has content or is focused */
.tradein-float-input:focus + .tradein-float-label,
.tradein-float-input:not(:placeholder-shown) + .tradein-float-label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.75rem;
  color: var(--color-eco-green, #00A86B);
}

/* ── Recycling shipping option buttons (no radio circles) ─────────────────── */
.tradein-recycle-shipping {
  margin-top: 0.25rem;
}

.tradein-recycle-shipping__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary, #86868b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.tradein-recycle-ship-btn {
  display: block;
  width: 100%;
  appearance: none;
  background: var(--color-bg, #ffffff);
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text, #1d1d1f);
  cursor: pointer;
  text-align: left;
  margin-bottom: 0.5rem;
  transition: border-color var(--transition, 250ms ease),
              background var(--transition, 250ms ease);
}

.tradein-recycle-ship-btn:hover {
  border-color: var(--color-border, #d2d2d7);
}

.tradein-recycle-ship-btn--active {
  border-color: var(--color-eco-green, #00A86B);
  border-width: 2px;
  background: var(--asc-green-50, #F2FBF8);
  font-weight: 500;
  color: var(--color-eco-green, #00A86B);
}

/* ── Review my answers link (recycling footer) ───────────────────────────── */
.tradein-review-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary, #86868b);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.tradein-review-link:hover {
  color: var(--color-text, #1d1d1f);
}

/* ── Float field: select variant ────────────────────────────────────────── */
.tradein-float-select {
  appearance: none;
  -webkit-appearance: none;
  padding-top: 1.375rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
}

/* Float label for select: always floated since value is controlled */
.tradein-float-select + .tradein-float-label,
.tradein-float-select:focus + .tradein-float-label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.75rem;
  color: var(--color-text-secondary, #86868b);
}

.tradein-float-select:focus + .tradein-float-label {
  color: var(--color-eco-green, #00A86B);
}

/* ── Float field: textarea variant ──────────────────────────────────────── */
.tradein-float-field--textarea .tradein-float-input {
  padding-top: 1.5rem;
  resize: vertical;
  min-height: 80px;
}

.tradein-float-field--textarea .tradein-float-label {
  top: 1rem;
}

.tradein-float-field--textarea .tradein-float-input:focus + .tradein-float-label,
.tradein-float-field--textarea .tradein-float-input:not(:placeholder-shown) + .tradein-float-label {
  top: 0.375rem;
}

/* ── Address row: 2-col side-by-side ────────────────────────────────────── */
.tradein-offer-addr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .tradein-offer-addr-row { grid-template-columns: 1fr; }
}

/* ── Single slider with tier labels ─────────────────────────────────────── */
.tradein-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tradein-slider-value--tier {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-eco-green, #00A86B);
  min-height: 1.4em;
}

.tradein-slider-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}

.tradein-slider-tick {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #86868b);
  text-align: center;
  flex: 1;
  line-height: 1.3;
}

.tradein-slider-tick--active {
  color: var(--color-eco-green, #00A86B);
  font-weight: 600;
}


/* =============================================================================
   STANDALONE PAGES — tradein-pg-* namespace
   Used by: Track Your Trade-In, Offer Response, and any future standalone
   trade-in pages that use the page-hero + body-card layout pattern.

   Deliberately scoped to tradein-pg-* so it cannot conflict with account.css
   (asc-pg-*) or the wizard flow (tradein-wizard-*).
   ============================================================================= */


/* ── Page shell ──────────────────────────────────────────────────────────────
   Replaces .tradein-wizard-page for standalone pages that use the
   page-hero layout instead of the centred card layout.             */

.tradein-pg {
  min-height: 60vh;
  background: var(--color-bg, #fff);
  padding-bottom: 6rem;
}


/* ── Page hero (header band) ─────────────────────────────────────────────── */

.tradein-pg-hero {
  border-top:    0.5px solid var(--color-border-light, #e8e8ed);
  border-bottom: 0.5px solid var(--color-border-light, #e8e8ed);
  padding: 3rem 0 2.5rem;
  background-color: var(--color-bg-secondary, #f5f5f7);
  animation: fadeInUp 0.45s var(--ease-out-quart, cubic-bezier(.25,.46,.45,.94)) backwards;
}

.tradein-pg-hero__inner {
  max-width: var(--container-wide, 1200px);
  margin: 0 auto;
  padding: 0 2rem;
}

.tradein-pg-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-eco-green, #00a86b);
  margin-bottom: 0.875rem;
}

.tradein-pg-hero__eyebrow::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-eco-green, #00a86b);
  border-radius: 2px;
}

.tradein-pg-hero__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text, #1d1d1f);
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.tradein-pg-hero__sub {
  font-size: 1rem;
  color: var(--color-text-secondary, #6e6e73);
  margin: 0;
  line-height: 1.55;
}

.tradein-pg-hero__sub a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ── Body container ──────────────────────────────────────────────────────────
   Narrow (var(--container-max)) for forms, or full width if needed. */

.tradein-pg-body {
  max-width: var(--container-max, 980px);
  margin: 0 auto;
  padding: 3.5rem 2rem 0;
  animation: fadeInUp 0.45s var(--ease-out-quart, cubic-bezier(.25,.46,.45,.94)) 0.08s backwards;
}

.tradein-pg-body--wide {
  max-width: var(--container-wide, 1200px);
}


/* ── Page card ───────────────────────────────────────────────────────────────
   The secondary-background card used on standalone pages.
   Intentionally different from .tradein-wizard-card (white bg, 1px border)
   which is used inside the multi-step wizard flow.                  */

.tradein-pg-card {
  background: var(--color-bg-secondary, #f5f5f7);
  border-radius: 1.5rem;
  padding: 2.25rem 2.5rem;
  margin-bottom: 1rem;
}

/* Centered variant — for the track lookup form, offer confirmation, etc. */
.tradein-pg-card--centered {
  max-width: var(--container-narrow, 680px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.tradein-pg-card--centered .tradein-pg-input,
.tradein-pg-card--centered .tradein-btn-primary,
.tradein-pg-card--centered button[type="submit"] {
  text-align: left; /* labels inside still read left */
}

.tradein-pg-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text, #1d1d1f);
  margin: 0 0 0.25rem;
}

.tradein-pg-card__desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #6e6e73);
  margin: 0;
  line-height: 1.5;
}

.tradein-pg-card__header {
  margin-bottom: 1.75rem;
}


/* ── Page input ──────────────────────────────────────────────────────────────
   Used on standalone forms (track, offer response).
   Richer than .asc-track-input: has shadow + transparent-border focus ring
   matching the account.css .asc-input pattern.                      */

.tradein-pg-input {
  width: 100%;
  padding: 1.125rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text, #1d1d1f);
  background: var(--color-bg, #fff);
  border: 1.5px solid transparent;
  border-radius: 0.75rem;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tradein-pg-input::placeholder {
  color: var(--color-text-secondary, #6e6e73);
  opacity: 0.5;
}

.tradein-pg-input:focus {
  border-color: var(--color-eco-green, #00a86b);
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.1);
}

.tradein-pg-input--error {
  border-color: var(--color-error, #ff3b30) !important;
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.08);
}

.tradein-pg-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary, #6e6e73);
  margin-bottom: 0.375rem;
}


/* ── Inline notice bar ───────────────────────────────────────────────────────
   Wizard-specific equivalent of .cv2-undo from account pages.
   Slides in from the top; used on track/offer pages for errors/success.
   Alpine transitions use class names below.                          */

.tradein-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.tradein-notice--success {
  background: var(--color-eco-green, #00a86b);
  color: #fff;
}

.tradein-notice--danger {
  background: var(--color-error, #ff3b30);
  color: #fff;
}

.tradein-notice--warning {
  background: #ff9f0a;
  color: #fff;
}

.tradein-notice--info {
  background: var(--color-text, #1d1d1f);
  color: #fff;
}

.tradein-notice__dismiss {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 150ms ease;
}

.tradein-notice__dismiss:hover { opacity: 1; }

/* Alpine transition classes — slide down from top */
.tradein-notice-enter        { transition: transform 200ms ease, opacity 200ms ease; }
.tradein-notice-enter-start  { transform: translateY(-100%); opacity: 0; }
.tradein-notice-enter-end    { transform: translateY(0);     opacity: 1; }
.tradein-notice-leave        { transition: transform 150ms ease, opacity 150ms ease; }
.tradein-notice-leave-start  { transform: translateY(0);     opacity: 1; }
.tradein-notice-leave-end    { transform: translateY(-100%); opacity: 0; }


/* ── Container classes ───────────────────────────────────────────────────────
   Replaces inline style="max-width:...;margin:0 auto;..." on twig wrappers. */

.tradein-wizard-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  max-width: var(--container-wide, 1200px);
}

.tradein-wizard-container--narrow {
  max-width: var(--container-narrow, 680px);
}

.tradein-wizard-container--max {
  max-width: var(--container-max, 980px);
}

.tradein-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  max-width: var(--container-wide, 1200px);
}

.tradein-container--narrow {
  max-width: var(--container-narrow, 680px);
}

.tradein-container--max {
  max-width: var(--container-max, 980px);
}


/* ── Hero CTA button group ───────────────────────────────────────────────────
   Secondary (ghost) buttons float left; primary CTA anchors to the right.
   Uses row-reverse so the DOM order (primary first) is the visual order
   (primary right). Buttons that have no text are not rendered in Twig
   so they produce zero width and no gap.                             */

.tradein-hero-ctas {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  gap: 0.75rem;
  align-items: center;
  animation: asc-fadeInUp 0.5s ease 0.2s backwards;
}

/* On mobile: stack vertically, primary on top */
@media (max-width: 639px) {
  .tradein-hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .tradein-hero-ctas .tradein-btn-primary,
  .tradein-hero-ctas .asc-tradein-btn--ghost,
  .tradein-hero-ctas .asc-tradein-btn--primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* ── prefers-reduced-motion ──────────────────────────────────────────────────
   Kill all wizard CSS animations for users who prefer no motion.    */

@media (prefers-reduced-motion: reduce) {
  .tradein-wizard-wrap,
  .tradein-select-page,
  .tradein-step-panel,
  .tradein-offer-card,
  .tradein-skeleton,
  .tradein-pg-hero,
  .tradein-pg-body,
  .tradein-hero-ctas,
  .asc-fadein-up,
  .asc-fadein-up-d1,
  .asc-fadein-up-d2,
  .asc-fadein-up-d3 {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ── Responsive adjustments ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .tradein-pg-hero          { padding: 2rem 0 1.75rem; }
  .tradein-pg-hero__inner   { padding: 0 1.25rem; }
  .tradein-pg-body          { padding: 2rem 1.25rem 0; }
  .tradein-pg-hero__title   { font-size: clamp(1.625rem, 6vw, 2rem); }
  .tradein-pg-card          { padding: 1.5rem; border-radius: 1.25rem; }
  .tradein-container        { padding: 0 1rem; }
}


/* =============================================================================
   TRADEIN-PG UTILITIES — component classes used by standalone pages
   (track, offer response). All scoped to tradein-pg-* or tradein-lb-*,
   tradein-status-pill to avoid conflicts with account.css (asc-pg-*).
   ============================================================================= */


/* ── Stack layout ─────────────────────────────────────────────────────────── */
.tradein-pg-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Card variants ─────────────────────────────────────────────────────────── */
.tradein-pg-card__row-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.tradein-pg-divider {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-light, #E8E8ED);
}

.tradein-pg-divider-bottom {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-light, #E8E8ED);
}


/* ── Typography helpers ────────────────────────────────────────────────────── */
.tradein-pg-meta {
  font-size: 13px;
  color: var(--color-text-secondary, #86868B);
  margin: 0 0 4px;
}

.tradein-pg-device-name {
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--color-text, #1D1D1F);
}

.tradein-pg-value-label {
  font-size: 13px;
  color: var(--color-text-secondary, #86868B);
  margin: 0 0 2px;
}

.tradein-pg-value {
  font-weight: 700;
  font-size: 32px;
  color: var(--color-eco-green, #00A86B);
  margin: 0;
  letter-spacing: -0.03em;
}

.tradein-pg-value-strike {
  text-decoration: line-through;
  color: var(--color-text-secondary, #86868B);
  font-size: 15px;
  margin: 0 0 6px;
}

.tradein-pg-empty {
  color: var(--color-text-secondary, #86868B);
  font-size: 14px;
  margin: 0;
}

.tradein-pg-expiry {
  font-size: 12px;
  color: var(--color-text-secondary, #86868B);
  margin: 1rem 0 0;
  text-align: center;
}

.tradein-pg-sub-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary, #86868B);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.5rem 0 0.625rem;
}

.tradein-pg-link {
  font-size: 13px;
  color: var(--color-eco-green, #00A86B);
  text-decoration: none;
}

.tradein-pg-link:hover { text-decoration: underline; }

.tradein-pg-code {
  font-size: 12px;
  background: var(--neutral-100, #F3F4F6);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 0.375rem);
}


/* ── Inline notice (non-fixed, inline in card) ─────────────────────────────── */
.tradein-pg-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-xl, 1rem);
  font-size: 14px;
}

.tradein-pg-notice--error {
  background: #fff2f2;
  color: var(--color-error, #FF3B30);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

.tradein-pg-notice--success {
  background: var(--asc-green-50, #F2FBF8);
  color: var(--asc-green-800, #005C3B);
  border: 1px solid var(--asc-green-200, #BFE7D8);
}


/* ── Form helpers ──────────────────────────────────────────────────────────── */
.tradein-pg-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tradein-pg-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: left;
}

.tradein-pg-input--uppercase { text-transform: uppercase; }

.tradein-pg-submit {
  width: 100%;
  justify-content: center;
}


/* ── Offer confirmation icon ───────────────────────────────────────────────── */
.tradein-pg-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--asc-green-100, #E6F6F0);
  color: var(--color-eco-green, #00A86B);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.tradein-pg-offer-value {
  margin-bottom: 1.75rem;
  text-align: center;
}


/* ── Status pill (shared between track + account) ──────────────────────────── */
.tradein-status-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--neutral-100, #F3F4F6);
  white-space: nowrap;
  display: inline-block;
  color: var(--color-text-secondary, #86868B);
}

.tradein-status-pill[data-status="70"],
.tradein-status-pill[data-status="80"],
.tradein-status-pill[data-status="81"] { background: var(--asc-green-100, #E6F6F0); color: var(--asc-green-800, #005C3B); }
.tradein-status-pill[data-status="90"] { background: #E3F2FD; color: #1565C0; }
.tradein-status-pill[data-status="83"],
.tradein-status-pill[data-status="100"],
.tradein-status-pill[data-status="150"] { background: #FFF2F2; color: var(--color-error, #FF3B30); }


/* ── Two-column comparison grid ────────────────────────────────────────────── */
.tradein-pg-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 640px) {
  .tradein-pg-two-col { grid-template-columns: 1fr 1fr; }
}


/* ── Answer list ───────────────────────────────────────────────────────────── */
.tradein-pg-answer-list { display: flex; flex-direction: column; }

.tradein-pg-answer-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border-light, #E8E8ED);
  flex-wrap: wrap;
  align-items: baseline;
}

.tradein-pg-answer-row:last-child { border-bottom: none; }

.tradein-pg-answer-row--discrepancy {
  background: var(--secondary-50, #FFF7ED);
  margin: 0 -0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md, 0.625rem);
  border-bottom: none;
}

.tradein-pg-answer-label {
  font-size: 13px;
  color: var(--color-text-secondary, #86868B);
  flex: 1;
  min-width: 100px;
}

.tradein-pg-answer-value {
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  color: var(--color-text, #1D1D1F);
}

.tradein-pg-chip {
  background: var(--neutral-100, #F3F4F6);
  border-radius: var(--radius-full, 9999px);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text, #1D1D1F);
}

.tradein-pg-discrepancy-badge {
  display: inline-block;
  background: var(--secondary-100, #FFEDD5);
  color: var(--secondary-700, #C2410C);
  border-radius: var(--radius-full, 9999px);
  font-size: 11px;
  padding: 1px 7px;
  margin-left: 4px;
  white-space: nowrap;
}

.tradein-pg-tech-notes {
  background: var(--asc-green-50, #F2FBF8);
  border-radius: var(--radius-lg, 0.75rem);
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary, #6E6E73);
  border-left: 3px solid var(--color-eco-green, #00A86B);
}


/* ── Timeline ──────────────────────────────────────────────────────────────── */
.tradein-pg-timeline {
  position: relative;
  padding-left: 1.5rem;
}

.tradein-pg-timeline__line {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border-light, #E8E8ED);
}

.tradein-pg-timeline__item {
  position: relative;
  margin-bottom: 1.25rem;
}

.tradein-pg-timeline__dot {
  position: absolute;
  left: -1.5rem;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-border, #D2D2D7);
  border: 2px solid var(--color-bg, #fff);
}

.tradein-pg-timeline__dot--active {
  background: var(--color-eco-green, #00A86B);
  box-shadow: 0 0 0 2px var(--color-eco-green, #00A86B);
}

.tradein-pg-timeline__status {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 2px;
  color: var(--color-text, #1D1D1F);
}

.tradein-pg-timeline__date {
  font-size: 12px;
  color: var(--color-text-secondary, #86868B);
  margin: 0;
}

.tradein-pg-timeline__comment {
  font-size: 13px;
  color: var(--color-text-secondary, #6E6E73);
  margin: 3px 0 0;
}


/* ── Photo grid ────────────────────────────────────────────────────────────── */
.tradein-pg-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.tradein-pg-photo-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.tradein-pg-photo-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg, 0.75rem);
  border: 1.5px solid var(--color-border-light, #E8E8ED);
  transition: box-shadow var(--transition-fast, 150ms), transform var(--transition-fast, 150ms);
}

.tradein-pg-photo-thumb:hover img {
  box-shadow: var(--shadow-md);
  transform: scale(1.03);
}

.tradein-pg-photo-thumb span {
  font-size: 10px;
  color: var(--color-text-secondary, #86868B);
  text-align: center;
  line-height: 1.2;
}


/* ── Footer link row ───────────────────────────────────────────────────────── */
.tradein-pg-footer-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0.25rem;
}

.tradein-pg-footer-links--center { justify-content: center; }


/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.tradein-lb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.tradein-lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 90vw;
  max-height: 90vh;
}

.tradein-lb-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-2xl, 1.25rem);
  box-shadow: var(--shadow-xl);
}

.tradein-lb-caption {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  text-align: center;
  margin: 0;
  letter-spacing: 0.02em;
}

.tradein-lb-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  border-radius: var(--radius-full, 9999px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms);
  backdrop-filter: blur(4px);
}

.tradein-lb-close:hover { background: rgba(255, 255, 255, 0.22); }

.tradein-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  border-radius: var(--radius-full, 9999px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms);
  backdrop-filter: blur(4px);
}

.tradein-lb-nav:hover { background: rgba(255, 255, 255, 0.22); }
.tradein-lb-nav--prev { left: 1.25rem; }
.tradein-lb-nav--next { right: 1.25rem; }

.tradein-lb-counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* Lightbox Alpine transitions */
.tradein-lb-enter        { transition: opacity 200ms ease; }
.tradein-lb-start        { opacity: 0; }
.tradein-lb-end          { opacity: 1; }
.tradein-lb-leave        { transition: opacity 150ms ease; }
.tradein-lb-img-enter    { transition: opacity 150ms ease, transform 150ms ease; }
.tradein-lb-img-start    { opacity: 0; transform: scale(0.97); }
.tradein-lb-img-end      { opacity: 1; transform: scale(1); }


/* ── Account page cards ────────────────────────────────────────────────────── */
.tradein-account-card {
  background: var(--color-bg, #fff);
  border-radius: var(--radius-3xl, 1.5rem);
  border: 1.5px solid var(--color-border-light, #E8E8ED);
  padding: 1.25rem 1.5rem;
  transition: box-shadow var(--transition-fast, 150ms);
}

.tradein-account-card:hover { box-shadow: var(--shadow-md); }


/* ── Responsive: tradein-pg-body on mobile ─────────────────────────────────── */
@media (max-width: 640px) {
  .tradein-pg-body { padding: 2rem 1.25rem 0; }
  .tradein-pg-card { padding: 1.5rem; border-radius: var(--radius-2xl, 1.25rem); }
  .tradein-pg-value { font-size: 26px; }
}

/* ── prefers-reduced-motion additions ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tradein-pg-hero,
  .tradein-pg-body,
  .tradein-account-card {
    animation: none !important;
    transition: none !important;
  }
}


/* =============================================================================
   TRADE-IN STATUS PAGE — asc-status-* namespace
   All styles for asc_tradein_status.twig. No inline styles in the twig.
   ============================================================================= */

/* Page shell overrides */
.asc-status-pg { background-color: var(--color-bg-secondary, #f5f5f7); }

/* Hero: white default, overridden per status via data-status attribute */
.tradein-pg-hero.tradein-status-bg { background: var(--color-bg, #ffffff); }
.tradein-pg-hero.tradein-status-bg[data-status="70"],
.tradein-pg-hero.tradein-status-bg[data-status="80"],
.tradein-pg-hero.tradein-status-bg[data-status="81"] { background-color: var(--asc-green-100, #E6F6F0); }
.tradein-pg-hero.tradein-status-bg[data-status="73"],
.tradein-pg-hero.tradein-status-bg[data-status="75"] { background-color: rgba(255, 159, 10, 0.12); }
.tradein-pg-hero.tradein-status-bg[data-status="82"],
.tradein-pg-hero.tradein-status-bg[data-status="83"],
.tradein-pg-hero.tradein-status-bg[data-status="100"],
.tradein-pg-hero.tradein-status-bg[data-status="150"] { background-color: rgba(255, 59, 48, 0.08); }
.tradein-pg-hero.tradein-status-bg[data-status="90"] { background-color: #E3F2FD; }

/* Stack layout */
.asc-status-stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* Status card */
.asc-tradein-status-card { background: var(--color-bg, #fff); border-radius: var(--radius-3xl, 1.5rem); border: 1.5px solid var(--color-border-light, #E8E8ED); box-shadow: var(--shadow-sm); padding: 1.5rem; }

/* Card: split row (ref/device/date left, pill right) */
.asc-status-card__split { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.asc-status-card__ref    { font-size: 13px; color: var(--color-text-secondary, #86868B); margin: 0 0 4px; }
.asc-status-card__device { font-weight: 700; font-size: 22px; margin: 0 0 4px; color: var(--color-text, #1D1D1F); }
.asc-status-card__date   { font-size: 13px; color: var(--color-text-secondary, #86868B); margin: 0; }

/* Card: generic section divider */
.asc-status-card__section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-light, #E8E8ED); }

/* Value display */
.asc-status-card__label       { font-size: 13px; color: var(--color-text-secondary, #86868B); margin: 0 0 2px; }
.asc-status-card__value       { font-weight: 700; font-size: 32px; color: var(--color-eco-green, #00A86B); margin: 0; letter-spacing: -0.02em; }
.asc-status-card__value-strike { text-decoration: line-through; color: var(--color-text-secondary, #86868B); font-size: 15px; margin: 0 0 6px; }

/* Offer respond */
.asc-status-card__respond-prompt { font-weight: 600; margin: 0 0 0.75rem; color: var(--color-text, #1D1D1F); }
.asc-status-card__respond-btn    { text-decoration: none; display: inline-block; }

/* Status pill */
.asc-status-pill { font-size: 12px; font-weight: 600; padding: 0.3rem 0.875rem; border-radius: var(--radius-full, 9999px); background: var(--neutral-100, #F3F4F6); white-space: nowrap; display: inline-block; color: var(--color-text-secondary, #86868B); }
.asc-status-pill[data-status="70"],
.asc-status-pill[data-status="80"],
.asc-status-pill[data-status="81"] { background: var(--asc-green-100, #E6F6F0); color: var(--asc-green-800, #005C3B); }
.asc-status-pill[data-status="73"],
.asc-status-pill[data-status="75"] { background: rgba(255, 159, 10, 0.15); color: #7A4700; }
.asc-status-pill[data-status="82"] { background: #FFF2F2; color: var(--color-error, #FF3B30); }
.asc-status-pill[data-status="90"] { background: #E3F2FD; color: #1565C0; }
.asc-status-pill[data-status="83"],
.asc-status-pill[data-status="100"],
.asc-status-pill[data-status="150"] { background: #FFF2F2; color: var(--color-error, #FF3B30); }

/* Timeline */
.asc-status-timeline { position: relative; padding-left: 1.5rem; }
.asc-status-timeline__line { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--color-border-light, #E8E8ED); }
.asc-status-timeline__item { position: relative; margin-bottom: 1.25rem; }
.asc-status-timeline__dot { position: absolute; left: -1.5rem; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-border, #D2D2D7); border: 2px solid var(--color-bg, #fff); }
.asc-status-timeline__dot--active { background: var(--color-eco-green, #00A86B); box-shadow: 0 0 0 2px var(--color-eco-green, #00A86B); }
.asc-status-timeline__status  { font-weight: 600; font-size: 14px; margin: 0 0 2px; color: var(--color-text, #1D1D1F); }
.asc-status-timeline__date    { font-size: 12px; color: var(--color-text-secondary, #86868B); margin: 0; }
.asc-status-timeline__comment { font-size: 13px; color: var(--color-text-secondary, #6E6E73); margin: 3px 0 0; }

/* Two-column grid */
.asc-track-two-col { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 640px) { .asc-track-two-col { grid-template-columns: 1fr 1fr; } }

/* Answer list */
.asc-status-answer-list { display: flex; flex-direction: column; }
.asc-track-section-title { font-size: 15px; font-weight: 700; margin: 0 0 1rem; color: var(--color-text, #1D1D1F); }
.asc-track-sub-title { font-size: 12px; font-weight: 700; color: var(--color-text-secondary, #86868B); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.625rem; }
.asc-track-sub-title--spaced { margin-top: 1.5rem; }
.asc-track-answer-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--color-border-light, #E8E8ED); flex-wrap: wrap; align-items: baseline; }
.asc-track-answer-row:last-child { border-bottom: none; }
.asc-track-answer-row--discrepancy { background: var(--secondary-50, #FFF7ED); margin: 0 -0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md, 0.625rem); border-bottom: none; }
.asc-track-answer-label { font-size: 13px; color: var(--color-text-secondary, #86868B); flex: 1; min-width: 100px; }
.asc-track-answer-value { font-size: 13px; font-weight: 500; text-align: right; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; color: var(--color-text, #1D1D1F); }
.asc-track-chip { background: var(--neutral-100, #F3F4F6); border-radius: var(--radius-full, 9999px); padding: 2px 10px; font-size: 12px; font-weight: 500; }
.asc-track-discrepancy-badge { display: inline-block; background: var(--secondary-100, #FFEDD5); color: var(--secondary-700, #C2410C); border-radius: var(--radius-full, 9999px); font-size: 11px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.asc-status-code { font-size: 12px; background: var(--neutral-100, #F3F4F6); padding: 2px 6px; border-radius: var(--radius-sm, 0.375rem); }
.asc-status-empty { color: var(--color-text-secondary, #86868B); font-size: 14px; margin: 0; }

/* Tech notes */
.asc-status-tech-notes { background: var(--asc-green-50, #F2FBF8); border-radius: var(--radius-lg, 0.75rem); padding: 0.875rem 1rem; margin-bottom: 1.25rem; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary, #6E6E73); border-left: 3px solid var(--color-eco-green, #00A86B); }

/* Photo grid */
.asc-track-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.asc-track-photo-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; }
.asc-track-photo-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg, 0.75rem); border: 1.5px solid var(--color-border-light, #E8E8ED); transition: box-shadow var(--transition-fast, 150ms), transform var(--transition-fast, 150ms); }
.asc-track-photo-thumb:hover img { box-shadow: var(--shadow-md); transform: scale(1.03); }
.asc-track-photo-thumb span { font-size: 10px; color: var(--color-text-secondary, #86868B); text-align: center; line-height: 1.2; }

/* Footer links */
.asc-status-footer { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; padding: 0 0.25rem; }
.asc-status-footer__link { font-size: 13px; color: var(--color-eco-green, #00A86B); text-decoration: none; }
.asc-status-footer__link:hover { text-decoration: underline; }