/* theme.css */
:root {
  --color-primary: #325ee1;
  --color-primary-hover: #244ac4;
  --color-primary-light: #eef2ff;
  --color-primary-muted: rgba(50, 94, 225, 0.12);
  --color-primary-rgb: 50, 94, 225;
  --color-on-primary: #ffffff;
  --color-accent: #334155;
  --color-accent-light: #f1f5f9;
  --color-accent-rgb: 51, 65, 85;
  --color-gold: #b45309;
  --color-gold-dark: #92400e;
  --color-text: #1f2937;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;
  --color-heading: #0f172a;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-surface-section: #f1f5f9;
  --color-surface-well: #f9fafb;
  --color-surface-input: #f8fafc;
  --color-surface-soft: #fafafa;
  --color-surface-muted: #f4f6fb;
  --color-border: #e2e8f0;
  --color-border-light: #eef2f7;
  --color-border-strong: #cbd5e1;
  --color-success: #15803d;
  --color-danger: #d9534f;
  --color-logo: #0f172a;
  --color-logo-accent: var(--color-primary);
  --gradient-brands-section:
    radial-gradient(circle at 18% 12%, rgba(15, 23, 42, 0.04), transparent 42%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-premium-grid:
    linear-gradient(120deg, rgba(255, 255, 255, 0.86), rgba(241, 245, 249, 0.92)),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.05) 0, rgba(15, 23, 42, 0.05) 1px, transparent 1px, transparent 34px);
  --gradient-panel: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --gradient-card-premium: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  --gradient-choice-card: #ffffff;
  --gradient-finder-card: rgba(255, 255, 255, 0.95);
  --gradient-header: rgba(255, 255, 255, 0.96);
  --gradient-btn: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --shadow-elevated: 0 12px 28px rgba(15, 23, 42, 0.1), var(--shadow-inset-top);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-primary: 0 8px 24px rgba(var(--color-primary-rgb), 0.18);
  --font-sans: "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
}

html {
  color-scheme: light;
}

html.theme-ready,
html.theme-ready body {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-ready,
  html.theme-ready body {
    transition: none;
  }
}

/* themes.css */
/* Site theme palettes — html[data-theme], stacked with html[data-color-mode="dark"] */

html[data-theme="classic"] {
  --color-primary: #325ee1;
  --color-primary-hover: #244ac4;
  --color-primary-light: #eef2ff;
  --color-primary-muted: rgba(50, 94, 225, 0.12);
  --color-primary-rgb: 50, 94, 225;
  --color-accent: #334155;
  --color-accent-light: #f1f5f9;
  --color-accent-rgb: 51, 65, 85;
  --color-gold: #b45309;
  --color-gold-dark: #92400e;
  --shadow-primary: 0 8px 24px rgba(50, 94, 225, 0.18);
}

html[data-theme="verde"] {
  --color-primary: #047857;
  --color-primary-hover: #065f46;
  --color-primary-light: #ecfdf5;
  --color-primary-muted: rgba(4, 120, 87, 0.12);
  --color-primary-rgb: 4, 120, 87;
  --color-accent: #115e59;
  --color-accent-light: #f0fdfa;
  --color-accent-rgb: 17, 94, 89;
  --color-gold: #ca8a04;
  --color-gold-dark: #a16207;
  --shadow-primary: 0 8px 24px rgba(4, 120, 87, 0.2);
}

html[data-theme="sleek"] {
  --color-primary: #10b981;
  --color-primary-hover: #059669;
  --color-primary-light: #ecfdf5;
  --color-primary-muted: rgba(16, 185, 129, 0.12);
  --color-primary-rgb: 16, 185, 129;
  --color-on-primary: #052e16;
  --color-accent: #064e3b;
  --color-accent-light: #f0fdf4;
  --color-accent-rgb: 6, 78, 59;
  --color-gold: #34d399;
  --color-gold-dark: #10b981;
  --color-text: #111827;
  --color-heading: #030712;
  --color-surface-alt: #f4f7f5;
  --color-surface-section: #eef5f1;
  --color-border: #d7e3dc;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --gradient-btn: linear-gradient(180deg, #34d399 0%, #059669 100%);
  --gradient-brands-section: linear-gradient(180deg, #f7fbf8 0%, #eef5f1 100%);
  --shadow-primary: 0 10px 22px rgba(16, 185, 129, 0.22);
}

html[data-theme="nocturne"] {
  --color-primary: #171717;
  --color-primary-hover: #0a0a0a;
  --color-primary-light: #f5f5f5;
  --color-primary-muted: rgba(23, 23, 23, 0.08);
  --color-primary-rgb: 23, 23, 23;
  --color-on-primary: #fafafa;
  --color-accent: #525252;
  --color-accent-light: #fafafa;
  --color-accent-rgb: 82, 82, 82;
  --color-gold: #737373;
  --color-gold-dark: #525252;
  --color-text: #171717;
  --color-text-muted: #525252;
  --color-heading: #0a0a0a;
  --color-surface: #ffffff;
  --color-surface-alt: #fafafa;
  --color-surface-section: #f5f5f5;
  --color-border: #e5e5e5;
  --color-border-strong: #d4d4d4;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --gradient-btn: #171717;
  --gradient-brands-section: #fafafa;
  --gradient-panel: #ffffff;
  --gradient-card: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.08);
}

html[data-theme="crimson"] {
  --color-primary: #dc2626;
  --color-primary-hover: #b91c1c;
  --color-primary-light: #fef2f2;
  --color-primary-muted: rgba(220, 38, 38, 0.12);
  --color-primary-rgb: 220, 38, 38;
  --color-accent: #7f1d1d;
  --color-accent-light: #fff7f7;
  --color-accent-rgb: 127, 29, 29;
  --color-gold: #b45309;
  --color-gold-dark: #92400e;
  --color-surface-alt: #faf7f5;
  --color-surface-section: #f8f1ee;
  --gradient-brands-section:
    radial-gradient(circle at 12% 0%, rgba(220, 38, 38, 0.06), transparent 40%),
    linear-gradient(180deg, #fffdfa 0%, #f7f1ee 100%);
  --gradient-btn: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  --shadow-primary: 0 8px 24px rgba(185, 28, 28, 0.22);
}

/* Shared dark surfaces — accent color comes from the active theme, not a purple wash */
html[data-color-mode="dark"] {
  --color-text: #e5e7eb;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;
  --color-heading: #f8fafc;
  --color-surface: #161b26;
  --color-surface-alt: #0b1220;
  --color-surface-section: #1c2433;
  --color-surface-well: #151d2b;
  --color-surface-input: #0f1623;
  --color-surface-soft: #151d2b;
  --color-surface-muted: #172033;
  --color-border: rgba(148, 163, 184, 0.16);
  --color-border-light: rgba(148, 163, 184, 0.1);
  --color-border-strong: rgba(148, 163, 184, 0.28);
  --color-primary-light: rgba(var(--color-primary-rgb), 0.2);
  --color-primary-muted: rgba(var(--color-primary-rgb), 0.16);
  --color-accent-light: rgba(var(--color-accent-rgb), 0.18);
  --color-logo: #ffffff;
  --gradient-brands-section: linear-gradient(180deg, #0b1220 0%, #111827 100%);
  --gradient-premium-grid:
    linear-gradient(145deg, #1c2433 0%, #121a28 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 34px);
  --gradient-panel: linear-gradient(180deg, #1c2433 0%, #121a28 100%);
  --gradient-card: linear-gradient(180deg, #1c2433 0%, #121a28 100%);
  --gradient-card-premium: linear-gradient(180deg, #241f16 0%, #121a28 100%);
  --gradient-choice-card: #ffffff;
  --gradient-finder-card: linear-gradient(180deg, rgba(28, 36, 51, 0.98) 0%, rgba(18, 26, 40, 0.98) 100%);
  --gradient-header: rgba(11, 18, 32, 0.96);
  --shadow-inset-top: none;
  --shadow-elevated: 0 10px 24px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --dm-border: rgba(148, 163, 184, 0.16);
  color-scheme: dark;
}

html[data-theme="verde"][data-color-mode="dark"] {
  --color-surface: #101816;
  --color-surface-alt: #0a1210;
  --color-surface-section: #16241f;
  --color-surface-input: #0c1412;
  --color-heading: #ecfdf5;
  --gradient-header: rgba(10, 18, 16, 0.96);
  --gradient-panel: linear-gradient(180deg, #16241f 0%, #101816 100%);
  --gradient-card: linear-gradient(180deg, #16241f 0%, #101816 100%);
  --gradient-brands-section:
    radial-gradient(circle at 12% 0%, rgba(4, 120, 87, 0.1), transparent 44%),
    linear-gradient(180deg, #0a1210 0%, #101816 100%);
}

html[data-theme="sleek"][data-color-mode="dark"] {
  --color-surface: #0d1512;
  --color-surface-alt: #070c0a;
  --color-surface-section: #12201a;
  --color-surface-input: #0a1210;
  --color-border: rgba(52, 211, 153, 0.16);
  --color-heading: #ecfdf5;
  --gradient-header: rgba(7, 12, 10, 0.96);
  --gradient-panel: linear-gradient(180deg, #12201a 0%, #0d1512 100%);
  --gradient-card: linear-gradient(180deg, #12201a 0%, #0d1512 100%);
  --gradient-brands-section:
    radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.1), transparent 44%),
    linear-gradient(180deg, #070c0a 0%, #0d1512 100%);
}

html[data-theme="nocturne"][data-color-mode="dark"] {
  --color-primary: #f5f5f5;
  --color-primary-hover: #e5e5e5;
  --color-primary-rgb: 245, 245, 245;
  --color-primary-light: rgba(245, 245, 245, 0.08);
  --color-primary-muted: rgba(245, 245, 245, 0.08);
  --color-on-primary: #0a0a0a;
  --color-accent: #a3a3a3;
  --color-logo-accent: #a3a3a3;
  --color-gold: #d4d4d4;
  --color-text: #e5e5e5;
  --color-text-muted: #a3a3a3;
  --color-heading: #fafafa;
  --color-surface: #111111;
  --color-surface-alt: #050505;
  --color-surface-section: #171717;
  --color-surface-input: #0a0a0a;
  --color-border: rgba(255, 255, 255, 0.1);
  --gradient-btn: #f5f5f5;
  --gradient-header: rgba(5, 5, 5, 0.96);
  --gradient-panel: #111111;
  --gradient-card: #111111;
  --gradient-brands-section: #050505;
  --shadow-primary: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html[data-theme="crimson"][data-color-mode="dark"] {
  --color-surface: #1a1010;
  --color-surface-alt: #0f0909;
  --color-surface-section: #241414;
  --color-surface-input: #140a0a;
  --color-heading: #fff1f2;
  --gradient-header: rgba(15, 9, 9, 0.96);
  --gradient-panel: linear-gradient(180deg, #241414 0%, #1a1010 100%);
  --gradient-card: linear-gradient(180deg, #241414 0%, #1a1010 100%);
  --gradient-brands-section:
    radial-gradient(circle at 12% 0%, rgba(220, 38, 38, 0.12), transparent 42%),
    linear-gradient(180deg, #0f0909 0%, #1a1010 100%);
}

html[data-color-mode="dark"] body {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

html[data-color-mode="dark"] .main-header {
  background-color: var(--gradient-header);
  border-bottom-color: var(--color-border);
}

html[data-color-mode="dark"] .header-search-container {
  background-color: var(--gradient-header);
}

html[data-theme="nocturne"] .finder-btn.primary,
html[data-theme="nocturne"] .btn--primary,
html[data-theme="nocturne"] .header-search-button {
  background: var(--gradient-btn);
  color: var(--color-on-primary);
  box-shadow: none;
}

html[data-theme="sleek"] .finder-btn.primary,
html[data-theme="sleek"] .btn--primary {
  background: var(--gradient-btn);
  color: var(--color-on-primary);
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.22);
}

html[data-theme="crimson"] .finder-btn.primary,
html[data-theme="crimson"] .btn--primary {
  background: var(--gradient-btn);
  box-shadow: 0 12px 24px rgba(185, 28, 28, 0.28);
}

html[data-theme="verde"] .finder-btn.primary {
  background: var(--gradient-btn);
  box-shadow: 0 12px 24px rgba(4, 120, 87, 0.24);
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.theme-toggle-btn .theme-toggle-icon--sun {
  display: none;
}

html[data-color-mode="dark"] .theme-toggle-btn .theme-toggle-icon--moon {
  display: none;
}

html[data-color-mode="dark"] .theme-toggle-btn .theme-toggle-icon--sun {
  display: inline;
}

/* style.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  padding: 0px;
  font: 16px var(--font-sans);
  margin: 0;
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

img {
  max-width: 100%;
}

/* Card thumbnails: full car visible (contain), no hard crop */
.variant-image,
.featured-generation-thumb,
.news-card-image,
.generation-image,
.brand-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.generation-card-thumb {
  display: block;
  overflow: hidden;
}

.variant-image img,
.featured-generation-thumb img {
  object-fit: cover;
  object-position: center 40%;
}

.news-card-image img,
.generation-image img,
.brand-card-image img {
  object-fit: contain;
  object-position: center;
}

.generation-card-thumb img {
  object-fit: cover;
  object-position: center 42%;
}

.model-card-image img {
  object-fit: contain;
  object-position: center;
}

/* Compact touch swipe hint (home slideshow + model gallery) */
.touch-swipe-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 34px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.12), transparent 30%, transparent 70%, rgba(15, 23, 42, 0.12));
  transition: opacity 0.35s ease;
}

.touch-swipe-hint::before,
.touch-swipe-hint::after {
  content: "";
  position: absolute;
  bottom: 12px;
  width: 12px;
  height: 12px;
  border-top: 2px solid rgba(255, 255, 255, 0.92);
  border-right: 2px solid rgba(255, 255, 255, 0.92);
  opacity: 0.8;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.touch-swipe-hint::before {
  left: 18%;
  transform: rotate(-135deg);
  animation: touch-hint-left 1s ease-in-out infinite;
}

.touch-swipe-hint::after {
  right: 18%;
  transform: rotate(45deg);
  animation: touch-hint-right 1s ease-in-out infinite;
}

@keyframes touch-hint-left {
  0%, 100% { transform: translateX(0) rotate(-135deg); opacity: 0.4; }
  50% { transform: translateX(5px) rotate(-135deg); opacity: 0.95; }
}

@keyframes touch-hint-right {
  0%, 100% { transform: translateX(0) rotate(45deg); opacity: 0.4; }
  50% { transform: translateX(-5px) rotate(45deg); opacity: 0.95; }
}

.touch-swipe-hint.is-fading {
  opacity: 0;
}

.touch-swipe-hint.is-hidden {
  display: none !important;
}

.touch-swipe-hint-text {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.gallery-main .touch-swipe-hint::before,
.gallery-main .touch-swipe-hint::after {
  border-color: rgba(30, 41, 59, 0.75);
}

.gallery-main .touch-swipe-hint-text {
  background: rgba(30, 41, 59, 0.72);
}

a {
  color: var(--color-text);
}

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 16px;
  }
}

/* Search Results Styles */
.results-section {
  padding: 2rem 0;
}

.results-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.results-section h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-text);
}

.results-section h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--color-text-muted);
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

.generation-grid, .variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.generation-card, .variant-card {
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.generation-card:hover, .variant-card:hover {
  transform: translateY(-2px);
}

.generation-image img, .model-image img {
  width: 100%;
  height: 200px;
  border-radius: 4px;
}

.variant-card h3 {
  margin-bottom: 0.5rem;
}

.variant-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.model-info-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 40px auto;
    padding: 22px 24px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    max-width: 1040px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.model-info-container--single {
    max-width: 900px;
}

.model-info-container .info-box {
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: none;
    border: 1px solid var(--color-border);
    align-self: stretch;
}

.info-box {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    align-self: start;
}

.info-box--specs {
    max-width: none;
}

.info-box--dealers {
    min-width: 0;
}

.info-box h2 {
    text-align: left;
    margin: 0 0 14px 0;
    font-size: 1.15rem;
    color: var(--color-text);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary-light);
}

.info-box--specs h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom-width: 2px;
    border-bottom-color: var(--color-primary);
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    justify-items: center;
    justify-content: center;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.spec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    background: var(--color-surface-muted);
    border: 1px solid rgba(var(--color-primary-rgb), 0.16);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease, background 0.2s ease;
    min-height: 0;
}

@media (max-width: 720px) {
    .specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.spec-card--wltp {
    padding-right: 36px;
}

.spec-card--wltp:hover,
.spec-card--wltp:focus-within,
.spec-card--wltp.is-open {
    z-index: 6;
}

.spec-wltp-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
}

.spec-wltp-hint {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-primary-rgb), 0.28);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.spec-wltp-hint:hover,
.spec-wltp-hint:focus-visible,
.spec-card--wltp.is-open .spec-wltp-hint {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    outline: none;
}

.spec-wltp-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    z-index: 40;
    text-align: left;
}

.spec-wltp-popover.is-floating {
    display: block;
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: 4000;
    max-height: min(70vh, 480px);
    overflow-y: auto;
}

.spec-wltp-wrap:hover .spec-wltp-popover,
.spec-wltp-wrap:focus-within .spec-wltp-popover,
.spec-card--wltp.is-open .spec-wltp-popover {
    display: block;
}

.spec-wltp-popover p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--color-text);
}

.spec-wltp-popover ul {
    margin: 0 0 12px;
    padding: 0 0 0 18px;
}

.spec-wltp-popover li {
    margin: 0 0 7px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text);
}

.spec-wltp-popover-note {
    margin: 0 !important;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
}

@media (max-width: 768px) {
    .spec-wltp-popover {
        position: fixed;
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: min(70vh, 480px);
        overflow-y: auto;
        z-index: 1200;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
    }

    .spec-wltp-wrap:hover .spec-wltp-popover {
        display: none;
    }

    .spec-wltp-wrap:focus-within .spec-wltp-popover,
    .spec-card--wltp.is-open .spec-wltp-popover {
        display: block;
    }
}

.spec-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.28);
    background: var(--color-primary-light);
    transform: none;
    box-shadow: none;
}

.spec-card-label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    width: 100%;
    line-height: 1.3;
}

.spec-card-value {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.35;
    width: 100%;
    text-align: left;
    word-break: break-word;
}

.faq-section {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 20px;
    background: transparent;
}

.faq-section-title {
    margin: 0 0 20px;
    font-size: 1.6rem;
    color: var(--color-text);
    text-align: center;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
}

.faq-question::after {
    content: '+';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease;
}

.faq-item.is-open .faq-question::after {
    content: '−';
    background: var(--color-primary);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

.faq-item.is-open .faq-answer {
    max-height: 1400px;
}

.faq-answer-inner {
    padding: 0 20px 18px;
    color: var(--color-text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
}

.specs-table {
    display: none;
}

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-item {
    margin-bottom: 20px;
    padding: 10px;
    background: var(--color-surface);
    border-left: 4px solid #007bff; /* Adds a nice accent to contact info */
    border-radius: 4px;
    font-size: 0.95em;
}

.contact-item strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 4px;
}

/* Sales network (prodajna mreža) dealer cards */
.dealer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.dealer-item {
    background: var(--color-surface);
    border-left: 3px solid var(--color-primary);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: none;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    height: 100%;
}

.dealer-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.35;
}

.dealer-name-text {
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
}

.dealer-visit-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.28);
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.dealer-visit-btn:hover {
    background: rgba(var(--color-primary-rgb), 0.14);
    text-decoration: none;
}

.dealer-contacts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.dealer-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-muted);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.dealer-contact:hover {
    color: var(--color-primary);
    background: #eaf0ff;
    border-color: #b7c6ec;
    transform: none;
    box-shadow: none;
}

.dealer-contact:active {
    transform: none;
}

.dealer-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.dealer-phone .dealer-icon {
    color: #15803d;
}

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

.dealer-location .dealer-icon {
    color: #d9534f;
}

@media (min-width: 981px) {
    .info-box--dealers h2 {
        font-size: 1.35rem;
    }

    .dealer-name {
        font-size: 1.08rem;
    }

    .dealer-contact {
        font-size: 0.96rem;
        padding: 10px 12px;
    }

    .dealer-icon {
        width: 18px;
        height: 18px;
    }
}

.dealer-contact-text {
    word-break: break-word;
    min-width: 0;
}

@media (max-width: 600px) {
    .dealer-list {
        grid-template-columns: 1fr;
    }

    .dealer-contact {
        font-size: 0.88rem;
        padding: 9px 11px;
    }
}

.description-content {
    /* This forces EJS/HTML to respect all spaces, tabs, and new lines */
    white-space: pre-wrap;
    
    /* Good practice: ensures words don't overflow the box horizontally */
    word-wrap: break-word; 
}

.tucson-choice-bar {
  max-width: 1200px;
  margin: 40px auto;
  padding: 28px 30px 32px;
  background-color: var(--color-surface-section);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.model-fit-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.model-fit-panel:has(.model-fit-block--tags):has(.model-fit-block--audience) {
  grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 0.95fr);
  align-items: stretch;
  gap: 0 8px;
}

.model-fit-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.model-fit-block--tags {
  padding-right: 8px;
}

.model-fit-block--audience {
  padding-left: 8px;
}

.model-fit-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 12px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #d5dbe3 12%,
    #d5dbe3 88%,
    transparent 100%
  );
}

.tucson-choice-main-title {
  text-align: left;
  font-size: 1.55rem;
  color: var(--color-text);
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.3;
}

.model-fit-audience-title {
  margin-bottom: 12px;
}

.tucson-choice-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tucson-choice-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 18px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid #d5dbe3;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.model-fit-audience-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 38em;
}

.tucson-choice-empty {
  margin: 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.98rem;
}

.model-fit-panel:not(:has(.model-fit-divider)) .tucson-choice-main-title {
  text-align: center;
}

.model-fit-panel:not(:has(.model-fit-divider)) .tucson-choice-tags {
  justify-content: center;
}

.model-fit-panel:not(:has(.model-fit-divider)) .model-fit-audience-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  .model-fit-panel:has(.model-fit-block--tags):has(.model-fit-block--audience) {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .model-fit-block--tags,
  .model-fit-block--audience {
    padding: 0;
  }

  .model-fit-divider {
    width: auto;
    height: 1px;
    margin: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #d5dbe3 12%,
      #d5dbe3 88%,
      transparent 100%
    );
  }

  .tucson-choice-main-title {
    text-align: center;
    font-size: 1.35rem;
  }

  .tucson-choice-tags {
    justify-content: center;
  }

  .model-fit-audience-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Feature cards under the gallery (header + body + optional image, no section title) */
.feature-cards-section {
  max-width: 1200px;
  margin: 24px auto 8px;
  padding: 0 20px;
}

.feature-cards-viewport {
  position: relative;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 20px;
}

.feature-cards-viewport.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  background: linear-gradient(180deg, transparent 0%, var(--color-surface) 72%);
  pointer-events: none;
  z-index: 2;
}

.choice-card--hidden {
  display: none !important;
}

.feature-cards-viewport.is-collapsed .choice-card--peek {
  animation: choice-card-peek-hint 2.8s ease-in-out infinite;
  transform: translateY(-18px) scale(0.985);
  opacity: 0.95;
}

@keyframes choice-card-peek-hint {
  0%, 100% {
    opacity: 0.72;
    filter: saturate(0.9);
    transform: translateY(-18px) scale(0.985);
  }
  50% {
    opacity: 1;
    filter: saturate(1);
    transform: translateY(-10px) scale(1);
  }
}

.choice-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
  align-items: start;
}

/* Ladder / staggered layout: the right column always sits lower than the left */
.choice-cards .choice-card:nth-child(even) {
  margin-top: 44px;
}

.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--gradient-choice-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 26px 24px 32px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.choice-card--peek::after {
  content: '';
  position: absolute;
  inset: auto 18px 14px 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.2), var(--color-primary), rgba(var(--color-primary-rgb), 0.2));
  box-shadow: 0 0 14px rgba(var(--color-primary-rgb), 0.35);
}

.choice-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-hover));
}

.choice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px rgba(var(--color-primary-rgb), 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.choice-card-media {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  z-index: 1;
}

.choice-card-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.choice-card-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-right: 30px;
}

.choice-card-title {
  font-size: 1.18em;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 7px;
  letter-spacing: 0;
  text-transform: none;
}

.choice-card-text {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.choice-card-number {
  position: absolute;
  right: 16px;
  top: 2px;
  font-size: 3.6em;
  font-weight: 800;
  line-height: 1;
  color: rgba(var(--color-primary-rgb), 0.16);
  pointer-events: none;
  z-index: 0;
}

.feature-cards-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  position: relative;
}

.feature-cards-more-btn {
  background: #0f3da8;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 34px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  position: relative;
  min-width: 190px;
  padding-right: 52px;
}

.feature-cards-more-btn::after {
  content: '\2193';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  transition: transform 0.25s ease;
}

.feature-cards-more-btn:hover {
  background: #0c3088;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 61, 168, 0.25);
}

.feature-cards-more-btn:active {
  transform: translateY(0);
}

.feature-cards-more-btn[aria-expanded="false"] {
  animation: feature-cards-btn-pulse 2.8s ease-in-out infinite;
}

.feature-cards-more-btn[aria-expanded="true"]::after {
  content: '\2191';
}

.feature-cards-more-btn.is-expanded {
  background: linear-gradient(135deg, #153eaa 0%, #2f6bff 100%);
  box-shadow: 0 10px 24px rgba(15, 61, 168, 0.24);
}

@keyframes feature-cards-btn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(15, 61, 168, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(15, 61, 168, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-cards-viewport {
    transition: none;
  }

  .feature-cards-viewport.is-collapsed .choice-card--peek {
    transform: translateY(-18px) scale(0.985);
  }

  .feature-cards-viewport.is-collapsed .choice-card--peek,
  .feature-cards-more-btn[aria-expanded="false"] {
    animation: none;
  }
}

@media (max-width: 880px) {
  .choice-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .choice-cards .choice-card:nth-child(even) {
    margin-top: 0;
  }

  /* On phones the icon floats so the text wraps around it for more text space */
  .choice-card {
    display: block;
    padding: 18px 20px;
  }

  .choice-card-media {
    float: left;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    padding: 8px;
    margin: 2px 14px 8px 0;
  }

  .choice-card-content {
    padding-right: 0;
  }

  .choice-card-number {
    font-size: 2.6em;
    right: 12px;
  }

}


.variant-name-col {
  display: flex;
  align-items: center;
  gap: 8px; /* Spaces the badge perfectly next to the variant name */
}

.ev-badge {
  background-color: #007bff; /* Deep electric blue */
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: fit-content;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
  .model-info-container {
    grid-template-columns: 1fr;
    margin: 24px auto;
    padding: 16px;
    gap: 16px;
  }

  .info-box--specs {
    max-width: none;
  }

  .info-box {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .tucson-choice-bar {
    margin: 24px auto;
    padding: 18px 16px 20px;
  }

  .tucson-choice-main-title {
    font-size: 1.45em;
    margin-bottom: 16px;
  }

  .tucson-choice-tags {
    gap: 8px;
  }

  .tucson-choice-tag {
    padding: 9px 14px;
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  .model-info-container {
    margin: 18px auto;
    padding: 12px;
    gap: 12px;
  }

  .specs-table td {
    padding: 10px 8px;
    font-size: 13px;
  }

  .contact-item {
    font-size: 0.88em;
    padding: 8px;
  }

  .dealer-contacts {
    flex-direction: column;
    gap: 8px;
  }

  .dealer-contact {
    width: 100%;
    justify-content: flex-start;
    font-size: 0.88rem;
    padding: 9px 11px;
  }

  .tucson-choice-bar {
    margin: 18px auto;
    padding: 14px 12px 16px;
  }

  .tucson-choice-main-title {
    font-size: 1.25em;
    margin-bottom: 12px;
  }

  .tucson-choice-tag {
    padding: 8px 12px;
    font-size: 0.88rem;
  }
}

/* banners.css */
/* Page shell: wide banners between content blocks (side banners removed) */

.page-with-side-banners {
  width: 100%;
}

.page-main-column {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.page-with-side-banners--active {
  display: block;
  padding: 0;
}

.page-with-side-banners--active .page-main-column {
  max-width: 1200px;
  margin: 0 auto;
}

.banner-side,
.banner-side-rotator,
.featured-banner-side {
  display: none !important;
}

/* Wide horizontal banner slots — between content blocks only */
.banner-wide-slot {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.banner-wide-slot--section {
  margin: 24px 0;
}

.banner-wide-slot--inline {
  margin: 16px 0 8px;
}

.banner-wide-rotator {
  position: relative;
  width: min(100%, var(--banner-width, 728px));
  aspect-ratio: var(--banner-ratio, 728 / 90);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(15, 23, 42, 0.08));
}

.banner-wide-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.65s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface, #fff);
}

.banner-wide-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.banner-wide-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Square side banners removed */

@media (max-width: 768px) {
  .banner-wide-slot {
    padding: 0 12px;
  }

  .banner-wide-slot--section {
    margin: 16px 0;
  }
}

/* Home featured models section */
.featured-generations-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

.featured-banner-row {
  display: none;
}

.featured-banner-side {
  display: none;
}

/* Full-bleed "Svi brendovi" background on home */
.brands-section-bleed-wrap {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.brands-section--all {
  padding-top: 40px;
  padding-bottom: 50px;
}

.brands-section--all .non-premium-brands-grid {
  max-width: 1582px;
  margin: 0 auto;
  padding: 0 50px 50px;
}

@media (max-width: 768px) {
  .brands-section--all .non-premium-brands-grid {
    padding: 0 4px 24px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .brands-section--all .non-premium-brands-grid {
    padding: 0 2px 20px;
  }
}

/* mobile-polish.css */
/* Mobile layout polish — shared gutters, flat surfaces, readable controls */

/* ---- Dock menu toggle in dark mode ---- */
html[data-color-mode="dark"] .mobile-dock-menu-toggle .header-menu-bar,
html.dm-theme .mobile-dock-menu-toggle .header-menu-bar {
  background: currentColor !important;
}

/* ---- Home page: one shared horizontal rhythm ---- */
@media (max-width: 880px) {
  html, body {
    overflow-x: clip;
    max-width: 100%;
  }

  main,
  .page-with-side-banners,
  .page-main-column,
  .finder-section,
  .market-strip,
  .home-utilities-section,
  .home-cost-tools-section,
  .blog-home-section {
    max-width: 100%;
    overflow-x: clip;
  }

  /* The 100vw full-bleed drifts off-centre once the page can scroll; drop it. */
  .brands-section-bleed-wrap {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  :is(
    .brands-section,
    .brands-section--all,
    .featured-generations-section,
    .home-utilities-section,
    .home-cost-tools-section,
    .blog-home-section
  ) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Premium showcase sits closer to the edge — the cards are the hero here. */
  .brands-section:not(.brands-section--all) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .finder-intro {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .finder-container,
  .market-strip--hero {
    width: auto !important;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box;
  }

  /* Grids sit inside the section gutter — no second, uneven inset. */
  .catalog-premium-lead,
  .non-premium-brands-grid,
  .brands-section--all .non-premium-brands-grid,
  .blog-home-grid {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .brands-section--all .non-premium-brands-grid {
    padding-bottom: 24px !important;
  }

  .home-utilities-grid {
    max-width: 100%;
  }

  :is(
    .finder-card,
    .premium-brands-grid,
    .non-premium-brands-grid,
    .home-utilities-grid,
    .home-cost-tools-grid,
    .fuel-prices-embed,
    .chargers-embed,
    .chargers-panel,
    .service-estimate,
    .blog-home-grid
  ) {
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  :is(
    .brands-section,
    .brands-section--all,
    .featured-generations-section,
    .home-utilities-section,
    .home-cost-tools-section,
    .blog-home-section
  ) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .finder-intro,
  .finder-container,
  .market-strip--hero {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* ---- Model page: shared horizontal rhythm ---- */
@media (max-width: 768px) {
  :is(
    .breadcrumb-row,
    .model-page-header,
    .model-showcase,
    .model-gallery-section,
    .feature-cards-section,
    .generation-section,
    .faq-section,
    .model-description-section,
    .tucson-choice-bar
  ) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .generation-section,
  .model-gallery-section,
  .feature-cards-section,
  .faq-section,
  .model-page-header {
    max-width: 1200px;
  }

  .spec-card-label {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    font-weight: 700;
  }

  .model-info-container {
    margin: 20px 16px 24px !important;
    padding: 0 !important;
    gap: 12px !important;
    max-width: none !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .info-box {
    width: 100%;
    border-radius: var(--radius-md, 16px);
  }

  .info-box--dealers {
    padding: 14px 12px;
  }

  .info-box--dealers .dealer-list {
    grid-template-columns: 1fr;
  }

  .info-box--dealers .dealer-list,
  .info-box--dealers .dealer-item {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .dealer-item {
    padding: 12px;
    border-radius: 10px;
  }

  .specs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-items: stretch;
  }

  .model-info-container--single {
    max-width: none !important;
  }

  .chargers-embed--model {
    width: 100%;
    min-width: 0;
  }

  .generation-card.expanded {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
  }

  .generation-card.expanded .generation-expanded-header {
    padding: 18px 16px 12px;
    background: transparent !important;
    border-bottom: 1px solid var(--color-border);
  }

  .generation-card.expanded .variant-list.open {
    margin: 0;
    padding: 0 0 12px;
    border: none;
    border-radius: 0;
    background: transparent !important;
    width: 100%;
  }

  .generation-card.expanded .variant-list--compact .variant-spec-list {
    gap: 10px;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    padding: 0 12px 8px;
  }

  .generation-card.expanded .variant-item.variant-spec-item {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 14px;
    border: 1px solid var(--color-border-strong);
    box-shadow: none;
  }

  .generation-card.expanded .variant-item.variant-spec-item:last-child {
    border-bottom: 1px solid var(--color-border-strong);
  }

  .generation-card.expanded .generation-card-actions {
    padding: 12px 16px 16px;
    background: transparent !important;
    border-top: 1px solid var(--color-border);
  }

  .feature-cards-viewport {
    border-radius: var(--radius-md, 16px);
  }

  .choice-cards {
    gap: 14px;
  }

  .faq-item {
    border-radius: var(--radius-md, 16px);
  }
}

@media (max-width: 480px) {
  :is(
    .breadcrumb-row,
    .model-page-header,
    .model-gallery-section,
    .feature-cards-section,
    .generation-section,
    .faq-section,
    .model-description-section,
    .tucson-choice-bar
  ) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .model-info-container {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* header.css */
html {
  scroll-behavior: smooth;
}

.chargers-station-list,
.chargers-station-list * {
  scroll-behavior: auto !important;
}

.main-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--gradient-header);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .main-header {
    transition: transform 0.24s ease;
    will-change: transform;
  }

  .main-header.header-hidden-mobile {
    transform: translateY(calc(-100% - 2px));
  }

  .main-header.header-menu-open {
    transform: none !important;
  }
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

.header-logo a {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-logo, var(--color-heading));
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.header-logo .logo-mark {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.header-search-form {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--color-text);
  background: var(--color-surface-input, var(--color-surface));
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-search-input:focus {
  border-color: rgba(var(--color-primary-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.14);
}

.header-search-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: 999px;
  background: var(--gradient-btn);
  color: var(--color-on-primary, #fff);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-primary);
}

.header-search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.22);
}

.header-menu-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 16px;
}

.header-menu-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-menu-open .header-menu-bar:nth-child(1),
.mobile-dock-menu-toggle.is-open .header-menu-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.header-menu-open .header-menu-bar:nth-child(2),
.mobile-dock-menu-toggle.is-open .header-menu-bar:nth-child(2) {
  opacity: 0;
}

.header-menu-open .header-menu-bar:nth-child(3),
.mobile-dock-menu-toggle.is-open .header-menu-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.header-quick-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 12px;
  max-width: min(62%, 720px);
}

.header-all-cars-link {
  position: relative;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 8px;
  padding: 4px 6px;
  background: transparent;
}

.header-all-cars-link::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.header-all-cars-link:hover {
  color: var(--color-primary);
  text-decoration: none;
  background: transparent;
}

.header-all-cars-link:hover::after,
.header-all-cars-link.is-active::after {
  transform: scaleX(1);
}

.header-all-cars-link.is-active {
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
  background: transparent;
}

/* Right Side: Navigation */
.header-nav {
    display: flex;
    gap: 20px;
    align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.header-nav > span,
.header-user-email {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  max-width: min(56vw, 380px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav form {
  margin: 0;
}

.header-nav form .nav-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.nav-link {
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 600;
    transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

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

.btn-register {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  border: 1px solid rgba(15, 23, 42, 0.12);
    color: #111827 !important;
    padding: 8px 18px;
    border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 16px rgba(185, 152, 88, 0.28);
}

.header-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 360px);
  max-width: 360px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: 18px 0 40px rgba(15, 23, 42, 0.22);
  z-index: 1202;
  transform: translateX(-104%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  pointer-events: none;
}

.header-mobile-menu:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
}

.header-menu-open .header-mobile-menu,
.main-header.header-menu-open .header-mobile-menu {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.header-mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 72px 0 28px;
  gap: 0;
}

.header-mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 0;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  background: transparent;
}

.header-mobile-link svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.header-mobile-link:hover,
.header-mobile-link:focus {
  background: rgba(var(--color-primary-rgb), 0.06);
  color: var(--color-primary);
  text-decoration: none;
}

.header-mobile-link.is-active {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
}

.header-mobile-link-accent {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: #111827 !important;
  text-align: center;
}

.header-mobile-button {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.header-mobile-divider {
  height: 1px;
  background: var(--color-border);
  margin: 8px 0;
}

.header-mobile-meta {
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.header-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1200;
}

.header-menu-body-lock {
  overflow: hidden;
}

.btn-register:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(185, 152, 88, 0.38);
}

/* Mobile / tablet: logo left, search fills the right (menu lives in the dock) */
@media (max-width: 1024px) {
  .header-container {
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
    justify-content: flex-start;
  }

  .header-quick-nav,
  .header-nav-desktop {
    display: none;
  }

  .header-logo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2;
    flex: 0 0 auto;
    max-width: none;
    text-align: left;
    pointer-events: auto;
    margin-right: 4px;
  }

  .header-logo a {
    pointer-events: auto;
    font-size: 1.2rem;
  }

  .header-search-form {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    margin-left: 0;
    min-width: 0;
    padding-top: 0;
    border-top: none;
    box-shadow: none;
  }

  .header-search-button {
    display: none !important;
  }
}

/* Desktop: top row + full-width search row */
@media (min-width: 1025px) {
  .header-container {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 20px 12px;
    gap: 12px 14px;
  }

  .header-logo a {
    font-size: 1.5rem;
    letter-spacing: 0.5px;
  }

  .header-search-form {
    flex: 1 1 100%;
    order: 10;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    gap: 10px;
  }

  .header-search-input {
    min-height: 46px;
    height: 46px;
    border-radius: 10px;
    font-size: 1rem;
    padding: 0 16px;
  }

  .header-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 8px 12px;
    gap: 8px;
  }

  .header-logo a {
    font-size: 1rem;
  }

  .header-search-input {
    min-height: 38px;
    height: 38px;
    font-size: 0.88rem;
    padding: 0 12px;
  }

}

@media (max-width: 480px) {
  .header-container {
    padding: 8px 10px;
    gap: 6px;
  }

  .header-logo a {
    font-size: 0.98rem;
  }
}

.theme-toggle-btn--mobile {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  height: auto;
  padding: 12px 16px;
  border: none;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
}

.admin-image-alert {
  background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
  color: #fff;
  border-bottom: 2px solid #fecaca;
  padding: 10px 16px;
}

.admin-image-alert__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.admin-image-alert__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  font-weight: 600;
}

.admin-image-alert__text strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.admin-image-alert a {
  color: #fde68a;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-image-alert a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .admin-image-alert {
    padding: 10px 12px;
  }

  .admin-image-alert__text {
    font-size: 12px;
    text-align: left;
  }
}

/* custom-select.css */
/* Custom select — scrollable menu, larger options (replaces native dropdown UI) */
:root {
  --ac-select-option-h: 48px;
  --ac-select-max-visible: 6;
  --ac-select-radius: 14px;
  --ac-select-menu-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

/* Compact menus inside admin modals — fit more options without scrolling */
#editModal,
.modal {
  --ac-select-option-h: 34px;
  --ac-select-max-visible: 16;
}

.ac-select {
  position: relative;
  display: block;
  width: 100%;
}

.ac-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ac-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: var(--ac-select-radius);
  background: var(--color-surface-input, var(--color-surface, #fff));
  color: var(--color-text, #1f2937);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}

.ac-select-trigger:hover {
  border-color: rgba(100, 116, 139, 0.7);
}

.ac-select-trigger:focus,
.ac-select.is-open .ac-select-trigger {
  outline: none;
  border-color: #1f2937;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.14);
}

.ac-select-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac-select-trigger-label.is-placeholder {
  color: var(--color-text-muted, #64748b);
  font-weight: 500;
}

.ac-select-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
  transition: transform 0.18s ease;
}

.ac-select.is-open .ac-select-chevron {
  transform: rotate(225deg) translateY(-1px);
}

.ac-select-menu {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: calc(var(--ac-select-option-h) * var(--ac-select-max-visible) + 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 16px;
  box-shadow: var(--ac-select-menu-shadow);
  box-sizing: border-box;
}

/* Portaled to <body> so ancestor transforms cannot offset fixed menus */
.ac-select-menu.ac-select-menu--portal {
  position: fixed !important;
  right: auto !important;
  z-index: 10050 !important;
}

.ac-select-menu[hidden] {
  display: none !important;
}

.ac-select-option {
  display: flex;
  align-items: center;
  min-height: var(--ac-select-option-h);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text, #1f2937);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.ac-select-option:hover,
.ac-select-option.is-active {
  background: rgba(15, 23, 42, 0.06);
}

.ac-select-option.is-selected {
  background: rgba(15, 61, 168, 0.1);
  color: var(--color-accent, #0f3da8);
  font-weight: 700;
}

.ac-select-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Compact contexts (search filter bar, sort, fuel, chargers) */
/* Filter pills: closed trigger shows the filter name (placeholder), like a compact dropdown chip */
#resultsFiltersBar .results-filter-field > label,
.finder-advanced-panel .finder-field > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#resultsFiltersBar .results-filters-row {
  align-items: center;
}

#resultsFiltersBar .results-filter-field,
.finder-advanced-panel .finder-field {
  position: relative;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

#resultsFiltersBar .results-filter-field .ac-select,
.finder-advanced-panel .finder-field .ac-select {
  width: auto;
}

#resultsFiltersBar .results-filter-field .ac-select-trigger,
.finder-advanced-panel .finder-field .ac-select-trigger {
  width: max-content;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d5dbe3;
  background: #fff;
  color: #1c2430;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

#resultsFiltersBar .results-filter-field .ac-select-trigger-label.is-placeholder,
.finder-advanced-panel .finder-field .ac-select-trigger-label.is-placeholder {
  color: #1c2430;
  font-weight: 500;
}

#resultsFiltersBar .results-filter-field .ac-select-chevron,
.finder-advanced-panel .finder-field .ac-select-chevron {
  width: 8px;
  height: 8px;
  margin-right: 2px;
  opacity: 0.7;
  color: #3d4756;
}

.finder-advanced-panel .finder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 12px;
}

.results-filter-field .ac-select-trigger,
.fuel-sort .ac-select-trigger,
.chargers-city-filter .ac-select-trigger {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
}

.results-sort-field .ac-select-trigger {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.results-filter-field .ac-select-menu,
.results-sort-field .ac-select-menu,
.fuel-sort .ac-select-menu,
.chargers-city-filter .ac-select-menu {
  border-radius: 12px;
}

.results-filter-field .ac-select-option,
.results-sort-field .ac-select-option,
.fuel-sort .ac-select-option,
.chargers-city-filter .ac-select-option {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 10px;
}

/* Dark mode */
html[data-color-mode="dark"] .ac-select-trigger {
  background: var(--color-surface-input, #0b1220);
  border-color: #1a2332 !important;
  color: #f3f4f6;
  box-shadow: none;
}

html[data-color-mode="dark"] .ac-select-trigger:focus,
html[data-color-mode="dark"] .ac-select.is-open .ac-select-trigger {
  border-color: #2a3648 !important;
  box-shadow: 0 0 0 2px rgba(42, 54, 72, 0.45);
}

html[data-color-mode="dark"] .ac-select-trigger-label.is-placeholder {
  color: #94a3b8;
}

html[data-color-mode="dark"] #resultsFiltersBar .results-filter-field .ac-select-trigger,
html[data-color-mode="dark"] .finder-advanced-panel .finder-field .ac-select-trigger {
  background: var(--color-surface-input, #0b1220);
  border-color: #2a3648;
  color: #f3f4f6;
}

html[data-color-mode="dark"] #resultsFiltersBar .results-filter-field .ac-select-trigger-label.is-placeholder,
html[data-color-mode="dark"] .finder-advanced-panel .finder-field .ac-select-trigger-label.is-placeholder {
  color: #e5e7eb;
}

html[data-color-mode="dark"] .ac-select-menu {
  background: #1c2738;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

html[data-color-mode="dark"] .ac-select-option {
  color: #f3f4f6;
}

html[data-color-mode="dark"] .ac-select-option:hover,
html[data-color-mode="dark"] .ac-select-option.is-active {
  background: rgba(255, 255, 255, 0.08);
}

html[data-color-mode="dark"] .ac-select-option.is-selected {
  background: rgba(65, 255, 166, 0.12);
  color: #41ffa6;
}

/* reveal.css */
/* Smooth reveal / pop-in — soft fade + slight rise */
:root {
  --reveal-duration: 0.38s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 12px;
}

/* Only hide before animation when JS is active (avoids FOUC) */
html.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0) scale(0.985);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

html.js-reveal .reveal.is-in {
  opacity: 1;
  /* none — avoid creating a fixed-position containing block for dropdowns */
  transform: none;
}

html.js-reveal .reveal-fade {
  opacity: 0;
  transform: none;
  transition: opacity 0.45s var(--reveal-ease);
}

html.js-reveal .reveal-fade.is-in {
  opacity: 1;
}

html.js-reveal .reveal-pop {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.96);
  transition:
    opacity 0.5s var(--reveal-ease),
    transform 0.5s var(--reveal-ease);
}

html.js-reveal .reveal-pop.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 880px) {
  html.js-reveal .finder-card.reveal-pop {
    transform: none;
  }
}

/* Slide in from left (fuel ticker, utilities) */
html.js-reveal .reveal-slide-left {
  opacity: 0;
  transform: translate3d(-36px, 0, 0);
  transition:
    opacity 0.55s var(--reveal-ease),
    transform 0.55s var(--reveal-ease);
  will-change: opacity, transform;
}

html.js-reveal .reveal-slide-left.is-in {
  opacity: 1;
  transform: none;
}

/* Slide in from right */
html.js-reveal .reveal-slide-right {
  opacity: 0;
  transform: translate3d(36px, 0, 0);
  transition:
    opacity 0.55s var(--reveal-ease),
    transform 0.55s var(--reveal-ease);
  will-change: opacity, transform;
}

html.js-reveal .reveal-slide-right.is-in {
  opacity: 1;
  transform: none;
}

/* Scale + rise for sections */
html.js-reveal .reveal-rise {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(0.98);
  transition:
    opacity 0.5s var(--reveal-ease),
    transform 0.5s var(--reveal-ease);
}

html.js-reveal .reveal-rise.is-in {
  opacity: 1;
  transform: none;
}

@keyframes premium-grid-glow {
  0%, 100% {
    box-shadow: var(--shadow-elevated), 0 0 18px rgba(185, 152, 88, 0.22);
  }
  50% {
    box-shadow: var(--shadow-elevated), 0 0 34px rgba(212, 175, 55, 0.42);
  }
}

@keyframes premium-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes finder-input-glow {
  0%, 100% {
    border-color: rgba(233, 213, 255, 0.7);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 0 10px rgba(216, 180, 254, 0.28),
      0 0 18px rgba(var(--color-primary-rgb), 0.16);
  }
  50% {
    border-color: rgba(245, 232, 255, 0.92);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.22),
      0 0 14px rgba(233, 213, 255, 0.4),
      0 0 24px rgba(var(--color-primary-rgb), 0.22);
  }
}

@keyframes finder-input-attention {
  0% {
    opacity: 0.55;
    transform: scale(0.985);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0),
      0 0 0 rgba(var(--color-primary-rgb), 0);
  }
  55% {
    opacity: 1;
    transform: scale(1.012);
    border-color: rgba(245, 232, 255, 0.95);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.1),
      0 0 14px rgba(233, 213, 255, 0.35),
      0 0 22px rgba(var(--color-primary-rgb), 0.18);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(233, 213, 255, 0.75);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 0 10px rgba(216, 180, 254, 0.28),
      0 0 18px rgba(var(--color-primary-rgb), 0.16);
  }
}

.premium-brands-grid.reveal-glow.is-in {
  animation: premium-grid-glow 4.5s ease-in-out infinite;
}

.premium-brands-grid.reveal-glow.is-in .brand-card.premium {
  animation: premium-card-float 5.5s ease-in-out infinite;
}

.premium-brands-grid.reveal-glow.is-in .brand-card.premium:nth-child(2) {
  animation-delay: 0.35s;
}

.premium-brands-grid.reveal-glow.is-in .brand-card.premium:nth-child(3) {
  animation-delay: 0.7s;
}

.premium-brands-grid.reveal-glow.is-in .brand-card.premium:hover {
  animation-play-state: paused;
}

html.js-reveal .fuel-ticker-bar.is-in .fuel-ticker-inner > * {
  animation: fuel-ticker-child-in 0.55s var(--reveal-ease) both;
}

html.js-reveal .fuel-ticker-bar.is-in .fuel-ticker-brand {
  animation-delay: 0.05s;
}

html.js-reveal .fuel-ticker-bar.is-in .fuel-ticker-prices {
  animation-delay: 0.12s;
}

html.js-reveal .fuel-ticker-bar.is-in .fuel-ticker-link {
  animation-delay: 0.2s;
}

@keyframes fuel-ticker-child-in {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.js-reveal .reveal[style*="--reveal-delay"] {
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal,
  html.js-reveal .reveal-fade,
  html.js-reveal .reveal-pop,
  html.js-reveal .reveal-slide-left,
  html.js-reveal .reveal-slide-right,
  html.js-reveal .reveal-rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .premium-brands-grid.reveal-glow.is-in,
  .premium-brands-grid.reveal-glow.is-in .brand-card.premium,
  .finder-card .finder-search-input,
  html.js-reveal .fuel-ticker-bar.is-in .fuel-ticker-inner > * {
    animation: none !important;
  }

  .finder-card .finder-search-input {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ui.css */
/* Unified public UI — buttons, search, chips, presentation, motion, mobile dock */

:root {
  --btn-height: 44px;
  --btn-radius: 999px;
  --search-radius: 999px;
  --dock-height: 68px;
  --color-price: #a16207;
  --gradient-btn: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --gradient-btn-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-color-mode="dark"] {
  --color-price: #fbbf24;
}

[hidden] {
  display: none !important;
}

/* ---------- Buttons ---------- */
.btn,
.finder-btn,
.results-filters-btn,
.header-search-button,
.btn-show-more,
.results-load-more-btn,
.feature-cards-more-btn,
.toggle-filters-btn,
.chargers-expand-btn,
.show-more-button,
.filter-button,
.compare-bar-go,
.compare-add-more,
.compare-bar-clear,
.compare-clear-all,
.results-filters-mobile-toggle,
.utility-page-link {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 0 20px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    filter 0.2s ease;
}

.btn-show-more[hidden],
.btn-show-less[hidden] {
  display: none !important;
}

.btn:hover,
.finder-btn:hover,
.results-filters-btn:hover,
.header-search-button:hover,
.btn-show-more:hover,
.results-load-more-btn:hover,
.feature-cards-more-btn:hover,
.toggle-filters-btn:hover,
.chargers-expand-btn:hover,
.show-more-button:hover,
.filter-button:hover,
.compare-bar-go:hover,
.compare-add-more:hover,
.utility-page-link:hover {
  transform: translateY(-2px);
}

.btn:active,
.finder-btn:active,
.results-filters-btn:active,
.header-search-button:active,
.btn-show-more:active,
.results-load-more-btn:active,
.feature-cards-more-btn:active,
.toggle-filters-btn:active,
.show-more-button:active,
.compare-bar-go:active {
  transform: translateY(0);
}

.btn--primary,
.finder-btn.primary,
.results-filters-btn.primary,
.header-search-button,
.results-load-more-btn,
.feature-cards-more-btn,
.compare-bar-go,
.compare-add-more,
.auth-card button[type="submit"] {
  background: var(--gradient-btn);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-primary);
}

.btn--primary:hover,
.finder-btn.primary:hover,
.results-filters-btn.primary:hover,
.header-search-button:hover,
.results-load-more-btn:hover,
.feature-cards-more-btn:hover,
.compare-bar-go:hover,
.compare-add-more:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
}

.btn--secondary,
.finder-btn.secondary,
.results-filters-btn.secondary,
.toggle-filters-btn,
.btn-show-more,
.chargers-expand-btn,
.show-more-button,
.filter-button,
.results-filters-mobile-toggle,
.compare-bar-clear,
.utility-page-link {
  background: var(--color-surface);
  color: var(--color-heading);
  border-color: var(--color-border-strong, var(--color-border));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.btn--ghost,
.compare-clear-all {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  box-shadow: none;
}

.btn--gold,
.btn-register,
.header-mobile-link-accent {
  background: var(--gradient-btn-gold);
  color: #111827 !important;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 8px 16px rgba(185, 152, 88, 0.28);
}

.filter-button.active,
.fuel-tab.active {
  background: var(--gradient-btn) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-primary);
}

.show-more-button:hover,
.filter-button:hover {
  background: var(--gradient-btn);
  color: #fff;
  border-color: transparent;
}

.feature-cards-more-btn {
  position: relative;
  padding-right: 48px;
}

.btn--block,
.show-more-button {
  width: 100%;
}

.finder-btn.primary {
  flex: 1 1 220px;
}

.finder-btn.secondary {
  flex: 1 1 120px;
}

/* ---------- Search fields ---------- */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.search-field-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--color-text-subtle);
  pointer-events: none;
  z-index: 1;
}

.search-field input,
.header-search-input,
.finder-search-input,
.fuel-search input,
.results-filter-field input[type="search"] {
  width: 100%;
  min-height: 46px;
  border-radius: var(--search-radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0 18px 0 44px;
  font: inherit;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.header-search-input {
  min-height: 40px;
  height: 40px;
}

.finder-unified-search .search-field {
  width: 100%;
}

.search-field input:focus,
.header-search-input:focus,
.finder-search-input:focus,
.fuel-search input:focus {
  border-color: rgba(var(--color-primary-rgb), 0.55);
  box-shadow:
    0 0 0 4px rgba(var(--color-primary-rgb), 0.14),
    0 0 22px rgba(var(--color-primary-rgb), 0.18);
}

/* ---------- Presets / chips ---------- */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

.preset-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.18s var(--ease-out), background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.preset-chip:hover,
.preset-chip.is-active {
  transform: translateY(-1px);
  background: var(--gradient-btn);
  color: #fff;
  border-color: transparent;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-page .section-kicker {
  font-size: 20px;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}

.section-head h2,
.section-head .generation-title,
.section-head .models-title {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  text-align: center;
}

.section-head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.section-head--tight {
  margin: 4px auto 10px;
}

.section-head--tight .section-kicker {
  margin-bottom: 0;
}

.price-from {
  margin: 0;
  color: #111;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.price-from span {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* ---------- Market strip ---------- */
.market-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: -8px auto 8px;
  padding: 0 16px 8px;
  position: relative;
  z-index: 2;
}

.market-strip--hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  max-width: 820px;
  margin: 8px 0 2px 8vw;
  padding: 0 16px 2px;
  grid-template-columns: none;
}

.market-strip--hero .market-chip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 3px 8px;
  border: none;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.42);
  box-shadow: none;
  backdrop-filter: none;
  color: #f8fafc;
  line-height: 1.25;
}

.market-strip--hero .market-chip + .market-chip {
  margin-left: 2px;
}

.market-strip--hero .market-stat-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(248, 250, 252, 0.82);
}

.market-strip--hero .market-stat-sub {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(248, 250, 252, 0.62);
}

.market-strip--hero .market-stat-value {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.market-stat {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}

.market-stat::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -18px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary-muted);
  pointer-events: none;
}

.market-stat-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.market-stat-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -0.03em;
}

.market-stat-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* ---------- Smooth reveal (shared by every show more / show less toggle) ---------- */
@keyframes sr-appear {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sr-appear {
  animation: sr-appear 0.42s var(--ease-out, ease) both;
}

/* Toggle buttons: press feedback + chevron that flips with the panel. */
.toggle-filters-btn,
.btn-show-more,
.results-filters-mobile-toggle {
  transition: transform 0.2s var(--ease-out, ease), box-shadow 0.2s ease, background-color 0.2s ease;
}

.toggle-filters-btn:active,
.btn-show-more:active,
.results-filters-mobile-toggle:active {
  transform: scale(0.97);
}

/* ---------- Card shine ---------- */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 3;
}

.card-shine:hover::after {
  animation: shine-sweep 0.85s var(--ease-out);
}

.brand-card.is-premium-all.card-shine::after {
  display: none;
}

@keyframes shine-sweep {
  to { transform: translateX(130%); }
}

/* ---------- Brand / model presentation ---------- */
.brand-showcase,
.model-showcase,
.page-hero {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 22px 20px;
  border-radius: 24px;
  background: var(--gradient-panel);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-elevated);
  position: relative;
  overflow: hidden;
}

.brand-showcase::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-primary-muted), transparent 70%);
  pointer-events: none;
}

.model-showcase::before {
  content: "";
  position: absolute;
  inset: auto -28px -40px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-primary-muted), transparent 70%);
  pointer-events: none;
  opacity: 0.45;
}

.brand-showcase {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
}

.brand-showcase-copy {
  min-width: 0;
}

.brand-showcase-copy .section-kicker {
  margin-bottom: 8px;
}

.brand-showcase .model-showcase-lead {
  margin: 0;
  max-width: none;
  text-align: left;
}

.brand-showcase-link {
  margin-top: 14px;
  text-decoration: none;
}

.brand-showcase-link:hover {
  text-decoration: none;
}

.brand-showcase-logo {
  width: 160px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
}

.brand-showcase-logo img {
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
}

.brand-showcase--with-note {
  grid-template-columns: 160px minmax(0, 1fr) minmax(220px, 340px);
}

.brand-showcase-note {
  min-width: 0;
}

.brand-showcase-note label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.brand-showcase-note textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.brand-showcase-note-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

.brand-showcase-note-save {
  margin-top: 8px;
}

.brand-showcase-note-status {
  min-height: 1.2em;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.brand-showcase h1,
.model-showcase h1,
.page-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.brand-showcase-meta,
.model-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.spec-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-surface-section);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
}

.model-showcase {
  text-align: center;
  margin-bottom: 8px;
  padding: 8px 14px 10px;
  border-radius: 14px;
}

.model-details-section .breadcrumb-row {
  padding-top: 0;
  margin-bottom: 4px;
}

.model-details-section .model-showcase h1.model-title {
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  margin-bottom: 2px;
  line-height: 1.15;
}

.model-showcase .section-kicker {
  margin-bottom: 2px;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.model-showcase .price-from {
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  margin-top: 2px;
  color: #111;
}

.price-from.is-premium,
.model-showcase .price-from.is-premium {
  color: #3ead79;
}

.model-spec-chips {
  margin-top: 6px;
  gap: 6px;
  justify-content: center;
}

.model-showcase .spec-chip {
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
}

.model-showcase-lead {
  margin: 0 auto;
  max-width: 640px;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.fuel-estimate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.fuel-estimate-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 14px;
  text-align: left;
}

.fuel-estimate-card strong {
  display: block;
  font-size: 1.15rem;
  color: var(--color-heading);
  margin: 4px 0;
}

.fuel-estimate-card span {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* ---------- Fuel trip calculator ---------- */
.fuel-trip-card {
  background: var(--gradient-panel);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 22px;
  margin: 0 auto 28px;
  max-width: 1240px;
  box-shadow: var(--shadow-sm);
}

.fuel-trip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.fuel-trip-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}

.fuel-trip-field {
  min-width: 0;
}

.fuel-trip-field input,
.fuel-trip-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-input);
  color: var(--color-text);
  padding: 0 12px;
  font: inherit;
}

.fuel-trip-result {
  background: var(--color-primary-muted);
  border-radius: 16px;
  padding: 14px 16px;
}

.fuel-trip-result strong {
  display: block;
  font-size: 1.4rem;
  color: var(--color-heading);
}

.fuel-insight {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.fuel-trip-card--compact {
  padding: 14px 16px;
  margin: 0 0 16px;
  max-width: none;
  border-radius: 16px;
}

.fuel-trip-compact-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fuel-trip-card--compact .fuel-trip-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto;
  gap: 10px;
}

.fuel-trip-card--compact .fuel-trip-field input,
.fuel-trip-card--compact .fuel-trip-field select {
  min-height: 40px;
  border-radius: 12px;
}

.fuel-trip-card--compact .fuel-trip-result {
  padding: 8px 12px;
  min-width: 132px;
}

.fuel-trip-card--compact .fuel-trip-result strong {
  font-size: 1.15rem;
}

.service-estimate {
  background: var(--gradient-panel);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 22px;
  margin: 0 auto 28px;
  max-width: 1240px;
  box-shadow: var(--shadow-sm);
}

.service-estimate--compact {
  padding: 14px 16px;
  margin: 0 0 16px;
  max-width: none;
  border-radius: 16px;
}

.service-estimate-grid {
  align-items: end;
}

.manual-entry-label {
  margin: 16px 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-subtle, #94a3b8);
}

.service-estimate-catalog {
  margin-bottom: 0;
}

.service-estimate-action {
  display: flex;
  align-items: end;
}

.service-estimate-action .btn {
  width: 100%;
  min-height: 46px;
}

.service-estimate-status {
  margin: 12px 0 0;
  color: var(--color-text-muted);
}

.service-estimate-status.is-error {
  color: #b91c1c;
}

.service-estimate-result {
  margin-top: 18px;
}

.service-estimate-vehicle {
  margin: 0 0 10px;
  font-weight: 800;
  color: var(--color-heading);
}

.service-estimate-table-wrap {
  overflow-x: auto;
}

.service-estimate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.service-estimate-table th,
.service-estimate-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.service-estimate-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.service-estimate-table tbody th {
  white-space: normal;
  color: var(--color-heading);
}

.registration-formula {
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-heading);
}

.registration-line-how {
  display: block;
  margin-top: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: normal;
}

.service-estimate-interval {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
  color: var(--color-text-muted);
}

.service-estimate-meta {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.registration-estimate-total {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  line-height: 1.25;
}

.registration-estimate-total-label--mobile {
  display: none;
}

.registration-estimate-total-price {
  color: #15803d;
  font-variant-numeric: tabular-nums;
}

html[data-color-mode="dark"] .registration-estimate-total-price {
  color: #4ade80;
}

.registration-info-toggle {
  display: none;
}

.service-estimate-units {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.service-unit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  min-width: 0;
}

.service-unit-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary, var(--color-primary));
}

.service-unit-price {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #15803d;
  line-height: 1.2;
}

html[data-color-mode="dark"] .service-unit-price {
  color: #4ade80;
}

.service-unit-interval {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--color-text-muted);
}

.service-unit-included {
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
}

.registration-bonus-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.registration-bonus-field {
  min-width: 0;
}

.service-estimate--compact .registration-guide,
.service-estimate--compact .registration-info-toggle-wrap,
.service-estimate--compact .registration-info-details,
.service-estimate--compact .fuel-insight,
.service-estimate--compact .service-estimate-meta,
.service-estimate--compact .utility-page-link {
  display: none !important;
}

.registration-info-toggle-wrap {
  margin: 0;
}

.registration-docs-card {
  background: var(--gradient-panel, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 26px 28px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}

.registration-docs-card h2 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.registration-docs-card > p {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.registration-docs-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.registration-docs-card li {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.5;
}

.registration-faq {
  max-width: none;
  margin: 0;
  padding: 0;
}

.registration-faq .faq-answer-inner p {
  margin: 0 0 12px;
}

.registration-faq .faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.registration-faq .faq-item.is-open .faq-answer {
  max-height: 2200px;
}

.bonus-malus-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.bonus-malus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.bonus-malus-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 800;
  color: var(--color-heading);
  padding: 0 2px 8px;
}

.bonus-malus-table th,
.bonus-malus-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.bonus-malus-table th {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface-section, rgba(15, 23, 42, 0.03));
}

.bonus-malus-table tbody tr:last-child td {
  border-bottom: none;
}

.bonus-malus-table td:last-child {
  font-weight: 800;
  color: var(--color-heading);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .registration-docs-card {
    padding: 20px 16px 16px;
  }

  .bonus-malus-tables {
    grid-template-columns: 1fr;
  }

  .registration-estimate-total-label--desk {
    display: none;
  }

  .registration-estimate-total-label--mobile {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-heading);
    margin-bottom: 4px;
  }

  .registration-estimate-total-price {
    display: block;
    font-size: clamp(1.35rem, 6vw, 1.8rem);
  }

  .registration-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-heading);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
  }

  .registration-info-toggle .registration-info-caret {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .registration-info-toggle[aria-expanded="true"] .registration-info-caret {
    transform: rotate(180deg);
  }

  .registration-info-details {
    display: none;
    margin-top: 8px;
  }

  .registration-info-details.is-open {
    display: block;
  }

  .service-estimate-units {
    grid-template-columns: 1fr;
  }
}

.tool-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.tool-page .page-hero {
  margin-bottom: 22px;
}

.tool-page-alt {
  margin: 12px 0 0;
}

.tool-page-alt a {
  font-weight: 700;
  color: var(--color-primary, var(--color-primary));
  text-decoration: none;
}

.tool-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.tool-page-links .btn {
  text-decoration: none;
}

@media (max-width: 700px) {
  .tool-page-links {
    flex-direction: column;
  }

  .tool-page-links .btn {
    width: 100%;
    justify-content: center;
  }
}

.service-estimate--compact > .utility-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 40px;
  padding: 0 16px;
  margin: 0 0 14px;
  vertical-align: middle;
}

@media (max-width: 700px) {
  /* One field per row: a 2×2 grid clipped the longer engine labels. */
  .service-estimate .fuel-trip-grid,
  .service-estimate-grid,
  .registration-estimate .fuel-trip-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .service-estimate-action {
    margin-top: 2px;
  }

  .service-estimate-action .btn {
    min-height: 48px;
  }

  .service-estimate-table thead {
    display: none;
  }
  .service-estimate-table,
  .service-estimate-table tbody,
  .service-estimate-table tr,
  .service-estimate-table th,
  .service-estimate-table td {
    display: block;
    width: 100%;
  }
  .service-estimate-table tr {
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--color-border);
  }
  .service-estimate-table td {
    padding: 4px 0;
  }
}

.compare-value.is-best {
  background: rgba(21, 128, 61, 0.1);
  color: var(--color-success);
  font-weight: 800;
}

.compare-insight {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--color-primary-muted);
  color: var(--color-heading);
  font-weight: 700;
}

/* ---------- Mobile dock ---------- */
.mobile-dock {
  display: none;
}

body.has-fullscreen-map .mobile-dock {
  display: none !important;
}

.site-footer {
  margin-top: 48px;
  padding: 28px 16px calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.site-footer-links a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.site-footer-links a:hover {
  color: var(--color-primary);
}

.site-footer-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
  max-width: 880px;
  margin: 0 auto 8px;
  text-align: left;
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.site-footer-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-footer-col a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.site-footer-col a:hover {
  color: var(--color-primary);
}

.site-footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-footer .price-alert {
  max-width: 880px;
  margin: 22px auto 8px;
  text-align: left;
}

.site-footer-legal {
  margin: 16px 0 0;
}

@media (max-width: 700px) {
  .site-footer-layout {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer-social {
    grid-column: 1 / -1;
  }
}

.about-copy {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 12px 32px;
  color: var(--color-text);
  line-height: 1.7;
}

.about-block {
  margin: 0 0 28px;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.about-block--quiet {
  background: var(--color-surface-section, var(--color-surface));
  box-shadow: none;
}

.about-block h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

.about-block h3 {
  margin: 18px 0 8px;
  font-size: 1rem;
  color: var(--color-heading);
}

.about-lead {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--color-heading);
}

.about-block p {
  margin: 0 0 12px;
}

.about-block p:last-child {
  margin-bottom: 0;
}

.about-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-text);
}

.about-offer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.about-offer-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-surface-section, #f1f5f9);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.about-offer-stat:hover {
  border-color: rgba(var(--color-primary-rgb), 0.35);
  color: var(--color-primary);
}

.about-offer-stat strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

.about-offer-stat:hover strong {
  color: var(--color-primary);
}

.about-offer-stat span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.about-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.about-offer-item {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-section, #f8fafc);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.about-offer-item:hover {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  background: rgba(var(--color-primary-rgb), 0.06);
  text-decoration: none;
}

.about-offer-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
  color: var(--color-heading);
}

.about-offer-item span {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.about-points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-points li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 18px;
}

.about-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

.about-points li:last-child {
  margin-bottom: 0;
}

.about-credit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 16px 0 0;
}

.about-credit-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.about-credit-links a:hover {
  text-decoration: underline;
}

.about-credit-links a svg {
  flex-shrink: 0;
}

.about-credit-arrow {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  color: var(--color-primary);
  animation: about-arrow-bounce 1.6s ease-in-out infinite;
}

@keyframes about-arrow-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.error-stack {
  max-width: 960px;
  margin: 0 auto 32px;
  padding: 16px;
  overflow: auto;
  border-radius: 12px;
  background: var(--color-surface-input);
  color: var(--color-text);
  font-size: 0.82rem;
  line-height: 1.45;
}

.error-useful {
  max-width: 920px;
  margin: 0 auto 40px;
  padding: 0 12px;
}

.error-useful h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  color: var(--color-heading);
}

.error-useful-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.error-useful-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.error-useful-card:hover {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  background: rgba(var(--color-primary-rgb), 0.05);
  text-decoration: none;
}

.error-useful-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-heading);
}

.error-useful-card span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.about-video-thumb {
  position: relative;
}

.about-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.95rem;
  padding-left: 3px;
  pointer-events: none;
}

.about-market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 8px;
}

.about-market-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.about-market-card:hover {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  transform: translateY(-2px);
  text-decoration: none;
}

.about-market-card h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--color-heading);
}

.about-market-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.about-market-card-url {
  word-break: break-all;
  font-size: 0.8rem !important;
}

@media (max-width: 900px) {
  .error-useful-grid,
  .about-market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .about-block {
    padding: 18px 16px;
  }

  .about-offer-grid {
    grid-template-columns: 1fr;
  }

  .error-useful-grid,
  .about-market-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes dock-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), 0); }
}

.finder-card .search-field input:focus {
  animation: none;
}

/* ---------- Finder presentation ---------- */
.finder-kicker {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.finder-intro-text {
  margin: 10px 0 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  font-size: 1rem;
  line-height: 1.55;
}

.results-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  align-items: center;
  margin: 0 0 8px;
  padding: 4px 0 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

.results-hero-copy {
  min-width: 0;
  flex: 1 1 180px;
}

.results-hero .section-kicker {
  display: none;
}

.results-hero h1,
.results-section .results-hero h1 {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-heading);
}

.results-hero-count {
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-section);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.results-hero-count strong {
  color: var(--color-heading);
  font-size: 0.95rem;
  font-weight: 800;
}

.results-section .preset-row {
  margin-top: 0;
  margin-bottom: 10px;
}

/* ---------- Header polish ---------- */
.header-logo a {
  color: var(--color-logo, var(--color-heading));
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
}

html[data-color-mode="dark"] .header-logo a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.header-logo .logo-mark {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

html[data-color-mode="dark"] .header-logo .logo-mark {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.header-all-cars-link {
  position: relative;
}

.header-all-cars-link::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease-out);
}

.header-all-cars-link:hover::after,
.header-all-cars-link.is-active::after {
  transform: scaleX(1);
}

.header-all-cars-link.is-active {
  color: var(--color-primary);
}

.header-menu-open .header-mobile-link {
  animation: dock-in 0.35s var(--ease-out) both;
}

.header-menu-open .header-mobile-link:nth-child(1) { animation-delay: 0.02s; }
.header-menu-open .header-mobile-link:nth-child(2) { animation-delay: 0.05s; }
.header-menu-open .header-mobile-link:nth-child(3) { animation-delay: 0.08s; }
.header-menu-open .header-mobile-link:nth-child(4) { animation-delay: 0.11s; }
.header-menu-open .header-mobile-link:nth-child(5) { animation-delay: 0.14s; }
.header-menu-open .header-mobile-link:nth-child(6) { animation-delay: 0.17s; }
.header-menu-open .header-mobile-link:nth-child(7) { animation-delay: 0.2s; }

html[data-theme="verde"] .btn--primary,
html[data-theme="verde"] .finder-btn.primary,
html[data-theme="verde"] .header-search-button,
html[data-theme="verde"] .filter-button.active,
html[data-theme="sleek"] .btn--primary,
html[data-theme="sleek"] .finder-btn.primary,
html[data-theme="sleek"] .header-search-button,
html[data-theme="sleek"] .filter-button.active,
html[data-theme="crimson"] .btn--primary,
html[data-theme="crimson"] .finder-btn.primary,
html[data-theme="crimson"] .header-search-button,
html[data-theme="crimson"] .filter-button.active,
html[data-theme="classic"] .btn--primary,
html[data-theme="classic"] .finder-btn.primary,
html[data-theme="classic"] .header-search-button {
  background: var(--gradient-btn);
  box-shadow: var(--shadow-primary);
  color: var(--color-on-primary, #fff);
}

html[data-theme="nocturne"] .btn--primary,
html[data-theme="nocturne"] .finder-btn.primary,
html[data-theme="nocturne"] .header-search-button,
html[data-theme="nocturne"] .filter-button.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: none;
  border-radius: 8px;
}

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
  .market-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
  }

  .market-strip--hero {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 4px;
    margin: 8px 12px 0;
    padding: 0;
    max-width: none;
    overflow: visible;
  }

  .market-strip--hero .market-chip {
    padding: 2px 7px;
  }

  .market-strip--hero .market-stat-label {
    font-size: 0.72rem;
  }

  .market-strip--hero .market-stat-sub {
    font-size: 0.68rem;
  }

  .market-strip--hero .market-stat-value {
    font-size: 0.86rem;
  }

  .finder-intro-text {
    color: rgba(255, 255, 255, 0.86);
    text-shadow: none;
  }

  .finder-kicker {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .preset-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .preset-row::-webkit-scrollbar { display: none; }

  .preset-chip {
    flex: 0 0 auto;
  }

  .fuel-trip-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .fuel-trip-card--compact .fuel-trip-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .brand-showcase {
    grid-template-columns: 96px 1fr;
    text-align: left;
    justify-items: stretch;
    padding: 20px 18px;
    gap: 16px;
  }

  .brand-showcase--with-note {
    grid-template-columns: 96px 1fr;
  }

  .brand-showcase-note {
    grid-column: 1 / -1;
  }

  .brand-showcase-logo {
    width: 96px;
    height: 96px;
  }

  /* One full-width card per row instead of a hidden-scroll carousel. */
  .premium-brands-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px !important;
    padding: 10px !important;
    max-width: 100%;
    overflow: visible;
  }

  .premium-brands-grid .brand-card.premium {
    width: 100%;
    animation: none;
  }

  .premium-brands-grid .brand-card.premium::before {
    animation-duration: 18s;
  }

  .premium-brands-grid .brand-card.premium .brand-card-image {
    height: 150px;
    padding: 4px;
  }

  .premium-brands-grid .brand-card.premium .brand-card-image img {
    padding: 16px;
  }

  .brand-card-premium-star {
    top: 8px;
    right: 10px;
    font-size: 22px;
  }

  .section-kicker {
    font-size: 16px;
  }

  .featured-generations-section {
    max-width: 100%;
    overflow: hidden;
  }

  .featured-generations-grid {
    display: flex !important;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: none;
    overscroll-behavior-x: contain;
    gap: 12px !important;
    padding: 4px 4px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .featured-generations-grid::-webkit-scrollbar { display: none; }

  .featured-generation-card {
    flex: 0 0 min(78vw, 280px);
    scroll-snap-align: none;
  }

  .model-card,
  .variant-card,
  .fuel-city-card {
    transition: transform 0.18s var(--ease-out);
  }

  .model-card:active,
  .variant-card:active,
  .fuel-city-card:active,
  .featured-generation-card:active {
    transform: scale(0.98);
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 0;
  }

  .site-footer {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .mobile-dock {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 900;
    background: var(--gradient-header);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(16px);
    padding: 6px;
    animation: dock-in 0.4s var(--ease-out);
  }

  body.header-menu-open .mobile-dock {
    z-index: 1210;
  }

  .mobile-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    border-radius: 16px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    padding: 0;
  }

  .mobile-dock-item svg,
  .mobile-dock-menu-toggle .header-menu-bars {
    width: 20px;
    height: 20px;
  }

  .mobile-dock-item.is-active,
  .mobile-dock-menu-toggle.is-open {
    background: var(--color-primary-muted);
    color: var(--color-primary);
  }

  .compare-bar {
    bottom: calc(var(--dock-height) + 16px + env(safe-area-inset-bottom));
  }

  .header-search-form .search-field-icon {
    left: 12px;
    width: 16px;
    height: 16px;
  }

  .header-search-input {
    padding-left: 34px;
    font-size: 0.78rem;
  }

  .header-container {
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }

  /* Logo left + search filling the right (menu is in the mobile dock). */
  .header-logo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2;
    max-width: none;
    text-align: left;
    pointer-events: auto;
    flex: 0 0 auto;
  }

  .header-logo a {
    pointer-events: auto;
  }

  .header-search-form {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    margin-left: 0;
    min-width: 0;
    padding-top: 0;
    border-top: none;
    box-shadow: none;
  }

  .header-search-input {
    font-size: 0.86rem;
  }
}

@media (min-width: 1025px) {
  .header-search-input {
    height: 46px;
    min-height: 46px;
    border-radius: var(--search-radius);
    padding-left: 44px;
  }

  .header-search-button {
    min-height: 46px;
    border-radius: var(--search-radius);
  }
}

@media (max-width: 520px) {
  .fuel-trip-grid,
  .fuel-trip-card--compact .fuel-trip-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .market-strip {
    gap: 10px;
  }

  .market-stat-value {
    font-size: 1.15rem;
  }

  .brand-showcase {
    grid-template-columns: 72px 1fr;
    padding: 16px 14px;
    gap: 12px;
  }

  .brand-showcase-logo {
    width: 72px;
    height: 72px;
  }

  .results-hero {
    align-items: flex-start;
  }
}

@media (hover: none) {
  .card-shine::after {
    display: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .chassis-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chassis-filter-row::-webkit-scrollbar { display: none; }
  .chassis-filter-row .filter-button {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-shine:hover::after,
  .header-menu-open .header-mobile-link,
  .mobile-dock,
  .sr-appear,
  .premium-brands-grid,
  .premium-brands-grid .brand-card.premium,
  .premium-brands-grid .brand-card.premium::before {
    animation: none !important;
  }
}

/* search.css */
.search-section {
    display: flex;
    background: var(--color-surface);
    border-radius: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    margin: 0;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 999;
}

.search-form {
    display: flex;
    flex-grow: 1;
    gap: 10px;
    margin: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.search-input {
    flex-grow: 1;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 16px;
    min-height: 44px;
}

.search-input::placeholder {
    font-size: 16px;
    color: #999;
}

.search-button {
    padding: 10px 20px;
    background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
    color: white;
    border: 1px solid rgba(213, 186, 122, 0.45);
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    min-height: 44px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.24);
}

.search-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.28);
}

.search-button:active {
    transform: translateY(0);
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .search-section {
        position: static;
        top: auto;
        margin: 20px 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    .search-form {
        gap: 10px;
        margin: 0;
    }

    .search-input,
    .search-button {
        font-size: 15px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .search-section {
        margin: 16px 12px;
        border-radius: 6px;
        padding: 10px 12px;
    }

    .search-form {
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    .search-button,
    .search-input {
        width: 100%;
        min-height: 46px;
        font-size: 15px;
        padding: 12px 14px;
        border-radius: 6px;
    }

    .search-input {
        border: 1px solid #ddd;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .search-section {
        margin: 12px 10px;
        border-radius: 6px;
        padding: 8px 10px;
    }

    .search-form {
        gap: 8px;
        margin: 0;
    }

    .search-button,
    .search-input {
        width: 100%;
        min-height: 44px;
        font-size: 14px;
        padding: 11px 12px;
    }

    .search-input::placeholder {
        font-size: 14px;
    }
}

/* brand-cards.css */
.brands-section {
  padding: 0px 20px;
  background: none;
  background-image: none;
  position: relative;
  overflow: hidden;
}

.brands-section::before {
  content: none;
  display: none;
}

.brands-section > * {
  position: relative;
  z-index: 1;
}

.brands-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.brands-section-header h2 {
  font-size: 32px;
  color: var(--color-heading);
  margin: 0;
  font-weight: 600;
}

@keyframes premium-grid-glow {
  0%, 100% {
    box-shadow: var(--shadow-elevated), 0 0 18px rgba(185, 152, 88, 0.22);
  }
  50% {
    box-shadow: var(--shadow-elevated), 0 0 34px rgba(212, 175, 55, 0.42);
  }
}

@keyframes premium-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes premium-card-glow {
  0%, 100% {
    box-shadow:
      0 10px 24px rgba(var(--color-primary-rgb), 0.16),
      0 0 22px rgba(212, 175, 55, 0.28);
  }
  50% {
    box-shadow:
      0 12px 28px rgba(var(--color-primary-rgb), 0.22),
      0 0 34px rgba(212, 175, 55, 0.44);
  }
}

/* Premium brands grid - larger cards */
.premium-brands-grid > .section-kicker {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0 auto 10px;
}

.premium-brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1582px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 12px;
  background: var(--gradient-premium-grid);
  border: 1px solid rgba(185, 152, 88, 0.35);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(2px);
}

/* First row in "Svi brendovi": three premium partners, larger cards */
.catalog-premium-lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto 22px;
  padding: 0 20px;
}

.catalog-premium-lead .brand-card.is-catalog-lead .brand-card-image {
  height: 148px;
  padding: 14px;
}

.catalog-premium-lead .brand-card.is-catalog-lead {
  border-width: 1.5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* Non-premium brands grid - smaller cards, middle width */
.non-premium-brands-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Premium brand cards - larger, with a live gold ring instead of a flat border */
.brand-card.premium {
  position: relative;
  isolation: isolate;
  border: none;
  padding: 2px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(245, 211, 122, 0.9), rgba(var(--color-primary-rgb), 0.55));
  box-shadow:
    0 14px 34px rgba(var(--color-primary-rgb), 0.2),
    0 0 26px rgba(212, 175, 55, 0.32);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: premium-card-glow 3.4s ease-in-out infinite;
}

.premium-brands-grid .brand-card.premium::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    #f7e2a3 0%,
    #d4af37 14%,
    var(--color-primary) 32%,
    #f5d37a 52%,
    #b98858 74%,
    #f7e2a3 100%
  );
  animation: premium-ring-spin 9s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes premium-ring-spin {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

.premium-brands-grid {
  animation: premium-grid-glow 4.5s ease-in-out infinite;
}

.brand-card.premium:hover {
  transform: translateY(-10px) scale(1.025);
  box-shadow:
    0 22px 46px rgba(var(--color-primary-rgb), 0.28),
    0 0 44px rgba(212, 175, 55, 0.55);
}

.brand-card.premium:hover::before {
  animation-duration: 3.2s;
}

.brand-card.premium .brand-card-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 200px;
  flex: 1 1 auto;
  border-radius: 16px;
  object-fit: contain;
  background-color: var(--color-surface-well);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-card.premium .brand-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(245, 211, 122, 0.16) 0%,
    transparent 45%,
    rgba(var(--color-primary-rgb), 0.1) 100%
  );
}

.brand-card.premium .brand-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  padding: 20px;
  transition: transform 0.4s var(--ease-out, ease);
}

.brand-card.premium:hover .brand-card-image img {
  transform: scale(1.06);
}

.brand-card-premium-star {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  font-size: 26px;
  line-height: 1;
  color: #ffd700;
  text-shadow:
    0 0 6px rgba(212, 175, 55, 0.85),
    0 1px 3px rgba(15, 23, 42, 0.35);
  pointer-events: none;
}

.brand-card.premium .brand-card-content {
  display: none;
}

.brand-card.premium .brand-card-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Non-premium brand cards - smaller */
.brand-card.non-premium {
  background-color: var(--color-surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.brand-card.non-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(var(--color-primary-rgb), 0.15);
}

.brand-card.non-premium .brand-card-image {
  width: 100%;
  height: 100px;
  object-fit: contain;
  background-color: var(--color-surface-well);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

.brand-card.non-premium .brand-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.brand-card.non-premium .brand-card-content {
  display: none;
}

.brand-card.non-premium .brand-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}

/* Premium brands inside "Svi brendovi" — quiet gold edge, star inside the card */
.brand-card.non-premium.is-premium-all {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(185, 152, 88, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.brand-card.non-premium.is-premium-all .brand-card-image {
  overflow: hidden;
  border-radius: 8px;
}

.brand-card.non-premium.is-premium-all:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  border-color: rgba(185, 152, 88, 0.85);
}

.brand-card.non-premium.is-premium-all.card-shine::after {
  content: none;
  display: none;
  animation: none;
  transform: none;
  background: none;
}

.brand-card.non-premium.is-premium-all::before {
  content: "★";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 16px;
  line-height: 1;
  color: #d4af37;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* Featured generations — same card size as /search, premium treatment */
.featured-generations-section {
  padding: 40px 20px;
  background: none;
  background-image: none;
}

.featured-generations-section.featured-generations-section--model {
  max-width: 1400px;
  margin: 40px auto 0;
  padding: 28px 20px 8px;
  background: transparent;
}

.featured-generations-header {
  text-align: center;
  margin-bottom: 28px;
}

.featured-generations-header h2 {
  font-size: 32px;
  color: var(--color-text);
  margin: 0;
  font-weight: 600;
}

.featured-generations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}

.featured-generation-card {
  position: relative;
  background: var(--gradient-card-premium, var(--color-surface));
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(185, 152, 88, 0.7);
  box-shadow: 0 8px 20px rgba(185, 152, 88, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
}

.featured-generation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c9a227, #f0d78c, #c9a227);
  z-index: 2;
}

.featured-generation-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(185, 152, 88, 0.38);
}

.featured-generation-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  background: var(--color-surface-section);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.featured-generation-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.featured-generation-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.featured-premium-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6a1f;
  background: linear-gradient(135deg, rgba(245, 211, 122, 0.55), rgba(212, 175, 55, 0.28));
  border: 1px solid rgba(185, 152, 88, 0.55);
}

.featured-premium-chip--sale {
  color: #166534;
  background: linear-gradient(135deg, rgba(187, 247, 208, 0.95), rgba(74, 222, 128, 0.35));
  border: 1px solid rgba(22, 101, 52, 0.35);
}

html:not([data-color-mode="dark"]) .featured-premium-chip,
html:not([data-color-mode="dark"]) .featured-generation-thumb .featured-premium-chip {
  color: #8a6a1f;
}

.featured-generation-thumb .featured-premium-chip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  min-height: 0;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #5d480f;
  background: linear-gradient(135deg, #f3dfa3 0%, #ddc07a 100%);
  border: 1px solid rgba(128, 96, 26, 0.32);
}

html:not([data-color-mode="dark"]) .featured-generation-thumb .featured-premium-chip {
  color: #5d480f;
}

.featured-generation-name {
  font-size: 16px;
  margin: 0;
  color: var(--color-heading, var(--color-text));
  font-weight: 700;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-generation-model {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  min-height: 1.4em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-generation-body .price-from {
  margin-top: auto;
}

.featured-price-was {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: line-through;
}

/* Responsive for featured generations - Tablet (1024px and below) */
@media (max-width: 1024px) {
  .featured-generations-header h2 {
    font-size: 28px;
  }

  .featured-generations-grid {
    gap: 16px;
  }

  .featured-generation-card {
    border-radius: 14px;
  }

  .featured-generation-thumb {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .featured-generation-body {
    padding: 12px;
  }

  .featured-generation-name {
    font-size: 15px;
  }

  .featured-generation-model {
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  .featured-generations-header h2 {
    font-size: 26px;
  }
}

/* Mobile - Medium screens (768px and below) */
@media (max-width: 768px) {
  .brands-section {
    padding: 30px 10px;
  }

  .brands-section--all {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 36px;
  }

  .brands-section-header {
    margin-bottom: 30px;
  }

  .brands-section-header h2 {
    font-size: 26px;
  }

  .premium-brands-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
    padding: 12px;
  }

  .brand-card.premium {
    border-radius: 16px;
  }

  .brand-card.premium .brand-card-image {
    height: 210px;
    padding: 4px;
    border-radius: 14px;
  }

  .brand-card.premium .brand-card-image img {
    padding: 8px;
    width: 100%;
    max-height: 100%;
  }

  .brand-card.premium .brand-card-name {
    font-size: 20px;
  }

  .brand-card.premium .brand-card-content {
    padding: 14px;
  }

  .catalog-premium-lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 100%;
    margin: 0 auto 14px;
    padding: 0 4px;
    width: 100%;
  }

  .catalog-premium-lead .brand-card.is-catalog-lead {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
  }

  .catalog-premium-lead .brand-card.is-catalog-lead .brand-card-image {
    height: 100%;
    flex: 1 1 auto;
    padding: 12px;
    aspect-ratio: 1 / 1;
  }

  .non-premium-brands-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 100%;
    padding: 0 4px;
    width: 100%;
  }

  .brands-section--all .non-premium-brands-grid {
    padding: 0 4px 24px;
    max-width: 100%;
  }

  .brand-card.non-premium {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
  }

  .brand-card.non-premium .brand-card-image {
    height: 100%;
    flex: 1 1 auto;
    padding: 8px;
    aspect-ratio: 1 / 1;
  }

  .brand-card.non-premium .brand-card-image img {
    padding: 2px;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }

  .brand-card.non-premium .brand-card-name {
    font-size: 15px;
  }

  .featured-generations-section {
    padding: 30px 15px;
  }

  .featured-generations-header {
    margin-bottom: 30px;
  }

  .featured-generations-header h2 {
    font-size: 24px;
  }

  .featured-generations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 100%;
  }

  .featured-generation-card {
    border-radius: 12px;
    border: 1px solid rgba(185, 152, 88, 0.7);
  }

  .featured-generation-thumb {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .featured-generation-body {
    padding: 12px;
  }

  .featured-generation-name {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .featured-generation-model {
    font-size: 14px;
  }
}

/* Mobile - Small screens (480px and below) */
@media (max-width: 480px) {
  .brands-section {
    padding: 22px 12px;
  }

  .brands-section-header {
    margin-bottom: 24px;
  }

  .brands-section-header h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  /* Premium brands - full width logos */
  .premium-brands-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
    padding: 8px;
    margin: 0 auto;
  }

  .brand-card.premium {
    border-radius: 14px;
    overflow: hidden;
  }

  .brand-card.premium:hover {
    transform: translateY(-4px);
  }

  .brand-card.premium .brand-card-image {
    height: 190px;
    padding: 4px;
    border-radius: 12px;
  }

  .brand-card.premium .brand-card-name {
    font-size: 18px;
  }

  .brand-card.premium .brand-card-content {
    padding: 12px;
  }

  .catalog-premium-lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
    margin: 0 auto 12px;
    padding: 0 2px;
    width: 100%;
  }

  /* Non-premium: 3 cols, square cards, fuller width */
  .non-premium-brands-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
    padding: 0 2px;
    width: 100%;
  }

  .brands-section--all .non-premium-brands-grid {
    padding: 0 2px 20px;
    max-width: 100%;
  }

  .brands-section--all {
    padding-left: 10px;
    padding-right: 10px;
  }

  .brand-card.non-premium {
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
  }

  .brand-card.non-premium .brand-card-image {
    height: 100%;
    flex: 1 1 auto;
    padding: 6px;
    aspect-ratio: 1 / 1;
  }

  .brand-card.non-premium .brand-card-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }

  .brand-card.non-premium .brand-card-name {
    font-size: 13px;
  }

  .brand-card.non-premium .brand-card-content {
    padding: 6px;
  }

  .featured-generations-section {
    padding: 24px 12px;
  }

  .featured-generations-header {
    margin-bottom: 20px;
  }

  .featured-generations-header h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  /* Featured generations - stacked vertically */
  .featured-generations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 100%;
  }

  .featured-generation-card {
    border-radius: 12px;
    border: 1px solid rgba(185, 152, 88, 0.7);
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
  }

  .featured-generation-card:hover {
    transform: translateY(-2px);
  }

  .featured-generation-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 12px 12px 0 0;
  }

  .featured-generation-thumb img {
    object-fit: cover;
    object-position: center 40%;
  }

  .featured-generation-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .featured-generation-name {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 600;
  }

  .featured-generation-model {
    font-size: 12px;
    color: var(--color-text-muted);
  }
}

/* Dark mode — brand logos on white (landing page grids) */
html[data-color-mode="dark"] .brand-card.premium .brand-card-image,
html[data-color-mode="dark"] .brand-card.non-premium .brand-card-image {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* car-finder.css */
.finder-section {
  min-height: auto;
  padding: 18px 0 8px 0;
  position: relative;
  background-image: url('/images/News/tucson-test.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.finder-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 46, 0.38) 0%, rgba(10, 18, 46, 0.12) 55%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

@media (max-width: 880px) {
  .finder-section {
    min-height: auto;
    padding: 16px 0 12px;
    display: flex;
    flex-direction: column;
    background-image: none;
  }

  .finder-section::before {
    display: none;
  }

  .finder-section.has-hero-image:not(.has-background-slideshow) {
    background-image: var(--finder-hero-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .finder-section.has-hero-image:not(.has-background-slideshow)::before {
    display: block;
  }
}

.finder-container {
  max-width: 760px;
  margin: 0 0 0 8vw;
  padding: 0 16px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 880px) {
  .finder-section {
    overflow-x: clip;
  }

  .finder-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .finder-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
}

.finder-card {
  width: 500px;
  max-width: 700px;
  background: var(--gradient-finder-card);
  border-radius: 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.16);
  padding: 32px 32px 28px;
}

.finder-intro {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 0 14px 8vw;
  padding: 22px 24px 20px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
  color: #fff;
}

.finder-intro-title {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.finder-card-tagline {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.finder-intro-text {
  margin: 10px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.finder-badge {
  display: none;
}

.finder-card-heading {
  margin: 0 0 8px 0;
  font-size: 22px;
  line-height: 1.15;
  color: var(--color-heading);
}

.finder-title {
  margin: 0 0 10px 0;
  font-size: 34px;
  line-height: 1.05;
  color: var(--color-heading);
}

.finder-unified-search {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.finder-search-input {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border: 1.5px solid rgba(148, 163, 184, 0.55);
  border-radius: 18px;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  color: #0f172a;
  background: #ffffff;
  caret-color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.finder-search-input::placeholder {
  color: rgba(100, 116, 139, 0.9);
}

.finder-search-input:focus {
  border-color: rgba(var(--color-primary-rgb), 0.65);
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(var(--color-primary-rgb), 0.18),
    0 0 18px rgba(var(--color-primary-rgb), 0.2);
}

.finder-search-input:hover {
  border-color: rgba(148, 163, 184, 0.85);
}

.finder-search-btn {
  background: var(--gradient-btn);
  color: var(--color-on-primary, #fff);
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 14px 28px;
  border-radius: 18px;
  transition: all 0.3s ease;
  font-weight: 600;
  white-space: nowrap;
  min-width: 120px;
}

.finder-search-btn:hover {
  box-shadow: var(--shadow-primary);
  transform: translateY(-2px);
}

.finder-search-btn:active {
  transform: translateY(0);
}

.finder-divider-text {
  font-weight: 700;
  color: var(--color-heading);
  text-align: center;
  margin: 18px 0 16px 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.finder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.finder-price-box {
  grid-column: 1 / -1;
  padding: 10px 12px 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
}

.finder-price-box-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-heading);
}

.finder-price-box-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.finder-advanced-panel .finder-field .ac-select,
.finder-advanced-panel .finder-field .ac-select-trigger {
  width: 100%;
}

.finder-advanced-panel .finder-toggle-row--desktop {
  justify-content: stretch;
}

.finder-advanced-panel .toggle-filters-btn,
.finder-advanced-panel .finder-actions .finder-btn.primary {
  width: 100%;
  flex: 1 1 auto;
}

@media (max-width: 700px) {
  .finder-grid {
    grid-template-columns: 1fr;
  }
}

.finder-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.finder-field input,
.finder-field select {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 18px;
  outline: none;
  background-color: var(--color-surface-input);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.finder-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #475569 50%), linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.finder-field input:focus,
.finder-field select:focus {
  border-color: #1f2937;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.14);
}

.finder-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.finder-field.full {
  grid-column: 1 / -1;
}

.finder-extra-filters.hidden {
  display: none;
}

.finder-advanced-panel {
  display: block;
}

@media (min-width: 881px) {
  .finder-card:not(.finder-expanded) .finder-divider-text,
  .finder-card:not(.finder-expanded) .finder-grid,
  .finder-card:not(.finder-expanded) .finder-extra-filters {
    display: none;
  }

  .finder-card.finder-expanded .finder-extra-filters.hidden {
    display: block;
  }
}

#searchForm {
  display: flex;
  flex-direction: column;
}

.finder-toggle-row {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

.finder-toggle-row--desktop {
  display: flex;
  margin-top: 16px;
}

.finder-toggle-row--mobile {
  display: none;
}

.finder-toggle-row--mobile.finder-toggle-row--close {
  display: none;
}

@media (max-width: 880px) {
  .finder-card {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  }

  .finder-intro {
    order: 0;
    margin: 0 12px 12px;
    padding: 18px 18px 16px;
    max-width: none;
    width: auto;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .finder-intro-title {
    font-size: 22px;
    color: #fff;
    background: none;
    box-shadow: none;
    text-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .finder-card-tagline {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .finder-card-heading {
    display: none;
  }

  .finder-unified-search {
    margin-bottom: 0;
  }

  .finder-search-input {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .finder-toggle-row--desktop {
    display: none;
  }

  .finder-toggle-row--mobile.finder-toggle-row--open {
    display: flex;
    margin-top: 10px;
    margin-bottom: 4px;
    justify-content: center;
  }

  .finder-card.finder-expanded .finder-toggle-row--mobile.finder-toggle-row--open {
    display: none;
  }

  .finder-toggle-row--mobile.finder-toggle-row--close {
    display: none;
    margin-top: 14px;
    justify-content: center;
  }

  .finder-card.finder-expanded .finder-toggle-row--mobile.finder-toggle-row--close {
    display: flex;
    margin-top: auto;
    padding-top: 14px;
  }

  .finder-advanced-panel {
    display: none;
  }

  .finder-card.finder-expanded .finder-advanced-panel {
    display: block;
    margin-top: 14px;
  }

  .finder-card.finder-expanded .finder-extra-filters.hidden {
    display: block;
  }

  .finder-card.finder-expanded .finder-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .finder-card.finder-expanded .finder-field input,
  .finder-card.finder-expanded .finder-field select {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 12px;
  }

  .finder-card.finder-expanded .finder-field label {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .finder-card.finder-expanded .finder-divider-text {
    margin-top: 4px;
    font-size: 12px;
  }

  .finder-card.finder-expanded .finder-actions {
    margin-top: 16px;
  }

  .toggle-filters-btn {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    background: var(--color-surface-section);
    color: var(--color-text);
    border: 1px solid rgba(148, 163, 184, 0.35);
  }

  .toggle-filters-btn:hover {
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  }

  .finder-toggle-row {
    margin-top: 10px;
    justify-content: center;
  }

  .background-slideshow {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    z-index: 0 !important;
    order: 2;
    margin-top: 12px;
    flex-shrink: 0;
  }

  .finder-container {
    order: 1;
    width: 100%;
    padding: 0 12px;
  }
}

.toggle-filters-btn {
  border-radius: 999px;
  padding: 14px 24px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.toggle-filters-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.28);
}

.finder-actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: stretch;
}

.finder-toggle-row--desktop {
  margin-top: 18px;
  margin-bottom: 0;
}

.finder-btn {
  border-radius: 999px;
  padding: 14px 24px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.finder-btn.primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(var(--color-primary-rgb), 0.24);
  flex: 1 1 220px;
}

.finder-btn.secondary {
  background: var(--color-surface-section);
  color: var(--color-heading);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  flex: 1 1 120px;
  display: none;
}

.finder-btn:hover {
  transform: translateY(-1px);
}

.finder-btn.primary:hover {
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.28);
}

.finder-btn.secondary:hover {
  box-shadow: 0 12px 20px rgba(185, 152, 88, 0.38);
}

/* Background slideshow */
.finder-section.has-background-slideshow {
  background-image: url('/images/News/tucson-test.jpg');
}

.background-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

@media (hover: hover) and (pointer: fine) {
  .background-slideshow {
    cursor: grab;
  }

  .background-slideshow.is-dragging,
  .finder-section.has-background-slideshow.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }

  .finder-section.has-background-slideshow {
    cursor: grab;
  }

  .finder-section.has-background-slideshow input,
  .finder-section.has-background-slideshow select,
  .finder-section.has-background-slideshow textarea,
  .finder-section.has-background-slideshow button,
  .finder-section.has-background-slideshow a,
  .finder-section.has-background-slideshow label {
    cursor: auto;
  }
}

.background-slideshow-track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
}

.background-slideshow-track.is-animating {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.background-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.background-slide-link,
.background-slide-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.background-slide-link img,
.background-slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a2744;
}

.background-slide-cta {
  position: absolute;
  right: 20px;
  left: auto;
  bottom: 46px;
  transform: none;
  max-width: calc(100% - 40px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.background-slide-link:hover .background-slide-cta,
.background-slide-link:focus-visible .background-slide-cta {
  background: rgba(var(--color-primary-rgb), 0.92);
}

.background-slide-link::after {
  content: "↗";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-heading);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.background-slide.is-active.has-link .background-slide-link::after {
  opacity: 1;
  transform: scale(1);
}

.slideshow-controls {
  display: none;
}

.slideshow-controls--desktop {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 10;
  pointer-events: none;
}

@media (min-width: 881px) {
  .slideshow-controls--desktop {
    display: flex;
  }

  .finder-section.has-background-slideshow .background-slideshow {
    z-index: 0;
  }
}

.slideshow-nav-btn {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  opacity: 0.5;
}

.slideshow-nav-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.slideshow-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.slideshow-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  position: relative;
}

.slideshow-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.slideshow-dot.is-active {
  background: transparent;
}

.slideshow-dot.is-active::after {
  background: rgba(255, 255, 255, 1);
}

@media (max-width: 880px) {
  .finder-section.has-background-slideshow {
    background-image: none;
    background-color: #dfe5ee;
  }

  .slideshow-controls,
  .slideshow-controls--desktop,
  .slideshow-nav-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .background-slide-cta {
    top: auto;
    bottom: 24px;
    right: 8px;
    left: auto;
    transform: none;
    font-size: 14px;
    padding: 6px 12px;
    max-width: calc(100% - 16px);
  }

  .background-slide-link::after {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .slideshow-dots {
    bottom: 8px;
    gap: 4px;
  }

  .slideshow-dot {
    width: 44px;
    height: 44px;
  }

  .slideshow-dot::after {
    width: 8px;
    height: 8px;
  }
}

/* home.css */
.premium-finder-cta-wrap {
  max-width: 1200px;
  margin: 14px auto 0 auto;
  padding: 0 10px;
}

.premium-finder-cta {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: var(--gradient-panel);
  border-radius: 14px;
  padding: 18px 18px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-elevated);
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.premium-finder-cta::before {
  content: "?";
  position: absolute;
  right: 14px;
  top: -18px;
  font-size: 140px;
  line-height: 1;
  font-weight: 800;
  color: rgba(30, 64, 175, 0.10);
  z-index: -1;
  transform: rotate(10deg);
  pointer-events: none;
}

.premium-finder-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.55) 30%, rgba(255,255,255,0.0) 60%);
  transform: translateX(-120%);
  transition: transform 520ms ease;
  z-index: -1;
  pointer-events: none;
}

.premium-finder-cta-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.35;
}

.premium-finder-cta-subtitle {
  margin-top: 6px;
  color: var(--color-text);
  font-size: 13px;
}

.premium-finder-cta:hover {
  border-color: rgba(30, 64, 175, 0.22);
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.14),
    0 2px 0 rgba(255,255,255,0.85) inset;
}

.premium-finder-cta:hover::after {
  transform: translateX(120%);
}

.premium-finder-cta:active {
  transform: translateY(0px);
  box-shadow:
    0 10px 18px rgba(0,0,0,0.12),
    0 2px 0 rgba(255,255,255,0.85) inset;
}

@media (max-width: 768px) {
  .premium-finder-cta {
    border-radius: 12px;
    padding: 16px 14px;
  }

  .premium-finder-cta::before {
    font-size: 120px;
    top: -14px;
  }

  .premium-finder-cta-title {
    font-size: 16px;
  }
}

/* fuel-prices.css */
.fuel-page {
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  padding: 28px 24px 48px;
}

.fuel-hero {
  text-align: center;
  margin-bottom: 28px;
}

.fuel-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--color-heading);
}

.fuel-hero p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.fuel-meta {
  margin-top: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.fuel-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-surface-section);
  border: 1px solid #e2e8f0;
  color: var(--color-text);
  font-size: 0.92rem;
}

.fuel-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.fuel-tabs {
  margin-bottom: 20px;
}

.fuel-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}

.fuel-tab {
  padding: 11px 16px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.fuel-tab:hover {
  color: var(--color-heading);
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.fuel-tab.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary, 0 8px 20px rgba(var(--color-primary-rgb), 0.25));
}

.fuel-tab-panel {
  margin-bottom: 0;
}

.fuel-tab-panel[hidden] {
  display: none !important;
}

.fuel-summary-card {
  border-radius: 16px;
  padding: 18px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fuel-summary-card--diesel { background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); }
.fuel-summary-card--super95 { background: linear-gradient(135deg, #0f766e 0%, #115e59 100%); }
.fuel-summary-card--super98 { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); }
.fuel-summary-card--lpg { background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%); }

.fuel-summary-label {
  font-size: 0.95rem;
  opacity: 0.92;
}

.fuel-summary-price {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 8px 0;
}

.fuel-summary-sub {
  font-size: 0.88rem;
  opacity: 0.92;
  line-height: 1.45;
}

.fuel-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.fuel-search {
  flex: 1 1 260px;
  max-width: 420px;
  position: relative;
}

.fuel-search input,
.fuel-sort select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  font-size: 0.95rem;
  background: var(--color-surface);
  box-sizing: border-box;
}

#fuelCitySearch {
  padding-left: 44px;
}

.fuel-search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid #dbe3ee;
  background: var(--color-surface);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.fuel-search-suggest[hidden] {
  display: none;
}

.fuel-search-option,
.fuel-search-empty {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  border-radius: 10px;
  padding: 8px 10px;
}

.fuel-search-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.fuel-search-option span {
  font-weight: 700;
}

.fuel-search-option small,
.fuel-search-empty {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.fuel-search-option:hover,
.fuel-search-option:focus {
  background: rgba(var(--color-primary-rgb), 0.08);
}

.fuel-compare-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.fuel-compare-pick input {
  width: 16px;
  height: 16px;
}

#fuelCompareBtn {
  flex: 0 0 auto;
  min-height: 46px;
}

.fuel-compare {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: var(--color-surface);
}

.fuel-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.fuel-compare-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.fuel-compare-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}

.fuel-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.fuel-compare-card h3 {
  margin: 0 0 8px;
}

.fuel-compare-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.fuel-compare-card th,
.fuel-compare-card td {
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.fuel-compare-hint {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-surface-section, #f8fafc);
  border: 1px dashed #cbd5e1;
  color: var(--color-text-muted, #64748b);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.fuel-compare-card tr.is-cheapest-fuel td {
  color: #166534;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.1);
}

.fuel-compare-best {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #166534;
  background: rgba(34, 197, 94, 0.18);
}

.fuel-map-page .chargers-sidebar {
  min-height: 320px;
}

.fuel-map-page .chargers-list-outer,
.fuel-map-page .chargers-list-wrap,
.fuel-map-page .chargers-station-list {
  min-height: 220px;
}

.fuel-map-page .chargers-station-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(46vh, 420px);
  overflow-y: auto !important;
}

.fuel-sort {
  min-width: 220px;
}

.fuel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fuel-city-card {
  background: var(--color-surface);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fuel-city-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.fuel-city-card.is-cheapest {
  border-color: #86efac;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 10px 24px rgba(34, 197, 94, 0.12);
}

.fuel-city-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.fuel-city-heading {
  min-width: 0;
  flex: 1;
}

.fuel-city-name {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--color-heading);
  line-height: 1.25;
}

.fuel-city-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.fuel-price-list {
  display: grid;
  gap: 10px;
}

.fuel-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface-section);
  border: 1px solid transparent;
}

.fuel-price-row.is-best {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.fuel-price-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.fuel-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fuel-type-dot--diesel { background: #3b82f6; }
.fuel-type-dot--super95 { background: #14b8a6; }
.fuel-type-dot--super98 { background: var(--color-primary); }
.fuel-type-dot--lpg { background: #f97316; }

.fuel-price-value {
  font-weight: 700;
  color: var(--color-heading);
  font-size: 0.98rem;
}

.fuel-price-value.is-missing {
  color: #94a3b8;
  font-weight: 500;
}

.fuel-city-card.is-paginated-hidden,
.fuel-city-grid:not(.is-paged) > .fuel-city-card:nth-child(n + 13) {
  display: none !important;
}

.btn-show-more-wrap {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 8px 4px;
}

.btn-show-less {
  flex: 0 1 200px;
}

.btn-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  margin: 8px auto 0;
  padding: 13px 20px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-heading);
  background: var(--color-surface);
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-show-more:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.12);
}

.btn-show-more[hidden] {
  display: none !important;
}

.utility-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0 14px;
  min-height: 40px;
  line-height: 1;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  background: var(--color-primary-light);
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.utility-page-link::after {
  content: '→';
}

.utility-page-link:hover {
  border-color: var(--color-primary);
  transform: translateX(2px);
  color: var(--color-primary-hover);
}

/* Homepage fuel ticker */
.fuel-ticker-bar {
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.fuel-ticker-inner {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
  padding: 10px clamp(16px, 3vw, 40px);
  font-size: 0.88rem;
  max-width: min(1680px, 96vw);
  margin: 0 auto;
}

.fuel-ticker-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}

.fuel-ticker-brand:hover {
  color: var(--color-primary);
}

.fuel-ticker-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.fuel-ticker-title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fuel-ticker-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: var(--color-primary);
  color: #fff;
}

.fuel-ticker-prices {
  display: flex;
  align-items: center;
  gap: 14px 18px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

.fuel-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.fuel-ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
  flex-shrink: 0;
}

.fuel-ticker-name {
  color: #94a3b8;
  font-size: 0.8rem;
}

.fuel-ticker-price {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}

.fuel-ticker-unit {
  color: #94a3b8;
  font-size: 0.72rem;
}

.fuel-ticker-updated {
  color: #94a3b8;
  font-size: 0.72rem;
  white-space: nowrap;
}

.fuel-ticker-link {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  flex-shrink: 0;
}

.fuel-ticker-link:hover {
  text-decoration: underline;
  color: #fff;
}

@media (max-width: 900px) {
  .fuel-ticker-updated {
    display: none;
  }
}

@media (max-width: 640px) {
  .fuel-ticker-inner {
    gap: 6px 8px;
    padding: 6px 10px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .fuel-ticker-brand {
    flex: 0 0 auto;
    min-width: 0;
    gap: 4px;
  }

  .fuel-ticker-title,
  .fuel-ticker-badge {
    display: none;
  }

  .fuel-ticker-icon {
    font-size: 0.95rem;
  }

  .fuel-ticker-link {
    flex: 0 0 auto;
    font-size: 0.72rem;
    margin-left: 0;
    white-space: nowrap;
  }

  .fuel-ticker-prices {
    flex: 1 1 auto;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fuel-ticker-prices::-webkit-scrollbar {
    display: none;
  }

  .fuel-ticker-item {
    gap: 3px;
    flex: 0 0 auto;
    justify-content: flex-start;
    min-width: 0;
  }

  .fuel-ticker-name,
  .fuel-ticker-unit {
    display: none;
  }

  .fuel-ticker-price {
    font-size: 0.82rem;
  }

  .fuel-ticker-dot {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 768px) {
  .fuel-ticker-bar {
    transition: max-height 0.24s ease, opacity 0.24s ease, border-width 0.24s ease;
    max-height: 44px;
    overflow: hidden;
  }

  html.site-chrome-hidden-mobile .fuel-ticker-bar {
    max-height: 0;
    opacity: 0;
    border-bottom-width: 0;
    pointer-events: none;
  }
}

.fuel-empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: var(--color-text-subtle);
  background: var(--color-surface-section);
}

.fuel-source-note {
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--color-surface-section);
  border: 1px solid #e2e8f0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.fuel-source-note a {
  color: #1d4ed8;
}

.fuel-no-results {
  display: none;
  text-align: center;
  color: var(--color-text-subtle);
  padding: 24px 0;
}

.fuel-no-results.is-visible {
  display: block;
}

.fuel-prices-embed {
  width: 100%;
  margin: 0;
  padding: 0;
}
.fuel-prices-first-row {
  display: flex;
  justify-content: space-between;
}
.fuel-prices-embed-header {
  margin-bottom: 20px;
}

.fuel-prices-embed-title {
  margin: 0 0 8px;
  font-size: 1.6rem;
  color: var(--color-heading);
}

.fuel-prices-embed-subtitle,
.fuel-prices-embed-meta {
  margin: 0;
  color: var(--color-text-muted);
}

.fuel-prices-embed-meta {
  margin-top: 8px;
  font-size: 0.92rem;
}

.fuel-summary-grid--compact {
  margin-bottom: 20px;
}

.fuel-summary-card--compact {
  min-height: 120px;
  padding: 14px;
}

.fuel-summary-card--compact .fuel-summary-price {
  font-size: 1.5rem;
}

.fuel-toolbar--compact {
  margin-bottom: 16px;
}

.fuel-grid--compact,
.fuel-grid.fuel-city-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fuel-empty--compact {
  padding: 28px 16px;
}

.fuel-no-results--compact {
  padding: 16px 0 0;
}

.home-utilities-section {
  width: 100%;
  max-width: none;
  margin: 56px 0 64px;
  padding: 0 clamp(16px, 3vw, 40px);
}

@media (max-width: 880px) {
  .fuel-prices-first-row {
    display: block;
    text-align: center;
  }

  .home-utilities-section {
    margin-bottom: 0;
  }

  .chargers-embed {
    margin-top: 20px;
  }
}

.home-utilities-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  align-items: stretch;
}

.home-cost-tools-section {
  width: 100%;
  max-width: none;
  margin: 0 0 64px;
  padding: 0 clamp(16px, 3vw, 40px);
}

.home-cost-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  align-items: center;
}

.home-cost-tools-grid .registration-estimate,
.home-cost-tools-grid .fuel-trip-card {
  height: auto;
  width: 100%;
  margin: 0;
  align-self: start;
}

@media (min-width: 1201px) {
  .home-cost-tools-grid .fuel-trip-card {
    align-self: center;
  }
}

.home-fuel-follow {
  max-width: min(1080px, 96vw);
  margin: 18px auto 0;
}

.home-fuel-follow .fuel-prices-embed--home {
  padding: 14px 16px;
}

.home-fuel-follow .fuel-prices-embed-header {
  margin-bottom: 10px;
}

.home-fuel-follow .fuel-deal-grid {
  margin-bottom: 0;
}

.home-utilities-grid .route-fuel,
.home-utilities-grid .chargers-embed--home {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  align-self: stretch;
}

@media (min-width: 981px) {
  .fuel-prices-embed.fuel-prices-embed--home {
    margin-bottom: 25px;
  }
}

.fuel-prices-embed--home,
.chargers-embed--home {
  background: var(--gradient-panel);
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

@media (max-width: 1200px) {
  .home-cost-tools-grid {
    grid-template-columns: 1fr;
  }

  .fuel-grid,
  .fuel-grid--compact,
  .fuel-grid.fuel-city-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  /* 96vw ignores the section's own padding and pushed the panels off-screen. */
  .home-utilities-grid,
  .home-cost-tools-grid,
  .home-fuel-follow {
    max-width: 100%;
  }

  .home-utilities-grid > *,
  .home-cost-tools-grid > * {
    min-width: 0;
  }

  .fuel-grid,
  .fuel-grid--compact,
  .fuel-grid.fuel-city-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .fuel-page {
    max-width: 100%;
    width: 100%;
    padding: 16px 12px 28px;
    overflow-x: clip;
    box-sizing: border-box;
  }

  .fuel-hero h1 {
    font-size: 1.55rem;
  }

  .fuel-hero p {
    font-size: 0.95rem;
  }

  .fuel-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .fuel-search,
  .fuel-sort,
  .fuel-search input,
  .fuel-sort select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .fuel-map-page {
    width: auto;
    max-width: none;
    margin-left: -12px;
    margin-right: -12px;
  }

  .fuel-toolbar {
    align-items: stretch;
  }

  .fuel-sort {
    width: 100%;
  }

  .fuel-grid,
  .fuel-grid--compact,
  .fuel-grid.fuel-city-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .fuel-city-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px;
  }

  .fuel-city-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
  }

  .fuel-city-name {
    font-size: 1.05rem;
    word-break: break-word;
  }

  .fuel-price-row {
    gap: 8px;
    padding: 10px;
  }

  .fuel-price-label {
    font-size: 0.84rem;
    min-width: 0;
  }

  .fuel-price-value {
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .fuel-city-pumps-link {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  /* Four fuel types as a 2×2 block instead of one very tall column. */
  .fuel-summary-grid,
  .fuel-summary-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }

  .fuel-summary-card,
  .fuel-summary-card--compact {
    min-height: 0;
    padding: 12px;
  }

  .fuel-summary-card .fuel-summary-price,
  .fuel-summary-card--compact .fuel-summary-price {
    font-size: 1.2rem;
  }

  .fuel-summary-sub {
    font-size: 0.76rem;
  }

  .fuel-tab-list {
    gap: 6px;
    padding-bottom: 10px;
  }

  .fuel-tab {
    flex: 1 1 auto;
    padding: 9px 8px;
    font-size: 0.78rem;
    text-align: center;
  }

  .fuel-prices-embed--home,
  .chargers-embed--home {
    padding: 14px 12px;
  }

  .fuel-prices-embed-title,
  .chargers-embed-title {
    font-size: 1.3rem;
  }
}

.fuel-market {
  margin: 8px 0 28px;
}

.fuel-board-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-heading);
}

.fuel-deal-grid,
.fuel-avg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.fuel-market,
.fuel-avg-block {
  font-family: var(--font-sans);
  color: var(--color-text);
}

.fuel-deal,
.fuel-avg {
  border-radius: 16px;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  padding: 14px 16px 16px;
}

.fuel-deal {
  border: 1px solid var(--color-border, #e2e8f0);
  border-top: 3px solid var(--fuel-accent, var(--color-primary));
  background: color-mix(in srgb, var(--fuel-accent, var(--color-primary)) 14%, var(--color-surface, #fff));
}

.fuel-deal--diesel,
.fuel-avg--diesel { --fuel-accent: #d4a017; }
.fuel-deal--super95,
.fuel-avg--super95,
.fuel-deal--benzin,
.fuel-avg--benzin { --fuel-accent: #3b82f6; }
.fuel-deal--super98,
.fuel-avg--super98 { --fuel-accent: #7c6cf0; }
.fuel-deal--lpg,
.fuel-avg--lpg,
.fuel-deal--plin,
.fuel-avg--plin { --fuel-accent: #22c55e; }

.fuel-avg {
  border: 1px solid var(--color-border, #e2e8f0);
  border-top: 3px solid var(--fuel-accent, var(--color-primary));
  background: color-mix(in srgb, var(--fuel-accent, var(--color-primary)) 16%, var(--color-surface, #fff));
}

.fuel-deal-top,
.fuel-avg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.fuel-avg-head {
  margin-top: 28px;
  align-items: center;
}

.fuel-deal-label,
.fuel-avg-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fuel-deal-price,
.fuel-avg-price {
  font-size: 1.45rem;
  line-height: 1;
  color: var(--color-heading);
}

.fuel-deal-price span,
.fuel-avg-price span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.fuel-deal-station {
  margin: 12px 0 2px;
  font-weight: 800;
  color: var(--color-heading);
}

.fuel-avg-stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.fuel-avg-stat strong {
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.fuel-places-title {
  margin-top: 8px;
}

#cijene-goriva {
  scroll-margin-top: 96px;
}

.fuel-deal-city,
.fuel-avg-range,
.fuel-source,
.fuel-avg-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.fuel-avg {
  border: 1px solid var(--color-border, #e2e8f0);
}

.fuel-avg-price {
  display: block;
  margin-top: 8px;
}

@media (max-width: 880px) {
  .fuel-avg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: baseline;
  }

  .fuel-avg-label {
    grid-column: 1 / -1;
  }

  .fuel-avg-price {
    margin-top: 0;
  }

  .fuel-avg-range,
  .fuel-avg-stat {
    grid-column: 1 / -1;
    margin: 0;
    text-align: left;
  }
}

.fuel-avg-meta {
  display: flex;
  gap: 14px;
}

.fuel-source {
  margin-top: 14px;
  font-size: 0.82rem;
}

.fuel-source a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fuel-source--hero {
  margin-top: 14px;
  text-align: center;
}

.fuel-source--market {
  margin-top: 18px;
  margin-bottom: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.fuel-source--market a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fuel-partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 8px 0 28px;
}

.fuel-prices-embed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
}

.fuel-pump-city {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
}

.home-brand-fuel-averages {
  max-width: 1080px;
  margin: 28px auto 8px;
  padding: 0 20px;
}

.fuel-stations-embed .chargers-station-list {
  max-height: 360px;
  overflow: auto;
}

html[data-color-mode="dark"] .fuel-deal,
html[data-color-mode="dark"] .fuel-avg,
html[data-color-mode="dark"] .fuel-station-card,
html[data-color-mode="dark"] .charger-detail-sheet-card {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-color-mode="dark"] .fuel-deal {
  background: color-mix(in srgb, var(--fuel-accent, var(--color-primary)) 18%, var(--color-surface));
}

.fuel-stations {
  margin: 8px 0 28px;
}

.fuel-stations-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 14px;
  margin-top: 12px;
}

.fuel-stations-map-wrap {
  position: relative;
  min-height: 460px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border, #e2e8f0);
}

.fuel-stations-map {
  width: 100%;
  height: 460px;
}

.fuel-stations-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 460px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 18px;
  background: var(--color-surface, #fff);
  overflow: hidden;
}

.fuel-stations-toolbar {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.fuel-stations-toolbar label {
  display: grid;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.fuel-stations-toolbar input,
.fuel-stations-toolbar select {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-border, #e2e8f0);
  padding: 0 10px;
  font: inherit;
  background: var(--color-surface-input, #fff);
  color: var(--color-text);
}

.fuel-stations-list {
  overflow: auto;
  padding: 6px;
}

.fuel-map-stage {
  height: calc(100dvh - 88px);
  min-height: 720px;
  margin: 20px 0 32px;
}

.fuel-map-shell {
  position: relative;
  height: 100%;
  min-height: 720px;
  border-radius: 18px;
  overflow: hidden;
}

.fuel-map-shell .fuel-map-canvas,
.fuel-map-shell .chargers-map {
  width: 100%;
  height: 100% !important;
  min-height: 720px !important;
  border: 0;
  border-radius: 0;
}

.fuel-map-shell.is-fullscreen,
.fuel-map-shell.is-fullscreen .chargers-map,
.fuel-map-shell.is-fullscreen .fuel-map-canvas {
  min-height: 100% !important;
  height: 100% !important;
}

.fuel-map-shell .chargers-map-fullscreen-btn {
  z-index: 8;
}

.fuel-map-toolbar {
  position: absolute;
  top: 12px;
  left: 158px;
  right: 64px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  pointer-events: none;
}

.fuel-map-toolbar > * {
  pointer-events: auto;
}

.fuel-map-toolbar input,
.fuel-map-toolbar select {
  height: 40px;
  min-width: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-text);
  padding: 0 12px;
  font: inherit;
  font-size: 0.86rem;
}

.fuel-map-toolbar input {
  flex: 1 1 160px;
}

.fuel-map-count {
  margin: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.fuel-map-list-outer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  width: auto;
  max-height: 30%;
  overflow: auto;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.fuel-map-shell .charger-detail-sheet--modal {
  z-index: 12;
}

.fuel-type-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.fuel-type-icon--diesel { color: #2563eb; }
.fuel-type-icon--super95 { color: #0f766e; }
.fuel-type-icon--super98 { color: #6d28d9; }
.fuel-type-icon--lpg { color: #c2410c; }

.fuel-city-pumps-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  min-height: 40px;
  text-decoration: none;
}

.fuel-map-page {
  margin: 28px 0 36px;
}

.fuel-pump-maps {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-primary-muted, #eef2ff);
  color: var(--color-primary, #1d4ed8);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

html[data-color-mode="dark"] .fuel-map-toolbar input,
html[data-color-mode="dark"] .fuel-map-toolbar select,
html[data-color-mode="dark"] .fuel-map-count,
html[data-color-mode="dark"] .fuel-map-list-outer {
  background: rgba(15, 23, 42, 0.94);
  color: var(--color-text);
  border-color: rgba(148, 163, 184, 0.35);
}

@media (max-width: 700px) {
  .fuel-map-stage,
  .fuel-map-shell,
  .fuel-map-shell .chargers-map,
  .fuel-map-shell .fuel-map-canvas {
    min-height: 78vh;
  }

  .fuel-map-toolbar {
    left: 12px;
    top: 58px;
    right: 12px;
    max-width: none;
  }
}

.fuel-stations-embed .fuel-station-item {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 14px;
  background: var(--color-surface, #fff);
  color: inherit;
  font: inherit;
}

.fuel-station-open {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  grid-column: 1 / -1;
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 640px) {
  .fuel-stations-embed .fuel-station-item,
  .fuel-station-open {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fuel-station-place,
.fuel-station-prices,
.fuel-station-navs {
  min-width: 0;
}

.fuel-station-place {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fuel-station-place strong {
  color: var(--color-heading);
  font-weight: 800;
}

.fuel-station-place span,
.fuel-station-price em {
  color: var(--color-text-muted);
  font-style: normal;
  font-size: 0.78rem;
}

.fuel-station-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.fuel-station-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fuel-station-price strong {
  font-size: 0.84rem;
  color: var(--color-heading);
}

.fuel-station-navs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fuel-station-nav {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-primary-muted, #eef2ff);
  color: var(--color-primary, #1d4ed8);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.fuel-station-card-wide {
  left: 8px !important;
  right: 8px !important;
  top: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-width: none;
}

.fuel-station-card-wide .fuel-station-navs {
  margin-top: 8px;
}

.fuel-station-item.is-active,
.fuel-station-item:hover {
  background: var(--color-primary-muted, #eef2ff);
}

.fuel-station-card {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  width: min(280px, calc(100% - 24px));
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

.fuel-station-card-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}

.fuel-station-card-name {
  margin: 0 18px 4px 0;
  font-weight: 800;
}

.fuel-station-card-place,
.fuel-station-card-prices,
.fuel-station-card-hours {
  margin: 0 0 4px;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}

@media (max-width: 980px) {
  .fuel-deal-grid,
  .fuel-avg-grid,
  .fuel-stations-layout {
    grid-template-columns: 1fr;
  }

  .fuel-stations-map,
  .fuel-stations-map-wrap,
  .fuel-stations-panel {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .fuel-stations-map {
    height: 360px;
  }

  .fuel-stations-list {
    max-height: 320px;
  }
}

/* route-fuel.css */
.route-fuel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--gradient-panel);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-sm, 0 16px 40px rgba(15, 23, 42, 0.08));
}

.route-fuel-head {
  margin: 0 0 14px;
}

.route-fuel-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary, var(--color-primary));
}

.route-fuel-head h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.route-fuel-legs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.route-fuel-city {
  display: grid;
  gap: 6px;
}

.route-fuel-city span,
.route-fuel-field > span,
.route-fuel-segment legend {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.route-fuel-city select,
.route-fuel-city input,
.route-fuel-field input,
.route-fuel-field select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-input, var(--color-surface));
  color: var(--color-heading);
  padding: 0 12px;
  font: inherit;
}

.route-fuel-swap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-primary-muted, rgba(var(--color-primary-rgb), 0.12));
  color: var(--color-primary, var(--color-primary));
  font-size: 1.1rem;
  cursor: pointer;
}

.route-fuel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.route-fuel-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.route-fuel-span {
  grid-column: span 2;
}

.route-fuel-manual-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.route-fuel-segment {
  border: 0;
  margin: 0;
  padding: 0;
}

.route-fuel-pills {
  display: flex;
  gap: 6px;
  background: var(--color-surface-section, rgba(15, 23, 42, 0.04));
  border-radius: 999px;
  padding: 4px;
}

.route-fuel-pills button {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.route-fuel-pills button.is-on {
  background: var(--gradient-btn, var(--color-primary));
  color: #fff;
}

.route-fuel-slip {
  margin-top: 16px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: var(--color-surface-section, rgba(15, 23, 42, 0.04));
  border: 1px solid var(--color-border);
}

.route-fuel-slip-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.route-fuel-slip-total {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-heading);
}

.route-fuel-slip-line {
  margin: 4px 0 12px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.route-fuel-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.route-fuel-stats div {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.route-fuel-stats span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.route-fuel-stats strong {
  font-size: 0.95rem;
  color: var(--color-heading);
}

.route-fuel--compact {
  padding: 16px 16px 14px;
}

.route-fuel--compact .route-fuel-head {
  margin-bottom: 10px;
}

.route-fuel--compact .route-fuel-head h2 {
  font-size: 1.15rem;
}

.route-fuel--compact .route-fuel-legs {
  margin-bottom: 10px;
}

.route-fuel--compact .route-fuel-advanced,
.route-fuel--compact .route-fuel-manual-note {
  display: none;
}

.route-fuel--compact .route-fuel-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.route-fuel--compact .route-fuel-span {
  grid-column: span 2;
}

.route-fuel--compact .route-fuel-city select,
.route-fuel--compact .route-fuel-field input,
.route-fuel--compact .route-fuel-field select {
  min-height: 40px;
}

.route-fuel--compact .route-fuel-pills button {
  min-height: 34px;
}

.route-fuel--compact .route-fuel-slip {
  margin-top: 12px;
  padding: 12px;
}

@media (max-width: 1100px) {
  .route-fuel-grid,
  .route-fuel--compact .route-fuel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .route-fuel {
    padding: 14px 14px 12px;
  }

  .route-fuel-legs,
  .route-fuel-stats {
    grid-template-columns: 1fr;
  }

  .route-fuel-swap {
    justify-self: center;
    transform: rotate(90deg);
  }

  .route-fuel-span {
    grid-column: span 2;
  }

  .route-fuel--compact .route-fuel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* chargers.css */
.chargers-page {
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  padding: 16px 24px 28px;
}

/* Full-screen map page (desktop) */
@media (min-width: 981px) {
  body.chargers-page-body {
    overflow: auto;
    padding-bottom: 0;
  }

  .chargers-page--fullscreen {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    height: max(480px, calc(100dvh - var(--site-header-height, 72px)));
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chargers-page--fullscreen .chargers-header {
    display: none;
  }

  .chargers-embed--page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .chargers-embed--page .chargers-panel {
    position: relative;
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
  }

  .chargers-embed--page .chargers-panel-body--page {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    max-height: none;
    min-height: 0;
  }

  .chargers-embed--page .chargers-map-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .chargers-embed--page .chargers-map {
    height: 100% !important;
    min-height: 100% !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .chargers-embed--page .chargers-sidebar {
    position: absolute;
    top: 16px;
    left: 16px;
    bottom: auto;
    height: auto;
    z-index: 8;
    width: min(340px, 34vw);
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    pointer-events: none;
  }

  .chargers-embed--page .chargers-sidebar > * {
    pointer-events: auto;
  }

  .chargers-embed--page .chargers-sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 16px 18px 12px;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: none;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
  }

  .chargers-embed--page .chargers-sidebar-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    line-height: 1.25;
  }

  .chargers-embed--page .chargers-sidebar-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  .chargers-embed--page .chargers-panel-toolbar {
    flex-shrink: 0;
    margin: 0;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-top: none;
    border-bottom: none;
    box-shadow: none;
  }

  .chargers-embed--page .chargers-search,
  .chargers-embed--page .chargers-city-filter {
    max-width: none;
    flex: 1 1 100%;
  }

  .chargers-embed--page .chargers-count {
    flex: 1 1 100%;
    text-align: left;
    font-size: 0.86rem;
    padding-top: 2px;
  }

  .chargers-embed--page .chargers-list-outer {
    flex: 1;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chargers-embed--page .chargers-list-wrap {
    flex: 1;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
  }

  .chargers-embed--page .chargers-sidebar .chargers-list-wrap {
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-top: none;
    border-bottom: none;
    box-shadow: none;
  }

  .chargers-embed--page .chargers-list-header {
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 0.88rem;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, transparent 70%);
  }

  .chargers-embed--page .chargers-station-list {
    flex: 1 1 0;
    overflow-y: hidden;
    min-height: 0;
    max-height: calc(8 * 72px + 7 * 8px + 16px);
    padding: 8px 10px 6px;
    gap: 8px;
  }

  .chargers-embed--page.is-list-expanded .chargers-station-list {
    overflow-y: auto;
    max-height: min(62vh, 560px);
  }

  .chargers-embed--page .chargers-empty,
  .chargers-embed--page .chargers-no-results {
    flex-shrink: 0;
    padding: 8px 12px;
  }

  .chargers-embed--page .chargers-list-scroll-hint {
    flex-shrink: 0;
    margin: 0;
    padding: 6px 12px 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    line-height: 1.35;
  }

  .chargers-embed--page .chargers-show-more-bar {
    flex-shrink: 0;
    z-index: 3;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.98);
    padding: 10px 12px 12px;
    position: static;
    display: flex !important;
  }

  .chargers-embed--page .chargers-show-more-bar[hidden] {
    display: none !important;
  }

  .chargers-embed--page .charger-list-item {
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  }

  .chargers-embed--page .charger-list-thumb-wrap {
    width: 48px;
    height: 48px;
  }

  .chargers-embed--page .charger-list-title {
    font-size: 0.92rem;
  }

  .chargers-embed--page .chargers-show-more-bar .btn-show-more {
    width: 100%;
    min-height: 42px;
    font-size: 0.92rem;
  }

  .chargers-embed--page .chargers-list-outer > .chargers-show-more-bar,
  .chargers-embed--page .chargers-sidebar > .chargers-show-more-bar {
    flex: 0 0 auto;
    z-index: 12;
    min-height: 58px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14);
    display: flex !important;
  }

  .chargers-embed--page .chargers-list-outer > .chargers-show-more-bar[hidden],
  .chargers-embed--page .chargers-sidebar > .chargers-show-more-bar[hidden] {
    display: none !important;
  }

  .chargers-embed--page .charger-list-item:hover {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }

  .chargers-embed--page .charger-list-item.is-active {
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 8px 20px rgba(22, 163, 74, 0.12);
  }

  html[data-color-mode="dark"] .chargers-embed--page .chargers-sidebar-head,
  html[data-color-mode="dark"] .chargers-embed--page .chargers-panel-toolbar,
  html[data-color-mode="dark"] .chargers-embed--page .chargers-list-wrap {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.2);
  }
}

.chargers-header {
  text-align: center;
  margin-bottom: 14px;
}

.chargers-header h1 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  color: var(--color-heading);
}

.chargers-header p,
.chargers-header-meta {
  margin: 0;
  color: var(--color-text-muted);
}

.chargers-header-meta {
  margin-top: 8px;
  font-size: 0.92rem;
}

.chargers-embed {
  width: 100%;
  margin: 0;
  padding: 0;
}

.chargers-embed-header {
  margin-bottom: 18px;
  padding: 23px;
}

.chargers-embed-title {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  color: var(--color-heading);
}

.chargers-embed-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.chargers-embed--model {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border, #e2e8f0);
  width: 100%;
  min-width: 0;
}

.chargers-embed--model .chargers-embed-header {
  margin-bottom: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border, #e2e8f0);
}

.chargers-embed-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.chargers-embed-header-actions .utility-page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 9px 14px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  background: var(--color-primary-light);
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.chargers-embed-header-actions .utility-page-link::after {
  content: '→';
}

.chargers-embed-header-actions .utility-page-link:hover {
  border-color: var(--color-primary);
  transform: translateX(2px);
  color: var(--color-primary-hover);
}

.chargers-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: var(--color-surface);
  color: var(--color-heading);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chargers-expand-btn:hover {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.08);
  color: #166534;
}

.chargers-embed--model.is-expanded .chargers-expand-btn {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #166534;
}

.chargers-embed--model .chargers-panel-body--embed .chargers-map-shell .chargers-map {
  height: min(62vh, 620px);
  min-height: 420px;
  transition: height 0.35s ease, min-height 0.35s ease;
}

.chargers-embed--model.is-expanded .chargers-panel-body--embed .chargers-map-shell .chargers-map {
  height: min(72vh, 760px);
  min-height: 520px;
}

.chargers-embed--model .chargers-panel-body--embed .chargers-list-outer {
  min-height: 0;
}

.chargers-embed--model .chargers-panel-body--embed .chargers-list-wrap {
  min-height: 0;
}

.chargers-embed--model .chargers-station-list {
  --charger-row: 126px;
  max-height: min(46vh, 420px);
  min-height: calc(2 * var(--charger-row) + 12px + 24px);
  overflow-y: auto;
  transition:
    min-height 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.chargers-embed--model.is-list-expanded .chargers-station-list {
  overflow-y: auto;
  min-height: calc(6 * var(--charger-row) + 5 * 12px + 24px);
  max-height: min(70vh, calc(10 * var(--charger-row) + 9 * 12px + 24px));
}

.chargers-embed--model:not(.is-list-expanded) .charger-list-item:nth-child(3) {
  animation: charger-list-peek 2.8s ease-in-out infinite;
}

@keyframes charger-list-peek {
  0%, 100% {
    opacity: 0.72;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chargers-embed--model:not(.is-list-expanded) .charger-list-item:nth-child(3) {
    animation: none;
  }
}

.chargers-panel {
  background: var(--gradient-panel);
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.chargers-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 14px 16px;
  box-sizing: border-box;
}

.chargers-search,
.chargers-city-filter {
  display: grid;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
}

.chargers-search input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: inherit;
  min-height: 46px;
  box-sizing: border-box;
}

.chargers-search input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.chargers-filter-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chargers-city-filter select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: var(--color-surface);
  font-size: 0.95rem;
  min-height: 46px;
}

.chargers-count {
  margin: 0;
  font-weight: 600;
  color: var(--color-heading);
  font-size: 0.95rem;
  flex: 1 1 100%;
}

@media (min-width: 640px) {
  .chargers-count {
    flex: 0 1 auto;
    text-align: right;
  }
}

/* Stacked (home embed): map on top, list below */
.chargers-panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chargers-map-shell {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.chargers-map-fullscreen-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease;
}

.chargers-map-fullscreen-btn:active {
  transform: scale(0.96);
}

.chargers-map-fullscreen-icon {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
  opacity: 0.85;
}

.chargers-map-fullscreen-btn.is-active {
  background: #0f172a;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.chargers-map-fullscreen-btn.is-active .chargers-map-fullscreen-icon {
  border-radius: 50%;
}

html[data-color-mode="dark"] .chargers-map-fullscreen-btn {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.3);
}

.chargers-map-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1400;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
}

@media (max-width: 980px) {
  .chargers-embed--page .chargers-map-shell:not(.is-exited-fullscreen) {
    position: fixed;
    inset: 0;
    z-index: 1400;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
  }

  .chargers-embed--page .chargers-map-shell:not(.is-exited-fullscreen) .chargers-map {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body:has(.chargers-embed--page .chargers-map-shell:not(.is-exited-fullscreen)) {
    overflow: hidden;
  }
}

.chargers-map-shell.is-fullscreen .chargers-map {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.chargers-map-shell.is-fullscreen .chargers-map-fullscreen-btn {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  left: auto;
  padding: 11px 16px;
  font-size: 0.88rem;
  z-index: 1800;
  pointer-events: auto;
}

.chargers-sheet-handle {
  display: none;
}

.chargers-list-outer.is-fs-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1410;
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.chargers-list-outer.is-fs-sheet.is-sheet-collapsed {
  height: 236px;
  min-height: 0;
}

.chargers-embed--page .chargers-list-outer.is-fs-sheet,
.chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed,
.chargers-embed--page .chargers-list-outer.is-fs-sheet .chargers-list-wrap {
  min-height: 0;
}

.chargers-embed--page .chargers-list-outer.is-fs-sheet .chargers-list-wrap {
  max-height: none;
}

.chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-list-wrap {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: hidden;
}

.chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-station-list,
.chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-station-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: hidden !important;
}

.chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-list-header,
.chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-list-scroll-hint,
.chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-show-more-bar,
.chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed > .chargers-show-more-bar,
.chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-show-more-bar {
  display: none !important;
}

.chargers-list-outer.is-fs-sheet .btn-show-less {
  display: none !important;
}

.chargers-list-outer.is-fs-sheet.is-sheet-mid {
  height: min(42vh, 360px);
}

.chargers-list-outer.is-fs-sheet.is-sheet-expanded {
  height: min(78vh, 720px);
}

.chargers-list-outer.is-fs-sheet.is-sheet-mid .chargers-list-wrap,
.chargers-list-outer.is-fs-sheet.is-sheet-expanded .chargers-list-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: hidden;
}

.chargers-list-outer.is-fs-sheet.is-sheet-mid .chargers-station-list,
.chargers-list-outer.is-fs-sheet.is-sheet-expanded .chargers-station-list,
.chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-expanded .chargers-station-list,
.chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-mid .chargers-station-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
}

.chargers-list-outer.is-fs-sheet.is-sheet-mid .chargers-show-more-bar,
.chargers-list-outer.is-fs-sheet.is-sheet-expanded .chargers-show-more-bar {
  display: flex;
  flex-shrink: 0;
}

.chargers-map-fullscreen-btn[hidden],
.chargers-show-more-bar[hidden],
.chargers-list-outer.is-fs-sheet.is-sheet-expanded .chargers-show-more-bar[hidden],
.chargers-list-outer.is-fs-sheet.is-sheet-mid .chargers-show-more-bar[hidden] {
  display: none !important;
}

.chargers-list-outer.is-fs-sheet .chargers-sheet-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px 6px;
  border: none;
  background: transparent;
  color: var(--color-heading);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: grab;
  touch-action: none;
}

.chargers-sheet-notch {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: #94a3b8;
}

.chargers-list-outer.is-fs-sheet .chargers-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html[data-color-mode="dark"] .chargers-list-outer.is-fs-sheet {
  background: var(--color-surface);
  border-color: rgba(148, 163, 184, 0.28);
}

body.has-fullscreen-map {
  overflow: hidden;
}

.chargers-map-3d-hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  max-width: min(320px, calc(100% - 20px));
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chargers-map-3d-hint.is-prominent {
  color: #14532d;
  background: rgba(220, 252, 231, 0.96);
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.18);
  font-size: 0.8rem;
}

.chargers-map-shell:has(.charger-detail-sheet.is-visible) .chargers-map-3d-hint {
  opacity: 0;
}

html[data-color-mode="dark"] .chargers-map-3d-hint {
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(148, 163, 184, 0.25);
}

@media (max-width: 640px) {
  .chargers-map-3d-hint {
    display: none;
  }
}

.chargers-panel-body--page .chargers-map-shell {
  height: 100%;
  min-height: 0;
}

.chargers-map {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  z-index: 1;
}

.chargers-panel-body--page .chargers-map {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.chargers-map--embed {
  /* height controlled by body modifiers */
}

.chargers-panel-body--embed .chargers-map-shell .chargers-map {
  height: min(56vh, 520px);
  min-height: 360px;
}

/* Page layout (tablet/mobile: stacked) */
.chargers-panel-body--page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.chargers-list-outer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.chargers-list-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  background: var(--color-surface);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.chargers-panel-body--page .chargers-list-wrap {
  max-height: none;
  height: 100%;
}

.chargers-panel-body--embed .chargers-list-wrap {
  max-height: none;
  min-height: 320px;
  flex: 1 1 auto;
}

.chargers-embed--home .chargers-panel-body--embed {
  min-height: 720px;
}

.chargers-embed--home .chargers-panel-body--embed .chargers-map {
  height: min(68vh, 680px);
  min-height: 480px;
  flex: 0 0 auto;
}

.chargers-embed--home .chargers-panel-body--embed .chargers-list-outer {
  flex: 1 1 auto;
  min-height: 320px;
}

.chargers-embed--home .chargers-station-list {
  max-height: min(340px, 42vh);
  min-height: 200px;
  transition:
    min-height 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.chargers-embed--home.is-list-expanded .chargers-station-list {
  min-height: calc(5 * 98px + 4 * 12px + 24px);
  max-height: min(70vh, 720px);
  overflow-y: auto;
}

.chargers-embed--home.is-list-expanded .chargers-station-list.has-more-below {
  mask-image: none;
  -webkit-mask-image: none;
}

.chargers-list-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--color-heading);
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0%, var(--color-surface-section) 55%);
}

.chargers-list-header::after {
  content: 'OpenStreetMap';
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chargers-station-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: min(420px, 52vh);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-surface-section);
}

.chargers-panel-body--page .chargers-station-list,
.chargers-embed--page .chargers-station-list {
  max-height: min(62vh, 720px);
  overflow-y: auto;
}

.chargers-embed--page.is-list-expanded .chargers-station-list {
  max-height: min(70vh, 760px);
  overflow-y: auto;
}

.charger-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: var(--color-surface);
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  touch-action: pan-y;
  content-visibility: auto;
  contain-intrinsic-size: auto 92px;
}

.charger-list-thumb-wrap {
  flex-shrink: 0;
  width: 88px;
  height: 66px;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.charger-list-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.charger-list-thumb.is-geo-thumb,
.charger-list-thumb.is-map-thumb {
  object-fit: cover;
}

.charger-list-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.charger-list-title {
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.35;
  font-size: 0.98rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.charger-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.charger-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.charger-badge--public {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.charger-badge--private {
  background: rgba(148, 163, 184, 0.2);
  color: #334155;
  border: 1px solid rgba(100, 116, 139, 0.35);
}

.charger-badge--free {
  background: rgba(14, 165, 233, 0.14);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.charger-badge--paid {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

html[data-color-mode="dark"] .charger-badge--public {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
}

html[data-color-mode="dark"] .charger-badge--private {
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
}

html[data-color-mode="dark"] .charger-badge--free {
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.35);
}

html[data-color-mode="dark"] .charger-badge--paid {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

.charger-popup .charger-badges {
  margin: 8px 0 4px;
}

.charger-popup-maps {
  margin: 10px 0 0;
}

.charger-popup-maps a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}

.charger-popup-maps a:hover {
  text-decoration: underline;
}

html[data-color-mode="dark"] .charger-popup-maps a {
  color: #93c5fd;
}

.charger-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.charger-list-city,
.charger-list-power,
.charger-list-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.charger-list-city {
  background: #f1f5f9;
  color: #334155;
}

.charger-list-power {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.charger-list-count {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.chargers-show-more-bar {
  flex-shrink: 0;
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 14px 14px;
  border-top: 1px solid #e2e8f0;
  background: var(--color-surface);
}

.chargers-show-more-bar[hidden] {
  display: none !important;
}

.chargers-show-more-bar .btn-show-more[hidden],
.chargers-show-more-bar .btn-show-less[hidden] {
  display: none !important;
}

.chargers-show-more-bar .btn-show-more {
  flex: 1 1 170px;
  width: 100%;
  min-width: 0;
  max-width: 420px;
  margin: 0;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border: none;
  color: #fff;
  font-weight: 700;
}

.chargers-show-more-bar .btn-show-more:hover {
  filter: brightness(1.05);
  color: #fff;
  transform: translateY(-1px);
}

.chargers-show-more-bar .btn-show-less {
  flex: 0 1 150px;
  max-width: 170px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong, #cbd5e1);
  color: var(--color-heading);
  font-weight: 700;
}

.chargers-show-more-bar .btn-show-less:hover {
  filter: none;
  color: var(--color-heading);
}

.chargers-no-results {
  flex-shrink: 0;
  margin: 0;
  padding: 18px 16px;
  text-align: center;
  color: var(--color-text-subtle);
  font-size: 0.95rem;
  border-top: 1px solid #e2e8f0;
}

@media (hover: hover) {
  .charger-list-item:hover {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.1);
  }
}

.charger-list-item.is-active {
  border-color: #22c55e;
  box-shadow: inset 3px 0 0 #22c55e, 0 8px 20px rgba(34, 197, 94, 0.12);
}

.charger-list-item.is-just-loaded {
  animation: chargerListFlash 1.1s ease;
}

@keyframes chargerListFlash {
  0% { background: rgba(34, 197, 94, 0.22); }
  100% { background: var(--color-surface); }
}

.chargers-empty {
  padding: 16px;
  color: var(--color-text-subtle);
  text-align: center;
  flex-shrink: 0;
}

.charger-marker-icon {
  background: transparent;
  border: none;
}

/* Compact floating detail card (replaces Leaflet popup) */
.charger-detail-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: min(300px, calc(100% - 24px));
  max-width: 300px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}

.charger-detail-sheet--anchored {
  transform: translate(-50%, calc(-100% - 16px)) scale(0.92);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}

.charger-detail-sheet--anchored.is-opening {
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}

.charger-detail-sheet--anchored.charger-detail-sheet--above {
  transform: translate(-50%, calc(-100% - 16px)) scale(0.92);
}

.charger-detail-sheet.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.charger-detail-sheet--anchored.is-visible {
  transform: translate(-50%, 14px) scale(1);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}

.charger-detail-sheet--anchored.charger-detail-sheet--above.is-visible {
  transform: translate(-50%, calc(-100% - 16px)) scale(1);
}

.charger-detail-sheet--home.charger-detail-sheet--anchored {
  max-height: min(290px, 78%);
  overflow: visible;
}

.charger-detail-sheet--home .charger-detail-sheet-card {
  max-height: none;
  overflow: visible;
  box-shadow:
    0 3px 0 rgba(34, 197, 94, 0.5),
    0 12px 32px rgba(15, 23, 42, 0.16);
}

.charger-detail-sheet--home .charger-detail-media {
  padding: 8px 12px 6px;
}

.charger-detail-sheet--home .charger-detail-thumb {
  max-width: 140px;
  height: 84px;
  padding: 6px;
}

.charger-detail-sheet--home .charger-detail-body {
  padding: 6px 12px 12px;
}

.charger-detail-sheet--home .charger-detail-title {
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.charger-detail-sheet--home .charger-detail-stat {
  padding: 4px 8px;
  font-size: 0.72rem;
}

.charger-detail-sheet--home .charger-detail-nav {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
}

.charger-detail-sheet--home .charger-detail-operator,
.charger-detail-sheet--home .charger-detail-notes {
  display: none;
}

.charger-detail-sheet--home .charger-badges {
  margin-bottom: 6px;
}

.charger-detail-sheet--home .charger-detail-hero .charger-detail-city-tag {
  font-size: 0.68rem;
  padding: 2px 7px;
}

.chargers-map-poi-legend {
  display: none !important;
}

.charger-detail-sheet--modal {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  max-width: none;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.charger-detail-sheet--modal.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: none;
}

.charger-detail-sheet--modal .charger-detail-sheet-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 0;
  pointer-events: auto;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.charger-detail-sheet--modal.is-visible .charger-detail-sheet-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.charger-detail-backdrop {
  display: none;
}

body.charger-detail-open {
  overflow: auto;
}

.charger-detail-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 14px;
  background: transparent;
}

.charger-detail-thumb {
  width: 100%;
  max-width: 240px;
  height: 148px;
  object-fit: contain;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.charger-detail-sheet--modal .charger-detail-body {
  padding: 14px 20px 20px;
}

.charger-detail-sheet--modal .charger-detail-title {
  font-size: 1.15rem;
}

.charger-detail-sheet--modal .charger-detail-nav {
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 0.95rem;
}

.charger-detail-nearby {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.charger-detail-nearby-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-heading);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.charger-detail-nearby-btn:hover {
  background: var(--color-primary-muted, rgba(var(--color-primary-rgb), 0.12));
  border-color: var(--color-primary, var(--color-primary));
  color: var(--color-primary, var(--color-primary));
}

.charger-detail-nearby-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
  flex: 1;
}

body.charger-detail-open {
  overflow: hidden;
}

.chargers-list-scroll-hint {
  margin: 0;
  padding: 8px 12px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-subtle, #64748b);
  text-align: center;
  line-height: 1.35;
}

.chargers-station-list.has-more-below {
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.chargers-list-edge-toggle {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 50%;
  background: var(--color-surface, #fff);
  color: var(--color-heading, #0f172a);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chargers-list-edge-toggle[hidden] {
  display: none;
}

.chargers-list-edge-toggle svg {
  display: block;
}

.chargers-embed--page.is-list-collapsed .chargers-list-edge-toggle svg {
  transform: rotate(180deg);
}

.chargers-embed--page .chargers-station-list,
.chargers-embed--page .chargers-list-outer.is-fs-sheet .chargers-station-list,
.chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-station-list {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: min(52vh, 560px) !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.chargers-embed--page.is-list-collapsed .chargers-station-list,
.chargers-embed--page.is-list-collapsed .chargers-list-outer.is-fs-sheet .chargers-station-list,
.chargers-embed--page.is-list-collapsed .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-station-list {
  max-height: 240px !important;
  overflow-y: auto !important;
}

.chargers-list-edge-toggle {
  z-index: 6;
}

.chargers-attribution {
  margin: 10px 16px 0;
  color: var(--color-text-muted, #64748b);
  font-size: 0.78rem;
  line-height: 1.45;
}

.chargers-attribution a {
  color: inherit;
  text-decoration: underline;
}

.charger-detail-sheet-card {
  position: relative;
  padding: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    0 4px 0 rgba(34, 197, 94, 0.55),
    0 18px 48px rgba(15, 23, 42, 0.18);
  overflow: visible;
  max-height: none;
}

.charger-detail-sheet--fixed .charger-detail-sheet-card,
.charger-detail-sheet--above .charger-detail-sheet-card {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Keep the green bottom accent visible instead of clipping it. */
  margin-bottom: 6px;
  padding-bottom: 2px;
}

.charger-detail-sheet--above .charger-detail-hero,
.charger-detail-sheet--fixed .charger-detail-hero {
  flex: 0 0 auto;
  max-height: 140px;
  overflow: hidden;
}

.charger-detail-sheet--above .charger-detail-media,
.charger-detail-sheet--fixed .charger-detail-media {
  max-height: 130px;
  overflow: hidden;
}

.charger-detail-sheet--above .charger-detail-body,
.charger-detail-sheet--fixed .charger-detail-body {
  display: block !important;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px 16px;
  overflow: visible;
  visibility: visible;
  opacity: 1;
}

.chargers-embed--page ~ .charger-detail-sheet .charger-detail-body,
body > .charger-detail-sheet.charger-detail-sheet--fixed .charger-detail-body {
  display: block !important;
}

.charger-detail-hero {
  position: relative;
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, rgba(15, 23, 42, 0.04) 100%);
}

.charger-detail-city-tag {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}

.charger-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.charger-detail-close:hover {
  background: rgba(148, 163, 184, 0.24);
  color: #334155;
}

.charger-detail-body {
  padding: 14px 18px 16px;
}

.charger-detail-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-heading, #0f172a);
  letter-spacing: -0.01em;
}

.charger-detail-body .charger-badges {
  margin-bottom: 8px;
}

.charger-detail-operator {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted, #64748b);
}

.charger-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 4px;
}

.charger-detail-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 11px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 0.8rem;
  line-height: 1.2;
}

.charger-detail-stat em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.charger-detail-stat strong {
  font-weight: 700;
  color: #1e293b;
}

.charger-detail-connectors,
.charger-detail-cost,
.charger-detail-contact {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

.charger-detail-connectors em,
.charger-detail-cost em,
.charger-detail-contact em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #64748b);
}

.charger-detail-contact a {
  color: inherit;
  font-weight: 700;
}

.charger-list-connectors {
  display: block;
  color: var(--color-text-muted, #64748b);
}

.charger-detail-notes {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-subtle, #64748b);
}

.charger-detail-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.charger-detail-nav-icon {
  font-size: 1rem;
  line-height: 1;
}

.charger-detail-nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.34);
  text-decoration: none;
}

.charger-cluster-hint {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
}

.charger-cluster-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(220px, 36vh);
  overflow-y: auto;
  margin-bottom: 8px;
}

.charger-cluster-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.charger-cluster-item:hover {
  border-color: rgba(34, 197, 94, 0.45);
  background: #f0fdf4;
}

.charger-cluster-item-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-heading, #0f172a);
  line-height: 1.35;
}

.charger-cluster-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.74rem;
  color: var(--color-text-muted, #64748b);
}

.charger-cluster-more {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--color-text-subtle, #94a3b8);
}

.charger-detail-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  padding: 8px 14px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.1);
  color: #166534;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.charger-detail-zoom-btn:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.5);
}

html[data-color-mode="dark"] .charger-cluster-item {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.22);
}

html[data-color-mode="dark"] .charger-cluster-item:hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}

html[data-color-mode="dark"] .charger-detail-zoom-btn {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

html[data-color-mode="dark"] .chargers-embed--page .chargers-list-outer > .chargers-show-more-bar,
html[data-color-mode="dark"] .chargers-embed--page .chargers-sidebar > .chargers-show-more-bar {
  background: rgba(15, 23, 42, 0.95);
  border-top-color: rgba(148, 163, 184, 0.2);
}

html[data-color-mode="dark"] .charger-detail-nearby {
  border-top-color: rgba(148, 163, 184, 0.2);
}

html[data-color-mode="dark"] .charger-detail-nearby-btn {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.22);
  color: #e5e7eb;
}

html[data-color-mode="dark"] .charger-detail-nearby-btn:hover {
  background: rgba(var(--color-primary-rgb), 0.2);
  border-color: rgba(167, 139, 250, 0.5);
  color: var(--color-primary);
}

html[data-color-mode="dark"] .charger-detail-sheet-card {
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow:
    0 4px 0 rgba(34, 197, 94, 0.45),
    0 18px 48px rgba(0, 0, 0, 0.5);
}

html[data-color-mode="dark"] .charger-detail-hero {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.12) 0%, rgba(15, 23, 42, 0.35) 100%);
}

html[data-color-mode="dark"] .charger-detail-thumb {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.2);
}

html[data-color-mode="dark"] .charger-detail-stat {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.15);
}

html[data-color-mode="dark"] .charger-detail-close {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

html[data-color-mode="dark"] .charger-detail-close:hover {
  background: rgba(148, 163, 184, 0.22);
  color: #f8fafc;
}

html[data-color-mode="dark"] .charger-detail-stat strong {
  color: #f1f5f9;
}

.chargers-map .maplibregl-map,
.chargers-map .maplibregl-canvas-container,
.chargers-map canvas.maplibregl-canvas {
  width: 100%;
  height: 100%;
}

.chargers-map .maplibregl-ctrl-group {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.chargers-map .maplibregl-ctrl-attrib,
.chargers-map .maplibregl-ctrl-attrib.maplibregl-compact {
  display: none !important;
}

.chargers-map .maplibregl-ctrl-group button {
  width: 34px;
  height: 34px;
}

.model-page-header {
  display: block;
  text-align: center;
}

@media (max-width: 980px) {
  .chargers-embed--page .chargers-sidebar-head {
    display: none;
  }

  .chargers-embed--page .chargers-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    background: var(--gradient-panel);
  }

  .chargers-embed--page .chargers-sidebar {
    position: static;
    width: 100%;
    pointer-events: auto;
    gap: 0;
    display: contents;
  }

  .chargers-embed--page .chargers-panel-toolbar {
    order: 1;
    margin-bottom: 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .chargers-embed--page .chargers-panel-body--page {
    order: 2;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 0;
    gap: 16px;
  }

  .chargers-embed--page .chargers-list-outer {
    order: 3;
    min-height: 220px;
    display: flex;
    flex-direction: column;
  }

  .chargers-embed--page .chargers-sidebar > .chargers-show-more-bar {
    order: 4;
  }

  .chargers-embed--page .chargers-list-wrap {
    border-radius: 16px 16px 0 0;
    border: 1px solid #e2e8f0;
    background: var(--color-surface);
    backdrop-filter: none;
    box-shadow: none;
    min-height: 220px;
    max-height: min(52vh, 480px);
  }

  .chargers-embed--page.is-list-expanded .chargers-list-wrap {
    max-height: min(70vh, 640px);
  }

  .chargers-embed--page .chargers-list-outer > .chargers-show-more-bar,
  .chargers-embed--page .chargers-sidebar > .chargers-show-more-bar {
    border-radius: 0 0 16px 16px;
    box-shadow: none;
  }

  .chargers-panel-body--page .chargers-map-shell .chargers-map {
    height: min(64vh, 560px);
    min-height: 360px;
  }

  .chargers-embed--home .chargers-panel-body--embed {
    min-height: 0;
  }

  .chargers-embed--home .chargers-panel-body--embed .chargers-map-shell .chargers-map {
    height: min(68vh, 640px);
    min-height: 420px;
  }

  .chargers-embed--model .chargers-panel-body--embed .chargers-map-shell .chargers-map {
    height: min(62vh, 580px);
    min-height: 380px;
  }

  .chargers-embed--model.is-expanded .chargers-panel-body--embed .chargers-map-shell .chargers-map {
    height: min(70vh, 680px);
    min-height: 440px;
  }

  .chargers-embed--model .chargers-panel-body--embed .chargers-list-wrap {
    min-height: 0;
  }

  .chargers-embed--model .chargers-station-list {
    --charger-row: 118px;
  }

  .chargers-embed--model.is-list-expanded .chargers-station-list {
    min-height: calc(5 * var(--charger-row) + 4 * 12px + 24px);
    max-height: min(70vh, 720px);
    overflow-y: auto;
  }

  .charger-detail-sheet--modal {
    padding: 14px;
  }

  .chargers-embed-header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .chargers-embed-header-actions .utility-page-link,
  .chargers-expand-btn {
    width: 100%;
    justify-content: center;
  }

  .chargers-embed--home .chargers-list-wrap,
  .chargers-panel-body--embed .chargers-list-wrap {
    max-height: none;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .chargers-page {
    padding: 18px 14px 36px;
  }

  .chargers-panel {
    padding: 10px 12px;
  }

  .chargers-panel-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    align-items: end;
    margin-bottom: 10px;
  }

  .chargers-search {
    grid-column: 1 / -1;
    flex: none;
    max-width: none;
  }

  .chargers-city-filter {
    grid-column: 1 / -1;
    max-width: none;
  }

  .chargers-filter-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
  }

  .chargers-search input,
  .chargers-city-filter select {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.88rem;
    border-radius: 10px;
  }

  .chargers-count {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 0.85rem;
    margin: 0;
  }

  .chargers-embed-header {
    margin-bottom: 12px;
    padding: 14px 16px;
  }

  .chargers-panel-body--page .chargers-map-shell .chargers-map {
    height: 62vh;
    min-height: 330px;
  }

  .chargers-embed--home .chargers-panel-body--embed {
    min-height: 0;
    gap: 12px;
  }

  .chargers-embed--home .chargers-panel-body--embed .chargers-map-shell .chargers-map {
    height: min(60vh, 460px);
    min-height: 320px;
  }

  .chargers-embed--model .chargers-panel-body--embed .chargers-map-shell .chargers-map {
    height: min(58vh, 440px);
    min-height: 310px;
  }

  .chargers-embed--model.is-expanded .chargers-panel-body--embed .chargers-map-shell .chargers-map {
    height: min(56vh, 440px);
    min-height: 320px;
  }

  .chargers-embed--model .chargers-station-list {
    --charger-row: 112px;
  }

  .chargers-embed--model.is-list-expanded .chargers-station-list {
    min-height: calc(5 * var(--charger-row) + 4 * 12px + 24px);
    max-height: min(70vh, 720px);
    overflow-y: auto;
  }

  .charger-list-thumb-wrap {
    width: 72px;
    height: 54px;
  }

  .charger-list-item {
    padding: 12px;
  }
}

.chargers-sidebar-collapse,
.chargers-sidebar-reopen {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 981px) {
  .chargers-embed--page .chargers-sidebar {
    z-index: 30;
  }

  .chargers-embed--page .chargers-sidebar-head {
    position: relative;
    z-index: 31;
  }

  .chargers-embed--page .chargers-sidebar-collapse {
    display: inline-flex;
    flex: 0 0 auto;
    position: relative;
    z-index: 32;
    pointer-events: auto;
  }

  .chargers-embed--page .chargers-sidebar-reopen {
    position: absolute;
    top: 18px;
    left: 14px;
    z-index: 33;
    pointer-events: auto;
  }

  .chargers-embed--page .chargers-sidebar-reopen:not([hidden]) {
    display: inline-flex;
  }

  .chargers-embed--page .chargers-sidebar.is-sidebar-hidden {
    display: none !important;
  }
}

.charger-suggest-section--dock {
  max-width: none;
  margin: 0;
  padding: 0;
}

.charger-suggest-section--dock .charger-suggest-section-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.charger-suggest-section--dock h2 {
  font-size: 0.95rem;
}

.charger-suggest-section--dock p {
  font-size: 0.82rem;
}

.charger-suggest-section--dock .btn {
  width: 100%;
  justify-content: center;
}

body.chargers-page-body {
  overflow: hidden;
  height: 100dvh;
}

.chargers-page--fullscreen .chargers-header {
  display: none;
}

.charger-suggest-section {
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  padding: 28px 24px 36px;
}

.charger-suggest-section-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 36px 28px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.charger-suggest-section h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: var(--color-heading);
}

.charger-suggest-section p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.charger-suggest-section .btn {
  text-decoration: none;
  flex-shrink: 0;
}

.charger-suggest-page .charger-suggest-form {
  padding: 22px 24px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 16px);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.charger-suggest-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-bottom: 8px;
}

.charger-suggest-field--wide {
  grid-column: 1 / -1;
}

.charger-suggest-form textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-input);
  color: var(--color-text);
  padding: 12px;
  font: inherit;
  box-sizing: border-box;
}

.charger-suggest-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.charger-suggest-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.charger-suggest-status {
  min-height: 1.3em;
  margin: 8px 0 14px;
  font-weight: 700;
  font-size: 0.92rem;
}

.charger-suggest-status.is-ok {
  color: #15803d;
}

.charger-suggest-status.is-error {
  color: #b91c1c;
}

html[data-color-mode="dark"] .charger-suggest-section-inner,
html[data-color-mode="dark"] .charger-suggest-page .charger-suggest-form {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html[data-color-mode="dark"] .charger-suggest-status.is-ok {
  color: #4ade80;
}

.chargers-embed--page .charger-suggest-section {
  padding: 0;
}

.chargers-embed--page .charger-suggest-section-inner {
  padding: 0;
}

@media (max-width: 980px) {
  .charger-suggest-section {
    padding: 28px 14px calc(36px + var(--dock-height, 68px));
  }

  .chargers-embed--page .charger-suggest-section,
  .chargers-embed--page .charger-suggest-section-inner {
    padding: 0;
  }

  .charger-suggest-section-inner {
    flex-direction: column;
    align-items: stretch;
    padding-top: 32px;
  }

  .charger-suggest-section .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .charger-suggest-grid {
    grid-template-columns: 1fr;
  }
}

.chargers-embed:not(.chargers-embed--page) .chargers-sidebar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  width: min(300px, calc(100% - 132px));
  max-height: calc(100% - 24px);
  overflow: auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  pointer-events: none;
}

.chargers-embed:not(.chargers-embed--page) .chargers-sidebar > * {
  pointer-events: auto;
}

.chargers-embed:not(.chargers-embed--page) .chargers-panel-toolbar {
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.chargers-embed:not(.chargers-embed--page) .chargers-list-outer {
  position: relative;
  width: 100%;
  margin-top: 14px;
}

.chargers-embed .chargers-map-fullscreen-btn {
  left: auto;
  right: 12px;
  top: 12px;
}

@media (min-width: 981px) {
  .chargers-embed--page .chargers-sidebar {
    display: flex;
    flex-direction: column;
    width: min(360px, 32vw);
    max-height: min(62vh, 560px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 18px;
  }

  .chargers-embed--page .chargers-list-outer,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-expanded {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 168px;
    max-height: min(40vh, 340px);
    flex: 1 1 auto;
    z-index: 1;
    border-radius: 0 0 18px 18px;
    box-shadow: none;
  }

  .chargers-embed--page .chargers-list-outer.is-fs-sheet .chargers-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .chargers-embed--page .chargers-list-outer.is-fs-sheet .chargers-station-list {
    max-height: 100%;
    overflow-y: auto !important;
  }

  .chargers-embed--page .chargers-sheet-handle {
    display: none !important;
  }

  .chargers-embed--page .chargers-panel-toolbar {
    padding: 14px 16px 12px;
  }
}

@media (max-width: 980px) {
  .chargers-embed--page .chargers-list-outer.is-fs-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none;
    z-index: 1410;
  }

  .chargers-embed--page .chargers-sidebar {
    width: min(250px, calc(100% - 168px));
  }

  .charger-detail-sheet--anchored {
    width: min(210px, calc(100vw - 28px)) !important;
  }

  .chargers-embed--home .charger-detail-sheet-card .charger-detail-media {
    padding: 6px 8px 4px;
  }

  .chargers-embed--home .charger-detail-sheet-card .charger-detail-thumb {
    max-width: 88px;
    height: 56px;
    padding: 4px;
  }

  .chargers-embed--page .charger-detail-sheet-card .charger-detail-body {
    padding: 12px 14px 14px;
  }

  .chargers-embed--page .charger-detail-sheet-card .charger-detail-title {
    font-size: 0.98rem;
    margin-bottom: 6px;
  }

  .chargers-embed--page .charger-detail-sheet-card .charger-detail-operator,
  .chargers-embed--page .charger-detail-sheet-card .charger-detail-notes {
    display: block;
  }

  .chargers-embed--home .charger-detail-sheet-card .charger-detail-operator,
  .chargers-embed--home .charger-detail-sheet-card .charger-detail-notes {
    display: none;
  }

  .chargers-embed--home .charger-detail-sheet-card .charger-detail-stat {
    padding: 3px 6px;
    font-size: 0.68rem;
  }
}

@media (min-width: 981px) {
  .chargers-embed--page .chargers-sidebar .chargers-panel-toolbar {
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0;
  }
}

@media (max-width: 980px) {
  .chargers-embed--page .chargers-sidebar {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 12px;
    left: 12px;
    width: min(250px, calc(100% - 168px));
    height: auto;
    z-index: 6;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
  }

  .chargers-embed--page .chargers-sidebar > * {
    pointer-events: auto;
  }

  .chargers-embed--page .chargers-panel-toolbar {
    padding: 14px 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .chargers-embed--page .chargers-map-shell .chargers-map {
    height: calc(100dvh - var(--site-header-height, 72px)) !important;
    min-height: 480px !important;
  }
}

.chargers-embed--model .chargers-panel-body--embed .chargers-map-shell .chargers-map {
  height: min(62vh, 620px);
  min-height: 420px;
}

.chargers-embed--model.is-expanded .chargers-panel-body--embed .chargers-map-shell .chargers-map {
  height: min(72vh, 760px);
  min-height: 520px;
}

.chargers-list-outer.is-fs-sheet.is-sheet-collapsed {
  height: 120px;
}

.chargers-list-outer.is-fs-sheet.is-sheet-expanded {
  height: min(46vh, 420px);
}

.chargers-list-outer.is-fs-sheet.is-sheet-expanded .charger-list-item {
  padding: 6px 8px;
  gap: 8px;
}

.chargers-list-outer.is-fs-sheet.is-sheet-expanded .charger-list-thumb-wrap {
  width: 36px;
  height: 36px;
}

.chargers-list-outer.is-fs-sheet.is-sheet-expanded .charger-list-title {
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chargers-list-outer.is-fs-sheet.is-sheet-expanded .charger-list-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.chargers-station-list > .chargers-show-more-bar {
  position: static;
  z-index: 1;
  margin: 8px 0 4px;
  height: auto;
  padding: 0 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.chargers-station-list > .chargers-show-more-bar .btn {
  pointer-events: auto;
}

.chargers-station-list > .chargers-show-more-bar[hidden] {
  display: none !important;
  margin: 0;
  height: 0;
  padding: 0;
}

.charger-list-item.is-fading-in {
  animation: chargerItemFade 0.35s ease;
}

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

html[data-color-mode="dark"] .chargers-embed .chargers-sidebar,
html[data-color-mode="dark"] .chargers-embed .chargers-list-outer {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(148, 163, 184, 0.2);
}

.chargers-panel-toolbar,
.chargers-embed--page .chargers-panel-toolbar,
.chargers-embed:not(.chargers-embed--page) .chargers-panel-toolbar {
  position: relative;
  padding-right: 44px;
}

.chargers-toolbar-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: var(--color-heading, #0f172a);
  cursor: pointer;
}

.chargers-toolbar-notch {
  display: none;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.chargers-toolbar-toggle-x {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
}

.chargers-sidebar.is-filters-collapsed .chargers-panel-toolbar > :not(.chargers-toolbar-toggle) {
  display: none;
}

.chargers-sidebar.is-filters-collapsed .chargers-panel-toolbar {
  width: 44px;
  min-height: 36px;
  height: 36px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.chargers-sidebar.is-filters-collapsed .chargers-toolbar-toggle {
  position: static;
  width: 36px;
  height: 28px;
  background: transparent;
}

.chargers-sidebar.is-filters-collapsed .chargers-toolbar-toggle-x {
  display: none;
}

.chargers-sidebar.is-filters-collapsed .chargers-toolbar-notch {
  display: block;
}

.chargers-embed--page .chargers-sidebar.is-filters-collapsed .chargers-sidebar-head {
  display: none;
}

@media (max-width: 980px) {
  .chargers-sidebar.is-filters-collapsed,
  .chargers-embed--page .chargers-sidebar.is-filters-collapsed {
    width: auto !important;
    max-width: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

html[data-color-mode="dark"] .chargers-sidebar.is-filters-collapsed .chargers-panel-toolbar,
html[data-color-mode="dark"] .chargers-toolbar-toggle {
  background: rgba(15, 23, 42, 0.92);
  color: #e5e7eb;
}

/* Selected station card stays in one screen corner while the map moves. */
.charger-detail-sheet--fixed {
  left: auto;
  top: auto;
  right: 16px;
  bottom: 16px;
  width: min(320px, calc(100% - 32px));
  max-width: 340px;
  transform: none;
}

.charger-detail-sheet--fixed.charger-detail-sheet--above,
.charger-detail-sheet--fixed.charger-detail-sheet--above.is-visible,
.charger-detail-sheet--fixed.charger-detail-sheet--above.is-opening {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  width: min(340px, calc(100vw - 32px)) !important;
  max-width: 340px !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
  z-index: 1700 !important;
}

.charger-detail-sheet--above .charger-detail-sheet-card {
  max-height: inherit;
  box-sizing: border-box;
}

@media (min-width: 981px) {
  .chargers-embed--page .charger-detail-sheet--fixed.charger-detail-sheet--above,
  .chargers-embed--page .charger-detail-sheet--fixed.charger-detail-sheet--above.is-visible,
  .chargers-embed--page .charger-detail-sheet--fixed.charger-detail-sheet--above.is-opening {
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 360px !important;
  }
}

@media (max-width: 980px) {
  .charger-detail-sheet--fixed:not(.charger-detail-sheet--above),
  .chargers-embed--page .charger-detail-sheet--fixed:not(.charger-detail-sheet--above) {
    top: 12px;
    right: 64px;
    bottom: auto;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

/* Map dock, modelled on the ajmo.ba sidebar: one floating panel over a full-bleed map. */
@media (min-width: 981px) {
  .chargers-embed--page .chargers-sidebar {
    top: 14px;
    left: 14px;
    bottom: 14px;
    height: auto;
    max-height: none;
    width: min(380px, 34vw);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(248, 250, 252, 0.97);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  }

  .chargers-embed--page .chargers-sidebar-head,
  .chargers-embed--page .chargers-panel-toolbar,
  .chargers-embed--page .chargers-sidebar .chargers-list-wrap,
  .chargers-embed--page .chargers-list-outer,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-expanded,
  .chargers-embed--page .chargers-show-more-bar,
  .chargers-embed--page .chargers-list-outer > .chargers-show-more-bar,
  .chargers-embed--page .chargers-sidebar > .chargers-show-more-bar {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    max-height: none;
  }

  .chargers-embed--page .chargers-list-outer,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet {
    flex: 1 1 auto;
    min-height: 0;
  }

  .chargers-embed--page .chargers-station-list {
    max-height: none;
    overflow-y: auto;
  }

  .chargers-embed--page .chargers-search input,
  .chargers-embed--page .chargers-city-filter select {
    border-radius: 12px;
    min-height: 44px;
  }
}

html[data-color-mode="dark"] .chargers-embed--page .chargers-sidebar {
  background: #11161f;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  color: #f3f6fa;
}

html[data-color-mode="dark"] .chargers-embed--page .chargers-sidebar-title,
html[data-color-mode="dark"] .chargers-embed--page .charger-list-title {
  color: #f3f6fa;
}

html[data-color-mode="dark"] .chargers-embed--page .chargers-sidebar-meta,
html[data-color-mode="dark"] .chargers-embed--page .chargers-count,
html[data-color-mode="dark"] .chargers-embed--page .charger-list-meta {
  color: #8794a6;
}

html[data-color-mode="dark"] .chargers-embed--page .chargers-search input,
html[data-color-mode="dark"] .chargers-embed--page .chargers-city-filter select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f3f6fa;
}

html[data-color-mode="dark"] .chargers-embed--page .charger-list-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-color-mode="dark"] .chargers-embed--page .chargers-list-outer.is-fs-sheet {
  background: #11161f;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f3f6fa;
}

.chargers-count--home {
  display: none;
}

@media (max-width: 980px) {
  .chargers-embed--page .chargers-panel-toolbar {
    display: none;
  }

  .chargers-embed--page .chargers-sheet-handle-label {
    display: none;
  }

  .chargers-embed--page .chargers-list-edge-toggle {
    display: none !important;
  }

  .chargers-embed--page .chargers-list-outer.is-fs-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
  }

  .chargers-embed--home .chargers-panel,
  .chargers-embed--home .chargers-attribution,
  .chargers-embed--model .chargers-panel,
  .chargers-embed--model .chargers-attribution {
    display: none;
  }

  .chargers-embed--home .chargers-count--home,
  .chargers-embed--model .chargers-count--home {
    display: block;
    margin: 8px 0 0;
  }

  .chargers-suggest-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-left: 4px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }

  .chargers-search--in-list {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px 8px;
  }

  .chargers-search--in-list .chargers-filter-label {
    display: none;
  }

  .chargers-search--in-list .search__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--color-text-muted);
  }

  .chargers-search--in-list input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  /* Menu toggle lives in the dock now — keep it visible on map pages. */

  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed {
    height: auto;
  }

  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-list-wrap,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-station-list,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-show-more-bar,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-empty,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-collapsed .chargers-no-results {
    display: none !important;
  }

  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-expanded .chargers-station-list,
  .chargers-embed--page .chargers-list-outer.is-fs-sheet.is-sheet-mid .chargers-station-list {
    display: flex !important;
  }

  .chargers-embed--page .chargers-panel-toolbar {
    border-radius: 12px;
  }
}

.ev-blog-popup {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1800;
  width: min(360px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: var(--color-surface, #fff);
  color: var(--color-text, #0f172a);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
}

.ev-blog-popup[hidden] {
  display: none;
}

.ev-blog-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}

.ev-blog-popup-kicker {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary, #1d4ed8);
}

.ev-blog-popup h2 {
  margin: 0 28px 8px 0;
  font-size: 1.15rem;
}

.ev-blog-popup p {
  margin: 0 0 14px;
}

.ev-blog-popup .btn {
  width: 100%;
}

@media (min-width: 981px) {
  .chargers-embed--page .chargers-sidebar {
    pointer-events: auto;
  }

  .chargers-embed--page .chargers-map-shell > .chargers-sidebar-collapse {
    position: absolute;
    z-index: 80;
    top: 22px;
    left: calc(14px + min(380px, 34vw) - 48px);
    display: inline-flex;
    pointer-events: auto;
  }

  .chargers-embed--page .chargers-map-shell.is-list-closed > .chargers-sidebar,
  .chargers-embed--page .chargers-map-shell.is-list-closed > .chargers-sidebar-collapse,
  .chargers-embed--page .chargers-sidebar-collapse[hidden] {
    display: none !important;
  }

  .chargers-embed--page .chargers-map-shell.is-list-closed > .chargers-sidebar-reopen,
  .chargers-embed--page .chargers-map-shell.is-list-closed .chargers-sidebar-reopen:not([hidden]) {
    display: inline-flex !important;
    pointer-events: auto;
    z-index: 80;
  }
}

/* blog.css */
.blog-page,
.blog-article,
.blog-related {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}

.blog-hero {
  margin-bottom: 22px;
}

.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.blog-cat {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.blog-cat.is-active,
.blog-cat:hover {
  background: var(--gradient-btn, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%));
  color: #fff;
  border-color: transparent;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.blog-grid--related {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm, 0 8px 20px rgba(15, 23, 42, 0.06));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.blog-card-image {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-well, #eef2f7);
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.blog-card-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, var(--color-primary));
}

.blog-card-body h2,
.blog-card-body h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-heading);
}

.blog-card-body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.blog-card-body time {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-text-subtle, #64748b);
}

.blog-empty,
.blog-source {
  color: var(--color-text-muted);
}

.blog-source {
  margin-top: 28px;
  font-size: 13px;
}

.blog-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.blog-more .btn {
  min-width: min(280px, 100%);
  min-height: 46px;
}

.blog-card--enter {
  opacity: 0;
  transform: translateY(16px);
  animation: blogCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.blog-card--enter.is-in,
.blog-card--enter:nth-child(n) {
  animation-delay: 0.04s;
}

@keyframes blogCardIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.blog-proauto {
  position: sticky;
  top: calc(var(--site-header-height, 72px) + 16px);
  padding: 22px 20px 20px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--gradient-panel, var(--color-surface));
  box-shadow: var(--shadow-sm);
}

.blog-proauto-close {
  display: none;
}

.blog-proauto-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, var(--color-primary));
}

.blog-proauto h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.blog-proauto p {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-size: 0.95rem;
}

.blog-proauto .btn {
  width: 100%;
}

.blog-article-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.blog-article-meta {
  color: var(--color-text-muted);
}

.blog-article-cover {
  margin: 18px 0 24px;
  border-radius: 18px;
  overflow: hidden;
}

.blog-article-cover img {
  width: 100%;
  display: block;
}

.blog-article-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
}

.blog-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.blog-article-body h2,
.blog-article-body h3 {
  margin-top: 1.6em;
  color: var(--color-heading);
}

.blog-related {
  padding-top: 0;
}

.blog-related h2 {
  margin: 0 0 16px;
}

.blog-home-section {
  width: 100%;
  margin: 24px 0 48px;
  padding: 0 clamp(16px, 3vw, 40px);
}

.blog-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: min(1400px, 96vw);
  margin: 0 auto;
}

.blog-home-more {
  text-align: center;
  margin: 8px 0 28px;
}

.blog-home-more a {
  font-weight: 800;
  color: var(--color-primary, var(--color-primary));
  text-decoration: none;
}

@media (max-width: 980px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-proauto {
    height: 200px;
    position: fixed;
    right: 12px;
    bottom: calc(var(--dock-height, 68px) + 16px);
    z-index: 40;
    width: min(280px, calc(100vw - 24px));
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-md, 0 16px 36px rgba(15, 23, 42, 0.22));
    animation: blogNoteIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .blog-proauto.is-closing {
    animation: blogNoteOut 0.2s ease forwards;
  }

  .blog-proauto-close {
    display: flex;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-section, #f1f5f9);
    color: var(--color-heading);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .blog-proauto h2 {
    padding-right: 28px;
    font-size: 1.15rem;
  }

  .blog-proauto p {
    font-size: 0.88rem;
    margin-bottom: 12px;
  }
}

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

@keyframes blogNoteOut {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (max-width: 1100px) {
  .blog-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .blog-home-section {
    padding: 0 0 28px;
  }
}

@media (max-width: 560px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .blog-home-grid .blog-card-body h3 {
    font-size: 0.92rem;
  }
}

/* model-cards.css */
.brand-details-section {
  padding: 24px 20px 48px;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
  min-height: 100vh;
}

.brand-header {
  background: var(--color-surface);
  padding: 15px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.brand-img-container {
  width: 200px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-well);
  border-radius: 8px;
}

.brand-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-title {
  font-size: 48px;
  margin: 0;
  font-weight: 700;
  text-align: center;
}

.model-page-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.model-title {
  font-size: 48px;
  color: var(--color-text);
  margin: 0;
  font-weight: 700;
}

.models-section {
  max-width: 1400px;
  margin: 0 auto;
}

.models-title {
  padding-top: 8px;
  font-size: 2rem;
  color: var(--color-text);
  margin: 0 0 28px 0;
  font-weight: 700;
  text-align: center;
}

/* Full-width model cards grid */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
  padding: 0 20px;
}

.model-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
}

.model-card-image img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.generation-card {
  text-decoration: none;
  color: var(--color-text);
}

.generation-card:hover,
.model-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-primary);
}

.model-card-content {
  padding: 15px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.model-card-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.no-models {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--color-text-subtle);
  font-size: 16px;
}

.breadcrumb-row {
  max-width: 1200px;
  margin: 0 auto 10px;
  padding-top: 20px;
  padding-bottom: 0px;
  font-size: 14px;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.breadcrumb-link {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb-link:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-subtle);
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: 600;
}

.model-page-header {
  max-width: 1200px;
  margin: 0 auto 5px;
  padding: 0 20px;
  text-align: center;
}

.model-title {
  font-size: 44px;
  color: var(--color-text);
  margin: 0;
  font-weight: 700;
}

.model-subtitle {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 16px;
}

.generation-section {
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  padding: 0 20px;
  background: transparent;
}

.generation-title {
  font-size: 32px;
  color: var(--color-text);
  margin: 0 0 24px;
  font-weight: 600;
  text-align: center;
}

.chassis-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}

.filter-button {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-size: 14px;
}

.filter-button:hover,
.filter-button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.generation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  overflow-anchor: none;
}

@media (min-width: 769px) {
  .generation-grid[data-visible-count="1"] {
    grid-template-columns: minmax(280px, 360px);
    justify-content: center;
  }

  .generation-grid[data-visible-count="2"] {
    grid-template-columns: repeat(2, minmax(280px, 360px));
    justify-content: center;
  }

  .generation-grid[data-visible-count="3"] {
    grid-template-columns: repeat(3, minmax(280px, 360px));
    justify-content: center;
  }

  .generation-grid:has(.generation-card.expanded) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }
}

.generation-card {
  background-color: var(--color-surface);
  border-radius: 18px;
  border: 1px solid var(--color-border-light);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  width: auto;
  max-width: 100%;
}

.generation-card.highlighted {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25), 0 10px 22px rgba(0, 0, 0, 0.1);
}

.generation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(var(--color-primary-rgb), 0.12);
}

.generation-card.expanded:hover {
  transform: none;
}

.generation-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-section);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.generation-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transition: transform 0.3s ease;
}

.generation-card.expanded .generation-card-thumb,
.generation-card.hide-thumb-when-open .generation-card-thumb {
  display: none;
}

.generation-card.expanded .generation-name,
.generation-card.expanded .generation-count,
.generation-card.expanded .generation-price,
.generation-card.expanded .generation-card-body .admin-controls {
  display: none;
}

.generation-card.expanded .generation-card-body {
  display: none;
}

.generation-card.expanded .generation-expanded-header {
  display: block;
}

.generation-card-actions {
  padding: 0 16px 16px;
  margin-top: 12px;
}

.generation-more-hint {
  display: none;
  margin: 0;
  padding: 4px 16px 16px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.generation-card.expanded .generation-more-hint {
  display: block;
}

.generation-card.expanded .generation-card-actions {
  padding: 16px;
  margin-top: 0;
  border-top: 1px solid var(--color-border-light);
  background: transparent;
}

.generation-card.expanded .variant-list.open {
  margin-top: 0;
  max-height: none;
  overflow-x: auto;
}

@media (min-width: 769px) {
  .generation-card.expanded {
    grid-column: 1 / -1;
    order: -1;
    width: 100%;
    max-width: none;
    margin: 0;
    justify-self: stretch;
  }

  .generation-grid:has(.generation-card.expanded) .generation-card:not(.expanded) {
    width: auto;
    max-width: 100%;
  }
}

.generation-expanded-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.generation-expanded-header-copy {
  min-width: 0;
  flex: 1;
}

.generation-close-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-section, #f8fafc);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.generation-close-btn:hover {
  border-color: rgba(var(--color-primary-rgb), 0.35);
  color: var(--color-primary);
}

.generation-card.expanded .generation-close-btn {
  display: inline-flex;
}

.generation-expanded-header {
  display: none;
  padding: 24px 28px 16px;
  text-align: center;
  background: transparent;
  border-bottom: 1px solid var(--color-border-light);
}

.generation-expanded-title {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.generation-expanded-subtitle {
  margin: 10px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.generation-expanded-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 18px 0 0;
  padding: 0;
  text-align: left;
}

.generation-expanded-meta-item {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: var(--color-surface-section, var(--color-surface-soft, #f8fafc));
}

.generation-expanded-meta-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.generation-expanded-meta-value {
  display: block;
  margin: 6px 0 0;
  margin-inline-start: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-heading);
  word-break: break-word;
}

.generation-card:not(.expanded) {
  display: flex;
  flex-direction: column;
}

.generation-card-body {
  padding: 20px 16px 16px;
  text-align: center;
  box-sizing: border-box;
}

.generation-card:not(.expanded) .generation-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.generation-name {
  font-size: 20px;
  margin: 0 0 10px;
  padding: 0 4px;
  color: var(--color-text);
  line-height: 1.35;
  word-break: break-word;
  hyphens: auto;
}

.generation-card:not(.expanded) .generation-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.generation-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

.generation-price {
  margin: 14px 0 0;
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 700;
  color: var(--color-text);
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}

.generation-card:not(.expanded) .generation-price {
  margin-top: auto;
}

.show-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  border: none;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.22) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 3;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  box-shadow: none;
}

.show-more-button:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.28);
}

.generation-card.expanded {
  grid-column: 1 / -1;
  order: -1;
}

.generation-card.hidden {
  display: none;
}

.news-section {
  max-width: 1400px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.news-title {
  font-size: 28px;
  color: var(--color-text);
  margin: 0 0 20px;
  font-weight: 600;
  text-align: center;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.news-card {
  background-color: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.12);
}

.news-grid .news-card-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 140px;
  background-color: var(--color-surface-well);
  overflow: hidden;
}

.news-grid .news-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 0.4s ease;
}

.news-card:hover .news-card-image img {
  transform: scale(1.12);
}

.news-card-title {
  font-size: 16px;
  margin: 0;
  padding: 14px 16px 18px;
  color: var(--color-text);
  line-height: 1.4;
  flex-grow: 1;
  font-weight: 600;
}

.news-hypermiling-note {
  margin: 28px 0 16px;
  text-align: center;
  font-weight: 700;
  color: var(--color-heading);
}

.news-grid--standout {
  display: flex;
  justify-content: center;
}

.news-grid--standout .news-card {
  width: min(360px, 100%);
}

.news-card--hypermiling {
  outline: 2px solid rgba(var(--color-primary-rgb), 0.55);
  box-shadow: 0 8px 22px rgba(var(--color-primary-rgb), 0.16);
}

.news-card--hypermiling .news-card-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-section-footer {
  margin-top: 24px;
  text-align: center;
}

.news-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.35);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.news-more-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--color-primary-rgb), 0.6);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.12);
}

.toggle-button {
  display: none;
}

.toggle-button:hover {
  background: var(--color-primary-hover);
}

.variant-list {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

.variant-list:not(.open) {
  margin-top: 0 !important;
}

.generation-card:not(.expanded) .generation-card-actions {
  margin-top: 8px;
}

.variant-list.open {
  max-height: none;
  opacity: 1;
  margin-top: 20px;
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.generation-model-ad {
  display: none;
  position: relative;
  width: 625px;
  max-width: calc(100% - 32px);
  margin: 16px auto 8px;
  flex: 0 0 auto;
}

.generation-card.expanded .generation-model-ad {
  display: block;
}

.generation-model-ad img {
  margin: 0 auto;
}

.generation-model-ad-slide {
  display: none;
}

.generation-model-ad-slide.is-active {
  display: block;
}

.generation-model-ad img {
  display: block;
  width: 625px;
  max-width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
}

.variant-headers {
  display: grid;
  grid-template-columns: var(--variant-cols, minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr));
  gap: 12px;
  padding: 16px 18px;
  background-color: var(--color-surface-section);
  border-radius: 8px 8px 0 0;
  border: 1px solid #e8e8f0;
  border-bottom: 2px solid var(--color-primary);
  font-weight: 700;
  color: var(--color-text);
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}

.variant-headers.no-displacement {
  grid-template-columns: var(--variant-cols, minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr));
}

.variant-header-name {
  text-align: left;
}

.variant-header-col {
  text-align: center;
}

.variant-header-consumption {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-right: 26px;
}

.variant-consumption-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  max-width: 100%;
}

.variant-consumption-switch-label {
  font-weight: 700;
  line-height: 1.2;
}

.variant-consumption-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.variant-consumption-arrow:hover,
.variant-consumption-arrow:focus-visible {
  color: var(--color-primary);
  outline: none;
}

.variant-consumption-switch--mobile {
  display: none;
}

.variant-header-consumption .spec-wltp-wrap {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.generation-card .spec-wltp-popover:not(.is-floating),
.variant-list .spec-wltp-popover:not(.is-floating) {
  display: none !important;
}

.variant-items {
  border: none;
  border-radius: 0 0 8px 8px;
  width: 100%;
  box-sizing: border-box;
}

.variant-wltp {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted, #667);
  line-height: 1.3;
}

.variant-wltp span {
  font-weight: 400;
  opacity: 0.8;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .generation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .generation-card-body {
    padding: 16px 14px 14px;
  }

  .generation-name {
    font-size: 18px;
    padding: 0 2px;
  }

  .generation-count {
    font-size: 14px;
  }

  .generation-price {
    font-size: 17px;
    width: 100%;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: unset;
  }

  .show-more-button {
    padding: 8px 16px;
    font-size: 14px;
    min-width: 0;
    width: 100%;
  }

  .generation-expanded-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .generation-grid {
    grid-template-columns: 1fr;
  }
}

.variant-item {
  padding: 16px 18px;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  background: var(--color-surface-soft);
  display: grid;
  grid-template-columns: var(--variant-cols, minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.variant-item.no-displacement {
  grid-template-columns: var(--variant-cols, minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr));
}

.variant-item:last-child {
  border-bottom: none;
}

.variant-item.highlighted-variant {
  border: 2px solid #0f766e;
  background: #ecfdf5;
}

.variant-header-name,
.variant-header-col,
.variant-name-col,
.variant-stat-col,
.variant-price-col,
.variant-action-price-col {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.variant-name-col {
  font-size: 17px;
  color: var(--color-text);
  font-weight: 600;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
  line-height: 1.3;
}

.variant-list--compact .variant-headers {
  display: grid;
  grid-template-columns: var(--variant-cols, minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr));
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.variant-list--compact .variant-spec-list {
  display: block;
  padding: 0;
}

.variant-list--compact .variant-spec-item,
.variant-item.variant-spec-item {
  display: grid;
  grid-template-columns: var(--variant-cols, minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr));
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 0;
  background: var(--color-surface-soft);
  box-shadow: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.variant-list--compact .variant-spec-item:last-child {
  border-bottom: none;
}

.variant-list--compact .variant-name-col {
  display: block;
  min-height: 0;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  font-size: 15px;
  font-weight: 700;
}

.variant-spec-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--color-heading);
}

.variant-spec-name {
  min-width: 0;
}

.variant-spec-oprema {
  display: none;
  margin-top: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.variant-list--compact .variant-wltp {
  margin-top: 4px;
}

.variant-mobile-chips {
  display: none;
}

.variant-list--compact .ev-badge {
  flex: 0 0 auto;
  font-size: 0.68rem;
  padding: 2px 6px;
}

.variant-list--compact .variant-admin-controls {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.generation-card.expanded .variant-list--compact.open,
.variant-list--compact.open {
  max-height: none;
  overflow: visible;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .variant-list--compact .variant-headers,
  .variant-list--compact .variant-spec-item,
  .variant-item.variant-spec-item {
    gap: 8px;
    padding: 12px 12px;
  }

  .variant-list--compact .variant-headers {
    font-size: 12px;
  }
}

.variant-stat-col {
  font-size: 16px;
  color: var(--color-text-muted);
  text-align: center;
  white-space: normal;
}

.variant-price-col {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  white-space: normal;
}

.variant-action-price-col {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-success, #15803d);
  white-space: normal;
}

/* Desktop: children stay in the variant grid columns. Mobile overrides to a stack. */
.variant-price-stack {
  display: contents;
}

.variant-actions {
  margin-top: 18px;
  display: none;
}

.variant-actions.visible {
  display: block;
}

.variant-sorting {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.variant-sorting label {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-right: 6px;
}

.sort-field,
.sort-order {
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
}

.sort-field {
  width: 150px;
}

.sort-order {
  width: 140px;
}

.sort-button {
  border: none;
  background: var(--color-primary);
  color: white;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.sort-button:hover {
  background: var(--color-primary-hover);
}
.no-variants {
  color: var(--color-text-muted);
  margin-top: 16px;
}

/* Gallery styles */
.model-gallery-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gallery-main {
  height: 400px;
  display: block;
  background: var(--color-surface-section);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: height 0.35s ease, box-shadow 0.35s ease;
}

.gallery-main > .gallery-track {
  width: 100%;
  height: 100%;
}

.gallery-main.non-premium {
  display: block;
}

.gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.gallery-track.is-animating {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-slide .gallery-main-image {
  width: 100%;
  height: 100%;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.35s ease;
  z-index: 10;
  opacity: 1;
}

.gallery-main.is-arrows-idle .gallery-arrow {
  opacity: 0.18;
}

.gallery-main:hover .gallery-arrow,
.gallery-main.is-arrows-idle:hover .gallery-arrow {
  opacity: 1;
}

.gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
}

.gallery-prev {
  left: 20px;
}

.gallery-next {
  right: 20px;
}

.gallery-main-image {
  width: 100%;
  object-fit: contain;
  object-position: center;
  background-color: transparent;
  cursor: pointer;
  height: 400px;
  border-radius: 0;
  transition: transform 0.2s ease;
}

.gallery-main-image:hover {
  transform: scale(1.02);
}

.gallery-thumbnails {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0;
}

.gallery-thumbnail,
button.gallery-thumbnail {
  width: 100px;
  height: 80px;
  padding: 0;
  object-fit: contain;
  background-color: var(--color-surface-well);
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

button.gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.gallery-thumbnail-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gallery-thumbnail:hover {
  border-color: var(--color-primary);
}

.gallery-thumbnail.active {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

@media (max-width: 768px) {
  .gallery-thumbnail.gallery-thumbnail-skip-mobile {
    display: none;
  }
}

/* Lightbox styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

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

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.lightbox-close:hover {
  color: #ddd;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.35s ease;
  z-index: 10001;
  opacity: 1;
}

.lightbox.is-arrows-idle .lightbox-arrow {
  opacity: 0.18;
}

.lightbox-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Model description section */
.model-description-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  line-height: 1.8;
  color: var(--color-text);
}

.description-content {
  font-size: 16px;
  overflow: hidden;
  max-height: calc(1.8 * 16px * 4 + 20px);
  transition: max-height 0.3s ease;
}

.description-content.expanded {
  max-height: none;
}

.description-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.2s ease, color 0.2s ease;
}

.description-toggle-button:hover {
  background: var(--color-primary);
  color: white;
}

/* Show toggle button only on desktop */
.toggle-button {
  display: none;
}

@media (min-width: 769px) {
  .toggle-button {
    display: inline-block;
  }
}

/* Responsive design */
@media (max-width: 1024px) {
  .brand-header {
    padding: 30px;
  }

  .brand-title {
    font-size: 36px;
  }

  .models-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
  }

  .generation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .generation-card.expanded {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .generation-grid {
    grid-template-columns: 1fr;
  }
  .brand-details-section {
    padding: 30px 15px;
  }

  .brand-header {
    padding: 25px;
    margin-bottom: 30px;
  }

  .brand-img-container {
    width: 150px;
    height: 120px;
  }

  .brand-title {
    font-size: 28px;
  }

  .models-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .models-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }

  .model-card-image {
    height: 210px;
  }

  .model-card-name {
    font-size: 20px;
  }

  .gallery-main-image {
    height: 300px;
  }

  .gallery-thumbnail {
    width: 80px;
    height: 60px;
  }

  .model-description-section {
    padding: 20px;
    margin: 30px auto;
  }

  .description-content {
    font-size: 14px;
  }
}

/* Tablet adjustments (1024px - 768px) */
@media (max-width: 1024px) {
  .model-page-header {
    padding: 0 15px;
  }

  .model-title {
    font-size: 36px;
  }

  .model-subtitle {
    font-size: 15px;
  }

  .generation-title {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .filter-button {
    padding: 14px 24px;
    font-size: 15px;
  }

  .generation-card-body {
    padding: 18px 16px 16px;
  }

  .generation-name {
    font-size: 18px;
  }

  .generation-price {
    font-size: 17px;
  }

  .show-more-button {
    padding: 12px 24px;
    font-size: 14px;
    min-width: 140px;
  }

  .variant-name-col {
    font-size: 15px;
  }

  .variant-stat-col {
    font-size: 14px;
  }

  .variant-price-col,
  .variant-action-price-col {
    font-size: 16px;
  }
}

/* Mobile - Medium screens (768px - 480px) */
@media (max-width: 768px) {
  .brand-details-section {
    padding: 25px 15px;
  }

  .brand-header {
    padding: 25px;
    margin-bottom: 30px;
    gap: 15px;
  }

  .brand-img-container {
    width: 150px;
    height: 120px;
  }

  .brand-title {
    font-size: 28px;
  }

  .model-page-header {
    margin: 0 auto 25px;
    padding: 0 15px;
  }

  .model-title {
    font-size: 38px;
  }

  .model-subtitle {
    font-size: 14px;
  }

  .breadcrumb-row {
    padding: 0 15px;
    font-size: 12px;
  }

  .generation-section {
    padding: 0 15px;
  }

  .generation-title {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .chassis-filter-row {
    gap: 12px;
    margin-bottom: 24px;
  }

  .filter-button {
    padding: 13px 22px;
    font-size: 14px;
    min-height: 44px;
  }

  .generation-grid {
    gap: 18px;
  }

  .generation-card-thumb {
    height: auto;
  }

  .generation-card-body {
    padding: 16px 14px 14px;
  }

  .generation-name {
    font-size: 20px;
    padding: 0 2px;
  }

  .generation-count {
    font-size: 14px;
  }

  .show-more-button {
    padding: 12px 22px;
    font-size: 16px;
    min-width: 0;
    width: 100%;
    min-height: 44px;
  }

  .generation-price {
    font-size: 19px;
    width: 100%;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: unset;
  }

  /* Variant table - switch to vertical card layout on mobile */
  .variant-headers {
    display: none;
  }

  .variant-consumption-switch--mobile {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
    font-size: 13px;
  }

  .variant-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-surface);
  }

  .variant-list.open {
    margin-top: 12px;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    width: 100%;
  }

  .variant-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 0;
    margin-bottom: 0;
    background: var(--color-surface);
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
  }

  .variant-item:last-child {
    border-bottom: none;
  }

  .variant-name-col {
    font-size: 17px;
    width: 100%;
    font-weight: 700;
    color: var(--color-text);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
  }

  .variant-list--compact .variant-headers {
    display: none;
  }

  .variant-list--compact .variant-spec-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 10px 10px;
  }

  .variant-list--compact .variant-spec-item,
  .variant-item.variant-spec-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px 12px;
    padding: 12px 14px;
    margin: 0;
    border: 1px solid #454647;
    border-radius: 14px;
    border-color: #454647 !important;
    border-bottom: 1px solid #454647;
    box-shadow: none;
    background: var(--color-surface);
  }

  .variant-list--compact .variant-name-col,
  .variant-list--compact .variant-mobile-chips,
  .variant-list--compact .variant-admin-controls {
    grid-column: 1 / -1;
  }

  .variant-list--compact .variant-spec-item:last-child {
    border-bottom: 1px solid var(--color-border-strong);
  }

  .variant-list--compact .variant-name-col {
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.02rem;
  }

  .variant-list--compact .variant-spec-title {
    font-size: 1.02rem;
  }

  .variant-list--compact .variant-spec-oprema {
    display: block;
  }

  .variant-list--compact .variant-col-desktop {
    display: none !important;
  }

  .variant-list--compact .variant-mobile-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }

  .variant-list--compact .variant-spec-chip {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--color-surface-section);
    border: 1px solid var(--color-border);
  }

  .variant-list--compact .variant-spec-chip:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .variant-list--compact .variant-spec-chip-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .variant-list--compact .variant-spec-chip-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-heading);
    line-height: 1.2;
  }

  .variant-list--compact .variant-price-stack {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  .variant-list--compact .variant-action-price-col.is-empty {
    display: none !important;
  }

  .variant-list--compact .variant-price-col,
  .variant-list--compact .variant-action-price-col {
    width: 100%;
    font-size: 16px;
  }

  .variant-stat-col {
    font-size: 14px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
  }

  .variant-stat-col::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text);
  }

  .variant-price-col {
    font-size: 17px;
    width: 100%;
    color: var(--color-text);
    display: flex;
    justify-content: space-between;
    font-weight: 700;
  }

  .variant-price-col::before {
    content: "Cijena:";
    font-weight: 600;
    color: var(--color-text);
  }

  .variant-action-price-col {
    font-size: 16px;
    width: 100%;
    color: var(--color-success, #15803d);
    display: flex;
    justify-content: space-between;
    font-weight: 700;
  }

  .variant-action-price-col::before {
    content: "Akcijska cijena:";
    font-weight: 600;
    color: var(--color-success, #15803d);
  }

  .variant-price-col.is-struck .variant-price-value {
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-weight: 600;
  }

  /* Gallery adjustments */
  .model-gallery-section {
    margin: 5px auto 0;
    padding: 0 15px;
  }

  .gallery-arrow {
    display: none !important;
  }

  .gallery-main {
    height: 360px;
  }

  .gallery-main.non-premium {
    height: 200px;
  }

  .gallery-main.non-premium .gallery-main-image {
    height: 200px;
  }

  .gallery-main-image {
    height: 360px;
  }

  .gallery-main-image:hover {
    transform: none;
  }

  .gallery-main.non-premium .gallery-main-image {
    height: 200px;
  }

  .gallery-thumbnails {
    gap: 10px;
    padding: 10px 0;
  }

  .gallery-thumbnail {
    width: 80px;
    height: 60px;
  }

  /* Description adjustments */
  .model-description-section {
    margin: 30px auto;
    padding: 20px;
    max-width: none;
  }

  .description-content {
    font-size: 15px;
    line-height: 1.7;
  }

  .description-toggle-button {
    padding: 10px 18px;
    font-size: 14px;
    min-height: 44px;
  }

  /* News section */
  .news-section {
    padding: 0 15px;
  }

  .news-title {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .news-grid {
    gap: 16px;
  }

  .news-card {
    padding: 16px;
  }

  .news-card-image {
    height: 140px;
    margin-bottom: 12px;
  }

  .news-card-title {
    font-size: 15px;
    padding: 14px 10px 10px;
  }

  .news-card-image img,
  .news-card:hover .news-card-image img {
    transform: none;
  }
}

/* Mobile - Small screens (480px and below) */
@media (max-width: 480px) {
  .brand-details-section {
    padding: 18px 12px;
  }

  .brand-header {
    padding: 18px;
    margin-bottom: 24px;
    gap: 12px;
  }

  .brand-img-container {
    width: 110px;
    height: 90px;
  }

  .brand-title {
    font-size: 24px;
  }

  .model-page-header {
    margin: 0 auto;
    padding: 0 12px;
  }

  .model-title {
    font-size: 34px;
    line-height: 1.2;
  }

  .model-subtitle {
    font-size: 13px;
    margin-top: 6px;
  }

  .breadcrumb-row {
    padding: 0 12px;
    font-size: 11px;
    gap: 6px;
    margin-bottom: 12px;
  }

  .generation-section {
    padding: 0 12px;
  }

  .generation-title {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .chassis-filter-row {
    gap: 10px;
    margin-bottom: 20px;
  }

  .filter-button {
    padding: 12px 16px;
    font-size: 13px;
    min-height: 44px;
    border-radius: 20px;
  }

  .generation-grid {
    gap: 14px;
  }

  .generation-card-thumb {
    height: auto;
  }

  .generation-card-body {
    padding: 14px 12px 12px;
  }

  .generation-name {
    font-size: 18px;
    margin-bottom: 8px;
    padding: 0 2px;
  }

  .generation-count {
    font-size: 13px;
  }

  .show-more-button {
    padding: 12px 18px;
    font-size: 13px;
    min-width: 0;
    width: 100%;
    min-height: 44px;
    text-align: center;
  }

  .generation-price {
    font-size: 18px;
    width: 100%;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: unset;
  }

  .generation-card.expanded {
    grid-column: span 1;
  }

  /* Variant list adjustments for very small screens */
  .variant-list.open {
    max-height: 2000px;
  }

  .variant-item {
    padding: 12px 14px;
    gap: 6px;
    margin-bottom: 0;
  }

  .variant-name-col {
    font-size: 16px;
    padding-bottom: 5px;
  }

  /* Gallery adjustments */
  .model-gallery-section {
    margin: 0 auto;
    padding: 0 12px;
  }

  .gallery-main {
    border-radius: 8px;
    margin-bottom: 16px;
    height: 280px;
  }

  .gallery-main.non-premium {
    height: 200px;
  }

  .gallery-main.non-premium .gallery-main-image {
    height: 200px;
  }

  .gallery-main-image {
    height: 280px;
    border-radius: 8px;
  }

  .gallery-main.non-premium .gallery-main-image {
    height: 200px;
  }

  .gallery-thumbnails {
    gap: 8px;
    padding: 8px 0;
  }

  .gallery-thumbnail {
    width: 70px;
    height: 52px;
  }

  /* Description adjustments */
  .model-description-section {
    margin: 24px auto;
    padding: 16px;
    border-radius: 10px;
  }

  .description-content {
    font-size: 14px;
    line-height: 1.6;
    max-height: calc(1.6 * 14px * 5);
  }

  .description-toggle-button {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 44px;
  }

  /* News section */
  .news-section {
    padding: 0 12px;
    margin: 32px auto 0;
  }

  .news-title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .news-grid {
    gap: 14px;
  }

  .news-card {
    padding: 14px;
  }

  .news-card-image {
    height: 130px;
    margin-bottom: 10px;
    border-radius: 6px;
  }

  .news-card-title {
    font-size: 14px;
    line-height: 1.4;
    padding: 14px 10px 10px;
  }

  .news-card-image img,
  .news-card:hover .news-card-image img {
    transform: none;
  }

  /* Lightbox adjustments */
  .lightbox-close {
    font-size: 28px;
    top: 12px;
    right: 12px;
  }

  /* Sort controls - hide on very small screens to avoid clutter */
  .variant-sorting {
    flex-direction: column;
    gap: 8px;
  }

  .sort-field,
  .sort-order {
    width: 100%;
    padding: 11px 12px;
    font-size: 13px;
  }

  .sort-button {
    width: 100%;
    padding: 12px 16px;
    min-height: 44px;
    font-size: 13px;
  }
}

/* model-3d.css */
.model-3d-section {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 20px;
}

.model-3d-section--compact {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.model-visual-split {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
  gap: 20px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 20px;
}

.model-visual-split__item {
  min-width: 0;
}

.model-visual-split__item--3d {
  display: flex;
}

.model-visual-split__item--gallery .model-gallery-section {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.model-info-container--with-3d {
  grid-template-columns: minmax(300px, 420px) minmax(380px, 1fr);
}

.model-info-container--with-3d.model-info-container--single {
  grid-template-columns: minmax(300px, 420px) minmax(320px, 1fr);
}

.model-info-content {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(380px, 1fr);
  gap: 24px;
  min-width: 0;
}

.model-info-content--single {
  grid-template-columns: 1fr;
}

.model-info-3d-wrap {
  min-width: 0;
  align-self: stretch;
}

.model-info-3d-wrap .model-3d-section--compact {
  height: 100%;
}

.model-info-3d-wrap .model-3d-stage--compact {
  min-height: 100%;
  height: 100%;
}

.model-3d-header {
  margin-bottom: 14px;
}

.model-3d-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-heading, #0f172a);
}

.model-3d-hint {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted, #64748b);
}

.model-3d-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef2f7 0%, #e4eaf2 100%);
  border: 1px solid var(--color-border, #e2e8f0);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  min-height: 420px;
}

.model-3d-stage--compact {
  min-height: 360px;
  box-shadow: var(--shadow-sm, 0 8px 20px rgba(15, 23, 42, 0.08));
}

.model-3d-viewer {
  width: 100%;
  height: min(62vh, 520px);
  min-height: 360px;
  --poster-color: transparent;
  --progress-bar-color: var(--color-primary);
  --progress-bar-height: 3px;
}

.model-3d-viewer--compact {
  height: 100%;
  min-height: 360px;
  max-height: 520px;
}

.model-3d-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(15, 23, 42, 0.08);
}

.model-3d-progress-bar {
  height: 100%;
  background: var(--color-primary);
  width: 0%;
  transition: width 0.2s ease;
}

.model-3d-hotspot,
.model-3d-panel,
model-viewer button[slot^="hotspot-"] {
  display: none !important;
}

.model-3d-hotspot {
  position: relative;
  display: none !important;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.model-3d-hotspot:focus-visible .model-3d-hotspot-dot {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35);
}

.model-3d-hotspot-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.model-3d-hotspot-ring {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(var(--color-primary-rgb), 0.45);
  animation: model3d-pulse 2s ease-out infinite;
}

.model-3d-hotspot.is-active .model-3d-hotspot-dot {
  transform: scale(1.15);
  background: var(--color-primary-hover);
}

@keyframes model3d-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.model-3d-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
  padding: 16px 42px 16px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(8px);
  z-index: 5;
}

.model-3d-panel-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.model-3d-panel-close:hover {
  background: rgba(15, 23, 42, 0.06);
}

.model-3d-panel-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading, #0f172a);
}

.model-3d-panel-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text, #1f2937);
}

@media (min-width: 769px) {
  .model-3d-hotspot {
    width: 44px;
    height: 44px;
  }

  .model-3d-hotspot-dot {
    width: 20px;
    height: 20px;
    border-width: 3px;
  }

  .model-3d-hotspot-ring {
    width: 44px;
    height: 44px;
    border-width: 2.5px;
  }
}

@media (max-width: 768px) {
  .model-visual-split {
    grid-template-columns: 1fr;
  }

  .model-info-container--with-3d,
  .model-info-container--with-3d.model-info-container--single {
    grid-template-columns: 1fr;
  }

  .model-info-content,
  .model-info-content--single {
    grid-template-columns: 1fr;
  }

  .model-3d-viewer {
    height: min(52vh, 420px);
    min-height: 300px;
  }

  .model-3d-viewer--compact {
    min-height: 300px;
    max-height: 420px;
  }

  .model-3d-panel,
  .gallery-3d-safe-zone .model-3d-panel {
    left: auto;
    right: 10px;
    bottom: auto;
    top: 46px;
    max-width: min(220px, calc(100% - 20px));
    padding: 10px 30px 10px 11px;
    border-radius: 12px;
  }

  .model-3d-panel-title {
    font-size: 0.82rem;
    margin-bottom: 4px;
  }

  .model-3d-panel-text {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .model-3d-panel-close {
    top: 4px;
    right: 6px;
    width: 24px;
    height: 24px;
    font-size: 1.15rem;
  }

  .model-3d-hotspot {
    width: 36px;
    height: 36px;
  }

  .model-3d-hotspot-dot {
    width: 16px;
    height: 16px;
  }

  .model-3d-hotspot-ring {
    width: 36px;
    height: 36px;
  }
}

html[data-color-mode="dark"] .model-3d-stage {
  background: linear-gradient(180deg, #121a28 0%, #0d1420 100%);
  border-color: var(--dm-border-soft, #2a3648);
  box-shadow: var(--shadow-bevel, 0 12px 28px rgba(0, 0, 0, 0.45));
}

html[data-color-mode="dark"] .model-3d-panel {
  background: rgba(22, 31, 46, 0.96);
  border-color: var(--dm-border-soft, #2a3648);
}

html[data-color-mode="dark"] .model-3d-panel-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Gallery-integrated 3D slide */
.gallery-slide--3d {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.gallery-3d-slide {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.gallery-3d-safe-zone {
  position: relative;
  width: calc(100% - 24px);
  height: calc(100% - 16px);
  margin: 8px 12px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef2f7 0%, #e4eaf2 100%);
  border: 1px solid var(--color-border, #e2e8f0);
}

.gallery-3d-safe-zone [hidden] {
  display: none !important;
}

.gallery-3d-poster {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-3d-poster-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-3d-activate-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.28));
}

.gallery-3d-activate-text--click {
  display: none;
}

@media (max-width: 880px) {
  .gallery-3d-activate-wrap {
    place-items: end center;
    padding-bottom: 10%;
  }

  .gallery-3d-activate {
    font-size: 0.8rem;
    padding: 7px 12px;
    gap: 6px;
  }

  .gallery-main .touch-swipe-hint {
    top: 12px;
    bottom: auto;
  }
}

@media (min-width: 1024px) {
  .gallery-3d-activate-wrap {
    place-items: end center;
    padding-bottom: 28px;
  }

  .gallery-3d-activate-text--touch {
    display: none;
  }

  .gallery-3d-activate-text--click {
    display: inline;
  }
}

.gallery-3d-activate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}

.gallery-3d-activate.is-loading {
  opacity: 0.75;
  cursor: wait;
}

.gallery-3d-activate-icon {
  display: inline-flex;
}

.gallery-3d-canvas {
  position: absolute;
  inset: 0;
}

.gallery-3d-canvas .model-3d-viewer--gallery {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.gallery-3d-slide.is-3d-active .gallery-3d-safe-zone {
  touch-action: pan-y;
}

.gallery-3d-slide.is-3d-active .gallery-3d-canvas,
.gallery-3d-slide.is-3d-active .gallery-3d-canvas model-viewer {
  touch-action: pan-y;
}

.gallery-3d-deactivate {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
  cursor: pointer;
}

.gallery-3d-deactivate:hover {
  background: #fff;
}

.gallery-main.is-3d-expanded {
  height: min(72vh, 680px);
  transition: height 0.35s ease;
}

.gallery-3d-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.62));
  backdrop-filter: blur(3px);
}

.gallery-3d-loading-text {
  margin: 0;
  max-width: 280px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  animation: gallery3d-loading-pulse 1.8s ease-in-out infinite;
}

@keyframes gallery3d-loading-pulse {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

.gallery-3d-controls-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 7;
  transform: translateX(-50%) translateY(10px);
  width: min(320px, calc(100% - 24px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.gallery-3d-controls-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.gallery-3d-controls-hint-inner {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(6px);
}

.gallery-3d-controls-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.gallery-3d-controls-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.gallery-3d-control {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

.gallery-3d-control-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

.gallery-3d-control--desktop {
  display: none;
}

.gallery-3d-control--mobile {
  display: flex;
}

@media (min-width: 769px) {
  .gallery-3d-control--desktop {
    display: flex;
  }

  .gallery-3d-control--mobile {
    display: none;
  }
}

body.is-gallery-3d-active .model-gallery-section.is-3d-immersive {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
}

body.is-gallery-3d-active .model-gallery-section.is-3d-immersive .gallery-main.is-3d-expanded {
  border-radius: 12px;
  margin-bottom: 20px;
  height: min(72vh, 680px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

@media (max-width: 768px) {
  .gallery-main.is-3d-expanded {
    height: min(68vh, 560px);
  }

  body.is-gallery-3d-active .model-gallery-section.is-3d-immersive {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.is-gallery-3d-active .model-gallery-section.is-3d-immersive .gallery-main.is-3d-expanded {
    height: min(68vh, 560px);
  }

  .gallery-3d-controls-hint {
    bottom: 10px;
    width: min(300px, calc(100% - 20px));
  }

  .gallery-3d-controls-hint-inner {
    padding: 10px 12px;
  }

  .gallery-3d-control {
    font-size: 0.8rem;
  }

  .gallery-3d-deactivate {
    top: 10px;
    right: 10px;
    padding: 7px 12px;
    font-size: 0.8rem;
  }
}

html[data-color-mode="dark"] .gallery-3d-deactivate {
  background: rgba(22, 31, 46, 0.95);
  color: #d8b4fe;
}

html[data-color-mode="dark"] .gallery-3d-deactivate:hover {
  background: rgba(28, 39, 56, 0.98);
}

html[data-color-mode="dark"] .gallery-3d-safe-zone {
  background: linear-gradient(180deg, #121a28 0%, #0d1420 100%);
  border-color: var(--dm-border-soft, #2a3648);
}

html[data-color-mode="dark"] .gallery-3d-activate {
  background: rgba(22, 31, 46, 0.96);
  color: #d8b4fe;
}

/* official-trims.css */
.official-trim-board {
  max-width: 1200px;
  margin: 36px auto 8px;
  padding: 28px 28px 24px;
  border: 1px solid var(--color-border, #e6e8ee);
  border-radius: 16px;
  background:
    radial-gradient(1200px 180px at 0% 0%, rgba(var(--color-primary-rgb, 50, 94, 225), 0.08), transparent 55%),
    var(--color-surface, #fff);
  color: var(--color-text, #1c2433);
}

.official-trim-kicker {
  margin: 0 0 6px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary, #325ee1);
  font-weight: 700;
}

.official-trim-head h2 {
  margin: 0;
  font-size: 1.7rem;
}

.official-trim-intro {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 8px;
}

.official-trim-lead {
  max-width: 78ch;
  margin: 0;
  color: var(--color-text-muted, #5c677a);
  line-height: 1.5;
}

.official-trim-docs-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.official-trim-docs-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text, #1c2433);
}

.official-trim-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin: 0;
  width: 100%;
}

.official-trim-doc {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e6e8ee);
  background: var(--color-surface, #fff);
  color: var(--color-primary, #325ee1);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.official-trim-doc:hover {
  border-color: var(--color-primary, #325ee1);
}

.official-trim-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.official-trim-source {
  position: relative;
  z-index: 1;
  border: 1px solid var(--color-border, #e6e8ee);
  background: transparent;
  color: var(--color-text, #1c2433);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}

.official-trim-source-panel[hidden] {
  display: none !important;
}

.official-trim-source.is-active {
  background: var(--color-primary, #325ee1);
  border-color: var(--color-primary, #325ee1);
  color: #fff;
}

.official-trim-valid {
  margin: 16px 0 0;
  color: var(--color-text-muted, #5c677a);
  font-size: 0.88rem;
}

.official-trim-layout {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
}

.official-trim-ladder {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.official-trim-step {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border, #e6e8ee);
  background: var(--color-surface-section, #f6f7fb);
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
}

.official-trim-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: rgba(var(--color-primary-rgb, 50, 94, 225), calc(0.18 + (var(--step-share) * 0.7)));
}

.official-trim-step.is-included {
  opacity: 0.72;
}

.official-trim-step.is-active {
  opacity: 1;
  background: var(--color-surface, #fff);
  border-color: var(--color-primary, #325ee1);
  box-shadow: 0 8px 20px rgba(var(--color-primary-rgb, 50, 94, 225), 0.12);
}

.official-trim-step-index {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary, #325ee1);
  width: 1.6rem;
}

.official-trim-step-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.official-trim-step-name {
  font-weight: 700;
}

.official-trim-step-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted, #5c677a);
}

.official-trim-stage {
  min-width: 0;
  border: 1px solid var(--color-border, #e6e8ee);
  border-radius: 14px;
  background: var(--color-surface-section, #f6f7fb);
  padding: 16px 16px 12px;
}

.official-trim-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.official-trim-relation {
  margin: 0;
  font-weight: 700;
}

.official-trim-delta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--color-text-muted, #5c677a);
}

.official-trim-delta.is-disabled {
  opacity: 0.45;
}

.official-trim-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.official-trim-items li.is-clipped {
  display: none;
}

.official-trim-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 12px auto 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border, #e6e8ee);
  background: var(--color-surface, #fff);
  color: var(--color-text, #1c2433);
  cursor: pointer;
}

.official-trim-more[hidden] {
  display: none;
}

.official-trim-more-icon {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

.official-trim-more.is-open .official-trim-more-icon {
  transform: rotate(225deg) translate(-1px, -1px);
}

.official-trim-items li {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-surface, #fff);
  border: 1px solid transparent;
  line-height: 1.4;
  font-size: 0.92rem;
}

.official-trim-items li.is-inherited {
  color: var(--color-text-muted, #5c677a);
  background: transparent;
  border-color: var(--color-border, #e6e8ee);
}

.official-trim-count {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted, #5c677a);
}

.official-trim-paints {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #e6e8ee);
}

.official-trim-paints-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.official-trim-paints-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.official-trim-paints-head p {
  margin: 0;
  color: var(--color-text-muted, #5c677a);
  font-size: 0.86rem;
  max-width: 62ch;
}

.official-trim-swatches {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
}

.official-trim-swatches li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.official-trim-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}

.official-trim-swatch-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.official-trim-swatch-copy small {
  color: var(--color-text-muted, #5c677a);
}

.official-trim-extras {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
}

.official-trim-extras li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--color-surface-section, #f6f7fb);
  border: 1px solid var(--color-border, #e6e8ee);
  font-size: 0.84rem;
}

@media (max-width: 800px) {
  .official-trim-board {
    margin-left: 12px;
    margin-right: 12px;
    padding: 20px 16px;
  }

  .official-trim-docs {
    grid-template-columns: 1fr;
  }

  .official-trim-layout,
  .official-trim-items,
  .official-trim-paints-head,
  .official-trim-toolbar {
    grid-template-columns: 1fr;
    display: grid;
  }

  .official-trim-ladder {
    flex-direction: row;
    overflow-x: auto;
  }

  .official-trim-step {
    min-width: 148px;
  }
}

/* site-modules.css */
.legal-page,
.contact-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 8px;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.deal-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.deal-card-kicker,
.deal-card-variant {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.deal-card h3 {
  margin: 4px 0;
  font-size: 1.05rem;
}

.deal-card-prices {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 8px 0 0;
}

.deal-card-was {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.deal-card-now {
  font-weight: 800;
}

.price-alert {
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-align: left;
}

.price-alert--model {
  margin: 28px auto 8px;
  padding: 18px 20px;
}

.price-alert h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.price-alert p {
  margin: 0 0 10px;
}

.price-alert form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.price-alert input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: inherit;
}

.price-alert button,
.contact-form button {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--color-heading);
  color: var(--color-bg);
  font-weight: 700;
  cursor: pointer;
}

.price-alert button {
  background: var(--color-primary);
  color: #fff;
}

.price-alert-status {
  margin: 8px 0 0;
  font-size: 0.9rem;
}

.lease-hint {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.lease-hint summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-text);
}

.lease-hint-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.lease-hint-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
}

.lease-hint-form input {
  width: 88px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: inherit;
}

.legal-page h1,
.contact-page h1 {
  margin-bottom: 8px;
}

.contact-page {
  text-align: center;
}

.contact-page p,
.contact-page .section-kicker,
.contact-page h1,
.contact-page .form-error,
.contact-page .price-alert-status {
  margin-left: auto;
  margin-right: auto;
}

.contact-emails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 12px;
}

.contact-emails a,
.partnership-page a {
  font-weight: 700;
  color: var(--color-primary, #0f3da8);
  text-decoration: none;
}

.partnership-page {
  text-align: center;
}

.partnership-page p,
.partnership-page h1,
.partnership-page h2,
.partnership-page .section-kicker {
  margin-left: auto;
  margin-right: auto;
}

.partnership-box {
  max-width: 720px;
  margin: 0 auto 22px;
  padding: 22px 22px 20px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 16px;
  background: var(--color-surface, #fff);
  text-align: center;
}

.partnership-box h1,
.partnership-box h2 {
  margin-top: 0;
}

.partnership-box h2 {
  font-size: 1.25rem;
}

.partnership-box p:last-child {
  margin-bottom: 0;
}

html[data-color-mode="dark"] .partnership-box {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.contact-form,
.contact-form label {
  text-align: center;
}

.legal-page h2 {
  margin: 22px 0 8px;
  font-size: 1.05rem;
}

.legal-page p,
.contact-page p {
  max-width: 68ch;
}

.contact-form {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: inherit;
  font: inherit;
}

.form-error {
  color: #9b2c2c;
  font-weight: 700;
}

/* search-results.css */
body.search-results-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.search-results-page .page-with-side-banners {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

body.search-results-page .page-main-column {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

body.search-results-page .results-section {
  flex: 1 0 auto;
}

body.search-results-page .site-footer {
  margin-top: auto;
  padding-top: 48px;
}

.results-empty {
  margin: 28px 0 8px;
  font-weight: 700;
}

.search-results-page .page-main-column {
  max-width: 1860px;
}

.search-results-page .banner-wide-slot--inline {
  margin: 16px 0 8px;
}

.search-results-page .preset-chip {
  min-height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

.search-results-page .preset-row {
  gap: 6px;
}

.results-section {
  padding: 10px 16px 28px;
  max-width: 1860px;
  width: min(1860px, calc(100vw - 24px));
  margin: 0 auto;
}

.results-section h1 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
}

.results-load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 28px 0 8px;
}

.results-load-more-btn {
  background: #0f3da8;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 34px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.results-load-more-btn:hover {
  background: #0c3088;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 61, 168, 0.25);
}

.results-load-more-btn:active {
  transform: translateY(0);
}

.results-load-more-count {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.results-main {
  min-width: 0;
}

.results-filters-sentinel {
  height: 0;
  margin: 0;
  pointer-events: none;
}

.results-filters-bar {
  position: sticky;
  top: var(--results-sticky-top, 64px);
  z-index: 900;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 14px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 6px 12px;
  background: var(--gradient-card);
  backdrop-filter: blur(10px);
  border-radius: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

.results-filters-bar.is-stuck {
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.results-filters-inner {
  max-width: 1860px;
  width: min(1860px, calc(100vw - 24px));
  margin: 0 auto;
}

.results-filters-mobile-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.results-filters-mobile-toggle,
.results-filters-quick-chips {
  display: none;
}

.results-filters-mobile-toggle {
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.results-filters-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-gold);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 800;
}

.results-filters-quick-chips {
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.results-filter-chip {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-surface-section);
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.results-sort-field {
  flex: 0 0 auto;
  width: 132px;
}

.results-sort-field .ac-select {
  width: 132px;
}

.results-sort-field select {
  min-height: 32px;
  padding: 4px 28px 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 600;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #475569 50%), linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.results-filters-panel {
  display: block;
}

@media (min-width: 769px) {
  .results-filters-inner {
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }

  .results-filters-panel {
    flex: 1 1 auto;
    min-width: 0;
  }

  .results-filters-mobile-bar {
    justify-content: flex-end;
    margin-bottom: 0;
    flex: 0 0 auto;
    padding-bottom: 1px;
  }
}

.results-main-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.results-main-head h2 {
  margin: 0;
}

.results-count {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.results-filters-form {
  display: block;
}

.results-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.results-filter-field {
  flex: 1 1 148px;
  min-width: 132px;
}

.results-filter-field--price {
  flex: 1 1 132px;
}

.results-filter-field--brand,
.results-filter-field--model {
  flex: 1 1 168px;
}

.results-filter-field--fuel {
  flex: 1 1 168px;
}

.results-filter-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--color-heading);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.results-filter-field input,
.results-filter-field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  outline: none;
  background-color: var(--color-surface);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.results-filter-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #475569 50%), linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.results-filter-field input:focus,
.results-filter-field select:focus {
  border-color: #1f2937;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.14);
}

.results-filters-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: flex-end;
  margin-left: auto;
}

.results-filters-btn {
  border: 1px solid rgba(213, 186, 122, 0.45);
  border-radius: 999px;
  padding: 0 18px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.results-filters-btn.primary {
  background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
  color: #fff;
}

.results-filters-btn.secondary {
  background: linear-gradient(135deg, #d5ba7a 0%, #b99858 100%);
  color: var(--color-text);
}

.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.variant-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--color-surface);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.variant-card.premium-result {
  border: 1px solid rgba(185, 152, 88, 0.7);
  box-shadow: 0 8px 20px rgba(185, 152, 88, 0.28);
  background: var(--gradient-card-premium);
}

.variant-card.premium-result .variant-image {
  background: var(--color-surface-section);
}

.variant-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

.variant-card.premium-result:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(185, 152, 88, 0.35);
}

.variant-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-section);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.variant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.variant-card-body {
  padding: 14px 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
  height: 100%;
}

.variant-card-chip-row {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.variant-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  align-content: flex-start;
}

.variant-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-section);
  white-space: nowrap;
  text-transform: capitalize;
}

.premium-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5d480f;
  background: linear-gradient(135deg, #f3dfa3 0%, #ddc07a 100%);
  border: 1px solid rgba(128, 96, 26, 0.32);
}

.variant-card.premium-result .premium-chip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.results-active-bubbles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 180px;
  min-width: 0;
}

.results-filter-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  border: 1px solid #d5dbe3;
  background: #fff;
  color: #1c2430;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.results-filter-bubble span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-filter-bubble-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.results-filter-bubble-remove:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #111827;
}

.variant-card-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 12px;
  margin-top: auto;
}

.variant-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.variant-price {
  margin: 0;
  font-size: 22px !important;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-align: right;
}

.variant-price.premium-price {
  color: #56cd95;
}

html[data-color-mode="dark"] .variant-price.premium-price,
html[data-color-mode="dark"] .variant-card.premium-result .variant-price {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

.variant-price.standard-price {
  color: var(--color-text);
}

.variant-price--sale {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: normal;
}

.variant-price-old {
  font-size: 0.78em !important;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
  line-height: 1.1;
}

.variant-price-new {
  font-size: 1em;
  font-weight: 700;
  color: #16a34a !important;
  line-height: 1.1;
}

html[data-color-mode="dark"] .variant-price-old {
  color: #94a3b8 !important;
}

html[data-color-mode="dark"] .variant-price-new {
  color: #4ade80 !important;
}

@media (max-width: 1024px) {
  .variant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .results-section {
    padding: 8px 10px 12px;
    width: 100%;
    max-width: none;
  }

  .results-section h1 {
    margin: 0;
    font-size: 1.2rem;
  }

  .results-filters-bar {
    margin: 0 calc(50% - 50vw) 10px;
    border-radius: 0;
    padding: 6px 10px;
    top: var(--results-sticky-top, 0px);
    transition: top 0.24s ease;
    background: var(--color-surface);
    border-left: 0;
    border-right: 0;
    box-shadow: var(--shadow-sm);
    width: 100vw;
    max-width: 100vw;
  }

  .results-filters-inner {
    width: 100%;
  }

  .results-filters-mobile-toggle {
    display: inline-flex;
    min-height: 32px;
    padding: 4px 12px;
    font-size: 13px;
  }

  .results-filters-quick-chips {
    display: flex;
  }

  .results-filters-mobile-bar {
    margin-bottom: 0;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 32px;
  }

  .results-sort-field,
  .results-sort-field .ac-select {
    width: 118px;
    flex: 0 0 118px;
  }

  .results-sort-field select {
    min-height: 32px;
    padding: 4px 26px 4px 8px;
    font-size: 12px;
  }

  .results-filters-active-count {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .results-filter-chip {
    padding: 4px 8px;
    font-size: 11px;
  }

  .results-filters-panel {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .results-filters-bar.is-open .results-filters-panel {
    display: block;
  }

  .results-filters-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-wrap: unset;
    overflow: visible;
    padding-bottom: 0;
  }

  .results-filter-field,
  .results-filter-field--price,
  .results-filter-field--brand,
  .results-filter-field--model,
  .results-filter-field--fuel {
    flex: unset;
    min-width: 0;
    width: auto;
  }

  .results-filter-field input,
  .results-filter-field select {
    min-height: 42px;
    font-size: 14px;
    background-color: var(--color-surface);
    color: var(--color-text);
  }

  .results-filters-actions {
    grid-column: 1 / -1;
    flex: unset;
    margin-left: 0;
    position: static;
    padding-left: 0;
    background: none;
    display: flex;
    gap: 8px;
  }

  .results-filters-actions .results-filters-btn {
    flex: 1 1 0;
  }

  .variant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .variant-image {
    height: auto;
  }

  .variant-card-body {
    padding: 10px 8px;
    min-height: 132px;
    gap: 8px;
  }

  .variant-card-chip-row {
    min-height: 22px;
  }

  .variant-badges {
    min-height: 24px;
  }

  .variant-badge {
    font-size: 11px;
    padding: 3px 9px;
  }

  .variant-title {
    font-size: 14px;
  }

  .variant-price {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  .results-section {
    padding: 6px 8px 10px;
    width: 100%;
  }

  .variant-grid {
    gap: 6px;
  }
}

/* compare.css */
/* ===== Comparison page ===== */
.compare-section {
  padding: 28px 16px 80px;
}

.lowest-consumption {
  padding: 36px 28px 96px;
}

.lowest-consumption .container {
  padding-left: 12px;
  padding-right: 12px;
}

.lowest-consumption .variant-grid {
  padding: 8px 4px 12px;
}

@media (max-width: 640px) {
  .lowest-consumption {
    padding: 28px 18px calc(96px + env(safe-area-inset-bottom));
  }
}

.compare-section .container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

.compare-title {
  font-size: 1.8em;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 22px;
}

.compare-empty {
  background: var(--color-surface);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 36px;
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.compare-empty a {
  color: #0f3da8;
  font-weight: 700;
}

.compare-scroll-hint {
  display: none;
}

.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: var(--color-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

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

.compare-table th,
.compare-table td {
  border-bottom: 1px solid #eef1f5;
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

.compare-attr-head,
.compare-attr {
  position: sticky;
  left: 0;
  background: var(--color-surface-section);
  font-weight: 700;
  color: var(--color-text);
  z-index: 2;
  min-width: 130px;
}

.compare-car-head {
  position: relative;
  background: var(--color-surface);
  min-width: 200px;
  vertical-align: top;
}

.compare-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.compare-remove:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.compare-car-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.compare-car-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  min-height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-well);
  margin-bottom: 10px;
}

.compare-car-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.compare-car-brand {
  display: block;
  font-size: 0.85em;
  color: var(--color-text-muted, #6b7280);
}

.compare-car-head.is-premium {
  background: linear-gradient(180deg, #fff8e8 0%, var(--color-surface, #fff) 46%);
  box-shadow: inset 0 -3px 0 #c8962e;
}

.compare-premium-mark {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  width: fit-content;
  margin: 0;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #5d480f;
  background: linear-gradient(135deg, #f3dfa3 0%, #ddc07a 100%);
  border: 1px solid rgba(128, 96, 26, 0.32);
}

.compare-value.is-premium {
  box-shadow: inset 3px 0 0 #e7c56a;
}

html[data-color-mode="dark"] .compare-car-head.is-premium {
  background: linear-gradient(180deg, rgba(200, 150, 46, 0.22) 0%, transparent 70%);
}

.compare-car-name {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.compare-trim-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  max-height: 2.6em;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.compare-trim-note strong {
  display: block;
  color: var(--color-heading);
}

.compare-diff {
  margin: 16px 0 0;
  max-width: 78ch;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

.compare-value {
  color: var(--color-text);
  font-weight: 600;
}

.compare-table tbody tr:nth-child(odd) td,
.compare-table tbody tr:nth-child(odd) .compare-attr {
  background: var(--color-surface-soft);
}

.compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.compare-add-more,
.compare-clear-all {
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.compare-add-more {
  background: #0f3da8;
  color: #fff;
  border: none;
}

.compare-add-more:hover {
  background: #0c3088;
}

.compare-clear-all {
  background: var(--color-surface);
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.compare-clear-all:hover {
  background: rgba(220, 53, 69, 0.12);
}

/* ===== Compare toggle on cards ===== */
.compare-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #d7dce3;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.compare-toggle:hover {
  border-color: #0f3da8;
  color: #0f3da8;
}

.compare-toggle.active {
  background: #0f3da8;
  border-color: #0f3da8;
  color: #fff;
}

.compare-toggle-label {
  display: none;
}

.compare-toggle-icon {
  font-size: 18px;
  line-height: 1;
}

/* ===== Floating compare bar ===== */
.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 160%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #111827;
  color: #fff;
  padding: 12px 16px 12px 20px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.28s ease;
  max-width: calc(100vw - 24px);
}

.compare-bar.visible {
  transform: translate(-50%, 0);
}

.compare-bar-text {
  font-size: 14px;
  font-weight: 600;
}

.compare-bar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #2f6bff;
  font-weight: 800;
  font-size: 12px;
}

.compare-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-bar-go {
  background: #2f6bff;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 10px;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.compare-bar-go:hover {
  background: #1f54d6;
}

.compare-bar-go.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.compare-bar-clear {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.compare-bar-clear:hover {
  color: #fff;
}

@media (max-width: 560px) {
  .compare-bar {
    left: 12px;
    right: 12px;
    transform: translateY(160%);
    width: auto;
    max-width: none;
    justify-content: space-between;
  }

  .compare-bar.visible {
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .compare-section {
    padding-bottom: calc(80px + var(--dock-height, 68px));
  }

  .compare-scroll-hint {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }

  .compare-table {
    min-width: 0;
    width: max-content;
  }

  .compare-attr-head,
  .compare-attr {
    min-width: 92px;
    max-width: 108px;
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: 6px 0 12px rgba(15, 23, 42, 0.08);
  }

  .compare-car-head,
  .compare-table td.compare-value {
    min-width: min(72vw, 280px);
    max-width: min(72vw, 280px);
  }
}

/* auth.css */
/* Auth Styles - Login and Register Pages */

.auth-page {
    font-family: var(--font-sans, Arial, sans-serif);
    background: var(--gradient-brands-section);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.auth-page .auth-card {
    max-width: 500px;
    width: calc(100% - 32px);
    margin: 2rem auto;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 16px);
    box-shadow: var(--shadow-md);
    flex: 1;
    color: var(--color-text);
}

.auth-page h1 {
    text-align: center;
    color: var(--color-heading);
    margin: 0 0 1.5rem;
    font-size: 2rem;
}

.auth-page form {
    display: flex;
    flex-direction: column;
}

.auth-page form div {
    margin-bottom: 1.5rem;
}

.auth-page label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-weight: 700;
}

.auth-page input[type="email"],
.auth-page input[type="password"],
.auth-page input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--color-surface-input);
    color: var(--color-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.auth-page input[type="email"]:focus,
.auth-page input[type="password"]:focus,
.auth-page input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.auth-page button[type="submit"] {
    margin-top: 0.5rem;
}

.auth-page p {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--color-text-muted);
}

.auth-page p a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}

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

.auth-page .error {
    background: rgba(217, 83, 79, 0.12);
    color: var(--color-danger);
    padding: 0.75rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    text-align: center;
    border: 1px solid rgba(217, 83, 79, 0.28);
}

@media (max-width: 768px) {
    .auth-page .auth-card {
        margin: 1rem auto 2rem;
        padding: 1.5rem;
    }

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

/* dark-mode.css */
/* ==========================================================================
   AutoCijene — full dark mode (works with CSS variables in theme.css)
   ========================================================================== */

html[data-color-mode="dark"] body {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* ---- Universal elevated surfaces (cards, panels, embeds) ---- */
html[data-color-mode="dark"] :is(
  .brand-card:not(.is-premium-all):not(.premium),
  .variant-card,
  .model-card,
  .generation-card,
  .featured-generation-card,
  .news-card,
  .fuel-city-card,
  .spec-card,
  .finder-card,
  [class*="-panel"],
  [class*="-embed"],
  [class*="-bar"]:not(.compare-bar):not(.touch-swipe-hint):not(.results-filters-bar):not(.leaflet-bar),
  .container,
  .info-box,
  .faq-item,
  .dealer-item,
  .contact-item,
  .modal-content,
  .admin-card,
  .admin-table,
  .appearance-theme-card,
  .appearance-preview,
  .chargers-list-wrap,
  .charger-list-item,
  .variant-item,
  .variant-list.open,
  .model-description-section,
  .tucson-choice-bar,
  .tucson-choice-tag,
  .compare-empty,
  .compare-table-wrap,
  .compare-toggle,
  .finder-intro,
  .description-toggle-button,
  .sort-field,
  .sort-order,
  .filter-button:not(.active),
  .gallery-main
):not(.model-info-container *) {
  background: var(--color-surface) !important;
  background-image: none !important;
  border-color: #1a2332 !important;
  box-shadow: none !important;
  color: var(--color-text);
}

/* Partner badge: light gold text on dark gold */
html[data-color-mode="dark"] span.featured-premium-chip:not(.featured-premium-chip--sale),
html[data-color-mode="dark"] .featured-generation-card .featured-premium-chip:not(.featured-premium-chip--sale),
html[data-color-mode="dark"] .featured-generation-thumb .featured-premium-chip:not(.featured-premium-chip--sale),
html[data-color-mode="dark"] .featured-generation-card span.featured-premium-chip:not(.featured-premium-chip--sale),
html[data-color-mode="dark"] .featured-generation-body .featured-premium-chip:not(.featured-premium-chip--sale) {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  background: linear-gradient(135deg, #3f3010 0%, #5c4512 100%) !important;
  border-color: rgba(253, 230, 138, 0.35) !important;
}

/* Akcija badge + akcijska cijena: green in dark mode */
html[data-color-mode="dark"] span.featured-premium-chip--sale,
html[data-color-mode="dark"] .featured-generation-card .featured-premium-chip--sale,
html[data-color-mode="dark"] .featured-generation-body .featured-premium-chip--sale {
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
  border-color: rgba(74, 222, 128, 0.4) !important;
}

html[data-color-mode="dark"] :is(
  .featured-generation-thumb,
  .variant-image,
  .model-card-image,
  .generation-card-thumb,
  .news-card-image,
  .brand-img-container,
  .compare-car-img,
  .gallery-thumbnail
) {
  background: var(--color-surface-well) !important;
  background-image: none !important;
}

html[data-color-mode="dark"] .brand-card.premium .brand-card-image,
html[data-color-mode="dark"] .brand-card.non-premium .brand-card-image {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ---- Section backgrounds: transparent (gradient lives on body only) ---- */
html[data-color-mode="dark"] :is(
  .brands-section,
  .brands-section--all,
  .featured-generations-section,
  .featured-banner-row,
  .home-utilities-section,
  .home-cost-tools-section,
  .models-section,
  .news-section,
  .brand-details-section,
  .model-gallery-section,
  .feature-cards-section,
  .compare-section,
  .results-section,
  .fuel-page,
  .tool-page,
  .chargers-page,
  .search-section,
  .finder-section,
  .generation-section,
  .faq-section,
  .model-description-section,
  .tucson-choice-bar
) {
  background: transparent !important;
  color: var(--color-text);
}

html[data-color-mode="dark"] .premium-brands-grid {
  background: var(--gradient-premium-grid) !important;
  animation: premium-grid-glow 4.5s ease-in-out infinite;
  border-color: rgba(245, 211, 122, 0.45) !important;
  box-shadow:
    var(--shadow-elevated),
    0 0 22px rgba(212, 175, 55, 0.38) !important;
}

html[data-color-mode="dark"] .brand-card.premium {
  box-shadow:
    0 6px 18px rgba(var(--color-primary-rgb), 0.18),
    0 0 26px rgba(212, 175, 55, 0.34) !important;
  animation: premium-card-glow 3.4s ease-in-out infinite;
}

html[data-color-mode="dark"] .brand-card.premium:hover {
  box-shadow:
    0 12px 28px rgba(var(--color-primary-rgb), 0.28),
    0 0 30px rgba(212, 175, 55, 0.42) !important;
}

html[data-color-mode="dark"] .finder-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-color-mode="dark"] .premium-brands-grid.reveal-glow.is-in {
  animation: premium-grid-glow 4.5s ease-in-out infinite;
  border-color: rgba(245, 211, 122, 0.45) !important;
  box-shadow:
    var(--shadow-elevated),
    0 0 22px rgba(212, 175, 55, 0.38) !important;
}

html[data-color-mode="dark"] .fuel-prices-embed--home,
html[data-color-mode="dark"] .chargers-embed--home,
html[data-color-mode="dark"] .fuel-prices-embed,
html[data-color-mode="dark"] .chargers-embed,
html[data-color-mode="dark"] .chargers-panel {
  background: var(--gradient-panel) !important;
}

/* ---- Readable text ---- */
html[data-color-mode="dark"] :is(
  h1, h2, h3, h4, h5, h6,
  p, span, label, li, dt, dd, th, td,
  .brand-title, .model-title, .models-title, .generation-title,
  .generation-name, .generation-expanded-title, .generation-expanded-subtitle,
  .generation-count, .generation-price, .model-card-name, .model-subtitle,
  .featured-generation-name, .featured-generation-model, .news-card-title,
  .variant-title, .variant-name-col, .variant-stat-col, .variant-price-col,
  .choice-card-title, .choice-card-text, .description-content,
  .finder-intro-title, .finder-intro-text, .finder-card-heading, .finder-divider-text,
  .finder-field label, .results-filter-field label, .results-count,
  .chargers-embed-title, .chargers-embed-subtitle, .chargers-filter-label,
  .chargers-count, .charger-list-title, .fuel-prices-embed-title,
  .fuel-prices-embed-subtitle, .fuel-city-name, .fuel-price-label, .fuel-price-value,
  .breadcrumb-row, .breadcrumb-current, .compare-car-name, .compare-value,
  .compare-attr, .compare-attr-head, .dealer-name, .dealer-contact-text,
  .spec-card-label, .spec-card-value, .faq-question, .faq-answer-inner,
  .admin-header h1, .admin-card h3, .admin-card p, .header-user-email,
  .nav-link, .header-mobile-link, .header-mobile-meta,
  .tucson-choice-main-title, .tucson-choice-tag, .tucson-choice-empty, .model-fit-audience-text,
  .premium-finder-cta-title, .premium-finder-cta-subtitle,
  .no-models, .no-variants, .chargers-empty, .fuel-empty, .fuel-source-note
):not(.featured-premium-chip):not(span.featured-premium-chip):not(.variant-price):not(.premium-price):not(.variant-price-new):not(.price-from):not(.is-premium):not(.variant-action-price-col) {
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .model-fit-divider {
  background: linear-gradient(
    180deg,
    transparent 0%,
    #2a3548 12%,
    #2a3548 88%,
    transparent 100%
  );
}

@media (max-width: 860px) {
  html[data-color-mode="dark"] .model-fit-divider {
    background: linear-gradient(
      90deg,
      transparent 0%,
      #2a3548 12%,
      #2a3548 88%,
      transparent 100%
    );
  }
}

html[data-color-mode="dark"] :is(
  .finder-intro-text, .featured-generation-model, .generation-count,
  .model-subtitle, .variant-stat-col, .choice-card-text, .fuel-price-label,
  .charger-list-meta, .charger-popup-city, .charger-popup-notes,
  .breadcrumb-separator, .compare-car-brand, .results-load-more-count,
  .finder-field-hint, .fuel-prices-embed-meta, .chargers-header-meta,
  .faq-answer-inner, .description-content, .fuel-source-note, .fuel-no-results,
  .variant-sorting label, .no-models, .no-variants
) {
  color: var(--color-text-muted) !important;
}

/* ---- Forms ---- */
html[data-color-mode="dark"] :is(
  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not(.finder-search-input),
  select,
  textarea,
  .header-search-input,
  .finder-field input,
  .finder-field select,
  .results-filter-field input,
  .results-filter-field select,
  .results-sort-field select,
  .fuel-search input,
  .fuel-sort select,
  .chargers-city-filter select
) {
  background: var(--color-surface-input) !important;
  background-image: none !important;
  border: 1px solid #1a2332 !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .chargers-search input,
html[data-color-mode="dark"] .fuel-search input,
html[data-color-mode="dark"] .fuel-city-search,
html[data-color-mode="dark"] .ac-select-trigger {
  border: 1px solid #1a2332 !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-city-card,
html[data-color-mode="dark"] .charger-list-item,
html[data-color-mode="dark"] .chargers-list-wrap,
html[data-color-mode="dark"] .chargers-panel,
html[data-color-mode="dark"] .fuel-prices-embed--home,
html[data-color-mode="dark"] .chargers-embed--home,
html[data-color-mode="dark"] .btn-show-more {
  border-color: #1a2332 !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-tab:not(.active) {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-color-mode="dark"] .toggle-filters-btn,
html[data-color-mode="dark"] .finder-btn.secondary,
html[data-color-mode="dark"] .results-filters-btn.secondary {
  background: var(--color-surface-section) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ---- Buttons that stay light-on-dark ---- */
html[data-color-mode="dark"] :is(
  .finder-btn.primary,
  .admin-btn:not(.add-btn),
  .results-filters-btn.primary,
  .results-filters-mobile-toggle,
  .filter-button.active,
  .show-more-button:hover,
  .description-toggle-button:hover,
  .feature-cards-more-btn,
  .results-load-more-btn,
  .compare-add-more,
  .header-search-button,
  .btn-register,
  .sort-button,
  .ev-badge
) {
  color: #fff !important;
}

html[data-color-mode="dark"] .show-more-button,
html[data-color-mode="dark"] .description-toggle-button {
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.5) 0%, rgba(var(--color-primary-rgb), 0.38) 100%) !important;
  border: none !important;
  box-shadow: 0 0 14px rgba(var(--color-primary-rgb), 0.25) !important;
}

html[data-color-mode="dark"] .filter-button.active,
html[data-color-mode="dark"] .show-more-button:hover,
html[data-color-mode="dark"] .description-toggle-button:hover {
  background: var(--gradient-btn) !important;
  color: var(--color-on-primary, #fff) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 18px rgba(var(--color-primary-rgb), 0.35) !important;
}

html[data-color-mode="dark"] .add-btn {
  color: #111827 !important;
}

html[data-color-mode="dark"] .compare-clear-all {
  color: #f87171 !important;
}

html[data-color-mode="dark"] .variant-items {
  border-color: transparent !important;
}

html[data-color-mode="dark"] .variant-item {
  border-color: rgba(226, 232, 240, 0.38) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.38) !important;
}

@media (max-width: 768px) {
  html[data-color-mode="dark"] .variant-item {
    border-color: rgba(226, 232, 240, 0.42) !important;
    border-bottom-color: rgba(226, 232, 240, 0.42) !important;
  }

  html[data-color-mode="dark"] .variant-name-col {
    border-bottom-color: rgba(148, 163, 184, 0.28) !important;
  }
}

html[data-color-mode="dark"] .variant-item .variant-name-col,
html[data-color-mode="dark"] .variant-item .variant-stat-col,
html[data-color-mode="dark"] .variant-item .variant-stat-col::before,
html[data-color-mode="dark"] .variant-item .variant-price-col::before,
html[data-color-mode="dark"] .variant-item .variant-price-col {
  color: #fff !important;
}

html[data-color-mode="dark"] .variant-item .variant-action-price-col,
html[data-color-mode="dark"] .variant-item .variant-action-price-col::before,
html[data-color-mode="dark"] .variant-list--compact .variant-action-price-col,
html[data-color-mode="dark"] .variant-list--compact .variant-action-price-col::before {
  color: #34d399 !important;
  -webkit-text-fill-color: #34d399 !important;
}

/* ---- Accents ---- */
html[data-color-mode="dark"] .variant-card.premium-result {
  background: var(--color-surface) !important;
  background-image: none !important;
  border-color: #3a3a3a !important;
}

html[data-color-mode="dark"] .variant-item.variant-spec-item {
  background: var(--color-surface) !important;
  border: 1px solid #454647 !important;
  border-color: #454647 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  html[data-color-mode="dark"] .variant-item.variant-spec-item {
    border: 1px solid #454647 !important;
    border-color: #454647 !important;
  }
}

html[data-color-mode="dark"] .variant-spec-title,
html[data-color-mode="dark"] .variant-spec-chip-value,
html[data-color-mode="dark"] .variant-spec-price-value {
  color: var(--color-heading) !important;
}

html[data-color-mode="dark"] .variant-spec-chip {
  background: var(--color-surface-section) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .variant-spec-chip-label,
html[data-color-mode="dark"] .variant-spec-price-label {
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .variant-spec-oprema {
  color: var(--color-text-muted) !important;
  background: transparent !important;
}

html[data-color-mode="dark"] .variant-spec-chip {
  background: var(--color-surface-section) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .variant-spec-chip-label {
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .variant-spec-chip-value {
  color: var(--color-heading) !important;
}

html[data-color-mode="dark"] .variant-item.highlighted-variant {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: #34d399 !important;
}

html[data-color-mode="dark"] .generation-card.highlighted {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2), var(--shadow-elevated) !important;
}

html[data-color-mode="dark"] .premium-chip {
  color: #fde68a !important;
  background: linear-gradient(135deg, #3f3010 0%, #5c4512 100%) !important;
}

html[data-color-mode="dark"] .variant-badge {
  background: var(--color-surface-input) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .fuel-price-row.is-best,
html[data-color-mode="dark"] .fuel-city-card.is-cheapest {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-color-mode="dark"] .fuel-meta-pill {
  background: var(--color-surface-section) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .fuel-summary-card {
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-tab {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .fuel-tab.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .fuel-tab-list {
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .fuel-city-avatar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
}

html[data-color-mode="dark"] .fuel-price-row {
  background: var(--color-surface-section) !important;
}

html[data-color-mode="dark"] .btn-show-more {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .utility-page-link {
  background: rgba(var(--color-primary-rgb), 0.18) !important;
  border-color: rgba(var(--color-primary-rgb), 0.35) !important;
  color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .chargers-search input {
  background: var(--color-surface-input) !important;
  border: 1px solid #1a2332 !important;
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .chargers-station-list {
  background: var(--color-surface-soft) !important;
}

html[data-color-mode="dark"] .charger-list-item {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .charger-list-city {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

html[data-color-mode="dark"] .chargers-list-header {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, var(--color-surface-section) 55%) !important;
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .chargers-show-more-bar {
  background: var(--color-surface) !important;
  border-top-color: var(--color-border) !important;
}

/* ---- Header ---- */
html[data-color-mode="dark"] .main-header,
html[data-color-mode="dark"] .header-search-container {
  background: var(--gradient-header) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .main-header :is(
  .header-all-cars-link,
  .nav-link,
  .header-user-email,
  .header-nav > span,
  .theme-toggle-btn,
  .header-menu-bar,
  .header-mobile-link:not(.header-mobile-link-accent),
  .header-mobile-meta,
  .header-mobile-button
) {
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .header-all-cars-link:hover,
html[data-color-mode="dark"] .main-header .header-all-cars-link.is-active,
html[data-color-mode="dark"] .main-header .nav-link:hover,
html[data-color-mode="dark"] .main-header .header-mobile-link:not(.header-mobile-link-accent):hover,
html[data-color-mode="dark"] .main-header .header-mobile-link:not(.header-mobile-link-accent):focus,
html[data-color-mode="dark"] .main-header .header-mobile-link.is-active {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
}

html[data-color-mode="dark"] .main-header .header-all-cars-link.is-active,
html[data-color-mode="dark"] .main-header .header-mobile-link.is-active {
  color: var(--color-primary) !important;
  font-weight: 800;
}

html[data-color-mode="dark"] .main-header .header-all-cars-link::after {
  background: var(--color-primary) !important;
}

html[data-color-mode="dark"] .header-mobile-menu {
  background: #0f172a !important;
  border-right-color: #1e293b !important;
}

html[data-color-mode="dark"] .header-mobile-link {
  color: #e2e8f0 !important;
  border-bottom-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-color-mode="dark"] .header-menu-backdrop {
  background: rgba(2, 6, 23, 0.55) !important;
}

html[data-color-mode="dark"] .main-header .header-menu-toggle {
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .header-menu-toggle .header-menu-bar {
  background: currentColor !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

html[data-color-mode="dark"] .header-search-input {
  color: #ffffff !important;
}

html[data-color-mode="dark"] .header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-color-mode="dark"] .header-mobile-menu {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .header-menu-backdrop {
  background: rgba(0, 0, 0, 0.72) !important;
}

/* ---- Compare ---- */
html[data-color-mode="dark"] .compare-attr-head,
html[data-color-mode="dark"] .compare-attr {
  background: var(--color-surface-input) !important;
}

html[data-color-mode="dark"] .compare-table tbody tr:nth-child(odd) td,
html[data-color-mode="dark"] .compare-table tbody tr:nth-child(odd) .compare-attr {
  background: var(--color-surface-soft) !important;
}

html[data-color-mode="dark"] .compare-car-head {
  background: var(--color-surface) !important;
}

html[data-color-mode="dark"] .compare-bar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top-color: var(--color-border) !important;
}

/* ---- Admin ---- */
html[data-color-mode="dark"] .admin-table th {
  background: linear-gradient(135deg, var(--color-surface-section) 0%, var(--color-surface-alt) 100%) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .admin-table td {
  color: var(--color-text) !important;
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .admin-table tbody tr:hover {
  background-color: var(--color-surface-section) !important;
}

html[data-color-mode="dark"] .admin-header {
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .admin-header h1 {
  color: var(--color-text) !important;
}

/* ---- Auth ---- */
html[data-color-mode="dark"] .auth-page {
  background: var(--gradient-brands-section) !important;
}

html[data-color-mode="dark"] .auth-card,
html[data-color-mode="dark"] .about-block,
html[data-color-mode="dark"] .about-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text);
}

/* ---- Map ---- */
html[data-color-mode="dark"] .chargers-map {
  border-color: #1a2332 !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group {
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  background: #1e293b !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group button {
  width: 34px !important;
  height: 34px !important;
  color: #f8fafc !important;
  background: #1e293b !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group button:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group button:last-child {
  border-bottom: none !important;
}

html[data-color-mode="dark"] .charger-list-item.is-just-loaded {
  animation: chargerListFlashDark 1.1s ease;
}

@keyframes chargerListFlashDark {
  0% { background: rgba(34, 197, 94, 0.28) !important; }
  100% { background: var(--color-surface) !important; }
}

/* ---- Links ---- */
html[data-color-mode="dark"] a:not(.btn-register):not(.finder-btn):not(.results-filters-btn):not(.admin-btn):not(.brand-card):not(.variant-card):not(.model-card):not(.generation-card):not(.featured-generation-card):not(.news-card):not(.compare-car-link):not(.compare-add-more):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
  color: #7dd3fc;
}

html[data-color-mode="dark"] .breadcrumb-link {
  color: var(--color-primary-light) !important;
}

/* ---- Choice cards ---- */
html[data-color-mode="dark"] .choice-card::before {
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

html[data-color-mode="dark"] .choice-card-media {
  background: #ffffff !important;
  border-color: rgba(226, 232, 240, 0.35) !important;
}

html[data-color-mode="dark"] .choice-card-number {
  color: rgba(255, 255, 255, 0.08) !important;
}

html[data-color-mode="dark"] .feature-cards-viewport.is-collapsed::after {
  background: linear-gradient(180deg, transparent 0%, var(--color-surface) 72%);
}

html[data-color-mode="dark"] .admin-image-alert {
  background: linear-gradient(180deg, #450a0a 0%, #7f1d1d 100%);
  border-bottom-color: rgba(254, 202, 202, 0.45);
}

html[data-color-mode="dark"] .admin-image-alert a {
  color: #fde68a;
}

html[data-color-mode="dark"] .banner-wide-rotator,
html[data-color-mode="dark"] .banner-side-rotator {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .generation-expanded-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--color-primary-rgb), 0.12), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(var(--color-accent-rgb), 0.08), transparent 55%),
    var(--gradient-card) !important;
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .generation-expanded-meta-item {
  background: var(--color-surface-input) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .variant-headers {
  background: var(--color-surface-input) !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] select option {
  background: #1f2937;
  color: #e5e7eb;
}

html[data-color-mode="dark"] input::placeholder,
html[data-color-mode="dark"] textarea::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

html[data-color-mode="dark"] .spec-card:hover {
  background: var(--color-primary-muted) !important;
}

html[data-color-mode="dark"] .spec-wltp-hint {
  background: #151d2b !important;
  border-color: rgba(var(--color-primary-rgb), 0.4) !important;
  color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .spec-wltp-hint:hover,
html[data-color-mode="dark"] .spec-wltp-hint:focus-visible,
html[data-color-mode="dark"] .spec-card--wltp.is-open .spec-wltp-hint {
  background: var(--color-primary) !important;
  color: var(--color-on-primary, #fff) !important;
  border-color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .spec-wltp-popover {
  background: #151d2b !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
  color: #e5e7eb !important;
}

html[data-color-mode="dark"] .spec-wltp-popover p,
html[data-color-mode="dark"] .spec-wltp-popover li {
  color: #e5e7eb !important;
}

html[data-color-mode="dark"] .spec-wltp-popover-note {
  border-top-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-color-mode="dark"] .dealer-contact {
  background: var(--color-surface-input) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .dealer-contact:hover {
  background: var(--color-accent-light) !important;
}

html[data-color-mode="dark"] .premium-finder-cta::after {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 30%, transparent 60%);
}

html[data-color-mode="dark"] .premium-finder-cta::before {
  color: rgba(255, 255, 255, 0.05);
}

html[data-color-mode="dark"] .theme-toggle-btn {
  background: var(--color-surface-section);
  border-color: var(--color-border);
  color: var(--color-text);
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

html[data-color-mode="dark"] .theme-toggle-btn:hover {
  background: var(--color-surface-muted);
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

html[data-color-mode="dark"] .finder-badge {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-color-mode="dark"] :is(
  .appearance-preview-shell,
  .appearance-preview-header,
  .appearance-preview-finder,
  .appearance-preview-cards,
  .appearance-preview-card,
  .appearance-preview-search
) {
  background: var(--color-surface-input) !important;
  border-color: var(--color-border) !important;
}

/* ---- Flat surfaces (no gradients) ---- */
html[data-color-mode="dark"] .results-filters-bar,
html[data-color-mode="dark"] .results-filters-panel,
html[data-color-mode="dark"] .results-filters-mobile-bar,
html[data-color-mode="dark"] .results-filters-form,
html[data-color-mode="dark"] .results-filters-row,
html[data-color-mode="dark"] .results-filter-field,
html[data-color-mode="dark"] .results-filters-actions {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .results-filters-bar {
  background: var(--color-surface) !important;
  border: none !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

html[data-color-mode="dark"] .results-filter-field input,
html[data-color-mode="dark"] .results-filter-field select,
html[data-color-mode="dark"] .results-sort-field select {
  background: var(--color-surface-input) !important;
  background-image: none !important;
  border: none !important;
  color: #f3f4f6 !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .results-filter-field label {
  color: #d1d5db !important;
}

html[data-color-mode="dark"] .results-filter-bubble {
  background: #111827;
  border-color: #2a3648;
  color: #f3f4f6;
}

html[data-color-mode="dark"] .results-filter-bubble-remove {
  color: #cbd5e1;
}

html[data-color-mode="dark"] .variant-card,
html[data-color-mode="dark"] .variant-card.premium-result {
  background: var(--color-surface) !important;
  background-image: none !important;
  border-color: #3a3a3a !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .variant-card-body,
html[data-color-mode="dark"] .variant-card-row,
html[data-color-mode="dark"] .variant-price,
html[data-color-mode="dark"] .variant-badges {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .variant-price.premium-price,
html[data-color-mode="dark"] p.variant-price.premium-price,
html[data-color-mode="dark"] .variant-card.premium-result .variant-price,
html[data-color-mode="dark"] .variant-card.premium-result .variant-price.premium-price {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

html[data-color-mode="dark"] .variant-price.standard-price,
html[data-color-mode="dark"] p.variant-price.standard-price {
  color: #f3f4f6 !important;
}

html[data-color-mode="dark"] .variant-price--sale .variant-price-old,
html[data-color-mode="dark"] span.variant-price-old {
  color: #94a3b8 !important;
}

html[data-color-mode="dark"] .variant-price--sale .variant-price-new,
html[data-color-mode="dark"] span.variant-price-new,
html[data-color-mode="dark"] .variant-card .variant-price-new {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

html[data-color-mode="dark"] .price-from.is-premium,
html[data-color-mode="dark"] p.price-from.is-premium,
html[data-color-mode="dark"] .featured-generation-body .price-from.is-premium {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

html[data-color-mode="dark"] .featured-generations-section,
html[data-color-mode="dark"] .featured-banner-row .featured-generations-section {
  background: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   Dark mode border reset (loaded last) — kills light #e2e8f0 / #dbe3ee outlines
   ========================================================================== */
html[data-color-mode="dark"] {
  --dm-border: #1c2433;
  --dm-border-soft: #161d2a;
}

/* Utility: force quiet borders on a subtree */
html.dm-theme .dm-quiet-borders,
html.dm-theme .dm-quiet-borders * {
  border-color: var(--dm-border, #1c2433) !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

html.dm-theme .dm-quiet-borders .fuel-tab.active,
html.dm-theme .dm-quiet-borders .chargers-show-more-bar .btn-show-more {
  border-color: transparent !important;
}

html.dm-theme .dm-quiet-borders .fuel-city-card.is-cheapest,
html.dm-theme .dm-quiet-borders .fuel-price-row.is-best,
html.dm-theme .dm-quiet-borders .charger-list-item.is-active {
  border-color: rgba(52, 211, 153, 0.4) !important;
}

html.dm-theme .dm-quiet-borders .fuel-summary-card {
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .dm-no-outline,
html[data-color-mode="dark"] .dm-no-outline * {
  border-color: var(--dm-border) !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

/* Broad element wipe for hardcoded light borders from page CSS */
html[data-color-mode="dark"] :is(
  .fuel-city-card,
  .fuel-prices-embed,
  .fuel-prices-embed--home,
  .fuel-meta-pill,
  .fuel-tab,
  .fuel-tab-list,
  .fuel-search input,
  .fuel-city-search,
  .fuel-sort select,
  .fuel-source-note,
  .fuel-empty,
  .fuel-price-row,
  .btn-show-more,
  .utility-page-link,
  .chargers-embed,
  .chargers-embed--home,
  .chargers-panel,
  .chargers-map,
  .chargers-list-wrap,
  .chargers-list-header,
  .chargers-station-list,
  .chargers-show-more-bar,
  .chargers-search input,
  .chargers-city-filter select,
  .charger-list-item,
  .charger-list-thumb-wrap,
  .ac-select-trigger,
  .ac-select-menu,
  .finder-card,
  .finder-intro,
  .finder-field input,
  .finder-field select,
  .toggle-filters-btn,
  .results-filters-bar,
  .results-filter-field input,
  .results-filter-field select,
  .results-sort-field select,
  .header-search-input,
  .header-menu-toggle,
  .theme-toggle-btn,
  .brand-card,
  .variant-card,
  .model-card,
  .generation-card,
  .featured-generation-card,
  .news-card,
  .admin-card,
  .compare-empty,
  .compare-table-wrap
) {
  border-color: var(--dm-border) !important;
}

/* Inputs: full border shorthand so page CSS cannot leave light edges */
html[data-color-mode="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not(.finder-search-input),
  select,
  textarea,
  .ac-select-trigger
) {
  border: 1px solid var(--dm-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .finder-search-input {
  color: #fff !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1.5px solid rgba(233, 213, 255, 0.95) !important;
  caret-color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .finder-search-input:hover {
  border-color: #f8f0ff !important;
}

html[data-color-mode="dark"] .finder-search-input:focus {
  border-color: #ffffff !important;
  background: rgba(15, 23, 42, 0.92) !important;
}

/* Cards / panels / embeds — quiet borders, no default elevation shadows */
html[data-color-mode="dark"] :is(
  [class*="-card"]:not(.fuel-summary-card):not(.is-premium-all),
  [class*="-panel"],
  [class*="-embed"],
  [class*="-wrap"],
  [class*="-bar"]:not(.compare-bar):not(.touch-swipe-hint):not(.leaflet-bar),
  [class*="-list"],
  [class*="-grid"]
) {
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
}

/* Premium brands in "Svi brendovi" — keep gold glow visible in dark mode */
html[data-color-mode="dark"] .brand-card.non-premium.is-premium-all {
  overflow: hidden;
  border-color: rgba(245, 211, 122, 0.45) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html[data-color-mode="dark"] .brand-card.non-premium.is-premium-all:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(245, 211, 122, 0.7) !important;
}

html[data-color-mode="dark"] .brand-card.non-premium.is-premium-all::before {
  font-size: 16px;
  color: #f5d37a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

html[data-color-mode="dark"] .fuel-summary-card {
  border: none !important;
  box-shadow: none !important;
}

/* Kill shadows on anything nested inside another surface */
html[data-color-mode="dark"] :is(
  .fuel-prices-embed,
  .fuel-prices-embed--home,
  .chargers-embed,
  .chargers-embed--home,
  .chargers-panel,
  .chargers-list-wrap,
  .finder-card,
  .finder-intro,
  .results-filters-bar,
  .results-section,
  .home-utilities-section,
  .home-cost-tools-section,
  .brands-section,
  .premium-brands-grid,
  .non-premium-brands-grid,
  .admin-card,
  .modal-content,
  [class*="-panel"],
  [class*="-embed"],
  [class*="-card"]
) :is(
  [class*="-card"]:not(.is-premium-all):not(.premium),
  [class*="-item"],
  [class*="-row"],
  [class*="-wrap"],
  [class*="-list"],
  [class*="-header"],
  [class*="-bar"]:not(.leaflet-bar),
  [class*="-thumb"],
  .btn-show-more,
  .utility-page-link,
  .fuel-tab,
  .fuel-meta-pill,
  .fuel-price-row,
  .fuel-summary-card,
  .charger-list-item,
  .ac-select-trigger,
  .ac-select-menu,
  input:not(.finder-search-input),
  select,
  textarea,
  button
) {
  box-shadow: none !important;
}

/* Finder search glow — must come after nested shadow kill */
html[data-color-mode="dark"] .finder-price-box {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(148, 163, 184, 0.28);
}

html[data-color-mode="dark"] .finder-price-box-label {
  color: #e5e7eb;
}

html[data-color-mode="dark"] .finder-card .finder-search-input {
  color: #fff !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1.5px solid rgba(233, 213, 255, 0.75) !important;
  caret-color: var(--color-primary) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 10px rgba(216, 180, 254, 0.28),
    0 0 18px rgba(var(--color-primary-rgb), 0.16);
  animation:
    finder-input-attention 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
    finder-input-glow 2.8s ease-in-out 1.3s infinite;
}

html[data-color-mode="dark"] .finder-card .finder-search-input:hover {
  border-color: #f8f0ff !important;
}

html[data-color-mode="dark"] .finder-card .finder-search-input:focus {
  border-color: #ffffff !important;
  background: rgba(15, 23, 42, 0.92) !important;
  animation: finder-input-glow 1.8s ease-in-out infinite;
}

html[data-color-mode="dark"] .brands-section .brand-card.non-premium.is-premium-all,
html[data-color-mode="dark"] .non-premium-brands-grid .brand-card.non-premium.is-premium-all {
  overflow: hidden;
  border-color: rgba(245, 211, 122, 0.45) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html[data-color-mode="dark"] .brands-section .brand-card.non-premium.is-premium-all:hover,
html[data-color-mode="dark"] .non-premium-brands-grid .brand-card.non-premium.is-premium-all:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(245, 211, 122, 0.7) !important;
}

html[data-color-mode="dark"] .brands-section .brand-card.non-premium.is-premium-all::before,
html[data-color-mode="dark"] .non-premium-brands-grid .brand-card.non-premium.is-premium-all::before {
  font-size: 16px;
  color: #f5d37a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

html[data-color-mode="dark"] .fuel-tab:not(.active) {
  border: 1px solid var(--dm-border) !important;
  background: #151d2b !important;
}

html[data-color-mode="dark"] .fuel-tab.active {
  border-color: transparent !important;
}

html[data-color-mode="dark"] .fuel-tab-list {
  border-bottom: 1px solid var(--dm-border) !important;
}

html[data-color-mode="dark"] .fuel-price-row {
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-price-row.is-best {
  border-color: rgba(52, 211, 153, 0.28) !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

html[data-color-mode="dark"] .fuel-city-card.is-cheapest {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-color-mode="dark"] .charger-list-item {
  border: 1px solid var(--dm-border) !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .charger-list-item.is-active {
  border-color: #22c55e !important;
}

html[data-color-mode="dark"] .btn-show-more {
  border: 1px solid var(--dm-border) !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .chargers-show-more-bar .btn-show-more {
  border: none !important;
}

html[data-color-mode="dark"] .chargers-list-header,
html[data-color-mode="dark"] .chargers-show-more-bar {
  border-color: var(--dm-border) !important;
}

html[data-color-mode="dark"] .main-header,
html[data-color-mode="dark"] .header-search-container {
  border-bottom-color: var(--dm-border) !important;
  box-shadow: none !important;
}

/* Keep brand logo areas white (intentional) */
html[data-color-mode="dark"] .brand-card.premium .brand-card-image,
html[data-color-mode="dark"] .brand-card.non-premium .brand-card-image {
  background-color: #ffffff !important;
  border-color: transparent !important;
}

/* Leaflet zoom — keep after border kills so + / − stay clear in dark mode */
html[data-color-mode="dark"] .leaflet-control-zoom.leaflet-bar,
html[data-color-mode="dark"] .leaflet-bar.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-in,
html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-out {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  background: #1e293b !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-in {
  border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
}

html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-in:hover,
html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-out:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

/* Dock hamburger bars follow dock item color */
html[data-color-mode="dark"] .mobile-dock-menu-toggle .header-menu-bar,
html.dm-theme .mobile-dock-menu-toggle .header-menu-bar {
  background: currentColor !important;
}

html[data-color-mode="dark"] .header-search-input {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* Breadcrumbs — primary-light is too dim in dark theme */
html[data-color-mode="dark"] .breadcrumb-row {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-color-mode="dark"] .breadcrumb-link {
  color: #ffffff !important;
  opacity: 0.9;
}

html[data-color-mode="dark"] .breadcrumb-link:hover {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: underline;
}

html[data-color-mode="dark"] .breadcrumb-separator {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-color-mode="dark"] .breadcrumb-current {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html[data-color-mode="dark"] .market-stat,
html[data-color-mode="dark"] .brand-showcase,
html[data-color-mode="dark"] .model-showcase,
html[data-color-mode="dark"] .fuel-trip-card,
html[data-color-mode="dark"] .service-estimate,
html[data-color-mode="dark"] .page-hero,
html[data-color-mode="dark"] .fuel-estimate-card,
html[data-color-mode="dark"] .blog-card,
html[data-color-mode="dark"] .mobile-dock,
html[data-color-mode="dark"] .site-footer,
html[data-color-mode="dark"] .results-hero-count {
  border-color: var(--color-border) !important;
  background: var(--gradient-card, var(--color-surface));
}

html[data-color-mode="dark"] .market-strip--hero .market-chip {
  background: rgba(2, 6, 23, 0.55) !important;
  color: #f8fafc !important;
}

html[data-color-mode="dark"] .about-block {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .about-block--quiet,
html[data-color-mode="dark"] .about-offer-item,
html[data-color-mode="dark"] .about-offer-stat {
  background: var(--color-surface-section, #111827) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .about-note {
  background: rgba(var(--color-primary-rgb), 0.14) !important;
}

html[data-color-mode="dark"] .error-useful-card,
html[data-color-mode="dark"] .about-market-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .about-video-play {
  background: rgba(2, 6, 23, 0.78) !important;
}

html[data-color-mode="dark"] .brand-card-premium-star {
  color: #ffd700 !important;
  -webkit-text-fill-color: #ffd700 !important;
}

html[data-color-mode="dark"] .brand-showcase-link.btn {
  color: #fff !important;
}

html[data-color-mode="dark"] .finder-kicker {
  background: var(--color-primary-muted) !important;
  color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .finder-intro-title,
html[data-color-mode="dark"] .finder-intro-text {
  text-shadow: none !important;
}

html[data-color-mode="dark"] .mobile-dock {
  background: rgba(15, 23, 42, 0.94) !important;
}

html[data-color-mode="dark"] .preset-chip {
  background: var(--color-surface-section) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .preset-chip:hover,
html[data-color-mode="dark"] .preset-chip.is-active {
  background: var(--gradient-btn) !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .mobile-dock-item {
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .mobile-dock-item.is-active {
  color: #fff !important;
  background: rgba(var(--color-primary-rgb), 0.22) !important;
}

html[data-color-mode="dark"] .price-from:not(.is-premium) {
  color: #f8fafc !important;
}

html[data-color-mode="dark"] .price-from.is-premium {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

html[data-color-mode="dark"] .section-kicker,
html[data-color-mode="dark"] .finder-kicker {
  color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .search-field input,
html[data-color-mode="dark"] .header-search-input,
html[data-color-mode="dark"] .finder-search-input {
  background: var(--color-surface-input) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] :is(
  .btn--primary,
  .finder-btn.primary,
  .results-filters-btn.primary,
  .header-search-button,
  .results-load-more-btn,
  .feature-cards-more-btn,
  .compare-bar-go,
  .compare-add-more
) {
  color: var(--color-on-primary, #fff) !important;
}

html[data-color-mode="dark"] .choice-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
  color: var(--color-text);
}

html[data-color-mode="dark"] .choice-card .choice-card-title {
  color: var(--color-heading) !important;
}

html[data-color-mode="dark"] .choice-card .choice-card-text {
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .choice-card-number {
  color: rgba(255, 255, 255, 0.08) !important;
}

html[data-color-mode="dark"] .model-showcase {
  background: var(--gradient-card, var(--color-surface)) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .model-showcase h1 {
  color: var(--color-heading) !important;
}

html[data-color-mode="dark"] .model-showcase .price-from:not(.is-premium) {
  color: #f8fafc !important;
}

html[data-color-mode="dark"] .model-showcase .price-from.is-premium {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

/* Search + cards: keep premium prices clearly green in dark mode */
html[data-color-mode="dark"] .search-results-page .variant-price.premium-price,
html[data-color-mode="dark"] .search-results-page p.variant-price.premium-price,
html[data-color-mode="dark"] .search-results-page .variant-card.premium-result .variant-price,
html[data-color-mode="dark"] .search-results-page .variant-card.premium-result .variant-price.premium-price,
html[data-color-mode="dark"] .variant-price.premium-price,
html[data-color-mode="dark"] p.variant-price.premium-price,
html[data-color-mode="dark"] .variant-card.premium-result .variant-price,
html[data-color-mode="dark"] .variant-card.premium-result p.variant-price,
html[data-color-mode="dark"] .price-from.is-premium,
html[data-color-mode="dark"] p.price-from.is-premium {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

html[data-color-mode="dark"] .search-results-page .variant-price-new,
html[data-color-mode="dark"] .variant-price--sale .variant-price-new {
  color: #4ade80 !important;
  -webkit-text-fill-color: #4ade80 !important;
}

html[data-color-mode="dark"] .model-showcase .spec-chip {
  background: var(--color-surface-section) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .header-logo a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-color-mode="dark"] .header-logo .logo-mark {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="nocturne"][data-color-mode="dark"] :is(
  .btn--primary,
  .finder-btn.primary,
  .header-search-button,
  .results-filters-btn.primary
) {
  color: #0a0a0a !important;
}