/* =========================================================
   CAMERE.MD — constructorul in designul novena
   Strat peste style.css: aceleasi elemente si aceeasi logica, alt aspect.
   style.css e construit pe variabile, deci cea mai mare parte a schimbarii
   e aici, in :root. Restul sunt reglaje de forma pe componente.
   Tema e mereu deschisa (data-theme="light" pe <html>).
   ========================================================= */

:root,:root[data-theme="light"]{
  /* suprafete: pagina azurie foarte deschisa, containere albe */
  --surface:#f3f9f9;
  --surface-raised:#ffffff;
  --surface-sunken:#e9f4f3;
  --text:#0d2b2e;
  --text-muted:#4a6466;
  --text-faint:#557274;
  --border:#d8e8e7;
  --border-strong:#bdd6d4;

  /* accentul site-ului: azuriul din logo; portocaliul doar pentru detalii */
  --accent:#006464;
  --accent-strong:#006464;
  --accent-press:#004c4c;
  --accent-deep:#004c4c;
  --accent-soft:#e2f1f0;
  --accent-glow:rgba(0,100,100,.16);
  --accent-text:#006464;
  --spark:#fe6701;
  --spark-strong:#e85d00;

  --info:#0b5c8a;
  --info-soft:#e8f2f9;
  --info-border:#b9d6ea;

  /* stilul „studio” al site-ului (camere/camere-home.css): plat, fara umbre, colturi de 3px, titluri
     Plus Jakarta Sans. Umbra „goala” e 0 0 #0000, nu none: unele reguli o compun cu un inel (inset ..., var(--shadow-md)). */
  --shadow-xs:0 0 #0000;
  --shadow-sm:0 0 #0000;
  --shadow-md:0 0 #0000;

  --radius-xs:3px;
  --radius-sm:3px;
  --radius-md:3px;
  --radius-lg:3px;
  --font-head:"Plus Jakarta Sans","Source Sans 3",system-ui,sans-serif;

  --header-h:72px;
  --stepper-h:72px;
  --content-max:1200px;
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:linear-gradient(180deg,#e9f4f3 0,var(--surface) 320px) no-repeat,var(--surface);color:var(--text)}
h1,h2,h3,.step__title{text-wrap:balance}
:focus-visible{outline-color:var(--spark-strong)}

/* ---------- butoane: ca pe site, fara majuscule ---------- */
.btn{text-transform:none;letter-spacing:.01em;font-size:17px;min-height:52px}
.btn--lg{font-size:18px;min-height:56px}
.btn--sm{font-size:16px}
.btn--primary{box-shadow:none}
.btn--secondary{background:#fff;border-color:var(--border-strong)}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}

/* ---------- ecranul 1: obiectul, cu fotografie ---------- */
.object-grid{gap:var(--sp-16);grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.object-grid{grid-template-columns:repeat(2,1fr)}}
.object-card{padding:0;overflow:hidden;align-items:stretch;gap:0;text-align:left;border:1px solid var(--border-strong);box-shadow:var(--shadow-xs);transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.object-card::before{content:"";display:block;aspect-ratio:16/10;background:var(--surface-sunken) center/cover no-repeat}
.object-card[data-flow="casa"]::before{background-image:url(../../camere/img/constructor/house.webp)}
.object-card[data-flow="apartament"]::before{background-image:url(../../camere/img/constructor/flat.webp)}
.object-card[data-flow="oficiu"]::before{background-image:url(../../camere/img/constructor/shop.webp)}
.object-card[data-flow="teren"]::before{background-image:url(../../camere/img/constructor/warehouse.webp)}
.object-card[data-flow="agricol"]::before{background-image:url(../../camere/img/constructor/land.webp)}
.object-card[data-flow="parcare"]::before{background-image:url(../../camere/img/constructor/parking.webp)}
.object-card__icon{display:none}
.object-card__title{padding:var(--sp-12) var(--sp-16) var(--sp-16);font-family:var(--font-head);font-size:19px;font-weight:700}
.object-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.object-card:active{transform:scale(.98)}
.object-card.is-selected{border-color:var(--accent);background:#fff;box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-md)}
.object-card.is-selected .object-card__title{color:var(--accent-text)}
.object-card__mark{width:28px;height:28px;border:2px solid #fff;border-radius:var(--radius-sm);background:rgba(6,46,48,.35)}
.object-card.is-selected .object-card__mark{background:var(--accent-strong);border-color:var(--accent-strong)}

.trust-item svg{color:var(--accent-text)}

/* ---------- planul: punctele si etichetele ---------- */
.house__stage{overflow:hidden}
.hs__label{font-family:var(--font-head);font-weight:600;font-size:13px;border-radius:var(--radius-sm)}
.hs.is-on .hs__label{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.hs__dot{box-shadow:0 2px 8px rgba(6,46,48,.25)}
.house__cap{font-size:14.5px}

/* ---------- randuri de zona si solutii ---------- */
[data-zone-list-host]:not(:empty){padding:20px 24px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
[data-zone-list-host] .zone-row{box-shadow:none}
.zone-row,.solution-row{border-width:1px;border-color:var(--border-strong);box-shadow:var(--shadow-xs);transition-property:border-color,background-color,box-shadow;transition-duration:var(--dur-fast)}
.zone-row:hover,.solution-row:hover{border-color:var(--accent)}
.zone-row.is-on,.solution-row.is-on{box-shadow:inset 0 0 0 1px var(--accent)}
.zone-row__check,.solution-row__check{border-radius:var(--radius-sm);border-width:1.5px}
.zone-row__name,.solution-row__title{font-family:var(--font-head);font-weight:700;font-size:17px}
.zone-row__price,.solution-row__price{font-family:var(--font-mono);font-weight:500}
.zone-row__config{min-height:40px;font-family:var(--font-head);font-weight:600;font-size:14.5px;border-width:1px}
.zone-row__config:hover{background:var(--accent-soft)}
.zone-add{border-width:1px;font-family:var(--font-head);font-weight:600;font-size:16px}
.zone-add:hover{background:#fff}
.zone-list-title,.zone-list__title,.zone-group__title{font-family:var(--font-mono);font-weight:500;letter-spacing:.1em;color:var(--accent-text)}

/* ---------- carduri de alegere, marimi, segmente ---------- */
.choice-card,.size-card,.segmented__opt{border-width:1px;border-color:var(--border-strong);transition-property:border-color,background-color,box-shadow;transition-duration:var(--dur-fast)}
.choice-card{padding:16px}
.choice-card--stack{padding:16px 16px 16px 46px}
.choice-card:hover,.size-card:hover,.segmented__opt:hover{border-color:var(--accent)}
.choice-card.is-selected,.size-card.is-selected{box-shadow:inset 0 0 0 1px var(--accent)}
.choice-card__check{border-radius:var(--radius-sm);width:20px;height:20px}
.choice-card__title,.size-card__title{font-family:var(--font-head);font-weight:700;font-size:17px}
.choice-card__desc,.size-card__desc{font-size:13.5px;color:var(--text-muted)}
.choice-card__icon{color:var(--accent-text)}
.segmented__opt{min-height:44px;display:grid;place-items:center;font-family:var(--font-head);font-weight:600;font-size:15.5px;color:var(--text)}

/* ---------- contoare +/- ---------- */
.qty__btn{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--accent-soft);color:var(--accent-text);transition-property:background-color,color,border-color;transition-duration:var(--dur-fast)}
.qty__btn:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.qty__val{font-family:var(--font-head);font-weight:700;font-size:20px;min-width:24px;font-variant-numeric:tabular-nums}
.counter-row__label{font-family:var(--font-head);font-weight:700;font-size:16px}

/* ---------- sumarul ---------- */
.summary-card__title{font-family:var(--font-mono);font-weight:500;letter-spacing:.1em;color:var(--accent-text);background:var(--surface-sunken)}
.ajustare__cap{font-weight:700;font-size:17px}
.ajustare__cap:hover{color:var(--accent-text)}
.device-card{border-width:1px;border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.device-card.is-recommended{box-shadow:inset 0 0 0 1px var(--accent),var(--shadow-sm)}
.device-card__thumb,.device-card__thumb img{border-radius:0}
.device-card__title{font-family:var(--font-head);font-weight:700;font-size:16.5px}
.device-card__zone{font-family:var(--font-mono);font-weight:500}
.device-card__swap{font-family:var(--font-head);font-weight:600;border-radius:var(--radius-sm)}
.device-card__price{font-family:var(--font-head);font-weight:700;font-size:20px}
.chip{background:var(--accent-soft);color:var(--accent-deep);font-family:var(--font-mono);font-weight:500}
.reassurance{border:1px solid var(--success-border)}

/* ---------- campuri ---------- */
input[type="text"],input[type="tel"],input[type="email"],input[type="number"],select,textarea{border-radius:0}

@media (prefers-reduced-motion:reduce){
  .object-card{transition:none}
  .object-card:hover,.object-card:active{transform:none}
}

/* =========================================================
   Stratul „configurator": acelasi aspect ca configuratorul site-ului
   (bara de sus cu pasi, containere albe, rezumat lateral cu poza).
   ========================================================= */

/* ---------- bara de sus: logo, pasi, telefon, inchidere ---------- */
/* Locul ei, pana o deseneaza ui.js (renderHeader): fara el, pagina apare intai fara bara si apoi coboara toata (CLS). */
[data-chrome-header]{height:72px}
@media (max-width:767.98px){[data-chrome-header]{height:62px}}
/* Pasul intreg (randul „Pasul X din N", cardurile, butoanele) il deseneaza scriptul paginii: pana atunci nu se arata, ca
   sa nu apara intai titlul singur si apoi sa coboare totul sub carduri (CLS). ui.js pune .cc-ready dupa ce au rulat
   scripturile; daca nu ruleaza, pagina se arata oricum dupa 3 s. */
html:not(.cc-ready) main.step{visibility:hidden;animation:cc-show 0s 3s forwards}
@keyframes cc-show{to{visibility:visible}}
/* Bara de pret de pe telefon e goala pana o umple ui.js: goala, ar sta lipita jos si ar creste in sus (CLS). */
.price-bar-mobile:empty{visibility:hidden}
.cc-top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;height:72px;padding:0 clamp(16px,3vw,40px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cc-logo img{display:block;width:auto;height:42px}
.cc-steps{display:flex;justify-content:center;gap:4px;margin:0;padding:0;list-style:none}
.cc-steps li{display:flex;align-items:center}
.cc-steps li+li::before{content:"";width:clamp(8px,2vw,24px);height:1px;margin-right:4px;background:var(--border-strong)}
.cc-steps .step-node{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;color:var(--text-muted);font-family:var(--font-head);font-weight:600;font-size:15.5px;text-decoration:none;transition:color var(--dur-fast) var(--ease)}
.cc-steps a.step-node:hover{color:var(--text)}
.cc-steps .step-node>span{display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--border-strong);background:#fff;font-family:var(--font-mono);font-size:12px;transition-property:background-color,border-color,color;transition-duration:.25s}
.cc-steps .step-node>span svg{width:12px;height:12px}
.cc-steps .is-done{color:var(--text)}
.cc-steps .is-done>span{border-color:var(--accent);background:var(--accent);color:#fff}
.cc-steps .is-active{color:var(--accent-text)}
.cc-steps .is-active>span{border-color:var(--accent-strong);background:var(--accent-strong);color:#fff;box-shadow:0 0 0 4px var(--accent-glow)}
.cc-top-end{display:flex;align-items:center;gap:12px}
.cc-help{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--font-head);font-weight:600;font-size:16.5px;line-height:1.1;text-decoration:none}
.cc-help:hover{color:var(--accent-text)}
.cc-help>i{display:grid;place-items:center;width:40px;height:40px;background:var(--accent-soft);color:var(--accent-text)}
.cc-help>i svg{width:18px;height:18px}
.cc-help small{display:block;font-family:var(--font-sans,inherit);font-weight:400;font-size:12.5px;color:var(--text-muted)}
.cc-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-strong);color:var(--text);transition-property:background-color,border-color,color;transition-duration:.2s}
.cc-close svg{width:18px;height:18px}
.cc-close:hover{background:var(--text);border-color:var(--text);color:#fff}
.cc-bar{position:absolute;left:0;right:0;bottom:-1px;height:3px}
.cc-bar i{display:block;width:0;height:100%;background:var(--accent);transition:width .6s cubic-bezier(.22,1,.36,1)}
/* fara antet randat (n-ar trebui), pasii stau singuri sub el */
nav.cc-steps-slot{padding:12px 0;background:#fff;border-bottom:1px solid var(--border)}

/* ---------- titlul pasului: eticheta mica, titlul mare, o fraza ---------- */
.step{padding:clamp(24px,4vh,44px) 0 56px}
.step__head{max-width:none;margin:0 0 20px}
.cc-k{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.step__head .cc-k::before{content:"";width:6px;height:6px;background:var(--spark)}
.step__title{margin:0 0 8px;font-family:var(--font-head);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:700;line-height:1.04;letter-spacing:-.02em}
.step__lead{max-width:60ch;margin:0;font-size:17px;color:var(--text-muted);text-wrap:pretty}
.manufacturer-summary{margin-top:6px}

/* ---------- asezarea: intrebarile in stanga, rezumatul in dreapta ---------- */
.step-grid{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
.step-grid>div{min-width:0}

/* ---------- containere ---------- */
.stage-card,.bordered-box,.summary-card,.house__stage,[data-zone-list-host]:not(:empty),.manufacturer-picker,.consent-check{background:#fff;border:1px solid var(--border);box-shadow:none}
.bordered-box{margin:0 0 16px;padding:22px 24px}
.bordered-box.mt-4,.bordered-box+.bordered-box{margin-top:0}
.bordered-box__title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;font-family:var(--font-head);font-size:19px;font-weight:700;line-height:1.2}
[data-zone-list-host]:not(:empty){margin-top:16px;padding:22px 24px}
.manufacturer-picker{padding:22px 24px;margin-top:16px}
.manufacturer-picker legend{float:left;width:100%;margin:0 0 16px;font-family:var(--font-head);font-size:19px;font-weight:700}
.manufacturer-picker legend+*{clear:both}
.consent-check{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;margin-top:16px}

/* ajustarile din sumar: randuri care se deschid, in acelasi container */
.ajustare{border-top:1px solid var(--border)}
.ajustare:first-of-type{border-top:0}
.ajustare__cap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0;font-family:var(--font-head);font-weight:700;font-size:17px;cursor:pointer}
.ajustare__corp{padding:4px 0 20px}

/* ---------- optiuni: card cu cerc in dreapta sus, ca in configurator ---------- */
.choice-grid{gap:12px}
.choice-card,.choice-card--stack{position:relative;padding:16px 44px 16px 16px;background:#fff;border:1px solid var(--border-strong);color:var(--text);cursor:pointer;transition-property:border-color,background-color,box-shadow;transition-duration:.2s}
.choice-card:hover{border-color:var(--accent)}
.choice-card::after{content:"";position:absolute;top:14px;right:14px;width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:50%;background:#fff;transition-property:border-color,box-shadow;transition-duration:.2s}
.choice-card.is-selected,.choice-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.choice-card.is-selected::after,.choice-card:has(input:checked)::after{border-color:var(--accent);box-shadow:inset 0 0 0 5px var(--accent)}
.choice-card__check{display:none}
.choice-card__title{display:block;font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.2}
.choice-card__desc{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--text-muted)}
.choice-card__price{display:block;margin-top:8px;font-family:var(--font-mono);font-size:13px;color:var(--accent-text)}
.choice-card input{position:absolute;opacity:0;pointer-events:none}
.choice-card:focus-visible,.choice-card:has(input:focus-visible){outline:2px solid var(--spark-strong);outline-offset:3px}

/* ---------- rezumatul din dreapta: poza, „Sistemul tau", total ---------- */
.price-panel{padding:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;box-shadow:none;top:96px;overflow:hidden}
.cc-sum-img{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--accent-soft)}
.cc-sum-img img{display:block;width:100%;height:100%;object-fit:cover}
.price-panel>:not(.cc-sum-img){margin-left:20px;margin-right:20px}
.price-panel__title{margin-top:18px;margin-bottom:6px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.price-panel__count{margin:0 0 12px;font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.15;color:var(--text)}
.price-block__title{font-family:var(--font-mono);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.price-line{font-size:14px}
.price-line__val,.price-block__sum{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.price-panel__divider{display:none}
.price-panel__total{display:grid;gap:2px;margin-top:14px;padding:14px 16px;background:var(--accent-soft);border-left:3px solid var(--accent)}
.price-panel__total-label{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.price-panel__total-val{font-family:var(--font-head);font-weight:700;font-size:32px;line-height:1.05;color:var(--accent-text);font-variant-numeric:tabular-nums}
.price-panel__rate{margin:4px 0 0;font-size:13.5px;color:var(--text-muted)}
.price-panel__rate b{color:var(--text);font-weight:600}
.price-panel__note{margin-top:12px;font-size:13px;color:var(--text-muted)}
.price-panel>:last-child{margin-bottom:20px}

/* ---------- navigarea pasului ---------- */
.step-actions{margin-top:24px;padding-top:0;border-top:0}
.btn{border-radius:var(--radius-sm)}
.btn--primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn--primary:hover{background:var(--accent-press);border-color:var(--accent-press)}
.btn.is-disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- notite si validare ---------- */
.notice{border-radius:var(--radius-sm);border-left-width:3px}
.link-btn{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- bara de pe mobil: total, rata, butonul ---------- */
.price-bar-mobile__rate{display:block;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ---------- subsol legal ---------- */
.cm-legal-footer{border-top:1px solid var(--border);background:#fff}

@media (max-width:1199.98px){
  .cc-help span{display:none}
  .step-grid{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:980px){
  .step-grid{grid-template-columns:minmax(0,1fr)}
  .cc-steps .step-node{padding:0 4px;font-size:0}
  .cc-steps .is-active{font-size:15px}
  .cc-steps .step-node>span{font-size:12px}
}
@media (max-width:767.98px){
  .cc-top{height:62px;padding:0 12px;gap:10px}
  .cc-logo img{height:30px}
  .cc-help{display:none}
  .cc-close{width:44px;height:44px}
  .cc-steps{justify-content:flex-end;gap:2px}
  .cc-steps li+li::before{display:none}
  .cc-steps .step-node{padding:0 2px}
  .cc-steps .is-active{font-size:0}
  .step__lead{font-size:15.5px}
  .bordered-box,[data-zone-list-host]:not(:empty),.manufacturer-picker{padding:16px}
  .choice-grid--2{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .cc-bar i{transition:none}
}

/* ---------- modalul de configurare a zonei ----------
   `.modal{padding:0}` (fereastra de schimbare a camerei) lasa corpul zonei
   lipit de margine: randurile se taiau in stanga, iar conturul de focus
   ramanea vizibil doar sus si jos, ca doua linii portocalii. */
@media (min-width:721px){
  .sheet__body{padding:var(--sp-16) var(--sp-20) var(--sp-20)}
}
.sheet__body>.field__hint{margin:0 0 var(--sp-4)}
.solution-row{align-items:center;padding:var(--sp-12) var(--sp-16);gap:var(--sp-16)}
.solution-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.solution-row__price{align-self:flex-start;margin-top:3px}
.solution-row__tag{align-self:flex-start;border-radius:var(--radius-sm);padding:2px var(--sp-8);font-family:var(--font-mono);font-weight:500;letter-spacing:.06em}
.sheet__body .counter-row{margin-top:var(--sp-16);padding:var(--sp-16) 0 0}
.sheet__body .counter-row__label{font-family:var(--font-head);font-weight:700;font-size:16px}

/* ---------- pasul 4: drumul pana la client ---------- */
.travel{display:flex;gap:var(--sp-12);align-items:flex-start;margin-top:var(--sp-4);padding:var(--sp-12) var(--sp-16);background:var(--surface-sunken);border:1px solid var(--border);font-size:15px;line-height:1.45}
.travel__icon{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-raised);border:1px solid var(--border);color:var(--accent-text)}
.travel__icon svg{width:20px;height:20px}
.travel__body{min-width:0}
.travel p{margin:0}
.travel b{font-family:var(--font-head);font-weight:700;color:var(--text)}
.travel small{display:block;margin-top:var(--sp-4);font-size:13px;color:var(--text-muted)}
.travel.is-ok{background:var(--accent-soft);border-color:var(--accent)}
.travel.is-ok .travel__icon{border-color:var(--accent)}
.travel.is-warn{background:var(--warning-soft);border-color:var(--warning-border)}
.travel.is-warn .travel__icon{color:var(--warning);border-color:var(--warning-border)}
.travel.is-busy .travel__icon svg{animation:travelGo 1s ease-in-out infinite alternate}
@keyframes travelGo{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.travel.is-busy .travel__icon svg{animation:none}}

/* ---------- devizul: drumul inca necalculat si nota de pret ---------- */
.price-line--pending{border-bottom:none}
.price-line--pending .price-line__val{font-family:var(--font-mono);font-size:13px;color:var(--text-faint)}
.price-panel__note{display:flex;gap:var(--sp-8);align-items:flex-start;padding:var(--sp-8) var(--sp-12);background:var(--surface-sunken);line-height:1.45}
.price-panel__note svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--accent-text)}
/* <details> (ajustari, detalii pret): aceeasi deschidere ca FAQ-ul din site (camere-theme.css) - inaltimea curge lent, apoi apare continutul.
   Browserele fara ::details-content raman cu deschiderea instanta. */
details{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size .65s cubic-bezier(.22,1,.36,1),content-visibility .65s allow-discrete}
details[open]::details-content{block-size:auto}
.ajustare[open]>.ajustare__corp{animation:cfg-details-in .8s .18s cubic-bezier(.22,1,.36,1) both}
.ajustare__cap::after{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes cfg-details-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){details::details-content{transition:none}.ajustare[open]>.ajustare__corp{animation:none}.ajustare__cap::after{transition:none}}

/* =========================================================
   Portocaliul — a treia culoare a marcii — pe actiuni, selectii si campuri
   (16 octombrie 2026). Aceleasi valori ca site-ul (src/site/tokens.css,
   --cm-spark-*): umplutura #cc4304 cu text alb trece AA (4.8:1), textul
   portocaliu pe alb e #b34700 (5.5:1). Azuriul ramane culoarea structurii:
   pasii parcursi, titlurile, rezumatul de pret.
   ========================================================= */
:root,:root[data-theme="light"]{
  --spark-fill:#cc4304;
  --spark-press:#b23a03;
  --spark-text:#b34700;
  --spark-soft:#fff4ec;
  --spark-line:#f3c3a1;
  --spark-glow:rgba(254,103,1,.22);
}

/* ---------- actiuni ---------- */
.btn--primary{background:var(--spark-fill);border-color:var(--spark-fill);color:#fff}
.btn--primary:hover{background:var(--spark-press);border-color:var(--spark-press)}
.btn--secondary:hover{border-color:var(--spark-fill);color:var(--spark-text)}
.btn--danger{background:var(--error);border:1.5px solid var(--error);color:#fff}
.btn--danger:hover{background:#8a1919;border-color:#8a1919}
.link-btn,.cc-guide{color:var(--spark-text)}
.cc-bar i{background:var(--spark)}
.cc-steps .is-active{color:var(--spark-text)}
.cc-steps .is-active>span{border-color:var(--spark-fill);background:var(--spark-fill);box-shadow:0 0 0 4px var(--spark-glow)}
.device-card__swap{color:var(--spark-text)}
.device-card__swap:hover{color:var(--spark-press)}
.qty__btn:hover{background:var(--spark-fill);border-color:var(--spark-fill);color:#fff}

/* ---------- selectii: carduri, randuri, pastile, comutatoare, planul ---------- */
.object-card:hover,.choice-card:hover,.size-card:hover,.segmented__opt:hover,.geo-card:hover,
.solution-row:hover,.zone-row:hover,.option-row:hover,.swap-chip:hover{border-color:var(--spark)}
.object-card.is-selected{border-color:var(--spark-fill);box-shadow:inset 0 0 0 2px var(--spark-fill),var(--shadow-md)}
.object-card.is-selected .object-card__title{color:var(--spark-text)}
.object-card.is-selected .object-card__mark{background:var(--spark-fill);border-color:var(--spark-fill)}
.choice-card.is-selected,.choice-card:has(input:checked),.size-card.is-selected,.geo-card.is-selected,
.solution-row.is-on,.zone-row.is-on,.option-row.is-selected{border-color:var(--spark-fill);background:var(--spark-soft);box-shadow:inset 0 0 0 1px var(--spark-fill)}
.choice-card.is-selected::after,.choice-card:has(input:checked)::after{border-color:var(--spark-fill);box-shadow:inset 0 0 0 5px var(--spark-fill)}
.choice-card__price,.choice-card__icon{color:var(--spark-text)}
.segmented__opt.is-selected{background:var(--spark-fill);border-color:var(--spark-fill);color:#fff}
.toggle.is-on{background:var(--spark-fill)}
.swap-chip.is-on{border-color:var(--spark-fill);background:var(--spark-soft);color:var(--spark-text)}
.hs.is-on .hs__dot{background:var(--spark-fill);border-color:var(--spark-fill)}
.hs.is-on .hs__label{background:var(--spark-fill);border-color:var(--spark-fill)}
.pin.is-selected .pin__label{border-color:var(--spark-fill);color:var(--spark-text)}
/* Casutele si cercurile goale nu mai sunt contururi inchise pe alb: au umplutura
   calda si margine portocalie deschisa; alese, se umplu cu portocaliu. */
.solution-row__check,.zone-row__check{border:1.5px solid var(--spark-line);background:var(--spark-soft)}
.solution-row.is-on .solution-row__check,.zone-row.is-on .zone-row__check{background:var(--spark-fill);border-color:var(--spark-fill)}
.choice-card::after,.option-row__radio{border-color:var(--spark-line);background:var(--spark-soft)}
.option-row.is-selected .option-row__radio{border-color:var(--spark-fill);background:#fff}
.option-row__radio::after{background:var(--spark-fill)}
.consent-check input{accent-color:var(--spark-fill)}

/* ---------- campuri: umplute, cu linie de jos; la focus, alb cu inel portocaliu ---------- */
.input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);box-shadow:inset 0 -2px 0 var(--border-strong);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.input:hover{border-color:var(--spark-line)}
.input:not(:placeholder-shown):not([aria-invalid="true"]){background:#fff;box-shadow:inset 0 -2px 0 var(--spark)}
.input:focus,.input-unit:focus-within .input{background:#fff;border-color:var(--spark-fill);box-shadow:inset 0 -2px 0 var(--spark-fill),0 0 0 3px var(--spark-glow);animation:cc-field-in .32s var(--ease)}
.input-unit:focus-within .input-unit__suffix{border-color:var(--spark-fill)}
.field__label{transition:color .2s var(--ease)}
.field:focus-within .field__label{color:var(--spark-text)}
/* Clicul pe eticheta muta focusul in camp (for=...); campul raspunde cu un inel scurt. */
@keyframes cc-field-in{from{box-shadow:inset 0 -2px 0 var(--spark-fill),0 0 0 7px rgba(254,103,1,0)}}
/* La alegere, bifa sare putin: semnalul ca apasarea a prins. */
.solution-row.is-on .solution-row__check svg,.zone-row.is-on .zone-row__check svg{animation:cc-pop .24s var(--ease)}
@keyframes cc-pop{from{transform:scale(.4)}}
.solution-row,.zone-row,.option-row,.choice-card{transition-property:border-color,background-color,box-shadow,transform;transition-duration:.2s}
.solution-row:active,.zone-row:active,.option-row:active,.choice-card:active{transform:scale(.99)}
:focus-visible{outline-color:var(--spark-fill)}

/* ---------- logo-ul, mai mare ---------- */
.cc-logo img{height:56px}
@media (max-width:767.98px){.cc-logo img{height:38px}}
@media (max-width:360px){.cc-logo img{height:32px}}

/* ---------- Pasul X din Y si ghidul ---------- */
.cc-k-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 8px}
.cc-k-row .cc-k{margin:0}
.cc-guide{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;font:600 15px var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc-guide svg{width:18px;height:18px;flex-shrink:0}
.cc-guide:hover{color:var(--spark-press)}

/* ---------- ferestrele: confirmarea si ghidul (<dialog>) ---------- */
.cc-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--border-strong);border-top:3px solid var(--spark-fill);border-radius:var(--radius-sm);background:#fff;color:var(--text);overflow:auto}
.cc-dialog::backdrop{background:rgba(6,30,32,.55)}
.cc-dialog__in{padding:22px 24px}
.cc-dialog__title{margin:0 0 10px;font-family:var(--font-head);font-size:21px;font-weight:700;line-height:1.2}
.cc-dialog__text{margin:0 0 10px;font-size:16px;line-height:1.5;color:var(--text)}
.cc-dialog__list{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.5;color:var(--text-muted)}
.cc-dialog__list li+li{margin-top:4px}
.cc-dialog__steps{margin:0 0 12px;padding-left:22px;font-size:15.5px;line-height:1.5}
.cc-dialog__steps li+li{margin-top:6px}
.cc-dialog__steps li::marker{font-family:var(--font-mono);color:var(--spark-text)}
.cc-dialog__note{margin:0 0 4px;padding:8px 12px;background:var(--surface-sunken);font-size:14px;line-height:1.45;color:var(--text-muted)}
.cc-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
.cc-dialog__actions .btn{min-height:48px;font-size:16px}
.cc-dialog[open]{animation:cc-dlg-in .22s var(--ease)}
@keyframes cc-dlg-in{from{opacity:0;transform:translateY(8px)}}
@media (max-width:480px){.cc-dialog__actions .btn{flex:1 1 100%}}

/* ---------- pasul Contact: adresa cu butonul de distanta, nota din cont ---------- */
.addr-row{display:flex;gap:8px;align-items:stretch}
.addr-row .input{flex:1;min-width:0}
.addr-row__btn{flex-shrink:0;min-height:48px;font-size:15px;white-space:nowrap}
.addr-row__btn[aria-busy="true"]{opacity:.7;cursor:progress}
@media (max-width:560px){.addr-row{flex-direction:column}.addr-row__btn{width:100%}}
.cont-nota{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--spark-fill);background:var(--spark-soft);font-size:14.5px;line-height:1.45}
.cont-nota a{color:var(--spark-text);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .input,.field__label,.solution-row,.zone-row,.option-row,.choice-card{transition:none}
  .input:focus,.input-unit:focus-within .input,.cc-dialog[open],
  .solution-row.is-on .solution-row__check svg,.zone-row.is-on .zone-row__check svg{animation:none}
  .solution-row:active,.zone-row:active,.option-row:active,.choice-card:active{transform:none}
}