/* ──────────────────────────────────────────────────────────────────────────
   lead-offer.css — reskins /lead to match the offer page design system
   (boldautotransport.com/offer/<slug>). Loaded LAST so it overrides lead3.css
   + lead3-premium.css. CSS-only: no DOM ids/classes change, so lead3.js is
   untouched. Offer tokens: accent #0369a1, dark hero #0c1929, page #f8f9fb,
   card border #e8ecf1 / radius 14px / soft shadow, Inter (already in use).
   ────────────────────────────────────────────────────────────────────────── */

/* 1 ── Palette tokens (cascade into every var(--blue)/var(--p-blue) usage) ── */
:root {
  --blue: #0369a1;
  --blue-l: #e0f2fe;
  --green: #198754;
  --green-l: #d1fae5;
  --p-blue: #0369a1;
  --p-blue-glow: rgba(3, 105, 161, 0.15);
  --offer-hero: #0c1929;
  --offer-border: #e8ecf1;
}

/* 2 ── Page background ── */
body { background: #f8f9fb !important; }

/* 3 ── Dark navy header band (the offer's signature) ── */
.lh {
  background: var(--offer-hero) !important;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.06) !important;
}
.lh-phone, .lh-phone span, .lh-phone svg { color: #fff !important; }
.lh-phone { background: hsla(0,0%,100%,.08) !important; border-color: hsla(0,0%,100%,.14) !important; }
/* header step nav on dark */
.lh-steps .hs { color: hsla(0, 0%, 100%, 0.55) !important; }
.lh-steps .hs.active { color: #fff !important; }
.lh-steps .hs-sep { color: hsla(0, 0%, 100%, 0.25) !important; }
.lh-steps .hs-num {
  background: hsla(0, 0%, 100%, 0.12) !important;
  color: hsla(0, 0%, 100%, 0.75) !important;
}
.lh-steps .hs.active .hs-num { background: var(--blue) !important; color: #fff !important; }
.lh-steps .hs.done .hs-num { background: var(--green) !important; color: #fff !important; }
/* mobile dots on dark */
.lh-dots .hd { background: hsla(0,0%,100%,.12) !important; color: hsla(0,0%,100%,.7) !important; }
.lh-dots .hd.active { background: var(--blue) !important; color: #fff !important; }

/* 4 ── Cards: offer's clean white + soft shadow + 14px radius ── */
.card,
.sb-card,
.done-quote-card {
  border: 1px solid var(--offer-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.sb-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important; }

/* 5 ── Primary buttons: solid offer blue (next) + green (book) ── */
.btn-next {
  background: var(--blue) !important;
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.18) !important;
  border-radius: 14px !important;
}
.btn-next:hover:not(:disabled) { background: #0c4a6e !important; }
.btn-go {
  background: var(--green) !important;
  box-shadow: 0 2px 8px rgba(25, 135, 84, 0.20) !important;
  border-radius: 14px !important;
}
.btn-go:hover:not(:disabled) { background: #157347 !important; }
/* kill the gradient sheen overlay so the solid colour reads cleanly */
.btn-next::after, .btn-go::after { display: none !important; }

/* 6 ── Inputs: offer focus ring (border already follows --p-blue now) ── */
.fi:focus, .combo-input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12) !important;
}

/* 7 ── Price hero: offer accent (blue price, clean card) ── */
.price-section { border-radius: 16px !important; }
.price-hero-num, .price-hero-dollar, .price-hero-range { color: var(--blue) !important; }
.done-price-val { color: var(--blue) !important; }

/* 8 ── Transport / operability toggles + selected vehicle tiles use --blue (auto) ── */
.tt-opt.selected, .op-opt.selected, .vb.selected {
  border-color: var(--blue) !important;
}

/* 9 ── Progress bar fill ── */
.prog-fill { background: var(--blue) !important; }

/* 10 ── Date step: warm amber highlight while it's "time to pick a date" ──
   Keyed off the "Last step…" banner being visible (#rateInfoBanner shown only when the date
   is unlocked but not yet chosen). Auto-clears once a date is selected (banner hidden). */
#rateInfoBanner:not(.hidden) {
  background: #fff7ed !important;   /* amber-50 */
  border-color: #fdba74 !important; /* amber-300 */
  color: #9a3412 !important;        /* amber-800 */
}
#rateInfoBanner:not(.hidden) strong { color: #7c2d12 !important; }
#rateInfoBanner:not(.hidden) svg { color: #f59e0b !important; }

#fg-date:has(#rateInfoBanner:not(.hidden)) .dp2-bar {
  border-color: #f59e0b !important;        /* amber-500 */
  background: #fffbeb !important;           /* soft amber */
  animation: dateAttention 1.8s ease-in-out infinite;
}
#fg-date:has(#rateInfoBanner:not(.hidden)) .dp2-bar .dp2-icon,
#fg-date:has(#rateInfoBanner:not(.hidden)) .dp2-bar .dp2-placeholder { color: #b45309 !important; }
#fg-date:has(#rateInfoBanner:not(.hidden)) .dp2-bar .dp2-arrow { color: #d97706 !important; }

@keyframes dateAttention {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #fg-date:has(#rateInfoBanner:not(.hidden)) .dp2-bar {
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
  }
}