/**
 * AtlasDrive — Moroccan Car Rental Platform
 *
 * Design language: Marrakech clay and gold. Warm earth tones, restrained
 * geometry, one accent per screen. Purple is retained only as a supporting
 * tone; green is reserved exclusively for WhatsApp.
 *
 * 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 — Aliases:    legacy names kept so existing rules keep working.
 * 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 component boundaries).
 */

:root {
    /* =========================================================
       LAYER 1 — PRIMITIVES (the only raw values in this file)
       ========================================================= */

    /* Clay — Marrakech terracotta. The brand's primary hue. */
    --clay-50:  #FDF6F2;
    --clay-100: #F9E7DE;
    --clay-200: #F0CFC0;
    --clay-300: #E0A88C;
    --clay-400: #CC7F5C;
    --clay-500: #B85F38;
    --clay-600: #A8452A;   /* Primary surface — white text = 5.92:1 */
    --clay-700: #8A3822;   /* Hover                        = 7.87:1 */
    --clay-800: #6B2C1C;   /* Active                       = 10.49:1 */
    --clay-900: #3F1D14;   /* Deep ground for dark sections */

    /* Gold — detailing only: hairlines, marks, on dark grounds. */
    --gold-300: #E8C87A;
    --gold-400: #D3A54A;
    --gold-500: #B08430;
    --gold-600: #8A6725;   /* The only gold safe as body text on white */

    /* Plum — demoted from primary to a supporting accent. */
    --plum-50:  #F7F3F9;
    --plum-100: #EDE4F1;
    --plum-600: #6B4380;
    --plum-700: #553067;
    --plum-800: #3E2350;

    /* Ink — warm neutrals for text (browns, not blue-greys). */
    --ink-900: #231710;
    --ink-800: #3A2A20;
    --ink-700: #4E3C31;
    --ink-600: #6A564A;
    --ink-500: #79655A;

    /* Sand — warm neutrals for grounds and borders. */
    --sand-50:  #FBF8F5;
    --sand-100: #F5EFE8;
    --sand-200: #E8DCD1;
    --sand-300: #D8C7B8;
    --sand-400: #948070;   /* Control boundaries — 3.76:1 on white */

    --white: #FFFFFF;

    /* WhatsApp — this green is reserved for WhatsApp and nothing else. */
    --wa-50:   #F0FDF4;
    --wa-200:  #BBF7D0;
    --wa-400:  #22C55E;    /* WhatsApp on dark grounds — 6.60:1 on clay-900 */
    --wa-600:  #15803D;    /* white text = 5.02:1 (brand #25D366 fails AA) */
    --wa-700:  #116631;

    /* Status */
    --red-50:    #FDF3F2;
    --red-200:   #F4CFCB;
    --red-600:   #B4231D;
    --amber-50:  #FBF6EA;
    --amber-200: #EEDCB0;
    --amber-600: #8A5A10;

    /* Shadow ink — warm, so shadows sit in the palette rather than on it. */
    --shadow-rgb: 63, 29, 20;

    /* Stencil colour for mask-image: an alpha keep-value, not a paint colour. */
    --mask-opaque: #000;

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

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

    --color-accent:         var(--gold-500);   /* decoration */
    --color-accent-text:    var(--gold-600);   /* AA-safe as text */
    --color-secondary:      var(--plum-700);
    --color-secondary-soft: var(--plum-50);

    /* -- Surfaces --------------------------------------------- */
    --bg-page:           var(--sand-50);
    --bg-surface:        var(--white);
    --bg-surface-subtle: var(--sand-100);
    --bg-surface-warm:   var(--clay-50);
    --bg-inverse:        var(--clay-900);
    --bg-input:          var(--white);
    --bg-glass:          rgba(255, 255, 255, 0.94);
    --bg-scrim:          rgba(35, 23, 16, 0.55);

    /* -- Borders ---------------------------------------------- */
    --border-subtle:  var(--sand-200);   /* decorative hairlines */
    --border-hover:   var(--sand-300);
    --border-control: var(--sand-400);   /* inputs — must stay >= 3:1 */
    --border-focus:   var(--color-primary);
    --border-inverse: rgba(255, 255, 255, 0.16);

    /* -- Text -------------------------------------------------- */
    --text-primary:   var(--ink-900);
    --text-secondary: var(--ink-700);
    --text-muted:     var(--ink-500);
    --text-accent:    var(--color-primary);
    --text-on-primary: var(--white);
    --text-inverse:   var(--sand-100);
    --text-inverse-muted: var(--sand-300);

    /* -- Status ------------------------------------------------
       "Positive" (available, included, confirmed) is deliberately NOT green.
       Green belongs to WhatsApp alone, so a green tick would read as a
       WhatsApp cue. Positive states use the brand clay in its tinted,
       non-interactive form; buttons stay distinguishable because they are
       filled, not merely coloured. */
    --positive:        var(--clay-700);
    --positive-light:  var(--clay-50);
    --positive-border: var(--clay-200);
    --success:        var(--positive);          /* legacy alias */
    --success-light:  var(--positive-light);
    --success-border: var(--positive-border);
    --whatsapp:        var(--wa-600);
    --whatsapp-on-dark: var(--wa-400);
    --whatsapp-hover:  var(--wa-700);
    --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);

    /* =========================================================
       TYPOGRAPHY
       Fraunces / Reem Kufi carry the headings; Plus Jakarta Sans
       and Cairo stay on body copy where readability rules.
       ========================================================= */
    --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 — tightened from the previous 6–24px range.
       Nothing structural exceeds 12px any more.
       ========================================================= */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 9999px;   /* dots and avatars only */

    /* =========================================================
       ELEVATION — warm-tinted, low and quiet.
       ========================================================= */
    --shadow-xs:   0 1px 2px rgba(var(--shadow-rgb), 0.05);
    --shadow-sm:   0 1px 2px rgba(var(--shadow-rgb), 0.05), 0 2px 6px rgba(var(--shadow-rgb), 0.04);
    --shadow-card: 0 2px 4px rgba(var(--shadow-rgb), 0.04), 0 6px 16px -4px rgba(var(--shadow-rgb), 0.07);
    --shadow-card-hover: 0 4px 8px rgba(var(--shadow-rgb), 0.05), 0 14px 28px -8px rgba(var(--shadow-rgb), 0.12);
    --shadow-hover: var(--shadow-card-hover);
    --shadow-modal: 0 20px 44px -12px rgba(var(--shadow-rgb), 0.22), 0 0 0 1px var(--sand-200);
    --shadow-primary: 0 4px 12px rgba(168, 69, 42, 0.24);
    --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);

    /* The "live availability" marker. Gold, not green — green is WhatsApp only. */
    --pulse-ring: rgba(211, 165, 74, 0.65);
    --pulse-ring-halo: rgba(211, 165, 74, 0.28);
    --pulse-ring-fade: rgba(211, 165, 74, 0);
    --surface-inverse-raised: rgba(255, 255, 255, 0.07);

    /* =========================================================
       MOTION
       ========================================================= */
    --transition-fast:   all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);

    /* =========================================================
       LAYOUT METRICS
       ========================================================= */
    --quickbar-height: 64px;      /* fixed mobile bottom navigation */
    --booking-bar-height: 68px;   /* book.php fixed bottom action bar */
    --tap-target-min: 44px;     /* WCAG 2.5.8 minimum touch target */
    --container-max: 1240px;

    /* Every vehicle photograph is presented in this one ratio. */
    --ratio-media: 16 / 10;
    --media-skeleton-from: var(--sand-100);
    --media-skeleton-to: var(--sand-200);

    /* =========================================================
       LAYER 3 — LEGACY ALIASES
       Older rules across this file still reference these names.
       They now resolve to the clay system; the purple-named ones are
       kept so nothing breaks, but they no longer point at purple.
       ========================================================= */
    --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(168, 69, 42, 0.14);
    --color-primary-glow-heavy: rgba(168, 69, 42, 0.24);

    --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(168, 69, 42, 0.22);

    --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);

    /* Formerly the purple brand ramp — now the clay ramp. */
    --purple-primary: var(--color-primary);
    --purple-hover: var(--color-primary-hover);
    --purple-active: var(--color-primary-active);
    --purple-light: var(--color-primary-light);
    --purple-soft: var(--color-primary-soft);
    --purple-border: var(--color-primary-subtle);
    --purple-glow: var(--color-primary-glow);

    --success-hover: var(--clay-800);
    --success-glow: rgba(21, 128, 61, 0.12);
    --whatsapp-glow: rgba(21, 128, 61, 0.14);
    --shadow-glow-purple: var(--shadow-primary);
    --shadow-glow-blue: var(--shadow-primary);
}

/* Arabic headings use a geometric Kufic face — the same geometry that drives
   the zellige divider. Body copy stays on Cairo for reading comfort. */
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(--gold-500);
    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: 42px;
    width: auto;
    max-width: min(220px, 100%);
    object-fit: contain;
}

.drawer-logo-img {
    height: 36px;
    width: auto;
    max-width: min(180px, 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 clay button
   ("the primary") is allowed per screen.

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

   .btn-primary-glow, .btn-outline-glow and .btn-secondary-glass are kept as
   aliases of these tiers so existing markup keeps working; the gradients and
   pill shapes they used to carry are gone.
   ========================================================= */
.btn {
    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;
    transition: var(--transition-fast);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: translateY(0);
}

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

.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: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-md);
    padding: 10px var(--space-5);
    box-shadow: var(--shadow-primary), var(--shadow-inset-top);
}

.btn-primary:hover:not(:disabled),
.btn-primary-glow:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--text-on-primary);
}

.btn-primary:active:not(:disabled),
.btn-primary-glow:active:not(:disabled) {
    background: var(--color-primary-active);
    border-color: var(--color-primary-active);
    box-shadow: none;
}

/* --- Tier 2: outlined, sits next to the primary without competing ---- */
.btn-secondary,
.btn-secondary-glass,
.btn-outline-glow {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    padding: 10px var(--space-5);
    box-shadow: none;
}

.btn-secondary:hover,
.btn-secondary-glass:hover,
.btn-outline-glow:hover {
    background: var(--bg-surface-warm);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* --- Responsive hierarchy: the hero CTA -----------------------------
   Which control is "the" primary depends on what else is on screen.
   On phones the booking widget sits far below the fold, so the hero link
   carries the primary treatment. From tablet up the widget is visible in
   the same view, so its submit takes the primary role and the hero link
   steps back — leaving exactly one filled clay button per screen. */
.btn-hero-cta {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary), var(--shadow-inset-top);
}

.btn-hero-cta:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--text-on-primary);
}

@media (min-width: 861px) {
    .btn-hero-cta {
        background: var(--bg-surface);
        color: var(--text-primary);
        border-color: var(--border-control);
        box-shadow: none;
    }
    .btn-hero-cta:hover {
        background: var(--bg-surface-warm);
        color: var(--color-primary);
        border-color: var(--color-primary);
    }
}

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

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

/* --- WhatsApp: the one place green is allowed -----------------------
   Outlined by default so it never competes with the clay primary; the
   green lives in the icon and the border, and the fill is only used
   where WhatsApp *is* the main action (see .btn-whatsapp-fill). */
.btn-whatsapp,
.btn-whatsapp-pill,
.btn-whatsapp-large {
    background: 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);
    transition: var(--transition-fast);
}

.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: var(--whatsapp-light);
    color: var(--whatsapp-hover);
    border-color: var(--whatsapp);
}

.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: var(--whatsapp);
    color: var(--white);
    border-color: var(--whatsapp);
}

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

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

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

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

.btn-danger:hover {
    background: 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)
   ========================================================= */
.ultra-hero-section {
    position: relative;
    /* A new stacking context, so the ornament layers can never escape the
       hero or interleave with the sticky header. */
    isolation: isolate;
    padding: 96px 0 80px 0;
    background-color: var(--bg-inverse);
    overflow: hidden;
}

/* ---------------------------------------------------------
   SIGNATURE — animated zellige.

   Two tiled khatem layers drifting diagonally at different speeds read as
   depth. Only `transform` is animated (translate3d, compositor-only): no
   background-position, no top/left, so there is no layout or paint work per
   frame. The travel distance of each layer equals exactly one tile, which is
   what makes the loop seamless.

   inset:-20% oversizes each layer so no edge can enter the frame mid-drift;
   the hero's overflow:hidden clips the excess, so it cannot widen the page.
   --------------------------------------------------------- */
.zellige {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background-repeat: repeat;
    will-change: transform;
}

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

.zellige--front {
    background-image: url("../images/zellige-110.svg");
    background-size: 110px 110px;
    opacity: 0.30;
    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); }
}

/* Mirror the horizontal component so the drift follows the reading
   direction; the vertical component is unchanged. */
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); }
}

/* Fixed scrim between ornament and copy. Verified against the brightest
   frame of the cycle (a gold stroke from both layers on the same pixel):
   white 10.77:1, sand-100 9.43:1, sand-300 6.56:1, gold-300 6.65:1. */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: var(--bg-inverse);
    opacity: 0.45;
}

.hero__content {
    position: relative;
    z-index: 2;
}

/* Phones: drop the far layer entirely and slow the near one down. One
   compositor layer instead of two, and a calmer surface on a small screen. */
@media (max-width: 768px) {
    .zellige--back {
        display: none;
    }
    .zellige--front {
        opacity: 0.22;
        animation-duration: 60s;
    }
}

/* Motion is supplementary: without it the pattern simply stands still. */
@media (prefers-reduced-motion: reduce) {
    .zellige {
        animation: none;
    }
}

/* ---------------------------------------------------------
   Hero copy on the dark ground.
   The section used to sit on a light surface. Measured against the worst
   frame, a 0.45 veil over a light base fails AA (4.05:1 for white text),
   so the hero ground is --clay-900 and the copy inverts.
   --------------------------------------------------------- */
.ultra-hero-section .hero-headline {
    color: var(--white);
}

.ultra-hero-section .hero-subheadline {
    color: var(--text-inverse);
}

.ultra-hero-section .hero-pill-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-inverse);
    color: var(--gold-300);
    box-shadow: none;
}

.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(--gold-300) !important;
}

.ultra-hero-section .hero-trust-badges {
    border-top-color: var(--border-inverse);
}

/* 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: rgba(255, 255, 255, 0.06);
    border-color: var(--border-inverse);
    color: var(--wa-400);
}

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

.ultra-hero-section .btn-whatsapp-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--wa-400);
    color: var(--wa-400);
}

@media (min-width: 861px) {
    .ultra-hero-section .btn-hero-cta {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--border-inverse);
        color: var(--white);
    }
    .ultra-hero-section .btn-hero-cta:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: var(--gold-300);
        color: var(--white);
    }
}


.hero-container {
    position: relative;
    z-index: 1;
}

.hero-grid-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-10);
    align-items: center;
}

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

html[dir="ltr"] .hero-content {
    text-align: left;
}

.hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-4);
    box-shadow: 0 2px 6px rgba(var(--shadow-rgb), 0.04);
}

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

.hero-headline {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

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

.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;
    align-items: center;
    gap: 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: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.trust-badge-item i {
    font-size: 16px;
}

/* Hero Car Visual Stage */
.hero-visual-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-car-stage {
    position: relative;
    width: 100%;
    max-width: 620px;
    filter: drop-shadow(0 25px 30px rgba(var(--shadow-rgb), 0.16));
    transition: transform 0.4s ease;
}

.hero-car-stage:hover {
    transform: translateY(-4px);
}

.hero-featured-car-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
}

/* =========================================================
   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(--sand-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: var(--color-primary);
    color: var(--text-on-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    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(--shadow-inset-top);
    transition: var(--transition-fast);
}

.btn-booking-search:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.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(--gold-500);
}

/* 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;
    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(--gold-300);
}

.site-luxury-footer .text-primary,
.site-luxury-footer .text-accent {
    color: var(--clay-300) !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(--gold-300) !important;
}

.site-luxury-footer .text-warning {
    color: var(--gold-300) !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(--gold-300);
    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(--sand-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(--gold-300);
    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(--sand-300);
}

.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) {
    .hero-grid-showcase {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }
    .hero-visual-showcase {
        display: flex;
        justify-content: center;
    }
    .hero-car-stage {
        max-width: 520px;
    }
    .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) {
    .ultra-hero-section {
        padding: 64px 0 40px 0;
    }
    .hero-headline {
        font-size: 28px;
    }
    .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: var(--color-primary);
    color: var(--text-on-primary);
    border: 1px solid var(--color-primary);
    white-space: nowrap;
    box-shadow: var(--shadow-primary);
}

/* 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));
    }
}

/* Scroll Reveal Utility */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Skeleton Loading Shimmer Utility */
.skeleton-loader {
    background: linear-gradient(90deg, var(--sand-100) 25%, var(--sand-200) 50%, var(--sand-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);
}