/* ═══ CONFIGURATOR UI v2 — strat de prezentare minimală + ⓘ ═══
   Ordin owner 24.09.2026: „produsul și 3D-ul în prim-plan, informația
   tehnică la click". Regula: Nume · Preț · Selectare · ⓘ → CLICK = tot.

   Principii:
   – ADITIV și REVERSIBIL: nu atinge motorul 3D, motorul de preț,
     CTA „Trimite Cererea", transferul în formular sau logica bundle-ului.
   – Informația NU se pierde: fiecare text ascuns din flux reapare
     integral în popoverul ⓘ aferent (date verbatim v1.12).
   – Folosește exclusiv token-ele site-ului (--ch --cr --oak --oakl --wh
     --serif --body) — aceeași limbă vizuală. */

/* ── 0. Utilitar generic (v3) ── */
.cfgui-hidden { display: none !important; }

/* ── 1. Ascunde textele lungi din fluxul principal (reapar în ⓘ) ──
   v3: .co-d NU mai e ascuns — JS îi scrie descrierea scurtă în flux;
   .cfg-head.cfgui-hidden = înlocuit de blocul static .cfg-hero */
#configurator-root .cfg-mcard .cm-d,
#configurator-root .cfg-panel > .cfg-sub,
#configurator-root .cfg-panel .cfg-legend,
#configurator-root .cfg-rr-note,
#configurator-root .cfg-note,
#configurator-root .cfg-panel details:not(.cfg-advanced),
#configurator-root .cfg-clabel.cfgui-hidden,
#configurator-root .cfg-head.cfgui-hidden { display: none !important; }

/* ── 2. Butonul ⓘ (acolo unde era textul, acum un singur gest) ── */
.cfgui-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(184,135,58,.55); background: rgba(26,26,24,.55);
  color: var(--oak); font-family: var(--body); font-size: .72rem;
  cursor: pointer; transition: all .2s; flex: none; line-height: 1;
  padding: 0;
}
.cfgui-info:hover { background: var(--oak); color: var(--ch); border-color: var(--oak); transform: scale(1.08); }
.cfgui-info:focus-visible { outline: 2px solid var(--oakl); outline-offset: 2px; }

/* pe cardul de model — colț dreapta-sus */
.cfg-mcard .cfgui-info { position: absolute; top: 12px; right: 12px; }
.cfg-mcard { position: relative; }

/* pe cardul de opțiune — jos dreapta (bifa rămâne sus dreapta) */
.cfg-opt .cfgui-info { position: absolute; bottom: 10px; right: 10px; }

/* lângă titlul panoului */
.cfg-panel h3 .cfgui-info { margin-left: auto; }
.cfg-price h3 .cfgui-info { margin-left: auto; }

/* ── 3. Card model: rămâne doar esențialul ── */
.cfg-mcard .cm-c { letter-spacing: .02em; }
.cfg-mcard .cfgui-select {
  display: inline-block; margin-top: 10px; font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--oak);
  border: 1px solid rgba(184,135,58,.5); border-radius: 3px; padding: 4px 10px;
  pointer-events: none; transition: all .25s;
}
.cfg-mcard.on .cfgui-select {
  background: var(--oak); color: var(--ch); border-color: var(--oak);
}
.cfg-mcard:not(.on) .cfgui-select { opacity: 1; color: var(--oakl); }

/* eticheta MODELE deasupra grilei */
.cfgui-models-label {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,240,232,.5); margin: 0 0 10px; font-family: var(--body);
}

/* ── 4. Popover ⓘ — card cu informația completă ── */
.cfgui-pop {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,10,.72); backdrop-filter: blur(4px);
  padding: 20px; animation: cfgui-fade .18s ease-out;
}
@keyframes cfgui-fade { from { opacity: 0; } to { opacity: 1; } }
.cfgui-pop-card {
  background: linear-gradient(165deg, #232320, #1a1a18);
  border: 1px solid rgba(184,135,58,.45); border-radius: 8px;
  max-width: 520px; width: 100%; max-height: min(84vh, 720px);
  display: flex; flex-direction: column;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  animation: cfgui-rise .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cfgui-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.cfgui-pop-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid rgba(245,240,232,.1);
}
.cfgui-pop-head b { font-family: var(--serif); font-size: 1.08rem; color: var(--wh); font-weight: 700; line-height: 1.3; }
.cfgui-pop-x {
  margin-left: auto; background: none; border: 1px solid rgba(245,240,232,.2);
  color: rgba(245,240,232,.6); border-radius: 4px; padding: 5px 12px;
  font-size: .68rem; letter-spacing: .06em; cursor: pointer; font-family: var(--body);
  transition: all .2s; flex: none;
}
.cfgui-pop-x:hover { color: var(--cr); border-color: rgba(184,135,58,.55); }
.cfgui-pop-body { padding: 16px 20px; overflow-y: auto; font-size: .8rem; color: rgba(245,240,232,.78); line-height: 1.65; }
.cfgui-pop-body p { margin: 0 0 10px; }
.cfgui-pop-body b { color: var(--oakl); font-weight: 600; }
.cfgui-spec { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed rgba(245,240,232,.12); }
.cfgui-spec span:first-child { color: rgba(245,240,232,.55); flex: none; }
.cfgui-spec span:last-child { color: var(--cr); font-weight: 600; text-align: right; }
.cfgui-mat { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed rgba(245,240,232,.1); font-size: .74rem; }
.cfgui-mat span:first-child { color: rgba(245,240,232,.7); }
.cfgui-mat span:last-child { color: var(--oak); font-size: .66rem; letter-spacing: .05em; text-align: right; flex: none; }
.cfgui-pop-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 20px 18px; border-top: 1px solid rgba(245,240,232,.1); }
.cfgui-pop-price { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--oak); margin-right: auto; }
.cfgui-btn-sel {
  background: var(--oak); color: var(--ch); border: none; border-radius: 4px;
  padding: 10px 20px; font-family: var(--body); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; cursor: pointer; transition: all .2s;
}
.cfgui-btn-sel:hover { filter: brightness(1.12); }
.cfgui-btn-close {
  background: none; color: rgba(245,240,232,.65); border: 1px solid rgba(245,240,232,.22);
  border-radius: 4px; padding: 10px 16px; font-family: var(--body); font-size: .74rem;
  cursor: pointer; transition: all .2s;
}
.cfgui-btn-close:hover { color: var(--cr); border-color: rgba(184,135,58,.5); }
.cfgui-hint { font-size: .66rem; color: rgba(245,240,232,.45); margin-top: 8px; }

/* ── 5. Responsive: pe mobil popoverul devine bottom-sheet ── */
@media (max-width: 640px) {
  .cfgui-pop { align-items: flex-end; padding: 0; }
  .cfgui-pop-card { max-width: 100%; border-radius: 14px 14px 0 0; max-height: 88vh; animation: cfgui-up .25s ease-out; }
  @keyframes cfgui-up { from { transform: translateY(60px); } to { transform: none; } }
  .cfgui-pop-body { font-size: .82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3 PREMIUM (ordin owner 28.09.2026) — „evoluție, nu reconstrucție"
   01 Model → 02 Finisaj → 03 Dotări → 04 Configurația ta → Solicită oferta
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 6. Identitatea: blocul static .cfg-hero de deasupra configuratorului ── */
.cfg-hero {
  background: var(--fr);
  padding: 92px var(--px) 6px;
  text-align: center;
}
.cfg-hero .sec-h { max-width: 900px; margin: 18px auto 0; }
.cfg-hero .sec-p { margin: 16px auto 0; }
.cfg-hero-btn { display: inline-block; margin-top: 30px; }
/* header-ul bundle-ului e ascuns de .cfg-hero → secțiunea urcă natural */
#configurator-root .cfg-sec { padding-top: 30px; }

/* ── 7. „Ai nevoie de ajutor?" — închide zona configuratorului ── */
.cfg-help {
  background: var(--fr);
  padding: 30px var(--px) 78px;
  text-align: center;
  font-family: var(--body);
}
.cfg-help-p { font-size: .95rem; color: rgba(245,240,232,.72); }
.cfg-help-p b { color: var(--wh); font-weight: 600; }
.cfg-help-p a {
  color: var(--oakl); text-decoration: none; border-bottom: 1px solid rgba(212,168,85,.4);
  transition: color .2s, border-color .2s;
}
.cfg-help-p a:hover { color: var(--wh); border-color: var(--wh); }

/* ── 8. Carduri MODEL premium: nume + badge + capacitate + preț + pastilă ── */
.cfg-mcard {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; min-height: 172px; padding: 18px 16px 16px;
}
.cfg-mcard .cfgui-mn {
  display: block; font-family: var(--serif); font-size: 1.28rem;
  font-weight: 700; color: var(--wh); line-height: 1.15;
}
.cfg-mcard .cfgui-ms {
  display: inline-block; margin-top: 8px; font-family: var(--body);
  font-size: .58rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oakl);
  border: 1px solid rgba(184,135,58,.45); border-radius: 3px; padding: 4px 9px;
}
.cfg-mcard .cm-c {
  order: 2; margin-top: 10px; font-size: .7rem;
  color: rgba(245,240,232,.55); letter-spacing: .03em;
}
.cfg-mcard .cm-p {
  order: 3; margin-top: auto; padding-top: 12px;
  font-family: var(--serif); font-size: 1.22rem; font-weight: 700; color: var(--oakl);
}
.cfg-mcard .cfgui-select { position: absolute; bottom: 16px; right: 12px; margin-top: 0; }
.cfg-mcard.on { box-shadow: 0 10px 34px rgba(184,135,58,.16); }
.cfg-mcard.on .cfgui-mn { color: var(--wh); }

/* ── 9. Carduri FINIȘAJ premium: imaginea face parte din card ── */
.cfg-presets { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cfg-preset {
  position: relative; padding: 0; overflow: hidden; text-align: left;
  border-radius: 6px; display: flex; flex-direction: column;
}
.cfg-presets .cfg-preset:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cfg-presets .cfg-preset:last-child:nth-child(odd) .cfgui-cimg { aspect-ratio: 21 / 9; }
.cfgui-cimg {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; background: #22221e; flex: none;
}
.cfgui-cimg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cfg-preset:hover .cfgui-cimg img { transform: scale(1.045); }
.cfg-preset.on .cfgui-cimg::after {
  content: '✓'; position: absolute; top: 9px; right: 9px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--oak); color: var(--ch);
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.cfgui-cled {
  position: absolute; left: 9px; bottom: 9px;
  background: rgba(26,26,24,.86); border: 1px solid rgba(212,168,85,.55);
  color: var(--oakl); font-size: .56rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px; backdrop-filter: blur(4px);
}
.cfg-preset .cp-chip { height: 4px; border-radius: 0; margin: 0; display: block; flex: none; }
.cfg-preset .cp-n {
  padding: 11px 12px 0; font-size: .8rem; font-weight: 600;
  color: var(--cr); line-height: 1.3;
}
.cfg-preset .cp-t {
  padding: 3px 12px 12px; font-size: .66rem;
  color: rgba(245,240,232,.48); letter-spacing: .02em; line-height: 1.4;
}
.cfg-preset.on { box-shadow: 0 0 0 1px var(--oak), 0 12px 36px rgba(184,135,58,.14); }
.cfgui-fsub {
  font-size: .74rem; color: rgba(245,240,232,.55); line-height: 1.55;
  margin: 2px 0 13px;
}

/* ── 10. Carduri DOTĂRI: nume → explicație scurtă → +preț ── */
.cfg-opt .co-n span { display: none; } /* codul intern (UC/IZ/…) nu e comercial */
.cfg-opt .co-d {
  display: block; font-size: .68rem; line-height: 1.5;
  color: rgba(245,240,232,.55); margin-top: 5px;
}
.cfg-opt .co-p { margin-top: 7px; }

/* ── 11. CONFIGURAȚIA TA — panoul de preț ── */
.cfg-price .cfgui-frow .v { color: var(--oakl); }
.cfg-price .cfg-row.cfgui-hidden { display: none !important; }

/* ── 12. Responsive v3 ── */
@media (max-width: 640px) {
  .cfg-hero { padding-top: 70px; }
  .cfg-presets { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cfg-mcard { min-height: 150px; }
  .cfg-mcard .cfgui-mn { font-size: 1.12rem; }
  .cfg-mcard .cm-p { font-size: 1.06rem; }
  .cfg-mcard .cfgui-select { position: static; margin-top: 10px; align-self: flex-start; }
  .cfg-mcard .cm-p { padding-top: 8px; }
}

/* ── 13. CULORI-V4 (ordin owner 28.09.2026): 6 corp × 6 accente = 36 ── */
/* rândul corp: 6 opțiuni vizibile, în ordinea ownerului (P1 „Salvie" e doar
   în preset-ul Semnătura — vizibil exclusiv când e corpul activ) */
#configurator-root .cfg-crow[aria-label="Culoarea corpului"] .cfg-cw:nth-child(2) { order: 1; } /* Verde Salvie */
#configurator-root .cfg-crow[aria-label="Culoarea corpului"] .cfg-cw:nth-child(3) { order: 2; } /* Stejar Deschis */
#configurator-root .cfg-crow[aria-label="Culoarea corpului"] .cfg-cw:nth-child(4) { order: 3; } /* Stejar Închis */
#configurator-root .cfg-crow[aria-label="Culoarea corpului"] .cfg-cw:nth-child(5) { order: 6; } /* Albastru Statement */
#configurator-root .cfg-crow[aria-label="Culoarea corpului"] .cfgui-xsw[data-name="Gri Antracit"] { order: 4; }
#configurator-root .cfg-crow[aria-label="Culoarea corpului"] .cfgui-xsw[data-name="Grej"] { order: 5; }
#configurator-root .cfg-crow .cfg-cw[data-bxhide] { display: none !important; }
/* swatch-urile custom arată identic cu cele oficiale (funcție normală, matură) */
#configurator-root .cfgui-xsw .cc {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
/* panoul de preț: rândurile Culoarea corpului + Accente */
.cfg-price .cfgui-crow2 .v, .cfg-price .cfgui-arow2 .v { color: var(--oakl); }
/* suprimare vizuală fără luptă cu React: atribute data-* (nu sunt în vdom-ul
   React → nu pot fi șterse la re-randări; clasele .on rămân ale bundle-ului) */
#configurator-root .cfg-cw.on[data-carrieroff] .cc {
  border-color: rgba(245,240,232,.15);
  box-shadow: none;
}
#configurator-root .cfg-preset.on[data-poff] {
  box-shadow: none;
}