/* ==========================================================================
   Autospektr Rentals: Public Site Design System
   Dark-mode-first, glassmorphism, #275095 UI color
   ========================================================================== */

/* --- Design Tokens --- */
:root {
    --asr-primary: #275095;
    --asr-primary-light: #3568b8;
    --asr-primary-dark: #1b3a6e;
    --asr-subtitle: #AAC1E9;
    --asr-text: #e4e8ef;
    --asr-text-muted: #8b9dc3;
    --asr-bg: #1f1f1f;
    --asr-bg-card: rgba(39, 39, 39, 0.52);
    --asr-bg-card-hover: rgba(50, 50, 50, 0.6);
    --asr-border: #737373;
    --asr-border-hover: #999999;
    --asr-glass: rgba(30, 45, 75, 0.60);
    --asr-glass-strong: rgba(30, 45, 75, 0.80);
    --asr-blur: 16px;
    --asr-radius: 12px;
    --asr-radius-md: 16px;
    --asr-radius-lg: 20px;
    --asr-radius-xl: 28px;
    --asr-radius-full: 999px;
    --asr-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --asr-shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
    --asr-transition: 0.25s ease;
    --asr-max-width: 1140px;
    --asr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --asr-font-heading: 'Quicksand', 'Inter', -apple-system, sans-serif;
    --asr-header-height: 80px;
    --asr-white: #ffffff;
    --asr-success: #34d399;
    --asr-warning: #fbbf24;
    --asr-booking-bg: rgba(39, 39, 39, 0.52);
    --asr-booking-text: var(--asr-text);
    --asr-booking-border: var(--asr-border);
    --asr-booking-card: rgba(255,255,255,0.04);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Disable tap highlight on mobile --- */
* { -webkit-tap-highlight-color: transparent; }

/* --- Autofill: preserve dark theme colors --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--asr-text);
    -webkit-box-shadow: 0 0 0 1000px var(--asr-bg) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- Custom Scrollbar --- */
html, body.asr-public, body.asr-public * {
    scrollbar-width: thin;
    scrollbar-color: rgba(170, 193, 233, 0.2) transparent;
}

html::-webkit-scrollbar,
body.asr-public ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html::-webkit-scrollbar-track,
body.asr-public ::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body.asr-public ::-webkit-scrollbar-thumb {
    background: rgba(170, 193, 233, 0.2);
    border-radius: 3px;
}

html::-webkit-scrollbar-thumb:hover,
body.asr-public ::-webkit-scrollbar-thumb:hover {
    background: rgba(170, 193, 233, 0.35);
}

body.asr-public {
    font-family: var(--asr-font);
    background: #101620;
    color: var(--asr-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.asr-public .asr-bg-gradient {
    min-height: 100vh;
    background: radial-gradient(ellipse 120% 800px at 50% 0px, #1e3a5f 0%, #101620 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --- Page transitions --- */
body.asr-public main {
    animation: asrFadeIn 0.3s ease both;
}

body.asr-public.asr-page-entered main {
    animation: asrFadeIn 0.3s ease both;
}

body.asr-public.asr-page-leaving main {
    animation: asrPageOut 0.18s ease-in both;
}

@keyframes asrFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes asrPageOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

h1, h2, h3, h4, h5, h6,
.asr-section__title,
.asr-hero__title,
.asr-cta__title,
.asr-fleet-header h1,
.asr-vehicle-hero__name,
.asr-footer__col-title {
    font-family: var(--asr-font-heading);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--asr-subtitle); text-decoration: none; transition: color var(--asr-transition); }
a:hover { color: var(--asr-white); }

.asr-container {
    width: 100%;
    max-width: var(--asr-max-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* --- Section Wrapper --- */
.asr-section {
    padding: 72px 0;
}
.asr-section--tight {
    padding: 48px 0;
}

.asr-section__title {
    font-size: 28px;
    font-weight: 700;
    color: #AAC1E9;
    margin-bottom: 32px;
}

.asr-section__subtitle {
    font-size: 15px;
    color: var(--asr-subtitle);
    margin-bottom: 40px;
}

/* --- 404 Page --- */
.asr-404 {
    min-height: calc(100dvh - var(--asr-header-height) - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.asr-404__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    padding: 0 24px;
}

.asr-404__code {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.asr-404__digit {
    font-family: var(--asr-font-heading);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: var(--asr-white);
    text-shadow: 0 0 40px rgba(39, 80, 149, 0.5);
    animation: asr-404-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.asr-404__digit--1 { animation-delay: 0.1s; }
.asr-404__digit--2 {
    animation-delay: 0.2s;
    color: var(--asr-subtitle);
}
.asr-404__digit--3 { animation-delay: 0.3s; }

.asr-404__title {
    font-family: var(--asr-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--asr-white);
    margin-bottom: 12px;
    animation: asr-404-up 0.5s ease 0.4s both;
}

.asr-404__desc {
    font-size: 15px;
    color: var(--asr-text-muted);
    line-height: 1.6;
    margin-bottom: 32px;
    animation: asr-404-up 0.5s ease 0.5s both;
}

.asr-404__actions {
    display: flex;
    gap: 12px;
    animation: asr-404-up 0.5s ease 0.6s both;
}

@keyframes asr-404-drop {
    from { opacity: 0; transform: translateY(-30px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes asr-404-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .asr-404__digit { font-size: 64px; }
    .asr-404__title { font-size: 20px; }
    .asr-404__actions { flex-direction: column; width: 100%; }
    .asr-404__actions .asr-btn { justify-content: center; }
}

/* --- Header --- */
.asr-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 32px;
    transition: all 0.4s ease;
    will-change: transform;
}

.asr-header--hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.asr-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    border-radius: var(--asr-radius-full);
    border: 1px solid transparent;
    transition: all 0.4s ease;
}

.asr-header--scrolled .asr-header__inner {
    background: var(--asr-bg-card);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    box-shadow: var(--asr-shadow);
}

.asr-header__logo {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.asr-header__logo img {
    height: 48px;
    width: auto;
}

.asr-header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asr-header__nav-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--asr-white);
    padding: 8px 16px;
    border-radius: var(--asr-radius-full);
    transition: all var(--asr-transition);
    white-space: nowrap;
    text-decoration: none;
}

.asr-header__nav-link:hover,
.asr-header__nav-link.active {
    color: var(--asr-white);
    background: rgba(255,255,255,0.06);
}

.asr-header__divider {
    width: 1px;
    height: 16px;
    background: var(--asr-white);
    align-self: center;
    margin: 0 4px;
}

/* --- Mobile Nav Sheet --- */
.asr-navsheet {
    display: none;
}

.asr-header__lang {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 6px 16px 6px 10px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--asr-radius-full);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    font-size: 14px;
    font-weight: 500;
    color: var(--asr-text);
    cursor: pointer;
    transition: all var(--asr-transition);
    text-decoration: none;
}

/* (mobile lang is inside navsheet) */

/* Now a group of two links (EN | UA) rather than one toggle, so the container is a
   plain pill and each option carries its own state. See Layouts/PublicHeader for why
   both languages are shown at once. Padding tightens because the options have their
   own; the dealership's tint values are NOT copied - this header is dark, so the
   active state lifts with light rather than dropping into a primary-coloured wash. */
.asr-header__lang { padding: 4px; gap: 2px; }

.asr-header__lang-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--asr-radius-full);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--asr-text-muted);
    text-decoration: none;
    transition: all var(--asr-transition);
}

.asr-header__lang-opt:hover {
    color: var(--asr-text);
    background: rgba(255,255,255,0.08);
}

.asr-header__lang-opt--on {
    background: rgba(255,255,255,0.14);
    color: var(--asr-text);
}

/* The inactive option's flag reads as decoration until it is the live one. */
.asr-header__lang-opt svg { opacity: 0.55; transition: opacity var(--asr-transition); }
.asr-header__lang-opt--on svg,
.asr-header__lang-opt:hover svg { opacity: 1; }

.asr-header__lang:hover {
    background: rgba(255,255,255,0.12);
}

.asr-header__lang svg {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
}

/* Mobile menu button */
.asr-header__menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--asr-text);
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}

/* Mobile menu scrim: sits above billing sheet (9999) but below nav sheet (10001) */
.asr-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 10000;
    pointer-events: none;
    transition: background 0.35s ease;
}

.asr-scrim--open {
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}

.asr-header__menu-btn svg {
    width: 24px;
    height: 24px;
}

/* --- Hero --- */
.asr-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 0 120px;
    overflow: hidden;
}

.asr-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.asr-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asr-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
            linear-gradient(to bottom, rgba(16,22,32,0.8) 0%, rgba(16,22,32,0) 120px)
}

.asr-hero__content {
    position: relative;
    z-index: 1;
    text-align: left;
    width: 100%;
    max-width: var(--asr-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.asr-hero__title {
    font-family: var(--asr-font-heading);
    font-size: 48px;
    font-weight: 700;
    color: var(--asr-white);
    line-height: 1.15;
    margin-bottom: 8px;
    white-space: nowrap;
}

.asr-hero__text {
    font-family: var(--asr-font-heading);
    font-size: 32px;
    font-weight: 400;
    color: var(--asr-white);
    margin-bottom: 24px;
    max-width: 480px;
}

/* Hero CTA button */
.asr-hero-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 578px;
    padding: 16px 24px;
    background: rgba(39, 80, 149, 0.52);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-full);
    color: #AAC1E9;
    text-decoration: none;
    transition: all var(--asr-transition);
}

.asr-hero-cta:hover {
    background: rgba(39, 80, 149, 0.7);
    color: var(--asr-white);
}

.asr-hero-cta__left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.asr-hero-cta__left svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.asr-hero-cta__arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* --- Fleet Search Form ---
   Pickup date, return date, location, vehicle type, submit. One partial, two homes: the top
   of the home hero and the top of /fleet. The two variants differ only in ground and width;
   everything else is shared. */
.asr-fleetsearch {
    /* backdrop-filter below already creates a stacking context; position + z-index make it an
       explicitly ordered one. Without this, a .asr-dropdown__panel inside it (z-index: 100)
       is trapped INSIDE that context and stacks only against its own form siblings: on
       /fleet, where the results grid sits right below, an open panel then paints behind the
       vehicle cards and its options become unclickable wherever they overlap. Confirmed
       empirically: elementFromPoint on an option's own coordinates returned the vehicle card
       beneath it before this fix, and the option button after it, on /fleet. The home surface
       (.asr-fleetsearch--home) never had this problem before or after: nothing behind it
       there forms a competing stacking context, so this rule is a no-op there, confirmed the
       same way.

       All four panels are now moved out to document.body instead - the two calendars and the
       location picker always were, the vehicle type joined them so its backdrop-filter has a
       page to sample (see .asr-dropdown__panel--float) - so nothing is left inside this
       context that needs to outrank the grid. The rule stays because the form's own controls
       still sit over that grid, and because a stacking context this one owns explicitly is
       cheaper to reason about than one it acquires by accident from backdrop-filter. */
    position: relative;
    z-index: 1;
    display: grid;
    /* Pickup, return, type, then the button. There was a location column too; see
       FleetSearchForm for why the search no longer asks for one. */
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    /* start, not end. Bottom-aligning put each label at a different height, because the four
       controls are four different heights: the date triggers 59px (their text wrapped to two
       lines), the location 43, the type 35. Measured at 1280px before this was changed. The
       rules below make the controls one height; this makes the labels one baseline. */
    align-items: start;
    padding: 16px;
    background: var(--asr-bg-card);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
    box-shadow: var(--asr-shadow);
}

/* Grid items default to min-width: auto, which refuses to shrink below the widest word a
   control holds (a long location name, a long body type). Without this a narrow column can
   push the form wider than its own box instead of wrapping inside it. */
.asr-fleetsearch__field {
    min-width: 0;
}

/* The three picker components come from the booking form and the fleet toolbar, where each
   sits in a different layout. Dropped into one grid row they disagreed: the type trigger did
   not fill its column (109px against the others' 162), carried 8px padding against their 12,
   and was a pill against their rounded rect; and the location picker brought a 16px bottom
   margin that only makes sense stacked. Every number here was measured, not guessed. */
.asr-fleetsearch__field .asr-locpicker {
    margin-bottom: 0;
}

.asr-fleetsearch__field .asr-dropdown__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    /* The last difference, and the one left behind when the geometry was reconciled: the two
       components fill differently. --asr-bg-card is rgba(39,39,39,.52), a half-opaque warm
       grey built for a card sitting on its own; the locpicker beside it wears a 4% white
       wash. Side by side in one row that reads as one field being a slightly different
       colour from the three next to it, which is exactly what it looked like. The border was
       already the same #737373 through the token. */
    background: rgba(255, 255, 255, 0.04);
    /* And no backdrop-filter, which is the other half of the same fault the panel had.
       .asr-dropdown__trigger carries blur(var(--asr-blur)) for the /fleet/all toolbar, where
       it sits over the page and has something to blur. In here it is inside .asr-fleetsearch,
       a BACKDROP ROOT, so it can only sample the form's own empty backdrop - and sampling it
       CUTS OUT what is really behind, so the 4% white ends up over neutral instead of over
       the navy the three fields beside it show through. Reported as the button looking
       "solid grey for some reason", and it is the only difference left between them:
       everything in the cascade already matched.

       Measured at the trigger's own pixels, because the cascade cannot see this. As shipped
       it rendered rgb(64,66,71) against the location trigger's rgb(63,68,77) - a blue cast
       of 7 against 14. With this line it renders rgb(60,64,74), cast 14, the same as the two
       date fields. Nothing is lost by dropping it: there was never anything in there to
       blur. The panel gets its blur by LEAVING the form instead - see
       .asr-dropdown__panel--float. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* The panel it opens is NOT styled here. asr-public.js moves it out to document.body, so a
   rule scoped to .asr-fleetsearch__field cannot reach it any more; it wears
   .asr-dropdown__panel--float, beside the base .asr-dropdown__panel rule further down. That
   move is what earns it a blur - see the comment on the float rule. */

/* A date is one line or it is truncated, never two. "September 17, 2026" wrapping is what
   made the date triggers 16px taller than everything beside them. */
.asr-fleetsearch__field .asr-datepicker__display {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* A quarter-width column is narrow: truncate a long location or vehicle-type label rather
   than let it wrap and pull that one field's row taller than the three beside it. */
.asr-fleetsearch__field .asr-locpicker__display,
.asr-fleetsearch__field .asr-dropdown__value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.asr-fleetsearch__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--asr-text-muted);
    margin-bottom: 6px;
}

/* end, not the row's start. The four fields each carry a label above their control; the
   button carries none, so aligning it to the row start left it floating level with the
   labels while every control sat 24px below. It belongs on the control's baseline. */
.asr-fleetsearch__submit {
    align-self: end;
    white-space: nowrap;
    height: 43px;
}

/* Before any dates are picked the real fleet is shown, dimmed and inert, with one line
   over it. It says what the page is for and shows there is something worth asking about,
   which an empty band under the form did not. */
.asr-fleet-prompt {
    padding: 40px 32px 24px;
    text-align: center;
}

.asr-fleet-prompt__title {
    margin: 0 auto;
    max-width: 30ch;
    font-family: var(--asr-font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--asr-text);
}

.asr-fleet-prompt__body {
    margin: 10px auto 0;
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--asr-text-muted);
}

/* The fleet behind the prompt: visible, so the page has something to show, but plainly not
   an answer yet. Not reachable by pointer or keyboard, because a card here would carry no
   dates and the booking form would open on its own defaults, which is a worse answer than
   none. */
.asr-fleet-grid.is-preview {
    opacity: 0.38;
    pointer-events: none;
    filter: saturate(0.6);
}

@media (prefers-reduced-motion: reduce) {
    .asr-search-overlay__fill { animation-duration: 1ms; width: 100%; }
}

/* The search overlay.
   A search is a real page load, and the honest version of that is a moment that looks like
   work rather than a click that appears to do nothing and then repaints.

   The first version was a small spinner on a black field, which read as an error screen. It
   is the brand's own blue now, at the full size of the window, with type big enough to be
   the thing you are looking at rather than a speck in a void. */
.asr-search-overlay[hidden] {
    display: none;
}

.asr-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px;
    text-align: center;
    /* Half-transparent over a blurred page, not a solid field of blue. The page behind stays
       readable as shape and colour, so the overlay reads as something laid ON the search
       rather than as a different screen the browser has navigated to - which is what a flat
       fill made it look like, especially on the arrival case where it is painted by the
       server before the grid has been seen at all.

       -webkit- first and unprefixed second, which is the order that matters: Safari takes
       only the prefixed one, and a browser with neither still gets a legible overlay from the
       colour alone. The alpha is carried in the colour rather than in `opacity`, because
       opacity would fade the words and the progress bar with it. */
    background: rgba(27, 58, 110, .72); /* --asr-primary-dark #1b3a6e, at 72% */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 1;
    transition: opacity 320ms ease;
}

/* Without backdrop-filter the page behind shows through at full sharpness, and white text
   over a photograph of a car is unreadable. Those browsers get the solid fill they had. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .asr-search-overlay { background: var(--asr-primary-dark); }
}

.asr-search-overlay--leaving {
    opacity: 0;
    pointer-events: none;
}

/* The line that changes as the search runs. Sized to be read across a room, and given a
   fixed minimum height so swapping the words does not move the bar under it. */
.asr-search-overlay__step {
    min-height: 1.2em;
    font-family: var(--asr-font-heading);
    font-size: clamp(26px, 5vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--asr-white);
}

.asr-search-overlay__dates {
    font-size: clamp(15px, 2vw, 19px);
    font-weight: 500;
    color: var(--asr-subtitle);
}

.asr-search-overlay__bar {
    margin-top: 14px;
    width: min(420px, 70vw);
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.asr-search-overlay__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--asr-white);
    animation: asr-search-fill var(--asr-search-hold, 2600ms) ease-out forwards;
}

@keyframes asr-search-fill {
    from { width: 0; }
    to { width: 100%; }
}

/* Somebody who asked for less motion gets the same wait without the spin. */
@media (prefers-reduced-motion: reduce) {
    .asr-search-overlay__fill { animation-duration: 1ms; width: 100%; }
}

/* The page copy sits inline above the results grid, which has no top margin of its own. */
.asr-fleetsearch--page {
    margin-bottom: 32px;
}

/* The home search band: the raised strip straddling the hero's bottom edge, where the three
   featured vehicle cards used to sit. The negative top margin is what lifts it over the
   photograph, carried over from .asr-featured which it replaces. At this width the dates fit
   on one line; at the hero's old 880px cap they did not. */
.asr-homesearch {
    position: relative;
    z-index: 2;
    margin-top: -60px;
    padding: 0 32px 48px;
}

.asr-homesearch__inner {
    max-width: var(--asr-max-width);
    margin: 0 auto;
}

.asr-fleetsearch--home {
    padding: 20px;
}

/* The demoted CTA: a quiet second choice under the form, not a button competing with it. */
.asr-homesearch .asr-hero__browse {
    color: var(--asr-text);
}

.asr-hero__browse {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--asr-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.asr-hero__browse:hover {
    color: var(--asr-subtitle);
}

@media (max-width: 860px) {
    /* Two rows of two: the dates, then the type beside the button. With four fields the
       button needed a row of its own; with three it fills the space the type leaves. */
    .asr-fleetsearch {
        grid-template-columns: 1fr 1fr;
    }
    .asr-fleetsearch__submit {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .asr-fleetsearch {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}

/* --- Buttons --- */
.asr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--asr-font);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--asr-radius-full);
    background: rgba(39, 80, 149, 0.52);
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    color: #AAC1E9;
    cursor: pointer;
    transition: all var(--asr-transition);
    white-space: nowrap;
    text-decoration: none;
}

.asr-btn:hover {
    background: rgba(39, 80, 149, 0.7);
    color: var(--asr-white);
    transform: translateY(-1px);
}

.asr-btn--primary {
    background: rgba(39, 80, 149, 0.52);
    color: #AAC1E9;
}

.asr-btn--glass {
    background: rgba(39, 80, 149, 0.52);
    color: #AAC1E9;
    backdrop-filter: blur(8px);
}

.asr-btn--outline {
    background: rgba(39, 80, 149, 0.52);
    color: #AAC1E9;
}

.asr-btn--sm {
    font-size: 13px;
    padding: 8px 20px;
}

.asr-btn--lg {
    font-size: 15px;
    padding: 14px 32px;
}

/* --- Vehicle Card (overlay style matching fleet mockup) --- */
.asr-vehicle-card {
    display: block;
    position: relative;
    background: rgba(39, 39, 39, 0.52);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    will-change: transform;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--asr-text);
}

/* The base rule's own display: block is an author-origin declaration, and the browser's
   built-in [hidden] { display: none } lives in the user-agent stylesheet, which always loses
   to author styles regardless of specificity. Without this, a card marked hidden by the
   dates-first search still renders. */
.asr-vehicle-card[hidden] {
    display: none;
}

.asr-vehicle-card:hover {
    border-color: var(--asr-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--asr-shadow-lg);
    color: var(--asr-text);
}

.asr-vehicle-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: rgba(20,30,50,0.5);
}

.asr-vehicle-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.asr-vehicle-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(39,39,39,0.6) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.asr-vehicle-card:hover .asr-vehicle-card__image img {
    transform: scale(1.05);
}

.asr-vehicle-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--asr-text-muted);
    font-size: 14px;
}

/* The badge sits on its own row above the name, not beside it and not floating
   over it. Sharing the name's row cost the name horizontal space and truncated
   it; overlaying the name hid it. A row of its own leaves the name the full
   width, and costs only the badge's height. The body's align-items: flex-end
   right-aligns it with everything else. */
.asr-vehicle-card__status {
    align-self: flex-end;
    flex: none;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--asr-radius-full);
    background: rgba(15, 21, 32, 0.75);
    backdrop-filter: blur(8px);
    color: var(--asr-warning);
    border: 1px solid rgba(251, 191, 36, 0.25);
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asr-coming-soon {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 24px;
    text-align: center;
}

.asr-coming-soon__title {
    font-size: 26px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 12px;
}

.asr-coming-soon__body {
    color: var(--asr-subtitle);
    margin-bottom: 8px;
}

.asr-coming-soon__from {
    font-size: 18px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 0;
}

.asr-coming-soon .asr-btn {
    margin-top: 24px;
}

/* Notify me (autospektr-service): the "Currently unavailable" panel's form. A booking card
   (.asr-booking__card in the markup) with the booking form's labels (.asr-notify__label joins
   that rule below), boxed fields and date picker, so it reads as the same site. */
.asr-notify { margin: 32px auto 0; max-width: 560px; text-align: left; }
.asr-notify__head { margin-bottom: 22px; }
.asr-notify .asr-notify__title { margin-bottom: 6px; }
.asr-notify__body { margin: 0; color: var(--asr-text-muted); font-size: 14px; line-height: 1.5; }
.asr-notify__fields { display: flex; flex-direction: column; gap: 18px; }
.asr-notify__f { display: flex; flex-direction: column; min-width: 0; }
.asr-notify__f .asr-input { margin-bottom: 0; }
/* The required dot and its tick are for the eye: the input's own `required` speaks for it. */
.asr-notify__label.asr-label--required::after { content: '\00B7' / ''; }
.asr-notify__label.asr-label--required.asr-label--valid::after { content: '\2713' / ''; }
.asr-notify .asr-input:focus,
.asr-notify .asr-datepicker__trigger:focus-visible { outline: none; border-color: var(--asr-primary-light); box-shadow: 0 0 0 3px rgba(53, 104, 184, 0.28); }
.asr-notify .asr-input[aria-invalid="true"],
.asr-notify .asr-datepicker__trigger[aria-invalid="true"] { border-color: rgba(239, 120, 120, 0.6); }
/* Wanted dates: the booking form's date trigger. "Any dates" reads as a placeholder; with a
   value, a clear button takes the calendar icon's place. */
.asr-notify__dates:not(.has-value) .asr-datepicker__display { color: #6b7280; }
.asr-notify__dates .asr-datepicker__display { min-width: 0; }
.asr-notify__dates.has-value .asr-datepicker__trigger svg { visibility: hidden; }
.asr-notify__clear { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--asr-subtitle); cursor: pointer; transition: background var(--asr-transition), color var(--asr-transition); }
.asr-notify__clear:hover { background: rgba(255, 255, 255, 0.07); color: var(--asr-white); }
.asr-notify__clear:focus-visible { outline: 2px solid var(--asr-subtitle); outline-offset: 0; }
.asr-notify__clear svg { width: 16px; height: 16px; }
/* Consent: one compact line with its tick, not a boxed block. */
.asr-notify .asr-checkbox.asr-notify__consent { position: relative; align-items: flex-start; gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
.asr-notify .asr-notify__consent .asr-checkbox__text { font-size: 13px; line-height: 1.5; color: var(--asr-text-muted); }
/* The shared .asr-checkbox hides its input with display: none, which takes it out of the tab
   order. Here it stays focusable, invisible over the box, and the box shows the focus ring. */
.asr-notify .asr-notify__consent input[type="checkbox"] { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.asr-notify .asr-notify__consent input:focus-visible + .asr-checkbox__box { outline: 2px solid var(--asr-subtitle); outline-offset: 2px; }
.asr-notify .asr-notify__consent input[aria-invalid="true"] + .asr-checkbox__box { border-color: rgba(239, 120, 120, 0.75); }
.asr-notify__fields .asr-btn { width: 100%; justify-content: center; margin-top: 2px; padding-top: 13px; padding-bottom: 13px; }
.asr-notify__fields .asr-btn:disabled,
.asr-notify__fields .asr-btn:disabled:hover { opacity: .45; cursor: not-allowed; transform: none; background: rgba(39, 80, 149, 0.52); color: #AAC1E9; }
/* The message sits under the field it is about (notify-me.js moves it), else at the card's foot. */
.asr-notify__msg { margin: 0; font-size: 13px; line-height: 1.45; color: var(--asr-subtitle); }
.asr-notify__msg:focus { outline: none; }
.asr-notify__f > .asr-notify__msg:not(:empty) { margin-top: 7px; }
.asr-notify > .asr-notify__msg:not(:empty) { margin-top: 16px; text-align: center; }
.asr-notify__msg[data-tone="err"] { color: rgb(239, 120, 120); }
/* Done: the same card turns into a confirmation naming the car. */
.asr-notify__done { display: none; }
.asr-notify.is-done .asr-notify__head { display: none; }
.asr-notify.is-done .asr-notify__done { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
.asr-notify__check { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.35); color: var(--asr-success); }
.asr-notify__check svg { width: 26px; height: 26px; }
.asr-notify__car { margin: 0; font-family: var(--asr-font-heading); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--asr-white); text-align: center; }
.asr-notify.is-done > .asr-notify__msg { margin: 6px 0 8px; font-size: 14px; color: var(--asr-text-muted); }
/* The theme's own rules: a per-component [hidden], since these set display. */
.asr-notify [hidden] { display: none; }
/* The range calendar's own line under the booking calendar: which end comes next, and Done. */
.asr-notify-cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.asr-notify-cal__hint { min-width: 0; font-size: 12px; line-height: 1.4; color: var(--asr-text-muted); }
.asr-notify-cal__done { flex: none; padding: 6px 12px; border: 0; border-radius: 8px; background: none; font-family: var(--asr-font); font-size: 13px; font-weight: 600; color: var(--asr-subtitle); cursor: pointer; transition: background var(--asr-transition), color var(--asr-transition); }
.asr-notify-cal__done:hover { background: rgba(255, 255, 255, 0.07); color: var(--asr-white); }
.asr-notify-cal .asr-cal__day:focus-visible,
.asr-notify-cal .asr-cal__nav:focus-visible,
.asr-notify-cal__done:focus-visible { outline: 2px solid var(--asr-subtitle); outline-offset: -2px; }
/* Browse, beside the form: a quiet link, so Notify me is the panel's one button. */
.asr-coming-soon__link { display: inline-block; margin-top: 16px; color: var(--asr-subtitle); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.asr-coming-soon__link:hover { color: var(--asr-white); }
.asr-coming-soon__link:focus-visible { outline: 2px solid var(--asr-subtitle); outline-offset: 2px; border-radius: 2px; }
/* A phone: the card takes the page's own gutter, like the booking cards, not a second one inside it. */
@media (max-width: 560px) { .asr-coming-soon { padding-left: 0; padding-right: 0; } }

/* Overlay body on top of the image */
.asr-vehicle-card__body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: transparent;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.asr-vehicle-card__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 2px;
    /* The name may use the card's full width; the badge is on its own row above.
       max-width keeps the ellipsis honest inside the body's padding. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asr-vehicle-card__year {
    font-size: 13px;
    color: var(--asr-subtitle);
    margin-bottom: 1px;
}

.asr-vehicle-card__meta {
    font-size: 13px;
    color: var(--asr-subtitle);
}

.asr-vehicle-card__seats {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--asr-subtitle);
    margin-top: 4px;
}

.asr-vehicle-card__seats svg {
    flex: none;
    opacity: 0.8;
}

.asr-vehicle-card__window {
    display: block;
    font-size: 12px;
    color: var(--asr-subtitle);
    margin-top: 2px;
}

/* Same reason as .asr-vehicle-card[hidden] above: the base rule's own display: block beats
   the browser's built-in [hidden] { display: none }. The span is now always rendered so the
   live layer always has one to fill in, and without this a card with no caveat would show an
   empty line where the note used to simply not exist. */
.asr-vehicle-card__window[hidden] {
    display: none;
}

.asr-vehicle-card__price {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #AAC1E9;
    background: rgba(39, 80, 149, 0.52);
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    padding: 4px 12px;
    border-radius: var(--asr-radius-md);
    margin-top: auto;
    backdrop-filter: blur(8px);
}

/* --- Featured Vehicles (overlaps hero) --- */
.asr-featured {
    position: relative;
    z-index: 2;
    margin-top: -100px;
    padding: 0 0 48px;
}

.asr-featured__grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    max-width: var(--asr-max-width);
    margin: 0 auto;
    padding: 16px 32px;
}

.asr-featured__grid > .asr-vehicle-card {
    flex: 1 1 0;
    min-width: 260px;
}

/* Carousel mode when items overflow */
@media (max-width: 1200px) {
    .asr-featured__grid {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .asr-featured__grid::-webkit-scrollbar { display: none; }
    .asr-featured__grid > * {
        scroll-snap-align: center;
    }
}

.asr-featured__view-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(39, 80, 149, 0.52);
    backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    text-decoration: none;
    color: var(--asr-text);
    transition: all 0.3s ease;
    min-height: 100%;
    flex: 0 0 120px !important;
    min-width: 120px !important;
    max-width: 120px;
    padding: 16px;
}

.asr-featured__view-all:hover {
    border-color: var(--asr-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--asr-shadow-lg);
    color: var(--asr-white);
}

.asr-featured__view-all-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--asr-subtitle);
    transition: color var(--asr-transition);
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.asr-featured__view-all:hover .asr-featured__view-all-text {
    color: var(--asr-white);
}

.asr-featured__view-all-arrow {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--asr-subtitle);
    transition: all var(--asr-transition);
}

.asr-featured__view-all:hover .asr-featured__view-all-arrow {
    background: var(--asr-primary);
    border-color: var(--asr-primary);
    color: var(--asr-white);
}

.asr-featured__view-all-arrow svg {
    width: 22px;
    height: 22px;
}

/* --- Carousel (generic, used elsewhere) --- */
.asr-carousel {
    position: relative;
}

.asr-carousel__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0 16px;
}

.asr-carousel__track::-webkit-scrollbar {
    display: none;
}

.asr-carousel__track > * {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

.asr-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--asr-glass-strong);
    backdrop-filter: blur(8px);
    border: 1px solid var(--asr-border);
    border-radius: 50%;
    color: var(--asr-white);
    cursor: pointer;
    z-index: 2;
    transition: all var(--asr-transition);
}

.asr-carousel__arrow:hover {
    background: var(--asr-primary);
    border-color: var(--asr-primary);
}

.asr-carousel__arrow--prev { left: -16px; }
.asr-carousel__arrow--next { right: -16px; }

.asr-carousel__arrow svg {
    width: 18px;
    height: 18px;
}

/* --- How It Works --- */
.asr-steps {
    display: flex;
    /* stretch, not center. Centering cards whose copy differs in length gave each a
       different height AND a different vertical offset, so the row read as three
       staggered boxes rather than three steps. */
    align-items: stretch;
    gap: 0;
}

.asr-steps > .asr-feature-card {
    flex: 1;
}

.asr-steps__arrow {
    flex-shrink: 0;
    /* The cards stretch now, so the chevron has to centre itself or it sits at the
       top of the row. */
    align-self: center;
    width: 24px;
    height: 24px;
    margin: 0 12px;
    color: var(--asr-text-muted);
}

/* --- Why Choose Us / Feature Cards --- */
.asr-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.asr-features__cta {
    max-width: 100%;
    margin-top: 24px;
    border-radius: var(--asr-radius-lg);
}

.asr-feature-card {
    background: rgba(39, 39, 39, 0.52);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 32px 24px;
    backdrop-filter: blur(var(--asr-blur));
    transition: all var(--asr-transition);
}

.asr-feature-card:hover {
    border-color: var(--asr-border-hover);
    transform: translateY(-2px);
}

.asr-feature-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39,80,149,0.15);
    border-radius: var(--asr-radius);
    margin-bottom: 20px;
    color: var(--asr-subtitle);
}

.asr-feature-card__icon svg {
    width: 22px;
    height: 22px;
}

.asr-feature-card__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 8px;
}

.asr-feature-card__text {
    font-size: 14px;
    color: var(--asr-text-muted);
    line-height: 1.6;
}

/* --- Testimonials (same pattern as featured vehicles) --- */
.asr-testimonials__grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    max-width: var(--asr-max-width);
    margin: 0 auto;
    padding: 16px 0;
}

.asr-testimonials__grid > .asr-testimonial {
    flex: 1 1 0;
    min-width: 260px;
}

@media (max-width: 1200px) {
    .asr-testimonials__grid {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -32px;
        padding: 16px 32px;
    }
    .asr-testimonials__grid::-webkit-scrollbar { display: none; }
    .asr-testimonials__grid > * {
        scroll-snap-align: center;
        flex: 0 0 300px;
    }
}

.asr-testimonial {
    background: rgba(39, 39, 39, 0.52);
    backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 32px 24px;
    transition: all var(--asr-transition);
}

.asr-testimonial:hover {
    border-color: var(--asr-border-hover);
    transform: translateY(-2px);
}

.asr-testimonial__author {
    font-size: 15px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 4px;
}

.asr-testimonial__stars {
    color: var(--asr-warning);
    font-size: 14px;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

.asr-testimonial__text {
    font-size: 14px;
    color: var(--asr-text-muted);
    line-height: 1.6;
    font-style: normal;
}

.asr-testimonial__role {
    font-size: 12px;
    color: var(--asr-text-muted);
    margin-top: 4px;
    display: none;
}

/* --- Partners --- */
.asr-partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.asr-partners__card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39, 39, 39, 0.52);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 32px 48px;
    min-height: 120px;
    backdrop-filter: blur(var(--asr-blur));
    transition: all var(--asr-transition);
}

.asr-partners__card:hover {
    border-color: var(--asr-border-hover);
    transform: translateY(-2px);
}

.asr-partners__card img {
    height: 56px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

/* --- Services --- */
.asr-services {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.asr-service-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(39, 39, 39, 0.52);
    backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 24px 28px;
    transition: all var(--asr-transition);
    cursor: pointer;
}

.asr-service-card:hover {
    border-color: var(--asr-border-hover);
    transform: translateY(-2px);
}

.asr-service-card__content {
    flex: 1;
}

.asr-service-card__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--asr-text-muted);
    transition: color var(--asr-transition), transform var(--asr-transition);
}

.asr-service-card__arrow svg { width: 24px; height: 24px; }

.asr-service-card:hover .asr-service-card__arrow {
    color: var(--asr-white);
    transform: translateX(4px);
}

.asr-service-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 2px;
}

.asr-service-card__text {
    font-size: 13px;
    color: var(--asr-text-muted);
}

/* --- CTA Section (full-width, background-like) --- */
.asr-cta {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asr-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.asr-cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asr-cta__bg::after {
    content: '';
    position: absolute;
    inset: 0;
}

.asr-cta__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 72px 24px;
    max-width: 540px;
}

.asr-cta__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--asr-white);
    margin-bottom: 8px;
}

.asr-cta__card {
    background: var(--asr-bg-card);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 48px 40px;
}

.asr-cta__text {
    font-size: 15px;
    color: var(--asr-subtitle);
    margin-bottom: 32px;
}

.asr-cta__btn {
    max-width: 100%;
    border-radius: var(--asr-radius-lg);
}

/* --- Footer --- */
.asr-footer {
    padding: 64px 32px 0;
    margin-top: 32px;
}

.asr-footer__grid {
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    gap: 48px;
    margin-bottom: 48px;
}

.asr-footer__brand {
    align-self: center;
}

.asr-footer__brand img {
    height: 60px;
    width: auto;
    margin-bottom: 16px;
}

.asr-footer__tagline {
    font-size: 13px;
    color: var(--asr-text-muted);
    line-height: 1.6;
}

.asr-footer__links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-self: center;
}

.asr-footer__col-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 16px;
}

.asr-footer__col ul {
    list-style: none;
}

.asr-footer__col li {
    margin-bottom: 8px;
}

.asr-footer__col a {
    font-size: 13px;
    color: var(--asr-text-muted);
    transition: color var(--asr-transition);
}

.asr-footer__col a:hover { color: var(--asr-white); }

/* Contact card in footer */
.asr-footer__contact {
    background: rgba(39, 39, 39, 0.52);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 24px;
    backdrop-filter: blur(8px);
}

.asr-footer__contact-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--asr-subtitle);
    margin-bottom: 16px;
}

.asr-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: var(--asr-radius);
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--asr-text);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--asr-transition);
}

.asr-footer__contact-item:hover {
    background: rgba(255,255,255,0.1);
    color: var(--asr-text);
}

.asr-footer__contact-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--asr-subtitle);
    margin-top: 2px;
}

.asr-footer__social-title {
    font-size: 14px;
    color: var(--asr-subtitle);
    margin-top: 16px;
    margin-bottom: 12px;
}

.asr-footer__social {
    display: flex;
    gap: 8px;
}

.asr-footer__social a {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: var(--asr-radius);
    color: var(--asr-text-muted);
    transition: all var(--asr-transition);
}

.asr-footer__social a:hover {
    background: var(--asr-primary);
    color: var(--asr-white);
}

.asr-footer__social svg {
    width: 18px;
    height: 18px;
}

.asr-footer__bottom {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--asr-text-muted);
}

.asr-footer__bottom-links {
    display: flex;
    gap: 24px;
}

.asr-footer__bottom-links a {
    font-size: 12px;
    color: var(--asr-text-muted);
}

/* --- Fleet Page --- */
.asr-fleet-header {
    padding-top: calc(var(--asr-header-height) + 48px);
    padding-bottom: 0;
}

.asr-fleet-header + .asr-section,
.asr-fleet-header + .asr-section--tight {
    padding-top: 32px;
}

.asr-fleet-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--asr-subtitle);
}

/* The search page's header carries a second door: the browsable catalogue at /fleet/all.
   Laid out here rather than left to inherit, which is what it was doing: a bare link under the
   h1, in the same colour as the heading, on the site's primary landing page.

   A quiet link beside the heading rather than a button, the same demotion .asr-hero__browse
   makes on the home page. The form below is the thing to use; this is for the customer who
   would rather look at cars than name dates, and it must not compete with the search.

   The rule is on .asr-container inside the header, not on the header itself, because the
   container is what holds the 1140px measure the h1 already sits on. FleetListPage uses the
   same header with an h1 and nothing else, where flex on a single child changes nothing. */
.asr-fleet-header .asr-container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    /* Row gap first: it is what separates the two once they wrap onto their own lines at
       phone width, where the link sits under the heading rather than beside it. */
    gap: 6px 24px;
}

.asr-fleet-header__alt {
    font-size: 14px;
    font-weight: 600;
    color: var(--asr-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.asr-fleet-header__alt:hover {
    color: var(--asr-white);
}

.asr-fleet-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 28px;
}

/* --- Custom Dropdown --- */
.asr-dropdown {
    position: relative;
}

.asr-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--asr-font);
    font-size: 14px;
    color: var(--asr-text-muted);
    padding: 8px 14px;
    background: var(--asr-bg-card);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-full);
    cursor: pointer;
    transition: border-color var(--asr-transition), color var(--asr-transition);
    white-space: nowrap;
}

.asr-dropdown__trigger:hover,
.asr-dropdown--open .asr-dropdown__trigger {
    border-color: var(--asr-border-hover);
    color: var(--asr-white);
}

.asr-dropdown__trigger > svg:first-child {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.asr-dropdown__chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.asr-dropdown--open .asr-dropdown__chevron {
    transform: rotate(180deg);
}

.asr-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    padding: 6px;
    background: rgba(16, 22, 36, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-style: solid;
    border-color: rgba(115, 115, 115, 0.5);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.asr-dropdown--open .asr-dropdown__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* A panel that has been moved out to document.body.
   ------------------------------------------------------------------------------------------
   The search row's vehicle-type menu, and only that one: asr-public.js relocates it during
   init, exactly as the location picker and the two calendars beside it already are, and for
   the reason those three never had to state. .asr-fleetsearch carries its own
   backdrop-filter, which makes it a BACKDROP ROOT, and a descendant's backdrop-filter can
   only sample inside that root. Left in the form the panel blurred the form's own empty
   background, which is nothing, while its fill let the page behind show through at full
   sharpness: the heading under it was readable straight through the options. Out in the body
   it samples the page, and the frosting is real.

   THESE RULES MUST STAY BELOW THE BASE ONES ABOVE. Every selector here is a single class, the
   same as .asr-dropdown__panel, so order is all that separates them - the first attempt put
   this block up in the fleet-search section with the rest of that form's overrides, where it
   lost every property to the base rule and computed to nothing: rgba(16,22,36,.92) fill,
   blur(24px), min-width 100%, z-index 100, measured in Chromium. */
.asr-dropdown__panel--float {
    /* Matched to the locpicker's own dropdown, six inches to the left in the same row, which
       is already floated: two menus in one toolbar should not be two materials. Dropdowns
       that are never floated keep the opaque panel above. */
    background: rgba(16, 22, 36, 0.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Placed against the page now, not against a relative ancestor it no longer has. The JS
       writes top/left and an exact width from the trigger's rect at each open.

       min-width has to go with it. The base rule's min-width: 100% meant "at least as wide as
       the trigger" while the panel was the trigger's child; out here the containing block is
       the initial one, so that same 100% is the WIDTH OF THE VIEWPORT, and it beat the JS
       width outright - a 248px panel measured 1280 wide. z-index the same way: 100 was enough
       against form siblings, out here it competes with the whole page. */
    right: auto;
    min-width: 0;
    z-index: 9000;
    /* And the rest of the menu's shape, for the same reason as its fill: the locpicker's
       radius, its padding, its solid border, and no shadow. The generic panel is a 12px
       rounded slab on a 40px drop shadow, which beside a 16px flat-edged menu in the same
       row read as two components from two different products - which is what was reported.
       Measured before this: radius 12 against 16, padding 6 against 4, border rgba(115,115,
       115,.5) against #737373, a shadow against none. */
    border-color: #737373;
    border-radius: var(--asr-radius-md);
    padding: 4px;
    box-shadow: none;
}

/* The options inside it, matched to .asr-loc-option the same way. Two class names deep, so
   these outrank the single-class base rules wherever they sit in the file - unlike the block
   above, which needed its position.

   The weight is 500 because that is .asr-loc-option__name, the line a location option
   actually reads on. The option element itself is 400, but that carries its address
   sub-line, which this menu has no equivalent of: one line per option, and it should match
   the line beside it, not the one under it. */
.asr-dropdown__panel--float .asr-dropdown__option {
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 500;
}

/* Blue, not a white wash: the locpicker highlights with the accent and this sat next to it
   highlighting with 6% white. */
.asr-dropdown__panel--float .asr-dropdown__option:hover {
    background: rgba(39, 80, 149, 0.3);
}

/* And the chosen one is a filled row, not accent-coloured text. The generic dropdown marks
   its choice with a tick at the end of the line, which this menu does not carry. */
.asr-dropdown__panel--float .asr-dropdown__option--active {
    background: rgba(39, 80, 149, 0.52);
    color: var(--asr-text);
}

.asr-dropdown__panel--float .asr-dropdown__option--active:hover {
    background: rgba(39, 80, 149, 0.52);
}

/* Out here it is no longer a descendant of .asr-dropdown--open, so that rule cannot reveal it
   and it carries its own. The same three properties, so the transition is unchanged. */
.asr-dropdown__panel--float.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Without backdrop-filter that .42 is a see-through hole over whatever is under it. Those
   browsers keep the opaque slab, which is plain but legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .asr-dropdown__panel--float { background: rgba(16, 22, 36, 0.92); }
}

.asr-dropdown__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--asr-text);
    font-family: var(--asr-font);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
}

.asr-dropdown__option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--asr-white);
}

.asr-dropdown__option--active {
    color: var(--asr-accent);
}

.asr-dropdown__option--active:hover {
    background: rgba(39, 80, 149, 0.15);
}

.asr-dropdown__check {
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.asr-dropdown__option--active .asr-dropdown__check {
    opacity: 1;
    color: var(--asr-accent);
}

/* Fleet Grid */
.asr-fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.asr-fleet-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 24px;
    color: var(--asr-text-muted);
    font-size: 16px;
}

/* Pagination */
.asr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 48px;
}

.asr-pagination a,
.asr-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--asr-radius);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    color: var(--asr-text-muted);
    transition: all var(--asr-transition);
    text-decoration: none;
}

.asr-pagination a:hover {
    border-color: var(--asr-border-hover);
    color: var(--asr-white);
}

.asr-pagination .current {
    background: var(--asr-primary);
    border-color: var(--asr-primary);
    color: var(--asr-white);
}

/* --- Vehicle Detail --- */
.asr-vehicle-hero {
    padding-top: calc(var(--asr-header-height) + 16px);
}

.asr-vehicle-hero__layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 16px;
    align-items: stretch;
}

.asr-vehicle-hero__right {
    display: flex;
    flex-direction: column;
}

/* --- Vehicle Gallery --- */
.asr-vehicle-hero__gallery {
    position: relative;
    background: var(--asr-bg-card);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.15s ease;
}

.asr-vehicle-hero__main-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: zoom-in;
    -webkit-user-select: none;
    user-select: none;
}

.asr-vehicle-hero__main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.12s ease, transform 0.15s ease-out;
    will-change: opacity, transform;
}

.asr-vehicle-hero__main-img img.asr-gallery--switching {
    opacity: 0;
    transform: scale(1.02);
}
.asr-vehicle-hero__main-img img.asr-gallery--switching-in {
    opacity: 1;
    transform: scale(1);
}

.asr-vehicle-hero__no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--asr-text-muted);
}

/* No photo: the body type's drawing sits where the photo would (VehicleQuery::withPlaceholder).
   It is not a picture of the car, so it does not offer to open full size. */
.asr-vehicle-hero__main-img--drawing {
    cursor: default;
}

/* Nav arrows */
.asr-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(1);
    width: 40px;
    height: 40px;
    border-radius: var(--asr-radius-full);
    border: none;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
    z-index: 3;
}
.asr-gallery__nav--prev { left: 12px; }
.asr-gallery__nav--next { right: 12px; }

.asr-vehicle-hero__gallery:hover .asr-gallery__nav,
.asr-vehicle-hero__gallery:focus-within .asr-gallery__nav {
    opacity: 1;
}
.asr-gallery__nav:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: translateY(-50%) scale(1.1);
}
.asr-gallery__nav:active {
    transform: translateY(-50%) scale(0.92);
    transition-duration: 0.08s;
}

/* Counter badge */
.asr-gallery__counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--asr-radius-full);
    z-index: 3;
    letter-spacing: 0.5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.asr-vehicle-hero__gallery:hover .asr-gallery__counter {
    opacity: 1;
}

/* Fullscreen button */
.asr-gallery__fullscreen {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: var(--asr-radius-full);
    border: none;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
    z-index: 3;
}
.asr-vehicle-hero__gallery:hover .asr-gallery__fullscreen {
    opacity: 1;
}
.asr-gallery__fullscreen:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: scale(1.1);
}
.asr-gallery__fullscreen:active {
    transform: scale(0.9);
    transition-duration: 0.08s;
}

/* Thumbnail strip */
.asr-vehicle-hero__thumbs {
    display: flex;
    gap: 8px;
    padding: 8px 12px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.asr-vehicle-hero__thumbs::-webkit-scrollbar { display: none; }

.asr-vehicle-hero__thumb {
    flex: 0 0 72px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
}
.asr-vehicle-hero__thumb.active {
    border-color: var(--asr-primary);
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 2px 12px rgba(39, 80, 149, 0.35);
}
.asr-vehicle-hero__thumb:hover:not(.active) {
    border-color: var(--asr-border-hover);
    opacity: 0.8;
    transform: scale(1.04);
}
.asr-vehicle-hero__thumb:active {
    transform: scale(0.95);
    transition-duration: 0.08s;
}
.asr-vehicle-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Touch: always show nav on touch devices */
@media (hover: none) {
    .asr-gallery__nav { opacity: 1; }
    .asr-gallery__counter { opacity: 1; }
    .asr-gallery__fullscreen { opacity: 1; }
    .asr-gallery__nav:active {
        transform: translateY(-50%) scale(0.85);
    }
    .asr-gallery__fullscreen:active {
        transform: scale(0.85);
    }
}

/* --- Lightbox --- */
.asr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.asr-lightbox.active {
    visibility: visible;
    pointer-events: auto;
}

.asr-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.asr-lightbox.active .asr-lightbox__backdrop {
    opacity: 1;
}

.asr-lightbox__img {
    position: absolute;
    object-fit: cover;
    will-change: transform;
    z-index: 1;
    border-radius: var(--asr-radius);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
}

/* Zoom cursor states: JS toggles these on the img */
.asr-lightbox__img.asr-lb--cursor-zoomin { cursor: zoom-in; }
.asr-lightbox__img.asr-lb--cursor-zoomout { cursor: zoom-out; }
.asr-lightbox__img.asr-lb--cursor-grab { cursor: grab; }
.asr-lightbox__img.asr-lb--cursor-grabbing { cursor: grabbing; }

.asr-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: var(--asr-radius-full);
    border: none;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease 0.15s;
}
.asr-lightbox.active .asr-lightbox__close { opacity: 1; }
.asr-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}
.asr-lightbox__close:active {
    transform: scale(0.9);
    transition-duration: 0.08s;
}

.asr-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: var(--asr-radius-full);
    border: none;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease 0.15s;
}
.asr-lightbox.active .asr-lightbox__nav { opacity: 1; }
.asr-lightbox__nav--prev { left: 20px; }
.asr-lightbox__nav--next { right: 20px; }
.asr-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) scale(1.1);
}
.asr-lightbox__nav:active {
    transform: translateY(-50%) scale(0.9);
    transition-duration: 0.08s;
}

.asr-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--asr-radius-full);
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.25s ease 0.15s;
}
.asr-lightbox.active .asr-lightbox__counter { opacity: 1; }

/* Touch: always show lightbox controls */
@media (hover: none) {
    .asr-lightbox.active .asr-lightbox__nav,
    .asr-lightbox.active .asr-lightbox__counter { opacity: 1; }
    .asr-lightbox__nav:active { transform: translateY(-50%) scale(0.85); }
    .asr-lightbox__close:active { transform: scale(0.85); }
}

/* Lightbox mobile */
@media (max-width: 768px) {
    .asr-lightbox__nav { width: 44px; height: 44px; }
    .asr-lightbox__nav--prev { left: 8px; }
    .asr-lightbox__nav--next { right: 8px; }
    .asr-lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .asr-lightbox__counter { bottom: 16px; font-size: 13px; padding: 5px 14px; }
}

/* Vehicle Hero: right column header (outside specs card) */
.asr-vehicle-hero__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.asr-vehicle-hero__header--mobile {
    display: none;
}

.asr-vehicle-hero__name {
    font-size: 22px;
    font-weight: 700;
    color: var(--asr-subtitle);
    margin-bottom: 4px;
}

.asr-vehicle-hero__meta {
    font-size: 14px;
    color: var(--asr-text-muted);
}

.asr-vehicle-hero__price {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--asr-radius-md);
    background: rgba(39, 80, 149, 0.52);
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    color: #AAC1E9;
    white-space: nowrap;
}

/* Vehicle Specs: card + tabs row */
.asr-vehicle-specs__row {
    display: flex;
    gap: 16px;
    flex: 1;
}

.asr-vehicle-specs {
    background: rgba(39, 80, 149, 0.32);
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    padding: 32px;
    backdrop-filter: blur(var(--asr-blur));
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Tabs: vertical icon column outside card */
.asr-tabs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.asr-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    flex: 1;
    font-family: var(--asr-font);
    color: var(--asr-white);
    background: rgba(39, 39, 39, 0.52);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    cursor: pointer;
    transition: all var(--asr-transition);
    backdrop-filter: blur(var(--asr-blur));
}

.asr-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.asr-tab:hover {
    background: rgba(50, 50, 50, 0.6);
}

.asr-tab.active {
    color: #AAC1E9;
    background: rgba(39, 80, 149, 0.52);
    border-color: #275095;
}

.asr-tab-panel { display: none; }
.asr-tab-panel.active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
}

/* Spec Rows */
.asr-spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.asr-spec-row__label { color: var(--asr-white); }

.asr-spec-row__value {
    color: var(--asr-white);
    font-weight: 500;
}

.asr-spec-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* --- Booking Section --- */
.asr-booking {
    color: var(--asr-text);
}

.asr-booking__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}

.asr-booking__left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.asr-booking__card {
    background: rgba(39, 39, 39, 0.52);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    padding: 32px;
}

.asr-booking__group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 16px;
}

.asr-booking__group-title svg {
    width: 20px;
    height: 20px;
    color: var(--asr-subtitle);
}

.asr-arrow-animated {
    transition: transform 0.3s ease;
}

.asr-locpicker__trigger.active .asr-arrow-animated {
    transform: rotate(180deg);
}

.asr-booking label:not(.asr-checkbox),
.asr-notify__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--asr-text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* --- Debug Step Selector (admin only) --- */
.asr-debug-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: rgba(255, 180, 0, 0.08);
    border: 1px dashed rgba(255, 180, 0, 0.3);
    border-radius: 8px;
    width: fit-content;
}

.asr-debug-steps__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 180, 0, 0.7);
}

.asr-debug-steps__btn {
    padding: 4px 10px;
    font-family: var(--asr-font);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 180, 0, 0.8);
    background: rgba(255, 180, 0, 0.06);
    border: 1px solid rgba(255, 180, 0, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--asr-transition);
}

.asr-debug-steps__btn:hover {
    background: rgba(255, 180, 0, 0.15);
    border-color: rgba(255, 180, 0, 0.4);
}

.asr-debug-steps__btn--active {
    background: rgba(255, 180, 0, 0.2);
    border-color: rgba(255, 180, 0, 0.5);
    color: rgb(255, 200, 50);
}

/* --- Progress Bar --- */
.asr-progress {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: 32px;
    padding: 5px;
    background: var(--asr-bg-card);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
}

/* Sliding active indicator */
.asr-progress__track {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / 6);
    border-radius: 8px;
    background: var(--asr-primary);
    box-shadow: 0 0 24px rgba(39, 80, 149, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.15, 1);
    transform: translateX(calc(var(--progress-active, 0) * 100%));
    z-index: 0;
}

.asr-progress__step {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 8px;
    border-radius: 8px;
    cursor: default;
    transition: opacity 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
}

/* Dot */
.asr-progress__dot {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--asr-font);
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    color: var(--asr-text-muted);
    flex-shrink: 0;
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.asr-progress__num,
.asr-progress__check {
    position: absolute;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
}

.asr-progress__num {
    transform: scale(1);
    opacity: 1;
}

.asr-progress__check {
    transform: scale(0);
    opacity: 0;
}

/* Label */
.asr-progress__label {
    font-family: var(--asr-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--asr-text-muted);
    white-space: nowrap;
    transition: color 0.35s ease;
}

/* --- States --- */

/* Active */
.asr-progress__step--active .asr-progress__dot {
    background: rgba(255, 255, 255, 0.15);
    color: var(--asr-white);
}

.asr-progress__step--active .asr-progress__label {
    color: var(--asr-white);
}

/* Done: checkmark replaces number */
.asr-progress__step--done .asr-progress__dot {
    background: rgba(170, 193, 233, 0.12);
    color: var(--asr-accent);
}

.asr-progress__step--done .asr-progress__num {
    transform: scale(0);
    opacity: 0;
}

.asr-progress__step--done .asr-progress__check {
    transform: scale(1);
    opacity: 1;
}

.asr-progress__step--done .asr-progress__label {
    color: var(--asr-accent);
}

/* Locked */
.asr-progress__step--locked {
    opacity: 0.35;
    cursor: default;
}

/* Unlocked */
.asr-progress__step--unlocked {
    cursor: pointer;
}

.asr-progress__step--unlocked:not(.asr-progress__step--active):hover .asr-progress__dot {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.1);
}

.asr-progress__step--unlocked:not(.asr-progress__step--active):hover .asr-progress__label {
    color: var(--asr-text);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .asr-progress {
        padding: 4px;
    }

    /* Hide sliding track: use direct background on active step instead */
    .asr-progress__track {
        display: none;
    }

    .asr-progress__step {
        padding: 10px 6px;
        gap: 6px;
        border-radius: 8px;
        transition: background 0.35s ease, flex 0.4s cubic-bezier(0.4, 0, 0.15, 1), opacity 0.3s ease;
    }

    .asr-progress__step--active {
        flex: 2;
        background: var(--asr-primary);
        box-shadow: 0 0 16px rgba(39, 80, 149, 0.3);
    }

    .asr-progress__label {
        display: none;
    }

    .asr-progress__step--active .asr-progress__label {
        display: block;
        font-size: 11px;
    }

    .asr-progress__dot {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .asr-progress__step {
        padding: 8px 4px;
        gap: 4px;
    }

    .asr-progress__step--active {
        flex: 2.5;
    }

    .asr-progress__dot {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .asr-progress__step--active .asr-progress__label {
        font-size: 10px;
    }
}

/* --- Group description (step 3) --- */
.asr-booking__group-desc {
    font-size: 12px;
    color: var(--asr-text-muted);
    margin: -8px 0 16px;
}

/* --- Tier note (shown on selection) ---
   Amber rather than brand blue: this is fine print the customer is expected to act on,
   so it has to read as a caution and not as more of the same decorative chrome. */
.asr-tier-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--asr-warning, #fbbf24);
    padding: 10px 14px;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid var(--asr-warning, #fbbf24);
    border-radius: 8px;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    transition: grid-template-rows .25s ease, opacity .25s ease, margin .25s ease, padding .25s ease, border-color .25s ease;
}
.asr-tier-note > span {
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
/* Notes can run to several paragraphs; pre-line keeps the author's line breaks
   without any markup being injected into the page. */
.asr-tier-note__text {
    white-space: pre-line;
    min-width: 0;
}
.asr-tier-note__ico {
    flex: 0 0 auto;
    margin-top: 1px;
}
.asr-tier-note--visible {
    grid-template-rows: 1fr;
    opacity: 1;
    margin: 10px 0 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: var(--asr-warning, #fbbf24);
}

/* --- Tier Selector (mileage, protection) --- */
.asr-tier-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asr-tier {
    flex: 1 1 0;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    font-family: var(--asr-font);
    cursor: pointer;
    transition: all var(--asr-transition);
}

.asr-tier:hover {
    border-color: rgba(39, 80, 149, 0.5);
    background: rgba(39, 80, 149, 0.1);
}

.asr-tier--active {
    border-color: var(--asr-primary);
    background: rgba(39, 80, 149, 0.2);
    box-shadow: 0 0 12px rgba(39, 80, 149, 0.2);
}

.asr-tier--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.asr-tier--disabled .asr-tier__price {
    font-style: italic;
    color: var(--asr-text-muted);
}

.asr-addon--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.asr-addon--disabled .asr-addon__price {
    font-style: italic;
    color: var(--asr-text-muted);
    font-weight: 400;
}

.asr-tier__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--asr-white);
}

.asr-tier__detail {
    font-size: 11px;
    color: var(--asr-text-muted);
}

/* Cards in a row already stretch to the tallest, but the descriptions differ in length,
   so the price used to sit at a different height on every card. margin-top:auto pins it
   to the bottom, and the prices read as one line across the row. */
.asr-tier__price {
    font-size: 12px;
    font-weight: 600;
    color: var(--asr-accent);
    margin-top: auto;
    padding-top: 2px;
}

/* --- Add-ons --- */
.asr-addons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asr-addon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    font-family: var(--asr-font);
    cursor: pointer;
    transition: all var(--asr-transition);
    text-align: left;
    width: 100%;
}

.asr-addon:hover {
    border-color: rgba(39, 80, 149, 0.5);
    background: rgba(39, 80, 149, 0.08);
}

.asr-addon--active {
    border-color: var(--asr-primary);
    background: rgba(39, 80, 149, 0.15);
}

.asr-addon__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asr-addon__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--asr-white);
}

.asr-addon__desc {
    font-size: 11px;
    color: var(--asr-text-muted);
}

.asr-addon__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--asr-accent);
    flex-shrink: 0;
}

.asr-addon__toggle {
    flex-shrink: 0;
}

.asr-addon__track {
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    position: relative;
    transition: background var(--asr-transition);
}

.asr-addon--active .asr-addon__track {
    background: var(--asr-primary);
}

.asr-addon__thumb {
    width: 16px;
    height: 16px;
    background: var(--asr-white);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform var(--asr-transition);
}

.asr-addon--active .asr-addon__thumb {
    transform: translateX(16px);
}

/* --- Price row variants --- */
.asr-price-row--section {
    font-size: 12px;
    font-weight: 600;
    color: var(--asr-accent);
    letter-spacing: 0.04em;
    padding-top: 4px;
    cursor: pointer;
    user-select: none;
}

.asr-price-row--section svg {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
    vertical-align: middle;
    margin-left: 4px;
}

.asr-price-row--section.asr-collapsed svg {
    transform: rotate(-90deg);
}

.asr-extras-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}

.asr-extras-body__inner {
    overflow: hidden;
    min-height: 0;
}

.asr-extras-body.asr-collapsed {
    grid-template-rows: 0fr;
}

.asr-price-row--indent {
    padding-left: 12px;
    font-size: 13px;
}

.asr-price-row--indent .asr-price-tag {
    display: block;
    margin-left: 0;
    margin-top: 2px;
}

.asr-price-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--asr-text-muted);
    vertical-align: middle;
    margin-left: 4px;
}

.asr-price-tag--tax {
    background: rgba(39, 80, 149, 0.15);
    color: var(--asr-accent);
}

/* --- Checkbox --- */
.asr-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--asr-radius);
    cursor: pointer;
    transition: border-color var(--asr-transition);
    margin-top: 12px;
}

.asr-checkbox:hover {
    border-color: rgba(39, 80, 149, 0.5);
}

.asr-checkbox input[type="checkbox"] {
    display: none;
}

.asr-checkbox__box {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all var(--asr-transition);
    position: relative;
}

.asr-checkbox input:checked + .asr-checkbox__box {
    background: var(--asr-primary);
    border-color: var(--asr-primary);
}

.asr-checkbox input:checked + .asr-checkbox__box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.asr-checkbox__text {
    font-family: var(--asr-font);
    font-size: 13px;
    color: var(--asr-text);
    line-height: 1.4;
}

.asr-checkbox__text small {
    display: block;
    font-size: 11px;
    color: var(--asr-text-muted);
    margin-top: 2px;
}

.asr-checkbox--consent {
    background: rgba(39, 80, 149, 0.08);
    border-color: rgba(39, 80, 149, 0.2);
    margin-top: 0;
}

/* --- Terms & Conditions reader (mandatory scroll-to-end gate) --- */
.asr-tac {
    margin-bottom: 12px;
}

.asr-tac__title {
    font-family: var(--asr-font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--asr-text);
    margin-bottom: 4px;
}

.asr-tac__instruction {
    font-size: 13px;
    color: var(--asr-text-muted);
    margin-bottom: 10px;
}

.asr-tac__viewer {
    height: 360px;
    overflow: auto;
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    background: #fff;
    padding: 8px;
    margin-bottom: 8px;
    /* Allow one-finger pan on both axes; we handle two-finger pinch ourselves, so
       the browser must not hijack it for page zoom. */
    touch-action: pan-x pan-y;
}

/* Page stack: grows to the widest page so the viewer can scroll horizontally when
   zoomed in; centered when narrower than the viewer. */
.asr-tac__pages {
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    transform-origin: 50% 0;
}

.asr-tac__pages canvas {
    display: block;
    margin: 0 auto 8px;
    max-width: none;
}

/* Zoom toolbar */
.asr-tac__zoom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}

.asr-tac__zoom-btn,
.asr-tac__zoom-pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 34px;
    padding: 0 8px;
    border: 1px solid rgba(170, 193, 233, 0.28);
    border-radius: 8px;
    background: rgba(170, 193, 233, 0.10);
    color: #e8eefb;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.asr-tac__zoom-pct {
    min-width: 58px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.asr-tac__zoom-btn:hover,
.asr-tac__zoom-pct:hover {
    background: rgba(170, 193, 233, 0.22);
    border-color: rgba(170, 193, 233, 0.5);
}

/* Dedicated Terms & Conditions step: centered block with a large viewer. */
.asr-tac--step {
    max-width: 860px;
    margin: 0 auto;
}

.asr-tac--step .asr-tac__viewer {
    /* Scales with the viewport but stays within a comfortable band: never shorter
       than 460px on small laptops, never taller than 760px on large desktops. */
    height: clamp(460px, 64vh, 760px);
}

/* Terms written in the Hub: the text itself in the reading box, in the site's own colours (not a white page). */
.asr-tac--step .asr-tac__viewer--text {
    background: var(--asr-bg-card);
    padding: 20px 24px;
    touch-action: auto;
}
.asr-tac__doc-title { font-size: 18px; font-weight: 600; color: var(--asr-white); margin-bottom: 16px; }
.asr-tac__viewer--text .terms-sec[data-depth="1"] { margin-bottom: 24px; }
.asr-tac__viewer--text h2.terms-h { font-size: 18px; }
.asr-tac__viewer--text h3.terms-h,
.asr-tac__viewer--text h4.terms-h { font-size: 16px; }
@media (max-width: 768px) { .asr-tac--step .asr-tac__viewer--text { padding: 16px; } }

.asr-tac-empty {
    text-align: center;
    color: var(--asr-subtitle);
    padding: 40px 16px;
}

.asr-tac__error {
    padding: 24px 16px;
    text-align: center;
    color: #b91c1c;
    font-size: 14px;
}

.asr-tac__loading {
    padding: 40px 16px;
    text-align: center;
    color: var(--asr-text-muted);
    font-size: 14px;
}

.asr-tac__hint {
    font-size: 12px;
    color: var(--asr-text-muted);
    margin-bottom: 10px;
}

/* Consent label stays dimmed until the document is scrolled to the end. */
#asr-tac-consent-label {
    opacity: 0.5;
    transition: opacity var(--asr-transition);
}

#asr-tac-consent-label.asr-tac-consent-label--unlocked {
    opacity: 1;
}

/* --- Policy Cards --- */
.asr-policy-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--asr-radius);
    margin-bottom: 8px;
}

.asr-policy-card:last-of-type {
    margin-bottom: 0;
}

.asr-policy__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--asr-accent);
}

.asr-policy__icon svg {
    width: 20px;
    height: 20px;
}

.asr-policy__content {
    flex: 1;
}

.asr-policy__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 2px;
}

.asr-policy__desc {
    font-size: 12px;
    color: var(--asr-text-muted);
    line-height: 1.5;
    /* Policy bodies are prose and may be several paragraphs; pre-line keeps the
       author's line breaks without any markup being injected into the page. */
    white-space: pre-line;
}

/* --- Verification Fee Card --- */
.asr-verification-card {
    background: rgba(39, 80, 149, 0.25);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border: 1px solid var(--asr-primary);
    border-radius: var(--asr-radius-md);
    padding: 20px;
}

.asr-verification-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.asr-verification-card__row span:first-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--asr-accent);
    letter-spacing: 0.04em;
}

.asr-verification-card__amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--asr-white);
}

.asr-verification-card__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--asr-white);
    margin-bottom: 6px;
}

.asr-verification-card__note {
    font-size: 11px;
    color: var(--asr-text-muted);
    line-height: 1.4;
}

/* --- Location Picker --- */
.asr-locpicker {
    position: relative;
    margin-bottom: 16px;
}

.asr-locpicker__trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 16px;
    font-family: var(--asr-font);
    font-size: 14px;
    background: rgba(255,255,255,0.04);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    cursor: pointer;
    transition: border-color var(--asr-transition);
    text-align: left;
}

.asr-locpicker__trigger:hover {
    border-color: var(--asr-primary);
}

.asr-locpicker__trigger.active {
    border-color: var(--asr-primary);
}

.asr-locpicker__trigger svg {
    width: 16px;
    height: 16px;
    color: var(--asr-subtitle);
    flex-shrink: 0;
}

.asr-locpicker__dropdown {
    position: absolute;
    z-index: 9000;
    background: rgba(16, 22, 36, 0.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    padding: 4px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-height: 260px;
    overflow-y: auto;
}

.asr-locpicker__dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

.asr-loc-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--asr-font);
    font-size: 14px;
    color: var(--asr-text);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background var(--asr-transition), border-color var(--asr-transition);
}

.asr-loc-option:hover {
    background: rgba(39, 80, 149, 0.3);
}

.asr-loc-option--selected {
    background: rgba(39, 80, 149, 0.52);
}

.asr-loc-option__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.asr-loc-option__name svg {
    flex-shrink: 0;
    color: var(--asr-accent);
}

.asr-loc-option__address {
    font-size: 12px;
    color: var(--asr-text-muted);
}

.asr-loc-option--delivery {}

.asr-loc-option--delivery .asr-loc-option__address {
    color: var(--asr-accent);
    font-weight: 500;
}

.asr-loc-option--empty {
    color: var(--asr-text-muted);
    cursor: default;
    text-align: center;
}

/* Delivery address fields */
.asr-delivery-fields {
    margin-bottom: 16px;
}

.asr-delivery-fields__input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--asr-font);
    font-size: 14px;
    background: rgba(255,255,255,0.04);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    outline: none;
    transition: border-color var(--asr-transition);
}

.asr-delivery-fields__input:focus {
    border-color: var(--asr-primary);
}

.asr-delivery-fields__input::placeholder {
    color: var(--asr-text-muted);
}

.asr-delivery-fields__row {
    display: flex;
    gap: 12px;
}

.asr-delivery-fields__col--address {
    flex: 1;
    min-width: 0;
}

.asr-delivery-fields__col--km {
    flex: 0 0 auto;
}

.asr-delivery-fields__km-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asr-delivery-fields__km-input .asr-delivery-fields__input {
    width: 80px;
}

.asr-delivery-fields__km-suffix {
    font-size: 14px;
    color: var(--asr-text-muted);
}

/* --- Date & Time Pickers --- */
.asr-datepicker,
.asr-timepicker {
    position: relative;
}

.asr-datepicker__trigger,
.asr-timepicker__trigger {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 16px;
    font-family: var(--asr-font);
    font-size: 14px;
    background: rgba(255,255,255,0.04);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    cursor: pointer;
    transition: border-color var(--asr-transition);
    text-align: left;
}

.asr-datepicker__trigger:hover,
.asr-timepicker__trigger:hover {
    border-color: var(--asr-primary);
}

.asr-datepicker__trigger.active,
.asr-timepicker__trigger.active {
    border-color: var(--asr-primary);
}

.asr-datepicker__trigger svg,
.asr-timepicker__trigger svg {
    width: 16px;
    height: 16px;
    color: var(--asr-subtitle);
    flex-shrink: 0;
}

/* Calendar dropdown: appended to body for blur to work */
.asr-datepicker__dropdown {
    position: absolute;
    z-index: 9000;
    width: 300px;
    /* At a 320px viewport, positioned near the page's own left gutter, an unconditional
       300px overflows the right edge and forces a horizontal scrollbar: the fleet search
       form put a date picker on the home page for the first time, and the home page is the
       site's highest-traffic surface. 100vw - 64px mirrors .asr-container's own 32px side
       padding, so the dropdown never claims more width than the page's own gutter leaves
       it. Inert above roughly 364px viewport width, where 300px already fits (100vw here
       means the viewport, desktop scrollbar included where one is present; moot in practice
       since the rule does nothing above ~364px and no supported layout puts a vertical
       scrollbar on a screen that narrow). Between roughly 337px and 364px this narrows the
       dropdown even though the unconstrained 300px would not actually have overflowed at
       every left offset measured (as narrow as 337px on the hero surface) - a small
       over-conservatism, not a defect, traded for one formula instead of one tuned per
       surface. */
    max-width: calc(100vw - 64px);
    background: rgba(16, 22, 36, 0.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    padding: 16px;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    height: 0;
    overflow: hidden;
}

.asr-datepicker__dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

.asr-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.asr-cal__title {
    font-family: var(--asr-font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--asr-white);
}

.asr-cal__title--clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 8px;
    transition: background var(--asr-transition);
}

.asr-cal__title--clickable:hover {
    background: rgba(255,255,255,0.08);
}

.asr-cal__year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.asr-cal__year {
    padding: 8px 4px;
    font-family: var(--asr-font);
    font-size: 13px;
    color: var(--asr-text);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--asr-transition);
}

.asr-cal__year:hover {
    background: rgba(39, 80, 149, 0.3);
}

.asr-cal__year--selected {
    background: var(--asr-primary);
    color: var(--asr-white);
}

.asr-cal__year--current {
    border: 1px solid var(--asr-accent);
}

.asr-cal__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--asr-white);
    cursor: pointer;
    transition: background var(--asr-transition);
}

.asr-cal__nav:hover { background: rgba(39, 80, 149, 0.4); }
.asr-cal__nav:disabled {
    color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.04);
    cursor: default;
    pointer-events: none;
}
.asr-cal__nav svg { width: 16px; height: 16px; }

.asr-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.asr-cal__weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--asr-text-muted);
    text-transform: uppercase;
    padding: 4px 0;
}

.asr-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.asr-cal__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-size: 13px;
    color: var(--asr-white);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--asr-transition);
    border: none;
    background: none;
    font-family: var(--asr-font);
}

.asr-cal__day:hover { background: rgba(39, 80, 149, 0.3); }
.asr-cal__day--today { color: #AAC1E9; font-weight: 700; }
.asr-cal__day--selected {
    background: rgba(39, 80, 149, 0.52);
    border: 1px solid #275095;
    color: var(--asr-white);
    font-weight: 600;
}
.asr-cal__day--in-range { background: rgba(39, 80, 149, 0.15); }
.asr-cal__day--disabled {
    color: rgba(255,255,255,0.15);
    cursor: default;
    pointer-events: none;
}
.asr-cal__day--empty { pointer-events: none; }
/* The neighbouring months' days in the first and last rows: pickable, only dimmed. A picked
   one, or one inside the chosen span, is drawn at full strength like any other. */
.asr-cal__day--outside { opacity: 0.4; font-weight: 400; }
.asr-cal__day--outside.asr-cal__day--selected,
.asr-cal__day--outside.asr-cal__day--in-range { opacity: 1; }

/* Time dropdown */
.asr-timepicker__dropdown {
    position: absolute;
    z-index: 9000;
    width: 300px;
    background: rgba(16, 22, 36, 0.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    padding: 16px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    height: 0;
    overflow: hidden;
}

.asr-timepicker__dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

.asr-time-period {
    margin-bottom: 12px;
}

.asr-time-period:last-child {
    margin-bottom: 0;
}

.asr-time-period__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--asr-text-muted);
    margin-bottom: 8px;
}

.asr-time-period__label svg {
    color: var(--asr-accent);
}

.asr-time-period__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.asr-time-option {
    padding: 8px 4px;
    font-family: var(--asr-font);
    font-size: 12px;
    white-space: nowrap;
    color: var(--asr-text);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: background var(--asr-transition), border-color var(--asr-transition);
}

.asr-time-option:hover {
    background: rgba(39, 80, 149, 0.3);
    border-color: rgba(39, 80, 149, 0.5);
}

.asr-time-option--selected {
    background: rgba(39, 80, 149, 0.52);
    border-color: #275095;
    color: var(--asr-white);
    font-weight: 600;
}

.asr-booking select option {
    background: var(--asr-bg);
    color: var(--asr-text);
}

/* Said when this vehicle's calendar could not be read. Not an error and not a refusal: the
   dates are still selectable and the server still has the last word at submit. What it stops
   is the form presenting an unanswered question as a clear one, which is how a car booked
   into the shop went on being offered for the days it was off the road. */
.asr-booking__availability-warn {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(251, 191, 36, .1);
    border: 1px solid rgba(251, 191, 36, .35);
    color: var(--asr-warning, #fbbf24);
    font-size: 13px;
    line-height: 1.45;
}

.asr-booking__dates-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.asr-booking__row-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--asr-accent);
    margin-bottom: 8px;
}


.asr-booking__date-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.asr-booking__right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--asr-header-height) + 16px);
}

/* Price breakdown (blue card) */
.asr-price-summary {
    background: rgba(39, 80, 149, 0.18);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.asr-price-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    color: var(--asr-white);
}

.asr-price-row__value { font-weight: 600; white-space: nowrap; }

.asr-price-row sup {
    font-size: 10px;
    color: var(--asr-white);
    vertical-align: super;
}

.asr-price-divider {
    border: none;
    border-top: 1px solid rgba(170, 193, 233, 0.2);
    margin: 4px 0;
}

.asr-price-row--accent,
.asr-price-row--accent .asr-price-row__value {
    color: #AAC1E9;
    font-weight: 600;
}

.asr-price-row--total,
.asr-price-row--total .asr-price-row__value {
    font-weight: 700;
    font-size: 18px;
    color: #AAC1E9;
}

.asr-deposit-summary {
    background: rgba(39, 80, 149, 0.18);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: #275095;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-md);
    padding: 16px 32px;
}

.asr-booking__submit {
    width: 100%;
    margin-top: 16px;
    padding: 16px 24px;
    font-size: 15px;
    font-family: var(--asr-font-heading);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--asr-radius-md);
}

.asr-booking__submit-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.asr-booking__submit-left svg { width: 20px; height: 20px; }

.asr-booking__submit svg { width: 18px; height: 18px; }

/* --- Booking Step Transitions --- */
.asr-booking__step {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.asr-booking__step--active {
    display: block;
    opacity: 1;
}

.asr-booking__step--fade-out {
    display: block;
    opacity: 0;
}

.asr-booking__step--fade-in {
    display: block;
    opacity: 0;
}

/* --- Thank you overlay --- */
.asr-thankyou {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(16, 22, 32, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.asr-thankyou--visible {
    display: flex;
    animation: asr-ty-bg 0.4s ease both;
}

.asr-thankyou__content {
    text-align: center;
    max-width: 440px;
    padding: 48px 32px;
}

.asr-thankyou__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(39, 80, 149, 0.2);
    border: 2px solid var(--asr-primary, #275095);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: asr-ty-icon 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.asr-thankyou__icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--asr-accent, #AAC1E9);
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: asr-ty-check 0.6s ease 0.6s both;
}

.asr-thankyou__title {
    font-family: var(--asr-heading-font, 'Quicksand', sans-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--asr-white, #fff);
    margin: 0 0 12px;
    animation: asr-ty-up 0.5s ease 0.5s both;
}

.asr-thankyou__message {
    font-size: 15px;
    color: var(--asr-text-muted);
    margin: 0 0 28px;
    line-height: 1.5;
    animation: asr-ty-up 0.5s ease 0.6s both;
}

.asr-thankyou__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    animation: asr-ty-up 0.5s ease 0.7s both;
}

.asr-thankyou__detail {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 14px 18px;
    background: rgba(39, 80, 149, 0.15);
    border: 1px solid rgba(39, 80, 149, 0.3);
    border-radius: 10px;
    font-size: 13px;
    color: var(--asr-white, #fff);
    line-height: 1.4;
}

.asr-thankyou__detail svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--asr-accent, #AAC1E9);
}

.asr-thankyou__ok {
    min-width: 160px;
    animation: asr-ty-up 0.5s ease 0.85s both;
}

/* Thank you closing animation */
.asr-thankyou--closing {
    animation: asr-ty-bg-out 0.35s ease both;
}

.asr-thankyou--closing .asr-thankyou__content {
    animation: asr-ty-content-out 0.3s ease both;
}

@keyframes asr-ty-bg {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes asr-ty-bg-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes asr-ty-content-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.95); }
}

@keyframes asr-ty-icon {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes asr-ty-check {
    to { stroke-dashoffset: 0; }
}

@keyframes asr-ty-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Contact Info Grid (2x2) --- */
.asr-booking__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Shared form input --- */
.asr-input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--asr-font);
    font-size: 14px;
    background: rgba(255,255,255,0.04);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    outline: none;
    transition: border-color var(--asr-transition);
    margin-bottom: 16px;
}

.asr-input:last-child,
.asr-booking__card > .asr-input:last-child,
.asr-booking__card > .asr-datepicker:last-child,
.asr-booking__card > .asr-input-row:last-child {
    margin-bottom: 0;
}

.asr-input:focus {
    border-color: var(--asr-primary);
}

.asr-input::placeholder {
    color: #6b7280;
}

/* Required dot becomes a checkmark when valid */
.asr-label--required::after {
    content: '\00B7';
    margin-left: 4px;
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1;
    display: inline-block;
    color: rgba(239, 120, 120, 0.6);
    transform: scale(1);
    transition: transform 0.15s ease;
}

.asr-label--required.asr-label--valid::after {
    content: '\2713';
    font-size: 0.85em;
    color: rgba(52, 211, 153, 0.6);
    animation: asr-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes asr-check-pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.4); }
    75% { transform: scale(0.85); }
    100% { transform: scale(1); }
}

/* Optional badge */
.asr-label--optional {
    font-size: 11px;
    font-weight: 400;
    color: var(--asr-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: 8px;
    vertical-align: middle;
    font-family: var(--asr-font);
}

/* Validation error state */
.asr-input--error {
    border-color: rgba(239, 120, 120, 0.5) !important;
}

.asr-input--error:focus {
    border-color: rgba(239, 120, 120, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(239, 120, 120, 0.08);
}

.asr-upload__zone--error {
    border-color: rgba(239, 120, 120, 0.5) !important;
}

.asr-datepicker__trigger--error {
    border-color: rgba(239, 120, 120, 0.5) !important;
}

/* Inline validation message: positioned inside the input col, no layout shift */
.asr-input-col,
.asr-upload {
    position: relative;
}

.asr-field-msg {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 10px;
    color: rgba(239, 120, 120, 0.7);
    pointer-events: none;
    animation: asr-msg-in 0.2s ease;
}

@keyframes asr-msg-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* "Did you mean gmail.com?" prompt beside the email field. Advisory only, never an
   error state, so it sits in normal flow rather than absolutely positioned like
   .asr-field-msg: it carries clickable buttons and a variable-length address, and the
   small layout shift is an acceptable trade for keeping it easy to tap. */
.asr-email-suggestion {
    margin-top: 4px;
    font-size: 11px;
    color: var(--asr-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    animation: asr-msg-in 0.2s ease;
}

.asr-email-suggestion__apply {
    padding: 0;
    border: none;
    background: none;
    color: var(--asr-warning);
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.asr-email-suggestion__apply:hover {
    color: var(--asr-white);
}

.asr-email-suggestion__dismiss {
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--asr-text-muted);
    font-size: 10px;
    text-decoration: underline;
    cursor: pointer;
}

.asr-email-suggestion__dismiss:hover {
    color: var(--asr-text);
}

/* --- Input row (side-by-side fields) --- */
.asr-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.asr-input-row > .asr-input-col {
    flex: 1 1 200px;
    min-width: 0;
}

.asr-input-row--3col > .asr-input-col {
    flex: 1 1 160px;
    min-width: 0;
}

.asr-input-row--4col > .asr-input-col {
    flex: 1 1 180px;
    min-width: 0;
}

.asr-booking__card--full {
    grid-column: 1 / -1;
}

/* Scan-first licence card: pulled to the top of step 2, full width, with the photo
   uploads ordered above the manual fields so scanning leads and typing is the fallback. */
.asr-booking__card--scan {
    grid-column: 1 / -1;
    order: -1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Uploads are physically first in the markup now; the flex gap gives uniform spacing, so
   zero the elements' own top margins to avoid doubled gaps. */
.asr-booking__card--scan .asr-upload-row,
.asr-booking__card--scan #asr-dl-status,
.asr-booking__card--scan #asr-dl-review { margin-top: 0; }

/* Mobile capture choice: primary "Scan with camera" + quiet upload/manual + a security note. */
.asr-dl-choice { display: none; flex-direction: column; gap: 12px; }
.asr-dl-choice__cam {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 16px 18px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(180deg, #2f63b8, #275095); color: #fff;
    font-family: var(--asr-font); font-size: 16px; font-weight: 700;
    box-shadow: 0 8px 22px rgba(39, 80, 149, 0.42);
    transition: transform .1s ease, box-shadow .15s ease;
}
.asr-dl-choice__cam:active { transform: translateY(1px); box-shadow: 0 4px 14px rgba(39, 80, 149, 0.42); }
.asr-dl-choice__cam svg { width: 22px; height: 22px; }
.asr-dl-choice__alt { display: flex; gap: 10px; }
.asr-dl-choice__btn {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 10px; border-radius: 10px; cursor: pointer;
    border: 1px solid #4b5870; background: rgba(255, 255, 255, 0.05); color: #dbe6f7;
    font-family: var(--asr-font); font-size: 13px; font-weight: 600; line-height: 1.2;
    transition: background var(--asr-transition), border-color var(--asr-transition);
}
.asr-dl-choice__btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--asr-primary); }
.asr-dl-choice__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.asr-dl-choice__sec {
    display: flex; align-items: flex-start; gap: 7px; margin: 2px 2px 0;
    color: #8b9dc3; font-size: 11.5px; line-height: 1.45;
}
.asr-dl-choice__sec svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: var(--asr-success); }

/* Mobile: choice-first. Hide uploads/fields/other cards behind the choice until picked. */
@media (max-width: 768px) {
    .asr-step2-grid.is-collapsed > .asr-booking__card:not(.asr-booking__card--scan) { display: none; }
    .asr-step2-grid.is-collapsed .asr-booking__card--scan .asr-input-row--3col { display: none; }
    .asr-step2-grid.is-collapsed .asr-booking__card--scan .asr-upload-row { display: none; }
    .asr-step2-grid.is-collapsed .asr-dl-choice { display: flex; }
    /* After tapping "Upload licence photos": reveal the dropzones, drop the choice. */
    .asr-step2-grid.is-collapsed.uploads-open .asr-booking__card--scan .asr-upload-row { display: flex; }
    .asr-step2-grid.is-collapsed.uploads-open .asr-dl-choice { display: none; }
}

.asr-input-col .asr-input {
    margin-bottom: 0;
}

.asr-input-col .asr-datepicker {
    margin-bottom: 0;
}

.asr-input-col {
    margin-bottom: 16px;
}

.asr-input-row:last-child > .asr-input-col,
.asr-input-col:last-child {
    margin-bottom: 0;
}

.asr-input-row:last-child > .asr-input-col {
    margin-bottom: 0;
}

/* --- File upload zone --- */
.asr-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.asr-upload {
    flex: 1 1 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.asr-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed rgba(115, 115, 115, 0.6);
    border-radius: var(--asr-radius);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    transition: border-color var(--asr-transition), background var(--asr-transition);
    position: relative;
    text-align: center;
    flex: 1;
}

.asr-upload__zone:hover,
.asr-upload__zone--dragover {
    border-color: var(--asr-primary);
    background: rgba(39, 80, 149, 0.08);
}

.asr-upload__zone--has-file {
    border-color: var(--asr-success);
    border-style: solid;
}

.asr-upload__file {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.asr-upload__zone svg {
    width: 24px;
    height: 24px;
    color: var(--asr-subtitle);
}

.asr-upload__hint {
    font-size: 13px;
    color: var(--asr-text-muted);
}

.asr-upload__meta {
    font-size: 11px;
    color: rgba(139, 157, 195, 0.6);
    line-height: 1.5;
}

.asr-upload__filename {
    font-size: 12px;
    color: var(--asr-success);
    font-weight: 500;
    word-break: break-all;
}

/* Remove-file button (sits above the invisible full-zone file input). */
.asr-upload__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(115, 115, 115, 0.6);
    background: rgba(16, 22, 32, 0.9);
    color: #dbe6f7;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--asr-transition), border-color var(--asr-transition), color var(--asr-transition);
}
.asr-upload__remove:hover {
    background: rgba(185, 28, 28, 0.92);
    border-color: rgba(185, 28, 28, 0.92);
    color: #fff;
}

/* --- Booking navigation bar --- */
.asr-booking__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.asr-booking__nav .asr-booking__submit {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
}

@media (max-width: 480px) {
    .asr-booking__nav {
        gap: 8px;
    }
    .asr-booking__nav .asr-booking__submit {
        flex: 1 1 100%;
        order: -1;
    }
    .asr-booking__back {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.asr-booking__back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    font-size: 15px;
    font-family: var(--asr-font-heading);
    font-weight: 600;
    color: var(--asr-text);
    background: transparent;
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius-md);
    cursor: pointer;
    transition: border-color var(--asr-transition), background var(--asr-transition);
    white-space: nowrap;
}

.asr-booking__back:hover {
    border-color: var(--asr-primary);
    background: rgba(39, 80, 149, 0.1);
}

.asr-booking__back svg {
    width: 18px;
    height: 18px;
}

/* --- Mobile Billing Sheet (hidden on desktop) --- */
.asr-msheet {
    display: none;
}

.asr-msheet__scrim {
    display: none;
}

@media (max-width: 1024px) {
    /* Hide desktop billing, show mobile sheet */
    .asr-booking__right {
        display: none;
    }

    .asr-msheet {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: rgba(16, 22, 36, 0.42);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(115,115,115,0.6);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .asr-msheet--visible {
        transform: translateY(0);
    }

    .asr-msheet__peek {
        padding: 10px 14px 12px;
        cursor: grab;
        touch-action: none;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
    }

    .asr-msheet--dragging .asr-msheet__peek {
        cursor: grabbing;
    }

    .asr-msheet__notch {
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 2px;
        margin: 4px auto 10px;
    }

    .asr-msheet__summary {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .asr-msheet__rowwrap {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.3s ease;
    }

    .asr-msheet__rowwrap--hidden {
        grid-template-rows: 0fr;
    }

    .asr-msheet__rowwrap--hidden .asr-msheet__row {
        opacity: 0;
    }

    /* --- All rows base --- */
    .asr-msheet__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        min-height: 0;
        opacity: 1;
        transition: opacity 0.3s ease;
        font-size: 13px;
        color: var(--asr-text-muted);
        padding: 0;
    }

    .asr-msheet__row span:first-child {
        font-weight: 400;
    }

    .asr-msheet__row span:last-child {
        font-weight: 600;
        color: var(--asr-text);
        font-variant-numeric: tabular-nums;
    }

    /* --- Main row: hero price card --- */
    .asr-msheet__row.asr-msheet__row--main {
        background: rgba(39, 80, 149, 0.12);
        border: 1px solid rgba(39, 80, 149, 0.2);
        border-radius: 10px;
        padding: 8px 12px;
        transition: opacity 0.25s ease;
    }

    .asr-msheet__row.asr-msheet__row--main span:first-child {
        font-size: 12px;
        font-weight: 500;
        color: var(--asr-text-muted);
    }

    .asr-msheet__row.asr-msheet__row--main span:last-child {
        font-size: 17px;
        font-weight: 700;
        color: var(--asr-accent);
        letter-spacing: -0.02em;
    }

    /* --- Secondary rows: chips row --- */
    .asr-msheet__chips {
        display: flex;
        flex-wrap: wrap;
    }

    .asr-msheet__chipwrap {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.25s ease, flex 0.25s ease, margin 0.25s ease;
        flex: 1 1 auto;
        min-width: 0;
        margin: 3px;
    }

    .asr-msheet__chipwrap--hidden {
        grid-template-rows: 0fr;
        flex: 0 0 0;
        overflow: hidden;
        margin: 0;
    }

    .asr-msheet__chip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        padding: 6px 12px;
        font-size: 12px;
        color: var(--asr-text-muted);
        overflow: hidden;
        min-height: 0;
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    .asr-msheet__chipwrap--hidden .asr-msheet__chip {
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .asr-msheet__chip:active {
        transform: scale(0.97);
    }

    .asr-msheet__chip-val {
        font-weight: 600;
        color: var(--asr-text);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Main card wrap */
    .asr-msheet__mainwrap {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.25s ease;
    }

    .asr-msheet__mainwrap--hidden {
        grid-template-rows: 0fr;
    }

    .asr-msheet__mainwrap--hidden .asr-msheet__row--main {
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .asr-msheet__expand-hint {
        display: none;
    }

    .asr-msheet__body {
        max-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .asr-msheet--open .asr-msheet__body {
        max-height: 65vh;
        padding-bottom: 16px;
    }

    .asr-msheet__body .asr-price-summary,
    .asr-msheet__body .asr-deposit-summary,
    .asr-msheet__body .asr-verification-card {
        border-radius: var(--asr-radius);
    }

    /* Staggered content animation */
    .asr-msheet__body > * {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .asr-msheet--open .asr-msheet__body > * {
        opacity: 1;
        transform: translateY(0);
    }

    .asr-msheet--open .asr-msheet__body > *:nth-child(1) { transition-delay: 0.05s; }
    .asr-msheet--open .asr-msheet__body > *:nth-child(2) { transition-delay: 0.1s; }
    .asr-msheet--open .asr-msheet__body > *:nth-child(3) { transition-delay: 0.15s; }

    /* No transitions while dragging */
    .asr-msheet--dragging .asr-msheet__body,
    .asr-msheet--dragging .asr-msheet__body > * {
        transition: none !important;
    }

    /* Scrim */
    .asr-msheet__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .asr-msheet__scrim--open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Padding so content doesn't hide behind sheet */

    /* CTA mode: show button, hide prices */
    /* CTA and summary crossfade */
    .asr-msheet__cta {
        padding: 0;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
    }

    .asr-msheet__summary {
        transition: opacity 0.3s ease, max-height 0.3s ease;
        max-height: 200px;
        overflow: hidden;
    }

    .asr-msheet__cta-btn {
        width: 100%;
        padding: 16px;
        font-family: var(--asr-font-heading);
        font-size: 15px;
        font-weight: 600;
        color: var(--asr-white);
        background: var(--asr-primary);
        border: none;
        border-radius: var(--asr-radius);
        cursor: pointer;
        transition: opacity var(--asr-transition);
    }

    .asr-msheet__cta-btn:active {
        opacity: 0.8;
    }

    .asr-msheet--cta .asr-msheet__cta {
        opacity: 1;
        max-height: 80px;
        padding: 8px;
    }

    .asr-msheet--cta .asr-msheet__summary {
        opacity: 0;
        max-height: 0;
    }

    .asr-msheet--cta .asr-msheet__notch {
        display: none;
    }
}

/* --- Card Method Switch --- */
.asr-card-switch {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.asr-card-switch__opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    font-family: var(--asr-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--asr-text-muted);
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: var(--asr-radius);
    cursor: pointer;
    transition: all var(--asr-transition);
}

.asr-card-switch__opt svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.asr-card-switch__opt:hover {
    border-color: rgba(39, 80, 149, 0.5);
    background: rgba(39, 80, 149, 0.08);
}

.asr-card-switch__opt--on {
    border-color: var(--asr-primary);
    background: rgba(39, 80, 149, 0.15);
    color: var(--asr-white);
}

.asr-card-switch__note {
    font-size: 12px;
    color: var(--asr-white, #fff);
    line-height: 1.4;
    padding: 10px 14px;
    background: rgba(39, 80, 149, 0.2);
    border: 1px solid var(--asr-primary, #275095);
    border-radius: 8px;
    margin-top: 10px;
}

@media (max-width: 480px) {
    .asr-card-switch {
        flex-direction: column;
    }
}

/* --- Confirmation Step --- */
.asr-confirm__title {
    font-family: var(--asr-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 16px;
}

.asr-confirm__card .asr-booking__group-title {
    margin-bottom: 0;
}

.asr-confirm__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.asr-confirm__edit {
    background: rgba(39, 80, 149, 0.15);
    border: 1px solid var(--asr-primary, #275095);
    color: var(--asr-accent);
    font-family: var(--asr-font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 14px;
    border-radius: 6px;
    transition: background var(--asr-transition), border-color var(--asr-transition);
}

.asr-confirm__edit:hover {
    background: rgba(39, 80, 149, 0.3);
    border-color: var(--asr-accent, #AAC1E9);
}

.asr-confirm__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
}

.asr-confirm__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.asr-confirm__row:last-child {
    border-bottom: none;
}

.asr-confirm__row-label {
    color: var(--asr-text-muted);
}

.asr-confirm__row-value {
    color: var(--asr-white);
    font-weight: 500;
    text-align: right;
}

.asr-confirm__row--full {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    .asr-confirm__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Similar Vehicles --- */
.asr-similar {
    padding: 48px 0 64px;
}

.asr-similar__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- Contact Page --- */
.asr-contact-header {
    padding-top: calc(var(--asr-header-height) + 48px);
    padding-bottom: 0;
}

.asr-contact-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--asr-subtitle);
    margin-bottom: 4px;
}

.asr-contact-header + .asr-section {
    padding-top: 32px;
}

.asr-contact-header__sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--asr-text-muted);
    line-height: 1.5;
}

.asr-contact-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 380px);
    gap: 24px;
    align-items: start;
}

.asr-contact-visit-wrapper {
    grid-column: 1 / -1;
}

/* Schedule Card */
.asr-contact-schedule-card {
    background: var(--asr-bg-card);
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 32px;
    backdrop-filter: blur(var(--asr-blur));
}

.asr-contact-schedule__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
}

.asr-contact-schedule__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--asr-white);
    font-family: var(--asr-font-heading);
    flex-shrink: 0;
}

.asr-contact-schedule__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--asr-radius-full);
    white-space: nowrap;
}

.asr-contact-schedule__status--open {
    background: rgba(52, 211, 153, 0.12);
    color: var(--asr-success);
}

.asr-contact-schedule__status--closed {
    background: rgba(251, 191, 36, 0.12);
    color: var(--asr-warning);
}

.asr-contact-schedule__status-detail {
    font-weight: 400;
    opacity: 0.8;
}

/* Location Switcher Bar */
.asr-contact-locbar {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 5px;
    background: var(--asr-bg-card);
    backdrop-filter: blur(var(--asr-blur));
    -webkit-backdrop-filter: blur(var(--asr-blur));
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius);
    min-width: 0;
    overflow: hidden;
}

.asr-contact-locbar__track {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / var(--loc-count, 2));
    border-radius: 8px;
    background: var(--asr-primary);
    box-shadow: 0 0 24px rgba(39, 80, 149, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.15, 1);
    transform: translateX(calc(var(--loc-active, 0) * 100%));
    z-index: 0;
}

.asr-contact-locbar__item {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: start;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--asr-text-muted);
    font-family: var(--asr-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    min-width: 0;
}

.asr-contact-locbar__item:hover {
    color: var(--asr-text);
}

.asr-contact-locbar__item--active {
    color: var(--asr-white);
}

.asr-contact-locbar__item svg {
    flex-shrink: 0;
}

/* Schedule Panels: stacked crossfade */
.asr-contact-schedule__panels {
    display: grid;
}

.asr-contact-schedule__panel {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.asr-contact-schedule__panel--active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.asr-contact-schedule__days {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.asr-contact-schedule__day {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: var(--asr-radius);
    transition: all var(--asr-transition);
    position: relative;
    overflow: hidden;
}

.asr-contact-schedule__progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: rgba(39, 80, 149, 0.12);
    transition: width 0.6s ease;
    pointer-events: none;
    z-index: 0;
    border-radius: var(--asr-radius);
}

.asr-contact-schedule__day--today .asr-contact-schedule__progress {
    background: rgba(255, 255, 255, 0.08);
}

.asr-contact-schedule__day-name,
.asr-contact-schedule__day-dot,
.asr-contact-schedule__day-hours {
    position: relative;
    z-index: 1;
}

.asr-contact-schedule__day:nth-child(odd) {
    background: rgba(255,255,255,0.02);
}

.asr-contact-schedule__day.asr-contact-schedule__day--today {
    background: rgba(39, 80, 149, 0.52);
    border: 1px solid var(--asr-primary);
    border-radius: var(--asr-radius);
}

.asr-contact-schedule__day--today .asr-contact-schedule__day-name {
    color: var(--asr-white);
    font-weight: 600;
}

.asr-contact-schedule__day--today .asr-contact-schedule__day-hours {
    color: rgba(255,255,255,0.9);
}

.asr-contact-schedule__day--today .asr-contact-schedule__day-hours--closed {
    color: rgba(255,255,255,0.5);
}

.asr-contact-schedule__day--today .asr-contact-schedule__day-dot {
    background: rgba(255,255,255,0.2);
}

.asr-contact-schedule__day-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--asr-text);
    min-width: 110px;
}

.asr-contact-schedule__day-dot {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0 16px;
}

.asr-contact-schedule__day-hours {
    font-size: 14px;
    color: var(--asr-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.asr-contact-schedule__day-hours--closed {
    color: var(--asr-text-muted);
    font-style: italic;
}

/* Contact Info Sidebar */
.asr-contact-info__card {
    background: var(--asr-bg-card);
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    padding: 24px;
    backdrop-filter: blur(var(--asr-blur));
    margin-bottom: 16px;
}

.asr-contact-info__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 16px;
}

.asr-contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: var(--asr-radius);
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--asr-text);
    text-decoration: none;
    transition: all var(--asr-transition);
}

a.asr-contact-info__item:hover {
    background: rgba(255,255,255,0.1);
    color: var(--asr-text);
}

.asr-contact-info__item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--asr-subtitle);
    margin-top: 2px;
}

.asr-contact-info__schedule {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asr-contact-info__schedule-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.asr-contact-info__schedule-days {
    font-weight: 500;
    color: var(--asr-text);
}

.asr-contact-info__schedule-hours {
    color: var(--asr-text-muted);
    white-space: nowrap;
}

/* Social Links */
.asr-contact-info__social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asr-contact-info__social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--asr-transition);
}

.asr-contact-info__social-link:hover {
    background: rgba(255,255,255,0.1);
    color: var(--asr-text);
}

.asr-contact-info__social-link svg {
    width: 18px;
    height: 18px;
    color: var(--asr-subtitle);
    flex-shrink: 0;
}

/* Visit Us Card */
.asr-contact-visit-wrapper {
    background: var(--asr-bg-card);
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    overflow: hidden;
    backdrop-filter: blur(var(--asr-blur));
}

.asr-contact-visit-wrapper__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--asr-white);
    padding: 20px 24px 0;
    margin-bottom: 0;
}


.asr-contact-visit__map {
    width: 100%;
    line-height: 0;
    padding: 16px 16px 0;
}

.asr-contact-visit__map iframe {
    display: block;
    width: 100%;
    border-radius: var(--asr-radius);
}

.asr-contact-visit__actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px;
}

/* Address copy button */
.asr-contact-visit__addr-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    color: var(--asr-text);
    font-family: var(--asr-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    min-width: 0;
}

/* Icon area: stacked icons */
.asr-contact-visit__addr-icons {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.asr-contact-visit__addr-icons svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.asr-addr-icon--copy,
.asr-addr-icon--check {
    opacity: 0;
    transform: scale(0.7);
}

.asr-addr-icon--pin {
    opacity: 1;
    transform: scale(1);
}

.asr-contact-visit__addr-btn:hover .asr-addr-icon--pin {
    opacity: 0;
    transform: scale(0.7);
}

.asr-contact-visit__addr-btn:hover .asr-addr-icon--copy {
    opacity: 1;
    transform: scale(1);
}

/* Text area: stacked labels */
.asr-contact-visit__addr-text {
    position: relative;
    min-width: 0;
    height: 1.3em;
    flex: 1;
}

.asr-contact-visit__addr-text span {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.asr-addr-label--addr {
    opacity: 1;
    transform: translateY(0);
}

.asr-addr-label--copy {
    opacity: 0;
    transform: translateY(4px);
    color: var(--asr-subtitle);
}

.asr-addr-label--copied {
    opacity: 0;
    transform: translateY(4px);
    color: var(--asr-success);
}

.asr-contact-visit__addr-btn:hover .asr-addr-label--addr {
    opacity: 0;
    transform: translateY(-4px);
}

.asr-contact-visit__addr-btn:hover .asr-addr-label--copy {
    opacity: 1;
    transform: translateY(0);
}

.asr-contact-visit__addr-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--asr-border-hover);
}

/* Copied state */
.asr-contact-visit__addr-btn--copied,
.asr-contact-visit__addr-btn--copied:hover {
    background: rgba(52, 211, 153, 0.12);
    border-color: var(--asr-success);
    color: var(--asr-success);
}

.asr-contact-visit__addr-btn--copied .asr-addr-icon--pin,
.asr-contact-visit__addr-btn--copied .asr-addr-icon--copy,
.asr-contact-visit__addr-btn--copied:hover .asr-addr-icon--copy {
    opacity: 0;
    transform: scale(0.7);
}

.asr-contact-visit__addr-btn--copied .asr-addr-icon--check {
    opacity: 1;
    transform: scale(1);
}

.asr-contact-visit__addr-btn--copied .asr-addr-label--addr,
.asr-contact-visit__addr-btn--copied .asr-addr-label--copy,
.asr-contact-visit__addr-btn--copied:hover .asr-addr-label--addr,
.asr-contact-visit__addr-btn--copied:hover .asr-addr-label--copy {
    opacity: 0;
}

.asr-contact-visit__addr-btn--copied .asr-addr-label--copied,
.asr-contact-visit__addr-btn--copied:hover .asr-addr-label--copied {
    opacity: 1;
    transform: translateY(0);
}

/* Navigate icon button */
.asr-contact-visit__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    background: var(--asr-primary);
    border: 1px solid var(--asr-primary);
    border-radius: var(--asr-radius);
    color: var(--asr-white);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--asr-transition);
}

.asr-contact-visit__nav-btn:hover {
    background: var(--asr-primary-light);
    border-color: var(--asr-primary-light);
    color: var(--asr-white);
}

.asr-contact-visit__nav-btn svg {
    width: 18px;
    height: 18px;
}

/* Visit panels: stacked crossfade */
.asr-contact-visit__panels {
    display: grid;
}

.asr-contact-visit__location {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.asr-contact-visit__location--active {
    opacity: 1;
    pointer-events: auto;
}

/* Contact info panels: stacked crossfade */
.asr-contact-info__panels {
    display: grid;
}

.asr-contact-info__location {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.asr-contact-info__location--active {
    opacity: 1;
    pointer-events: auto;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .asr-contact-grid { grid-template-columns: 1fr; }
    .asr-contact-locbar { order: 1; }
    .asr-contact-schedule-card { order: 2; }
    .asr-contact-visit-wrapper { order: 3; }
    .asr-contact-info { order: 4; }
    .asr-booking__info-grid { grid-template-columns: 1fr; }
    .asr-fleet-grid { grid-template-columns: repeat(2, 1fr); }
    .asr-vehicle-hero__layout { grid-template-columns: 1fr; }
    .asr-vehicle-hero__header--mobile { display: flex; }
    .asr-vehicle-hero__header--desktop { display: none; }
    .asr-booking__layout { grid-template-columns: 1fr; }
    .asr-similar__grid { grid-template-columns: repeat(1, 1fr); }

    .asr-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .asr-footer__links { grid-template-columns: repeat(3, 1fr); }
    .asr-steps { flex-wrap: wrap; }
    .asr-steps > .asr-feature-card { flex: 1 1 calc(50% - 48px); }
    .asr-steps__arrow { display: none; }
    .asr-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --asr-header-height: 64px; }

    .asr-contact-header h1 { font-size: 26px; }
    .asr-contact-header__sub { font-size: 15px; }
    .asr-contact-schedule-card { padding: 20px; }
    .asr-contact-schedule__header { flex-wrap: wrap; }
    .asr-contact-schedule__title { flex-shrink: 1; }
    .asr-contact-schedule__tabs { flex-wrap: wrap; }
    .asr-contact-schedule__day-name { min-width: 80px; font-size: 13px; }
    .asr-contact-schedule__day-hours { font-size: 13px; }

    /* Hide desktop nav elements on mobile */
    .asr-header__nav { display: none; }
    .asr-header__lang { display: none; }
    .asr-header__menu-btn { display: block; }

    /* --- Nav Bottom Sheet --- */
    .asr-navsheet {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10001;
        background: rgba(16, 22, 36, 0.32);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(115, 115, 115, 0.5);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
        transform: translateY(100%);
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .asr-navsheet--open {
        transform: translateY(0);
    }

    .asr-navsheet--dragging {
        transition: none;
    }

    /* Handle / notch */
    .asr-navsheet__handle {
        padding: 12px 20px 8px;
        cursor: grab;
        touch-action: none;
    }

    .asr-navsheet__handle:active {
        cursor: grabbing;
    }

    .asr-navsheet__notch {
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
        margin: 0 auto;
    }

    /* Content */
    .asr-navsheet__content {
        padding: 4px 16px 20px;
    }

    /* Groups */
    .asr-navsheet__group {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .asr-navsheet__sep {
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
        margin: 6px 4px;
    }

    /* Links */
    .asr-navsheet__link {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 400;
        color: var(--asr-text);
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .asr-navsheet__link:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--asr-white);
    }

    .asr-navsheet__link:hover .asr-navsheet__icon {
        color: var(--asr-accent);
        background: rgba(39, 80, 149, 0.12);
        transform: scale(1.05);
    }

    .asr-navsheet__link:active {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(0.98);
    }

    .asr-navsheet__link--active {
        background: rgba(39, 80, 149, 0.18);
        color: var(--asr-accent);
    }

    .asr-navsheet__link--active:hover {
        background: rgba(39, 80, 149, 0.25);
    }

    /* Icon box */
    .asr-navsheet__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        flex-shrink: 0;
        color: var(--asr-text-muted);
        transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .asr-navsheet__link--active .asr-navsheet__icon {
        color: var(--asr-accent);
        background: rgba(39, 80, 149, 0.15);
    }

    .asr-navsheet__icon svg {
        width: 20px;
        height: 20px;
    }

    .asr-navsheet__lang {
        display: flex;
        gap: 8px;
    }

    /* Each option is shaped like a sheet link so the row reads as part of the list,
       but they sit side by side because they are two states of one choice. */
    .asr-navsheet__lang-opt {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 15px;
        color: var(--asr-text-muted);
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .asr-navsheet__lang-opt--on {
        background: rgba(255, 255, 255, 0.10);
        color: var(--asr-text);
    }

    .asr-navsheet__lang-opt:hover { background: rgba(255, 255, 255, 0.06); }

    .asr-navsheet__lang-opt .asr-navsheet__icon svg {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        opacity: 0.55;
        transition: opacity 0.2s ease;
    }

    .asr-navsheet__lang-opt--on .asr-navsheet__icon svg { opacity: 1; }

    .asr-navsheet__label {
        font-family: var(--asr-font);
    }

    /* Stagger entrance */
    .asr-navsheet--open .asr-navsheet__link {
        animation: asr-navsheet-item 0.35s cubic-bezier(0.2, 0, 0, 1) backwards;
    }
    .asr-navsheet--open .asr-navsheet__group:first-child .asr-navsheet__link:nth-child(1) { animation-delay: 0.06s; }
    .asr-navsheet--open .asr-navsheet__group:first-child .asr-navsheet__link:nth-child(2) { animation-delay: 0.09s; }
    .asr-navsheet--open .asr-navsheet__group:first-child .asr-navsheet__link:nth-child(3) { animation-delay: 0.12s; }
    .asr-navsheet--open .asr-navsheet__group:nth-child(3) .asr-navsheet__link:nth-child(1) { animation-delay: 0.15s; }
    .asr-navsheet--open .asr-navsheet__group:nth-child(3) .asr-navsheet__link:nth-child(2) { animation-delay: 0.18s; }
    .asr-navsheet--open .asr-navsheet__group:nth-child(3) .asr-navsheet__link:nth-child(3) { animation-delay: 0.21s; }
    .asr-navsheet--open .asr-navsheet__lang {
        animation: asr-navsheet-item 0.35s cubic-bezier(0.2, 0, 0, 1) backwards;
        animation-delay: 0.24s;
    }

    @keyframes asr-navsheet-item {
        0% {
            opacity: 0;
            transform: translateY(12px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hide billing sheet when nav is open */
    body.asr-nav-open .asr-msheet {
        pointer-events: none !important;
        transform: translateY(100%) !important;
    }

    .asr-hero__title { font-size: 32px; }
    .asr-hero__text { font-size: 22px; }
    .asr-hero { min-height: 100vh; padding-bottom: 100px; }

    .asr-fleet-grid { grid-template-columns: 1fr; }
    .asr-similar__grid { grid-template-columns: 1fr; }

    .asr-vehicle-specs { padding: 24px; min-height: 240px; }

    .asr-steps { flex-wrap: wrap; gap: 16px; }
    .asr-steps > .asr-feature-card { flex: 1 1 100%; }
    .asr-steps__arrow { display: none; }
    .asr-features { grid-template-columns: 1fr; }
    .asr-partners { flex-direction: column; }
    .asr-partners__card { width: 100%; }

    .asr-featured { margin-top: -80px; }
    .asr-carousel__track > * { flex: 0 0 260px; }

    .asr-footer__grid { grid-template-columns: 1fr; }
    .asr-footer__links { grid-template-columns: repeat(2, 1fr); }

    .asr-section { padding: 48px 0; }
    .asr-section__title { font-size: 24px; }

    .asr-booking__card,
    .asr-price-summary,
    .asr-deposit-summary { padding: 16px; }
    .asr-booking__date-row { grid-template-columns: 1fr; }
    .asr-input-row > .asr-input-col,
    .asr-input-row--3col > .asr-input-col,
    .asr-input-row--4col > .asr-input-col { min-width: calc(50% - 4px); }

    .asr-fleet-toolbar { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .asr-hero__title { font-size: 28px; }
    .asr-hero__text { font-size: 18px; }
    .asr-hero__actions { flex-direction: column; }
    .asr-carousel__track > * { flex: 0 0 240px; }
    .asr-testimonial { flex: 0 0 280px; }
    .asr-footer__links { grid-template-columns: 1fr; }
    .asr-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ---- Terms & Conditions page ---- */
.asr-terms {
    padding: 140px 0 80px;
}

.asr-terms__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--asr-white);
    margin-bottom: 6px;
}

.asr-terms__meta {
    color: var(--asr-subtitle);
    font-size: 14px;
    margin-bottom: 24px;
}

.asr-terms__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.asr-terms__lang {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--asr-radius-full);
    overflow: hidden;
}

.asr-terms__lang-btn {
    background: transparent;
    border: 0;
    color: var(--asr-subtitle);
    font: inherit;
    font-size: 13px;
    padding: 7px 16px;
    cursor: pointer;
}

.asr-terms__lang-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--asr-white);
}

.asr-terms__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.asr-terms__actions .asr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Tall by design: this is the whole point of the page, unlike the booking
   step's short consent pane. Capped against the viewport so the toolbar and
   heading stay reachable on short screens. */
.asr-terms__viewer {
    height: min(78vh, 1000px);
    overflow: auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--asr-radius-md);
    padding: 4px;
    /* Allow one-finger pan on both axes; we handle two-finger pinch ourselves, so
       the browser must not hijack it for page zoom. */
    touch-action: pan-x pan-y;
}

.asr-terms__empty {
    padding: 48px 0 64px;
    color: var(--asr-subtitle);
}

.asr-terms__empty p {
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .asr-terms { padding: 110px 0 60px; }
    .asr-terms__viewer { height: 70vh; }
    .asr-terms__bar { justify-content: flex-start; }
}

/* ============================================
   ABOUT PAGE
   ============================================ */

/* Each section is a two column band: the heading sits in a fixed rail on the
   left, the content runs in the column beside it. A single centred column left
   the right half of a 1140px container empty, because a comfortable reading
   measure is barely half that width. Putting the heading in the dead space uses
   the full container, and the rail doubles as the separator between sections,
   which is why the section padding here is lighter than the site default. */
/* A hairline above each band, so the rhythm stays legible without leaning on
   empty space. Drawn on the container so it aligns with the grid, not the
   viewport. */
.asr-about__band {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px 48px;
    align-items: start;
    border-top: 1px solid rgba(115, 115, 115, 0.22);
    padding-top: 40px;
}

/* The site default of 72px top and bottom puts 144px between two bands, which on
   a page of short sections reads as a hole rather than as breathing room. The
   rail and the hairline already separate them, so they need far less. Both
   classes sit on the same element, so this outranks .asr-section on specificity
   without needing !important. */
.asr-section.asr-about {
    padding: 0 0 40px;
}

.asr-section.asr-about:last-of-type {
    padding-bottom: 72px;
}

.asr-about .asr-section__title {
    margin-bottom: 0;
}

.asr-about__rail {
    position: sticky;
    top: 96px;
}

/* Icon chip above each section heading, reusing .asr-feature-card__icon's
   proportions and brand tint so the rails read as part of the same set as the
   cards on the home page. The chip is decorative: the heading beside it already
   names the section, which is why the SVG is aria-hidden. */
/* The tint .asr-feature-card__icon uses is 0.15, which works because that chip
   sits on a card. This one sits straight on the page background, where 0.15 is
   invisible, so it takes a stronger fill and a border of its own. */
.asr-about__rail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border: 1px solid rgba(53, 104, 184, 0.45);
    border-radius: var(--asr-radius);
    background: rgba(39, 80, 149, 0.30);
    color: var(--asr-primary-light);
}

.asr-about__rail-icon svg {
    width: 22px;
    height: 22px;
}

/* The rail is only sticky where there is room to scroll past it. Below the
   breakpoint the band collapses to one column and a stuck heading would sit on
   top of its own text. */
@media (max-width: 900px) {
    .asr-about__band {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .asr-about__rail {
        position: static;
    }
}

/* Paragraph rhythm. Scoped to the band body and to bare paragraphs via
   :not([class]) so the classed ones below keep their own spacing. */
.asr-about__body > p:not([class]),
.asr-about__panel > p:not([class]),
.asr-about__closer > p:not([class]) {
    font-size: 15px;
    line-height: 1.75;
    color: var(--asr-text-muted);
    margin-bottom: 14px;
}

.asr-about__body > p:not([class]):last-child,
.asr-about__panel > p:not([class]):last-child,
.asr-about__closer > p:not([class]):last-child {
    margin-bottom: 0;
}

/* Section CTAs sit in their own paragraph. Without the top margin they butt up
   against the text above, and the pair in the closing section needs the gap. */
.asr-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* Opening statement. Wider than the body measure and lighter in weight, so the
   page starts with one confident line of type rather than a wall. */
.asr-about__intro {
    font-size: 20px;
    line-height: 1.65;
    color: var(--asr-text);
    max-width: 68ch;
    margin-bottom: 28px;
}

/* Badge row. This is a <ul>, so the list styling has to be cleared explicitly
   or it falls back to a bulleted column. */
.asr-about__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.asr-about__strip li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--asr-bg-card);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius-full);
    padding: 8px 18px 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--asr-text);
    -webkit-backdrop-filter: blur(var(--asr-blur));
    backdrop-filter: blur(var(--asr-blur));
    transition: border-color var(--asr-transition), color var(--asr-transition);
}

.asr-about__strip li:hover {
    border-color: var(--asr-border-hover);
}

/* The icon carries the accent so the label keeps its contrast. flex-shrink is
   explicit because a long label would otherwise squash the icon rather than
   wrapping the pill. */
.asr-about__strip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--asr-subtitle);
}

/* Card surface, matching .asr-feature-card and the contact page: the heavier
   bottom border is the house edge and is what makes these read as the same
   family as the rest of the site. */
.asr-about__panel,
.asr-about__closer,
.asr-about__faq {
    background: var(--asr-bg-card);
    border-style: solid;
    border-color: var(--asr-border);
    border-width: 1px 1px 2px 1px;
    border-radius: var(--asr-radius-lg);
    -webkit-backdrop-filter: blur(var(--asr-blur));
    backdrop-filter: blur(var(--asr-blur));
}

.asr-about__panel {
    padding: 28px;
}

.asr-about__closer {
    padding: 40px;
    text-align: center;
}

.asr-about__closer .asr-about__actions {
    justify-content: center;
}

.asr-about__closer .asr-section__title {
    margin-bottom: 12px;
}

/* The live fleet count. The figure carries the weight, the label stays quiet. */
.asr-about__stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 15px;
    color: var(--asr-text-muted);
}

.asr-about__stat strong {
    font-family: var(--asr-font-heading);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--asr-primary-light);
}

/* FAQ. One card holding the whole set, with hairlines between entries rather
   than a card each, so seven questions read as one list instead of seven
   competing boxes. */
.asr-about__faq {
    padding: 8px 28px;
}

.asr-about__faq-item {
    padding: 20px 0;
    border-bottom: 1px solid rgba(115, 115, 115, 0.35);
}

.asr-about__faq-item:last-child {
    border-bottom: 0;
}

.asr-about__faq-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--asr-white);
    margin-bottom: 8px;
}

.asr-about__faq-item p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--asr-text-muted);
}

@media (max-width: 640px) {
    .asr-about__intro { font-size: 17px; max-width: none; }
    .asr-about__stat strong { font-size: 34px; }
    .asr-about__panel { padding: 22px; }
    .asr-about__closer { padding: 28px 22px; }
    .asr-about__faq { padding: 4px 20px; }
    .asr-about__actions .asr-btn { flex: 1 1 auto; text-align: center; }
}


/* What every rental includes. Mirrors the About page's prose and badge styling
   rather than reusing .asr-about__* class names, so the two pages can diverge
   later without one silently restyling the other. */
.asr-included__lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--asr-text-muted);
    max-width: 70ch;
    margin-bottom: 28px;
}

/* Replaced the three long paragraphs this section used to carry. Same facts, laid
   out as a scannable two-column list so the block stops reading as a wall of text
   next to the card sections above and below it. */
.asr-included__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    margin: 0;
}

.asr-included__fact {
    padding: 18px 0;
    border-top: 1px solid var(--asr-border);
}

.asr-included__fact dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--asr-white);
    margin-bottom: 6px;
}

.asr-included__fact dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--asr-text-muted);
}

.asr-included__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.asr-included__strip li {
    background: var(--asr-bg-card);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius-full);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--asr-text);
    -webkit-backdrop-filter: blur(var(--asr-blur));
    backdrop-filter: blur(var(--asr-blur));
}

.asr-included__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Legal documents: privacy policy and cookie notice. Reading-optimised rather than
   marketing-styled, since these are pages people arrive at with a specific question
   and want to leave again quickly. */
.asr-legal__title {
    font-size: clamp(28px, 4vw, 40px);
    color: var(--asr-white);
    margin-bottom: 8px;
}

.asr-legal__updated {
    font-size: 14px;
    color: var(--asr-subtitle);
    margin-bottom: 32px;
}

.asr-legal__toc {
    background: var(--asr-bg-card);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    padding: 20px 24px;
    margin-bottom: 40px;
    -webkit-backdrop-filter: blur(var(--asr-blur));
    backdrop-filter: blur(var(--asr-blur));
}

.asr-legal__toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.asr-legal__toc a {
    color: var(--asr-text-muted);
    text-decoration: none;
    font-size: 15px;
}

.asr-legal__toc a:hover,
.asr-legal__toc a:focus-visible {
    color: var(--asr-white);
    text-decoration: underline;
}

.asr-legal__section {
    margin-bottom: 36px;
    max-width: 70ch;
    /* Anchored headings must clear the fixed header when jumped to from the contents. */
    scroll-margin-top: 96px;
}

.asr-legal__section h2 {
    font-size: 21px;
    color: var(--asr-white);
    margin-bottom: 12px;
}

.asr-legal__section p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--asr-text-muted);
    margin-bottom: 14px;
}

.asr-legal__section ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.asr-legal__section li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--asr-text-muted);
    margin-bottom: 8px;
}

/* Terms written in the Hub (TermsDoc.php): the legal treatment, with numbered sections nested to three levels. */
.asr-terms-doc__lang[hidden] { display: none; }
.asr-terms-doc__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}
.asr-terms-doc__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.asr-terms-doc__accept {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    background: var(--asr-bg-card);
    color: var(--asr-white);
    font-size: 15px;
}
.asr-terms-doc__accept [hidden] { display: none; }
.asr-terms-doc__accept-error { color: rgb(239, 120, 120); }
.asr-terms-doc__note {
    font-size: 15px;
    color: var(--asr-white);
    background: var(--asr-bg-card);
    border: 1px solid var(--asr-border);
    border-radius: var(--asr-radius);
    padding: 14px 18px;
    margin-bottom: 24px;
}
.asr-terms-doc__note a { color: inherit; text-decoration: underline; margin-left: 4px; }
.asr-terms-doc .terms-num { color: var(--asr-white); font-variant-numeric: tabular-nums; margin-right: 6px; }
.asr-terms-doc__intro,
.asr-terms-doc__body { max-width: 70ch; }
.asr-terms-doc__intro p,
.asr-terms-doc .terms-body p,
.asr-terms-doc .terms-body li {
    font-size: 16px;
    line-height: 1.75;
    color: var(--asr-text-muted);
    margin-bottom: 12px;
}
.asr-terms-doc__intro { margin-bottom: 32px; }
.asr-terms-doc .terms-body ul,
.asr-terms-doc .terms-body ol { margin: 0 0 14px; padding-left: 22px; }
.asr-terms-doc .terms-body a { color: var(--asr-white); }
.asr-terms-doc .terms-sec { scroll-margin-top: 96px; }
.asr-terms-doc .terms-sec[data-depth="1"] { margin-bottom: 32px; }
.asr-terms-doc .terms-sec[data-depth="2"],
.asr-terms-doc .terms-sec[data-depth="3"] { margin: 16px 0 0 20px; }
.asr-terms-doc .terms-h { color: var(--asr-white); margin-bottom: 10px; }
.asr-terms-doc h2.terms-h { font-size: 21px; }
.asr-terms-doc h3.terms-h { font-size: 17px; }
.asr-terms-doc h4.terms-h { font-size: 16px; }
.asr-terms-doc .terms-ref { white-space: nowrap; }
.asr-terms-doc__governs { font-size: 14px; color: var(--asr-subtitle); margin-top: 24px; }
.asr-terms-doc__versions { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--asr-border); max-width: 70ch; }
.asr-terms-doc__versions h2 { font-size: 17px; color: var(--asr-white); margin-bottom: 12px; }
.asr-terms-doc__versions ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.asr-terms-doc__versions li { display: flex; gap: 12px; font-size: 15px; color: var(--asr-subtitle); }
.asr-terms-doc__versions a { color: var(--asr-text-muted); font-weight: 600; min-width: 3em; }
.asr-terms-doc__versions li[aria-current] a { color: var(--asr-white); }
@media (max-width: 768px) {
    .asr-terms-doc .terms-sec[data-depth="2"],
    .asr-terms-doc .terms-sec[data-depth="3"] { margin-left: 0; }
}
@media print {
    .asr-terms-doc__bar,
    .asr-terms-doc__versions,
    .asr-terms-doc__note { display: none; }
    .asr-terms-doc .terms-h,
    .asr-terms-doc .terms-num,
    .asr-terms-doc .terms-body p,
    .asr-terms-doc .terms-body li,
    .asr-terms-doc__intro p { color: #000; }
}

@media (max-width: 768px) {
    /* Two columns of short definitions become unreadable once each cell is ~150px
       wide, so collapse at the same breakpoint the step cards do. */
    .asr-included__facts { grid-template-columns: 1fr; column-gap: 0; }
}

/* --- Optional customer note (step 3) --- */
/* Inherits .asr-input entirely; a textarea only needs the things an input has by
   default — a resize handle that cannot break the column, and room to grow. */
.asr-note {
    display: block;
    min-height: 84px;
    resize: vertical;
    line-height: 1.5;
    margin-bottom: 6px;
}

.asr-note-hint {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

/* --- Already-booked days --- */
/* Distinct from a day the branch is closed. Both are unpickable, but a customer who can
   see that THIS CAR is out — rather than that we are shut — knows to try other dates
   rather than assuming the business is unavailable. A strikethrough says "taken" without
   needing a legend. */
.asr-cal__day--booked {
    color: rgba(255,255,255,0.22);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* --- My account (autospektr-concierge) --- */
/* The header's account slot: a pill beside the language group, filled in by
   concierge-chip.js after load. On a phone the header shows only the menu button, so the
   slot lives in the nav sheet instead (.asr-navsheet__account). */
.asr-header__account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 6px 14px 6px 10px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--asr-radius-full);
    border-style: solid;
    border-color: #737373;
    border-width: 1px 1px 2px 1px;
    font-size: 13px;
    font-weight: 600;
    color: var(--asr-text);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    transition: background var(--asr-transition);
}
.asr-header__account:hover { background: rgba(255,255,255,0.14); }
.asr-header__account:focus-visible { outline: 2px solid var(--asr-subtitle); outline-offset: 2px; }
.asr-header__account svg { width: 18px; height: 18px; flex: none; }
.asr-header__account span { overflow: hidden; text-overflow: ellipsis; }
/* Below 1280px the nav already fills the bar, so the slot keeps its icon and its name is
   read out but not shown. */
@media (max-width: 1279px) {
    .asr-header__inner .asr-header__account { padding: 8px; gap: 0; }
    .asr-header__inner .asr-header__account span {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
}
@media (max-width: 768px) {
    .asr-header__inner .asr-header__account { display: none; }
}

/* "Licence on file. Use it / Upload a new one" above the licence uploads
   (concierge-prefill.js). The public theme has no global [hidden] rule, so the rows this
   card hides carry their own. */
.asr-licence-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border: 1px solid #4b5870;
    border-radius: var(--asr-radius);
    background: rgba(255, 255, 255, 0.04);
    color: var(--asr-text);
}
.asr-licence-file > svg { width: 22px; height: 22px; flex: none; color: var(--asr-subtitle); }
.asr-licence-file__text { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; }
.asr-licence-file__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.asr-licence-file__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid #4b5870; background: rgba(255, 255, 255, 0.05); color: #dbe6f7;
    font-family: var(--asr-font); font-size: 13px; font-weight: 600; line-height: 1.2;
    transition: background var(--asr-transition), border-color var(--asr-transition);
}
.asr-licence-file__btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--asr-primary-light); }
.asr-licence-file__btn--use { background: var(--asr-primary); border-color: var(--asr-primary); color: #fff; }
.asr-licence-file__btn--use:hover { background: var(--asr-primary-light); border-color: var(--asr-primary-light); }
.asr-licence-file--using { border-color: var(--asr-success); }
.asr-licence-file--using .asr-licence-file__btn--use { display: none; }
/* !important because the phone layout's own rule for an opened upload row
   (.asr-step2-grid.is-collapsed.uploads-open ... .asr-upload-row) outranks any plain
   selector here, and a row the customer chose to skip must stay skipped. */
.asr-upload-row[hidden] { display: none !important; }
.asr-dl-choice .asr-dl-choice__cam[hidden] { display: none; }
/* With the licence on file in use, its particulars come from the customer's record and are
   locked: shown, readable, not editable (concierge-prefill.js). */
.asr-booking .asr-input.asr-licence-locked,
.asr-booking .asr-datepicker.asr-licence-locked .asr-datepicker__trigger {
    opacity: 0.72;
    cursor: default;
}

/* Additional drivers (step 2, additional-drivers.js). The card is printed hidden and the script
   shows it; the public theme has no global [hidden] rule, so the parts that set a display carry
   their own. A driver block lays out like the scan-first licence card above it: one column, 16px
   between its rows, the licence scan's status line in that rhythm too. */
.asr-drivers[hidden],
.asr-drivers__add[hidden],
.asr-drivers__note[hidden] { display: none; }
.asr-drivers__list:empty { display: none; }
.asr-driver {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(115, 115, 115, 0.35);
}
.asr-driver .asr-upload-row,
.asr-driver .asr-dl-status { margin-top: 0; }
.asr-driver .asr-input-row > .asr-input-col { margin-bottom: 0; }
.asr-driver__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.asr-driver__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--asr-white);
}
.asr-driver__remove {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 6px 10px; margin-right: -10px; border: 0; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--asr-text-muted);
    font-family: var(--asr-font); font-size: 13px; font-weight: 600; line-height: 1.2;
    transition: background var(--asr-transition), color var(--asr-transition);
}
.asr-driver__remove:hover { background: rgba(239, 120, 120, 0.1); color: #f3b0b0; }
.asr-driver__remove svg { width: 15px; height: 15px; flex: none; }
.asr-drivers__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
/* The step's secondary button (.asr-dl-choice__btn, .asr-licence-file__btn). */
.asr-drivers__add {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid #4b5870; background: rgba(255, 255, 255, 0.05); color: #dbe6f7;
    font-family: var(--asr-font); font-size: 13px; font-weight: 600; line-height: 1.2;
    transition: background var(--asr-transition), border-color var(--asr-transition);
}
.asr-drivers__add:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--asr-primary); }
.asr-drivers__add svg { width: 16px; height: 16px; flex: none; }
.asr-drivers__note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--asr-text-muted); }