/**
 * AtlasDrive — Moroccan Car Rental Platform
 *
 * IDENTITY: deep indigo, orchid, royal blue, with lime as decoration.
 * Indigo carries the structure, the dark surfaces and the primary action.
 * Orchid is the single loud accent — the one filled call to action per screen.
 * Royal blue is interactive: links, focus rings, secondary controls. Olive is
 * a deep alternative ground. Lime is decoration only: it cannot carry text on
 * a light surface (1.55:1) and it is never a control, because a lime button
 * would read as WhatsApp. Green remains reserved for WhatsApp alone.
 *
 * TOKEN CONTRACT
 *   Layer 1 — Primitives: the only place a raw colour value may appear.
 *   Layer 2 — Semantic:   what a thing *is* (surface, body text, primary CTA).
 *   Layer 3 — Effects:    gloss, elevation and motion, expressed once.
 * Never write a raw hex, rgba, radius or shadow value outside Layer 1.
 *
 * Every foreground/background pair below is verified against WCAG 2.1 AA
 * (4.5:1 for text, 3:1 for control boundaries).
 */

:root {
    /* =========================================================
       LAYER 1 — PRIMITIVES (the only raw values in this file)
       Palette taken from the reference board: deep indigo, orchid,
       lime, olive, royal blue. Every tint below is a derivation of
       one of those five, checked against WCAG AA before it was written.
       ========================================================= */

    /* Indigo — the primary. Structure, dark surfaces, main action. */
    --indigo-950: #0B1240;   /* deepest ground; white = 17.88:1 */
    --indigo-900: #14205F;   /* primary hover; white = 14.98:1 */
    --indigo-850: #182668;
    --indigo-800: #1B2A8E;   /* PRIMARY — white label = 11.88:1 */
    --indigo-700: #243AAE;
    --indigo-400: #8C97D6;
    --indigo-200: #C3CBEB;   /* on indigo-950 — 11.12:1 */
    --indigo-100: #E1E6F6;
    --indigo-50:  #EFF2FB;

    /* Royal blue — interactive: links, focus, secondary action. */
    --blue-700: #2C4FD6;   /* as text on white — 6.57:1 */
    --blue-600: #3A62F2;   /* focus ring — 4.99:1 on white */
    --blue-400: #7D97F8;   /* on dark — 6.52:1 on indigo-950 */
    --blue-100: #E4EAFE;
    --blue-50:  #F1F4FE;

    /* Orchid — the accent. The one loud fill, as on the reference board. */
    --orchid-800: #7E2F71;   /* as text on white — 8.29:1 */
    --orchid-700: #963B87;   /* ACCENT FILL — white label = 6.42:1 */
    --orchid-600: #AC4A9B;   /* accent hover — white label = 4.99:1 */
    --orchid-300: #D9A5D0;   /* on dark — 8.72:1 on indigo-950 */
    --orchid-100: #F6E7F3;

    /* Lime — decoration only. It cannot carry text on light (1.55:1) and it
       is never a control: a lime button would read as WhatsApp. It appears
       as hairlines, the zellige stroke and marks on dark grounds. */
    --lime-500: #84E81F;   /* on indigo-950 — 11.53:1 */
    --lime-600: #6BC016;
    --lime-200: #DCF8B8;

    /* Olive — deep alternative ground and heading ink. */
    --olive-900: #232B14;   /* white = 14.71:1 */
    --olive-700: #3E4A26;   /* as text on white — 9.49:1 */
    --olive-500: #5C6E39;   /* 5.61:1 on white */
    --olive-100: #E8EDDD;

    /* Cool neutrals, tuned toward the indigo so greys never look muddy. */
    --ink-900: #0D1020;
    --ink-800: #1A1E33;
    --ink-700: #33384D;   /* headings — 11.58:1 on white */
    --ink-600: #4A5068;   /* body text — 7.96:1 on white */
    --ink-500: #646B84;   /* muted text — 5.28:1 on white */
    --ink-400: #7C8399;   /* control boundaries — 3.77:1 on white */
    --ink-300: #A3A9BC;
    --ink-250: #C0C5D3;
    --ink-200: #D2D6E0;
    --ink-100: #E6E9F0;
    --ink-50:  #F2F4F8;

    --white: #FFFFFF;
    --page-ground: #F6F7FB;

    /* WhatsApp — this green is reserved for WhatsApp and nothing else.
       It is a blue-green and sits 0.47 luminance away from --lime-500,
       so the two never read as the same signal. */
    --wa-50:   #F0FDF4;
    --wa-200:  #BBF7D0;
    --wa-400:  #22C55E;    /* on dark grounds — 9.66:1 on indigo-900 */
    --wa-600:  #15803D;    /* white label = 5.02:1 (brand #25D366 fails AA) */
    --wa-700:  #116631;

    /* Status */
    --red-50:    #FEF3F2;
    --red-200:   #FECDCA;
    --red-600:   #B42318;
    --amber-50:  #FFFAEB;
    --amber-200: #FEDF89;
    --amber-600: #8A5A10;

    /* Ink used for shadows and scrims, as raw channels so alpha can vary. */
    --shadow-rgb: 13, 16, 32;
    --scrim-rgb: 11, 18, 64;
    --accent-rgb: 150, 59, 135;

    /* =========================================================
       LAYER 2 — SEMANTIC TOKENS
       ========================================================= */

    /* -- Brand ------------------------------------------------ */
    --color-primary:        var(--indigo-800);
    --color-primary-hover:  var(--indigo-900);
    --color-primary-active: var(--indigo-950);
    --color-primary-dark:   var(--indigo-950);
    --color-primary-light:  var(--indigo-50);
    --color-primary-soft:   var(--indigo-100);
    --color-primary-subtle: var(--indigo-200);

    --color-accent:         var(--orchid-700);   /* the one loud fill */
    --color-accent-hover:   var(--orchid-600);
    --color-accent-text:    var(--orchid-800);   /* AA-safe as text */
    --color-accent-on-dark: var(--orchid-300);
    --color-secondary:      var(--blue-700);
    --color-secondary-soft: var(--blue-100);

    /* Lime never becomes a semantic role — it stays decoration. */
    --color-spark:          var(--lime-500);
    --color-spark-soft:     var(--lime-200);

    /* -- Surfaces --------------------------------------------- */
    --bg-page:           var(--page-ground);
    --bg-surface:        var(--white);
    --bg-surface-subtle: var(--ink-50);
    --bg-surface-warm:   var(--ink-50);   /* hover wash on light chrome */
    --bg-surface-accent: var(--blue-50);
    --bg-inverse:        var(--indigo-950);
    --bg-input:          var(--white);
    --bg-glass:          rgba(255, 255, 255, 0.92);
    --bg-scrim:          rgba(var(--scrim-rgb), 0.58);

    /* -- Borders ---------------------------------------------- */
    --border-subtle:  var(--ink-100);   /* decorative hairlines */
    --border-hover:   var(--ink-250);
    --border-control: var(--ink-400);   /* inputs — must stay >= 3:1 */
    --border-focus:   var(--blue-600);  /* focus belongs to the link colour */
    --border-inverse: rgba(255, 255, 255, 0.14);

    /* -- Text -------------------------------------------------- */
    --text-primary:       var(--ink-700);
    --text-secondary:     var(--ink-600);
    --text-muted:         var(--ink-500);
    --text-accent:        var(--color-accent-text);
    --text-on-primary:    var(--white);
    --text-inverse:       var(--indigo-100);
    --text-inverse-muted: var(--indigo-200);

    /* -- Status ------------------------------------------------
       "Positive" is deliberately not green: green belongs to WhatsApp, so a
       green tick would read as a WhatsApp cue. Positive states use the
       royal blue, which is the palette's own interactive colour. */
    --positive:        var(--blue-700);
    --positive-light:  var(--blue-100);
    --positive-border: var(--blue-400);
    --success:         var(--positive);
    --success-light:   var(--positive-light);
    --success-border:  var(--positive-border);
    --success-hover:   var(--indigo-800);
    --whatsapp:         var(--wa-600);
    --whatsapp-hover:   var(--wa-700);
    --whatsapp-on-dark: var(--wa-400);
    --whatsapp-light:   var(--wa-50);
    --whatsapp-border:  var(--wa-200);
    --danger:        var(--red-600);
    --danger-light:  var(--red-50);
    --danger-border: var(--red-200);
    --warning:        var(--amber-600);
    --warning-light:  var(--amber-50);
    --warning-border: var(--amber-200);

    /* =========================================================
       LAYER 3 — GLOSS & ELEVATION
       The primary control should read as polished metal under glass: a
       vertical tone shift, a bright top edge, a dark bottom edge, and a
       highlight that sweeps across on hover.
       ========================================================= */
    --gloss-face: linear-gradient(180deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.04) 42%,
        rgba(0, 0, 0, 0.10) 100%);
    --gloss-edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    --gloss-edge-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.28);
    --gloss-sweep: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 34%,
        rgba(255, 255, 255, 0.26) 50%,
        rgba(255, 255, 255, 0.00) 66%,
        transparent 100%);
    --gloss-sweep-light: linear-gradient(105deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.00) 34%,
        rgba(var(--accent-rgb), 0.22) 50%,
        rgba(var(--accent-rgb), 0.00) 66%,
        transparent 100%);

    --shadow-xs:   0 1px 2px rgba(var(--shadow-rgb), 0.06);
    --shadow-sm:   0 1px 2px rgba(var(--shadow-rgb), 0.06), 0 2px 6px rgba(var(--shadow-rgb), 0.05);
    --shadow-card: 0 1px 2px rgba(var(--shadow-rgb), 0.05), 0 8px 20px -6px rgba(var(--shadow-rgb), 0.10);
    --shadow-card-hover: 0 2px 4px rgba(var(--shadow-rgb), 0.06), 0 18px 38px -10px rgba(var(--shadow-rgb), 0.18);
    --shadow-hover: var(--shadow-card-hover);
    --shadow-modal: 0 24px 56px -14px rgba(var(--shadow-rgb), 0.30), 0 0 0 1px var(--ink-100);
    --shadow-primary: 0 2px 4px rgba(var(--shadow-rgb), 0.18), 0 10px 24px -8px rgba(var(--shadow-rgb), 0.36);
    --shadow-primary-hover: 0 3px 6px rgba(var(--shadow-rgb), 0.20), 0 16px 34px -10px rgba(var(--shadow-rgb), 0.44);
    --shadow-inset-top: var(--gloss-edge-top);
    --ring-focus: 0 0 0 3px rgba(var(--accent-rgb), 0.42);

    /* =========================================================
       TYPOGRAPHY
       ========================================================= */
    --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-numeric: var(--font-body);

    --text-2xs: 11px;
    --text-xs:  12px;
    --text-sm:  13px;
    --text-base: 15px;
    --text-md:  16px;
    --text-lg:  18px;
    --text-xl:  22px;
    --text-2xl: clamp(24px, 3vw, 30px);
    --text-3xl: clamp(28px, 4.2vw, 44px);

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-body:  1.65;

    --tracking-tight: -0.015em;
    --tracking-wide:  0.08em;

    /* =========================================================
       SPACING (4px base)
       ========================================================= */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* =========================================================
       GEOMETRY
       ========================================================= */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 9999px;   /* dots and avatars only */

    /* =========================================================
       MOTION
       One vocabulary, used everywhere. Durations are short enough to feel
       responsive; the easing does the "premium" work, not the length.
       ========================================================= */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 0.18s;
    --dur-base: 0.28s;
    --dur-slow: 0.6s;
    --dur-reveal: 0.8s;
    --dur-sweep: 0.75s;

    --transition-fast:   all var(--dur-fast) var(--ease-in-out);
    --transition-smooth: all var(--dur-base) var(--ease-out);

    /* =========================================================
       LAYOUT METRICS
       ========================================================= */
    --quickbar-height: 64px;
    --booking-bar-height: 68px;
    --tap-target-min: 44px;
    --container-max: 1240px;

    --ratio-media: 16 / 10;
    --media-skeleton-from: var(--ink-50);
    --media-skeleton-to: var(--ink-100);

    /* The "live" marker: orchid, not green. */
    --pulse-ring: rgba(var(--accent-rgb), 0.55);
    --pulse-ring-halo: rgba(var(--accent-rgb), 0.26);
    --pulse-ring-fade: rgba(var(--accent-rgb), 0);
    --surface-inverse-raised: rgba(255, 255, 255, 0.06);
    /* Frosted panes on dark grounds (hero controls, badges). */
    --glass-on-dark:       rgba(255, 255, 255, 0.08);
    --glass-on-dark-soft:  rgba(255, 255, 255, 0.10);
    --glass-on-dark-hover: rgba(255, 255, 255, 0.16);
    --mask-opaque: #000;

    /* =========================================================
       LEGACY ALIASES — older rules across this file still use these
       names. They now resolve to the indigo system.
       ========================================================= */
    --color-surface: var(--bg-surface);
    --color-surface-subtle: var(--bg-surface-subtle);
    --color-background: var(--bg-page);
    --color-border: var(--border-subtle);
    --color-border-hover: var(--border-hover);
    --color-text: var(--text-primary);
    --color-text-body: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-text-light: var(--text-muted);
    --color-primary-glow: rgba(var(--shadow-rgb), 0.16);
    --color-primary-glow-heavy: rgba(var(--shadow-rgb), 0.28);

    --bg-dark: var(--bg-page);
    --bg-card: var(--bg-surface);
    --bg-card-hover: var(--bg-surface);
    --bg-glass-subtle: var(--bg-glass);
    --bg-input-focus: var(--bg-input);

    --border-glass: var(--border-subtle);
    --border-glow: rgba(var(--accent-rgb), 0.32);

    --text-body: var(--text-secondary);
    --text-light: var(--text-muted);

    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --primary-active: var(--color-primary-active);
    --primary-light: var(--color-primary-light);
    --primary-soft: var(--color-primary-soft);
    --primary-glow: var(--color-primary-glow);

    --success-glow: rgba(44, 79, 214, 0.16);
    --whatsapp-glow: rgba(21, 128, 61, 0.16);
    --shadow-glow-purple: var(--shadow-primary);
    --shadow-glow-blue: var(--shadow-primary);
}

/* Arabic headings use a geometric Kufic face; body copy stays on Cairo. */
html[dir="rtl"] {
    --font-heading: 'Reem Kufi', 'Cairo', system-ui, sans-serif;
    --font-body: 'Cairo', system-ui, -apple-system, sans-serif;
    --tracking-tight: 0;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: var(--leading-body);
    font-size: var(--text-base);
    min-height: 100vh;
    /* Last-resort guard only: every known overflow source is fixed at the
       component level below. `clip` is preferred over `hidden` because it does
       not turn <body> into a scroll container, which would break position:sticky
       on the header. `hidden` stays as the fallback for older browsers. */
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* =========================================================
   Container System (Responsive 1280px Max)
   ========================================================= */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

@media (max-width: 991px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* =========================================================
   Typography Hierarchy
   ========================================================= */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, figcaption {
    /* Long unbreakable strings (URLs, plate numbers, Arabic compounds) must
       never be able to push the layout wider than its container.
       `overflow-wrap` only breaks a word that genuinely cannot fit; the
       `word-break: break-word` alias was tried here first and had to be
       removed — it drops min-content to a single character, which let flex
       containers squeeze nav labels into two- and three-line stacks. */
    overflow-wrap: break-word;
}

/* The display face is reserved for headings. Everything else — body copy,
   labels, buttons, prices, tables — stays on the neutral reading face. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

h3 {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-2);
}

h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

p {
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-center { text-align: center !important; }
.text-white { color: var(--white) !important; }

/* Subheading badge pill */
.badge-subheading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-soft);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-3);
}

.section-title-header {
    margin-bottom: var(--space-12);
}

.section-heading {
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.section-lead {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

/* =========================================================
   Top Announcement Bar
   ========================================================= */
.top-announcement-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-2) 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.announcement-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.announcement-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-weight: 500;
}

.pulse-indicator {
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--pulse-ring);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 var(--pulse-ring); }
    70% { box-shadow: 0 0 0 7px var(--pulse-ring-fade); }
    100% { box-shadow: 0 0 0 0 var(--pulse-ring-fade); }
}

.announcement-contacts {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-muted);
}

.announcement-contacts .top-link {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.announcement-contacts .top-link:hover {
    color: var(--primary);
}

.announcement-contacts .sep {
    color: var(--text-muted);
}

/* =========================================================
   Main Floating Glass Header
   ========================================================= */
.main-glass-header {
    position: sticky;
    top: var(--space-3);
    z-index: 1000;
    margin: 0 auto;
    padding: 4px 0;
    transition: var(--transition-smooth);
}

.header-container {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 10px var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-sm);
    /* Flex items default to min-width:auto, so the logo image and the nav
       refused to shrink and pushed the burger past the viewport edge. */
    min-width: 0;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}

/* The logo used to carry an inline max-width:220px, which no stylesheet rule
   could override, so it never yielded space to the burger. Sizing now lives
   here; the width/height attributes on the tag reserve space against CLS. */
.brand-logo-img {
    height: 56px;
    width: auto;
    max-width: min(172px, 100%);
    object-fit: contain;
}

.drawer-logo-img {
    height: 48px;
    width: auto;
    max-width: min(148px, 100%);
    object-fit: contain;
}

.brand-emblem {
    width: 42px;
    height: 42px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--white);
    box-shadow: 0 4px 12px var(--primary-glow);
    transition: var(--transition-fast);
}

.brand-link:hover .brand-emblem {
    transform: scale(1.04);
}

.brand-meta {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.brand-sub {
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.desktop-nav .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 4px;
    background: var(--bg-surface-subtle);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.nav-link {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    /* A header link must never wrap onto a second line. */
    white-space: nowrap;
    flex: 0 0 auto;
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: var(--primary);
    background: var(--bg-surface);
}

.nav-link.active {
    color: var(--primary);
    background: var(--bg-surface);
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}

.nav-tag {
    background: var(--danger-light);
    color: var(--danger);
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--danger-border);
}

.header-action-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 0 0 auto;
}

.btn-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 9px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    /* Never shrink below the WCAG minimum touch target. */
    flex: 0 0 auto;
    width: var(--tap-target-min);
    height: var(--tap-target-min);
}

.btn-mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--radius-xs);
    transition: var(--transition-fast);
}

/* =========================================================
   Button Component System
   ========================================================= */
/* =========================================================
   Button System — three tiers, and only one filled button
   ("the primary") is allowed per screen.

     1. .btn-primary        polished indigo — the single main action
     2. .btn-secondary      outlined          — everything alongside it
     3. .btn-text / .btn-whatsapp  quiet      — tertiary and channel actions

   The primary is built to read as polished metal under glass: a vertical
   tone shift across the face, a bright top edge, a dark bottom edge, and a
   highlight that sweeps across on hover. The sweep is a pseudo-element
   moved with translate3d, so it costs no layout or paint per frame.

   .btn-primary-glow, .btn-outline-glow and .btn-secondary-glass are kept as
   aliases of these tiers so existing markup keeps working.
   ========================================================= */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target-min);
    padding: 10px var(--space-5);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    isolation: isolate;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--dur-fast) var(--ease-in-out),
        border-color var(--dur-fast) var(--ease-in-out),
        color var(--dur-fast) var(--ease-in-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.btn:active {
    transform: translateY(1px);
    transition-duration: var(--dur-fast);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Tier 1: the one prominent action on the screen ------------------ */
.btn-primary,
.btn-primary-glow {
    background-color: var(--color-primary);
    background-image: var(--gloss-face);
    color: var(--text-on-primary);
    border-color: var(--indigo-950);
    border-radius: var(--radius-md);
    padding: 10px var(--space-5);
    box-shadow:
        var(--shadow-primary),
        var(--gloss-edge-top),
        var(--gloss-edge-bottom);
}

/* The travelling highlight. Parked off the leading edge and swept across
   on hover; `transform` only, and it never repaints the label. */
.btn-primary::after,
.btn-primary-glow::after,
.btn-whatsapp-fill::after,
.btn-booking-search::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    pointer-events: none;
    background: var(--gloss-sweep);
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
}

.btn-primary:hover:not(:disabled),
.btn-primary-glow:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    border-color: var(--indigo-900);
    color: var(--text-on-primary);
    transform: translateY(-1px);
    box-shadow:
        var(--shadow-primary-hover),
        var(--gloss-edge-top),
        var(--gloss-edge-bottom);
}

.btn-primary:hover:not(:disabled)::after,
.btn-primary-glow:hover:not(:disabled)::after,
.btn-whatsapp-fill:hover::after,
.btn-booking-search:hover::after {
    animation: btn-sweep var(--dur-sweep) var(--ease-in-out);
}

@keyframes btn-sweep {
    from { transform: translate3d(-120%, 0, 0); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    to   { transform: translate3d(120%, 0, 0); opacity: 0; }
}

.btn-primary:active:not(:disabled),
.btn-primary-glow:active:not(:disabled) {
    background-color: var(--color-primary-active);
    box-shadow: var(--gloss-edge-bottom), inset 0 2px 6px rgba(0, 0, 0, 0.34);
}

/* --- Tier 2: outlined, sits next to the primary without competing ---- */
.btn-secondary,
.btn-secondary-glass,
.btn-outline-glow {
    background-color: var(--bg-surface);
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(var(--shadow-rgb), 0.03) 100%);
    color: var(--text-primary);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    padding: 10px var(--space-5);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover,
.btn-secondary-glass:hover,
.btn-outline-glow:hover {
    background-color: var(--bg-surface-subtle);
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* --- Tier 3: quiet text action -------------------------------------- */
.btn-text {
    background: transparent;
    color: var(--text-accent);
    border-color: transparent;
    padding: 10px var(--space-3);
    box-shadow: none;
}

.btn-text:hover {
    background: var(--bg-surface-subtle);
    color: var(--color-primary);
}

/* --- Accent button: orchid face, white label — 6.42:1 ---------------- */
.btn-accent {
    background-color: var(--orchid-700);
    background-image: var(--gloss-face);
    color: var(--white);
    border-color: var(--orchid-800);
    box-shadow:
        0 2px 4px rgba(var(--accent-rgb), 0.28),
        0 10px 24px -8px rgba(var(--accent-rgb), 0.40),
        var(--gloss-edge-top);
}

.btn-accent:hover {
    background-color: var(--orchid-600);
    transform: translateY(-1px);
}

/* --- WhatsApp: the one place green is allowed -----------------------
   Outlined by default so it never competes with the primary; the green
   lives in the icon and the border. */
.btn-whatsapp,
.btn-whatsapp-pill,
.btn-whatsapp-large {
    background-color: var(--bg-surface);
    color: var(--whatsapp);
    border: 1px solid var(--whatsapp-border);
    border-radius: var(--radius-md);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.btn-whatsapp-pill {
    padding: 10px var(--space-4);
    font-size: var(--text-sm);
}

.btn-whatsapp-large {
    padding: 12px var(--space-6);
    font-size: var(--text-md);
    min-height: 48px;
}

.btn-whatsapp i,
.btn-whatsapp-pill i,
.btn-whatsapp-large i {
    color: var(--whatsapp);
    font-size: 1.1em;
}

.btn-whatsapp:hover,
.btn-whatsapp-pill:hover,
.btn-whatsapp-large:hover {
    background-color: var(--whatsapp-light);
    color: var(--whatsapp-hover);
    border-color: var(--whatsapp);
    transform: translateY(-1px);
}

.btn-whatsapp:hover i,
.btn-whatsapp-pill:hover i,
.btn-whatsapp-large:hover i {
    color: var(--whatsapp-hover);
}

/* Filled WhatsApp — only where WhatsApp is the screen's main action. */
.btn-whatsapp-fill {
    background-color: var(--whatsapp);
    background-image: var(--gloss-face);
    color: var(--white);
    border-color: var(--wa-700);
    box-shadow:
        0 2px 4px rgba(21, 128, 61, 0.26),
        0 10px 24px -8px rgba(21, 128, 61, 0.36),
        var(--gloss-edge-top);
}

.btn-whatsapp-fill i { color: var(--white); }

.btn-whatsapp-fill:hover {
    background-color: var(--whatsapp-hover);
    border-color: var(--wa-700);
    color: var(--white);
}

.btn-whatsapp-fill:hover i { color: var(--white); }

/* Danger Button */
.btn-danger {
    background-color: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.btn-danger:hover {
    background-color: var(--danger);
    color: var(--white);
}

/* Size Modifiers */
.btn-lg {
    min-height: 48px;
    padding: 12px var(--space-6);
    font-size: var(--text-md);
}

.btn-block {
    width: 100%;
}

/* =========================================================
   Hero Section (Modern Luxury Automotive Banner)
   ========================================================= */
/* ---------------------------------------------------------
   Hero component base layout.
   These are structural rules (display, flow, direction) shared by every
   hero variant; the cinematic treatment above only restyles colour, scale
   and motion on top of them.
   --------------------------------------------------------- */
.hero-container {
    position: relative;
}

.hero-content {
    text-align: start;
}

.hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-5);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--pulse-ring-halo);
}

.hero-subheadline {
    font-size: var(--text-md);
    color: var(--text-secondary);
    line-height: var(--leading-body);
    margin-bottom: var(--space-8);
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.hero-trust-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.trust-badge-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.trust-badge-item i {
    font-size: var(--text-md);
}

.ultra-hero-section {
    position: relative;
    /* A cinematic frame rather than a padded band. svh keeps mobile browser
       chrome from cropping it; the clamp stops it dominating short laptops. */
    min-height: clamp(560px, 88svh, 900px);
    display: flex;
    align-items: center;
    padding: 120px 0 132px 0;
    background-color: var(--bg-inverse);
    overflow: hidden;
    isolation: isolate;
}

/* ---------------------------------------------------------
   Layer 0 — the photograph, full bleed.
   --------------------------------------------------------- */
.hero-visual-showcase {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.hero-car-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    filter: none;
    transition: none;
}

.hero-car-stage:hover {
    transform: none;
}

/* The shared media frame is a 16:10 card everywhere else; here it fills the
   section instead. */
.ultra-hero-section .car-media.hero-featured-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: none;
    animation: none;
}

.ultra-hero-section .hero-featured-media .car-media__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
    border: none;
    border-radius: 0;
    /* Slow Ken Burns. Transform only, so it runs on the compositor with no
       layout or paint per frame. */
    transform-origin: 60% 50%;
    animation: hero-kenburns 28s ease-in-out infinite alternate;
    will-change: transform;
}

html[dir="rtl"] .ultra-hero-section .hero-featured-media .car-media__img {
    object-position: 40% 50%;
    transform-origin: 40% 50%;
}

/* Deliberately shallow. The stock hero photograph is 1280px wide and the
   frame already upscales it ~1.2x on a large display; a deeper zoom would
   compound that into visible softness. */
@keyframes hero-kenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.09); }
}

/* ---------------------------------------------------------
   Layer 1 — zellige. Dialled well back now that a photograph sits
   underneath; it should read as texture in the darker areas, not as a
   pattern laid over the car.
   --------------------------------------------------------- */
.zellige {
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background-repeat: repeat;
    will-change: transform;
}

.zellige--back {
    background-image: url("../images/zellige-60.svg");
    background-size: 60px 60px;
    opacity: 0.07;
    animation: zellige-drift-back 40s linear infinite;
}

.zellige--front {
    background-image: url("../images/zellige-110.svg");
    background-size: 110px 110px;
    opacity: 0.11;
    animation: zellige-drift-front 26s linear infinite;
}

/* One tile of travel per cycle == a seamless loop. */
@keyframes zellige-drift-back {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(60px, 60px, 0); }
}

@keyframes zellige-drift-front {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-110px, -110px, 0); }
}

html[dir="rtl"] .zellige--back  { animation-name: zellige-drift-back-rtl; }
html[dir="rtl"] .zellige--front { animation-name: zellige-drift-front-rtl; }

@keyframes zellige-drift-back-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-60px, 60px, 0); }
}

@keyframes zellige-drift-front-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(110px, -110px, 0); }
}

/* ---------------------------------------------------------
   Layer 2 — the scrim.
   Directional, not flat: dense where the copy sits, opening up over the
   car so the photograph still reads. The density behind the text was
   chosen by compositing the worst case — a pure white pixel of the
   photograph with a gold zellige stroke on top of it — and requiring AA
   for every text colour used here. At 0.86: white 9.31:1, sand-100
   8.15:1, sand-300 5.67:1, gold-300 5.75:1. Below 0.80 the muted tones
   fail, which is why the gradient does not open up until past the copy.
   --------------------------------------------------------- */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(var(--scrim-rgb), 0.82) 0%,
            rgba(var(--scrim-rgb), 0.30) 26%,
            rgba(var(--scrim-rgb), 0.00) 52%),
        linear-gradient(to right,
            rgba(var(--scrim-rgb), 0.94) 0%,
            rgba(var(--scrim-rgb), 0.88) 38%,
            rgba(var(--scrim-rgb), 0.86) 56%,
            rgba(var(--scrim-rgb), 0.44) 78%,
            rgba(var(--scrim-rgb), 0.16) 100%);
}

html[dir="rtl"] .hero__veil {
    background:
        linear-gradient(to top,
            rgba(var(--scrim-rgb), 0.82) 0%,
            rgba(var(--scrim-rgb), 0.30) 26%,
            rgba(var(--scrim-rgb), 0.00) 52%),
        linear-gradient(to left,
            rgba(var(--scrim-rgb), 0.94) 0%,
            rgba(var(--scrim-rgb), 0.88) 38%,
            rgba(var(--scrim-rgb), 0.86) 56%,
            rgba(var(--scrim-rgb), 0.44) 78%,
            rgba(var(--scrim-rgb), 0.16) 100%);
}

/* ---------------------------------------------------------
   Layer 3 — the copy.
   --------------------------------------------------------- */
.hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
}

/* The photograph is no longer a grid column, so the text runs in a single
   measured column with room to breathe. */
.hero-grid-showcase {
    display: block;
    /* Bounded as a share of the viewport, not just in pixels: a fixed 640px
       column reaches 74% of an 861px screen, where the scrim has already
       opened up and the muted tones drop below AA. */
    max-width: min(640px, 52%);
}

/* Staged entrance: each element rises and fades a beat after the last.
   Opacity and transform only. */
@keyframes hero-rise {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-content > * {
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-content > .hero-pill-badge  { animation-delay: 0.05s; }
.hero-content > .hero-headline    { animation-delay: 0.15s; }
.hero-content > .hero-subheadline { animation-delay: 0.25s; }
.hero-content > .hero-cta-group   { animation-delay: 0.35s; }
.hero-content > .hero-trust-badges{ animation-delay: 0.45s; }

.hero-visual-showcase {
    animation: hero-fade 1.4s ease-out both;
}

/* ---------------------------------------------------------
   Hero copy on the dark ground.
   --------------------------------------------------------- */
.ultra-hero-section .hero-headline {
    color: var(--white);
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-5);
    text-wrap: balance;
}

.ultra-hero-section .hero-subheadline {
    color: var(--text-inverse);
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.65;
    max-width: 46ch;
    margin-bottom: var(--space-8);
}

.ultra-hero-section .hero-pill-badge {
    background: var(--glass-on-dark-soft);
    border-color: var(--border-inverse);
    color: var(--color-accent-on-dark);
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ultra-hero-section .hero-cta-group {
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.ultra-hero-section .trust-badge-item {
    color: var(--text-inverse-muted);
}

.ultra-hero-section .trust-badge-item i,
.ultra-hero-section .trust-badge-item .text-primary {
    color: var(--color-accent-on-dark) !important;
}

.ultra-hero-section .hero-trust-badges {
    border-top-color: var(--border-inverse);
    padding-top: var(--space-5);
    gap: var(--space-6) var(--space-8);
}

/* Outlined controls need an inverted skin here; the filled clay primary
   already carries white text and works unchanged on the dark ground. */
.ultra-hero-section .btn-whatsapp-pill {
    background: var(--glass-on-dark);
    border-color: var(--border-inverse);
    color: var(--wa-400);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ultra-hero-section .btn-whatsapp-pill i { color: var(--wa-400); }

.ultra-hero-section .btn-whatsapp-pill:hover {
    background: var(--glass-on-dark-hover);
    border-color: var(--wa-400);
    color: var(--wa-400);
}

/* The hero CTA.
   On phones the booking widget sits far below the fold, so this link is
   the primary action. It is filled with ORCHID rather than the usual
   indigo: the hero ground is indigo, so an indigo button vanishes into it.
   White label on orchid-700 measures 6.42:1.
   From 861px up the booking widget shares the view and takes the primary
   role, so this steps back to a glass outline. */
.ultra-hero-section .btn-hero-cta {
    background-color: var(--orchid-700);
    background-image: var(--gloss-face);
    color: var(--white);
    border-color: var(--orchid-800);
    box-shadow:
        0 2px 4px rgba(var(--accent-rgb), 0.30),
        0 12px 26px -8px rgba(var(--accent-rgb), 0.42),
        var(--gloss-edge-top);
}

.ultra-hero-section .btn-hero-cta::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    pointer-events: none;
    background: var(--gloss-sweep);
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
}

.ultra-hero-section .btn-hero-cta:hover {
    background-color: var(--orchid-600);
    border-color: var(--orchid-800);
    color: var(--white);
    transform: translateY(-1px);
}

.ultra-hero-section .btn-hero-cta:hover::after {
    animation: btn-sweep var(--dur-sweep) var(--ease-in-out);
}

@media (min-width: 861px) {
    .ultra-hero-section .btn-hero-cta {
        background: var(--glass-on-dark);
        border-color: var(--border-inverse);
        color: var(--white);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .ultra-hero-section .btn-hero-cta:hover {
        background: var(--glass-on-dark-hover);
        border-color: var(--color-accent-on-dark);
        color: var(--white);
    }
}

/* Between 861 and 1200px the section would otherwise be almost square,
   and `cover` against a 16:9 photograph then crops away most of the car.
   A shorter frame keeps the subject readable. */
@media (min-width: 861px) and (max-width: 1200px) {
    .ultra-hero-section {
        min-height: clamp(520px, 72svh, 700px);
        padding: 104px 0 116px 0;
    }
    .ultra-hero-section .hero-featured-media .car-media__img {
        object-position: 62% 48%;
    }
}

/* ---------------------------------------------------------
   Tablet and phone.
   The copy stacks over the middle of the frame, so the scrim becomes
   mostly vertical and stays at full strength behind the text.
   --------------------------------------------------------- */
@media (max-width: 860px) {
    .ultra-hero-section {
        /* Taller, and the copy is compacted below, so a genuine band of
           photograph survives above the first line of text. */
        min-height: clamp(600px, 94svh, 860px);
        padding: 72px 0 96px 0;
    }

    /* Side by side instead of stacked: reclaims about 70px of vertical space
       for the image without dropping anything. */
    .ultra-hero-section .hero-cta-group {
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }

    .ultra-hero-section .hero-cta-group .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ultra-hero-section .hero-subheadline {
        margin-bottom: var(--space-6);
    }

    .ultra-hero-section .hero-pill-badge {
        margin-bottom: var(--space-4);
    }

    .hero-grid-showcase {
        max-width: none;
    }

    /* Copy sits in the lower half so the photograph owns the top of the
       frame. The gradient stays light where the car is and reaches 0.82
       before the first line of text — 0.80 is the measured floor at which
       every text tone still clears AA over a white pixel. */
    .ultra-hero-section {
        align-items: flex-end;
    }

    .hero__veil,
    html[dir="rtl"] .hero__veil {
        background:
            linear-gradient(to bottom,
                rgba(var(--scrim-rgb), 0.06) 0%,
                rgba(var(--scrim-rgb), 0.16) 16%,
                rgba(var(--scrim-rgb), 0.84) 29%,
                rgba(var(--scrim-rgb), 0.90) 55%,
                rgba(var(--scrim-rgb), 0.94) 100%);
    }

    /* Frame the car in the upper half, where the scrim is lightest. */
    .ultra-hero-section .hero-featured-media .car-media__img {
        object-position: 60% 34%;
    }

    .ultra-hero-section .hero-subheadline {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .zellige--back { display: none; }
    .zellige--front { opacity: 0.09; animation-duration: 60s; }
}

/* Phones.
   The three trust claims are hidden HERE ONLY — they are repeated word
   for word in the trust strip further down the page, so nothing is lost,
   and dropping them from the hero frees roughly 110px. That is what buys
   a real band of photograph above the headline while keeping the CTA
   above the fold. */
@media (max-width: 640px) {
    .ultra-hero-section {
        min-height: clamp(600px, 88svh, 780px);
        padding: 64px 0 88px 0;
    }

    .ultra-hero-section .hero-trust-badges {
        display: none;
    }

    .ultra-hero-section .hero-headline {
        font-size: clamp(30px, 8.2vw, 40px);
    }

    .ultra-hero-section .hero-cta-group {
        margin-bottom: 0;
    }
}

/* Motion is supplementary. Without it the photograph is simply still and
   the copy is simply present. */
@media (prefers-reduced-motion: reduce) {
    .zellige,
    .hero-content > *,
    .hero-visual-showcase,
    .ultra-hero-section .hero-featured-media .car-media__img {
        animation: none;
    }
    .ultra-hero-section .hero-featured-media .car-media__img {
        transform: scale(1.02);
    }
}

/* =========================================================
   Floating Premium Booking / Search Widget
   ========================================================= */
.hero-floating-booking-wrap {
    margin-top: -38px;
    margin-bottom: var(--space-12);
    position: relative;
    z-index: 40;
}

.floating-booking-card {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    box-shadow: 0 20px 45px -12px rgba(var(--shadow-rgb), 0.08), 0 1px 3px rgba(var(--shadow-rgb), 0.03);
}

.booking-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: 14px;
    align-items: flex-end;
}

.booking-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}

html[dir="ltr"] .booking-field-group {
    text-align: left;
}

.field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-body);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.field-label i {
    font-size: 13px;
    color: var(--color-primary);
}

.form-input-pill {
    width: 100%;
    height: 48px;
    background: var(--ink-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    outline: none;
    transition: var(--transition-fast);
}

.form-input-pill:focus {
    background: var(--white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.booking-field-action {
    display: flex;
    align-items: flex-end;
}

/* The booking widget's submit is the single filled primary above the fold. */
.btn-booking-search {
    width: 100%;
    min-height: 48px;
    background-color: var(--color-primary);
    background-image: var(--gloss-face);
    color: var(--text-on-primary);
    border: 1px solid var(--indigo-950);
    border-radius: var(--radius-md);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-shadow: var(--shadow-primary), var(--gloss-edge-top), var(--gloss-edge-bottom);
    transition: var(--transition-fast);
}

.btn-booking-search:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--indigo-900);
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-hover), var(--gloss-edge-top), var(--gloss-edge-bottom);
}

.btn-booking-search:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* =========================================================
   Categories Section
   ========================================================= */
.categories-luxury-section {
    padding: var(--space-16) 0;
    background: var(--bg-surface-subtle);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.categories-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.category-luxury-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.category-luxury-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-soft);
    box-shadow: var(--shadow-card-hover);
}

.cat-icon-wrap {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.category-luxury-card:hover .cat-icon-wrap {
    background: var(--primary);
    color: var(--white);
}

.cat-meta {
    flex: 1;
}

.cat-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.cat-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.cat-count {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 700;
}

.cat-arrow {
    color: var(--text-muted);
    font-size: 13px;
    transition: var(--transition-fast);
}

.category-luxury-card:hover .cat-arrow {
    color: var(--primary);
}

/* =========================================================
   Featured Fleet Section (Cars Cards)
   ========================================================= */
.fleet-luxury-section {
    padding: var(--space-20) 0;
    background: var(--white);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.fleet-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-10);
}

.large-cars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.luxury-car-card {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-card);
    position: relative;
}

.luxury-car-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary-subtle);
    box-shadow: var(--shadow-card-hover);
}

/* Card Top Badges */
.car-card-topbar {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.badge-category {
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-subtle);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}

.badge-avail {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-xs);
}

.badge-avail.available {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-avail.rented {
    background: var(--warning-light);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.avail-glow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

/* Visual Image Area */
/* =========================================================
   Vehicle Media Frame

   One component for every car photograph on the site. It owns the 16:10
   ratio, the crop, the loading skeleton and the broken-image fallback, so
   images cannot drift out of alignment between the fleet grid, the detail
   gallery, the offers list and the booking summary.

   The skeleton is the wrapper's own background, painted underneath the
   image. No JavaScript is needed for it to appear or to disappear: an
   image that has not decoded yet simply does not cover it.
   ========================================================= */
.car-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ratio-media);
    overflow: hidden;
    background-color: var(--media-skeleton-from);
    background-image: linear-gradient(
        90deg,
        var(--media-skeleton-from) 25%,
        var(--media-skeleton-to) 50%,
        var(--media-skeleton-from) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.6s linear infinite;
}

.car-media__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Once the image has painted, stop the shimmer. It animates background-position,
   which repaints every frame; left running it kept ten elements repainting for
   the life of the page even though the artwork was already covering them. */
.car-media.is-loaded {
    animation: none;
    background-image: none;
}

/* Once the source has failed, stop pretending something is still arriving. */
.car-media.is-broken {
    animation: none;
    background-image: none;
    background-color: var(--bg-surface-subtle);
}

.car-media.is-broken .car-media__img {
    object-fit: contain;
}

/* A decorative shimmer must not animate for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .car-media {
        animation: none;
        background-image: none;
    }
}

.car-card-visual {
    position: relative;
    background: var(--bg-surface-subtle);
    overflow: hidden;
}

.car-card-visual > a {
    display: block;
}

/* Legacy alias: kept so any markup still using the old class keeps its crop. */
.car-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-car-card:hover .car-hero-img,
.luxury-car-card:hover .car-media__img {
    transform: scale(1.05);
}

/* Floating Price Badge */
.car-card-floating-price {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    background: var(--bg-glass);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: baseline;
    gap: 4px;
    z-index: 5;
}

html[dir="ltr"] .car-card-floating-price {
    right: auto;
    left: var(--space-3);
}

.car-card-floating-price .float-amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.car-card-floating-price .float-currency {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Car Details & Content */
.car-card-details {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.car-title-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.car-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.car-name a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.car-name a:hover {
    color: var(--primary);
}

.car-year-tag {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Specs pills row */
.specs-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.spec-pill {
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--color-text-body);
    font-weight: 600;
}

.spec-pill i {
    color: var(--color-primary);
    font-size: 12px;
}

/* Card Bottom Footer: Price & Actions */
/* Price and actions share one row while there is room and stack when there is
   not. This is driven by the card's own width, not by a viewport breakpoint,
   because the card also gets narrow inside the 2-column tablet grid. */
.car-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.car-pricing {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 0 0 auto;
}

.price-amount {
    font-size: 22px;
    font-weight: 900;
    color: var(--color-primary-dark);
    line-height: 1;
}

.price-meta {
    display: flex;
    flex-direction: column;
}

.price-currency {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--color-primary);
}

.price-period {
    font-size: 10.5px;
    color: var(--text-muted);
}

.car-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Below ~200px of free space the whole group drops to its own full-width
       row instead of overflowing the card (which clips it via overflow:hidden). */
    flex: 1 1 200px;
    justify-content: flex-end;
    min-width: 0;
}

.car-actions .btn {
    min-width: 0;
    flex: 0 1 auto;
}

.btn-open-booking {
    white-space: nowrap;
}

/* =========================================================
   Why Choose Us & Values Section
   ========================================================= */
.why-us-luxury-section, .values-section {
    padding: var(--space-20) 0;
    background: var(--color-surface-subtle);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.why-us-cards-grid, .values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.feature-card, .value-card {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-card);
}

.feature-card:hover, .value-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary-subtle);
    box-shadow: var(--shadow-card-hover);
}

.feature-card-icon, .value-icon {
    width: 52px;
    height: 52px;
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--color-primary);
    margin-bottom: var(--space-5);
    transition: var(--transition-fast);
}

.feature-card:hover .feature-card-icon, .value-card:hover .value-icon {
    background: var(--color-primary);
    color: var(--white);
}

.feature-card h3, .value-card h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.feature-card p, .value-card p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* =========================================================
   Airports & Delivery Hubs Strip
   ========================================================= */
.airports-strip-section {
    padding: var(--space-12) 0;
    background: var(--bg-page);
}

.airports-inner-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    box-shadow: var(--shadow-card);
}

.airports-content h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.airports-content p {
    font-size: 14.5px;
    color: var(--text-secondary);
    max-width: 620px;
    margin-bottom: var(--space-6);
}

.cities-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.city-pill {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 12.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* =========================================================
   Testimonials Section
   ========================================================= */
.testimonials-luxury-section {
    padding: var(--space-20) 0;
    background: var(--bg-surface-subtle);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.testimonials-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.testi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-card);
}

.testi-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
}

.testi-stars {
    color: var(--warning);
    font-size: 13px;
    margin-bottom: var(--space-4);
    display: flex;
    gap: 3px;
}

.testi-text {
    font-size: 14.5px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.testi-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-4);
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.author-info strong {
    display: block;
    font-size: 13.5px;
    color: var(--text-primary);
}

.author-info span {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* =========================================================
   Call To Action Banner Box
   ========================================================= */
.cta-banner-section {
    padding: var(--space-16) 0;
    background: var(--bg-page);
}

.cta-glass-card {
    background: var(--bg-surface-warm);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    box-shadow: var(--shadow-card);
}

.cta-text h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.cta-text p {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 600px;
}

.cta-btns {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* =========================================================
   Page Header Strip (Inner Pages)
   ========================================================= */
.page-header-strip {
    padding: var(--space-12) 0 var(--space-10) 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-10);
    text-align: center;
}

.page-title {
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 800;
    color: var(--text-primary);
    margin: var(--space-2) 0;
}

.page-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
}

/* =========================================================
   Catalog & Filter Styles (cars.php)
   ========================================================= */
.cars-catalog-section {
    padding-bottom: var(--space-20);
}

.catalog-filter-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-8);
}

.filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: var(--space-4);
    align-items: flex-end;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-input, .filter-select {
    width: 100%;
    height: 44px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: var(--transition-fast);
}

.filter-input:focus, .filter-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.results-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    box-shadow: var(--shadow-xs);
}

.results-count strong {
    color: var(--primary);
}

.meta-guarantee-note {
    color: var(--text-muted);
    font-size: 12.5px;
}

.empty-catalog-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-16) var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-card);
}

.empty-icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

/* =========================================================
   Car Details Page (car-details.php)
   ========================================================= */
.breadcrumbs-strip {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-8);
    background: var(--bg-surface);
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--text-muted);
}

.bc-sep {
    opacity: 0.4;
}

.bc-current {
    color: var(--text-primary);
    font-weight: 700;
}

.car-details-section {
    padding-bottom: var(--space-20);
}

.car-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: flex-start;
}

.showcase-title-box {
    margin-bottom: var(--space-6);
}

.badges-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.badge-category-tag {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-soft);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 700;
}

.badge-year-tag {
    background: var(--bg-surface-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 600;
}

.showcase-car-title {
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.showcase-car-desc {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Vehicle Gallery */
.vehicle-gallery-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-8);
}

.main-gallery-view {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface-subtle);
}

/* The main view is just the shared media frame at full width. */
.main-gallery-view .car-media {
    border-radius: var(--radius-md);
}

.main-gallery-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-watermark {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    background: rgba(var(--shadow-rgb), 0.72);
    color: var(--white);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
}

.gallery-thumbs-row {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Thumbnails share the 16:10 ratio; the width drives the height so the row
   never disagrees with the main view above it. Sized to clear the 44px
   minimum touch target. */
.gallery-thumb-btn {
    width: 76px;
    flex: 0 0 auto;
    min-height: var(--tap-target-min);
    border-radius: var(--radius-xs);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-surface-subtle);
    padding: 0;
    line-height: 0;
    transition: var(--transition-fast);
}

.gallery-thumb-btn .car-media {
    border-radius: 0;
}

.gallery-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb-btn.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

/* Detailed Specs Grid */
.section-sub-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.detailed-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.spec-detail-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
}

.spec-detail-card:hover {
    border-color: var(--primary-soft);
}

.spec-card-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.spec-card-text {
    display: flex;
    flex-direction: column;
}

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

.spec-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Conditions List */
.conditions-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
}

.conditions-list-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.condition-item {
    display: flex;
    gap: var(--space-3);
}

.condition-item i {
    font-size: 18px;
    color: var(--primary);
    margin-top: 2px;
}

.condition-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.condition-item p {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Sticky Booking Sidebar */
.pricing-sticky-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 90px;
}

.sidebar-price-header {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
}

.sidebar-price-label {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.sidebar-price-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.big-price {
    font-size: 34px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
}

.price-dh {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
}

.price-day {
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar-deposit-notice {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-3);
    background: var(--bg-surface-subtle);
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
}

.duration-estimator-box {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.est-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--space-3);
}

.est-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.days-stepper {
    display: flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.btn-step-day {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-surface-subtle);
    border: none;
    color: var(--text-primary);
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-step-day:hover {
    background: var(--primary);
    color: var(--white);
}

.days-count-display {
    padding: 0 14px;
    font-weight: 800;
    color: var(--text-primary);
    font-size: 14px;
}

.est-total-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-3);
    font-size: 13px;
    color: var(--text-secondary);
}

.est-total-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
}

.sidebar-perks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.perk-item {
    font-size: 12.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.perk-item i {
    color: var(--success);
}

/* =========================================================
   Offers Page (offers.php)
   ========================================================= */
.offers-section {
    padding-bottom: var(--space-20);
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.offer-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
    position: relative;
    box-shadow: var(--shadow-card);
}

.offer-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-soft);
    box-shadow: var(--shadow-card-hover);
}

.offer-card.featured-offer {
    border-color: var(--primary);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.offer-ribbon {
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    background: var(--color-primary-dark);
    color: var(--white);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px var(--color-primary-glow);
}

html[dir="ltr"] .offer-ribbon {
    left: auto;
    right: var(--space-5);
}

.offer-validity {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.offer-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-subtle);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: var(--space-4);
    width: fit-content;
}

.offer-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.offer-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
    line-height: 1.6;
}

.offer-perks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.offer-perks .perk {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.offer-perks .perk i {
    color: var(--success);
}

.offer-cta {
    margin-top: auto;
}

/* =========================================================
   About Page (about.php)
   ========================================================= */
.about-main-section {
    padding-bottom: var(--space-20);
}

.about-grid-content {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
}

.about-headline {
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    line-height: 1.3;
}

.lead-text {
    font-size: 15.5px;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: var(--space-4);
}

.about-points-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.point-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 14.5px;
    color: var(--text-secondary);
}

.point-item i {
    color: var(--primary);
}

.stats-glass-matrix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.matrix-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: var(--transition-fast);
}

.matrix-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-soft);
}

.matrix-card.highlight {
    background: var(--primary-light);
    border-color: var(--primary-soft);
}

.matrix-num {
    font-size: 34px;
    font-weight: 900;
    color: var(--primary);
    display: block;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.matrix-label {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
}

/* =========================================================
   Contact Page (contact.php)
   ========================================================= */
.contact-main-section {
    padding-bottom: var(--space-20);
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-8);
}

.contact-luxury-card, .form-luxury-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-card);
}

.card-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.contact-methods-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.method-card {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    transition: var(--transition-fast);
}

.method-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-surface);
}

.method-card.whatsapp-highlight-card {
    background: var(--whatsapp-light);
    border-color: var(--whatsapp-border);
}

.method-icon {
    font-size: 22px;
    color: var(--primary);
    flex: 0 0 auto;
}

.whatsapp-highlight-card .method-icon {
    color: var(--whatsapp);
}

.method-details {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    /* Without this the flex item's automatic min-width:auto floors the whole
       card at the width of its longest line, which in turn floored the parent
       grid track and overflowed the page below ~430px. */
    min-width: 0;
}

.method-name {
    font-size: 11.5px;
    color: var(--text-muted);
}

.method-val {
    font-size: 14.5px;
    color: var(--text-primary);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.method-details small {
    font-size: 11px;
    color: var(--success);
}

.work-hours-box {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    margin-top: var(--space-4);
}

.form-grid-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.form-grid-contact .form-group.full-width {
    grid-column: span 2;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13.5px;
    outline: none;
    transition: var(--transition-fast);
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-submit-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* =========================================================
   FAQ Section (faq.php)
   ========================================================= */
.faq-main-section {
    padding-bottom: var(--space-20);
}

.faq-container-box {
    max-width: 860px;
    margin: 0 auto;
}

.faq-category-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: var(--space-8) 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.faq-accordion-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    overflow: hidden;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-xs);
}

.faq-accordion-item.active {
    border-color: var(--primary-soft);
    box-shadow: var(--shadow-sm);
}

.faq-accordion-header {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

html[dir="ltr"] .faq-accordion-header {
    text-align: left;
}

.faq-arrow {
    font-size: 13px;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

.faq-accordion-item.active .faq-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

.faq-accordion-body {
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    display: none;
}

.faq-accordion-item.active .faq-accordion-body {
    display: block;
}

.faq-cta-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
    box-shadow: var(--shadow-card);
}

.faq-cta-content h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.faq-cta-content p {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* =========================================================
   Trust Features Strip & Global Footer
   ========================================================= */
.trust-features-strip {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-10) 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.trust-item {
    display: flex;
    gap: var(--space-3);
}

.trust-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 18px;
    flex-shrink: 0;
}

.trust-text h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.trust-text p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Prestige Deep Midnight Purple Footer */
.site-luxury-footer {
    background: var(--bg-inverse);
    color: var(--text-inverse);
    border-top: 1px solid var(--border-inverse);
    padding: var(--space-16) 0 var(--space-8) 0;
}

/* The global `p`, `h*` and utility colour rules are light-ground rules and
   would otherwise repaint dark-ground text (the copyright line measured
   1.44:1 before this block existed). Re-establish the inverse scale here. */
.site-luxury-footer h1,
.site-luxury-footer h2,
.site-luxury-footer h3,
.site-luxury-footer h4,
.site-luxury-footer h5,
.site-luxury-footer h6 {
    color: var(--white);
}

.site-luxury-footer p,
.site-luxury-footer li,
.site-luxury-footer span,
.site-luxury-footer a {
    color: var(--text-inverse-muted);
}

.site-luxury-footer a:hover {
    color: var(--color-accent-on-dark);
}

.site-luxury-footer .text-primary,
.site-luxury-footer .text-accent {
    color: var(--color-accent-on-dark) !important;
}

/* The only green permitted on the dark ground: the WhatsApp channel icon. */
.site-luxury-footer .fa-whatsapp,
.site-luxury-footer a[href*="wa.me"] i {
    color: var(--whatsapp-on-dark) !important;
}

.site-luxury-footer .text-success {
    color: var(--color-accent-on-dark) !important;
}

.site-luxury-footer .text-warning {
    color: var(--color-accent-on-dark) !important;
}

.footer-main-content {
    display: flex;
    flex-direction: column;
}

.footer-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
    gap: var(--space-10);
    margin-bottom: var(--space-12);
}

.footer-heading {
    font-size: 15px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--space-4);
    position: relative;
    padding-bottom: var(--space-2);
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-xs);
}

html[dir="ltr"] .footer-heading::after {
    right: auto;
    left: 0;
}

.brand-bio {
    font-size: 13px;
    color: var(--color-accent-on-dark);
    line-height: 1.7;
}

.footer-social-links {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-inverse-raised);
    border: 1px solid var(--border-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--indigo-200);
    font-size: 14px;
    transition: var(--transition-fast);
}

.social-btn:hover {
    background: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-primary-glow);
}

.social-btn.whatsapp:hover {
    background: var(--whatsapp);
    border-color: var(--whatsapp);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-links a {
    font-size: 13px;
    color: var(--text-inverse-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-links a i {
    font-size: 9px;
    color: var(--text-inverse-muted);
}

.footer-links-tags {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tag-loc {
    font-size: 13px;
    color: var(--text-inverse-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tag-loc i {
    color: var(--color-accent-on-dark);
    font-size: 11px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-info-item {
    font-size: 13px;
    color: var(--text-inverse-muted);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.contact-info-item i {
    font-size: 14px;
    margin-top: 3px;
}

.contact-info-item a {
    color: var(--indigo-200);
}

.contact-info-item a:hover {
    color: var(--white);
}

.footer-bottom-strip {
    border-top: 1px solid var(--border-inverse);
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-inverse-muted);
}

.footer-bottom-badges {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.admin-access-link {
    opacity: 0.4;
    color: var(--text-inverse-muted);
}

.admin-access-link:hover {
    opacity: 1;
    color: var(--white);
}

/* =========================================================
   Mobile Drawer & Mobile Bottom Quickbar
   ========================================================= */
.mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-scrim);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

.mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85%;
    height: 100vh;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-subtle);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-modal);
    /* While parked off-canvas the drawer must not be reachable by keyboard,
       screen readers, or contribute to the scrollable area. */
    visibility: hidden;
}

html[dir="ltr"] .mobile-drawer {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--border-subtle);
    transform: translateX(-100%);
}

.mobile-drawer.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.drawer-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.drawer-header .brand-meta {
    min-width: 0;
    overflow: hidden;
}

.drawer-header .brand-meta img {
    max-width: 100%;
    height: auto;
}

.btn-drawer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    flex: 0 0 auto;
    width: var(--tap-target-min);
    height: var(--tap-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-drawer-close:hover {
    color: var(--text-primary);
}

.drawer-body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.drawer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-6);
}

.drawer-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-target-min);
    padding: 11px var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.drawer-nav a.active, .drawer-nav a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.drawer-footer-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Mobile Bottom Quick Bar — exactly 4 equal-width items.
   A flex row with `space-around` sized each item to its label, so the widest
   label (WhatsApp) forced a min-content width past 320px and clipped the last
   item. A 4-column grid gives every item the same fixed share instead. */
.mobile-bottom-quickbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
    z-index: 990;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    box-shadow: 0 -2px 10px rgba(var(--shadow-rgb), 0.05);
}

.quickbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: var(--tap-target-min);
    padding: 4px 2px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}

/* Labels truncate rather than widen their column. */
.quickbar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quickbar-item i {
    font-size: 17px;
}

.quickbar-item.active {
    color: var(--primary);
}

.quickbar-item.whatsapp-highlight {
    color: var(--whatsapp);
}

/* =========================================================
   Interactive Booking Modal Component
   ========================================================= */
.booking-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-scrim);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

.booking-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.booking-modal-dialog {
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    display: flex;
    transform: scale(0.96);
    transition: var(--transition-smooth);
}

.booking-modal-backdrop.active .booking-modal-dialog {
    transform: scale(1);
}

.booking-modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-modal);
}

.modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--bg-surface-subtle);
}

.modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-light);
    color: var(--primary);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.modal-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.btn-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.btn-modal-close:hover {
    color: var(--text-primary);
}

.modal-body-scroll {
    padding: var(--space-6);
    overflow-y: auto;
    max-height: 60vh;
}

.selected-car-summary-bar {
    background: var(--primary-light);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}

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

.summary-car-meta h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.rate-val {
    font-size: 20px;
    font-weight: 900;
    color: var(--primary);
}

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

.modal-section-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.modal-form-grid .form-group.full-width {
    grid-column: span 2;
}

.price-calc-strip {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calc-col {
    display: flex;
    flex-direction: column;
}

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

.calc-val {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.calc-val-total {
    font-size: 19px;
    font-weight: 900;
    color: var(--primary);
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: var(--space-3);
    background: var(--bg-surface-subtle);
}

.flex-1 {
    flex: 1;
}

/* =========================================================
   Booking Flow Page (book.php)
   ========================================================= */
.booking-flow-section {
    padding-bottom: var(--space-20);
}

.booking-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr);
    gap: var(--space-8);
    align-items: flex-start;
}

.booking-step-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    position: relative;
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-6);
}

.step-badge-num {
    position: absolute;
    top: var(--space-6);
    left: var(--space-6);
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 800;
    font-size: 14px;
}

html[dir="ltr"] .step-badge-num {
    left: auto;
    right: var(--space-6);
}

.step-box-header {
    margin-bottom: var(--space-5);
}

.step-box-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.step-box-header p {
    font-size: 13px;
    color: var(--text-muted);
}

.form-grid-booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.form-grid-booking .form-group.full-width {
    grid-column: span 2;
}

/* Extras Selection */
.extras-selection-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.extra-checkbox-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    transition: var(--transition-fast);
}

.extra-checkbox-card:hover {
    border-color: var(--primary-soft);
    background: var(--bg-surface-subtle);
}

.extra-check-box input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
}

.extra-info {
    flex: 1;
}

.extra-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.extra-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.extra-price-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
}

.extra-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Sticky Booking Summary Card */
.summary-sticky-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 90px;
}

.selected-car-visual-box {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-4);
}

.selected-car-visual-box img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.visual-meta {
    padding: var(--space-3);
}

.visual-meta h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.mini-specs {
    display: flex;
    gap: var(--space-3);
    font-size: 11.5px;
    color: var(--text-muted);
}

.summary-breakdown-box {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-4);
}

.breakdown-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.breakdown-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.breakdown-list li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
}

.breakdown-list li strong {
    color: var(--text-primary);
}

.breakdown-list li.deposit-item {
    border-top: 1px dashed var(--border-subtle);
    padding-top: 6px;
    color: var(--warning);
}

.breakdown-list li.deposit-item strong {
    color: var(--warning);
}

.grand-total-strip {
    background: var(--primary-light);
    border: 1px solid var(--primary-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-top: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grand-label span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.grand-label small {
    font-size: 11px;
    color: var(--text-muted);
}

.grand-amount {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary);
}

.summary-whatsapp-help {
    background: var(--whatsapp-light);
    border: 1px solid var(--whatsapp-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 12px;
    margin-top: var(--space-4);
}

.summary-whatsapp-help i {
    font-size: 20px;
    color: var(--whatsapp);
}

.summary-whatsapp-help a {
    color: var(--whatsapp);
    font-weight: 800;
}

/* =========================================================
   Confirmation Page (booking-confirmation.php)
   ========================================================= */
.confirmation-section {
    padding: var(--space-8) 0 var(--space-16) 0;
}

.confirmation-wrapper {
    max-width: 920px;
    margin: 0 auto;
}

.confirmation-hero-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-8);
}

.conf-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--success-light);
    border: 2px solid var(--success-border);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto var(--space-4) auto;
}

.conf-title {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.conf-subtitle {
    font-size: 14.5px;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto var(--space-6) auto;
}

.reference-banner-box {
    background: var(--bg-surface-subtle);
    border: 2px dashed var(--primary-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--space-6);
}

.ref-label {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.ref-code-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ref-code {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: 2px;
}

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

.conf-actions-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.conf-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.conf-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
}

.conf-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
}

.conf-card-header h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.conf-car-preview {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.conf-car-preview img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-subtle);
}

.conf-car-meta h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.mini-tags {
    display: flex;
    gap: var(--space-2);
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Timeline itinerary */
.itinerary-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
    padding-right: var(--space-5);
}

html[dir="ltr"] .itinerary-timeline {
    padding-right: 0;
    padding-left: var(--space-5);
}

.itinerary-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 5px;
    width: 2px;
    background: var(--border-subtle);
}

html[dir="ltr"] .itinerary-timeline::before {
    right: auto;
    left: 5px;
}

.timeline-step {
    position: relative;
}

.step-marker {
    position: absolute;
    top: 4px;
    right: -20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

html[dir="ltr"] .step-marker {
    right: auto;
    left: -20px;
}

.step-marker.pickup {
    background: var(--success);
}

.step-marker.return {
    background: var(--warning);
}

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

.step-loc {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 700;
}

.step-time {
    font-size: 12px;
    color: var(--primary);
}

.conf-cost-list, .conf-info-table {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.conf-cost-list li, .conf-info-table li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
}

.conf-cost-list li strong, .conf-info-table li strong {
    color: var(--text-primary);
}

.conf-deposit-row {
    border-top: 1px dashed var(--border-subtle);
    padding-top: 6px;
    color: var(--warning) !important;
}

.conf-total-strip {
    background: var(--success-light);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conf-total-strip .lbl {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.conf-total-strip small {
    font-size: 11px;
    color: var(--text-muted);
}

.conf-total-strip .val {
    font-size: 20px;
    font-weight: 900;
    color: var(--success);
}

.conf-next-steps-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
}

.conf-next-steps-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.next-step-item {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.next-step-item .num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: var(--space-2);
}

.next-step-item h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.next-step-item p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =========================================================
   Multilingual System (Language Dropdown & Segments)
   ========================================================= */
.lang-switcher-wrap {
    position: relative;
    display: inline-block;
}

.lang-switcher-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-fast);
}

.lang-switcher-btn:hover {
    color: var(--primary);
    border-color: var(--border-hover);
}

.lang-flag {
    font-size: 14px;
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    /* The switcher sits at the inline-end of the header row, so the panel must
       open inward. In RTL the action group is on the left, so it grows right. */
    left: 0;
    right: auto;
    min-width: 150px;
    max-width: calc(100vw - var(--space-8));
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: var(--shadow-modal);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: var(--transition-fast);
    z-index: 1200;
}

/* In LTR the switcher sits at the right edge of the header, so align the
   panel's right edge to it and let it grow leftward, back into the viewport. */
html[dir="ltr"] .lang-dropdown-menu {
    left: auto;
    right: 0;
}

.lang-switcher-wrap:hover .lang-dropdown-menu,
.lang-switcher-wrap.active .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.lang-option-link:hover {
    background: var(--bg-surface-subtle);
    color: var(--primary);
}

.lang-option-link.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
}

.mobile-lang-segmented {
    display: flex;
    gap: 4px;
    background: var(--bg-surface-subtle);
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    margin-bottom: var(--space-5);
}

.mobile-lang-btn {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mobile-lang-btn:hover {
    color: var(--text-primary);
}

.mobile-lang-btn.active {
    background: var(--primary);
    color: var(--white);
}

/* =========================================================
   Responsive Media Queries (360px to 1440px)
   ========================================================= */
@media (max-width: 1200px) {
    .booking-fields-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    }
}

@media (max-width: 1080px) {
    .booking-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .booking-field-action {
        grid-column: 1 / -1;
    }
    .large-cars-grid, .categories-cards-grid, .why-us-cards-grid, .values-grid, .offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-columns, .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .car-showcase-grid, .booking-flow-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .pricing-sticky-card, .summary-sticky-card {
        position: static;
    }
}

@media (max-width: 860px) {
    .desktop-nav {
        display: none;
    }
    .btn-mobile-toggle {
        display: flex;
    }
    .mobile-bottom-quickbar {
        display: grid;
    }
    body {
        /* Reserve exactly the height of the fixed quick bar (plus the iOS home
           indicator inset) so the last section is never hidden behind it. */
        padding-bottom: calc(var(--quickbar-height) + env(safe-area-inset-bottom, 0px));
    }
    .d-none-mobile {
        display: none !important;
    }
    /* Mobile header carries only the brand and the burger; the language
       switcher, WhatsApp and booking CTAs all live inside the drawer. */
    .main-glass-header .lang-switcher-wrap {
        display: none;
    }
    .header-container {
        padding: 8px var(--space-4);
    }
    .search-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .filter-form {
        grid-template-columns: minmax(0, 1fr);
    }
    .airports-inner-card, .cta-glass-card, .about-grid-content, .contact-grid, .conf-details-grid, .next-steps-grid {
        grid-template-columns: minmax(0, 1fr);
        flex-direction: column;
    }
    .fleet-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

@media (max-width: 640px) {
    .hero-floating-booking-wrap {
        margin-top: -24px;
        margin-bottom: var(--space-8);
    }
    .floating-booking-card {
        padding: 20px 16px;
        border-radius: var(--radius-xl);
    }
    .booking-fields-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .large-cars-grid, .categories-cards-grid, .why-us-cards-grid, .values-grid, .offers-grid, .testimonials-cards-grid, .footer-columns, .features-grid, .detailed-specs-grid, .conditions-list-grid, .form-grid-contact, .modal-form-grid, .stats-glass-matrix, .form-grid-booking {
        grid-template-columns: minmax(0, 1fr);
    }
    .top-announcement-bar {
        display: none;
    }
    .main-glass-header {
        top: 6px;
    }
    .modal-footer {
        flex-direction: column;
    }
    .main-gallery-view {
        height: 250px;
    }
    .faq-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom-strip {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
    .ref-code {
        font-size: 20px;
    }
    /* 32px of card padding on each side costs a fifth of a 320px screen. */
    .contact-luxury-card, .form-luxury-card {
        padding: var(--space-5);
    }
}

@media (max-width: 430px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .hero-search-card {
        padding: var(--space-4) !important;
    }
    .car-card-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .car-actions {
        width: 100%;
        justify-content: space-between;
    }
    .car-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* =========================================================
   Authentication Portal (admin/login.php)
   ========================================================= */
.auth-page-body {
    background-color: var(--bg-page);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.auth-wrapper {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-card);
}

.auth-lang-pills {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.auth-lang-pill {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: var(--bg-surface-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-fast);
}

.auth-lang-pill:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.auth-lang-pill.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-logo {
    width: 52px;
    height: 52px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto var(--space-3) auto;
}

.auth-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.auth-header p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 0;
}

.auth-footer {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.auth-footer a {
    color: var(--text-muted);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.auth-footer a:hover {
    color: var(--primary);
}

/* Alert Boxes */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.alert-danger {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.alert-success {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.alert-warning {
    background: var(--warning-light);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

/* Margin Utilities */
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }

/* Sticky Mobile Booking Bottom Bar
   It used to rely on `d-block d-md-none` utility classes that this stylesheet
   never defined, so it stayed visible on desktop with nothing reserving space
   for it. Visibility is now owned by the component and tied to the same
   breakpoint as the global quick bar, above which it stacks. */
.sticky-mobile-booking-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-5);
    z-index: 999;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--booking-bar-height);
    box-shadow: 0 -4px 16px rgba(var(--shadow-rgb), 0.06);
}

.sticky-mobile-booking-bar .car-info-mini {
    display: flex;
    flex-direction: column;
}

.sticky-mobile-booking-bar .car-info-mini strong {
    font-size: 13.5px;
    color: var(--text-primary);
}

.sticky-mobile-booking-bar .car-info-mini span {
    font-size: 12px;
    color: var(--primary);
    font-weight: 800;
}

.sticky-mobile-booking-bar .btn-sticky-book {
    min-height: var(--tap-target-min);
    padding: 10px var(--space-5);
    font-size: var(--text-sm);
    font-weight: 700;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    background-image: var(--gloss-face);
    color: var(--text-on-primary);
    border: 1px solid var(--indigo-950);
    white-space: nowrap;
    box-shadow: var(--shadow-primary), var(--gloss-edge-top);
}

/* Shown only where the global quick bar is shown, stacked directly above it.
   Declared after the component so it wins the cascade regardless of where the
   shared responsive block sits in this file. */
@media (max-width: 860px) {
    .sticky-mobile-booking-bar {
        display: flex;
        bottom: calc(var(--quickbar-height) + env(safe-area-inset-bottom, 0px));
    }

    /* Reserve the height of BOTH fixed bars, otherwise the grand total at the
       end of the summary sits underneath them. */
    body.has-booking-bar {
        padding-bottom: calc(var(--quickbar-height) + var(--booking-bar-height) + env(safe-area-inset-bottom, 0px));
    }
}


/* Skeleton Loading Shimmer Utility */
.skeleton-loader {
    background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 50%, var(--ink-100) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: var(--radius-xs);
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* =========================================================
   Date Picker (assets/js/datepicker.js)

   The native date control renders in the browser's locale, so "09/04/2026"
   was ambiguous between the French and US readings. This control always
   shows JJ/MM/AAAA and names the month in full inside the calendar.
   ========================================================= */
.atlas-dp {
    position: relative;
    width: 100%;
}

/* Date and time share a row while both fit at their natural size; below that
   the time drops to its own line rather than truncating to "10:". */
.atlas-dp__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
}

.atlas-dp__text {
    flex: 1 1 auto;
    min-width: 0;
}

.atlas-dp__time {
    flex: 1 1 7.8em;
    min-width: 7.8em;
}

/* The calendar glyph sits inside the field; the field itself is the trigger. */
.atlas-dp__field {
    position: relative;
    display: block;
    flex: 1 1 9.5em;
    min-width: 9.5em;
}

.atlas-dp__field .atlas-dp__text {
    width: 100%;
    padding-inline-end: 2rem;
}

.atlas-dp__icon {
    position: absolute;
    inset-inline-end: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85em;
    color: var(--color-primary);
    cursor: pointer;
}

.atlas-dp__text:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.atlas-dp__panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 1300;
    width: max-content;
    max-width: min(320px, calc(100vw - var(--space-8)));
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
}

.atlas-dp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.atlas-dp__title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.atlas-dp__nav {
    width: var(--tap-target-min);
    height: var(--tap-target-min);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.atlas-dp__nav:hover {
    background: var(--bg-surface-warm);
    color: var(--color-primary);
}

.atlas-dp__weekdays,
.atlas-dp__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.atlas-dp__weekdays span {
    text-align: center;
    padding: var(--space-1) 0;
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-muted);
}

.atlas-dp__day {
    aspect-ratio: 1;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: var(--transition-fast);
}

.atlas-dp__day:hover:not(:disabled) {
    background: var(--bg-surface-warm);
    color: var(--color-primary);
}

.atlas-dp__day:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.atlas-dp__day.is-today {
    border-color: var(--color-primary-subtle);
    color: var(--color-primary);
}

.atlas-dp__day.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
}

.atlas-dp__day:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

/* On the narrowest screens the panel is centred under the field rather than
   pinned to its start edge, so it cannot reach past the viewport. */
@media (max-width: 430px) {
    .atlas-dp__panel {
        inset-inline-start: 50%;
        transform: translateX(-50%);
    }
    html[dir="rtl"] .atlas-dp__panel {
        transform: translateX(50%);
    }
    .atlas-dp__day {
        min-width: 32px;
    }
}

/* Touch targets: the footer link lists, the social row and the breadcrumb
   were all below the 44px minimum on phones. */
@media (max-width: 860px) {
    .footer-links a,
    .footer-links-tags li,
    .contact-info-list a,
    .breadcrumb-nav a {
        min-height: var(--tap-target-min);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .brand-link,
    .site-luxury-footer .brand-link {
        min-height: var(--tap-target-min);
        align-items: center;
    }
}

.social-btn {
    width: var(--tap-target-min);
    height: var(--tap-target-min);
}

/* The discreet admin entry stays visually small but gets a full-size tap
   area around it — 13x21px was not reliably tappable. */
.admin-access-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-target-min);
    min-height: var(--tap-target-min);
}

/* =========================================================
   MOTION SYSTEM

   One vocabulary for the whole site, all of it on `transform` and
   `opacity` so nothing triggers layout or paint per frame:

     reveal      sections and cards rise into place once, on scroll
     stagger     siblings follow each other by a short beat
     elevation   surfaces lift a little under the cursor
     zoom        photography breathes inside its frame on hover
     sweep       a highlight travels across a polished control
     transition  panels and dialogs scale and fade rather than snap

   Everything here is suppressed under prefers-reduced-motion at the end
   of this block.
   ========================================================= */

/* --- Scroll reveal ------------------------------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Revealed by the safety sweep in app.js because the element was carried past
   the top of the viewport without ever being observed inside it. It is already
   behind the user, so it appears at once rather than animating on the way back
   up. This also wins over the stagger delays below. */
.reveal-on-scroll.is-revealed-instant {
    transition: none;
    transition-delay: 0s;
}

/* Siblings arrive in sequence rather than all at once. The delay is capped
   so a long grid never leaves the last card waiting.

   The delay lives on the REVEALED state, not on the element: a delay set
   on the element applies to every transition it ever runs, so the stagger
   was also postponing the hover lift by up to 0.28s and made the cards
   feel unresponsive. Hover rules below reset it to zero. */
.reveal-on-scroll.is-revealed:nth-child(2)  { transition-delay: 0.07s; }
.reveal-on-scroll.is-revealed:nth-child(3)  { transition-delay: 0.14s; }
.reveal-on-scroll.is-revealed:nth-child(4)  { transition-delay: 0.21s; }
.reveal-on-scroll.is-revealed:nth-child(5)  { transition-delay: 0.24s; }
.reveal-on-scroll.is-revealed:nth-child(n+6){ transition-delay: 0.28s; }

/* Once revealed, drop the compositor hint so idle cards cost nothing. */
.reveal-on-scroll.is-revealed {
    will-change: auto;
}

/* --- Card elevation ------------------------------------------------ */
.luxury-car-card,
.category-luxury-card,
.offer-card,
.testi-card,
.why-us-card {
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-fast) var(--ease-in-out);
}

.luxury-car-card:hover,
.category-luxury-card:hover,
.offer-card:hover,
.testi-card:hover,
.why-us-card:hover {
    transition-delay: 0s;
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-hover);
}

/* A single lime hairline along the top edge on hover: the one decorative
   appears for a moment instead of colouring the whole card. */
.luxury-car-card::before,
.offer-card::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--lime-500) 50%,
        transparent 100%);
    opacity: 0;
    transform: scaleX(0.4);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
    pointer-events: none;
}

.luxury-car-card:hover::before,
.offer-card:hover::before {
    transition-delay: 0s;
    opacity: 1;
    transform: scaleX(1);
}

/* --- Image breathe inside its frame -------------------------------- */
.luxury-car-card .car-media__img,
.offer-card .car-media__img {
    transition: transform var(--dur-slow) var(--ease-out);
}

.luxury-car-card:hover .car-media__img,
.offer-card:hover .car-media__img {
    transition-delay: 0s;
    transform: scale(1.06);
}

/* --- Panels: dropdowns and drawers --------------------------------- */
.lang-dropdown-menu {
    transform: translate3d(0, -8px, 0) scale(0.98);
    transform-origin: top center;
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        visibility 0s linear var(--dur-fast);
}

.lang-switcher-wrap:hover .lang-dropdown-menu,
.lang-switcher-wrap.active .lang-dropdown-menu,
.lang-switcher-wrap:focus-within .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
}

/* --- Dialogs -------------------------------------------------------- */
.booking-modal-box {
    transform: translate3d(0, 12px, 0) scale(0.97);
    transition:
        transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
    opacity: 0;
}

.booking-modal-backdrop.active .booking-modal-box {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

/* --- Links and small controls -------------------------------------- */
.nav-link,
.footer-links a,
.quickbar-item,
.social-btn {
    transition:
        color var(--dur-fast) var(--ease-in-out),
        background-color var(--dur-fast) var(--ease-in-out),
        transform var(--dur-fast) var(--ease-out);
}

.social-btn:hover {
    transform: translate3d(0, -2px, 0);
}

/* --- Inputs --------------------------------------------------------- */
.form-control,
.admin-input,
.filter-input,
.filter-select,
.form-input-pill,
.atlas-dp__text {
    transition:
        border-color var(--dur-fast) var(--ease-in-out),
        box-shadow var(--dur-fast) var(--ease-in-out);
}

.form-control:focus,
.filter-input:focus,
.filter-select:focus,
.form-input-pill:focus,
.atlas-dp__text:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
}

/* ---------------------------------------------------------
   Motion is an enhancement. When the visitor asks for less of it,
   everything still arrives — it simply arrives already in place.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }

    .luxury-car-card:hover,
    .category-luxury-card:hover,
    .offer-card:hover,
    .testi-card:hover,
    .why-us-card:hover,
    .btn:hover,
    .social-btn:hover {
        transform: none;
    }

    .luxury-car-card:hover .car-media__img,
    .offer-card:hover .car-media__img {
        transform: none;
    }
}