/* ===========================================================================
   eVans BC — Booking "Ranked Showroom" (Concept B2)
   Dark full-viewport stage (left) + white configure dock (right, 448px).
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  color: #fff; background: #061320; -webkit-font-smoothing: antialiased;
}
.tnum { font-variant-numeric: tabular-nums; }
/* responsive copy toggles — desktop shows .d-only, mobile shows .m-only (≤940px) */
.m-only { display: none; }
.d-only { display: inline; }

@keyframes srRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes srVan  { from { opacity: 0; transform: translateX(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes srRing { from { stroke-dashoffset: 326.7; } to { stroke-dashoffset: 0; } }

/* ===================== SHELL ===================== */
.sr {
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 75% 0%, rgba(47,123,255,.16), transparent 55%),
    linear-gradient(160deg, #0a1c30 0%, #061320 70%);
}
.sr-grid { display: grid; grid-template-columns: minmax(0,1fr) 448px; min-height: 100vh; }
@media (min-width: 941px) {
  /* app shell: viewport-capped so the dock scrolls internally and its footer stays pinned */
  .sr-grid { height: 100vh; min-height: 0; overflow: hidden; }
  .sr-dock { min-height: 0; height: 100vh; }
  .sr-stage { overflow-y: auto; }
}

/* ===================== STAGE ===================== */
.sr-stage { display: flex; flex-direction: column; padding: 26px 48px 30px; min-width: 0; }
.sr-stage__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sr-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.sr-brand img { height: 42px; display: block; }
.sr-brand__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #58d6ff; }
.sr-cancel { font-size: 12.5px; color: #aebfd6; }

.sr-stage__mid { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 10px 0; }
.sr-hero {
  align-self: center; max-height: 340px; max-width: 82%; object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55));
  animation: srVan .45s cubic-bezier(.16,1,.3,1);
}

.sr-heroline { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 8px; }
.sr-herometa { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sr-tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #061320; background: #58d6ff; padding: 4px 10px; border-radius: 999px; }
.sr-specs { font-size: 13px; color: #aebfd6; }
.sr-heroname { margin: 0; font-size: clamp(44px,4.6vw,68px); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.sr-heroline__r { text-align: right; flex: none; padding-bottom: 6px; }
.sr-herorate { font-size: 32px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sr-herorate__u { font-size: 15px; font-weight: 500; color: #aebfd6; }
.sr-heroweekly { font-size: 13px; color: #aebfd6; }

/* range check */
.sr-range { margin-top: 22px; padding: 16px 20px 13px; background: rgba(255,255,255,.05); border: 1px solid #21405e; border-radius: 16px; }
.sr-range__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; font-size: 14px; }
.sr-range__head b { font-size: 14px; }
.sr-range__km { font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: -.02em; }
.sr-range__u { font-size: 13px; color: #aebfd6; }
.sr-range__slider { position: relative; height: 26px; display: flex; align-items: center; }
.sr-range__track { position: absolute; left: 0; right: 0; height: 12px; border-radius: 7px; background: #102740; overflow: hidden; }
.sr-range__fill { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg,#2f7bff,#58d6ff); transition: width .12s ease, background .18s ease; }
.sr-range__ticks { position: relative; height: 17px; margin: 3px 0 8px; }
.sr-range__tick { position: absolute; top: 0; left: 0; transform: translateX(-100%); font-size: 11px; color: #6f86a3; white-space: nowrap; }
.sr-range__verdict { display: block; font-size: 13px; font-weight: 600; color: #58d6ff; }
.sr-range__verdict.warn, .sr-range__verdict.topup { color: #f0b35f; }

input[type=range].sr-km { -webkit-appearance: none; appearance: none; position: relative; width: 100%; height: 26px; margin: 0; background: transparent; outline: none; }
input[type=range].sr-km::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #58d6ff; border: 3px solid #061320; box-shadow: 0 0 12px rgba(88,214,255,.7); cursor: pointer; }
input[type=range].sr-km::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #58d6ff; border: 3px solid #061320; box-shadow: 0 0 12px rgba(88,214,255,.7); cursor: pointer; }
input[type=range].sr-km:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; }

/* ranked switcher */
.sr-rankcap { margin-top: 18px; font-size: 14px; }
.sr-rankcap b { font-size: 14px; }
.sr-switch { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 10px; }
.sr-van {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 12px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1.5px solid #21405e; color: #fff;
  font-family: inherit; text-align: left; transition: border-color .15s, background .15s;
}
.sr-van:hover { border-color: #345c82; }
.sr-van.sel { background: rgba(88,214,255,.10); border-color: #58d6ff; }
.sr-van:focus-visible { outline: 2px solid #58d6ff; outline-offset: 2px; }
.sr-van.off { opacity: .55; cursor: not-allowed; }
.sr-van__rank {
  position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 999px;
  background: rgba(88,214,255,.16); color: #58d6ff;
}
.sr-van__rank.best { background: #58d6ff; color: #061320; }
.sr-van__rank.warn, .sr-van__rank.topup { background: rgba(240,179,95,.18); color: #f0b35f; }
.sr-van__rank.off { background: rgba(255,255,255,.08); color: #aebfd6; }
.sr-van__img { width: 100%; height: 56px; object-fit: contain; }
.sr-van__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.sr-van__name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-van__price { font-size: 12px; color: #aebfd6; flex: none; font-variant-numeric: tabular-nums; }

/* ===================== DOCK ===================== */
.sr-dock { background: #fff; color: #0b1a2d; display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(0,0,0,.35); min-height: 100vh; }
.sr-dock__head { padding: 24px 28px 16px; border-bottom: 1px solid #e2e9f2; }
.sr-dock__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #2f7bff; }
.sr-dock__sub { font-size: 13.5px; color: #586a82; margin-top: 3px; }
.sr-dock__body { flex: 1; overflow-y: auto; min-height: 0; }

/* accordion */
.sr-sec { border-bottom: 1px solid #e2e9f2; }
.sr-sec__hd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 28px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.sr-sec__num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; background: #eaf0f7; color: #586a82; transition: background .15s, color .15s;
}
.sr-sec.open .sr-sec__num { background: #2f7bff; color: #fff; }
.sr-sec.done .sr-sec__num { background: #16b06a; color: #fff; font-size: 0; }
.sr-sec.done .sr-sec__num::after { content: '✓'; font-size: 14px; }
.sr-sec__title { font-size: 15px; color: #0b1a2d; }
.sr-sec__summary { margin-left: auto; font-size: 13px; color: #586a82; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.sr-sec__chev { flex: none; font-size: 13px; color: #586a82; transition: transform .2s; }
.sr-sec.open .sr-sec__chev { transform: rotate(180deg); }
.sr-sec__hd:focus-visible { outline: 2px solid #2f7bff; outline-offset: -2px; }
.sr-sec__body { padding: 0 28px 20px; }

/* dock form controls */
.sr-field { margin-top: 12px; }
.sr-field label { display: block; font-size: 12.5px; font-weight: 600; color: #586a82; margin-bottom: 6px; }
.sr-input { display: flex; align-items: center; height: 44px; border: 1px solid #d3ddea; border-radius: 10px; padding: 0 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.sr-input:focus-within { border-color: #2f7bff; box-shadow: 0 0 0 3px rgba(47,123,255,.14); }
.sr-input.invalid { border-color: #ef5d5d; }
.sr-input input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; color: #0b1a2d; background: transparent; }
.sr-hint { margin: 6px 0 0; font-size: 12px; color: #7c8ba0; }
.sr-err { margin: 6px 0 0; font-size: 12px; color: #ef5d5d; display: none; }
.sr-err.show { display: block; }
.sr-err--terms { margin-left: 30px; }


/* driver fields: 2-col grid. Desktop → name(full) / email|phone / licence(full).
   The four fields are siblings; column-span controls pairing per breakpoint.
   row-gap:0 so each item's own margin-top preserves the original vertical rhythm. */
#payForm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 0; }
#payForm > .sr-field { min-width: 0; }
#payForm .sr-field--name,
#payForm .sr-field--licence { grid-column: 1 / -1; }        /* full width on desktop */
#payForm > .sr-paychoose,
#payForm > .sr-demo,
#payForm > .sr-terms,
#payForm > .sr-err--terms { grid-column: 1 / -1; }

/* chips */
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sr-chip { font: 600 13px inherit; padding: 8px 14px; border-radius: 999px; border: 1px solid #d3ddea; background: #fff; color: #0b1a2d; cursor: pointer; }
.sr-chip:hover { border-color: #2f7bff; }
.sr-chip.on { background: #2f7bff; border-color: #2f7bff; color: #fff; }

/* calendar */
.sr-cal { margin-top: 14px; border: 1px solid #e2e9f2; border-radius: 12px; padding: 12px; }
.sr-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sr-cal__nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #d3ddea; background: #fff; color: #0b1a2d; font-size: 16px; cursor: pointer; line-height: 1; }
.sr-cal__nav:disabled { opacity: .35; cursor: default; }
.sr-cal__readout { font-size: 12.5px; font-weight: 600; color: #0b1a2d; text-align: center; flex: 1; }
.sr-cal__month-name { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 6px; color: #0b1a2d; }
.sr-cal__dow { display: grid; grid-template-columns: repeat(7,1fr); font-size: 10.5px; color: #9aa8bc; text-align: center; margin-bottom: 4px; }
.sr-cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.sr-cal__day {
  position: relative; aspect-ratio: 1; border: 0; background: none; font: 600 13px inherit; color: #0b1a2d;
  border-radius: 8px; cursor: pointer;
}
.sr-cal__day.pad { visibility: hidden; }
.sr-cal__day:hover:not(.disabled) { background: #eef4ff; }
.sr-cal__day.today { box-shadow: inset 0 0 0 1px #b9cbe6; }
.sr-cal__day.disabled { color: #c2ccda; cursor: default; }
.sr-cal__day.disabled.full { text-decoration: line-through; }
.sr-cal__day.in { background: #e3edff; border-radius: 0; }
.sr-cal__day.preview { background: #eef4ff; border-radius: 0; }
.sr-cal__day.edge { background: #2f7bff; color: #fff; }
.sr-cal__day.start { border-radius: 8px 0 0 8px; }
.sr-cal__day.end { border-radius: 0 8px 8px 0; }
.sr-cal__day.single { border-radius: 8px; }
.sr-cal__day:focus-visible { outline: 2px solid #2f7bff; outline-offset: 1px; z-index: 1; }
.sr-cal__foot { margin-top: 8px; min-height: 16px; }
.sr-cal__status { font-size: 12px; color: #7c8ba0; }
.sr-cal__status.save { color: #16b06a; }
.sr-cal__status.warn { color: #d98a2b; }

/* depots */
.sr-depots { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sr-depot { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #d3ddea; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font-family: inherit; }
.sr-depot:hover:not(.off) { border-color: #2f7bff; }
.sr-depot.sel { border-color: #2f7bff; background: #f4f8ff; }
.sr-depot.off { opacity: .6; cursor: default; }
.sr-depot:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
.sr-depot__grow { flex: 1; min-width: 0; }
.sr-depot__name { font-size: 14px; font-weight: 700; color: #0b1a2d; }
.sr-depot__meta { display: block; font-size: 12px; color: #7c8ba0; margin-top: 2px; }
.sr-depot__radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c2ccda; margin-top: 2px; position: relative; }
.sr-depot.sel .sr-depot__radio { border-color: #2f7bff; }
.sr-depot.sel .sr-depot__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #2f7bff; }
.sr-depot__soon { flex: none; font-size: 11px; font-weight: 600; color: #7c8ba0; border: 1px solid #d3ddea; border-radius: 999px; padding: 2px 8px; margin-top: 1px; }

/* extras rows */
.sr-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eef2f7; }
.sr-row:last-child { border-bottom: 0; }
.sr-row__grow { flex: 1; min-width: 0; }
.sr-row__grow b { font-size: 14px; }
.sr-row__meta { display: block; font-size: 12px; color: #7c8ba0; margin-top: 2px; }
.sr-incl { flex: none; font-size: 11.5px; font-weight: 700; color: #16b06a; background: #e7f7ef; border-radius: 999px; padding: 4px 10px; }
.sr-row--toggle { cursor: pointer; }
.sr-row__price { flex: none; text-align: right; font-size: 13px; color: #586a82; }
.sr-row__price b { font-size: 14px; color: #0b1a2d; }
.sr-switch2 { flex: none; }
.sr-switch2 input { position: absolute; opacity: 0; width: 0; height: 0; }
.sr-switch2__track { display: block; width: 42px; height: 24px; border-radius: 999px; background: #cfd8e5; position: relative; transition: background .18s; }
.sr-switch2__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.sr-switch2 input:checked + .sr-switch2__track { background: #2f7bff; }
.sr-switch2 input:checked + .sr-switch2__track .sr-switch2__thumb { transform: translateX(18px); }
.sr-switch2 input:focus-visible + .sr-switch2__track { outline: 2px solid #2f7bff; outline-offset: 2px; }

/* pay chooser */
.sr-paychoose { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sr-payopt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #d3ddea; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font-family: inherit; }
.sr-payopt:hover { border-color: #2f7bff; }
.sr-payopt.sel { border-color: #2f7bff; background: #f4f8ff; }
.sr-payopt:focus-visible { outline: 2px solid #2f7bff; outline-offset: 2px; }
.sr-payopt__radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c2ccda; margin-top: 2px; position: relative; }
.sr-payopt.sel .sr-payopt__radio { border-color: #2f7bff; }
.sr-payopt.sel .sr-payopt__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #2f7bff; }
.sr-payopt__grow { flex: 1; }
.sr-payopt__grow b { font-size: 14px; }
.sr-payopt__meta { display: block; font-size: 12px; color: #7c8ba0; margin-top: 2px; }
.sr-payopt__rec { font-size: 10.5px; font-weight: 700; color: #16b06a; background: #e7f7ef; border-radius: 999px; padding: 2px 8px; margin-left: 4px; vertical-align: middle; }
.sr-surcharge { color: #d98a2b; }
.sr-demo { margin: 12px 0 0; font-size: 12px; color: #7c8ba0; background: #f4f8ff; border: 1px solid #e2e9f2; border-radius: 10px; padding: 10px 12px; }

/* terms */
.sr-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; }
.sr-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.sr-terms__box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #c2ccda; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.sr-terms__box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sr-terms input:checked + .sr-terms__box { background: #2f7bff; border-color: #2f7bff; }
.sr-terms input:checked + .sr-terms__box svg { opacity: 1; }
.sr-terms input:focus-visible + .sr-terms__box { outline: 2px solid #2f7bff; outline-offset: 2px; }
.sr-terms__txt { font-size: 12.5px; color: #586a82; line-height: 1.5; }
.sr-terms.shake { animation: srShake .4s; }
@keyframes srShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* dock footer */
.sr-dock__foot { border-top: 1px solid #e2e9f2; padding: 18px 28px 22px; background: #f8fafd; }
.sr-lines { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.sr-lines__row { display: flex; justify-content: space-between; }
.sr-lines__row span:first-child { color: #586a82; }
.sr-lines__row--save, .sr-lines__row--save span:first-child { color: #16b06a; }
.sr-hold {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #184fad;
  background: #f4f8ff; border: 1px solid #e9f1ff; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
}
.sr-hold__dot { width: 7px; height: 7px; border-radius: 50%; background: #16b06a; animation: srPulse 1.6s infinite; }
.sr-hold.soon { color: #b45309; background: #fff7ed; border-color: #fde4c8; }
.sr-hold.soon .sr-hold__dot { background: #e8993a; }
@keyframes srPulse { 0%{box-shadow:0 0 0 0 rgba(22,176,106,.5)} 70%{box-shadow:0 0 0 6px rgba(22,176,106,0)} 100%{box-shadow:0 0 0 0 rgba(22,176,106,0)} }
.sr-due { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sr-due b:first-child { font-size: 15px; }
.sr-due__amt { font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sr-reserve {
  width: 100%; padding: 15px; border: 0; border-radius: 12px; cursor: pointer;
  font: 700 15px inherit; color: #fff; background: #2f7bff;
  box-shadow: 0 12px 26px rgba(47,123,255,.34); transition: background .15s, transform .1s;
}
.sr-reserve:hover { background: #1f63d6; }
.sr-reserve:active { transform: translateY(1px); }
.sr-reserve.disabled { opacity: .4; box-shadow: none; cursor: default; }
.sr-reserve:focus-visible { outline: 2px solid #0b1a2d; outline-offset: 2px; }
.sr-reservehint { margin-top: 10px; font-size: 12px; color: #ef5d5d; text-align: center; }

/* mobile sticky bar */
.sr-bar { display: none; }
.sr-bar[hidden] { display: none !important; }

/* ===================== CONFIRMATION ===================== */
.sr-done {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px;
  background:
    radial-gradient(120% 90% at 75% 0%, rgba(47,123,255,.16), transparent 55%),
    linear-gradient(160deg, #0a1c30 0%, #061320 70%);
}
.sr-done__card { width: 560px; max-width: 100%; text-align: center; animation: srRise .5s cubic-bezier(.16,1,.3,1); }
.sr-ring { position: relative; width: 128px; height: 128px; margin: 0 auto 22px; }
.sr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sr-ring__track { fill: none; stroke: #102740; stroke-width: 8; }
.sr-ring__fill { fill: none; stroke: url(#srGrad); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.sr-ring__fill.charge { animation: srRing 1.1s cubic-bezier(.7,0,.3,1) forwards .2s; }
.sr-ring__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.sr-done__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #58d6ff; }
.sr-done__title { margin: 8px 0 10px; font-size: 44px; font-weight: 800; letter-spacing: -.03em; }
.sr-done__sub { margin: 0 auto 26px; font-size: 16px; color: #aebfd6; max-width: 42ch; line-height: 1.5; }
.sr-recap { background: #fff; color: #0b1a2d; border-radius: 16px; padding: 22px 26px; text-align: left; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.sr-recap__ref { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sr-recap__ref span { font-size: 12.5px; color: #586a82; }
.sr-recap__ref b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sr-recap__rows { border-top: 1px solid #e2e9f2; padding-top: 12px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.sr-recap__row { display: flex; justify-content: space-between; }
.sr-recap__row span { color: #586a82; }
.sr-recap__row--muted b, .sr-recap__row--muted span { color: #586a82; }
.sr-etbox { margin-top: 14px; padding: 12px 14px; background: #f4f8ff; border: 1px solid #e9f1ff; border-radius: 10px; font-size: 13px; color: #184fad; line-height: 1.5; }
.sr-done__reset { margin-top: 22px; padding: 13px 22px; border-radius: 999px; border: 1px solid #21405e; background: rgba(255,255,255,.06); color: #fff; font: 600 14px inherit; cursor: pointer; }
.sr-done__reset:hover { background: rgba(255,255,255,.14); }
.sr-done__note { margin: 16px 0 0; font-size: 12.5px; color: #7f93ac; }

/* guest account offer / manage link (dark theme) */
.sr-acct { margin-top: 20px; text-align: left; background: rgba(255,255,255,.05); border: 1px solid #21405e; border-radius: 14px; padding: 18px 20px; }
.sr-acct__lead b { font-size: 15px; }
.sr-acct__lead .m { display: block; font-size: 13px; color: #aebfd6; margin-top: 4px; line-height: 1.5; }
.sr-acct .sr-field label { color: #aebfd6; }
.sr-acct .sr-input { background: rgba(255,255,255,.06); border-color: #2b4a6a; }
.sr-acct .sr-input input { color: #fff; }
.sr-acct__btn { margin-top: 12px; width: 100%; padding: 13px; border: 0; border-radius: 10px; font: 700 14px inherit; color: #fff; background: #2f7bff; cursor: pointer; }
.sr-acct__btn:hover { background: #1f63d6; }
.sr-acct__btn:disabled { opacity: .6; cursor: default; }
.sr-acct__err { margin: 8px 0 0; font-size: 12px; color: #ef5d5d; }
.sr-acct__err a, .sr-acct .m a { color: #58d6ff; text-decoration: underline; }
.sr-manage { margin-top: 20px; }
.sr-manage a { color: #58d6ff; text-decoration: underline; font-weight: 600; }

/* booking-as chip */
.sr-bookingas { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #16b06a; background: #e7f7ef; border-radius: 999px; padding: 5px 12px; margin: 0 0 6px; }
.sr-bookingas a { color: #586a82; text-decoration: underline; margin-left: 4px; }

/* confetti + toast */
.sr-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0; }
.sr-confetti.on { opacity: 1; }
.sr-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: #0b1a2d; color: #fff; border: 1px solid #21405e; border-radius: 12px;
  padding: 12px 16px; font-size: 13.5px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); opacity: 0; transition: opacity .2s, transform .2s; z-index: 70; max-width: 92vw;
}
.sr-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-toast__act { background: none; border: 0; color: #58d6ff; font: 600 13.5px inherit; cursor: pointer; text-decoration: underline; }

/* ===================== MOBILE (≤940px) — designed showroom (Concept B2 Mobile) ===================== */
@media (max-width: 940px) {
  .m-only { display: inline; }
  .d-only { display: none; }

  .sr { min-height: 100dvh; }
  .sr-grid { display: block; min-height: 100dvh; }

  /* §1 HEADER: compact row, logo 30px, "SHOWROOM" tag; no free-cancellation line */
  .sr-stage { padding: 14px 18px 20px; display: block; }
  .sr-stage__top { gap: 12px; }
  .sr-brand { gap: 10px; }
  .sr-brand img { height: 30px; }
  .sr-brand__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; }
  .sr-cancel { display: none; }
  .sr-stage__mid { display: block; padding: 0; }

  /* §2 HERO */
  .sr-hero { max-height: 158px; max-width: 88%; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
  .sr-heroline { align-items: flex-start; gap: 14px; margin-top: 12px; }
  .sr-herometa { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 10px; }
  .sr-tag { font-size: 10px; }
  .sr-specs { font-size: 11.5px; color: #aebfd6; order: 2; margin-top: 8px; }
  .sr-herometa .sr-tag { order: 1; }
  .sr-heroname { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-top: 0; }
  /* name row: tag above name (10px gap), specs under name */
  .sr-heroline__l { display: flex; flex-direction: column; }
  .sr-herometa { margin-bottom: 10px; }
  .sr-heroline__r { padding-bottom: 2px; }
  .sr-herorate { font-size: 23px; }
  .sr-herorate__u { font-size: 12px; }
  .sr-heroweekly { font-size: 11px; }

  /* §3 RANGE CHECK */
  .sr-range { margin: 14px 18px 0; padding: 13px 15px 10px; border-radius: 14px; }
  .sr-range__head { margin-bottom: 8px; }
  .sr-range__head b { font-size: 13px; }
  .sr-range__km { font-size: 19px; }
  .sr-range__track { height: 11px; border-radius: 6px; }
  .sr-range__fill { border-radius: 6px; }
  .sr-range__tick { font-size: 10.5px; }
  .sr-range__verdict { font-size: 12.5px; font-weight: 700; }

  /* §4 RANKED FLEET → HORIZONTAL SNAP RAIL */
  .sr-rankcap { margin: 16px 18px 0; font-size: 13px; }
  .sr-rankcap b { font-size: 13px; }
  .sr-switch {
    display: flex; grid-template-columns: none; gap: 10px; margin-top: 8px;
    padding: 2px 18px 14px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sr-switch::-webkit-scrollbar { display: none; }
  .sr-van {
    flex: none; width: 148px; padding: 9px 11px 10px; border-radius: 13px;
    scroll-snap-align: start;
  }
  .sr-van__rank { font-size: 9.5px; }
  .sr-van__img { height: 52px; }
  /* price stacked BELOW name (not inline-right) */
  .sr-van__foot { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sr-van__name { font-size: 12px; white-space: normal; }
  .sr-van__price { font-size: 11.5px; }

  /* §5 WHITE SHEET */
  .sr-dock {
    min-height: 0; box-shadow: 0 -14px 40px rgba(0,0,0,.35);
    border-radius: 22px 22px 0 0; overflow: hidden; flex: 1;
    padding-bottom: 96px; /* clears the fixed action bar */
  }
  .sr-dock__head { padding: 20px 20px 14px; }
  .sr-dock__eyebrow { font-size: 10.5px; }
  .sr-dock__sub { display: none; }        /* eyebrow only on mobile */
  .sr-dock__body { overflow: visible; }

  /* §5 accordions: top-borders (not bottom), tighter metrics */
  .sr-sec { border-bottom: 0; border-top: 1px solid #e2e9f2; }
  .sr-sec:first-child { border-top: 0; }
  .sr-sec__hd { padding: 14px 20px; }
  .sr-sec__num { width: 24px; height: 24px; font-size: 11.5px; }
  .sr-sec__title { font-size: 14px; }
  .sr-sec__summary { font-size: 12px; max-width: 130px; }
  .sr-sec__body { padding: 0 20px 20px; }

  /* §8 DRIVER field order: name(full) → email(full) → [phone | licence]; 42px h / radius 10 */
  #payForm .sr-field--email { grid-column: 1 / -1; }   /* email full width on mobile */
  #payForm .sr-field--phone { grid-column: 1 / 2; }    /* phone | licence pair */
  #payForm .sr-field--licence { grid-column: 2 / 3; }
  .sr-input { height: 42px; border-radius: 10px; }

  /* §6 QUOTE + HINT block (dock footer) */
  .sr-dock__foot { padding: 12px 20px 8px; }
  .sr-lines { font-size: 12.5px; }
  .sr-reservehint { font-size: 11px; }
  /* §10 hold chip: compact, lives in the quote block above the action bar */
  .sr-hold { font-size: 12px; padding: 8px 11px; margin-bottom: 10px; }

  /* §7 PINNED ACTION BAR */
  .sr-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    align-items: center; gap: 12px;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid #e2e9f2;
  }
  .sr-bar__l { display: flex; flex-direction: column; line-height: 1.1; flex: none; }
  .sr-bar__l span { font-size: 11px; color: #586a82; }
  .sr-bar__amt { font-size: 21px; font-weight: 800; color: #0b1a2d; font-variant-numeric: tabular-nums; }
  .sr-bar__cta { flex: 1; padding: 14px 18px; border: 0; border-radius: 999px; font: 700 15px inherit; color: #fff; background: #2f7bff; cursor: pointer; }
  .sr-bar__cta.disabled { opacity: .4; }

  /* §9 CONFIRMATION */
  .sr-done { padding: 70px 24px 50px; }
  .sr-ring { width: 104px; height: 104px; }
  .sr-ring__pct { font-size: 20px; }
  .sr-done__title { font-size: 30px; }
  .sr-done__sub { font-size: 13.5px; max-width: 36ch; }
  .sr-recap { padding: 16px 18px; border-radius: 14px; }
  .sr-recap__rows { font-size: 12.5px; }
  .sr-etbox { font-size: 11.5px; }
  .sr-done__reset { font-size: 13px; }

    /* §8: phone | licence 2-col */
}

@media (prefers-reduced-motion: reduce) {
  .sr-hero, .sr-done__card { animation: none !important; }
  .sr-ring__fill.charge { animation: none !important; stroke-dashoffset: 0 !important; }
  .sr-range__fill { transition: none; }
}

.sr-done[hidden] { display: none !important; }