/* ============================================================
   DriveHub — design tokens
   ============================================================ */
:root {
    --ink: #0D0F17;
    --ink-soft: #2C3044;
    --paper: #F4F5F7;
    --panel: #FFFFFF;
    --red: #E63946;
    --red-dark: #C62839;
    --steel: #192038;
    --grey: #878E9E;
    --line: #DDE0E8;
    --green: #1E8E5A;
    --amber: #C97A1E;
    --radius: 6px;
    --radius-sm: 3px;
    --shadow: 0 2px 12px -2px rgba(13,15,23,0.10), 0 1px 4px rgba(13,15,23,0.07);
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ── Dark mode — override colour tokens when data-color-mode="dark" ─────────
   The head inline script sets this attribute from localStorage before CSS
   loads (no flash). The mobile-menu Light/Dark/Auto buttons use setAppearance()
   in app.js to toggle the attribute at runtime. Admin-specific dark-mode rules
   that need to survive a light-mode body stay in their own selectors below. */
html[data-color-mode="dark"] {
    --ink:      #E6E9F4;
    --ink-soft: #8D95AF;
    --paper:    #0D0F17;
    --panel:    #15171F;
    --line:     #262836;
    --grey:     #7A8099;
    --shadow:   0 2px 16px -2px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
}

/* ── RTL / Arabic-script language font override ───────────────────────────
   When the page is in RTL mode (Kurdish ckb, Arabic ar, etc.) Plus Jakarta
   Sans has no glyphs for the script — the browser falls back to a tiny system
   font. Overriding the CSS custom properties here means every element that uses
   var(--font-display) or var(--font-body) inherits the right font automatically
   — no per-element overrides needed.

   Font hierarchy:
   • Zain 700/800      — display/heading (thick strokes, strong weight)
   • Noto Naskh Arabic — body text (highly legible at small sizes)
   • Rubik             — multi-script fallback covering Latin + Arabic
   ─────────────────────────────────────────────────────────────────────── */
[dir="rtl"] {
    --font-display: 'Zain', 'Noto Naskh Arabic', 'Rubik', system-ui, sans-serif;
    --font-body:    'Noto Naskh Arabic', 'Zain', 'Rubik', system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* Prevent display-property CSS rules from accidentally overriding [hidden] */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Base headings — Latin */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 .4em; line-height: 1.15; letter-spacing: -0.01em; }
/* LTR h1/h2: Plus Jakarta Sans ExtraBold (800) for heavy display impact */
[dir="ltr"] h1 { font-weight: 800; letter-spacing: -0.025em; }
[dir="ltr"] h2 { font-weight: 800; letter-spacing: -0.02em; }

/* RTL headings: Arabic/Kurdish script looks lighter at the same weight as
   Latin; use weight 800, clear the Latin-only negative letter-spacing, and
   open up the line-height (Arabic descenders/ascenders need more room). */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 { font-weight: 800; letter-spacing: 0; line-height: 1.35; }
p { margin: 0 0 1em; }
.muted { color: var(--grey); }
/* ============================================================
   Spacing system — edge clearance rules
   Industry standard: nothing touches a device edge.
   ① .wrap gives 20 px left/right on all elements automatically.
   ② env(safe-area-inset-*) adds the device's own notch/home-bar
     clearance on top of our own padding — applied to any element
     that sits at the physical edge of the screen (footer, sticky
     bars, full-screen overlays).
   ③ On iPhones with a home indicator the bottom inset is 34 px;
     we add our own breathing room on top, never below it.
   ④ This file must never use padding: 0 on an element that can
     reach a screen edge without a .wrap ancestor.
   ============================================================ */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Horizontal safe-area: handles landscape notched phones where the
   physical edge inset can be up to 44 px. max() ensures we never
   drop below our own 20 px minimum even on non-notched devices.  */
@supports (padding: env(safe-area-inset-left)) {
    .wrap {
        padding-inline-start: max(20px, env(safe-area-inset-left));
        padding-inline-end:   max(20px, env(safe-area-inset-right));
    }
}
:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid { background: var(--red); color: #fff; box-shadow: 0 2px 10px -2px rgba(230,57,70,0.45); }
.btn-solid:hover { background: var(--red-dark); box-shadow: 0 4px 16px -2px rgba(230,57,70,0.55); }
/* Outlined variant used inside the dark hero band — white border/text */
.btn-outline-hero { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-outline-hero:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-dark { background: #14151A; color: #fff; }
.btn-dark:hover { background: #2A2C34; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-line { background: transparent; color: var(--grey); border-color: transparent; }
.btn-line:hover { color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform:none; }

/* ============================================================
   Header / nav
   ============================================================ */
/* ------------------------------------------------------------------------
   "Hairline" header concept: no boxes, no pills — just generous negative
   space and 1px rules doing all the work. Nav links get an underline that
   draws in from the left on hover instead of a colour swap, and the whole
   bar quietly gains depth once you've scrolled past it (see .is-scrolled,
   toggled in app.js) rather than carrying a shadow at rest.
   ------------------------------------------------------------------------ */
.site-header {
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(20,21,26,0.35); }
/* The blur/tint lives on a pseudo-element rather than the header itself:
   backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants, which broke the full-viewport mobile nav
   panel (it was clipping to the header box instead of the screen). */
.site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(244,245,247,0.82);
    backdrop-filter: blur(14px) saturate(1.4);
    transition: background .25s ease;
}
html[data-color-mode="dark"] .site-header::before { background: rgba(22,23,28,0.78); }
.site-header.is-scrolled::before { background: rgba(244,245,247,0.96); }
html[data-color-mode="dark"] .site-header.is-scrolled::before { background: rgba(22,23,28,0.94); }

/* justify-content:flex-start (not space-between) — with only 2 children
   (brand, nav), space-between would stretch a single big gap between the
   logo and the nav links, making the links float mid-header instead of
   reading as a left-anchored menu. margin-inline-end on .brand supplies
   the fixed gap instead; .nav-end-cluster below pushes lang/auth to the
   true right edge via margin-inline-start:auto. */
.header-inner { display: flex; align-items: center; justify-content: flex-start; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; margin-inline-end: 40px; font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.01em; }
/* RTL brand: Arabic/Kurdish glyphs are narrower at 1rem — scale up and
   strip the Latin letter-spacing tightening so the name reads clearly. */
[dir="rtl"] .brand { font-size: 1.2rem; letter-spacing: 0; font-weight: 700; }
.brand-mark {
    width: 32px; height: 32px; border-radius: 8px;
    /* Deep midnight-blue gradient — premium automotive night feel,
       distinct from pure black and visible on both light and dark nav bars */
    background: linear-gradient(145deg, #0B1728 0%, #112240 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em;
    transition: transform .2s ease;
}
.brand:hover .brand-mark { transform: rotate(-6deg); }
.brand-name strong { color: var(--red); }
.main-nav { display: flex; align-items: center; gap: 26px; flex: 1; min-width: 0; }
/* Mobile-drawer-only elements — hidden on desktop, revealed in ≤640px block */
.nav-brand-row { display: none; }
.nav-close-ic  { display: none; }
.ni-icon       { display: none; }
.ni-chevron    { display: none; }
.main-nav a:not(.btn) {
    position: relative; font-weight: 500; font-size: 0.88rem; letter-spacing: 0.01em; color: var(--ink-soft);
    padding-block: 2px;
}
.main-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px;
    background: var(--red); transition: right .22s ease;
}
.main-nav a:not(.btn):hover { color: var(--ink); }
.main-nav a:not(.btn):hover::after { right: 0; }

.nav-links-group { display: flex; align-items: center; gap: 26px; }
/* Language + auth actions grouped and pushed flush to the header's right
   edge, independent of how wide the nav links are. */
.nav-end-cluster { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.mob-utils { display: none; } /* mobile drawer only */
.nav-utility { display: flex; align-items: center; gap: 8px; }
.nav-auth-group { display: flex; align-items: center; gap: 8px; }

/* ── Desktop nav icon button (theme toggle) ─────────────────────── */
.nav-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; padding: 0;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink-soft); cursor: pointer; text-decoration: none; flex-shrink: 0;
    transition: color .15s, border-color .15s;
}
.nav-icon-btn:hover { color: var(--ink); border-color: var(--ink-soft); }

/* Moon/sun icon states (initial state before JS runs = show moon) */
.nav-icon-btn.js-color-mode-toggle .icon-moon { display: flex; }
.nav-icon-btn.js-color-mode-toggle .icon-sun  { display: none; }
.nav-icon-btn.js-color-mode-toggle[data-mode-choice="dark"] .icon-moon { display: none; }
.nav-icon-btn.js-color-mode-toggle[data-mode-choice="dark"] .icon-sun  { display: flex; }

/* ── Auth buttons — icon-only on desktop, full-width on mobile ────── */
.nav-auth-btn {
    width: 36px !important; height: 36px !important;
    padding: 0 !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0; gap: 0 !important;
}
.nav-auth-lbl { display: none; }
.nav-auth-ic  { flex-shrink: 0; }

/* ── Logged-in user pill ─────────────────────────────────────────── */
.nav-user-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); text-decoration: none; white-space: nowrap;
    transition: border-color .15s;
}
.nav-user-pill:hover { border-color: var(--ink-soft); }
.nav-user-av {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--red); color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-weight: 700; font-size: 0.82rem;
}
.nav-user-lbl { font-size: 0.8rem; font-weight: 600; }

/* Mobile-only identity slot in the collapsed header bar — so a logged-in
   customer sees at a glance that they're signed in (and a logged-out
   visitor gets an obvious "Log in" affordance) without opening the full
   menu. Desktop already shows this in the expanded nav, so it stays
   hidden there. */
/* Hidden on desktop by default — it only holds mobile-only controls
   (mini login button, hamburger toggle). If it stayed a visible flex item,
   header-inner's justify-content:space-between would treat it as a 3rd
   column and split the leftover space into two gaps, pulling the nav
   (lang switch / log in / sign up) away from the true right edge instead
   of flushing it there. Re-enabled as flex only inside the mobile nav
   media query below. */
.header-end-group { display: none; align-items: center; gap: 10px; }
.header-mini-actions { display: none; align-items: center; }
.mini-user {
    display: flex; align-items: center; gap: 8px; color: var(--ink);
    padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
}
.mini-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
}
.mini-user-label { font-size: 0.8rem; font-weight: 600; }
.mini-login {
    width: 38px; height: 38px; padding: 0;
    border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px; border: none;
    background: none; color: var(--ink); cursor: pointer; padding: 0; flex-shrink: 0;
}
.nav-toggle-icon .bar { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
.nav-toggle-icon .bar-accent { stroke: var(--red); transition: stroke .2s ease, transform .25s ease, opacity .2s ease; }
/* Mirror the shorter middle stroke so the "leading edge" reads correctly in
   RTL layouts too — a small detail, but it keeps the mark feeling deliberate
   rather than just flipped along with everything else. */
[dir="rtl"] .nav-toggle-icon { transform: scaleX(-1); }
.nav-toggle[aria-expanded="true"] .bar-top { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar-bot { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .bar-accent { stroke: currentColor; }
.nav-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(10,10,14,0.45); z-index: 1199;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ============================================================
   Flash messages
   ============================================================ */
.flash-stack { margin-top: 16px; display: grid; gap: 10px; }
.flash { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 500; }
.flash-success { background: #E4F5EC; color: var(--green); }
.flash-error { background: #FBE7E7; color: var(--red-dark); }
.flash-info { background: #E9EEF7; color: var(--steel); }

/* Phone / numeric inputs always flow LTR so digits are not reversed in RTL pages */
input[type="tel"],
input[name="phone"],
input[name="phone_number"],
input[name="mobile"] {
    direction: ltr;
    text-align: start;
}

/* ─── Toast notifications ───────────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    top: 78px;
    inset-inline-end: 20px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 40px));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 12px 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 24px rgba(0,0,0,.13);
    pointer-events: auto;
    animation: toast-in .28s cubic-bezier(.22,1,.36,1) both;
}
.toast.toast-out { animation: toast-out .22s ease forwards; }
@keyframes toast-in {
    from { opacity:0; transform:translateX(20px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes toast-out {
    to { opacity:0; transform:translateX(20px); }
}
[dir="rtl"] .toast { animation-name: toast-in-rtl; }
@keyframes toast-in-rtl {
    from { opacity:0; transform:translateX(-20px); }
    to   { opacity:1; transform:translateX(0); }
}
.toast-msg  { flex: 1; }
.toast-close {
    padding: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    opacity: .5; font-size: 1rem; line-height: 1;
    color: currentColor; border-radius: 4px; flex-shrink: 0;
}
.toast-close:hover { opacity:1; background: rgba(0,0,0,.07); }
.toast-success { background: #E4F5EC; color: var(--green); }
.toast-error   { background: #FBE7E7; color: var(--red-dark); }
.toast-info    { background: #E9EEF7; color: var(--steel); }
@media (max-width:600px) {
    .toast-stack {
        top: auto;
        bottom: calc(env(safe-area-inset-bottom,0px) + 16px);
        inset-inline-end: 12px;
        inset-inline-start: 12px;
        width: auto;
    }
}

/* ============================================================
   Hero
   ============================================================ */
/* ============================================================
   Hero — full-bleed poster photo with text overlay
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    background: #0B0C10;
    color: #fff;
    min-height: 88vh;        /* fills the screen without leaving a dead gap under the header */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* feature bar pins to bottom */
    transition: min-height .2s ease;
}
/* With the stats row + trust strip switched off there's nothing left to
   justify a near-full-screen hero — it would just be dead space under the
   buttons. Compact mode drops the height to something that still feels
   deliberate (not cramped) but stops short of a big empty gap. */
.hero.hero-compact { min-height: 58vh; }

/* Ambient backdrop — deep gradient base with slow-drifting colour glows, no photo needed */
.hero-aurora { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 20% 0%, #1B1D26 0%, #0B0C10 55%); }
.hero-aurora .glow {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform;
}
.hero-aurora .glow-a { width: 520px; height: 520px; top: -180px; left: -120px; background: radial-gradient(circle, rgba(230,57,70,0.55), transparent 70%); animation: driftA 22s ease-in-out infinite; }
.hero-aurora .glow-b { width: 460px; height: 460px; bottom: -200px; right: -100px; background: radial-gradient(circle, rgba(65,120,255,0.4), transparent 70%); animation: driftB 26s ease-in-out infinite; }
.hero-aurora .glow-c { width: 320px; height: 320px; top: 30%; right: 18%; background: radial-gradient(circle, rgba(255,178,102,0.28), transparent 70%); animation: driftC 18s ease-in-out infinite; }
@keyframes driftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.12); } }
@keyframes driftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-30px) scale(1.08); } }
@keyframes driftC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,25px); } }

/* Faint horizon grid for depth, fading toward the top */
.hero-grid {
    position: absolute; inset: 0; z-index: 0; opacity: 0.65;
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, #000 75%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 45%, #000 75%, transparent);
}

/* Text + illustration sit side by side, centred in the hero */
.hero-inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    /* Equal halves — a fixed ch-based text column could out-grow or
       under-fill the image column depending on language length, letting
       one side push the other around. 1fr/1fr keeps the split honest
       regardless of how long the translated copy is. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 24px;
    /* top/bottom only — .wrap already supplies the left/right inset;
       setting the padding shorthand here previously zeroed it out,
       making the hero content touch the viewport edge. */
    padding-top: 40px;
    padding-bottom: 40px;
}
.hero-text { max-width: 46ch; }

/* A touch narrower than the rest of the site's content width, so the hero
   never reads as "wider" than the header/body it sits above. */
.hero-inner, .hero-feature-inner { padding-inline: 26px; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #F2A6AC; margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(230,57,70,0.25); }
/* Sized to fit ~2 lines across every shipped language, not just English —
   longer translations (German, Arabic, Turkish headlines run 2-3x the
   English length) were wrapping to 3-4 lines at the old size/width. No
   ch-based cap: let it use the full text column (equal half of the hero)
   instead of an arbitrary character count that fights the column width. */
.hero h1 { font-size: clamp(2.0rem, 2.4vw + 1rem, 3.1rem); max-width: 100%; line-height: 1.12; margin-bottom: 18px; }
.hero-sub { color: #C9CCD6; font-size: 1.05rem; max-width: 100%; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-actions .btn { padding: 15px 28px; font-size: 1rem; }

/* On phones/tablets, keep both hero buttons on one centred row instead of
   letting them wrap into a stack — longer translated labels (Kurdish,
   Arabic, etc.) shrink and wrap their own text rather than pushing the
   second button onto its own line. */
@media (max-width: 720px) {
    .hero-actions { flex-wrap: nowrap; justify-content: center; gap: 10px; }
    .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: 13px 14px; font-size: 0.88rem; white-space: normal; text-align: center; line-height: 1.25; }
}
@media (max-width: 400px) {
    .hero-actions .btn { padding: 11px 10px; font-size: 0.8rem; }
}
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stat b { font-family: var(--font-display); font-size: 2rem; display: block; }
.hero-stat span { color: #9CA0AC; font-size: 0.9rem; }

/* Ghost button — white on the dark overlay */
.hero .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,0.32);
}
.hero .btn-ghost:hover {
    border-color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.08);
}

/* Hero vehicle photo — parked off-screen until it drives in */
.hero-car-stage {
    position: relative; justify-self: end; align-self: end;
    width: min(100%, 434px); max-width: calc(100% - 4px); padding-bottom: 24px; margin-inline-end: 4px;
    opacity: 0; transform: translateX(140px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.hero-car-stage.drove-in { opacity: 1; transform: translateX(0); }
.hero-car-stage.nudge { transform: translateX(var(--hero-scroll-x, 0px)); }
.hero-car-photo {
    width: 100%; height: auto; display: block;
    filter: brightness(0.86) contrast(1.06) saturate(1.05) drop-shadow(0 22px 26px rgba(0,0,0,0.45));
}
.hero-speedlines { position: absolute; right: calc(100% + 6px); bottom: 60px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity .4s ease .5s; }
.hero-car-stage.drove-in .hero-speedlines { opacity: 1; }
.hero-speedlines span { display: block; height: 3px; border-radius: 3px; background: linear-gradient(to left, rgba(255,255,255,0.6), transparent); animation: speed-flicker 1.1s ease-in-out infinite; }
.hero-speedlines span:nth-child(1) { width: 46px; animation-delay: 0s; }
.hero-speedlines span:nth-child(2) { width: 30px; animation-delay: .15s; }
.hero-speedlines span:nth-child(3) { width: 20px; animation-delay: .3s; }
@keyframes speed-flicker { 0%,100% { opacity: 0.25; transform: translateX(0); } 50% { opacity: 0.9; transform: translateX(-6px); } }

/* Moving road strip — dashed lane line drifts to sell the "driving" feel */
.hero-road {
    position: relative; z-index: 1; height: 3px; margin: 0 auto;
    background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0 24px, transparent 24px 48px);
    background-size: 48px 100%;
    animation: road-scroll 1.4s linear infinite;
    opacity: 0.6;
}
@keyframes road-scroll { to { background-position: -48px 0; } }

@media (prefers-reduced-motion: reduce) {
    .hero-aurora .glow, .hero-speedlines span, .hero-road { animation: none !important; }
    .hero-car-stage { transition: opacity .6s ease; }
}


/* Feature bar — 4 trust icons anchored at the very bottom of the hero */
.hero-feature-bar {
    position: relative;
    z-index: 2;
    background: rgba(14,15,20,0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 18px 0;
}
.hero-feature-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.feature-item {
    display: flex; align-items: center; gap: 10px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
}
.hero-feature-bar.in-view .feature-item { opacity: 1; transform: translateY(0); }
.hero-feature-bar.in-view .feature-item:nth-child(1) { transition-delay: .05s; }
.hero-feature-bar.in-view .feature-item:nth-child(2) { transition-delay: .15s; }
.hero-feature-bar.in-view .feature-item:nth-child(3) { transition-delay: .25s; }
.hero-feature-bar.in-view .feature-item:nth-child(4) { transition-delay: .35s; }
.feature-item .ic {
    width: 38px; height: 38px; border-radius: var(--radius-sm); background: rgba(230,57,70,0.18);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--red);
}
.feature-item b { display: block; font-size: 0.86rem; color: #fff; }
.feature-item span { font-size: 0.74rem; color: #9CA0AC; }

/* ============================================================
   Mobile Hero Variants
   .mhero sections are always hidden on desktop (≥641px).
   On phones (≤640px), when admin picks a custom style via
   data-mobile-hero on <body>, .hero hides and .mhero shows.
   To add a new mobile hero style: add .mhero--<name> CSS here.
   ============================================================ */

/* Hidden everywhere by default */
.mhero { display: none; }

/* Desktop safety net — never visible above 640px */
@media (min-width: 641px) { .mhero { display: none !important; } }

/* Headlight glow curves — global scope (not nested in a breakpoint media
   query) because both the mobile (.mhero-hl) and desktop (.dhero-hl)
   heroes share them; a @keyframes nested only inside one media query is
   not registered for elements outside that query's matching range. */
@keyframes hl-breathe {
    from { opacity: .65; transform: scale(.86); }
    to   { opacity: 1;   transform: scale(1);   }
}
@keyframes hl-flash-dot {
    /* Scale up + sharpen on the dot itself — the box-shadow scales with it */
    0%   { opacity: .8;  transform: scale(1);    filter: blur(1px)   brightness(1); }
    22%  { opacity: 1;   transform: scale(1.5);  filter: blur(0px)   brightness(2.6) saturate(1.3); }
    60%  { opacity: .95; transform: scale(1.2);  filter: blur(.5px)  brightness(1.5); }
    100% { opacity: 1;   transform: scale(1);    filter: blur(1px)   brightness(1); }
}
/* Shaped variant — used only with the built-in car-topdown photo, where the
   real headlight is a thin diagonal blade peeking from under the hood, not
   a round lens. These keyframes add the centring translate + the blade's
   own tilt (--hl-rot) so the glow's bright core sits on and follows that
   exact sliver instead of floating over it as a generic circle. Kept
   separate from hl-breathe/hl-flash-dot so plain round dots used with a
   custom-uploaded car photo (unknown headlight shape/position) are
   untouched. */
@keyframes hl-breathe-shaped {
    from { opacity: .65; transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(.86); }
    to   { opacity: 1;   transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(1);   }
}
@keyframes hl-flash-dot-shaped {
    0%   { opacity: .8;  transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(1);    filter: blur(1px)  brightness(1); }
    22%  { opacity: 1;   transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(1.5);  filter: blur(0px)  brightness(2.6) saturate(1.3); }
    60%  { opacity: .95; transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(1.2);  filter: blur(.5px) brightness(1.5); }
    100% { opacity: 1;   transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(1);    filter: blur(1px)  brightness(1); }
}

@media (max-width: 640px) {
    /* When any custom mobile hero is active: hide the standard hero */
    body:not([data-mobile-hero="standard"]) .hero { display: none; }

    /* Show whichever mobile hero variant is rendered in the DOM */
    body:not([data-mobile-hero="standard"]) .mhero { display: block; }

    /* ── "Full Car" style (mhero--fullcar) ──────────────────────────
       Truly fills the visible screen on every phone — tall flagships,
       short SE-size handsets, notched iPhones, Android with dynamic
       toolbars. Stack of viewport units covers all browsers:
         100vh  → old browsers (ignores browser chrome)
         100svh → modern: "small viewport" = always-visible area
       safe-area-inset-* keeps content clear of notches & home bars. */
    .mhero--fullcar {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100svh;
        background: #10111a;
        color: #fff;
        overflow: hidden;
    }

    /* ── Background image covers the entire section ── */
    .mhero--fullcar .mhero-img {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .mhero--fullcar .mhero-img img {
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center 40%;
        display: block;
        animation: mhero-img-zoom 14s ease-out both;
    }
    @keyframes mhero-img-zoom {
        from { transform: scale(1.08); }
        to   { transform: scale(1); }
    }

    /* Three-layer gradient:
       1. Dark vignette at top  → badge stays readable
       2. Crystal-clear window  → shows the car at full impact
       3. Heavy dark ramp at bottom → white text pops vividly      */
    .mhero--fullcar .mhero-img::after {
        content: '';
        position: absolute; inset: 0;
        background:
            linear-gradient(to bottom,
                rgba(10,11,16,.80) 0%,
                rgba(10,11,16,0)   26%,
                rgba(10,11,16,.38) 52%,
                rgba(10,11,16,.97) 80%,
                rgba(10,11,16,1)   100%),
            linear-gradient(to right, rgba(10,11,16,.32) 0%, transparent 32%),
            linear-gradient(to left,  rgba(10,11,16,.22) 0%, transparent 26%);
    }

    /* ── Top eyebrow badge ── */
    .mhero-badge {
        position: absolute;
        top: max(20px, env(safe-area-inset-top, 20px));
        inset-inline-start: 20px;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255,255,255,.92);
        background: rgba(255,255,255,.14);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255,255,255,.24);
        padding: 6px;
        padding-inline-start: 9px;
        padding-inline-end: 13px;
        border-radius: 999px;
        animation: mhero-badge-in .55s cubic-bezier(.22,1,.36,1) .1s both;
    }
    .mhero-badge-dot {
        width: 7px; height: 7px; flex-shrink: 0;
        border-radius: 50%;
        background: #e63946;
        animation: mhero-dot-pulse 2.2s ease-in-out 1.4s infinite;
    }
    @keyframes mhero-badge-in {
        from { opacity: 0; transform: translateY(-14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes mhero-dot-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,.65); }
        55%       { box-shadow: 0 0 0 6px rgba(230,57,70,0); }
    }

    /* ── Floating top-down car (parallax) ───────────────────────────────
       Transparent PNG of a red sports car viewed from above. Sits at z:1
       — above the background photo layer, behind the text and badge (z:3+).
       Positioned off the inline-end edge so the car bleeds off-screen,
       rotated −14° so the nose points upper-right (dynamic, in-motion).

       Parallax: JS scroll handler sets --tc-y each frame; the car drifts
       upward as the user scrolls, giving a launch/takeoff feel.

       ::before   radial dark vignette — merges the vivid factory-red into
                  the moody dark garage scene; cooler and more cinematic.
       ::after    speed-vibration: two streak lines (brand red + silver) and
                  a warm radial glow pulsing at 0.22s — the car feels alive. */
    .mhero-topcar {
        position: absolute;
        /* left: 15vw = layout box centre at x:≈43vw.
           After rotate(90deg) the visual width ≈ 107vw, so ~10 % of the
           car (≈11vw) is off-screen left and ~90 % (≈96vw) is on-screen.
           translateX pushes it progressively right as the user scrolls.  */
        left: 15vw;
        /* top: 4vw → layout-centre-Y ≈ 57vw ≈ midpoint of the empty hero
           space above the headline. Visual car sits between the badge row
           and the text block.                                             */
        top: 4vw;
        width: 56vw;               /* CSS width becomes visual HEIGHT after rotation */
        z-index: 1;
        pointer-events: none;
        /* translateX first = moves in VIEWPORT x-axis (right = positive).
           rotate(90deg) = car front faces RIGHT.                          */
        transform: translateX(var(--tc-x, 0px)) rotate(90deg);
        will-change: transform;
        animation: tc-entrance 1.05s cubic-bezier(.22,1,.36,1) .28s both;
    }
    .mhero-topcar img {
        width: 100%;
        height: auto;
        display: block;
        /* Dissolve out at the bottom — merges into the dark hero gradient */
        /* After rotate(90deg): element-bottom = visual-LEFT (visible rear).
           "to top" = opaque at element-bottom (visible), transparent at
           element-top (off-screen front). Soft fade at both ends.       */
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
                mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
    }
    /* ── Headlight glow dots ───────────────────────────────────────────
       Inspired by the point-light approach: two small circles at the
       car's headlight positions. box-shadow spreads organically — no
       bounding box, no hard edges, no rectangle artefact.

       The wrapper is rotated 180° so the car's front faces DOWN.
       In element-space, top: ~11% = front of the top-down car image.
       The glow appears to project downward from the car's bumper into
       the "road". Multiple shadow layers build up the cone depth:
       tight bright core → inner spread → mid ambient → far road glow. */
    .mhero-topcar::after { display: none; } /* old beam overlay gone */
    .mhero-hl {
        position: absolute;
        top: 11%;                               /* headlight y on car */
        width: 14px; height: 14px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .98);  /* crisp white LED core */
        box-shadow:
            0 0   6px   5px rgba(240, 248, 255, 1.00),  /* tight icy halo */
            0 0  28px  18px rgba(210, 235, 255,  .80),  /* inner blue-white spread */
            0 0  70px  44px rgba(185, 220, 255,  .45),  /* mid glow */
            0 0 150px  90px rgba(160, 210, 255,  .20),  /* outer ambient */
            0 0 280px 140px rgba(140, 200, 255,  .08);  /* wide road glow */
        filter: blur(1px);
        z-index: 3;
        pointer-events: none;
        animation: hl-breathe 1.4s ease-in-out infinite alternate;
    }
    .mhero-hl--l { left: 22%; }   /* tune to match actual headlight x */
    .mhero-hl--r { right: 20%; }
    /* JS adds .hl-flash on scroll — brightness burst on the dots */
    .mhero-topcar.hl-flash .mhero-hl {
        animation: hl-flash-dot .3s cubic-bezier(.2,0,.8,1) forwards;
    }
    /* Pixel-measured against the built-in car-topdown photo: the real
       headlight is a thin blade peeking from under the hood at roughly
       x 15.7–31.6% / y 6.1–16.6% of the image, tapering to a bright fleck
       near its lower tip (~18.6%, 14.2%). Core reshaped into a narrow
       capsule tilted to the blade's own angle instead of a round dot. */
    .mhero-hl--shaped {
        /* Oval capsule — keep the same top/left/right as the base round dot
           so position stays exactly on the front headlight blade; only
           size, shape, and angle change. */
        width: 7px; height: 26px; border-radius: 50%;
        top: 11%;   /* same as base .mhero-hl — this is where the headlight actually is */
        transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(0.9);
        animation-name: hl-breathe-shaped;
    }
    .mhero-hl--shaped.mhero-hl--l { left: calc(22% + 5px); right: auto; --hl-rot: -115deg; }
    .mhero-hl--shaped.mhero-hl--r { right: calc(20% + 5px); left: auto; --hl-rot: 115deg; }
    .mhero-topcar.hl-flash .mhero-hl--shaped {
        animation: hl-flash-dot-shaped .3s cubic-bezier(.2,0,.8,1) forwards;
    }
    @keyframes tc-entrance {
        /* Car slides in from the right (translateX before rotate = viewport x-axis) */
        from { opacity: 0; transform: translateX(80px) rotate(90deg) scale(.93); }
        to   { opacity: 1; transform: translateX(var(--tc-x, 0px)) rotate(90deg) scale(1); }
    }
    /* hl-breathe / hl-flash-dot keyframes now defined at global scope above,
       shared with the desktop .dhero-hl dots. */

    /* ── Headline + subtext + CTA — lifted clear of the bottom edge ──
       clamp(110px, 21vh, 170px) puts the block at roughly 20-25 % up
       from the bottom regardless of phone height. env() adds extra
       clearance on phones with a home indicator bar.                 */
    .mhero--fullcar .mhero-body {
        position: absolute;
        inset-inline-start: 0;
        inset-inline-end: 82px;   /* clear the 52px icon column + margins */
        bottom: calc(clamp(110px, 21vh, 170px) + env(safe-area-inset-bottom, 0px));
        z-index: 3;
        padding: 0;
        padding-inline-start: 24px;
        padding-inline-end: 18px;
    }

    .mhero--fullcar .mhero-h1 {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(2rem, 9vw, 2.7rem);
        line-height: 1.1;
        color: #ffffff;
        margin: 0 0 10px;
        text-shadow: 0 2px 26px rgba(0,0,0,.75), 0 1px 5px rgba(0,0,0,.5);
        animation: mhero-body-in .65s cubic-bezier(.22,1,.36,1) .22s both;
    }
    /* RTL hero heading: Zain/Noto Naskh render visually larger than Space
       Grotesk at the same em — scale down so the headline stays 2-3 lines
       on a typical phone rather than filling the whole screen.
       line-height 1.35 (up from 1.1) gives Arabic descenders room to breathe. */
    [dir="rtl"] .mhero--fullcar .mhero-h1 {
        font-size: clamp(1.65rem, 7vw, 2.1rem);
        line-height: 1.35;
        letter-spacing: 0;
    }
    [dir="rtl"] .mhero--fullcar .mhero-h1::before {
        margin-inline-start: auto;
        margin-inline-end: 0;
    }
    /* Racing-stripe accent above the headline */
    .mhero--fullcar .mhero-h1::before {
        content: '';
        display: block;
        width: 32px;
        height: 3px;
        background: linear-gradient(90deg, #e63946 0%, rgba(62,99,221,.65) 100%);
        border-radius: 999px;
        margin-bottom: 12px;
        animation: mhero-body-in .55s cubic-bezier(.22,1,.36,1) .08s both;
    }

    .mhero--fullcar .mhero-sub {
        font-size: 0.85rem;
        line-height: 1.56;
        color: rgba(255,255,255,.92);
        margin: 0 0 22px;
        text-shadow: 0 1px 10px rgba(0,0,0,.6);
        animation: mhero-body-in .65s cubic-bezier(.22,1,.36,1) .34s both;
    }

    .mhero--fullcar .mhero-cta {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 14px 24px;
        background: #ffffff;
        color: #10111a;
        font-weight: 700;
        font-size: 0.92rem;
        border-radius: 999px;
        text-decoration: none;
        border: none;
        letter-spacing: 0.01em;
        box-shadow: 0 6px 30px rgba(0,0,0,.6), 0 1px 6px rgba(0,0,0,.3);
        animation: mhero-body-in .65s cubic-bezier(.22,1,.36,1) .46s both;
        transition: opacity .18s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
        white-space: nowrap;
        cursor: pointer;
    }
    .mhero-cta-arrow {
        flex-shrink: 0;
        transition: transform .24s cubic-bezier(.22,1,.36,1);
    }
    .mhero--fullcar .mhero-cta:hover {
        opacity: .92;
        box-shadow: 0 8px 36px rgba(0,0,0,.65);
    }
    .mhero--fullcar .mhero-cta:hover .mhero-cta-arrow { transform: translateX(4px); }
    .mhero--fullcar .mhero-cta:active { opacity: .82; transform: scale(.95); }

    @keyframes mhero-body-in {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Right-side Instagram Reels–style action buttons ──────────────
       Three frosted-glass circles stacked vertically.
       Each one springs in from the right (spring-bounce keyframe).
       After entrance: each icon bobs gently at its own pace so they
       never sync and look mechanical. Contact button pulses outward
       to invite a tap. Cars button has a subtle red accent.         */
    .mhero-side-actions {
        position: absolute;
        inset-inline-end: 14px;
        /* Bottom of the icon stack lines up with the bottom of the CTA button.
           Both use the same clamp so they track each other on every phone size. */
        bottom: calc(clamp(110px, 21vh, 170px) + env(safe-area-inset-bottom, 0px));
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }

    .mhero-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-decoration: none;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        color: #fff;
        -webkit-tap-highlight-color: transparent;
        /* Entrance: spring-bounce in from right */
        animation: mhero-action-in .58s cubic-bezier(.22,1,.36,1) both;
    }
    /* Staggered spring-bounce — each button pops in separately */
    .mhero-action:nth-child(1) { animation-delay: .52s; }
    .mhero-action:nth-child(2) { animation-delay: .67s; }
    .mhero-action:nth-child(3) { animation-delay: .82s; }

    .mhero-action-ic {
        width: 52px; height: 52px;
        border-radius: 50%;
        background: rgba(255,255,255,.16);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,.26);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 16px rgba(0,0,0,.32);
        transition: background .22s, transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
    }
    .mhero-action:hover .mhero-action-ic,
    .mhero-action:focus-visible .mhero-action-ic {
        background: rgba(255,255,255,.28);
        box-shadow: 0 5px 20px rgba(0,0,0,.42);
    }
    .mhero-action:active .mhero-action-ic {
        background: rgba(255,255,255,.34);
        transform: scale(.86);
    }

    /* Cars: subtle red-tinted ring to echo brand colour */
    .mhero-action--cars .mhero-action-ic {
        border-color: rgba(230,57,70,.55);
        background: rgba(230,57,70,.2);
    }

    /* Each icon bobs at its own speed — desync = feels alive */
    .mhero-action:nth-child(1) .mhero-action-ic {
        animation: mhero-float-a 4.0s ease-in-out 1.5s infinite;
    }
    .mhero-action:nth-child(2) .mhero-action-ic {
        animation: mhero-float-b 4.6s ease-in-out 1.9s infinite;
    }
    .mhero-action:nth-child(3) .mhero-action-ic {
        animation: mhero-float-c 3.7s ease-in-out 1.7s infinite;
    }

    /* Contact button overrides the float with an outward pulse ring */
    .mhero-action--contact .mhero-action-ic {
        animation: mhero-contact-pulse 2.6s ease-in-out 2.4s infinite;
    }
    @keyframes mhero-contact-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35), 0 3px 16px rgba(0,0,0,.32); }
        55%       { box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 3px 16px rgba(0,0,0,.32); }
    }

    @keyframes mhero-float-a {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-5px); }
    }
    @keyframes mhero-float-b {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-6px); }
    }
    @keyframes mhero-float-c {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-4px); }
    }

    .mhero-action-label {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,.92);
        line-height: 1;
        text-shadow: 0 1px 5px rgba(0,0,0,.55);
    }

    /* Spring-bounce entrance (LTR): overshoots then settles from the right */
    @keyframes mhero-action-in {
        0%   { opacity: 0; transform: translateX(38px) scale(.7); }
        55%  { opacity: 1; transform: translateX(-7px) scale(1.06); }
        78%  { transform: translateX(3px) scale(.98); }
        100% { opacity: 1; transform: translateX(0) scale(1); }
    }
    /* RTL: actions spring in from the left instead */
    [dir="rtl"] .mhero-action { animation-name: mhero-action-in-rtl; }
    @keyframes mhero-action-in-rtl {
        0%   { opacity: 0; transform: translateX(-38px) scale(.7); }
        55%  { opacity: 1; transform: translateX(7px) scale(1.06); }
        78%  { transform: translateX(-3px) scale(.98); }
        100% { opacity: 1; transform: translateX(0) scale(1); }
    }
    /* RTL: CTA arrow points left */
    [dir="rtl"] .mhero-cta-arrow { transform: scaleX(-1); }
    [dir="rtl"] .mhero--fullcar .mhero-cta:hover .mhero-cta-arrow { transform: scaleX(-1) translateX(-4px); }

    /* One-shot light streak across the car on load — sporty reveal */
    .mhero--fullcar::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(108deg,
            transparent 30%,
            rgba(255,255,255,.04) 45%,
            rgba(255,255,255,.09) 50%,
            rgba(255,255,255,.04) 55%,
            transparent 70%);
        animation: mhero-streak 1.8s ease-out .15s both;
    }
    @keyframes mhero-streak {
        from { transform: translateX(-130%); }
        to   { transform: translateX(130%); }
    }

    @media (prefers-reduced-motion: reduce) {
        .mhero-badge, .mhero--fullcar .mhero-h1, .mhero--fullcar .mhero-h1::before,
        .mhero--fullcar .mhero-sub, .mhero--fullcar .mhero-cta,
        .mhero-action, .mhero--fullcar .mhero-img img,
        .mhero--fullcar::after { animation: none !important; opacity: 1 !important; transform: none !important; }
        /* Stop entrance & headlight animations; preserve the 90° sideways turn */
        .mhero-topcar         { animation: none !important; opacity: 1 !important;
                                transform: rotate(90deg) !important; }
        .mhero-topcar::after  { display: none !important; }
        .mhero-hl             { animation: none !important; }
        .mhero-badge-dot,
        .mhero-action .mhero-action-ic,
        .mhero-action--contact .mhero-action-ic { animation: none !important; }
    }
}

/* ============================================================
   Desktop Hero — "Full Car" (companion to the mobile hero above)
   Reads the SAME admin settings (mobile_hero_image, mobile_hero_topcar,
   mobile_hero_gradient, headline/subtext/CTA) so one set of controls in
   the dashboard governs both breakpoints. Only rendered in the DOM when
   mobile_hero_style === 'fullcar'; hidden below 641px (the .mhero variant
   takes over there instead).
   ============================================================ */
.dhero { display: none; }
@media (min-width: 641px) {
    .dhero { display: flex; }
    /* The classic hero-mercedes hero is fully replaced once "Full Car" is
       selected — without this it would still show behind/above .dhero. */
    body[data-mobile-hero="fullcar"] .hero { display: none !important; }
}

@media (min-width: 641px) {
    .dhero--fullcar {
        position: relative;
        width: 100%;
        min-height: 640px;
        height: 88vh;
        max-height: 860px;
        align-items: center;
        background: #10111a;
        color: #fff;
        overflow: hidden;
    }

    .dhero-img { position: absolute; inset: 0; z-index: 0; }
    .dhero-img img {
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center 38%;
        display: block;
        animation: mhero-img-zoom 16s ease-out both;
    }
    /* Text panel lives on the reading-start side (left in LTR, right in
       RTL), so THAT side needs the darkest, most opaque coverage; the car
       sits on the reading-end side and stays clearer. */
    .dhero-img::after {
        content: '';
        position: absolute; inset: 0;
        background:
            linear-gradient(to right,
                rgba(9,10,15,.94) 0%,
                rgba(9,10,15,.82) 30%,
                rgba(9,10,15,.38) 55%,
                rgba(9,10,15,.12) 72%,
                rgba(9,10,15,0)   88%),
            linear-gradient(to bottom, rgba(9,10,15,.35) 0%, transparent 18%, transparent 82%, rgba(9,10,15,.55) 100%);
    }
    [dir="rtl"] .dhero-img::after {
        background:
            linear-gradient(to left,
                rgba(9,10,15,.94) 0%,
                rgba(9,10,15,.82) 30%,
                rgba(9,10,15,.38) 55%,
                rgba(9,10,15,.12) 72%,
                rgba(9,10,15,0)   88%),
            linear-gradient(to bottom, rgba(9,10,15,.35) 0%, transparent 18%, transparent 82%, rgba(9,10,15,.55) 100%);
    }
    /* Solid-colour gradient presets (e.g. black) have no .dhero-img layer —
       give the section itself a faint depth toward the text side instead. */
    .dhero--fullcar:not(:has(.dhero-img))::before {
        content: '';
        position: absolute; inset: 0; z-index: 0;
        background: linear-gradient(to right, rgba(0,0,0,.25) 0%, transparent 60%);
    }
    [dir="rtl"] .dhero--fullcar:not(:has(.dhero-img))::before {
        background: linear-gradient(to left, rgba(0,0,0,.25) 0%, transparent 60%);
    }

    .dhero-inner { position: relative; z-index: 3; width: 100%; }
    .dhero-text { max-width: 560px; }

    .dhero-badge {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
        color: rgba(255,255,255,.92);
        background: rgba(255,255,255,.14);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255,255,255,.24);
        padding: 7px 16px 7px 10px;
        border-radius: 999px;
        margin-bottom: 22px;
        animation: mhero-badge-in .55s cubic-bezier(.22,1,.36,1) .1s both;
    }
    .dhero-badge-dot {
        width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
        background: #e63946;
        animation: mhero-dot-pulse 2.2s ease-in-out 1.4s infinite;
    }

    .dhero-h1 {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(2.6rem, 4.4vw, 3.8rem);
        line-height: 1.08;
        color: #fff;
        margin: 0 0 18px;
        text-shadow: 0 2px 26px rgba(0,0,0,.6);
        animation: mhero-body-in .65s cubic-bezier(.22,1,.36,1) .22s both;
    }
    .dhero-h1::before {
        content: '';
        display: block;
        width: 44px; height: 4px;
        background: linear-gradient(90deg, #e63946 0%, rgba(62,99,221,.65) 100%);
        border-radius: 999px;
        margin-bottom: 18px;
        animation: mhero-body-in .55s cubic-bezier(.22,1,.36,1) .08s both;
    }
    [dir="rtl"] .dhero-h1::before { margin-inline-start: auto; margin-inline-end: 0; }

    .dhero-sub {
        font-size: 1.05rem;
        line-height: 1.6;
        color: rgba(255,255,255,.88);
        margin: 0 0 32px;
        max-width: 480px;
        text-shadow: 0 1px 10px rgba(0,0,0,.5);
        animation: mhero-body-in .65s cubic-bezier(.22,1,.36,1) .34s both;
    }

    .dhero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; animation: mhero-body-in .65s cubic-bezier(.22,1,.36,1) .46s both; }
    .dhero-cta {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 16px 30px;
        background: #ffffff; color: #10111a;
        font-weight: 700; font-size: 0.98rem;
        border-radius: 999px;
        text-decoration: none;
        letter-spacing: 0.01em;
        box-shadow: 0 10px 34px rgba(0,0,0,.5);
        transition: opacity .18s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
        white-space: nowrap;
    }
    .dhero-cta:hover { opacity: .92; box-shadow: 0 12px 40px rgba(0,0,0,.55); transform: translateY(-1px); }
    .dhero-cta:hover .dhero-cta-arrow { transform: translateX(4px); }
    .dhero-cta-arrow { flex-shrink: 0; transition: transform .24s cubic-bezier(.22,1,.36,1); }
    [dir="rtl"] .dhero-cta-arrow { transform: scaleX(-1); }
    [dir="rtl"] .dhero-cta:hover .dhero-cta-arrow { transform: scaleX(-1) translateX(-4px); }

    .dhero-cta-secondary {
        display: inline-flex; align-items: center;
        padding: 16px 28px;
        border: 1px solid rgba(255,255,255,.4);
        color: #fff;
        font-weight: 600; font-size: 0.98rem;
        border-radius: 999px;
        text-decoration: none;
        background: rgba(255,255,255,.06);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        transition: background .18s, border-color .18s;
        white-space: nowrap;
    }
    .dhero-cta-secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }

    /* ── Floating top-down red car — same asset as mobile, bled off the
       reading-end edge of the wide desktop canvas (right in LTR, left in
       RTL) with its front (headlights) rotated INTO the visible frame,
       toward the text panel, rather than clipped off at the screen edge.
       --car-face flips sign per direction so the nose always points at
       the text instead of at the cut-off edge; --car-slide-x mirrors the
       entrance slide to match. */
    .dhero-topcar {
        --car-face: -90deg;
        --car-slide-x: 60px;
        --drive-x: 0px;
        position: absolute;
        right: -6vw;
        top: 50%;
        width: 40vw;
        max-width: 620px;
        z-index: 1;
        pointer-events: none;
        /* translateX first = viewport x-axis, before rotate is applied —
           JS sets --drive-x as the user scrolls, nudging the car further
           off the reading-end edge for a "driving away" effect. */
        transform: translateY(-50%) translateX(var(--drive-x, 0px)) rotate(var(--car-face));
        will-change: transform;
        animation: dhero-tc-entrance 1s cubic-bezier(.22,1,.36,1) .3s both;
    }
    [dir="rtl"] .dhero-topcar {
        --car-face: 90deg;
        --car-slide-x: -60px;
        right: auto;
        left: -6vw;
    }
    .dhero-topcar img {
        width: 100%; height: auto; display: block;
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
                mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
    }
    .dhero-hl {
        position: absolute;
        top: 11%;
        width: 15px; height: 15px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .98);
        box-shadow:
            0 0   6px   5px rgba(240, 248, 255, 1.00),
            0 0  30px  20px rgba(210, 235, 255,  .80),
            0 0  76px  48px rgba(185, 220, 255,  .45),
            0 0 160px  96px rgba(160, 210, 255,  .20),
            0 0 300px 150px rgba(140, 200, 255,  .08);
        filter: blur(1px);
        z-index: 3;
        animation: hl-breathe 1.4s ease-in-out infinite alternate;
    }
    .dhero-hl--l { left: 22%; }
    .dhero-hl--r { right: 20%; }
    /* JS adds .hl-flash on scroll — brightness burst on the dots, same
       "driving" cue as the mobile hero's parallax scroll handler. */
    .dhero-topcar.hl-flash .dhero-hl {
        animation: hl-flash-dot .3s cubic-bezier(.2,0,.8,1) forwards;
    }
    /* Same pixel-measured blade fix as the mobile hero — see .mhero-hl--shaped. */
    .dhero-hl--shaped {
        width: 7px; height: 26px; border-radius: 50%;
        top: 11%;   /* same as base .dhero-hl — headlight position */
        transform: translate(-50%, -50%) rotate(var(--hl-rot, 0deg)) scale(0.9);
        animation-name: hl-breathe-shaped;
    }
    .dhero-hl--shaped.dhero-hl--l { left: calc(22% + 5px); right: auto; --hl-rot: -115deg; }
    .dhero-hl--shaped.dhero-hl--r { right: calc(20% + 5px); left: auto; --hl-rot: 115deg; }
    .dhero-topcar.hl-flash .dhero-hl--shaped {
        animation: hl-flash-dot-shaped .3s cubic-bezier(.2,0,.8,1) forwards;
    }
    @keyframes dhero-tc-entrance {
        from { opacity: 0; transform: translateY(-50%) translateX(var(--car-slide-x)) rotate(var(--car-face)) scale(.94); }
        to   { opacity: 1; transform: translateY(-50%) translateX(var(--drive-x, 0px)) rotate(var(--car-face)) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .dhero-badge, .dhero-h1, .dhero-h1::before, .dhero-sub, .dhero-actions,
        .dhero-img img { animation: none !important; opacity: 1 !important; transform: none !important; }
        .dhero-topcar { animation: none !important; opacity: 1 !important; transform: translateY(-50%) rotate(var(--car-face)) !important; }
        .dhero-hl, .dhero-topcar.hl-flash .dhero-hl { animation: none !important; }
        .dhero-badge-dot { animation: none !important; }
    }
}

/* Narrower desktop/laptop widths: shrink the car and tighten the text
   column so both sides keep breathing room down to 641px. */
@media (min-width: 641px) and (max-width: 1080px) {
    .dhero-topcar { width: 46vw; right: -9vw; }
    [dir="rtl"] .dhero-topcar { right: auto; left: -9vw; }
    .dhero-text { max-width: 480px; }
}

/* ============================================================
   Sections
   ============================================================ */
section { padding: 64px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head h2 { font-size: 2.2rem; }
.section-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; display: block; }

.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-card { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--red); border-radius: var(--radius); padding: 26px; }
.how-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--red); margin-bottom: 10px; }

/* ============================================================
   Car cards / fleet
   ============================================================ */
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.car-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 1px 4px rgba(13,15,23,0.06);
    transition: box-shadow .2s ease, transform .2s ease;
}
.car-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
/* Photo sits on its own "showroom floor" panel with room to breathe,
   rather than bleeding edge-to-edge — reads as a product shot, not a
   cropped thumbnail. Padding on the img/svg itself (both are replaced
   elements car_svg() can return) keeps this a one-line change either way. */
.car-card .car-art { width: 100%; height: auto; background: var(--paper); padding: 16px 16px 6px; box-sizing: border-box; }
.car-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.car-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.car-card-top h3 { font-size: 1.08rem; margin: 0; }
.car-card-top .muted { font-size: 0.82rem; }
.car-specs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.76rem; }
.chip { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink-soft); }
.car-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line); }
.car-rate { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.car-rate span { font-family: var(--font-body); font-weight: 500; font-size: 0.76rem; color: var(--grey); }
/* Spec row reads as friendly rounded chips instead of bare inline icons —
   each fact (seats/gearbox/fuel) gets its own tappable-looking pill. */
.car-specs-icons .spec-ic {
    background: var(--paper); border-radius: 999px; padding: 5px 10px 5px 8px;
}
.car-card-foot .btn { border-radius: var(--radius-sm); }
@media (max-width: 480px) {
    .car-grid { grid-template-columns: 1fr; gap: 18px; }
    .car-card-foot .btn { padding: 9px 18px; }
}

/* ============================================================
   Quick fleet search (floats over hero seam) — reuses the same
   .fbar component as the fleet page, floated up over the seam.
   ============================================================ */
#quick-search .fbar {
    margin: -34px auto 0; position: relative; z-index: 5;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 16px 14px;
}

/* ============================================================
   Popular cars — tinted highlight row
   ============================================================ */
.popular-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.popular-card {
    display: flex; flex-direction: column; gap: 14px; border-radius: var(--radius);
    padding: 20px; border: 1px solid var(--line);
    background: linear-gradient(165deg, color-mix(in srgb, var(--tint) 16%, var(--panel)) 0%, var(--panel) 65%);
    transition: transform .18s ease, box-shadow .18s ease;
}
.popular-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.popular-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.popular-card-top h3 { font-size: 1.05rem; margin: 0; }
.popular-card-top .muted { font-size: 0.8rem; }
.popular-card-art { margin: 0 -4px; }
.popular-card-art .car-art { background: none; }
.popular-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line); }
.popular-specs { display: flex; gap: 12px; }

.spec-ic { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.spec-ic svg { flex-shrink: 0; color: var(--grey); }
.car-specs-icons { align-items: center; gap: 14px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.filter-bar select, .filter-bar input[type=search] {
    padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
    font-family: var(--font-body); font-size: 0.88rem; color: var(--ink);
}

/* ============================================================
   Fleet filter bar — unified .fbar component
   Shared between the fleet page and the homepage quick search.
   One always-visible pill row: no labels, no accordion toggle.
   ============================================================ */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Wrapper */
.fbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

/* ── Search row ── */
.fbar-search {
    display: flex; align-items: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 4px 4px 16px;
}
.fbar-search-ic { color: var(--grey); flex-shrink: 0; }
.fbar-search input[type=search] {
    flex: 1; border: none; background: none; padding: 9px 10px;
    font-family: var(--font-body); font-size: 0.94rem; color: var(--ink); min-width: 0;
}
.fbar-search input[type=search]:focus { outline: none; }
.fbar-search input[type=search]::-webkit-search-cancel-button { display: none; }
.fbar-submit {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: var(--red); color: #fff; cursor: pointer; transition: background .15s;
}
.fbar-submit:hover { background: var(--red-dark); }

/* ── Pills row ── */
.fbar-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Chevron constants (URL-encoded inline SVG) */
/* Default = grey stroke on panel bg; active = white stroke on ink bg */
.fbar-pill { position: relative; display: inline-flex; }
.fbar-pill select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 7px 26px 7px 14px;
    border-radius: 999px; border: 1.5px solid var(--line);
    background-color: var(--panel); background-repeat: no-repeat;
    background-position: right 9px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
    color: var(--ink-soft); cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.fbar-pill select:hover { border-color: var(--grey); }
.fbar-pill select:focus { outline: none; border-color: var(--steel); }

/* Active pill — filled with ink colour, white text */
.fbar-pill--on select {
    background-color: var(--ink); color: var(--panel); border-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Dark mode: active pill — ink is near-white, so text needs to be dark */
html[data-color-mode="dark"] .fbar-pill--on select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2316171C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color: var(--paper);
}

/* Clear (×) button */
.fbar-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--line); color: var(--grey); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.fbar-clear:hover { border-color: var(--red); color: var(--red); }

/* RTL: flip select arrow to the start side */
[dir="rtl"] .fbar-pill select {
    padding: 7px 14px 7px 26px;
    background-position: left 9px center;
}
[dir="rtl"] .fbar-search { padding: 4px 16px 4px 4px; }

/* ============================================================
   Badges
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; }
.badge-green { background: #E4F5EC; color: var(--green); }
.badge-amber { background: #FBEED9; color: var(--amber); }
.badge-blue { background: #E9EEF7; color: var(--steel); }
.badge-red { background: #FBE7E7; color: var(--red-dark); }
.badge-grey { background: #EDEDED; color: var(--grey); }

/* ============================================================
   Forms
   ============================================================ */
.form-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; max-width: 480px; margin: 0 auto; box-shadow: var(--shadow); }
.form-card h1, .form-card h2 { font-size: 1.5rem; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
    font-family: var(--font-body); font-size: 0.95rem; background: var(--paper); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--steel); background: var(--panel); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-foot { margin-top: 18px; font-size: 0.88rem; text-align: center; color: var(--grey); }
.form-note { font-size: 0.82rem; color: var(--grey); margin-top: 4px; }

/* ── Demo credentials panel ──────────────────────────────────────────────── */
.demo-creds {
    max-width: 480px;
    margin: 14px auto 0;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.demo-creds-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 0 0 10px;
    text-align: center;
}
.demo-creds-grid { display: flex; flex-direction: column; gap: 8px; }
.demo-creds-card { display: flex; align-items: center; gap: 8px; }
.demo-creds-role {
    font-size: 0.72rem; font-weight: 700;
    color: var(--grey);
    min-width: 58px;
    flex-shrink: 0;
}
.demo-creds-row {
    flex: 1;
    display: flex; align-items: center; gap: 5px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--ink);
    font-family: 'Courier New', monospace;
    transition: border-color .15s, background .15s;
    text-align: start;
    line-height: 1;
}
.demo-creds-row:hover { border-color: var(--red); background: var(--panel); }
.demo-creds-row:hover .demo-creds-icon { opacity: 1; color: var(--red); }
.demo-creds-field { flex-shrink: 0; }
.demo-creds-sep { color: var(--grey); flex-shrink: 0; }
.demo-creds-icon { margin-inline-start: auto; flex-shrink: 0; opacity: 0; transition: opacity .15s; color: var(--grey); }

/* ============================================================
   Dashboard shells (customer + admin share this)
   ============================================================ */
.dash {
    display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 64px);
}
.dash-side {
    /* Theme-aware: uses CSS vars so it follows light/dark correctly */
    background: var(--panel); color: var(--ink);
    padding: 26px 18px; position: sticky; top: 64px; height: calc(100vh - 64px);
}
.dash-side .side-user { padding: 0 8px 20px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.dash-side .side-user b { display: block; font-family: var(--font-display); }
.dash-side .side-user span { font-size: 0.78rem; color: var(--grey); }
.side-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--grey); margin-bottom: 4px; }
.side-link svg { flex-shrink: 0; opacity: 0.85; }
.side-link:hover { background: var(--paper); color: var(--ink); }
.side-link.active { background: var(--red); color: #fff; }
.side-link.active svg { opacity: 1; }
.side-link .count { margin-left: auto; background: var(--line); color: var(--grey); border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; }
.dash-main { padding: 28px 28px 60px; max-width: 1160px; }
/* ── Page header — compact inline row: title left, actions right ── */
.dash-head {
    display: flex; flex-direction: row; align-items: center;
    gap: 12px; margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.dash-head > div:first-child { flex: 1; min-width: 0; }
.dash-head h1, .dash-head .dash-h1 { font-size: 1.2rem; font-weight: 800; margin-bottom: 1px; }
.dash-head .muted { font-size: 0.78rem; margin: 0; }
.dash-head > div:not(:first-child),
.dash-head form,
.dash-head .gcal-nav { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }

/* ============================================================
   Admin shell — dedicated dashboard chrome, no marketing header
   ============================================================ */
.admin-shell { display: flex; min-height: 100vh; background: var(--paper); align-items: stretch; }
.admin-shell .dash-side {
    width: 252px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; z-index: 100;
}
.admin-brand { position: relative; }
.side-nav { flex: 1; overflow-y: auto; padding-right: 2px; }
.side-foot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; flex-shrink: 0; }
.sidebar-close, .sidebar-open { display: none; }

/* ── Sidebar brand mark (site logo) ── */
.admin-brand-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-brand-mark .brand-logo-img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; display: block; }
.admin-brand-mark svg { width: 32px; height: 32px; }
.admin-brand-name {
    font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
    color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}

/* ── Sidebar attribution (Oten Digital credit) ── */
.side-attrib {
    padding: 8px 12px 4px; font-size: 0.66rem; color: var(--grey); text-align: center;
}
.side-attrib a { color: var(--grey); text-decoration: none; }
.side-attrib a:hover { color: var(--ink); text-decoration: underline; }

/* ── Mobile-only sidebar controls ── hidden on desktop ≥1025 px ──
   The topbar carries language / theme / view-site on large screens.
   On narrow screens the sidebar drawer sits above the topbar so these
   controls must live here to remain reachable. */
.side-mobile-only { display: block; }

/* Language + theme controls inside the sidebar footer, so both are reachable
   from the mobile drawer without closing it first (the topbar underneath is
   covered while the drawer is open). */
/* Language switcher — stacked: label above, pills below */
.side-lang-row { display: flex; flex-direction: column; gap: 7px; padding: 4px 12px 12px; }
.side-lang-label { font-size: 0.68rem; color: var(--grey); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.side-lang-links { display: flex; flex-wrap: wrap; gap: 5px; }
.side-lang-link {
    font-size: 0.8rem; font-weight: 600; color: var(--grey); background: var(--paper);
    border-radius: 8px; padding: 5px 11px; line-height: 1.3;
    transition: background .15s, color .15s;
}
.side-lang-link:hover { background: var(--line); color: var(--ink); }
.side-lang-link.active { background: var(--red); color: #fff; }

/* Dark / Light toggle — two states only (no auto).
   Default (no data-mode-choice set yet): show moon (dark mode icon).
   JS sets data-mode-choice to "dark" or "light" on load and every click. */
.side-theme-btn {
    display: flex; align-items: center; gap: 10px;
    width: calc(100% - 24px); margin: 2px 12px 6px;
    padding: 8px 11px; border-radius: 8px;
    background: var(--paper); border: 1px solid var(--line);
    cursor: pointer; color: var(--grey); font-size: 0.82rem; font-weight: 600;
    font-family: inherit; text-align: left;
    transition: background .15s, color .15s;
}
.side-theme-btn:hover { background: var(--line); color: var(--ink); }
.side-theme-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.side-theme-label { flex: 1; }

/* Icon shows the TARGET mode — what clicking will switch TO.
   Default (no choice yet): moon shown — click will go dark.
   Light mode active  → show moon  (click will go dark).
   Dark  mode active  → show sun   (click will go light). */
.js-color-mode-toggle .icon-moon { display: flex; }
.js-color-mode-toggle .icon-sun  { display: none; }
.js-color-mode-toggle[data-mode-choice="light"] .icon-moon { display: flex; }
.js-color-mode-toggle[data-mode-choice="light"] .icon-sun  { display: none; }
.js-color-mode-toggle[data-mode-choice="dark"]  .icon-moon { display: none; }
.js-color-mode-toggle[data-mode-choice="dark"]  .icon-sun  { display: flex; }

.admin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
    position: sticky; top: 0; z-index: 40; height: 56px; flex-shrink: 0;
    display: flex; align-items: center; gap: 16px; padding: 0 28px;
    background: rgba(252,251,248,0.97); backdrop-filter: blur(14px);
    border-bottom: 1.5px solid var(--line);
    box-shadow: 0 1px 0 0 var(--line), 0 2px 12px -4px rgba(20,21,26,.08);
}
html[data-color-mode="dark"] .admin-topbar {
    background: rgba(16,17,22,0.97);
    border-bottom-color: rgba(255,255,255,.1);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.08), 0 2px 16px -4px rgba(0,0,0,.4);
}
/* Sidebar is always-dark — no mode-specific overrides needed here.
   Dark-mode sidebar rules live AFTER the .admin-shell block below so they
   win the cascade. Topbar dark override stays because topbar uses CSS vars. */
html[data-color-mode="dark"] .topbar-icon-btn:hover        { background: rgba(255,255,255,.07); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   ADMIN SIDEBAR — THEME-AWARE (follows the same light/dark system as
   the rest of the dashboard — uses CSS vars throughout)
   ══════════════════════════════════════════════════════════════════════ */

/* Sidebar surface — matches dashboard panel colour in both modes */
html .admin-shell .dash-side {
    background: var(--panel);
    color: var(--ink);
    border-inline-end: 1px solid var(--line);
}

/* Brand strip */
html .admin-shell .admin-brand {
    border-bottom: 1px solid var(--line);
    padding: 18px 16px 14px;
    margin-bottom: 2px;
}
html .admin-shell .admin-brand-link {
    gap: 10px; border-radius: 8px; padding: 4px 6px; margin: -4px -6px;
    transition: background .15s;
}
html .admin-shell .admin-brand-link:hover { background: var(--paper); }
html .admin-shell .admin-brand-name { color: var(--ink); font-size: 0.88rem; }
html .admin-shell .sidebar-close {
    color: var(--grey); border-radius: 7px; transition: background .15s, color .15s;
}
html .admin-shell .sidebar-close:hover { background: var(--paper); color: var(--ink); }

/* Section labels — subtle caps dividers */
html .admin-shell .side-section-label {
    color: var(--grey);
    font-size: 0.6rem; font-weight: 800; letter-spacing: .12em;
    padding: 18px 14px 5px; text-transform: uppercase;
    position: relative;
}
html .admin-shell .side-section-label::before {
    content: '';
    position: absolute; top: 50%; left: 14px; right: 14px;
    height: 1px; background: var(--line);
    transform: translateY(-50%);
    margin-top: -2px;
}

/* Nav links — theme-aware */
html .admin-shell .side-link {
    color: var(--grey);
    padding: 9px 12px; margin-bottom: 1px;
    border-radius: 8px;
    transition: background .12s, color .12s;
}
html .admin-shell .side-link svg { opacity: .7; transition: opacity .12s; flex-shrink: 0; }
html .admin-shell .side-link .side-link-label { flex: 1; min-width: 0; }
html .admin-shell .side-link:hover {
    background: var(--paper);
    color: var(--ink);
}
html .admin-shell .side-link:hover svg { opacity: 1; }
html .admin-shell .side-link.active {
    background: #DC2626;
    color: #fff;
    box-shadow: 0 2px 12px rgba(220,38,38,.3);
}
html .admin-shell .side-link.active svg { opacity: 1; }

/* Sidebar footer */
html .admin-shell .side-foot {
    border-top-color: var(--line);
    padding-top: 8px; margin-top: 8px;
}
html .admin-shell .side-attrib { color: var(--grey); opacity: .7; }
html .admin-shell .side-attrib a { color: var(--grey); }
html .admin-shell .side-attrib a:hover { color: var(--ink); text-decoration: underline; }

/* Mobile sidebar controls */
html .admin-shell .side-lang-label { color: var(--grey); }
html .admin-shell .side-lang-link {
    background: var(--paper); color: var(--grey);
    border-radius: 7px;
}
html .admin-shell .side-lang-link:hover { background: var(--line); color: var(--ink); }
html .admin-shell .side-lang-link.active { background: #DC2626; color: #fff; }
html .admin-shell .side-theme-btn {
    background: var(--paper); border-color: var(--line);
    color: var(--grey); border-radius: 8px;
}
html .admin-shell .side-theme-btn:hover { background: var(--line); color: var(--ink); }

/* ── Vivid notification badges (nav badges, not the old .count class) ── */
.nb {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    font-size: 0.65rem; font-weight: 800; line-height: 1;
    border-radius: 999px; margin-inline-start: auto; flex-shrink: 0;
    letter-spacing: .01em;
}
/* Red — active/pending reservations (urgent) */
.nb-red    { background: #DC2626; color: #fff; box-shadow: 0 0 0 2px rgba(220,38,38,.25); }
/* Amber — overdue returns (warning) */
.nb-amber  { background: #D97706; color: #fff; box-shadow: 0 0 0 2px rgba(217,119,6,.25); }
/* Orange — unpaid fines */
.nb-orange { background: #EA580C; color: #fff; box-shadow: 0 0 0 2px rgba(234,88,12,.2); }
/* Green — unread messages */
.nb-green  { background: #059669; color: #fff; box-shadow: 0 0 0 2px rgba(5,150,105,.2); }
/* Steel — fleet count (informational) — uses CSS vars so it works in both modes */
.nb-steel  { background: var(--line); color: var(--grey); }

/* Active link badges invert slightly for contrast on red bg */
.side-link.active .nb { box-shadow: none; }
.side-link.active .nb-red,
.side-link.active .nb-amber,
.side-link.active .nb-orange,
.side-link.active .nb-green { background: rgba(255,255,255,.25); color: #fff; }
.side-link.active .nb-steel  { background: rgba(255,255,255,.2); color: #fff; }
.admin-topbar-title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; flex: 1; min-width: 0; }
.admin-topbar-actions { display: flex; align-items: center; gap: 8px; }

/* ── Desktop-only topbar controls ──
   Hidden on mobile/tablet ≤1024 px where the sidebar drawer carries them. */
.topbar-desktop-only { display: flex; align-items: center; gap: 4px; }

/* ── Topbar icon button (view site, theme toggle) ── */
.topbar-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    color: var(--grey); border: none; background: none; cursor: pointer;
    transition: background .15s, color .15s; text-decoration: none; flex-shrink: 0;
}
.topbar-icon-btn:hover { background: var(--paper); color: var(--ink); }

/* Moon/sun icon switching on the topbar theme button — same logic as sidebar */
.topbar-theme-btn .icon-moon { display: flex; }
.topbar-theme-btn .icon-sun  { display: none; }
.topbar-theme-btn[data-mode-choice="dark"] .icon-moon { display: none; }
.topbar-theme-btn[data-mode-choice="dark"] .icon-sun  { display: flex; }

/* Home button hidden on desktop — sidebar Overview link covers it there */
.topbar-home-btn { display: none; }

/* New-booking shortcut pinned in topbar on tablet/mobile */
.topbar-new-booking {
    display: none; /* hidden on desktop — greeting banner has the button there */
}
@media (max-width: 1024px) {
    .topbar-new-booking {
        display: inline-flex; align-items: center; gap: 6px;
        background: var(--red); color: #fff; border-radius: var(--radius-sm);
        padding: 7px 13px; font-size: 0.8rem; font-weight: 700;
        text-decoration: none; white-space: nowrap; flex-shrink: 0;
        font-family: var(--font-display); transition: opacity .15s;
    }
    .topbar-new-booking:hover { opacity: .88; color: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════
   TOPBAR DROPDOWN COMPONENTS
   Globe language picker + user account dropdown
══════════════════════════════════════════════════════════════════════ */

/* Shared dropdown shell */
.tb-globe-wrap,
.tb-user-wrap   { position: relative; }

/* ── Globe language button ── */
.tb-globe-btn { display: flex; align-items: center; gap: 5px; }
.tb-globe-code {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
    color: var(--grey); font-family: var(--font-display); line-height: 1;
}

/* ── Globe dropdown panel ── */
.tb-globe-drop {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
    width: 220px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 8px 32px -8px rgba(20,21,26,.18); z-index: 500;
    padding: 6px 0; opacity: 0; pointer-events: none;
    transform: translateY(-6px); transition: opacity .15s, transform .15s;
}
.tb-globe-drop.open { opacity: 1; pointer-events: auto; transform: none; }
.tb-globe-drop-title {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--grey); padding: 6px 14px 8px;
}
.tb-globe-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; text-decoration: none; color: var(--ink);
    font-size: 0.88rem; transition: background .12s;
}
.tb-globe-opt:hover { background: var(--paper); }
.tb-globe-opt.active { font-weight: 600; }
.tb-globe-opt.active svg { color: var(--red); margin-inline-start: auto; }
.tb-globe-opt-native { flex: 1; }
.tb-globe-opt-eng { font-size: 0.74rem; color: var(--grey); }

/* ── User button ── */
.tb-user-btn {
    display: flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer; padding: 4px 8px 4px 4px;
    border-radius: var(--radius-sm); text-align: start;
    transition: background .15s; color: var(--ink); font-family: inherit;
}
.tb-user-btn:hover { background: var(--paper); }
.tb-user-name {
    font-size: 0.85rem; font-weight: 600; color: var(--ink);
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-user-chevron {
    color: var(--grey); flex-shrink: 0;
    transition: transform .2s; margin-inline-start: 2px;
}
.tb-user-wrap.open .tb-user-chevron { transform: rotate(180deg); }

/* ── User dropdown panel ── */
.tb-user-drop {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
    width: 248px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 8px 32px -8px rgba(20,21,26,.18); z-index: 500;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px); transition: opacity .15s, transform .15s;
    overflow: hidden;
}
.tb-user-drop.open { opacity: 1; pointer-events: auto; transform: none; }

/* User info card at top of dropdown */
.tb-user-drop-info {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: var(--paper);
}
.tb-user-drop-av {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--red); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 0.94rem;
}
.tb-user-drop-info b   { display: block; font-size: 0.88rem; color: var(--ink); line-height: 1.3; }
.tb-user-drop-info span { font-size: 0.74rem; color: var(--grey); word-break: break-all; }

.tb-user-drop-div  { height: 1px; background: var(--line); }
.tb-user-drop-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; font-size: 0.88rem; text-decoration: none;
    color: var(--ink); transition: background .12s;
}
.tb-user-drop-item:hover { background: var(--paper); }
.tb-user-drop-item svg { flex-shrink: 0; color: var(--grey); }
.tb-user-drop-item--danger { color: #DC2626; }
.tb-user-drop-item--danger svg { color: #DC2626; }
.tb-user-drop-item--danger:hover { background: #FEF2F2; }

/* Dark mode overrides for dropdowns */
html[data-color-mode="dark"] .tb-globe-drop,
html[data-color-mode="dark"] .tb-user-drop {
    background: #1E2027; border-color: rgba(255,255,255,.1);
    box-shadow: 0 8px 32px -4px rgba(0,0,0,.4);
}
html[data-color-mode="dark"] .tb-globe-opt:hover,
html[data-color-mode="dark"] .tb-user-drop-item:hover { background: rgba(255,255,255,.06); }
html[data-color-mode="dark"] .tb-user-drop-info { background: #14151A; }
html[data-color-mode="dark"] .tb-user-drop-div  { background: rgba(255,255,255,.1); }
html[data-color-mode="dark"] .tb-user-drop-item--danger:hover { background: rgba(220,38,38,.12); }
html[data-color-mode="dark"] .tb-user-btn:hover { background: rgba(255,255,255,.06); }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD OVERVIEW  (all classes prefixed ov- to avoid collisions)
══════════════════════════════════════════════════════════════════════ */

/* ── Dashboard greeting header ──────────────────────────────────── */
.ov-compact-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 24px 28px;
    margin-inline: -28px;
    margin-top: -28px;
    background: linear-gradient(135deg, var(--steel) 0%, #263354 100%);
    border-radius: 0 0 20px 20px;
}
.ov-compact-hd .ov-greeting {
    margin: 0 0 4px; font-size: 1.85rem; color: #fff;
}
.ov-compact-hd .ov-hero-meta { margin: 0; color: rgba(255,255,255,.55); font-size: 0.86rem; }
.ov-compact-hd .btn-solid { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.ov-compact-hd .btn-solid:hover { background: rgba(255,255,255,.22); color: #fff; }
.ov-compact-hd .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
.ov-compact-hd .btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.ov-compact-hd select { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.86rem; cursor: pointer; }
.ov-compact-hd select option { background: #192038; color: #fff; }

/* ── Ops action-card grid ─────────────────────────────────────────── */
.ov-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.ov-ops-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 16px 14px;
    border-radius: var(--radius);
    background: var(--panel);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    min-height: 130px;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.ov-ops-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(20,21,26,.14); color: var(--ink); }

/* Icon badge — absolute top corner, tinted when card is active */
.ov-ops-icon {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(135,142,158,.10);
    color: var(--grey);
    transition: background .2s, color .2s;
}

/* Count: muted grey by default → vivid when a colour modifier is present */
.ov-ops-count {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--grey);
}

/* Active states: coloured top border + subtle gradient wash + tinted icon + vivid count */
.ov-ops-card--amber { border-top: 3px solid var(--amber); background: linear-gradient(150deg, rgba(245,158,11,.07) 0%, var(--panel) 58%); }
.ov-ops-card--amber .ov-ops-icon  { background: rgba(245,158,11,.15); color: var(--amber); }
.ov-ops-card--amber .ov-ops-count { color: var(--amber); }
.ov-ops-card--amber:hover { box-shadow: 0 12px 32px -8px rgba(245,158,11,.28); }

.ov-ops-card--red { border-top: 3px solid var(--red); background: linear-gradient(150deg, rgba(230,57,70,.07) 0%, var(--panel) 58%); }
.ov-ops-card--red .ov-ops-icon  { background: rgba(230,57,70,.15); color: var(--red); }
.ov-ops-card--red .ov-ops-count { color: var(--red-dark); }
.ov-ops-card--red:hover { box-shadow: 0 12px 32px -8px rgba(230,57,70,.24); }

.ov-ops-card--blue { border-top: 3px solid #3B82F6; background: linear-gradient(150deg, rgba(59,130,246,.07) 0%, var(--panel) 58%); }
.ov-ops-card--blue .ov-ops-icon  { background: rgba(59,130,246,.15); color: #3B82F6; }
.ov-ops-card--blue .ov-ops-count { color: #1D4ED8; }
.ov-ops-card--blue:hover { box-shadow: 0 12px 32px -8px rgba(59,130,246,.24); }

.ov-ops-card--green { border-top: 3px solid var(--green); background: linear-gradient(150deg, rgba(16,185,129,.07) 0%, var(--panel) 58%); }
.ov-ops-card--green .ov-ops-icon  { background: rgba(16,185,129,.15); color: var(--green); }
.ov-ops-card--green .ov-ops-count { color: var(--green); }
.ov-ops-card--green:hover { box-shadow: 0 12px 32px -8px rgba(16,185,129,.24); }

.ov-ops-card--purple { border-top: 3px solid #8B5CF6; background: linear-gradient(150deg, rgba(139,92,246,.07) 0%, var(--panel) 58%); }
.ov-ops-card--purple .ov-ops-icon  { background: rgba(139,92,246,.15); color: #8B5CF6; }
.ov-ops-card--purple .ov-ops-count { color: #6D28D9; }
.ov-ops-card--purple:hover { box-shadow: 0 12px 32px -8px rgba(139,92,246,.24); }

html[data-color-mode="dark"] .ov-ops-card--amber .ov-ops-count  { color: #FCD34D; }
html[data-color-mode="dark"] .ov-ops-card--red   .ov-ops-count  { color: #FCA5A5; }
html[data-color-mode="dark"] .ov-ops-card--blue  .ov-ops-count  { color: #93C5FD; }
html[data-color-mode="dark"] .ov-ops-card--green .ov-ops-count  { color: #6EE7B7; }
html[data-color-mode="dark"] .ov-ops-card--purple .ov-ops-count { color: #C4B5FD; }

/* ── Split card: pickups + returns merged into one ───────────────────────── */
.ov-ops-card--split {
    flex-direction: row;
    padding: 0;
    /* Disable the whole-card lift — each half has its own hover */
    cursor: default;
}
.ov-ops-card--split:hover { transform: none; box-shadow: none; }

.ov-split-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 16px 10px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    transition: background .14s;
    /* No border-radius — parent overflow:hidden clips to card corners */
}
.ov-split-half:hover { background: var(--paper); }

.ov-split-divider {
    width: 1px;
    background: var(--line);
    margin: 14px 0;
    flex-shrink: 0;
}

.ov-split-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(135,142,158,.10);
    color: var(--grey);
    margin-bottom: 4px;
    transition: background .15s, color .15s;
}
.ov-split-count {
    font-family: var(--font-display);
    font-size: 2.2rem; font-weight: 800; line-height: 1;
    color: var(--grey);
}
.ov-split-label {
    font-size: 0.72rem; font-weight: 700;
    color: var(--grey); line-height: 1.2;
}
.ov-split-sub {
    font-size: 0.66rem; color: var(--grey);
    line-height: 1.3; margin-top: 1px;
}

/* Pickup half — blue when active */
.ov-split-half--pickup.active { border-top: 3px solid #3B82F6; }
.ov-split-half--pickup.active .ov-split-icon  { background: rgba(59,130,246,.15); color: #3B82F6; }
.ov-split-half--pickup.active .ov-split-count { color: #1D4ED8; }
.ov-split-half--pickup.active .ov-split-label { color: var(--ink); }
.ov-split-half--pickup.active:hover { box-shadow: inset 0 0 0 999px rgba(59,130,246,.04); }

/* Return half — green when active */
.ov-split-half--return.active { border-top: 3px solid #10B981; }
.ov-split-half--return.active .ov-split-icon  { background: rgba(16,185,129,.15); color: #10B981; }
.ov-split-half--return.active .ov-split-count { color: #059669; }
.ov-split-half--return.active .ov-split-label { color: var(--ink); }
.ov-split-half--return.active:hover { box-shadow: inset 0 0 0 999px rgba(16,185,129,.04); }

/* Dark mode count colours for split halves */
html[data-color-mode="dark"] .ov-split-half--pickup.active .ov-split-count { color: #93C5FD; }
html[data-color-mode="dark"] .ov-split-half--return.active .ov-split-count  { color: #6EE7B7; }

.ov-ops-label { font-weight: 600; font-size: .84rem; margin-bottom: 2px; }
.ov-ops-sub   { font-size: .74rem; color: var(--grey); line-height: 1.3; }
.ov-ops-arrow {
    position: absolute; bottom: 12px;
    inset-inline-end: 14px;
    color: rgba(135,142,158,.30);
    transition: color .15s;
}
[dir="rtl"] .ov-ops-arrow { transform: scaleX(-1); }
.ov-ops-card:hover .ov-ops-arrow { color: var(--grey); }

@media (max-width: 640px) {
    .ov-ops-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ov-ops-count { font-size: 2.2rem; }
    .ov-ops-card  { padding: 14px 13px 12px; min-height: 110px; }
    .ov-ops-icon  { width: 32px; height: 32px; border-radius: 8px; }
}

/* ── Fleet status strip ───────────────────────────────────────────── */
.ov-fleet-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ov-fstrip-item {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ink);
}
.ov-fstrip-item:hover .ov-fstrip-lbl { color: var(--ink); }
.ov-fstrip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ov-fstrip-val { font-weight: 700; font-size: .95rem; }
.ov-fstrip-lbl { font-size: .78rem; color: var(--grey); }
.ov-fstrip-div { width: 1px; height: 18px; background: var(--line); flex-shrink: 0; }
.ov-fstrip-bar { flex: 1; min-width: 80px; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ov-fstrip-bar-fill { height: 100%; background: var(--red); border-radius: 3px; }
.ov-fstrip-pct { font-size: .78rem; color: var(--grey); white-space: nowrap; }
@media (max-width: 540px) {
    .ov-fstrip-bar, .ov-fstrip-pct { display: none; }
    .ov-fleet-strip { gap: 10px; padding: 10px 14px; }
}

/* ── Business overview section label ─────────────────────────────── */
.ov-biz-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 16px;
    color: var(--grey);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.ov-biz-hd::before, .ov-biz-hd::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ── Greeting ─────────────────────────────────────────────────────── */
.ov-greeting {
    font-size: 1.9rem;
    font-weight: 700;
    font-family: var(--font-display);
    margin: 0 0 2px;
    line-height: 1.1;
}
/* LTR: match the Plus Jakarta Sans ExtraBold treatment used on h1/h2 */
[dir="ltr"] .ov-greeting {
    font-family: var(--font-display); font-weight: 800;
    letter-spacing: -0.025em;
}
.ov-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--grey);
    font-size: 0.88rem;
    margin: 0;
}
/* ── Fleet at-a-glance card — dark gradient + SVG donut ring ──────── */
/* ── Alert banner ─────────────────────────────────────────────────── */
.ov-alert-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 20px;
}
.ov-alert-icon {
    flex-shrink: 0;
    color: #EF4444;
    display: flex;
    align-items: center;
}
.ov-alert-body { flex: 1; min-width: 0; }
.ov-alert-body strong { display: block; font-size: 0.92rem; color: #991B1B; }
.ov-alert-body span  { font-size: 0.8rem; color: #B91C1C; }
.ov-alert-link {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #EF4444;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid #FECACA;
    padding: 5px 12px;
    border-radius: 8px;
}
.ov-alert-link:hover { background: #FEE2E2; }
html[data-color-mode="dark"] .ov-alert-banner { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); }
html[data-color-mode="dark"] .ov-alert-body strong { color: #FCA5A5; }
html[data-color-mode="dark"] .ov-alert-body span { color: #F87171; }
html[data-color-mode="dark"] .ov-alert-link { color: #F87171; border-color: rgba(239,68,68,.3); }
html[data-color-mode="dark"] .ov-alert-link:hover { background: rgba(239,68,68,.15); }

/* ── KPI grid ─────────────────────────────────────────────────────── */
.ov-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}
.ov-kpi {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px 16px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: box-shadow .15s, transform .12s;
    position: relative;
}
.ov-kpi:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.ov-kpi--warn   { border-left: 3px solid #F59E0B; }
.ov-kpi--danger { border-left: 3px solid #EF4444; }
.ov-kpi--warn .ov-kpi-val   { color: #B45309; }
.ov-kpi--danger .ov-kpi-val { color: #EF4444; }
.ov-kpi-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ov-kpi-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.ov-kpi-lbl {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grey);
    line-height: 1.2;
}
.ov-kpi-val {
    font-family: var(--font-display);
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.ov-kpi-sub { font-size: 0.77rem; color: var(--grey); margin-top: 4px; line-height: 1.4; }
.ov-text-danger { color: #EF4444; font-weight: 600; }
.ov-kpi-bar-wrap { margin-top: 10px; }
.ov-kpi-bar-track { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ov-kpi-bar-fill  { height: 100%; background: #6366F1; border-radius: 3px; transition: width .5s ease; }
.ov-kpi-bar-lbl   { font-size: 0.71rem; color: var(--grey); margin-top: 4px; }

/* ── Analytics dual panels ─────────────────────────────────────────── */
.ov-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.ov-anl-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.ov-anl-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    min-height: 74px;
}
.ov-anl-hd-left {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}
.ov-anl-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ov-anl-title {
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--font-display);
}
.ov-anl-sub {
    font-size: 0.7rem;
    color: var(--grey);
    margin-top: 2px;
}
/* Subtle city-building decoration in the panel header */
.ov-anl-building {
    position: absolute;
    right: 0; bottom: 0;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    color: var(--ink);
}
/* 2-column grid of stats inside each panel */
.ov-anl-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ov-anl-stat {
    padding: 14px 18px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ov-anl-stat:nth-child(2n) { border-right: none; }
/* Full-width bottom row */
.ov-anl-stat--full {
    grid-column: span 2;
    border-right: none;
    border-bottom: none;
}
.ov-anl-lbl {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grey);
}
.ov-anl-val {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: var(--font-display);
    line-height: 1.1;
    color: var(--ink);
    margin-top: 2px;
}
.ov-anl-meta {
    font-size: 0.7rem;
    color: var(--grey);
    margin-top: 2px;
}
.ov-anl-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    margin-top: 4px;
    width: fit-content;
}
.ov-anl-badge--up { background: #DCFCE7; color: #15803D; }
.ov-anl-badge--dn { background: #FEE2E2; color: #B91C1C; }
/* Primary stat row — slightly larger figure, subtle highlight */
.ov-anl-stat--primary {
    background: color-mix(in srgb, var(--tint) 5%, transparent);
    border-radius: 8px;
    padding: 12px 14px !important;
    grid-column: span 2;
    border-right: none !important;
}
.ov-anl-stat--primary .ov-anl-val { font-size: 1.55rem; }
/* Country breakdown */
.ov-anl-countries {
    grid-column: span 2;
    padding: 12px 14px 4px;
    border-top: 1px solid var(--line);
}
.ov-anl-countries-hd {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--grey);
    margin-bottom: 10px;
}
.ov-anl-crow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}
.ov-anl-cname {
    font-size: 0.78rem;
    color: var(--ink);
    width: 140px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ov-anl-cbar-wrap {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.ov-anl-cbar {
    height: 100%;
    background: #8B5CF6;
    border-radius: 999px;
    min-width: 3px;
    transition: width 0.4s ease;
}
.ov-anl-ccount {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--grey);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Walk-in booking form ───────────────────────────────────────── */
.walkin-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
.walkin-section {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px 24px;
    margin-bottom: 16px;
}
.walkin-section-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.walkin-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--tint);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.walkin-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-display);
}
.walkin-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--line);
    color: var(--grey);
    padding: 2px 8px;
    border-radius: 999px;
}
/* Mode toggle (existing / new customer) */
.walkin-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.walkin-mode-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--grey);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.walkin-mode-tab--active {
    border-color: var(--tint);
    color: var(--tint);
    background: var(--panel);
}
/* Customer search */
.walkin-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.walkin-search-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.walkin-search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color .15s;
}
.walkin-search-input:focus { outline: none; border-color: var(--tint); }
.walkin-cust-dropdown {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    overflow: hidden;
    margin-bottom: 8px;
}
.walkin-cust-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid var(--line);
}
.walkin-cust-row:last-child { border-bottom: none; }
.walkin-cust-row:hover { background: var(--bg); }
.walkin-cust-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.walkin-cust-info { flex: 1; min-width: 0; font-size: 0.88rem; }
.walkin-cust-none {
    padding: 14px;
    font-size: 0.84rem;
    color: var(--grey);
    text-align: center;
}
.walkin-cust-chosen {
    border: 1.5px solid var(--tint);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--panel);
}
/* Name autocomplete drop inside the new-customer pane — floats over the form */
#newNameDrop { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 30; margin-bottom: 0; }
/* Email already-registered warning */
.walkin-email-warn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(201,122,30,.10); border: 1px solid rgba(201,122,30,.35); border-radius: var(--radius); font-size: .83rem; color: var(--ink); margin-bottom: 10px; }
/* Car grid */
.walkin-car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.walkin-car-card {
    display: flex; flex-direction: column;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.walkin-car-card input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.walkin-car-card:hover { border-color: var(--tint); }
.walkin-car-card--sel {
    border-color: var(--tint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 18%, transparent);
}
.walkin-car-img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
}
.walkin-car-ph {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    display: flex; align-items: center; justify-content: center;
}
.walkin-car-body { padding: 10px 12px 12px; }
.walkin-car-name { font-size: 0.86rem; font-weight: 700; line-height: 1.2; }
.walkin-car-meta { font-size: 0.74rem; color: var(--grey); margin-top: 2px; }
.walkin-car-rate {
    font-size: 0.92rem; font-weight: 700;
    color: var(--tint); margin-top: 6px;
    font-family: var(--font-display);
}
.walkin-car-rate span { font-size: 0.72rem; font-weight: 500; color: var(--grey); }
.walkin-car-check {
    display: none;
    position: absolute; top: 7px; right: 7px;
    width: 22px; height: 22px;
    background: var(--tint);
    border-radius: 50%;
    align-items: center; justify-content: center;
}
.walkin-car-card--sel .walkin-car-check { display: flex; }
/* Extras row */
.walkin-extra-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
/* Summary sidebar */
.walkin-side { position: sticky; top: 20px; }
.walkin-summary {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}
.walkin-summary-hd {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--grey);
    margin-bottom: 14px;
}
.walkin-sum-car {
    font-size: 1rem; font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 4px;
}
.walkin-sum-customer {
    font-size: 0.82rem; color: var(--grey); margin-bottom: 14px;
}
.walkin-sum-rows { margin-top: 14px; }
.walkin-sum-row {
    display: flex; justify-content: space-between;
    font-size: 0.84rem; padding: 5px 0;
    color: var(--grey);
}
.walkin-sum-row--total {
    font-size: 1.05rem; font-weight: 700;
    font-family: var(--font-display);
    color: var(--ink);
    padding-top: 10px;
}
.walkin-sum-divider {
    height: 1px; background: var(--line);
    margin: 8px 0;
}
@media (max-width: 1024px) {
    .walkin-layout { grid-template-columns: 1fr; }
    .walkin-side { position: static; }
    .walkin-summary { margin-bottom: 16px; }
}
@media (max-width: 640px) {
    .walkin-section { padding: 16px; }
    .walkin-car-grid { grid-template-columns: 1fr 1fr; }
    .walkin-mode-tabs { flex-wrap: wrap; }
}

@media (max-width: 900px) {
    .ov-analytics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ov-anl-hd   { padding: 14px 16px; }
    .ov-anl-stat { padding: 12px 14px; }
    .ov-anl-val  { font-size: 1.15rem; }
    .ov-anl-sub  { display: none; }
}

/* ── Section headings ─────────────────────────────────────────────── */
.ov-section-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ov-section-title { font-size: 1.1rem; margin: 0; }
.ov-section-chip {
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--line);
    color: var(--grey);
    padding: 2px 9px;
    border-radius: 999px;
}

/* ── Today's schedule ─────────────────────────────────────────────── */
.ov-sch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
}
.ov-sch-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.ov-sch-card::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0; inset-inline-end: 0;
    height: 3px;
}
.ov-sch-card--blue::before   { background: #3B82F6; }
.ov-sch-card--amber::before  { background: #F59E0B; }
.ov-sch-card--has-overdue::before { background: #EF4444; }
.ov-sch-hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.ov-sch-hd-left { display: flex; align-items: center; gap: 12px; }
.ov-sch-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.ov-sch-card--blue  .ov-sch-num { color: #3B82F6; }
.ov-sch-card--amber .ov-sch-num { color: #D97706; }
.ov-sch-card--has-overdue .ov-sch-num { color: #EF4444; }
.ov-sch-title { font-size: 0.85rem; font-weight: 700; line-height: 1.3; }
.ov-sch-sub   { font-size: 0.73rem; color: var(--grey); margin-top: 2px; }
.ov-sch-art   { opacity: .18; flex-shrink: 0; }
.ov-overdue-chip {
    display: inline-block;
    background: #FEE2E2;
    color: #991B1B;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    margin-inline-start: 5px;
    vertical-align: middle;
}
.ov-sch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}
.ov-sch-row--overdue { background: color-mix(in srgb,#EF4444 4%,transparent); margin: 0 -20px; padding: 9px 20px; }
.ov-sch-av {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ov-sch-body { flex: 1; min-width: 0; }
.ov-sch-name   { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-sch-detail { font-size: 0.75rem; color: var(--grey); margin-top: 2px; }
.ov-sch-more   { font-size: 0.77rem; color: var(--grey); margin: 10px 0 0; text-align: center; }
.ov-sch-more a { color: var(--tint); }
.ov-badge-danger {
    display: inline-block;
    background: #EF4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    margin-inline-start: 4px;
    vertical-align: middle;
}

/* ── Panels (ov-panel, distinct from legacy .panel) ───────────────── */
.ov-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.ov-panel--danger { border-color: color-mix(in srgb,#EF4444 25%,var(--line)); }
.ov-panel-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
}
.ov-panel-hd h2 { font-size: 1rem; margin: 0; }
.ov-panel-hd-left { display: flex; align-items: center; gap: 8px; }
.ov-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--line);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
}
.ov-count-badge--danger { background: #EF4444; color: #fff; }

/* ── Action feed rows ─────────────────────────────────────────────── */
.ov-feed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.ov-feed-row:last-child { border-bottom: none; }
.ov-feed-row--danger { background: color-mix(in srgb,#EF4444 4%,transparent); margin: 0 -22px; padding: 11px 22px; }
.ov-feed-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ov-feed-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.ov-feed-icon--danger { background: #EF4444; }
.ov-feed-icon--amber  { background: #F59E0B; }
.ov-feed-icon--blue   { background: #3B82F6; }
.ov-feed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-feed-title { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-feed-sub   { font-size: 0.77rem; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Recent activity — table (desktop) + cards (mobile) ──────────── */
.ov-activity-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-top: 4px; }
.ov-activity-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: var(--panel); }
.ov-activity-table th, .ov-activity-table td { padding: 11px 14px; text-align: left; white-space: nowrap; }
.ov-activity-table thead th { background: var(--paper); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); font-weight: 700; }
.ov-activity-table tbody tr { border-top: 1px solid var(--line); }
.ov-activity-table tbody tr:hover { background: var(--paper); }
.ov-ref-link { font-weight: 700; color: var(--tint); text-decoration: none; }
.ov-ref-link:hover { text-decoration: underline; }
.ov-nowrap { white-space: nowrap; }
.ov-activity-cards { display: none; } /* shown on mobile via media query */
.ov-act-card {
    display: block;
    text-decoration: none;
    color: var(--ink);
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.ov-act-card:last-child { border-bottom: none; }
.ov-act-card:hover { color: var(--tint); }
.ov-act-card-top  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.ov-act-card-main { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
.ov-act-card-sub  { font-size: 0.77rem; color: var(--grey); }
.ov-act-card-amount { font-size: 0.82rem; font-weight: 700; color: var(--ink); margin-top: 5px; }

/* ── Empty state ──────────────────────────────────────────────────── */
.ov-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 10px;
    color: var(--grey);
    font-size: 0.84rem;
    gap: 6px;
    text-align: center;
}
.ov-empty svg { opacity: .3; }

/* ── btn-xs ───────────────────────────────────────────────────────── */
.btn-xs { padding: 4px 10px; font-size: 0.75rem; border-radius: 6px; }

/* ── Dark mode overrides ──────────────────────────────────────────── */
html[data-color-mode="dark"] .ov-overdue-chip { background: rgba(239,68,68,.2); color: #FCA5A5; }
html[data-color-mode="dark"] .ov-sch-row--overdue { background: rgba(239,68,68,.08); }
html[data-color-mode="dark"] .ov-feed-row--danger  { background: rgba(239,68,68,.08); }
html[data-color-mode="dark"] .ov-activity-table tbody tr:hover { background: rgba(255,255,255,.04); }
html[data-color-mode="dark"] .ov-activity-table thead th { background: var(--paper); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ov-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ov-greeting { font-size: 1.55rem; }
    .ov-sch-grid { grid-template-columns: 1fr; }
    .ov-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ov-kpi { padding: 14px 14px 12px; }
    .ov-kpi-val { font-size: 1.6rem; }
    .ov-kpi-icon { width: 30px; height: 30px; border-radius: 8px; }
    .ov-panel { padding: 16px; }
    .ov-panel-hd { padding-bottom: 12px; }
    .ov-feed-row--danger { margin: 0 -16px; padding: 11px 16px; }
    /* Switch from table to card list on mobile */
    .ov-activity-table-wrap { display: none; }
    .ov-activity-cards { display: block; }
    .ov-alert-banner { flex-wrap: wrap; gap: 10px; }
    .ov-alert-link { width: 100%; text-align: center; }
}

/* ── Topbar global search ──────────────────────────────────────────── */
.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-inline-end: 4px;
}
.topbar-search-icon {
    position: absolute;
    inset-inline-start: 9px;
    color: var(--grey);
    pointer-events: none;
    flex-shrink: 0;
}
.topbar-search-input {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    padding: 0 28px 0 30px;
    font-size: 0.875rem;
    color: var(--ink);
    font-family: inherit;
    width: 210px;
    transition: width .2s ease, box-shadow .15s;
    outline: none;
    -webkit-appearance: none;
}
.topbar-search-input::placeholder { color: var(--grey); }
.topbar-search-input:focus {
    width: 270px;
    border-color: var(--tint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 14%, transparent);
}
.topbar-search-clear {
    position: absolute;
    inset-inline-end: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
}
.topbar-search-clear:hover { color: var(--ink); background: var(--line); }
.topbar-search-toggle {
    display: none; /* mobile only — shown via media query */
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    padding: 6px;
    border-radius: 8px;
    line-height: 0;
}
.topbar-search-toggle:hover { background: var(--paper); }

/* Search results dropdown */
.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 340px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    z-index: 600;
    overscroll-behavior: contain;
}
.search-dropdown.open { display: block; }
.search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: background .1s;
    cursor: pointer;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.sr-active { background: var(--paper); }
.search-result-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.search-result-icon.sri-reservation { background: color-mix(in srgb, var(--tint) 12%, var(--paper)); color: var(--tint); }
.search-result-icon.sri-customer    { background: color-mix(in srgb, #8B5CF6 12%, var(--paper)); color: #8B5CF6; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-title { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-sub   { font-size: 0.76rem; color: var(--grey); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-state { padding: 18px 16px; text-align: center; color: var(--grey); font-size: 0.875rem; }
.search-group-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--grey);
    padding: 8px 14px 4px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

html[data-color-mode="dark"] .topbar-search-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
html[data-color-mode="dark"] .topbar-search-input:focus { border-color: var(--tint); }
html[data-color-mode="dark"] .search-result:hover,
html[data-color-mode="dark"] .search-result.sr-active { background: rgba(255,255,255,.05); }
.topbar-user-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    font-family: var(--font-display); flex-shrink: 0; font-size: 0.9rem;
}
.admin-sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(10,10,14,0.5);
    z-index: 295;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.admin-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

.admin-flash-stack { padding: 18px 28px 0; display: grid; gap: 10px; }
/* top/bottom only — .wrap already supplies the left/right inset on this
   same element; see .footer-cta-inner note above. */
.admin-footer-bottom { padding-top: 20px; padding-bottom: 34px; font-size: 0.8rem; }

@media (max-width: 1024px) {
    .admin-shell .dash-side {
        position: fixed; top: 0; left: 0; transform: translateX(-100%);
        transition: transform 0.25s ease; box-shadow: 0 0 40px rgba(0,0,0,0.3);
        height: 100dvh;
        /* Above the bottom nav (300) and backdrop (295) */
        z-index: 350;
    }
    [dir="rtl"] .admin-shell .dash-side { left: auto; right: 0; transform: translateX(100%); }
    .admin-shell .dash-side.open { transform: translateX(0); }
    /* Desktop controls hidden; sidebar footer controls visible instead */
    .topbar-desktop-only { display: none !important; }
    .sidebar-close { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--grey); cursor: pointer; padding: 6px; }
    .sidebar-open {
        display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
        background: none; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); cursor: pointer;
    }
    .admin-sidebar-backdrop { display: block; }
}

/* Sidebar mobile controls visible on ≤1024 px; hidden on desktop */
@media (min-width: 1025px) {
    .side-mobile-only { display: none; }
}

/* ── Tablet dashboard optimisations (landscape iPad = primary ops surface) ──
   Goal: greeting becomes a slim status bar; numbers get bigger; Today's
   Schedule is visible without scrolling; New Booking lives in the topbar.   */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Slim greeting — staff don't need a big welcome, they need live data */
    .ov-compact-hd {
        padding: 13px 20px;
        margin-inline: -16px;   /* counteract the 16px tablet dash-main padding */
        margin-top: -20px;      /* counteract the 20px tablet dash-main padding */
        border-radius: 0;       /* flush to edges under the topbar */
        gap: 10px;
    }
    .ov-compact-hd .ov-greeting { font-size: 1.25rem; margin-bottom: 0; }
    /* Hide the date and the dashboard CTA only — topbar New Booking covers this.
       Other pages' compact headers keep their action buttons and subtitles. */
    .ov-compact-hd--dash .ov-hero-meta,
    .ov-compact-hd--dash .btn-solid { display: none; }

    /* Ops cards — auto-fit already handles 4 or 5 in one row;
       make the numbers bigger so they're readable at a glance              */
    .ov-ops-count { font-size: 3rem; }
    .ov-ops-card  { padding: 14px 13px 12px; min-height: 120px; }

    /* Fleet strip — tighter on tablet */
    .ov-fleet-strip { padding: 9px 14px; gap: 10px; }
}

@media (max-width: 640px) {
    .admin-topbar { padding: 0 16px; gap: 6px; }
    .admin-topbar-title { font-size: 0.96rem; }
    .topbar-user-meta { display: none; }
    .topbar-user { padding-left: 6px; border-left: none; }
    /* ── Stat strip: 2×N grid on phones ─────────────────────────────────────
       The connected strip switches to a 2-column grid; dividers are kept via
       border-inline-end on odd children and border-bottom on all but the last row. */
    .pg-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
    .pg-stat  { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
    .pg-stat:nth-child(even) { border-inline-end: none; }
    .pg-stat:nth-last-child(-n+2) { border-bottom: none; }
    .pg-stat-val { font-size: 1.5rem; }
    .pg-stat-sub { display: none; }
    .pg-stat-icon { width: 26px; height: 26px; top: 10px; border-radius: 6px; }
    /* Home button: visible on mobile/tablet, hidden on desktop (sidebar covers it) */
    .topbar-home-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        color: var(--grey);
        text-decoration: none;
        transition: background .15s, color .15s;
    }
    .topbar-home-btn:hover { color: var(--ink); background: var(--paper); }
    .topbar-home-btn.is-home {
        color: var(--tint);
        background: color-mix(in srgb, var(--tint) 12%, transparent);
    }
    /* Search: hide persistent box, show toggle button */
    .topbar-search { display: none; }
    .topbar-search-toggle { display: flex; }
    /* When search is open on mobile: full-width bar below topbar */
    .admin-topbar.search-active { flex-wrap: wrap; height: auto; padding-bottom: 10px; }
    .admin-topbar.search-active .topbar-search {
        display: flex; order: 10;
        width: 100%; flex: 0 0 100%;
        margin: 6px 0 0; padding: 0 4px;
    }
    .admin-topbar.search-active .topbar-search-input {
        display: block; width: 100%;
        flex: 1; height: 38px;
    }
    .admin-topbar.search-active .topbar-search-input:focus { width: 100%; }
    .admin-topbar.search-active .search-dropdown {
        position: fixed;
        top: auto; /* JS sets this */
        inset-inline-start: 0; inset-inline-end: 0;
        min-width: unset; max-height: 55vh;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .dash-main { padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 48px); }
    /* Compact header: match mobile dash-main padding; wrap so multi-action
       headers (invoice, contract, calendar) never overflow horizontally.     */
    .ov-compact-hd {
        padding: 14px 16px;
        margin-inline: -16px;
        margin-top: -20px;
        border-radius: 0;
        gap: 8px;
        flex-wrap: wrap;
    }
    .ov-compact-hd .ov-greeting { font-size: 1.2rem; margin-bottom: 0; }
    /* Allow every non-text child (action buttons/forms) to shrink and wrap.
       !important overrides the inline flex-shrink:0 present on some pages.  */
    .ov-compact-hd > *:not(:first-child) {
        flex-shrink: 1 !important;
        flex-wrap: wrap;
        min-width: 0;
    }
    /* Topbar New Booking: icon-only on narrow phones to save topbar space */
    .topbar-new-booking span { display: none; }
    .topbar-new-booking { padding: 7px 9px; }
    .admin-flash-stack { padding: 14px 16px 0; }
    /* Admin footer — same safe-area rule as the public footer-bottom */
    .admin-footer-bottom { padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); }
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 30px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stat-card .label { font-size: 0.78rem; color: var(--grey); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.stat-card .value { font-family: var(--font-display); font-size: 1.7rem; }
.stat-card .sub { font-size: 0.78rem; color: var(--grey); margin-top: 4px; }
.stat-card.accent { background: #14151A; color: #fff; border-color: #14151A; }
.stat-card.accent .label { color: #9CA0AC; }
.stat-card.accent .sub { color: #9CA0AC; }
.stat-card.sc-warn { border-left: 3px solid var(--amber); }
.stat-card.sc-warn .value { color: var(--amber); }
.stat-card.sc-danger { border-left: 3px solid var(--red); }
.stat-card.sc-danger .value { color: var(--red); }

/* ============================================================
   Page-level stat strip — compact KPIs on list/admin pages
   ============================================================ */
/* ── Page stat strip — single connected panel, cells with dividers ────────── */
.pg-stats {
    display: flex;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 22px;
    overflow: hidden;
}
.pg-stat {
    flex: 1;
    position: relative;
    padding: 18px 20px 15px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    border-inline-end: 1px solid var(--line);
    overflow: hidden;
    transition: background .15s;
}
.pg-stat:last-child { border-inline-end: none; }
a.pg-stat { cursor: pointer; }
a.pg-stat:hover  { background: var(--bg); color: var(--ink); }
a.pg-stat:active { opacity: .82; }
a.pg-stat:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }

/* Tinted icon badge — absolute top-inline-end corner */
.pg-stat-icon {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--line);
    color: var(--grey);
    flex-shrink: 0;
    pointer-events: none;
}

.pg-stat-lbl { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey); margin-bottom: 6px; }
.pg-stat-val { font-size: 2rem; font-weight: 800; font-family: var(--font-display); line-height: 1; margin-bottom: 4px; color: var(--ink); }
.pg-stat-sub { font-size: 0.72rem; color: var(--grey); line-height: 1.3; }

/* Dark first cell — always-dark regardless of colour mode */
.pg-stat--dark { background: #0D0F17; }
.pg-stat--dark .pg-stat-lbl  { color: rgba(255,255,255,.42); }
.pg-stat--dark .pg-stat-val  { color: #fff; }
.pg-stat--dark .pg-stat-sub  { color: rgba(255,255,255,.36); }
.pg-stat--dark .pg-stat-icon { background: rgba(255,255,255,.10); color: rgba(255,255,255,.60); }
a.pg-stat--dark:hover { background: #13151E; }

/* Accent variants — icon tinted + vivid number + subtle cell hover wash */
.pg-stat--green .pg-stat-val  { color: var(--green); }
.pg-stat--green .pg-stat-icon { background: rgba(16,185,129,.13); color: var(--green); }
a.pg-stat--green:hover { background: rgba(16,185,129,.05); }

.pg-stat--amber .pg-stat-val  { color: var(--amber); }
.pg-stat--amber .pg-stat-icon { background: rgba(245,158,11,.13); color: var(--amber); }
a.pg-stat--amber:hover { background: rgba(245,158,11,.05); }

.pg-stat--red .pg-stat-val  { color: var(--red); }
.pg-stat--red .pg-stat-icon { background: rgba(230,57,70,.13); color: var(--red); }
a.pg-stat--red:hover { background: rgba(230,57,70,.05); }

.pg-stat--blue .pg-stat-val  { color: #3B82F6; }
.pg-stat--blue .pg-stat-icon { background: rgba(59,130,246,.13); color: #3B82F6; }
a.pg-stat--blue:hover { background: rgba(59,130,246,.05); }

/* ── Page-level filter tabs (pill style with counts) ───────────────── */
.pg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.pg-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
    border: 1.5px solid var(--line); background: var(--panel); color: var(--ink-soft);
    text-decoration: none; transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.pg-tab:hover { border-color: var(--ink-soft); color: var(--ink); }
.pg-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pg-tab-n { background: var(--line); color: var(--grey); border-radius: 999px; padding: 1px 7px; font-size: 0.68rem; font-weight: 700; }
.pg-tab.is-active .pg-tab-n { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Avatar circle ──────────────────────────────────────────────────── */
.av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; color: #fff; font-family: var(--font-display); }

/* ── Name+sub in a table cell ───────────────────────────────────────── */
.tbl-main { display: flex; align-items: center; gap: 10px; }
.tbl-main-info { display: flex; flex-direction: column; gap: 1px; }
.tbl-main-name { font-weight: 600; font-size: 0.88rem; }
.tbl-main-sub  { font-size: 0.74rem; color: var(--grey); }

/* ── Small fleet photo in table ─────────────────────────────────────── */
/* Fleet thumbnail (used in desktop table only) */
.fleet-thumb { width: 62px; height: 36px; border-radius: 6px; object-fit: cover; display: block; background: #0c1120; flex-shrink: 0; }
.fleet-thumb-ph { width: 62px; height: 36px; border-radius: 6px; flex-shrink: 0;
    background: linear-gradient(135deg, #0f1b35 0%, #1c3060 100%);
    display: inline-flex; align-items: center; justify-content: center; }

/* ── Fleet mobile card (fc-card) ────────────────────────────────────
   Separate from mob-card so reservations/customers cards are untouched.
   RTL-aware: uses logical CSS properties throughout.
────────────────────────────────────────────────────────────────── */
.fc-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .15s, transform .15s;
}
.fc-card:active { transform: scale(.985); }
/* Full-width image banner */
.fc-img {
    position: relative;
    aspect-ratio: 5/2;
    background: linear-gradient(135deg, #0f1b35 0%, #1e3a6e 60%, #0f1b35 100%);
    overflow: hidden;
}
.fc-img-photo {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.fc-img-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
/* Status chip overlaid — inset-inline-end flips in RTL automatically */
.fc-img .sc {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* Body */
.fc-body {
    padding: 11px 14px 9px;
    display: flex; flex-direction: column; gap: 3px;
}
.fc-row {
    display: flex; align-items: baseline;
    justify-content: space-between; gap: 8px;
}
.fc-name {
    font-size: 0.93rem; font-weight: 700;
    font-family: var(--font-display); line-height: 1.2;
    flex: 1; min-width: 0;
}
.fc-price {
    font-size: 0.92rem; font-weight: 700;
    color: var(--tint); white-space: nowrap;
    font-family: var(--font-display); flex-shrink: 0;
}
.fc-price span { font-size: 0.68rem; font-weight: 500; color: var(--grey); }
.fc-meta {
    font-size: 0.74rem; color: var(--grey); line-height: 1.4;
}
.fc-plate {
    display: inline-block;
    font-size: 0.72rem; letter-spacing: 0.05em;
    background: var(--line); color: var(--ink);
    padding: 2px 8px; border-radius: 5px;
    margin-top: 4px; width: fit-content;
    font-variant-numeric: tabular-nums;
}
/* Footer */
.fc-ft {
    display: flex; justify-content: flex-end; gap: 7px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
}

/* ── Car status chips (coloured dot + label) ────────────────────────── */
.sc { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sc::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sc-available  { background: #DCFCE7; color: #15803D; } .sc-available::before  { background: #22C55E; }
.sc-booked     { background: #DBEAFE; color: #1D4ED8; } .sc-booked::before     { background: #3B82F6; }
.sc-maintenance{ background: #FEF3C7; color: #92400E; } .sc-maintenance::before{ background: #F59E0B; }
.sc-cleaning   { background: #F3E8FF; color: #7C3AED; } .sc-cleaning::before   { background: #A855F7; }

/* ── Mobile-only card list + table-only wrapper ─────────────────────── */
.mob-cards { display: none; flex-direction: column; gap: 10px; }
.mob-card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
    text-decoration: none; color: inherit;
}
.mob-card:hover { box-shadow: 0 4px 18px -4px rgba(10,14,30,.12); }
.mob-card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mob-card-title { font-size: 0.9rem; font-weight: 700; line-height: 1.2; }
.mob-card-sub   { font-size: 0.76rem; color: var(--grey); margin-top: 1px; }
.mob-card-body  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.mob-card-item  { display: flex; flex-direction: column; gap: 1px; }
.mob-card-item-lbl { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey); }
.mob-card-item-val { font-size: 0.82rem; }
.mob-card-ft { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
@media (max-width: 640px) {
    .mob-cards { display: flex; }
    .tbl-only  { display: none; }
}
.util-bar-wrap { margin-top: 10px; }
.util-bar-track { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.util-bar-fill { height: 100%; background: var(--tint); border-radius: 3px; transition: width .5s ease; }

/* ── Today's schedule grid ─────────────────────────────────── */
.today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.today-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; }
.today-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 3px; }
.today-card.tc-pickups::before { background: var(--tint); }
.today-card.tc-returns::before { background: #F59E0B; }
.today-card-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tc-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 700; }
.tc-pickups .tc-num { color: var(--tint); }
.tc-returns .tc-num { color: #D97706; }
.tc-lbl { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey); margin-top: 6px; }
.tc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.tc-row-overdue { background: color-mix(in srgb, var(--red) 4%, transparent); margin: 0 -20px; padding: 9px 20px; }
.tc-row-main { flex: 1; min-width: 0; }
.tc-row-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-row-sub { font-size: 0.76rem; color: var(--grey); margin-top: 2px; }
.tc-empty { text-align: center; padding: 20px 0 8px; color: var(--grey); font-size: 0.875rem; }
.badge-danger { display: inline-block; background: var(--red); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; vertical-align: middle; margin-inline-start: 4px; }
.notice-count { display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; margin-inline-start: 8px; vertical-align: middle; }
.notice-overdue { background: color-mix(in srgb, var(--red) 5%, var(--panel)); }
@media (max-width: 680px) { .today-grid { grid-template-columns: 1fr; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; }
.panel h2 { font-size: 1.15rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

/* Notification rows */
.notice-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.notice-row:last-child { border-bottom: none; }
.notice-icon { width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.notice-icon.due-today { background: #FBEED9; }
.notice-icon.overdue { background: #FBE7E7; }
.notice-icon.upcoming { background: #E9EEF7; }
.notice-body { flex: 1; min-width: 0; }
.notice-body b { display: block; font-size: 0.92rem; }
.notice-body span { font-size: 0.8rem; color: var(--grey); }
.empty-state { text-align: center; padding: 30px 10px; color: var(--grey); }

/* Tables */
/* Scroll-shadow affordance: the local-attachment gradients travel with the
   table and mask the fixed radial shadows at both edges, so the shadow only
   shows when there is off-screen content in that direction. The final layer
   sets the base background colour (table itself is transparent so the wrap
   bg is visible between rows). */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(to right, var(--panel) 8px, transparent) left   / 44px 100% no-repeat local,
    linear-gradient(to left,  var(--panel) 8px, transparent) right  / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0   50%, rgba(0,0,0,.10), transparent) left  / 20px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right / 20px 100% no-repeat scroll,
    var(--panel);
}
/* Table is transparent so .table-wrap background shows through body rows */
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data-table th, table.data-table td { padding: 13px 16px; text-align: left; white-space: nowrap; }
table.data-table thead th { background: var(--paper); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); font-weight: 700; }
table.data-table tbody tr { border-top: 1px solid var(--line); background: var(--panel); }
table.data-table tbody tr:hover { background: var(--paper); }
.row-actions { display: flex; gap: 6px; }

/* ── Sticky columns (admin list tables only) ──────────────────────────────
   First column keeps the identifier (name / ref) visible while scrolling;
   last column keeps row actions in thumb reach at all times.
   Logical properties (inset-inline-start / inset-inline-end) make the
   sticky side flip automatically in RTL layouts (Arabic / Kurdish / Farsi)
   so the correct column sticks at the correct physical edge in every locale.
   Explicit background colours are required — sticky cells paint over the
   scrolling content beneath them.                                           */
.admin-shell table.data-table thead th:first-child,
.admin-shell table.data-table tbody  td:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--panel); }
.admin-shell table.data-table thead th:first-child  { background: var(--paper); }
.admin-shell table.data-table thead th:last-child,
.admin-shell table.data-table tbody  td:last-child  { position: sticky; inset-inline-end: 0; z-index: 2; background: var(--panel); }
.admin-shell table.data-table thead th:last-child   { background: var(--paper); }
/* Lift-line: thin shadow on the trailing edge of each sticky column.
   box-shadow is a physical property, so we apply LTR values by default
   and flip them for RTL with a [dir="rtl"] override.                       */
.admin-shell table.data-table td:first-child { box-shadow:  3px 0 8px -3px rgba(0,0,0,.10); }
.admin-shell table.data-table td:last-child  { box-shadow: -3px 0 8px -3px rgba(0,0,0,.10); }
[dir="rtl"] .admin-shell table.data-table td:first-child { box-shadow: -3px 0 8px -3px rgba(0,0,0,.10); }
[dir="rtl"] .admin-shell table.data-table td:last-child  { box-shadow:  3px 0 8px -3px rgba(0,0,0,.10); }
/* Hover: sticky cells must match the row hover background                  */
.admin-shell table.data-table tbody tr:hover td:first-child,
.admin-shell table.data-table tbody tr:hover td:last-child { background: var(--paper); }

.mini-car { display: flex; align-items: center; gap: 10px; }
.mini-car .car-art { width: 56px; height: 30px; border-radius: 6px; }

/* ============================================================
   Car detail
   ============================================================ */
.car-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.car-detail .car-art { width: 100%; height: auto; border-radius: 10px; background: var(--paper); padding: 22px 22px 8px; box-sizing: border-box; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.spec-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.spec-item .label { font-size: 0.72rem; text-transform: uppercase; color: var(--grey); font-weight: 700; letter-spacing: 0.04em; }
.spec-item .value { font-family: var(--font-display); font-size: 1rem; }
.book-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: sticky; top: 96px; }
.book-box .rate-line { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; }
.book-box .rate-line b { font-family: var(--font-display); font-size: 1.8rem; }


/* ============================================================
   Contract / print
   ============================================================ */
.contract-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; max-width: 800px; margin: 0 auto; }
.contract-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 18px; margin-bottom: 22px; }
.contract-head h1 { font-size: 1.4rem; margin-bottom: 2px; }
.contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.contract-block h4 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey); margin-bottom: 8px; }
.contract-block p { margin: 0 0 3px; font-size: 0.92rem; }
.terms { font-size: 0.82rem; color: var(--ink-soft); background: var(--paper); border-radius: var(--radius-sm); padding: 16px; max-height: 160px; overflow: auto; margin-bottom: 22px; }
.terms ol { margin: 0; padding-left: 18px; }
.terms li { margin-bottom: 6px; }
.sign-area { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sign-pad-wrap canvas { width: 100%; height: 160px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); touch-action: none; background: #fff; }
.sign-meta { font-size: 0.8rem; color: var(--grey); margin-top: 8px; }
.signed-stamp { display: flex; align-items: center; gap: 10px; padding: 14px; background: #E4F5EC; border-radius: var(--radius-sm); color: var(--green); font-weight: 600; font-size: 0.9rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: #14151A; color: #EDEDEF; margin-top: 40px; }

.footer-cta { border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-cta-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    flex-wrap: wrap;
    /* top/bottom only — .wrap already supplies the left/right inset on this
       same element; a padding shorthand here would zero that out and make
       the content touch the viewport edge. */
    padding-top: 40px;
    padding-bottom: 40px;
}
.footer-cta h3 { color: #fff; font-size: 1.5rem; margin-bottom: 4px; }
.footer-cta .muted { color: #9CA0AC; margin: 0; }
.footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-cta-ghost { color: #fff; border-color: rgba(255,255,255,0.32); }
.footer-cta-ghost:hover { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); }

.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    /* top/bottom only — see .footer-cta-inner note above. */
    padding-top: 48px;
    padding-bottom: 36px;
}
.footer-col h4 { color: #fff; font-size: 0.88rem; margin-bottom: 16px; }
.footer-inner .muted { color: #9CA0AC; }
.footer-inner .brand { color: #fff; margin-bottom: 14px; }
.footer-inner .brand .brand-mark { background: rgba(255,255,255,0.1); }
.footer-inner a { color: #EDEDEF; }
.footer-inner a:hover { color: var(--red); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.9rem; }
.footer-directions { color: var(--red); font-weight: 600; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social-ic {
    width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center; color: #EDEDEF; flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.footer-social-ic:hover { background: var(--red); color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    /* top/bottom only — see .footer-cta-inner note above. */
    padding-top: 18px;
    /* Bottom: our 20 px breathing room + device home-bar inset.
       On iPhone with home indicator (34 px): 20 + 34 = 54 px.
       On desktop / non-notched Android: 20 + 0  = 20 px.      */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    font-size: 0.82rem;
    color: #7C818C;
}

@media (max-width: 860px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .footer-inner { grid-template-columns: 1fr; }
    .footer-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        /* Extra vertical breathing room on small phones */
        padding-top: 32px;
        padding-bottom: 32px;
    }
    /* Stack footer columns with tighter gaps on small screens */
    .footer-inner { padding-top: 36px; padding-bottom: 28px; gap: 28px; }
}

/* ══ PWA install banner ═══════════════════════════════════════════════════════
   Slides up from below the viewport when JS confirms the browser supports
   installation (beforeinstallprompt) or when the user is on iOS.            */
.pwa-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 1100;
    display: flex; align-items: center; gap: 12px;
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 32px rgba(0,0,0,.18);
    padding: 14px 16px;
    padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.pwa-banner.pwa-open { transform: translateY(0); }
.pwa-banner-icon {
    width: 48px; height: 48px; border-radius: 12px;
    flex-shrink: 0; object-fit: cover;
}
.pwa-banner-body { flex: 1; min-width: 0; }
.pwa-banner-title { display: block; font-weight: 700; font-size: .88rem; color: var(--ink); }
.pwa-banner-sub   { display: block; font-size: .76rem; color: var(--grey); margin-top: 2px; }
.pwa-banner-cta   { flex-shrink: 0; font-size: .82rem; padding: 7px 14px; }
.pwa-banner-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    flex-shrink: 0; color: var(--grey);
    background: var(--paper); transition: background .12s;
}
.pwa-banner-close:hover { background: var(--line); color: var(--ink); }

/* iOS banner has extra bottom padding so it doesn't sit on the home indicator,
   and a downward arrow that visually points to the share button in the toolbar */
.pwa-ios-banner { padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 28px)); }
.pwa-ios-arrow {
    position: absolute;
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid var(--line);
}

/* ══ Footer "Get the App" install section ════════════════════════════════════
   Sits in the brand column of the public footer (dark bg #14151A).          */
.footer-install {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.footer-install h4 { color: #fff; font-size: .86rem; margin: 0 0 5px; }
.footer-install > .muted { font-size: .77rem; color: #9CA0AC; margin: 0 0 12px; }
.pwa-footer-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,.09); color: #E8EAF0;
    border: 1px solid rgba(255,255,255,.14);
    font-size: .81rem; font-weight: 600; cursor: pointer;
    transition: background .13s, border-color .13s;
    white-space: nowrap;
}
.pwa-footer-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); }
.pwa-no-prompt { font-size: .74rem; color: #9CA0AC; margin-top: 8px; line-height: 1.45; }
.pwa-footer-ios-hint { font-size: .76rem; color: #9CA0AC; margin-top: 8px; line-height: 1.45; }

@media print {
    .site-header, .site-footer, .no-print, .dash-side { display: none !important; }
    /* Force white-on-black regardless of the active colour mode so the
       printed output is always clean and legible. */
    body { background: #fff !important; color: #000 !important; }
    .contract-sheet {
        border: none; padding: 0;
        background: #fff !important;
        color: #000 !important;
    }
    .contract-sheet * { color: inherit !important; background: transparent !important; }
    .contract-head { border-bottom-color: #000 !important; }
    .terms { background: #f5f5f5 !important; color: #000 !important; max-height: none; overflow: visible; }
    .sign-pad-wrap canvas { background: #fff !important; border-color: #aaa !important; }
    .signed-stamp { background: #e4f5ec !important; color: #1e5c3a !important; }
    /* Force badge backgrounds to their solid light-mode values so semi-
       transparent dark-mode RGBA tints don't print muddy on white paper. */
    .badge-green { background: #E4F5EC !important; color: #1E8E5A !important; }
    .badge-amber { background: #FBEED9 !important; color: #C97A1E !important; }
    .badge-blue  { background: #E9EEF7 !important; color: #2B3A55 !important; }
    .badge-red   { background: #FBE7E7 !important; color: #C62839 !important; }
    .badge-grey  { background: #EDEDED !important; color: #7C818C !important; }
    .dash-main { padding: 0; max-width: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .dash { grid-template-columns: 1fr; }
    .dash-side { position: relative; top: 0; height: auto; display: flex; overflow-x: auto; gap: 4px; padding: 14px 16px; align-items: center; }
    .dash-side .side-user { display: none; }
    .side-link { white-space: nowrap; margin-bottom: 0; }
    .car-detail { grid-template-columns: 1fr; }
    .book-box { position: static; }
    .hero-inner { grid-template-columns: 1fr; padding-top: 44px; }
    .hero-car-stage { display: none; } /* single-car stage hidden on tablet+phone; fleet strip takes over on phones */
    .how-grid { grid-template-columns: 1fr 1fr; }
    /* Showcase: hide side cards, centre the main card */
    .showcase-footer { grid-template-columns: 1fr 1fr; }

    /* Touch-comfort pass — applies to every tappable element on both the
       admin dashboard and the public customer-facing pages. Staff use the
       shop-counter tablet; customers book on their own phones. Both deserve
       real finger-sized hit targets (~44 px), not mouse-sized ones. */

    /* Shared: sidebar nav links (admin left-nav + customer account sidebar) */
    .side-link { padding: 13px 14px; font-size: 0.95rem; }

    /* Admin-only: small action buttons and data-table density */
    .admin-shell .btn-sm, .row-actions .btn { padding: 10px 16px; font-size: 0.86rem; min-height: 40px; }
    .row-actions { gap: 10px; flex-wrap: wrap; row-gap: 8px; }
    table.data-table th, table.data-table td { padding: 16px 16px; }

    /* Shared: all form fields (login, signup, reserve, account, admin forms) */
    .field input, .field select, .field textarea { padding: 13px 14px; font-size: 1rem; min-height: 46px; }
    .field textarea { min-height: 90px; }
    .field-row { gap: 12px; }
    .panel-head, .dash-head { gap: 12px; }

    /* Customer reserve page — extras quantity picker has an inline style that
       overrides padding; give it a proper touch target here. */
    .extra-qty { padding: 11px 12px; min-height: 44px; font-size: 1rem; }

    /* Checkboxes and radios: browser defaults (~16 px) are far too small to
       tap reliably. 20 px is the comfortable minimum. */
    input[type="checkbox"], input[type="radio"] {
        width: 20px; height: 20px; flex-shrink: 0; cursor: pointer;
    }
}
/* iPad landscape (981 px – 1080 px) sits above the 980 px touch-comfort
   breakpoint but still needs finger-sized table rows (≥ 52 px) and roomy
   action buttons.  pointer:coarse targets touch screens only so a regular
   desktop browser at 1050 px wide is unaffected.                          */
@media (max-width: 1080px) and (pointer: coarse) {
    table.data-table th, table.data-table td { padding: 16px; }
    .admin-shell .btn-sm, .row-actions .btn   { padding: 10px 16px; font-size: 0.86rem; min-height: 40px; }
    .row-actions { gap: 10px; flex-wrap: wrap; row-gap: 8px; }
}

@media (max-width: 720px) {
    /* ═══════════════════════════════════════════════════════════════════
       MOBILE NAV — Command Centre
       Full-screen dark overlay. Brand header + close button inside the
       drawer. Icon nav rows with staggered spring entrance. Auth pinned
       to the bottom with safe-area clearance.
       ═══════════════════════════════════════════════════════════════════ */
    .main-nav {
        position: fixed;
        inset: 0;
        z-index: 1200;
        /* Light mode: clean panel background. Dark mode restores the gradient below. */
        background: var(--panel);
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 0;
        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;
        /* Spring overshoot easing for the open swipe */
        transition: transform .34s cubic-bezier(.3,1.12,.55,1), visibility 0s .34s;
        overflow-y: auto;
        overflow-x: hidden;
    }
    [dir="rtl"] .main-nav { transform: translateX(-105%); }
    .main-nav.open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform .34s cubic-bezier(.3,1.12,.55,1), visibility 0s 0s;
    }
    /* Dark mode: restore the rich gradient */
    html[data-color-mode="dark"] .main-nav {
        background: linear-gradient(165deg, #0d0e1a 0%, #161722 55%, #09090f 100%);
    }

    /* ── Brand row inside the drawer ────────────────────────────────── */
    .nav-brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(max(22px, env(safe-area-inset-top, 0px)) + 8px) 20px 18px;
        border-bottom: 1px solid var(--line);
        flex-shrink: 0;
    }
    .nav-brand-link {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }
    .nav-brand-row .brand-mark svg { width: 32px; height: 32px; }
    .nav-brand-row .brand-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -.01em;
    }
    .nav-close-ic {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
        border-radius: 50%;
        background: var(--paper);
        border: 1px solid var(--line);
        color: var(--ink-soft);
        cursor: pointer;
        flex-shrink: 0;
        transition: background .15s, transform .15s;
    }
    .nav-close-ic:hover  { background: var(--line); }
    .nav-close-ic:active { transform: scale(.88); }

    /* ── Nav links section ──────────────────────────────────────────── */
    .nav-links-group {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 16px;
        margin-bottom: 0;
        flex: 1; /* pushes language + auth sections to bottom */
    }

    /* Each row: icon circle → label → chevron */
    .nav-item {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 13px 10px !important;
        border-radius: 12px !important;
        border-bottom: none;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        color: var(--ink) !important;
        text-decoration: none;
        transition: background .15s, color .15s !important;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-item:hover,
    .nav-item:active {
        background: var(--paper) !important;
        color: var(--ink) !important;
    }
    .nav-item:hover .ni-icon {
        background: rgba(230,57,70,.12);
        border-color: rgba(230,57,70,.30);
        color: var(--red);
    }
    .nav-item:active .ni-icon { transform: scale(.92); }
    .nav-item:hover .ni-chevron { opacity: 1; transform: translateX(3px); }
    [dir="rtl"] .nav-item:hover .ni-chevron { transform: translateX(-3px); }

    .ni-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        flex-shrink: 0;
        border-radius: 11px;
        background: var(--paper);
        border: 1px solid var(--line);
        color: var(--ink-soft);
        transition: background .15s, border-color .15s, color .15s, transform .15s;
    }
    .ni-label { flex: 1; }
    .ni-chevron {
        display: block;
        flex-shrink: 0;
        opacity: .35;
        color: var(--ink-soft);
        transition: opacity .15s, transform .2s;
    }
    [dir="rtl"] .ni-chevron { transform: scaleX(-1); }
    [dir="rtl"] .nav-item:hover .ni-chevron { transform: scaleX(-1) translateX(-3px); }

    /* Stagger: items fall in from below on open */
    .main-nav.open .nav-item { animation: nav-item-in .4s cubic-bezier(.22,1,.36,1) both; }
    .main-nav.open .nav-item:nth-child(1) { animation-delay: .08s; }
    .main-nav.open .nav-item:nth-child(2) { animation-delay: .15s; }
    .main-nav.open .nav-item:nth-child(3) { animation-delay: .22s; }
    .main-nav.open .nav-item:nth-child(4) { animation-delay: .29s; }
    @keyframes nav-item-in {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Non-nav-item links inside the drawer (e.g. brand link, lang links) */
    .main-nav a:not(.btn):not(.nav-item):not(.nav-brand-link) {
        color: var(--ink-soft);
        border-bottom: none;
        padding: 10px 14px;
        border-radius: 8px;
        transition: background .15s, color .15s;
    }
    .main-nav a:not(.btn):not(.nav-item):not(.nav-brand-link):hover {
        background: var(--paper);
        color: var(--ink);
    }

    .nav-divider-line { display: none; }

    /* ── Hide old desktop lang dropdown inside mobile drawer ─────────── */
    .main-nav .nav-utility { display: none !important; }

    /* ── Mobile utilities: language list + appearance toggle ─────────── */
    .mob-utils {
        display: flex !important;
        flex-direction: column;
        border-top: 1px solid var(--line);
        flex-shrink: 0;
        /* No overflow-y here — the parent nav already scrolls;
           a nested scroll container absorbs iOS touch events */
    }
    /* Pin auth buttons to the bottom of the drawer */
    .nav-end-cluster { margin-top: auto; }
    .mob-util-block { padding: 14px 16px; }
    .mob-util-block + .mob-util-block { border-top: 1px solid var(--line); }
    .mob-util-head {
        display: flex; align-items: center; gap: 7px;
        font-size: 0.64rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--grey);
        margin-bottom: 10px;
    }
    /* Language toggle button (mob-util-head as a button) */
    .mob-lang-toggle {
        width: 100%; background: none; border: none; cursor: pointer;
        padding: 0; text-align: start;
    }
    .mob-lang-toggle-label { flex: 1; }
    .mob-lang-current-badge {
        font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em;
        background: var(--paper); border: 1px solid var(--line);
        border-radius: 4px; padding: 2px 6px; color: var(--grey);
        flex-shrink: 0;
    }
    .mob-lang-chevron {
        flex-shrink: 0; color: var(--grey);
        transition: transform .22s cubic-bezier(.4,0,.2,1);
    }
    .mob-util-block.lang-open .mob-lang-chevron { transform: rotate(180deg); }
    /* Language list — collapsed by default, expanded when parent has .lang-open */
    .mob-lang-list { display: none; flex-direction: column; gap: 2px; padding-top: 6px; }
    .mob-util-block.lang-open .mob-lang-list { display: flex; }
    .mob-lang-item {
        display: flex; align-items: center; gap: 10px;
        padding: 7px 8px; border-radius: 9px;
        text-decoration: none; color: var(--ink-soft);
        transition: background .13s, color .13s;
    }
    .mob-lang-item:hover { background: var(--paper); color: var(--ink); }
    .mob-lang-item.active { background: rgba(230,57,70,.10); }
    .mob-lang-code {
        flex-shrink: 0; min-width: 30px; height: 22px; border-radius: 5px;
        background: var(--paper); border: 1px solid var(--line);
        font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em;
        display: flex; align-items: center; justify-content: center;
        color: var(--grey);
    }
    .mob-lang-item.active .mob-lang-code {
        background: rgba(230,57,70,.18); border-color: rgba(230,57,70,.45); color: var(--red);
    }
    .mob-lang-names { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .mob-lang-native { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
    .mob-lang-item.active .mob-lang-native { color: var(--ink); }
    .mob-lang-eng { font-size: 0.68rem; color: var(--grey); line-height: 1.2; }
    .mob-lang-check { flex-shrink: 0; color: var(--red); margin-inline-start: auto; }
    /* Appearance toggle */
    .mob-appearance-row { display: flex; gap: 8px; }
    .mob-app-btn {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
        padding: 9px 8px; border-radius: 9px;
        background: var(--paper); border: 1px solid var(--line);
        color: var(--ink-soft); font-size: 0.8rem; font-weight: 600;
        cursor: pointer; transition: background .14s, border-color .14s, color .14s;
    }
    .mob-app-btn:hover { background: var(--line); color: var(--ink); }
    /* Active: red tint that works on both light and dark nav backgrounds */
    .mob-app-btn.mob-app-active {
        background: rgba(230,57,70,.12); border-color: rgba(230,57,70,.45); color: var(--red);
    }

    /* ── Auth buttons — pinned to the bottom ────────────────────────── */
    .nav-auth-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px;
        padding-bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 8px);
        border-top: 1px solid var(--line);
        flex-shrink: 0;
    }
    .nav-auth-group .btn {
        margin-top: 0;
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        border-radius: 12px;
        font-size: 0.97rem;
        font-weight: 700;
    }
    /* Sign-up: brand red — same in both modes */
    .nav-auth-group .btn-solid {
        background: var(--red) !important;
        border-color: var(--red) !important;
        color: #fff !important;
        box-shadow: 0 4px 18px rgba(230,57,70,.35);
    }
    /* Inside mobile drawer: icon-button auth links become full-width pill rows */
    .nav-auth-group .nav-auth-btn {
        width: 100% !important; height: auto !important;
        padding: 14px 20px !important; border-radius: 12px !important;
        gap: 8px; justify-content: center !important;
        font-size: 0.97rem; font-weight: 700;
    }
    .nav-auth-lbl { display: inline; }
    /* Logged-in pill: full-width in mobile drawer */
    .nav-auth-group .nav-user-pill {
        width: 100%; border-radius: 12px; padding: 14px 16px;
        justify-content: flex-start; gap: 12px;
    }
    .nav-auth-group .nav-user-av { width: 32px; height: 32px; font-size: 0.9rem; }

    .header-end-group { display: flex; margin-inline-start: auto; }
    .nav-toggle { display: flex; }
    .header-mini-actions { display: flex; }
    .nav-backdrop { display: block; }
    .how-grid { grid-template-columns: 1fr; }
    .spec-list { grid-template-columns: 1fr 1fr; }
    .contract-grid { grid-template-columns: 1fr; }
    .sign-area { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    section { padding: 44px 0; }
    .car-detail { gap: 24px; }

    /* Trust bar: 4-across gets tight enough on phones/small tablets that
       the last item runs off the edge. Two rows of two gives every item
       room to wrap normally instead of being clipped. */
    .hero-feature-inner { grid-template-columns: 1fr 1fr; row-gap: 18px; }
}
@media (max-width: 480px) {
    .hero-stats { gap: 18px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    /* Keep the collapsed header from getting crowded on the smallest
       phones — the avatar circle alone still reads as "you're logged in". */
    .mini-user-label { display: none; }
    .mini-user { padding: 4px; }

    /* A bit more presence on phones — still bounded so short headlines
       (the shipped English copy) stay within two lines; .hero-text's
       ch-based max-width scales with the font, so this stays in step
       with the rest of the "fit in ~2 lines" sizing above. */
    .hero h1 { font-size: clamp(2.05rem, 7vw + 0.5rem, 2.5rem); }
}

/* ============================================================
   Classification chips (tier / fuel / seats)
   ============================================================ */
.chip-tier { font-weight: 700; }
.chip-fuel { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================
   Admin brand block (product identity, stays constant across storefronts)
   ============================================================ */
.admin-brand {
    display: flex; align-items: center; gap: 8px; padding: 2px 8px 18px;
    border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
html[data-color-mode="dark"] .admin-brand { border-bottom-color: rgba(255,255,255,.1); }
.admin-brand .mark {
    width: 34px; height: 34px; border-radius: 9px; background: var(--red);
    display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.admin-brand-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; padding: 6px 8px; margin: -6px -8px; transition: background .15s ease; }
.admin-brand-link:hover { background: var(--paper); }
html[data-color-mode="dark"] .admin-brand-link:hover { background: rgba(255,255,255,.06); }
.admin-brand .mark.mark-img { background: none; }
.admin-brand .mark.mark-img img { width: 34px; height: 34px; border-radius: 9px; display: block; }
/* Legacy selectors kept for backward compat */
.admin-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.1; }
.admin-brand .tag { font-size: 0.68rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.05em; }
.side-shopname { padding: 0 8px 14px; font-size: 0.78rem; color: var(--grey); }
.side-shopname b { display: block; color: var(--ink); font-size: 0.92rem; font-family: var(--font-display); }
.side-section-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey); padding: 14px 12px 6px; }

/* ============================================================
   Role / access pills, staff table, settings form
   ============================================================ */
.role-pill-super { background: linear-gradient(120deg, #E63946, #C62839); color: #fff; }
.access-note { display: flex; gap: 10px; background: #E9EEF7; color: var(--steel); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.86rem; margin-bottom: 18px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.theme-option {
    border: 2px solid var(--line); border-radius: var(--radius); padding: 12px; cursor: pointer;
    display: block; background: var(--panel);
}
.theme-option.active { border-color: var(--red); }
.theme-swatch { height: 46px; border-radius: 8px; margin-bottom: 10px; }
.theme-option .name { font-weight: 600; font-size: 0.88rem; text-transform: capitalize; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.on { background: var(--green); }
.status-dot.off { background: var(--grey); }

/* ============================================================
   Responsive additions
   ============================================================ */
@media (max-width: 720px) {
    .feature-strip { grid-template-columns: 1fr 1fr; gap: 18px; }
    .hero::after { display: none; }
}


/* ============================================================
   Language switcher
   ============================================================ */
.lang-switch { position: relative; }

/* Globe pill toggle */
.lang-current {
    display: flex; align-items: center; gap: 6px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 12px; height: 34px;
    font-size: 0.84rem; font-weight: 600;
    cursor: pointer; color: var(--ink-soft);
    transition: color .15s, border-color .15s;
}
.lang-current:hover { color: var(--ink); border-color: var(--ink-soft); }
.lang-current .prefs-ic { opacity: 0.7; flex-shrink: 0; }
.lang-current .caret { opacity: 0.5; flex-shrink: 0; transition: transform .18s ease; }
.lang-current[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang-current[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-soft); }

/* Popover card */
.lang-menu {
    display: none;
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px -10px rgba(10,12,20,.20), 0 6px 20px -4px rgba(10,12,20,.10);
    min-width: 228px;
    padding: 6px;
    z-index: 60;
    transform-origin: top left;
    animation: lang-menu-pop .18s cubic-bezier(.22,.9,.32,1.22) both;
}
[dir="rtl"] .lang-menu { transform-origin: top right; inset-inline-start: auto; inset-inline-end: 0; }
@keyframes lang-menu-pop {
    from { opacity: 0; transform: translateY(-8px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }
.lang-menu.open { display: block; }

.lang-menu-heading {
    display: block; padding: 8px 12px 4px;
    font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--grey);
}

/* Language row */
.lang-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 10px;
    color: var(--ink); text-decoration: none;
    transition: background .12s;
}
.lang-item:hover { background: var(--paper); }
.lang-item:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.lang-item.active { background: color-mix(in srgb, var(--red) 6%, transparent); }

/* Code badge */
.lang-item-code {
    flex-shrink: 0; min-width: 34px; height: 24px;
    border-radius: 6px;
    background: var(--paper); border: 1px solid var(--line);
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em;
    display: flex; align-items: center; justify-content: center;
    color: var(--grey);
    transition: background .12s, border-color .12s, color .12s;
}
.lang-item.active .lang-item-code {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border-color: color-mix(in srgb, var(--red) 28%, transparent);
    color: var(--red);
}

/* Name stack */
.lang-item-names { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lang-item-native { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
/* Arabic-script names: explicit font + correct Unicode shaping */
.lang-item-native[lang="ar"],
.lang-item-native[lang="ckb"],
.lang-item-native[lang="fa"] {
    font-family: 'Noto Naskh Arabic', 'Zain', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
}
.lang-item.active .lang-item-native { color: var(--red); }
.lang-item-label { font-size: 0.72rem; color: var(--grey); line-height: 1.25; }

.lang-menu-check { flex-shrink: 0; color: var(--red); margin-inline-start: auto; }

/* Legacy plain-link items (backward compat) */
.lang-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 10px; border-radius: 10px; font-size: 0.92rem; font-weight: 500;
    color: var(--ink); line-height: 1.2;
    transition: background .12s, color .12s;
}
.lang-menu a:hover { background: var(--paper); }
.lang-menu a:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.lang-menu a.active { color: var(--red); font-weight: 700; background: color-mix(in srgb, var(--red) 8%, transparent); }
[dir="rtl"] .lang-menu { text-align: right; }

/* Globe pill — code label */
.lang-btn-code { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: inherit; }

/* Prefs popover layout */
.prefs-chip { display: inline-flex; align-items: center; gap: 5px; }
.prefs-ic { opacity: 0.7; flex-shrink: 0; }
.prefs-sep { width: 1px; height: 12px; background: var(--line); margin: 0 8px; flex-shrink: 0; }
.prefs-menu { min-width: 228px; padding: 6px; gap: 0; }
.prefs-menu.open { display: flex; }
.prefs-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.prefs-heading {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px;
    font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--grey);
}
.prefs-divider { width: 1px; background: var(--line); margin: 4px 6px; flex-shrink: 0; }

/* ============================================================
   Password strength meter
   ============================================================ */
.strength-track { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.strength-fill { height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background .2s ease; }
.strength-label { font-size: 0.76rem; color: var(--grey); margin-top: 4px; min-height: 1em; }

/* ============================================================
   RTL adjustments — Kurdish (Sorani) reads right to left
   ============================================================ */
html[lang="ar"] body, html[lang="ar"] .btn, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea {
    font-family: 'Noto Naskh Arabic', var(--font-body);
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 {
    font-family: 'Noto Naskh Arabic', var(--font-display);
}
html[lang="ckb"] body, html[lang="ckb"] .btn, html[lang="ckb"] input, html[lang="ckb"] select, html[lang="ckb"] textarea {
    font-family: 'Zain', var(--font-body);
}
html[lang="ckb"] h1, html[lang="ckb"] h2, html[lang="ckb"] h3, html[lang="ckb"] h4 {
    font-family: 'Zain', var(--font-display);
}
html[lang="fa"] body, html[lang="fa"] .btn, html[lang="fa"] input, html[lang="fa"] select, html[lang="fa"] textarea {
    font-family: 'Rubik', var(--font-body);
}
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4 {
    font-family: 'Rubik', var(--font-display);
}

[dir="rtl"] { text-align: right; }
[dir="rtl"] .main-nav { text-align: right; }
[dir="rtl"] .car-card-foot, [dir="rtl"] .contract-head, [dir="rtl"] .hero-plate-meta { flex-direction: row-reverse; }
[dir="rtl"] .row-actions { flex-direction: row-reverse; }

/* ============================================================
   Notification bell (admin)
   ============================================================ */
.notif-bell { position: relative; background: none; border: 1px solid var(--line); border-radius: 999px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); }
.notif-dot { position: absolute; top: 4px; inset-inline-end: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: none; border: 2px solid var(--paper); }
.notif-dot.show { display: block; }
.notif-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: calc(100vw - 32px); max-height: 380px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 70; }
/* RTL: flip panel so it opens toward the reading-start (left→right from the bell) */
[dir="rtl"] .notif-panel { right: auto; left: 0; }
/* On phones the bell is not the rightmost action, so absolute right:0 can push
   the panel off the left edge. Switch to fixed viewport-relative positioning. */
@media (max-width: 600px) {
    .notif-panel {
        position: fixed;
        top: 80px; /* clears the 68px admin topbar */
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

/* ── Bottom-sheet on very small phones (≤ 375 px) ──────────────────────────
   At this width a 380 px tall dropdown covers most of the visible page.
   Slide it up from the bottom instead: rounded top corners, 60 vh cap so
   the content above is always partially visible, and a drag-handle hint.
   The existing document-click handler already closes it on outside tap.   */
@media (max-width: 375px) {
    /* Invisible full-screen backdrop — tapping it closes the panel via the
       existing document click listener without any extra JS. */
    .notif-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(10, 10, 14, 0.4);
        z-index: 69; /* just below the panel (z-index: 70) */
        opacity: 0;
        transition: opacity .22s ease;
    }
    .notif-backdrop.open {
        display: block;
        opacity: 1;
    }

    .notif-panel {
        /* Override the 600 px rule: anchor to the bottom, full width */
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60vh;          /* always leaves 40 vh of page visible */
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        /* Clear the home indicator — without this, the last notification row
           sits flush against the bottom of the screen on notched iPhones and
           the home bar overlaps the content. */
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        /* Slide-up entrance — starts just off the bottom of the screen */
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                    opacity  .22s ease;
        opacity: 0;
        /* Keep display:none until open so it doesn't participate in layout */
    }
    .notif-panel.open {
        transform: translateY(0);
        opacity: 1;
    }
    /* Drag-handle bar drawn with ::before — no markup change needed */
    .notif-panel::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        border-radius: 2px;
        background: var(--line);
        margin: 10px auto 6px;
        flex-shrink: 0;
    }
}

.notif-panel.open { display: block; }
.notif-panel .notice-row { padding: 12px 16px; }
.notif-empty { padding: 24px; text-align: center; color: var(--grey); font-size: 0.86rem; }

/* ============================================================
   Reservation detail page
   ============================================================ */
.detail-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.swap-list { max-height: 340px; overflow-y: auto; display: grid; gap: 8px; }
.swap-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; }
.swap-option:hover { border-color: var(--red); }
.swap-option .car-art { width: 60px; height: 32px; flex-shrink: 0; border-radius: 6px; }

/* ============================================================
   Invoice sheet reuses the contract-sheet look
   ============================================================ */
.invoice-lines { width: 100%; border-collapse: collapse; margin: 18px 0; }
.invoice-lines th, .invoice-lines td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.invoice-lines tfoot td { border-bottom: none; font-weight: 700; padding-top: 14px; }

/* Uploaded car photos share the same slot as the SVG illustration */
img.car-art { object-fit: cover; aspect-ratio: 2 / 1; width: 100%; background: var(--paper); }
.mini-car img.car-art { aspect-ratio: auto; height: 30px; width: 56px; border-radius: 6px; }
.swap-option img.car-art { aspect-ratio: auto; height: 32px; width: 60px; border-radius: 6px; }

/* Fleet form: photo upload */
.photo-upload {
    border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 18px; text-align: center; cursor: pointer;
    background: var(--paper);
}
.photo-preview { max-width: 220px; max-height: 130px; border-radius: var(--radius-sm); margin: 0 auto 10px; display: none; object-fit: cover; }

/* Two-mode upload widget — camera button + file chooser button, one shared input */
.upload-choice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.upload-choice .uc-input { display: none; }
.upload-choice .uc-camera svg,
.upload-choice .uc-file   svg { vertical-align: -2px; margin-right: 3px; }
.upload-choice .uc-fname {
    font-size: 0.8rem; color: var(--grey); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Staff & access: collapsible permission editor row */
.perms-row { display: none; }
.perms-row.open { display: table-row; }

/* ============================================================
   Announcement banners — stacked under the header, above everything else
   ============================================================ */
.announcement-stack { position: relative; z-index: 40; }
.announcement-bar {
    background: #14151A; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.announcement-bar-inner {
    padding: 10px 20px; font-size: 0.86rem; font-weight: 500; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.announcement-bar-inner::before { content: "📣"; font-size: 0.9rem; }
@media (max-width: 600px) {
    .announcement-bar-inner { font-size: 0.8rem; padding: 9px 16px; text-align: left; justify-content: flex-start; }
}

/* ============================================================
   Dark mode — a genuine light/dark toggle, independent of the shop's
   chosen brand theme (redline/midnight). Overriding the neutral variables
   here is enough to recolour the whole site, since every component is
   already built on top of these custom properties rather than hardcoded
   colours. Applied via [data-color-mode="dark"] on <html>, toggled by the
   button in the header and remembered per-visitor.
   ============================================================ */
html[data-color-mode="dark"] {
    --ink: #EEF0F4;
    --ink-soft: #C4C8D2;
    --paper: #16171C;
    --panel: #1E2027;
    --line: #2E3040;
    --grey: #9CA0AC;
    /* Tell the browser this is a dark surface so native form elements
       (select popups, scrollbars, date pickers) render dark too */
    color-scheme: dark;
}
html[data-color-mode="dark"] body { background: var(--paper); color: var(--ink); }
html[data-color-mode="dark"] img,
html[data-color-mode="dark"] .car-svg { filter: brightness(0.94); }

/* Flash messages — hardcoded light tints need dark equivalents */
html[data-color-mode="dark"] .flash-success { background: rgba(30,142,90,0.18); color: #5BD49A; }
html[data-color-mode="dark"] .flash-error   { background: rgba(230,57,70,0.18);  color: #F28088; }
html[data-color-mode="dark"] .flash-info    { background: rgba(43,58,85,0.35);   color: #8FAAD8; }
html[data-color-mode="dark"] .toast-success { background: rgba(30,142,90,.18);  color: #5BD49A; }
html[data-color-mode="dark"] .toast-error   { background: rgba(230,57,70,.18);  color: #F28088; }
html[data-color-mode="dark"] .toast-info    { background: rgba(43,58,85,.35);   color: #8FAAD8; }

/* Badges — light pastel backgrounds become unreadable on dark panels */
html[data-color-mode="dark"] .badge-green { background: rgba(30,142,90,0.18);  color: #5BD49A; }
html[data-color-mode="dark"] .badge-amber { background: rgba(201,122,30,0.22); color: #E8A84C; }
html[data-color-mode="dark"] .badge-blue  { background: rgba(43,58,85,0.40);   color: #8FAAD8; }
html[data-color-mode="dark"] .badge-red   { background: rgba(230,57,70,0.18);  color: #F28088; }
html[data-color-mode="dark"] .badge-grey  { background: rgba(124,129,140,0.2); color: #B0B5BF; }

/* Notice icons — light tinted icon backgrounds */
html[data-color-mode="dark"] .notice-icon.due-today { background: rgba(201,122,30,0.22); }
html[data-color-mode="dark"] .notice-icon.overdue   { background: rgba(230,57,70,0.18); }
html[data-color-mode="dark"] .notice-icon.upcoming  { background: rgba(43,58,85,0.40); }

/* Table row hover — hardcoded near-white becomes invisible on dark panel */
html[data-color-mode="dark"] table.data-table tbody tr  { background: var(--panel); }
html[data-color-mode="dark"] table.data-table tbody tr:hover { background: rgba(255,255,255,0.04); }
html[data-color-mode="dark"] table.data-table thead th { background: var(--paper); }
/* Sticky column backgrounds in dark mode — must match the row states above */
html[data-color-mode="dark"] .admin-shell table.data-table tbody td:first-child,
html[data-color-mode="dark"] .admin-shell table.data-table tbody td:last-child  { background: var(--panel); }
html[data-color-mode="dark"] .admin-shell table.data-table thead th:first-child,
html[data-color-mode="dark"] .admin-shell table.data-table thead th:last-child  { background: var(--paper); }
html[data-color-mode="dark"] .admin-shell table.data-table tbody tr:hover td:first-child,
html[data-color-mode="dark"] .admin-shell table.data-table tbody tr:hover td:last-child { background: rgba(255,255,255,0.04); }
/* Scroll-shadow covers in dark mode */
html[data-color-mode="dark"] .table-wrap {
    background:
        linear-gradient(to right, var(--panel) 8px, transparent) left   / 44px 100% no-repeat local,
        linear-gradient(to left,  var(--panel) 8px, transparent) right  / 44px 100% no-repeat local,
        radial-gradient(farthest-side at 0   50%, rgba(0,0,0,.22), transparent) left  / 20px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.22), transparent) right / 20px 100% no-repeat scroll,
        var(--panel);
}

/* Form input focus — background already uses var(--panel) in base rule;
   dark mode restores a slightly lighter shade to signal focus */
html[data-color-mode="dark"] .field input:focus,
html[data-color-mode="dark"] .field select:focus,
html[data-color-mode="dark"] .field textarea:focus { background: #252830; border-color: var(--steel); }

/* Contract / invoice sheet — hardcoded #fff background stays blinding white */
html[data-color-mode="dark"] .contract-sheet { background: var(--panel); border-color: var(--line); }
html[data-color-mode="dark"] .contract-head  { border-bottom-color: var(--line); }
html[data-color-mode="dark"] .sign-pad-wrap canvas { background: #1A1B21; border-color: var(--line); }

/* Signed stamp — light green tint */
html[data-color-mode="dark"] .signed-stamp { background: rgba(30,142,90,0.18); color: #5BD49A; }

/* Access note — light blue tint */
html[data-color-mode="dark"] .access-note { background: rgba(43,58,85,0.40); color: #8FAAD8; }


.color-mode-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 999px; border: none;
    background: none; color: var(--ink-soft); cursor: pointer; flex-shrink: 0;
    transition: color .15s ease, background .15s ease;
}
.color-mode-toggle:hover { color: var(--ink); background: var(--paper); }
.color-mode-toggle svg { width: 16px; height: 16px; }
/* Three-state: auto (default) shows monitor icon; light shows sun; dark shows moon */
.color-mode-toggle .icon-auto { display: block; }
.color-mode-toggle .icon-sun  { display: none; }
.color-mode-toggle .icon-moon { display: none; }
.color-mode-toggle[data-mode-choice="light"] .icon-auto { display: none; }
.color-mode-toggle[data-mode-choice="light"] .icon-sun  { display: block; }
.color-mode-toggle[data-mode-choice="light"] .icon-moon { display: none; }
.color-mode-toggle[data-mode-choice="dark"]  .icon-auto { display: none; }
.color-mode-toggle[data-mode-choice="dark"]  .icon-sun  { display: none; }
.color-mode-toggle[data-mode-choice="dark"]  .icon-moon { display: block; }

/* ============================================================
   Car video — tap-to-reveal, so nothing downloads until requested
   ============================================================ */
.car-media { position: relative; }
.car-media video {
    width: 100%; border-radius: var(--radius); background: #000; display: block;
    aspect-ratio: 16/10; object-fit: cover;
}
.video-play-btn {
    position: absolute; bottom: 14px; right: 14px; z-index: 5;
    display: flex; align-items: center; gap: 6px;
    background: rgba(20,21,26,0.82); color: #fff; border: none; border-radius: 999px;
    padding: 9px 16px 9px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(4px); transition: transform 0.15s ease, background 0.15s ease;
}
.video-play-btn:hover { background: var(--red); transform: translateY(-1px); }
@media (max-width: 640px) {
    .video-play-btn { bottom: 10px; right: 10px; padding: 8px 14px 8px 12px; font-size: 0.78rem; }
}

.video-badge {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    display: flex; align-items: center; gap: 4px;
    background: rgba(20,21,26,0.78); color: #fff; border-radius: 999px;
    padding: 5px 10px 5px 8px; font-size: 0.7rem; font-weight: 600;
}

/* v101 */
/* ── Car discount splash badge ── */
.discount-splash {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #E63946 0%, #FF6B35 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(230,57,70,.45);
    white-space: nowrap;
    pointer-events: none;
    animation: splash-in .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes splash-in {
    from { transform: scale(.8) translateY(-4px); opacity: 0; }
    to   { transform: scale(1) translateY(0);   opacity: 1; }
}
/* Strikethrough original price */
.rate-was {
    font-size: 0.8rem;
    text-decoration: line-through;
    color: var(--grey);
    margin-inline-end: 2px;
    font-weight: 500;
}
.rate-now {
    color: #E63946;
    font-weight: 800;
}
/* Popular card: make art wrapper relative so badge positions correctly */
.popular-card { position: relative; }
.popular-card .discount-splash { top: 12px; }
/* Fleet grid card discount highlight strip */
.car-card.has-discount .car-card-foot { border-top: 2px solid rgba(230,57,70,.18); }
/* Dark mode */
html[data-color-mode="dark"] .rate-was { color: var(--grey); }
html[data-color-mode="dark"] .rate-now { color: #F28088; }

/* Car status chips — bright pastel light-mode tints are unreadable on dark panels */
html[data-color-mode="dark"] .sc-available  { background: rgba(34,197,94,.14);  color: #4ADE80; }
html[data-color-mode="dark"] .sc-available::before  { background: #4ADE80; }
html[data-color-mode="dark"] .sc-booked     { background: rgba(59,130,246,.14); color: #93C5FD; }
html[data-color-mode="dark"] .sc-booked::before     { background: #60A5FA; }
html[data-color-mode="dark"] .sc-maintenance{ background: rgba(245,158,11,.14); color: #FCD34D; }
html[data-color-mode="dark"] .sc-maintenance::before{ background: #FBBF24; }
html[data-color-mode="dark"] .sc-cleaning   { background: rgba(168,85,247,.14); color: #C4B5FD; }
html[data-color-mode="dark"] .sc-cleaning::before   { background: #A78BFA; }

/* Analytics trend badges — green/red light pastels need dark equivalents */
html[data-color-mode="dark"] .ov-anl-badge--up { background: rgba(34,197,94,.14); color: #4ADE80; }
html[data-color-mode="dark"] .ov-anl-badge--dn { background: rgba(239,68,68,.14); color: #FCA5A5; }

/* Stat card warn value — dark amber #B45309 is too low-contrast on dark panel */
html[data-color-mode="dark"] .stat-card.sc-warn .value { color: #FCD34D; }
@media print {
    .discount-splash { background: #E63946 !important; -webkit-print-color-adjust: exact; }
}

/* ── Brand image-logo mode ── */
.brand--image { height: auto; align-items: center; }
.brand--image .brand-mark {
    display: flex; align-items: center;
    width: auto; height: 36px; border-radius: 0; background: transparent; overflow: visible;
}
.brand-logo-img {
    height: 36px; width: auto; max-width: 200px;
    object-fit: contain; display: block;
}
.brand-icon-img {
    width: 20px; height: 20px;
    object-fit: contain; border-radius: 4px; display: block;
}

/* ── Admin logo manager ── */
.lm-row {
    border: 1px solid var(--line); border-radius: 10px;
    margin-bottom: 8px; overflow: hidden;
}
.lm-row:last-child { margin-bottom: 0; }
.lm-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 18px;
    cursor: pointer; list-style: none;
    background: var(--bg);
    font-size: .9rem;
}
.lm-summary::-webkit-details-marker { display: none; }
.lm-row[open] > .lm-summary { background: var(--panel); border-bottom: 1px solid var(--line); }
.lm-title { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.lm-chips { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.lm-body { padding: 20px 18px; }
.lm-mode-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.lm-mode-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 12px 14px; min-width: 110px; text-align: center;
    border: 2px solid var(--line); border-radius: 10px; cursor: pointer;
    transition: border-color .14s, background .14s; user-select: none;
}
.lm-mode-card input[type=radio] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.lm-mode-card:hover { border-color: var(--accent); }
.lm-mode-card.lm-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.lm-card-icon { font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; min-height: 24px; }
.lm-card-label { font-size: .79rem; font-weight: 700; }
.lm-card-desc { font-size: .7rem; color: var(--grey); line-height: 1.35; max-width: 120px; }
.lm-fields { padding-top: 4px; }
.lm-current {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px;
    width: fit-content; margin-bottom: 12px; background: var(--bg);
}
.lm-preview-dark {
    background: #111827; border-radius: 6px; padding: 8px; display: inline-flex;
}
.lm-preview-panel {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 6px; padding: 8px 12px; display: inline-flex;
}
.lm-file-prev {
    margin-top: 8px; display: inline-flex; align-items: center;
    background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 14px;
}
.lm-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Trend chart panel (admin dashboard)
   ============================================================ */
.trend-panel { margin-bottom: 24px; }
.trend-legend {
    display: flex; align-items: center; gap: 14px;
    font-size: 0.78rem; font-weight: 600; color: var(--grey);
}
.trend-legend-item { display: flex; align-items: center; gap: 5px; }
.trend-legend-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.trend-dot-rev { background: #E63946; }
.trend-dot-cnt { background: #2B3A55; }
html[data-color-mode="dark"] .trend-dot-cnt { background: #4178FF; }

.trend-chart-wrap { position: relative; }
.trend-canvas { display: block; width: 100%; cursor: crosshair; }

.trend-tooltip {
    position: absolute; pointer-events: none; z-index: 10;
    background: var(--ink); color: #fff;
    border-radius: var(--radius-sm); padding: 8px 12px;
    font-size: 0.78rem; line-height: 1.55; min-width: 130px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.trend-tooltip strong { display: block; font-size: 0.82rem; margin-bottom: 2px; }
.trend-tooltip span { display: block; color: #C9CCD6; }
html[data-color-mode="dark"] .trend-tooltip { background: #2A2C34; }

/* ══════════════════════════════════════════════════════════════════════
   FLEET GANTT CALENDAR
   ══════════════════════════════════════════════════════════════════════ */

/* ── Navigation strip ─────────────────────────────────────────── */
.gcal-nav { display: flex; align-items: center; gap: 6px; }
.gcal-nav-arrow { padding: 6px 9px; }

/* ── Utilisation strip ────────────────────────────────────────── */
.gcal-util-strip {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.8rem; margin-bottom: 16px;
}
.gcal-util-lbl { font-weight: 700; color: var(--ink); white-space: nowrap; }
.gcal-util-track {
    flex: 1; max-width: 180px; height: 5px;
    background: var(--line); border-radius: 999px; overflow: hidden;
}
.gcal-util-fill {
    height: 100%; background: linear-gradient(90deg, var(--red), #F87171);
    border-radius: 999px; transition: width .6s cubic-bezier(.4,0,.2,1);
    min-width: 3px;
}
.gcal-util-pct { font-weight: 700; color: var(--red); }
.gcal-util-sub { color: var(--grey); }

/* ── Outer scroll wrapper ─────────────────────────────────────── */
.gcal-outer {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 12px;
}
html[data-color-mode="dark"] .gcal-outer { border-color: rgba(255,255,255,.1); }

/* ── Main container (forced LTR — time flows left→right always) ─ */
.gcal {
    direction: ltr;
    display: flex; flex-direction: column;
    min-width: max-content;
    --gcal-car-w: 184px;
    --gcal-day-w: 36px;
    --gcal-row-h: 62px;
}

/* Larger car photo scoped to calendar context */
.gcal .mini-car .car-art,
.gcal .mini-car img.car-art { width: 66px; height: 38px; }

/* ── Header row ───────────────────────────────────────────────── */
.gcal-head {
    display: flex; position: sticky; top: 56px; z-index: 12;
    background: var(--panel);
    border-bottom: 2px solid var(--line);
}
html[data-color-mode="dark"] .gcal-head { border-bottom-color: rgba(255,255,255,.12); }

.gcal-car-hd {
    width: var(--gcal-car-w); flex-shrink: 0;
    padding: 8px 14px; display: flex; align-items: flex-end;
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--grey);
    border-right: 2px solid var(--line);
    position: sticky; left: 0; z-index: 13;
    background: var(--panel);
}

.gcal-days-hd {
    display: grid;
    grid-template-columns: repeat(var(--gcal-cols), var(--gcal-day-w));
}

/* ── Day header cell ──────────────────────────────────────────── */
.gcal-day-hd {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 6px 2px; gap: 2px;
    border-right: 1px solid var(--line);
    cursor: default;
    transition: background .1s;
}
.gcal-day-hd:last-child { border-right: none; }
.gcal-dn { font-size: 0.8rem; font-weight: 800; line-height: 1; color: var(--ink); }
.gcal-dw { font-size: 0.58rem; text-transform: uppercase; color: var(--grey); letter-spacing: .05em; }

.gcal-day-hd--wk { background: var(--paper); }
.gcal-day-hd--wk .gcal-dn,
.gcal-day-hd--wk .gcal-dw { color: var(--grey); }

.gcal-day-hd--today { background: var(--red) !important; }
.gcal-day-hd--today .gcal-dn,
.gcal-day-hd--today .gcal-dw { color: #fff !important; font-weight: 900; }

/* Column hover — class applied by JS on mousemove */
.gcal-day-hd--col-hover:not(.gcal-day-hd--today) {
    background: rgba(99,102,241,.16) !important;
}
.gcal-day-hd--col-hover:not(.gcal-day-hd--today) .gcal-dn,
.gcal-day-hd--col-hover:not(.gcal-day-hd--today) .gcal-dw { color: #6366F1 !important; }

/* ── Car rows ─────────────────────────────────────────────────── */
.gcal-row {
    display: flex; min-height: var(--gcal-row-h);
    border-bottom: 1px solid var(--line);
    transition: background .1s;
}
.gcal-row:last-child { border-bottom: none; }

/* Zebra striping — makes wide rows easy to follow left-to-right */
.gcal-row:nth-child(even) { background: rgba(0,0,0,.018); }
html[data-color-mode="dark"] .gcal-row:nth-child(even) { background: rgba(255,255,255,.025); }

/* Row hover — indigo wash shows the full horizontal extent of the car's timeline */
.gcal-row:hover { background: rgba(99,102,241,.06); }
html[data-color-mode="dark"] .gcal-row:hover { background: rgba(99,102,241,.10); }

.gcal-car-cell {
    width: var(--gcal-car-w); flex-shrink: 0;
    padding: 0 12px; display: flex; align-items: center;
    border-right: 2px solid var(--line);
    position: sticky; left: 0; z-index: 5;
    background: var(--panel);        /* always solid — masks scrolled content */
    transition: border-color .1s;
}
/* Accent border on hover anchors the eye to the car label */
.gcal-row:hover .gcal-car-cell { border-right-color: var(--tint); }

html[data-color-mode="dark"] .gcal-car-cell { background: var(--panel); }
html[data-color-mode="dark"] .gcal-car-hd   { border-right-color: rgba(255,255,255,.12); }
html[data-color-mode="dark"] .gcal-car-cell { border-right-color: rgba(255,255,255,.12); }
html[data-color-mode="dark"] .gcal-row:hover .gcal-car-cell { border-right-color: var(--tint); }

.gcal-car-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.gcal-car-name {
    font-size: 0.78rem; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcal-car-plate {
    font-size: 0.65rem; color: var(--grey); font-family: monospace;
    white-space: nowrap;
}

/* ── Timeline track ───────────────────────────────────────────── */
.gcal-track {
    flex: 1; display: grid;
    grid-template-columns: repeat(var(--gcal-cols), var(--gcal-day-w));
    align-items: center;
    position: relative;
    padding: 6px 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(var(--gcal-day-w) - 1px),
        var(--line) calc(var(--gcal-day-w) - 1px),
        var(--line) var(--gcal-day-w)
    );
}

/* Today column highlight — only when current month */
.gcal--has-today .gcal-track::before {
    content: '';
    position: absolute; top: 0; bottom: 0;
    left: calc((var(--gcal-today) - 1) * var(--gcal-day-w));
    width: var(--gcal-day-w);
    background: rgba(220,38,38,.07);
    border-left: 2px solid rgba(220,38,38,.40);
    pointer-events: none; z-index: 1;
}

/* Column hover highlight — applied by JS (sets --gcal-col-hover on .gcal) */
.gcal[data-col-hover] .gcal-track::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    left: calc((var(--gcal-col-hover, 0) - 1) * var(--gcal-day-w));
    width: var(--gcal-day-w);
    background: rgba(99,102,241,.10);
    pointer-events: none; z-index: 2;
}

.gcal-row--free .gcal-track { opacity: 1; }

/* ── Booking bars ─────────────────────────────────────────────── */
.gcal-bar {
    display: flex; align-items: center;
    height: 34px; border-radius: 8px;
    text-decoration: none; overflow: hidden;
    position: relative; z-index: 3;
    margin: 0 2px;
    transition: filter .15s, transform .15s, box-shadow .15s;
    cursor: pointer;
}
.gcal-bar:hover {
    filter: brightness(1.08);
    transform: scaleY(1.12);
    box-shadow: 0 6px 22px rgba(0,0,0,.28);
    z-index: 10;
}

/* Left-edge inset shadow = clear "start date" anchor on every bar */
.gcal-bar--pending  {
    background: linear-gradient(90deg, #D97706, #FBBF24);
    box-shadow: inset 5px 0 0 rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.gcal-bar--confirmed {
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    box-shadow: inset 5px 0 0 rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.gcal-bar--active {
    background: linear-gradient(90deg, #DC2626, #F87171);
    box-shadow: inset 5px 0 0 rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.22);
}

.gcal-bar-in {
    display: flex; align-items: center;
    height: 100%; padding: 0 8px; gap: 5px;
    overflow: hidden; min-width: 0;
}
.gcal-bar-name {
    font-size: 0.72rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.gcal-bar-ref {
    font-size: 0.62rem; color: rgba(255,255,255,.72);
    white-space: nowrap; flex-shrink: 0;
}

/* Tooltip via CSS attr() */
.gcal-bar::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: #14151A; color: #E7E7EA;
    font-size: 0.71rem; font-weight: 500; padding: 5px 10px;
    border-radius: 7px; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.gcal-bar::before {
    content: '';
    position: absolute; bottom: calc(100% + 3px); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #14151A;
    opacity: 0; pointer-events: none;
    transition: opacity .15s; z-index: 100;
}
.gcal-bar:hover::after,
.gcal-bar:hover::before { opacity: 1; }

/* ── Empty state ──────────────────────────────────────────────── */
.gcal-empty {
    padding: 40px; text-align: center; color: var(--grey);
    font-size: 0.9rem; grid-column: 1 / -1;
}

/* ── Legend ───────────────────────────────────────────────────── */
.gcal-legend {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    font-size: 0.78rem; color: var(--grey); margin-bottom: 4px;
}
.gcal-leg-item { display: flex; align-items: center; gap: 6px; }
.gcal-leg-dot {
    width: 12px; height: 12px; border-radius: 3px; display: inline-block;
    flex-shrink: 0;
}
.gcal-leg-today-line {
    width: 14px; height: 14px; flex-shrink: 0;
    border-left: 2.5px solid rgba(220,38,38,.5);
    display: inline-block;
}

/* ── Dark mode ────────────────────────────────────────────────── */
html[data-color-mode="dark"] .gcal-bar--pending  { background: linear-gradient(90deg, #B45309, #F59E0B); }
html[data-color-mode="dark"] .gcal-bar--confirmed { background: linear-gradient(90deg, #1D4ED8, #3B82F6); }
html[data-color-mode="dark"] .gcal-bar--active   { background: linear-gradient(90deg, #B91C1C, #EF4444); }
html[data-color-mode="dark"] .gcal-bar::after    { background: #2A2C34; color: #E7E7EA; }
html[data-color-mode="dark"] .gcal-bar::before   { border-top-color: #2A2C34; }
html[data-color-mode="dark"] .gcal-track {
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(var(--gcal-day-w) - 1px),
        rgba(255,255,255,.06) calc(var(--gcal-day-w) - 1px),
        rgba(255,255,255,.06) var(--gcal-day-w)
    );
}
html[data-color-mode="dark"] .gcal-day-hd { border-right-color: rgba(255,255,255,.06); }
html[data-color-mode="dark"] .gcal[data-col-hover] .gcal-track::after { background: rgba(99,102,241,.16); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gcal { --gcal-car-w: 116px; --gcal-day-w: 30px; --gcal-row-h: 54px; }
    .gcal .mini-car .car-art, .gcal .mini-car img.car-art { width: 52px; height: 30px; }
    .gcal-car-name { font-size: 0.7rem; }
    .gcal-util-sub { display: none; }
}

/* ══ Mobile nav — dark-mode colour overrides ══════════════════════════════
   Light-mode defaults above use CSS vars (--ink, --panel, --line, etc.).
   These rules restore the original white-on-dark palette when dark mode
   is active, so the nav matches the rest of the dark-mode site.
   Kept outside @media so they cascade cleanly in the root stacking context. */
html[data-color-mode="dark"] .nav-brand-row        { border-bottom-color: rgba(255,255,255,.08); }
html[data-color-mode="dark"] .nav-brand-row .brand-name { color: #fff; }
html[data-color-mode="dark"] .nav-close-ic         { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.82); }
html[data-color-mode="dark"] .nav-close-ic:hover   { background: rgba(255,255,255,.18); }
html[data-color-mode="dark"] .nav-item             { color: rgba(255,255,255,.85) !important; }
html[data-color-mode="dark"] .nav-item:hover,
html[data-color-mode="dark"] .nav-item:active      { background: rgba(255,255,255,.07) !important; color: #fff !important; }
html[data-color-mode="dark"] .nav-item:hover .ni-icon { background: rgba(230,57,70,.22); border-color: rgba(230,57,70,.35); color: #e63946; }
html[data-color-mode="dark"] .ni-icon              { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
html[data-color-mode="dark"] .ni-chevron           { color: rgba(255,255,255,.5); }
html[data-color-mode="dark"] .main-nav a:not(.btn):not(.nav-item):not(.nav-brand-link)       { color: rgba(255,255,255,.8); }
html[data-color-mode="dark"] .main-nav a:not(.btn):not(.nav-item):not(.nav-brand-link):hover { background: rgba(255,255,255,.07); color: #fff; }
html[data-color-mode="dark"] .mob-utils                        { border-top-color: rgba(255,255,255,.07); }
html[data-color-mode="dark"] .mob-util-block + .mob-util-block { border-top-color: rgba(255,255,255,.07); }
html[data-color-mode="dark"] .mob-util-head        { color: rgba(255,255,255,.38); }
html[data-color-mode="dark"] .mob-lang-current-badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.7); }
html[data-color-mode="dark"] .mob-lang-chevron     { color: rgba(255,255,255,.4); }
html[data-color-mode="dark"] .mob-lang-item        { color: rgba(255,255,255,.72); }
html[data-color-mode="dark"] .mob-lang-item:hover  { background: rgba(255,255,255,.08); color: #fff; }
html[data-color-mode="dark"] .mob-lang-item.active { background: rgba(220,38,38,.18); }
html[data-color-mode="dark"] .mob-lang-code        { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
html[data-color-mode="dark"] .mob-lang-item.active .mob-lang-code   { background: rgba(220,38,38,.3); border-color: rgba(220,38,38,.55); color: #fff; }
html[data-color-mode="dark"] .mob-lang-item.active .mob-lang-native { color: #fff; }
html[data-color-mode="dark"] .mob-lang-eng         { color: rgba(255,255,255,.4); }
html[data-color-mode="dark"] .mob-app-btn          { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.62); }
html[data-color-mode="dark"] .mob-app-btn:hover    { background: rgba(255,255,255,.14); color: #fff; }
html[data-color-mode="dark"] .mob-app-btn.mob-app-active { background: rgba(220,38,38,.22); border-color: rgba(220,38,38,.5); color: #fff; }
html[data-color-mode="dark"] .nav-auth-group       { border-top-color: rgba(255,255,255,.08); }
html[data-color-mode="dark"] .nav-auth-group .btn-ghost,
html[data-color-mode="dark"] .nav-auth-group .btn-line  { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; }
html[data-color-mode="dark"] .nav-auth-group .btn-ghost:hover,
html[data-color-mode="dark"] .nav-auth-group .btn-line:hover { background: rgba(255,255,255,.17) !important; }