/* Website (Code)/public/assets/css/chauffeur-book-v2.css
   v8  ·  2026-11-01 MYT

   /chauffeur-v2/book: the chauffeur wizard as an Apple Store buy flow and checkout. Loaded after v2.css and nothing
   else (no site.css or chauffeur-book.css). Styles every state the engine (assets/js/chauffeur-book.js) and the glue
   (chauffeur-book-v2.js) produce. Breakpoints follow v2.css: 1068 / 734 (and 480 for the narrowest phones). */

/* ─── PAGE ────────────────────────────────────────────────────────────────── */

.cbv-page [hidden] { display: none !important; }

.cbv-page {
    --cbv-w: min(980px, 87.5vw);     /* the local nav's column: the step header and the flow share its edges */
    --cbv-line: var(--ink-3);         /* Apple's control border */
    --cbv-error: var(--error);        /* 4.9:1 on white */
    --cbv-error-bg: var(--error-bg);
    --cbv-radius: 12px;
}

.cbv-vh {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The local nav: the product name links back to the sales page, then Overview and Book. */
.cbv-ln__links { display: flex; align-items: center; gap: 24px; }
.cbv-ln__link {
    position: relative; display: block; padding: 16px 0;
    font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em;
    color: var(--ink); opacity: .8;
}
a.cbv-ln__link:hover { opacity: 1; }
.cbv-ln__link[aria-current] { opacity: 1; }
.cbv-ln__link[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }

.cbv { padding-bottom: 120px; }

/* ─── STEP HEADER AND BACK ────────────────────────────────────────────────── */

.cbv-top { width: var(--cbv-w); margin: 0 auto; padding-top: 36px; }

.cbv-progress__list {
    display: flex; align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hair);
}
.cbv-progress__step {
    display: flex; align-items: center; gap: 10px; flex: 1 1 0;
    min-width: 0;
    color: var(--ink-2);
    font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
}
.cbv-progress__step:last-child { flex: none; }
.cbv-progress__step:not(:last-child)::after {
    content: ''; flex: 1; min-width: 12px; height: 1px; margin: 0 14px 0 4px; background: var(--hair);
}
.cbv-progress__n {
    position: relative; flex: none;
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--cbv-line);
    font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0;
}
.cbv-progress__n svg { display: none; width: 16px; height: 16px; }
.cbv-progress__label { white-space: nowrap; }
.cbv-progress__step[aria-current="step"] { color: var(--ink); }
.cbv-progress__step[aria-current="step"] .cbv-progress__label { font-weight: 600; }
.cbv-progress__step[aria-current="step"] .cbv-progress__n { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cbv-progress__step.is-done { color: var(--ink); }
.cbv-progress__step.is-done .cbv-progress__n { border-color: var(--platter); background: var(--platter); }
.cbv-progress__step.is-done .cbv-progress__n span { display: none; }
.cbv-progress__step.is-done .cbv-progress__n svg { display: block; }
.cbv-progress__step.is-done::after { background: var(--ink-3); }

.cbv-back {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; margin-top: 8px; margin-left: -2px; padding: 0 2px;
    color: var(--link);
    font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
}
.cbv-back:hover .cb-back__label { text-decoration: underline; text-underline-offset: .15em; }
.cbv-back__chev { width: 6px; height: 11px; transform: scaleX(-1); }

.cbv-steps { width: var(--cbv-w); margin: 0 auto; padding-top: 44px; }
.cbv-top:has(.cbv-back:not([hidden])) + .cbv-steps { padding-top: 20px; }

/* ─── HEADINGS ────────────────────────────────────────────────────────────── */

.cbv-head { margin-bottom: 40px; }
.cbv-head__title {
    max-width: 760px;
    color: var(--ink-2);
    font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0;
}
.cbv-head__title strong, .cbv-group__head strong { color: var(--ink); }
.cbv-head__lede { margin-top: 12px; max-width: 640px; color: var(--ink-2); font-size: 17px; line-height: 1.47059; }

.cbv-group { margin: 0 0 44px; padding: 0; border: 0; min-width: 0; }
.cbv-group__head {
    display: block; float: none; width: 100%;
    margin: 0 0 16px; padding: 0;
    color: var(--ink-2);
    font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em;
}
.cbv-group__note { margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }

/* ─── STEP 1 · TRIP ───────────────────────────────────────────────────────── */

.cbv-trip {
    display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px;
    align-items: start;
}
.cbv-trip__media {
    position: sticky; top: calc(var(--ln-h) + 24px);
    height: min(calc(100svh - var(--ln-h) - 48px), 780px); min-height: 520px;
    border-radius: 28px; overflow: hidden;
    background: var(--bg-alt);
}
.cbv-trip__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }

.cbv-trip__eyebrow { color: var(--gold-ink); font-size: 17px; line-height: 1.23536; font-weight: 600; margin-bottom: 6px; }
.cbv-trip__title { font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em; }
.cbv-trip__lede { margin: 14px 0 44px; color: var(--ink-2); font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }

.cbv-when-hourly, .cbv-group__note--hourly { display: none; }
.cbv-trip:has(#tripModeStateBox[data-state="byTheHourState"]) .cbv-when-hourly,
.cbv-trip:has(#tripModeStateBox[data-state="byTheHourState"]) .cbv-group__note--hourly { display: inline; }
.cbv-trip:has(#tripModeStateBox[data-state="byTheHourState"]) .cbv-group__note--hourly { display: block; }
.cbv-trip:has(#tripModeStateBox[data-state="byTheHourState"]) .cbv-when-oneway,
.cbv-trip:has(#tripModeStateBox[data-state="byTheHourState"]) .cbv-group__note--oneway { display: none; }

/* The segmented control: 44px #e8e8ed platter, a white thumb that slides (Apple tabnav). */
.cbv-seg {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: 1fr 1fr;
    height: 44px; padding: 4px;
    border-radius: 999px;
    background: var(--platter);
}
.cbv-seg__opt { position: relative; z-index: 1; display: block; cursor: pointer; }
.cbv-seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cbv-seg__opt span {
    display: grid; place-items: center; height: 100%;
    border-radius: 999px;
    color: var(--ink);
    font-size: 14px; line-height: 1.28577; letter-spacing: -0.016em;
    transition: color .32s var(--ease-out);
}
.cbv-seg__opt input:checked + span { font-weight: 600; }
.cbv-seg__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.cbv-seg__thumb {
    position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .32s var(--ease-out);
}
.cbv-seg:has(input[value="BY_THE_HOUR"]:checked) .cbv-seg__thumb { transform: translateX(100%); }

/* ─── FIELDS ──────────────────────────────────────────────────────────────── */

.cbv-field, .cb-field {
    position: relative; display: block;
    min-height: 56px;
    border: 1px solid var(--cbv-line);
    border-radius: var(--cbv-radius);
    background: var(--white);
    transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard), background-color .2s var(--ease-standard);
}
.cbv-field + .cbv-field, .cbv-field + .cbv-msg + .cbv-field,
.cb-field + .cb-field, .cb-field + .cbv-msg + .cb-field,
.cb-search__modebox, .cbv-pair + .cb-field, .cbv-pair + .cbv-msg + .cb-field,
.cb-field + .cb-form__row, .cb-field + .cbv-msg + .cb-form__row,
.cb-form__row + .cb-field, .cb-form__row + .cbv-msg + .cb-field { margin-top: 12px; }

.cbv-field:focus-within, .cb-field.is-focused {
    border-color: var(--focus);
    box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px rgba(0, 113, 227, .2);
}
.cbv-field.gp-field-error, .cb-field.gp-field-error {
    border-color: var(--cbv-error);
    background: var(--cbv-error-bg);
}
.cbv-field.gp-field-error:focus-within, .cb-field.gp-field-error.is-focused {
    box-shadow: 0 0 0 1px var(--cbv-error), 0 0 0 4px rgba(227, 0, 0, .14);
}

.cbv-field__label, .cb-field__label {
    position: absolute; left: 16px; right: 44px; top: 8px; z-index: 1;
    color: var(--ink-2);
    font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.gp-field-error > .cbv-field__label, .gp-field-error > .cb-field__label { color: var(--cbv-error); }

.cbv-field__input, .cb-field__control {
    display: block; width: 100%; height: 54px; margin: 0;
    padding: 24px 15px 6px;
    border: 0; border-radius: var(--cbv-radius);
    background: transparent;
    color: var(--ink);
    font: inherit; font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em;
    -webkit-appearance: none; appearance: none;
}
.cbv-field__input:focus, .cb-field__control:focus,
.cbv-field__input:focus-visible, .cb-field__control:focus-visible { outline: none; }
.cbv-field__input::placeholder { color: var(--ink-2); opacity: 1; }
.cbv-field__input::-webkit-search-cancel-button,
.cbv-field__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Selects: a chevron, grey while the placeholder option shows. */
.cbv-field--select select, .cb-field--select select { padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.cbv-field--select select:has(option:checked[value=""]), select.is-empty { color: var(--ink-2); }
.cbv-field--select select option, .cb-field--select select option { color: var(--ink); }
.cbv-field__chev {
    position: absolute; right: 18px; top: 50%;
    width: 7px; height: 12px; margin-top: -6px;
    color: var(--ink-2); transform: rotate(90deg);
    pointer-events: none;
}

/* The date: a read-only field that opens the calendar. */
.cbv-field--date, .cbv-field--date .cbv-field__input { cursor: pointer; }
.cbv-field--date .cbv-field__input { padding-right: 44px; caret-color: transparent; }
.cbv-field__icon {
    position: absolute; right: 14px; top: 50%;
    width: 20px; height: 20px; margin-top: -10px;
    color: var(--ink-2); pointer-events: none;
}

/* Floating label (ui/field.js): centred while empty, up and small once filled or focused. */
.cb-field__label {
    top: 17px;
    font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em;
    transform-origin: 0 0;
    transition: transform .22s cubic-bezier(.39, .575, .565, 1);
}
.cb-field.is-floated .cb-field__label,
.cb-field.is-focused .cb-field__label,
.cb-field--select .cb-field__label { transform: translateY(-9px) scale(.70588); }
.cb-field--area .cb-field__control { height: auto; min-height: 128px; max-height: 320px; padding-top: 28px; resize: none; field-sizing: content; line-height: 1.47059; }
.cb-field--area .cb-field__label { right: 16px; }

/* The message under a field (chauffeur-book-v2.js writes the engine's message here). */
.cbv-msg {
    display: flex; gap: 6px; align-items: flex-start;
    margin-top: 8px;
    color: var(--cbv-error);
    font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em;
}
.cbv-msg::before {
    content: '!'; flex: none;
    display: grid; place-items: center;
    width: 14px; height: 14px; margin-top: 1px; border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 10px; line-height: 1; font-weight: 600;
}

.cbv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cbv-cell { min-width: 0; }

/* Address suggestions: a sheet under the field. */
.cb-address__list {
    position: absolute; z-index: 25; left: -1px; right: -1px; top: calc(100% + 6px);
    max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid var(--hair);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.cb-address__option {
    display: flex; align-items: flex-start; gap: 12px;
    min-height: 44px; padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 15px; line-height: 1.33337; letter-spacing: -0.016em;
    cursor: pointer;
}
.cb-address__option svg { flex: none; width: 12px; height: 16px; margin-top: 2px; color: var(--ink-2); }
.cb-address__option span { min-width: 0; overflow-wrap: anywhere; }   /* the whole address wraps, never "…" */
.cb-address__option.is-active { background: var(--bg-alt); }

/* ─── CALENDAR ────────────────────────────────────────────────────────────── */

/* Appended to <body>. */
/* The engine centres the popup on the date field. Shift it to start on the field's left edge instead
   (field = half of the 440 / 380px form column, less the 12px gap). Phones keep the engine's placement. */
@media (min-width: 1069px) { .calendar--cb { margin-left: calc((340px - (440px - 12px) / 2) / 2); } }
@media (min-width: 735px) and (max-width: 1068px) { .calendar--cb { margin-left: calc((340px - (380px - 12px) / 2) / 2); } }
.calendar__nav { display: flex; align-items: center; gap: 0; }
.calendar__day:focus-visible { outline-offset: 0; }

/* ─── FORM FOOT, BUTTONS, ERRORS ──────────────────────────────────────────── */

.cbv-foot { padding-top: 4px; }
.cbv-cta { width: 100%; min-height: 50px; font-size: 17px; }
.cbv-page .btn:disabled { opacity: .42; cursor: default; background: var(--ink); }
.cbv-foot__note { margin-top: 14px; color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; text-align: center; }

.cbv-alert {
    display: flex; gap: 8px; align-items: flex-start;
    margin-bottom: 16px; padding: 12px 16px;
    border-radius: var(--cbv-radius);
    background: var(--cbv-error-bg);
    color: var(--cbv-error);
    font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
}
.cbv-alert::before {                        /* the same "!" mark as the messages under the fields */
    content: '!'; flex: none; display: grid; place-items: center;
    width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1px solid currentColor;
    font-size: 11px; line-height: 1; font-weight: 600;
}
.cb-error-slot--results .cbv-alert { margin: -16px 0 24px; }

.cbv-link {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--link);
    font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
}
.cbv-link:hover { text-decoration: underline; text-underline-offset: .15em; }

/* ─── STEP 2 · VEHICLE TILES ──────────────────────────────────────────────── */

.cbv-tiles { display: grid; gap: 14px; }
.cbv-tiles:empty::before { content: 'No vehicles to show for this trip.'; color: var(--ink-2); }

.cbv-tile {
    position: relative;
    display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 28px;
    min-height: 128px; padding: 20px 28px 20px 20px;
    border: 1px solid var(--cbv-line);
    border-radius: var(--cbv-radius);   /* selectable tile: 12px, like every field and option tile */
    background: var(--white);
    transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.cbv-tile__image {
    width: 200px; height: 78px; object-fit: contain;
}
.cbv-tile__image:not([src]) { visibility: hidden; }
.cbv-tile__name { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; margin-bottom: 10px; }

.cbv-specs { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.cb-spec { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cb-spec svg { flex: none; width: 18px; height: 18px; color: var(--ink); }

.cbv-tile__price { text-align: right; }
.cbv-tile__price .cb-card__price-value { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; white-space: nowrap; }
.cbv-tile__price .cb-card__price-label { margin-top: 4px; color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; white-space: nowrap; }

/* The whole tile is the button (the engine's [data-item="select"], stretched over it). */
.cbv-tile__select { position: absolute; inset: -1px; z-index: 1; border-radius: inherit; background: transparent; cursor: pointer; }
.cbv-tile__select:focus-visible { outline: none; }
@media (hover: hover) { .cbv-tile:hover { border-color: var(--ink); } }
.cbv-tile.is-focus-within:has(.cbv-tile__select:focus-visible),
.cbv-tile.is-selected { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.cbv-tile:has(.cbv-tile__select:focus-visible) { box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 4px rgba(0, 113, 227, .2); border-color: var(--focus); }

/* ─── STEP 3 AND 4 · FORM, REVIEW ─────────────────────────────────────────── */

.cbv-split {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 72px;
    align-items: start;
}
.cbv-split > .cbv-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--ln-h) + 24px); }
.cbv-split > .cb-form, .cbv-split > .cbv-review__main { grid-column: 1; grid-row: 1; min-width: 0; }

.cbv-summary {
    padding: 28px;
    border-radius: 18px;
    background: var(--bg-alt);
}
.cbv-summary__eyebrow { margin-bottom: 14px; font-size: 17px; line-height: 1.23536; font-weight: 600; }
/* Turnstile's box is 300px wide. The card's text column is 252px at 300px wide, so the box takes the card's padding. */
.cbv-summary .human-check { display: flex; justify-content: center; margin-inline: -24px; }
.cbv-summary__image { width: 100%; height: auto; aspect-ratio: 249 / 97; object-fit: contain; mix-blend-mode: multiply; margin: 4px 0 20px; }
.cbv-summary__image:not([src]) { visibility: hidden; }
.cbv-summary__name { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; margin-bottom: 12px; }
.cbv-summary .cbv-specs { flex-direction: column; gap: 8px; }
.cbv-summary__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--hair);
}
.cbv-summary__total .cb-card__price-label { font-size: 17px; line-height: 1.23536; }
.cbv-summary__total .cb-card__price-value { font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; white-space: nowrap; }
.cbv-summary .cbv-link { margin-top: 6px; margin-bottom: -10px; }
.cbv-summary__note { margin-top: 16px; color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; text-align: center; }

/* Step 3 form */
.cbv-group--guest { margin-top: -8px; }
.cb-form__group--guest { margin-top: 28px; }
.cbv-group--requests { margin-top: -8px; }
.cb-form__group--requests { margin-top: 28px; }
/* The two checkboxes sit together as a list until "special requests" opens. */
.cbv-group--requests:has(#specialRequestsBox[hidden]) { margin-bottom: 0; }
.cbv-group--requests:has(#specialRequestsBox[hidden]) + .cbv-group--guest { margin-top: 0; }
/* The requests, as in Apple's buy flow: a list of rows that fold. A closed row says "Add", or its choice and "Change".
   An open row asks its question over tiles, name on the left and price on the right. */
.cb-requests { border-top: 1px solid var(--hair); }
.cb-request { border-bottom: 1px solid var(--hair); padding: 8px 0; }
.cb-request__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.cb-request__title { min-width: 0; }
.cb-request__name { margin: 0; font-size: 17px; line-height: 1.23536; font-weight: 400; letter-spacing: -0.022em; }
.cb-request.is-set .cb-request__name { color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }
.cb-request.is-open .cb-request__name,
.cb-request__chosen { font-size: 17px; line-height: 1.23536; font-weight: 600; letter-spacing: -0.022em; }
.cb-request__toggle, .cb-request__remove { flex: none; min-height: 44px; color: var(--link); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.cb-request__toggle:focus-visible, .cb-request__remove:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .cb-request__toggle:hover, .cb-request__remove:hover { text-decoration: underline; text-underline-offset: .15em; } }
/* The fold uses Apple's timing (measured on the AirTag page): height and contents .4s ease-in-out, heading .25s.
   REQUEST_FOLD_MS in chauffeur-book.js is the same .4s. Closed rows are out of the tab order (visibility). */
.cb-request__body {
    display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0;
    transition: grid-template-rows .4s ease-in-out, opacity .4s ease-in-out, visibility 0s .4s;
}
.cb-request.is-open .cb-request__body { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition-delay: 0s; }
.cb-request__fold { min-height: 0; overflow: hidden; margin: 0 -4px; padding: 0 4px; }   /* the 4px stops the focus ring clipping */
.cb-request__fold::after { content: ''; display: block; height: 8px; }
/* Two names for one fade: changing the name replays it when the row's words change. */
.cb-request__title, .cb-request__toggle { animation: cb-request-words .25s ease-out; }
.cb-request.is-open .cb-request__title, .cb-request.is-open .cb-request__toggle { animation-name: cb-request-words-open; }
@keyframes cb-request-words { from { opacity: 0; } }
@keyframes cb-request-words-open { from { opacity: 0; } }
.cb-request__tiles { display: grid; gap: 10px; padding: 4px 0; }
.cb-request-tile {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 56px; padding: 14px 16px;
    border: 1px solid var(--cbv-line); border-radius: var(--cbv-radius);
    font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em;
    transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.cb-request-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cb-request-tile__price { flex: none; color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; white-space: nowrap; }
@media (hover: hover) { .cb-request-tile:hover { border-color: var(--ink); } }
.cb-request-tile:has(input:checked) { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.cb-request-tile:has(input:focus-visible) { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 4px rgba(0, 113, 227, .2); }
.cb-requests__total {
    display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 16px 20px;
    background: var(--bg-alt); border-radius: var(--cbv-radius);
    font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em;
}
.cb-requests__total span:last-child { font-weight: 600; white-space: nowrap; }
.cb-form__note { margin-top: 8px; color: var(--ink-2); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }
.cb-form__foot { padding-top: 32px; border-top: 1px solid var(--hair); }
.cbv-details .cbv-cta { width: auto; min-width: 320px; }

/* The checkbox (Apple checkout: 20px, 6px radius, filled when on). */
.cb-check { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 17px; }
.cb-check input { position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.cb-check__box {
    flex: none; display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 6px;
    border: 1px solid var(--cbv-line); background: var(--white);
    color: var(--white);
    transition: background-color .15s linear, border-color .15s linear;
}
.cb-check__box svg { width: 16px; height: 16px; opacity: 0; }
.cb-check input:checked + .cb-check__box { background: var(--ink); border-color: var(--ink); }
.cb-check input:checked + .cb-check__box svg { opacity: 1; }
.cb-check input:focus-visible + .cb-check__box { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Step 4: Apple's "Show order summary" strip. Phones only, where the summary drops below the review. */
.cbv-bar { display: none; }
.cbv-bar__button { color: var(--link); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.cbv-bar__button:hover { text-decoration: underline; }
#summaryTripBox { scroll-margin-top: calc(var(--ln-h) + 72px); }

/* Review / receipt blocks */
.cbv-block { padding: 28px 0; border-top: 1px solid var(--hair); }
.cbv-review__main > .cbv-block:first-child { padding-top: 0; border-top: 0; }
.cbv-block__title { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; margin-bottom: 6px; }
.cbv-block__sub { color: var(--ink-2); margin-bottom: 8px; }
.cbv-block--trip { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: start; }
.cbv-block__photo {                           /* wide frame: the cars are side-on */
    width: 160px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
    background: var(--bg-alt);
}
.cbv-block__photo img { width: 100%; height: 100%; padding: 8px; object-fit: contain; mix-blend-mode: multiply; }   /* the whole car, as in the tiles */
.cbv-block__photo img:not([src]) { visibility: hidden; }

.cbv-rows { margin-top: 4px; }
/* Details read straight down at every width: a small grey label over its value, on one left edge. */
.cbv-rows .cb-rows__row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.cbv-rows .cb-rows__row:last-child { border-bottom: 0; }
.cbv-rows dt { color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.cbv-rows dd { min-width: 0; overflow-wrap: break-word; }
/* Money rows put the name on the left and the amount on the right, so amounts line up. */
.cbv-summary .cbv-rows .cb-rows__row, .cbv-block--totals .cbv-rows .cb-rows__row { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; }
.cbv-summary .cbv-rows dt, .cbv-block--totals .cbv-rows dt { max-width: 60%; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.cbv-summary .cbv-rows .cb-rows__row { padding: 6px 0; border: 0; }

.cbv-grand {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    margin-top: 12px; padding-top: 16px;
    border-top: 1px solid var(--hair);
    font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em;
}
.cbv-summary .cb-error-slot { margin-top: 20px; }
.cbv-summary .cb-error-slot .cbv-alert { margin-bottom: 0; }
.cbv-summary .cbv-cta { margin-top: 20px; }

/* ─── STEP 5 · CONFIRMED ──────────────────────────────────────────────────── */

.cbv-confirm { max-width: 760px; margin: 0 auto; }
.cbv-done { text-align: center; margin: 12px 0 56px; }
.cbv-done__icon { width: 56px; height: 56px; margin: 0 auto 24px; color: var(--gold-ink); stroke-width: 1.5; }
.cbv-done__title { font-size: 40px; line-height: 1.1; font-weight: 600; }
.cbv-done__lede { margin-top: 12px; color: var(--ink-2); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }
.cbv-receipt { padding: 8px 32px; border-radius: 18px; background: var(--bg-alt); }
.cbv-receipt > .cbv-block:first-child { border-top: 0; }
.cbv-receipt .cbv-block { border-color: var(--hair); }
.cbv-receipt .cbv-block__photo { background: var(--white); }
.cbv-receipt .cbv-block--totals .cbv-grand { margin-top: 4px; }
.cbv-done__more { margin-top: 40px; text-align: center; }

/* ─── LOADING ─────────────────────────────────────────────────────────────── */

.cbv-loading { display: grid; place-items: center; min-height: 50vh; }
.cb-loading__spinner { width: 36px; height: 36px; }
.gp-spin { animation: cbv-spin 900ms linear infinite; transform-origin: 50% 50%; }
@keyframes cbv-spin { to { transform: rotate(360deg); } }

/* ─── TABLET AND SMALL LAPTOP ─────────────────────────────────────────────── */

@media (max-width: 1068px) {
    .cbv-trip { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
    .cbv-trip__title { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
    .cbv-head__title, .cbv-done__title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .cbv-split { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
    .cbv-block--trip { grid-template-columns: 1fr; gap: 16px; }
    .cbv-summary { padding: 24px; }
    .cbv-tile { grid-template-columns: 160px minmax(0, 1fr) auto; gap: 20px; }
    .cbv-tile__image { width: 160px; height: 62px; }
    .cbv-tile .cbv-specs { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 20px; }
}

@media (max-width: 900px) {
    .cbv-progress__step:not([aria-current="step"]) .cbv-progress__label { display: none; }
    .cbv-progress__step { flex: 0 0 auto; }
    .cbv-progress__step:not(:last-child) { flex: 1 1 auto; }
}

/* ─── PHONE ───────────────────────────────────────────────────────────────── */

@media (max-width: 734px) {
    .cbv { padding-bottom: 88px; }
    .cbv-bar {
        display: block; position: sticky; top: var(--ln-h); z-index: 20;
        margin: -12px 0 28px; padding: 12px 0;
        background: rgba(250, 250, 252, .92);
        box-shadow: 0 0 0 100vmax rgba(250, 250, 252, .92);
        clip-path: inset(0 -100vmax);
        border-bottom: 1px solid var(--hair);
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .cbv-bar {
            background: rgba(250, 250, 252, .8); box-shadow: 0 0 0 100vmax rgba(250, 250, 252, .8);
            -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
        }
    }

    .cbv-top { padding-top: 24px; }
    .cbv-steps { padding-top: 32px; }
    .cbv-progress__list { padding-bottom: 16px; }
    .cbv-progress__step:not(:last-child)::after { margin: 0 8px 0 2px; }

    .cbv-trip { grid-template-columns: 1fr; gap: 0; }
    .cbv-trip__media { display: none; }
    .cbv-trip__title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .cbv-trip__lede { font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; margin-bottom: 36px; }

    .cbv-head { margin-bottom: 28px; }
    .cbv-head__title, .cbv-done__title { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
    .cbv-group { margin-bottom: 36px; }
    .cbv-group__head { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }

    /* One column, as Apple's phone buy tiles: the name gets the full width, so a long one such as
       "Mercedes-Benz S400 Maybach Convert" does not break at its hyphen beside the price. The price goes under it. */
    .cbv-tile {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "img" "name" "price" "specs";
        gap: 6px; padding: 18px 20px 20px; align-items: start;
    }
    .cbv-tile__image { grid-area: img; width: 100%; max-width: 240px; height: 84px; margin: 0 auto 4px; }
    .cbv-tile__info { display: contents; }
    .cbv-tile__name { grid-area: name; font-size: 19px; line-height: 1.21053; letter-spacing: .012em; margin: 0; text-wrap: balance; }
    .cbv-tile__price { grid-area: price; display: flex; align-items: baseline; gap: 8px; text-align: left; }
    .cbv-tile__price .cb-card__price-label { margin: 0; }
    .cbv-tile .cbv-specs { grid-area: specs; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 8px; }
    .cbv-specs { font-size: 14px; }
    .cbv-tile__price .cb-card__price-value { font-size: 17px; line-height: 1.23536; font-weight: 400; letter-spacing: -0.022em; }

    .cbv-split { grid-template-columns: 1fr; gap: 32px; }
    .cbv-split > .cbv-aside, .cbv-split > .cb-form, .cbv-split > .cbv-review__main { grid-column: 1; grid-row: auto; position: static; }
    .cbv-details .cbv-summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 20px; }
    .cbv-details .cbv-summary__eyebrow { grid-column: 1 / -1; margin-bottom: 8px; }
    .cbv-details .cbv-summary__image { margin: 0; }
    .cbv-details .cbv-summary .cb-card__info .cbv-specs { display: none; }
    .cbv-details .cbv-summary__name { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; margin: 0; }
    .cbv-details .cbv-summary__total, .cbv-details .cbv-summary .cbv-link { grid-column: 1 / -1; }
    .cbv-details .cbv-cta { width: 100%; min-width: 0; }

    .cbv-block__photo { width: 144px; }

    .cbv-done { margin-bottom: 40px; }
    .cbv-done__lede { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .cbv-receipt { padding: 4px 20px; }

    /* The engine clamps the popup to 8px from the left on phones. Move it onto the content column. */
    .calendar { width: min(380px, 87.5vw); margin-left: calc(6.25vw - 8px); padding-inline: 8px; }
}

@media (max-width: 380px) {
    .cbv-pair { grid-template-columns: 1fr; }
}

/* ─── PREFERENCES ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cbv-seg__thumb, .cbv-seg__opt span, .cb-field__label, .calendar, .cbv-tile, .cbv-field, .cb-field { transition: none; }
    .cb-request__body, .cb-request-tile { transition: none; }
    .cb-request__title, .cb-request__toggle { animation: none; }
    .gp-spin { animation-duration: 2400ms; }
}
@media (prefers-reduced-transparency: reduce) {
    .cbv-bar { background: var(--bg-soft); box-shadow: 0 0 0 100vmax var(--bg-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .cbv-field, .cb-field, .cbv-tile { border-color: var(--ink); }
    .cbv-summary, .cbv-receipt { box-shadow: inset 0 0 0 2px var(--ink); }
}