/* ImoReel - interfață modernă (inspirație Windows 11 + Apple). Fără build. */
:root {
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", sans-serif;
  --font-titlu: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --bg: #F3F5F9;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(0, 122, 255, 0.07), transparent 60%),
             radial-gradient(900px 500px at -10% 110%, rgba(90, 200, 250, 0.08), transparent 60%);
  --celula: #FFFFFF;
  --celula-2: #F7F8FA;
  --chenar: rgba(15, 23, 42, 0.08);
  --chenar-tare: rgba(15, 23, 42, 0.16);
  --umbra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
  --umbra-mare: 0 8px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  --text: #0F172A;
  --text2: #5B6474;
  --text3: #98A1B0;
  --sep: rgba(15, 23, 42, 0.07);
  --albastru: #0A66E8;
  --albastru-hover: #0857C7;
  --albastru-fin: rgba(10, 102, 232, 0.08);
  --albastru-fin2: rgba(10, 102, 232, 0.14);
  --rosu: #C0261B;
  --verde: #0E7A3E;
  --portocaliu: #9A4F05;
  --albastru-plin: var(--albastru);
  --albastru-plin-hover: var(--albastru-hover);
  --fill: rgba(15, 23, 42, 0.05);
  --input-bg: #FFFFFF;
  --input-chenar: #CBD2DC;
  --input-jos: #8A94A6;
  --fundal-foaie: rgba(15, 23, 42, 0.38);
  --comutator-off: #FFFFFF;
  --toast-bg: #1E2533;
  --raza: 10px;
  --raza-mica: 6px;
  --bara-h: 64px;
  --lat: 760px;
  --lat-lata: 1080px;
  --lateral: 256px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1117;
    --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(10, 132, 255, 0.10), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(90, 200, 250, 0.06), transparent 60%);
    --celula: #171B23;
    --celula-2: #1D222C;
    --chenar: rgba(255, 255, 255, 0.07);
    --chenar-tare: rgba(255, 255, 255, 0.14);
    --umbra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --umbra-mare: 0 12px 40px rgba(0, 0, 0, 0.5);
    --text: #E8ECF3;
    --text2: #A0A9B8;
    --text3: #6B7484;
    --sep: rgba(255, 255, 255, 0.06);
    --albastru: #4C9AFF;
    --albastru-hover: #6AACFF;
    --albastru-fin: rgba(76, 154, 255, 0.12);
    --albastru-fin2: rgba(76, 154, 255, 0.2);
    --rosu: #FF6B61;
    --verde: #3DD68C;
    --portocaliu: #F5A524;
    --albastru-plin: #1F6FEB;        /* 28 oct 2026: alb pe #4C9AFF avea contrast 2,85; pe #1F6FEB 4,63 */
    --albastru-plin-hover: #1A63D6;
    --fill: rgba(255, 255, 255, 0.06);
    --input-bg: #11151C;
    --input-chenar: #333B49;
    --input-jos: #6B7484;
    --fundal-foaie: rgba(0, 0, 0, 0.6);
    --comutator-off: transparent;
    --toast-bg: #2A3140;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg-grad), var(--bg); background-attachment: fixed; color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.blocat { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--albastru); outline-offset: 2px; border-radius: 4px; }
.ascuns-vizual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- bara de sus ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, calc((100% - var(--lat)) / 2 + 16px)) 0;
  transition: background-color .2s, box-shadow .2s;
}
.nav.derulat {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1px 0 var(--chenar);
}
.nav-titlu { grid-column: 2; font-size: 16px; font-weight: 600; opacity: 0; transition: opacity .2s; white-space: nowrap; }
/* 1 nov 2026 (lotul 3): titlul filmului poate fi lung; se taie cu „...” si nu mai strange linkul din stanga */
.nav { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); }
.nav-titlu { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-stanga { white-space: nowrap; }
.nav.derulat .nav-titlu { opacity: 1; }
.nav-stanga { grid-column: 1; justify-self: start; }
.nav-dreapta { grid-column: 3; justify-self: end; }
/* 3 nov 2026: banda „Accept termenii noi” */
.banda-termeni { border: 1px solid var(--chenar); background: var(--celula-2); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.banda-termeni p { margin: 0 0 10px; font-size: 14px; line-height: 20px; }
.banda-termeni .buton { width: auto; }
.nota-accept { display: inline-block; margin-top: 4px; font-size: 12px; line-height: 17px; opacity: 0.8; }
.nav a, .text-btn {
  background: none; border: 0; padding: 8px 2px; min-height: 40px; color: var(--albastru); font-size: 15px; font-weight: 500;
  text-decoration: none; display: inline-flex; align-items: center; transition: opacity .15s;
}
.nav a:hover, .text-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav a:active, .text-btn:active { opacity: 0.6; }
/* butonul Salvează din bara de sus = buton principal mic */
.nav button.text {
  height: 36px; padding: 0 18px; border: 0; border-radius: var(--raza-mica); background: var(--albastru-plin); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(10, 102, 232, 0.3); transition: background-color .15s, opacity .15s;
}
.nav button.text:hover { background: var(--albastru-plin-hover); }
.nav button.text:disabled { opacity: 0.5; }

/* ---------- conținut ---------- */
.continut {
  max-width: var(--lat); margin: 0 auto; padding: 0 16px calc(var(--bara-h) + env(safe-area-inset-bottom) + 32px);
}
.fara-bara .continut { padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
.titlu-mare { font-family: var(--font-titlu); font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; padding: 4px 2px 20px; }
.sectiune { margin-bottom: 24px; }
.grup-titlu { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); padding: 0 2px 8px; }
.grup { background: var(--celula); border: 1px solid var(--chenar); border-radius: var(--raza); box-shadow: var(--umbra); overflow: hidden; }
.nota { font-size: 13px; line-height: 18px; color: var(--text2); padding: 8px 2px 0; }
.nota.eroare, .mesaj-eroare { color: var(--rosu); }

/* rânduri în card */
.rand {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 0;
}
.rand + .rand, .grup > input[hidden] + .rand { border-top: 1px solid var(--sep); }
.rand.stivuit { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; row-gap: 10px; }
.rand.stivuit > .seg { flex-basis: 100%; }
.eticheta { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font-weight: 500; }
.valoare { margin-left: auto; color: var(--text2); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* câmpuri: eticheta deasupra, câmpul pe toată lățimea */
.rand.camp { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 14px; padding-bottom: 14px; }
.rand.camp .eticheta { font-size: 13px; font-weight: 600; color: var(--text2); }
.camp-input { display: flex; align-items: center; gap: 8px; }
.rand.camp input, .camp input, .camp-input input {
  flex: 1; width: 100%; min-width: 0; height: 42px; padding: 0 12px; font-size: 16px; text-align: left;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--input-chenar); border-bottom-color: var(--input-jos); border-radius: var(--raza-mica);
  outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
}
.rand.camp input:hover, .camp input:hover { border-color: var(--chenar-tare); border-bottom-color: var(--input-jos); }
.rand.camp input:focus, .camp input:focus {
  border-color: var(--input-chenar); border-bottom-color: var(--albastru); box-shadow: inset 0 -1px 0 var(--albastru);
}
.rand.camp input:disabled { background: var(--celula-2); color: var(--text2); -webkit-text-fill-color: var(--text2); opacity: 1; border-bottom-color: var(--input-chenar); }
input::placeholder { color: var(--text3); }

/* câmpuri mai vechi, încă în linie (admin): același aspect */
.rand > input[type="text"], .rand > input[type="email"], .rand > input[type="tel"], .rand > input[type="number"], .rand > input[type="password"] {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; font-size: 16px; background: var(--input-bg);
  border: 1px solid var(--input-chenar); border-bottom-color: var(--input-jos); border-radius: var(--raza-mica); outline: none;
  -webkit-appearance: none; appearance: none;
}
.rand > input:focus { border-bottom-color: var(--albastru); box-shadow: inset 0 -1px 0 var(--albastru); }
.arata-parola { flex: 0 0 auto; height: 42px; padding: 0 12px !important; border: 1px solid var(--input-chenar) !important; border-radius: var(--raza-mica); background: var(--celula) !important; color: var(--text) !important; font-size: 14px !important; text-decoration: none !important; }
.arata-parola:hover { background: var(--celula-2) !important; }

.camp > input[type], .rand.camp > input[type] { flex: none; height: 42px; }

/* rând care deschide o alegere */
.rand.link, .rand.cu-redare { cursor: pointer; }
.rand.link .acopera, .rand.cu-redare .acopera { position: absolute; inset: 0; background: none; border: 0; padding: 0; transition: background-color .15s; }
.rand.link:hover .acopera, .rand.cu-redare:hover .acopera { background: var(--fill); }
.rand.link .acopera:active, .rand.cu-redare .acopera:active { background: var(--albastru-fin); }
.rand.link .eticheta, .rand.link .valoare, .rand.link .sageata, .rand.cu-redare .eticheta, .rand.cu-redare .redare { pointer-events: none; }
.rand.link .eticheta .info, .rand.cu-redare .eticheta .info { pointer-events: auto; }
.sageata { color: var(--text3); display: inline-flex; flex: 0 0 auto; }
.sageata svg { width: 7px; height: 12px; }
.rand.actiune { justify-content: flex-start; color: var(--albastru); font-weight: 500; min-height: 48px; transition: background-color .15s; }
.rand.actiune:hover { background: var(--albastru-fin); }
.rand.actiune.pericol { color: var(--rosu); }
.rand.actiune.pericol:hover { background: rgba(217, 45, 32, 0.07); }
.rand.actiune:disabled { opacity: 0.45; }
.rand.centrat { justify-content: center; }

/* buton "i" */
.info {
  position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-left: 6px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--text3); border-radius: 50%; background: none; color: var(--text2);
  font-size: 11px; font-weight: 700; line-height: 1; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  transition: color .15s, border-color .15s, background-color .15s;
}
.info::after { content: ""; position: absolute; inset: -12px; }
.info:hover { color: var(--albastru); border-color: var(--albastru); background: var(--albastru-fin); }

/* butoane */
.buton {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border: 0; border-radius: var(--raza-mica);
  font-size: 15px; font-weight: 600; background: var(--albastru-plin); color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 102, 232, 0.25); transition: background-color .15s, opacity .15s, transform .05s;
}
.buton:hover { background: var(--albastru-plin-hover); }
.buton:active { transform: translateY(1px); }
.buton:disabled { opacity: 0.5; }
.buton + .buton { margin-top: 10px; }
.buton.secundar { background: var(--celula); color: var(--text); border: 1px solid var(--input-chenar); box-shadow: none; }
.buton.secundar:hover { background: var(--celula-2); }
.buton.pericol { background: var(--rosu); color: #fff; box-shadow: none; }
.buton.pericol:hover { filter: brightness(0.94); }

/* comutator în stil Windows 11 */
.comutator { position: relative; flex: 0 0 auto; width: 44px; height: 22px; margin-left: auto; }
.comutator input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.comutator span { position: absolute; inset: 0; border-radius: 11px; background: var(--comutator-off); border: 1px solid var(--input-jos); transition: background-color .15s, border-color .15s; }
.comutator span::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--text2);
  transition: transform .18s cubic-bezier(.3, .7, .4, 1), width .15s, background-color .15s;
}
.comutator:hover span::after { width: 14px; }
.comutator input:checked + span { background: var(--albastru); border-color: var(--albastru); }
.comutator input:checked + span::after { background: #fff; transform: translateX(22px); }
.comutator:hover input:checked + span::after { transform: translateX(20px); }
.comutator input:focus-visible + span { outline: 2px solid var(--albastru); outline-offset: 2px; }
.rand.cu-comutator { cursor: pointer; }

/* alegeri în pastile */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  flex: 1 1 0; min-width: 0; height: 38px; padding: 0 10px; white-space: nowrap; border: 1px solid var(--input-chenar); border-radius: 999px;
  background: var(--celula); font-size: 14px; font-weight: 500; color: var(--text);
  transition: background-color .15s, border-color .15s, color .15s;
}
.seg button:hover { background: var(--celula-2); border-color: var(--chenar-tare); }
.seg button[aria-checked="true"] { background: var(--albastru-plin); border-color: var(--albastru-plin); color: #fff; font-weight: 600; }

/* culori */
.culoare-ctrl { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px 4px 12px; border: 1px solid var(--input-chenar); border-radius: 999px; cursor: pointer; background: var(--celula); transition: background-color .15s; }
.culoare-ctrl:hover { background: var(--celula-2); }
.culoare-ctrl .hex { color: var(--text2); font-size: 14px; font-variant-numeric: tabular-nums; }
.cerc { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); overflow: hidden; }
.cerc.gol { background: repeating-conic-gradient(var(--fill) 0 25%, transparent 0 50%) 50% / 10px 10px; box-shadow: inset 0 0 0 1px var(--input-chenar); }
.cerc input { position: absolute; inset: -4px; width: 40px; height: 40px; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.banda { display: flex; gap: 12px; padding: 16px; overflow-x: auto; }
.banda button { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: transform .15s; }
.banda button:hover { transform: scale(1.06); }
.banda button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--celula), 0 0 0 4px var(--albastru); }

/* exemple CTA */
.rand.chips-rand { padding-top: 0; padding-bottom: 14px; border-top: 0 !important; min-height: 0; }
.chipuri { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px dashed var(--input-chenar); background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--text2); transition: background-color .15s, color .15s, border-color .15s; }
.chip:hover { background: var(--albastru-fin); color: var(--albastru); border-color: var(--albastru); border-style: solid; }

/* logo */
.logo-mini { margin-left: auto; width: 64px; height: 64px; border-radius: 8px; background: var(--celula-2); border: 1px solid var(--chenar); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; padding: 4px; }
.logo-mini.gol { background: none; border: 0; width: auto; height: auto; padding: 0; }
.logo-mini.gol .valoare { font-size: 14px; }
.logo-mini img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.rand.logo-rand { padding-top: 12px; padding-bottom: 12px; }

/* butoane de redare */
.redare {
  position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; background: var(--albastru-fin2); color: var(--albastru); transition: background-color .15s;
}
button.redare::after { content: ""; position: absolute; inset: -6px; }
button.redare:hover { background: var(--albastru-plin); color: #fff; }
.redare svg { width: 14px; height: 14px; display: none; }
.redare[data-stare="idle"] .i-play, .redare:not([data-stare]) .i-play, .redare[data-stare="pauza"] .i-play { display: block; }
.redare[data-stare="playing"] .i-pauza { display: block; }
.redare[data-stare="loading"] .i-spinner { display: block; width: 18px; height: 18px; }
.spinner-ios { animation: rotire .8s steps(8, end) infinite; }
@keyframes rotire { to { transform: rotate(360deg); } }

/* previzualizare */
.previzualizare { padding: 24px 16px; display: flex; justify-content: center; background: linear-gradient(180deg, var(--celula-2), var(--celula)); }
.telefon { position: relative; width: 210px; background: #0B0D12; border-radius: 36px; padding: 8px; box-shadow: 0 0 0 1px #2A2F3A, var(--umbra-mare); }
.telefon::after { content: ""; position: absolute; top: 17px; left: 50%; width: 50px; height: 14px; margin-left: -25px; border-radius: 8px; background: #0B0D12; z-index: 2; }
.pv-ecran { aspect-ratio: 9 / 16; border-radius: 29px; overflow: hidden; container-type: inline-size; background: #2b2b2b; }
.pv { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10cqw; gap: 3.2cqw; transition: background-color .2s; }
.pv-logo { max-width: 44cqw; max-height: 22cqw; object-fit: contain; margin-bottom: 1cqw; }
.pv-nume { font-size: 8.4cqw; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.pv-linie { width: 18cqw; height: 0.9cqw; border-radius: 1cqw; }
.pv-cta { margin-top: 4cqw; padding: 2.8cqw 6cqw; border-radius: 99px; font-size: 5.2cqw; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pv-tel { font-size: 4.6cqw; margin-top: 1cqw; }
.pv-site { font-size: 3.8cqw; opacity: 0.75; overflow-wrap: anywhere; }
.rand.avertisment { color: var(--portocaliu); align-items: flex-start; padding-top: 12px; padding-bottom: 12px; font-size: 14px; background: rgba(245, 165, 36, 0.08); }
.rand.avertisment svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

/* mesaje */
.mesaj { font-size: 13px; line-height: 18px; padding: 8px 2px 0; color: var(--text2); }
.mesaj-ok { color: var(--verde); }
.mesaj-avert { color: var(--portocaliu); }
.mesaj.cap { padding: 10px 14px; margin-bottom: 16px; font-size: 14px; border-radius: var(--raza-mica); background: var(--celula); border: 1px solid var(--chenar); }
.mesaj.cap.mesaj-eroare { background: rgba(217, 45, 32, 0.06); border-color: rgba(217, 45, 32, 0.25); }

/* gol */
.gol-text { padding: 36px 24px; text-align: center; color: var(--text2); font-size: 14px; line-height: 1.5; }

/* ---------- navigare: jos pe telefon, în stânga pe calculator ---------- */
.bara {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 4px;
  padding: 6px max(8px, calc((100% - var(--lat)) / 2)) calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--celula) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--chenar);
}
.bara-sigla, .bara-subsol { display: none; }
.bara button {
  position: relative; flex: 1; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; border-radius: 8px; padding: 4px 0; color: var(--text2); font-size: 11px; font-weight: 500; transition: background-color .15s, color .15s;
}
.bara button:hover { background: var(--fill); }
.bara button svg { width: 22px; height: 22px; }
.bara button[aria-current="page"] { color: var(--albastru); font-weight: 600; }
.bara button[aria-current="page"] svg { background: var(--albastru-fin2); border-radius: 999px; padding: 2px 14px; width: 52px; height: 26px; box-sizing: border-box; }

/* ---------- ferestre (foaie pe telefon, dialog pe calculator) ---------- */
.foaie-radacina { position: fixed; inset: 0; z-index: 100; }
.foaie-fundal { position: absolute; inset: 0; background: var(--fundal-foaie); opacity: 0; transition: opacity .22s; }
.foaie {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: var(--lat); max-height: 88vh;
  display: flex; flex-direction: column; background: var(--bg); border-radius: 14px 14px 0 0; outline: none; box-shadow: var(--umbra-mare);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32, .72, 0, 1); padding-bottom: env(safe-area-inset-bottom);
}
@supports (height: 1dvh) { .foaie { max-height: 88dvh; } }
.foaie.mica { background: var(--celula); }
.foaie-radacina.deschis .foaie-fundal { opacity: 1; }
.foaie-radacina.deschis .foaie { transform: none; }
.foaie::before { content: ""; align-self: center; flex: 0 0 auto; width: 36px; height: 4px; border-radius: 2px; background: var(--text3); margin: 8px 0 2px; }
.foaie-cap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 16px; flex: 0 0 auto; }
.foaie-cap h2 { grid-column: 2; font-size: 16px; font-weight: 600; }
.foaie-cap .text-btn { grid-column: 3; justify-self: end; font-weight: 600; }
.foaie-corp { overflow-y: auto; padding: 8px 16px 24px; -webkit-overflow-scrolling: touch; }
.foaie.mica .foaie-corp { padding: 12px 20px 24px; }
.foaie.mica h2.mare { font-family: var(--font-titlu); font-size: 20px; line-height: 1.3; font-weight: 650; }
.foaie.mica .explicatie { margin: 10px 0 22px; font-size: 15px; line-height: 1.55; color: var(--text); }
.optiune { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; position: relative; transition: background-color .15s; }
.optiune:hover { background: var(--fill); }
.optiune + .optiune { border-top: 1px solid var(--sep); }
.optiune[aria-checked="true"] { background: var(--albastru-fin); }
.optiune[aria-checked="true"]::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--albastru); }
.optiune .alege { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; background: none; border: 0; padding: 10px 0; }
.optiune .nume { font-size: 15px; font-weight: 500; }
.optiune .desc { font-size: 13px; line-height: 17px; color: var(--text2); }
.optiune .bifa { width: 20px; flex: 0 0 auto; color: var(--albastru); display: inline-flex; justify-content: center; }
.optiune .bifa svg { width: 16px; height: 16px; visibility: hidden; }
.optiune[aria-checked="true"] .bifa svg { visibility: visible; }
.optiune .redare { margin-left: 0; }
.foaie-actiuni .buton + .buton { margin-top: 10px; }

/* ---------- notificare ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bara-h) + env(safe-area-inset-bottom) + 14px); z-index: 200;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: min(90vw, 440px); text-align: left;
  background: var(--toast-bg); color: #fff; font-size: 14px; line-height: 20px; padding: 12px 16px 12px 14px; border-radius: 8px;
  border-left: 4px solid var(--verde); box-shadow: var(--umbra-mare); transition: opacity .2s, transform .25s;
}
.fara-bara .toast { bottom: calc(env(safe-area-inset-bottom) + 24px); }
.toast.vizibil { opacity: 1; transform: translate(-50%, 0); }
.toast.eroare { border-left-color: var(--rosu); }

/* ---------- intrare ---------- */
.intrare-pagina { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 16px calc(32px + env(safe-area-inset-bottom)); }
.intrare { width: 100%; max-width: 440px; }
.intrare-card { background: var(--celula); border: 1px solid var(--chenar); border-radius: 14px; box-shadow: var(--umbra); padding: 28px 24px 24px; }
.intrare .sigla { text-align: center; margin-bottom: 6px; }
.intrare .sigla img { display: block; margin: 0 auto; height: auto; width: 190px; max-width: 70%; }
.intrare .sub { margin: 0 0 22px; text-align: center; color: var(--text2); font-size: 14px; line-height: 1.45; }
.intrare .buton { margin-top: 18px; }
.intrare .nota { padding: 8px 0 0; }
.intrare .mesaj { text-align: center; padding: 12px 4px 0; font-size: 14px; line-height: 20px; }
.seg-intrare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; margin-bottom: 20px; background: var(--fill); border-radius: 8px; }
.seg-intrare button { min-width: 0; height: 36px; border: 0; border-radius: 6px; background: transparent; font-size: 14px; color: var(--text2); }
.seg-intrare button:hover { background: transparent; color: var(--text); }
.seg-intrare button[aria-checked="true"] { background: var(--celula); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.campuri { display: flex; flex-direction: column; gap: 14px; }
.camp { display: flex; flex-direction: column; gap: 6px; }
.camp > label { font-size: 13px; font-weight: 600; color: var(--text2); }
.legaturi-intrare { display: flex; justify-content: center; gap: 20px; padding-top: 12px; }
.legaturi-intrare .text-btn { font-size: 14px; }
.legaturi-intrare .text-btn[hidden] { display: none; }

/* ---------- admin ---------- */
.rand.cont { padding-top: 10px; padding-bottom: 10px; }
.cont-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cont-info .email { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cont-info .detalii { font-size: 13px; line-height: 17px; color: var(--text2); }
.cont .sold { flex: 0 0 auto; color: var(--text2); font-variant-numeric: tabular-nums; }
.rand.link-rez input { font-size: 14px; }
.rand.link-rez .text-btn { padding: 0; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .spinner-ios { animation: none !important; }
}

/* ---------- exemple video ---------- */
.exemple { margin-top: 36px; }
.exemple .titlu-sectiune { font-family: var(--font-titlu); font-size: 18px; line-height: 1.3; font-weight: 650; padding: 0 2px 14px; }
.exemple-rand { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 8px; margin: 0 -16px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.exemple-rand::-webkit-scrollbar { display: none; }
.exemplu { flex: 0 0 auto; width: 160px; scroll-snap-align: start; margin: 0; }
.exemplu-cadru { position: relative; background: #0B0D12; border-radius: 24px; padding: 5px; box-shadow: 0 0 0 1px #2A2F3A, var(--umbra); }
.exemplu-ecran { position: relative; aspect-ratio: 9 / 16; border-radius: 19px; overflow: hidden; background: #2b2b2b; }
.exemplu-ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.exemplu-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 0; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .15s; }
.exemplu-play:hover { transform: scale(1.08); }
.exemplu-play svg { width: 20px; height: 20px; margin-left: 2px; }
.exemplu.reda .exemplu-play { display: none; }
.exemplu-sunet { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); color: #fff; }
.exemplu-sunet svg { width: 18px; height: 18px; }
.exemplu-sunet .i-sunet { display: none; }
.exemplu.reda .exemplu-sunet { display: flex; }
.exemplu.cu-sunet .i-sunet { display: block; }
.exemplu.cu-sunet .i-mut { display: none; }
.exemplu figcaption { margin-top: 10px; text-align: center; font-size: 13px; line-height: 18px; color: var(--text2); }
.exemple .nota { text-align: center; padding-top: 6px; }

.mini-ex { position: relative; z-index: 1; flex: 0 0 auto; border: 0; padding: 0; background: var(--fill); border-radius: 6px; overflow: hidden; transition: transform .15s; }
.mini-ex:hover { transform: scale(1.06); }
.mini-ex img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini-ex.in-rand { width: 22px; height: 38px; margin: 2px 0; }
.optiune .mini-ex { width: 36px; height: 64px; border-radius: 7px; margin: 6px 0; }
.optiune .mini-ex::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 100% no-repeat; }
.nota-foaie { font-size: 13px; line-height: 18px; color: var(--text2); padding: 10px 2px 0; }

.player-plin { position: fixed; inset: 0; z-index: 150; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.player-plin.deschis { opacity: 1; }
.player-plin video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-inchide { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 14px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(60, 60, 67, 0.7); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.player-inchide svg { width: 18px; height: 18px; }
.player-titlu { position: absolute; top: calc(env(safe-area-inset-top) + 22px); left: 16px; right: 70px; color: #fff; font-size: 16px; font-weight: 600; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.6); }


/* ---------- etapa 3: film nou, verificarea datelor, lista de filme ---------- */
textarea {
  width: 100%; min-height: 96px; padding: 10px 12px; font-size: 16px; line-height: 1.45; resize: vertical;
  background: var(--input-bg); color: var(--text); border: 1px solid var(--input-chenar); border-bottom-color: var(--input-jos);
  border-radius: var(--raza-mica); outline: none; font-family: inherit;
}
textarea:focus { border-bottom-color: var(--albastru); box-shadow: inset 0 -1px 0 var(--albastru); }
.rand > .buton { width: 100%; }
.rand.declaratie { align-items: flex-start; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.rand.declaratie .eticheta { font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--text); }
.rand.declaratie .comutator { margin-top: 2px; }
.contor { font-weight: 400; color: var(--text2); }
.seg.seg-mic { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
.seg.seg-mic button { flex: 0 0 auto; min-width: 58px; }
.grila-campuri { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sep); }
.grila-campuri .rand { border-top: 0 !important; }
.grila-campuri .rand:nth-child(n+3) { border-top: 1px solid var(--sep) !important; }
.grila-campuri + .rand { border-top: 1px solid var(--sep); }

.grila-poze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.poza { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--celula-2); border: 1px solid var(--chenar); }
.poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poza.prima { outline: 2px solid var(--albastru); outline-offset: 1px; }
.poza-nr { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.poza.prima .poza-nr { background: var(--albastru-plin); }
.poza-camera { position: absolute; top: 6px; right: 6px; max-width: calc(100% - 44px); height: 26px; padding: 0 22px 0 8px; border-radius: 13px; border: none; background-color: rgba(15, 23, 42, 0.72); color: #fff; font-size: 12px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; text-overflow: ellipsis; }
.poza-camera:focus-visible { outline: 2px solid var(--albastru); outline-offset: 1px; }
.poza-camera option { color: #111; background: #fff; }
.nota-poze { margin: 0 0 10px; font-size: 13px; color: var(--text2); }
#avertisment-camere { margin-top: 8px; }
.poza-actiuni { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 6px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.45)); }
.poza-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.92); color: #0F172A; font-size: 17px; line-height: 1; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.poza-btn.sterge { font-size: 13px; color: var(--rosu); }
.poza-btn:disabled { opacity: 0.35; }
.poza.adauga { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border: 1.5px dashed var(--input-chenar); background: transparent; color: var(--albastru); font-size: 13px; font-weight: 600; }
.poza.adauga:hover { background: var(--albastru-fin); border-color: var(--albastru); }
.poza.adauga .plus { font-size: 26px; line-height: 1; font-weight: 400; }

.asteptare { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.asteptare h2 { font-family: var(--font-titlu); font-size: 20px; font-weight: 650; }
.asteptare p { color: var(--text2); font-size: 14px; max-width: 460px; }
.roata { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--albastru-fin2); border-top-color: var(--albastru); animation: rotire 0.9s linear infinite; margin-bottom: 6px; }
.bifa-mare { width: 52px; height: 52px; border-radius: 50%; background: rgba(18, 161, 80, 0.12); color: var(--verde); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.bifa-mare svg { width: 28px; height: 28px; }
.actiuni-rand { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; width: 100%; }
.actiuni-rand .buton { width: auto; flex: 1 1 200px; margin: 0 !important; padding: 0 18px; }
.actiuni-final { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 24px; }
.actiuni-final .buton + .buton { margin-top: 0; }
.pericol-text { color: var(--rosu) !important; align-self: center; }
.seg.seg-liber button { flex: 0 0 auto; }
#eroare-globala { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--raza-mica); background: rgba(217, 45, 32, 0.06); border: 1px solid rgba(217, 45, 32, 0.25); font-size: 14px; }
.mesaj.mesaj-eroare { color: var(--rosu); }
.rand .text-lung { flex: 1; font-weight: 400; white-space: normal; }

/* lista de filme */
.buton-nou { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 20px; margin-bottom: 20px; }
.buton-nou .plus { font-size: 20px; font-weight: 400; line-height: 1; }
.lista-filme { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
.lista-filme > * { min-width: 0; }
.film-card { display: flex; gap: 14px; align-items: center; padding: 12px; background: var(--celula); border: 1px solid var(--chenar); border-radius: var(--raza); box-shadow: var(--umbra); text-decoration: none; color: var(--text); transition: border-color .15s, transform .1s; }
.film-card:hover { border-color: var(--albastru); }
.film-card:active { transform: scale(0.995); }
.film-card .mini { flex: 0 0 auto; width: 88px; height: 66px; border-radius: 6px; overflow: hidden; background: var(--celula-2); border: 1px solid var(--chenar); }
.film-card .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-card .film-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.film-card .titlu { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film-card .detalii { font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eticheta-stare { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--text2); }
.eticheta-stare.albastru { background: var(--albastru-fin2); color: var(--albastru); }
.eticheta-stare.verde { background: rgba(18, 161, 80, 0.12); color: var(--verde); }
.eticheta-stare.rosu { background: rgba(217, 45, 32, 0.1); color: var(--rosu); }
.eticheta-stare.portocaliu { background: rgba(245, 165, 36, 0.14); color: var(--portocaliu); }

@media (min-width: 640px) {
  .grila-campuri { grid-template-columns: repeat(3, 1fr); }
  .grila-campuri .rand:nth-child(n+3) { border-top: 0 !important; }
  .grila-campuri .rand:nth-child(n+4) { border-top: 1px solid var(--sep) !important; }
  .actiuni-final { flex-direction: row-reverse; justify-content: flex-start; align-items: center; }
  .actiuni-final .buton { width: auto; padding: 0 24px; }
  .actiuni-final .pericol-text { margin-right: auto; }
  .lista-filme { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
}


/* ---------- etapa 4: optiuni, script, productie, previzualizare ---------- */
select {
  width: 100%; height: 42px; padding: 0 36px 0 12px; font-size: 16px; color: var(--text);
  background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B6474' stroke-width='1.6' stroke-linecap='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 12px center / 12px 8px no-repeat;
  border: 1px solid var(--input-chenar); border-bottom-color: var(--input-jos); border-radius: var(--raza-mica);
  -webkit-appearance: none; appearance: none; outline: none;
}
select:focus { border-bottom-color: var(--albastru); box-shadow: inset 0 -1px 0 var(--albastru); }
.contor-script { font-size: 13px; color: var(--text2); min-height: 18px; }
.contor-script.ok { color: var(--verde); }
.contor-script.rau { color: var(--rosu); font-weight: 600; }
.nota-spam { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--portocaliu); background: rgba(245, 165, 36, 0.12);
  border-radius: 10px; font-size: 15px; line-height: 1.45; color: var(--text); text-align: left; }
.contor-script.atentie { color: var(--portocaliu); font-weight: 600; }
.rezumat-card .text-lung, .pret-card .text-lung { font-size: 14px; color: var(--text2); }
.pret-card { background: var(--albastru-fin); border-color: var(--albastru-fin2); box-shadow: none; }
.pret-card .text-lung { color: var(--text); }
.bara-progres { width: min(360px, 100%); height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; margin: 6px 0 4px; }
.bara-progres span { display: block; height: 100%; width: 3%; background: var(--albastru); border-radius: 3px; transition: width .6s ease; }
.film-vizualizare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 24px; }   /* 1 nov 2026: minmax(0) - pagina filmului iesea mai lata decat ecranul pe telefon */
.film-cadru { justify-self: center; width: min(360px, 100%); aspect-ratio: 9 / 16; background: #000; border-radius: 22px; overflow: hidden; box-shadow: var(--umbra-mare); }
.film-cadru video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.film-panou { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.actiuni-final.coloana { flex-direction: column !important; align-items: stretch !important; margin: 0; }
.actiuni-final.coloana .buton { width: 100% !important; }
@media (min-width: 760px) {
  .film-vizualizare { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
}

/* =========================================================
   Calculator (ecran lat)
   ========================================================= */
@media (min-width: 900px) {
  body:not(.fara-bara) { padding-left: var(--lateral); }
  .bara {
    top: 0; right: auto; width: var(--lateral); flex-direction: column; justify-content: flex-start; gap: 2px;
    padding: 20px 12px; border-top: 0; border-right: 1px solid var(--chenar);
    background: color-mix(in srgb, var(--celula) 70%, transparent);
  }
  .bara-sigla { display: block; padding: 4px 10px 22px; }
  .bara-sigla img { display: block; width: 132px; height: auto; }
  .bara-subsol { display: block; margin-top: auto; padding: 0 10px; font-size: 12px; color: var(--text2); }
  .bara button {
    flex: 0 0 auto; height: 40px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px;
    font-size: 14px; color: var(--text); border-radius: 6px;
  }
  .bara button svg { width: 20px; height: 20px; color: var(--text2); }
  .bara button[aria-current="page"] { background: var(--albastru-fin); color: var(--text); }
  .bara button[aria-current="page"] svg { background: none; padding: 0; width: 20px; height: 20px; color: var(--albastru); }
  .bara button[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 2px; background: var(--albastru); }

  .nav { padding-left: 32px; padding-right: 32px; max-width: calc(var(--lat-lata) + 64px); margin: 0 auto; }
  .nav.derulat { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-titlu { opacity: 0 !important; }
  .continut { max-width: calc(var(--lat-lata) + 64px); padding: 0 32px 48px; }
  .fara-bara .continut, .fara-bara .nav { max-width: calc(var(--lat) + 64px); }
  .tab { max-width: var(--lat); }
  #tab-kit { max-width: none; }
  .titlu-mare { font-size: 30px; padding-top: 0; }
  .toast { bottom: 28px; left: calc(50% + var(--lateral) / 2); }
  .fara-bara .toast { left: 50%; }

  /* Kit de brand: setări în stânga, previzualizarea fixă în dreapta */
  #formular-kit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; }
  #formular-kit > * { grid-column: 1; }
  #formular-kit > .kit-pv { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 72px; }

  /* ferestrele devin dialoguri centrate */
  .foaie {
    top: 50%; bottom: auto; left: 50%; right: auto; width: min(560px, calc(100vw - 48px)); max-width: none; margin: 0;
    border-radius: 12px; padding-bottom: 0; border: 1px solid var(--chenar);
    transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .15s;
  }
  .foaie-radacina.deschis .foaie { transform: translate(-50%, -50%); opacity: 1; }
  .foaie::before { display: none; }
  .foaie-cap { padding: 14px 20px 6px; }
  .foaie-corp { padding: 8px 20px 20px; }

  /* intrare: formularul în stânga, exemplele în dreapta */
  .intrare-singur { display: block !important; max-width: 440px !important; }
  .intrare { max-width: 1080px; display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 56px; align-items: center; }
  .exemple { margin-top: 0; }
  .exemple-rand { overflow: visible; margin: 0; padding: 4px 0 8px; }
  .exemplu { width: calc((100% - 28px) / 3); max-width: 180px; }
}
@media (max-width: 899px) {
  .kit-pv .telefon { width: 170px; }
  .kit-pv .previzualizare { padding: 18px 16px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  #formular-kit { grid-template-columns: minmax(0, 1fr) 250px; }
  .telefon { width: 190px; }
}

/* previzualizarea la hover a template-urilor (base.js previzHover) */
.previz-hover { position: fixed; z-index: 1000; width: 200px; height: 356px; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); pointer-events: none; animation: previz-in .16s ease-out; }
.previz-hover video { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes previz-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* alegerea template-ului in pagina filmului: carduri cu miniatura */
.seg.seg-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.seg.seg-template button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 10px 6px 6px; min-height: 76px; }
.seg.seg-template button .mini-tpl { flex: 0 0 auto; width: 36px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--fill); }
.seg.seg-template button .mini-tpl img { display: block; width: 100%; height: 100%; object-fit: cover; }
.seg.seg-template button .txt-tpl { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.seg.seg-template button .txt-tpl small { font-weight: 400; opacity: .8; font-size: 12px; }

/* pozele mari, cu tragere (19 oct): numar + camera, X mic in colt; sagetile au disparut */
.grila-poze .poza { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grila-poze .poza img { pointer-events: none; }
.poza-camera { top: auto; bottom: 8px; left: 8px; right: auto; max-width: calc(100% - 16px); height: 30px; font-size: 13px; }
.poza-nr { top: 8px; left: 8px; }
.poza-sterge { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.poza-sterge:hover { background: var(--rosu); }
@media (hover: hover) and (pointer: fine) { .poza-sterge { opacity: 0; transition: opacity .15s; } .poza:hover .poza-sterge, .poza-sterge:focus-visible { opacity: 1; } }
.poza.golita { opacity: 0.25; }
.poza.tinta { outline: 3px solid var(--albastru); outline-offset: 2px; }
body.trag, body.trag * { cursor: grabbing !important; }

/* template-urile: carduri dreptunghiulare, 2 pe rand (3 pe ecran lat), textul trece pe randul urmator */
.seg.seg-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .seg.seg-template { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seg.seg-template button { border-radius: 12px; min-height: 96px; padding: 8px 12px 8px 8px; white-space: normal; height: auto; }
.seg.seg-template button .mini-tpl { width: 46px; height: 82px; }
.seg.seg-template button .txt-tpl { min-width: 0; overflow-wrap: anywhere; }
.seg.seg-template button .txt-tpl small { white-space: normal; }

/* 26 oct 2026: cardul de template = butonul de alegere + butonul „Vezi exemplul” (vizibil si pe telefon) */
.seg.seg-template .tpl-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--input-chenar); border-radius: 12px; background: var(--celula); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.seg.seg-template .tpl-card.ales { border-color: var(--albastru); box-shadow: inset 0 0 0 1px var(--albastru); }
.seg.seg-template .tpl-card > button[role="radio"] { flex: 1 1 auto; width: 100%; border: 0; border-radius: 0; background: transparent; }
.seg.seg-template .tpl-card > button[role="radio"]:hover { background: var(--celula-2); }
.seg.seg-template .tpl-card > button[role="radio"][aria-checked="true"] { background: var(--albastru-plin); border-radius: 0; }
.seg.seg-template .tpl-ex { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; min-height: 36px; padding: 0 10px; width: 100%; border: 0; border-top: 1px solid var(--sep); border-radius: 0; background: var(--celula-2); color: var(--albastru); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: normal; text-align: center; line-height: 1.2; min-width: 0; flex: 0 0 auto; }
.seg.seg-template .tpl-ex:hover { background: var(--albastru-fin); border-color: var(--sep); }
.seg.seg-template .tpl-ex:active { opacity: .7; }
.seg.seg-template .tpl-ex-ico { font-size: 10px; line-height: 1; }
.seg.seg-template .tpl-card.ales .tpl-ex { border-top-color: transparent; }
.actiuni-filme { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actiuni-filme .buton-nou { margin-bottom: 20px; }
.actiuni-filme .buton + .buton { margin-top: 0; }

/* pagina „Toate template-urile” (template-uri.html): un card pe template, video incarcat doar cand ajunge pe ecran */
.lista-tpl { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .lista-tpl { grid-template-columns: 1fr 1fr; } }
.tpl-rand { display: flex; gap: 14px; align-items: flex-start; padding: 12px; background: var(--celula); border: 1px solid var(--chenar); border-radius: var(--raza); box-shadow: var(--umbra); min-width: 0; }
.tpl-rand .tpl-video { position: relative; flex: 0 0 auto; width: 126px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #0B0D12; }
.tpl-rand .tpl-video video, .tpl-rand .tpl-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-rand .tpl-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tpl-rand .tpl-play svg { width: 18px; height: 18px; margin-left: 2px; }
.tpl-rand.reda .tpl-play { display: none; }
.tpl-rand .tpl-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tpl-rand .tpl-text h2 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tpl-rand .tpl-text p { font-size: 13px; line-height: 18px; color: var(--text2); }
.tpl-rand .tpl-text .text-btn { padding: 4px 0; min-height: 32px; font-size: 14px; font-weight: 600; }

/* administrare > consum */
.tabel-scroll { overflow-x: auto; }
.tabel-consum { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabel-consum th, .tabel-consum td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--sep); white-space: nowrap; }
.tabel-consum th { font-weight: 600; color: var(--text2); background: var(--celula-2); }
.tabel-consum td:nth-child(n+3), .tabel-consum th:nth-child(n+3) { text-align: right; }
.consum-film { margin-top: 10px; }
.consum-film summary { cursor: pointer; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.consum-film summary .titlu-film { font-weight: 600; }
.consum-film summary .detalii { font-size: 13px; color: var(--text2); }

/* beta 28 oct 2026: feedback sub film */
.fb-bloc { margin-top: 28px; }
.fb-bloc .grup-titlu { margin-bottom: 6px; }
.fb-bloc input[type="file"] { font-size: 14px; max-width: 100%; }
.tabel-beta td.numar, .tabel-beta th.numar { text-align: right; }
.fb-admin { padding: 12px 16px; border-bottom: 1px solid var(--chenar, rgba(0,0,0,.08)); }
.fb-admin:last-child { border-bottom: 0; }
.fb-admin .fb-cap { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
.fb-admin .fb-text { white-space: pre-wrap; font-size: 15px; margin: 0 0 8px; }
.fb-admin .fb-act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.accept-cont { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: 14px; line-height: 1.4; color: var(--text2); text-align: left; }
.accept-cont input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.subsol-legal { text-align: center; margin: 24px 0 8px; }
.pagina-legala { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; line-height: 1.6; }
.pagina-legala h1 { font-size: 28px; margin: 8px 0 4px; }
.pagina-legala h2 { font-size: 19px; margin: 28px 0 8px; }
.pagina-legala p, .pagina-legala li { font-size: 15px; }
.pagina-legala .data { color: var(--text2); font-size: 14px; }
.fb-pachete { flex-direction: column; align-items: stretch; }
.fb-pachete button { text-align: left; white-space: normal; flex: 0 1 auto; max-width: 100%; }
.fb-pachete button { border-radius: 14px; line-height: 1.35; height: auto; min-height: 38px; padding: 8px 12px; }   /* textul lung pe doua randuri nu mai iese din pastila */
#fb-nota { flex: 1 1 auto; min-width: 0; }
#fb-nota button { flex: 1 1 0; min-width: 0; }   /* 1 nov 2026: cele 5 note incap pe ecrane inguste */
.nota-reclama { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: rgba(10, 102, 232, 0.14); border: 1px solid rgba(10, 102, 232, 0.28); color: var(--text); font-size: 15px; line-height: 1.45; text-align: left; }
.nota-reclama strong { color: var(--rosu); font-size: 17px; font-weight: 700; display: block; margin-bottom: 2px; }

/* ---------- pagina B (incearca.html), 29 oct 2026 ---------- */
.lpb .intrare-pagina, .lpb { align-items: flex-start; }
.lpb .sigla { margin-bottom: 2px; }
.lpb .sigla img { width: 150px; }
.lpb-titlu { margin: 0 0 6px; text-align: center; font-family: var(--font-titlu); font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--text); }
.lpb .sub { margin-bottom: 18px; }
.lpb-film { margin: 0 auto 20px; width: 168px; }
/* 1 nov 2026 (audit, lotul 3): pe telefon formularul vine imediat sub titlu, exemplul dupa el */
@media (max-width: 899px) {
  .lpb .intrare { display: flex; flex-direction: column; }
  .lpb .lpb-film { order: 1; margin-top: 24px; }
  .lpb .subsol-legal { order: 2; }
}
.lpb-film figcaption { margin-top: 8px; text-align: center; font-size: 13px; line-height: 18px; color: var(--text2); }
.lpb-pas { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); margin-bottom: 12px; }
.lpb-explicatie { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--text); }
.lpb .legaturi-intrare a.text-btn { text-decoration: none; }
.lpb .intrare-card .mesaj-eroare { text-align: left; padding: 0 0 12px; }

/* 1 nov 2026: pe telefoanele inguste (sub 400 px) „Template 1” se rupea in mijlocul cuvantului; miniatura mai mica si fara rupere in cuvinte */
@media (max-width: 400px) {
  .seg.seg-template button .mini-tpl { width: 34px; height: 60px; }
  .seg.seg-template button .txt-tpl { overflow-wrap: normal; word-break: normal; }
  .seg.seg-template button .txt-tpl strong { font-size: 14px; }
}

/* 1 nov 2026 (Antal): contorul textului din feedback - rosu sub 10 caractere, verde de la 10 */
.fb-contor { display: block; font-size: 13px; margin-top: 6px; font-weight: 600; }
.fb-contor.rosu { color: var(--rosu); }
.fb-contor.verde { color: var(--verde); }
#salveaza-galerie { margin-top: 0; }

/* 1 nov 2026 (Antal): „Ascultă vocea aleasă” sa se vada clar ca buton de redare */
.buton.buton-asculta { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--albastru-fin); color: var(--albastru); border: 2px solid var(--albastru); font-weight: 700; }
.buton.buton-asculta:hover { background: var(--albastru-fin2); }
.buton.buton-asculta .ico-asculta { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 13px; padding-left: 2px; }
.buton.buton-asculta.ruleaza .ico-asculta { padding-left: 0; }

/* 1 nov 2026 (audit, lotul 1): pasul curent, butonul principal fix jos, film mai mic pe telefon, fereastra cu puncte */
.pasi { margin: -4px 0 16px; }
.pasi-bara { display: flex; gap: 6px; margin-bottom: 8px; }
.pasi-bara span { flex: 1; height: 5px; border-radius: 3px; background: var(--sep); }
.pasi-bara span.activ { background: var(--albastru); }
.pasi-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text2); }
.pasi-text strong { color: var(--text); font-weight: 650; }
.bara-jos { position: sticky; bottom: 0; z-index: 20; margin: 8px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--sep); box-shadow: 0 -6px 16px rgba(0,0,0,.06); }
.bara-jos .buton { width: 100%; }
.foaie-lista { margin: 12px 0 20px; padding-left: 20px; }
.foaie-lista li { font-size: 15px; line-height: 1.5; color: var(--text); margin-bottom: 8px; }
.foaie-lista strong { font-weight: 700; }
.foaie h2.titlu-rosu { color: var(--rosu); }
/* 1 nov 2026 (Antal): ecranele pasului 3, „Vezi toate template-urile” evident, spatiu intre link si titlul din bara */
.inapoi-sub { display: inline-block; margin: 0 0 12px; font-size: 16px; }
.buton.secundar.buton-evident { border: 2px solid var(--albastru); color: var(--albastru); font-weight: 650; background: var(--albastru-fin); }
.nav { column-gap: 12px; }
/* 1 nov 2026 (Antal): comutatorul tremura cand lipseste bifa; butoanele principale au o unda albastra la cateva secunde */
@keyframes tremura { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-7px); } 35%, 75% { transform: translateX(7px); } }
.comutator.tremura { animation: tremura .45s ease-in-out 2; }
.declaratie-mesaj { margin: 0; padding: 8px 16px 12px; text-align: left; font-size: 14px; }
.buton.puls { position: relative; }
.buton.puls::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: puls-unda 3.2s ease-out 1s infinite; }
@keyframes puls-unda { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--albastru) 55%, transparent); }
  45%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--albastru) 0%, transparent); } }
.buton.puls:disabled::after, body:has(input:focus, textarea:focus, select:focus) .buton.puls::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .buton.puls::after, .comutator.tremura { animation: none; } }
.bara-jos .bara-inapoi { display: block; width: 100%; margin-top: 6px; text-align: center; }
.foaie-corp > .buton + .buton { margin-top: 10px; }
.spre-parere { margin-top: 4px; }
@media (max-width: 899px) {
  .film-cadru { width: min(360px, 100%, calc(46vh * 9 / 16)); }
}

/* 1 nov 2026 (audit, lotul 2) */
.nav-grup-dreapta { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 12px; }
.nav-ajutor { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--albastru); background: var(--celula); color: var(--albastru);
  font-size: 17px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.nav-ajutor::after { content: ""; position: absolute; inset: -6px; }
.nav-ajutor:hover { background: var(--albastru-fin); }
.ajutor-lista { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.ajutor-rand { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--chenar); border-radius: var(--raza-mica); background: var(--celula); color: var(--text); text-decoration: none; }
.ajutor-rand:hover { border-color: var(--albastru); }
.ajutor-titlu { font-size: 16px; font-weight: 650; color: var(--albastru); }
.ajutor-sub { font-size: 13px; color: var(--text2); }
.camp-lipsa { outline: 2px solid var(--rosu); outline-offset: 2px; border-radius: 10px; }
.bara-jos .mesaj { margin: 0 0 8px; font-size: 14px; }
.fb-contor.gri { color: var(--text2); font-weight: 500; }
.eticheta-stare.portocaliu { background: rgba(230, 120, 0, 0.14); color: var(--portocaliu); }
.intrebari details { background: var(--celula); border: 1px solid var(--chenar); border-radius: var(--raza-mica); margin: 0 0 8px; padding: 0 14px; }
.intrebari summary { cursor: pointer; padding: 14px 0; font-size: 16px; font-weight: 600; color: var(--text); }
.intrebari details p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--text); }
.intrebari .grup-titlu { margin: 22px 2px 8px; }
.poza-sterge::after { content: ""; position: absolute; inset: -9px; }
/* 1 nov 2026 (Antal): mesajul scurt (toast) nu mai acopera butonul din bara fixa de jos */
body:has(form:not([hidden]) > .bara-jos, section:not([hidden]) > #bara-film:not([hidden])) .toast { bottom: calc(env(safe-area-inset-bottom) + 124px); }
/* 1 nov 2026 (Antal): „?” se clatina la ~6 s pana la prima apasare */
@keyframes cheama { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-16deg) scale(1.08); } 88% { transform: rotate(14deg) scale(1.08); }
  91% { transform: rotate(-10deg); } 94% { transform: rotate(6deg); } 97% { transform: rotate(-2deg); } }
.nav-ajutor.cheama { animation: cheama 6s ease-in-out 1.5s infinite; }
@media (prefers-reduced-motion: reduce) { .nav-ajutor.cheama { animation: none; } }

/* 2 nov 2026 (Antal): pagina de administrare foloseste toata latimea pe desktop, fara derulare stanga-dreapta in tabele */
@media (min-width: 900px) {
  .admin-lat .continut, .admin-lat .nav { max-width: 1800px; }
}