/* CARTO Design System — base tokens */
:root {
  /* Primary */
  --midnight: #0F2A3D;
  --snow: #FFFFFF;
  --voltage: #00C896;
  /* Secondary */
  --mint: #E8F8F2;
  --mist: #F4F7F5;
  --stone: #D4DDE3;
  /* Functional */
  --success: #00B870;
  --alert: #E5484D;
  --caution: #F5A623;
  --info: #3B82F6;
  /* Text */
  --graphite: #2C3E50;
  --grey: #5C6B7A;
  --grey-light: #94A3B5;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(15,42,61,0.04), 0 4px 12px rgba(15,42,61,0.04);
  --shadow-pop: 0 12px 40px rgba(0,0,0,0.12);

  --container: 1280px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--graphite);
  background: var(--snow);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
}

/* ===== TYPOGRAPHY ===== */
.t-display { font-family: 'Manrope'; font-weight: 800; font-size: 72px; line-height: 80px; letter-spacing: -0.03em; color: var(--midnight); }
.t-h1 { font-family: 'Manrope'; font-weight: 700; font-size: 56px; line-height: 64px; letter-spacing: -0.025em; color: var(--midnight); }
.t-h2 { font-family: 'Manrope'; font-weight: 700; font-size: 44px; line-height: 52px; letter-spacing: -0.02em; color: var(--midnight); }
.t-h3 { font-family: 'Manrope'; font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -0.015em; color: var(--midnight); }
.t-h4 { font-family: 'Manrope'; font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; color: var(--midnight); }
.t-body-l { font-family: 'Inter'; font-weight: 400; font-size: 18px; line-height: 28px; color: var(--graphite); }
.t-body { font-family: 'Inter'; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--graphite); }
.t-body-s { font-family: 'Inter'; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--graphite); }
.t-caption { font-family: 'Inter'; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: var(--grey); text-transform: uppercase; }
.t-price-l { font-family: 'Inter'; font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: -0.015em; color: var(--midnight); font-feature-settings: 'tnum' 1; }
.t-price-m { font-family: 'Inter'; font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; color: var(--midnight); font-feature-settings: 'tnum' 1; }
.t-button { font-family: 'Manrope'; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: -0.005em; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius);
  font-family: 'Manrope'; font-weight: 600; letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.btn-lg { height: 56px; padding: 0 32px; font-size: 16px; }
.btn-md { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

.btn-primary { background: var(--voltage); color: var(--midnight); }
.btn-primary:hover { background: #00B485; }
.btn-primary:active { background: #00A076; transform: translateY(1px); }
.btn-primary:focus { outline: 2px solid var(--voltage); outline-offset: 2px; }
.btn-primary[disabled] { background: var(--stone); color: var(--grey-light); cursor: not-allowed; }

.btn-secondary { background: transparent; color: var(--midnight); border-color: var(--midnight); }
.btn-secondary:hover { background: var(--midnight); color: var(--snow); }
.btn-secondary:active { background: #08202F; color: var(--snow); transform: translateY(1px); }
.btn-secondary:focus { outline: 2px solid var(--voltage); outline-offset: 2px; }
.btn-secondary[disabled] { color: var(--grey-light); border-color: var(--stone); cursor: not-allowed; }

.btn-ghost { background: transparent; color: var(--midnight); }
.btn-ghost:hover { background: var(--mist); }
.btn-ghost:active { background: var(--stone); }

.btn-inverse { background: transparent; color: var(--snow); border-color: rgba(255,255,255,0.4); }
.btn-inverse:hover { background: var(--snow); color: var(--midnight); border-color: var(--snow); }

/* ===== INPUTS ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-family: 'Inter'; font-weight: 500; font-size: 13px; color: var(--grey); }
.input, .select {
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--stone);
  border-radius: var(--radius);
  background: var(--snow);
  font-family: 'Inter'; font-size: 15px; color: var(--midnight);
  transition: border-color 0.15s ease;
}
.input::placeholder { color: var(--grey-light); }
.input:focus, .select:focus { outline: none; border-color: var(--voltage); }
.input.is-error, .select.is-error { border-color: var(--alert); }
.field-error { font-size: 13px; color: var(--alert); display: flex; align-items: center; gap: 4px; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}

/* Checkbox */
.checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkbox input { display: none; }
.checkbox-box {
  width: 20px; height: 20px;
  border: 1.5px solid var(--stone);
  border-radius: 5px;
  background: var(--snow);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.checkbox input:checked + .checkbox-box { background: var(--voltage); border-color: var(--voltage); }
.checkbox input:checked + .checkbox-box::after {
  content: ""; width: 12px; height: 7px;
  border-left: 2px solid var(--midnight);
  border-bottom: 2px solid var(--midnight);
  transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox-label { font-size: 14px; color: var(--graphite); }

/* Radio */
.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.radio input { display: none; }
.radio-dot {
  width: 20px; height: 20px;
  border: 1.5px solid var(--stone);
  border-radius: 50%;
  background: var(--snow);
  display: flex; align-items: center; justify-content: center;
}
.radio input:checked + .radio-dot { border-color: var(--voltage); }
.radio input:checked + .radio-dot::after {
  content: ""; width: 10px; height: 10px;
  border-radius: 50%; background: var(--voltage);
}

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { display: none; }
.switch-track {
  width: 44px; height: 24px;
  background: var(--stone);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
}
.switch-track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--snow);
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.switch input:checked + .switch-track { background: var(--voltage); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }

/* Slider */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--stone); border-radius: 4px;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--voltage); border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(0,200,150,0.15);
}
.slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--voltage); border-radius: 50%;
  cursor: pointer; border: none;
}

/* ===== CARDS ===== */
.card {
  background: var(--snow);
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  padding: 24px;
}

/* Car card */
.car-card {
  width: 304px;
  background: var(--snow);
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.car-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.car-card-img {
  position: relative;
  height: 170px;
  background:
    linear-gradient(180deg, rgba(15,42,61,0.05), rgba(15,42,61,0.0)),
    repeating-linear-gradient(135deg, #DCE3E8 0 12px, #E5EBEF 12px 24px);
  display: flex; align-items: center; justify-content: center;
}
.car-card-img-label { font-size: 11px; color: var(--grey); letter-spacing: 0.06em; text-transform: uppercase; }
.car-card-img .badge-country { position: absolute; top: 12px; left: 12px; }
.car-card-img .badge-electro { position: absolute; top: 12px; right: 48px; }
.car-card-img .fav-btn {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
}
.car-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.car-card-title { font-family: 'Manrope'; font-weight: 600; font-size: 18px; line-height: 24px; color: var(--midnight); margin: 0; }
.car-card-specs { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--grey); }
.car-card-specs span { display: inline-flex; align-items: center; gap: 4px; }
.car-card-price { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.car-card-price-cap { font-size: 12px; color: var(--grey); }

/* ===== BADGES ===== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: 'Inter'; font-weight: 500; font-size: 12px;
  white-space: nowrap;
}
.badge-country-dark { background: rgba(15,42,61,0.85); color: var(--snow); backdrop-filter: blur(4px); }
.badge-country-mist { background: var(--mist); color: var(--midnight); }
.badge-electro { background: var(--mint); color: #00876C; }
.badge-new { background: var(--mist); color: var(--midnight); }
.badge-success { background: rgba(0,184,112,0.12); color: var(--success); }
.badge-alert { background: rgba(229,72,77,0.12); color: var(--alert); }
.badge-caution { background: rgba(245,166,35,0.14); color: #B97500; }
.badge-info { background: rgba(59,130,246,0.12); color: var(--info); }

/* Header */
.site-header {
  height: 72px;
  border-bottom: 1px solid var(--stone);
  background: var(--snow);
  display: flex; align-items: center;
  padding: 0 32px;
  gap: 48px;
}
.site-header .logo { display: flex; align-items: center; gap: 10px; }
.site-header .logo-text { font-family: 'Manrope'; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--midnight); }
.site-nav { display: flex; gap: 4px; }
.site-nav a {
  padding: 8px 14px; height: 40px; display: inline-flex; align-items: center;
  font-family: 'Manrope'; font-weight: 500; font-size: 14px;
  color: var(--graphite); text-decoration: none;
  border-bottom: 2px solid transparent;
  position: relative;
}
.site-nav a:hover { color: var(--midnight); }
.site-nav a.active { color: var(--voltage); border-bottom-color: var(--voltage); }
.site-header .right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.site-header .phone { font-family: 'Manrope'; font-weight: 600; font-size: 14px; color: var(--midnight); text-decoration: none; }
.site-header .tg-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mist);
  display: flex; align-items: center; justify-content: center;
}

/* Footer */
.site-footer {
  background: var(--midnight);
  color: rgba(255,255,255,0.78);
  padding: 64px 32px 32px;
}
.site-footer .footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; max-width: 1280px; margin: 0 auto; }
.footer-col h5 { font-family: 'Manrope'; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin: 0 0 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.78); text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--voltage); }
.footer-tagline { font-size: 14px; line-height: 22px; color: rgba(255,255,255,0.6); margin: 16px 0 20px; max-width: 280px; }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; }
.footer-socials a:hover { background: var(--voltage); color: var(--midnight); }
.footer-bottom {
  max-width: 1280px; margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .legal a { color: rgba(255,255,255,0.4); text-decoration: none; }
.footer-bottom .legal a:hover { color: rgba(255,255,255,0.7); }

/* Logo (Meridian) — canonical CARTO mark */
.logo-mark { display: inline-block; }