/* ========================================
   NafiRent - Rent a Car Otopeni · 2026
   Tema alba: fundal alb, text navy, accent albastru
   ======================================== */

:root {
  --bg: #FFFFFF;
  --bg-2: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #F4F6FA;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #0F1E3A;        /* 16.6:1 pe alb */
  --text-2: #475569;      /* 7.6:1 pe alb */
  --text-3: #64748B;      /* 4.8:1 pe alb */
  --gold: #2563EB;        /* accent; 5.2:1 pe alb, alb pe el 5.2:1 */
  --gold-2: #1D4ED8;      /* accent inchis (hover) */
  --gold-glow: rgba(37, 99, 235, 0.22);
  --gold-soft: rgba(37, 99, 235, 0.08);
  --navy: #0F1E3A;
  --navy-2: #16294D;
  --danger: #DC2626;
  --ok: #15803D;
  --radius: 14px;
  --radius-lg: var(--radius);
  --radius-sm: var(--radius);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 24px -12px rgba(0, 0, 0, 0.18);
  --warn: #B45309;
  --on-accent: #FFFFFF;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.97);
  --car-bg: #FFFFFF;
  --car-bg-image: radial-gradient(ellipse 78% 60% at 50% 60%, #FFFFFF 0%, #F3F4F7 62%, #E4E7EC 100%);
  --page-hero-bg: linear-gradient(180deg, #FFFFFF 0%, var(--bg-2) 100%);
  --modal-visual-bg: linear-gradient(135deg, #F4F6FA 0%, #E6EBF3 100%);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.accent { color: var(--gold); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  font-family: 'Manrope', sans-serif;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.section-head {
  max-width: 680px;
  margin-bottom: 56px;
}
.section-head.center { margin: 0 auto 56px; text-align: center; }
.section-head h2 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.section-head p { color: var(--text-2); font-size: 17px; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0;
  transition: transform 0.2s var(--ease-out), background 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.btn-primary {
  background: var(--gold);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn-ghost {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
.btn-ghost::after {
  content: '→';
  margin-left: 2px;
  transition: transform 0.25s var(--ease-out);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost:hover::after { transform: translateX(4px); }
.btn-block { width: 100%; }

/* ========== NAVIGATION - Slate-blue glass ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 0;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: all 0.35s var(--ease);
}
.nav.scrolled {
  background: var(--nav-bg-scrolled);
  box-shadow: var(--shadow-sm);
  padding: 12px 0;
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.brand-logo {
  height: 52px;
  width: auto;
  display: block;
  transition: transform 0.3s var(--ease-out);
}
.brand:hover .brand-logo {
  transform: scale(1.04);
}
.brand-logo-sm { height: 40px; }
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--on-accent);
  border-radius: 10px;
  font-weight: 800;
}
.nav-links {
  display: flex;
  gap: 36px;
  margin-left: auto;
  margin-right: 24px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* Language switcher */
.lang-switch {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
  border-radius: 999px;
  transition: all 0.2s;
}
/* Stegulete (SVG inline, fara fisiere) pentru RO / EN / IT / ES. */
.lang-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.lang-flag[data-lang="ro"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23002B7F'/%3E%3Crect x='1' width='1' height='2' fill='%23FCD116'/%3E%3Crect x='2' width='1' height='2' fill='%23CE1126'/%3E%3C/svg%3E"); }
.lang-flag[data-lang="it"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E"); }
.lang-flag[data-lang="es"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23AA151B'/%3E%3Crect y='0.5' width='3' height='1' fill='%23F1BF00'/%3E%3C/svg%3E"); }
.lang-flag[data-lang="en"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }

/* Selectorul compact de limba (telefon): steag + cod, lista la atingere. */
.lang-menu { position: relative; display: none; }
.lang-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.lang-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.lang-menu-item.active { background: var(--gold); color: var(--on-accent); }
.lang-menu-item:not(.active):hover { background: var(--surface-2); }
.lang-btn:hover { color: var(--text-2); }
.lang-btn.active {
  background: var(--gold);
  color: var(--on-accent);
}
/* A doua copie a comutatorului, in panoul de meniu mobil: cea din header e
   ascunsa sub 720px, iar fara ea vizitatorul de pe telefon nu poate schimba
   limba. Vizibila doar in media query-ul de mobil, mai jos. */
.lang-switch-mobile { display: none; }
.nav-links .lang-btn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.nav-links .lang-btn::after { display: none; }
.nav-links .lang-btn.active { color: var(--on-accent); background: var(--gold); }

/* Phone card - top right, tap to call */
.phone-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  background: var(--gold-soft);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 999px;
  color: var(--text);
  transition: all 0.3s var(--ease-out);
}
.phone-card:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  color: var(--on-accent);
}
.phone-card svg { color: var(--gold); transition: color 0.3s; position: relative; z-index: 1; }
.phone-card:hover svg { color: var(--on-accent); }
.phone-text {
  display: flex; align-items: center; justify-content: center;
  line-height: 1; position: relative; z-index: 1;
}
.phone-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.3s;
  text-align: center;
}
.phone-card:hover .phone-label { color: var(--on-accent); opacity: 0.95; }

.phone-pulse {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: pulse 2s infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { transform: translateY(-50%) scale(1); opacity: 0.6; }
  100% { transform: translateY(-50%) scale(2.4); opacity: 0; }
}

.burger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.burger span {
  width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s;
}

/* ========== HERO SLIDER ========== */
.hero {
  position: relative;
  padding-top: 84px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.slides {
  display: grid;
  max-width: 1400px;
  margin: 0 auto;
}
.slide {
  grid-area: 1 / 1;
  background: var(--bg-2);
  display: none;
}
.slide.is-active {
  display: block;
  animation: slideIn 0.5s var(--ease-out) both;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 48px;
  padding: 48px 24px 96px;
  min-height: 600px;
}
.slide-text { max-width: 560px; }
.slide-media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-media::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6%;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  filter: blur(14px);
}
.slide-media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.hero-title {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 22px;
  color: var(--text);
}
.hero-title span { display: inline; margin-right: 0.2em; }
.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 32px;
  max-width: 52ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.slider-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 2;
}
.hero:not(.is-ready) .slider-controls { display: none; }
.slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.slider-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.slider-arrow:focus-visible,
.slider-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.slider-dots { display: flex; gap: 10px; align-items: center; }
.slider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.2s, transform 0.2s;
}
.slider-dot:hover { background: var(--text-3); }
.slider-dot.is-active { background: var(--gold); transform: scale(1.3); }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 1100px) {
  .slide-inner { grid-template-columns: 1fr; gap: 24px; padding: 24px 24px 92px; min-height: 0; }
  .slide-media { order: -1; max-width: 640px; width: 100%; margin: 0 auto; }
  .slide-text { max-width: 640px; margin: 0 auto; width: 100%; }
}
@media (max-width: 720px) {
  .hero { padding-top: 76px; }
  .slide-inner { padding: 16px 20px 88px; gap: 16px; }
  .slide-media { aspect-ratio: 16 / 9; }
  .hero-title { font-size: clamp(32px, 9vw, 44px); margin-bottom: 14px; }
  .hero-sub { font-size: 15px; margin-bottom: 22px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .slider-controls { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide.is-active { animation: none; }
  .slider-dot { transition: none; }
}

/* ========== FEATURES ========== */
.features { padding: 100px 0 40px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.feature {
  padding: 30px 28px 26px;
  background: transparent;
  border-top: 1px solid var(--border);
  position: relative;
  transition: border-color 0.3s;
}
.feature:hover { border-top-color: var(--gold); }
.feature-num {
  display: block;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.feature h3, .feature h2 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.feature p { font-size: 14px; color: var(--text-2); line-height: 1.55; }

/* ========== FLEET FILTERS ========== */
.fleet-filters {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 40px;
}
.filter-group { display: flex; align-items: center; gap: 10px; }
.filter-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
}
.filter-sort select {
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.filter-sort select:focus { outline: none; border-color: var(--gold); }
.filter-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-3);
}
.filter-count span:first-child { color: var(--gold); font-weight: 600; }
.fleet-empty {
  text-align: center;
  padding: 80px 20px;
}
.fleet-empty p { color: var(--text-2); margin-bottom: 20px; font-size: 15px; }
@media (max-width: 720px) {
  .fleet-filters { gap: 18px; padding: 16px; flex-direction: column; align-items: stretch; }
  .filter-group { flex-direction: column; align-items: flex-start; gap: 8px; }
  .filter-count { margin-left: 0; }
}

/* ========== FLEET ========== */
.fleet { padding: 80px 0 100px; }
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.car-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.5s var(--ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.car-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.car-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.car-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--car-bg);
  background-image: var(--car-bg-image);
}
.car-img::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(15, 30, 58, 0.19), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}
.car-img img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform 0.8s var(--ease-out);
  mix-blend-mode: darken;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.16)) contrast(1.03);
}
.car-card:hover .car-img img { transform: scale(1.06) translateY(-4px); }
.car-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 16% at 50% 92%, rgba(15, 23, 42, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 3;
}
.car-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  z-index: 2;
}
.car-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.car-name {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.car-cat { font-size: 13px; color: var(--text-3); margin-bottom: 20px; }
.car-specs {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.car-specs > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}
.car-specs svg { color: var(--gold); flex-shrink: 0; }
.car-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
.car-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.car-price strong {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 32px;
  color: var(--gold);
  font-weight: 700;
  line-height: 1;
}
.car-price small { font-size: 13px; color: var(--text-3); }
.car-btn {
  padding: 11px 20px;
  background: var(--gold-soft);
  border: 1px solid rgba(37, 99, 235, 0.4);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  transition: all 0.3s;
}
.car-btn:hover {
  background: var(--gold);
  color: var(--on-accent);
}

/* ========== WHY US ========== */
.why { padding: 100px 0; background: var(--bg-2); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.why-text h2 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.why-text > p { color: var(--text-2); font-size: 17px; margin-bottom: 28px; }
.why-list { list-style: none; margin-bottom: 32px; }
.why-list li {
  padding: 13px 0 13px 26px;
  font-size: 15.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.why-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 1px;
  background: var(--gold);
}
.why-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.why-visual img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.1) brightness(1.05) saturate(1.1);
  transition: transform 1.2s var(--ease-out), filter 0.6s;
}
.why-visual:hover img { transform: scale(1.04); filter: contrast(1.12) brightness(1.08) saturate(1.15); }
.why-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(15, 30, 58, 0.18) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ========== CONTACT ========== */
.contact { padding: 100px 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
}
.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form label.form-consent span { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-2); }
.contact-form label span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  transition: all 0.2s;
  width: 100%;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.contact-form input[type="file"] {
  padding: 14px 16px;
  border: 1.5px dashed var(--border-strong);
  background: rgba(15, 30, 58, 0.05);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input[type="file"]:hover {
  border-color: var(--gold);
  background: rgba(37, 99, 235, 0.05);
}
.contact-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 0;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.contact-form input[type="file"]::file-selector-button:hover {
  opacity: 0.9;
}
.contact-form label.form-consent,
.form-consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.form-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--accent-hover); }
.form-note {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  margin-top: 4px;
}
.btn.loading { opacity: 0.7; cursor: wait; position: relative; }
.btn.loading::after {
  content: '';
  display: inline-block;
  margin-left: 10px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 30, 58, 0.12);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(21, 128, 61, 0.08);
  border: 1px solid rgba(21, 128, 61, 0.35);
  border-radius: 12px;
  color: var(--ok);
  margin-bottom: 20px;
  font-size: 14.5px;
  transition: opacity 0.8s, transform 0.8s;
}
.form-success strong { font-size: 18px; }
.form-success.fade { opacity: 0; transform: translateY(-10px); }

.contact-info { display: flex; flex-direction: column; gap: 14px; }
.info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease-out);
}
.info-card:hover {
  border-color: var(--gold);
  background: var(--surface-2);
  transform: translateX(4px);
}
.info-card.info-phone {
  background: var(--gold-soft);
  border-color: rgba(37, 99, 235, 0.3);
}
.info-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  border-radius: 12px;
  color: var(--gold);
  flex-shrink: 0;
}
.info-card > div:not(.info-icon) {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.info-card > div span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}
.info-card > div strong { font-size: 16px; color: var(--text); }
.info-card > div small { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.info-arrow {
  color: var(--gold);
  font-size: 20px;
  transition: transform 0.3s;
}
.info-card:hover .info-arrow { transform: translateX(4px); }

.map-wrap {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ========== FOOTER ========== */
.footer {
  padding: 48px 0 32px;
  background: var(--navy);
  color: #FFFFFF;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand strong { font-size: 18px; font-weight: 800; display: block; letter-spacing: -0.02em; }
.footer-brand small { font-size: 12px; color: #B8C4D9; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 14px; color: #D6DEEA; transition: color 0.2s; }
.footer-links a:hover { color: #FFFFFF; }
.footer-copy { text-align: right; color: #B8C4D9; font-size: 13px; }

/* ========== PAGE HERO (sub-pages) ========== */
.page-hero {
  position: relative;
  padding: 160px 24px 70px;
  border-bottom: 1px solid var(--border);
  background: var(--page-hero-bg);
  overflow: hidden;
}
.page-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.page-hero .kicker { margin-bottom: 20px; }
.page-hero h1 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin-bottom: 18px;
  max-width: 820px;
}
.page-hero p {
  font-size: 17px;
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.6;
}
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--text-3); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--text-3); }

/* Index teaser cards */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 100px 0;
}
.teaser {
  padding: 36px 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.teaser:hover { border-color: var(--gold); transform: translateY(-3px); }
.teaser-num {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.teaser h3 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.teaser p { font-size: 15px; color: var(--text-2); line-height: 1.55; }
.teaser-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-weight: 500;
  font-size: 14px;
  padding-top: 14px;
}
.teaser-go::after { content: '→'; transition: transform 0.25s var(--ease-out); }
.teaser:hover .teaser-go::after { transform: translateX(6px); }
@media (max-width: 720px) {
  .teaser-grid { grid-template-columns: 1fr; padding: 60px 0; }
  .page-hero { padding: 130px 20px 50px; }
}

/* Extras list on services page */
.extras-page-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--border);
}
.extras-page-list .extra-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  gap: 20px;
}
.extras-page-list .extra-row:nth-child(odd) { border-right: 1px solid var(--border); padding-right: 28px; }
.extras-page-list .extra-row:nth-child(even) { padding-left: 28px; }
.extras-page-list strong { font-size: 16px; font-weight: 500; color: var(--text); }
.extras-page-list span { color: var(--gold); font-weight: 600; font-size: 15px; }
@media (max-width: 720px) {
  .extras-page-list { grid-template-columns: 1fr; }
  .extras-page-list .extra-row:nth-child(odd) { border-right: none; padding-right: 0; }
  .extras-page-list .extra-row:nth-child(even) { padding-left: 0; }
}

/* Stats strip (why page) */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 60px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 80px 0;
}
.stat { padding: 0 24px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; }
.stat strong {
  display: block;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  color: var(--gold);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 10px;
}
.stat span { font-size: 14px; color: var(--text-2); }
@media (max-width: 720px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 30px 0; padding: 40px 0; margin: 50px 0; }
  .stat { border-right: none; padding: 16px; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }
}

/* ========== MOTTO ========== */
.motto-section {
  padding: 100px 0 60px;
  border-top: 1px solid var(--border);
  position: relative;
}
.motto {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
.motto > small {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.motto > p {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 500;
}
.motto > p em {
  font-style: italic;
  color: var(--gold);
  font-weight: 600;
}
.motto-sig {
  margin-top: 36px;
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* ========== DIFFERENTIATORS ========== */
.diff-section { padding: 80px 0 100px; }
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 20px;
}
.diff-item {
  padding: 30px 28px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.3s;
}
.diff-item:hover { background: var(--surface); }
.diff-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 50%;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.diff-item strong {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.diff-item p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
@media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .diff-grid { grid-template-columns: 1fr; } }

/* ========== HOW IT WORKS (steps) ========== */
.steps-section {
  padding: 90px 0;
  background: var(--bg-2);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  z-index: 0;
}
.step {
  position: relative;
  z-index: 1;
  text-align: left;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 18px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 22px;
}
.step h3 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.step p { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 320px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before { display: none; }
}

/* ========== COMPARISON TABLE ========== */
.compare {
  margin-top: 60px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 15px;
}
.compare-row:last-child { border-bottom: none; }
.compare-row.head {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border-strong);
}
.compare-row .us, .compare-row .them { text-align: center; }
.compare-row .us { color: var(--gold); font-weight: 600; }
.compare-row .them { color: var(--text-3); }
.compare-row.head .us { color: var(--text); }
.yes-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(37, 99, 235, 0.14); color: var(--gold); font-size: 12px; font-weight: 700; }
.no-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(15, 30, 58, 0.12); color: var(--text-3); font-size: 12px; font-weight: 600; }
@media (max-width: 720px) {
  .compare-row { grid-template-columns: 1.6fr 1fr 1fr; font-size: 14px; padding: 14px 2px; }
}

/* ========== QUOTE BLOCK ========== */
.quote-block {
  margin: 80px auto;
  max-width: 880px;
  padding: 48px 40px;
  border-left: 2px solid var(--gold);
  position: relative;
}
.quote-block p {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.quote-block cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.quote-block cite strong { color: var(--text); font-weight: 600; }
.quote-block cite::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}

/* ========== TIMELINE ========== */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 50px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 50px;
}
.milestone {
  padding: 0 28px;
  border-right: 1px solid var(--border);
  position: relative;
}
.milestone:last-child { border-right: none; }
.milestone-year {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.milestone h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.milestone p { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .milestone { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 20px; }
  .milestone:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 500px) {
  .timeline { grid-template-columns: 1fr; }
  .milestone { border-bottom: 1px solid var(--border) !important; }
  .milestone:last-child { border-bottom: none !important; }
}

/* ========== REVIEWS ========== */
.reviews-section { padding: 100px 0; }
.reviews-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 50px;
}
.reviews-head .section-head { margin-bottom: 0; }
.reviews-aggregate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
}
.reviews-aggregate .stars {
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 2px;
}
.reviews-aggregate strong {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.reviews-aggregate small {
  font-size: 12px;
  color: var(--text-3);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s var(--ease-out);
  position: relative;
}
.review:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  background: var(--surface-2);
}
.review-stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 14px;
}
.review-verified {
  position: absolute;
  top: 22px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  background: rgba(21, 128, 61, 0.08);
  border: 1px solid rgba(21, 128, 61, 0.3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ok);
  letter-spacing: 0.04em;
}
.review-verified svg { width: 11px; height: 11px; fill: var(--ok); flex-shrink: 0; }
.review-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  flex: 1;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.review-meta { display: flex; flex-direction: column; line-height: 1.35; }
.review-meta strong { font-size: 13.5px; color: var(--text); font-weight: 600; }
.review-meta small { font-size: 12px; color: var(--text-3); }
@media (max-width: 1000px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .reviews-aggregate { text-align: left; }
}

/* ========== CONTACT EXTRAS ========== */
.hours-card {
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 18px;
}
.hours-card h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.hours-row:last-child { border-bottom: none; }
.hours-row strong { color: var(--text); font-weight: 500; }
.hours-row span { color: var(--gold); font-weight: 600; }

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 60px;
}
.flow-step {
  padding: 26px 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow-step-num {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.flow-step h3 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.flow-step p { font-size: 13px; color: var(--text-2); line-height: 1.55; }
@media (max-width: 900px) { .flow-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .flow-steps { grid-template-columns: 1fr; } }

.faq-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  margin-top: 80px;
  padding-top: 50px;
  border-top: 1px solid var(--border);
}
.faq-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.faq-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.faq-item p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
@media (max-width: 720px) {
  .faq-strip { grid-template-columns: 1fr; gap: 0; }
}

/* ========== MODAL (car detail) ========== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal.open { display: flex; animation: modalFade 0.3s var(--ease-out); }
body.modal-open { overflow: hidden; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 58, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
}
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 1080px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalUp 0.4s var(--ease-out);
}
@keyframes modalUp {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(15, 30, 58, 0.05);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text);
  z-index: 10;
  transition: all 0.2s;
}
.modal-close:hover { background: var(--gold); color: var(--on-accent); border-color: var(--gold); transform: rotate(90deg); }

.modal-body { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 600px; }

.modal-visual {
  position: relative;
  background: var(--modal-visual-bg);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
.modal-visual img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.2));
  mix-blend-mode: multiply;
  margin: auto 0;
}
.modal-title-block .eyebrow { margin-bottom: 8px; }
.modal-title {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.modal-subtitle {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.modal-price-range {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 18px;
  padding: 10px 16px;
  background: var(--gold-soft);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 999px;
}
.modal-price-range strong {
  font-family: 'Sora', 'Manrope', sans-serif;
  color: var(--gold);
  font-size: 22px;
  font-weight: 700;
}
.modal-price-range small { color: var(--text-2); font-size: 13px; }

.modal-content {
  padding: 48px 40px;
  overflow-y: auto;
  max-height: 90vh;
}
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.modal-desc {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.modal-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  list-style: none;
}
.features-list svg { color: var(--gold); flex-shrink: 0; }

.booking-form { display: flex; flex-direction: column; gap: 14px; }
.booking-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.booking-form label { display: flex; flex-direction: column; gap: 6px; }
.booking-form label span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.booking-form input,
.booking-form select {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  transition: all 0.2s;
  width: 100%;
}
.booking-form input:focus,
.booking-form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.booking-form input[type="date"],
.booking-form input[type="time"] { color-scheme: light; }

.extras-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.extra-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
}
.extra-item:hover { border-color: var(--border-strong); }
.extra-item input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.extra-item:has(input:checked) {
  border-color: var(--gold);
  background: rgba(37, 99, 235, 0.06);
}
.extra-item span { flex: 1; color: var(--text); }
.extra-item small { color: var(--gold); font-weight: 600; }

.price-summary {
  margin-top: 18px;
  padding: 18px;
  background: var(--gold-soft);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-summary-left small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.price-summary-left strong { font-size: 14px; color: var(--text); }
.night-fee {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warn);
  line-height: 1.35;
}
.price-summary-total {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.price-summary-total small { font-size: 13px; color: var(--text-2); font-weight: 400; }

.modal-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .modal { padding: 0; }
  .modal-dialog { border-radius: 0; min-height: 100vh; max-width: 100%; }
  .modal-body { grid-template-columns: 1fr; }
  .modal-visual { padding: 32px 24px; min-height: 340px; }
  .modal-visual img { max-height: 200px; }
  .modal-content { padding: 28px 20px; max-height: none; }
  .booking-form .form-grid { grid-template-columns: 1fr; }
  .extras-list { grid-template-columns: 1fr; }
  .features-list { grid-template-columns: 1fr; }
}

/* ========== LEGAL PAGES ========== */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 24px 120px;
}
.legal-page h2 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  color: var(--text);
}
.legal-page h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 26px 0 8px;
  letter-spacing: 0.01em;
}
.legal-page p, .legal-page li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 12px;
}
.legal-page ul, .legal-page ol { padding-left: 22px; margin-bottom: 16px; }
.legal-page li { margin-bottom: 6px; }
.legal-page strong { color: var(--text); font-weight: 600; }
.legal-page a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-page .toc {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 40px;
}
.legal-page .toc h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; margin-bottom: 12px; }
.legal-page .toc ol { padding-left: 18px; margin: 0; }
.legal-page .toc li { font-size: 14px; margin-bottom: 4px; }
.legal-page .toc a { color: var(--text-2); text-decoration: none; }
.legal-page .toc a:hover { color: var(--gold); }
.legal-page .meta {
  font-size: 13px;
  color: var(--text-3);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
}

/* ========== COOKIE BANNER ========== */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
  max-width: 560px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 98;
  display: none;
  animation: cookieIn 0.5s var(--ease-out);
}
.cookie-banner.show { display: block; }
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.cookie-banner h3 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.cookie-banner p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 14px;
}
.cookie-banner p a { color: var(--gold); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  font-family: inherit;
}
.cookie-btn.accept { background: var(--gold); color: var(--on-accent); flex: 1; }
.cookie-btn.accept:hover { background: var(--gold-2); }
.cookie-btn.reject {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
}
.cookie-btn.reject:hover { color: var(--text); border-color: var(--gold); }
@media (max-width: 500px) { .cookie-actions { flex-direction: column; } .cookie-btn.accept { width: 100%; } }
@media (max-width: 1000px) { .cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* ========== WHATSAPP WIDGET (floating, all pages) ========== */
.wa-widget {
  position: fixed;
  bottom: calc(24px + var(--cookie-h, 0px));
  right: 24px;
  z-index: 99;
  font-family: 'Manrope', sans-serif;
  transition: bottom 0.3s var(--ease);
}
.wa-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 24px 0 8px;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  cursor: pointer;
  border: 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s var(--ease-out), background 0.2s;
}
.wa-bubble:hover { transform: translateY(-2px); background: #1FBE59; }
.wa-bubble:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wa-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  flex-shrink: 0;
}
.wa-bubble svg { width: 30px; height: 30px; fill: #25D366; flex-shrink: 0; }
.wa-bubble-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.wa-panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 320px;
  background: #ECE5DD;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s var(--ease-out);
  transform-origin: bottom right;
}
.wa-widget.open .wa-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.wa-header {
  background: #095E54;
  color: #FFFFFF;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #128C7E;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  color: #FFFFFF;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.wa-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.wa-meta strong { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.wa-meta small { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.wa-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}
.wa-close:hover { color: #FFFFFF; }

.wa-body {
  padding: 18px 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-msg {
  background: #FFFFFF;
  color: #111;
  border-radius: 8px 8px 8px 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 85%;
  position: relative;
  animation: waMsgIn 0.35s var(--ease-out) both;
}
.wa-msg:nth-child(2) { animation-delay: 0.15s; }
.wa-msg::before {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 0;
  border-color: transparent #FFFFFF transparent transparent;
}
.wa-msg small {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #667;
  margin-top: 4px;
}
@keyframes waMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wa-footer {
  padding: 12px 16px 16px;
  background: rgba(230, 221, 212, 0.6);
}
.wa-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #4FCE5D;
  color: #FFFFFF;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: background 0.2s;
}
.wa-cta:hover { background: #43BE50; }
.wa-cta svg { width: 18px; height: 18px; fill: #FFFFFF; }

@media (max-width: 400px) {
  .wa-panel { width: calc(100vw - 48px); right: 0; }
}

/* ========== FAB mobile call ========== */
.fab-call {
  position: fixed;
  bottom: 98px;
  right: 24px;
  width: 58px;
  height: 58px;
  display: none;
  place-items: center;
  background: var(--gold);
  color: var(--on-accent);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  z-index: 99;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  /* Bara orizontala nu mai incape sub 1100px, deci trece pe burger + sertar aici,
     nu la 720px. Altfel intre 721 si 1100 (tableta in portret) meniul dispare si
     burgerul inca nu apare - nicio navigatie deloc. */
  .nav-links {
    display: none;
    position: fixed;
    top: 72px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--ease-out);
  }
  .nav-links.open {
    display: flex;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a { padding: 12px 0; }
  .nav-links .lang-btn { padding: 8px 14px; }
  .burger { display: flex; }
  .nav-actions > .lang-switch { display: none; }
  .lang-menu { display: block; }
  .lang-switch-mobile { display: flex; justify-content: center; margin-top: 12px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .phone-card .phone-text { display: none; }
  .phone-card { padding: 10px; }
  .phone-pulse { left: 50%; transform: translate(-50%, -50%); }
  @keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
  }
  /* Regulile de meniu mobil (burger, sertar, lang-switch) au urcat la pragul de
     1100px - aici raman doar lucrurile care se schimba efectiv sub 720px. */
  .features-grid { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
  .footer-copy { text-align: center; }
  .fab-call { display: grid; }
  .section-head h2 { font-size: 32px; }
}

/* ==========================================================
   2026 REFRESH - hero CTA glow, card polish, stats, avatars
   ========================================================== */

.hero-cta .btn-primary { box-shadow: var(--shadow-sm); }

/* Car card polish - softer shadow, warmer hover glow */
.car-card {
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s var(--ease-out);
  will-change: transform;
}
.car-card:hover {
  transform: translateY(-8px);
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: var(--shadow-lg);
}
.car-card .car-img {
  transition: transform 0.6s var(--ease-out);
}
.car-card:hover .car-img {
  background-color: var(--car-bg);
  background-image: var(--car-bg-image);
}
.car-badge { transition: all 0.3s; }
.car-card:hover .car-badge {
  background: rgba(37, 99, 235, 0.9);
  border-color: rgba(37, 99, 235, 0.6);
  color: #fff;
}

/* Stats strip - gradient numbers + more presence */
.stat strong {
  color: var(--gold);
  font-size: clamp(42px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.stat span {
  font-size: 13px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.stats-strip {
  position: relative;
  padding: 70px 0;
}

/* Review avatars - one warm color per slot */
.reviews-grid .review:nth-child(1) .review-avatar { background: #2563EB; }
.reviews-grid .review:nth-child(2) .review-avatar { background: #1D4ED8; }
.reviews-grid .review:nth-child(3) .review-avatar { background: #1E40AF; }
.reviews-grid .review:nth-child(4) .review-avatar { background: #16294D; }
.reviews-grid .review:nth-child(5) .review-avatar { background: #1E3A8A; }
.reviews-grid .review:nth-child(6) .review-avatar { background: #0F1E3A; }
.review-avatar {
  color: #FFFFFF !important;
  font-size: 13px;
  letter-spacing: 0;
}

/* Typography - slightly tighter kerning on large serif */
.hero-title, .section-head h2, h1, h2 {
  letter-spacing: -0.028em;
}
@media (max-width: 640px) {
  .hero-title { font-size: clamp(34px, 10vw, 52px); line-height: 1.08; }
  .hero-sub { font-size: 15px; }
  .section-head h2 { font-size: clamp(26px, 7vw, 36px); }
  .eyebrow { font-size: 12px; }
}

/* Section-head eyebrow - warm accent line */
.section-head .eyebrow::before,
.page-hero .kicker::before { background: linear-gradient(90deg, var(--gold), transparent); }


/* ============================================
   STEP 2 - DOCUMENTS UPLOAD MODAL
   ============================================ */
.docs-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.docs-modal.open { display: flex; animation: docsFade 0.3s ease; }
@keyframes docsFade { from { opacity: 0; } to { opacity: 1; } }
.docs-modal-bd {
  position: absolute; inset: 0;
  background: rgba(15, 30, 58, 0.55); backdrop-filter: blur(6px);
}
.docs-modal-dlg {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  max-width: 520px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: docsRise 0.4s var(--ease-out);
}
@keyframes docsRise {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.docs-close-x {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(15, 30, 58, 0.12); border: 0;
  color: var(--text); font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.2s;
}
.docs-close-x:hover { background: rgba(15, 30, 58, 0.05); }

.docs-step-tag {
  display: inline-block;
  padding: 4px 10px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 14px;
}
.docs-modal-dlg h2 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 26px; line-height: 1.2;
  margin-bottom: 8px;
}
.docs-modal-dlg > p {
  color: var(--text-2);
  font-size: 14px; line-height: 1.55;
  margin-bottom: 22px;
}

#docsForm { display: flex; flex-direction: column; gap: 16px; }
.docs-field { display: flex; flex-direction: column; gap: 6px; }
.docs-field > span {
  font-size: 12px; font-weight: 600;
  color: var(--text-2); letter-spacing: 0.02em;
}
.docs-field input[type="email"] {
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: rgba(15, 30, 58, 0.05);
  color: var(--text); font-size: 14px; font-family: inherit;
}
.docs-field input[type="email"]:focus {
  outline: 2px solid var(--gold); outline-offset: 1px;
}

.docs-upload input[type="file"] {
  padding: 14px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border-strong);
  background: rgba(15, 30, 58, 0.05);
  color: var(--text-2); font-size: 13px;
  cursor: pointer; transition: all 0.2s;
}
.docs-upload input[type="file"]:hover {
  border-color: var(--gold);
  background: rgba(37, 99, 235, 0.05);
}
.docs-upload input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 6px 14px;
  border-radius: 6px; border: 0;
  background: var(--gold); color: var(--on-accent);
  font-weight: 700; font-size: 12px; cursor: pointer;
  font-family: inherit;
}

.docs-disclaimer {
  font-size: 12px; color: var(--text-3);
  line-height: 1.5; margin-top: -4px;
}
.docs-disclaimer a { color: var(--gold); text-decoration: underline; }

.docs-actions {
  display: flex; gap: 10px; margin-top: 8px;
  flex-wrap: wrap;
}
.docs-actions .btn { flex: 1; min-width: 140px; }

@media (max-width: 520px) {
  .docs-modal-dlg { padding: 32px 22px 24px; }
  .docs-modal-dlg h2 { font-size: 22px; }
}

/* ============================================
   Car availability overlay (main site)
   ============================================ */
.car-card.car-unavailable .car-img img {
  filter: blur(5px) grayscale(0.9) brightness(0.55);
  transform: scale(1.05);
  transition: filter 0.3s ease;
}
.car-card.car-unavailable .car-img::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 1;
}
.car-card.car-unavailable { opacity: 0.92; cursor: not-allowed; }
.car-card.car-unavailable:hover { transform: none; }
.car-card.car-unavailable .car-btn {
  opacity: 0.45;
  background: rgba(120, 120, 130, 0.15);
  color: #6b7280;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(1);
}

.car-status-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 8px;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(15, 30, 58, 0.12);
  box-shadow: var(--shadow-sm);
}
.car-status-unavailable {
  background: rgba(20, 20, 24, 0.85);
  color: #fff;
}
.car-status-lastone {
  background: rgba(245, 158, 11, 0.95);
  color: #141824;
  border-color: rgba(15, 30, 58, 0.03);
}
.car-status-count {
  background: rgba(34, 197, 94, 0.95);
  color: #141824;
  border-color: rgba(15, 30, 58, 0.03);
}

/* Reservation modal - live price breakdown */
.reservation-calc {
  background: rgba(15, 30, 58, 0.05);
  border: 1px solid rgba(15, 30, 58, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reservation-calc .rc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.reservation-calc .rc-line > span { color: var(--text-2); }
.reservation-calc .rc-line > strong { color: var(--text); font-weight: 600; }
.reservation-calc .rc-late {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
}
.reservation-calc .rc-discount {
  color: var(--ok);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 8px;
}
.reservation-calc .rc-total {
  border-top: 1px solid rgba(15, 30, 58, 0.12);
  padding-top: 10px;
  margin-top: 2px;
  font-size: 15px;
}
.reservation-calc .rc-total > span { color: var(--text); font-weight: 600; }
.reservation-calc .rc-total > strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--ok);
}
#reservationSubmit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ========== TEMA ALBA: masura randurilor si utilitare ========== */
.section-head p, .why-text > p, .page-hero p, .legal-page p, .legal-page li,
.diff-item p, .step p, .feature p, .teaser p, .faq-item p, .flow-step p,
.review-text, .modal-desc, .cookie-banner p { max-width: 62ch; }
.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;
}
/* Adminul ramane pe tema inchisa: tokenii vechi, limitati la .admin-body. */
.admin-body {
  --bg: #141824;
  --bg-2: #1B2030;
  --surface: #232A3C;
  --surface-2: #2B3348;
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.22);
  --text: #FFFFFF;
  --text-2: #C4CAD8;
  --text-3: #99A1B3;
  --gold: #3B82F6;
  --gold-2: #7CC4FF;
  --gold-glow: rgba(59, 130, 246, 0.4);
  --gold-soft: rgba(59, 130, 246, 0.12);
  --danger: #EF4444;
  --ok: #22c55e;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Admin dashboard
   ============================================ */
.admin-body {
  margin: 0;
  padding: 40px 24px 60px;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #14141a 0%, #141824 70%);
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.admin-login {
  min-height: calc(100vh - 100px);
  display: grid;
  place-items: center;
}
.admin-login[hidden],
.admin-panel[hidden] { display: none !important; }
.admin-login-card {
  width: 100%;
  max-width: 400px;
  background: #14141a;
  padding: 40px 36px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-login-card h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.admin-login-card .admin-sub {
  margin: 0 0 8px;
  font-size: 13px;
  color: #a0a0ad;
  text-align: center;
}
.admin-login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #d0d0d8;
}
.admin-login-card input {
  padding: 12px 14px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
}
.admin-login-card input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.admin-logo {
  width: 72px;
  height: auto;
  margin: 0 auto 4px;
  display: block;
}
.admin-error {
  color: #ef4444;
  font-size: 13px;
  margin: 0;
  text-align: center;
}

.admin-panel {
  max-width: 1200px;
  margin: 0 auto;
}
.admin-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.admin-header .admin-title { flex: 1; }
.admin-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}
.admin-header small {
  display: block;
  color: #a0a0ad;
  font-size: 13px;
  margin-top: 2px;
}
.admin-logo-sm { width: 48px; height: auto; }

.admin-status {
  padding: 12px 16px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #bbf7d0;
}
.admin-status.error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}

.admin-table-wrap {
  overflow-x: auto;
  background: #14141a;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th,
.admin-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.admin-table th {
  background: rgba(255, 255, 255, 0.03);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a0a0ad;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table input[type="number"],
.admin-table input[type="date"] {
  width: 120px;
  padding: 8px 10px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.admin-table input:focus {
  outline: none;
  border-color: #3B82F6;
}
.admin-car-name {
  font-weight: 600;
  min-width: 160px;
}
.admin-loading,
.admin-error-row {
  text-align: center;
  color: #a0a0ad;
  padding: 40px 20px !important;
}
.admin-error-row { color: #fecaca; }

.admin-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.admin-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.admin-toggle span {
  position: absolute;
  inset: 0;
  background: #2a2a33;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.admin-toggle span::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.admin-toggle input:checked + span { background: #22c55e; }
.admin-toggle input:checked + span::before { transform: translateX(20px); }

.admin-body .btn-sm {
  padding: 9px 16px;
  font-size: 13px;
  border-radius: 8px;
}
.admin-body .btn.saved {
  background: #22c55e !important;
  color: #141824 !important;
}

.admin-note {
  margin-top: 20px;
  color: #a0a0ad;
  font-size: 13px;
  text-align: center;
}

.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 48px 0 16px;
  gap: 16px;
}
.admin-section-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.admin-reservation-date {
  white-space: nowrap;
  color: #a0a0ad;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.admin-reservation-msg {
  max-width: 280px;
  color: #c0c0cc;
  font-size: 13px;
}
.admin-table a {
  color: #60a5fa;
  text-decoration: none;
}
.admin-table a:hover { text-decoration: underline; }

.admin-body .btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.admin-body .btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
}

@keyframes adminRowPulse {
  0%   { background: rgba(59, 130, 246, 0.22); }
  100% { background: transparent; }
}
.admin-table tr.admin-row-updated td {
  animation: adminRowPulse 1.4s ease-out;
}

.admin-fleet-head { margin-top: 0; }
.admin-car-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.admin-car-thumb {
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  background: #1e1e28;
  flex-shrink: 0;
}
.admin-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Car add/edit modal */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.72);
  backdrop-filter: blur(4px);
}
.admin-modal-dialog {
  position: relative;
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 36px 36px 28px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.admin-modal-dialog h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
}
.admin-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.admin-modal-x:hover { background: rgba(255, 255, 255, 0.12); }
.admin-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}
.admin-modal-error {
  margin: 6px 0 12px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: #fecaca;
  font-size: 13px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #d0d0d8;
  margin-bottom: 14px;
  flex: 1;
  min-width: 0;
}
.admin-field > span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a0a0ad;
  font-weight: 600;
}
.admin-field > span em {
  color: #f87171;
  font-style: normal;
  margin-left: 2px;
}
.admin-field input[type="text"],
.admin-field input[type="number"],
.admin-field input[type="file"],
.admin-field select,
.admin-field textarea {
  padding: 10px 12px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}
.admin-field textarea { resize: vertical; }
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.admin-field small { font-size: 11px; color: #6b7280; }

.admin-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.admin-row .admin-field { margin-bottom: 14px; }
@media (max-width: 640px) {
  .admin-row { flex-direction: column; gap: 0; }
}

.admin-field-toggle {
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: 110px;
}
.admin-field-toggle .admin-toggle { margin-top: 4px; }

.admin-image-preview {
  margin-top: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-image-preview img {
  width: 100px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: #fff;
}
.admin-image-preview small { color: #a0a0ad; font-size: 12px; }

.admin-current-image[hidden] { display: none !important; }
.admin-current-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto 18px;
  max-width: 300px;
}
.admin-current-image img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-reservation-period {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
.admin-period-sep {
  color: #60a5fa;
  margin: 0 6px;
  font-weight: 700;
}

/* Filtrele rezervarilor: Active / Incheiate / Anulate / Toate, cu numarul fiecareia. */
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.admin-filters:empty { display: none; }
.admin-filter {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #c0c0cc;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.admin-filter b {
  font-weight: 700;
  color: #a0a0ad;
  margin-left: 4px;
}
.admin-filter:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.admin-filter.is-active {
  color: #14141a;
  background: var(--gold, #d4af37);
  border-color: var(--gold, #d4af37);
}
.admin-filter.is-active b { color: rgba(20, 20, 26, 0.7); }

/* Starea rezervarii: activa (verde), incheiata (gri), anulata (rosu). */
.admin-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.admin-badge-activa { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.admin-badge-incheiata { color: #a0a0ad; background: rgba(160, 160, 173, 0.14); }
.admin-badge-anulata { color: #f87171; background: rgba(248, 113, 113, 0.12); }
/* Anulatele raman lizibile (telefon, email), doar estompate: eticheta rosie spune
   deja ce sunt, iar taierea textului s-ar propaga si peste etichetele cardului. */
.admin-resv-row.is-anulata td:not(:first-child):not(:nth-child(2)):not(:last-child) {
  color: #8a8a96;
}
.admin-resv-row.is-anulata a { color: #8a8a96; }

.admin-resv-actions {
  white-space: nowrap;
  text-align: right;
}
.admin-resv-actions .btn { margin-left: 8px; }
.admin-link-btn {
  font: inherit;
  font-size: 13px;
  color: #60a5fa;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.admin-link-btn:hover { color: #93c5fd; }

/* Randul de detalii: mesajul complet al rezervarii (locul de preluare, optiuni). */
.admin-resv-details td {
  background: rgba(255, 255, 255, 0.025);
  padding: 10px 16px 14px !important;
}
.admin-resv-details pre {
  margin: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  color: #c0c0cc;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-resv-details[hidden] { display: none !important; }

/* ============================================
   Reservation modal (new simplified booking)
   ============================================ */
#carModal .modal-dialog { max-width: 520px; }
#carModal .modal-body { display: block; min-height: 0; }
#carModal > .modal-dialog > .modal-close { display: none; }
.reservation-modal {
  position: relative;
  padding: 40px 36px 32px;
  max-width: 460px;
  margin: 0 auto;
}
.reservation-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.reservation-specs span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 30, 58, 0.05);
  border: 1px solid rgba(15, 30, 58, 0.12);
  font-size: 13px;
  color: var(--text-2);
}
.reservation-specs svg { color: var(--gold-2); flex-shrink: 0; }

/* Facilitati incluse */
.reservation-features { margin: 0 0 22px; }
.reservation-features h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3); margin: 0 0 10px;
}
.reservation-features ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px;
}
.reservation-features li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-2);
}
.reservation-features li svg { color: var(--ok); flex-shrink: 0; }

/* Custom date-time picker */
.dtp { position: relative; }
.dtp-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 14px; background: rgba(15, 30, 58, 0.05);
  border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-size: 14.5px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.dtp-trigger:hover { border-color: var(--gold); background: rgba(37, 99, 235,0.08); }
.dtp-trigger svg { color: var(--gold-2); flex-shrink: 0; }
.dtp-trigger b { font-weight: 600; }
.dtp-trigger em {
  font-style: normal; margin-left: auto; font-weight: 700;
  color: var(--gold-2); font-variant-numeric: tabular-nums;
}
.dtp-backdrop {
  position: fixed; inset: 0; z-index: 499;
  background: rgba(15, 30, 58, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dtp-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 28px));
  max-height: min(84vh, 640px);
  overflow-y: auto;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; padding: 18px;
  box-shadow: var(--shadow-lg);
  animation: modalFade 0.2s var(--ease-out);
}
.dtp-close {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(15, 30, 58, 0.12); border: 1px solid var(--border);
  color: var(--text); font-size: 16px; cursor: pointer;
  display: grid; place-items: center; margin-left: 8px;
}
.dtp-close:hover { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
@media (max-width: 640px) {
  .dtp-pop {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100vw; max-height: 82vh;
    border-radius: 22px 22px 0 0;
    padding: 18px 16px max(18px, env(safe-area-inset-bottom));
    border-left: none; border-right: none; border-bottom: none;
  }
  .dtp-day { font-size: 15px; }
  .dtp-time { padding: 11px 0; font-size: 14.5px; }
}
.dtp-pop[hidden] { display: none; }
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dtp-head strong { font-size: 16px; font-weight: 700; text-transform: capitalize; }
.dtp-nav {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(15, 30, 58, 0.12); border: 1px solid var(--border);
  color: var(--text); font-size: 18px; cursor: pointer;
  display: grid; place-items: center; transition: all 0.15s;
}
.dtp-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.dtp-week { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 4px; }
.dtp-week span {
  text-align: center; font-size: 12px; font-weight: 700;
  text-transform: uppercase; color: var(--text-3); padding: 4px 0;
}
.dtp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.dtp-day {
  aspect-ratio: 1; border-radius: 9px; border: none; background: transparent;
  color: var(--text); font-size: 14.5px; font-weight: 600; cursor: pointer;
  display: grid; place-items: center; transition: background 0.12s;
}
.dtp-day:hover:not(:disabled):not(.dtp-empty) { background: rgba(37, 99, 235,0.22); }
.dtp-day.today { box-shadow: inset 0 0 0 1px var(--gold-2); }
.dtp-day.sel { background: var(--gold); color: #fff; font-weight: 700; }
.dtp-day:disabled { color: var(--text-3); opacity: 0.35; cursor: default; }
.dtp-empty { pointer-events: none; }
.dtp-time-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3); margin: 12px 0 8px;
}
.dtp-times {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 7px;
  max-height: 150px; overflow-y: auto; padding-right: 4px;
}
.dtp-times::-webkit-scrollbar { width: 5px; }
.dtp-times::-webkit-scrollbar-thumb { background: rgba(15, 30, 58, 0.12); border-radius: 4px; }
.dtp-time {
  padding: 8px 0; border-radius: 8px;
  background: rgba(15, 30, 58, 0.12); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: all 0.12s;
}
.dtp-time:hover { border-color: var(--gold); color: var(--text); }
.dtp-time.sel { background: var(--gold); border-color: var(--gold); color: #fff; }
.reservation-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 30, 58, 0.05);
  border: 1px solid rgba(15, 30, 58, 0.12);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s;
}
.reservation-close:hover { background: rgba(15, 30, 58, 0.05); }
.reservation-img {
  margin: 0 0 18px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 30, 58, 0.05);
}
.reservation-img img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.reservation-title {
  margin: 0 0 4px;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 28px;
  font-weight: 700;
}
.reservation-sub {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: 14px;
}
.reservation-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reservation-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.reservation-field input {
  padding: 12px 14px;
  background: rgba(15, 30, 58, 0.05);
  border: 1px solid rgba(15, 30, 58, 0.12);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  color-scheme: light;
}
.reservation-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.reservation-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
}

@media (max-width: 520px) {
  .reservation-modal { padding: 32px 22px 24px; }
  .reservation-title { font-size: 24px; }
}

/* ============================================
   Contact form - reservation context + block state
   ============================================ */
.selected-car {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--gold-soft);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 10px;
}
.selected-car-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 600;
}
.selected-car strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.contact-form textarea.message-readonly {
  background: rgba(21, 128, 61, 0.06);
  border-color: rgba(21, 128, 61, 0.3);
  cursor: default;
}
.contact-form textarea.message-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  color: var(--danger);
  font-weight: 500;
}
.contact-form .form-error,
#docsForm .form-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.38);
  color: var(--danger);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.45;
}
.contact-form .btn.btn-disabled,
.contact-form .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 640px) {
  .admin-body { padding: 24px 12px 40px; }
  .admin-table th,
  .admin-table td { padding: 10px 12px; }
  .admin-table input[type="number"],
  .admin-table input[type="date"] { width: 100px; font-size: 13px; }
}


/* ===== Mobile: butoane flotante ordonate + footer neacoperit ===== */
@media (max-width: 720px) {
  .wa-widget { bottom: calc(16px + var(--cookie-h, 0px)); right: 16px; }
  .wa-bubble { width: 64px; height: 64px; padding: 0; justify-content: center; }
  .wa-ico { width: 52px; height: 52px; }
  .wa-bubble svg { width: 34px; height: 34px; }
  .wa-bubble-label { display: none; }
  /* Cat timp bannerul de cookie e deschis, butonul de apel se retrage: telefonul e si in header. */
  .cookie-open .fab-call { display: none; }
  .fab-call {
    bottom: calc(84px + var(--cookie-h, 0px)); right: 16px;
    width: 52px; height: 52px;
    transition: bottom 0.3s var(--ease);
  }
  .fab-call svg { width: 22px; height: 22px; }
  footer, .footer { padding-bottom: 150px !important; }
}

/* ============================================
   NafiRent · stiluri noi pentru motorul de preturi
   De integrat in assets/styles.css.
   Clase folosite in assets/script.js:
     .car-price-from        - cardul din flota ("de la 32€/zi")
     .reservation-extras    - blocul de extra optiuni din modalul de rezervare
     .rx-item / .rx-name / .rx-price
     .rc-extras             - liniile de extra optiuni din calculator
   ============================================ */

/* -------- Cardul din flota: prefixul "de la" -------- */
/* Sta pe aceeasi linie de baza cu suma, dar la dimensiunea textului secundar,
   ca cifra sa ramana elementul dominant. */
.car-price-from {
  font-size: 13px;
  color: var(--text-3);
}

/* -------- Modal rezervare: extra optiuni -------- */
.reservation-extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(15, 30, 58, 0.05);
  border: 1px solid rgba(15, 30, 58, 0.12);
  border-radius: var(--radius-sm);
}
.reservation-extras-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

.rx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 30, 58, 0.12);
  border-radius: 10px;
  background: rgba(15, 30, 58, 0.05);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.rx-item:hover {
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.06);
}
/* Focusul se muta pe intreg randul, nu doar pe patratelul de bifat:
   tinta de click e randul, deci si indicatorul de focus trebuie sa fie randul. */
.rx-item:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.rx-item input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}
.rx-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
}
.rx-price {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-2);
  white-space: nowrap;
}

/* -------- Calculator: liniile de extra optiuni -------- */
/* Container gol cand nu e nimic bifat - `gap`-ul din .reservation-calc nu trebuie
   sa lase un spatiu fantoma, de aceea nu are padding sau margine proprie. */
.reservation-calc .rc-extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reservation-calc .rc-extras:empty {
  display: none;
}
/* Optiunile sunt sub-pozitii ale devizului, nu linii de acelasi rang cu inchirierea. */
.reservation-calc .rc-extras .rc-line > span {
  padding-left: 12px;
  position: relative;
}
.reservation-calc .rc-extras .rc-line > span::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Pretul pe zi vine cu justificarea lui intre paranteze ("32€ (de la 49€, -35%)"),
   deci linia poate depasi latimea pe ecrane mici. */
.reservation-calc .rc-line > strong {
  text-align: right;
}

@media (max-width: 400px) {
  .reservation-calc .rc-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .rx-price { font-size: 12px; }
}

/* ============================================
   Admin · sezoane, extra optiuni, editor de preturi
   De integrat in assets/styles.css, dupa sectiunea "Admin dashboard".
   ============================================ */

/* Grupul de butoane din capul unei sectiuni (adauga + salveaza). */
.admin-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-hint {
  margin: -8px 0 14px;
  color: #a0a0ad;
  font-size: 13px;
  line-height: 1.5;
  max-width: 80ch;
}

.admin-subhead {
  margin: 26px 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a0a0ad;
}
.admin-subhead:first-of-type { margin-top: 8px; }

/* Caseta de avertismente. Galben = informativ, rosu = blocheaza salvarea. */
.admin-warn {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.32);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #fde68a;
}
.admin-warn[hidden] { display: none !important; }
.admin-warn ul {
  margin: 0;
  padding-left: 18px;
}
.admin-warn li + li { margin-top: 6px; }
.admin-warn.admin-warn-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}
.admin-warn .admin-warn-blocking {
  font-weight: 700;
  color: #fecaca;
}

/* Camp text in tabele (denumiri de sezon / optiune, select de taxare). */
.admin-table input[type="text"].admin-text-input,
.admin-table select.admin-text-input {
  width: 100%;
  min-width: 160px;
  padding: 8px 10px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.admin-table input[type="text"].admin-text-input:focus,
.admin-table select.admin-text-input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* --- Sezoane ------------------------------------------------------ */

.admin-order-cell {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-order-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.16);
  color: #7CC4FF;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.admin-order-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.admin-order-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.admin-order-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.admin-md-cell {
  white-space: nowrap;
  display: flex;
  gap: 6px;
}
.admin-md-select {
  padding: 8px 8px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.admin-md-select:focus {
  outline: none;
  border-color: #3B82F6;
}

/* --- Editorul de preturi pe masina -------------------------------- */

.admin-pricing-dialog { max-width: 900px; }

.admin-price-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}
.admin-price-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.admin-price-cell.is-inactive { opacity: 0.6; }
.admin-price-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a0a0ad;
  font-weight: 600;
}
.admin-price-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-price-input input {
  width: 90px;
  padding: 9px 10px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.admin-price-input input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.admin-price-input b {
  color: #a0a0ad;
  font-size: 15px;
}
.admin-price-cell small {
  font-size: 11px;
  color: #6b7280;
}

.admin-duration-table th,
.admin-duration-table td {
  padding: 10px 12px;
}
.admin-tier-range,
.admin-tier-pct {
  white-space: nowrap;
  color: #a0a0ad;
  font-size: 13px;
}
.admin-duration-table input[type="number"] {
  width: 66px;
  padding: 7px 8px;
  font-variant-numeric: tabular-nums;
}
/* Procentele au doua zecimale dupa migrarea grilelor vechi ("33.33"), deci nu
   incap in latimea celor doua campuri de interval, care tin numere de doua cifre.
   Sagetile de incrementare mananca si ele din latime fara sa ajute la nimic aici. */
.admin-duration-table input[name="pct"] {
  width: 92px;
}
.admin-duration-table input[type="number"]::-webkit-outer-spin-button,
.admin-duration-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.admin-duration-table input[type="number"] { -moz-appearance: textfield; }
.admin-tier-range span { margin: 0 2px; }

/* Coloanele de rezultat: aici se uita adminul, deci sunt cele mai vizibile. */
.admin-tier-price-head {
  text-align: right !important;
  color: #7CC4FF !important;
}
.admin-tier-price {
  text-align: right;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}
.admin-tier-price.is-inactive,
.admin-tier-price-head.is-inactive { opacity: 0.55; }

.admin-duration-actions {
  margin: 12px 0 18px;
}

.admin-pricing-dialog .admin-modal-error { margin-top: 4px; }

@media (max-width: 640px) {
  .admin-price-cell { min-width: 130px; flex: 1; }
  .admin-md-cell { flex-direction: column; }
  .admin-order-cell { flex-wrap: wrap; }
}

/* ============================================
   NafiRent · admin: sezoane per masina, calendar de interval, bariera locala
   ============================================ */

/* -------- Bariera pentru localhost -------- */
/* Rosu, permanent, in capul paginii: codul e local, dar baza de date e cea reala. */
.admin-local-banner {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fecaca;
  font-size: 14px;
  line-height: 1.5;
}
.admin-local-banner strong { color: #fff; }
.admin-local-banner code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 13px;
}

/* -------- Pretul de sezon din tabelul de sezoane -------- */
.admin-price-cell-sm {
  white-space: nowrap;
}
.admin-price-cell-sm input {
  width: 84px;
  font-variant-numeric: tabular-nums;
}
.admin-price-cell-sm b {
  margin-left: 6px;
  color: #a0a0ad;
  font-size: 13px;
  font-weight: 600;
}

/* -------- Calendarul de interval (zi + luna, fara an) -------- */
/* Acelasi limbaj vizual cu calendarul site-ului (clasele .dtp-*): aceleasi culori,
   aceeasi forma de zi selectata. Difera doar ce lipseste - anul si zilele saptamanii,
   care n-au sens pentru o perioada care se repeta in fiecare an. */
.admin-range { position: relative; }
.admin-range-cell { min-width: 170px; }
.admin-range-trigger {
  width: 100%;
  padding: 9px 12px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.admin-range-trigger:hover { border-color: #3B82F6; }
.admin-range-trigger:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 1px;
}
.admin-range-pop {
  /* Fix, nu absolut: randul sta intr-un container cu scroll, care l-ar taia.
     Coordonatele le pune positionRangePop() din admin.js. */
  position: fixed;
  z-index: 60;
  width: 268px;
  padding: 12px;
  background: #1B2030;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.admin-range-pop[hidden] { display: none; }
.admin-range-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.admin-range-head strong {
  flex: 1;
  text-align: center;
  font-size: 14px;
  text-transform: capitalize;
}
.admin-range-nav,
.admin-range-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.admin-range-nav:hover { background: #3B82F6; border-color: #3B82F6; }
.admin-range-close:hover { background: #EF4444; border-color: #EF4444; }
.admin-range-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.admin-range-day {
  padding: 7px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.admin-range-day:hover { background: rgba(255, 255, 255, 0.1); }
/* Capetele intervalului sunt pline, zilele dintre ele doar tentate: asa se vede
   dintr-o privire ce a ales si unde se termina. */
.admin-range-day.is-inside { background: rgba(59, 130, 246, 0.2); }
.admin-range-day.is-start,
.admin-range-day.is-end {
  background: #3B82F6;
  color: #fff;
}
.admin-range-wd {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.admin-range-day.is-empty {
  visibility: hidden;
  pointer-events: none;
}

/* -------- Randul de sezon: interval, pret, sters -------- */
.admin-seasons-table td { padding: 8px 10px; }
.admin-seasons-table tr:first-child td { border-top: 0; }
/* Un sezon a carui perioada a trecut nu se mai aplica niciodata: se vede, dar nu
   mai trage atentia. Nu se sterge singur - poate ca omul il vrea ca istoric. */
.admin-season-row.is-expired { opacity: 0.5; }
.admin-expired-tag {
  margin-left: 8px;
  font-size: 11px;
  color: #a0a0ad;
}

/* -------- Pretul de baza: o eticheta, un camp -------- */
.admin-base-price { margin-bottom: 6px; }
.admin-base-price-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #a0a0ad;
}
.admin-base-price-field input {
  width: 96px;
  padding: 9px 10px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.admin-base-price-field input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* -------- Extra optiuni: coloanele comune, grupate vizual -------- */
/* Gruparea din cap de tabel spune ce e comun si ce e doar al masinii curente,
   ca sa nu fie nevoie de un paragraf care sa explice acelasi lucru. */
.admin-shared-group {
  text-align: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #7CC4FF !important;
}
.admin-extra-apply-head {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: bottom;
}
.admin-extra-apply-head b {
  color: #fff;
  font-size: 12px;
}

@media (max-width: 640px) {
  /* Latimea calendarului pe telefon se stabileste mai jos, in blocul
     "Admin pe ecran mic" - acolo zilele devin si zone de atingere de 44px. */
  .admin-range-pop { width: 240px; }
}

/* ============================================
   NafiRent · admin pe ecran mic
   Panoul a fost desenat pentru desktop, dar clientul il deschide si de pe telefon.
   Nimic din functionalitate nu se schimba aici: aceleasi controale, alta asezare.

   Praguri (desktop-first, ca restul fisierului):
     900px - tabelele late nu mai au loc. Flota devine carduri, rezervarile trec pe
             derulare laterala cu prima coloana fixa, butoanele modalului se lipesc
             jos si tabelele din modal se string ca sa incapa. 900 nu e ales la
             intamplare: randul de flota are nevoie de ~900px doar pentru numele
             masinii, doua campuri, comutator si patru butoane.
     640px - telefon: zone de atingere de 44px, 16px pe inputuri (fara zoom iOS),
             tabelele din modalul de preturi devin carduri, calendarul de interval
             se lateste cat ecranul;
     480px - telefon mic (360px): antet, login si spatii mai stranse.
   ============================================ */

/* Indiciul de derulare are sens doar cat timp tabelul chiar se trage lateral. */
.admin-scroll-hint { display: none; }

@media (max-width: 900px) {

  /* -------- Flota: fiecare rand devine card --------
     De ce card si nu derulare: randul de flota se termina cu patru butoane
     (Salveaza / Preturi / Editeaza / Sterge). Derulat lateral, exact butoanele ar
     fi ramas ascunse, iar comprimat pe coloane inguste le stivuia unul sub altul
     si umfla randul la 200px inaltime. Ca card, fiecare valoare are eticheta ei
     (`data-label`, pus in admin.js) si butoanele stau intr-o grila de doua. */
  .admin-fleet-wrap {
    /* Cardurile sunt ele insele cutii; containerul nu mai are ce sa incadreze. */
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow-x: visible;
  }
  .admin-fleet-table,
  .admin-fleet-table tbody,
  .admin-fleet-table tr,
  .admin-fleet-table td {
    display: block;
    width: auto;
  }
  /* Capul de tabel nu mai are coloane de intitulat; etichetele vin din data-label. */
  .admin-fleet-table thead { display: none; }
  .admin-fleet-table tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: #14141a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
  }
  .admin-fleet-table td {
    padding: 7px 0;
    border-bottom: 0;
  }
  .admin-fleet-table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .admin-fleet-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 1 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a0a0ad;
  }
  /* Numele masinii e titlul cardului: fara eticheta, cu linie de despartire.
     `display: flex` se pune din nou fiindca regula de card l-a facut `block`. */
  .admin-fleet-table .admin-car-name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 16px;
    min-width: 0;
  }
  .admin-fleet-table .admin-car-thumb {
    width: 56px;
    height: 38px;
  }
  .admin-fleet-table input[type="number"] {
    width: 108px;
    text-align: right;
  }
  /* Butoanele intr-o grila care isi alege singura numarul de coloane: doua pe
     telefon, patru pe tableta, fara alt prag de media query. */
  .admin-fleet-table .admin-row-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .admin-fleet-table .admin-row-actions .btn { width: 100%; }
  /* Randurile de stare ("Se incarca...", eroare) nu sunt date: nu se fac card. */
  .admin-fleet-table .admin-loading,
  .admin-fleet-table .admin-error-row {
    padding: 28px 16px !important;
  }

  /* -------- Rezervari: derulare laterala cu prima coloana fixa --------
     Aici nu e nimic de editat, doar de citit, iar sase coloane de text ca sase
     carduri suprapuse ar face o pagina interminabila. Se trage lateral, iar data
     ramane pe loc ca sa se stie in ce rezervare te uiti. */
  .admin-resv-wrap { -webkit-overflow-scrolling: touch; }
  .admin-resv-table {
    /* Fara minim, browserul ar strivi coloanele pana devin ilizibile in loc sa
       ofere derulare. */
    min-width: 700px;
  }
  .admin-resv-table th:first-child,
  .admin-resv-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* Opac obligatoriu: altfel textul care trece pe dedesubt se vede prin coloana.
       Umbra face marginea vizibila, ca sa se citeasca drept coloana care sta pe loc
       si nu drept text lipit de restul tabelului. */
    background: #14141a;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1), 8px 0 10px -8px rgba(0, 0, 0, 0.8);
  }
  .admin-resv-table th:first-child {
    z-index: 3;
    background: #1a1a20;
  }
  .admin-resv-details td:first-child {
    position: static;
    box-shadow: none;
  }
  .admin-scroll-hint {
    display: block;
    margin: -8px 0 10px;
    color: #a0a0ad;
    font-size: 12px;
  }

  /* -------- Modalele: pe toata inaltimea, cu butoanele mereu la vedere -------- */
  .admin-modal {
    padding: 10px;
    align-items: flex-start;
  }
  .admin-modal-dialog {
    max-height: calc(100vh - 20px);
    padding: 22px 16px 16px;
    border-radius: 14px;
  }
  .admin-modal-dialog h2 {
    /* Loc pentru butonul de inchidere, ca titlul lung sa nu intre sub el. */
    padding-right: 48px;
    font-size: 19px;
  }
  .admin-modal-x {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
  /* Editorul de preturi are patru sectiuni si se deruleaza mult. Butonul de
     Salveaza lipit jos scuteste drumul pana la capat si inapoi. */
  .admin-modal-dialog .admin-modal-actions {
    position: sticky;
    bottom: -16px;
    z-index: 6;
    margin: 14px -16px -16px;
    padding: 12px 16px;
    background: #14141a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .admin-modal-dialog .admin-modal-actions .btn {
    flex: 1 1 auto;
    min-height: 46px;
  }

  /* Modalul de preturi pe tableta: tabelele raman tabele - asa se compara pretul
     intre sezoane pe acelasi rand - dar se string ca sa intre in dialog. Fara
     asta, coloana cu butonul de sters iesea afara si trebuia trasa lateral. */
  .admin-pricing-dialog .admin-table th,
  .admin-pricing-dialog .admin-table td { padding: 10px 8px; }
  .admin-pricing-dialog .admin-table input[type="text"].admin-text-input,
  .admin-pricing-dialog .admin-table select.admin-text-input { min-width: 120px; }
  .admin-extra-apply-head { white-space: normal; }

}

@media (max-width: 640px) {

  /* -------- Zoom pe iOS --------
     Safari mareste pagina la focus pe orice camp sub 16px si nu mai revine la
     dimensiunea initiala; asezarea ramane stricata pentru tot restul sesiunii.
     16px e minimul care il opreste, deci e o cerinta de aranjare, nu de estetica. */
  .admin-login-card input,
  .admin-field input[type="text"],
  .admin-field input[type="number"],
  .admin-field input[type="file"],
  .admin-field select,
  .admin-field textarea,
  .admin-table input[type="number"],
  .admin-table input[type="date"],
  .admin-table input[type="text"].admin-text-input,
  .admin-table select.admin-text-input,
  .admin-md-select,
  .admin-range-trigger,
  .admin-price-input input,
  .admin-base-price-field input,
  .admin-duration-table input[type="number"] {
    font-size: 16px;
  }

  /* -------- Zone de atingere de minim 44px -------- */
  .admin-body .btn,
  .admin-body .btn-sm {
    min-height: 44px;
  }
  .admin-body .btn-sm {
    padding: 10px 14px;
    font-size: 14px;
  }
  .admin-table input[type="number"],
  .admin-table input[type="date"],
  .admin-table input[type="text"].admin-text-input,
  .admin-table select.admin-text-input,
  .admin-md-select,
  .admin-range-trigger,
  .admin-price-input input,
  .admin-base-price-field input,
  .admin-field input[type="text"],
  .admin-field input[type="number"],
  .admin-field select {
    min-height: 44px;
  }
  /* Comutatorul ramane 44x24 la vedere - geometria bilei depinde de asta - dar
     primeste un strat transparent pe verticala ca sa se apese ca 44x44. */
  .admin-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
  }

  /* -------- Modalul de preturi: cele trei tabele devin carduri --------
     Grila de reduceri are cate o coloana de pret pentru fiecare sezon: cu doua
     sezoane depaseste deja latimea telefonului, iar cu patru e fara speranta.
     Nu se ascunde nimic - coloanele de sezon devin etichete care se aseaza pe
     randuri, deci se citesc toate fara derulare laterala. */
  .admin-pricing-dialog .admin-table-wrap {
    background: transparent;
    border: 0;
    overflow-x: visible;
  }
  .admin-seasons-table,
  .admin-seasons-table tbody,
  .admin-duration-table,
  .admin-duration-table tbody,
  .admin-extras-table,
  .admin-extras-table tbody {
    display: block;
    width: auto;
  }
  .admin-duration-table thead,
  .admin-extras-table thead { display: none; }
  .admin-seasons-table tr,
  .admin-duration-table tr,
  .admin-extras-table tr {
    /* `display: flex` blochifica automat celulele, deci nu mai e nevoie de o
       regula separata care sa scoata `display: table-cell`. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
  }
  /* Prefixul `.admin-pricing-dialog` nu e decor: fara el, regula de padding de la
     900px (cu aceeasi clasa in plus) ar fi mai specifica si celulele ar pastra
     spatiul de tabel in interiorul cardului. */
  .admin-pricing-dialog .admin-seasons-table td,
  .admin-pricing-dialog .admin-duration-table td,
  .admin-pricing-dialog .admin-extras-table td {
    padding: 0;
    border-bottom: 0;
  }
  /* Eticheta sta deasupra campului, nu langa: la 360px un "SE APLICA LA MASINA"
     langa un select ar lasa selectului 120px. */
  .admin-duration-table td[data-label],
  .admin-extras-table td[data-label],
  .admin-seasons-table td[data-label] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .admin-duration-table td[data-label]::before,
  .admin-extras-table td[data-label]::before,
  .admin-seasons-table td[data-label]::before {
    content: attr(data-label);
    flex: 1 1 100%;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a0a0ad;
  }

  /* Sezoane: intervalul pe toata latimea, pretul si stersul dedesubt. */
  .admin-seasons-table .admin-range-cell {
    flex: 1 1 100%;
    min-width: 0;
  }
  .admin-seasons-table .admin-price-cell-sm { flex: 0 1 auto; }
  .admin-seasons-table .admin-row-actions { margin-left: auto; }

  /* Reduceri: interval si reducere pe cate un rand, apoi preturile ca etichete. */
  .admin-duration-table .admin-tier-range,
  .admin-duration-table .admin-tier-pct {
    flex: 1 1 100%;
  }
  .admin-duration-table input[type="number"] {
    /* 66px cu text de 16px taia a treia cifra; centrat, se citeste mai bine. */
    width: 78px;
    padding: 8px 6px;
    text-align: center;
  }
  .admin-duration-table input[name="pct"] { width: 96px; }
  .admin-duration-table .admin-tier-price {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.14);
    border-radius: 999px;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
  }
  .admin-duration-table .admin-tier-price::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7CC4FF;
  }
  .admin-duration-table .admin-row-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  .admin-duration-table .admin-loading { padding: 20px 0 !important; }

  /* Extra optiuni: patru randuri eticheta + camp, apoi butonul de sters. */
  .admin-extras-table td[data-label] { flex: 1 1 100%; }
  .admin-extras-table input[type="text"].admin-text-input,
  .admin-extras-table select.admin-text-input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .admin-extras-table input[type="number"] { width: 96px; }
  .admin-extras-table .admin-row-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  /* -------- Calendarul de interval --------
     Cat mai lat, ca zilele sa ajunga la ~44px. Pozitia o pune positionRangePop()
     din admin.js, care centreaza popoverul cand ocupa aproape tot ecranul. */
  .admin-range-pop {
    width: min(336px, calc(100vw - 20px));
    padding: 12px 10px;
  }
  /* Luna trece pe randul ei: sase butoane de navigare plus numele lunii nu incap
     pe o singura linie la 360px. */
  .admin-range-head {
    flex-wrap: wrap;
    gap: 6px;
  }
  .admin-range-head strong {
    flex: 1 1 100%;
    order: -1;
    font-size: 15px;
  }
  .admin-range-nav,
  .admin-range-close {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
  .admin-range-close { margin-left: auto; }
  .admin-range-day {
    padding: 12px 0;
    font-size: 14px;
    border-radius: 10px;
  }
  .admin-range-cell { min-width: 0; }

  /* -------- Restul formularelor -------- */
  .admin-field-toggle { min-width: 0; }
  .admin-current-image img { max-width: 100%; }
  .admin-price-cell { min-width: 0; }
}

@media (max-width: 480px) {
  /* La 360px fiecare pixel de latime conteaza: marginile mari erau 25% din ecran. */
  .admin-body { padding: 20px 10px 40px; }
  .admin-login-card {
    padding: 26px 18px;
    border-radius: 14px;
  }
  .admin-header {
    gap: 10px;
    margin-bottom: 20px;
  }
  .admin-header h1 { font-size: 20px; }
  .admin-header small { font-size: 12px; }
  .admin-logo-sm { width: 38px; }
  /* Titlul ia tot randul in afara de logo (38px + spatiu), ca ambele butoane sa
     coboare impreuna pe randul urmator si sa-l imparta. Fara baza asta, primul
     buton urca langa titlu si al doilea ramane singur pe un rand intreg. */
  .admin-header .admin-title { flex: 1 1 calc(100% - 54px); }
  .admin-header .btn-sm { flex: 1 1 auto; }
  .admin-local-banner {
    padding: 12px 14px;
    font-size: 13px;
  }
  .admin-section-head {
    flex-wrap: wrap;
    margin: 34px 0 12px;
  }
  .admin-section-head .btn { flex: 1 1 auto; }
  .admin-duration-actions .btn { width: 100%; }
  .admin-duration-actions .btn + .btn { margin-top: 8px; }
  /* Coloana fixa de data: pe doua randuri costa 96px in loc de 130 si lasa mai
     mult din tabel la vedere fara sa tragi lateral. */
  .admin-resv-table th:first-child,
  .admin-resv-table td:first-child { width: 96px; }
  .admin-reservation-date { white-space: normal; }
}

/* ============================================================================
   Rezervarile devin carduri pe telefon.
   Erau lasate ca tabel cu derulare laterala, fiindca sunt de citit, nu de apasat.
   Dar butonul "Anuleaza" cadea la x=785 intr-un tabel de 878px, pe un ecran de 360:
   nu se vedea decat daca trageai lateral, si nimeni nu ghiceste ca trebuie sa tragi.
   Peste 640px ramane tabel - acolo incape, si se citeste mai bine pe orizontala.
   ============================================================================ */
@media (max-width: 640px) {
  .admin-resv-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  .admin-resv-table,
  .admin-resv-table tbody,
  .admin-resv-table tr,
  .admin-resv-table td {
    display: block;
    width: auto;
  }
  /* Anulam minimul de 700px si coloana fixa din varianta cu derulare laterala:
     altfel cardurile s-ar aseza corect, dar tabelul ar ramane lat de 700px si
     butonul de anulare ar cadea tot in afara ecranului. */
  .admin-resv-table { min-width: 0; }
  .admin-resv-table .admin-scroll-hint,
  .admin-scroll-hint { display: none; }
  /* Etichetele vin din data-label, deci capul de tabel nu mai are ce sa intituleze. */
  .admin-resv-table thead { display: none; }
  .admin-resv-table tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    background: #14141a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
  }
  /* Anuleaza regulile de coloana fixa din varianta cu derulare laterala. */
  .admin-resv-table th:first-child,
  .admin-resv-table td:first-child {
    position: static;
    width: auto;
    left: auto;
    box-shadow: none;
    background: transparent;
  }
  .admin-resv-table td {
    padding: 7px 0;
    border-bottom: 0;
  }
  .admin-resv-table td[data-label] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
  }
  .admin-resv-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a0a0ad;
    text-align: left;
  }
  /* Data primirii e titlul cardului: fara eticheta, cu linie de despartire. */
  .admin-resv-table .admin-reservation-date {
    padding: 0 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }
  /* Emailul si perioada pot fi lungi; se rup in loc sa lateasca cardul. */
  .admin-resv-table td[data-label="Email"],
  .admin-resv-table td[data-label="Perioadă"] {
    align-items: flex-start;
  }
  .admin-resv-table td[data-label="Email"] a,
  .admin-resv-table .admin-reservation-period {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .admin-resv-table .admin-reservation-period { white-space: normal; }
  /* Butonul de anulare pe toata latimea: e singura actiune din card. */
  .admin-resv-table td:last-child {
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .admin-resv-table td:last-child .btn {
    width: 100%;
    min-height: 44px;
    margin-left: 0;
  }
  /* Celula de actiuni are acum si „Detalii" langa „Anuleaza": una sub alta, ca sa
     nu impinga butonul in afara cardului. Fara `white-space: nowrap` din desktop. */
  .admin-resv-table .admin-resv-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    white-space: normal;
    text-align: left;
  }
  .admin-resv-table .admin-resv-actions:empty {
    display: none;
  }
  .admin-resv-table .admin-link-btn {
    min-height: 44px;
    text-align: left;
  }
  /* Randul de detalii se lipeste de cardul rezervarii lui, ca o continuare, nu ca
     un card separat cu identitate proprie. */
  .admin-resv-table tr.admin-resv-row:has(+ .admin-resv-details:not([hidden])) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .admin-resv-table tr.admin-resv-details {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .admin-resv-table tr.admin-resv-details td {
    padding: 0 0 4px !important;
    background: transparent;
  }
}

/* ========== BUTON WHATSAPP (hero) ========== */
.btn-wa {
  background: #25D366;
  color: #FFFFFF;
  gap: 10px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}
.btn-wa:hover { background: #1EBE5B; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45); }
.btn-wa svg { width: 24px; height: 24px; fill: #FFFFFF; flex-shrink: 0; }
.hero-cta { flex-wrap: wrap; }

/* ========== REZERVARE RAPIDA (widget sub hero) ========== */
.hero .slide-inner { padding-bottom: 150px; }
.hero .slider-controls { bottom: 84px; }
.quick-book-section {
  position: relative;
  z-index: 3;
  margin-top: -56px;
  padding: 0 24px;
}
.quick-book {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto;
  gap: 18px;
  align-items: end;
}
.qb-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qb-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.qb-dt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
.quick-book select,
.quick-book input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.quick-book select:focus,
.quick-book input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.quick-book .btn { min-height: 48px; white-space: nowrap; }
.qb-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--danger);
}
@media (max-width: 1100px) {
  .quick-book { grid-template-columns: 1fr 1fr; }
  .quick-book .btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero .slide-inner { padding-bottom: 130px; }
  .hero .slider-controls { bottom: 72px; }
  .quick-book-section { margin-top: -40px; padding: 0 16px; }
  .quick-book { grid-template-columns: 1fr; padding: 20px; gap: 14px; }
}

/* ========== CIFRE (sub Manifest) ========== */
.figures-section { padding: 10px 0 70px; }
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 44px 0;
}
.figure { padding: 0 24px; border-right: 1px solid var(--border); text-align: center; }
.figure:last-child { border-right: none; }
.figure strong {
  display: block;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 10px;
}
.figure strong small { font-size: 0.5em; font-weight: 600; color: var(--text-3); }
.figure span { font-size: 14px; color: var(--text-2); }
@media (max-width: 720px) {
  .figures { grid-template-columns: 1fr 1fr; padding: 24px 0; }
  .figure { border-right: none; padding: 16px 12px; }
  .figure:nth-child(odd) { border-right: 1px solid var(--border); }
  .figure:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* ========== PENTRU CINE (Turisti / Business) ========== */
.who-section { padding: 0 0 100px; }
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.who-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 36px;
  background: var(--navy);
  color: #FFFFFF;
  border-radius: var(--radius);
}
.who-card.is-light { background: var(--bg-2); color: var(--text); }
.who-card h2 {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.who-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.who-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.who-card li::before {
  content: '\2713';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: var(--gold);
  color: var(--on-accent);
}
.who-card li .muted { opacity: 0.8; }
.who-card .btn { align-self: flex-start; }
.who-card.is-light .btn-ghost { color: var(--text); }
.who-card:not(.is-light) .btn-ghost { color: #FFFFFF; background: transparent; border-color: rgba(255, 255, 255, 0.4); }
.who-card:not(.is-light) .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #FFFFFF; }
@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-card { padding: 28px 22px; }
}

/* ========== RECENZII - carusel ========== */
.reviews-slider { position: relative; }
.reviews-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  touch-action: pan-y;
}
.reviews-track .review[hidden] { display: none; }
.reviews-track .review.is-shown { animation: fadeIn 0.35s var(--ease-out) both; }
.reviews-track .review:hover { transform: none; }
.reviews-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.reviews-nav .slider-arrow:disabled { opacity: 0.4; cursor: default; }
.reviews-nav .slider-arrow:disabled:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.review-verified .g-logo { width: 14px; height: 14px; flex-shrink: 0; }
.reviews-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.reviews-google svg { width: 18px; height: 18px; }
.reviews-google:hover { color: var(--gold); }
.reviews-track .review:nth-child(1) .review-avatar { background: #2563EB; }
.reviews-track .review:nth-child(2) .review-avatar { background: #1D4ED8; }
.reviews-track .review:nth-child(3) .review-avatar { background: #1E40AF; }
.reviews-track .review:nth-child(4) .review-avatar { background: #16294D; }
.reviews-track .review:nth-child(5) .review-avatar { background: #1E3A8A; }
.reviews-track .review:nth-child(6) .review-avatar { background: #0F1E3A; }
@media (max-width: 1000px) { .reviews-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .reviews-track { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .reviews-track .review.is-shown { animation: none; } }

/* ========== FOOTER pe 4 coloane ========== */
.footer { padding: 64px 0 28px; }
.footer-inner {
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  align-items: start;
  gap: 40px 32px;
}
.footer-brand { flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-brand p { font-size: 14px; line-height: 1.55; color: #D6DEEA; max-width: 36ch; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #FFFFFF;
  transition: color 0.2s;
}
.footer-contact a:hover { color: #7CC4FF; }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.footer-col h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links { flex-direction: column; gap: 10px; }
.footer-links a, .footer-col a { font-size: 14px; color: #D6DEEA; transition: color 0.2s; }
.footer-links a:hover, .footer-col a:hover { color: #FFFFFF; }
.footer-company { font-size: 14px; color: #D6DEEA; line-height: 1.6; font-style: normal; }
.footer-company strong { color: #FFFFFF; font-weight: 600; }
.footer-hours { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #B8C4D9; }
.footer-hours span { display: flex; justify-content: space-between; gap: 12px; max-width: 260px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-copy { text-align: left; }
.footer-pay { display: flex; align-items: center; gap: 10px; }
.footer-pay svg { height: 24px; width: auto; display: block; }
@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer { padding: 48px 0 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ========== COMUTATOR DE TEMA ========== */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ========== TEMA INCHISA: tokenii vechi, sub :root[data-theme="dark"] ========== */
:root[data-theme="dark"] {
  --bg: #141824;
  --bg-2: #1B2030;
  --surface: #232A3C;
  --surface-2: #2B3348;
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.22);
  --text: #FFFFFF;
  --text-2: #C4CAD8;
  --text-3: #99A1B3;
  --gold: #60A5FA;
  --gold-2: #93C5FD;
  --gold-glow: rgba(96, 165, 250, 0.4);
  --gold-soft: rgba(96, 165, 250, 0.14);
  --on-accent: #0F1E3A;
  --navy: #0F1E3A;
  --navy-2: #16294D;
  --danger: #F87171;
  --ok: #22C55E;
  --warn: #FDE68A;
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
  --nav-bg: rgba(20, 24, 36, 0.88);
  --nav-bg-scrolled: rgba(20, 24, 36, 0.96);
  --car-bg: #1B2030;
  --car-bg-image: radial-gradient(ellipse 78% 60% at 50% 60%, #2B3348 0%, #1F2638 62%, #171C2B 100%);
  --page-hero-bg: linear-gradient(180deg, #171C2B 0%, var(--bg-2) 100%);
  --modal-visual-bg: linear-gradient(135deg, #1B2030 0%, #232A3C 100%);
  color-scheme: dark;
}
:root[data-theme="dark"] .nav .brand-logo { content: url("/assets/logo-white.png"); }
:root[data-theme="dark"] .slide-media {
  background: radial-gradient(ellipse 78% 60% at 50% 60%, #FFFFFF 0%, #F3F4F7 62%, #E4E7EC 100%);
  border-radius: var(--radius);
  overflow: hidden;
}
:root[data-theme="dark"] .slide-media::before { display: none; }
:root[data-theme="dark"] .slide-media img { padding: 4%; }
:root[data-theme="dark"] .who-card { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
:root[data-theme="dark"] .who-card.is-light { background: var(--bg-2); }
:root[data-theme="dark"] .footer { border-top: 1px solid var(--border); }
:root[data-theme="dark"] .car-badge { background: rgba(35, 42, 60, 0.9); }
:root[data-theme="dark"] .car-card.car-unavailable .car-img::after { background: rgba(20, 24, 36, 0.55); }
:root[data-theme="dark"] .review-verified { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); }
:root[data-theme="dark"] .contact-form textarea.message-readonly { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.35); }
:root[data-theme="dark"] .selected-car { border-color: rgba(59, 130, 246, 0.35); }
:root[data-theme="dark"] .review:hover { background: var(--surface-2); }