:root {
  color-scheme: light;
  --mm-bg: #ffffff;
  --mm-surface: #ffffff;
  --mm-surface-soft: #f8fafc;
  --mm-surface-soft-2: #f1f5f9;
  --mm-text: #0f172a;
  --mm-text-muted: #475569;
  --mm-border: #cbd5e1;
  --mm-primary-text: #071b3b;
  --mm-primary-bg: #031636;
}

html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
  /* Dark navy (premium) */
  --mm-bg: #020617;          /* slate-950 */
  --mm-surface: #0b1120;     /* deep navy surface */
  --mm-surface-soft: #0f172a;/* slate-900 */
  --mm-surface-soft-2: #1e293b; /* slate-800 */
  --mm-text: #e2e8f0;
  --mm-text-muted: #94a3b8;
  --mm-border: #334155;
  --mm-primary-text: #f8fafc;
  --mm-primary-bg: #031636;  /* brand navy */
}

body {
  font-family: "Inter", sans-serif;
  background: var(--mm-bg);
  color: var(--mm-text);
}

html.dark body,
html[data-theme="dark"] body {
  background: var(--mm-bg);
  color: var(--mm-text);
}

h1, h2, h3, .font-headline {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.glass-panel {
  background: rgba(229, 231, 235, 0.9);
  backdrop-filter: blur(24px);
}

html.dark .glass-panel,
html[data-theme="dark"] .glass-panel {
  background: rgba(184, 190, 197, 0.92);
}

.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.editorial-shadow {
  box-shadow: 0 10px 40px -10px rgba(7, 27, 59, 0.06);
}

html.dark .editorial-shadow,
html[data-theme="dark"] .editorial-shadow {
  box-shadow: 0 8px 18px -12px rgba(2, 8, 23, 0.35);
}

/* Global semantic theme mapping so dark mode applies consistently across pages */
.bg-background { background-color: var(--mm-bg) !important; }
.bg-surface,
.bg-surface-container-lowest { background-color: var(--mm-surface) !important; }
.bg-surface-container,
.bg-surface-container-low { background-color: var(--mm-surface-soft) !important; }
.bg-surface-container-high,
.bg-surface-container-highest { background-color: var(--mm-surface-soft-2) !important; }

.text-on-background,
.text-on-surface { color: var(--mm-text) !important; }
.text-on-surface-variant { color: var(--mm-text-muted) !important; }
.text-primary { color: var(--mm-primary-text) !important; }
.bg-primary { background-color: var(--mm-primary-bg) !important; }

.border-outline-variant,
.border-outline { border-color: var(--mm-border) !important; }

/* Fallback for pages that still use neutral utilities without dark variant */
html.dark .bg-white,
html[data-theme="dark"] .bg-white { background-color: var(--mm-surface) !important; }
html.dark .text-\[\#1A2B4C\],
html[data-theme="dark"] .text-\[\#1A2B4C\] { color: #f8fafc !important; }
html.dark .text-slate-500,
html.dark .text-slate-600,
html.dark .text-slate-700,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-700 { color: var(--mm-text-muted) !important; }
html.dark .border-slate-200,
html.dark .border-slate-300,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300 { border-color: var(--mm-border) !important; }

/* Keep layout width comfortable and consistent */
.max-w-screen-2xl,
.max-w-\[1280px\] {
  max-width: 1280px !important;
}

.max-w-\[980px\] {
  max-width: 980px !important;
}

.max-w-\[920px\] {
  max-width: 920px !important;
}

.container {
  max-width: 1280px !important;
}

.status-available {
  background: #a3f69c;
  color: #002204;
}

.status-reserved {
  background: #ffddb4;
  color: #291800;
}

.status-sold {
  background: #ffdad6;
  color: #93000a;
}

/* Reusable product card system (Home + Catalog) */
.car-card {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.car-card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.car-card-subtitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.car-card-price {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-search-column,
.inventory-grid-clean {
  background: transparent !important;
}

.hero-search-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 24px 80px rgba(2, 8, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
}

html.dark .hero-search-card,
html[data-theme="dark"] .hero-search-card {
  background: linear-gradient(180deg, rgba(12, 22, 46, 0.52) 0%, rgba(8, 19, 46, 0.36) 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 80px rgba(2, 8, 23, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
}

.hero-search-field {
  background: rgba(7, 27, 71, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero-search-field::placeholder {
  color: rgba(226, 232, 240, 0.55) !important;
}

.hero-search-field option {
  background: #0b1a40;
  color: #f8fafc;
}

.hero-search-field:focus {
  border-color: rgba(245, 166, 35, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.hero-search-label {
  color: rgba(226, 232, 240, 0.7) !important;
}

/* Search modal glass panel that follows background */
.mm-glass-panel {
  background: rgba(241, 245, 249, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

html.dark .mm-glass-panel,
html[data-theme="dark"] .mm-glass-panel {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
}

.ios-glass-card {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(203, 213, 225, 0.82);
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.ios-glass-card--amber {
  background: rgba(255, 247, 237, 0.78);
  border-color: rgba(245, 158, 11, 0.24);
}

.ios-glass-card--emerald {
  background: rgba(236, 253, 245, 0.78);
  border-color: rgba(16, 185, 129, 0.24);
}

.ios-glass-card--rose {
  background: rgba(255, 241, 242, 0.78);
  border-color: rgba(244, 63, 94, 0.22);
}

.ios-glass-card--slate {
  background: rgba(248, 250, 252, 0.76);
  border-color: rgba(100, 116, 139, 0.22);
}

.ios-glass-card--navy {
  background: rgba(239, 246, 255, 0.76);
  border-color: rgba(8, 19, 46, 0.20);
}

.ios-faq-help {
  background: rgba(71, 85, 105, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.ios-faq-item {
  background: rgba(9, 26, 64, 0.84);
  border: 1px solid rgba(37, 99, 235, 0.14);
  box-shadow: 0 20px 55px rgba(8, 19, 46, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.mm-data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.mm-data-table thead {
  background: linear-gradient(135deg, rgba(8, 19, 46, 0.08) 0%, rgba(236, 244, 255, 0.94) 48%, rgba(255, 248, 231, 0.96) 100%);
}

.mm-data-table thead th {
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 800;
  color: #5f6f89;
  background: transparent;
}

.mm-data-table thead th:first-child {
  border-top-left-radius: 1rem;
}

.mm-data-table thead th:last-child {
  border-top-right-radius: 1rem;
}

.mm-data-table tbody tr {
  transition: background-color 180ms ease;
}

.mm-data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.74);
}

html.dark .ios-glass-card,
html[data-theme="dark"] .ios-glass-card {
  background: rgba(15, 23, 42, 0.74);
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow: 0 20px 55px rgba(2, 8, 23, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark .ios-glass-card--amber,
html[data-theme="dark"] .ios-glass-card--amber {
  background: rgba(120, 53, 15, 0.32);
  border-color: rgba(245, 158, 11, 0.2);
}

html.dark .ios-glass-card--emerald,
html[data-theme="dark"] .ios-glass-card--emerald {
  background: rgba(6, 78, 59, 0.32);
  border-color: rgba(16, 185, 129, 0.22);
}

html.dark .ios-glass-card--rose,
html[data-theme="dark"] .ios-glass-card--rose {
  background: rgba(127, 29, 29, 0.30);
  border-color: rgba(244, 63, 94, 0.2);
}

html.dark .ios-glass-card--slate,
html[data-theme="dark"] .ios-glass-card--slate {
  background: rgba(30, 41, 59, 0.76);
  border-color: rgba(100, 116, 139, 0.22);
}

html.dark .ios-glass-card--navy,
html[data-theme="dark"] .ios-glass-card--navy {
  background: rgba(30, 58, 138, 0.22);
  border-color: rgba(59, 130, 246, 0.16);
}

/* Landing hero gradient should follow theme:
   - requested: solid navy overlay (no gradient) */
.landing-hero-surface {
  background: #031636 !important;
}

.landing-hero-overlay {
  /* Solid navy tint to keep text readable without gradient */
  background: rgba(3, 22, 54, 0.78) !important;
}

html.dark .landing-hero-surface,
html[data-theme="dark"] .landing-hero-surface {
  background: #031636 !important;
}

html.dark .landing-hero-overlay,
html[data-theme="dark"] .landing-hero-overlay {
  background: rgba(3, 22, 54, 0.82) !important;
}

/* Landing page section separation (light mode): white/soft-gray alternating */
.landing-surface-inventory {
  background: #ffffff !important;
}

.landing-surface-main {
  background: #f3f4f6 !important;
}

.landing-surface-faq {
  background: #ffffff !important;
}

.landing-surface-testimonials {
  background: #f3f4f6 !important;
}

.landing-surface-seo {
  background: #ffffff !important;
}

.landing-inventory-card {
  background: #ffffff !important;
  border-color: rgba(30, 58, 138, 0.18) !important;
}

html[data-theme="light"] .landing-inventory-card .landing-inventory-title {
  color: #0b1a40 !important;
}

html[data-theme="light"] .landing-inventory-card .landing-inventory-meta {
  color: #64748b !important;
}

html[data-theme="light"] .landing-inventory-card .landing-inventory-otr {
  color: #64748b !important;
}

html[data-theme="light"] .landing-inventory-card .landing-inventory-divider {
  border-top-color: rgba(30, 58, 138, 0.35) !important;
  border-bottom-color: rgba(30, 58, 138, 0.35) !important;
}

/* Price uses green in all modes */
.landing-inventory-price {
  color: #16a34a !important;
}

html.dark .landing-inventory-price,
html[data-theme="dark"] .landing-inventory-price {
  color: #4ade80 !important;
}

html.dark .landing-inventory-card,
html[data-theme="dark"] .landing-inventory-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Ensure readable copy when light mode is active, even if dark utility styles leak in */
html[data-theme="light"] .landing-light-heading {
  color: #0b1a40 !important;
}

html[data-theme="light"] .landing-light-copy {
  color: #475569 !important;
}

html.dark .landing-surface-inventory,
html[data-theme="dark"] .landing-surface-inventory {
  background: #020617 !important;
}

html.dark .landing-surface-main,
html[data-theme="dark"] .landing-surface-main {
  background: #030712 !important;
}

html.dark .landing-surface-faq,
html[data-theme="dark"] .landing-surface-faq {
  background: #020617 !important;
}

html.dark .landing-surface-testimonials,
html[data-theme="dark"] .landing-surface-testimonials {
  background: #030712 !important;
}

html.dark .landing-surface-seo,
html[data-theme="dark"] .landing-surface-seo {
  background: #030712 !important;
}

html.dark .landing-inventory-card,
html[data-theme="dark"] .landing-inventory-card {
  background: #0b1120 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

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