/* =====================================================
   DriveLux — Design System
   Premium Saudi Car Rental
   Clean rebuild — token-based, RTL-first, mobile-first
   ===================================================== */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Colors */
  --color-primary:    #E1FF51;
  --color-dark:       #00272C;
  --color-white:      #FFFFFF;
  --color-light:      #F5F7F8;
  --color-border:     #E5E7EB;
  --color-text:       #0F172A;
  --color-muted:      #64748B;
  --color-success:    #10b981;
  --color-danger:     #ef4444;
  --color-warning:    #f59e0b;

  /* Backwards-compat aliases (PHP inline styles reference these) */
  --color-brand-dark:  #00272C;
  --color-brand:       #00363d;
  --color-gold:        #E1FF51;
  --color-gold-light:  #cff035;
  --color-gold-dark:   #b8d800;
  --color-accent:      #E1FF51;
  --color-accent-hover:#cff035;
  --color-accent-dim:  rgba(225,255,81,.12);
  --color-accent-glow: rgba(225,255,81,.28);
  --color-surface:     #F5F7F8;
  --color-surface-2:   #ECEEF0;
  --color-text-muted:  #64748B;
  --color-blue:        #2563EB;

  /* Typography */
  --font-heading: 'Cairo', sans-serif;
  --font-body:    'Cairo', sans-serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Backwards-compat radius */
  --radius-btn:   14px;
  --radius-input: 14px;
  --radius-full:  999px;

  /* Shadows */
  --shadow-sm: 0 4px 14px rgba(15,23,42,.08);
  --shadow-md: 0 12px 32px rgba(15,23,42,.12);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.16);
  --shadow-xl: 0 24px 60px rgba(15,23,42,.16);

  /* Layout */
  --container:     1280px;
  --header-height: 72px;
  --nav-height:    72px;

  /* Animation */
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);

  /* HBC booking card */
  --hbc-radius:      26px;
  --hbc-tab-h:       50px;
  --hbc-input-h:     56px;
  --hbc-pad-desktop: 28px;
  --hbc-pad-mobile:  20px;
  --hbc-shadow:      0 24px 70px rgba(0,39,44,.22);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-light);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container {
  width: min(100% - 64px, var(--container));
  margin-inline: auto;
}

.container--sm { width: min(100% - 64px, 800px); }
.container--lg { width: min(100% - 64px, 1440px); }

.section { padding: var(--space-20) 0; width: 100%; }
.section--alt     { background: var(--color-white); }
.section--dark    { background: var(--color-dark); color: var(--color-white); }
.section--account { padding-top: 2rem; padding-bottom: 3rem; }

/* Two-column content layout (info col + form col) */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: start;
}
.section--cta  { position: relative; overflow: hidden; padding-top: 0; }

.section--cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(225,255,81,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.section--cta .container { position: relative; z-index: 1; }
.section--cta .hero-v2__badge { margin-bottom: 1.5rem; }
.section--cta .section__title { margin-bottom: 1rem; }
.cta-btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.cta-subtitle {
  font-size: 1.125rem;
  color: rgba(255,255,255,.7);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  letter-spacing: .01em;
}

/* Section headers */
.section__header { max-width: 640px; margin-bottom: var(--space-12); }
.section__header--center { margin-inline: auto; text-align: center; }
.section__header--wide { max-width: 100%; flex-wrap: wrap; gap: 1rem; }
.section__title--no-mb { margin-bottom: 0; }
.fleet-view-all { text-align: center; margin-top: 2.5rem; }

.section__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: .75rem;
}

.section__label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.section--dark .section__label        { color: var(--color-primary); }
.section--dark .section__label::before { background: var(--color-primary); }

.section__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 1rem;
}

.section--dark .section__title    { color: var(--color-white); }

.section__subtitle { font-size: 1.0625rem; color: var(--color-muted); line-height: 1.7; }
.section--dark .section__subtitle { color: rgba(255,255,255,.65); }

/* ============================================================
   4. UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.hidden      { display: none !important; }
.text-center { text-align: center; }
.text-gold   { color: var(--color-primary); }
.text-muted  { color: var(--color-muted); }
.text-white  { color: var(--color-white); }
.font-bold   { font-weight: 700; }
.font-semi   { font-weight: 600; }

.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.grid   { display: grid; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  min-height: 48px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-dark);
  box-shadow: 0 4px 14px rgba(225,255,81,.3);
}
.btn--primary:hover {
  background: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(225,255,81,.42);
}

.btn--dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn--dark:hover {
  background: var(--color-brand);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover {
  border-color: var(--color-dark);
  background: var(--color-dark);
  color: var(--color-white);
}

.btn--outline-gold {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.btn--outline-gold:hover {
  background: var(--color-primary);
  color: var(--color-dark);
}

.btn--outline-accent-dark {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-dark);
}
.btn--outline-accent-dark:hover {
  background: var(--color-primary);
  color: var(--color-dark);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-dark);
  border: 2px solid var(--color-primary);
}
.btn--white:hover { background: var(--color-primary); }

.btn--danger  { background: var(--color-danger);  color: #fff; }
.btn--success { background: var(--color-success); color: #fff; }

.btn--sm   { padding: 0 var(--space-4); min-height: 40px; font-size: .875rem; }
.btn--lg   { padding: 0 var(--space-8); min-height: 56px; font-size: 1rem; }
.btn--full { width: 100%; }

.btn:disabled { opacity: .6; pointer-events: none; }

/* ============================================================
   6. NAVIGATION — Dark Theme
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--color-dark);
  border-bottom: 1px solid rgba(255,255,255,.10);
  z-index: 1000;
  transition: background var(--transition), border-color var(--transition);
}

/* Home page: floats transparent over hero */
.nav--transparent {
  background: transparent;
  border-bottom-color: transparent;
}

/* Becomes solid when scrolled */
.nav--transparent.nav--scrolled {
  background: rgba(15,23,38,.95);
  border-bottom-color: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Non-home pages */
.nav--solid {
  background: var(--color-dark);
  border-bottom-color: rgba(255,255,255,.10);
}

.nav .container { height: 100%; }

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ── Logo ── */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--color-white);
  letter-spacing: -.02em;
  flex-shrink: 0;
  text-decoration: none;
}

.nav__logo-mark {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.nav__logo:hover .nav__logo-mark { transform: rotate(12deg) scale(1.05); }
.nav__logo span { color: var(--color-primary); }

/* ── Desktop Links ── */
.nav__links {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 16px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  position: relative;
  color: rgba(255,255,255,.75);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .8125rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav__link:hover             { color: var(--color-white); }
.nav__link:hover::after      { transform: scaleX(.5); }
.nav__link--active           { color: var(--color-white); font-weight: 700; }
.nav__link--active::after    { transform: scaleX(1); }

/* "My Bookings" link — visually separated from public nav links */
.nav__link--bookings {
  margin-inline-start: 18px;
  padding-inline: 4px;
}

/* ── Actions ── */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Nav-scoped button sizes */
.nav__actions .btn--primary,
.nav__actions .btn--outline-gold {
  height: 34px;
  min-height: 34px;
  padding: 0 16px;
  font-size: .8rem;
  font-weight: 700;
  border-radius: var(--radius-md);
}

.nav__actions .btn--primary {
  background: var(--color-primary);
  color: var(--color-dark);
  border: 1px solid var(--color-primary);
  box-shadow: none;
}
.nav__actions .btn--primary:hover {
  background: var(--color-gold-light);
  transform: none;
  box-shadow: none;
}

.nav__actions .btn--outline-gold {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.nav__actions .btn--outline-gold:hover {
  background: var(--color-primary);
  color: var(--color-dark);
}

/* Language switcher */
.nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 10px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--color-white);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}

.nav__lang-btn:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

/* User dropdown */
.nav__user {
  position: relative;
}

.nav__user-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 14px;
  height: 40px;
  max-width: 180px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--color-white);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.nav__user-btn:hover       { background: rgba(255,255,255,.18); }
.nav__user-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav__user-btn svg          { flex-shrink: 0; }

.nav__user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

/* Dropdown panel — click-controlled only (no :hover trigger) */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 260px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 2000;
}

/* Invisible bridge covers the 8px gap so mouse can move from button to panel */
.nav__dropdown::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -10px;
  height: 10px;
}

/* Open state — toggled by JS via .is-open on parent */
.nav__user.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  min-height: 46px;
  color: #0F172A;
  font-size: .9375rem;
  font-weight: 500;
  border-radius: 12px;
  text-decoration: none;
  transition: background var(--transition);
}

.nav__dropdown a:hover { background: #F5F7F8; }

.nav__dropdown a.danger {
  color: var(--color-danger);
  border-top: 1px solid #E5E7EB;
  margin-top: 8px;
  border-radius: 0 0 12px 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.nav__dropdown a.danger:hover { background: #fff1f2; }

.nav__dropdown-sep {
  height: 1px;
  background: #E5E7EB;
  margin: 4px 0 0;
}

/* Notification bell */
.nav__notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--color-white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  text-decoration: none;
  transition: all var(--transition);
}
.nav__notif-btn:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}
.nav__notif-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nav__notif-badge {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  min-width: 18px;
  height: 18px;
  background: #E1FF51;
  color: #00272C;
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  padding: 0 4px;
  pointer-events: none;
}

/* Notification dropdown wrap + panel */
.nav__notif-wrap {
  position: relative;
}

.nav__notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 2000;
  overflow: hidden;
}

/* Hover bridge — covers the gap so mouse can travel from button to panel */
.nav__notif-panel::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -10px;
  height: 10px;
}

.nav__notif-wrap.is-open .nav__notif-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #F3F4F6;
}

.nav__notif-panel__title {
  font-size: .9375rem;
  font-weight: 700;
  color: #0F172A;
}

.nav__notif-panel__count {
  background: #E1FF51;
  color: #00272C;
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  padding: 2px 8px;
}

.nav__notif-panel__body {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
}

/* Empty state */
.nav__notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  gap: 10px;
  color: #94A3B8;
  text-align: center;
}
.nav__notif-empty svg { opacity: .45; }
.nav__notif-empty p   { font-size: .875rem; line-height: 1.5; }

/* Individual notification item */
.nav__notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  transition: background var(--transition);
}
.nav__notif-item:hover             { background: #F9FAFB; }
.nav__notif-item--unread           { background: rgba(225,255,81,.05); }
.nav__notif-item--unread:hover     { background: rgba(225,255,81,.10); }

.nav__notif-item__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #F1F5F9;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.nav__notif-item--unread .nav__notif-item__icon {
  background: rgba(225,255,81,.2);
  color: #1a2e00;
}

.nav__notif-item__body {
  flex: 1;
  min-width: 0;
}

.nav__notif-item__title {
  font-size: .875rem;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav__notif-item--unread .nav__notif-item__title { font-weight: 700; }

.nav__notif-item__msg {
  font-size: .8125rem;
  color: #64748B;
  line-height: 1.45;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav__notif-item__time {
  font-size: .75rem;
  color: #94A3B8;
  margin-top: 3px;
}

.nav__notif-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E1FF51;
  flex-shrink: 0;
  margin-top: 6px;
}

/* Footer "view all" */
.nav__notif-panel__foot {
  border-top: 1px solid #F3F4F6;
}
.nav__notif-panel__foot a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-size: .875rem;
  font-weight: 600;
  color: #0F172A;
  text-decoration: none;
  transition: background var(--transition);
}
.nav__notif-panel__foot a:hover { background: #F5F7F8; }

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.nav__hamburger:hover { background: rgba(255,255,255,.1); }

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile Drawer Backdrop */
.nav__drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 998;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.nav__drawer-overlay.is-open { display: block; }

/* Mobile Drawer Panel */
.nav__mobile {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 88vw;
  background: var(--color-dark);
  border-left: 1px solid rgba(225,255,81,.12);
  z-index: 999;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
  overflow: hidden;
}

.nav__mobile.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}

.nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.nav__mobile-logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-white);
}

.nav__mobile-logo span { color: var(--color-primary); }

.nav__mobile-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}

.nav__mobile-close:hover { background: rgba(255,255,255,.12); color: var(--color-white); }

.nav__mobile-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.72);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .9375rem;
  transition: all var(--transition);
  margin-bottom: 2px;
}

.nav__mobile-link:hover             { color: var(--color-white); background: rgba(255,255,255,.06); }
.nav__mobile-link.is-active         { color: var(--color-primary); background: rgba(225,255,81,.1); }
.nav__mobile-link--danger           { color: rgba(239,68,68,.8); }
.nav__mobile-link--danger:hover     { color: var(--color-danger); background: rgba(239,68,68,.08); }

.nav__mobile-notif-badge {
  margin-inline-start: auto;
  background: var(--color-warning);
  color: var(--color-dark);
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  padding: .1rem .45rem;
  line-height: 1.4;
}

.nav__mobile-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: .375rem .75rem;
}

.nav__mobile-link--icon {
  gap: .625rem;
}

.nav__mobile-footer {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: .625rem;
  flex-shrink: 0;
}

.nav__mobile-lang {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  color: rgba(255,255,255,.55);
  font-size: .875rem;
  font-weight: 500;
  transition: color var(--transition);
  margin-top: .25rem;
}

.nav__mobile-lang:hover { color: var(--color-primary); }

/* ============================================================
   7. HERO — hero-v2 (home page)
   ============================================================ */
.hero-v2 {
  position: relative;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
  margin-top: calc(-1 * var(--header-height));
  overflow: hidden;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,39,44,.35) 0%,
    rgba(0,39,44,.45) 100%
  );
  pointer-events: none;
}

.hero-v2__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(var(--header-height) + 56px) 0 90px;
}

.hero-v2__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 0 var(--space-6);
  margin-bottom: 34px;
}

.hero-v2__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: rgba(225,255,81,.10);
  border: 1px solid rgba(225,255,81,.35);
  color: var(--color-primary);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.hero-v2__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.12;
  margin-bottom: 18px;
  max-width: 900px;
  text-shadow: 0 3px 18px rgba(0,0,0,.45);
}

.hero-v2__title span { color: var(--color-primary); }

.hero-v2__subtitle {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.78);
  max-width: 760px;
  line-height: 1.8;
  text-shadow: 0 3px 18px rgba(0,0,0,.45);
}

.hero-v2__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ── Legacy hero classes (kept for pages referencing them) ── */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-dark);
}

.hero__bg, .hero__bg-img, .hero__bg-pattern { position: absolute; inset: 0; }
.hero__bg {
  background: linear-gradient(125deg, rgba(10,16,30,.98) 0%, rgba(20,33,62,.88) 55%, rgba(10,16,30,.75) 100%);
  z-index: 1;
}
.hero__bg-img    { width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__bg-pattern {
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 60%, rgba(225,255,81,.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 20%, rgba(225,255,81,.04) 0%, transparent 60%);
  z-index: 0;
}
.hero__content { position: relative; z-index: 2; width: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 100vh;
  padding-top: 3rem;
  padding-bottom: 9rem;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem 1rem;
  background: rgba(225,255,81,.1);
  border: 1px solid rgba(225,255,81,.28);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.hero__title {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.12;
  margin-bottom: 1.25rem;
}

.hero__title span { color: var(--color-primary); }

.hero__subtitle {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.65);
  max-width: 500px;
  margin-bottom: 2.25rem;
  line-height: 1.75;
}

.hero__btns  { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 3rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: .875rem; }

.hero__stat-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition);
}

.hero__stat-card:hover { background: rgba(255,255,255,.09); border-color: rgba(225,255,81,.3); }

.hero__stat-icon {
  width: 38px;
  height: 38px;
  background: rgba(225,255,81,.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.hero__stat-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.hero__stat-label { font-size: .75rem; color: rgba(255,255,255,.55); margin-top: .2rem; font-weight: 500; }

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero__car-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 60% 40% at 50% 55%, rgba(225,255,81,.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero__car-placeholder {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(225,255,81,.15);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(225,255,81,.5);
}

/* ============================================================
   8. BOOKING CARD (HBC)
   ============================================================ */
.hbc {
  width: 100%;
  opacity: 1 !important;
  filter: none !important;
}

.hbc__container {
  max-width: 1120px;
  width: calc(100% - 96px);
  margin: 0 auto;
}

/* Tabs — sit flush on top of the white card via -1px overlap */
.hbc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  height: auto;
  background: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}

.hbc__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: rgba(255,255,255,.85);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  border-radius: 16px 16px 0 0;
  height: 50px;
  padding: 0 20px;
  transition: background .20s, color .20s, border-color .20s;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
}

.hbc__tab:hover {
  background: rgba(255,255,255,.18);
  color: var(--color-white);
  border-color: rgba(255,255,255,.55);
}

.hbc__tab--active {
  background: var(--color-primary);
  color: var(--color-dark);
  font-weight: 700;
  border-color: transparent;
}

.hbc__tab--active::after { display: none; }

.hbc__tab-icon { display: flex; align-items: center; flex-shrink: 0; opacity: .7; }
.hbc__tab--active .hbc__tab-icon,
.hbc__tab:hover   .hbc__tab-icon { opacity: 1; }

/* Card body — solid white floating card */
.hbc__body {
  background: #FFFFFF;
  border-radius: 26px;
  border-start-start-radius: 0;
  padding: 22px 28px 26px;
  box-shadow: var(--hbc-shadow);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hbc__pane         { display: none; }
.hbc__pane--active { display: block; }

/* Checkbox row (legacy standalone, kept for fallback) */
.hbc__check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 18px;
}

.hbc__check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-dark);
  cursor: pointer;
  flex-shrink: 0;
}

.hbc__check-row label {
  font-size: .875rem;
  color: var(--color-muted);
  cursor: pointer;
  font-weight: 500;
}

/* Inline checkbox card — grid column 4 */
.hbc__checkbox-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--hbc-input-h);
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  background: #FFFFFF;
  font-size: .875rem;
  color: #64748B;
  cursor: pointer;
  padding: 0 12px;
  transition: border-color .18s, box-shadow .18s;
  white-space: nowrap;
  width: 100%;
  line-height: 1.3;
  text-align: center;
  user-select: none;
}

.hbc__checkbox-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(225,255,81,.14);
}

.hbc__checkbox-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-dark);
  flex-shrink: 0;
  cursor: pointer;
  pointer-events: none;
}

.hbc__return-row { margin-top: 12px; max-width: 38%; }
.hbc__return-row:not(.is-visible) { display: none; }
.hbc__return-row.is-visible { display: flex; flex-direction: column; gap: .4rem; }

/* Form grid — 5 columns: location | pickup date | dropoff date | checkbox | search */
.hbc__form-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 0.75fr 0.85fr;
  gap: 14px;
  align-items: end;
}

.hbc__field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.hbc__label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-muted);
  padding-inline-start: .25rem;
  white-space: nowrap;
  min-height: 1.25rem;
  line-height: 1.25rem;
  display: block;
  margin-bottom: 6px;
}

.hbc__label--spacer { visibility: hidden; }

/* Input wrapper */
.hbc__input-wrap { position: relative; }

.hbc__input-icon {
  position: absolute;
  inset-inline-start: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  z-index: 1;
}

.hbc__input-wrap .form-control {
  width: 100%;
  height: var(--hbc-input-h);
  padding-inline-start: 2.75rem;
  padding-inline-end: .875rem;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--color-text);
  font-size: .875rem;
  transition: border-color .18s, box-shadow .18s;
  appearance: none;
  -webkit-appearance: none;
}

.hbc__input-wrap .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(225,255,81,.22);
}

.hbc__input-wrap select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}

/* Search button */
.hbc__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--hbc-input-h);
  padding: 0 22px;
  background: var(--color-primary);
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 800;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(225,255,81,.22);
}

.hbc__search-btn:hover {
  background: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(225,255,81,.32);
}

.hbc__search-btn:active { transform: none; }

/* CTA panes (non-search tabs) */
.hbc__cta-pane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  min-height: calc(var(--hbc-input-h) + var(--hbc-input-h) * .3);
  padding: .25rem 0;
}

.hbc__cta-pane-text { flex: 1; min-width: 200px; }

.hbc__cta-pane-text h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: .375rem;
}

.hbc__cta-pane-text p  { font-size: .9rem; color: var(--color-muted); line-height: 1.65; }
.hbc__cta-pane-btn                 { flex-shrink: 0; }
.hbc__cta-pane-btn .hbc__search-btn { width: auto; padding: 0 2rem; }

/* ── Tab panel fade-in transition ── */
@keyframes hbc-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hbc__pane--active {
  animation: hbc-fade-in .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hbc__pane--active { animation: none; }
}

/* ── 3-column grid (manage booking: ref | email | button) ── */
.hbc__form-grid--3 {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr;
  gap: 14px;
  align-items: end;
}

/* ── 6-column grid (limousine: from | to | date | time | service | button) ── */
.hbc__form-grid--limo {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 0.8fr 0.7fr 1fr 0.95fr;
  gap: 11px;
  align-items: end;
}

/* ── Manage booking — logged-in shortcut strip ── */
.hbc__manage-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #E5E7EB;
  flex-wrap: wrap;
}
.hbc__manage-top__text { flex: 1; min-width: 0; }
.hbc__manage-top__label {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: .15rem;
}
.hbc__manage-top__sub {
  font-size: .8rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* Fallback — already solid white, no-op kept for compatibility */
@supports not (backdrop-filter: blur(10px)) {
  .hbc__body { background: #FFFFFF; }
}

/* Legacy booking widget */
.booking-widget-wrap {
  background: linear-gradient(to bottom, var(--color-dark) 50%, var(--color-light) 50%);
}

.booking-widget {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: 0 -4px 0 var(--color-primary), var(--shadow-lg);
  margin-top: -4.5rem;
  position: relative;
  z-index: 10;
  border: 1px solid var(--color-border);
}

.booking-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.booking-widget__title {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
}

.booking-widget__title-icon {
  width: 34px;
  height: 34px;
  background: var(--color-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.booking-widget__tabs {
  display: flex;
  gap: .25rem;
  background: var(--color-light);
  padding: .25rem;
  border-radius: var(--radius-sm);
}

.booking-widget__tab {
  padding: .5rem 1rem;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: all var(--transition);
  white-space: nowrap;
  cursor: pointer;
}

.booking-widget__tab--active {
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-sm);
}

.booking-widget__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 1rem;
  align-items: end;
}

/* ============================================================
   9. FORM ELEMENTS
   ============================================================ */
.form-group       { display: flex; flex-direction: column; gap: .375rem; }
.form-group--full { grid-column: 1 / -1; }
.form-actions     { margin-top: 1.5rem; }

.form-label { font-size: .875rem; font-weight: 600; color: var(--color-muted); }

.form-control {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  font-size: .9375rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(225,255,81,.22);
}

.form-control::placeholder { color: var(--color-muted); opacity: .7; }

.form-control--icon { padding-inline-start: 2.75rem; }

.form-icon-wrap { position: relative; }

.form-icon {
  position: absolute;
  inset-inline-start: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}

.form-error { font-size: .8125rem; color: var(--color-danger); margin-top: .25rem; }
.form-hint  { font-size: .8125rem; color: var(--color-muted);  margin-top: .25rem; }

.input-group {
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.input-group .form-control { border: none; border-radius: 0; flex: 1; }
.input-group .btn          { border-radius: 0; flex-shrink: 0; }

/* ============================================================
   10. CAR CARDS
   ============================================================ */
.cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 1.5rem;
}

.cars-grid .empty-state { grid-column: 1/-1; }

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

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

.car-card__img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--color-light);
}

.car-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.car-card:hover .car-card__img { transform: scale(1.05); }

.car-card__badge {
  position: absolute;
  top: .75rem;
  inset-inline-start: .75rem;
  padding: .25rem .625rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-dark);
}

.car-card__status {
  position: absolute;
  top: .75rem;
  inset-inline-end: .75rem;
  padding: .25rem .625rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
}

.status--available   { background: #dcfce7; color: #15803d; }
.status--reserved    { background: #fef3c7; color: #92400e; }
.status--rented      { background: #fee2e2; color: #991b1b; }
.status--maintenance { background: #f1f5f9; color: #475569; }

.car-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

.car-card__category {
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  opacity: .65;
}

.car-card__name {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: .875rem;
  line-height: 1.3;
}

.car-card__specs { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 1.25rem; }

.car-card__spec { display: flex; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--color-muted); }
.car-card__spec svg { flex-shrink: 0; }

.car-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
  gap: .75rem;
}

/* Dual CTA row below price (Book Now + View Details) */
.car-card__cta-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-shrink: 0;
}

.car-card__price-label { font-size: .75rem; color: var(--color-muted); }

.car-card__price {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
}

.car-card__price span { font-size: .8125rem; font-weight: 400; color: var(--color-muted); }

/* Category tabs */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-tab:hover,
.category-tab--active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

/* ============================================================
   10b. SERVICES GRID (homepage)
   ============================================================ */
.svc-section { background: var(--color-light); }

/* Outer flex: large card + 2×2 sub-grid side by side.
   Flexbox direction auto-reverses in RTL, so the large card
   (first in DOM) appears on the right in dir="rtl". */
.svc-grid {
  display: flex;
  gap: 12px;
  height: 500px;
  margin-bottom: 2.5rem;
}

.svc-card--lg  { flex: 1.15; min-width: 0; }

.svc-grid__sm {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

/* ── Base card ── */
.svc-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-white);
}

.svc-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

/* Background layer */
.svc-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transition: transform 250ms cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

/* Per-card photo backgrounds — car.png with colour tint overlay */
.svc-card__bg--main {
  background:
    linear-gradient(150deg, rgba(0,39,44,.50) 0%, rgba(0,10,14,.20) 100%),
    url('../images/car.png') center 40% / cover no-repeat;
}
.svc-card__bg--daily {
  background:
    linear-gradient(145deg, rgba(0,52,68,.62) 0%, rgba(0,20,28,.42) 100%),
    url('../images/car.png') 65% 40% / cover no-repeat;
}
.svc-card__bg--longterm {
  background:
    linear-gradient(145deg, rgba(18,26,50,.68) 0%, rgba(6,10,22,.48) 100%),
    url('../images/car.png') 30% 40% / cover no-repeat;
}
.svc-card__bg--airport {
  background:
    linear-gradient(145deg, rgba(8,28,44,.68) 0%, rgba(0,18,28,.48) 100%),
    url('../images/car.png') center 55% / cover no-repeat;
}
.svc-card__bg--limo {
  background:
    linear-gradient(145deg, rgba(24,14,36,.72) 0%, rgba(8,6,14,.52) 100%),
    url('../images/car.png') center 25% / cover no-repeat;
}

/* Subtle zoom on hover */
.svc-card:hover .svc-card__bg { transform: scale(1.04); }

/* Bottom-heavy dark gradient overlay for text legibility */
.svc-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.28) 45%,
    rgba(0,0,0,.06) 100%
  );
  pointer-events: none;
}

/* Card body — flex column */
.svc-card__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.svc-card--lg .svc-card__body  { justify-content: flex-end; }
.svc-card--sm .svc-card__body  { justify-content: space-between; padding: 1.375rem 1.5rem; }

/* ── Large card ── */
.svc-card__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: .5rem;
}

.svc-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-white);
  margin: 0;
}

.svc-card--lg .svc-card__title {
  font-size: clamp(1.2rem, 1.7vw, 1.625rem);
  margin-bottom: .625rem;
}

.svc-card--sm .svc-card__title {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.svc-card__sub {
  font-size: .875rem;
  color: rgba(255,255,255,.80);
  line-height: 1.65;
  max-width: 340px;
  margin-bottom: 1.125rem;
}

/* CTA row: "Explore Fleet" + arrow (large card only) */
.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ── Small card ── */
.svc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(225,255,81,.10);
  border: 1px solid rgba(225,255,81,.22);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  flex-shrink: 0;
}

.svc-card__bottom {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* Arrow nudge container */
.svc-card__arrow-wrap {
  display: flex;
  align-items: center;
  color: var(--color-primary);
  height: 14px;
}

/* Arrow SVG */
.svc-card__arrow { display: block; flex-shrink: 0; }

/* "View All" CTA row */
.svc-view-all { text-align: center; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .svc-grid          { flex-direction: column; height: auto; }
  .svc-card--lg      { height: 340px; }
  .svc-grid__sm      { height: 316px; }
}

@media (max-width: 640px) {
  .svc-grid          { gap: 8px; }
  .svc-card--lg      { height: 240px; }
  .svc-grid__sm      { height: auto; gap: 8px; grid-template-rows: 140px 140px; }
  .svc-card--sm .svc-card__body { padding: 1rem 1.125rem; }
}

/* ============================================================
   11. FLEET PAGE
   ============================================================ */
.fleet-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}

.fleet-sidebar {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  position: sticky;
  top: calc(var(--nav-height) + 1rem);
}

.fleet-sidebar__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fleet-sidebar__section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.fleet-sidebar__section:last-child { border-bottom: none; margin-bottom: 0; }

.fleet-sidebar__label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .875rem;
}

.check-group { display: flex; flex-direction: column; gap: .5rem; }

.check-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition);
}

.check-item:hover { background: var(--color-light); }

.check-item input[type="checkbox"],
.check-item input[type="radio"] {
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  accent-color: var(--color-dark);
  cursor: pointer;
  flex-shrink: 0;
}

.check-item__label { font-size: .9rem; color: var(--color-text); }
.check-item__count { margin-inline-start: auto; font-size: .75rem; color: var(--color-muted); }

.price-range-wrap { padding: .5rem 0; }

.price-range-inputs {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .75rem;
}

.price-range-inputs .form-control { padding: .5rem .75rem; font-size: .875rem; }

.fleet-results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.fleet-results__count { font-size: .9375rem; color: var(--color-muted); }
.fleet-results__count strong { color: var(--color-text); }

/* ============================================================
   12. CAR DETAIL PAGE
   ============================================================ */
.car-detail { padding-top: 2rem; }

.car-gallery {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-light);
  height: 480px;
}

.car-gallery__main { width: 100%; height: 100%; object-fit: cover; }

.car-gallery__thumbnails { display: flex; gap: .5rem; margin-top: .75rem; }

.car-gallery__thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition);
  flex-shrink: 0;
}

.car-gallery__thumb.active,
.car-gallery__thumb:hover { border-color: var(--color-primary); }

.car-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.car-detail__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}

.car-detail__content { min-width: 0; }

.car-detail__brand {
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}

.car-detail__name { font-size: 2rem; font-weight: 800; color: var(--color-dark); margin-bottom: 1rem; }

.car-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-light);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.car-spec-item { display: flex; flex-direction: column; gap: .25rem; }

.car-spec-item__icon {
  width: 36px;
  height: 36px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .375rem;
  box-shadow: var(--shadow-sm);
}

.car-spec-item__value { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-dark); }
.car-spec-item__label { font-size: .75rem; color: var(--color-muted); }

.car-features { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

.car-feature-tag {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .875rem;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  color: var(--color-text);
}

/* Booking sidebar card */
.booking-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-height) + 1rem);
}

.booking-card__price {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.booking-card__price-main {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
}

.booking-card__price-per { font-size: .875rem; color: var(--color-muted); margin-top: .25rem; }

.booking-card__tabs {
  display: flex;
  gap: .375rem;
  margin-bottom: 1.25rem;
  background: var(--color-light);
  padding: .25rem;
  border-radius: var(--radius-sm);
}

.booking-card__tab {
  flex: 1;
  padding: .5rem;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-muted);
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
}

.booking-card__tab--active { background: var(--color-white); color: var(--color-dark); box-shadow: var(--shadow-sm); }

.price-breakdown { margin-top: 1.25rem; margin-bottom: 1.25rem; }

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
  font-size: .9rem;
  color: var(--color-muted);
  border-bottom: 1px dashed var(--color-border);
}

.price-row:last-child { border-bottom: none; }

.price-row--total {
  font-weight: 700;
  color: var(--color-dark);
  font-size: 1rem;
  padding-top: .75rem;
  border-top: 2px solid var(--color-border);
  border-bottom: none;
}

/* ============================================================
   13. BOOKING FLOW
   ============================================================ */
.booking-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 3rem;
  overflow-x: auto;
}

.booking-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  flex: 1;
  max-width: 200px;
  position: relative;
}

.booking-step::after {
  content: '';
  position: absolute;
  top: 20px;
  inset-inline-start: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 2px;
  background: var(--color-border);
}

.booking-step:last-child::after { display: none; }
.booking-step--done::after,
.booking-step--active::after    { background: var(--color-primary); }

.booking-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .875rem;
  position: relative;
  z-index: 1;
  transition: all var(--transition);
}

.booking-step--active .booking-step__num { background: var(--color-primary); color: var(--color-dark); }
.booking-step--done   .booking-step__num { background: var(--color-success); color: var(--color-white); }

.booking-step__label { font-size: .8125rem; font-weight: 600; color: var(--color-muted); text-align: center; }
.booking-step--active .booking-step__label,
.booking-step--done   .booking-step__label { color: var(--color-dark); }

/* ============================================================
   14. AUTH PAGES
   ============================================================ */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-dark);
}

.auth-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3rem;
}

.auth-visual__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,39,44,.75) 0%, rgba(0,39,44,.55) 100%);
}

.auth-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.auth-visual__content { position: relative; z-index: 1; }

.auth-visual__logo {
  position: absolute;
  top: 2rem;
  inset-inline-start: 2rem;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-white);
}

.auth-visual__logo span  { color: var(--color-primary); }
.auth-visual__title      { font-size: 2rem; font-weight: 800; color: var(--color-white); margin-bottom: .75rem; }
.auth-visual__sub        { color: rgba(255,255,255,.7); }

.auth-form-side {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.auth-form-wrap    { width: 100%; max-width: 440px; }
.auth-form__title  { font-size: 1.75rem; font-weight: 800; color: var(--color-dark); margin-bottom: .375rem; }
.auth-form__subtitle { color: var(--color-muted); margin-bottom: 2rem; }

/* ============================================================
   15. ALERTS
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: .9375rem;
}

.alert--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert--warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.alert--info    { background: #e0f2fe; color: #0c4a6e; border: 1px solid #bae6fd; }
.alert--toast   { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 1500; max-width: 420px; box-shadow: var(--shadow-lg); margin-bottom: 0; }

/* ============================================================
   16. TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

table { width: 100%; border-collapse: collapse; background: var(--color-white); }

th {
  padding: .875rem 1rem;
  text-align: start;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .9375rem;
  color: var(--color-text);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td      { background: var(--color-light); }

/* ============================================================
   17. CARDS
   ============================================================ */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card__header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card__title                 { font-size: 1rem; font-weight: 700; }
.card__title-icon            { display: inline-block; vertical-align: -.15em; margin-inline-end: .4rem; }
.card__body                  { padding: 1.5rem; }
.card__body--tight           { padding-top: .25rem; padding-bottom: .25rem; }
.card__footer                { padding: .875rem 1.5rem; border-top: 1px solid var(--color-border); }
.card--mb                    { margin-bottom: 1.25rem; }

/* ============================================================
   18. STAT CARDS
   ============================================================ */
.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}

.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
}

.stat-card--gold::before  { background: var(--color-primary); }
.stat-card--blue::before  { background: var(--color-dark); }
.stat-card--green::before { background: var(--color-success); }
.stat-card--red::before   { background: var(--color-danger); }

.stat-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card--gold  .stat-card__icon { background: var(--color-accent-dim); color: var(--color-dark); }
.stat-card--blue  .stat-card__icon { background: rgba(0,39,44,.08); color: var(--color-dark); }
.stat-card--green .stat-card__icon { background: rgba(16,185,129,.1); color: var(--color-success); }
.stat-card--red   .stat-card__icon { background: rgba(239,68,68,.1);  color: var(--color-danger); }

.stat-card__value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
  margin-bottom: .25rem;
}

.stat-card__label     { font-size: .875rem; color: var(--color-muted); }
.stat-card__value--sm { font-size: 1.375rem; }

.stat-card__trend {
  margin-inline-start: auto;
  font-size: .8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.trend--up   { color: var(--color-success); }
.trend--down { color: var(--color-danger); }

/* ============================================================
   19. BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .625rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge--new         { background: #e0f2fe; color: #0369a1; }
.badge--confirmed   { background: #dcfce7; color: #15803d; }
.badge--cancelled   { background: #fee2e2; color: #b91c1c; }
.badge--completed   { background: #f0fdf4; color: #166534; }
.badge--rejected    { background: #fef2f2; color: #991b1b; }
.badge--available   { background: #dcfce7; color: #15803d; }
.badge--reserved    { background: #fef3c7; color: #92400e; }
.badge--rented      { background: #fee2e2; color: #991b1b; }
.badge--maintenance { background: #f1f5f9; color: #475569; }
.badge--gold        { background: var(--color-primary); color: var(--color-dark); }
.badge--blue        { background: rgba(0,39,44,.1); color: var(--color-dark); }
.badge--counter     { margin-inline-start: auto; font-size: .7rem; padding: .15rem .5rem; }

/* ============================================================
   20. PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-muted);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  transition: all var(--transition);
  cursor: pointer;
}

.page-btn:hover     { border-color: var(--color-dark); color: var(--color-dark); }
.page-btn--active   { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.page-btn--disabled { opacity: .4; pointer-events: none; }

/* ============================================================
   21. WHY US / FEATURE CARDS  (legacy — kept for other pages)
   ============================================================ */
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.25rem; }

.why-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--color-border);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transition: transform var(--transition);
  transform-origin: bottom;
}

.why-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); transform: translateY(-3px); }
.why-card:hover::before { transform: scaleY(1); }

.why-card__icon {
  width: 52px;
  height: 52px;
  background: var(--color-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
  transition: transform var(--transition);
}

.why-card:hover .why-card__icon { transform: scale(1.08); }

.why-card__title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: var(--color-text); }
.why-card__text  { font-size: .875rem; color: var(--color-muted); line-height: 1.7; }

.section--dark .why-card            { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.section--dark .why-card:hover      { background: rgba(255,255,255,.07); border-color: var(--color-primary); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.section--dark .why-card__title     { color: var(--color-white); }
.section--dark .why-card__text      { color: rgba(255,255,255,.6); }
.section--dark .why-card__icon      { background: rgba(225,255,81,.12); color: var(--color-primary); }

/* ============================================================
   21b. VALUE + CTA MERGED SECTION
   ============================================================ */
.section--value-cta { position: relative; overflow: hidden; padding-top: 3rem; padding-bottom: 3.5rem; }

.value-cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(225,255,81,.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section--value-cta .container { position: relative; z-index: 1; }

/* Feature strip */
.feat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.feat-strip__item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1.375rem 1.25rem;
  border-inline-end: 1px solid rgba(255,255,255,.09);
}
.feat-strip__item:last-child { border-inline-end: none; }

.feat-strip__icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: rgba(225,255,81,.10);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}

.feat-strip__title { font-size: .9375rem; font-weight: 700; color: var(--color-white); margin-bottom: .2rem; line-height: 1.3; }
.feat-strip__text  { font-size: .8125rem; color: rgba(255,255,255,.50); line-height: 1.5; }

/* CTA row */
.value-cta__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.value-cta__text .hero-v2__badge  { margin-bottom: .75rem; }
.value-cta__text .section__title  { font-size: clamp(1.375rem, 3vw, 2rem); margin-bottom: .5rem; }
.value-cta__text .cta-subtitle    { margin: 0; opacity: .75; }
.value-cta__body .cta-btn-row     { flex-shrink: 0; }

@media (max-width: 900px) {
  .feat-strip { grid-template-columns: repeat(2, 1fr); }
  .feat-strip__item:nth-child(2) { border-inline-end: none; }
  .feat-strip__item:nth-child(3),
  .feat-strip__item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.09); }
  .feat-strip__item:nth-child(4) { border-inline-end: none; }
}

@media (max-width: 640px) {
  .feat-strip { grid-template-columns: 1fr; }
  .feat-strip__item { border-inline-end: none !important; border-top: 1px solid rgba(255,255,255,.09); }
  .feat-strip__item:first-child { border-top: none; }
  .value-cta__body { flex-direction: column; text-align: center; }
  .value-cta__body .cta-btn-row { justify-content: center; }
}

/* ============================================================
   22. CONTACT & MAP
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }

.contact-info__item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }

.contact-info__icon {
  width: 48px;
  height: 48px;
  background: var(--color-dark);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.contact-info__value { font-size: 1rem; font-weight: 600; color: var(--color-dark); margin-top: .125rem; }

.map-card { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); height: 400px; }
.map-card iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   23. MEMBERSHIP CARDS
   ============================================================ */
.membership-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; }

.membership-card {
  border-radius: var(--radius-xl);
  padding: 2rem;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.membership-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.membership-card--featured { border-color: var(--color-primary); background: var(--color-dark); color: var(--color-white); }

.membership-card__badge {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .625rem;
  border-radius: var(--radius-pill);
}

.membership-card__name  { font-size: 1.25rem; font-weight: 800; margin-bottom: .5rem; }
.membership-card__price { font-size: 2.25rem; font-weight: 800; color: var(--color-dark); line-height: 1; margin: 1rem 0; }
.membership-card--featured .membership-card__price { color: var(--color-primary); }
.membership-card__price span { font-size: .875rem; font-weight: 400; color: var(--color-muted); }
.membership-card--featured .membership-card__price span { color: rgba(255,255,255,.6); }
.membership-card__features { margin: 1.25rem 0; display: flex; flex-direction: column; gap: .625rem; }
.membership-feature { display: flex; align-items: center; gap: .625rem; font-size: .9rem; }
.membership-feature svg { color: var(--color-success); flex-shrink: 0; }
.membership-card--featured .membership-feature svg { color: var(--color-primary); }

/* ============================================================
   24. PAGE HERO (inner pages)
   ============================================================ */
/* ── Inner page compact header ── */
.page-hero {
  background: var(--color-dark);
  padding: 40px 0 32px;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(225,255,81,.05) 0%, transparent 60%);
}

.page-hero__content { position: relative; z-index: 1; }

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.6);
  margin-bottom: .625rem;
}

.page-hero__breadcrumb a { color: var(--color-primary); }
.page-hero__breadcrumb a:hover { text-decoration: underline; }

.page-hero__title {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: .375rem;
}

.page-hero__subtitle {
  color: rgba(255,255,255,.68);
  max-width: 600px;
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0;
}

/* Account / profile pages — extra compact */
.page-hero--account {
  padding: 32px 0 28px;
}

.page-hero--account .page-hero__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: .25rem;
}

.page-hero--account .page-hero__subtitle {
  font-size: .875rem;
}

/* First content section after compact page header — close the gap */
main > .section:first-child {
  padding-top: 2.5rem;
}

.page-hero__label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}

.page-hero__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.page-hero__branch {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
}

/* ── Car detail specific ── */
.section--car-detail { padding-top: 2.5rem; }

.car-detail__sidebar { min-width: 0; }

.car-detail__card { margin-bottom: 1.5rem; }

.car-detail__desc { color: var(--color-muted); line-height: 1.8; }

/* Pricing grid */
.car-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}

.pricing-cell {
  padding: 1.25rem 1rem;
  background: var(--color-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.pricing-cell__label {
  font-size: .75rem;
  color: var(--color-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .625rem;
}

.pricing-cell__value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
  margin-bottom: .375rem;
}

.pricing-cell__unit {
  font-size: .8125rem;
  color: var(--color-muted);
}

.pricing-insurance-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .875rem 1rem;
  background: #fef3c7;
  border-radius: var(--radius-md);
  font-size: .875rem;
  color: #92400e;
}

/* Guarantee list (booking card) */
.guarantee-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--color-muted);
}

/* Related cars section */
.related-section {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.btn--disabled {
  background: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* ============================================================
   25. FOOTER
   ============================================================ */
.footer { background: var(--color-dark); color: rgba(255,255,255,.7); padding: var(--space-20) 0 0; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3,1fr);
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer__logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-white); margin-bottom: 1rem; }
.footer__logo span { color: var(--color-primary); }

.footer__desc { font-size: .9rem; line-height: 1.7; margin-bottom: 1.5rem; color: rgba(255,255,255,.55); }
.footer__social { display: flex; gap: .75rem; }

.footer__social-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.footer__social-btn:hover { background: var(--color-primary); color: var(--color-dark); }

.footer__col-title { font-family: var(--font-heading); font-size: .9375rem; font-weight: 700; color: var(--color-white); margin-bottom: 1.25rem; }
.footer__links     { display: flex; flex-direction: column; gap: .625rem; }

.footer__link {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: .375rem;
}

.footer__link:hover { color: var(--color-primary); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  font-size: .875rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__bottom-links { display: flex; gap: 1.5rem; }
.footer__bottom a { color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer__bottom a:hover { color: var(--color-primary); }

/* ============================================================
   26. LOADING / SKELETON / EMPTY STATE
   ============================================================ */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-dark);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--color-light) 25%, var(--color-border) 50%, var(--color-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer { to { background-position: -200% 0; } }

.empty-state           { text-align: center; padding: 4rem 2rem; color: var(--color-muted); }
.empty-state--compact  { padding: 1.5rem 0; }

.empty-state__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  opacity: .4;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state__title { font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin-bottom: .5rem; }

/* ============================================================
   27. MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}

.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.modal {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 560px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  transform: scale(.96) translateY(8px);
  transition: all var(--transition);
}

.modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }

.modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.modal__title  { font-size: 1.25rem; font-weight: 700; }

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.modal__close:hover { background: var(--color-light); color: var(--color-text); }

/* ============================================================
   28. SCROLLBAR / FOCUS / PRINT
   ============================================================ */
::-webkit-scrollbar           { width: 8px; height: 8px; }
::-webkit-scrollbar-track     { background: var(--color-light); }
::-webkit-scrollbar-thumb     { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media print { .nav, .footer, .btn { display: none; } body { background: white; } }

/* ============================================================
   29. ADMIN FORM GRIDS (also used on public pages)
   ============================================================ */
.admin-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* Form utilities used across public pages */
.admin-form-grid-2.mb,
.admin-form-grid-3.mb  { margin-bottom: 1rem; }
.form-group.mb-lg      { margin-bottom: 1.5rem; }
.form-label-opt        { font-weight: 400; color: var(--color-muted); }
.section-head-sm       { font-size: 1.125rem; font-weight: 800; margin-bottom: 1rem; color: var(--color-dark); }
.section-head-md       { font-size: 1.5rem;   font-weight: 800; margin-bottom: 1.75rem; color: var(--color-dark); }
.mt-section            { margin-top: 3.5rem; }
.mt-block              { margin-top: 1.25rem; }

/* ============================================================
   30. TRUST BAR (homepage stats strip)
   ============================================================ */
.trust-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.75rem;
  cursor: default;
}

.trust-bar__icon {
  display: flex;
  align-items: center;
  color: var(--color-dark);
  flex-shrink: 0;
}

.trust-bar__text {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.trust-bar__sep {
  width: 1px;
  height: 26px;
  background: var(--color-border);
  flex-shrink: 0;
  align-self: center;
}

/* Price range live value display */
.price-range-val {
  font-size: .75rem;
  font-weight: 400;
  color: var(--color-primary);
  margin-inline-start: .375rem;
}

/* ============================================================
   31. RESPONSIVE
   ============================================================ */

/* 1200px */
@media (max-width: 1200px) {
  .fleet-layout       { grid-template-columns: 240px 1fr; }
  .footer__grid       { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .car-detail__layout { grid-template-columns: 1fr; }
  .hero__grid         { gap: 2rem; }
}

/* 1024px — tablet: collapse nav, show hamburger */
@media (max-width: 1024px) {
  .page-hero               { padding: 32px 0 26px; }
  .page-hero--account      { padding: 28px 0 22px; }
  main > .section:first-child { padding-top: 2rem; }
  :root { --header-height: 64px; --nav-height: 64px; }

  .container { width: min(100% - 48px, 100%); }
  .container--sm { width: min(100% - 48px, 800px); }
  .container--lg { width: min(100% - 48px, 1440px); }
  .content-grid  { gap: 2rem; }

  .nav__links      { display: none; }
  .nav__actions .btn--outline-gold,
  .nav__actions .nav__user,
  .nav__actions .nav__notif-wrap,
  .nav__lang-btn   { display: none; }
  .nav__hamburger  { display: flex; }

  .nav__actions .btn--primary {
    padding: 0 14px;
    font-size: .8125rem;
    min-height: 36px;
    height: 36px;
  }

  .hbc__form-grid,
  .hbc__form-grid--3,
  .hbc__form-grid--limo              { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hbc__field.hbc__search-btn-wrap   { grid-column: 1 / -1; }
  .hbc__search-btn                   { max-width: 360px; }
  .hbc__return-row                   { max-width: 60%; }
  .hbc__manage-top .hbc__search-btn  { max-width: none; }

  .section         { padding: 56px 0; }
  .booking-card    { position: static; }
  .auth-page       { grid-template-columns: 1fr; }
  .auth-visual     { display: none; }
  .contact-grid    { grid-template-columns: 1fr; }
  .hero__grid      { grid-template-columns: 1fr; padding-bottom: 7rem; }
  .hero__visual    { display: none; }
  .hero-v2         { min-height: 640px; }
}

/* 768px — mobile */
@media (max-width: 768px) {
  .page-hero               { padding: 28px 0 22px; }
  .page-hero--account      { padding: 24px 0 18px; }
  main > .section:first-child { padding-top: 1.75rem; }
  .section { padding: 40px 0; }
  .content-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .trust-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .625rem 0; }
  .trust-bar__inner { flex-wrap: nowrap; justify-content: flex-start; }
  .trust-bar__sep   { display: none; }
  .trust-bar__item  { padding: .375rem 1rem; }
  .trust-bar__text  { font-size: .8125rem; }

  .fleet-layout                  { grid-template-columns: 1fr; }
  .fleet-sidebar                 { position: static; display: none; }
  .fleet-sidebar.is-open         { display: block; }

  /* Category tabs: horizontal scroll on mobile */
  .category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-tab { scroll-snap-align: start; }

  #sidebar-toggle { display: flex !important; }

  .car-gallery    { height: 280px; }
  .cars-grid      { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }

  .footer__grid   { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .booking-widget        { padding: 1.25rem 1rem; }
  .booking-widget__grid  { grid-template-columns: 1fr; }
  .booking-widget__header { flex-direction: column; align-items: flex-start; }

  .section__title { font-size: 1.75rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .hero__stats        { gap: .625rem; }
  .hero__stat-card    { padding: .75rem 1rem; }
  .hero__stat-value   { font-size: 1.25rem; }
  .hero__btns         { gap: .75rem; }
  .hero__btns .btn--lg { padding: .75rem 1.5rem; font-size: .9375rem; }
  .hero-v2            { min-height: auto; }
  .hero-v2__inner     { padding: calc(var(--header-height) + 32px) 0 56px; }
  .hero-v2__title     { font-size: 2.25rem; }
  .hero-v2__subtitle  { font-size: .9375rem; }
  :root               { --hbc-input-h: 54px; }
  .hbc__container     { width: calc(100% - 48px); }

  .car-pricing-grid   { grid-template-columns: repeat(3, 1fr); }
}

/* 640px */
@media (max-width: 640px) {
  .page-hero               { padding: 24px 0 20px; }
  .page-hero--account      { padding: 20px 0 16px; }
  .container     { width: min(100% - 32px, 100%); }
  .container--sm { width: min(100% - 32px, 800px); }
  .container--lg { width: min(100% - 32px, 1440px); }

  .admin-form-grid-2,
  .admin-form-grid-3 { grid-template-columns: 1fr; }
  .hero-v2__title    { font-size: 2rem; }
  .hero-v2__subtitle { font-size: .9375rem; }
  .hero-v2__text     { margin-bottom: 24px; }

  .hbc__container    { width: calc(100% - 32px); }

  .hbc__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: -1px;
  }
  .hbc__tabs::-webkit-scrollbar { display: none; }

  .hbc__tab {
    flex-shrink: 0;
    height: 44px;
    font-size: .8125rem;
    padding: 0 16px;
  }

  .hbc__tab-icon { display: none; }
  .hbc__body     { padding: 20px; }

  .hbc__form-grid,
  .hbc__form-grid--3,
  .hbc__form-grid--limo              { grid-template-columns: 1fr; gap: .75rem; }
  .hbc__field.hbc__search-btn-wrap   { grid-column: 1; }
  .hbc__checkbox-field .hbc__checkbox-card { justify-content: flex-start; }
  .hbc__search-btn                   { max-width: 100%; }
  .hbc__return-row                   { max-width: 100%; }
  .hbc__manage-top                   { flex-direction: column; align-items: flex-start; }
  .hbc__manage-top .hbc__search-btn  { width: 100%; max-width: 100%; }

  /* Hero CTA — compact on small screens */
  .hero-v2__cta-row {
    margin-top: 1.25rem;
    gap: .625rem;
  }
  .hero-v2__cta-row .btn {
    min-height: 44px;
    padding: 0 1.25rem;
    font-size: .875rem;
  }
}

/* 480px */
@media (max-width: 480px) {
  .section              { padding: 32px 0; }
  .booking-steps        { gap: 0; }
  .booking-step__label  { display: none; }
  .footer__grid         { grid-template-columns: 1fr; }
  .hero__title          { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .hero__stat-card      { flex: 1; min-width: 130px; }
  .hero__btns           { flex-direction: column; }
  .hero__btns .btn      { width: 100%; justify-content: center; }
  .hero-v2__title       { font-size: 1.75rem; }
  .hbc__tab             { height: 40px; font-size: .75rem; padding: 0 12px; }
  .hbc__body            { padding: 16px; }
  .hbc__checkbox-card   { font-size: .8125rem; }
  .car-pricing-grid     { grid-template-columns: 1fr; }

  /* Hero CTA — stack buttons vertically on very small screens */
  .hero-v2__cta-row {
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    gap: .5rem;
  }
  .hero-v2__cta-row .btn {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.acct-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 1.75rem;
  align-items: start;
}

.acct-sidebar { position: sticky; top: calc(var(--nav-height) + 1rem); }

.acct-profile {
  padding: 1.75rem 1.25rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.acct-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 auto .875rem;
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-accent-dim);
  flex-shrink: 0;
}

.acct-name  { font-weight: 700; font-size: .9375rem; color: var(--color-text); margin-bottom: .2rem; }
.acct-email { font-size: .8125rem; color: var(--color-muted); margin-bottom: .625rem; word-break: break-all; }

.acct-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .75rem;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  background: rgba(16,185,129,.12);
  color: var(--color-success);
}

.acct-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.acct-nav {
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acct-nav__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .875rem;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: .9rem;
  font-weight: 600;
  transition: all var(--transition);
  text-decoration: none;
}

.acct-nav__item:hover          { background: var(--color-light); color: var(--color-dark); }
.acct-nav__item--active        { background: var(--color-accent-dim); color: var(--color-dark); }
.acct-nav__item svg            { flex-shrink: 0; opacity: .65; transition: opacity var(--transition); }
.acct-nav__item:hover svg,
.acct-nav__item--active svg    { opacity: 1; }
.acct-nav__sep                 { height: 1px; background: var(--color-border); margin: .375rem .875rem; }
.acct-nav__item--danger        { color: var(--color-danger) !important; }
.acct-nav__item--danger svg    { opacity: 1; }
.acct-nav__item--danger:hover  { background: #fff1f2; }

.acct-points-bar {
  margin: 0 .75rem .75rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-brand-dark);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.acct-points-bar__icon  { font-size: 1.375rem; flex-shrink: 0; }
.acct-points-bar__label { font-size: .75rem; color: rgba(255,255,255,.65); margin-bottom: .1rem; }
.acct-points-bar__value { font-size: 1.125rem; font-weight: 800; color: var(--color-gold); line-height: 1; }

.acct-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.acct-recent-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--color-border);
}

.acct-recent-item:last-child  { border-bottom: none; padding-bottom: 0; }
.acct-recent-item:first-child { padding-top: 0; }

.acct-recent-img {
  width: 72px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  flex-shrink: 0;
}

.acct-recent-info        { flex: 1; min-width: 0; }
.acct-recent-car         { font-weight: 700; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-recent-meta        { font-size: .8125rem; color: var(--color-muted); margin-top: .2rem; }
.acct-recent-right       { text-align: end; flex-shrink: 0; }
.acct-recent-price       { font-weight: 800; color: var(--color-dark); font-size: 1rem; }
.acct-recent-badge       { margin-top: .3rem; }
.acct-member-since       { text-align: center; margin-top: .875rem; font-size: .8125rem; color: var(--color-muted); }

@media (max-width: 920px) {
  .acct-layout           { grid-template-columns: 1fr; }
  .acct-sidebar          { position: static; }
  .acct-profile          { display: flex; align-items: center; text-align: start; gap: 1rem; padding: 1.25rem; }
  .acct-avatar           { margin: 0; }
  .acct-nav              { flex-direction: row; flex-wrap: wrap; }
  .acct-nav__sep         { display: none; }
  .acct-nav__item        { flex: 1; min-width: 90px; justify-content: center; font-size: .8125rem; padding: .55rem .5rem; }
  .acct-stats-grid       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .acct-stats-grid       { gap: .75rem; }
  .acct-nav__item        { font-size: .75rem; gap: .3rem; }
}

/* ============================================================
   32. BOOKING PAGE — extracted from inline styles
   ============================================================ */

/* Required field star */
.req-star {
  color: var(--color-danger);
  margin-inline-start: .2rem;
  font-weight: 700;
  font-size: .8125rem;
  vertical-align: middle;
}

/* Selected car banner */
.bk-car-banner          { background: var(--color-brand-dark); border: none; margin-bottom: 1.5rem; }
.bk-car-banner .card__body,
.bk-car-banner__body    { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bk-car-banner__img     { width: 80px; height: 56px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-brand); flex-shrink: 0; }
.bk-car-banner__info    { flex: 1; min-width: 0; }
.bk-car-banner__label   { font-size: .75rem; color: rgba(255,255,255,.6); text-transform: uppercase; font-weight: 700; margin-bottom: .2rem; }
.bk-car-banner__name    { color: var(--color-white); font-weight: 700; font-family: var(--font-heading); }
.bk-car-banner__price   { margin-inline-start: auto; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-gold); white-space: nowrap; }
.bk-car-banner__price-sub { font-size: .875rem; font-weight: 400; color: rgba(255,255,255,.6); }

/* Alert inline button */
.bk-alert-btn           { margin-inline-start: .75rem; }

/* Form grids with booking spacing */
.admin-form-grid-2.mb-3 { margin-bottom: 1.25rem; }

/* Rental type selector */
.bk-type-group          { max-width: 300px; }
.bk-type-selector       { display: flex; gap: .375rem; padding: .25rem; background: var(--color-light); border-radius: var(--radius-md); }
.bk-type-selector__label { flex: 1; text-align: center; cursor: pointer; }
.bk-type-selector__radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.bk-type-selector__pill {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: all var(--transition);
  cursor: pointer;
  user-select: none;
}
.bk-type-selector__radio:checked + .bk-type-selector__pill {
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-sm);
}
.bk-type-selector__radio:focus-visible + .bk-type-selector__pill {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Price preview box */
.bk-price-box {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--color-light);
  border-radius: var(--radius-md);
  position: relative;
}
.bk-price-box__spinner {
  position: absolute;
  top: .875rem;
  inset-inline-end: .875rem;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-dark);
  border-radius: 50%;
  animation: spin .65s linear infinite;
  display: none;
}
.bk-price-box.is-loading .bk-price-box__spinner { display: block; }
.bk-price-box.is-loading { opacity: .7; pointer-events: none; }
.bk-price-box__total    { font-size: 1.25rem; color: var(--color-gold); }
.bk-discount-row        { color: var(--color-success); }
.is-hidden { display: none !important; }

.field--error { border-color: var(--color-danger) !important; }

.bk-coupon__msg--valid   { color: var(--color-success, #10b981); }
.bk-coupon__msg--invalid { color: var(--color-danger,  #ef4444); }

.bk-price-error {
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: #b91c1c;
  font-size: .875rem;
  border: 1px solid #fecaca;
}

/* Coupon */
.bk-coupon              { margin-top: 1rem; }
.bk-coupon__label       { font-size: .875rem; font-weight: 600; margin-bottom: .5rem; color: var(--color-text); }
.bk-coupon__row         { display: flex; gap: .5rem; }
.bk-coupon__input       { text-transform: uppercase; }
.bk-coupon__msg         { font-size: .8125rem; margin-top: .375rem; min-height: 1.2em; }

/* Step action rows */
.bk-step-actions        { display: flex; gap: 1rem; justify-content: space-between; margin-top: 1.5rem; flex-wrap: wrap; }
.bk-step-actions--end   { justify-content: flex-end; }

/* Payment methods */
.bk-payment-group       { margin-top: 1.25rem; }
.bk-payment-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .5rem; }
.bk-payment-label       { cursor: pointer; display: block; }
.bk-payment-radio       { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.bk-payment-option {
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.bk-payment-option:hover { border-color: var(--color-muted); }
/* CSS :has() — selected state follows actual radio state */
.bk-payment-label:has(.bk-payment-radio:checked) .bk-payment-option {
  border-color: var(--color-dark);
  background: rgba(0,39,44,.04);
  box-shadow: 0 0 0 3px rgba(0,39,44,.07);
}
.bk-payment-label:has(.bk-payment-radio:focus-visible) .bk-payment-option {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.bk-payment-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light);
  border-radius: var(--radius-sm);
  color: var(--color-dark);
  transition: background var(--transition);
}
.bk-payment-label:has(.bk-payment-radio:checked) .bk-payment-icon { background: var(--color-dark); color: var(--color-primary); }
.bk-payment-option__name { font-size: .875rem; font-weight: 600; color: var(--color-text); }

/* Notes */
.bk-notes-group         { margin-top: 1.25rem; }

/* Login link in info alert */
.bk-login-link          { font-weight: 700; color: inherit; text-decoration: underline; }

/* Step 3 intro */
.bk-step-intro          { color: var(--color-muted); margin-bottom: 1.5rem; }

/* Booking summary in step 3 */
.bk-summary             { background: var(--color-light); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.bk-summary__title      { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-dark); }
.bk-summary__rows       { display: flex; flex-direction: column; gap: .625rem; }
.bk-summary__total      { color: var(--color-gold); }

/* Terms link */
.bk-terms-link          { color: var(--color-blue); }

/* Confirm button check icon */
.bk-confirm-btn         { gap: .5rem; }

/* ============================================================
   33. BOOKING CONFIRMED PAGE — extracted from inline styles
   ============================================================ */
.bk-confirmed-section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + 2rem) 0 4rem;
}
.bk-confirmed-wrap      { text-align: center; width: 100%; }
.bk-confirmed-icon      { margin: 0 auto 1.75rem; width: 88px; height: 88px; }
.bk-confirmed-title     { font-size: 2rem; font-weight: 800; color: var(--color-dark); margin-bottom: .75rem; }
.bk-confirmed-msg       { color: var(--color-muted); font-size: 1.0625rem; margin-bottom: 2rem; }
.bk-confirmed-card      { max-width: 500px; margin: 0 auto 2rem; text-align: start; }
.bk-confirmed-car-row   { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: flex-start; }
.bk-confirmed-car-img   { width: 80px; height: 56px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.bk-confirmed-car-name  { font-weight: 700; color: var(--color-text); }
.bk-confirmed-car-date  { font-size: .875rem; color: var(--color-muted); margin-top: .2rem; }
.bk-confirmed-num       { font-weight: 700; color: var(--color-gold); }
.bk-confirmed-actions   { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* Bank transfer info block — upgraded from inline */
.bk-bank-block {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-top: 1rem;
  text-align: start;
  max-width: 500px;
  margin-inline: auto;
}
.bk-bank-block__title   { font-weight: 700; margin-bottom: .625rem; color: #166534; display: flex; align-items: center; gap: .5rem; }
.bk-bank-block__row     { font-size: .875rem; margin-bottom: .3rem; }
.bk-bank-block__note    { font-size: .8125rem; color: #166534; margin-top: .625rem; }

/* ============================================================
   34. PRINT — booking confirmation
   ============================================================ */
@media print {
  .nav, .footer, .bk-confirmed-actions, .page-hero, .trust-bar { display: none !important; }
  .bk-confirmed-section { min-height: auto; padding: 1rem 0; align-items: flex-start; }
  .bk-confirmed-wrap    { text-align: start; }
  .bk-confirmed-card    { max-width: 100%; margin: 0; box-shadow: none; border: 1px solid #ccc; }
  .bk-confirmed-icon    { display: none; }
}

/* ============================================================
   35. RESPONSIVE — booking page
   ============================================================ */
@media (max-width: 640px) {
  .bk-type-group        { max-width: 100%; }
  .bk-payment-grid      { grid-template-columns: 1fr 1fr; }
  .bk-step-actions      { flex-wrap: wrap; }
  .bk-step-actions > .btn { flex: 1; min-width: 120px; }
}

@media (max-width: 480px) {
  .bk-car-banner__price { margin-inline-start: 0; width: 100%; }
  .bk-confirmed-title   { font-size: 1.5rem; }
  .bk-confirmed-actions { flex-direction: column; align-items: stretch; }
  .bk-confirmed-actions .btn { width: 100%; }
}

/* ============================================================
   36. BRANCHES PAGE — new elements
   ============================================================ */

/* Card header top row (city + status badge) */
.bcard__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
  position: relative;
  z-index: 1;
}

/* Active status badge */
.bcard__status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(225,255,81,.85);
  background: rgba(225,255,81,.10);
  border: 1px solid rgba(225,255,81,.18);
  border-radius: var(--radius-pill);
  padding: .2rem .625rem;
}
.bcard__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #86efac;
  flex-shrink: 0;
}

/* Direction button gets a text label now */
.bcard__btn-map {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0 .875rem;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  width: auto;
}

/* Map fallback block */
.branches-map-fallback {
  height: auto !important;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light);
  border: 2px dashed var(--color-border);
}
.branches-map-fallback__inner {
  text-align: center;
  padding: 2rem;
}
.branches-map-fallback__icon {
  color: var(--color-muted);
  margin: 0 auto .875rem;
  opacity: .5;
}
.branches-map-fallback__msg {
  color: var(--color-muted);
  font-size: .9375rem;
  max-width: 480px;
  margin: 0 auto .875rem;
  line-height: 1.6;
}
.branches-map-fallback__list {
  list-style: disc;
  text-align: start;
  display: inline-block;
  font-size: .875rem;
  color: var(--color-text);
  margin-top: .5rem;
}
.branches-map-fallback__list li { margin-bottom: .375rem; }

/* ============================================================
   37. CUSTOMER BOOKING CARDS (my-bookings page)
   Renamed from .booking-card to avoid collision with
   the booking-form sidebar card in booking.php / style.css
   ============================================================ */
.customer-booking-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.customer-booking-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(225,255,81,.25);
}

.customer-booking-card__body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}

.customer-booking-card__img {
  width: 96px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-light);
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.customer-booking-card__info { flex: 1; min-width: 180px; }

.customer-booking-card__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-dark);
  margin-bottom: .3rem;
}

.customer-booking-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
  font-size: .875rem;
  color: var(--color-muted);
  margin-bottom: .3rem;
}
.customer-booking-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.customer-booking-card__meta-item svg { flex-shrink: 0; }

.customer-booking-card__number {
  font-size: .8125rem;
  color: var(--color-muted);
  font-family: monospace;
  letter-spacing: .02em;
}

.customer-booking-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: .375rem;
}

.customer-booking-card__price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-dark);
}

.customer-booking-card__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: 0 1.5rem 1.25rem;
  align-items: center;
}

.customer-booking-card__proof-panel {
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-light);
  display: none;
}
.customer-booking-card__proof-panel.is-open { display: block; }

.customer-booking-card__proof-hint {
  font-size: .8125rem;
  color: var(--color-muted);
  margin-bottom: .5rem;
}

.customer-booking-card__proof-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

.customer-booking-card__proof-file {
  flex: 1;
  min-width: 180px;
  padding: .4375rem .625rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  background: var(--color-white);
  transition: border-color var(--transition);
  font-family: var(--font-body);
}
.customer-booking-card__proof-file:focus {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.customer-booking-card__proof-msg {
  font-size: .8125rem;
  margin-top: .375rem;
  min-height: 1.2em;
}

@media (max-width: 640px) {
  .customer-booking-card__body  { gap: 1rem; }
  .customer-booking-card__right { align-items: flex-start; }
  .customer-booking-card__img   { width: 80px; height: 54px; }
  .customer-booking-card__actions { padding: 0 1rem .875rem; }
  .customer-booking-card__proof-panel { padding: .75rem 1rem; }
}

/* ============================================================
   38. NOTIFICATIONS PAGE
   ============================================================ */
.notif-section { padding-top: 1.75rem; }

.notif-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
}

.notif-list-header__label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-muted);
}

.notif-list { display: flex; flex-direction: column; gap: .5rem; }

.notif-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid transparent;
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.notif-item--unread {
  border-inline-start-color: var(--color-gold);
  background: #fffef5;
}
.notif-item:hover { box-shadow: var(--shadow-sm); }

.notif-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-light);
  color: var(--color-muted);
}
.notif-item--unread .notif-item__icon {
  background: var(--color-accent-dim);
  color: var(--color-dark);
}

.notif-item__body { flex: 1; min-width: 0; }

.notif-item__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .2rem;
}
.notif-item--unread .notif-item__title { font-weight: 700; }

.notif-item__msg {
  font-size: .875rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.notif-item__time {
  font-size: .75rem;
  color: var(--color-muted);
  margin-top: .375rem;
}

.notif-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  margin-top: .4375rem;
  transition: opacity 400ms ease, transform 400ms ease;
}

/* ============================================================
   39. AUTH PAGE ENHANCEMENTS (v2)
   ============================================================ */
/* Entrance animation for the form panel */
@keyframes authFormIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.auth-form-wrap {
  animation: authFormIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .auth-form-wrap { animation: none; }
}

/* Required field indicator */
.auth-req {
  color: var(--color-danger);
  margin-inline-start: .2rem;
  font-size: .8125rem;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
}

/* Direction-aware back link */
.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--transition), gap var(--transition);
}
.auth-back-link:hover   { color: #1d4ed8; gap: .5rem; }
.auth-back-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Better mobile experience for auth pages */
@media (max-width: 480px) {
  .auth-form-side  { padding: 1.75rem 1.125rem 2rem; }
  .auth-form__title { font-size: 1.5rem; }
  .auth-form__subtitle { margin-bottom: 1.5rem; }
}