/* Website (Code)/public/assets/css/rental-vehicle-item-v2.css
   v2  ·  2026-11-01 MYT

   One car's page, v2 (/rental-vehicle-v2/<slug>): the car and its whole booking flow as an apple.com Store buy page.
   Loaded after v2.css; loads nothing else (no site.css / item.css). Styles every state item.js and its ui/ modules
   draw at runtime.

   Class names v2.css also uses (.gallery__track, .specs, .faq__*) are re-set here for this page. */

:root {
    --tile-line: var(--ink-3);          /* Apple's option-tile and field border */
    --flow-w:    min(980px, 87.5vw);
    --bar-h:     52px;             /* the product bar */
}
@media (max-width: 833px) { :root { --bar-h: 48px; } }

[hidden] { display: none !important; }
.rvi { background: var(--bg); }


/* ─── PRODUCT BAR ─────────────────────────────────────────────────────────── */
/* Sticky, frosted, keyline (apple.com/shop buy bar). In the flow under the global nav so it never covers it; invisible
   until item.js shows it. */

.sticky {
    position: sticky; top: 0; z-index: 35;
    height: var(--bar-h);
    background: rgba(250, 250, 252, .92);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16);
    opacity: 0; visibility: hidden;
    transition: opacity .32s var(--ease-standard), visibility 0s linear .32s;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sticky { background: rgba(250, 250, 252, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.sticky.is-shown { opacity: 1; visibility: visible; transition: opacity .32s var(--ease-standard), visibility 0s; }
.sticky__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    width: var(--w); height: 100%; margin: 0 auto;
}
.sticky__name {
    flex: 0 0 auto; max-width: 50%;          /* the name first; the right side wraps (total over dates and link) */
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 21px; line-height: 1.14286; font-weight: 600; letter-spacing: .011em;
}
.sticky__right {
    flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
    column-gap: 12px; text-align: right;
}
.sticky__total { flex-basis: 100%; font-size: 17px; line-height: 1.23536; font-weight: 600; font-variant-numeric: tabular-nums; }
.sticky__when { font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--ink-2); }
.sticky__change { position: relative; font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }
.sticky__change::after { content: ''; position: absolute; inset: -14px -8px; }       /* a 44px target */
.sticky__total[hidden] ~ .sticky__change { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }

/* ─── FLOATING SUMMARY PILL ─────────────────────────────────────────────── */
/* The all-in total and the one next step. Shown by item.js on the first step while the panel's own button is off screen. */

/* Desktop: it floats under the choices column, so the photographs stay clear. */
.buybar {
    position: fixed; z-index: 36;
    right: calc((100% - var(--w)) / 2); bottom: max(24px, env(safe-area-inset-bottom));
    width: clamp(300px, calc(var(--w) * .31), 372px);
    height: 64px; padding: 0 8px 0 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border-radius: 32px;
    background: rgba(250, 250, 252, .96);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 28px rgba(0, 0, 0, .14);
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: opacity .32s var(--ease-standard), transform .32s var(--ease-standard), visibility 0s linear .32s;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .buybar { background: rgba(250, 250, 252, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.buybar.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Desktop and tablet already show the total and the one button in the price panel beside the choices, so the
   floating pill would cover the option tiles and repeat that button. Phones only (as on /rental-vehicle). */
@media (min-width: 735px) { .buybar, .buybar.is-shown { display: none; } }
.buybar__price { display: flex; flex-direction: column; min-width: 0; }
.buybar__total { font-size: 17px; line-height: 1.23536; font-weight: 600; font-variant-numeric: tabular-nums; }
.buybar__sub { font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__action {
    flex: none; min-width: 96px; height: 48px; padding: 0 22px;
    border-radius: 980px; background: var(--ink); color: var(--white);
    font-size: 17px; line-height: 1;
}
.buybar__action:hover { background: var(--btn-hover); }
/* One total on screen, not two, and the page's end clears the pill. The pill only exists on phones, so only there
   does it take the bar's total (on desktop it is display:none but item.js still marks it shown). */
body:has(.state--estimate[hidden]) .sticky__total { display: none; }     /* in checkout the checkout bar carries it */
@media (max-width: 734px) {
    body:has(.buybar.is-shown) .sticky__total { display: none; }
    body:has(.buybar.is-shown) .gf { padding-bottom: 104px; }
}

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */

.pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 50px; padding: 12px 28px;
    border-radius: 980px;
    background: var(--ink); color: var(--white);
    font-size: 17px; line-height: 1.17648; letter-spacing: -0.022em; text-align: center;
    transition: background-color .2s var(--ease-standard), color .2s var(--ease-standard);
}
.pill:hover:not(:disabled) { background: var(--btn-hover); }
.pill:active:not(:disabled) { background: var(--btn-active); }
.pill:disabled { background: var(--platter); color: var(--text-on-disabled); cursor: default; }
.pill--block { width: 100%; }

/* ─── STATE BOX ───────────────────────────────────────────────────────────── */

.state--estimate { width: var(--w); margin: 0 auto; }
.state:not(.state--estimate) {
    width: var(--flow-w); margin: 0 auto;
    padding: calc(var(--bar-h) + 40px) 0 var(--pad);   /* the checkout bar sits 40px under the product bar's place */
    min-height: 72vh;
}
/* In checkout the product bar floats over the page instead of holding its own 52px row. A held row left a blank of
   about 190px above "Checkout" whenever the bar was hidden. item.js opens each step at the top of the page
   (<html data-state-scroll-top="0">), so the step always starts just under the nav. */
body:has(.state--estimate[hidden]) .sticky { margin-bottom: calc(-1 * var(--bar-h)); }
/* Review and the receipt never show the product bar (item.js STICKY_SILENT_STATES), so no room is kept for it. */
.state.state--review, .state.state--confirmed { padding-top: 56px; }

/* ─── 1 · THE CAR (estimateState) ─────────────────────────────────────────── */

.item-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
    padding: 36px 0 48px;
}
.item-head__copy { min-width: 0; }
.item-eyebrow { color: var(--gold-ink); font-size: 17px; line-height: 1.23536; margin-bottom: 6px; }
.item-title { font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em; }
.item-title b { font-weight: 600; }
.item-from { margin-top: 12px; font-size: 17px; line-height: 1.47059; }
.item-perks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.item-perks li { display: inline-flex; align-items: center; gap: 8px; }
.item-perks svg { width: 22px; height: 22px; color: var(--ink); stroke-width: 1.3; }

/* Not listed or could not load (item.js renderNotFound hides the grid): no perks, room before the footer, and the
   pill ("See all vehicles") loses the calendar glyph that only suits "Select your dates". */
.state--estimate:has(.item-grid[hidden]) { min-height: 56vh; }
.item-head:has(+ .item-grid[hidden]) :is(.item-eyebrow, .item-perks) { display: none; }
.item-head:has(+ .item-grid[hidden]) .item-change { padding-inline: 18px; }
.item-head:has(+ .item-grid[hidden]) .item-change::before { display: none; }

.item-head__when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 360px; text-align: right; }
.item-when { font-size: 17px; line-height: 1.23536; font-weight: 600; white-space: nowrap; }
/* "Select your dates": Apple's bordered link pill (the buy page's "See how to pay monthly"). */
.item-change {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 18px 10px 16px;
    border: 1px solid var(--hair); border-radius: 980px;
    background: var(--bg);
    font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
    transition: border-color .2s var(--ease-standard);
}
.item-change::before {
    content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.25' y='4.75' width='17.5' height='16.5' rx='3'/%3E%3Cpath d='M8 2.75v4M16 2.75v4M3.25 10h17.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.25' y='4.75' width='17.5' height='16.5' rx='3'/%3E%3Cpath d='M8 2.75v4M16 2.75v4M3.25 10h17.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.item-change:hover { text-decoration: none; border-color: var(--link); }

.item-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 31%, 372px);
    column-gap: 56px;
    align-items: stretch;
}
.item-media { position: relative; min-width: 0; }
.item-config { min-width: 0; padding-bottom: 8px; }

/* The photographs: Apple's sticky gallery column (1s slide, arrows hide at the ends). */
.gallery {
    position: sticky; top: calc(var(--bar-h) + 24px);
    width: 100%; aspect-ratio: 4 / 5;                         /* never narrower: ui/media.js gallerySlide() cuts photos to this */
    max-height: min(calc(100svh - var(--bar-h) - 48px), 880px);
    border-radius: 28px; overflow: hidden; isolation: isolate;
    background: var(--bg-alt);
}
.gallery:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.gallery .gallery__track {
    position: absolute; inset: 0; display: block;
    padding: 0; overflow: hidden; scroll-snap-type: none;
}
.gallery__slide { position: absolute; inset: 0; margin: 0; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.gallery__slide--whole img { object-fit: contain; }
@media (min-width: 1069px) { .gallery__slide--tall img { object-fit: contain; } }

@keyframes slideNextIn  { from { transform: translateX(100%); }  to { transform: none; } }
@keyframes slideNextOut { from { transform: none; }              to { transform: translateX(-100%); } }
@keyframes slidePrevIn  { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slidePrevOut { from { transform: none; }              to { transform: translateX(100%); } }
.gallery__slide.next-in  { animation: slideNextIn  1s var(--ease-standard) forwards; }
.gallery__slide.next-out { animation: slideNextOut 1s var(--ease-standard) forwards; }
.gallery__slide.prev-in  { animation: slidePrevIn  1s var(--ease-standard) forwards; }
.gallery__slide.prev-out { animation: slidePrevOut 1s var(--ease-standard) forwards; }

.gallery__nav {
    position: absolute; top: 50%; z-index: 2;
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-top: -22px;
    border-radius: 50%;
    background: rgba(210, 210, 215, .64); color: rgba(0, 0, 0, .56);
    transition: background-color .1s linear, color .1s linear;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .gallery__nav { -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
}
.gallery__nav:hover { background: rgba(223, 223, 227, .9); color: rgba(0, 0, 0, .8); }
.gallery__nav svg { width: 22px; height: 22px; stroke-width: 2; }
.gallery__nav--prev { left: 20px; }
.gallery__nav--prev svg { transform: rotate(180deg); }
.gallery__nav--next { right: 20px; }

/* ── The choices: "Step. Question?" over bordered tiles ── */

.addon + .addon { margin-top: 72px; }
.addon__title { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; }
.addon__title span { color: var(--ink-2); }
.addon__list { display: grid; gap: 14px; margin-top: 24px; }

.option {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
    width: 100%; min-height: 76px;
    padding: 17px 16px 17px 18px;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--tile-line); border-radius: 12px;
    transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.option[aria-checked="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }   /* Apple's 2px selected border, no shift */
.option:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.option__body { display: block; min-width: 0; }
.option__title { font-size: 17px; line-height: 1.23536; font-weight: 600; }
.option__desc { margin-top: 4px; font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2); }
.option__desc:empty { display: none; }
.option__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-top: 1px; }
.option__amount { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; white-space: nowrap; }
.option__suffix { font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; }
.option.is-disabled { cursor: default; border-color: var(--hair); background: var(--bg-alt); }
.option.is-disabled .option__title { color: var(--ink-2); }

/* ── The running total ── */

.estimate {
    margin-top: 72px;
    padding: 30px 28px 28px;
    border-radius: 18px;
    background: var(--bg-alt);
}
.estimate__label { font-size: 17px; line-height: 1.23536; font-weight: 600; }
.estimate__total { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
#estimateTotal { font-size: 40px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.estimate__suffix { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.estimate__note { margin-top: 16px; font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--ink-2); }

.rows--price {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px;
    margin-top: 18px; padding: 16px 0;
    border-block: 1px solid var(--hair);
}
.rows--price dt, .rows--price dd { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.rows--price dt { color: var(--ink-2); }
.rows--price dd { text-align: right; font-variant-numeric: tabular-nums; }

.rows--summary {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; row-gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--hair);
}
/* No daily rate in the CMS (price on request): item.js hides the figure. Drop its label, the lone "/day" and the
   "all-in price" note with it; the panel opens on the summary. */
.estimate:has(#estimateTotal[hidden]) :is(.estimate__label, .estimate__total, .estimate__note) { display: none; }
.estimate:has(#estimateTotal[hidden]) .rows--summary { margin-top: 0; padding-top: 0; border-top: 0; }
.rows--summary dt, .rows--summary dd { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.rows--summary dt { color: var(--ink-2); }
#reserveButton { margin-top: 24px; }

.help { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 0 4px; font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.help svg { width: 24px; height: 24px; flex: none; color: var(--ink-2); stroke-width: 1.3; }

/* ── Vehicle Information: Apple tech-specs rows ── */

.state--estimate .specs {
    display: block; margin: var(--pad) 0 0; padding: 0; border: 0;
}
.specs__title { font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em; margin-bottom: 48px; }
.specs__rows { border-bottom: 1px solid var(--hair); }
.spec {
    display: grid; grid-template-columns: minmax(180px, 25%) minmax(0, 1fr); column-gap: 32px; align-items: baseline;
    padding: 28px 0 30px;
    border-top: 1px solid var(--hair);
}
.spec dt { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; }
.spec dd { font-size: 17px; line-height: 1.47059; max-width: 720px; }
.spec:first-child dd { color: var(--ink-2); font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }   /* the Overview sentence */

/* ─── CHECKOUT (apple.com/shop/checkout) ──────────────────────────────────── */

.checkout-bar {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hair);
}
.checkout-bar p { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; }
.checkout-bar .checkout-bar__total { font-size: 17px; line-height: 1.23536; font-weight: 400; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }

.flow-title { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0; }
.flow-title--center { text-align: center; }
.flow-title--step { margin-bottom: 40px; }
.flow-title--driver { margin-top: 56px; }
.flow-title--review { margin-top: 56px; }
.flow-lede { margin-top: 10px; text-align: center; color: var(--ink-2); font-size: 21px; line-height: 1.38105; letter-spacing: .011em; }

.flow-sub { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; }
.flow-sub--contact, .flow-sub--emergency { margin-top: 48px; }

.fields { display: grid; gap: 14px; margin-top: 18px; }
.fields__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.col-form { min-width: 0; }

/* ─── FIELDS (ui/field.js) ────────────────────────────────────────────────── */

.field {
    position: relative;
    height: 56px;
    border: 1px solid var(--tile-line); border-radius: 12px;
    background: var(--bg);
    cursor: text;
    transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard), background-color .2s var(--ease-standard);
}
.field__label {
    position: absolute; left: 16px; top: 17px; z-index: 1;
    max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 17px; line-height: 20px; color: var(--ink-2);
    pointer-events: none;
    transform-origin: 0 50%;
    transition: transform .2s var(--ease-standard), color .2s var(--ease-standard);
}
.field.is-floated .field__label { transform: translateY(-10px) scale(.706); max-width: calc((100% - 32px) / .706); }
.field__control {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    padding: 21px 16px 3px;
    border: 0; border-radius: 12px; outline: none;
    background: transparent;
    font: inherit; font-size: 17px; line-height: 1.23536; color: var(--ink);
    -webkit-appearance: none; appearance: none;
}
.field__control::placeholder { color: transparent; }
.field__control[type="number"] { -moz-appearance: textfield; }
.field__control::-webkit-inner-spin-button, .field__control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select.field__control { padding-right: 44px; cursor: pointer; }
.field.is-focused { border-color: var(--focus); box-shadow: 0 0 0 4px rgba(0, 125, 250, .3); }
.field:has(.field__control:focus-visible) { border-color: var(--focus); box-shadow: 0 0 0 4px rgba(0, 125, 250, .3); }

.field--select::after, .field--date::after {
    content: ''; position: absolute; top: 50%; right: 18px; pointer-events: none;
}
.field--select::after {
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
    transform: rotate(45deg);
}
.field--date { cursor: pointer; }
.field--date .field__control { cursor: pointer; padding-right: 44px; }
.field--date::after {
    width: 18px; height: 18px; margin-top: -9px; background: var(--ink-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.25' y='4.75' width='17.5' height='16.5' rx='3'/%3E%3Cpath d='M8 2.75v4M16 2.75v4M3.25 10h17.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.25' y='4.75' width='17.5' height='16.5' rx='3'/%3E%3Cpath d='M8 2.75v4M16 2.75v4M3.25 10h17.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Errors: red outline and tint, and the sentence under the field (Apple checkout). */
.field.has-error { border-color: var(--error); background: var(--error-bg); margin-bottom: 26px; }
.field.has-error.is-focused,
.field.has-error:has(.field__control:focus-visible) { border-color: var(--error); box-shadow: 0 0 0 4px rgba(227, 0, 0, .18); }
.field--select.has-error::after { background: none; border-color: var(--error); }
.field__error {
    display: none;
    position: absolute; left: 2px; right: 0; top: calc(100% + 6px);
    font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--error);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
}
.field.has-error .field__error { display: block; }
.ov-pair .field.has-error { margin-bottom: 0; }      /* the dates panel says it once, under the fields */

/* Carried over from the booker and locked (driver step). */
.field.is-locked { background: var(--bg-alt); border-color: var(--hair); cursor: default; }
.field.is-locked .field__control { color: var(--ink-2); cursor: default; }

/* ─── 2 · SIGN IN OR GUEST ────────────────────────────────────────────────── */

.flow-title--member { margin-top: 24px; }
.member {
    display: grid; grid-template-columns: 1fr 1fr;
    margin-top: 64px;
}
.member__signin { padding-right: 64px; }
.member__guest { padding-left: 64px; border-left: 1px solid var(--hair); }
.member__heading { font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; }
.member__signin .field { margin-top: 14px; }
.member__signin .field:first-of-type { margin-top: 24px; }
.member__soon { margin-top: 14px; font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2); }
.member__text { margin-top: 10px; color: var(--ink-2); }
.pill--guest { width: 100%; margin-top: 28px; }

/* ─── 3 · DELIVERED OR PICKED UP ──────────────────────────────────────────── */

.delivery { margin-top: 64px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.segmented--method { max-width: 600px; margin: 32px auto 0; }
/* Stacked radio rows with a radio disc, so they do not read as two more empty text fields. */
.segmented--person { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.segmented--person .segment { position: relative; min-height: 56px; padding: 0 52px 0 18px; align-items: flex-start; text-align: left; }
.segmented--person .segment::after {
    content: ''; position: absolute; right: 18px; top: 50%;
    width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--tile-line);
    transition: box-shadow .2s var(--ease-standard);
}
.segmented--person .segment[aria-checked="true"]::after { box-shadow: inset 0 0 0 6px var(--focus); }

.segment {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 64px; padding: 16px;
    border: 1px solid var(--tile-line); border-radius: 12px;
    background: var(--bg);
    font-size: 17px; line-height: 1.23536; font-weight: 600; text-align: center;
    transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.segmented--method .segment { min-height: 128px; padding: 24px 16px 20px; justify-content: flex-start; }
.segmented--method .segment span { text-wrap: balance; }
.segment__icon { width: 34px; height: 34px; stroke-width: 1.2; }
.segment[aria-checked="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.segment:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.method { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--hair); }

.flow-sub--store { margin-bottom: 0; }
.stores { display: grid; gap: 14px; margin-top: 18px; }
.store { min-height: 84px; }
.store .option__amount { font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--ink-2); }
.store[aria-checked="true"] .option__amount { color: var(--ink); }
.store.is-disabled .option__price { display: none; }          /* its status is already the line under the name */
.pill--form { margin-top: 32px; }

.store-panel, .aside-notes {
    align-self: start;
    padding: 28px 28px 30px;
    border-radius: 18px;
    background: var(--bg-alt);
    font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--ink-2);
}
.store-panel { margin-top: 42px; }
.store-panel__name { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; color: var(--ink); }
.store-panel__address { margin-top: 8px; color: var(--ink); }
.store-panel__phone { margin-top: 4px; color: var(--ink); }
.store-panel__hours { display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; row-gap: 2px; margin-top: 16px; }
.store-panel__hours dd { color: var(--ink); }
.store-panel__wait { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 17px; line-height: 1.23536; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }
.store-panel__para { margin-top: 8px; }

.aside-notes { margin-top: 42px; }
.aside-notes__head { font-size: 17px; line-height: 1.23536; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }
.aside-notes__list { margin-top: 10px; padding-left: 1.1em; list-style: disc; }
.aside-notes__list li + li { margin-top: 6px; }
.aside-notes__para { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }

.contact { display: grid; gap: 14px; margin-top: 18px; }
.note { margin-top: -6px; font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--ink-2); }
.contact .field.has-error + .note { margin-top: 0; }

.pill--continue { width: 100%; margin-top: 40px; }

/* ─── 4 · THE DRIVER ──────────────────────────────────────────────────────── */

.check { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 20px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
    flex: none; display: grid; place-items: center;
    width: 22px; height: 22px;
    border: 1px solid var(--tile-line); border-radius: 6px;
    background: var(--bg); color: var(--white);
    transition: background-color .15s var(--ease-standard), border-color .15s var(--ease-standard);
}
.check__box svg { width: 11px; height: 9px; opacity: 0; transition: opacity .15s var(--ease-standard); }
.check input:checked + .check__box { background: var(--focus); border-color: var(--focus); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.check__label { font-size: 17px; line-height: 1.23536; }
.state--driver .col-form { max-width: 560px; margin-top: 36px; }
.pill--driver { margin-top: 40px; }

/* ─── 5 · REVIEW, 6 · RECEIPT ─────────────────────────────────────────────── */

.receipt { margin-top: 48px; }
.receipt__hero {
    display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; align-items: start;
    padding-bottom: 40px;
}
.receipt__image { width: 200px; height: 200px; object-fit: cover; border-radius: 18px; background: var(--bg-alt); }
.receipt__image.is-whole { object-fit: contain; }
.receipt__handover { font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: .007em; }
.receipt__vehicle { margin-top: 10px; font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; color: var(--ink-2); }
.receipt__handover:empty, .receipt__vehicle:empty { display: none; }
.rows--config {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    margin-top: 24px;
}
.rows--config dt, .rows--config dd { padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
.rows--config dt { color: var(--ink-2); }
.rows--config dd { padding-left: 32px; text-align: right; }
.state--confirmed .rows--config { margin-top: 0; }

.module {
    display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px;
    padding: 36px 0 38px;
    border-top: 1px solid var(--hair);
}
.module__title { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; }
.module__col p { font-size: 17px; line-height: 1.47059; white-space: pre-line; overflow-wrap: anywhere; }
.module__col .module__label { margin-bottom: 4px; font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; font-weight: 600; color: var(--ink-2); }

.totals {
    display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px;
    padding-top: 36px;
    border-top: 1px solid var(--hair);
}
.totals__title { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em; }
.rows--totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px; }
.rows--totals dt, .rows--totals dd { font-size: 17px; line-height: 1.47059; }
.rows--totals dt { color: var(--ink-2); }
.rows--totals dd { text-align: right; font-variant-numeric: tabular-nums; }
.totals__grand {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 16px; padding-top: 18px;
    border-top: 1px solid var(--hair);
    font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: .009em; font-variant-numeric: tabular-nums;
}
.totals__note { margin-top: 12px; text-align: right; font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--ink-2); }

.review-error {
    margin-top: 32px; margin-left: auto; max-width: 560px;
    padding: 14px 18px; border-radius: 12px;
    background: var(--error-bg); color: var(--error);
    font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em;
}
.receipt__actions { display: flex; justify-content: flex-end; margin-top: 40px; }
.human-check:not(:empty) { display: flex; justify-content: flex-end; }
.review-error:not([hidden]) + .receipt__actions { margin-top: 16px; }
.pill--reserve { min-width: 280px; }

.confirm-meta { margin-top: 8px; font-size: 17px; line-height: 1.47059; color: var(--ink-2); }
.flow-title + .confirm-meta { margin-top: 20px; }

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */

.faq { width: var(--w); margin: 0 auto; padding: var(--pad) 0; }
body:has(.state--estimate[hidden]) .faq { width: var(--flow-w); }
.faq__head {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    width: 100%; min-height: 44px; padding-bottom: 24px;
    text-align: left;
}
#faqTitle { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 600; }
.faq__icon--section { width: 22px; height: 12px; flex: none; color: var(--ink-2); stroke-width: 12; transform: rotate(180deg); transition: transform .32s var(--ease-standard); }
.faq__icon--section.is-open { transform: none; }

.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-standard); }
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__panel > * { overflow: hidden; min-height: 0; }
.faq__panel:not(.is-open) .faq__list { border-top-color: transparent; }

.faq__q {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    width: 100%; padding: 24px 0;
    text-align: left;
    font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: .011em;
}
.faq__q:hover { color: var(--ink-2); }
.faq__q .faq__icon { display: none; }
.faq__q::after {
    content: ''; flex: none; width: 18px; height: 18px;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
    color: var(--ink-2);
    transition: transform .32s var(--ease-standard);
}
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-standard); }
.faq__a > div { overflow: hidden; min-height: 0; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { max-width: 720px; padding: 0 48px 28px 0; color: var(--ink-2); }

/* ─── OVERLAY (ui/overlay.js) ─────────────────────────────────────────────── */

.overlay {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: start center;
    padding: max(24px, 7vh) 24px 24px;
    overflow-y: auto;
    visibility: hidden; opacity: 0;
    transition: opacity .3s var(--ease-standard), visibility 0s linear .3s;
}
.overlay.is-open { visibility: visible; opacity: 1; transition: opacity .3s var(--ease-standard), visibility 0s; }
.overlay__scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .48); }
.overlay__panel {
    position: relative;
    width: min(640px, 100%);
    border-radius: 18px;
    background: var(--bg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    transform: translateY(12px);
    transition: transform .3s var(--ease-standard);
}
.overlay__panel:focus { outline: none; }
.overlay__close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--platter); color: rgba(0, 0, 0, .56);
    transition: background-color .1s linear, color .1s linear;
}
.overlay__close::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.overlay__close:hover { background: var(--disc-hover); color: rgba(0, 0, 0, .88); }
.overlay__close svg { width: 20px; height: 20px; }

.ov-dates { padding: 56px 56px 48px; }
.ov-title { padding-right: 40px; font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; }
.ov-rule { margin: 24px 0 0; border: 0; border-top: 1px solid var(--hair); }
.ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ov-heading { margin-top: 24px; font-size: 17px; line-height: 1.23536; font-weight: 600; }
.ov-pair { display: grid; gap: 12px; margin-top: 12px; }
.ov-text { margin: 24px 0 20px; color: var(--ink-2); }
.ov-message { margin-top: 16px; font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--error); }
.ov-save {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 50px; margin-top: 32px;
    border-radius: 980px; background: var(--ink); color: var(--white);
    font-size: 17px; line-height: 1.17648;
    transition: background-color .2s var(--ease-standard), opacity .2s var(--ease-standard);
}
.ov-save:hover:not(:disabled) { background: var(--btn-hover); }
.ov-save:disabled { opacity: .5; cursor: progress; }

/* ─── CALENDAR (ui/datePicker.js) ─────────────────────────────────────────── */

.calendar {
    position: absolute; z-index: 120;
    width: 322px;
    padding: 6px 10px 14px;
    border-radius: 18px;
    background: var(--bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 40px rgba(0, 0, 0, .18);
    color: var(--ink);
    opacity: 0; transform: translateY(-4px);
    transition: opacity .15s var(--ease-standard), transform .15s var(--ease-standard);
}
.calendar__head { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 2px; }
.calendar__title { min-width: 78px; text-align: center; font-size: 17px; line-height: 1.23536; font-weight: 600; }
.calendar__step { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--link); }
.calendar__step::after { content: ''; position: absolute; inset: -6px; }
.calendar__grid { border-collapse: collapse; margin: 0 auto; table-layout: fixed; }
.calendar__grid th { width: 42px; height: 32px; padding: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: center; letter-spacing: 0; }
.calendar__grid td { width: 42px; height: 40px; padding: 2px; text-align: center; }
.calendar__day {
    width: 38px; height: 38px; border-radius: 50%;
    font-size: 17px; letter-spacing: -0.022em; font-variant-numeric: tabular-nums;
    transition: background-color .15s var(--ease-standard), color .15s var(--ease-standard);
}
.calendar__day:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

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

@media (max-width: 1068px) {
    .item-title { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
    .item-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }   /* the choices need room to read */
    .addon__title { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
    .specs__title { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
    #faqTitle { font-size: 32px; line-height: 1.125; }
    .member__signin { padding-right: 48px; }
    .member__guest { padding-left: 48px; }
    .module, .totals { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); }
    .receipt__hero { grid-template-columns: 200px minmax(0, 1fr); }
    .totals { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 833px) {
    .sticky__name { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }
    .two-col { grid-template-columns: minmax(0, 1fr); }
    .store-panel, .aside-notes { margin-top: 40px; }
    .flow-title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
    .module { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 16px; }
    .module__title { grid-column: 1 / -1; }
    .totals { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}

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

@media (max-width: 734px) {
    .state:not(.state--estimate) { padding-top: calc(var(--bar-h) + 32px); }
    .state.state--review, .state.state--confirmed { padding-top: 40px; }

    .item-head { flex-direction: column; align-items: flex-start; gap: 20px; padding: 4px 0 32px; }
    .item-head__when { align-items: flex-start; text-align: left; max-width: none; }
    .item-when { white-space: normal; text-wrap: balance; font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }   /* one line on a phone */
    .item-title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }

    .item-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
    .gallery { position: relative; top: 0; height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 72svh; border-radius: 18px; }
    .gallery__nav { width: 40px; height: 40px; margin-top: -20px; }
    .gallery__nav::after { content: ''; position: absolute; inset: -2px; }
    .gallery__nav--prev { left: 12px; }
    .gallery__nav--next { right: 12px; }

    .addon + .addon, .estimate { margin-top: 56px; }
    .estimate { padding: 26px 22px 24px; }
    .specs__title { font-size: 32px; line-height: 1.125; letter-spacing: .004em; margin-bottom: 32px; }
    .spec { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 22px 0 24px; }
    .spec dt { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }
    .spec:first-child dd { font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; }

    .sticky__when { display: none; }
    .sticky__bar { gap: 12px; }
    .sticky__name { flex: 0 1 auto; max-width: none; }
    .sticky__right { flex: none; }
    .sticky__name { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; }
    .sticky__total { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; }
    .sticky__change, .sticky__total[hidden] ~ .sticky__change { font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }
    /* With dates chosen, the car step's link becomes "Looking for another date & time?". That is too long to share a
       phone bar with the car's name, so the bar keeps the name and the same pill sits under the title. */
    body:has(.state--estimate:not([hidden])) .sticky__when:not([hidden]) ~ .sticky__change { display: none; }

    .buybar { width: auto; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); height: 60px; }
    .buybar__action { height: 44px; padding: 0 20px; }

    .checkout-bar p { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
    .flow-title { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
    .flow-title br { display: none; }
    .flow-lede { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
    .member { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
    .member__signin { padding: 0 0 40px; }
    .member__guest { padding: 40px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
    .member__heading { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }

    .delivery { margin-top: 48px; }
    .segmented { gap: 10px; }
    .segmented--method .segment { min-height: 112px; }
    .method { margin-top: 48px; padding-top: 40px; }
    .flow-title--step { margin-bottom: 28px; }
    .flow-sub { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }

    .receipt__hero { grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; padding-bottom: 32px; }
    .receipt__image { width: 104px; height: 104px; border-radius: 14px; grid-row: span 2; }
    .receipt__handover { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
    .receipt__vehicle { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; }
    .rows--config { grid-column: 1 / -1; }
    .receipt__headline { display: contents; }
    .receipt__handover, .receipt__vehicle { grid-column: 2; }
    .receipt__vehicle { margin-top: 6px; }
    .module { grid-template-columns: minmax(0, 1fr); padding: 28px 0 30px; }
    .totals__grand { font-size: 21px; line-height: 1.19048; }
    .totals__note { text-align: left; }
    .receipt__actions { justify-content: stretch; }
    .pill--reserve { width: 100%; min-width: 0; }

    .faq__q { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; padding: 20px 0; }
    .faq__a p { padding-right: 0; }
    #faqTitle { font-size: 28px; line-height: 1.14286; }

    /* The panel sits near the top on phones, so the calendar opens under its field and stays on screen. */
    .overlay { padding: 12px 12px 24px; }
    .ov-dates { padding: 52px 20px 28px; }
    .ov-title { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
    .ov-cols { gap: 12px; }
}

@media (max-width: 359px) {
    .ov-cols, .segmented, .fields__pair { grid-template-columns: minmax(0, 1fr); }
}

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

@media (prefers-reduced-motion: reduce) {
    .gallery__slide { animation-duration: .01ms !important; }
    .faq__panel, .faq__a, .faq__icon--section, .faq__q::after, .overlay__panel, .buybar, .sticky, .calendar { transition-duration: .01ms; }
    .buybar, .buybar.is-shown { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .sticky, .buybar { background: var(--bg-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .gallery__nav { background: var(--control); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .option, .segment, .field { border-color: var(--ink); }
    .sticky { box-shadow: inset 0 -2px 0 var(--ink); }
}