/* DualFIX AUTO – sistem de design „Neon Lime” (doar temă întunecată)
   Inspirat de higgsfield.ai: fundal aproape negru, un singur accent lime acid,
   carduri „sticlă”, butoane pill, etichete mono, străluciri radiale.

   Inventar clase păstrate (folosite de HTML/JS existent):
   active admin-page admin-wrap alt booking btn btn-dark btn-ghost btn-sm btn-waze btn-whatsapp
   cal cal-grid cal-head cal-holidays cal-nav cal-day cal-wd cal-red cal-holiday cal-today
   card cart-count cart-link cart-item check chips chips-center chip clock clock-date company-box consent
   contact-grid contact-line container data drawer drawer-backdrop drawer-body drawer-foot drawer-head
   eyebrow faq feature features field filters grid grid-3 hero hero-actions hero-badges hero-list hero-side
   hero-video hidden icon icon-btn legal login-box logo logo-icon logo-text map-box menu-toggle muted nav
   page-head products products-4 recs-title reveal reveal-group review-box row schedule section-head shop
   site-footer site-header size-row slots slot step-title summary tab tabs table-wrap tire-art tire-search
   toolbar total-line weather-* widget-band widget-row widget-section
   js: alert alert-ok alert-err assistant-* badge body desc duration empty foot footer-* name price
   product product-photo qty service-card service-meta size status status-* stock out thumb wheel-3d
   wa-float open selected in-view is-3d has-3d.
   Clase noi: btn-glow, glass, pill, container-narrow. */

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  color-scheme: dark;
  --bg: #030304;
  --surface-1: #0f1113;
  --surface-2: #131517;
  --surface-3: #1c1e20;
  --border: #ffffff14;
  --border-strong: #292b2c;
  --text: #f2f2f2;
  --muted: #a8a8a8;
  --accent: #d1fe17;
  --accent-hover: #829b19;
  --accent-ink: #030304;
  --accent-soft: rgba(209, 254, 23, 0.1);
  --accent-glow: rgba(209, 254, 23, 0.28);
  --danger: #fb2c36;
  --ok: #d1fe17;
  --radius: 12px;
  --radius-lg: 16px;
  --glass-blur: 14px;
  --glass-bg: rgba(19, 21, 23, 0.62);
  --maxw: 1180px;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(209, 254, 23, 0.09), transparent 70%),
    radial-gradient(#ffffff0d 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-repeat: no-repeat, repeat;
  background-attachment: scroll, scroll;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
small { font-size: 0.85em; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- etichete mono + pill */
.eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
}

/* ---------- sticlă */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}

/* ---------- header (sticlă, fix) */
.site-header {
  position: sticky; top: 0; z-index: 50; color: var(--text);
  background: rgba(3, 3, 4, 0.72);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.logo svg, .logo .logo-icon { width: 44px; height: 44px; object-fit: contain; flex: none; }
.logo em { color: var(--accent); font-style: normal; }
.logo small { font-family: var(--font-mono) !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted) !important; }
.nav { display: flex; gap: 2px; align-items: center; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 0.95rem; color: var(--muted); transition: color 0.2s, background-color 0.2s; }
.nav a:hover, .nav a.active { color: var(--text); background: #ffffff0f; }
.nav a.btn { color: var(--accent-ink); }
.nav a.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.nav .btn { margin-left: 8px; }
.menu-toggle {
  display: none; background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); font-size: 1.3rem; line-height: 1; width: 44px; height: 44px; cursor: pointer;
}
.cart-link { position: relative; }
.cart-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; margin-left: 4px;
}

@media (max-width: 860px) {
  .menu-toggle { display: grid; place-items: center; }
  .nav {
    display: none; position: absolute; top: calc(var(--header-h) + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; padding: 8px 16px 16px;
    background: rgba(3, 3, 4, 0.94);
    -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--border);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; border-radius: var(--radius); }
  .nav .btn { margin: 8px 0 0; text-align: center; }
}
@media (max-width: 420px) {
  .logo { font-size: 1.1rem; }
  .logo svg, .logo .logo-icon { width: 36px; height: 36px; }
}

/* ---------- butoane (pill) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  text-decoration: none; font: inherit; font-weight: 600; line-height: 1.2;
  padding: 12px 24px; min-height: 44px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s;
}
.btn:hover { background: var(--accent-hover); box-shadow: 0 0 28px var(--accent-glow); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: #ffffff0f; border-color: var(--accent); box-shadow: none; color: var(--text); }
.btn-dark { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }
.btn-dark:hover { background: var(--surface-2); border-color: var(--accent); box-shadow: none; }
.btn-sm { padding: 6px 16px; min-height: 36px; font-size: 0.9rem; }
.btn-whatsapp { background: #25d366; color: #05220f; }
.btn-whatsapp:hover { background: #1fb457; box-shadow: 0 0 24px rgba(37, 211, 102, 0.3); }
.btn-whatsapp svg { width: 20px; height: 20px; }
.btn-waze { background: #33ccff; color: #04141c; }
.btn-waze:hover { background: #26a8d3; box-shadow: none; }

/* CTA principal: bordură conică lime rotativă */
.btn-glow {
  position: relative; isolation: isolate; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 32px rgba(209, 254, 23, 0.18);
}
.btn-glow::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--angle), transparent 0%, var(--accent) 12%, #ffffff 18%, var(--accent) 24%, transparent 40%, transparent 100%);
  animation: spin-angle 3.2s linear infinite;
}
.btn-glow::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent);
}
.btn-glow:hover { background: var(--accent); box-shadow: 0 0 44px var(--accent-glow); }
.btn-glow:hover::after { background: #e0ff5c; }
@keyframes spin-angle { to { --angle: 360deg; } }

/* ---------- WhatsApp flotant (dreapta-jos; asistentul virtual e stânga-jos) */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px 0 16px;
  border-radius: 28px; background: #25d366; color: #05220f; text-decoration: none; font-weight: 700;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(37, 211, 102, 0.25); transition: transform 0.15s, box-shadow 0.15s;
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float span { color: #05220f; }
.wa-float:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 32px rgba(37, 211, 102, 0.35); }
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25d366;
  animation: wa-pulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes wa-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.35); opacity: 0; } }
@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; width: 56px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
}
@media print { .wa-float { display: none; } }

/* ---------- asistent virtual (gratuit, fără AI extern): buton rotund lime stânga-jos + panou de chat „sticlă” */
.assistant-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 80;
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 24px var(--accent-glow); transition: transform 0.15s, box-shadow 0.15s;
}
.assistant-toggle:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 36px var(--accent-glow); }
.assistant-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.assistant-icon { width: 26px; height: 26px; fill: currentColor; }
.assistant-icon-close { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* butonul arată „X” cât timp panoul e deschis (aria-expanded setat din assistant.js) */
.assistant-toggle .assistant-icon-close,
.assistant-toggle[aria-expanded="true"] .assistant-icon-chat { display: none; }
.assistant-toggle[aria-expanded="true"] .assistant-icon-close { display: block; }

.assistant-panel {
  display: none; flex-direction: column; position: fixed; left: 20px; bottom: 88px; z-index: 85;
  width: min(360px, calc(100vw - 32px)); height: min(480px, calc(100vh - 120px));
  height: min(480px, calc(100dvh - 120px));
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}
/* sticlă întunecată acolo unde browserul știe blur + color-mix; altfel rămâne fundalul opac de mai sus */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red, blue)) {
  .assistant-panel {
    background: color-mix(in srgb, var(--surface-1) 90%, transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  }
}
.assistant-panel.open { display: flex; transform-origin: bottom left; animation: assistant-in 0.2s ease-out; }
@keyframes assistant-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
.assistant-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px 6px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.assistant-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
.assistant-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.assistant-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.assistant-close:hover { color: var(--text); background: #ffffff0f; }
.assistant-close .assistant-icon { width: 20px; height: 20px; }
.assistant-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.assistant-msg { max-width: 85%; padding: 9px 13px; border-radius: var(--radius); font-size: 0.94rem; line-height: 1.45; overflow-wrap: anywhere; }
.assistant-msg-bot { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; }
.assistant-msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); font-weight: 500; border-bottom-right-radius: 4px; }
.assistant-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.assistant-form input { flex: 1; min-width: 0; border-radius: 999px; padding-inline: 16px; }
.assistant-form .btn { flex: none; min-height: 44px; }
@media (max-width: 600px) {
  .assistant-toggle { left: 16px; bottom: 16px; }
  .assistant-panel { left: 16px; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-panel.open { animation: none; }
  .assistant-toggle, .assistant-close { transition: none; }
}
@media print { .assistant-toggle, .assistant-panel, .assistant-panel.open { display: none; } }

/* ---------- formulare (întunecate) */
label { display: block; font-weight: 500; font-size: 0.88rem; margin-bottom: 6px; color: var(--text); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 14px; min-height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: #6c6f72; }
input:hover, select:hover, textarea:hover { border-color: #3a3d3f; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(209, 254, 23, 0.18); }
input[type="date"], input[type="time"] { color-scheme: dark; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a8a8a8' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
select option { background: var(--surface-2); color: var(--text); }
textarea { resize: vertical; min-height: 84px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.field { margin-bottom: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 0.95rem; }
.check input { width: 18px; min-height: 0; height: 18px; flex: none; }

.alert { padding: 12px 16px; border-radius: var(--radius); margin: 12px 0; font-weight: 500; border: 1px solid var(--border); }
.alert-ok { background: var(--accent-soft); color: var(--accent); border-color: rgba(209, 254, 23, 0.3); }
.alert-err { background: rgba(251, 44, 54, 0.1); color: #ff7077; border-color: rgba(251, 44, 54, 0.35); }

/* ---------- hero (prima pagină; rescris în Task 4) */
.hero {
  background: radial-gradient(circle at 80% 45%, rgba(209, 254, 23, 0.1), transparent 50%);
  color: var(--text); padding: 88px 0 96px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: 0.3; filter: saturate(0.9);
}
.hero-video + .container::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background: linear-gradient(90deg, rgba(3, 3, 4, 0.94) 0%, rgba(3, 3, 4, 0.6) 55%, rgba(3, 3, 4, 0.2) 100%);
}
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 16px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { color: var(--muted); font-size: 1.1rem; max-width: 540px; }
.hero-list { list-style: none; margin: 0 0 16px; padding: 0; color: var(--text); font-size: clamp(0.98rem, 1.82vw, 1.25rem); font-weight: 600; line-height: 1.5; }
.hero-list li::before { content: "– "; color: var(--accent); font-weight: 700; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 32px; max-width: 620px; }
.hero-badges a {
  display: block; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.82rem; color: var(--muted); text-decoration: none; transition: transform 0.2s, border-color 0.2s;
}
.hero-badges a:hover { transform: translateY(-2px); border-color: rgba(209, 254, 23, 0.4); }
.hero-badges strong { display: block; font-size: 1rem; line-height: 1.25; color: var(--text); margin-bottom: 2px; }
.tire-art { width: 100%; max-width: 380px; aspect-ratio: 1 / 1; justify-self: center; position: relative; animation: spin 40s linear infinite; }
.tire-art.is-3d { max-width: 480px; animation: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
.tire-art canvas { display: block; width: 100%; height: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-side { display: flex; flex-direction: column; align-items: center; gap: 20px; min-width: 0; }

/* banda cu ceas, calendar și vreme (prima pagină) */
.widget-band {
  position: relative; z-index: 1; width: 100%; padding: 22px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text);
}
.widget-section { padding: 0; }
.widget-band .widget-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.widget-row > * { padding: 4px 32px; text-align: center; }
.widget-row > * + * { border-left: 1px solid var(--border); }
.clock { font-family: var(--font-mono); font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--text); }
.clock-date { color: var(--accent); font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; margin: 6px 0 16px; }
.cal { max-width: 380px; margin: 0 auto; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 700; }
.cal-head span { cursor: pointer; }
.cal-nav { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cal-nav:hover { background: #ffffff14; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.cal-wd { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--muted); padding: 2px 0; }
.cal-day { padding: 5px 0; border-radius: 8px; color: var(--text); }
.cal-grid .cal-red { color: var(--danger); font-weight: 700; }
.cal-holiday { background: rgba(251, 44, 54, 0.12); cursor: help; }
.cal-today { outline: 1px solid var(--accent); outline-offset: -1px; background: var(--accent-soft); }
.cal-holidays { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.85rem; color: var(--muted); text-align: left; }
.cal-holidays b { color: var(--danger); display: inline-block; min-width: 1.6em; }
.cal-holidays:empty { text-align: center; }
.cal-holidays:empty::before { content: "Nicio sărbătoare legală în această lună."; color: var(--muted); }
.weather-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.weather-now { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; }
.weather-temp { font-family: var(--font-mono); font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 500; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.weather-feels { font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.weather-credit { display: inline-block; margin-bottom: 10px; font-size: 0.78rem; color: var(--muted); }
.weather-credit:hover { color: var(--accent); }
.weather-frame { width: 100%; overflow: hidden; height: 236px; border-radius: var(--radius); }
.weather-box iframe { display: block; width: 100%; height: 320px; margin-top: -52px; border: 0; }

@media (max-width: 860px) {
  .widget-band .widget-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .widget-row > * { padding: 0; }
  .widget-row > * + * { border-left: 0; border-top: 1px solid var(--border); padding-top: 22px; }
  .hero { padding: 56px 0 64px; }
  .hero .container { grid-template-columns: minmax(0, 1fr); }
  .hero-side { order: -1; }
  .tire-art { max-width: 220px; }
  .tire-art.is-3d { max-width: 300px; }
}

/* ---------- secțiuni */
section { padding: 72px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-head h2 { color: var(--text); }
.section-head .muted { color: var(--muted); }
.alt { background: rgba(255, 255, 255, 0.015); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* card: sticlă + strălucire lime care urcă din bază la hover */
.card {
  position: relative; background: var(--surface-1); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; overflow: hidden;
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 130%, rgba(209, 254, 23, 0.2), transparent 70%);
  opacity: 0; transform: translateY(24px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.card > * { position: relative; z-index: 1; }
.card:hover { transform: translateY(-3px); border-color: rgba(209, 254, 23, 0.3); }
.card:hover::after { opacity: 1; transform: none; }
/* panourile funcționale (filtre, formulare, login) nu se ridică */
.filters.card:hover, .login-box.card:hover, form.card:hover, details.card:hover { transform: none; }
.filters.card::after, .login-box.card::after, form.card::after, details.card::after { display: none; }

.service-card { display: flex; flex-direction: column; text-align: center; }
.service-card h3 { font-size: 1.1rem; }
.service-card p { color: var(--muted); flex: 1; margin: 0 0 16px; }
.service-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; border-top: 1px dashed var(--border-strong); padding-top: 14px; }
.price { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--text); }
.price small { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.duration { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.feature .icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--border); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 12px; }
.feature h3 { font-size: 1.05rem; }
.feature p { color: var(--muted); margin: 0; }

/* ---------- programare */
.booking { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .booking { grid-template-columns: 1fr; } }
.step-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin-bottom: 14px; }
.step-title b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.8rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; min-height: 48px; }
.slot {
  padding: 9px 0; min-height: 44px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2);
  color: var(--text); cursor: pointer; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500;
  transition: border-color 0.2s, background-color 0.2s;
}
.slot:hover { border-color: var(--accent); }
.slot.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.summary { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; font-size: 0.95rem; }
.summary strong { color: var(--accent); }

/* ---------- contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.schedule { width: 100%; border-collapse: collapse; }
.schedule td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.schedule td:last-child { text-align: right; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; }
.map-box { border-radius: var(--radius-lg); overflow: hidden; min-height: 300px; background: var(--surface-2); border: 1px solid var(--border); }
.map-box iframe { width: 100%; height: 100%; min-height: 300px; border: 0; filter: invert(0.92) hue-rotate(180deg) saturate(0.7); }
.contact-line { display: flex; gap: 10px; margin-bottom: 10px; }

/* ---------- magazin */
.page-head {
  padding: 56px 0 40px; border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse 60% 120% at 20% 0%, rgba(209, 254, 23, 0.08), transparent 70%);
}
.page-head h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 10px; }
.page-head p { color: var(--muted); margin: 0; max-width: 620px; }
.shop { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; padding: 32px 16px 72px; align-items: start; }
@media (max-width: 860px) { .shop { grid-template-columns: minmax(0, 1fr); } }
.filters { position: sticky; top: calc(var(--header-h) + 20px); }
.filters h3 { font-size: 1rem; margin-bottom: 14px; }
@media (max-width: 860px) { .filters { position: static; } }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--muted);
  padding: 9px 18px; min-height: 40px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 500; font-size: 0.92rem;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.tab:hover { color: var(--text); border-color: #3a3d3f; }
.tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.size-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.size-row select { padding: 10px 24px 10px 10px; font-size: 0.9rem; background-position: right 8px center; }
.size-row input { padding: 10px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.products-4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.product { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.product .thumb {
  background: radial-gradient(circle at 50% 45%, #2a2d30 0%, #16181a 60%, #0f1113 100%);
  height: 170px; display: grid; place-items: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
}
.product .thumb svg { width: 104px; height: 104px; }
.product .thumb img.product-photo {
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6)); transition: transform 0.4s ease;
}
.product:hover .thumb img.product-photo { transform: scale(1.05); }
.product .thumb.has-3d { height: 230px; overflow: hidden; }
.product .thumb .wheel-3d { width: 220px; height: 220px; max-width: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6)); transition: transform 0.4s ease; }
.product:hover .thumb .wheel-3d { transform: rotate(-12deg) scale(1.05); }
.product .badge {
  position: absolute; top: 10px; left: 10px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.product .body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.product h3 { font-size: 1rem; margin-bottom: 4px; }
.product .size { font-family: var(--font-mono); font-weight: 500; color: var(--accent); font-size: 0.85rem; }
.product .desc { color: var(--muted); font-size: 0.88rem; flex: 1; margin: 6px 0 12px; }
.product .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.product .foot input { min-height: 36px; padding: 6px 10px; }
.stock { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent); }
.stock.out { color: var(--danger); }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.recs-title { margin: 40px 0 16px; font-size: 1.3rem; color: var(--text); }
#recommended > .muted { color: var(--muted); }

/* căutare anvelope (prima pagină) */
.tire-search { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: end; }
.tire-search .field { margin: 0; }
.tire-search .btn { height: 44px; }
@media (max-width: 760px) { .tire-search { grid-template-columns: 1fr 1fr; } .tire-search .btn { grid-column: 1 / -1; } }

/* dimensiuni populare */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-center { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); padding: 6px 12px; min-height: 32px;
  border-radius: 999px; cursor: pointer; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  transition: border-color 0.2s, background-color 0.2s;
}
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- coș (sertar) */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 100; color: var(--text);
  background: rgba(15, 17, 19, 0.96); border-left: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  display: flex; flex-direction: column; box-shadow: -16px 0 48px rgba(0, 0, 0, 0.6);
  transform: translateX(100%); visibility: hidden; transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.drawer.open { transform: none; visibility: visible; transition: transform 0.28s ease, visibility 0s; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 1.3rem; margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-foot { border-top: 1px solid var(--border); padding: 16px 20px; }
.icon-btn { background: none; border: 0; font-size: 1.5rem; cursor: pointer; line-height: 1; color: inherit; min-width: 36px; min-height: 36px; }
.icon-btn:hover { color: var(--accent); }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-item .name { font-weight: 600; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 700; }
.qty button:hover { border-color: var(--accent); }
.total-line { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }

/* ---------- subsol */
.site-footer { background: var(--surface-1); border-top: 1px solid var(--border); color: var(--muted); padding: 48px 0 28px; font-size: 0.92rem; position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(209, 254, 23, 0.5), transparent);
}
.site-footer a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--accent); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.footer-grid > div > div { margin-bottom: 6px; }
.footer-title { display: block; color: var(--text); margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; }
.footer-bottom { border-top: 1px solid var(--border); margin-top: 28px; padding-top: 18px; font-size: 0.85rem; }

/* însemne oficiale ANPC (logo + pictograma SAL): imaginile sunt linkuri, înalte de 50px.
   Logo-ul are fundal transparent și text albastru închis, deci stă pe o placă albă (ca pictograma SAL, care e deja albă). */
.footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.site-footer .footer-badge {
  display: block; max-width: 100%; border-radius: var(--radius); color: #2a3f84;
  transition: transform 0.2s, box-shadow 0.2s;
}
.site-footer .footer-badge:hover { color: #2a3f84; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(209, 254, 23, 0.5), 0 6px 22px var(--accent-glow); }
.footer-badge img { display: block; height: 50px; width: auto; max-width: 100%; object-fit: contain; }
.site-footer .footer-badge-logo { background: #fff; padding: 4px 8px; }
.site-footer .footer-badge-logo img { height: 42px; }

/* ---------- pagini legale */
.legal { max-width: 820px; padding: 40px 16px 72px; }
.legal h1 { margin-bottom: 0.4em; }
.legal h2 { font-size: 1.3rem; margin-top: 32px; }
.legal p, .legal li { color: #cfcfcf; }
.legal .muted { color: var(--muted); }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal a:hover { color: #e0ff5c; }
.legal .company-box { background: var(--surface-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; }
.legal .company-box a { color: var(--accent); }
.consent { font-weight: 400; font-size: 0.9rem; align-items: flex-start; }
.consent input { margin-top: 3px; }
.consent a { color: var(--accent); }

/* recenzie Google (cod QR) */
.review-box {
  display: flex; gap: 16px; align-items: center; margin-top: 20px; padding: 16px;
  background: var(--surface-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); border-left: 3px solid var(--accent);
}
.review-box img { width: 132px; height: 132px; flex: none; border-radius: 8px; background: #fff; padding: 4px; }
.review-box p { margin: 4px 0 10px; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 480px) { .review-box { flex-direction: column; text-align: center; } }

/* întrebări frecvente */
.faq { max-width: 820px; }
.faq details { background: var(--surface-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; transition: border-color 0.2s; }
.faq details[open], .faq details:hover { border-color: rgba(209, 254, 23, 0.3); }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 20px 16px; color: var(--muted); }
.faq details a { color: var(--accent); }

/* ---------- admin */
.admin-wrap { padding: 28px 16px 60px; }
.login-box { max-width: 400px; margin: 64px auto; }
.login-box h2 { font-size: 1.5rem; }
.table-wrap { overflow-x: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th, table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data th { background: var(--surface-2); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
table.data a { color: var(--accent); }
table.data input, table.data select { padding: 6px 10px; min-height: 36px; min-width: 80px; }
table.data input[type="checkbox"] { min-width: 0; }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid transparent; }
.status-noua { background: var(--accent-soft); color: var(--accent); border-color: rgba(209, 254, 23, 0.3); }
.status-confirmata, .status-expediata { background: rgba(120, 170, 255, 0.12); color: #8db4ff; border-color: rgba(120, 170, 255, 0.3); }
.status-finalizata { background: #ffffff10; color: var(--text); border-color: var(--border-strong); }
.status-anulata { background: rgba(251, 44, 54, 0.12); color: #ff7077; border-color: rgba(251, 44, 54, 0.35); }
.toolbar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .field { margin: 0; }
details.card summary { color: var(--text); }
body.admin-page { background-image: radial-gradient(#ffffff0a 1px, transparent 1px); background-size: 28px 28px; background-repeat: repeat; }

/* ---------- reveal la scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: none; }

.hero-badges.reveal-group a { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.2s; }
.hero-badges.reveal-group.in-view a:nth-child(1) { transition-delay: 0.05s; }
.hero-badges.reveal-group.in-view a:nth-child(2) { transition-delay: 0.12s; }
.hero-badges.reveal-group.in-view a:nth-child(3) { transition-delay: 0.19s; }
.hero-badges.reveal-group.in-view a:nth-child(4) { transition-delay: 0.26s; }
.hero-badges.reveal-group.in-view a:nth-child(5) { transition-delay: 0.33s; }
.hero-badges.reveal-group.in-view a:nth-child(6) { transition-delay: 0.4s; }
.hero-badges.reveal-group.in-view a { opacity: 1; transform: none; }

.features.reveal-group .feature { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.features.reveal-group.in-view .feature:nth-child(1) { transition-delay: 0.05s; }
.features.reveal-group.in-view .feature:nth-child(2) { transition-delay: 0.15s; }
.features.reveal-group.in-view .feature:nth-child(3) { transition-delay: 0.25s; }
.features.reveal-group.in-view .feature:nth-child(4) { transition-delay: 0.35s; }
.features.reveal-group.in-view .feature { opacity: 1; transform: none; }

.faq.reveal-group details { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s; }
.faq.reveal-group.in-view details:nth-child(1) { transition-delay: 0.04s; }
.faq.reveal-group.in-view details:nth-child(2) { transition-delay: 0.09s; }
.faq.reveal-group.in-view details:nth-child(3) { transition-delay: 0.14s; }
.faq.reveal-group.in-view details:nth-child(4) { transition-delay: 0.19s; }
.faq.reveal-group.in-view details:nth-child(5) { transition-delay: 0.24s; }
.faq.reveal-group.in-view details:nth-child(6) { transition-delay: 0.29s; }
.faq.reveal-group.in-view details:nth-child(7) { transition-delay: 0.34s; }
.faq.reveal-group.in-view details { opacity: 1; transform: none; }

/* ---------- mișcare redusă: totul oprit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .reveal, .hero-badges.reveal-group a, .features.reveal-group .feature, .faq.reveal-group details { opacity: 1 !important; transform: none !important; }
  .card:hover, .hero-badges a:hover, .wa-float:hover, .assistant-toggle:hover, .site-footer .footer-badge:hover { transform: none; }
  .product:hover .thumb img.product-photo, .product:hover .thumb .wheel-3d { transform: none; }
  .btn-glow::before, .wa-float::after { display: none; }
  .hero-video { display: none; }
  .drawer { transition: none !important; }
}