/* ─────────────────────────────── FONTURI ───────────────────────────────
   Archivo și Inter, servite de pe domeniul propriu, nu de la Google.
   Trei motive: două conexiuni mai puțin la prima vizită, textul nu mai sare
   când sosesc fonturile, iar adresa IP a vizitatorului nu mai pleacă la Google
   fără consimțământ — lucru pentru care instanțele germane au dat deja daune.

   Fișierele sunt tăiate la caracterele folosite efectiv de site, plus
   diacriticele românești și literele accentuate din nume străine: 64 KB în loc
   de 302 KB cât livra Google. Archivo e fixat la lățimea 110%, singura pe care
   o folosim. Refacerea lor e descrisă în scripts/fonturi.md.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;   /* lățimea e deja fixată la 110% în fișier */
  font-display: swap;
  src: url('fonturi/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;   /* lățimea e deja fixată la 110% în fișier */
  font-display: swap;
  src: url('fonturi/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonturi/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonturi/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   KAROX — Sistem de design
   MACAS AUTO SRL
   Direcția D: alb dominant · negru · roșu doar pe acțiuni
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Culori de brand */
  --kx-black:        #111214;
  --kx-black-pure:   #0A0A0A;
  --kx-red:          #E4141B;
  --kx-red-hover:    #C10F16;
  --kx-red-on-dark:  #FF3B41;

  /* Neutre */
  --kx-white:        #FFFFFF;
  --kx-paper:        #F4F5F7;
  --kx-paper-2:      #EBEDF0;
  --kx-line:         #E3E5E8;
  --kx-line-strong:  #C9CDD2;
  --kx-muted:        #6B6F73; /* 4.64:1 pe fundal --kx-paper, trece AA */
  --kx-body:         #4A4D51;

  /* Stări funcționale — separate de roșul de brand */
  --kx-success-bg:   #E4F5EC;
  --kx-success-fg:   #0A5C36;
  --kx-warn-bg:      #FFF4E0;
  --kx-warn-fg:      #8A5A00;
  --kx-error:        #B42318;
  --kx-error-bg:     #FEF3F2;

  /* Tipografie */
  --kx-font-head: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --kx-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --kx-radius:    6px;
  --kx-radius-lg: 10px;
  --kx-max:       1200px;
  --kx-header-h:  68px;

  /* Umbre — folosite foarte rar, doar pentru elemente flotante */
  --kx-shadow:    0 1px 2px rgba(17,18,20,.06), 0 8px 24px rgba(17,18,20,.08);
  --kx-shadow-sm: 0 1px 2px rgba(17,18,20,.06), 0 2px 8px rgba(17,18,20,.06);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Atributul `hidden` trebuie să învingă orice `display` pus pe clasă.
   Fără regula asta, `.field { display: flex }` anula `<div hidden>`. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--kx-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kx-body);
  background: var(--kx-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--kx-font-head);
  font-stretch: 110%;
  font-weight: 600;
  color: var(--kx-black);
  margin: 0 0 .5em;
  line-height: 1.18;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(30px, 5vw, 44px); }
h2 { font-size: clamp(22px, 3.4vw, 30px); }
h3 { font-size: 18px; }
p  { margin: 0 0 1em; }

/* Focus vizibil pentru navigare la tastatură */
:focus-visible {
  outline: 2px solid var(--kx-red);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--kx-black); color: #fff;
  padding: 10px 16px; border-radius: var(--kx-radius);
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--kx-max); margin: 0 auto; padding: 0 20px; }

.section     { padding: 64px 0; }
.section--sm { padding: 44px 0; }
.section--paper { background: var(--kx-paper); }
.section--dark  { background: var(--kx-black); color: #B9BDC2; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section-head { margin-bottom: 28px; }
.section-head p { color: var(--kx-muted); margin: 0; max-width: 62ch; }
.eyebrow {
  font-family: var(--kx-font-head);
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--kx-muted); margin: 0 0 10px; font-weight: 500;
}
.rule { width: 48px; height: 3px; background: var(--kx-red); margin: 0 0 18px; }

/* `align-items: stretch` e valoarea implicită, dar o scriem explicit ca să nu
   fie schimbată din greșeală: ea face ca toate chenarele de pe un rând să aibă
   aceeași înălțime, indiferent cât text are fiecare. */
.grid { display: grid; gap: 16px; align-items: stretch; }

/* Chenarele dintr-o grilă devin coloane flexibile, ca un element de la final
   să poată fi lipit de baza cardului cu `margin-top: auto`. */
.grid > .panel { display: flex; flex-direction: column; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --------------------------------------------------------------------------
   4. BUTOANE
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500; line-height: 1;
  padding: 13px 22px; border-radius: var(--kx-radius);
  border: 1px solid transparent; background: none; color: var(--kx-black);
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--kx-red); color: #fff; }
.btn--primary:hover { background: var(--kx-red-hover); }

.btn--dark { background: var(--kx-black); color: #fff; }
.btn--dark:hover { background: #2A2C30; }

.btn--outline { border-color: var(--kx-line-strong); color: var(--kx-black); background: #fff; }
.btn--outline:hover { border-color: var(--kx-black); background: var(--kx-paper); }

.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.32); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); }

.btn--sm  { padding: 9px 15px; font-size: 14px; }
.btn--lg  { padding: 16px 30px; font-size: 16px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--kx-black); position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-header .wrap {
  min-height: var(--kx-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* ── WORDMARK ───────────────────────────────────────────────────────────────
   Fiecare literă are propriul spațiu în dreapta, nu o valoare unică pentru
   toate. `letter-spacing` pune aceeași cantitate peste tot, dar golul optic
   diferă: după K, ale cărei brațe se deschid spre dreapta, pare mai mare decât
   după R, care are un picior drept. Valorile de mai jos egalizează golul văzut,
   nu pe cel măsurat. Ultima literă nu are spațiu, ca blocul să nu iasă din ax. */
.logo {
  font-family: var(--kx-font-head); font-stretch: 110%;
  font-size: 21px; font-weight: 600; color: #fff;
  display: inline-flex; align-items: baseline; letter-spacing: 0;
}
.logo i { font-style: normal; margin-right: .115em; }
.logo i.k { margin-right: .115em; }  /* K→A: brațul lui K și vârful lui A lasă gol doar sus */
.logo i.a { margin-right: .105em; }  /* A→R: piciorul lui A iese mult spre dreapta jos */
.logo i.r { margin-right: .120em; }  /* R→O: două forme pline, au nevoie de cel mai mult aer */
.logo i.o { margin-right: .085em; }  /* O→X: rotundul și diagonala se retrag amândouă */
.logo i.x { margin-right: 0; color: var(--kx-red-on-dark); }

/* Varianta veche, cu un singur <span> pentru X, rămâne funcțională */
.logo > span { color: var(--kx-red-on-dark); }

.logo-wrap { display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1; }

/* Taglineul se întinde exact pe lățimea wordmarkului, iar literele se
   distribuie egal între margini. Așa cele două rânduri se citesc ca un bloc. */
.logo-tag {
  display: flex; justify-content: space-between;
  font-family: var(--kx-font-body); font-stretch: normal;
  font-size: 8px; color: #7F858B; font-weight: 400;
  margin-top: 6px; text-transform: uppercase;
}
.logo-tag i { font-style: normal; }

/* Taglineul de sine stătător din subsol, cu liniile roșii din identitate */
.tagline {
  display: flex; align-items: center; gap: 10px;
  font-size: 9.5px; letter-spacing: 2.8px; color: #7F858B;
  margin: 10px 0 0; text-transform: uppercase;
}
.tagline::before, .tagline::after {
  content: ''; height: 1px; background: var(--kx-red); flex: 1; max-width: 34px;
}

@media (max-width: 400px) {
  .logo { font-size: 18px; }
  .logo-tag { font-size: 7px; }
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: 14.5px; color: #B9BDC2; padding: 6px 0;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:hover { color: #fff; }
.nav a.is-active { color: #fff; border-bottom-color: var(--kx-red); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone {
  font-size: 14.5px; color: #fff; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
}
.header-phone svg { width: 15px; height: 15px; stroke: var(--kx-red-on-dark); }

.burger {
  display: none; background: none; border: 0; padding: 8px;
  color: #fff; margin-right: -8px;
}
.burger svg { width: 24px; height: 24px; stroke: currentColor; }

/* --------------------------------------------------------------------------
   6. HERO + FORMULAR DE CĂUTARE
   -------------------------------------------------------------------------- */
/* Fundalul închis se termină sub cardul de căutare, nu prin el.
   Înainte, cardul era împins în afara secțiunii cu `transform`, iar textul
   de sub formular cădea fix pe linia dintre negru și alb. */
.hero { background: var(--kx-black); color: #B9BDC2; padding: 56px 0 48px; position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; right: -140px; top: -60px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,20,27,.16) 0%, transparent 68%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: 14px; }
.hero-sub { font-size: 17px; color: #B9BDC2; max-width: 52ch; margin-bottom: 26px; }

.hero-usp { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 30px; padding: 0; list-style: none; }
.hero-usp li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #D3D6DA; }
.hero-usp svg { width: 17px; height: 17px; stroke: var(--kx-red-on-dark); flex: none; }

/* Formularul de căutare — card alb, așezat complet în interiorul zonei închise */
.search-card {
  background: #fff; border-radius: var(--kx-radius-lg);
  padding: 20px; box-shadow: var(--kx-shadow);
  position: relative; z-index: 2;
}

.search-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--kx-line); }
.search-tab {
  background: none; border: 0; padding: 8px 14px 11px; font-size: 14px; font-weight: 500;
  color: var(--kx-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.search-tab.is-active { color: var(--kx-black); border-bottom-color: var(--kx-red); }

/* Perioada ocupă două coloane, fiind un singur control cu două capete.
   `minmax(0, 1fr)` e obligatoriu: fără el, o casetă cu text lung ar crește
   peste rând și coloanele nu ar mai fi egale. */
.search-grid {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) auto;
  align-items: end;
}

/* Când se alege predarea în alt oraș, apare încă o casetă de oraș */
.search-card.is-doua-orase .search-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr) auto;
}

/* Aceeași înălțime pentru toate controalele, ca baza rândului să fie dreaptă */
.search-grid select,
.search-grid .range,
.search-grid .btn { height: 46px; }
.search-grid .btn { padding-top: 0; padding-bottom: 0; }

/* ── Câmp cu icon în interior ─────────────────────────────────────────────
   Iconul stă în control, nu lângă etichetă: se recunoaște mai repede și
   lasă eticheta să fie doar text. */
.control { position: relative; display: flex; }
.control > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--kx-muted);
  pointer-events: none; fill: none;
}
.control select { padding-left: 36px; }

/* ── Perioada: un singur chenar cu două capete ────────────────────────────
   Vizual e un control unic, ca să se citească drept interval, nu ca două
   câmpuri fără legătură între ele. Fiecare capăt are eticheta lui deasupra,
   aliniată exact peste jumătatea căreia îi aparține, ca să se vadă imediat
   care dată e ridicarea și care returnarea. */
.range-etichete {
  display: grid; grid-template-columns: 1fr 26px 1fr;
  margin-bottom: 6px;
}
.range-etichete label {
  font-size: 12.5px; font-weight: 500; color: var(--kx-muted);
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.range-etichete label svg { width: 13px; height: 13px; stroke: var(--kx-muted); fill: none; flex: none; }
.range-etichete label:hover { color: var(--kx-black); }
.range-etichete label:hover svg { stroke: var(--kx-black); }

.range {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  border: 1px solid var(--kx-line-strong); border-radius: var(--kx-radius);
  background: #fff; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.range:hover { border-color: var(--kx-muted); }
.range:focus-within { border-color: var(--kx-black); box-shadow: 0 0 0 3px rgba(17,18,20,.08); }

.range-capat { position: relative; display: flex; align-items: center; min-width: 0; }
.range-capat input[type="date"] {
  border: 0; border-radius: 0; height: 100%;
  padding: 0 46px 0 34px; background: transparent; font-size: 15px;
}
.range-capat input[type="date"]:hover { border: 0; }
.range-capat input[type="date"]:focus { outline: none; box-shadow: none; }
.range-capat > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--kx-muted); pointer-events: none; fill: none;
}

/* Ziua săptămânii, calculată din data aleasă. Ajută la planificare mai mult
   decât cifra singură și nu adaugă niciun rând în înălțime. */
.range-zi {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--kx-muted); pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.range-sep {
  display: flex; align-items: center; justify-content: center;
  width: 26px; color: var(--kx-line-strong); font-size: 15px;
  border-left: 1px solid var(--kx-line); border-right: 1px solid var(--kx-line);
  background: var(--kx-paper);
}

@media (max-width: 520px) {
  .range-capat input[type="date"] { padding: 0 40px 0 30px; font-size: 14px; }
  .range-capat > svg { left: 9px; }
  .range-zi { right: 8px; font-size: 11px; }
}

/* Câmpul are nevoie de poziționare pentru elementele din interior */
.field { position: relative; }

/* --------------------------------------------------------------------------
   7. FORMULARE
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label {
  font-size: 12.5px; font-weight: 500; color: var(--kx-muted);
  display: flex; align-items: center; gap: 6px;
}
.field > label svg { width: 14px; height: 14px; stroke: var(--kx-muted); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"], select, textarea {
  font-family: var(--kx-font-body);
  font-size: 16px; /* 16px minim: previne zoom-ul automat pe iOS */
  color: var(--kx-black); background: #fff;
  border: 1px solid var(--kx-line-strong); border-radius: var(--kx-radius);
  padding: 11px 12px; width: 100%; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6F73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 34px;
}
input:hover, select:hover, textarea:hover { border-color: var(--kx-muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--kx-black);
  box-shadow: 0 0 0 3px rgba(17,18,20,.08);
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--kx-error); box-shadow: 0 0 0 3px rgba(180,35,24,.1);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

.field-error { font-size: 12.5px; color: var(--kx-error); display: none; }
.field-error.is-shown { display: block; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: var(--kx-body); cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--kx-red); flex: none; cursor: pointer; }

/* --------------------------------------------------------------------------
   8. CARDURI DE MAȘINI
   -------------------------------------------------------------------------- */
.car-card {
  background: #fff; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.car-card:hover { border-color: var(--kx-line-strong); box-shadow: var(--kx-shadow-sm); transform: translateY(-2px); }
.car-card.is-featured { border-color: var(--kx-red); }

.car-media {
  background: var(--kx-paper); padding: 18px 16px 12px;
  display: flex; align-items: center; justify-content: center;
  min-height: 132px; position: relative;
}
.car-media svg { width: 100%; max-width: 210px; height: auto; }

.badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: .3px;
  padding: 4px 9px; border-radius: 4px;
}
.badge--stock  { background: var(--kx-success-bg); color: var(--kx-success-fg); }
.badge--low    { background: var(--kx-warn-bg);    color: var(--kx-warn-fg); }
.badge--top    { background: var(--kx-black);      color: #fff; }
.badge--out    { background: var(--kx-paper-2);    color: var(--kx-muted); }

.car-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.car-cat { font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--kx-muted); margin: 0 0 4px; }
.car-name { font-family: var(--kx-font-body); font-stretch: normal; font-size: 17px; font-weight: 600; color: var(--kx-black); margin: 0 0 12px; letter-spacing: 0; }
.car-name a { color: inherit; }
.car-name a:hover { color: var(--kx-red); text-decoration: underline; text-underline-offset: 3px; }

.car-specs { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.car-specs li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--kx-body); }
.car-specs svg { width: 15px; height: 15px; stroke: var(--kx-muted); flex: none; }

.car-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kx-line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.price { font-variant-numeric: tabular-nums; }
.price b { font-size: 22px; font-weight: 600; color: var(--kx-black); letter-spacing: -.02em; }
.price span { font-size: 12.5px; color: var(--kx-muted); }
.price small { display: block; font-size: 12px; color: var(--kx-muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   9. FILTRE (pagina Flotă)
   -------------------------------------------------------------------------- */
.fleet-layout { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }

.filters {
  background: #fff; border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg); padding: 18px; position: sticky; top: calc(var(--kx-header-h) + 16px);
}
.filter-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--kx-line); }
.filter-block:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.filter-block h4 {
  font-family: var(--kx-font-body); font-stretch: normal; font-size: 13px; font-weight: 600;
  color: var(--kx-black); margin: 0 0 10px; letter-spacing: 0;
}
.filter-opt { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 4px 0; cursor: pointer; color: var(--kx-body); }
.filter-opt input { width: 16px; height: 16px; accent-color: var(--kx-red); cursor: pointer; }
.filter-opt .count { margin-left: auto; font-size: 12px; color: var(--kx-muted); font-variant-numeric: tabular-nums; }

.range-out { font-size: 14px; font-weight: 500; color: var(--kx-black); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--kx-red); }

.fleet-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.fleet-count { font-size: 14px; color: var(--kx-muted); }
.fleet-count b { color: var(--kx-black); font-variant-numeric: tabular-nums; }

.filters-toggle { display: none; }

.empty-state {
  text-align: center; padding: 56px 20px;
  border: 1px dashed var(--kx-line-strong); border-radius: var(--kx-radius-lg);
  color: var(--kx-muted);
}

/* --------------------------------------------------------------------------
   10. PAȘI / ÎNCREDERE / FAQ
   -------------------------------------------------------------------------- */
.step { position: relative; padding-top: 6px; }
.step-num {
  font-family: var(--kx-font-head); font-stretch: 110%;
  font-size: 34px; font-weight: 600; color: var(--kx-line-strong);
  line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 14.5px; color: var(--kx-muted); margin: 0; }

.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--kx-paper); display: flex; align-items: center; justify-content: center;
}
.trust-icon svg { width: 20px; height: 20px; stroke: var(--kx-red); }
.trust-item h3 { font-family: var(--kx-font-body); font-stretch: normal; font-size: 15.5px; font-weight: 600; margin: 2px 0 4px; letter-spacing: 0; }
.trust-item p { font-size: 14px; color: var(--kx-muted); margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
.stat b {
  display: block; font-family: var(--kx-font-head); font-stretch: 110%;
  font-size: 32px; font-weight: 600; color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 13.5px; color: #9BA0A6; }

.faq-item { border-bottom: 1px solid var(--kx-line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 18px 40px 18px 0; font-size: 16px; font-weight: 500; color: var(--kx-black);
  position: relative; line-height: 1.45;
}
.faq-q::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--kx-muted); border-bottom: 2px solid var(--kx-muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq-item.is-open .faq-q::after { transform: translateY(-30%) rotate(-135deg); }
.faq-a { display: none; padding: 0 40px 20px 0; font-size: 15px; color: var(--kx-body); }
.faq-item.is-open .faq-a { display: block; }

/* --------------------------------------------------------------------------
   11. FLUX DE REZERVARE
   -------------------------------------------------------------------------- */
.steps-bar { display: flex; gap: 0; margin-bottom: 28px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-lg); overflow: hidden; }
.steps-bar li {
  flex: 1; list-style: none; padding: 13px 16px; font-size: 14px; font-weight: 500;
  color: var(--kx-muted); background: var(--kx-paper); border-right: 1px solid var(--kx-line);
  display: flex; align-items: center; gap: 9px;
}
.steps-bar li:last-child { border-right: 0; }
.steps-bar li.is-active { background: #fff; color: var(--kx-black); box-shadow: inset 0 -3px 0 var(--kx-red); }
.steps-bar li.is-done { background: #fff; color: var(--kx-body); }
.steps-bar .dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--kx-line); color: var(--kx-black);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.steps-bar li.is-active .dot { background: var(--kx-red); color: #fff; }
.steps-bar li.is-done .dot { background: var(--kx-black); color: #fff; }

.booking-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }

.panel { background: #fff; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-lg); padding: 22px; }
/* Panourile puse unul sub altul au nevoie de spațiu între ele.
   Într-o grilă însă distanța o dă `gap`, iar marginea asta ar împinge
   al doilea chenar din fiecare rând mai jos decât primul. */
.panel + .panel { margin-top: 16px; }
.grid > .panel + .panel { margin-top: 0; }
.panel h3 { margin-bottom: 4px; }
.panel-hint { font-size: 14px; color: var(--kx-muted); margin: 0 0 18px; }

.summary { background: #fff; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-lg); overflow: hidden; position: sticky; top: calc(var(--kx-header-h) + 16px); }
.summary-head { background: var(--kx-black); color: #fff; padding: 14px 18px; }
.summary-head h3 { color: #fff; margin: 0; font-size: 16px; }
.summary-body { padding: 18px; }
.summary-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 7px 0; font-variant-numeric: tabular-nums;
}
.summary-line span:last-child { font-weight: 500; color: var(--kx-black); white-space: nowrap; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--kx-line);
  font-variant-numeric: tabular-nums;
}
.summary-total span { font-size: 15px; font-weight: 500; color: var(--kx-black); }
.summary-total b { font-family: var(--kx-font-head); font-stretch: 110%; font-size: 27px; color: var(--kx-black); letter-spacing: -.02em; }

.extra {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--kx-line); border-radius: var(--kx-radius); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.extra:hover { border-color: var(--kx-line-strong); background: #FCFCFD; }
.extra.is-on { border-color: var(--kx-black); background: #FCFCFD; }
.extra input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--kx-red); flex: none; cursor: pointer; }
.extra-txt { flex: 1; }
.extra-txt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--kx-black); }
.extra-txt small { font-size: 13px; color: var(--kx-muted); line-height: 1.45; display: block; margin-top: 2px; }
.extra-price { font-size: 14px; font-weight: 600; color: var(--kx-black); white-space: nowrap; font-variant-numeric: tabular-nums; }

.notice {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--kx-radius);
  font-size: 14px; line-height: 1.5;
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.notice--info { background: var(--kx-paper); color: var(--kx-body); }
.notice--info svg { stroke: var(--kx-muted); }
.notice--ok { background: var(--kx-success-bg); color: var(--kx-success-fg); }
.notice--ok svg { stroke: var(--kx-success-fg); }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--kx-black); color: #9BA0A6; padding: 48px 0 0; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 36px; }
.site-footer h4 {
  font-family: var(--kx-font-body); font-stretch: normal; font-size: 13px; font-weight: 600;
  color: #fff; letter-spacing: .4px; margin: 0 0 14px; text-transform: uppercase;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a:hover { color: #fff; }
.footer-about p { font-size: 14px; line-height: 1.6; margin: 14px 0 0; color: #8A9096; max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: #7F858B;
}

/* --------------------------------------------------------------------------
   12b. PAGINA UNEI MAȘINI
   -------------------------------------------------------------------------- */
.breadcrumb { background: var(--kx-paper); border-bottom: 1px solid var(--kx-line); font-size: 13.5px; }
.breadcrumb .wrap { display: flex; align-items: center; gap: 9px; padding-top: 11px; padding-bottom: 11px; flex-wrap: wrap; }
.breadcrumb a { color: var(--kx-muted); }
.breadcrumb a:hover { color: var(--kx-black); text-decoration: underline; }
.breadcrumb span[aria-hidden] { color: var(--kx-line-strong); }
.breadcrumb [aria-current] { color: var(--kx-black); font-weight: 500; }

.car-hero { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 34px; align-items: center; }
.car-hero-media {
  background: var(--kx-paper); border-radius: var(--kx-radius-lg);
  padding: 34px 26px; display: flex; align-items: center; justify-content: center;
}
.car-hero-media svg { width: 100%; height: auto; }

.car-specs--lg {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px; margin: 20px 0 22px;
}
.car-specs--lg li { font-size: 14.5px; }
.car-specs--lg svg { width: 17px; height: 17px; }

.car-cta {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--kx-line);
}

.lista-bifata { list-style: none; padding: 0; margin: 0; }
.lista-bifata li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; }
.lista-bifata svg { width: 17px; height: 17px; color: var(--kx-success-fg); flex: none; margin-top: 3px; }

.tbl-simplu { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl-simplu th, .tbl-simplu td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--kx-line); }
.tbl-simplu th { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--kx-muted); background: var(--kx-paper); font-weight: 600; }
.tbl-simplu td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--kx-black); white-space: nowrap; }
.tbl-simplu tr:last-child td { border-bottom: 0; }
.tbl-wrap { border: 1px solid var(--kx-line); border-radius: var(--kx-radius-lg); overflow: hidden; }
.tbl-scroll { overflow-x: auto; }

@media (max-width: 820px) {
  .car-hero { grid-template-columns: 1fr; gap: 22px; }
  .car-hero-media { padding: 24px 18px; }
}

/* --------------------------------------------------------------------------
   12c. PAGINI DE TEXT (termeni, confidențialitate, cookie-uri)
   -------------------------------------------------------------------------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 20px; margin-top: 34px; }
.legal h3 { font-size: 16px; margin-top: 22px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal .actualizat {
  font-size: 13.5px; color: var(--kx-muted);
  padding: 12px 16px; background: var(--kx-paper); border-radius: var(--kx-radius);
  border-left: 3px solid var(--kx-red); border-radius: 0;
}

/* --------------------------------------------------------------------------
   13. UTILITARE
   -------------------------------------------------------------------------- */
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--kx-muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 12px; }
.hide { display: none !important; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kx-paper); color: var(--kx-body);
  font-size: 13px; padding: 5px 11px; border-radius: 100px;
}
.pill svg { width: 14px; height: 14px; stroke: var(--kx-muted); }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .fleet-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .filters.is-open { display: block; }
  .filters-toggle { display: inline-flex; }
  .booking-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* Pe ecrane medii, două casete pe rând, iar butonul pe toată lățimea.
   Selectorul repetă `.search-card` ca să bată regula de patru coloane
   de mai sus, care e mai specifică. */
@media (max-width: 860px) {
  .search-card .search-grid,
  .search-card.is-doua-orase .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Perioada și butonul se întind pe toată lățimea: intervalul are nevoie de
     spațiu ca cele două date să nu se înghesuie una în alta. */
  .search-grid > .field:has(.range),
  .search-grid > *:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --kx-header-h: 60px; }
  .burger { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kx-black); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 20px 18px; display: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav a.is-active { border-bottom-color: rgba(255,255,255,.08); color: var(--kx-red-on-dark); }
  .header-phone span { display: none; }
  .section { padding: 44px 0; }
  .hero { padding: 38px 0 34px; }
  .search-card { padding: 16px; }
  .search-card .search-grid,
  .search-card.is-doua-orase .search-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-bar { flex-direction: column; }
  .steps-bar li { border-right: 0; border-bottom: 1px solid var(--kx-line); }
  .steps-bar li.is-active { box-shadow: inset 3px 0 0 var(--kx-red); }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .car-specs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .car-foot { flex-direction: column; align-items: stretch; }
  .car-foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .btn, .filters { display: none !important; }
  body { color: #000; }
}

/* ─────────────────────────── DISPONIBILITATE ───────────────────────────
   O mașină ocupată în perioada căutată rămâne vizibilă, dar stinsă: clientul
   trebuie să vadă că există, ca să revină pe alte date. */
.car-card.is-ocupata .car-media { opacity: .45; filter: grayscale(1); }
.car-card.is-ocupata .car-name a { color: var(--kx-muted); }

.car-ocupat {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--kx-line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--kx-muted);
}

.btn.is-blocat {
  background: var(--kx-paper);
  color: var(--kx-muted);
  border: 1px solid var(--kx-line);
  cursor: not-allowed;
  pointer-events: none;
}

/* Anunțul de conflict din pagina de rezervare. */
.notice--ocupat {
  border-color: color-mix(in srgb, var(--kx-error) 35%, var(--kx-line));
  background: color-mix(in srgb, var(--kx-error) 6%, #fff);
}
.notice--ocupat svg { color: var(--kx-error); }