/* =========================================================
   COMPONENTS — LuxurCars.ch
   Nav, Vehicle Card, Buttons, Pills, Footer, Modals, Lightbox
   ========================================================= */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    900;
  height:     var(--nav-height);
  display:    flex;
  align-items: center;
  transition: background var(--transition-smooth),
              border-color var(--transition-smooth);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background:     rgba(10, 11, 13, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--border);
}

[data-theme="light"] .nav.scrolled {
  background: rgba(247, 245, 240, 0.88);
}

.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  max-width:       var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--container-pad);
}

.nav__logo {
  display:     flex;
  align-items: center;
}

/* Logo image (blason) — taille nav */
.nav__logo-img {
  height:     100px;
  width:      auto;
  object-fit: contain;
  display:    block;
  filter:     drop-shadow(0 0 6px rgba(196,158,88,0.35));
  transition: filter 0.25s ease, transform 0.25s ease;
}

.nav__logo:hover .nav__logo-img {
  filter:    drop-shadow(0 0 10px rgba(196,158,88,0.6));
  transform: scale(1.05);
}

.nav__menu {
  display:    flex;
  align-items: center;
  gap:        var(--space-lg);
}

.nav__link {
  font-size:      var(--fs-caption);
  font-weight:    500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  transition:     color var(--transition-fast);
  position:       relative;
}

.nav__link::after {
  content:    '';
  position:   absolute;
  bottom:     -3px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--text-primary);
  transition: width var(--transition-smooth);
}

.nav__link:hover,
.nav__link.active {
  color: var(--text-primary);
}

.nav__link:hover::after,
.nav__link.active::after {
  width: 100%;
}

/* Dropdown */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-menu {
  position:   absolute;
  top:        calc(100% + 16px);
  left:       50%;
  transform:  translateX(-50%);
  min-width:  220px;
  background: var(--bg-slate);
  border:     1px solid var(--border);
  padding:    var(--space-sm) 0;
  opacity:    0;
  pointer-events: none;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  transform-origin: top center;
}

.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity:        1;
  pointer-events: auto;
}

.nav__dropdown-item {
  display:     block;
  padding:     0.6rem 1.5rem;
  font-size:   var(--fs-small);
  color:       var(--text-secondary);
  transition:  color var(--transition-fast), background var(--transition-fast);
}

.nav__dropdown-item:hover {
  color:      var(--text-primary);
  background: var(--bg-steel);
}

.nav__actions {
  display:    flex;
  align-items: center;
  gap:        var(--space-sm);
}

/* Theme toggle */
.theme-toggle {
  width:          36px;
  height:         36px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--text-muted);
  transition:     color var(--transition-fast);
  border-radius:  50%;
}

.theme-toggle:hover { color: var(--text-primary); }
.theme-toggle svg   { width: 16px; height: 16px; }

/* Mobile burger */
.nav__burger {
  display:    none;
  flex-direction: column;
  gap:        5px;
  width:      28px;
  padding:    4px;
}

.nav__burger span {
  display:    block;
  height:     1px;
  background: var(--text-primary);
  transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

.nav__burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile fullscreen menu */
.nav__mobile {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    890;
  background: var(--bg-obsidian);
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            var(--space-lg);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition-smooth);
}

.nav__mobile.open {
  display:        flex;
  opacity:        1;
  pointer-events: auto;
}

.nav__mobile-link {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 6vw, 3.5rem);
  font-weight:    200;
  letter-spacing: -0.02em;
  color:          var(--text-secondary);
  transition:     color var(--transition-fast);
}

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

@media (max-width: 960px) {
  .nav__menu    { display: none; }
  .nav__burger  { display: flex; }
}

@media (max-width: 768px) {
  .nav__logo-img { height: 56px; }
}

@media (max-width: 480px) {
  .nav__logo-img { height: 48px; }
  .nav__actions .theme-toggle { display: none; } /* récupère de l'espace */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         18px 40px;
  font-family:     var(--font-body);
  font-size:       var(--fs-caption);
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  border-radius:   var(--radius-none);
  transition:      background var(--transition-fast),
                   color var(--transition-fast),
                   box-shadow var(--transition-fast),
                   transform var(--transition-fast);
  white-space:     nowrap;
  position:        relative;
  overflow:        hidden;
}

.btn:active { transform: scale(0.98); }

/* Primary */
.btn--primary {
  background: var(--accent);
  color:      var(--text-primary);
}

.btn--primary:hover {
  background:  var(--accent-bright);
  box-shadow:  var(--glow-accent);
}

/* Ghost */
.btn--ghost {
  background:  transparent;
  border:      1px solid var(--text-primary);
  color:       var(--text-primary);
}

.btn--ghost:hover {
  background: var(--text-primary);
  color:      var(--bg-obsidian);
}

/* Ghost accent */
.btn--ghost-accent {
  background:  transparent;
  border:      1px solid var(--accent);
  color:       var(--accent);
}

.btn--ghost-accent:hover {
  background: var(--accent);
  color:      var(--text-primary);
}

/* Small */
.btn--sm {
  padding:    10px 24px;
  font-size:  0.65rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FILTER PILLS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pills {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-xs);
}

.pill {
  padding:        8px 20px;
  font-size:      var(--fs-caption);
  font-weight:    500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border:         1px solid var(--border);
  border-radius:  var(--radius-pill);
  color:          var(--text-muted);
  background:     transparent;
  cursor:         pointer;
  transition:     all var(--transition-fast);
}

.pill:hover {
  border-color: var(--border-hover);
  color:        var(--text-primary);
}

.pill.active {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--text-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VEHICLE CARD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vehicle-card {
  background:   var(--bg-slate);
  border:       1px solid var(--border);
  overflow:     hidden;
  position:     relative;
  display:      flex;
  flex-direction: column;
  transition:   border-color var(--transition-smooth),
                box-shadow var(--transition-smooth);
  cursor:       pointer;
}

.vehicle-card:hover {
  border-color: var(--accent);
  box-shadow:   var(--shadow-card);
}

/* Image wrapper */
.vehicle-card__img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-graphite);
}

.vehicle-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle-card:hover .vehicle-card__img {
  transform: scale(1.03);
  animation: kenBurns 8s ease-in-out infinite;
}

/* Placeholder when no image */
.vehicle-card__img-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bg-steel);
  color:           var(--text-muted);
  font-size:       var(--fs-caption);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
}

/* Badge */
.vehicle-card__badge {
  position:       absolute;
  top:            var(--space-sm);
  left:           var(--space-sm);
  padding:        4px 10px;
  font-size:      0.6rem;
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background:     rgba(10, 11, 13, 0.75);
  border:         1px solid var(--border);
  color:          var(--text-secondary);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Hover specs overlay */
.vehicle-card__specs-overlay {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  padding:     var(--space-sm);
  background:  linear-gradient(to top, rgba(10,11,13,0.95) 0%, transparent 100%);
  display:     flex;
  gap:         var(--space-sm);
  opacity:     0;
  transform:   translateY(8px);
  transition:  opacity var(--transition-smooth), transform var(--transition-smooth);
}

.vehicle-card:hover .vehicle-card__specs-overlay {
  opacity:   1;
  transform: translateY(0);
}

.vehicle-card__spec {
  font-family:    var(--font-mono);
  font-size:      0.7rem;
  color:          var(--text-secondary);
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.vehicle-card__spec-label {
  font-size:      0.6rem;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Card body */
.vehicle-card__body {
  padding:    var(--space-md);
  display:    flex;
  flex-direction: column;
  gap:        0.4rem;
  flex:       1;
}

.vehicle-card__brand {
  font-size:      var(--fs-caption);
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.vehicle-card__model {
  font-family:  var(--font-serif);
  font-style:   italic;
  font-size:    1.6rem;
  font-weight:  400;
  line-height:  1.1;
  color:        var(--text-primary);
}

.vehicle-card__tagline {
  font-size:  var(--fs-small);
  color:      var(--text-secondary);
  margin-top: 0.2rem;
}

.vehicle-card__footer {
  margin-top:      auto;
  padding-top:     var(--space-sm);
  border-top:      1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.vehicle-card__price {
  font-family:         var(--font-mono);
  font-size:           var(--fs-small);
  font-weight:         500;
  color:               var(--accent);
  font-variant-numeric: tabular-nums;
}

.vehicle-card__price-label {
  font-size: 0.65rem;
  color:     var(--text-muted);
}

.vehicle-card__arrow {
  color:      var(--text-muted);
  transition: transform var(--transition-smooth), color var(--transition-fast);
  font-size:  1.2rem;
}

.vehicle-card:hover .vehicle-card__arrow {
  transform: translateX(8px);
  color:     var(--text-primary);
}

/* Compare checkbox */
.vehicle-card__compare {
  position: absolute;
  top:      var(--space-sm);
  right:    var(--space-sm);
}

.compare-check {
  width:       28px;
  height:      28px;
  background:  rgba(10, 11, 13, 0.75);
  border:      1px solid var(--border);
  display:     flex;
  align-items: center;
  justify-content: center;
  cursor:      pointer;
  transition:  background var(--transition-fast), border-color var(--transition-fast);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.compare-check.checked {
  background:   var(--accent);
  border-color: var(--accent);
}

.compare-check svg {
  width:      12px;
  height:     12px;
  color:      var(--text-primary);
  opacity:    0;
  transition: opacity var(--transition-fast);
}

.compare-check.checked svg { opacity: 1; }

/* ── Card featured (2-col span) ──────────────────────────── */
.vehicle-card--featured {
  grid-column: span 2;
}

.vehicle-card--featured .vehicle-card__model {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

@media (max-width: 640px) {
  .vehicle-card--featured { grid-column: span 1; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLEET GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fleet-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1px;
  background:            var(--border);
}

.fleet-grid > * {
  background: var(--bg-obsidian);
}

@media (min-width: 960px) {
  .fleet-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .fleet-grid { grid-template-columns: 1fr; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPARATOR BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.comparator-bar {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    800;
  background: var(--bg-slate);
  border-top: 1px solid var(--border);
  padding:    var(--space-sm) var(--container-pad);
  display:    flex;
  align-items: center;
  justify-content: space-between;
  gap:        var(--space-md);
  transform:  translateY(100%);
  transition: transform var(--transition-smooth);
}

.comparator-bar.active {
  transform: translateY(0);
}

.comparator-bar__slots {
  display: flex;
  gap:     var(--space-sm);
  flex:    1;
}

.comparator-slot {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        8px 16px;
  border:         1px dashed var(--border);
  min-width:      160px;
  font-size:      var(--fs-small);
  color:          var(--text-muted);
}

.comparator-slot.filled {
  border-style: solid;
  border-color: var(--border-hover);
  color:        var(--text-primary);
}

.comparator-slot__remove {
  margin-left: auto;
  color:       var(--text-muted);
  font-size:   1rem;
  transition:  color var(--transition-fast);
}

.comparator-slot__remove:hover { color: var(--accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHTBOX
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lightbox {
  position:    fixed;
  inset:       0;
  z-index:     1000;
  background:  rgba(10, 11, 13, 0.96);
  display:     flex;
  align-items: center;
  justify-content: center;
  opacity:     0;
  pointer-events: none;
  transition:  opacity var(--transition-smooth);
}

.lightbox.open {
  opacity:        1;
  pointer-events: auto;
}

.lightbox__inner {
  max-width:  90vw;
  max-height: 85vh;
  position:   relative;
}

.lightbox__img {
  max-width:   90vw;
  max-height:  85vh;
  object-fit:  contain;
  animation:   lightboxOpen 0.3s ease forwards;
}

.lightbox__close {
  position:  absolute;
  top:       -48px;
  right:     0;
  color:     var(--text-secondary);
  font-size: 1.5rem;
  transition: color var(--transition-fast);
}

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

.lightbox__prev,
.lightbox__next {
  position:   fixed;
  top:        50%;
  transform:  translateY(-50%);
  color:      var(--text-secondary);
  font-size:  2rem;
  padding:    var(--space-sm);
  transition: color var(--transition-fast);
}

.lightbox__prev { left: var(--space-md); }
.lightbox__next { right: var(--space-md); }

.lightbox__prev:hover,
.lightbox__next:hover { color: var(--text-primary); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL (reservation form)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.modal-overlay {
  position:    fixed;
  inset:       0;
  z-index:     950;
  background:  rgba(10, 11, 13, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     var(--space-md);
  opacity:     0;
  pointer-events: none;
  transition:  opacity var(--transition-smooth);
}

.modal-overlay.open {
  opacity:        1;
  pointer-events: auto;
}

.modal {
  background:  var(--bg-slate);
  border:      1px solid var(--border);
  padding:     var(--space-xl);
  max-width:   600px;
  width:       100%;
  animation:   scaleIn 0.3s ease;
}

@media (max-width: 640px) {
  .modal-overlay { padding: var(--space-sm); align-items: flex-end; }
  .modal { padding: var(--space-md); max-height: 92vh; overflow-y: auto; }
  .modal__header { margin-bottom: var(--space-md); }
}

.modal__header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   var(--space-lg);
}

.modal__title {
  font-family:  var(--font-display);
  font-size:    var(--fs-h3);
  font-weight:  300;
}

.modal__close {
  color:     var(--text-muted);
  font-size: 1.5rem;
  transition: color var(--transition-fast);
}

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

/* Form elements */
.form-group {
  display:       flex;
  flex-direction: column;
  gap:           0.4rem;
  margin-bottom: var(--space-sm);
}

.form-label {
  font-size:      var(--fs-caption);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.form-input,
.form-textarea,
.form-select {
  width:         100%;
  padding:       12px 16px;
  background:    var(--bg-steel);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text-primary);
  font-size:     var(--fs-body);
  font-family:   var(--font-body);
  transition:    border-color var(--transition-fast);
  outline:       none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
}

.form-textarea {
  resize:     vertical;
  min-height: 120px;
}

.form-select option {
  background: var(--bg-slate);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHATSAPP FLOAT BUTTON
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.whatsapp-float {
  position:    fixed;
  bottom:      var(--space-lg);
  right:       var(--space-lg);
  z-index:     850;
  width:       52px;
  height:      52px;
  background:  var(--bg-slate);
  border:      1px solid var(--border);
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--text-secondary);
  transition:  background var(--transition-fast),
               border-color var(--transition-fast),
               color var(--transition-fast),
               box-shadow var(--transition-fast);
  animation:   floatPulse 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  background:   var(--bg-steel);
  border-color: var(--border-hover);
  color:        var(--text-primary);
  box-shadow:   0 8px 24px rgba(0, 0, 0, 0.4);
}

.whatsapp-float svg {
  width:  22px;
  height: 22px;
}

@media (max-width: 640px) {
  .whatsapp-float {
    bottom: var(--space-md);
    right:  var(--space-md);
    width:  46px;
    height: 46px;
  }
}

@media (max-width: 480px) {
  .cookies-banner {
    left:      var(--space-sm);
    right:     var(--space-sm);
    max-width: 100%;
  }
  .cookies-banner__actions { flex-wrap: wrap; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COOKIES BANNER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cookies-banner {
  position:    fixed;
  bottom:      var(--space-md);
  left:        var(--space-md);
  z-index:     999;
  max-width:   420px;
  background:  var(--bg-slate);
  border:      1px solid var(--border);
  padding:     var(--space-md);
  animation:   fadeRise 0.5s ease 2s both;
}

.cookies-banner p {
  font-size:    var(--fs-small);
  color:        var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.cookies-banner__actions {
  display: flex;
  gap:     var(--space-xs);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer {
  background:   var(--bg-graphite);
  border-top:   1px solid var(--border);
  padding-top:  var(--space-3xl);
}

.footer__grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   var(--space-xl);
  padding-bottom:        var(--space-xl);
}

@media (max-width: 960px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer { padding-top: var(--space-2xl); }
  .footer__logo-img { height: 80px; }
  .footer__tagline { max-width: 100%; }
}

.footer__brand {
  display:    flex;
  flex-direction: column;
  gap:        var(--space-sm);
}

.footer__logo {
  display:     flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.footer__logo-img {
  height:     120px;
  width:      auto;
  object-fit: contain;
  display:    block;
  filter:     drop-shadow(0 0 4px rgba(196,158,88,0.2));
  opacity:    0.85;
  transition: opacity 0.25s ease;
}

.footer__logo-img:hover {
  opacity: 1;
}

.footer__tagline {
  font-size:  var(--fs-small);
  color:      var(--text-muted);
  max-width:  260px;
  line-height: 1.7;
}

.footer__col-title {
  font-size:      var(--fs-caption);
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  var(--space-sm);
}

.footer__links {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.footer__link {
  font-size:  var(--fs-small);
  color:      var(--text-secondary);
  transition: color var(--transition-fast);
}

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

.footer__contact-item {
  font-size:  var(--fs-small);
  color:      var(--text-secondary);
  margin-bottom: 0.4rem;
}

.footer__contact-item a {
  transition: color var(--transition-fast);
}

.footer__contact-item a:hover { color: var(--text-primary); }

.footer__bottom {
  border-top:  1px solid var(--border);
  padding:     var(--space-md) 0;
  display:     flex;
  justify-content: space-between;
  align-items: center;
  gap:         var(--space-sm);
  flex-wrap:   wrap;
}

.footer__copy {
  font-size: var(--fs-caption);
  color:     var(--text-muted);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRICING TABLE (vehicle detail)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pricing-table {
  width:          100%;
  border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
  padding:     12px 16px;
  text-align:  left;
  border-bottom: 1px solid var(--border);
  font-size:   var(--fs-small);
}

.pricing-table th {
  font-family:    var(--font-mono);
  font-size:      var(--fs-caption);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.pricing-table td:last-child {
  font-family:         var(--font-mono);
  color:               var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPECS CARD (sticky on vehicle detail)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.specs-card {
  background: var(--bg-slate);
  border:     1px solid var(--border);
  padding:    var(--space-lg);
}

.spec-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         10px 0;
  border-bottom:   1px solid var(--border);
  gap:             var(--space-sm);
}

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

.spec-row__label {
  font-size:      var(--fs-caption);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.spec-row__value {
  font-family:         var(--font-mono);
  font-size:           var(--fs-small);
  color:               var(--text-primary);
  text-align:          right;
  font-variant-numeric: tabular-nums;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEAFLET MAP override
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.leaflet-container {
  background: var(--bg-graphite) !important;
}

.map-popup h3 {
  font-size:    var(--fs-small);
  font-weight:  600;
  margin-bottom: 4px;
  color:        var(--bg-obsidian);
}

.map-popup p {
  font-size: 0.75rem;
  color:     #555;
}