/* frontend/css/styles.css */
/* STUDIO 0012 - Warm Ivory & Charcoal Brand Theme */

/* ===== BASE PALETTE ===== */
:root {
  --color-primary: #1F1F1F;        /* Base dark neutral */
  --color-bg: #F5F1EB;             /* Will be overridden by theme */
  --color-text-main: #1F1F1F;      /* Base text (overridden by theme) */
  --color-text-secondary: #3A3A3A; /* Base secondary text */
  --color-border: #CFC9BF;         /* Light border */
  --color-accent: #D4AF37;         /* Accent (overridden by theme) */

  /* Accent color variants (theme-aware) */
  --accent-light: #E8C547;         /* Will be overridden by theme */
  --accent-dark: #AA8C2C;          /* Will be overridden by theme */

  /* Neutral palette shared across themes */
  --primary-black: #050505;
  --secondary-black: #101010;
  --gray: #999999;
  --gray-light: #E0E0E0;

  /* Utility */
  --white: #ffffff;
  --black: #1F1F1F;
  --shadow: rgba(0, 0, 0, 0.18);
}

/* Primary Theme: Gold & Black */
body.theme-primary {
  --icon-filter: invert(0.85) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.1);
  --color-bg: #1F1F1F;             /* Deep Black */
  --color-text-main: #D4AF37;      /* Gold */
  --color-text-secondary: #E8C547;  /* Lighter Gold */
  --color-border: #D4AF37;         /* Gold Border */
  --color-accent: #D4AF37;         /* Gold Accent */
  --accent-light: #E8C547;         /* Light Gold */
  --accent-dark: #AA8C2C;          /* Dark Gold */
  --accent-rgba-light: rgba(232, 197, 71, 0.2);  /* Light Gold with opacity */
  --accent-rgba-lighter: rgba(232, 197, 71, 0.15);
  --accent-rgba-ultralight: rgba(232, 197, 71, 0.08);
  --accent-rgba-shadow: rgba(212, 175, 55, 0.3);
}

/* Secondary Theme: Silver & Black */
body.theme-secondary {
  --icon-filter: invert(1) brightness(0.9);
  --color-bg: #1F1F1F;             /* Deep Black */
  --color-text-main: #C0C0C0;      /* Silver */
  --color-text-secondary: #E8E8E8;  /* Light Silver */
  --color-border: #808080;         /* Dark Silver Border */
  --color-accent: #C0C0C0;         /* Silver Accent */
  --accent-light: #E8E8E8;         /* Light Silver */
  --accent-dark: #808080;          /* Dark Silver */
  --accent-rgba-light: rgba(232, 232, 232, 0.2);  /* Light Silver with opacity */
  --accent-rgba-lighter: rgba(232, 232, 232, 0.15);
  --accent-rgba-ultralight: rgba(232, 232, 232, 0.08);
  --accent-rgba-shadow: rgba(192, 192, 192, 0.3);
}

/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== SCROLL BEHAVIOR & SMOOTH TRANSITIONS ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  overflow-x: hidden;
  animation: pageFadeIn 0.4s ease-out;
}

/* Smooth page transitions */
* {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Accessibility: Skip link (visible on focus) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--color-accent);
  color: var(--primary-black);
  font-weight: 600;
  border-radius: 8px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* ===== NAVIGATION ===== */
.navbar {
  background-color: var(--color-bg);
  padding: 0.9rem 2.5rem;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.3s ease;
  overflow: visible;
}

.navbar:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.navbar-inner {
  max-width: 1400px;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.navbar-brand:hover {
  transform: scale(1.02);
}

.brand-logo {
  height: 70px !important;
  width: 140px !important;
  max-width: 140px !important;
  min-width: unset !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  display: block !important;
  cursor: pointer;
}

.brand-logo:hover {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

.brand-wordmark {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: none;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2.2rem;
  justify-content: center;
}

.nav-links a {
  color: var(--color-text-main);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  padding: 0.45rem 0.2rem;
  position: relative;
}

.nav-links a:hover {
  color: var(--color-accent);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  margin: 0 auto;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--accent-light) 100%);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.auth-link {
  background: radial-gradient(circle at 30% 0%, var(--accent-light), var(--accent-dark));
  color: var(--primary-black);
  padding: 0.7rem 1.5rem;
  border-radius: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--shadow);
}

.auth-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logout-btn {
  background: rgba(255, 0, 0, 0.2);
  color: var(--white);
  border: 1px solid #ff4444;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: #ff4444;
}

/* ===== HERO SECTION ===== */
.hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 2rem 3rem;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 100%),
    url('../assets/images/bg.jpg') center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(218, 171, 45, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(64, 1, 40, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

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

.hero h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInDown 1s ease;
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  color: var(--gray-light);
  animation: fadeInUp 1s ease 0.3s both;
}

.vehicle-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  justify-items: center;
  animation: fadeInUp 1s ease 0.6s both;
}

.vehicle-card {
  background: var(--primary-black);
  padding: 2rem 1.75rem;
  border-radius: 1rem;
  border: 2px solid var(--color-accent);
  box-shadow: 6px 6px var(--color-accent);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transform-origin: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

.vehicle-card:hover {
  transform: translateY(-3px);
  box-shadow: 8px 8px var(--color-accent);
}

.vehicle-card:active {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.vehicle-card:hover h2 {
  padding-left: 0;
}

.vehicle-card:hover p {
  color: var(--color-text-secondary);
}

.vehicle-card h2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-accent);
  margin-bottom: 0;
  -webkit-text-fill-color: unset;
  background: none;
}

.vehicle-card:hover h2 {
  padding-left: 0.5rem;
}

.vehicle-card p {
  font-size: 0.9rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
  line-height: 1.6;
  opacity: 0.85;
}

.vehicle-card:hover p {
  color: var(--color-accent);
}

/* ===== VEHICLE CARD ICONS (img replacements) ===== */
.vehicle-icon {
  width: 100%;
  max-width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s ease;
}

/* Inline SVG icons in vehicle cards */
.vehicle-card-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Primary Theme (Gold) - Icons already gold, no filter needed */
body.theme-primary .vehicle-icon {
  filter: brightness(0) saturate(100%) invert(68%) sepia(62%) saturate(400%) hue-rotate(3deg) brightness(90%);
}

/* Secondary Theme (Silver) - Convert gold to silver */
body.theme-secondary .vehicle-icon {
  filter: brightness(0) saturate(0%) invert(75%);
}

.vehicle-card:hover .vehicle-icon {
  transform: scale(1.1);
}

/* ===== FEATURE SECTION ICONS ===== */
.feature-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease, filter 0.25s ease;
}

/* Gold theme - SVGs are black by default, invert to gold */
body.theme-primary .feature-icon {
  filter: brightness(0) saturate(100%) invert(73%) sepia(55%) saturate(500%) hue-rotate(5deg) brightness(95%);
}

/* Silver theme - SVGs are black by default, invert to silver */
body.theme-secondary .feature-icon {
  filter: brightness(0) saturate(0%) invert(75%);
}

/* Hover lift effect */
.feature-icon:hover {
  transform: scale(1.1);
}

/* Vehicles unavailable premium card */
.vehicles-empty-card {
  max-width: 480px;
  margin: 4rem auto;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: radial-gradient(circle at top, var(--accent-rgba-ultralight), transparent 60%), var(--color-primary);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: subtleFloat 1.2s ease-out;
}

.vehicles-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}

.vehicles-empty-icon svg {
  width: 28px;
  height: 28px;
  fill: var(--accent-light);
}

.vehicles-empty-card h2 {
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  color: var(--color-accent);
}

.vehicles-empty-card p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--gray-light);
}

@keyframes subtleFloat {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
  padding: 1rem 2rem;
  border: none;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px var(--accent-rgba-shadow);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--accent-rgba-light);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth page transition */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Premium ripple effect animation */
@keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(4);
  }
}

/* ===== AUTH FORMS ===== */
.auth-container {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.auth-box {
  background: var(--color-bg);
  padding: 3rem;
  border-radius: 15px;
  border: 2px solid var(--color-border);
  max-width: 450px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.auth-box h2 {
  color: var(--color-accent);
  margin-bottom: 2rem;
  text-align: center;
  font-size: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text-main);
  font-weight: 500;
  font-size: 0.95rem;
}

.form-group input {
  width: 100%;
  padding: 0.8rem;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 5px;
  color: var(--color-text-main);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 12px var(--accent-rgba-shadow);
}

.btn-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--accent-light) 100%);
  color: var(--primary-black);
  padding: 1rem;
  border: none;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-rgba-shadow);
}

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--gray-light);
}

.auth-switch a {
  color: var(--color-accent);
  font-weight: bold;
  cursor: pointer;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.error-message {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid #ff4444;
  color: #ff6666;
  padding: 0.8rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  text-align: center;
}

/* Global validation popup: minimal, below input, auto-dismiss 2s, does not break layout */
.validation-popup {
  position: absolute;
  z-index: 10;
  font-size: 0.8rem;
  color: #ff8888;
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid rgba(255, 100, 100, 0.6);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  margin-top: 2px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: validationPopIn 0.2s ease;
}
@keyframes validationPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.success-message {
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid #44ff44;
  color: #66ff66;
  padding: 0.8rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  text-align: center;
}

/* ===== VEHICLE LISTING ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  font-size: 3rem;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.page-header p {
  color: var(--color-text-secondary);
  font-size: 1.2rem;
}

.vehicles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.vehicle-item {
  position: relative;
  background:
    radial-gradient(circle at top, var(--accent-rgba-ultralight), transparent 60%),
    linear-gradient(145deg, var(--secondary-black), var(--primary-black));
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid var(--accent-rgba-light);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(18px);
}

.vehicle-item:hover {
  border-color: var(--color-accent);
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}

.vehicle-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.vehicle-details {
  padding: 1.5rem;
}

.vehicle-details h3 {
  color: var(--color-text-main);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.vehicle-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.vehicle-price {
  font-size: 1.8rem;
  color: var(--color-accent);
  font-weight: bold;
  margin: 1rem 0;
}

.vehicle-price span {
  font-size: 1rem;
  color: var(--gray);
}

.vehicle-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.feature-tag {
  background: var(--accent-rgba-light);
  color: var(--color-accent);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.85rem;
  border: 1px solid var(--color-accent);
}

.btn-book {
  width: 100%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 100%);
  color: var(--color-primary);
  padding: 0.8rem;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px var(--accent-rgba-lighter);
}

.btn-book:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--accent-rgba-light);
}

.badge-out-of-stock {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 10, 10, 0.9);
  color: var(--accent-light);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
}

.btn-book-disabled {
  background: #555;
  color: var(--gray-light);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-book-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ===== BOOKING PAGE ===== */
.booking-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2rem;
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.booking-section {
  background: var(--secondary-black);
  padding: 2rem;
  border-radius: 15px;
  border: 2px solid var(--color-accent);
}

.booking-section h2 {
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.selected-vehicle {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.selected-vehicle img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
}

/* Dark premium calendar dropdown for booking date */
.calendar-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.4rem;
  background: radial-gradient(circle at top, var(--accent-rgba-ultralight), transparent 65%),
              linear-gradient(145deg, var(--secondary-black), #020B13);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  padding: 0.8rem 1rem 1rem;
  z-index: 20;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.calendar-month {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-size: 0.85rem;
}

.calendar-nav {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.7);
  color: var(--gray-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.calendar-nav:hover {
  background: var(--accent-rgba-ultralight);
  border-color: var(--accent-light);
  transform: translateY(-1px);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  font-size: 0.8rem;
}

.calendar-day-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
  padding-bottom: 0.25rem;
}

.calendar-cell {
  border-radius: 8px;
  padding: 0.4rem 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.65);
  color: var(--gray-light);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.calendar-cell:hover {
  background: var(--accent-rgba-light);
  border-color: var(--accent-light);
  color: var(--accent-light);
  transform: translateY(-1px);
}

.calendar-cell--disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.calendar-cell--disabled:hover {
  transform: none;
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
}

.calendar-cell--empty {
  border: none;
  background: transparent;
  cursor: default;
}

/* Duration selection: 12h / 24h rectangular buttons */
.duration-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.duration-btn {
  flex: 1;
  min-width: 120px;
  padding: 0.9rem 1.5rem;
  background: var(--secondary-black);
  border: 2px solid var(--gray);
  color: var(--gray-light);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.duration-btn:hover {
  border-color: var(--accent-dark);
  color: var(--accent-light);
}
.duration-btn.active {
  border-color: var(--color-accent);
  background: var(--accent-rgba-lighter);
  color: var(--color-accent);
}

/* Vehicle availability badge overlay on image */
.vehicle-image-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.vehicle-availability-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 8px 12px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid var(--color-accent);
  color: var(--accent-light);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.promo-section {
  margin-top: 1rem;
}

.promo-input-group {
  display: flex;
  gap: 0.5rem;
}

.promo-input-group input {
  flex: 1;
  padding: 0.8rem;
  background: var(--primary-black);
  border: 1px solid var(--color-accent);
  border-radius: 5px;
  color: var(--white);
}

.btn-apply-promo {
  background: var(--color-accent);
  color: var(--primary-black);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-apply-promo:hover {
  background: var(--accent-light);
}

.price-breakdown {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-accent);
}

.price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  color: var(--gray-light);
}

.price-row.total {
  font-size: 1.5rem;
  color: var(--color-accent);
  font-weight: bold;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-accent);
}

/* ===== SUCCESS PAGE ===== */
.success-container {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.success-box {
  background: var(--secondary-black);
  padding: 3rem;
  border-radius: 15px;
  border: 2px solid var(--color-accent);
  max-width: 600px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.success-icon {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.success-box h1 {
  color: var(--color-accent);
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.booking-id {
  background: var(--accent-rgba-light);
  padding: 1rem;
  border-radius: 10px;
  margin: 1.5rem 0;
  border: 1px solid var(--color-accent);
}

.booking-id strong {
  color: var(--color-accent);
  font-size: 1.2rem;
}

/* ===== LOADING SPINNER ===== */
.loading {
  text-align: center;
  padding: 3rem;
  color: var(--color-accent);
}

.spinner {
  border: 4px solid var(--accent-rgba-lighter);
  border-top: 4px solid var(--color-accent);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .vehicle-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 100%;
    padding: 0 1rem;
  }

  .vehicle-card {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .vehicle-card h2 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
  }

  .vehicle-card p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .vehicle-icon {
    max-width: 70px;
    height: 70px;
    margin-bottom: 1rem;
  }

  .btn-primary {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  .nav-links {
    display: none;
  }

  .booking-grid {
    grid-template-columns: 1fr;
  }

  .vehicles-grid {
    grid-template-columns: 1fr;
  }

  .navbar-inner {
    gap: 1.5rem;
  }

  .navbar {
    padding: 0.9rem 1rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 2rem 1rem;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .hero p {
    font-size: 0.9rem;
  }

  .vehicle-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.5rem;
  }

  .vehicle-card {
    padding: 1.2rem 0.8rem;
    border-radius: 10px;
  }

  .vehicle-card h2 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }

  .vehicle-card p {
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
  }

  .vehicle-icon {
    max-width: 60px;
    height: 60px;
    margin-bottom: 0.8rem;
  }

  .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .brand-wordmark {
    font-size: 1rem;
  }

  .navbar-brand {
    gap: 0.5rem;
  }

  .brand-logo {
    height: 55px !important;
    width: 110px !important;
    max-width: 110px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  .auth-box {
    padding: 1.5rem 1rem;
    margin: 0.5rem;
  }

  .auth-box h2 {
    font-size: 1.3rem;
  }
  .otp-modal {
    padding: 1.5rem 0.8rem;
    width: 95%;
  }

  .otp-inputs-wrapper {
    gap: 0.3rem;
  }

  .otp-input {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: 8px;
    padding: 0;
  }
}

  .container {
    padding: 1.5rem;
  }


/* ===== FOOTER ===== */
.footer {
  background: var(--color-bg);
  padding: 4rem 2rem 2rem;
  margin-top: 5rem;
  border-top: 2px solid var(--color-border);
  transition: all 0.3s ease;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 4rem;
  align-items: flex-start;
}

.footer-brand {
  text-align: left;
}

.footer-brand-title {
  font-size: 1.3rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-main);
  margin-bottom: 0.8rem;
  font-weight: 700;
  transition: color 0.3s ease;
}

.footer-brand-tagline {
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.footer-columns {
  display: flex;
  justify-content: flex-end;
  gap: 5rem;
}

.footer-column-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-secondary);
  margin-bottom: 1.2rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-light);
  transform: translateX(2px);
}

.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.footer-social-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  background: var(--accent-rgba-ultralight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.footer-social-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--accent-rgba-shadow);
}

.footer-social-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--color-text-main);
  transition: fill 0.3s ease;
}

.footer-social-btn:hover svg {
  fill: var(--color-primary);
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  transition: color 0.3s ease;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-brand {
    text-align: center;
  }
  .footer-columns {
    justify-content: center;
  }
}

/* ===== FLOATING THEME SWITCHER ===== */
.theme-switcher {
  position: fixed;
  right: 1.75rem;
  bottom: calc(2rem + 30px);
  z-index: 1100;
  overflow: visible;
}

.switch {
  --main-color: var(--color-accent);
  --bg-color: var(--primary-black);
  --input-focus: var(--accent-dark);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 20px;
  cursor: pointer;
}

.switch .toggle {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch .slider {
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.switch .slider:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border: 2px solid var(--main-color);
  border-radius: 5px;
  left: -2px;
  bottom: 2px;
  background-color: var(--bg-color);
  box-shadow: 0 3px 0 var(--main-color);
  transition: transform 0.3s ease, background-color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}

.switch .toggle:checked + .slider {
  background-color: var(--accent-dark);
  border-color: var(--accent-light);
  box-shadow: 4px 4px var(--accent-light);
}

.switch .toggle:checked + .slider:before {
  transform: translateX(30px);
  background-color: var(--accent-light);
  border-color: var(--accent-light);
  box-shadow: 0 3px 0 var(--accent-light);
}

/* ===== PROFILE / ORDERS / LOYALTY ===== */
.orders-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.orders-empty {
  text-align: center;
  padding: 3rem;
  background: var(--secondary-black);
  border-radius: 15px;
  border: 2px solid var(--color-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.orders-empty h2 {
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.orders-empty p {
  color: var(--gray-light);
  margin-bottom: 1.5rem;
}

.order-card {
  background: radial-gradient(circle at top left, var(--accent-rgba-ultralight), transparent 55%),
              linear-gradient(135deg, var(--secondary-black) 0%, var(--primary-black) 100%);
  border-radius: 18px;
  border: 1px solid var(--accent-rgba-light);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.order-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85);
  border-color: var(--accent-light);
}

.order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.order-card__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-light);
  font-size: 0.95rem;
}

.order-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-card__vehicle {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.order-card__vehicle-main h3 {
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

.order-card__vehicle-meta {
  color: var(--gray-light);
  font-size: 0.9rem;
}

.order-card__vehicle-type {
  display: flex;
  align-items: center;
}

.order-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--accent-rgba-ultralight);
  font-size: 0.8rem;
  color: var(--accent-light);
}

.order-card__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem 1.2rem;
}

.order-card__detail-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.order-card__detail-value {
  color: var(--gray-light);
  font-size: 0.95rem;
}

.order-card__detail-value--amount {
  color: var(--accent-light);
  font-weight: 600;
}

.order-status {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order-status--confirmed,
.order-status--paid {
  background: rgba(0, 170, 120, 0.14);
  border: 1px solid #00c896;
  color: #9ff7dd;
}

.order-status--pending {
  background: var(--accent-rgba-ultralight);
  border: 1px solid var(--color-accent);
  color: var(--accent-light);
}

.order-status--cancelled {
  background: rgba(220, 53, 69, 0.16);
  border: 1px solid #ff4b6b;
  color: #ff9fb1;
}

.order-card__footer {
  display: flex;
  justify-content: flex-end;
}

.order-card__cta {
  padding-inline: 1.4rem;
}

.loyalty-container {
  max-width: 900px;
}

.loyalty-card {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 2.2rem;
  border-radius: 20px;
  border: 2px solid var(--accent-rgba-light);
  background: radial-gradient(circle at top, var(--accent-rgba-ultralight), transparent 55%),
              linear-gradient(135deg, var(--secondary-black) 0%, var(--primary-black) 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.85);
}

.loyalty-circle-wrapper {
  display: flex;
  justify-content: center;
}

.loyalty-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--accent-rgba-ultralight) 0deg 360deg
    );
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
}

.loyalty-circle__inner {
  position: absolute;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--secondary-black), var(--primary-black));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-rgba-light);
}

.loyalty-circle__inner span {
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  color: var(--accent-light);
}

/* The circle is divided into 6 equal segments. We fill them by using a conic gradient.
   JavaScript sets data-filled-segments=data-total-segments to determine the fraction. */
.loyalty-circle[data-filled-segments] {
  --segments: 6;
  --filled: 0;
}

.loyalty-circle[data-filled-segments="0"] {
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--accent-rgba-lighter) 0deg 360deg
    );
}

.loyalty-circle[data-filled-segments="1"] {
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--color-accent) 0deg 60deg,
      var(--accent-rgba-lighter) 60deg 360deg
    );
}

.loyalty-circle[data-filled-segments="2"] {
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--color-accent) 0deg 120deg,
      var(--accent-rgba-lighter) 120deg 360deg
    );
}

.loyalty-circle[data-filled-segments="3"] {
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--color-accent) 0deg 180deg,
      var(--accent-rgba-lighter) 180deg 360deg
    );
}

.loyalty-circle[data-filled-segments="4"] {
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--color-accent) 0deg 240deg,
      var(--accent-rgba-lighter) 240deg 360deg
    );
}

.loyalty-circle[data-filled-segments="5"] {
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--color-accent) 0deg 300deg,
      var(--accent-rgba-lighter) 300deg 360deg
    );
}

.loyalty-circle[data-filled-segments="6"] {
  background:
    radial-gradient(circle at center, var(--primary-black) 55%, transparent 56%),
    conic-gradient(
      var(--color-accent) 0deg 360deg
    );
}

.loyalty-info h2 {
  color: var(--color-accent);
  margin-bottom: 0.7rem;
}

.loyalty-info p {
  color: var(--gray-light);
  margin-bottom: 0.9rem;
}

.loyalty-message {
  margin-top: 0.8rem;
  font-weight: 500;
  color: var(--accent-light);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .loyalty-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .loyalty-info {
    margin-top: 1rem;
  }
}

/* ===== USER MENU DROPDOWN ===== */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 999px;
  border: 1px solid var(--accent-rgba-light);
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  cursor: pointer;
  color: var(--gray-light);
  font-size: 0.9rem;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.user-menu__trigger:hover {
  background: rgba(20, 20, 20, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  transform: translateY(-1px);
  border-color: var(--accent-light);
}

.user-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, var(--accent-light), var(--accent-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}

.user-menu__name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__caret i {
  font-size: 0.7rem;
}

.user-menu__dropdown {
  position: absolute;
  top: 115%;
  right: 0;
  min-width: 220px;
  background: linear-gradient(145deg, var(--secondary-black), #050505);
  border-radius: 12px;
  border: 1px solid var(--accent-rgba-light);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85);
  padding: 0.6rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 1200;
}

.user-menu--open .user-menu__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.user-menu__section-label {
  padding: 0.4rem 1rem 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray);
}

/* Profile card at top of dropdown */
.user-menu__profile-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1rem 0.85rem;
}

.user-menu__profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, var(--accent-light), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.user-menu__profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.user-menu__profile-name {
  color: var(--accent-light);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__profile-email {
  color: var(--gray);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu__divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 0 0.4rem;
}

.user-menu__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  color: var(--gray-light);
  font-size: 0.9rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.user-menu__item:hover {
  background: var(--accent-rgba-ultralight);
  color: var(--accent-light);
}

.user-menu__item--logout {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.4rem;
  padding-top: 0.7rem;
}

/* ===== GENERIC SVG ICON STYLING ===== */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  transition: transform 0.18s ease, color 0.25s ease;
}

.icon--primary {
  color: var(--color-text-secondary);
}

.icon--muted {
  color: var(--color-text-secondary);
}

.icon--accent {
  color: var(--color-accent);
}

/* Feature section icons - Use accent color for prominence and theme contrast */
.icon--feature {
  color: var(--color-accent);
  transition: color 0.25s ease;
}

.icon-btn:hover .icon,
.footer-social-btn:hover .icon {
  transform: scale(1.06);
}

/* ===== PAGE TRANSITION ANIMATION ===== */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== OTP MODAL PREMIUM ANIMATION ===== */
.otp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.otp-modal-overlay.active {
  display: flex;
}

.otp-modal {
  background: var(--color-bg);
  border-radius: 20px;
  border: 2px solid var(--color-border);
  padding: 3rem 2.5rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: slideInUp 0.4s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.otp-modal h3 {
  color: var(--color-accent);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.otp-modal p {
  color: var(--color-text-secondary);
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.otp-inputs-wrapper {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.otp-input {
  width: 50px;
  height: 50px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-main);
  background: var(--secondary-black);
  transition: all 0.2s ease;
  caret-color: var(--color-accent);
}

.otp-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 16px var(--accent-rgba-shadow);
  background: var(--accent-rgba-ultralight);
}

.otp-input:hover:not(:focus) {
  border-color: var(--color-accent);
}

.otp-input::placeholder {
  color: var(--color-border);
}

.otp-input.filled {
  background: var(--accent-rgba-light);
  border-color: var(--color-accent);
}

.otp-input.error {
  border-color: #ff6b6b;
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.otp-input.success {
  border-color: #00c896;
  animation: popIn 0.4s ease;
}

@keyframes popIn {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.otp-input.filled-success::after {
  content: '✓';
  display: inline-block;
  color: #00c896;
  font-weight: bold;
}

.otp-timer {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.otp-timer strong {
  color: var(--color-accent);
  font-weight: 600;
  min-width: 25px;
}

.otp-timer.expired {
  color: #ff6b6b;
}

.otp-timer.expired strong {
  color: #ff6b6b;
}

.otp-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.otp-btn {
  flex: 1;
  min-width: 120px;
  padding: 0.9rem;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.otp-btn-verify {
  background: var(--color-accent);
  color: var(--color-primary);
}

.otp-btn-verify:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--accent-rgba-shadow);
}

.otp-btn-verify:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.otp-btn-resend {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  padding: 0.7rem 0.9rem;
}

.otp-btn-resend:hover:not(:disabled) {
  background: var(--accent-rgba-ultralight);
  transform: translateY(-2px);
}

.otp-btn-resend:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: #666;
  color: #666;
}

.otp-btn-cancel {
  background: var(--color-border);
  color: var(--color-text-main);
}

.otp-btn-cancel:hover {
  background: #999;
  transform: translateY(-2px);
}

/* ===== PHONE MODAL (Booking) ===== */
.phone-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeInOverlay 0.3s ease;
}

.phone-modal-overlay.active {
  display: flex;
}

.phone-modal {
  background: var(--color-bg);
  border-radius: 20px;
  border: 2px solid var(--color-border);
  padding: 2.5rem 2.25rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: slideInUp 0.4s ease;
}

.phone-modal h3 {
  color: var(--color-accent);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.phone-modal p {
  color: var(--color-text-secondary);
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.phone-modal .form-group {
  margin-bottom: 0.5rem;
}

.phone-modal-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-size: 1.1rem;
  color: var(--color-text-main);
  background: var(--secondary-black);
  transition: all 0.2s ease;
}

.phone-modal-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 16px var(--accent-rgba-shadow);
}

.phone-modal-input::placeholder {
  color: var(--color-border);
}

.phone-modal-input.error {
  border-color: #ff6b6b;
  animation: shake 0.3s ease;
}

.phone-modal-error {
  font-size: 0.85rem;
  color: #ff6b6b;
  margin-top: 0.5rem;
  padding-left: 0.25rem;
}

.phone-modal-actions {
  margin-top: 1.5rem;
}

.phone-modal-submit {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
}

/* Dealer timing badge on vehicle cards */
.vehicle-dealer-timing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.06));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--accent-light);
  margin-bottom: 1rem;
}

body.theme-secondary .vehicle-dealer-timing {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.12), rgba(192, 192, 192, 0.06));
  border-color: rgba(192, 192, 192, 0.35);
  color: var(--accent-light);
}
  /* ===== BOOKING PAGE MOBILE FIXES ===== */
@media (max-width: 768px) {
  .booking-container {
    padding: 1rem;
  }

  .booking-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .selected-vehicle {
    flex-direction: column;
    gap: 1rem;
  }

  .selected-vehicle img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
  }

  .selected-vehicle > div {
    width: 100%;
    overflow: hidden;
  }

  .selected-vehicle h3 {
    font-size: 1.1rem;
    white-space: normal;
    word-break: break-word;
  }

  .selected-vehicle p {
    font-size: 0.85rem;
    white-space: normal;
    word-break: break-word;
  }

  .duration-buttons {
    flex-direction: row;
  }

  .duration-btn {
    flex: 1;
    padding: 0.7rem 0.5rem;
    font-size: 0.9rem;
  }

  .booking-section {
    padding: 1.2rem;
  }

  .booking-section h2 {
    font-size: 1.3rem;
  }

  .navbar {
    padding: 0.6rem 1rem;
    height: 60px;
  }

  .navbar-inner {
    gap: 0.5rem;
  }

  .brand-logo {
    height: 55px !important;
    width: 110px !important;
    max-width: 110px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .auth-link {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    border-radius: 20px;
  }

  .user-menu__trigger {
    padding: 0.35rem 0.7rem 0.35rem 0.5rem;
    font-size: 0.8rem;
  }

  .user-menu__avatar {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
  }

  .user-menu__name {
    max-width: 70px;
    font-size: 0.8rem;
  }
.auth-box {
    padding: 2rem 1.2rem;
    margin: 1rem;
    border-radius: 12px;
  }

  .auth-box h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .auth-container {
    padding: 1rem;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .auth-switch {
    font-size: 0.9rem;
  }

  .auth-switch a {
    display: inline;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-brand {
    text-align: left;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-columns {
    justify-content: flex-start;
    text-align: left;
  }

  .footer-links {
    gap: 0.8rem;
  }
  /* Phone modal fix */
  .phone-modal-overlay {
    padding: 1rem;
  }

  .phone-modal {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1.2rem;
    margin: 0;
    border-radius: 12px;
  }

  /* OTP modal fix */
  .otp-modal-overlay {
    padding: 1rem;
  }

  .otp-modal {
    width: 92%;
    max-width: 92%;
    padding: 1.5rem 0.8rem;
    border-radius: 12px;
  }

  .otp-inputs-wrapper {
    gap: 0.3rem;
    padding: 0 0.2rem;
  }

  .otp-input {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: 8px;
    padding: 0;
  }

  /* Booking vehicle info fix */
  .selected-vehicle {
    flex-direction: column;
  }

  .selected-vehicle img {
    width: 100%;
    height: 200px;
  }

  .selected-vehicle > div {
    width: 100%;
    overflow: hidden;
  }

  .selected-vehicle h3,
  .selected-vehicle p {
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .duration-buttons {
    flex-wrap: wrap;
  }

  .duration-btn {
    min-width: unset;
    flex: 1;
  }
}
 /* ===== HERO SEARCH BAR ===== */
.hero-search-bar {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 18px;
  padding: 0.5rem 0.5rem 0.5rem 0;
  gap: 0;
  margin: 2rem auto 0;
  max-width: 760px;
  width: 100%;
  text-align: left;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  position: relative;
  z-index: 200;
  overflow: visible;
}

.hero-search-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 1.2rem;
  position: relative;
  z-index: 600;
  border-radius: 14px;
  transition: background 0.2s ease;
  cursor: pointer;
  min-width: 0;
}

.hero-search-field:hover {
  background: rgba(255,255,255,0.06);
}

.hero-search-field:focus-within {
  background: rgba(212,175,55,0.07);
}

.hero-search-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 700;
  pointer-events: none;
}

.hero-search-input,
.hero-search-select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  padding: 0;
}

.hero-search-select option {
  background: var(--primary-black);
  color: var(--white);
}

.hero-search-input::placeholder {
  color: rgba(255,255,255,0.3);
  font-size: 0.9rem;
}

.hero-search-divider {
  width: 1px;
  height: 36px;
  background: rgba(212,175,55,0.18);
  flex-shrink: 0;
  align-self: center;
}

.hero-search-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  color: var(--primary-black);
  border: none;
  border-radius: 14px;
  padding: 0.9rem 1.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  flex-shrink: 0;
  margin-left: 0.5rem;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

.hero-search-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.4s ease;
}

.hero-search-btn:hover::before {
  left: 125%;
}

.hero-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-rgba-shadow);
}

.hero-search-calendar {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 9999;
  min-width: 300px;
  background: linear-gradient(145deg, #1c1c1c, #0d0d0d);
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,0.25);
  box-shadow: 0 20px 60px rgba(0,0,0,0.9);
  padding: 1rem 1.1rem 1.2rem;
}

@media (max-width: 768px) {
  .hero-search-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
    gap: 0;
    border-radius: 16px;
    margin-top: 1.5rem;
    overflow: visible;
  }

  .hero-search-field {
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
  }

  .hero-search-divider {
    width: 100%;
    height: 1px;
    margin: 0.1rem 0;
    background: rgba(212,175,55,0.1);
  }

  .hero-search-btn {
    justify-content: center;
    margin-left: 0;
    margin-top: 0.4rem;
    padding: 0.85rem;
    border-radius: 10px;
  }

  .hero-search-calendar {
    min-width: 100%;
    left: 0;
    right: 0;
  }
}

/* ===== HOME VEHICLE CAROUSEL ===== */
.home-carousel-section {
  margin-top: 3rem;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.home-carousel-tabs {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 0;
}

.home-carousel-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--accent-rgba-light);
  background: transparent;
  color: var(--gray-light);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-carousel-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.home-carousel-tab.active {
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  border-color: transparent;
  color: var(--primary-black);
}

.home-tab-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

body.theme-primary .home-carousel-tab.active .home-tab-icon {
  filter: brightness(0);
}

body.theme-secondary .home-carousel-tab.active .home-tab-icon {
  filter: brightness(0);
}

body.theme-primary .home-carousel-tab:not(.active) .home-tab-icon {
  filter: brightness(0) saturate(100%) invert(68%) sepia(62%) saturate(400%) hue-rotate(3deg) brightness(90%);
}

body.theme-secondary .home-carousel-tab:not(.active) .home-tab-icon {
  filter: brightness(0) saturate(0%) invert(75%);
}

.home-carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.home-carousel-track-outer {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.home-carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Center-focused card scaling */
.home-carousel-card-wrap {
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  opacity: 0.6;
  transform: scale(0.92);
}

.home-carousel-card-wrap.active-card {
  opacity: 1;
  transform: scale(1);
  box-shadow: 6px 6px var(--color-accent);
}

.home-carousel-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: rgba(0,0,0,0.7);
  color: var(--color-accent);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  line-height: 1;
  position: relative;
  z-index: 5;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.home-carousel-nav:hover {
  background: var(--color-accent);
  color: var(--primary-black);
}

.home-carousel-loading {
  color: var(--gray);
  padding: 2rem;
  text-align: center;
  width: 100%;
}

/* Carousel Card */
.home-carousel-card {
  min-width: 300px;
  max-width: 300px;
  background: var(--primary-black);
  border-radius: 5px;
  border: 2px solid var(--color-accent);
  box-shadow: 4px 4px var(--color-accent);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  isolation: isolate;
}

.home-carousel-card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px var(--color-accent);
}

.home-carousel-card:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.home-carousel-card__img-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--primary-black);
  border-radius: 3px 3px 0 0;
}

.home-carousel-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.home-carousel-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
}

.home-carousel-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

.home-carousel-card__prices {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.home-carousel-card__price {
  background: var(--accent-rgba-ultralight);
  border: 1px solid var(--color-accent);
  color: var(--accent-light);
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.home-carousel-card__price small {
  font-weight: 400;
  color: var(--gray);
}

.home-carousel-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.home-carousel-card__feat {
  font-size: 0.78rem;
  color: var(--gray-light);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.home-carousel-card__feat::before {
  content: '•';
  color: var(--color-accent);
}

.home-carousel-card__btn {
  width: 100%;
  padding: 0.7rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  color: var(--primary-black);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.home-carousel-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--accent-rgba-shadow);
}

.home-carousel-view-all {
  text-align: right;
  margin-top: 1.2rem;
}

.home-carousel-view-all a {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.home-carousel-view-all a:hover {
  color: var(--accent-light);
}

@media (max-width: 768px) {
  .home-carousel-card {
    min-width: 260px;
    max-width: 260px;
  }
  .home-carousel-section {
    margin-top: 2rem;
  }
}

/* ===== STATS COUNTER SECTION ===== */
.stats-section {
  background: #0a0a0a;
  background-image: url('../assets/images/bg.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  padding: 4rem 2rem;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  pointer-events: none;
}

.stats-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  justify-items: center;
  align-items: center;
}

.stats-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.stats-icon-circle {
  width: 90px;
  height: 90px;
  min-width: 90px;
  min-height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px var(--accent-rgba-shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 4px solid rgba(255, 255, 255, 0.25);
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.stats-icon-circle:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px var(--accent-rgba-shadow);
}

.stats-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  display: block;
  filter: brightness(0);
  flex-shrink: 0;
}

.stats-number {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.stats-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gray-light);
  font-weight: 600;
}

@media (max-width: 480px) {
  .stats-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .stats-number {
    font-size: 2rem;
  }
  .stats-icon-circle {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
  }
  .stats-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
  }
}
/* ============================================================
   STUDIO 0012 — COMPREHENSIVE MOBILE RESPONSIVE PATCH
   Add this AFTER all existing CSS at the end of styles.css
   ============================================================ */

/* ===== GLOBAL MOBILE BASE ===== */
@media (max-width: 768px) {

  /* Prevent horizontal overflow site-wide */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* ===== NAVBAR ===== */
  .navbar {
    padding: 0.6rem 1rem;
    height: 60px;
  }

  .navbar-inner {
    grid-template-columns: auto 1fr auto;
    gap: 0;
  }

  .brand-logo {
    height: 55px !important;
    width: 110px !important;
    max-width: 110px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .nav-links {
    display: none;
  }

  .navbar-right {
    gap: 0.6rem;
  }

  .auth-link {
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    border-radius: 20px;
  }

  .user-menu__trigger {
    padding: 0.35rem 0.65rem 0.35rem 0.45rem;
    font-size: 0.78rem;
    gap: 0.35rem;
  }

  .user-menu__avatar {
    width: 24px;
    height: 24px;
    font-size: 0.72rem;
  }

  .user-menu__name {
    max-width: 72px;
    font-size: 0.78rem;
  }

  .user-menu__dropdown {
    min-width: 190px;
    right: 0;
  }

  /* ===== HERO SECTION ===== */
  .hero {
    min-height: unset;
    padding: 2.5rem 1rem 2rem;
  }

  .hero h1 {
    font-size: 1.8rem;
    line-height: 1.25;
    margin-bottom: 0.75rem;
  }

  .hero p {
    font-size: 0.95rem;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
  }

  /* ===== HERO SEARCH BAR ===== */
  .hero-search-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem;
    gap: 0;
    border-radius: 14px;
    margin-top: 1.5rem;
  }

  .hero-search-field {
    padding: 0.5rem 0.6rem;
  }

  .hero-search-label {
    font-size: 0.65rem;
  }

  .hero-search-input,
  .hero-search-select {
    font-size: 0.9rem;
    padding: 0.2rem 0;
  }

  .hero-search-divider {
    width: 100%;
    height: 1px;
    margin: 0.25rem 0;
  }

  .hero-search-btn {
    justify-content: center;
    margin-left: 0;
    margin-top: 0.5rem;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  .hero-search-calendar {
    min-width: 100%;
    left: 0;
    right: 0;
  }

  /* ===== VEHICLE CARDS (home) ===== */
  .vehicle-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 480px;
    padding: 0 0.5rem;
    margin: 0 auto;
  }

  .vehicle-card {
    padding: 1.5rem 1rem;
    border-radius: 12px;
  }

  .vehicle-card h2 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }

  .vehicle-card p {
    font-size: 0.82rem;
    margin-bottom: 1rem;
  }

  .vehicle-icon {
    max-width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }

  .btn-primary {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  /* ===== HOME CAROUSEL ===== */
  .home-carousel-section {
    margin-top: 2rem;
    padding: 0 0.5rem;
  }

  .home-carousel-tabs {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .home-carousel-tab {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .home-carousel-card {
    min-width: 240px;
    max-width: 240px;
  }

  .home-carousel-card__img-wrap {
    height: 150px;
  }

  .home-carousel-card__body {
    padding: 0.9rem 1rem 1rem;
  }

  .home-carousel-card__name {
    font-size: 0.95rem;
  }

  .home-carousel-nav {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .home-carousel-view-all {
    text-align: center;
    margin-top: 1rem;
  }

  /* ===== STATS SECTION ===== */
  .stats-section {
    padding: 2.5rem 1rem;
  }

  .stats-inner {
    gap: 1.5rem;
    max-width: 100%;
  }

  .stats-number {
    font-size: 2rem;
  }

  .stats-icon-circle {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
  }

  .stats-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
  }

  .stats-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }

  /* ===== WHY CHOOSE US ===== */
  .container {
    padding: 1.5rem 1rem;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .page-header p {
    font-size: 0.95rem;
    padding: 0 0.5rem;
  }

  /* ===== VEHICLE LISTING GRID ===== */
  .vehicles-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0;
  }

  .vehicle-item {
    border-radius: 12px;
  }

  .vehicle-image {
    height: 200px;
  }

  .vehicle-details {
    padding: 1.1rem;
  }

  .vehicle-details h3 {
    font-size: 1.2rem;
  }

  .vehicle-price {
    font-size: 1.5rem;
    margin: 0.75rem 0;
  }

  /* ===== BOOKING PAGE ===== */
  .booking-container {
    padding: 1rem;
  }

  .booking-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .booking-section {
    padding: 1.25rem 1rem;
    border-radius: 12px;
  }

  .booking-section h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }

  .selected-vehicle {
    flex-direction: column;
    gap: 0.75rem;
  }

  .selected-vehicle img {
    width: 100%;
    height: 180px;
    border-radius: 10px;
  }

  .selected-vehicle h3 {
    font-size: 1rem;
    word-break: break-word;
  }

  .selected-vehicle p {
    font-size: 0.85rem;
    word-break: break-word;
  }

  .duration-buttons {
    flex-direction: row;
    gap: 0.75rem;
  }

  .duration-btn {
    flex: 1;
    padding: 0.7rem 0.4rem;
    font-size: 0.85rem;
    min-width: unset;
  }

  .price-row {
    font-size: 0.9rem;
  }

  .price-row.total {
    font-size: 1.2rem;
  }

  .promo-input-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-apply-promo {
    width: 100%;
    padding: 0.75rem;
  }

  /* ===== CALENDAR DROPDOWN ===== */
  .calendar-dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    z-index: 3000;
    margin-top: 0;
  }

  .calendar-grid {
    font-size: 0.85rem;
    gap: 0.3rem;
  }

  .calendar-cell {
    padding: 0.5rem 0;
    border-radius: 6px;
  }

  /* ===== AUTH PAGES ===== */
  .auth-container {
    padding: 1rem;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .auth-box {
    padding: 1.75rem 1.25rem;
    margin: 0;
    border-radius: 14px;
    max-width: 100%;
  }

  .auth-box h2 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .form-group input {
    padding: 0.75rem;
    font-size: 0.95rem;
  }

  .btn-submit {
    padding: 0.9rem;
    font-size: 1rem;
  }

  /* ===== OTP MODAL ===== */
  .otp-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .otp-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 2rem 1.25rem 2.5rem;
    border-bottom: none;
  }

  .otp-inputs-wrapper {
    gap: 0.5rem;
  }

  .otp-input {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    border-radius: 10px;
  }

  .otp-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .otp-btn {
    min-width: unset;
    width: 100%;
  }

  /* ===== PHONE MODAL ===== */
  .phone-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .phone-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 1.75rem 1.25rem 2.5rem;
    border-bottom: none;
  }

  /* ===== SUCCESS PAGE ===== */
  .success-container {
    padding: 1rem;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .success-box {
    padding: 2rem 1.25rem;
    border-radius: 14px;
  }

  .success-box h1 {
    font-size: 1.8rem;
  }

  .success-icon {
    font-size: 3.5rem;
  }

  /* ===== PROFILE / ORDERS ===== */
  .orders-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .order-card {
    padding: 1.25rem 1rem;
    border-radius: 14px;
  }

  .order-card__details {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .order-card__vehicle {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* ===== LOYALTY CARD ===== */
  .loyalty-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 14px;
  }

  .loyalty-circle {
    width: 160px;
    height: 160px;
  }

  /* ===== FOOTER ===== */
  .footer {
    padding: 2.5rem 1rem 1.5rem;
    margin-top: 3rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand {
    text-align: left;
  }

  .footer-columns {
    justify-content: flex-start;
    gap: 2.5rem;
    flex-wrap: wrap;
  }

  .footer-bottom {
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: 0.75rem;
  }

  /* ===== THEME SWITCHER ===== */
  .theme-switcher {
    right: 1rem;
    bottom: calc(1.5rem + 27px);
    overflow: visible;
  }
}

/* ===== EXTRA SMALL SCREENS (< 400px) ===== */
@media (max-width: 400px) {

  .hero h1 {
    font-size: 1.5rem;
  }

  .vehicle-cards {
    grid-template-columns: 1fr;
  }

  .vehicle-card {
    padding: 1.25rem 0.9rem;
  }

  .home-carousel-card {
    min-width: 210px;
    max-width: 210px;
  }

  .home-carousel-card__img-wrap {
    height: 130px;
  }

  .stats-number {
    font-size: 1.75rem;
  }

  .stats-icon-circle {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
  }

  .stats-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
  }

  .otp-input {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .auth-box {
    padding: 1.25rem 0.9rem;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {

  /* Larger tap targets */
  .btn-primary,
  .btn-submit,
  .btn-book,
  .home-carousel-card__btn,
  .hero-search-btn {
    min-height: 48px;
  }

  .nav-links a,
  .footer-links a {
    padding: 0.6rem 0;
    display: block;
  }

  .user-menu__item {
    padding: 0.75rem 1rem;
    min-height: 48px;
  }

  /* Remove hover effects that feel broken on touch */
  .vehicle-card:hover {
    transform: none;
  }

  .vehicle-item:hover {
    transform: none;
  }

  .home-carousel-card:hover {
    transform: none;
  }

  /* Active state feedback instead */
  .vehicle-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .home-carousel-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .btn-primary:active,
  .btn-submit:active,
  .btn-book:active,
  .home-carousel-card__btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
}
/* ===== MOBILE CRITICAL FIXES ===== */
@media (max-width: 768px) {

  /* Fix horizontal overflow root cause */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Fix hero text clipping */
  .hero {
    padding: 2rem 1.2rem;
    overflow: hidden;
    min-height: unset;
  }

  .hero h1 {
    font-size: 1.55rem;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 0 0.25rem;
    margin-bottom: 0.75rem;
  }

  .hero p {
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 0 0.25rem;
    margin-bottom: 1.5rem;
  }

  /* Fix search bar overflow */
  .hero-search-bar {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    margin: 0;
    padding: 0.75rem;
    box-sizing: border-box;
  }

  .hero-search-field {
    padding: 0.5rem 0.6rem;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-search-input,
  .hero-search-select {
    font-size: 0.9rem;
    width: 100%;
  }

  .hero-search-divider {
    width: 100%;
    height: 1px;
    margin: 0.2rem 0;
  }

  .hero-search-btn {
    width: 100%;
    justify-content: center;
    margin: 0.4rem 0 0 0;
    box-sizing: border-box;
  }

  /* Fix user dropdown width & z-index */
  .user-menu__dropdown {
    min-width: 200px;
    max-width: 230px;
    right: 0;
    left: auto;
    z-index: 2000;
  }

  .user-menu__profile-email {
    font-size: 0.7rem;
    max-width: 140px;
  }

  /* Fix stats label wrapping */
  .stats-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.3;
  }

  .stats-inner {
    gap: 1rem;
    padding: 0 0.5rem;
  }

  .stats-number {
    font-size: 1.8rem;
  }

  /* Fix carousel side overflow */
  .home-carousel-section {
    padding: 0;
    overflow: hidden;
  }

  .home-carousel-wrapper {
    padding: 0 0.25rem;
  }

  /* Fix container padding */
  .container {
    padding: 1.5rem 1rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Fix page header text */
  .page-header h1 {
    font-size: 1.6rem;
    word-break: break-word;
  }

  .page-header p {
    font-size: 0.9rem;
    padding: 0 0.5rem;
  }
}

@media (max-width: 400px) {
  .hero h1 {
    font-size: 1.3rem;
  }

  .hero p {
    font-size: 0.82rem;
  }

  .stats-label {
    font-size: 0.65rem;
  }

  .stats-number {
    font-size: 1.5rem;
  }

  .stats-icon-circle {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
}
/* ===== MOBILE NAVBAR + HERO OVERFLOW FIX ===== */
@media (max-width: 768px) {

  /* Prevent entire page from overflowing */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Navbar fix */
  .navbar {
    padding: 0.6rem 0.9rem;
    height: 60px;
  }

  .navbar-inner {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
  }

  .brand-logo {
    height: 55px !important;
    width: 110px !important;
    max-width: 110px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Push user menu to far right */
  .navbar-right {
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
  }

  .user-menu__trigger {
    padding: 0.3rem 0.6rem 0.3rem 0.4rem;
    font-size: 0.75rem;
    gap: 0.3rem;
    max-width: 130px;
  }

  .user-menu__name {
    max-width: 60px;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-menu__avatar {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  /* Dropdown: always open to the left from the button */
  .user-menu__dropdown {
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: 220px;
  }

  /* Hero text fix */
  .hero {
    padding: 2rem 1rem;
    width: 100%;
    overflow: hidden;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .hero h1 {
    font-size: 1.4rem;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    padding: 0;
  }

  .hero p {
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    padding: 0;
    margin-bottom: 1.5rem;
  }

  /* Search bar */
  .hero-search-bar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.75rem;
  }

  .hero-search-field {
    width: 100%;
    padding: 0.5rem 0.5rem;
  }

  .hero-search-divider {
    width: 100%;
    height: 1px;
    margin: 0.2rem 0;
  }

  .hero-search-btn {
    width: 100%;
    margin: 0.4rem 0 0 0;
    justify-content: center;
  }
}
/* ===== CALENDAR DROPDOWN MOBILE FIX ===== */
@media (max-width: 768px) {

  /* Make search field a proper stacking context */
  .hero-search-field {
    position: relative;
    z-index: 600;
  }

  /* Calendar must appear above everything in the search bar */
  .hero-search-calendar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    min-width: 100%;
    max-width: 100%;
  }

  /* When calendar is open, push fields below it down */
  .hero-search-bar {
    position: relative;
    z-index: 200;
  }

  /* Ensure the search bar doesn't clip the calendar */
  .hero-search-bar {
    overflow: visible !important;
  }

  /* Fix calendar sizing on mobile */
  .calendar-grid {
    font-size: 0.8rem;
    gap: 0.2rem;
  }

  .calendar-cell {
    padding: 0.45rem 0;
    font-size: 0.8rem;
  }

  .calendar-month {
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  .hero-search-bar {
    overflow: visible !important;
    position: relative;
    z-index: 200;
  }

  .hero-search-calendar {
    position: absolute;
    top: auto;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 9999;
    margin-top: 0.3rem;
  }
}
/* ===== NEW VEHICLE CARD DESIGN ===== */

/* Card grid */
.vehicles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* Card base — Uiverse brutalist style */
.vehicle-item {
  position: relative;
  background: var(--primary-black);
  border-radius: 5px;
  border: 2px solid var(--color-accent);
  box-shadow: 4px 4px var(--color-accent);
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  isolation: isolate;
}

.vehicle-item:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px var(--color-accent);
}

.vehicle-item:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

/* Image section with dot-nav overlay */
.vehicle-image-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #0d0d0d;
  border-radius: 3px 3px 0 0;
  /* Clip image to card corners without clipping button shadow */
  clip-path: inset(0 0 0 0 round 3px 3px 0 0);
}

.vehicle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.vehicle-item:hover .vehicle-image {
  transform: scale(1.04);
}

/* NEW badge */
.vehicle-badge-new {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-accent);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  z-index: 2;
}

/* Out of stock badge */
.badge-out-of-stock {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(10,10,10,0.92);
  color: var(--accent-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  z-index: 2;
}

/* Card body */
.vehicle-details {
  padding: 1.1rem 1.4rem 2.4rem;
}

/* Vehicle name */
.vehicle-details h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-light);
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}

/* Vehicle subtitle (brand/model/year) */
.vehicle-subtitle {
  font-size: 0.82rem;
  color: var(--gray);
  margin-bottom: 0.85rem;
}

/* Spec pills row: Petrol | Automatic | 5 Seater */
.vehicle-specs-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.vehicle-spec-pill {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--gray-light);
  font-weight: 500;
}

.vehicle-spec-pill svg {
  width: 15px;
  height: 15px;
  fill: var(--color-accent);
  flex-shrink: 0;
}

.vehicle-spec-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
  align-self: center;
}

/* Price section */
.vehicle-price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.vehicle-price-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vehicle-price-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
}

.vehicle-price-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.vehicle-price-amount small {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gray);
}

.vehicle-price-secondary {
  font-size: 0.82rem;
  color: var(--gray);
  text-align: right;
}

.vehicle-price-secondary strong {
  color: var(--gray-light);
}

/* Action buttons */
.vehicle-actions {
  display: flex;
  gap: 0.6rem;
  padding: 0;
}

.btn-compare {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--gray-light);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-compare svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.btn-compare:hover,
.btn-compare.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--accent-rgba-ultralight);
}

.btn-book {
  flex: 1;
  padding: 0.65rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
}

.btn-book:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--accent-rgba-shadow);
}

.btn-book-disabled {
  background: rgba(255,255,255,0.08);
  color: var(--gray);
  cursor: not-allowed;
}

.btn-book-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Wishlist heart button */
.btn-wishlist {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-wishlist svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: all 0.2s ease;
}

.btn-wishlist:hover {
  border-color: #e84040;
  color: #e84040;
}

.btn-wishlist.active {
  border-color: #e84040;
  background: rgba(232,64,64,0.1);
  color: #e84040;
}

.btn-wishlist.active svg {
  fill: #e84040;
  stroke: #e84040;
}

/* ===== COMPARE MODAL ===== */
.compare-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.compare-modal-overlay.active {
  display: flex;
}

.compare-modal {
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
  border-radius: 20px;
  border: 1px solid var(--accent-rgba-light);
  box-shadow: 0 24px 64px rgba(0,0,0,0.9);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideInUp 0.35s ease;
}

.compare-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 0;
  background: #1a1a1a;
  z-index: 1;
  border-radius: 20px 20px 0 0;
}

.compare-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.compare-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--gray-light);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.compare-modal__close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}

.compare-modal__body {
  padding: 1.5rem;
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.compare-table th {
  padding: 0.75rem 1rem;
  text-align: center;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--accent-rgba-light);
}

.compare-table th img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 0.5rem;
}

.compare-table td {
  padding: 0.7rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--gray-light);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.compare-table td:first-child {
  text-align: left;
  color: var(--gray);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  width: 130px;
}

.compare-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

.compare-table .price-cell {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1rem;
}

.compare-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray);
}

/* Compare bar at bottom (shows how many selected) */
.compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #1a1a1a, #111);
  border-top: 1px solid var(--color-accent);
  padding: 0.9rem 1.5rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 2000;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
  animation: slideInUp 0.25s ease;
}

.compare-bar.active {
  display: flex;
}

.compare-bar__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gray-light);
  font-size: 0.9rem;
}

.compare-bar__count {
  background: var(--color-accent);
  color: #000;
  font-weight: 700;
  font-size: 0.8rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-bar__actions {
  display: flex;
  gap: 0.75rem;
}

.btn-compare-now {
  padding: 0.6rem 1.25rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-compare-now:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-rgba-shadow);
}

.btn-compare-clear {
  padding: 0.6rem 1rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: var(--gray-light);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-compare-clear:hover {
  border-color: var(--gray-light);
  color: var(--white);
}

/* Mobile adjustments for cards */
@media (max-width: 768px) {
  .vehicles-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .vehicle-image-wrap {
    height: 190px;
  }

  .vehicle-price-amount {
    font-size: 1.3rem;
  }
.vehicle-actions {
    padding: 0 0.1rem 0.1rem;
    gap: 0.5rem;
  }

  .btn-book {
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }

  .btn-compare {
    padding: 0.6rem 0.65rem;
    font-size: 0.78rem;
  }

  .btn-wishlist {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .compare-bar {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .compare-bar__actions {
    justify-content: stretch;
  }

  .btn-compare-now, .btn-compare-clear {
    flex: 1;
    text-align: center;
  }

  .compare-modal {
    max-height: 85vh;
    border-radius: 16px;
  }

  .compare-modal__body {
    padding: 1rem 0.75rem;
  }
}

@media (max-width: 400px) {
  .vehicle-specs-row {
    gap: 0.35rem;
  }

  .vehicle-spec-pill {
    font-size: 0.75rem;
  }

  .vehicle-details {
    padding: 0.9rem 1rem 1rem;
  }
  

/* ── Vehicle type display ── */
.vehicle-type-display {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  font-size: 0.92rem;
  font-weight: 400;
  user-select: none;
  white-space: nowrap;
}
.vehicle-type-display:hover { opacity: 0.8; }

/* ── Shining gold & silver dot animation ── */
.carousel-dot, .home-carousel-dot {
  position: relative;
  overflow: hidden;
}
.carousel-dot::after, .home-carousel-dot::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: skewX(-20deg);
  animation: dotShine 3s infinite;
}
.carousel-dot:nth-child(2)::after, .home-carousel-dot:nth-child(2)::after {
  animation-delay: 1.5s;
  background: linear-gradient(90deg, transparent, rgba(220,220,220,0.8), transparent);
}
@keyframes dotShine {
  0%   { left: -75%; }
  50%  { left: 125%; }
  100% { left: 125%; }
}
.carousel-dot:hover::after, .home-carousel-dot:hover::after {
  animation: dotShineHover 0.4s forwards;
}
@keyframes dotShineHover {
  0%   { left: -75%; opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

/* ── Mobile dropdown fix ── */
@media (max-width: 640px) {
  .vehicle-type-dropdown {
    left: -0.5rem;
    min-width: 160px;
  }
  .hero-search-bar {
    position: relative;
  }
}
/* ===== SEARCH BAR MOBILE CENTERING FIX ===== */
.hero-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}


@media (max-width: 768px) {
  .hero-search-bar {
    max-width: 100%;
    text-align: left;
  }
  .hero-search-field {
    padding: 0.6rem 0.75rem;
  }
  .hero-search-label {
    text-align: left;
  }
  .vehicle-type-display {
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .stats-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0 0.5rem;
    max-width: 100%;
  }
  .stats-card {
    align-items: center;
  }
  .stats-number {
    font-size: 2rem;
  }
  .stats-label {
    text-align: center;
    font-size: 0.7rem;
  }
}}
/* ── Inline Feedback Panel ─────────────────────────────────── */
.feedback-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  opacity: 0;
}
.feedback-panel.open {
  max-height: 400px;
  opacity: 1;
}
.feedback-panel__inner {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(212,175,55,0.2);
  background: rgba(212,175,55,0.04);
  border-radius: 0 0 14px 14px;
}
.feedback-panel__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.1rem;
}
.feedback-panel__sub {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 1rem;
}
.feedback-star-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.feedback-star-row button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1.9rem;
  line-height: 1;
  color: #333;
  transition: color 0.15s, transform 0.15s;
}
.feedback-star-row button.lit { color: var(--color-accent); }
.feedback-star-row button:hover { transform: scale(1.2); }
.feedback-panel textarea {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  color: #eee;
  font-size: 0.88rem;
  padding: 0.65rem 0.9rem;
  resize: none;
  outline: none;
  font-family: inherit;
  margin-bottom: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.feedback-panel textarea:focus { border-color: var(--color-accent); }
.feedback-panel__actions { display: flex; gap: 0.75rem; }
.feedback-panel__actions button {
  flex: 1;
  padding: 0.65rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
.feedback-panel__actions button:hover { opacity: 0.85; }
.feedback-panel__submit {
  background: var(--color-accent);
  color: #000;
}
.feedback-panel__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.feedback-panel__skip {
  background: #1a1a1a;
  color: #888;
  border: 1px solid #333 !important;
}
.feedback-panel__thanks {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0;
}
/* ===== VEHICLE BRAND ROW ===== */
.vehicle-brand-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.vehicle-brand-logo {
  height: 16px;
  width: auto;
  max-width: 50px;
  object-fit: contain;
  object-position: left center;
  filter: invert(1) brightness(0.85);
  flex-shrink: 0;
}

.vehicle-brand-name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.vehicle-brand-divider {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.vehicle-model-name {
  font-size: 0.82rem;
  color: var(--gray-light);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== FAQ SECTION ===== */
.faq-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.faq-section__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.faq-section__header h2 {
  font-size: 2.2rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.faq-section__header p {
  color: var(--gray-light);
  font-size: 1rem;
}

.faq-item {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  margin-bottom: 0.85rem;
  background: linear-gradient(145deg, #141414, #0a0a0a);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item.open {
  border-color: var(--color-accent);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: none;
  color: var(--gray-light);
  font-size: 0.97rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  gap: 1rem;
  transition: color 0.2s ease;
  font-family: inherit;
}

.faq-item.open .faq-question {
  color: var(--color-accent);
}

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1.1rem;
  line-height: 1;
  padding-bottom: 0;
  text-align: center;
  font-weight: 400;
  transition: transform 0.2s ease, background 0.2s ease;
}

.faq-item.open .faq-icon {
  background: var(--color-accent);
  color: #000;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.25s ease;
  padding: 0 1.4rem;
  color: var(--gray-light);
  font-size: 0.92rem;
  line-height: 1.7;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 1.4rem 1.2rem;
}

.faq-show-more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.faq-show-more a {
  padding: 0.75rem 2rem;
  border: 2px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  text-decoration: none;
}

.faq-show-more a:hover {
  background: var(--color-accent);
  color: #000;
}

/* ===== FAQ PAGE (faq.html) ===== */
.faq-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.faq-page__hero {
  text-align: center;
  padding: 3rem 2rem 2.5rem;
  background: linear-gradient(135deg, rgba(212,175,55,0.08), transparent);
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.15);
  margin-bottom: 3rem;
}

.faq-page__hero h1 {
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.faq-page__hero p {
  color: var(--gray-light);
  font-size: 1rem;
}

.faq-page__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.faq-categories {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq-cat-btn {
  width: 100%;
  padding: 0.75rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--gray-light);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  font-family: inherit;
}

.faq-cat-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.faq-cat-btn.active {
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  border-color: transparent;
  color: #000;
  font-weight: 700;
}

.faq-search-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

.faq-search-input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  background: linear-gradient(145deg, #141414, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--gray-light);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.faq-search-input:focus {
  border-color: var(--color-accent);
}

.faq-search-input::placeholder {
  color: var(--gray);
}

.faq-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
  pointer-events: none;
}

.faq-group {
  display: none;
}

.faq-group.visible {
  display: block;
}

.faq-group__title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gray);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.faq-no-results {
  text-align: center;
  color: var(--gray);
  padding: 3rem 1rem;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .faq-page__layout {
    grid-template-columns: 1fr;
  }

  .faq-categories {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .faq-cat-btn {
    width: auto;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
  }

  .faq-page__hero h1 {
    font-size: 1.8rem;
  }

  .faq-section__header h2 {
    font-size: 1.6rem;
  }
}
/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
  position: relative;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  color: var(--gray-light);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
  font-family: inherit;
}

.lang-trigger:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(212,175,55,0.08);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.85);
  padding: 0.5rem 0.5rem 0.6rem;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.lang-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-dropdown__header {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gray);
  padding: 0.4rem 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.3rem;
}

.lang-dropdown__section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  padding: 0.4rem 0.75rem 0.2rem;
  font-weight: 700;
}

.lang-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}

.lang-option:hover {
  background: rgba(212,175,55,0.08);
}

.lang-option.active {
  background: rgba(212,175,55,0.12);
}

.lang-flag {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.lang-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-light);
  flex: 1;
  text-align: left;
}

.lang-option.active .lang-name {
  color: var(--color-accent);
}

.lang-sub {
  font-size: 0.72rem;
  color: var(--gray);
}

/* Hide Google's ugly toolbar */
.goog-te-banner-frame,
.skiptranslate {
  display: none !important;
}

body {
  top: 0 !important;
}

@media (max-width: 768px) {
  .lang-trigger span:first-of-type {
    display: none;
  }
  .lang-dropdown {
    right: -1rem;
    min-width: 200px;
  }
}
/* ===== WHATSAPP ORBIT BUTTON ===== */
.whatsapp-orbit-btn {
  position: fixed;
  bottom: 2rem;
  left: 1.75rem;
  z-index: 9999;
  cursor: pointer;
  background: var(--primary-black);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-content: center;
  transition: background 300ms, transform 200ms, border-color 300ms;
  text-decoration: none;
}

.whatsapp-orbit-btn__text {
  position: absolute;
  inset: 0;
  animation: whatsapp-text-rotation 6s linear infinite;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-family: 'DM Sans', sans-serif;
}

.whatsapp-orbit-btn__text > span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--color-accent);
  transform-origin: 0 0;
  transform: rotate(calc(20deg * var(--index))) translateY(-38px) translateX(-4px);
}

.whatsapp-orbit-btn__circle {
  position: relative;
  width: 38px;
  height: 38px;
  overflow: hidden;
  background: var(--color-accent);
  color: var(--primary-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whatsapp-orbit-btn__icon--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.whatsapp-orbit-btn:hover {
  background: var(--color-accent);
  transform: scale(1.05);
}

.whatsapp-orbit-btn:hover .whatsapp-orbit-btn__text > span {
  color: var(--primary-black);
}

.whatsapp-orbit-btn:hover .whatsapp-orbit-btn__circle {
  background: var(--primary-black);
  color: var(--color-accent);
}

.whatsapp-orbit-btn:hover .whatsapp-orbit-btn__icon:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.whatsapp-orbit-btn:hover .whatsapp-orbit-btn__icon--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

.whatsapp-orbit-btn:active {
  transform: scale(0.95);
}

@keyframes whatsapp-text-rotation {
  to { rotate: 360deg; }
}
/* ===== MOBILE HAMBURGER NAVBAR ===== */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 10px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  background: rgba(212,175,55,0.12);
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 1998;
}

.mobile-nav-overlay.open {
  display: block;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 85vw);
  height: 100vh;
  background: linear-gradient(160deg, #1a1a1a, #0d0d0d);
  border-left: 1px solid rgba(212,175,55,0.2);
  z-index: 1999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.2rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.mobile-nav-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.mobile-nav-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--gray-light);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mobile-nav-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  flex: 1;
}

.mobile-nav-links a {
  padding: 0.95rem 1.4rem;
  color: var(--gray-light);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mobile-nav-links a:hover {
  background: rgba(212,175,55,0.07);
  color: var(--color-accent);
  padding-left: 1.8rem;
}

.mobile-nav-links a.active {
  color: var(--color-accent);
  background: rgba(212,175,55,0.06);
}

.mobile-nav-footer {
  padding: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.mobile-nav-footer .auth-link {
  display: block;
  text-align: center;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}

.mobile-nav-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.mobile-nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, var(--accent-light), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.mobile-nav-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-nav-user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-nav-user-email {
  font-size: 0.75rem;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-nav-logout {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255,50,50,0.1);
  border: 1px solid rgba(255,50,50,0.3);
  border-radius: 8px;
  color: #ff6b6b;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.mobile-nav-logout:hover {
  background: rgba(255,50,50,0.18);
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }
  @media (max-width: 768px) {
  #authButton {
    display: none !important;
  }
}
.mobile-nav-logo {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
}
/* ===== VEHICLE BRAND LOGO GLOBAL FIX ===== */
.vehicle-brand-logo {
  display: none;
  height: 28px;
  width: auto;
  max-width: 80px;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}
.vehicle-brand-logo.loaded {
  display: inline-block;
}
@media (max-width: 425px) {
  .vehicle-brand-logo {
    height: 22px !important;
    max-width: 64px !important;
  }
}
@media (max-width: 375px) {
  .vehicle-brand-logo {
    height: 20px !important;
    max-width: 56px !important;
  }
}
@media (max-width: 320px) {
  .vehicle-brand-logo {
    height: 18px !important;
    max-width: 48px !important;
  }
}
/* ===== ANIMATED SEND BUTTON — Contact Form ===== */
.btn-send-animated {
  --radius: 14px;
  cursor: pointer;
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 2px 0px 1px rgba(255,255,255,0.25) inset,
    0 -2px 0px 1px rgba(0,0,0,0.3) inset,
    0 10px 28px rgba(180,130,0,0.45), 0 4px 8px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  width: 100%;
  padding: 20px;
  height: 58px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #111;
  background: linear-gradient(to bottom, #f0c030, #b8880a);
  margin-top: 1rem;
  text-shadow: none;
}
.btn-send-animated:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px 2px rgba(255,255,255,0.15),
    0 15px 30px rgba(0,0,0,0.3);
}
.btn-send-animated:active {
  transform: scale(1);
}
.btn-send-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  background: linear-gradient(to bottom, #f0c030, #b8880a) padding-box,
    linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(0,0,0,0.6)) border-box;
  z-index: 0;
  transition: all 0.4s ease;
}
.btn-send-animated:hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 3px 0 rgba(255,255,255,0.5);
}
.btn-send-animated::before {
  content: "";
  inset: 7px 6px 28px 6px;
  position: absolute;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  border-radius: 20px 20px 50% 50%;
  filter: blur(0.5px);
  z-index: 2;
  pointer-events: none;
}
.btn-send-animated .send-outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}
.btn-send-animated .send-outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 180deg, transparent 60%, var(--accent-light) 80%, transparent 100%);
  animation: sendSpin 2s linear infinite;
  animation-play-state: paused;
}
.btn-send-animated:hover .send-outline { opacity: 1; }
.btn-send-animated:hover .send-outline::before { animation-play-state: running; }
@keyframes sendSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.btn-send-animated .send-state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
  color: #111;
}
.btn-send-animated .send-state p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-send-animated .send-state .send-icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
}
.btn-send-animated .send-state p span {
  display: block;
  opacity: 0;
  animation: sendSlideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.btn-send-animated:hover .send-state--default .send-icon {
  transform: rotate(45deg) scale(1.25);
}
.btn-send-animated:hover .send-state p span {
  opacity: 1;
  animation: sendWave 0.5s ease forwards calc(var(--i) * 0.02s);
}
.btn-send-animated:focus .send-state p span {
  opacity: 1;
  animation: sendDisappear 0.6s ease forwards calc(var(--i) * 0.03s);
}
@keyframes sendWave {
  30% { opacity: 1; transform: translateY(4px); }
  50% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sendSlideDown {
  0% { opacity: 0; transform: translateY(-20px) translateX(5px) rotate(-90deg); filter: blur(5px); }
  30% { opacity: 1; transform: translateY(4px); filter: blur(0); }
  50% { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sendDisappear {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(5px) translateY(20px); filter: blur(5px); }
}
.btn-send-animated .send-state--sent { display: none; }
.btn-send-animated:focus .send-state--default { position: absolute; }
.btn-send-animated:focus .send-state--sent { display: flex; }
.btn-send-animated:focus .send-state--sent span {
  opacity: 0;
  animation: sendSlideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.btn-send-animated:focus .send-state--sent .send-icon svg {
  opacity: 0;
  animation: sendAppear 1.2s ease forwards 0.8s;
}
@keyframes sendAppear {
  0% { opacity: 0; transform: scale(4) rotate(-40deg); filter: blur(4px); }
  30% { opacity: 1; transform: scale(0.6); filter: blur(1px); }
  50% { opacity: 1; transform: scale(1.2); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
body.theme-secondary .btn-send-animated {
  background: linear-gradient(to bottom, #d8d8d8, #888);
  box-shadow: 0 2px 0px 1px rgba(255,255,255,0.3) inset,
    0 -2px 0px 1px rgba(0,0,0,0.3) inset,
    0 10px 28px rgba(100,100,100,0.4), 0 4px 8px rgba(0,0,0,0.4);
}
body.theme-secondary .btn-send-animated::after {
  background: linear-gradient(to bottom, #d8d8d8, #888) padding-box,
    linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(0,0,0,0.6)) border-box;
}
/* ===== FLIP CARD AUTH — STUDIO 0012 THEME ===== */

.flip-wrapper {
  --accent: #D4AF37;
  --accent-light: #E8C547;
  --accent-dark: #8a6a00;
  --bg: #111111;
  --bg-card: #161616;
  --font-sub: #666;
  --white: #fefefe;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.flip-switch-row {
  transform: translateY(14px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 28px;
  z-index: 10;
  margin-bottom: -14px;
}

.flip-toggle {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.flip-tab-login,
.flip-tab-signup {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease, text-decoration 0.3s ease;
  user-select: none;
  position: relative;
}

.flip-tab-login {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
}

.flip-tab-signup {
  color: #555;
  text-decoration: none;
}

.flip-label {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.flip-slider-wrap {
  position: relative;
  width: 48px;
  height: 24px;
  flex-shrink: 0;
}

.flip-slider {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  border: 2px solid var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
  background: var(--bg);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.flip-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 1px;
  left: 1px;
  border-radius: 4px;
  border: 2px solid var(--accent);
  background: var(--bg);
  box-shadow: 0 2px 0 var(--accent);
  transition: transform 0.3s ease;
}

.flip-toggle:checked ~ .flip-label .flip-slider {
  background: rgba(212,175,55,0.12);
}

.flip-toggle:checked ~ .flip-label .flip-slider::before {
  transform: translateX(24px);
}

.flip-toggle:checked ~ .flip-label .flip-tab-login {
  color: #555;
  text-decoration: none;
}

.flip-toggle:checked ~ .flip-label .flip-tab-signup {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
}

.flip-card-container {
  width: 320px;
  perspective: 1000px;
  position: relative;
  z-index: 1;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-toggle:checked ~ .flip-card-container .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 14px;
  border: 2px solid var(--accent);
  box-shadow: 4px 4px 0 var(--accent);
  background: var(--bg-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.flip-card-front {
  position: relative;
  width: 100%;
}

.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(180deg);
}

.flip-toggle:checked ~ .flip-card-container .flip-card-front {
  box-shadow: none;
}

.flip-card-title {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: center;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  margin-top: 0.25rem;
}

.flip-card-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.flip-input {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  border: 2px solid var(--accent);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--accent);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  color: var(--white);
  padding: 0 0.9rem;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.flip-input:invalid,
.flip-input:-moz-submit-invalid,
.flip-input:-moz-ui-invalid {
  box-shadow: 3px 3px 0 var(--accent);
  border-color: var(--accent);
  outline: none;
}
.flip-input:not(:focus):not(:placeholder-shown):invalid {
  box-shadow: 3px 3px 0 var(--accent);
  border-color: var(--accent);
}

.flip-input::placeholder {
  color: var(--font-sub);
}

.flip-input:focus {
  border-color: var(--accent-light);
  box-shadow: 5px 5px 0 var(--accent-light);
}

.flip-otp-step {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.flip-otp-step.visible {
  display: flex;
}

.flip-otp-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  text-align: left;
  width: 100%;
}

.flip-message {
  width: 100%;
  min-height: 0;
  font-size: 0.82rem;
  text-align: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.flip-message:not(:empty) {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

.flip-message.error {
  background: rgba(255,0,0,0.1);
  border: 1px solid #ff4444;
  color: #ff6666;
}

.flip-message.success {
  background: rgba(0,200,120,0.1);
  border: 1px solid #00c896;
  color: #66ffcc;
}

.flip-btn {
  margin-top: 0.5rem;
  width: 140px;
  height: 44px;
  border-radius: 6px;
  border: 2px solid var(--accent);
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--accent);
  font-size: 1rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.12s ease,
              transform 0.12s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.flip-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.14), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.flip-btn:hover::before {
  opacity: 1;
}

.flip-btn:hover {
  background: rgba(212,175,55,0.08);
  color: var(--accent-light);
  border-color: var(--accent-light);
  box-shadow: 5px 5px 0 var(--accent-light);
}

.flip-btn:active {
  box-shadow: 0px 0px 0 var(--accent) !important;
  transform: translate(4px, 4px) !important;
  transition: box-shadow 0.06s ease, transform 0.06s ease;
}

.flip-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 4px 4px 0 rgba(212,175,55,0.35) !important;
}

.flip-resend-row {
  font-size: 0.8rem;
  color: var(--font-sub);
  text-align: center;
}

.flip-resend-row a {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}

.flip-resend-row a:hover {
  color: var(--accent-light);
}

@media (max-width: 400px) {
  .flip-card-container,
  .flip-switch-row {
    width: 290px;
  }
}
.flip-input,
.flip-input:invalid,
.flip-input:-moz-submit-invalid,
.flip-input:-moz-ui-invalid,
.flip-input:not(:focus) {
  outline: none !important;
  box-shadow: 3px 3px 0 var(--accent) !important;
  border-color: var(--accent) !important;
}

.flip-input:focus {
  outline: none !important;
  border-color: var(--accent-light) !important;
  box-shadow: 5px 5px 0 var(--accent-light) !important;
}
/* ===== BRUTALIST BUTTON ===== */
.btn-brutalist {
  font-size: 0.95rem;
  color: var(--color-accent);
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 10px;
  border: 2px solid var(--color-accent);
  background: var(--primary-black);
  box-shadow: 3px 3px var(--color-accent);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: box-shadow 0.06s ease, transform 0.06s ease,
              background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease;
}

.btn-brutalist:hover {
  background: var(--accent-rgba-ultralight);
  color: var(--accent-light);
  border-color: var(--accent-light);
  box-shadow: 3px 3px var(--accent-light);
}

.btn-brutalist:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}

/* Full width only inside carousel cards */
.home-carousel-card .btn-brutalist {
  width: 100%;
}

/* Constrain shadow inside vehicle cards so it doesn't bleed out */
.vehicle-item .btn-brutalist {
  box-shadow: 2px 2px var(--color-accent);
  width: 100%;
}
/* Constrain shadow inside vehicle cards so it doesn't bleed into card border */
.vehicle-item .btn-brutalist {
  box-shadow: none;
  width: 100%;
  border: 2px solid var(--color-accent);
}

.vehicle-item .btn-brutalist:hover {
  box-shadow: none;
  border-color: var(--accent-light);
  transform: translateY(-1px);
}

.vehicle-item .btn-brutalist:active {
  box-shadow: none;
  transform: none;
}
/* ===== RAISED BUTTON ===== */
.btn-raised {
  --button_radius: 0.75em;
  --button_color: var(--primary-black);
  --button_outline_color: var(--color-accent);
  font-size: 17px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  border-radius: var(--button_radius);
  background: var(--button_outline_color);
  font-family: 'DM Sans', sans-serif;
}

.btn-raised .button_top {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--button_outline_color);
  border-radius: var(--button_radius);
  padding: 0.75em 1.5em;
  background: var(--button_color);
  color: var(--button_outline_color);
  transform: translateY(-0.2em);
  transition: transform 0.1s ease;
}

.btn-raised:hover .button_top {
  transform: translateY(-0.33em);
}

.btn-raised:active .button_top {
  transform: translateY(0);
}
/* ===== VEHICLE FILTER SIDEBAR ===== */
.vehicles-page-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  align-items: start;
}

.filter-sidebar {
  position: sticky;
  top: 100px;
  background: linear-gradient(145deg, var(--secondary-black), var(--primary-black));
  border: 1px solid var(--accent-rgba-light);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--accent-rgba-light);
}

.filter-sidebar__title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.filter-reset-btn {
  font-size: 0.75rem;
  color: var(--gray);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.filter-reset-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-section {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0.75rem 0;
}

.filter-section:last-child {
  border-bottom: none;
}

.filter-section__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-light);
  padding: 0.25rem 0;
  letter-spacing: 0.02em;
}

.filter-section__toggle:hover {
  color: var(--color-accent);
}

.filter-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--gray);
}

.filter-section__toggle.collapsed .filter-chevron {
  transform: rotate(180deg);
}

.filter-section__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  opacity: 0;
}

.filter-section__body.open {
  max-height: 400px;
  opacity: 1;
  padding-top: 0.75rem;
}

/* Price Range Slider */
.filter-price-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.filter-range-wrap {
  padding: 0 2px;
}

.filter-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) var(--range-pct, 100%), rgba(255,255,255,0.12) var(--range-pct, 100%));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.filter-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--primary-black);
  box-shadow: 0 0 0 3px var(--accent-rgba-light);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.filter-range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px var(--accent-rgba-light);
}

.filter-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--primary-black);
  cursor: pointer;
}

/* Pills */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filter-pill {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--gray-light);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.filter-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-pill.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--primary-black);
}

/* Brand List */
.filter-brand-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.filter-brand-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-light);
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}

.filter-brand-item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--accent-rgba-ultralight);
}

.filter-brand-item.active {
  border-color: var(--color-accent);
  background: var(--accent-rgba-light);
  color: var(--color-accent);
}

.filter-brand-logo {
  height: 18px;
  width: auto;
  max-width: 44px;
  object-fit: contain;
  filter: invert(1) brightness(0.8);
  flex-shrink: 0;
}

.filter-brand-item.active .filter-brand-logo {
  filter: invert(75%) sepia(60%) saturate(400%) hue-rotate(5deg) brightness(1.1);
}

body.theme-secondary .filter-brand-item.active .filter-brand-logo {
  filter: brightness(0) saturate(0%) invert(85%);
}

.vehicles-page-main {
  min-width: 0;
}

.vehicles-page-main .container {
  padding: 0;
  max-width: 100%;
}

/* Mobile filter toggle button */
.filter-mobile-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--accent-rgba-ultralight);
  border: 1.5px solid var(--color-accent);
  border-radius: 10px;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .vehicles-page-layout {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 0;
  }

  .filter-mobile-toggle {
    display: flex;
  }

  .filter-sidebar {
    position: static;
    display: none;
    margin-bottom: 1.5rem;
  }

  .filter-sidebar.mobile-open {
    display: flex;
  }
}
/* ===== PAGE TRANSITION LOADER ===== */
.page-loader-overlay {
  position: fixed;
  inset: 0;
  background: var(--primary-black);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.page-loader-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.page-loader-overlay.hidden {
  display: none;
}

.page-loader-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Truck loader — themed to site colors */
.loader {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truckWrapper {
  width: 200px;
  height: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  overflow-x: hidden;
}

.truckBody {
  width: 130px;
  height: fit-content;
  margin-bottom: 6px;
  animation: truckMotion 1s linear infinite;
}

@keyframes truckMotion {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(3px); }
  100% { transform: translateY(0px); }
}

.truckTires {
  width: 130px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px 0px 15px;
  position: absolute;
  bottom: 0;
}

.truckTires svg {
  width: 24px;
}

.road {
  width: 100%;
  height: 1.5px;
  background-color: var(--color-accent);
  position: relative;
  bottom: 0;
  align-self: flex-end;
  border-radius: 3px;
}

.road::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  background-color: var(--color-accent);
  right: -50%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 10px solid var(--primary-black);
}

.road::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background-color: var(--color-accent);
  right: -65%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 4px solid var(--primary-black);
}

.lampPost {
  position: absolute;
  bottom: 0;
  right: -90%;
  height: 90px;
  animation: roadAnimation 1.4s linear infinite;
  fill: var(--color-accent);
}

@keyframes roadAnimation {
  0%   { transform: translateX(0px); }
  100% { transform: translateX(-350px); }
}
/* ===== CALL ORBIT BUTTON ===== */
.call-orbit-btn {
  bottom: calc(2rem + 90px + 1rem) !important;
}
/* ===== ORBIT BUTTONS SIZE FIX — DEFINITIVE ===== */

/* Default mobile base — applies to all mobile sizes */
.whatsapp-orbit-btn {
  width: 46px !important;
  height: 46px !important;
  left: 0.5rem !important;
  bottom: 1rem !important;
}
.call-orbit-btn {
  bottom: calc(1rem + 46px + 0.5rem) !important;
}
.whatsapp-orbit-btn__text > span {
  transform: rotate(calc(20deg * var(--index))) translateY(-18px) translateX(-2px);
}
.whatsapp-orbit-btn__circle {
  width: 19px !important;
  height: 19px !important;
}
.whatsapp-orbit-btn__circle svg {
  width: 12px !important;
}
.whatsapp-orbit-btn__text {
  font-size: 0.36rem;
}

/* Laptop */
@media (min-width: 769px) {
  .whatsapp-orbit-btn {
    width: 70px !important;
    height: 70px !important;
    left: 1.25rem;
    bottom: 1.5rem;
  }
  .call-orbit-btn {
    bottom: calc(1.5rem + 70px + 0.85rem) !important;
  }
  .whatsapp-orbit-btn__text > span {
    transform: rotate(calc(20deg * var(--index))) translateY(-29px) translateX(-3px);
  }
  .whatsapp-orbit-btn__circle {
    width: 28px !important;
    height: 28px !important;
  }
  .whatsapp-orbit-btn__circle svg {
    width: 17px !important;
  }
  .whatsapp-orbit-btn__text {
    font-size: 0.5rem;
  }
}

/* Mobile S 320px */
@media (max-width: 320px) {
  .whatsapp-orbit-btn {
    width: 42px !important;
    height: 42px !important;
    left: 0.5rem !important;
    bottom: 0.75rem !important;
  }
  .call-orbit-btn {
    bottom: calc(0.75rem + 42px + 0.5rem) !important;
  }
  .whatsapp-orbit-btn__text > span {
    transform: rotate(calc(20deg * var(--index))) translateY(-16px) translateX(-2px);
  }
  .whatsapp-orbit-btn__circle {
    width: 17px !important;
    height: 17px !important;
  }
  .whatsapp-orbit-btn__circle svg {
    width: 11px !important;
  }
  .whatsapp-orbit-btn__text {
    font-size: 0.34rem;
  }

}
/* ===== CAROUSEL RESPONSIVE FIX — DEFINITIVE ===== */

/* Laptop: 3 cards visible, fixed 300px each */
@media (min-width: 769px) {
  .home-carousel-section {
    max-width: 1100px;
  }
  .home-carousel-track-outer {
    overflow: hidden;
    width: calc(300px * 3 + 1.5rem * 2);
    max-width: calc(300px * 3 + 1.5rem * 2);
    flex-shrink: 0;
  }
  .home-carousel-wrapper {
    justify-content: center;
  }
  .home-carousel-track {
    gap: 1.5rem;
  }
  .home-carousel-card {
    min-width: 300px !important;
    max-width: 300px !important;
    width: 300px !important;
    flex-shrink: 0 !important;
  }
}

/* Mobile: hide prev button, show only next, card fills remaining space */
@media (max-width: 768px) {
  .home-carousel-wrapper {
    padding: 0;
    gap: 0;
    position: relative;
  }

  /* Hide left/prev nav on mobile */
  .home-carousel-nav--prev {
    display: none !important;
  }

  /* Next button floats over card on right edge */
  .home-carousel-nav--next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.2rem !important;
  }

  .home-carousel-track-outer {
    overflow: hidden;
    width: 100%;
  }

  .home-carousel-track {
    gap: 0 !important;
  }

  /* Card takes FULL width of the track-outer — exactly 1 card visible */
  .home-carousel-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .home-carousel-section {
    padding: 0 1rem;
    overflow: hidden;
  }
}

@media (max-width: 425px) {
  .home-carousel-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .home-carousel-section {
    padding: 0 0.75rem;
  }
}

@media (max-width: 375px) {
  .home-carousel-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .home-carousel-section {
    padding: 0 0.5rem;
  }
}

@media (max-width: 320px) {
  .home-carousel-card {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .home-carousel-section {
    padding: 0 0.5rem;
  }
}

/* ===== LOCATION SECTION ===== */
.location-section {
  padding: 3rem 2rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

.location-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: stretch;
  min-height: 320px;
}

.location-map-wrap {
  border-radius: 5px;
  border: 2px solid var(--color-accent);
  box-shadow: 4px 4px var(--color-accent);
  overflow: hidden;
  min-height: 320px;
  background: var(--primary-black);
}

.location-map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: block;
  filter: grayscale(30%) invert(5%);
}

/* Info Card — matches vehicle card style */
.location-card {
  background: var(--primary-black);
  border-radius: 5px;
  border: 2px solid var(--color-accent);
  box-shadow: 4px 4px var(--color-accent);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.location-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  margin: 0 auto 0.25rem;
}

.location-card__name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-accent);
  text-align: center;
}

.location-card__badge {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  width: fit-content;
  margin: 0 auto;
}

.location-card__divider {
  border: none;
  border-top: 1px solid var(--accent-rgba-light);
  margin: 0.25rem 0;
}

.location-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-accent);
}

.location-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.15rem;
}

.location-card__value {
  font-size: 0.88rem;
  color: var(--gray-light);
  line-height: 1.5;
}

.location-card__directions {
  display: inline-block;
  margin-top: auto;
  padding: 0.6rem 1.2rem;
  background: var(--color-accent);
  color: var(--primary-black);
  border-radius: 5px;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.location-card__directions:hover {
  opacity: 0.85;
}

/* Contact page full map */
.contact-map-wrap {
  width: 100%;
  height: 400px;
  border-top: 2px solid var(--color-accent);
  overflow: hidden;
}

.contact-map-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(30%);
}

@media (max-width: 768px) {
  .location-inner {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .location-map-wrap {
    min-height: 250px;
  }

  .location-map-wrap iframe {
    min-height: 250px;
  }

  .contact-map-wrap {
    height: 280px;
  }
}
/* ===== POPULAR ROAD TRIPS SECTION ===== */
.trips-section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 2px solid var(--color-accent);
}

.trips-section__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.trips-section__header h2 {
  font-size: 2.2rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.trips-section__header p {
  color: var(--gray-light);
  font-size: 1rem;
}

.trips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Trip Card */
.trip-card-wrap {
  border-radius: 5px;
  box-shadow: 4px 4px var(--color-accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trip-card-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 6px 6px var(--color-accent);
}

.trip-card-wrap:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.trip-card {
  background: var(--primary-black);
  border: 2px solid var(--color-accent);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.trip-card__img-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.trip-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.trip-card-wrap:hover .trip-card__img {
  transform: scale(1.06);
}

.trip-card__distance-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.trip-card__body {
  padding: 1.2rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.trip-card__route {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.trip-card__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.trip-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--gray);
  font-weight: 500;
}

.trip-card__meta-item svg {
  width: 13px;
  height: 13px;
  fill: var(--color-accent);
  flex-shrink: 0;
}

.trip-card__divider {
  border: none;
  border-top: 1px solid var(--accent-rgba-light);
  margin: 0.25rem 0;
}

.trip-card__desc {
  font-size: 0.85rem;
  color: var(--gray-light);
  line-height: 1.6;
  flex: 1;
}

.trip-card__cta {
  margin-top: 0.75rem;
  display: inline-block;
  padding: 0.65rem 1.4rem;
  background: var(--color-accent);
  color: var(--primary-black);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
  border: 2px solid var(--color-accent);
}

.trip-card__cta:hover {
  opacity: 0.85;
}

@media (max-width: 900px) {
  .trips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .trips-grid {
    grid-template-columns: 1fr;
  }

  .trips-section {
    padding: 3rem 1rem;
  }

  .trips-section__header h2 {
    font-size: 1.6rem;
  }
}

/* ===== TRIP LANDING PAGE ===== */
.trip-hero {
  position: relative;
  height: 60vh;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  padding: 3rem 2rem;
  overflow: hidden;
}

.trip-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.trip-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}

.trip-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.trip-hero__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.trip-hero__title {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.trip-hero__subtitle {
  color: var(--gray-light);
  font-size: 1rem;
}

/* Quick Info Strip */
.trip-info-strip {
  background: var(--secondary-black);
  border-bottom: 2px solid var(--color-accent);
  padding: 1.25rem 2rem;
}

.trip-info-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.trip-info-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.trip-info-item svg {
  width: 20px;
  height: 20px;
  fill: var(--color-accent);
  flex-shrink: 0;
}

.trip-info-item__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  font-weight: 600;
}

.trip-info-item__value {
  font-size: 0.92rem;
  color: var(--gray-light);
  font-weight: 600;
}

/* Trip page sections */
.trip-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.trip-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.trip-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--accent-rgba-light);
}

/* Route map */
.trip-map-wrap {
  border-radius: 5px;
  border: 2px solid var(--color-accent);
  box-shadow: 4px 4px var(--color-accent);
  overflow: hidden;
  height: 360px;
}

.trip-map-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Highlights */
.trip-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.trip-highlight-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--primary-black);
  border: 2px solid var(--color-accent);
  box-shadow: 3px 3px var(--color-accent);
  border-radius: 5px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-light);
}

.trip-highlight-item svg {
  width: 16px;
  height: 16px;
  fill: var(--color-accent);
  flex-shrink: 0;
}

/* Booking CTA */
.trip-booking-cta {
  background: var(--primary-black);
  border: 2px solid var(--color-accent);
  box-shadow: 6px 6px var(--color-accent);
  border-radius: 5px;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.trip-booking-cta h2 {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.trip-booking-cta p {
  color: var(--gray-light);
  font-size: 0.95rem;
  max-width: 500px;
}

.trip-booking-cta .btn-brutalist {
  font-size: 1rem;
  padding: 0.85rem 2.5rem;
  width: auto;
}

@media (max-width: 768px) {
  .trip-hero__title {
    font-size: 1.8rem;
  }

  .trip-info-strip__inner {
    gap: 1.25rem;
  }

  .trip-map-wrap {
    height: 250px;
  }

  .trip-highlights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trip-page-container {
    padding: 2rem 1rem 4rem;
    gap: 2rem;
  }
}
/* ===== REVIEWS / RATING SECTION ===== */
.reviews-section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 2px solid var(--color-accent);
}

.reviews-section__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 3rem;
  align-items: start;
}

.reviews-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

/* Average rating card */
.reviews-avg-card {
  background: var(--primary-black);
  border: 2px solid var(--color-accent);
  box-shadow: 4px 4px var(--color-accent);
  border-radius: 5px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.reviews-avg-score {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
}

.reviews-avg-stars {
  display: flex;
  gap: 0.2rem;
}

.reviews-star {
  font-size: 1.4rem;
  color: var(--color-accent);
}

.reviews-star--empty {
  color: rgba(255,255,255,0.15);
}

.reviews-avg-count {
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

/* Rating bars */
.reviews-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.reviews-bar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.reviews-bar-label {
  color: var(--gray-light);
  font-weight: 600;
  min-width: 10px;
  text-align: right;
}

.reviews-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.reviews-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--accent-light));
  border-radius: 999px;
  transition: width 0.8s ease;
  display: block;
}

.reviews-bar-pct {
  color: var(--gray);
  font-size: 0.78rem;
  min-width: 32px;
  text-align: right;
}

/* Write Review CTA inside avg card */
.reviews-write-cta {
  border-top: 1px solid var(--accent-rgba-light);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}

.reviews-write-cta h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

.reviews-write-cta p {
  font-size: 0.82rem;
  color: var(--gray);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* ADD REVIEW FORM — bottom section */
.reviews-form-wrap {
  border-top: 2px solid var(--color-accent);
  padding-top: 3rem;
  margin-top: 3rem;
}

.reviews-form-wrap > .reviews-section__title {
  margin-bottom: 1.5rem;
}

/* Login prompt */
#reviewLoginPrompt {
  padding: 1.25rem 1.5rem;
  background: var(--accent-rgba-ultralight);
  border: 1px solid var(--accent-rgba-light);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--gray-light);
  margin-bottom: 1.5rem;
}

#reviewLoginPrompt a {
  color: var(--color-accent);
  font-weight: 700;
}

/* Form card */
.reviews-form-inner {
  background: var(--primary-black);
  border: 2px solid var(--color-accent);
  box-shadow: 4px 4px var(--color-accent);
  border-radius: 5px;
  padding: 2rem 2rem 2.5rem;
  max-width: 600px;
}

.rev-form-col-left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rev-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rev-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.rev-required {
  color: #ff6b6b;
  margin-left: 2px;
}

/* Star picker */
.rev-star-picker {
  display: flex;
  gap: 0.25rem;
}

.rev-star-pick {
  background: none;
  border: none;
  font-size: 2rem;
  color: rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}

.rev-star-pick:hover,
.rev-star-pick.hovered,
.rev-star-pick.selected {
  color: var(--color-accent);
}

.rev-star-pick:hover {
  transform: scale(1.15);
}

/* Inputs */
.rev-input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--secondary-black);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--gray-light);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.rev-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-rgba-ultralight);
}

.rev-input::placeholder {
  color: var(--gray);
}

.rev-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--secondary-black);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--gray-light);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.rev-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-rgba-ultralight);
}

.rev-textarea::placeholder {
  color: var(--gray);
}

/* Submit */
.rev-submit-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, var(--color-accent), var(--accent-light));
  color: var(--primary-black);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.25s ease;
}

.rev-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-rgba-shadow);
}

.rev-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Form feedback message */
.rev-form-msg {
  font-size: 0.85rem;
  border-radius: 8px;
  min-height: 0;
}

.rev-form-msg:not(:empty) {
  padding: 0.6rem 0.85rem;
}

.rev-form-msg--error {
  background: rgba(255,0,0,0.08);
  border: 1px solid rgba(255,80,80,0.4);
  color: #ff8888;
}

.rev-form-msg--success {
  background: rgba(0,200,120,0.08);
  border: 1px solid #00c896;
  color: #66ffcc;
}

/* Already reviewed */
.reviews-already-done {
  padding: 1.5rem;
  background: rgba(0,200,120,0.08);
  border: 1px solid #00c896;
  border-radius: 10px;
  color: #66ffcc;
  font-size: 0.92rem;
  text-align: center;
}

@media (max-width: 768px) {
  .reviews-form-inner {
    padding: 1.5rem 1.25rem 2rem;
    max-width: 100%;
  }
}

/* Review cards list */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.reviews-list::-webkit-scrollbar {
  width: 4px;
}

.reviews-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
}

.reviews-list::-webkit-scrollbar-thumb {
  background: var(--accent-rgba-light);
  border-radius: 999px;
}

.reviews-loading {
  color: var(--gray);
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
}

.review-card {
  background: var(--primary-black);
  border: 1px solid var(--accent-rgba-light);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s ease;
}

.review-card:hover {
  border-color: var(--color-accent);
}

.review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.review-card__user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, var(--accent-light), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.review-card__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-light);
}

.review-card__date {
  font-size: 0.75rem;
  color: var(--gray);
}

.review-card__stars {
  display: flex;
  gap: 0.1rem;
}

.review-card__star {
  font-size: 1rem;
  color: var(--color-accent);
}

.review-card__star--empty {
  color: rgba(255,255,255,0.15);
}

.review-card__vehicle {
  font-size: 0.78rem;
  color: var(--color-accent);
  font-weight: 600;
  opacity: 0.8;
}

.review-card__comment {
  font-size: 0.88rem;
  color: var(--gray-light);
  line-height: 1.6;
}

.review-card__delete {
  background: transparent;
  border: 1px solid rgba(255,50,50,0.3);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  white-space: nowrap;
  align-self: flex-end;
}

.review-card__delete:hover {
  background: rgba(255,50,50,0.1);
  border-color: #ff6b6b;
}

@media (max-width: 900px) {
  .reviews-section__inner {
    grid-template-columns: 1fr;
  }

  .reviews-list {
    max-height: 400px;
  }
}

@media (max-width: 600px) {
  .reviews-section {
    padding: 3rem 1rem;
  }

  .reviews-avg-score {
    font-size: 2.5rem;
  }
}
/* Review card footer — helpful button */
.review-card__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.review-card__helpful-count {
  font-size: 0.78rem;
  color: var(--gray);
  flex: 1;
  line-height: 1.4;
  min-height: 1em;
}

.review-card__helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.review-card__helpful-btn:hover {
  background: var(--color-accent);
  color: var(--primary-black);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-rgba-shadow);
}

.review-card__helpful-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Voted state — filled gold */
.review-card__helpful-btn--voted {
  background: var(--color-accent) !important;
  color: var(--primary-black) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 2px 8px var(--accent-rgba-shadow);
}

.review-card__helpful-btn--voted:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: var(--white) !important;
}

.review-card__helpful-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.review-card__helpful-btn svg {
  flex-shrink: 0;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* Fill the thumb icon when voted */
.review-card__helpful-btn--voted svg {
  fill: var(--primary-black);
  stroke: var(--primary-black);
}
/* ===== 320px VEHICLE PAGE CARD FIX ===== */
@media (max-width: 320px) {
  .vehicles-page-layout {
    padding: 0.5rem !important;
    gap: 0 !important;
  }

  .vehicles-page-main .container {
    padding: 0.5rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .vehicles-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .vehicle-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Reduce shadow so it doesn't cause overflow */
    box-shadow: 2px 2px var(--color-accent) !important;
  }

  .vehicle-details {
    padding: 0.85rem 0.9rem 1rem !important;
  }

  .vehicle-actions {
    gap: 0.35rem !important;
  }

  .btn-book {
    font-size: 0.78rem !important;
    padding: 0.55rem 0.35rem !important;
  }

  .btn-compare {
    padding: 0.5rem 0.45rem !important;
    font-size: 0.7rem !important;
  }

  .btn-wishlist {
    width: 30px !important;
    height: 30px !important;
  }
}