/* ==========================================================================
   Gold Car Rental — application stylesheet
   Hand-written, token-driven. Dark charcoal + gold. Mobile-first.
   Breakpoints: 375 (base) / 600 / 768 / 1024 / 1440
   Sections:
     1. Design tokens
     2. Reset & base
     3. Layout primitives (container, section)
     4. Buttons
     5. Forms & fields
     6. Alerts
     7. Header (topbar, navbar, language switch, mobile drawer)
     8. Hero & search card
     9. Trust / why grid
    10. Locations preview
    11. CTA band
    12. Footer & mobile quick actions
    13. Utilities & motion preferences
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
/* color-scheme drives the NATIVE parts a stylesheet cannot reach: the popup
   list a <select> opens, date/time pickers, scrollbars, autofill. Without it
   the browser paints them light, so on the dark theme the location dropdown
   opened as a white panel with barely-visible options. Declaring it on :root
   makes every native control follow the theme.
   The admin is its own light UI and carries no data-theme, so it opts out. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body.admin, body.admin-auth { color-scheme: light; }

:root {
  /* Surfaces */
  --c-bg: #141518;
  --c-bg-2: #17191d;
  --c-surface: #1e2126;
  --c-surface-2: #24272d;
  --c-line: #2d3138;
  --c-line-soft: #23262c;

  /* Text */
  --c-text: #e9eaed;
  --c-text-muted: #9aa1ab;
  --c-text-dim: #6c7480;

  /* Accent */
  --c-gold: #d4af37;
  --c-gold-2: #e4c463;
  --c-gold-soft: rgba(212, 175, 55, 0.12);
  --c-gold-ink: #141518;
  /* Text/icon variant of gold — same as --c-gold on dark surfaces, darkened
     in the light theme below so gold text/icons keep WCAG AA contrast. */
  --c-gold-text: #d4af37;

  /* Status */
  --c-success: #3fbf74;
  --c-danger: #e05656;
  --c-info: #5c9ce6;

  /* Radius */
  --r-sm: 0.5rem;
  --r-md: 0.85rem;
  --r-lg: 1.15rem;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.65);

  /* Motion */
  --t-fast: 150ms;
  --t: 220ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Type & layout */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-sans);
  --container: 1220px;
}

/* Light theme — token overrides (public site). Toggle sets data-theme on <html>. */
:root[data-theme="light"] {
  /* The page used to sit at #f5f6f8 against #ffffff cards — a contrast of
     1.08, which reads as one flat white sheet with nothing separating the
     cards from the background. Dropping the page and band a few steps (and
     firming up the borders) lets the white cards actually look like cards
     without turning the theme grey. --c-gold-text is darkened to match, so
     gold text still clears WCAG AA on the deeper background. */
  --c-bg: #e9ecf1;
  --c-bg-2: #dfe4ea;
  --c-surface: #ffffff;
  --c-surface-2: #f2f4f7;
  --c-line: #cfd6df;
  --c-line-soft: #e0e5eb;
  --c-text: #1c2128;
  --c-text-muted: #5a636f;
  --c-text-dim: #8a93a0;
  --c-gold-soft: rgba(212, 175, 55, 0.16);
  --c-gold-text: #7a6013;
  --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.08);
  --shadow-md: 0 10px 26px -14px rgba(20, 30, 50, 0.2);
  --shadow-lg: 0 24px 60px -22px rgba(20, 30, 50, 0.22);
}

/* 2. Reset & base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-text);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1rem; }

a { color: var(--c-gold-text); text-decoration: none; }
a:hover { text-decoration: none; }

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  background: var(--c-gold);
  color: var(--c-gold-ink);
  font-weight: 600;
  padding: 0.65rem 1rem;
  border-radius: var(--r-sm);
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* 3. Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section--muted { background: var(--c-bg-2); }

.section__head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-gold-text);
  margin: 0 0 0.6rem;
}
.section__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0;
}

/* 4. Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.78rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
    border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--c-gold); color: var(--c-gold-ink); }
.btn--gold:hover { background: var(--c-gold-2); box-shadow: 0 8px 22px -8px rgba(212, 175, 55, 0.55); }

.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold-text); }

.btn--outline { background: transparent; color: var(--c-gold-text); border-color: var(--c-gold); }
.btn--outline:hover { background: var(--c-gold-soft); }

.btn--block { width: 100%; }
.btn--lg { padding: 0.95rem 1.6rem; font-size: 1rem; }
.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* 5. Forms & fields ------------------------------------------------------ */
/* min-width:0 so a field placed in a grid or flex row can shrink to the space
   it is given rather than to its widest input's intrinsic size. */
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted); }

.field__control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 0 0.85rem;
  /* A flex/grid item defaults to min-width:auto, i.e. it refuses to shrink
     below its content's intrinsic width. Date and time inputs have a wide
     intrinsic width (iOS Safari especially), so without this the control
     pushed the whole page wider than a phone viewport and the site scrolled
     sideways. */
  min-width: 0;
  max-width: 100%;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field__control:focus-within {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.field__control > svg { color: var(--c-text-dim); flex: none; }

/* iOS Safari sizes date and time inputs from their native control rather than
   from the width they are given, and ignores width:100% when the intrinsic size
   is larger. On a phone that pushed the filter card past the edge of the screen
   and made the whole page scroll sideways — while desktop browsers, which do
   shrink these inputs, looked perfectly fine. Clearing the native appearance
   makes them behave like any other input. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}
.field__control input,
.field__control select,
.field__control textarea {
  width: 100%;
  /* Same reason as the container above: without min-width:0 the input keeps
     its intrinsic width and overflows instead of filling the space it has. */
  min-width: 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  padding: 0.72rem 0;
  outline: none;
}
.field__control select { appearance: none; cursor: pointer; }

/* Options need their own colours, not just an inherited one.
   appearance:none detaches the popup from the element's color-scheme, so the
   browser paints that list with the system's own light background while the
   options keep inheriting the select's near-white dark-theme text — white on
   white. Painting them explicitly from the palette keeps the list readable in
   whichever theme is active, and in the popup as well as in the closed box. */
select option,
select optgroup {
  background-color: var(--c-surface);
  color: var(--c-text);
}
.field__control textarea { resize: vertical; min-height: 6rem; padding-top: 0.72rem; }
.field__error { font-size: 0.8rem; color: #ffb4b4; }
.field--invalid .field__control { border-color: var(--c-danger); }

/* 6. Alerts -------------------------------------------------------------- */
.alert {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}
.alert svg { flex: none; margin-top: 0.1rem; }
.alert--success { border-color: rgba(63, 191, 116, 0.5); background: rgba(63, 191, 116, 0.1); color: #96eab5; }
.alert--error { border-color: rgba(224, 86, 86, 0.5); background: rgba(224, 86, 86, 0.1); color: #ffb4b4; }
.alert--info { border-color: rgba(92, 156, 230, 0.5); background: rgba(92, 156, 230, 0.1); color: #bcd6ff; }
.alert--warning { border-color: rgba(212, 175, 55, 0.5); background: var(--c-gold-soft); color: #ecd082; }

/* 7. Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 19, 22, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.topbar { border-bottom: 1px solid var(--c-line-soft); font-size: 0.82rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
.topbar__contact { display: flex; gap: 1.25rem; }
.topbar__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-text-muted); }
.topbar__link:hover { color: var(--c-gold-text); }
.topbar__link svg { color: var(--c-gold-text); }

.lang-switch { display: flex; gap: 0.2rem; }
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--c-text-muted);
}
.flag { width: 20px; height: 14px; border-radius: 2px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); object-fit: cover; }
.lang-switch__item:hover { color: var(--c-text); }
.lang-switch__item.is-active { background: var(--c-gold-soft); color: var(--c-gold-text); }

.navbar { position: relative; }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: 0.02em; font-size: 1.35rem; color: var(--c-text); text-decoration: none; }
.brand__badge { display: inline-flex; flex: none; line-height: 0; filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.28)); }
.brand__badge svg { display: block; }
.brand__word { display: inline-flex; }
.brand__accent { color: var(--c-gold-text); }
.brand:hover .brand__badge { transform: translateY(-1px); }
.brand__badge { transition: transform var(--t) var(--ease); }
.brand--footer { font-size: 1.25rem; gap: 0.55rem; }

.primary-nav__list { list-style: none; display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; }
.primary-nav__link {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.primary-nav__link:hover { color: var(--c-text); }
.primary-nav__link.is-active { color: var(--c-gold-text); }
.primary-nav__cta { margin-left: 0.5rem; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.7rem;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile navigation drawer */
@media (max-width: 1023.98px) {
  .primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--c-bg-2);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-lg);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--t) var(--ease), visibility var(--t) var(--ease);
  }
  .site-header.nav-open .primary-nav { max-height: 82vh; visibility: visible; }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0.2rem; padding: 0.75rem clamp(1rem, 4vw, 2rem) 1.25rem; }
  .primary-nav__link { padding: 0.8rem 0.85rem; }
  .primary-nav__cta { margin: 0.5rem 0 0; }
  .primary-nav__cta .btn { width: 100%; }
  .topbar__link--email { display: none; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

/* 8. Hero & search card -------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1000px 520px at 82% -12%, rgba(212, 175, 55, 0.16), transparent 60%),
    linear-gradient(180deg, #16181c, #121316);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 72% 18%, #000, transparent 68%);
  mask-image: radial-gradient(circle at 72% 18%, #000, transparent 68%);
  opacity: 0.55;
}

/* Hero with an admin-uploaded background photo. The photo arrives inline as
   --hero-image; the overlay lives here so it can follow the active theme and
   keep the hero text readable over any image. */
.hero__bg--image {
  background-image:
    linear-gradient(90deg, rgba(12, 13, 16, 0.93) 0%, rgba(12, 13, 16, 0.87) 46%, rgba(12, 13, 16, 0.45) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: 2rem; }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 3rem; } }

.hero__eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 700; color: var(--c-gold-text); margin: 0 0 1rem; }
.hero__title { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1rem; }
.hero__lead { font-size: clamp(1rem, 2.4vw, 1.15rem); color: var(--c-text-muted); max-width: 42ch; margin: 0 0 1.5rem; }
.hero__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; padding: 0; margin: 0; }
.hero__badges li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.hero__badges svg { color: var(--c-gold-text); }

.search-card {
  background: rgba(28, 31, 36, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-lg);
}
.search-card__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; margin: 0 0 1rem; }
.search-card__title svg { color: var(--c-gold-text); }
.search-form__row { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 560px) { .search-form__row { grid-template-columns: 1fr 1fr; } }

/* 9. Trust / why grid ---------------------------------------------------- */
.why__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }

.why__card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.why__card:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, 0.5); }
.why__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm); background: var(--c-gold-soft); color: var(--c-gold-text); margin-bottom: 1rem; }
.why__title { font-size: 1.05rem; margin: 0 0 0.5rem; }
.why__text { color: var(--c-text-muted); font-size: 0.92rem; margin: 0; line-height: 1.6; }

/* 10. Locations preview -------------------------------------------------- */
.locations-preview__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 60rem; margin-inline: auto; }
@media (min-width: 600px) { .locations-preview__grid { grid-template-columns: 1fr 1fr; } }

.location-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  color: var(--c-text);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.location-card:hover { border-color: var(--c-gold); transform: translateY(-2px); }
.location-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-gold-soft); color: var(--c-gold-text); flex: none; }
.location-card__body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.location-card__name { font-weight: 600; }
.location-card__hours { font-size: 0.85rem; color: var(--c-text-muted); }
.location-card__arrow { color: var(--c-text-dim); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.location-card:hover .location-card__arrow { color: var(--c-gold-text); transform: translateX(3px); }

/* 11. CTA band ----------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, #1b1d21, #262112);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.cta-band__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
@media (min-width: 768px) { .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.cta-band__title { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 0.35rem; }
.cta-band__text { color: var(--c-text-muted); margin: 0; max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* 12. Footer & mobile quick actions ------------------------------------- */
/* The footer background is hard-coded dark in BOTH themes, but its contents
   used the theme palette — so in light mode --c-text became near-black and the
   EXPLORE / LEGAL / CONTACT headings disappeared into the background, while
   --c-line turned into a bright divider. Re-point the palette to its dark
   values inside the footer: every child rule that already says
   var(--c-text-muted) etc. then reads correctly in both themes. */
.site-footer {
  --c-text: #e9eaed;
  --c-text-muted: #a8afb9;
  --c-text-dim: #8b929d;
  --c-line: #2d3138;
  color: var(--c-text);
  background: #101114;
  border-top: 1px solid var(--c-line);
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
@media (min-width: 600px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; } }

.site-footer__tagline { color: var(--c-text-muted); font-size: 0.92rem; max-width: 34ch; margin: 0.75rem 0 1rem; }
.site-footer__title { color: var(--c-text); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; }
.site-footer__links, .site-footer__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__links a { color: var(--c-text-muted); font-size: 0.92rem; }
.site-footer__links a:hover { color: var(--c-gold-text); }
.site-footer__contact li { display: flex; gap: 0.6rem; color: var(--c-text-muted); font-size: 0.9rem; align-items: flex-start; }
.site-footer__contact svg { color: var(--c-gold-text); flex: none; margin-top: 0.1rem; }
.site-footer__contact a { color: var(--c-text-muted); }
.site-footer__contact a:hover { color: var(--c-gold-text); }

.social { display: flex; gap: 0.5rem; }
.social__link { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-text-muted); }
.social__link:hover { color: var(--c-gold-text); border-color: var(--c-gold); }

.site-footer__bar { border-top: 1px solid var(--c-line); padding: 1.25rem 0; }
.site-footer__bar-inner { display: flex; flex-direction: column; gap: 0.4rem; justify-content: space-between; color: var(--c-text-dim); font-size: 0.82rem; }
.site-footer__bar-inner p { margin: 0; }
@media (min-width: 600px) { .site-footer__bar-inner { flex-direction: row; } }

.quick-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); }
.quick-actions__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem; font-weight: 600; font-size: 0.95rem; }
.quick-actions__btn--call { background: var(--c-surface); color: var(--c-text); }
.quick-actions__btn--wa { background: #25d366; color: #06331a; }
@media (min-width: 1024px) { .quick-actions { display: none; } }
@media (max-width: 1023.98px) { body { padding-bottom: 3.4rem; } }

/* 13. Utilities & motion preferences ------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   STOREFRONT  (fleet, car detail, cards, slider, accordion)
   ========================================================================== */
.container--narrow { max-width: 800px; }
.section__head--row { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; gap: 1rem; }
@media (max-width: 600px) { .section__head--row { flex-direction: column; align-items: flex-start; } }

.page-head { background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.page-head--slim { padding: clamp(1rem, 3vw, 1.5rem) 0; }
.page-head__title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; }
.page-head__meta { color: var(--c-text-muted); margin: 0.35rem 0 0; }
.page-head__tag { display: inline-block; margin-top: 0.5rem; background: var(--c-gold-soft); color: var(--c-gold-text); font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; }
.breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 0.5rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-gold-text); }

/* Car cards & grid */
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
@media (max-width: 600px) { .car-grid { grid-template-columns: 1fr; } }
.car-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.car-card:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, 0.5); }
.car-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1c1e22, #25272c); overflow: hidden; }
.car-card__media img { width: 100%; height: 100%; object-fit: cover; }
.car-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #3a3d44; }
.car-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(20, 21, 24, 0.75); color: var(--c-gold-text); font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.car-card__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.car-card__title { font-size: 1.15rem; margin: 0; }
.car-card__title a { color: var(--c-text); }
.car-card__title a:hover { color: var(--c-gold-text); }
.car-card__specs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0; margin: 0; color: var(--c-text-muted); font-size: 0.85rem; }
.car-card__specs li { display: flex; align-items: center; gap: 0.35rem; }
.car-card__specs svg { color: var(--c-gold-text); }
.car-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--c-line); }
.car-card__price { display: flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap; }
.car-card__from, .car-card__unit { font-size: 0.78rem; color: var(--c-text-muted); }
.car-card__amount { font-size: 1.35rem; font-weight: 700; color: var(--c-text); }

/* Fleet layout & filters */
.fleet { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; padding-bottom: 3rem; }
@media (min-width: 900px) { .fleet { grid-template-columns: 280px 1fr; align-items: start; } .fleet__filters { position: sticky; top: 5rem; } }
.filters { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.filters__title { font-size: 1rem; margin: 0 0 0.25rem; }
.filters__range { display: flex; align-items: center; gap: 0.5rem; }
.filters__range input { flex: 1; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-text); padding: 0.6rem 0.7rem; font: inherit; min-width: 0; }
.filters__range span { color: var(--c-text-muted); }
.filters__actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.filters__reset { font-size: 0.85rem; color: var(--c-text-muted); }
.filters__reset:hover { color: var(--c-gold-text); }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.empty-state svg { color: var(--c-text-dim); margin-bottom: 1rem; }
.pagination { display: flex; gap: 0.4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pagination__link { min-width: 2.5rem; text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-text-muted); font-weight: 600; font-size: 0.9rem; }
.pagination__link:hover { border-color: var(--c-gold); color: var(--c-gold-text); }
.pagination__link.is-active { background: var(--c-gold); color: var(--c-gold-ink); border-color: var(--c-gold); }

/* Testimonials slider */
.slider { position: relative; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform 0.4s var(--ease); }
.testimonial { flex: 0 0 100%; padding: 1rem clamp(1rem, 4vw, 3rem); text-align: center; margin: 0; }
.testimonial__stars { display: flex; justify-content: center; gap: 0.15rem; color: var(--c-gold-text); margin-bottom: 1rem; }
.testimonial__quote { font-size: clamp(1.1rem, 2.5vw, 1.4rem); line-height: 1.6; color: var(--c-text); max-width: 46rem; margin: 0 auto 1rem; }
.testimonial__author { display: flex; align-items: center; justify-content: center; gap: 0.6rem; color: var(--c-text-muted); font-weight: 600; }
.testimonial__country { font-weight: 400; }
.testimonial__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; flex: none; }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.slider__btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--c-line); background: transparent; color: var(--c-text); cursor: pointer; }
.slider__btn:hover { border-color: var(--c-gold); color: var(--c-gold-text); }
.slider__btn[data-slider-prev] svg { transform: rotate(180deg); }
.slider__dots { display: flex; gap: 0.4rem; }
.slider__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 0; background: var(--c-line); cursor: pointer; padding: 0; }
.slider__dot.is-active { background: var(--c-gold); }

/* FAQ accordion */
.accordion { display: flex; flex-direction: column; gap: 0.5rem; }
.accordion__item { border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); overflow: hidden; }
.accordion__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none; }
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q svg { color: var(--c-gold-text); transition: transform var(--t) var(--ease); flex: none; }
.accordion__item[open] .accordion__q svg { transform: rotate(180deg); }
.accordion__a { padding: 0 1.25rem 1.25rem; color: var(--c-text-muted); line-height: 1.6; }

/* Car detail */
/* padding-block, not the padding shorthand: this element also carries
   .container, and the shorthand's implicit left/right 0 overrode the
   container's padding-inline — which on a phone (where the container is the
   full viewport) left every heading and row touching the screen edges. */
.car-detail { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(1.5rem, 4vw, 2.5rem) 3rem; }
@media (min-width: 900px) { .car-detail { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.gallery-viewer { display: flex; flex-direction: column; gap: 0.75rem; }
.gallery-viewer__main { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, #1c1e22, #25272c); position: relative; }
.gallery-viewer__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-viewer__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #3a3d44; }
.gallery-viewer__thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gallery-thumb { width: 80px; height: 56px; border-radius: 0.4rem; overflow: hidden; border: 2px solid transparent; background: none; padding: 0; cursor: pointer; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--c-gold); }
.car-detail__desc { margin-top: 1.5rem; color: var(--c-text-muted); line-height: 1.7; }
.car-block { margin-top: 2rem; }
.car-block__title { font-size: 1.2rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-line); }
.car-block__note { color: var(--c-text-muted); font-size: 0.85rem; margin-top: 0.75rem; }
.spec-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; padding: 0; margin: 0; }
.spec-grid__item { display: flex; align-items: center; gap: 0.6rem; }
.spec-grid__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm); background: var(--c-gold-soft); color: var(--c-gold-text); flex: none; }
.spec-grid__text { display: flex; flex-direction: column; }
.spec-grid__label { font-size: 0.75rem; color: var(--c-text-muted); }
.spec-grid__value { font-weight: 600; }
.feature-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; padding: 0; margin: 0; }
.feature-list li { display: flex; align-items: center; gap: 0.5rem; color: var(--c-text); font-size: 0.92rem; }
.feature-list svg { color: var(--c-gold-text); flex: none; }
.price-table { display: flex; flex-direction: column; gap: 0.5rem; }
.price-table__row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: 0.75rem 1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.price-table__days { font-weight: 600; }
.price-table__perday { color: var(--c-text-muted); font-size: 0.85rem; }
.price-table__total { font-weight: 700; text-align: right; }
.price-table__save { color: #8ff0b5; font-size: 0.78rem; margin-left: 0.25rem; }
.extras-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.extras-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--c-line); }
.extras-list li:last-child { border-bottom: 0; }
.extras-list__price { color: var(--c-gold-text); font-weight: 600; white-space: nowrap; }
.booking-box { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1.5rem; }
@media (min-width: 900px) { .booking-box { position: sticky; top: 5rem; } }
.booking-box__price { text-align: center; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; }
.booking-box__from, .booking-box__label { font-size: 0.8rem; color: var(--c-text-muted); }
.booking-box__amount { font-size: 2.2rem; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.booking-box__unit { font-size: 0.85rem; color: var(--c-text-muted); }
.booking-box__ok { color: #8ff0b5; font-size: 0.85rem; margin: 0.5rem 0 0; display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.booking-box__warn { color: #ffb4b4; font-size: 0.85rem; margin: 0.5rem 0 0; }
.booking-box__form { display: flex; flex-direction: column; gap: 0.85rem; }
.booking-box__deposit { display: flex; align-items: center; gap: 0.4rem; margin: 1rem 0 0; font-size: 0.82rem; color: var(--c-text-muted); }
.booking-box__deposit svg { color: var(--c-gold-text); }

/* CMS page */
.cms { padding-block: 2rem 3rem; }
.cms__body { line-height: 1.8; color: var(--c-text); }
.cms__body h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; }
.cms__body h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.cms__body p { color: var(--c-text-muted); margin: 0 0 1rem; }
.cms__body ul, .cms__body ol { color: var(--c-text-muted); padding-left: 1.25rem; margin: 0 0 1rem; }
.cms__body li { margin-bottom: 0.4rem; }
.cms__body a { color: var(--c-gold-text); text-decoration: underline; }

/* Shared keyless/Google map embed */
.map-embed { width: 100%; border: 0; display: block; border-radius: var(--r-md); background: var(--c-surface-2); }

/* Locations page — banner cards */
/* Two location cards per row from 900px, one below that. min-width:0 on the
   children so a wide child can never push the track — the same trap that
   made the fleet page scroll sideways on a phone. */
.locations-page { padding-block: 2rem 3rem; display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.locations-page > * { min-width: 0; }
@media (min-width: 900px) { .locations-page { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.loc2 { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.loc2__banner { position: relative; padding: 1.75rem; overflow: hidden; color: #fff; background: linear-gradient(135deg, #1f2a44 0%, #2c3e63 60%, #3a5488 100%); }
.loc2__banner--port { background: linear-gradient(135deg, #0f3138 0%, #124e57 60%, #1c7683 100%); }
.loc2__banner--air { background: linear-gradient(135deg, #23283a 0%, #33406a 55%, #4a5da0 100%); }
.loc2__glyph { position: absolute; right: -0.5rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.10); pointer-events: none; }
.loc2__banner-inner { position: relative; z-index: 1; }
.loc2__badge { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.16); color: #fff; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.28rem 0.65rem; border-radius: var(--r-pill); backdrop-filter: blur(2px); }
.loc2__badge svg { opacity: 0.9; }
.loc2__name { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 0.6rem 0 0.3rem; color: #fff; }
.loc2__where { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: rgba(255,255,255,0.82); font-size: 0.92rem; }
.loc2__where svg { opacity: 0.9; }
.loc2__body { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
/* The card itself is now a half-width grid cell, so info + map side by side
   no longer fits — stack them. */
.loc2__meta { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.loc2__meta li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--c-text-muted); }
.loc2__meta svg { color: var(--c-gold-text); flex: none; margin-top: 0.1rem; }
.loc2__meta a { color: var(--c-text-muted); }
.loc2__note { margin-bottom: 1.25rem; padding: 0.9rem 1rem; background: var(--c-gold-soft); border-radius: var(--r-sm); border: 1px solid var(--c-line-soft); }
.loc2__note h3 { font-size: 0.9rem; margin: 0 0 0.3rem; color: var(--c-gold-text); }
.loc2__note p { color: var(--c-text-muted); font-size: 0.9rem; margin: 0; }
.loc2__feat-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-dim); margin: 0 0 0.75rem; }
.loc2__features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.55rem; }
.loc2__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--c-text); }
.loc2__feat-ic { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c-gold-soft); color: var(--c-gold-text); flex: none; }
.loc2__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.loc2__map { min-height: 260px; display: flex; }
.loc2__map .map-embed { min-height: 260px; height: 100%; }
.loc2__map-empty { display: grid; place-items: center; width: 100%; min-height: 260px; background: var(--c-surface-2); border-radius: var(--r-md); color: var(--c-text-dim); }

/* Homepage locations preview — cards + map */
.locmap { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 860px) { .locmap { grid-template-columns: 1fr 1.1fr; } }
.locmap__lead { color: var(--c-text-muted); margin: 0 0 1rem; max-width: 34rem; }
.locmap__aside .locations-preview__grid { grid-template-columns: 1fr; max-width: none; margin-inline: 0; gap: 0.75rem; }
.locmap__frame .map-embed { min-height: 300px; box-shadow: var(--shadow-md); }

/* Contact page */
.contact-page { padding-block: 2rem 3rem; }
.contact-page__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .contact-page__grid { grid-template-columns: 1.6fr 1fr; } }
.contact-form-wrap { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1.75rem; }
.contact-form .btn { margin-top: 0.5rem; }
.contact-info { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1.75rem; height: fit-content; }
.contact-info__title { font-size: 1.15rem; margin: 0 0 1rem; }
.contact-info__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; }
.contact-info__list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--c-text-muted); font-size: 0.92rem; }
.contact-info__list svg { color: var(--c-gold-text); flex: none; margin-top: 0.1rem; }
.contact-info__list a { color: var(--c-text-muted); }
.btn--wa { background: #25d366; color: #06331a; }
.btn--wa:hover { filter: brightness(1.05); }

/* Media library grid */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.media-tile { margin: 0; border: 1px solid var(--admin-line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.media-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.media-tile__foot { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.6rem; }
.media-tile__dim { font-size: 0.72rem; color: var(--admin-muted); }
.media-tile__actions { display: flex; gap: 0.35rem; }
.icon-btn.is-copied { border-color: #3fbf74; color: #1a7f43; }

/* Selectable variant (e.g. picking a testimonial avatar from the library) */
.media-tile--pick { position: relative; display: block; cursor: pointer; transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }
.media-tile--pick input { position: absolute; top: 0.4rem; left: 0.4rem; z-index: 1; width: 1.05rem; height: 1.05rem; accent-color: var(--c-gold); }
.media-tile--pick:has(input:checked) { border-color: var(--c-gold); box-shadow: 0 0 0 2px var(--c-gold-soft); }
.media-tile__none { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; color: var(--admin-muted); font-size: 0.8rem; padding: 0.5rem; text-align: center; }

.row-unread { background: #fffdf3 !important; }
.row-unread td:first-child { border-left: 3px solid var(--c-gold); }
.row-unread { background: #fffdf3 !important; }
.row-unread td:first-child { border-left: 3px solid var(--c-gold); }

/* ==========================================================================
   BOOKING FLOW
   ========================================================================== */
.booking { padding-block: 1.5rem 3rem; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.steps { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0 0 1.75rem; counter-reset: step; flex-wrap: wrap; }
.steps__item { display: flex; align-items: center; gap: 0.5rem; color: var(--c-text-dim); font-size: 0.9rem; flex: 1; min-width: 120px; }
.steps__num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--c-line); font-weight: 700; font-size: 0.85rem; flex: none; }
.steps__item.is-active { color: var(--c-text); }
.steps__item.is-active .steps__num { background: var(--c-gold); color: var(--c-gold-ink); border-color: var(--c-gold); }
.steps__item.is-done { color: var(--c-text-muted); }
.steps__item.is-done .steps__num { background: rgba(212, 175, 55, 0.15); color: var(--c-gold-text); border-color: rgba(212, 175, 55, 0.4); }

.booking__search-note { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--c-text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; padding: 0.6rem 1rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.booking__search-note svg { color: var(--c-gold-text); }

.booking__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .booking__grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.booking__form { display: flex; flex-direction: column; gap: 1.5rem; }

.bk-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1.5rem; }
.bk-card__title { font-size: 1.1rem; margin: 0 0 1rem; }
.bk-card__head { display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 900px) { .bk-card--sticky { position: sticky; top: 5rem; } }

.extra-picker { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.extra-picker__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--c-line); }
.extra-picker__item:last-child { border-bottom: 0; }
.extra-picker__info { display: flex; flex-direction: column; gap: 0.15rem; }
.extra-picker__name { font-weight: 600; }
.extra-picker__desc { font-size: 0.82rem; color: var(--c-text-muted); }
.extra-picker__price { font-size: 0.82rem; color: var(--c-gold-text); }
.extra-picker__qty { width: 4rem; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-text); padding: 0.5rem; font: inherit; text-align: center; }

.pay-options { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.pay-option { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--c-line); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--t) var(--ease); }
.pay-option:hover { border-color: rgba(212, 175, 55, 0.5); }
.pay-option input { margin-top: 0.2rem; accent-color: var(--c-gold); }
.pay-option__body { display: flex; flex-direction: column; gap: 0.15rem; }
.pay-option__label { font-weight: 600; }
.pay-option__desc { font-size: 0.85rem; color: var(--c-text-muted); }
.pay-option--single { cursor: default; }
.pay-option--single:hover { border-color: var(--c-line); }
.bk-terms { margin-bottom: 1.25rem; align-items: flex-start; }
.bk-terms.is-invalid { color: #ffb4b4; }

.bk-summary { display: flex; flex-direction: column; gap: 1rem; }
.bk-summary__car { display: flex; gap: 0.85rem; align-items: center; }
.bk-summary__car img { border-radius: var(--r-sm); object-fit: cover; width: 96px; height: 64px; }
.bk-summary__ph { display: grid; place-items: center; width: 96px; height: 64px; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text-dim); flex: none; }
.bk-summary__name { font-size: 1.05rem; margin: 0; }
.bk-summary__cat { font-size: 0.78rem; color: var(--c-gold-text); }
.bk-summary__meta { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.bk-summary__meta dt { font-size: 0.75rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bk-summary__meta dd { margin: 0.1rem 0 0; }

.bk-breakdown { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.bk-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.bk-line--sub { color: var(--c-text-muted); font-size: 0.85rem; }
.bk-line--credit { color: #8ff0b5; }
.bk-line--subtotal { padding-top: 0.5rem; border-top: 1px solid var(--c-line); }
.bk-line--total { padding-top: 0.5rem; border-top: 1px solid var(--c-line); font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
.bk-line--note { color: var(--c-text-muted); font-size: 0.85rem; margin-top: 0.5rem; }
.bk-breakdown__note { font-size: 0.78rem; color: var(--c-text-dim); margin: 0.25rem 0 0; }

.bk-review-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.bk-review-list > div { display: flex; justify-content: space-between; gap: 1rem; }
.bk-review-list dt { color: var(--c-text-muted); font-size: 0.85rem; }
.bk-review-list dd { margin: 0; text-align: right; }
.bk-edit { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.bk-confirm { margin-top: 1.25rem; }
.bk-confirm__note { font-size: 0.78rem; color: var(--c-text-muted); text-align: center; margin: 0.6rem 0 0; }

.booking-confirm { padding-block: 2.5rem 3.5rem; }
.confirm-hero { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.confirm-hero__icon { color: var(--c-success); display: inline-flex; }
.confirm-hero__title { font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0.75rem 0 0.5rem; }
.confirm-hero__sub { color: var(--c-text-muted); }
.confirm-hero__ref { display: inline-flex; flex-direction: column; gap: 0.15rem; margin: 1.25rem 0; padding: 0.85rem 2rem; background: var(--c-gold-soft); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: var(--r-md); }
.confirm-hero__ref span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); }
.confirm-hero__ref strong { font-size: 1.6rem; letter-spacing: 0.05em; color: var(--c-gold-text); }
.confirm-hero__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Print view (booking confirmation) */
@media print {
  .site-header, .site-footer, .quick-actions, .no-print, .steps, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .bk-card, .confirm-hero__ref { border: 1px solid #ccc !important; background: #fff !important; }
  .bk-card__title, .confirm-hero__title, .bk-line--total, .confirm-hero__ref strong { color: #000 !important; }
  .bk-line, .bk-review-list dt, .bk-review-list dd, .bk-summary__meta dd, .muted { color: #222 !important; }
  .booking__grid { grid-template-columns: 1fr 1fr !important; }
}

/* Fleet — filters + list rows */
.filters__title { display: flex; align-items: center; gap: 0.5rem; }
.filters__title svg { color: var(--c-gold-text); }
.filters__group { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--c-line-soft); }
.filters__group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.filters__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); margin: 0 0 0.15rem; }
.filters__check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--c-text); cursor: pointer; }
.filters__check input { width: 1rem; height: 1rem; accent-color: var(--c-gold); }

.fleet__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.fleet__note { display: inline-flex; align-items: center; gap: 0.4rem; color: #8ff0b5; font-size: 0.85rem; }
:root[data-theme="light"] .fleet__note { color: #1a7f43; }
.fleet__sort { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.fleet__sort label { font-size: 0.85rem; color: var(--c-text-muted); white-space: nowrap; }

.fleet-list { display: flex; flex-direction: column; gap: 1.25rem; }
.fleet-row { display: grid; grid-template-columns: 1fr; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
@media (min-width: 640px) { .fleet-row { grid-template-columns: 300px 1fr; } }
.fleet-row:hover { border-color: rgba(212, 175, 55, 0.5); }
/* Below 640px the card stacks, so this cell has no row height to fill and the
   img's height:100% collapses onto min-height — a 180px letterbox strip that
   crops the car and looks tiny on a phone. Give it the same 16/10 box the
   other car cards use, which is also the source images' own ratio, so the
   whole car shows at full width. Above 640px the grid gives it a height
   again, so hand control back. */
.fleet-row__media { position: relative; display: block; min-height: 180px; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1c1e22, #25272c); }
@media (min-width: 640px) { .fleet-row__media { aspect-ratio: auto; } }
/* contain, not cover: on desktop this cell is a fixed 300px column whose height
   is set by the body text beside it, so its ratio never matches the 16/10
   source. cover then filled the box by cropping ~26% of the width — which on a
   side-on studio shot is exactly the front and rear of the car. contain shows
   the whole vehicle and letterboxes onto the cell's own background instead. */
.fleet-row__media img { width: 100%; height: 100%; object-fit: contain; }
.fleet-row__media .car-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #3a3d44; }
:root[data-theme="light"] .fleet-row__media { background: linear-gradient(135deg, #eef1f4, #e2e6ea); }
.fleet-row__badge { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(20, 21, 24, 0.75); color: var(--c-gold-text); font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
:root[data-theme="light"] .fleet-row__badge { background: rgba(255, 255, 255, 0.9); color: #9a7b1f; box-shadow: 0 0 0 1px rgba(20, 30, 50, 0.08); }
.fleet-row__body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; }
.fleet-row__top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fleet-row__title { font-size: 1.25rem; margin: 0 0 0.5rem; }
.fleet-row__year { font-size: 0.85rem; color: var(--c-text-muted); font-weight: 500; }
.fleet-row__specs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0; margin: 0; color: var(--c-text-muted); font-size: 0.85rem; }
.fleet-row__specs li { display: flex; align-items: center; gap: 0.3rem; }
.fleet-row__specs svg { color: var(--c-gold-text); }
.fleet-row__price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.fleet-row__amount { font-size: 1.5rem; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.fleet-row__unit { font-size: 0.78rem; color: var(--c-text-muted); }
.fleet-row__cancel { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: #6ddf9c; margin-top: 0.35rem; }
:root[data-theme="light"] .fleet-row__cancel { color: #1a7f43; }
.fleet-row__desc { color: var(--c-text-muted); font-size: 0.92rem; margin: 0; line-height: 1.6; }
.fleet-row__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { font-size: 0.75rem; color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 999px; padding: 0.2rem 0.6rem; }
.fleet-row__foot { display: flex; align-items: center; gap: 1.25rem; margin-top: auto; padding-top: 0.5rem; }
.fleet-row__view { font-size: 0.9rem; color: var(--c-text-muted); font-weight: 600; }
.fleet-row__view:hover { color: var(--c-gold-text); }

/* ==========================================================================
   THEME TOGGLE + LIGHT-MODE OVERRIDES (public site)
   ========================================================================== */
.topbar__right { display: flex; align-items: center; gap: 0.6rem; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--c-text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--r-sm); }
.theme-toggle:hover { color: var(--c-gold-text); }
.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: inline-flex; }

body, .site-header, .car-card, .bk-card, .search-card, .why__card, .location-card, .filters, .panel { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }

:root[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.9); }
:root[data-theme="light"] .hero__bg { background: radial-gradient(1000px 520px at 82% -12%, rgba(212, 175, 55, 0.16), transparent 60%), linear-gradient(180deg, #ffffff, #eef1f4); }
:root[data-theme="light"] .hero__bg::after { background-image: linear-gradient(rgba(20, 30, 50, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 30, 50, 0.045) 1px, transparent 1px); }
:root[data-theme="light"] .hero__bg--image {
  background-image:
    linear-gradient(90deg, rgba(248, 249, 251, 0.96) 0%, rgba(248, 249, 251, 0.91) 46%, rgba(248, 249, 251, 0.58) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}

/* Below 1024px the hero stacks, so the text spans the full width and can no
   longer rely on the side-weighted gradient. Use an even, vertical wash. */
@media (max-width: 1023px) {
  .hero__bg--image {
    background-image:
      linear-gradient(180deg, rgba(12, 13, 16, 0.90) 0%, rgba(12, 13, 16, 0.84) 55%, rgba(12, 13, 16, 0.90) 100%),
      var(--hero-image);
  }
  :root[data-theme="light"] .hero__bg--image {
    background-image:
      linear-gradient(180deg, rgba(248, 249, 251, 0.94) 0%, rgba(248, 249, 251, 0.90) 55%, rgba(248, 249, 251, 0.94) 100%),
      var(--hero-image);
  }
}
/* Over a hero photo the light-theme wash is slightly darker than the flat
   light hero, so the gold eyebrow needs a deeper tone to hold WCAG AA. */
:root[data-theme="light"] .hero--photo .hero__eyebrow { color: #6f5710; }
:root[data-theme="light"] .search-card { background: rgba(255, 255, 255, 0.97); }
:root[data-theme="light"] .car-card__media,
:root[data-theme="light"] .gallery-viewer__main,
:root[data-theme="light"] .bk-summary__ph,
:root[data-theme="light"] .cell-thumb .thumb-empty { background: linear-gradient(135deg, #eef1f4, #e2e6ea); }
:root[data-theme="light"] .car-card__badge { background: rgba(255, 255, 255, 0.9); color: #9a7b1f; box-shadow: 0 0 0 1px rgba(20, 30, 50, 0.08); }
:root[data-theme="light"] .cta-band { background: linear-gradient(120deg, #fbf7ea, #eef1f4); }
:root[data-theme="light"] .field__error { color: #c0392b; }
:root[data-theme="light"] input[type="datetime-local"],
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] .quick-actions { box-shadow: 0 -4px 16px -8px rgba(20, 30, 50, 0.15); }
:root[data-theme="light"] .price-table__save,
:root[data-theme="light"] .bk-line--credit,
:root[data-theme="light"] .booking-box__ok { color: #1a7f43; }
:root[data-theme="light"] .booking-box__warn { color: #c0392b; }

/* ==========================================================================
   ADMIN PANEL  (same stylesheet, scoped to .admin / .admin-auth)
   Dark sign-in screens, light data workspace.
   ========================================================================== */

/* --- Auth screens (dark, on-brand) ------------------------------------- */
body.admin-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: radial-gradient(1000px 500px at 50% -10%, #20232a, var(--c-bg));
}
.auth-wrap { width: 100%; max-width: 26rem; }
.auth-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.auth-brand { text-align: center; font-weight: 800; font-size: 1.5rem; margin-bottom: 1.5rem; }
.auth-brand__tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-text-muted); vertical-align: middle; margin-left: 0.25rem; }
.auth-title { font-size: 1.4rem; margin: 0 0 0.35rem; text-align: center; }
.auth-sub { color: var(--c-text-muted); text-align: center; margin: 0 0 1.5rem; font-size: 0.92rem; }
.auth-form .field { margin-bottom: 1rem; }
.auth-row { display: flex; justify-content: flex-end; margin: -0.25rem 0 1rem; }
.auth-row--center { justify-content: center; margin: 1rem 0 0; }
.auth-link { font-size: 0.88rem; }
.auth-foot { text-align: center; margin-top: 1.25rem; }
.auth-foot a { color: var(--c-text-muted); font-size: 0.85rem; }

/* --- Workspace shell ---------------------------------------------------- */
body.admin {
  --admin-bg: #f4f5f7;
  --admin-surface: #ffffff;
  --admin-text: #1f2430;
  --admin-muted: #667085;
  --admin-line: #e4e7ec;
  --admin-line-soft: #eef0f3;
  --admin-sidebar-w: 250px;
  background: var(--admin-bg);
  color: var(--admin-text);
  padding-bottom: 0;
}
body.admin-auth { padding-bottom: 0; }

.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--admin-sidebar-w);
  background: #141518;
  color: #cfd2d8;
  display: flex;
  flex-direction: column;
  z-index: 60;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--t) var(--ease);
}
.admin-shell.nav-open .admin-sidebar { transform: none; }
.admin-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
  z-index: 55;
}
.admin-shell.nav-open .admin-backdrop { opacity: 1; visibility: visible; }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

@media (min-width: 1024px) {
  .admin-sidebar { transform: none; }
  .admin-backdrop { display: none; }
  .admin-main { margin-left: var(--admin-sidebar-w); }
  .admin-burger { display: none; }
}

.admin-sidebar__brand { display: flex; align-items: center; gap: 0.5rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.admin-sidebar__brand .brand { color: #fff; font-size: 1.2rem; }
.admin-sidebar__tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: #7c828d; border: 1px solid rgba(255, 255, 255, 0.15); padding: 0.1rem 0.4rem; border-radius: 0.35rem; }
.admin-nav { padding: 0.75rem 0.75rem 2rem; }
.admin-nav__group { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6c727c; margin: 0.85rem 0.5rem 0.4rem; }
.admin-nav__list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-nav__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 0.5rem; color: #cfd2d8; font-size: 0.92rem; font-weight: 500; }
.admin-nav__link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.admin-nav__link.is-active { background: rgba(212, 175, 55, 0.15); color: var(--c-gold-text); }
.admin-nav__link svg { flex: none; }

.admin-topbar { display: flex; align-items: center; gap: 1rem; padding: 0.8rem clamp(1rem, 3vw, 1.75rem); background: #fff; border-bottom: 1px solid var(--admin-line); position: sticky; top: 0; z-index: 40; }
.admin-burger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--admin-line); background: #fff; border-radius: 0.5rem; color: var(--admin-text); cursor: pointer; }
.admin-topbar__title { font-size: 1.15rem; margin: 0; flex: 1; }
.admin-topbar__right { display: flex; align-items: center; gap: 1rem; }
.admin-topbar__link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--admin-muted); font-size: 0.88rem; }
.admin-topbar__link:hover { color: #9a7b1f; }
.admin-user { display: flex; align-items: center; gap: 0.5rem; }
.admin-user__avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--c-gold); color: #141518; display: grid; place-items: center; font-weight: 700; }
.admin-user__meta { display: flex; flex-direction: column; line-height: 1.15; }
.admin-user__name { font-size: 0.85rem; font-weight: 600; }
.admin-user__role { font-size: 0.72rem; color: var(--admin-muted); }
.admin-logout { margin: 0; }
@media (max-width: 600px) { .admin-topbar__link span, .admin-user__meta { display: none; } }

.admin-content { padding: clamp(1rem, 3vw, 1.75rem); width: 100%; max-width: 1200px; }

/* --- Admin forms (light) ------------------------------------------------ */
.admin .field label { color: #3a4150; }
.admin .field__control { background: #fff; border-color: var(--admin-line); }
.admin .field__control:focus-within { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); }
.admin .field__control input, .admin .field__control select, .admin .field__control textarea { color: var(--admin-text); }
.admin .field__control > svg { color: #98a0ad; }
.admin-content a { color: #8a6d15; }
.admin-content a:hover { color: #9a7b1f; }
.admin-content .data-table a { color: var(--admin-text); font-weight: 600; }
.admin-content .data-table a:hover { color: #9a7b1f; }

/* --- Admin buttons ------------------------------------------------------ */
.btn--muted { background: #eceef1; color: #333a45; border-color: #e0e3e8; }
.btn--muted:hover { background: #e2e5ea; }
.btn--danger { background: #e05656; color: #fff; }
.btn--danger:hover { background: #cf4747; }

/* --- Stat cards --------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 600px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: var(--admin-surface); border: 1px solid var(--admin-line); border-radius: var(--r-md); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.stat-card__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; background: var(--c-gold-soft); color: #9a7b1f; display: grid; place-items: center; margin-bottom: 0.75rem; }
.stat-card__value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.stat-card__label { color: var(--admin-muted); font-size: 0.85rem; margin-top: 0.15rem; }

/* --- Banner ------------------------------------------------------------- */
.admin-banner { display: flex; align-items: center; gap: 0.6rem; background: #fff8e6; border: 1px solid #f0dca0; color: #7a5d10; padding: 0.85rem 1.1rem; border-radius: var(--r-md); margin-bottom: 1.25rem; }
.admin-banner svg { color: #b8901f; flex: none; }
.admin-banner__action { margin-left: auto; font-weight: 600; color: #9a7b1f !important; white-space: nowrap; }

/* --- Panels & tables ---------------------------------------------------- */
.panel { background: var(--admin-surface); border: 1px solid var(--admin-line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; }
.panel__head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--admin-line-soft); }
.panel__title { font-size: 1.02rem; margin: 0; }
.panel__count { background: var(--c-gold-soft); color: #9a7b1f; font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; }
.panel__meta { margin-left: auto; color: var(--admin-muted); font-size: 0.82rem; }
.panel__body { padding: 1.25rem; }
.admin-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .admin-grid-2 { grid-template-columns: 1fr 1fr; } }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--admin-muted); padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--admin-line); background: #fafbfc; white-space: nowrap; }
.data-table td { padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--admin-line-soft); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafbfc; }
.empty { padding: 2rem 1.25rem; text-align: center; color: var(--admin-muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.muted { color: var(--admin-muted); }
.small { font-size: 0.8rem; }

/* --- Badges ------------------------------------------------------------- */
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.badge--ok { background: #e7f6ee; color: #1a7f43; }
.badge--info { background: #e8f0fe; color: #2a5bd7; }
.badge--warn { background: #fff3d6; color: #946a00; }
.badge--accent { background: var(--c-gold-soft); color: #9a7b1f; }
.badge--danger { background: #fdeaea; color: #c0392b; }
.badge--muted { background: #eef0f3; color: #667085; }

/* --- CRUD: toolbar, filters, forms ------------------------------------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.toolbar__info { color: var(--admin-muted); font-size: 0.9rem; }
.toolbar--filters { align-items: flex-start; }
.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.field__control--sm { padding: 0 0.7rem; background: #fff; }
.field__control--sm input, .field__control--sm select { padding: 0.5rem 0; font-size: 0.9rem; }

.form-card { background: var(--admin-surface); border: 1px solid var(--admin-line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 1.5rem; }
.form-section { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--admin-line-soft); }
.form-section:last-of-type { border-bottom: 0; margin-bottom: 0.5rem; }
.form-section__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--admin-muted); margin: 0 0 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 0.75rem; }

.req { color: #c0392b; }
.help { display: block; font-size: 0.8rem; color: var(--admin-muted); margin-top: 0.35rem; }
.admin .field__error { font-size: 0.8rem; color: #c0392b; margin-top: 0.3rem; }

.field--check { align-self: end; padding-bottom: 0.55rem; }
.check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.92rem; color: var(--admin-text); }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--c-gold); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem 1rem; }

/* Translations block */
.trans { margin-top: 1rem; border: 1px dashed var(--admin-line); border-radius: var(--r-sm); padding: 0.25rem 1rem 0.75rem; }
.trans > summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--admin-muted); padding: 0.5rem 0; }
.trans__group { margin-top: 0.5rem; }
.trans__lang { font-size: 0.82rem; margin: 0.5rem 0; color: var(--admin-text); text-transform: uppercase; letter-spacing: 0.05em; }

/* --- Row actions -------------------------------------------------------- */
.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--admin-line); background: #fff; border-radius: 0.45rem; color: var(--admin-muted); cursor: pointer; }
.icon-btn:hover { color: var(--admin-text); border-color: #cfd4db; }
.icon-btn--danger:hover { color: #c0392b; border-color: #f0c4c4; background: #fdf4f4; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cell-thumb { width: 64px; }
.cell-thumb img { border-radius: 0.35rem; object-fit: cover; }
.thumb-empty { display: grid; place-items: center; width: 56px; height: 38px; border-radius: 0.35rem; background: #eef0f3; color: #9aa1ab; }
.feat-name { display: inline-flex; align-items: center; gap: 0.5rem; }
.feat-name svg { color: #9a7b1f; }
.star-on { color: #d4af37; vertical-align: middle; }

/* --- Car image manager -------------------------------------------------- */
.uploader { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.uploader__drop { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border: 2px dashed var(--admin-line); border-radius: var(--r-sm); color: var(--admin-muted); cursor: pointer; background: #fafbfc; }
.uploader__drop:hover { border-color: var(--c-gold); color: var(--admin-text); }
.uploader__drop svg { color: #9a7b1f; flex: none; }
.uploader__drop input[type="file"] { margin-left: auto; font-size: 0.82rem; max-width: 45%; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin: 1rem 0; }
.img-tile { position: relative; border: 1px solid var(--admin-line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.img-tile.is-dragging { opacity: 0.4; }
.img-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.img-tile__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0.35rem; }
.img-tile__handle, .img-tile__del { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 0.35rem; background: rgba(20, 21, 24, 0.68); color: #fff; border: 0; cursor: pointer; }
.img-tile__handle { cursor: grab; }
.img-tile__del:hover { background: #c0392b; }
.img-tile__main { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.5rem; font-size: 0.8rem; }
.img-tile__main input { accent-color: var(--c-gold); }
.img-tile__alt { width: 100%; border: 0; border-top: 1px solid var(--admin-line-soft); padding: 0.45rem 0.5rem; font-size: 0.8rem; outline: none; color: var(--admin-text); }
.img-tile__alt:focus { background: #fffdf5; }
.gallery-form__actions { display: flex; justify-content: flex-end; }
.is-hidden { display: none; }

/* --- Pricing & availability -------------------------------------------- */
.subnav { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--admin-line); padding-bottom: 0.75rem; }
.subnav__link { color: var(--admin-muted); font-size: 0.9rem; font-weight: 500; }
.subnav__link:hover { color: #9a7b1f; }
.subnav__current { color: var(--admin-text); font-weight: 600; font-size: 0.9rem; }

.rate-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 540px; }
.rate-list__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--admin-line-soft); border-radius: var(--r-sm); }
.rate-list__label { display: flex; flex-direction: column; }
.rate-input { display: flex; align-items: center; gap: 0.3rem; max-width: 140px; }
.rate-input__sym { color: var(--admin-muted); font-size: 0.85rem; }
.rate-input input { text-align: right; }
.rate-input--cell { max-width: 120px; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; max-width: 620px; }
.tier-cell label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--admin-muted); margin-bottom: 0.35rem; }

.rate-matrix th, .rate-matrix td { white-space: nowrap; }
.rate-matrix__car { font-weight: 600; position: sticky; left: 0; background: #fff; }
.rate-matrix input { width: 88px; }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar__dow { text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--admin-muted); padding: 0.25rem 0; }
.calendar__cell { min-height: 54px; border-radius: 0.4rem; padding: 0.35rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--admin-line-soft); }
.calendar__cell--empty { border: 0; background: transparent; }
.calendar__num { font-weight: 600; font-size: 0.82rem; color: var(--admin-text); }
.calendar__avail { font-size: 0.72rem; align-self: flex-end; font-weight: 700; }
.cal--free { background: #eaf7ef; border-color: #c9ebd6; }
.cal--free .calendar__avail { color: #1a7f43; }
.cal--partial { background: #fff5e0; border-color: #f2ddaa; }
.cal--partial .calendar__avail { color: #946a00; }
.cal--none { background: #fdeaea; border-color: #f3c9c9; }
.cal--none .calendar__avail { color: #c0392b; }
.cal-nav { display: flex; gap: 0.35rem; }
.cal-legend { display: flex; gap: 1.25rem; margin-top: 1rem; font-size: 0.8rem; color: var(--admin-muted); flex-wrap: wrap; }
.cal-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; vertical-align: middle; margin-right: 0.25rem; }
.blackout-form { display: flex; flex-direction: column; gap: 0.85rem; }
.blackout-form .btn { align-self: flex-start; }

/* --- Bookings & customers ---------------------------------------------- */
.subnav__spacer { flex: 1; }
.toolbar__actions { display: flex; gap: 0.5rem; }
.kv { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; }
.kv > div { display: grid; grid-template-columns: 130px 1fr; gap: 0.75rem; }
.kv dt { color: var(--admin-muted); font-size: 0.85rem; }
.kv dd { margin: 0; }
.status-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--admin-line); border-radius: var(--r-md); }
.status-actions__label { font-size: 0.85rem; color: var(--admin-muted); font-weight: 600; }
.pricebox { display: flex; flex-direction: column; gap: 0.5rem; }
.pricebox__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.pricebox__row--credit { color: #1a7f43; }
.pricebox__row--total { padding-top: 0.6rem; margin-top: 0.2rem; border-top: 2px solid var(--admin-line); font-weight: 800; font-size: 1.15rem; }
.pricebox__row--note { color: var(--admin-muted); font-size: 0.85rem; margin-top: 0.3rem; }
.pay-status-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.extra-admin { display: flex; align-items: center; }
.extra-admin > label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; font-size: 0.9rem; }

/* Admin -> Updates -------------------------------------------------------- */
.code-log { margin: 0; padding: 0.85rem 1rem; background: var(--c-surface-2, rgba(0,0,0,0.04)); border: 1px solid var(--c-line); border-radius: var(--r-sm); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 22rem; overflow-y: auto; }
.plain-list { margin: 0 0 1rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.plain-list code { font-size: 0.8rem; }
.static-value { padding: 0.5rem 0; font-weight: 600; }
.text-warning { color: var(--c-warning, #b4790f); }
.right { text-align: right; }
.mt-1 { margin-top: 1rem; }

/* Locations: photo banner --------------------------------------------------
   When a location has an uploaded photo it replaces the gradient + icon.
   The name and badge stay on top, so the image carries a scrim dark enough
   to keep white text readable over any photo. */
.loc2__banner--photo { padding-top: 9rem; background: #1b1f2a; }
.loc2__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.loc2__banner--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 18, 0.15) 0%, rgba(10, 12, 18, 0.55) 55%, rgba(10, 12, 18, 0.88) 100%);
}
.loc2__banner--photo .loc2__banner-inner { position: relative; z-index: 2; }
@media (max-width: 599.98px) { .loc2__banner--photo { padding-top: 7rem; } }

/* Phone overflow ------------------------------------------------------------
   A grid or flex item defaults to min-width:auto, so it refuses to shrink
   below its content's min-content width — and a wide child then pushes the
   whole page sideways instead of being squeezed. The fleet page did exactly
   that: the price Min–Max row would not go under ~435px, so the single-column
   grid track grew to 477px inside a 390px phone and the entire site scrolled
   horizontally. Desktop never showed it because there was always room.
   Measured on a real 390px viewport: 493px document -> 375px. */
.fleet > *,
.car-detail > *,
.booking > * { min-width: 0; }
.filters__range { flex-wrap: wrap; }
.filters__range input { flex: 1 1 7rem; }