/* AutoKraft Kiosk: ecran tactil, tema neagra cu accent rosu.
   Scalare pe vmin ca sa arate la fel pe 23.8" 1080p (peisaj) si pe 32" vertical. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --negru: #0b0b0d; --fond: #0f0f12; --card: #17171b; --card-2: #1e1e24; --linie: #2a2a31; --linie-2: #37373f;
  --text: #f4f4f6; --text-2: #b4b4bd; --text-3: #7d7d88;
  --rosu: #d8232a; --rosu-2: #b91c22; --rosu-lum: #ff3b43; --auriu: #d9b24a; --verde: #35c26b; --galben: #f0b429;
  --raza: 1.4vmin; --raza-m: 2vmin;
  --u: 1vmin;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--negru); color: var(--text); font-family: var(--font); font-size: calc(1.55 * var(--u)); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; }
.ascuns { display: none !important; }

/* ===== marca (logo text pana vine logoul lor) ===== */
.marca { display: inline-flex; align-items: center; gap: 1.2vmin; text-decoration: none; color: var(--text); }
.marca img { height: 5.4vmin; width: auto; }
.marca-sigla { width: 5.4vmin; height: 5.4vmin; border-radius: 1vmin; background: var(--rosu); display: grid; place-items: center; font-weight: 800; font-size: 2.6vmin; letter-spacing: -.04em; color: #fff; transform: skewX(-8deg); }
.marca-sigla span { transform: skewX(8deg); }
.marca-text { line-height: 1; }
.marca-text b { display: block; font-weight: 800; font-size: 3vmin; letter-spacing: .02em; }
.marca-text small { display: block; font-size: 1.25vmin; letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); margin-top: .5vmin; }

/* ===== ecrane ===== */
.ecran { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .32s ease; }
.ecran.activ { opacity: 1; pointer-events: auto; }

/* ---------- ecranul de asteptare ---------- */
#e-start { background: radial-gradient(120vmin 80vmin at 80% 20%, rgba(216,35,42,.22), transparent 60%), radial-gradient(90vmin 90vmin at 10% 100%, rgba(216,35,42,.12), transparent 60%), linear-gradient(180deg, #121216 0%, #0b0b0d 70%); cursor: pointer; }
#e-start::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(135deg, transparent 0 18vmin, rgba(255,255,255,.015) 18vmin 18.3vmin); pointer-events: none; }
.start-sus { display: flex; justify-content: space-between; align-items: center; padding: 4vmin 5vmin 0; }
.start-tel { display: flex; align-items: center; gap: 1.2vmin; color: var(--text-2); font-size: 2vmin; font-weight: 500; }
.start-tel .ic { width: 2.4vmin; height: 2.4vmin; }
.start-mijloc { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 7vmin; max-width: 120vmin; }
.start-titlu { font-size: 7.6vmin; line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0 0 2.6vmin; }
.start-titlu em { font-style: normal; color: var(--rosu-lum); }
.start-text { font-size: 2.6vmin; color: var(--text-2); max-width: 70vmin; line-height: 1.4; margin: 0 0 4vmin; }
.start-puncte { display: grid; grid-template-columns: repeat(2, auto); gap: 1.6vmin 4vmin; margin: 0 0 5vmin; padding: 0; list-style: none; width: fit-content; }
.start-puncte li { display: flex; align-items: center; gap: 1.4vmin; font-size: 2.1vmin; font-weight: 500; color: var(--text); }
.start-puncte .bifa { width: 3vmin; height: 3vmin; border-radius: 50%; background: var(--rosu); display: grid; place-items: center; flex: none; }
.start-puncte .bifa .ic { width: 1.8vmin; height: 1.8vmin; stroke-width: 3; }
.start-cta { display: inline-flex; align-items: center; gap: 2vmin; background: var(--rosu); color: #fff; font-weight: 700; font-size: 2.8vmin; padding: 2.6vmin 4.4vmin; border-radius: 100vmin; box-shadow: 0 0 0 0 rgba(216,35,42,.6); animation: puls 2.2s infinite; width: fit-content; }
.start-cta .ic { width: 3vmin; height: 3vmin; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(216,35,42,.55); } 70% { box-shadow: 0 0 0 2.4vmin rgba(216,35,42,0); } 100% { box-shadow: 0 0 0 0 rgba(216,35,42,0); } }
.start-jos { padding: 2vmin 5vmin 4vmin; display: flex; gap: 2vmin; flex: none; overflow: visible; }
.promo { flex: 1 1 0; min-width: 0; background: rgba(255,255,255,.04); border: 1px solid var(--linie); border-radius: var(--raza-m); padding: 2.4vmin 2.8vmin; display: flex; gap: 2vmin; align-items: center; backdrop-filter: blur(6px); }
.promo img { width: 12vmin; height: 8vmin; object-fit: cover; border-radius: 1vmin; flex: none; }
.promo b { display: block; font-size: 2.1vmin; margin-bottom: .6vmin; }
.promo span { font-size: 1.6vmin; color: var(--text-2); line-height: 1.35; }
.start-servicii { position: absolute; right: 5vmin; top: 50%; transform: translateY(-50%); display: grid; gap: 1.6vmin; }
.start-servicii div { display: flex; align-items: center; gap: 1.6vmin; font-size: 1.9vmin; font-weight: 600; }
.start-servicii .cerc { width: 5.2vmin; height: 5.2vmin; border-radius: 50%; border: 1px solid var(--linie-2); background: rgba(255,255,255,.03); display: grid; place-items: center; }
.start-servicii .cerc .ic { width: 2.8vmin; height: 2.8vmin; }
.start-servicii small { display: block; font-weight: 400; color: var(--text-3); font-size: 1.4vmin; margin-top: .3vmin; }
@media (orientation: portrait) {
  /* pe ecran vertical: textul sus, butonul cu aer in jurul lui, lista de servicii si promotiile sub el, fara sa se lipeasca */
  .start-mijloc { max-width: none; flex: 0 0 auto; padding-top: 6vmin; }
  .start-cta { margin: 2vmin 0 0; }
  .start-servicii { position: static; transform: none; grid-template-columns: 1fr 1fr; gap: 2vmin 3vmin; padding: 0 7vmin; margin: 8vmin 0 6vmin; }
  .start-titlu { font-size: 8.4vmin; }
  .start-jos { margin-top: auto; }
}

/* ---------- fluxul ---------- */
#e-flux { background: var(--fond); }
.antet { display: flex; align-items: center; gap: 3vmin; padding: 2.2vmin 3.4vmin; border-bottom: 1px solid var(--linie); background: var(--negru); flex: none; }
.antet .marca img, .antet .marca-sigla { height: 4.6vmin; width: 4.6vmin; }
.antet .marca-text b { font-size: 2.4vmin; } .antet .marca-text small { font-size: 1.05vmin; }
.pasi { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; }
.pas { display: flex; align-items: center; gap: 1.1vmin; color: var(--text-3); font-size: 1.6vmin; font-weight: 600; white-space: nowrap; }
.pas .nr { width: 3.6vmin; height: 3.6vmin; border-radius: 50%; border: 2px solid var(--linie-2); display: grid; place-items: center; font-size: 1.6vmin; font-weight: 700; color: var(--text-2); transition: all .25s; }
.pas .nr .ic { width: 2vmin; height: 2vmin; stroke-width: 3; }
.pas.activ { color: var(--text); } .pas.activ .nr { background: var(--rosu); border-color: var(--rosu); color: #fff; box-shadow: 0 0 0 .6vmin rgba(216,35,42,.18); }
.pas.gata .nr { background: var(--text); border-color: var(--text); color: var(--negru); }
.pas-linie { width: 5vmin; height: 2px; background: var(--linie-2); margin: 0 1.4vmin; }
.pas.gata + .pas-linie { background: var(--text-2); }
.antet .renunta { display: flex; align-items: center; gap: 1vmin; color: var(--text-2); font-weight: 600; font-size: 1.7vmin; padding: 1.4vmin 2vmin; border-radius: 100vmin; border: 1px solid var(--linie-2); min-height: 5.4vmin; }
.antet .renunta .ic { width: 2.2vmin; height: 2.2vmin; }
@media (max-aspect-ratio: 1/1) { .pas span.et { display: none; } .pas-linie { width: 3vmin; } }

.corp { flex: 1; display: flex; min-height: 0; }
.continut { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.titlu-zona { padding: 3.2vmin 4vmin 1.6vmin; flex: none; }
.titlu { font-size: 4vmin; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.1; }
.titlu .idx { color: var(--rosu-lum); margin-right: 1vmin; }
.subtitlu { margin: 1vmin 0 0; color: var(--text-2); font-size: 2vmin; }
.derulant { flex: 1; overflow-y: auto; padding: 1vmin 4vmin 4vmin; scrollbar-width: thin; scrollbar-color: var(--linie-2) transparent; }
.derulant::-webkit-scrollbar { width: .8vmin; } .derulant::-webkit-scrollbar-thumb { background: var(--linie-2); border-radius: 1vmin; }

/* panoul comenzii (peisaj) */
.panou { width: 42vmin; flex: none; border-left: 1px solid var(--linie); background: var(--negru); display: flex; flex-direction: column; }
.panou h3 { margin: 0; padding: 3vmin 3vmin 1.6vmin; font-size: 1.5vmin; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.panou-masina { margin: 0 3vmin 2vmin; padding: 1.8vmin 2vmin; border: 1px solid var(--linie); border-radius: var(--raza); display: flex; gap: 1.6vmin; align-items: center; min-height: 8vmin; }
.panou-masina .ic { width: 3.2vmin; height: 3.2vmin; color: var(--text-2); flex: none; }
.panou-masina b { display: block; font-size: 2vmin; } .panou-masina span { color: var(--text-2); font-size: 1.5vmin; }
.panou-linii { flex: 1; overflow-y: auto; padding: 0 3vmin; }
.linie { display: flex; justify-content: space-between; gap: 2vmin; padding: 1.3vmin 0; border-bottom: 1px dashed var(--linie); font-size: 1.7vmin; }
.linie span:last-child { white-space: nowrap; font-weight: 600; }
.linie small { display: block; color: var(--text-3); font-size: 1.3vmin; }
.linie.gol { color: var(--text-3); border: 0; font-style: italic; }
.panou-total { padding: 2.4vmin 3vmin 3vmin; border-top: 1px solid var(--linie); }
.panou-total .et { font-size: 1.4vmin; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.panou-total .suma { font-size: 4.6vmin; font-weight: 800; color: var(--rosu-lum); letter-spacing: -.03em; line-height: 1; margin: .8vmin 0; }
.panou-total p { margin: 0; font-size: 1.35vmin; color: var(--text-3); line-height: 1.35; }
@media (max-aspect-ratio: 1/1) { .panou { display: none; } }

/* bara de jos */
.subsol { flex: none; display: flex; align-items: center; gap: 2vmin; padding: 2vmin 4vmin; border-top: 1px solid var(--linie); background: var(--negru); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.4vmin; min-height: 7.2vmin; padding: 0 3.6vmin; border-radius: 1.6vmin; font-weight: 700; font-size: 2.1vmin; transition: transform .08s, background .2s, opacity .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn .ic { width: 2.4vmin; height: 2.4vmin; }
.btn-rosu { background: var(--rosu); color: #fff; box-shadow: 0 .8vmin 2.4vmin rgba(216,35,42,.28); }
.btn-rosu:active { background: var(--rosu-2); }
.btn-gol { background: var(--card); color: var(--text); border: 1px solid var(--linie-2); }
.btn-alb { background: var(--text); color: var(--negru); }
.btn[disabled] { opacity: .38; pointer-events: none; box-shadow: none; }
.subsol .spatiu { flex: 1; }
.subsol-total { display: none; text-align: right; }
.subsol-total .et { font-size: 1.3vmin; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.subsol-total .suma { font-size: 3vmin; font-weight: 800; color: var(--rosu-lum); line-height: 1.1; }
@media (max-aspect-ratio: 1/1) { .subsol-total { display: block; } .subsol { padding: 2.4vmin 4vmin calc(2.4vmin + env(safe-area-inset-bottom)); } .btn { min-height: 8.4vmin; font-size: 2.4vmin; } }

/* ---------- componente de pas ---------- */
.grila { display: grid; gap: 2vmin; }
.grila-2 { grid-template-columns: repeat(2, 1fr); }
.grila-3 { grid-template-columns: repeat(auto-fill, minmax(30vmin, 1fr)); }
.grila-3.pachete { grid-template-columns: repeat(3, 1fr); }
.grila-4 { grid-template-columns: repeat(4, 1fr); }
.grila-auto { grid-template-columns: repeat(auto-fill, minmax(22vmin, 1fr)); }
@media (max-aspect-ratio: 1/1) { .grila-4 { grid-template-columns: repeat(2, 1fr); } .grila-3.pachete { grid-template-columns: 1fr; } }

.tile { position: relative; background: var(--card); border: 2px solid var(--linie); border-radius: var(--raza-m); padding: 2.4vmin 2.4vmin 2.2vmin; text-align: left; display: flex; flex-direction: column; gap: 1vmin; min-height: 20vmin; transition: border-color .18s, background .18s, transform .08s; color: var(--text); }
.tile:active { transform: scale(.985); }
.tile.ales { border-color: var(--rosu); background: linear-gradient(180deg, rgba(216,35,42,.14), rgba(216,35,42,.05)); box-shadow: 0 0 0 .5vmin rgba(216,35,42,.14); }
.tile .bifa { position: absolute; top: 1.6vmin; right: 1.6vmin; width: 3.4vmin; height: 3.4vmin; border-radius: 50%; background: var(--rosu); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: all .18s; }
.tile .bifa .ic { width: 2vmin; height: 2vmin; color: #fff; }
.tile.ales .bifa { opacity: 1; transform: scale(1); }
.tile .icon { width: 7vmin; height: 7vmin; border-radius: 1.6vmin; background: rgba(255,255,255,.05); border: 1px solid var(--linie); display: grid; place-items: center; color: var(--text); }
.tile .icon .ic { width: 4.2vmin; height: 4.2vmin; stroke-width: 1.5; }
.tile.ales .icon { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.tile .icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.4vmin; }
.tile.cu-poza { padding-top: 0; overflow: hidden; }
.tile.cu-poza .poza { margin: 0 -2.4vmin 1vmin; height: 14vmin; background: var(--card-2); }
.tile.cu-poza .poza img { width: 100%; height: 100%; object-fit: cover; }
.tile .nume { font-size: 2.2vmin; font-weight: 700; line-height: 1.15; margin-top: auto; }
.tile .sub { font-size: 1.5vmin; color: var(--text-2); line-height: 1.3; }
.tile .pret { font-size: 1.9vmin; font-weight: 700; color: var(--text); margin-top: .4vmin; }
.tile .pret small { color: var(--text-3); font-weight: 500; font-size: 1.4vmin; }
.tile .pret del { color: var(--text-3); margin-right: .8vmin; font-weight: 500; }
.tile .promo-et { position: absolute; top: 1.6vmin; left: 1.6vmin; background: var(--galben); color: #221a00; font-size: 1.2vmin; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .5vmin 1vmin; border-radius: .6vmin; }
.tile .reco-et { display: inline-flex; align-items: center; gap: .6vmin; background: rgba(216,35,42,.18); color: var(--rosu-lum); font-size: 1.25vmin; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .5vmin 1vmin; border-radius: .6vmin; width: fit-content; }

/* vehicule */
.tile.vehicul { align-items: center; text-align: center; min-height: 26vmin; }
.tile.vehicul .silueta { position: relative; width: 100%; height: 15vmin; color: var(--text); display: flex; align-items: flex-end; justify-content: center; margin: .6vmin 0 1.4vmin; padding-bottom: 1vmin; overflow: visible; flex: none; }
/* umbra pe podea, exact sub roti (imaginile sunt taiate la marginea rotilor) */
.tile.vehicul .silueta::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 2vmin; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.65), rgba(0,0,0,0) 70%); }
.tile.vehicul .silueta svg, .tile.vehicul .silueta img { position: relative; display: block; width: 86%; height: auto; max-height: 13.4vmin; object-fit: contain; filter: drop-shadow(0 .5vmin .8vmin rgba(0,0,0,.45)); transition: transform .2s, filter .2s; }
.tile.vehicul.ales .silueta img { filter: brightness(1.06) drop-shadow(0 .8vmin 1.2vmin rgba(216,35,42,.35)); }
.tile.vehicul.ales .silueta img { transform: scale(1.05); }
/* electrica: aceeasi masina, verde, cu fulger */
.tile.vehicul .silueta.ev::after { content: ""; position: absolute; left: 2%; top: 0; width: 4.2vmin; height: 4.2vmin; border-radius: 50%; background: #1e88e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center/58% no-repeat; box-shadow: 0 0 0 .5vmin var(--card), 0 .6vmin 1.2vmin rgba(0,0,0,.4); z-index: 2; }
.tile.vehicul.ales .silueta { color: var(--rosu-lum); }
.tile.vehicul .nume { margin-top: 0; }

/* jante */
.tile.janta { min-height: 11vmin; align-items: center; justify-content: center; }
.tile.janta .nume { font-size: 3.4vmin; margin: 0; font-weight: 800; }
.tile.janta .nume sup { font-size: 1.6vmin; color: var(--text-2); font-weight: 500; }
.rand-ajutor { margin-top: 2.4vmin; display: flex; align-items: center; gap: 1.6vmin; padding: 2vmin 2.4vmin; border: 1px dashed var(--linie-2); border-radius: var(--raza); color: var(--text-2); font-size: 1.7vmin; width: 100%; text-align: left; min-height: 7vmin; }
.rand-ajutor .ic { width: 2.6vmin; height: 2.6vmin; flex: none; }
.rand-ajutor b { color: var(--text); }
.rand-ajutor.ales { border-style: solid; border-color: var(--rosu); color: var(--text); }

/* pachete */
.pachet { position: relative; background: var(--card); border: 2px solid var(--linie); border-radius: var(--raza-m); padding: 3vmin 2.8vmin 2.8vmin; display: flex; flex-direction: column; gap: 1.2vmin; text-align: left; color: var(--text); min-height: 44vmin; transition: all .18s; }
.pachet .et { position: absolute; top: -1.4vmin; left: 50%; transform: translateX(-50%); background: var(--rosu); color: #fff; font-size: 1.25vmin; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: .7vmin 1.6vmin; border-radius: 100vmin; white-space: nowrap; }
.pachet.stil-auriu { border-color: rgba(217,178,74,.45); background: linear-gradient(180deg, rgba(217,178,74,.08), var(--card) 40%); }
.pachet.stil-auriu .et { background: linear-gradient(90deg, #e3c568, #b8902a); color: #241a00; }
.pachet.stil-accent { border-color: var(--linie-2); }
.pachet.ales { border-color: var(--rosu); box-shadow: 0 0 0 .5vmin rgba(216,35,42,.16); background: linear-gradient(180deg, rgba(216,35,42,.12), var(--card) 45%); }
.pachet.stil-auriu.ales { border-color: var(--auriu); box-shadow: 0 0 0 .5vmin rgba(217,178,74,.18); }
.pachet .nume { font-size: 2.8vmin; font-weight: 800; letter-spacing: -.02em; }
.pachet .subt { color: var(--text-2); font-size: 1.6vmin; margin-top: -.6vmin; }
.pachet ul { list-style: none; padding: 0; margin: 1.4vmin 0; display: grid; gap: 1vmin; flex: 1; }
.pachet li { display: flex; gap: 1.2vmin; align-items: flex-start; font-size: 1.65vmin; color: var(--text-2); line-height: 1.3; }
.pachet li .ic { width: 2vmin; height: 2vmin; color: var(--rosu-lum); flex: none; stroke-width: 3; margin-top: .25vmin; }
.pachet.stil-auriu li .ic { color: var(--auriu); }
.pachet .pret-zona { border-top: 1px solid var(--linie); padding-top: 1.8vmin; display: flex; align-items: flex-end; justify-content: space-between; gap: 1vmin; }
.pachet .pret-zona small { color: var(--text-3); font-size: 1.3vmin; display: block; }
.pachet .pret-zona b { font-size: 3.4vmin; font-weight: 800; letter-spacing: -.03em; }
.pachet .pret-zona b i { font-style: normal; font-size: 1.6vmin; color: var(--text-2); font-weight: 600; margin-left: .4vmin; }
.pachet .alege { padding: 1.4vmin 2.6vmin; border-radius: 1vmin; background: var(--card-2); border: 1px solid var(--linie-2); font-weight: 700; font-size: 1.6vmin; }
.pachet.ales .alege { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.pachet.stil-auriu.ales .alege { background: var(--auriu); border-color: var(--auriu); color: #241a00; }

/* liste cu bife (suplimentare, simptome) */
.lista-bife { display: grid; gap: 1.4vmin; grid-template-columns: repeat(2, 1fr); }
@media (max-aspect-ratio: 1/1) { .lista-bife { grid-template-columns: 1fr; } }
.rb { display: flex; align-items: center; gap: 2vmin; background: var(--card); border: 2px solid var(--linie); border-radius: var(--raza); padding: 1.6vmin 2vmin; min-height: 9vmin; text-align: left; color: var(--text); transition: all .18s; }
.rb .cutie { width: 3.8vmin; height: 3.8vmin; border-radius: 1vmin; border: 2px solid var(--linie-2); display: grid; place-items: center; flex: none; transition: all .18s; }
.rb .cutie .ic { width: 2.4vmin; height: 2.4vmin; color: #fff; opacity: 0; }
.rb.ales { border-color: var(--rosu); background: rgba(216,35,42,.08); }
.rb.ales .cutie { background: var(--rosu); border-color: var(--rosu); } .rb.ales .cutie .ic { opacity: 1; }
.rb .icon { width: 5.4vmin; height: 5.4vmin; border-radius: 1.2vmin; background: rgba(255,255,255,.05); border: 1px solid var(--linie); display: grid; place-items: center; flex: none; }
.rb .icon .ic { width: 3.2vmin; height: 3.2vmin; stroke-width: 1.5; }
.rb .icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 1vmin; }
.rb .text { flex: 1; min-width: 0; }
.rb .text b { display: block; font-size: 1.95vmin; font-weight: 700; }
.rb .text span { display: block; font-size: 1.45vmin; color: var(--text-2); margin-top: .3vmin; }
.rb .pret { font-size: 1.9vmin; font-weight: 700; white-space: nowrap; }
.rb .pret del { color: var(--text-3); font-weight: 500; margin-right: .6vmin; }
.rb.inclus { opacity: .55; pointer-events: none; }
.rb .et-mic { display: inline-block; margin-top: .5vmin; font-size: 1.15vmin; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--rosu-lum); background: rgba(216,35,42,.16); padding: .35vmin .8vmin; border-radius: .5vmin; }
.rb .et-mic.ok { color: var(--verde); background: rgba(53,194,107,.14); }

/* recomandari */
.reco { margin-top: 2.6vmin; border: 1px solid rgba(216,35,42,.5); background: linear-gradient(90deg, rgba(216,35,42,.16), rgba(216,35,42,.04)); border-radius: var(--raza-m); padding: 2.2vmin 2.4vmin; }
.reco-cap { display: flex; align-items: center; gap: 1.2vmin; font-weight: 800; font-size: 1.7vmin; letter-spacing: .06em; text-transform: uppercase; color: var(--rosu-lum); margin-bottom: 1.2vmin; }
.reco-cap .ic { width: 2.4vmin; height: 2.4vmin; }
.reco-rand { display: flex; align-items: center; gap: 2vmin; padding: 1.2vmin 0; border-top: 1px dashed rgba(255,255,255,.1); }
.reco-rand:first-of-type { border-top: 0; }
.reco-rand .t { flex: 1; } .reco-rand .t b { display: block; font-size: 1.9vmin; } .reco-rand .t span { font-size: 1.5vmin; color: var(--text-2); line-height: 1.3; display: block; margin-top: .3vmin; }
.reco-rand .btn { min-height: 5.6vmin; padding: 0 2.4vmin; font-size: 1.6vmin; border-radius: 1vmin; }
.reco-rand .btn.adaugat { background: var(--verde); color: #04210f; box-shadow: none; }

/* numar de inmatriculare */
.placa-zona { display: grid; grid-template-columns: 1fr; gap: 1.8vmin; max-width: 100vmin; }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--linie); border-radius: 100vmin; padding: .5vmin; gap: .4vmin; }
.seg button { padding: 1.2vmin 2.4vmin; border-radius: 100vmin; font-weight: 600; font-size: 1.6vmin; color: var(--text-2); min-height: 4.8vmin; }
.seg button.activ { background: var(--text); color: var(--negru); }
.placa { display: flex; align-items: stretch; height: 10vmin; border-radius: 1.4vmin; overflow: hidden; background: #f6f6f8; border: .4vmin solid #1b1b1f; box-shadow: 0 0 0 .3vmin #d9d9df inset; width: fit-content; min-width: 52vmin; }
.placa .ro { width: 6.6vmin; background: #0a3fa6; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 1vmin; font-weight: 800; font-size: 1.7vmin; gap: 1.4vmin; }
.placa .ro .stele { width: 3.2vmin; height: 3.2vmin; border-radius: 50%; border: .25vmin dotted #ffd400; }
.placa .nr { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 6.4vmin; font-weight: 800; letter-spacing: .08em; color: #111; padding: 0 2.4vmin; font-family: "Inter", "Arial Narrow", sans-serif; min-width: 40vmin; }
.placa .nr .cursor { width: .35vmin; height: 6vmin; background: var(--rosu); margin-left: .6vmin; animation: clip 1s steps(2) infinite; }
.placa .nr .gol { color: #b6b6bd; letter-spacing: .04em; font-size: 4.2vmin; font-weight: 600; }
@keyframes clip { 50% { opacity: 0; } }
.camp-mare { display: flex; align-items: center; height: 9vmin; background: var(--card); border: 2px solid var(--linie-2); border-radius: var(--raza); padding: 0 2.4vmin; font-size: 3vmin; font-weight: 700; letter-spacing: .04em; min-width: 52vmin; width: fit-content; }
.camp-mare .gol { color: var(--text-3); font-weight: 500; font-size: 2.2vmin; letter-spacing: 0; }
.camp-mare .cursor { width: .3vmin; height: 4.4vmin; background: var(--rosu); margin-left: .4vmin; animation: clip 1s steps(2) infinite; }
.camp-mare.focus { border-color: var(--rosu); }

.vehicul-gasit { display: flex; align-items: center; gap: 2vmin; background: var(--card); border: 1px solid var(--linie-2); border-radius: var(--raza-m); padding: 2vmin 2.4vmin; max-width: 80vmin; }
.vehicul-gasit .ic { width: 4vmin; height: 4vmin; color: var(--verde); flex: none; }
.vehicul-gasit b { display: block; font-size: 2.1vmin; } .vehicul-gasit span { color: var(--text-2); font-size: 1.6vmin; }

/* tastatura pe ecran */
.tastatura { display: grid; gap: .9vmin; margin-top: 2vmin; max-width: 120vmin; }
.tastatura .rand { display: flex; gap: 1vmin; justify-content: center; }
.tasta { flex: 1 1 0; max-width: 9.4vmin; min-width: 0; height: 6.6vmin; border-radius: 1.2vmin; background: var(--card-2); border: 1px solid var(--linie-2); font-size: 2.6vmin; font-weight: 600; color: var(--text); transition: background .08s, transform .06s; }
.tasta:active { background: var(--linie-2); transform: translateY(.2vmin); }
.tasta.lata { max-width: 16vmin; flex-basis: 16vmin; font-size: 1.8vmin; }
.tasta.spatiu { max-width: 40vmin; flex-basis: 40vmin; }
.tasta.rosie { background: rgba(216,35,42,.18); border-color: rgba(216,35,42,.5); color: var(--rosu-lum); }
.tasta .ic { width: 3vmin; height: 3vmin; margin: auto; }
.tastatura.numerica { grid-template-columns: repeat(3, 1fr); max-width: 46vmin; }
.tastatura.numerica .tasta { max-width: none; height: 8.6vmin; font-size: 3.2vmin; }

/* contact */
.contact-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 3vmin; align-items: start; }
@media (max-aspect-ratio: 1/1) { .contact-grila { grid-template-columns: 1fr; } }
.eticheta { font-size: 1.5vmin; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin: 0 0 1vmin; }
.optiuni-notif { display: flex; gap: 1.4vmin; margin-top: 1vmin; }
.optiuni-notif .rb { min-height: 7.4vmin; flex: 1; }
.optiuni-notif .rb .ic.mare { width: 3vmin; height: 3vmin; }

/* rezumat */
.rezumat { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.6vmin; align-items: start; }
@media (max-aspect-ratio: 1/1) { .rezumat { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--linie); border-radius: var(--raza-m); padding: 2.6vmin; }
.card h4 { margin: 0 0 1.6vmin; font-size: 1.5vmin; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.card h4 button { color: var(--rosu-lum); font-weight: 700; font-size: 1.5vmin; letter-spacing: 0; text-transform: none; padding: .6vmin 1vmin; }
.rez-masina { display: flex; align-items: center; gap: 2vmin; }
.rez-masina .placa-mica { background: #f6f6f8; color: #111; border: .3vmin solid #1b1b1f; border-radius: .8vmin; padding: .6vmin 1.4vmin; font-weight: 800; font-size: 2.6vmin; letter-spacing: .06em; display: inline-flex; }
.rez-masina .placa-mica i { width: 1.6vmin; background: #0a3fa6; margin: -.6vmin 1vmin -.6vmin -1.4vmin; border-radius: .4vmin 0 0 .4vmin; }
.rez-masina b { font-size: 2vmin; display: block; } .rez-masina span { color: var(--text-2); font-size: 1.5vmin; }
.rez-linii .linie { font-size: 1.85vmin; padding: 1.5vmin 0; }
.rez-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 2vmin; margin-top: .4vmin; border-top: 2px solid var(--linie-2); }
.rez-total b { font-size: 4.2vmin; color: var(--rosu-lum); font-weight: 800; letter-spacing: -.03em; }
.rez-total span { font-size: 1.5vmin; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.rez-nota { display: flex; gap: 1.2vmin; align-items: flex-start; color: var(--text-2); font-size: 1.45vmin; line-height: 1.4; margin-top: 1.6vmin; }
.rez-nota .ic { width: 2.2vmin; height: 2.2vmin; flex: none; color: var(--galben); }
.pastile { display: flex; flex-wrap: wrap; gap: .8vmin; }
.pastile span { background: var(--card-2); border: 1px solid var(--linie-2); border-radius: 100vmin; padding: .7vmin 1.4vmin; font-size: 1.45vmin; color: var(--text-2); }

/* programare */
.alege-mod { display: grid; grid-template-columns: 1fr 1fr; gap: 2vmin; max-width: 90vmin; margin-bottom: 3vmin; }
.alege-mod .tile { min-height: 14vmin; flex-direction: row; align-items: center; gap: 2vmin; }
.alege-mod .tile .nume { margin: 0; }
.zile { display: flex; gap: 1.2vmin; overflow-x: auto; padding-bottom: 1vmin; scrollbar-width: none; }
.zile::-webkit-scrollbar { display: none; }
.zi { flex: none; width: 12vmin; height: 12vmin; border-radius: var(--raza); background: var(--card); border: 2px solid var(--linie); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4vmin; color: var(--text); }
.zi small { font-size: 1.3vmin; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 700; }
.zi b { font-size: 3vmin; font-weight: 800; line-height: 1; }
.zi span { font-size: 1.3vmin; color: var(--text-2); }
.zi.ales { border-color: var(--rosu); background: rgba(216,35,42,.1); }
.zi.ales small, .zi.ales span { color: var(--rosu-lum); }
.zi[disabled] { opacity: .3; }
.ore { display: grid; grid-template-columns: repeat(auto-fill, minmax(13vmin, 1fr)); gap: 1.2vmin; margin-top: 2.4vmin; }
.ora { height: 7.4vmin; border-radius: 1.2vmin; background: var(--card); border: 2px solid var(--linie); font-size: 2.2vmin; font-weight: 700; color: var(--text); }
.ora.ales { border-color: var(--rosu); background: var(--rosu); color: #fff; }
.ora[disabled] { opacity: .28; text-decoration: line-through; }
.gol-mesaj { color: var(--text-3); padding: 3vmin 0; font-size: 1.8vmin; }

/* ---------- final ---------- */
#e-final { background: radial-gradient(100vmin 70vmin at 50% 30%, rgba(216,35,42,.2), transparent 65%), var(--negru); align-items: center; justify-content: center; text-align: center; padding: 6vmin; }
.final-bifa { width: 12vmin; height: 12vmin; border-radius: 50%; background: var(--verde); display: grid; place-items: center; margin: 0 auto 3vmin; animation: aparitie .5s cubic-bezier(.2,1.4,.4,1); }
.final-bifa .ic { width: 7vmin; height: 7vmin; color: #04210f; stroke-width: 3; }
@keyframes aparitie { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.final-et { font-size: 1.8vmin; letter-spacing: .3em; text-transform: uppercase; color: var(--text-2); font-weight: 700; }
.final-nr { font-size: 20vmin; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 1vmin 0 3vmin; color: var(--text); }
.final-nr i { font-style: normal; color: var(--rosu-lum); }
.final-titlu { font-size: 4vmin; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.4vmin; }
.final-text { font-size: 2.2vmin; color: var(--text-2); max-width: 80vmin; margin: 0 auto 4vmin; line-height: 1.4; }
.final-tichet { display: inline-flex; align-items: center; gap: 1.4vmin; color: var(--text-2); font-size: 1.8vmin; padding: 1.4vmin 2.4vmin; border: 1px solid var(--linie-2); border-radius: 100vmin; }
.final-tichet .ic { width: 2.6vmin; height: 2.6vmin; }
.final-cont { margin-top: 5vmin; color: var(--text-3); font-size: 1.6vmin; }
.final-cont b { color: var(--text); }

/* ---------- suprapuneri ---------- */
.val { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(5,5,7,.78); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 50; padding: 6vmin; }
.val.activ { display: flex; }
.dialog { background: var(--card); border: 1px solid var(--linie-2); border-radius: 2.6vmin; padding: 4.4vmin; width: min(80vmin, 100%); text-align: center; box-shadow: 0 4vmin 10vmin rgba(0,0,0,.6); }
.dialog h2 { font-size: 3.4vmin; margin: 0 0 1.4vmin; letter-spacing: -.02em; }
.dialog p { color: var(--text-2); font-size: 2vmin; margin: 0 0 3.4vmin; line-height: 1.4; }
.dialog .butoane { display: flex; gap: 1.6vmin; justify-content: center; }
.dialog .butoane .btn { flex: 1; }
.inel { width: 10vmin; height: 10vmin; margin: 0 auto 2.4vmin; border-radius: 50%; display: grid; place-items: center; font-size: 3.4vmin; font-weight: 800; background: conic-gradient(var(--rosu) var(--p, 100%), var(--linie) 0); }
.inel span { width: 8.4vmin; height: 8.4vmin; border-radius: 50%; background: var(--card); display: grid; place-items: center; }

.toast { position: absolute; left: 50%; bottom: 14vmin; transform: translate(-50%, 3vmin); background: var(--text); color: var(--negru); padding: 1.8vmin 3vmin; border-radius: 100vmin; font-weight: 700; font-size: 1.9vmin; opacity: 0; transition: all .25s; z-index: 60; pointer-events: none; box-shadow: 0 1.6vmin 4vmin rgba(0,0,0,.5); max-width: 90vmin; text-align: center; }
.toast.activ { opacity: 1; transform: translate(-50%, 0); }
.toast.eroare { background: var(--rosu); color: #fff; }

/* activare */
#e-activare { align-items: center; justify-content: center; background: var(--negru); }
#e-activare .dialog { width: min(70vmin, 100%); }
.cod { display: flex; gap: 1.2vmin; justify-content: center; margin: 1vmin 0 3vmin; }
.cod span { width: 7vmin; height: 9vmin; border-radius: 1.2vmin; background: var(--negru); border: 2px solid var(--linie-2); display: grid; place-items: center; font-size: 4vmin; font-weight: 800; }
.cod span.plin { border-color: var(--rosu); }
.stare-retea { position: absolute; top: 1.4vmin; left: 50%; transform: translateX(-50%); background: var(--galben); color: #221a00; font-weight: 700; font-size: 1.5vmin; padding: .8vmin 2vmin; border-radius: 100vmin; z-index: 70; display: none; }
.stare-retea.activ { display: block; }
.incarcare { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; background: var(--negru); z-index: 80; color: var(--text-2); font-size: 2vmin; }
.incarcare.ascunsa { display: none; }
.spinner { width: 5vmin; height: 5vmin; border: .5vmin solid var(--linie-2); border-top-color: var(--rosu); border-radius: 50%; animation: rot .8s linear infinite; margin: 0 auto 2vmin; }
@keyframes rot { to { transform: rotate(360deg); } }

/* portret: antet compact (doar sigla, pasi mai mici), pachete stivuite fara inaltime fortata */
@media (max-aspect-ratio: 1/1) {
  .antet { gap: 2vmin; padding: 2vmin 2.6vmin; }
  .antet .marca-text { display: none; }
  .pasi { overflow: hidden; flex-wrap: nowrap; }
  .pas .nr { width: 3.3vmin; height: 3.3vmin; font-size: 1.45vmin; }
  .pas-linie { width: 1.6vmin; margin: 0 .5vmin; }
  .pachet { min-height: 0; }
  .pachet ul { flex: none; }
}

/* programare gasita la kiosk: confirmarea sosirii */
.programare-azi { margin-top: 1.6vmin; display: flex; align-items: center; gap: 2vmin; background: linear-gradient(90deg, rgba(216,35,42,.18), rgba(216,35,42,.06)); border: 1px solid rgba(216,35,42,.55); border-radius: var(--raza-m); padding: 2vmin 2.4vmin; max-width: 80vmin; }
.programare-azi .pa-text { display: flex; align-items: center; gap: 1.6vmin; flex: 1; min-width: 0; }
.programare-azi .pa-text > .ic { width: 4vmin; height: 4vmin; color: var(--rosu-lum); flex: none; }
.programare-azi b { display: block; font-size: 2.1vmin; } .programare-azi span { color: var(--text-2); font-size: 1.5vmin; }
.programare-azi .btn { flex: none; }

.marca img.marca-rotund { height: 6vmin; width: 6vmin; border-radius: 50%; }
.marca img.marca-wordmark { height: 4vmin; width: auto; }
.antet .marca img.marca-rotund { height: 4.6vmin; width: 4.6vmin; } .antet .marca img.marca-wordmark { height: 3vmin; }

.marca img.marca-wordmark { height: 5.2vmin; } .antet .marca img.marca-wordmark { height: 3.6vmin; }
.marca img.marca-wordmark { height: 7vmin; }
.antet .marca img.marca-wordmark { height: 4.2vmin; }

/* pasul „Câte roți?" */
.grila.roti { gap: 2.4vmin; }
.tile.roata { align-items: center; text-align: center; padding-top: 3.2vmin; min-height: 26vmin; }
.tile.roata .numar-mare { font-size: 9vmin; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--text); margin-bottom: 1.2vmin; }
.tile.roata.ales .numar-mare { color: var(--rosu-lum); }
.tile.roata .nume { margin-top: 0; }
.tile.roata .pret { margin-top: 1.2vmin; }
.rez-total span small { display: block; letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 1.35vmin; margin-top: .4vmin; }
.rb .pret small { display: block; font-size: 1.3vmin; color: var(--text-3); font-weight: 500; }

/* multe etape (10+): bara de pasi se strange ca sa nu atinga butonul Renunta */
.pasi.multe .pas { font-size: 1.45vmin; gap: .8vmin; }
.pasi.multe .pas-linie { width: 2.2vmin; margin: 0 .7vmin; }
.pasi.multe .pas .nr { width: 3.2vmin; height: 3.2vmin; font-size: 1.4vmin; }

/* tastatura sta mereu jos de tot, in aceeasi pozitie, indiferent de cat continut e deasupra */
#pas { display: flex; flex-direction: column; }
#pas > * { flex: none; }
#pas > .tastatura { margin-top: auto; }
.contact-grila { display: flex; flex-direction: column; flex: 1 1 auto; gap: 2.4vmin; align-items: stretch; }
.contact-grila > div:first-child { max-width: 100vmin; }
.contact-grila > #tastatura-contact { margin-top: auto; }
#tastatura-contact .tastatura { margin-top: 0; }
/* bara de pasi nu iese niciodata peste logo sau peste Renunta (iPad orizontal): sub 1366px raman doar numerele, cu eticheta doar la pasul activ */
.pasi { overflow: hidden; min-width: 0; }
@media (max-width: 1366px) { .pas span.et { display: none; } .pas.activ span.et { display: inline; } .pas-linie { width: 2.2vmin; margin: 0 .6vmin; } }
/* contact: pe orizontal campurile in stanga si tastatura numerica jos in dreapta; pe vertical totul in coloana, tastatura jos */
#pas > .contact-grila { flex: 1 1 auto; }
@media (min-aspect-ratio: 1/1) {
  .contact-grila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4vmin; align-items: stretch; }
  .contact-grila > div:first-child { max-width: 90vmin; }
  .contact-grila > #tastatura-contact { align-self: end; margin-top: 0; }
}

/* tastatura numerica centrata; pe orizontal la contact sta centrata in coloana din dreapta */
.tastatura.numerica { margin-left: auto; margin-right: auto; width: 100%; }
#tastatura-contact { width: 100%; }
@media (min-aspect-ratio: 1/1) { .contact-grila > #tastatura-contact { width: auto; min-width: 46vmin; justify-self: center; } }
.reco-rand .et-mic.ok { display: inline-flex; align-items: center; gap: .6vmin; white-space: nowrap; }
.reco-rand .et-mic.ok .ic { width: 1.8vmin; height: 1.8vmin; }

/* contact pe orizontal: coloana tastaturii are latime fixa, campurile nu mai sunt calcate */
@media (min-aspect-ratio: 1/1) { .contact-grila { grid-template-columns: minmax(0, 1fr) 46vmin; } .contact-grila > #tastatura-contact { width: 100%; min-width: 0; justify-self: stretch; } }
#reco-zona .reco { margin: 0 0 2.4vmin; }
/* ecran orizontal ingust (iPad): lista de servicii din dreapta nu intra peste text */
@media (min-aspect-ratio: 1/1) and (max-width: 1366px) { .start-mijloc { max-width: 58vw; } .start-servicii { right: 4vmin; max-width: 36vw; } .start-servicii small { display: none; } .start-servicii div { font-size: 1.8vmin; } }
/* campurile mari nu depasesc niciodata coloana lor (iPad orizontal) */
.contact-grila .camp-mare { min-width: 0; width: 100%; max-width: 100%; }
@media (min-aspect-ratio: 1/1) { .contact-grila { grid-template-columns: minmax(0, 1fr) min(46vmin, 44%); column-gap: 3vmin; } .contact-grila > div:first-child { min-width: 0; max-width: none; } }

/* iPad pe tot ecranul: bara de stare (ora, semnal, baterie) nu se mai suprapune peste antet; la fel zona de jos */
.ecran { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.stare-retea { top: calc(1.4vmin + env(safe-area-inset-top, 0px)); }
/* lista de servicii de pe prima pagina: titlul pe un rand, descrierea dedesubt, aliniate pe o grila */
.start-servicii > div { display: grid; grid-template-columns: 5.2vmin 1fr; column-gap: 1.8vmin; align-items: center; font-size: 1.9vmin; font-weight: 600; padding: 1vmin 0; }
.start-servicii > div > div { display: block; min-width: 0; line-height: 1.2; }
.start-servicii > div > div small { display: block; font-weight: 400; color: var(--text-3); font-size: 1.45vmin; margin-top: .45vmin; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-servicii > div + div { border-top: 1px solid rgba(255,255,255,.05); }
.start-servicii { gap: 0; max-width: 44vmin; }
@media (orientation: portrait) { .start-servicii { max-width: none; grid-template-columns: 1fr 1fr; column-gap: 4vmin; } .start-servicii > div + div { border-top: 0; } .start-servicii > div { border-top: 1px solid rgba(255,255,255,.05); } }

/* telefon cu prefixul tarii */
.tari { display: flex; flex-wrap: wrap; gap: 1vmin; margin: 0 0 1.4vmin; }
.tara { display: inline-flex; align-items: center; gap: .9vmin; min-height: 5.2vmin; padding: 0 1.8vmin; border-radius: 100vmin; border: 1px solid var(--linie-2); background: var(--card); color: var(--text); font-size: 1.7vmin; font-weight: 600; white-space: nowrap; }
.tara b { color: var(--text-3); font-weight: 500; }
.tara.ales { border-color: var(--rosu); background: rgba(216,35,42,.14); }
.tara.ales b { color: var(--rosu-lum); }
.tara .ic { width: 2vmin; height: 2vmin; }
.tari-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(24vmin, 1fr)); gap: 1vmin; max-height: 34vmin; overflow-y: auto; padding: 1.4vmin; margin: 0 0 1.4vmin; border: 1px solid var(--linie); border-radius: var(--raza); background: rgba(255,255,255,.02); }
.tari-lista .tara { justify-content: space-between; border-radius: 1.2vmin; }
.tel-rand { display: flex; gap: 1vmin; align-items: stretch; }
.tel-rand .prefix { flex: none; display: flex; align-items: center; padding: 0 2.2vmin; height: 9vmin; border: 2px solid var(--linie-2); border-radius: var(--raza); background: var(--card-2); color: var(--text); font-size: 2.6vmin; font-weight: 700; letter-spacing: .02em; }
.tel-rand .camp-mare { flex: 1; min-width: 0; }
.tel-ajutor { margin: 1vmin 0 0; font-size: 1.55vmin; color: var(--text-3); min-height: 2vmin; }
.tel-ajutor.rau { color: var(--rosu-lum); }
.tel-ajutor.bun { color: #4ade80; }

/* steaguri (sprite intl-tel-input, 244 steaguri de 32x24) scalate cu ecranul */
.steag { --o: 0; display: inline-block; flex: none; width: 3.6vmin; height: 2.7vmin; border-radius: .4vmin; background: url(../img/steaguri@2x.png) no-repeat; background-size: calc(244 * 3.6vmin) 2.7vmin; background-position: calc(var(--o) * -3.6vmin) 0; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.tel-rand .prefix { gap: 1.2vmin; }
.tel-rand .prefix .ic { width: 2.2vmin; height: 2.2vmin; color: var(--text-3); }
.tel-rand .prefix:active { background: var(--linie-2); }
/* fereastra cu tarile, peste ecran */
#val-tari { z-index: 60; }
.tari-dialog { width: min(96vw, 130vmin); max-height: 84vh; display: flex; flex-direction: column; background: var(--negru); border: 1px solid var(--linie-2); border-radius: var(--raza-m); padding: 3vmin 3.4vmin; box-shadow: 0 3vmin 8vmin rgba(0,0,0,.6); }
.tari-cap { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; margin-bottom: 2vmin; }
.tari-cap h3 { margin: 0; font-size: 3vmin; font-weight: 800; letter-spacing: -.02em; }
.tari-dialog .eticheta { margin: 1.6vmin 0 1vmin; }
.tari-rapide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2vmin; }
.tari-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(26vmin, 1fr)); gap: 1vmin; overflow-y: auto; min-height: 0; padding: .4vmin; margin: 0; border: 0; background: none; }
.tari-rapide .tara, .tari-lista .tara { min-height: 7vmin; border-radius: 1.4vmin; justify-content: flex-start; gap: 1.4vmin; padding: 0 1.6vmin; font-size: 1.9vmin; }
.tara .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
@media (max-aspect-ratio: 1/1) { .tari-rapide { grid-template-columns: repeat(2, 1fr); } .tari-lista { grid-template-columns: repeat(2, 1fr); } }
/* ultima linie din rezumat nu mai are punctata sub ea: totalul are propria linie */
.rez-linii .linie:last-child { border-bottom: 0; }

/* intrebarea pentru serviciul legat (ex. geometria dupa roti) */
.dialog-conex .cx-ic { width: 9vmin; height: 9vmin; margin: 0 auto 2vmin; border-radius: 2vmin; background: var(--card-2); display: grid; place-items: center; color: var(--rosu-lum); }
.dialog-conex .cx-ic .ic, .dialog-conex .cx-ic img { width: 5vmin; height: 5vmin; object-fit: contain; }
.dialog-conex .cx-info { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; padding: 1.8vmin 2.2vmin; margin: 0 0 3vmin; border: 1px solid var(--linie-2); border-radius: 1.6vmin; text-align: left; }
.dialog-conex .cx-info b { font-size: 2vmin; }
.dialog-conex .cx-info span { color: var(--text-2); font-size: 1.8vmin; white-space: nowrap; }
/* ora serviciului legat, sub orele de la roti */
#legat-zona:empty { display: none; }
.legat { margin-top: 3vmin; padding: 2.4vmin; border: 1px solid var(--linie-2); border-radius: var(--raza-m); background: var(--card); }
.legat-cap { display: flex; gap: 1.8vmin; align-items: flex-start; margin-bottom: 2vmin; }
.legat-ic { width: 6vmin; height: 6vmin; flex: none; border-radius: 1.4vmin; background: var(--card-2); display: grid; place-items: center; color: var(--rosu-lum); }
.legat-ic .ic, .legat-ic img { width: 3.4vmin; height: 3.4vmin; object-fit: contain; }
.legat-cap b { display: block; font-size: 2.2vmin; }
.legat-cap small { display: block; color: var(--text-2); font-size: 1.7vmin; margin-top: .4vmin; line-height: 1.35; }
.legat-optiuni { display: grid; gap: 1.2vmin; }
.legat-opt { display: flex; align-items: center; gap: 1.8vmin; width: 100%; text-align: left; padding: 1.8vmin 2vmin; border-radius: 1.6vmin; border: 1px solid var(--linie-2); background: var(--fond); color: var(--text); cursor: pointer; }
.legat-opt .cutie { width: 3vmin; height: 3vmin; flex: none; border-radius: 50%; border: 2px solid var(--linie-2); display: grid; place-items: center; }
.legat-opt .cutie .ic { width: 1.8vmin; height: 1.8vmin; opacity: 0; }
.legat-opt.ales { border-color: var(--rosu); background: rgba(216,35,42,.08); }
.legat-opt.ales .cutie { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.legat-opt.ales .cutie .ic { opacity: 1; }
.legat-opt .lo-text { flex: 1; min-width: 0; }
.legat-opt .lo-text b { display: block; font-size: 2vmin; }
.legat-opt .lo-text small { display: block; color: var(--text-2); font-size: 1.6vmin; margin-top: .3vmin; }
.legat-opt .lo-ora { font-weight: 800; font-size: 2.2vmin; white-space: nowrap; font-variant-numeric: tabular-nums; }
.legat-ore { margin-top: 1.6vmin; }
.legat-gol { color: var(--text-2); font-size: 1.8vmin; line-height: 1.4; }
.legat-renunta { margin-top: 1.8vmin; }
.rez-prog { display: grid; gap: 1vmin; }
.rez-prog div { display: flex; justify-content: space-between; gap: 2vmin; font-size: 1.9vmin; }
.rez-prog span { color: var(--text-2); }
.rb .et-mic { align-self: flex-start; width: max-content; max-width: 100%; }
/* pasul serviciului legat */
.legat-pas { margin-top: 0; }
.legat-opt .lo-ora { text-align: right; }
.legat-opt .lo-ora small { display: block; font-size: 1.5vmin; font-weight: 600; color: var(--text-2); margin-bottom: .2vmin; text-transform: capitalize; }
.legat-alege { margin-top: 2.4vmin; }
.legat-alege .zile { margin-bottom: 1.6vmin; }

/* comutatorul „Ambele odată / În momente diferite” si orele duble */
.mod-legat { margin-bottom: 2.6vmin; }
.mod-legat .seg { display: inline-flex; }
.mod-legat-text { color: var(--text-2); font-size: 1.7vmin; margin: 1.2vmin 0 0; line-height: 1.4; }
.ora.ora-dubla { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.ora.ora-dubla small { font-size: 1.35vmin; font-weight: 600; color: var(--text-2); margin-top: .3vmin; }
.ora.ora-dubla.ales small { color: rgba(255,255,255,.85); }

/* sugestiile dinaintea calendarului */
.sugestii { display: grid; gap: 1.6vmin; }
.sug-intro { color: var(--text-2); font-size: 1.8vmin; margin: 0 0 .6vmin; line-height: 1.4; }
.sug-card { display: flex; gap: 2vmin; align-items: flex-start; width: 100%; text-align: left; padding: 2.4vmin; border-radius: var(--raza-m); border: 1px solid var(--linie-2); background: var(--card); color: var(--text); cursor: pointer; }
.sug-card .cutie { width: 3.2vmin; height: 3.2vmin; flex: none; margin-top: .2vmin; border-radius: 50%; border: 2px solid var(--linie-2); display: grid; place-items: center; }
.sug-card .cutie .ic { width: 1.8vmin; height: 1.8vmin; opacity: 0; }
.sug-card.ales { border-color: var(--rosu); background: rgba(216,35,42,.08); }
.sug-card.ales .cutie { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.sug-card.ales .cutie .ic { opacity: 1; }
.sug-corp { flex: 1; min-width: 0; display: grid; gap: .8vmin; }
.sug-corp b { font-size: 2.2vmin; }
.sug-rand { display: flex; justify-content: space-between; gap: 2vmin; font-size: 1.9vmin; }
.sug-rand i { font-style: normal; color: var(--text-2); }
.sug-rand em { font-style: normal; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sug-corp small { color: var(--text-3); font-size: 1.6vmin; }
.sug-calendar { display: flex; align-items: center; justify-content: center; gap: 1.2vmin; padding: 2vmin; border-radius: var(--raza-m); border: 1px dashed var(--linie-2); background: transparent; color: var(--text); font-weight: 600; font-size: 1.9vmin; cursor: pointer; }
.sug-calendar .ic { width: 2.4vmin; height: 2.4vmin; }
.link-sugestii { background: none; border: 0; padding: 0; color: var(--rosu-lum); font-weight: 600; cursor: pointer; font-size: inherit; }
.mod-legat .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
/* intrebarile serviciului */
.intrebari { display: grid; gap: 2.4vmin; }
.int-card { padding: 2.4vmin; border: 1px solid var(--linie-2); border-radius: var(--raza-m); background: var(--card); transition: box-shadow .2s, border-color .2s; }
.int-card.lipsa { border-color: var(--rosu); box-shadow: 0 0 0 .4vmin rgba(216,35,42,.25); }
.int-cap { margin-bottom: 1.8vmin; }
.int-cap b { display: block; font-size: 2.3vmin; }
.int-cap small { display: block; color: var(--text-2); font-size: 1.7vmin; margin-top: .4vmin; line-height: 1.35; }
.int-optiuni { display: grid; grid-template-columns: repeat(auto-fit, minmax(24vmin, 1fr)); gap: 1.2vmin; }
.int-opt { display: flex; align-items: flex-start; gap: 1.4vmin; text-align: left; padding: 1.8vmin; border-radius: 1.6vmin; border: 1px solid var(--linie-2); background: var(--fond); color: var(--text); cursor: pointer; }
.int-opt .cutie { width: 2.8vmin; height: 2.8vmin; flex: none; border-radius: 50%; border: 2px solid var(--linie-2); display: grid; place-items: center; margin-top: .1vmin; }
.int-opt .cutie .ic { width: 1.6vmin; height: 1.6vmin; opacity: 0; }
.int-opt.ales { border-color: var(--rosu); background: rgba(216,35,42,.08); }
.int-opt.ales .cutie { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.int-opt.ales .cutie .ic { opacity: 1; }
.int-opt .io-text b { display: block; font-size: 2vmin; }
.int-opt em, .imp-et em { font-style: normal; font-weight: 600; color: var(--rosu-lum); white-space: nowrap; }
.int-opt .io-text small { display: block; color: var(--text-2); font-size: 1.55vmin; margin-top: .3vmin; }
.imp-stare { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; padding: 1.4vmin 1.8vmin; margin-bottom: 1.4vmin; border-radius: 1.4vmin; background: rgba(240,180,41,.1); color: var(--galben); font-size: 1.8vmin; font-weight: 600; }
.imp-stare.gata { background: rgba(53,194,107,.12); color: var(--verde); }
.imp-stare .ic { width: 2vmin; height: 2vmin; margin-right: .8vmin; vertical-align: -.3vmin; }
.imp-puncte { display: flex; gap: .6vmin; }
.imp-puncte i { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; border: 2px solid currentColor; opacity: .5; }
.imp-puncte i.pl { background: currentColor; opacity: 1; }
.imp-randuri { display: grid; gap: 1.2vmin; }
.imp-rand { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; padding: 1.6vmin 1.8vmin; border-radius: 1.6vmin; border: 1px solid var(--linie-2); background: var(--fond); }
.imp-rand.activ { border-color: rgba(216,35,42,.6); }
.imp-et b { display: block; font-size: 2vmin; }
.imp-et small { display: block; color: var(--text-2); font-size: 1.55vmin; margin-top: .3vmin; }
.imp-nr-grup { display: flex; gap: .8vmin; flex: none; }
.imp-nr { width: 5.6vmin; height: 5.6vmin; border-radius: 1.2vmin; border: 1px solid var(--linie-2); background: var(--card); color: var(--text); font-weight: 800; font-size: 2.2vmin; cursor: pointer; }
.imp-nr.ales { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.imp-nr:disabled { opacity: .25; cursor: default; }
.imp-stare > span:first-child { display: flex; align-items: center; gap: .8vmin; }
.imp-stare > span:first-child .ic { margin: 0; flex: none; }

/* marca si modelul, sub numarul de inmatriculare */
.marca-model { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vmin; width: 100%; margin-top: 2.4vmin; }
.mm-camp { display: grid; gap: .8vmin; }
.mm-camp > span { font-size: 1.6vmin; font-weight: 700; color: var(--text-2); }
.mm-camp em { font-style: normal; font-weight: 500; color: var(--text-3); margin-left: .6vmin; }
.mm-camp select, .mm-text { width: 100%; height: 6.4vmin; padding: 0 1.8vmin; border-radius: 1.4vmin; border: 1px solid var(--linie-2); background: var(--card); color: var(--text); font-size: 2vmin; font-family: inherit; }
.mm-camp select:disabled { opacity: .5; }

/* serviciile suplimentare: ce include pachetul, grupat sus; jos doar optiunile contra cost */
.inclus-rezumat { padding: 2vmin 2.4vmin; margin-bottom: 2.4vmin; border-radius: var(--raza-m); border: 1px solid rgba(53,194,107,.35); background: rgba(53,194,107,.07); }
.inclus-rezumat .ir-cap { display: flex; align-items: center; gap: 1vmin; font-size: 1.9vmin; color: var(--text-2); margin-bottom: 1.2vmin; }
.inclus-rezumat .ir-cap b { color: var(--text); }
.inclus-rezumat .ir-cap .ic { width: 2.2vmin; height: 2.2vmin; color: var(--verde); flex: none; }
.inclus-rezumat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8vmin; }
.inclus-rezumat li { padding: .6vmin 1.4vmin; border-radius: 100vmin; background: rgba(53,194,107,.12); color: var(--text); font-size: 1.6vmin; font-weight: 600; }
.eticheta-supl { margin: 0 0 1.4vmin; }

/* primul pas: numarul, nota „o singura masina” si detaliile optionale, ca un singur bloc */
.masina-pas { width: 100%; max-width: 92vmin; margin: 0 auto; display: grid; gap: 2.2vmin; justify-items: stretch; }
.mp-nota { display: flex; align-items: flex-start; gap: 1.4vmin; padding: 1.8vmin 2.2vmin; border-radius: 1.6vmin; background: rgba(255,255,255,.04); border: 1px solid var(--linie); color: var(--text-2); font-size: 1.8vmin; line-height: 1.45; transition: background .2s, border-color .2s, color .2s; }
.mp-nota .ic { width: 2.4vmin; height: 2.4vmin; flex: none; margin-top: .1vmin; color: var(--text-3); }
.mp-nota.avertizare { background: rgba(240,180,41,.1); border-color: rgba(240,180,41,.5); color: var(--galben); }
.mp-nota.avertizare .ic { color: var(--galben); }
.mp-detalii { padding: 2.4vmin; border-radius: var(--raza-m); background: var(--card); border: 1px solid var(--linie); }
.mp-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 2vmin; margin-bottom: 1.8vmin; flex-wrap: wrap; }
.mp-cap b { font-size: 2vmin; }
.mp-cap span { font-size: 1.6vmin; color: var(--text-3); }
.mp-detalii .marca-model { margin-top: 0; }
.mm-camp select { appearance: none; -webkit-appearance: none; padding-right: 6vmin; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b4b4bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2vmin center; background-size: 2.4vmin 2.4vmin; }
.masina-pas > #vehicul-gasit:empty { display: none; }

/* meniul de pachete pe kiosk (aceleasi elemente, in vmin) */
.pm { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: visible; border-radius: 2.2vmin; border: 2px solid #3a3d44; background: linear-gradient(180deg, #1d1f24, #141518); }
.pm.stil-accent { border-color: var(--rosu); background: linear-gradient(180deg, #2a1012, #160b0c); }
.pm.stil-auriu { border-color: var(--auriu); background: linear-gradient(180deg, #241d0d, #14110a); }
.pm.ales { box-shadow: 0 0 0 .5vmin var(--rosu-lum); }
.pm-panglica { position: absolute; top: -1.6vmin; left: 50%; transform: translateX(-50%); padding: .6vmin 1.8vmin; border-radius: 100vmin; background: var(--rosu); color: #fff; font-size: 1.3vmin; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; display: inline-flex; gap: .6vmin; align-items: center; }
.pm.stil-auriu .pm-panglica { background: var(--auriu); color: #1a1406; }
.pm-panglica .ic { width: 1.6vmin; height: 1.6vmin; }
.pm-cap { padding: 3vmin 2vmin 1.6vmin; text-align: center; }
.pm-nume { display: block; font-size: 3vmin; font-weight: 900; font-style: italic; text-transform: uppercase; }
.pm.stil-auriu .pm-nume { color: var(--auriu); }
.pm-sub { display: block; margin-top: .8vmin; font-size: 1.5vmin; color: var(--text-2); }
.pm-foto { height: 18vmin; overflow: hidden; } .pm-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-ben { list-style: none; margin: 0; padding: 1.6vmin 2vmin; display: grid; gap: .8vmin; flex: 1; align-content: start; }
.pm-ben li { display: flex; gap: 1vmin; font-size: 1.7vmin; } .pm-ben .ic { width: 2vmin; height: 2vmin; flex: none; color: var(--rosu-lum); }
.pm.stil-auriu .pm-ben .ic { color: var(--auriu); }
.pm-pt { margin: 0 2vmin; font-size: 1.5vmin; font-style: italic; color: var(--text-2); text-align: center; }
.pm-jos { padding: 1.6vmin 2vmin 2vmin; display: grid; gap: 1.2vmin; }
.pm-pret { text-align: center; } .pm-pret b { font-size: 3.4vmin; font-weight: 900; } .pm-pret b i { font-style: normal; font-size: 1.6vmin; margin-left: .5vmin; } .pm-pret small { display: block; font-size: 1.4vmin; color: var(--text-3); }
.pm-cta { display: grid; gap: .3vmin; padding: 1.4vmin; border-radius: 1.4vmin; text-align: center; background: rgba(255,255,255,.06); }
.pm.stil-accent .pm-cta { background: var(--rosu); } .pm.stil-auriu .pm-cta { background: var(--auriu); color: #1a1406; }
.pm-cta span { font-size: 1.4vmin; opacity: .85; } .pm-cta b { font-size: 1.9vmin; font-weight: 800; text-transform: uppercase; display: inline-flex; gap: .6vmin; justify-content: center; align-items: center; } .pm-cta b .ic { width: 1.8vmin; height: 1.8vmin; }
/* banda UE de pe placuta: cercul cu stele si „RO” centrate pe verticala */
.placa .ro { justify-content: center; padding: 0; gap: 1vmin; line-height: 1; }

/* ---------- Ce include + comparatia nivelurilor ---------- */
.dd-cap, .dd-tabel th, .dd-tabel td.da { --c1: #8a8f99; --c2: #c9cdd4; }
.stil-accent.dd-cap, .dd-tabel .stil-accent { --c1: #d8232a; --c2: #ff4a51; }
.stil-auriu.dd-cap, .dd-tabel .stil-auriu { --c1: #d9b24a; --c2: #f3d27a; }
.pm-compara { display: flex; align-items: center; gap: 2vmin; width: 100%; margin: 0 0 3vmin; padding: 2vmin 2.4vmin; border-radius: 1.8vmin; border: 1px solid rgba(216,35,42,.45); background: linear-gradient(90deg, rgba(216,35,42,.16), rgba(216,35,42,.04)); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, transform .15s; }
.pm-compara:active { transform: scale(.99); }
.pmc-ic { width: 6vmin; height: 6vmin; flex: none; border-radius: 50%; background: var(--rosu); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(216,35,42,.55); animation: puls 2.4s infinite; }
.pmc-ic .ic { width: 3.2vmin; height: 3.2vmin; }
.pmc-text { flex: 1; display: flex; flex-direction: column; gap: .4vmin; }
.pmc-text b { font-size: 2.3vmin; }
.pmc-text small { font-size: 1.8vmin; color: var(--text-2); }
.pmc-sag { color: var(--rosu-lum); } .pmc-sag .ic { width: 3vmin; height: 3vmin; }
.pm-info { position: absolute; top: 1.4vmin; right: 1.4vmin; z-index: 3; display: inline-flex; align-items: center; gap: .7vmin; padding: .7vmin 1.3vmin .7vmin .9vmin; border-radius: 100vmin; background: rgba(255,255,255,.08); border: 1px solid var(--c1, #555); color: #fff; font-size: 1.4vmin; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s; }
.pm-info .ic { width: 2vmin; height: 2vmin; color: var(--c2, #fff); }
.pm-info::before { content: ""; position: absolute; top: -.3vmin; right: -.3vmin; width: 1.2vmin; height: 1.2vmin; border-radius: 50%; background: var(--c2, #ff4a51); box-shadow: 0 0 0 0 var(--c2, #ff4a51); animation: punct 1.8s infinite; }
.pm-info:hover { background: rgba(255,255,255,.16); }
@keyframes punct { 0% { box-shadow: 0 0 0 0 rgba(255,74,81,.7); } 70% { box-shadow: 0 0 0 1.2vmin rgba(255,74,81,0); } 100% { box-shadow: 0 0 0 0 rgba(255,74,81,0); } }
.dialog-detalii { position: relative; text-align: left; width: min(110vmin, 100%); max-height: 88vh; overflow: auto; padding: 0; }
.dd-x { position: absolute; top: 1.6vmin; right: 1.6vmin; z-index: 4; width: 5vmin; height: 5vmin; border-radius: 50%; border: 1px solid var(--linie-2); background: var(--card-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.dd-x .ic { width: 2.4vmin; height: 2.4vmin; }
.dd-cap { display: flex; flex-direction: column; gap: .6vmin; padding: 3.4vmin 8vmin 2.6vmin 3.4vmin; border-bottom: 1px solid var(--linie-2); background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 22%, transparent), transparent); }
.dd-et { font-size: 1.3vmin; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c2); }
.dd-cap b { font-size: 3.2vmin; letter-spacing: -.02em; }
.dd-pret { font-size: 2vmin; color: var(--text-2); font-weight: 600; }
.dd-ops { list-style: none; counter-reset: op; margin: 0; padding: 2.4vmin 3.4vmin; display: flex; flex-direction: column; }
.dd-ops li { counter-increment: op; display: flex; gap: 2vmin; align-items: flex-start; padding: 1.3vmin 0; border-bottom: 1px dashed var(--linie); font-size: 2vmin; }
.dd-ops li:last-child { border-bottom: 0; }
.dd-ops li::before { content: counter(op); flex: none; width: 3.6vmin; height: 3.6vmin; border-radius: 50%; display: grid; place-items: center; font-size: 1.6vmin; font-weight: 800; background: color-mix(in srgb, var(--c1, #d8232a) 25%, transparent); color: var(--c2, #fff); }
.dd-ops li span { display: flex; flex-direction: column; gap: .4vmin; padding-top: .5vmin; }
.dd-ops li small, .dd-tabel td small { display: block; color: var(--text-2); font-size: .85em; font-weight: 400; line-height: 1.35; }
.dialog-detalii:has(.dd-cap.stil-accent) .dd-ops li::before { background: rgba(216,35,42,.22); color: #ff6a70; }
.dialog-detalii:has(.dd-cap.stil-auriu) .dd-ops li::before { background: rgba(217,178,74,.2); color: #f3d27a; }
.dd-jos { position: sticky; bottom: 0; display: flex; gap: 1.6vmin; padding: 2.4vmin 3.4vmin; background: var(--card); border-top: 1px solid var(--linie-2); }
.dd-jos .btn { flex: 1; }
.dd-tabel-wrap { padding: 0 2.4vmin 2.4vmin; }
.dd-tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.9vmin; }
.dd-tabel thead th { position: sticky; top: 0; z-index: 2; background: var(--card); padding: 2vmin 1vmin 1.4vmin; text-align: center; border-bottom: 2px solid var(--c1); }
.dd-tabel thead th b { display: block; font-size: 2.2vmin; color: var(--c2); }
.dd-tabel thead th small { color: var(--text-2); font-weight: 600; }
.dd-tabel td { padding: 1.3vmin 1vmin; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.dd-tabel td:first-child { padding-left: 1vmin; }
.dd-tabel td.da, .dd-tabel td.nu { text-align: center; width: 15%; }
.dd-tabel td.da .ic { width: 2.6vmin; height: 2.6vmin; color: var(--c2); stroke-width: 3; }
.dd-tabel td.nu i { display: inline-block; width: 1.6vmin; height: 2px; background: var(--linie-2); vertical-align: middle; }
.dd-tabel tbody tr:hover td { background: rgba(255,255,255,.025); }
.dd-tabel tfoot td { border-bottom: 0; padding-top: 2vmin; text-align: center; }
.dd-tabel tfoot .btn { width: 100%; }
.pm-foto { position: relative; }
.pm-foto .pm-info, .pm-cap .pm-info { top: auto; bottom: 1.4vmin; right: 1.4vmin; background: rgba(10,10,12,.72); }
.pm-cap .pm-info { position: relative; bottom: auto; right: auto; margin: 1.4vmin auto 0; width: fit-content; }
/* fereastra: X fix, doar continutul deruleaza; celulele cu bifa/liniuta centrate identic */
.dialog-detalii { display: flex; flex-direction: column; overflow: hidden; }
#dd-corp { overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.dd-tabel td.da > *, .dd-tabel td.nu > * { display: block; margin: 0 auto; }
.dd-tabel td.da .ic { display: block; }
.dd-tabel td.nu i { display: block; }
.dialog-detalii > .dd-cap { flex: none; }
/* „Ce include”: fara bulina, toata pastila pulseaza in culoarea pachetului */
.pm-info::before { content: none !important; display: none !important; }
.pm-info { --halo: 233,236,241; border: 0 !important; background: linear-gradient(135deg, #f4f6f9, #c9ced6) !important; color: #15171c !important; box-shadow: 0 .4vmin 1.6vmin rgba(0,0,0,.45), 0 0 0 0 rgba(var(--halo),.55); animation: pmInfo 2.2s ease-in-out infinite; }
.pm-info .ic { color: currentColor !important; }
.pm.stil-accent .pm-info { --halo: 255,74,81; background: linear-gradient(135deg, #ff4d54, #c81e25) !important; color: #fff !important; }
.pm.stil-auriu .pm-info { --halo: 243,210,122; background: linear-gradient(135deg, #fbe39a, #d4a83c) !important; color: #2a1f05 !important; }
.pm-info:hover { filter: brightness(1.08); animation-play-state: paused; }
@keyframes pmInfo {
  0%   { transform: scale(1);    box-shadow: 0 .4vmin 1.6vmin rgba(0,0,0,.45), 0 0 0 0 rgba(var(--halo),.6); }
  50%  { transform: scale(1.06); box-shadow: 0 .4vmin 1.6vmin rgba(0,0,0,.45), 0 0 0 1.1vmin rgba(var(--halo),0); }
  100% { transform: scale(1);    box-shadow: 0 .4vmin 1.6vmin rgba(0,0,0,.45), 0 0 0 0 rgba(var(--halo),0); }
}
@media (prefers-reduced-motion: reduce) { .pm-info { animation: none; } }
.reco-inclus { display: inline-flex; align-items: center; gap: .6vmin; flex: none; padding: .8vmin 1.6vmin; border-radius: 100vmin; background: rgba(53,194,107,.14); border: 1px solid rgba(53,194,107,.45); color: #5fe091 !important; font-weight: 700; white-space: nowrap; } .reco-inclus .ic { color: #5fe091; stroke-width: 3; }
.mp-nota span, .reco-rand .t span, .pmc-text small { text-wrap: balance; } .mp-nota { text-wrap: balance; }
/* nota de sub numar: text ajutator discret (fara chenar), ca la Apple / Stripe; devine avertizare doar la eroare */
.mp-nota { background: none !important; border: 0 !important; padding: 0 .4vmin !important; margin-top: -1vmin; align-items: center; justify-content: center; gap: 1vmin; color: var(--text-3); font-size: 1.8vmin; text-wrap: pretty; text-align: center; }
.mp-nota .ic { width: 2vmin; height: 2vmin; margin: 0; }
.mp-nota.avertizare { background: rgba(240,180,41,.1) !important; border: 1px solid rgba(240,180,41,.45) !important; padding: 1.4vmin 1.8vmin !important; margin-top: 0; border-radius: 1.4vmin; justify-content: flex-start; text-align: left; }
/* placuta: latime fixa pentru cel mult 10 caractere (orice numar din lume), centrata */
.masina-pas .placa { width: 66vmin; max-width: 100%; justify-self: center; margin-left: auto; margin-right: auto; }
.masina-pas .placa .nr { justify-content: center; text-align: center; }
/* marca / model: camp care deschide lista cu cautare */
.cs-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.4vmin; text-align: left; font: inherit; font-size: 2.2vmin; color: var(--text-3); background: var(--card-2, #1c1c22); border: 1px solid var(--linie-2); border-radius: 1.4vmin; padding: 1.8vmin 2vmin; cursor: pointer; }
.cs-btn.are { color: var(--text); }
.cs-btn .ic { width: 2.4vmin; height: 2.4vmin; color: var(--text-3); flex: none; }
.cs-btn:disabled { opacity: .5; cursor: default; }
.cs-dialog { display: flex; flex-direction: column; padding: 0 !important; width: min(84vmin, 100%) !important; height: min(80vh, 120vmin); text-align: left !important; overflow: hidden; }
.cs-cap { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; padding: 2.6vmin 2.8vmin 2vmin; }
.cs-cap b { font-size: 3vmin; } .cs-cap b small { color: var(--text-3); font-weight: 600; font-size: .6em; margin-left: .6vmin; }
.cs-cap .dd-x { position: static; }
.cs-cauta { display: flex; align-items: center; gap: 1.4vmin; margin: 0 2.8vmin 1.6vmin; padding: 0 2vmin; border: 1px solid var(--linie-2); border-radius: 1.4vmin; background: var(--card-2, #1c1c22); }
.cs-cauta .ic { width: 2.4vmin; height: 2.4vmin; color: var(--text-3); flex: none; }
.cs-cauta input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 2.2vmin; padding: 1.8vmin 0; }
.cs-litere { display: flex; flex-wrap: wrap; gap: .8vmin; padding: 0 2.8vmin 1.8vmin; }
.cs-litere button { min-width: 5.6vmin; height: 5.6vmin; padding: 0 1.4vmin; border-radius: 1.2vmin; border: 1px solid var(--linie-2); background: var(--card-2, #1c1c22); color: var(--text); font: inherit; font-weight: 700; font-size: 2vmin; cursor: pointer; }
.cs-litere button.activ { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.cs-lista { flex: 1; overflow: auto; padding: 0 1.6vmin 1.6vmin; border-top: 1px solid var(--linie); overscroll-behavior: contain; }
.cs-opt { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 2vmin 1.4vmin; border: 0; border-bottom: 1px solid var(--linie); background: none; color: var(--text); font: inherit; font-size: 2.3vmin; text-align: left; cursor: pointer; }
.cs-opt.ales { color: var(--rosu-lum); font-weight: 700; } .cs-opt .ic { width: 2.4vmin; height: 2.4vmin; stroke-width: 3; }
.cs-opt:hover { background: rgba(255,255,255,.04); }
.cs-gol { padding: 4vmin 2vmin; text-align: center; color: var(--text-3); font-size: 2vmin; }
/* ecranul final: cererea de confirmare din mesaj */
.final-confirmare { display: flex; align-items: flex-start; gap: 1.6vmin; max-width: 70vmin; margin: 2.4vmin auto 0; padding: 2vmin 2.4vmin; border-radius: 1.8vmin; background: rgba(240,180,41,.1); border: 1px solid rgba(240,180,41,.45); color: var(--text); text-align: left; font-size: 2vmin; line-height: 1.45; }
.final-confirmare .fc-ic { width: 4.6vmin; height: 4.6vmin; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(240,180,41,.18); color: var(--galben); }
.final-confirmare .fc-ic .ic { width: 2.6vmin; height: 2.6vmin; }
.nota-gdpr { display: flex; gap: 1.2vmin; align-items: flex-start; margin: 2.4vmin 0 0; color: var(--text-3); font-size: 1.6vmin; line-height: 1.5; text-wrap: pretty; }
.nota-gdpr .ic { width: 2vmin; height: 2vmin; flex: none; margin-top: .2vmin; }
.nota-gdpr a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }