/* =========================================================
   CAMERE.MD — Design System (v2, fidel wireframe-ului original)
   ========================================================= */

:root{
  color-scheme:light;
  --stepper-h:76px;   /* inaltimea barei de pasi; offsetul de scroll deriva din ea */
  --surface:#FAF9F5;
  --surface-raised:#FFFFFF;
  --surface-sunken:#F1EFE9;
  --text:#171A20;
  --text-muted:#5B6270;
  --text-faint:#666b74;      /* trece AA pe toate cele trei suprafete deschise:
                                5.36 pe alb, 5.08 pe crem, 4.66 pe adancitura.
                                #6b7079 cadea la 4.33 pe adancitura. */
  --border:#E4E0D5;
  --border-strong:#D3CEC0;

  /* Acelasi accent ca site-ul (tokens.css --accent). Doua portocalii diferite
     ar reface exact problema C1 din audit: doua palete in acelasi produs. */
  --accent:#EA6B08;          /* forma: umpluturi mari, borduri, iconite */
  --accent-strong:#B85105;   /* umplutura de buton - alb pe ea da 4.98 */
  --accent-press:#9C4405;    /* apasat/hover: se inchide, nu se deschide */
  --accent-deep:#C85A06;
  --accent-soft:#F8EBDD;
  --media-surface:#FFFFFF;   /* rama ilustratiilor: la fel in ambele teme */
  --accent-glow:rgba(234,107,8,.28);
  /* #EA6B08 pe alb = 3.2:1 -> doar suprafete si text mare.
     Textul mic portocaliu foloseste varianta inchisa (7.6:1). */
  --accent-text:#A84A05;   /* aceeasi valoare ca pe site: 5.47 pe crem */

  /* stări semantice — o singură definiție pentru tot constructorul */
  --success:#167a4b;
  --success-soft:#E9F9F1;
  --success-border:#A7E4C6;
  --warning:#8a5a12;
  --warning-soft:#FFF7E8;
  --warning-border:#F5D9A8;
  --error:#a81f1f;
  --error-soft:#FEF0F0;
  --error-border:#F5B5B5;
  /* teal = stare tehnica, niciodata actiune (tokens.css --info) */
  --info:#0F5E62;
  --info-soft:#E4F1EF;
  --info-border:#B6D8D6;


  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow-md:0 12px 28px rgba(16,24,40,.10);

  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  /* Aceeasi scara ca pe site (assets/css/tokens.css), acelasi vocabular:
     numele e valoarea, totul pe grila de 4px. Constructorul are foaie de stil
     separata pentru ca nu se incarca niciodata impreuna cu a site-ului, dar
     spatierea se numeste la fel in ambele, ca sa nu existe doua limbi. */
  --sp-4:4px;
  --sp-8:8px;
  --sp-12:12px;
  --sp-16:16px;
  --sp-20:20px;
  --sp-24:24px;
  --sp-32:32px;
  --sp-36:36px;
  --sp-40:40px;
  --sp-44:44px;
  --sp-48:48px;
  --sp-64:64px;
  --sp-72:72px;
  --sp-76:76px;
  --sp-100:100px;
  --sp-112:112px;

  /* Rampa tipografica, identica cu cea din assets/css/tokens.css. Aceleasi
     nume si aceleasi valori: constructorul are foaie separata, dar nu o a
     doua scara. */
  --fs-h2:clamp(2rem,4vw,3.6rem);
  --fs-stat:clamp(1.75rem,2.6vw,2.4rem);
  --fs-h3:clamp(1.35rem,2.2vw,2.1rem);
  --fs-h4:clamp(1.1rem,1.5vw,1.45rem);
  --fs-lead:clamp(1rem,1.15vw,1.15rem);
  --fs-body:clamp(.95rem,1vw,1.0625rem);
  --fs-small:.875rem;
  --fs-label:.8125rem;
  --fs-mono:.75rem;
  --fs-micro:.6875rem;

  /* straturi, aceeasi logica ca pe site */
  --z-local:40;
  --z-dock:50;
  --z-nav:100;
  --z-drawer:200;
  --z-lightbox:300;

  /* Aceeasi tripleta ca site-ul (tokens.css): titlu condensat, corp umanist,
     mono pentru orice e factual - preturi, numere, cantitati. */
  --font-sans:"Source Sans 3","Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:"Barlow Semi Condensed","Rubik",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms;
  --dur-base:220ms;
  --dur-slow:340ms;

  --header-h:64px;
  --stepper-h:92px;
  --content-max:1180px;
}

/* ---- TEMA INCHISA ----
   Aceleasi nume, alte valori — exact ca in assets/css/tokens.css. Foile nu se
   incarca impreuna, dar vocabularul si comportamentul sunt identice.
   Starile isi schimba si ele valorile: un fundal #E9F9F1 pe pagina inchisa
   ar fi o pata alba. Pe inchis devin straturi translucide din culoarea starii. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;   /* fara el, scrollbar-urile si campurile native raman deschise */
    --surface:#0A111C;
    --surface-raised:#0F1723;
    --surface-sunken:#06090F;
    --text:#EEF1F4;
    --text-muted:#8B97A6;
    --text-faint:#78838F;
    --border:rgba(255,255,255,.10);
    --border-strong:rgba(255,255,255,.20);
    --accent-text:#EA6B08;
    --accent-soft:rgba(234,107,8,.14);
    --accent-glow:rgba(234,107,8,.34);
    --success:#3ECF8E; --success-soft:rgba(62,207,142,.12);  --success-border:rgba(62,207,142,.34);
    --warning:#E3A008; --warning-soft:rgba(227,160,8,.12);   --warning-border:rgba(227,160,8,.34);
    --error:#F16A6A;   --error-soft:rgba(241,106,106,.12);   --error-border:rgba(241,106,106,.34);
    --info:#3FB9BD;    --info-soft:rgba(63,185,189,.12);     --info-border:rgba(63,185,189,.32);
    /* umbrele nu se vad pe fundal inchis: elevatia o duce suprafata */
    --shadow-xs:none;
    --shadow-sm:none;
    --shadow-md:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --surface:#0A111C;
  --surface-raised:#0F1723;
  --surface-sunken:#06090F;
  --text:#EEF1F4;
  --text-muted:#8B97A6;
  --text-faint:#78838F;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.20);
  --accent-text:#EA6B08;
  --accent-soft:rgba(234,107,8,.14);
  --accent-glow:rgba(234,107,8,.34);
  --success:#3ECF8E; --success-soft:rgba(62,207,142,.12);  --success-border:rgba(62,207,142,.34);
  --warning:#E3A008; --warning-soft:rgba(227,160,8,.12);   --warning-border:rgba(227,160,8,.34);
  --error:#F16A6A;   --error-soft:rgba(241,106,106,.12);   --error-border:rgba(241,106,106,.34);
  --info:#3FB9BD;    --info-soft:rgba(63,185,189,.12);     --info-border:rgba(63,185,189,.32);
  /* umbrele nu se vad pe fundal inchis: elevatia o duce suprafata */
  --shadow-xs:none;
  --shadow-sm:none;
  --shadow-md:none;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-sans);color:var(--text);background:var(--surface);
  line-height:1.45;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs,4px)}

.container{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-24)}

/* ---------- "browser chrome" frame — semnătura vizuală a wireframe-ului ---------- */
.app-frame{
  max-width:var(--content-max);margin:var(--sp-32) auto;
  background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.app-frame__bar{
  height:34px;display:flex;align-items:center;gap:var(--sp-8);padding:0 var(--sp-16);
  background:var(--surface-sunken);border-bottom:1px solid var(--border);
}
.app-frame__dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}

/* ---------- Header hero (navy, full-bleed, doar pe ecranul 1) ---------- */
.hero-header{background:var(--surface-sunken);padding:var(--sp-32) var(--sp-24) var(--sp-48)}
.hero-header .brand{color:var(--text)}
.hero-header .brand__mark{background:var(--text);color:var(--surface)}
.hero-header__title{color:var(--text);font-size:var(--fs-h3);font-weight:800;letter-spacing:-.01em;margin-top:var(--sp-24)}
.hero-header__subtitle{color:var(--text-muted);margin-top:var(--sp-8);font-size:var(--fs-body)}

/* ---------- Header simplu (restul ecranelor) ---------- */
.site-header{
  height:var(--header-h);display:flex;align-items:center;
  background:var(--surface-raised);border-bottom:1px solid var(--border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:var(--sp-8);font-weight:800;font-size:var(--fs-body);letter-spacing:.01em}
.brand__mark{
  width:28px;height:28px;border-radius:var(--radius-sm);background:var(--text);color:var(--surface);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand__mark svg{width:15px;height:15px}
.contact{display:flex;align-items:center;gap:var(--sp-8);font-weight:600;font-size:var(--fs-small);color:var(--text-muted)}
.contact svg{width:15px;height:15px;color:var(--accent-text)}

/* ---------- Stepper: cercuri numerotate + linie conectoare (ca în wireframe) ---------- */
.stepper-bar{--stepper-h:76px;background:var(--surface-raised);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:var(--z-local)}
.stepper-bar__inner{padding:var(--sp-16) var(--sp-24)}
.stepper{display:flex;align-items:flex-start;position:relative;margin:0;padding:0;list-style:none}
.stepper__connector{
  position:absolute;top:17px;left:0;right:0;height:2px;background:var(--border);z-index:0;
  margin:0 calc(100%/12);
}
.stepper__connector-fill{
  position:absolute;top:0;left:0;height:100%;width:0%;background:var(--accent);
  transition:width var(--dur-slow) var(--ease);
}
.step-node{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);position:relative;z-index:1}
.step-node__circle{
  width:34px;height:34px;border-radius:50%;background:var(--surface-raised);
  border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--fs-small);color:var(--text-faint);
  transition:all var(--dur-base) var(--ease);
}
.step-node__circle svg{width:15px;height:15px}
.step-node__label{font-size:var(--fs-micro);font-weight:700;color:var(--text-faint)}
.step-node.is-done .step-node__circle{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.step-node.is-done .step-node__label{color:var(--text-muted)}
.step-node.is-active .step-node__circle{
  background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;
  box-shadow:0 0 0 5px var(--accent-glow);
}
.step-node.is-active .step-node__label{color:var(--accent-text)}
@media (max-width:720px){
  .step-node__label{display:none}
  .stepper-bar__mobile-label{display:block!important}
}
.stepper-bar__mobile-label{display:none;font-size:var(--fs-label);font-weight:700;color:var(--text-muted);margin-top:var(--sp-8)}
.stepper-bar__mobile-label b{color:var(--accent-text)}

/* ---------- Layout pas ---------- */
/* Bara de pasi e sticky. Offsetul vine din aceeasi variabila ca inaltimea ei,
   nu dintr-o valoare ghicita: daca bara se schimba, spatiul se schimba cu ea.
   scroll-margin-top face ca orice scroll automat catre un titlu sa se opreasca
   sub bara, nu in spatele ei. */
.step{padding:var(--sp-24) 0 var(--sp-64)}
.step__title,
.step [id]{scroll-margin-top:calc(var(--stepper-h) + var(--sp-16))}
.step__head{max-width:640px;margin-bottom:var(--sp-24)}
.step__eyebrow{color:var(--accent-text);font-weight:800;font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-8)}
.step__title{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.01em}
.step__subtitle{margin-top:var(--sp-8);color:var(--text-muted);font-size:var(--fs-body)}

.step-grid{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-24);align-items:start}
@media (max-width:980px){.step-grid{grid-template-columns:1fr}}

/* ---------- Butoane: dreptunghi rotunjit, NU pastilă ---------- */
/* Butonul. Aceeasi geometrie si aceleasi variante ca pe site
   (assets/css/base.css): padding 16/24, inaltime minima 50px, raza mica,
   Barlow 600 majuscule la --fs-lead. Cele doua foi nu se incarca niciodata
   impreuna, dar butonul e acelasi obiect in ambele - inclusiv ca inaltime,
   ceea ce rezolva si tinta de atingere de 44px pe telefon. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  padding:var(--sp-16) var(--sp-24);min-height:50px;
  border-radius:var(--radius-sm);border:1px solid transparent;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-lead);
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent-strong);color:#fff}
.btn--primary:hover{background:var(--accent-press)}
.btn--secondary{background:var(--surface-raised);color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--text-muted)}
.btn--block{width:100%}
.btn--sm{padding:var(--sp-12) var(--sp-16);min-height:44px;font-size:var(--fs-small)}
.btn--lg{padding:var(--sp-20) var(--sp-32);min-height:60px;font-size:var(--fs-h4)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:15px;height:15px}

.step-actions{display:flex;justify-content:space-between;gap:var(--sp-12);margin-top:var(--sp-32)}

/* ---------- Card obiect (tip proprietate) — icon simplu, fără chip colorat ---------- */
.object-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-12)}
@media (max-width:720px){.object-grid{grid-template-columns:repeat(2,1fr)}}

.object-card{
  background:var(--surface-raised);border:1.5px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-24) var(--sp-12);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);
  transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);width:100%;
}
.object-card{position:relative}
.object-card:hover{border-color:var(--border-strong)}
/* Un singur mijloc dominant: bordura. Fundalul e nuanta subtila din tokens,
   nu o culoare inventata pentru starea asta. Iconita NU-si mai schimba
   culoarea - era al treilea semnal pentru acelasi lucru. */
.object-card.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.object-card__icon{width:84px;height:84px;color:var(--text)}

/* Indicator de forma, ca starea sa fie evidenta si fara culoare. */
.object-card__mark{
  position:absolute;top:var(--sp-12);right:var(--sp-12);
  display:grid;place-items:center;
  width:22px;height:22px;border-radius:var(--radius-pill);
  border:1.5px solid var(--border-strong);
  background:transparent;color:transparent;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.object-card__mark svg{width:12px;height:12px}
.object-card.is-selected .object-card__mark{
  background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;
}
/* Focusul din tastatura e distinct de selectie: contur, nu umplutura. */
.object-card:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.object-card__icon svg,.object-card__icon img{width:100%;height:100%;object-fit:contain}
.object-card__title{font-weight:700;font-size:var(--fs-body)}

/* ---------- Trust badges ---------- */
.trust-row{display:flex;flex-wrap:wrap;gap:var(--sp-24);margin-top:var(--sp-24);padding-top:var(--sp-24);border-top:1px solid var(--border)}
.trust-item{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-label);font-weight:600;color:var(--text-muted)}
.trust-item svg{width:17px;height:17px;color:var(--text-faint);flex-shrink:0}

/* ---------- Zona interactivă: imagine + pin-uri ---------- */
.stage-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-16)}
.stage{position:relative;border-radius:var(--radius-md);overflow:hidden;background:#fff}
.stage svg{width:100%;height:auto;display:block}

.pin{position:absolute;transform:translate(-50%,-100%);width:30px;height:30px;background:none;border:none;padding:0}
.pin__glow{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
  opacity:0;transition:opacity var(--dur-base) var(--ease);pointer-events:none;
}
.pin.is-selected .pin__glow{opacity:1}
.pin__dot{
  width:30px;height:30px;color:var(--accent-text);position:relative;display:block;
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.18));
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.pin__dot svg{width:100%;height:100%}
.pin:hover .pin__dot{transform:scale(1.1)}
.pin:not(.is-selected) .pin__dot{opacity:0}
.pin__idle-dot{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  width:10px;height:10px;border-radius:50%;background:var(--surface-raised);
  border:2.5px solid var(--text-faint);transition:opacity var(--dur-fast) var(--ease);
}
.pin.is-selected .pin__idle-dot{opacity:0}
.pin__label{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:var(--sp-8);
  font-size:var(--fs-micro);font-weight:700;color:var(--text);white-space:nowrap;
  background:var(--surface-raised);padding:3px var(--sp-8);border-radius:var(--radius-pill);
  border:1px solid var(--border);
}
.pin.is-selected .pin__label{border-color:var(--accent);color:var(--accent-deep)}

.stage-tabs{display:flex;gap:var(--sp-8);margin-bottom:var(--sp-16);flex-wrap:wrap;background:var(--surface-sunken);padding:var(--sp-4);border-radius:var(--radius-md);width:fit-content}
.stage-tab{padding:var(--sp-8) var(--sp-16);border-radius:var(--radius-sm);font-weight:700;font-size:var(--fs-label);color:var(--text-muted);transition:all var(--dur-fast) var(--ease)}
.stage-tab:hover{color:var(--text)}
.stage-tab.is-active{background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-xs)}

.hint-link{display:inline-block;margin-top:var(--sp-16);font-size:var(--fs-label);font-weight:700;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* ---------- Sidebar preț ---------- */
/* offset-ul corespunde barei de pași, care e sticky la top:0 (bug M3) */
.price-panel__body{max-height:min(52vh,520px);overflow-y:auto;scrollbar-gutter:stable;padding-right:var(--sp-8)}
.price-panel{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-16);position:sticky;top:calc(var(--stepper-h) + var(--sp-16))}
.price-panel__title{font-weight:800;font-size:var(--fs-body);margin-bottom:var(--sp-12)}
/* Coloana de pret e locul unde omul se uita la bani: nu are voie sa se rupa.
   Valoarea sta pe un rand, cu latime minima cat cea mai mare suma plauzibila
   (6 cifre + moneda), aliniata la dreapta si cu cifre tabulare, ca sumele sa
   se citeasca in coloana. Denumirea primeste min-width:0, altfel ar refuza sa
   se stranga si ar impinge valoarea pe randul urmator. */
.price-line{display:flex;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-8) 0;font-size:var(--fs-small);border-bottom:1px solid var(--border)}
.price-line:last-of-type{border-bottom:none}
.price-line__label{color:var(--text-muted);min-width:0;overflow-wrap:anywhere}
.price-line__val{
  font-weight:700;color:var(--text);
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
  min-width:8ch;
  font-variant-numeric:tabular-nums;
}
.price-panel__divider{height:1px;background:var(--border);margin:var(--sp-12) 0}
.price-panel__total{display:flex;align-items:baseline;justify-content:space-between}
.price-panel__total-label{font-weight:700;font-size:var(--fs-small);color:var(--text-muted)}
.price-panel__total-val{font-weight:800;font-size:var(--fs-h4);color:var(--accent-text);font-variant-numeric:tabular-nums}
.price-panel__note{font-size:var(--fs-mono);color:var(--text-faint);margin-top:var(--sp-4)}
.price-panel__actions{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-16)}

.price-bar-mobile{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);background:var(--surface-raised);
  border-top:1px solid var(--border);padding:var(--sp-12) var(--sp-16);
  box-shadow:0 -6px 20px rgba(16,24,40,.08);align-items:center;justify-content:space-between;gap:var(--sp-12);
}
.price-bar-mobile__total{display:flex;flex-direction:column;line-height:1.2}
.price-bar-mobile__total b{font-size:var(--fs-lead);color:var(--accent-text);font-variant-numeric:tabular-nums}
.price-bar-mobile__total span{font-size:var(--fs-micro);color:var(--text-faint)}
/* Lista de echipamente de pe telefon: se deschide din bara, in sus, peste pagina. */
.price-bar-mobile__detalii{flex:1;min-width:0}
.price-bar-mobile__detalii>summary{list-style:none;cursor:pointer;min-height:44px;justify-content:center}
.price-bar-mobile__detalii>summary::-webkit-details-marker{display:none}
.price-bar-mobile__total .price-bar-mobile__toggle{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-label);font-weight:700;color:var(--text)}
.price-bar-mobile__total .price-bar-mobile__toggle span{font-size:inherit;color:inherit}
.price-bar-mobile__toggle svg{width:14px;height:14px;flex-shrink:0;transition:transform var(--dur-fast) var(--ease)}
.price-bar-mobile__detalii[open] .price-bar-mobile__toggle svg{transform:rotate(180deg)}
.price-bar-mobile__panou{position:absolute;left:0;right:0;bottom:100%;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface-raised);border-top:1px solid var(--border);padding:var(--sp-16);box-shadow:0 -12px 24px rgba(16,24,40,.12)}
.price-bar-mobile__panou .price-panel__body{max-height:none;overflow:visible;padding-right:0}
/* Revenirea la loc cand gestul de inchidere nu trece pragul (ui.js, trageInJos).
   Manerul spune ca foaia se trage; e pe pseudo-element, deci supravietuieste
   randarii panoului prin innerHTML. */
.price-bar-mobile__panou{transition:transform var(--dur-base) var(--ease)}
.price-bar-mobile__panou::before{content:"";display:block;width:36px;height:4px;margin:calc(-1 * var(--sp-8)) auto var(--sp-12);border-radius:var(--radius-pill);background:var(--border-strong)}
@media (prefers-reduced-motion:reduce){.price-bar-mobile__panou{transition:none}}
@media (max-width:980px){
  .price-panel{display:none}
  .price-bar-mobile{display:flex}
  .step{padding-bottom:var(--sp-100)}
}

/* ---------- Carduri dispozitiv (foto + specs chips + ribbon) ---------- */
.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
@media (max-width:640px){.device-grid{grid-template-columns:1fr}}

.device-card{background:var(--surface-raised);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-16);position:relative}
.device-card.is-recommended{border-color:var(--accent)}
.device-card__ribbon{
  position:absolute;top:12px;left:-1px;background:var(--success);color:#fff;font-size:var(--fs-micro);font-weight:800;
  padding:var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-8);letter-spacing:.03em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);
}
.device-card__top{display:flex;gap:var(--sp-12)}
.device-card__thumb{width:64px;height:64px;border-radius:var(--radius-sm);background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted)}
.device-card__thumb svg{width:32px;height:32px}
.device-card__title{font-weight:700;font-size:var(--fs-small);margin-bottom:3px}
.device-card__benefit{font-size:var(--fs-label);color:var(--text-muted)}

.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-12)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-4);background:var(--surface-sunken);border-radius:var(--radius-sm);padding:var(--sp-4) var(--sp-8);font-size:var(--fs-micro);font-weight:700;color:var(--text-muted)}
.chip svg{width:12px;height:12px}

.accordion{margin-top:var(--sp-12)}
.accordion__trigger{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-mono);font-weight:700;color:var(--text-muted)}
.accordion__trigger svg{width:12px;height:12px;transition:transform var(--dur-base) var(--ease)}
.accordion__trigger.is-open svg{transform:rotate(180deg)}
.accordion__panel{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.accordion__panel-inner{padding-top:var(--sp-8)}

.device-card__meta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px solid var(--border);gap:var(--sp-8)}
.device-card__zone{font-size:var(--fs-micro);font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em}
.device-card__price{font-weight:800;font-size:var(--fs-body)}
.device-card__actions{margin-top:var(--sp-12)}

/* ---------- Modal Magazin Online (centrat, ca în wireframe) ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;
  padding:var(--sp-16);z-index:var(--z-nav);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease);
}
.modal-backdrop.is-open{opacity:1;pointer-events:auto}
.modal{background:var(--surface-raised);width:100%;max-width:600px;max-height:min(86dvh,660px);border-radius:var(--radius-lg);transform:scale(.97);opacity:0;transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}
.modal-backdrop.is-open .modal{transform:scale(1);opacity:1}
.modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-16)}
.modal__title{font-weight:800;font-size:var(--fs-body)}
.modal__close{width:28px;height:28px;border-radius:50%;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center}
.modal__close svg{width:13px;height:13px}

.option-row{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-8);border:1.5px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--sp-8)}
.option-row.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.option-row__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.option-row.is-selected .option-row__radio{border-color:var(--accent)}
.option-row__radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--dur-fast) var(--ease)}
.option-row.is-selected .option-row__radio::after{transform:scale(1)}
.option-row__thumb{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--surface-sunken);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.option-row__thumb svg{width:22px;height:22px}
/* Pozele produselor vin decupate pe alb; pe fundal inchis, miniatura are
   nevoie de propriul panou, altfel apare un dreptunghi alb neintentionat. */
.option-row__thumb img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:var(--radius-sm)}
/* O camera care nu ajunge la distanta ceruta ramane alegabila, dar nu se
   prezinta ca si cum ar fi potrivita. */
.option-row.is-short{opacity:.72}
.option-row.is-short .option-row__desc b{color:var(--warning)}
.option-none{padding:var(--sp-16);text-align:center;color:var(--text-muted);font-size:var(--fs-label)}
.option-row__body{flex:1;min-width:0;text-align:left}
/* Amandoua sunt <span>: fara `block`, numele si specificatiile curg pe acelasi
   rand si se citesc ca un singur sir. S-a vazut abia cand linia de specificatii
   a crescut de la o valoare la trei. */
.option-row__title{display:block;font-weight:700;font-size:var(--fs-small);line-height:1.25}
.option-row__desc{display:block;margin-top:2px;font-size:var(--fs-mono);color:var(--text-muted)}
/* Constructorul n-avea .sr-only, iar eticheta menita cititorului de ecran se
   vedea pe ecran. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.option-row__price{font-weight:800;font-size:var(--fs-small);white-space:nowrap}
.modal__actions{display:flex;justify-content:flex-end;gap:var(--sp-12)}

/* ---------- Ecran sumar ---------- */
.summary-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--sp-12)}
.summary-card__title{font-weight:800;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:var(--sp-12) var(--sp-16);background:var(--surface-sunken);display:flex;align-items:center;justify-content:space-between}
.summary-group__header{display:flex;align-items:center;gap:var(--sp-8);background:none}
.summary-group__chevron svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease);color:var(--text-faint)}
.summary-card.is-open .summary-group__chevron svg{transform:rotate(180deg)}
.summary-card__panel{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.summary-row{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-top:1px solid var(--border)}
.summary-row__thumb{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}
.summary-row__thumb svg{width:18px;height:18px}
.summary-row__label{flex:1;font-size:var(--fs-small);color:var(--text)}
.summary-row__meta{font-size:var(--fs-micro);color:var(--text-faint)}
.summary-row__val{font-weight:700;font-size:var(--fs-small)}

.brand-row{display:flex;align-items:center;gap:var(--sp-24);justify-content:center;padding:var(--sp-16) 0;color:var(--text-faint);font-weight:800;font-size:var(--fs-small);letter-spacing:.02em}

.reassurance{display:flex;flex-wrap:wrap;gap:var(--sp-16);padding:var(--sp-12) var(--sp-16);background:var(--success-soft);border-radius:var(--radius-md);margin:var(--sp-16) 0}
.reassurance .trust-item svg{color:var(--success)}

/* ---------- Toggle switch ---------- */
.toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:24px;border-radius:var(--radius-pill);background:var(--border-strong);flex-shrink:0;transition:background var(--dur-base) var(--ease)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease)}
.toggle.is-on{background:var(--accent)}
.toggle.is-on::after{transform:translateX(16px)}

.segmented{display:grid;gap:var(--sp-8)}
.segmented--2{grid-template-columns:1fr 1fr}
.segmented--4{grid-template-columns:1fr 1fr}
.segmented__opt{padding:var(--sp-8);border-radius:var(--radius-sm);border:1.5px solid var(--border);text-align:center;font-weight:700;font-size:var(--fs-label);color:var(--text-muted)}
.segmented__opt.is-selected{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}

.bordered-box{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-12)}
.bordered-box__title{font-weight:700;font-size:var(--fs-label);margin-bottom:var(--sp-8)}

/* ---------- Ajustarile din ecranul de rezultat ----------
   `<details>`, nu un acordeon scris de noi: se deschide cu tastatura, se
   deschide si cu JavaScript oprit, si e gasit de „cauta in pagina" al
   browserului chiar inchis. Un acordeon facut de mana pierde toate trei.

   Sunt inchise la pornire dinadins: omul vede intai ce i s-a propus si cat
   costa, si deschide doar ce vrea sa schimbe. */
.ajustare{border-top:1px solid var(--border)}
.ajustare:first-of-type{border-top:0}
.ajustare__cap{
  display:flex;align-items:center;gap:var(--sp-8);
  /* 44px inaltime de atingere, nu 32: panoul asta se deschide mai ales pe
     telefon, cu degetul. */
  min-height:44px;padding:var(--sp-8) 0;
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-body);
  cursor:pointer;list-style:none;
}
.ajustare__cap::-webkit-details-marker{display:none}
/* Sageata, la sfarsitul randului. `::after` pe rezumat, nu o imagine: se
   intoarce din CSS, deci nu cere nici fisier, nici JavaScript. */
.ajustare__cap::after{
  content:"";margin-left:auto;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-ui,.2s) ease;
}
.ajustare[open] > .ajustare__cap::after{transform:rotate(225deg) translate(-2px,-2px)}
.ajustare__cap:hover{color:var(--accent-ink,var(--accent))}
.ajustare__corp{padding:0 0 var(--sp-16)}
@media (prefers-reduced-motion:reduce){
  .ajustare__cap::after{transition:none}
}

/* ---------- generic ---------- */
.muted{color:var(--text-muted)}
.mt-3{margin-top:var(--sp-12)}
.mt-4{margin-top:var(--sp-16)}

.proto-nav{position:fixed;top:50%;right:16px;transform:translateY(-50%);z-index:var(--z-drawer);background:var(--surface-sunken);border-radius:var(--radius-pill);padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4);box-shadow:var(--shadow-md)}
.proto-nav a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-weight:800;font-size:var(--fs-micro);transition:all var(--dur-fast) var(--ease)}
.proto-nav a:hover{color:#fff}
.proto-nav a.is-current{background:var(--accent-strong);color:#fff}
@media (max-width:640px){.proto-nav{top:auto;bottom:92px;right:10px;transform:none;flex-direction:row}}

.fade-in{animation:fadeIn var(--dur-slow) var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.stagger>*{animation:fadeIn var(--dur-slow) var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.1s}
.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}

/* Aici exista o temă „teal" aplicată pe Oficiu și Teren, care rupea
   identitatea vizuală în două (bug C1). Eliminată: tipul obiectivului se
   comunică prin conținut — titlu, iconiță, ilustrație — nu prin rebranduirea UI-ului.
   NU reintroduce accente per-flux. */

/* ---------- rând cu contor +/- (Zone selectate) ---------- */
.counter-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-8) 0;border-top:1px solid var(--border)}
.counter-row:first-child{border-top:none}
.counter-row__label{font-weight:700;font-size:var(--fs-small)}
.counter-row__desc{font-size:var(--fs-mono);color:var(--text-faint);margin-top:2px}
.qty{display:flex;align-items:center;gap:var(--sp-8);flex-shrink:0}
.qty__btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.qty__btn svg{width:12px;height:12px}
.qty__val{font-weight:800;font-size:var(--fs-small);min-width:14px;text-align:center}

/* ---------- carduri de alegere (montaj, acces, curent, etc.) ---------- */
.choice-grid{display:grid;gap:var(--sp-8)}
.choice-grid--2{grid-template-columns:1fr 1fr}
.choice-grid--3{grid-template-columns:repeat(3,1fr)}
.choice-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.choice-grid--3,.choice-grid--4{grid-template-columns:1fr 1fr}}
.choice-card{background:var(--surface-raised);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-12);text-align:left;position:relative}
.choice-card.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.choice-card__check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:all var(--dur-fast) var(--ease)}
.choice-card.is-selected .choice-card__check{opacity:1;transform:scale(1)}
.choice-card__check svg{width:10px;height:10px}
.choice-card__icon{display:block;width:30px;height:30px;color:var(--text-muted);margin-bottom:var(--sp-8)}
.choice-card.is-selected .choice-card__icon{color:var(--accent-text)}
.choice-card__icon svg{width:100%;height:100%}
.choice-card__title{font-weight:700;font-size:var(--fs-small);margin-bottom:3px}
.choice-card__desc{font-size:var(--fs-mono);color:var(--text-faint);line-height:1.4}
.choice-card--center{text-align:center;display:flex;flex-direction:column;align-items:center}
.choice-card--center .choice-card__icon{margin-left:auto;margin-right:auto}

.choice-card--photo{display:flex;gap:var(--sp-12);align-items:flex-start;text-align:left}
.choice-card__photo{display:block;flex:none;width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken)}
.choice-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
.choice-card__body{display:block;flex:1;min-width:0}
.choice-card--photo .choice-card__title{margin-top:2px}
.choice-card--photo .choice-card__check{top:10px;right:10px}

/* ---------- card mărime încăpere (Oficiu step 2) ---------- */
.size-card{border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-12);text-align:center}
.size-card.is-selected{border-color:var(--accent);background:var(--accent-soft)}
/* .size-card__thumb — redefinit mai jos in sectiunea V3:
   `object-fit:cover` intr-o cutie de 96px taia imaginile portret (285x360),
   inconsistent intre ele. Vezi sectiunea IMAGINI DE PRODUS. */
.size-card__thumb svg{width:28px;height:28px}
.size-card__title{display:block;font-weight:700;font-size:var(--fs-label)}
.size-card__desc{display:block;font-size:var(--fs-micro);color:var(--text-faint);margin-top:3px;line-height:1.35}

/* ---------- toggle row generic ---------- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-8) 0;border-top:1px solid var(--border)}
.toggle-row:first-child{border-top:none}
/* Acordul, ca bifa langa „Trimite configuratia". Toata eticheta e tapabila. */
.consent-check{display:flex;align-items:flex-start;gap:var(--sp-8);margin-top:var(--sp-16);font-size:var(--fs-small);line-height:1.4;cursor:pointer}
.consent-check input{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.consent-check input[aria-invalid="true"]:not(:checked){outline:2px solid var(--error);outline-offset:2px}
.consent-check a{color:var(--accent-text);text-decoration:underline}
.toggle-row__label{font-weight:700;font-size:var(--fs-small)}

/* ---------- slider (lungime gard, etc.) ---------- */
.slider-block{text-align:center}
.slider-value{display:inline-block;font-weight:800;font-size:var(--fs-h4);background:var(--surface-sunken);padding:var(--sp-8) var(--sp-24);border-radius:var(--radius-pill);margin-bottom:var(--sp-16)}
input[type="range"].slider-input{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,40%),var(--border-strong) var(--fill,40%),var(--border-strong) 100%);
  outline:none;
}
input[type="range"].slider-input::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);
  border:3px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer;
}
input[type="range"].slider-input::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:var(--shadow-sm);cursor:pointer;
}
.slider-ticks{display:flex;justify-content:space-between;margin-top:var(--sp-8);font-size:var(--fs-micro);color:var(--text-faint);font-weight:600}

/* ---------- callout (info/avertisment) ---------- */
.callout{display:flex;gap:var(--sp-8);padding:var(--sp-12);border-radius:var(--radius-md);background:var(--warning-soft);font-size:var(--fs-mono);color:#8A5A12;line-height:1.5}
.callout svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.callout--info{background:var(--accent-soft);color:var(--accent-deep)}

/* ---------- banner sus (info scurt pe sumar) ---------- */
.banner{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-12) var(--sp-16);border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent-deep);font-size:var(--fs-small);font-weight:600;margin-bottom:var(--sp-16)}
.banner svg{width:19px;height:19px;flex-shrink:0}

/* ---------- checklist (montaj inclus) ---------- */
.checklist{display:flex;flex-direction:column;gap:var(--sp-8)}
.checklist__item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);font-size:var(--fs-label)}
.checklist__label{display:flex;align-items:center;gap:var(--sp-8)}
.checklist__label svg{width:16px;height:16px;color:var(--success);flex-shrink:0}
.checklist__val{font-weight:700;color:var(--text-muted)}

/* ---------- tabel comparativ (modal Apartament) ---------- */
.compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-mono);margin-top:var(--sp-12)}
.compare-table th{font-weight:700;color:var(--text-faint);text-align:left;padding:var(--sp-8) var(--sp-8);border-bottom:1px solid var(--border);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.02em}
.compare-table td{padding:var(--sp-8);border-bottom:1px solid var(--border);color:var(--text-muted)}
.compare-table tr.is-selected td{color:var(--accent-deep);font-weight:700}

/* ---------- link centrat pas ---------- */
.center-link{display:block;text-align:center;margin-top:var(--sp-16)}

/* =========================================================
   DESIGN SYSTEM — completare
   Componente care lipseau: validare, inputuri, stări,
   acoperire, verificare finală. Toate pe aceiași token-uri.
   ========================================================= */

/* ---------- utilitare ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-2{margin-top:var(--sp-8)}
.mt-5{margin-top:var(--sp-24)}
.mt-6{margin-top:var(--sp-32)}
.mb-3{margin-bottom:var(--sp-12)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
.stack{display:flex;flex-direction:column;gap:var(--sp-12)}

/* ---------- buton dezactivat (link, nu <button>) ---------- */
.btn.is-disabled{opacity:.45;cursor:not-allowed}
.btn.is-disabled:active{transform:none}
.btn--ghost{background:none;border-color:transparent;color:var(--text-muted)}
.btn--ghost:hover{color:var(--text);border-color:var(--border)}

/* ---------- NOTICE: eroare / avertisment / info / succes ----------
   Starea NU e comunicată doar prin culoare: fiecare variantă are
   iconiță proprie și titlu propriu (cerința #20). */
.notice{display:flex;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-radius:var(--radius-md);border:1px solid;margin-bottom:var(--sp-16);font-size:var(--fs-small);line-height:1.5}
.notice__icon{flex-shrink:0;width:18px;height:18px;margin-top:1px}
.notice__icon svg{width:100%;height:100%}
.notice__body{flex:1;min-width:0}
.notice__title{font-weight:800;margin-bottom:var(--sp-4)}
.notice__list{display:flex;flex-direction:column;gap:var(--sp-8);margin:0;padding:0;list-style:none}
.notice__list li{position:relative;padding-left:var(--sp-16)}
.notice__list li::before{content:"\2022";position:absolute;left:0;opacity:.6}
.notice__hint{display:block;font-size:var(--fs-mono);opacity:.85;margin-top:2px}
.notice__fix{display:inline-block;margin-top:var(--sp-4);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.notice--error{background:var(--error-soft);border-color:var(--error-border);color:var(--error)}
.notice--warning{background:var(--warning-soft);border-color:var(--warning-border);color:var(--warning)}
.notice--info{background:var(--info-soft);border-color:var(--info-border);color:var(--info)}
.notice--success{background:var(--success-soft);border-color:var(--success-border);color:var(--success)}

/* ---------- TOAST (înlocuiește alert) ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:var(--z-lightbox);max-width:min(520px,calc(100vw - 32px));
  padding:var(--sp-16) var(--sp-20);border-radius:var(--radius-md);font-size:var(--fs-small);font-weight:600;line-height:1.45;
  box-shadow:var(--shadow-md);opacity:0;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.toast.is-in{opacity:1;transform:translate(-50%,0)}
.toast--success{background:var(--success);color:#fff}
.toast--error{background:var(--error);color:#fff}
.toast--info{background:var(--text);color:var(--surface)}
/* Avertismentul exista ca „notice", dar nu si ca toast: `toast--warning`
   cadea pe fundalul implicit, adica pe verde de succes — exact culoarea
   gresita pentru „cererea ta poate ca a plecat deja". */
.toast--warning{background:var(--warning);color:#fff}
@media (max-width:980px){.toast{bottom:96px}}

/* ---------- INPUTURI ---------- */
.field{display:flex;flex-direction:column;gap:var(--sp-8);margin-bottom:var(--sp-12)}
.field__label{font-weight:700;font-size:var(--fs-label);color:var(--text)}
.field__label .req{color:var(--error);margin-left:2px}
.field__hint{font-size:var(--fs-mono);color:var(--text-faint)}
.input{width:100%;padding:var(--sp-12) var(--sp-12);border:1.5px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-raised);color:var(--text);font:inherit;font-size:var(--fs-small);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.input::placeholder{color:var(--text-faint)}
.input:hover{border-color:var(--border-strong)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.input:disabled{background:var(--surface-sunken);color:var(--text-faint);cursor:not-allowed}
.input[aria-invalid="true"]{border-color:var(--error);background:var(--error-soft)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(200,30,30,.18)}
textarea.input{min-height:88px;resize:vertical;line-height:1.5}
.field__error{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-mono);font-weight:700;color:var(--error)}
.field__error::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--error);color:#fff;font-size:var(--fs-micro);flex-shrink:0}
.field__error:empty{display:none}

/* input cu unitate de măsură lipită */
.input-unit{display:flex;align-items:stretch}
.input-unit .input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.input-unit__suffix{display:flex;align-items:center;padding:0 var(--sp-12);border:1.5px solid var(--border);border-left:none;
  border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);
  background:var(--surface-sunken);font-weight:700;font-size:var(--fs-label);color:var(--text-muted);white-space:nowrap}
.input-unit:focus-within .input{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.input-unit:focus-within .input-unit__suffix{border-color:var(--accent)}

/* perechea lungime x latime */
.dim-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-8);align-items:end}
.dim-pair__x{padding-bottom:var(--sp-12);font-weight:800;color:var(--text-faint)}
.dim-result{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12);
  margin-top:var(--sp-12);padding:var(--sp-12);border-radius:var(--radius-md);background:var(--surface-sunken)}
.dim-result__label{font-size:var(--fs-label);font-weight:700;color:var(--text-muted)}
.dim-result__val{font-weight:800;font-size:var(--fs-lead);font-variant-numeric:tabular-nums}

/* ---------- comutator de mod (dimensiuni / suprafață / perimetru) ---------- */
.mode-tabs{display:flex;gap:var(--sp-4);background:var(--surface-sunken);padding:var(--sp-4);border-radius:var(--radius-md);margin-bottom:var(--sp-16)}
.mode-tab{flex:1;padding:var(--sp-8) var(--sp-12);border-radius:var(--radius-sm);font-weight:700;font-size:var(--fs-label);color:var(--text-muted);text-align:center;transition:all var(--dur-fast) var(--ease)}
.mode-tab:hover{color:var(--text)}
.mode-tab.is-active{background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-xs)}
@media (max-width:560px){.mode-tabs{flex-direction:column}}

/* ---------- alegerea formei terenului ---------- */
.geometry-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-8)}
@media (max-width:860px){.geometry-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.geometry-grid{grid-template-columns:repeat(2,1fr)}}
.geo-card{border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-12) var(--sp-8);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);transition:all var(--dur-fast) var(--ease);width:100%;background:var(--surface-raised)}
.geo-card:hover{border-color:var(--border-strong)}
.geo-card.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.geo-card__shape{width:38px;height:30px;display:flex;align-items:center;justify-content:center}
.geo-card__shape i{display:block;/* 2px, nu --radius-xs: e un dreptunghi de 30px care indica forma
     obiectivului; la 4px si-ar pierde caracterul de contur geometric. */
  border:2px solid var(--text-muted);border-radius:2px;transition:border-color var(--dur-fast) var(--ease)}
.geo-card.is-selected .geo-card__shape i{border-color:var(--accent)}
.geo-shape--square i{width:24px;height:24px}
.geo-shape--rectangle i{width:34px;height:22px}
.geo-shape--elongated i{width:38px;height:11px}
.geo-shape--irregular i{width:32px;height:24px;clip-path:polygon(0 0,70% 0,100% 32%,100% 100%,22% 100%,0 66%)}
.geo-shape--unknown i{width:26px;height:24px;border-style:dashed}
.geo-card__title{font-weight:700;font-size:var(--fs-mono);line-height:1.25}
.geo-card__hint{font-size:var(--fs-micro);color:var(--text-faint);line-height:1.3}

/* ---------- statistici de recomandare ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-12)}
@media (max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{padding:var(--sp-12);border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--border)}
.stat__label{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint)}
.stat__val{font-weight:800;font-size:var(--fs-h4);margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.15}
.stat__unit{font-size:var(--fs-label);font-weight:700;color:var(--text-muted);margin-left:2px}
.stat__note{font-size:var(--fs-micro);color:var(--text-faint);margin-top:3px}
.stat--accent .stat__val{color:var(--accent-text)}

/* ---------- bara de acoperire ---------- */
.coverage{margin-top:var(--sp-16)}
.coverage__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-8)}
.coverage__label{font-size:var(--fs-label);font-weight:700;color:var(--text-muted)}
.coverage__val{font-weight:800;font-size:var(--fs-lead);font-variant-numeric:tabular-nums}
.coverage__track{height:10px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden;position:relative}
.coverage__fill{height:100%;border-radius:var(--radius-pill);background:var(--success);width:0;transition:width var(--dur-slow) var(--ease)}
.coverage__fill.is-low{background:var(--warning)}
.coverage__fill.is-critical{background:var(--error)}
.coverage__note{font-size:var(--fs-mono);color:var(--text-faint);margin-top:var(--sp-8)}

/* ---------- estimare: etichetă permanentă ---------- */
.estimate-tag{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-faint);background:var(--surface-sunken);
  padding:3px var(--sp-8);border-radius:var(--radius-pill);border:1px solid var(--border)}

/* ---------- ecran de verificare ---------- */
.review-group{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--sp-12);overflow:hidden}
.review-group__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  padding:var(--sp-12) var(--sp-16);background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.review-group__title{font-weight:800;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.review-group__edit{font-size:var(--fs-mono);font-weight:700;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.review-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (max-width:640px){.review-list{grid-template-columns:1fr}}
.review-item{display:flex;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-bottom:1px solid var(--border);font-size:var(--fs-small)}
.review-item__key{color:var(--text-muted)}
.review-item__val{font-weight:700;text-align:right}
.review-item--full{grid-column:1/-1}
.review-item--missing .review-item__val{color:var(--error)}

/* ---------- empty / loading ---------- */
.empty-state{text-align:center;padding:var(--sp-32) var(--sp-16);color:var(--text-faint)}
.empty-state__icon{width:40px;height:40px;margin:0 auto var(--sp-12);opacity:.4}
.empty-state__title{font-weight:700;font-size:var(--fs-small);color:var(--text-muted);margin-bottom:var(--sp-4)}
.empty-state__text{font-size:var(--fs-label)}
.price-line--empty .price-line__label{color:var(--text-faint);font-style:italic}
.price-line--discount{border-bottom:none}
.price-line--discount .price-line__label,.price-line--discount .price-line__val{color:var(--success)}
.price-line__qty{color:var(--text-faint);font-weight:700}
.price-panel__count{font-size:var(--fs-mono);color:var(--text-faint);font-weight:700;margin-bottom:var(--sp-12)}
/* Lista NU mai e propriul container de derulare.
   Inainte, lista de echipamente trecea de 340px si primea bara de derulare,
   iar cea de lucrari nu - diferenta de 15px scotea subtotalurile, care stau
   in afara listei, din aceeasi linie verticala (masurat: 1380 fata de 1395).
   Acum se deruleaza tot corpul panoului, deci fiecare rand - linie, reducere
   sau subtotal - imparte exact aceeasi latime. */
.price-panel__lines{margin:0;padding:0;list-style:none}
/* subtotalurile folosesc aceleasi reguli de coloana ca liniile */
.price-block__sum > span:last-child{
  flex:0 0 auto;white-space:nowrap;text-align:right;
  min-width:8ch;font-variant-numeric:tabular-nums;
}
.price-block__sum > span:first-child{min-width:0}

.skeleton{background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--border) 37%,var(--surface-sunken) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-sm);color:transparent}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.is-loading{pointer-events:none;opacity:.6}

/* ---------- stepper: nodurile parcurse devin linkuri ---------- */
a.step-node{text-decoration:none}
a.step-node:hover .step-node__circle{border-color:var(--accent);transform:scale(1.06)}
a.step-node:hover .step-node__label{color:var(--accent-text)}
.step-node__circle{display:flex}

/* ---------- accesibilitate ---------- */
.pin:focus-visible{outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .stagger>*{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px) and (min-width:981px){
  .step-grid{grid-template-columns:1fr 260px}
}
@media (max-width:980px){
  .stat-grid{gap:var(--sp-8)}
  .step__title{font-size:var(--fs-h4)}
}
@media (max-width:720px){
  .container{padding:0 var(--sp-16)}
  .step{padding:var(--sp-16) 0 var(--sp-64)}
  .step__title{font-size:var(--fs-h4)}
  .step-actions{flex-direction:column-reverse}
  .step-actions .btn{width:100%}
  .stepper-bar__inner{padding:var(--sp-12) var(--sp-16)}
  .step-node__circle{width:28px;height:28px;font-size:var(--fs-mono)}
  .stepper__connector{top:14px}
  .review-item{padding:var(--sp-8) var(--sp-12)}
}
@media (max-width:480px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat__val{font-size:var(--fs-lead)}
  .modal{padding:var(--sp-16)}
  .trust-row{gap:var(--sp-12)}
}

/* nimic nu are voie să depășească lățimea ecranului */
html,body{max-width:100%;overflow-x:hidden}
.stage-card,.bordered-box,.price-panel,.review-group{min-width:0}
table{max-width:100%}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- print: oferta pe hârtie ---------- */
@media print{
  .stepper-bar,.site-header,.price-bar-mobile,.step-actions,.toast,.modal-backdrop{display:none!important}
  body{background:#fff}
}

/* =========================================================
   V3 — MOBILE UX, BUGET, ZONE, IMAGINI
   ========================================================= */

/* ---------- ținte de atingere ----------
   44px este pragul sub care degetul ratează. Se aplică peste tot
   unde se apasă, nu doar pe butoanele principale. */
/* Se aplică pe ecrane înguste SAU pe dispozitive cu atingere.
   Doar `pointer: coarse` nu ajunge: o fereastră de 375px pe desktop
   e tot un test de mobil, iar tabletele hibride raportează `fine`. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  /* 46px, nu 44: bordura de 1,5px intră în calcul și lăsa 43px reali */
  .btn, .mode-tab, .accordion__trigger, .zone-row__config { min-height: 46px }
  .btn--sm { min-height: 46px; padding: var(--sp-12) var(--sp-16) }
  .qty__btn { width: 46px; height: 46px }
  .modal__close { width: 46px; height: 46px }
  .modal__close svg { width: 16px; height: 16px }

  /* comutatorul rămâne mic vizual, dar zona de atingere se extinde
     invizibil în jurul lui — degetul nu trebuie să nimerească 24px */
  .toggle { width: 52px; height: 30px }
  .toggle::after { width: 24px; height: 24px }
  .toggle.is-on::after { transform: translateX(22px) }
  .toggle::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 44px;
  }

  /* rândul de zonă e tapabil pe toată înălțimea */
  .zone-row__toggle { align-self: stretch; min-height: 44px; padding: var(--sp-8) 0 }

  .pin { width: 44px; height: 44px }
  .pin__dot { width: 36px; height: 36px }
}

/* ---------- LISTA DE ZONE — compactă, nu carduri gigantice ---------- */
.zone-list { display: flex; flex-direction: column; gap: var(--sp-8) }
.zone-row {
  display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-12); min-height: 60px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised); transition: all var(--dur-fast) var(--ease);
}
.zone-row.is-on { border-color: var(--accent); background: var(--accent-soft) }
.zone-row__toggle {
  display: flex; align-items: center; gap: var(--sp-12);
  flex: 1; min-width: 0; text-align: left; background: none; padding: 0;
}
.zone-row__check {
  width: 24px; height: 24px; border-radius: var(--radius-sm); flex-shrink: 0;
  border: 2px solid var(--border-strong); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.zone-row__check svg { width: 13px; height: 13px; opacity: 0 }
.zone-row.is-on .zone-row__check { background: var(--accent); border-color: var(--accent) }
.zone-row.is-on .zone-row__check svg { opacity: 1 }
.zone-row__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px }
/* span-uri inline s-ar lipi unul de altul („Intrare3 variante") */
.zone-row__name { display: block; font-weight: 700; font-size: var(--fs-small); line-height: 1.25 }
.zone-row__meta { display: block; font-size: var(--fs-mono); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.zone-row__meta:empty { display: none }
.zone-row__price { font-weight: 800; font-size: var(--fs-small); white-space: nowrap; color: var(--text-muted) }
.zone-row__config {
  flex-shrink: 0; padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong); font-weight: 700; font-size: var(--fs-mono);
  background: var(--surface-raised); color: var(--text-muted);
}
.zone-row__config:hover { border-color: var(--accent); color: var(--accent) }
.zone-row:not(.is-on) .zone-row__config { display: none }

.zone-add {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-8); width: 100%;
  padding: var(--sp-16); min-height: 52px; margin-top: var(--sp-8);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
  font-weight: 700; font-size: var(--fs-small); color: var(--text-muted); background: none;
}
.zone-add:hover { border-color: var(--accent); color: var(--accent) }
.zone-add svg { width: 16px; height: 16px }

/* ---------- soluții per zonă (cameră / interfon / vizor / acces) ---------- */
.solution-list { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-12) }
.solution-row {
  display: flex; align-items: flex-start; gap: var(--sp-12); width: 100%;
  padding: var(--sp-12); min-height: 56px; text-align: left;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.solution-row.is-on { border-color: var(--accent); background: var(--accent-soft) }
.solution-row__check {
  width: 22px; height: 22px; border-radius: var(--radius-sm); flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border-strong); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.solution-row__check svg { width: 12px; height: 12px; opacity: 0 }
.solution-row.is-on .solution-row__check { background: var(--accent); border-color: var(--accent) }
.solution-row.is-on .solution-row__check svg { opacity: 1 }
.solution-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.solution-row__title { display: block; font-weight: 700; font-size: var(--fs-small)}
.solution-row__desc { display: block; font-size: var(--fs-mono); color: var(--text-muted); line-height: 1.4 }
.solution-row__price { font-weight: 800; font-size: var(--fs-label); white-space: nowrap; margin-top: 1px }
.solution-row__tag {
  display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px var(--sp-8); border-radius: var(--radius-pill);
  background: var(--warning-soft); color: var(--warning);
  border: 1px solid var(--warning-border);
}

/* ---------- IMAGINI DE PRODUS — proporții păstrate ----------
   Erau `object-fit: cover` într-o cutie de 96px, deci imagini portrait
   (285×360) erau tăiate, inconsistent între ele. Acum containerul are
   raport fix, iar imaginea intră întreagă. */
.size-card__thumb {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm); background: var(--surface-sunken);
  margin-bottom: var(--sp-8); display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); overflow: hidden; padding: var(--sp-8);
}
.size-card__thumb img {
  width: 100%; height: 100%;
  object-fit: contain;         /* NU cover — nu tăiem și nu deformăm */
  object-position: center;
}
.size-card__thumb img[alt]::after {
  /* fallback vizibil dacă imaginea lipsește */
  content: attr(alt); display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: var(--surface-sunken);
  font-size: var(--fs-micro); color: var(--text-faint);
}
.size-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-12); text-align: center; background: var(--surface-raised);
  display: flex; flex-direction: column;
}
.size-card.is-selected { border-color: var(--accent); background: var(--accent-soft) }
.object-card__icon img { object-fit: contain }

/* ---------- SUMAR DE PREȚ pe blocuri (cerința #13) ---------- */
.price-block { border-top: 1px solid var(--border); padding-top: var(--sp-12); margin-top: var(--sp-12) }
.price-block:first-child { border-top: none; padding-top: 0; margin-top: 0 }
.price-block__title {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: var(--sp-8);
}
.price-block__sum {
  display: flex; justify-content: space-between; gap: var(--sp-12);
  font-weight: 800; font-size: var(--fs-small); padding-top: var(--sp-8); margin-top: var(--sp-4);
  border-top: 1px dashed var(--border);
}
.price-line--request .price-line__val { color: var(--warning); font-size: var(--fs-mono)}

/* ---------- MOBILE ---------- */
@media (max-width: 720px) {
  .zone-row { padding: var(--sp-8) var(--sp-12) }
  .solution-row { padding: var(--sp-8) }
  /* bara de jos capătă spațiu pentru „safe area" pe iPhone */
  .price-bar-mobile { padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px)) }
  .step { padding-bottom: var(--sp-112) }
}

/* 430px și mai jos — telefoane mari în portret */
@media (max-width: 430px) {
  .step__subtitle { font-size: var(--fs-small)}
  .zone-row__price { display: none }        /* prețul rămâne în panoul de jos */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8) }
}

/* 375px — iPhone SE / mini */
@media (max-width: 375px) {
  .container { padding: 0 var(--sp-12) }
  .step__title { font-size: var(--fs-lead)}
  .zone-row__config { padding: var(--sp-8) var(--sp-8); font-size: var(--fs-mono)}
  .price-bar-mobile__total b { font-size: var(--fs-body)}
  .device-card { padding: var(--sp-12) }
}

/* 320px — cel mai mic ecran încă în uz */
@media (max-width: 320px) {
  .container { padding: 0 var(--sp-8) }
  .step__title { font-size: var(--fs-body)}
  .geometry-grid { grid-template-columns: 1fr 1fr }
  .choice-grid--3, .choice-grid--4 { grid-template-columns: 1fr }
  .stat-grid { grid-template-columns: 1fr }
  .zone-row__meta { font-size: var(--fs-micro)}
  .price-bar-mobile { padding: var(--sp-8) }
  .price-bar-mobile .btn { padding: var(--sp-8) var(--sp-12); font-size: var(--fs-label)}
}

/* slider mai ușor de prins cu degetul */
.slider-input::-webkit-slider-thumb { width: 26px; height: 26px }
.slider-input::-moz-range-thumb { width: 26px; height: 26px }
@media (hover: none) and (pointer: coarse) {
  .slider-input { height: 34px }
  .slider-input::-webkit-slider-thumb { width: 30px; height: 30px }
  .slider-input::-moz-range-thumb { width: 30px; height: 30px }
}

/* =========================================================
   V4 — PLANUL INTERACTIV + BOTTOM SHEET
   ========================================================= */

/* ---------- PLANUL ----------
   `aspect-ratio` vine din dimensiunile reale ale imaginii, setat inline.
   Spațiul e rezervat înainte de încărcare, deci nu sare layout-ul, iar
   punctele — poziționate în procente — rămân lipite de desen la orice
   lățime. Nicio dimensiune fixă în pixeli. */
.house { margin: 0 0 var(--sp-16) }
.house__stage {
  position: relative; width: 100%;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: max-width var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease);
}
.house__img { width: 100%; height: 100%; object-fit: contain; display: block }
.house__cap {
  margin-top: var(--sp-8); font-size: var(--fs-label); color: var(--text-muted);
  text-align: center; line-height: 1.4;
}
.house__cap b { color: var(--accent) }

/* starea compactă: cât timp e deschis panoul de configurare, planul se
   retrage ca să lase loc — dar rămâne vizibil, nu dispare */
.house.is-compact .house__stage { max-width: 55%; margin: 0 auto; opacity: .85 }
@media (max-width: 720px) { .house.is-compact .house__stage { max-width: 62% } }

/* ---------- PUNCTELE DE SELECȚIE ---------- */
.hs {
  position: absolute; transform: translate(-50%, -50%);
  width: 44px; height: 44px;         /* aria de atingere, nu mărimea vizuală */
  padding: 0; background: none; border: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.hs__dot {
  position: relative; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-raised); border: 2.5px solid var(--text-faint);
  box-shadow: 0 2px 6px rgba(16,24,40,.18);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.hs__dot svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--dur-fast) var(--ease) }

/* halo animat, doar pe punctele neselectate — invită la atingere */
.hs__pulse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); opacity: .35;
  animation: hsPulse 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes hsPulse {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: .35 }
  70%  { transform: translate(-50%,-50%) scale(2.1); opacity: 0 }
  100% { transform: translate(-50%,-50%) scale(2.1); opacity: 0 }
}
.hs.is-on .hs__pulse { animation: none; opacity: 0 }

.hs__label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: var(--sp-4); white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 700; color: var(--text);
  background: var(--surface-raised); padding: 3px var(--sp-8);
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs); pointer-events: none;
}

/* --- 3 stări distincte, fiecare cu DOUĂ semnale (formă + bifă) --- */
.hs:hover .hs__dot,
.hs:focus-visible .hs__dot { border-color: var(--accent); transform: scale(1.12) }
.hs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50% }

.hs.is-on .hs__dot {
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.06);
}
.hs.is-on .hs__dot svg { opacity: 1 }          /* semnalul 2: bifa */
.hs.is-on .hs__label {
  border-color: var(--accent); color: var(--accent-deep); font-weight: 800;
}

.hs.is-flash .hs__dot { animation: hsFlash .9s var(--ease) }
@keyframes hsFlash {
  0%, 100% { transform: scale(1.06) }
  30%      { transform: scale(1.45) }
  60%      { transform: scale(1.06) }
}

/* pe ecran mic etichetele s-ar suprapune — numele sunt în lista de dedesubt */
@media (max-width: 720px) {
  .hs__label { display: none }
  .hs.is-on .hs__dot { transform: scale(1.15) }
}
/* punctele rămân la 44px chiar și la 320px: distanța minimă între ele
   pe planurile noastre e ~50px, deci nu se suprapun */
@media (max-width: 380px) {
  .hs__dot { width: 24px; height: 24px }
}

/* ---------- BOTTOM SHEET ----------
   Același DOM ca modalul; pe ecran mic urcă de jos și ocupă doar
   cât îi trebuie, ca planul să rămână vizibil deasupra. */
@media (max-width: 720px) {
  .sheet { align-items: flex-end; padding: 0 }
  .sheet .sheet__panel {
    width: 100%; max-width: 100%; max-height: 82vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0 var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); opacity: 1;
    display: flex; flex-direction: column;
    transition: transform var(--dur-base) var(--ease);
  }
  .sheet.is-open .sheet__panel { transform: translateY(0) }
  .sheet__grip {
    display: block; width: 44px; height: 22px; margin: var(--sp-8) auto 2px;
    background: none; border: 0; position: relative; flex-shrink: 0;
  }
  .sheet__grip::before {
    content: ""; position: absolute; top: 8px; left: 0;
    width: 44px; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong);
  }
  .sheet .modal__head { padding-top: 2px; flex-shrink: 0 }
  .sheet .modal__close { display: none }        /* gripul și swipe-ul sunt suficiente */
  /* un singur scroll: doar corpul panoului derulează, nu și pagina */
  .sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0 }
  .sheet__actions {
    flex-shrink: 0; margin-top: var(--sp-12); padding-top: var(--sp-12);
    border-top: 1px solid var(--border);
    background: var(--surface-raised);
  }
  .sheet__actions .btn { flex: 1 }
}
.sheet__grip { display: none }
@media (min-width: 721px) {
  .sheet__body { max-height: 60vh; overflow-y: auto }
}

/* ---------- rândul din listă marchează zonele care sunt pe plan ---------- */
.zone-row__pin {
  flex-shrink: 0; width: 18px; height: 18px; opacity: .45;
  color: var(--text-faint);
}
.zone-row.is-on .zone-row__pin { opacity: 1; color: var(--accent) }

.zone-section__title {
  font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin: var(--sp-16) 0 var(--sp-8);
}
.zone-section__title:first-child { margin-top: 0 }

@media (prefers-reduced-motion: reduce) {
  .hs__pulse { animation: none; opacity: 0 }
  .hs.is-flash .hs__dot { animation: none }
}


/* =========================================================
   Integrarea cu site-ul (WEBSITE/redesign)
   Doua reguli adaugate fata de prototip. Nicio regula de componenta
   nu a fost modificata - restul coerentei vine din tokenii din :root.
     1. titlurile preiau fontul condensat al site-ului;
     2. numerele (preturi, totaluri, cantitati) preiau fontul mono, care
        e conventia site-ului pentru orice e factual, nu decorativ.
   ========================================================= */
h1,h2,h3,h4,
.step__title,
.hero-header__title{
  font-family:var(--font-head);
  letter-spacing:-.005em;
}
.price-panel__total-val,
.zone-row__price,
.solution-row__price,
.swap-chip__cate{
  font-family:var(--font-mono);
  font-feature-settings:"tnum" 1;
}
/* Bara mobila de pret ramane in fontul de corp INTENTIONAT: masurat, un pret
   tipic ("18.450 MDL") ocupa 90px in mono fata de 74px in Source Sans la 15px.
   Pe 320px latime, cei 16px in plus sunt exact spatiul care lipseste. Panoul
   de pe desktop si preturile din randuri raman mono. */
/* logo-ul real din header (inlocuieste marca generica din prototip) */
.brand img{ width:156px; height:auto; display:block }
/* mai specific decat .brand img, altfel display:block de mai sus castiga
   si se vad ambele logouri deodata */
.brand img.logo-dark{display:none}
.brand img.logo-light{display:block}
:root[data-theme="dark"] .brand img.logo-dark{display:block}
:root[data-theme="dark"] .brand img.logo-light{display:none}

/* ---------- intoarcerea in site ----------
   Constructorul e o unealta separata, deschisa dintr-o pagina. Drumul inapoi
   trebuie sa fie vizibil in fiecare pas, nu ghicit din logo: link cu sageata
   in dreapta antetului, langa telefon. Pe ecrane mici ramane doar sageata. */
.header-actions{ display:flex; align-items:center; gap:var(--sp-8) }
.site-header .brand{flex-shrink:0}
.contact{min-height:44px;padding:var(--sp-8) var(--sp-12);border-radius:var(--radius-sm);background:var(--accent-strong);color:#fff;white-space:nowrap}
.contact svg{width:18px;height:18px;color:inherit;flex-shrink:0}
.contact__short{display:none}
/* Antetul de intrare, pe un rand adevarat. Uneltele stateau `position:absolute`
   in coltul din dreapta, deci logoul din curgerea normala nu stia de ele: de
   cand bara poarta si limba, cele doua se calcau una peste alta pe telefon —
   „CAMERE.MD" intra peste pastila „RO". Pe un rand de grila nu se mai pot
   suprapune, oricate unelte ar aparea; cand nu incape tot, logoul cedeaza,
   la fel ca in bara mobila a site-ului. */
.hero-header .container{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:var(--sp-12);
}
.hero-header .brand{min-width:0;max-width:156px}
.hero-header .brand img{width:100%}
.hero-header__title,
.hero-header__subtitle{grid-column:1 / -1}
.hero-header__tools{display:flex;align-items:center;gap:var(--sp-8)}

.back-link{
  position:relative;
  display:inline-flex; align-items:center; gap:var(--sp-8);
  font-weight:600; font-size:var(--fs-small);
  color:var(--text-muted);
  padding:var(--sp-8) var(--sp-8); border-radius:var(--radius-pill);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.back-link svg{ width:15px; height:15px; flex:0 0 auto }
.back-link:hover{ color:var(--accent-text); background:var(--accent-soft) }

/* antetul paginii de intrare. Numele a ramas, comportamentul nu: antetul nu
   mai e mereu inchis, iar linkul nu mai sta lipit de colt — sta pe randul de
   sus, langa celelalte unelte. Culoarea vine din tema, ca peste tot. */
.back-link--onDark{ color:var(--text-muted) }
.back-link--onDark:hover{ color:var(--text); background:var(--surface-raised) }

@media (max-width:560px){
  .back-link span{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .back-link{ padding:var(--sp-8) }
  .header-actions{ gap:var(--sp-8) }
  .site-header .brand img{width:128px}
  .contact{min-width:44px;justify-content:center;padding:var(--sp-8)}
  .contact__number{display:none}
  .contact__short{display:inline}
  .hero-header{padding-inline:0}
  .hero-header__tools{gap:var(--sp-4)}
  .header-actions{gap:var(--sp-4)}
  .header-actions .back-link{order:3}
}
@media (max-width:374px){
  .site-header .brand img{width:112px}
  .contact__short{display:none}
}

/* ---------------------------------------------------------
   TINTE DE ATINGERE — aceeasi regula ca pe site
--------------------------------------------------------- */
@media (hover:none),(max-width:767px){
  .brand,
  .back-link,
  .contact,
  .step-node,
  .notice__fix{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .back-link{min-width:44px;justify-content:center}
}

/* ---------------------------------------------------------
   COMUTATORUL DE TEMA — acelasi obiect ca pe site
--------------------------------------------------------- */
.theme-toggle{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  background:none;color:var(--text-muted);cursor:pointer;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.theme-toggle:hover{color:var(--text);border-color:var(--border)}
.theme-toggle svg{width:19px;height:19px;display:block}
.theme-toggle{flex-shrink:0;border-radius:var(--radius-sm)}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}

@media (prefers-reduced-motion:no-preference){
  .contact,.theme-toggle,.back-link{transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),scale var(--dur-fast) var(--ease)}
  .contact:active,.theme-toggle:active,.back-link:active{scale:.97}
}

/* ---------------------------------------------------------
   CONTINUA DE UNDE AI RAMAS (C3)
   Apare doar cand esti inaintea celui mai departe pas atins. Ancorat
   jos-dreapta; pe mobil urca deasupra barei de pret, ca sa nu acopere CTA-ul.
--------------------------------------------------------- */
.resume-jump{
  position:fixed;
  right:var(--sp-16);
  bottom:var(--sp-16);
  z-index:var(--z-dock);
  display:flex;
  align-items:center;
  gap:var(--sp-12);
  max-width:min(320px,calc(100vw - var(--sp-32)));
  padding:var(--sp-12) var(--sp-16);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
  box-shadow:var(--shadow-md);
  color:var(--text);
  /* starea de intrare: 180ms, fara bounce */
  opacity:0;
  transform:translateY(10px);
  transition:opacity 180ms var(--ease),transform 180ms var(--ease);
}
.resume-jump.is-in{opacity:1;transform:none}
.resume-jump__ic{
  display:grid;place-items:center;
  width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);color:#fff;
}
.resume-jump__ic svg{width:16px;height:16px}
.resume-jump__txt{display:flex;flex-direction:column;font-size:var(--fs-label);color:var(--text-muted)}
.resume-jump__txt b{font-size:var(--fs-small);color:var(--text)}
.resume-jump:hover{border-color:var(--border-strong)}

/* deasupra barei de pret de pe mobil */
@media (max-width:900px){
  .resume-jump{bottom:calc(var(--sp-72) + var(--sp-12));left:var(--sp-16);right:var(--sp-16);max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .resume-jump{transition:none;opacity:1;transform:none}
}

/* ---------------------------------------------------------
   OPTIUNI CU IMAGINE (C5)
--------------------------------------------------------- */
/* .choice-card e bloc, nu flex: titlul si descrierea sunt span-uri si ar curge
   pe acelasi rand. Le facem sa se aseze una sub alta. */
.choice-card--media .choice-card__title,
.choice-card--media .choice-card__desc{display:block}
.choice-card__media{
  display:block;
  margin-bottom:var(--sp-12);
  border-radius:var(--radius-sm);
  overflow:hidden;
  /* Ilustratiile sunt desenate pe alb. Rama ramane deschisa in ambele teme -
     o imagine isi pastreaza propriul fundal, ca orice fotografie intr-un
     album. Altfel, in tema inchisa ar aparea ca un dreptunghi alb lipit. */
  background:var(--media-surface);
  aspect-ratio:4/3;
}
.choice-card__media img{width:100%;height:100%;object-fit:contain;display:block}
/* Daca fisierul lipseste, locul lui spune ca lipseste - nu ramane gol. */
.choice-card__media.is-missing{
  display:grid;place-items:center;
  border:1px dashed var(--border-strong);
}
.choice-card__media.is-missing img{display:none}
.choice-card__media.is-missing::after{
  content:"Imagine indisponibilă";
  font-size:var(--fs-micro);
  color:var(--text-faint);
}

/* ---------------------------------------------------------
   OPTIUNI EXCLUSIVE (C9, C10)
   Titlu, descriere si pret pe randuri separate - erau span-uri inline
   intr-un card bloc, deci se citeau ca o singura propozitie rupta.
   Starea selectata are UN mijloc dominant (bordura) plus bifa, ca sa fie
   evidenta si fara culoare. Focusul din tastatura e distinct de selectie.
--------------------------------------------------------- */
.choice-card--stack{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-40);
  min-height:100%;
  cursor:pointer;
}
.choice-grid{align-items:stretch}
.choice-card--stack .choice-card__title{display:block;margin-bottom:0}
.choice-card--stack .choice-card__desc{display:block;font-size:var(--fs-label)}
.choice-card__price{
  display:block;margin-top:var(--sp-8);
  font-weight:800;font-size:var(--fs-small);color:var(--text);
  font-variant-numeric:tabular-nums;
}
/* bifa: indicator de forma, nu doar de culoare */
.choice-card--stack .choice-card__check{
  top:var(--sp-16);left:var(--sp-16);right:auto;
  width:20px;height:20px;
  background:transparent;border:1.5px solid var(--border-strong);color:transparent;
  opacity:1;transform:none;
}
.choice-card--stack.is-selected .choice-card__check{
  background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;
}
/* un singur mijloc dominant: bordura. Fundalul e o nuanta subtila din tokens. */
.choice-card--stack.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.choice-card--stack:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:2px;
}

/* actiunea de dupa trimitere (C6) */
.notice__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12);
  margin-top:var(--sp-16);
}
.notice__tel{color:var(--text-muted);font-size:var(--fs-label)}
.notice__tel:hover{color:var(--accent-text)}
[data-success]:focus{outline:none}
[data-success]:focus-visible{outline:2px solid var(--accent-strong);outline-offset:4px}

/* trei trepte de calitate, pe un rand pe desktop (C7) */
.choice-grid--3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-12)}
@media (max-width:720px){ .choice-grid--3{grid-template-columns:1fr} }

/* ---------------------------------------------------------
   Datele pastrate in browser (SEC-03)
   Un rand discret, nu o alerta: e o informatie despre confidentialitate, nu o
   problema. Butonul arata ca un link fiindca e o actiune de text, dar ramane
   buton — o actiune care nu duce nicaieri nu e o legatura.
   --------------------------------------------------------- */
.date-locale{
  margin:var(--sp-16) 0 0;
  font-size:var(--fs-label);
  color:var(--text-muted);
}
.link-btn{
  padding:0;
  color:var(--accent-text);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.link-btn:hover{color:var(--accent-press)}
.link-btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}

/* ---------------------------------------------------------
   Starea trimiterii (LOG-01, LOG-08)
   Sta intre rezumat si butoane, adica exact acolo unde se uita omul dupa ce
   apasa. Fara ea, singurul raspuns vizibil la o trimitere esuata era butonul
   care revenea la starea initiala.
   --------------------------------------------------------- */
[data-submit-status]{margin:var(--sp-16) 0}
[data-submit-status] .notice{margin:0}

/* ---------------------------------------------------------
   Selectorul de inlocuire a camerei

   Nu e un magazin, e o hotarare de cateva secunde luata fara sa iesi din
   configurator. De aceea fereastra ramane ingusta si densa: capul si piciorul
   stau pe loc, iar singurul lucru care se deruleaza e lista de camere. Asa
   butonul de confirmare e mereu la indemana, si configuratorul se vede in
   continuare in spate.
   --------------------------------------------------------- */
.modal{
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;          /* deruleaza lista, nu fereastra */
}
.modal__head{
  align-items:flex-start;
  gap:var(--sp-12);
  padding:var(--sp-20) var(--sp-20) var(--sp-12);
  margin-bottom:0;
  border-bottom:1px solid var(--border);
}
.modal__head-txt{min-width:0}
.modal__sub{
  margin:2px 0 0;
  font-size:var(--fs-mono);
  color:var(--text-muted);
  line-height:1.3;
}
.modal [data-option-group]{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--sp-16) var(--sp-20);
}
.modal__actions{
  padding:var(--sp-12) var(--sp-20);
  border-top:1px solid var(--border);
  background:var(--surface-raised);
}

/* ---------- camera de acum ----------
   Compacta, pe un fundal scobit: se citeste dintr-o privire ce se inlocuieste,
   fara sa concureze cu alternativele de dedesubt. */
.swap-current{
  display:flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-8) var(--sp-12);
  border-radius:var(--radius-md);
  background:var(--surface-sunken);
}
.swap-current__label{
  flex:none;
  font-size:var(--fs-mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-faint);
}
.swap-current .option-row__thumb{width:36px;height:36px}

/* ---------- filtrele ----------
   Randuri de pastile, nu o bara laterala: sunt intrebari scurte, nu o cautare.

   Pastilele se rup pe randul urmator, nu se deruleaza lateral. Derularea era
   ascunsa — fara bara, fara umbra la margine — asa ca pe telefon jumatate din
   marci nu se vedeau si nimic nu spunea ca exista. O taietura pe care n-o
   vezi nu scurteaza nicio lista.

   Eticheta sta DEASUPRA pastilelor, nu alaturi. Coloana de 68px de langa ele
   lua o cincime din latimea ferestrei pe telefon, iar in rusa nici nu incapea
   in ea: „Окружающая среда" se rupea pe doua randuri si impingea pastilele
   intr-un jgheab si mai ingust. */
.swap-filters{
  display:grid;gap:var(--sp-12);
  margin:var(--sp-16) 0 var(--sp-12);
}
.swap-filter__label{
  display:block;margin-bottom:var(--sp-4);
  font-size:var(--fs-mono);font-weight:700;
  color:var(--text-faint);
}
.swap-chips{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.swap-chip{
  flex:none;
  padding:5px var(--sp-12);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  color:var(--text-muted);
  font-size:var(--fs-mono);font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.swap-chip:hover{border-color:var(--accent);color:var(--text)}
.swap-chip.is-on{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-text);
}
.swap-chip:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
/* Cifra de langa marca: cate camere raman daca apesi. Se citeste inainte de
   apasare, deci taietura nu mai e o loterie. Mai stinsa decat numele — numele
   e alegerea, cifra e doar marimea. */
.swap-chip__cate{opacity:.62}

/* Cautarea apare abia cand lista se deschide de tot. Pana atunci sunt sase
   randuri alese pe potriveala, si nu se cauta printre sase — un camp in capul
   ferestrei ar fi sugerat ca trebuie sa stii dinainte ce cauti. */
.swap-search{display:block;margin-bottom:var(--sp-8)}
.swap-search input{
  width:100%;min-height:38px;
  padding:var(--sp-8) var(--sp-12);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font-family:inherit;font-size:var(--fs-mono);
}
.swap-search input:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

/* ---------- randurile ---------- */
.swap-list{margin-top:var(--sp-4)}
.option-row{width:100%;cursor:pointer;background:var(--surface-raised);transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.option-row:hover{border-color:var(--border-strong)}
.option-row.is-selected:hover{border-color:var(--accent)}
.option-row:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.option-row__thumb{width:40px;height:40px}

/* Pretul si diferenta, una sub alta: comparatia se face din diferenta, nu din
   doua sume scazute in cap. Diferenta ramane discreta — nu ea e hotararea. */
.option-row__cost{flex:none;display:grid;justify-items:end;gap:1px;text-align:right}
.option-row__delta{
  font-size:var(--fs-mono);
  font-variant-numeric:tabular-nums;
  color:var(--text-faint);
}
.option-row__delta.is-jos{color:var(--success)}

/* Eticheta scurta de langa nume. Una singura pe rand, si numai daca spune ceva
   ce nu se vede deja din cifrele de alaturi. */
.swap-tag{
  display:inline-block;
  margin-left:var(--sp-4);
  padding:1px 6px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-mono);font-style:normal;font-weight:700;
  vertical-align:1px;
}
.swap-tag--bun{background:var(--success-soft);color:var(--success)}
.swap-tag--neutru{background:var(--surface-sunken);color:var(--text-muted)}

/* Randul care desparte raftul curatat de magazin. Subtire, si spune de ce
   exista despartirea: dincolo de el, mediul nu mai e garantat de nimeni. */
.swap-sep{
  display:flex;align-items:baseline;gap:var(--sp-8);
  margin:var(--sp-12) 0 var(--sp-8);
  font-size:var(--fs-mono);font-weight:700;
  color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.04em;
}
.swap-sep span{
  font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--text-muted);
}
.swap-sep::after{
  content:"";flex:1;height:1px;background:var(--border);
}

.swap-more{
  width:100%;
  margin-top:var(--sp-4);
  padding:var(--sp-8);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-md);
  background:none;
  color:var(--text-muted);
  font-size:var(--fs-mono);font-weight:600;
  cursor:pointer;
}
.swap-more:hover{border-color:var(--accent);color:var(--accent-text)}
.swap-more:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

/* ---------- telefonul: foaie de jos ----------
   Aceleasi randuri, aceeasi densitate. Foaia se prinde de marginea de jos,
   unde ajunge degetul, iar butonul de confirmare ramane deasupra ei. */
@media (max-width:640px){
  .modal-backdrop{align-items:flex-end}
  .modal{
    max-width:none;
    width:100%;
    height:78dvh;
    max-height:78dvh;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    transform:translateY(16px);
  }
  .modal-backdrop.is-open .modal{transform:none}
  .modal__head{padding:var(--sp-16) var(--sp-16) var(--sp-12)}
  .modal [data-option-group]{padding:var(--sp-12) var(--sp-16)}
  .modal__actions{padding:var(--sp-12) var(--sp-16) calc(var(--sp-12) + env(safe-area-inset-bottom))}
  .swap-filter__label{flex-basis:60px}
}

@media (prefers-reduced-motion:reduce){
  .modal{transition:none}
}

/* Alegerea producatorului foloseste cardurile si culorile constructorului. */
.manufacturer-picker{border:0;padding:0;min-width:0}
.manufacturer-choice{display:flex;align-items:center;gap:var(--sp-12);min-height:48px;padding:var(--sp-16);cursor:pointer}
.manufacturer-choice input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--accent-strong)}
.manufacturer-choice .choice-card__title{margin:0}
.manufacturer-choice:focus-within{outline:2px solid var(--accent-strong);outline-offset:3px}
.manufacturer-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12);margin-top:var(--sp-8)}
.manufacturer-summary a{display:inline-flex;align-items:center;min-height:44px}
#producator{scroll-margin-top:var(--sp-24)}

body[data-step="obiect"] .resume-jump{position:static;max-width:none;margin-top:var(--sp-16);transform:none}