/* Configuratorul de neon (/configurator), peste stilurile din captura Shopify (24 sept 2026).
 *
 * Legata de `scripts/fa-configurator.js`, impreuna cu `/js/configurator.js`. Pagina are
 * stilurile ei in <style>-uri din <body>, multe cu `!important`, deci regulile de aici care
 * trebuie sa le bata au un id in plus (`#quote-modal #contact_form ...`), nu doar ordinea. */

/* Semnul desenat din liniile CNC (30 sept 2026, js/configurator-linii.js, docs/configurator-linii.md): pentru
   fonturile pornite in managerul din aplicatie, textul fontului se ascunde, iar tubul se deseneaza SVG, la grosimea
   lui reala. Stiva ia marimea desenului (dimensiunile se socotesc din ea). */
#text-stack .cfg-linii { display: none; grid-area: content; overflow: visible; pointer-events: none; }
#text-stack.cfg-din-linii .cfg-linii { display: block; }
#text-stack.cfg-din-linii .layer-front,
#text-stack.cfg-din-linii .layer-back { display: none; }
/* din linii: marginea placii (3 cm) e in desen - fara spatiul de 10 px al „Dreptunghiular" si fara chenar (1 px din
   pagina e, la un semn mare, jumatate de centimetru real); linia fina a dreptunghiului e desenata inauntru */
#text-stack.cfg-din-linii { border-width: 0; }
/* Animatiile de dinainte (Marius, 30 sept 2026: „adauga inapoi animatiile de schimbare a culorii si de neon on / off"):
   textul avea `transition: color .2s, text-shadow .2s`; tubul si stralucirea lui trec la fel, lin - aprins / stins
   inseamna stralucirea care vine sau pleaca (`filter` spre / dinspre `none`) si tubul care se albeste / se coloreaza */
#text-stack .cfg-linii { transition: filter .35s ease; }
#text-stack .cfg-linii path { transition: stroke .35s ease; }
@media (prefers-reduced-motion: reduce) { #text-stack .cfg-linii, #text-stack .cfg-linii path { transition: none; } }
#text-stack.cfg-din-linii.mode-square { padding: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 0 20px rgba(0, 0, 0, .5); }
/* Butoanele de font desenate din linii (30 sept 2026): numele ramane text, dar ascuns vizual (il citesc traficul si
   legaturile vechi); desenul lui ia locul. */
.font-grid .font-btn.cfg-font-din-linii { display: flex; align-items: center; justify-content: center; }
.font-grid .font-btn.cfg-font-din-linii .cfg-font-nume { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.font-grid .font-btn { position: relative; }
.font-grid .font-btn .cfg-font-mostra { display: block; height: 1.15em; width: auto; max-width: 100%; overflow: visible; }

/* ---------------------------------------------------------------- fereastra „Trimite designul"
 * Se deruleaza EA: pe un telefon mic, cu tastatura deschisa, „Trimite" ramanea sub marginea
 * ecranului si nu se putea ajunge la el. `align-items: flex-start` + `margin: auto` pe cutie:
 * centrata cand incape, lipita sus (si derulabila) cand nu - cu `center`, partea de sus a unei
 * cutii mai inalte decat ecranul iesea deasupra lui, unde nu se mai poate derula. */
#quote-modal.nl-modal,
#success-modal.nl-modal {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
}
@supports (height: 100dvh) {
  #quote-modal.nl-modal, #success-modal.nl-modal { height: 100dvh; }
}
#quote-modal .nl-modal-box,
#success-modal .nl-success-box { margin: auto; box-sizing: border-box; }

/* pagina de dedesubt nu se deruleaza cat e fereastra deschisa */
html.cfg-fereastra-deschisa { overflow: hidden; }

@media (max-width: 679px) {
  #quote-modal .nl-modal-box { width: 100%; max-width: 440px; padding: 18px 16px 14px; border-radius: 18px; }
  /* compact (Marius, 28 sept 2026: „e prea mare"): titlul era 32 px, campurile 48, zona de text
     116 - cutia avea 841 px pe un ecran de 760. Campurile raman de 44 px (degetul) si 16 px text. */
  #quote-modal #modal-title { font-size: 20px !important; line-height: 1.2; margin: 0 0 4px !important; letter-spacing: -.01em; }
  #quote-modal #modal-desc { font-size: 13px !important; line-height: 1.4; margin: 0 0 14px !important; }
  #quote-modal #contact_form .cfg-camp { gap: 4px; margin-bottom: 10px; }
  #quote-modal #contact_form .cfg-eticheta { font-size: 12.5px; }
  #quote-modal #contact_form input:not([type="hidden"]),
  #quote-modal #contact_form select { height: 44px; padding: 0 12px !important; border-radius: 10px; }
  #quote-modal #contact_form textarea { height: 68px; min-height: 68px; padding: 10px 12px !important; border-radius: 10px; resize: vertical; }
  #quote-modal #contact_form .cfg-ajutor { font-size: 12px; margin: -4px 0 10px; }
  #quote-modal #contact_form button[type="submit"] { margin-top: 4px; }
  #quote-modal #contact_form .nl-cancel-btn { min-height: 40px; margin-top: 2px; }
  #quote-modal #contact_form .cfg-legal { margin-top: 6px; font-size: 11.5px; }
}

/* ---------------------------------------------------------------- campurile, cu nume vizibil */
#contact_form .cfg-camp { display: grid; gap: 6px; margin: 0 0 12px; min-width: 0; }
#contact_form .cfg-eticheta {
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: #e4deec; cursor: pointer;
}
#contact_form .cfg-eticheta small { font-size: 12px; font-weight: 400; color: #9e97a8; }
#contact_form .cfg-ajutor { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.45; color: #9e97a8; }
#contact_form .cfg-eroare-camp { margin: 0; font-size: 13px; line-height: 1.4; color: #ff8fa3; }
#contact_form > .cfg-eroare-camp { margin: -6px 0 12px; }
#contact_form .cfg-eroare-camp[hidden], #contact_form .cfg-eroare[hidden] { display: none !important; }

/* 16 px: sub atat, iPhone mareste pagina la atingere. Pagina scrie 14 px cu `!important`. */
#quote-modal #contact_form input:not([type="hidden"]),
#quote-modal #contact_form textarea,
#quote-modal #contact_form select { font-size: 16px !important; }

#quote-modal #contact_form [aria-invalid="true"] {
  border-color: #ff5c7a !important;
  box-shadow: 0 0 0 2px rgba(255, 92, 122, .22) !important;
}

#contact_form .cfg-eroare {
  margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 92, 122, .12); border: 1px solid rgba(255, 92, 122, .45);
  color: #ffd3dc; font-size: 13.5px; line-height: 1.45;
}
#contact_form .cfg-legal { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #9e97a8; text-align: center; }
#contact_form .cfg-legal a { color: #ff7ccc; }

#contact_form button[type="submit"] { min-height: 48px; font-size: 15px !important; }
/* butonul ferestrei e `.nl-buton` (6 oct 2026): stilul vechi al temei, scris cu !important in pagina, nu-l mai deformeaza */
#quote-modal #contact_form button[type="submit"].nl-buton {
  min-height: 56px; padding: 0 26px !important; border-radius: var(--nl-buton-raza, 14px) !important;
  font: 700 17px/1.2 Inter, system-ui, sans-serif !important;
}
#contact_form button[type="submit"]:disabled { opacity: .6; cursor: wait; }
#contact_form .nl-cancel-btn { min-height: 44px; font-size: 14px; color: #b3acbf; }

/* pe ecran lat formularul e grila de doua coloane: pe rand intreg ce nu e pereche */
@media (min-width: 680px) {
  #contact_form > .cfg-plin, #contact_form > p { grid-column: 1 / -1; }
  #contact_form > .cfg-ajutor { margin-top: -4px; }
}

/* ---------------------------------------------------------------- confirmarea */
#success-modal .nl-success-box {
  background: #161618; border: 1px solid rgba(255, 54, 176, .45); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 54, 176, .14);
  padding: 32px 24px 24px; max-width: 420px;
}
#success-modal .nl-success-box h2 {
  margin: 0 0 10px; font-family: 'Sora', sans-serif; font-size: 22px; line-height: 1.25;
  letter-spacing: -.01em; color: #fff; text-wrap: balance;
}
#success-modal .nl-success-box p { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: #c9c2d4; }
#success-modal .nl-success-box p b { color: #fff; font-weight: 600; }
#success-modal .nl-success-btn {
  background: #ff36b0; color: #15030e; border-radius: 10px; min-height: 46px; padding: 12px 34px;
  font-family: 'Sora', sans-serif; font-size: 15px;
}
#success-modal .nl-success-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfg-gata-semn {
  position: relative; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  border: 2px solid #ff36b0; box-shadow: 0 0 18px rgba(255, 54, 176, .55), inset 0 0 12px rgba(255, 54, 176, .35);
}
.cfg-gata-semn::after {
  content: ""; position: absolute; left: 17px; top: 12px; width: 12px; height: 21px;
  border: solid #ff7ccc; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  #success-modal .nl-success-box { animation: cfg-intra .32s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes cfg-intra {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- semnul se editeaza din previzualizare */
.neon-preview-box.cfg-editabil { cursor: text; }
.neon-preview-box.cfg-editabil .day-night-switch { cursor: pointer; }
.cfg-indiciu {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(22, 22, 24, .72); color: #f4f1f8;
  font: 600 12px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap;
  cursor: text; transition: opacity .3s ease;
}
/* creionul: desen (masca SVG), nu caracterul „✎" - iPhone-ul il desena cu alt font, de alta marime */
.cfg-indiciu::before {
  content: ""; width: 13px; height: 13px; opacity: .85; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.6a2.1 2.1 0 0 1 3 3L7.5 18.6 3.5 19.6l1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.6a2.1 2.1 0 0 1 3 3L7.5 18.6 3.5 19.6l1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cfg-indiciu--ascuns { opacity: 0; pointer-events: none; }
/* previzualizarea stransa (derulat, pe telefon) e prea mica pentru indiciu */
.neon-preview-box.nb-compact .cfg-indiciu { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- distantierele, incluse
 * Un mesaj simplu deasupra butonului de trimitere, in locul meniului cu distantiere contra
 * cost (scos pe 24 sept 2026). Text, nu caseta: Vlad nu l-a vrut sa arate ca o bifa. */
.cfg-inclus {
  margin: 0 0 12px; text-align: center; text-wrap: balance;
  font-size: 13px; line-height: 1.45; color: rgba(244, 241, 248, .82);
}

/* ---------------------------------------------------------------- inaltime / latime */
@media (max-width: 768px) {
  .dim-mode-switch .mode-btn { min-height: 40px; padding: 8px 6px; font-size: 12px; letter-spacing: .02em; }
  #input-dimension { font-size: 16px; }
}

/* ---------------------------------------------------------------- previzualizarea, scalata (28 sept 2026)
 * `fa-configurator.js: previzualizareFluida`. Semnul (cu riglele) sta in mijlocul cadrului si se
 * potriveste prin `transform: scale(--nb-sc)`, pus de `applyAutoScale`. Fontul ramane 80 px peste
 * tot: conturul e un filtru SVG cu grosimi in px, deci numai la aceeasi marime arata la fel pe
 * telefon ca pe calculator. Ansamblul e scos din curgere (absolut): cadrul nu mai creste dupa text. */
.neon-preview-box { overflow: hidden; }
.neon-preview-box .common-text-style { font-size: 80px; }
.neon-preview-box .measure-container {
  position: absolute; left: 50%; top: 50%; margin: 0;
  transform: translate(-50%, -50%) scale(var(--nb-sc, 1)); transform-origin: 50% 50%;
  will-change: transform;
}
/* riglele raman lizibile oricat de mic ar fi semnul: eticheta se scaleaza invers */
.neon-preview-box .ruler-label-vert, .neon-preview-box .ruler-label-horz {
  display: inline-block; transform: scale(calc(1 / max(var(--nb-sc, 1), .45)));
}
/* doar la strangerea / desfacerea cadrului se anima; cat scrii, semnul se potriveste pe loc */
.neon-preview-box.nb-anim .measure-container { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
/* Pe calculator previzualizarea ramane LIPITA sus, in stanga, cat derulezi controalele (29 sept 2026,
   Marius). `.preview-section` avea `overflow: hidden`, care il face pe el containerul de derulare al
   elementului lipit - deci `sticky` nu misca nimic; `clip` taie la fel, fara sa faca container.
   `min-width: 0`: fara `hidden`, un copil `flex` nu mai poate fi strans sub continutul lui.
   Prefixul `.neon-builder-wrapper`: foaia asta se incarca inaintea <style>-ului din pagina, iar la
   aceeasi specificitate castiga cel de mai tarziu. Inaltimea se ia din ecran: pe un laptop de 700 px
   o previzualizare de 450 ar lasa prea putin loc controalelor. Pe telefon o lipeste alt cod (pagina). */
@media (min-width: 769px) {
  .neon-builder-wrapper .preview-section { overflow: clip; min-width: 0; }
  .neon-builder-wrapper .neon-preview-box {
    position: sticky; top: calc(var(--nb-top, 62px) + 14px); z-index: 20;
    min-height: clamp(300px, calc(100svh - var(--nb-top, 62px) - 260px), 450px);
  }
}
@media (max-width: 768px) {
  .neon-preview-box {
    transition: height .3s cubic-bezier(.2, .7, .2, 1), margin-bottom .3s cubic-bezier(.2, .7, .2, 1),
      min-height .3s cubic-bezier(.2, .7, .2, 1), padding .3s cubic-bezier(.2, .7, .2, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .neon-preview-box, .neon-preview-box.nb-anim .measure-container { transition: none; }
}

/* ---------------------------------------------------------------- conturul, desenat o data (28 sept 2026)
 * `configurator.js` il calculeaza pe un canvas (aceiasi pasi ca filtrul SVG) si il pune sub text.
 * Copia cu filtrul (`.layer-back`) ramane doar pentru asezare, nevazuta si FARA filtru: pe WebKit
 * filtrul se recalcula la fiecare desenare - 450-950 ms la o schimbare de font, 155 s cu Folklore. */
.text-stack.cfg-contur-js .layer-back { filter: none !important; visibility: hidden; }
/* `max-width: none`: tema pune `canvas { max-width: 100% }`, iar panza (mai lata decat textul, cu
   marginea conturului) iesea strivita pe orizontala - placa nu mai acoperea capatul textului */
.cfg-contur { position: absolute; display: block; pointer-events: none; z-index: 0; opacity: .13; max-width: none !important; max-height: none !important; }
.text-stack.mode-square .cfg-contur { display: none; }

/* ---------------------------------------------------------------- alegeri cu desen (29 sept 2026)
 * Forma semnului, locatia si controlul: doua carti pe rand, cu desenul lor, in locul meniurilor
 * (`scripts/sabloane/alegeri-configurator.js`, comportamentul in `/js/cfg-alegeri.js`). <select>-urile
 * raman in pagina, ascunse: tot codul paginii citeste valoarea de acolo. `--cfg-neon` = culoarea
 * neonului aleasa (o pune cfg-alegeri.js); alesa, cartea se invecineaza cu ea. */
.cfg-sel[hidden] { display: none !important; }
:root { --cfg-neon: #ff00de; }
.cfg-alege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cfg-accesorii { display: grid; gap: 18px; }
/* eticheta de sub-sectiune („Unde sta semnul?"): mai mare si mai luminoasa decat pana acum (12 px, 62% -
   se citea greu), dar sub titlul sectiunii, care e cu majuscule */
.cfg-sub { display: block; margin: 0 0 10px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fff; opacity: .94; }
.cfg-carte { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* tot cardul se apasa; radio-ul ramane pe loc pentru tastatura si cititoare de ecran */
.cfg-carte input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cfg-fata {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; height: 100%;
  padding: 14px 8px 12px; border-radius: var(--cfg-raza, 12px); text-align: center;
  border: 1px solid var(--cfg-linie, rgba(255, 255, 255, .14)); background: var(--cfg-fond, rgba(255, 255, 255, .035));
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), border-color .25s, box-shadow .25s, background-color .25s;
}
.cfg-carte:active .cfg-fata { transform: scale(.965); }
.cfg-carte input:checked + .cfg-fata {
  border-color: var(--cfg-linie-sel, rgba(255, 255, 255, .85)); background: var(--cfg-fond-sel, rgba(255, 255, 255, .085));
  box-shadow: 0 0 0 1px var(--cfg-linie-sel, rgba(255, 255, 255, .85));
}
.cfg-carte input:focus-visible + .cfg-fata { outline: 2px solid #fff; outline-offset: 3px; }
.cfg-poza { display: grid; place-items: center; width: 100%; max-width: 150px; margin-bottom: 8px; }
.cfg-poza svg { display: block; width: 100%; height: auto; overflow: visible; }
.cfg-titlu { font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.cfg-nota { font-size: 12.5px; line-height: 1.3; opacity: .7; }
.cfg-carte input:checked + .cfg-fata .cfg-nota { opacity: .9; }
.cfg-pret {
  position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); opacity: .9;
}

/* ---- forma: acelasi cuvant, cu placa dupa litere si cu placa dreapta. Doua SVG-uri puse unul peste
   altul: placa dedesubt, literele deasupra, cu lumina neonului pe SVG-ul lor (Safari aplica `filter`
   doar pe SVG-ul intreg, nu pe elementele dinauntru). */
.cfg-ex { position: relative; display: block; width: 100%; }
.cfg-ex svg + svg { position: absolute; inset: 0; }
.cfg-plc { fill: rgba(255, 255, 255, .17); stroke: rgba(255, 255, 255, .17); stroke-width: 13; stroke-linejoin: round; }
.cfg-pld { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .4); stroke-width: 1.4; }
.cfg-litere { fill: #fff; }
.cfg-svg-lumina { filter: drop-shadow(0 0 1.5px var(--cfg-neon)) drop-shadow(0 0 5px var(--cfg-neon)); }
.cfg-carte input:not(:checked) + .cfg-fata .cfg-svg-lumina { filter: none; opacity: .8; }

/* ---- desenele accesoriilor: contur rotunjit; ce lumineaza ia culoarea neonului, restul e stins */
.cfg-casa, .cfg-semnal, .cfg-buton { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfg-buton { stroke: var(--cfg-neon); }
.cfg-semnal { stroke: rgba(255, 255, 255, .28); }
.cfg-tub, .cfg-lum1, .cfg-lum2 { fill: none; stroke: var(--cfg-neon); stroke-linecap: round; stroke-linejoin: round; }
.cfg-tub { stroke-width: 2.4; }
.cfg-lum1 { stroke-width: 5; opacity: .22; }
.cfg-lum2 { stroke-width: 9; opacity: .08; }
.cfg-disc { fill: var(--cfg-neon); fill-opacity: .3; stroke: var(--cfg-neon); stroke-width: 2.4; }
.cfg-puncte { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 3; stroke-linecap: round; }
.cfg-picatura { fill: none; stroke: #b4cbdc; stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
.cfg-bara { fill: var(--cfg-neon); }
/* nealesa, cartea sta stinsa: lumina e doar pe cea aleasa */
.cfg-carte input:not(:checked) + .cfg-fata :is(.cfg-lum1, .cfg-lum2) { opacity: 0; }
.cfg-carte input:not(:checked) + .cfg-fata :is(.cfg-tub, .cfg-buton, .cfg-disc) { stroke: rgba(255, 255, 255, .55); }
.cfg-carte input:not(:checked) + .cfg-fata .cfg-disc { fill: rgba(255, 255, 255, .12); }
.cfg-carte input:not(:checked) + .cfg-fata .cfg-bara { fill: rgba(255, 255, 255, .5); }
.cfg-carte input:not(:checked) + .cfg-fata .cfg-picatura { opacity: .45; }

/* ---- miscarea: doar la cartea aleasa (si doar pe `transform` / `opacity`, ca sa nu coste nimic) */
.cfg-inima, .cfg-firma, .cfg-soare, .cfg-buton, .cfg-bara { transform-box: fill-box; transform-origin: center; }
.cfg-bara { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .cfg-carte input:checked + .cfg-fata .cfg-inima { animation: cfg-puls 1.8s ease-in-out infinite; }
  .cfg-carte input:checked + .cfg-fata .cfg-picatura { animation: cfg-cade 1.1s linear infinite; animation-delay: calc(var(--i, 0) * -.28s); }
  .cfg-carte input:checked + .cfg-fata .cfg-firma { animation: cfg-puls 2.4s ease-in-out infinite; }
  .cfg-carte input:checked + .cfg-fata .cfg-soare { animation: cfg-respira 2.6s ease-in-out infinite; }
  .cfg-carte input:checked + .cfg-fata .cfg-buton { animation: cfg-puls 1.3s ease-in-out infinite; }
  .cfg-carte input:checked + .cfg-fata .cfg-bara { animation: cfg-bara .9s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.17s); }
  .cfg-carte input:checked + .cfg-fata .cfg-rune { animation: cfg-puls 1.6s ease-in-out infinite; }
}
@keyframes cfg-puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes cfg-respira { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cfg-cade { 0% { transform: translateY(-5px); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(9px); opacity: 0; } }
@keyframes cfg-bara { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* ---- previzualizarea raspunde la alegere (doar vizual, nu pleaca in cerere): dimmerul coboara lumina si
   o aduce inapoi, Bluetooth pulseaza in ritm, interiorul aprinde tubul ca pe un neon care porneste,
   exteriorul face sa cada ploaia. Pe `opacity` si `transform`: le face placa video. */
@media (prefers-reduced-motion: no-preference) {
  .neon-preview-box.cfg-demo-dimmer #neon-result { animation: cfg-atenueaza 1.6s ease-in-out; }
  .neon-preview-box.cfg-demo-ritm #neon-result { animation: cfg-ritm 1.7s linear; }
  .neon-preview-box.cfg-demo-aprinde #neon-result { animation: cfg-aprinde 1s ease-out; }
}
@keyframes cfg-atenueaza { 0%, 100% { opacity: 1; } 42%, 58% { opacity: .2; } }
@keyframes cfg-ritm { 0%, 100% { opacity: 1; } 8% { opacity: .28; } 16% { opacity: 1; } 24% { opacity: .28; } 32% { opacity: 1; } 46% { opacity: .55; } 62% { opacity: 1; } 76% { opacity: .5; } 90% { opacity: 1; } }
@keyframes cfg-aprinde { 0% { opacity: .2; } 22% { opacity: .95; } 30% { opacity: .35; } 46% { opacity: 1; } 56% { opacity: .7; } 70%, 100% { opacity: 1; } }
.cfg-ploaie { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; border-radius: inherit; }
.cfg-ploaie i {
  position: absolute; top: -20px; width: 2px; height: 15px; border-radius: 2px; opacity: .85;
  background: linear-gradient(rgba(180, 203, 220, 0), #b4cbdc); animation: cfg-ploaie .85s linear both;
}
@keyframes cfg-ploaie { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-10px, var(--cfg-h, 320px), 0); } }

/* ---------------------------------------------------------------- un singur stil pentru tot panoul (29 sept 2026)
 * Marius: „nu unele casete un stil, altele alt stil, sa arate totul uniform, nu foarte colorat, nu toy-like".
 * Pana atunci campul de text, butoanele de font, cutia de dimensiuni, logo-ul si cartile aveau fiecare
 * alta raza, alt chenar, alta alegere. Acum toate: aceeasi raza, acelasi chenar fin, aceeasi suprafata,
 * si ACEEASI alegere - chenar alb, fundal putin mai luminos, fara culoare. Culoarea neonului ramane doar
 * unde e neon: semnul, mostrele si partea care lumineaza din desene. Prefix `.neon-builder-wrapper`:
 * foaia asta se incarca inaintea <style>-ului din pagina (vezi mai sus). */
.neon-builder-wrapper {
  --cfg-raza: 12px; --cfg-linie: rgba(255, 255, 255, .14); --cfg-fond: rgba(255, 255, 255, .035);
  --cfg-linie-sel: rgba(255, 255, 255, .85); --cfg-fond-sel: rgba(255, 255, 255, .085);
  border-radius: 16px;
}
.neon-builder-wrapper .neon-preview-box { border-radius: var(--cfg-raza); }
.neon-builder-wrapper .logo-cta-btn,
.neon-builder-wrapper .dimension-box,
.neon-builder-wrapper .info-box {
  border: 1px solid var(--cfg-linie); border-radius: var(--cfg-raza); background: var(--cfg-fond);
}
.neon-builder-wrapper .logo-cta-btn:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); transform: none; }
.neon-builder-wrapper textarea.custom-input,
.neon-builder-wrapper .dim-input-wrapper input,
.neon-builder-wrapper .dim-read-only {
  border: 1px solid var(--cfg-linie); border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: none;
}
.neon-builder-wrapper .dim-read-only { background: rgba(255, 255, 255, .04); }
.neon-builder-wrapper textarea.custom-input:focus,
.neon-builder-wrapper .dim-input-wrapper input:focus { border-color: var(--cfg-linie-sel); background: rgba(0, 0, 0, .4); box-shadow: none; }
/* alegerea de stil (butoanele de font) si cele doua moduri de dimensiune: aceeasi suprafata, aceeasi alegere */
.neon-builder-wrapper .font-grid .font-btn {
  border: 1px solid var(--cfg-linie); border-radius: var(--cfg-raza); background: var(--cfg-fond);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.neon-builder-wrapper .font-grid .font-btn:hover { border-color: rgba(255, 255, 255, .38); }
.neon-builder-wrapper .font-grid .font-btn.active {
  border-color: var(--cfg-linie-sel); background: var(--cfg-fond-sel); box-shadow: 0 0 0 1px var(--cfg-linie-sel); font-weight: 700;
}
.neon-builder-wrapper .mode-btn { border: 1px solid var(--cfg-linie); border-radius: 8px; background: var(--cfg-fond); }
.neon-builder-wrapper .mode-btn.active { border-color: var(--cfg-linie-sel); background: var(--cfg-fond-sel); box-shadow: 0 0 0 1px var(--cfg-linie-sel); }
/* butonul mare de trimitere e actiunea principala: ramane alb, cu aceeasi raza */
.neon-builder-wrapper .controls-section .font-btn[onclick^="openQuoteModal"] { border-radius: var(--cfg-raza); }

/* ---------------------------------------------------------------- accesoriile: butoane mici (30 sept 2026)
 * Marius: „fa-le mai mici, in acelasi stil cu cele de sus, de la font". Interior / Exterior si Dimmer / Bluetooth
 * sunt acum butoane orizontale de ~64 px (ca cele de font): desenul mic in stanga, titlul si nota langa el,
 * pretul (daca are) sub ele. Forma semnului ramane cu exemplul mare: are nevoie de loc ca sa se vada contururile.
 * Liniile desenelor sunt mai groase in unitatile lor, fiindca se micsoreaza de la 150 la 50 px. */
.cfg-alege--loc .cfg-fata, .cfg-alege--control .cfg-fata {
  grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "poza titlu" "poza nota" "poza pret";
  justify-items: start; align-content: center; align-items: center; column-gap: 9px; row-gap: 1px;
  padding: 9px 10px; text-align: left;
}
.cfg-alege--loc .cfg-poza, .cfg-alege--control .cfg-poza { grid-area: poza; width: 40px; margin: 0; }
.cfg-alege--loc .cfg-titlu, .cfg-alege--control .cfg-titlu { grid-area: titlu; font-size: 14px; }
.cfg-alege--loc .cfg-nota, .cfg-alege--control .cfg-nota { grid-area: nota; font-size: 12px; white-space: nowrap; }
.cfg-alege--loc .cfg-pret, .cfg-alege--control .cfg-pret {
  position: static; grid-area: pret; margin-top: 3px; padding: 1px 6px; font-size: 10.5px; line-height: 1.5;
}
.cfg-alege--loc :is(.cfg-casa, .cfg-semnal, .cfg-buton), .cfg-alege--control :is(.cfg-casa, .cfg-semnal, .cfg-buton) { stroke-width: 3.8; }
.cfg-alege--loc .cfg-tub, .cfg-alege--control .cfg-tub { stroke-width: 4.2; }
.cfg-alege--loc .cfg-lum1, .cfg-alege--control .cfg-lum1 { stroke-width: 8; }
.cfg-alege--loc .cfg-lum2, .cfg-alege--control .cfg-lum2 { stroke-width: 13; }
.cfg-alege--loc .cfg-picatura, .cfg-alege--control .cfg-picatura { stroke-width: 3.8; }
.cfg-alege--loc .cfg-disc, .cfg-alege--control .cfg-disc { stroke-width: 3.8; }
.cfg-alege--loc .cfg-puncte, .cfg-alege--control .cfg-puncte { stroke-width: 5; }
.cfg-accesorii { gap: 14px; }
/* pe ecrane sub 380 px nota nu mai incape pe un rand langa desen: se poate rupe, nu iese din buton */
@media (max-width: 380px) {
  .cfg-alege--loc .cfg-nota, .cfg-alege--control .cfg-nota { white-space: normal; }
}

/* ---------------------------------------------------------------- „Detalii tehnice", la sfarsitul configuratorului (30 sept 2026)
 * Marius: „pune-le jos de tot, ca un final al containerului". Stateau sub previzualizare, in coloana din stanga;
 * acum sunt dupa ambele coloane, pe toata latimea, in doua coloane pe calculator. */
.neon-builder-wrapper > .info-box { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.neon-builder-wrapper > .info-box .info-col > h4:first-child { margin-top: 0; }
@media (max-width: 768px) {
  .neon-builder-wrapper > .info-box { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .neon-builder-wrapper > .info-box .info-col + .info-col { margin-top: 22px; }
}

/* Dimensiunea semnului cand previzualizarea e stransa pe telefon (30 sept 2026, js/configurator.js): riglele se ascund
   acolo, eticheta asta ia locul lor */
.neon-preview-box .cfg-dim-mica { display: none; position: absolute; left: 8px; bottom: 8px; z-index: 6; pointer-events: none;
  padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font: 600 11px/1.5 Inter, system-ui, sans-serif; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.neon-preview-box.nb-compact .cfg-dim-mica { display: block; }

/* Caracterul fara linii, scos din casuta (30 sept 2026, js/configurator-linii.js) */
.cfg-caracter-lipsa { margin: 6px 0 0; font-size: 12.5px; color: #ffb4b4; }

/* intervalul dimensiunii (30 sept 2026): numarul scris e afara - semnul ramane pe ultima valoare buna */
#input-dimension.cfg-dim-afara{border-color:#ff6b6b!important;outline-color:#ff6b6b}
.cfg-dim-interval{display:block;margin-top:6px;font-size:12px;line-height:1.3;color:#ff9d9d}
.cfg-dim-interval[hidden]{display:none!important}

/* marimile rapide (1 oct 2026), sub casuta dimensiunii */
.cfg-marimi{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:2px}
.cfg-marime{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#bbb;cursor:pointer;font:inherit;transition:background .2s,border-color .2s,color .2s}
.cfg-marime:hover{background:rgba(255,255,255,.1);color:#fff}
.cfg-marime.activ{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}
.cfg-marime.afara{opacity:.45}
.cfg-marime-nume{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.cfg-marime-cm{font-size:12px;opacity:.8}
.cfg-marime:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* fundalul previzualizarii (1 oct 2026): o camera, peretele clar sub semn; Studio = fundalul de pana acum.
   Marimea si pozitia pozei le pune `configurator.js` (punctul peretelui in mijloc). */
.neon-preview-box { isolation: isolate; }
.cfg-fundal { position: absolute; inset: 0; z-index: -1; background-repeat: no-repeat; opacity: 0; transition: opacity .35s ease; pointer-events: none; border-radius: inherit; }
.cfg-fundal::after { content: ""; position: absolute; inset: 0; transition: opacity .35s ease;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .32) 55%, rgba(0, 0, 0, .62) 100%); }
.neon-preview-box[data-fundal] .cfg-fundal { opacity: 1; }
/* pereti deschisi: putin mai multa umbra, altfel neonul aprins se pierde pe alb */
.neon-preview-box[data-fundal="salon"] .cfg-fundal::after,
.neon-preview-box[data-fundal="receptie"] .cfg-fundal::after { background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .7) 100%); }
/* neonul stins = ziua: peretele cum e */
.neon-preview-box:has(#text-stack.lights-off) .cfg-fundal::after { opacity: .25; }
/* „NEON ON" si „Fundal": o coloana sus in dreapta, doua butoane IDENTICE (inaltime, colturi, litera, iconita) */
.cfg-comenzi { position: absolute; top: 20px; right: 20px; z-index: 50; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.neon-preview-box .cfg-comenzi > .day-night-switch,
.neon-preview-box .cfg-comenzi > .cfg-fundal-btn {
  position: static !important; transform: none !important; margin: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .6); color: #fff;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: normal; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.neon-preview-box .cfg-comenzi > .day-night-switch:hover,
.neon-preview-box .cfg-comenzi > .cfg-fundal-btn:hover { background: rgba(0, 0, 0, .8); }
.cfg-comenzi .nl-i, .cfg-comenzi .switch-icon .nl-i { width: 15px !important; height: 15px !important; flex: none; }
.cfg-comenzi .switch-icon { display: flex; font-size: 15px; }
.cfg-fundal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cfg-fundal-btn.se-incarca { opacity: .6; cursor: progress; }
@media (max-width: 768px) {
  .cfg-comenzi { top: 10px; right: 10px; gap: 6px; }
  .neon-preview-box .cfg-comenzi > .day-night-switch,
  .neon-preview-box .cfg-comenzi > .cfg-fundal-btn { height: 28px; padding: 0 10px; font-size: 10px; }
  .neon-preview-box.nb-compact .cfg-comenzi { transform: scale(.78); transform-origin: top right; top: 6px; right: 6px; }
  .neon-preview-box.nb-compact .cfg-fundal-btn { display: none !important; }
  /* indiciul („Atinge semnul…") jos, nu sub butoane (pe telefon intra sub „NEON ON") */
  .cfg-indiciu { top: auto; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cfg-fundal, .cfg-fundal::after { transition: none; } }

/* pretul semnului (1 oct 2026), deasupra butonului de cerere; „la cerere" cand nu se poate socoti */
.cfg-pret-cutie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--cfg-raza, 12px); background: rgba(255, 255, 255, .04); transition: opacity .2s; }
.cfg-pret-eticheta { width: 100%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.cfg-pret-valoare { font-size: 28px; font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.cfg-pret-nota { font-size: 12px; opacity: .7; }
.cfg-pret-cutie.la-cerere .cfg-pret-valoare { font-size: 20px; }
.cfg-pret-cutie.se-calculeaza { opacity: .55; }
/* depanarea: doar local (serverul o trimite numai cu NEONLAB_PRET_DEPANARE=1, in afara productiei) */
.cfg-pret-depanare { margin: 0 0 14px; padding: 10px 12px; border: 1px dashed #f5a623; border-radius: 8px; font: 12px/1.45 ui-monospace, Menlo, monospace; color: #ddd; }
.cfg-pret-depanare summary { cursor: pointer; color: #f5a623; font-weight: 700; }
.cfg-pret-depanare table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.cfg-pret-depanare th { text-align: left; font-weight: 400; opacity: .75; padding: 1px 8px 1px 0; }
.cfg-pret-depanare td { text-align: right; padding: 1px 0; font-variant-numeric: tabular-nums; }
.cfg-pret-depanare h4 { margin: 8px 0 0; font-size: 12px; color: #f5a623; }
.cfg-pret-eroare { color: #ff7b7b; } .cfg-pret-avert { color: #ffd27b; }
.cfg-pret-imbinare { fill: none; stroke: #ff2b2b; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.cfg-pret:empty { display: none; }
/* dimmerul standard, peste pragul de curent (semn mare): nu se poate alege */
.cfg-alege label.cfg-indisponibil { opacity: .45; cursor: not-allowed; }
.cfg-alege label.cfg-indisponibil .cfg-nota { color: #ffb4b4; }

/* Titlul si textul pentru Google (12 oct 2026, `fa-configurator.js: pentruGoogle`). Titlul e scurt, pe un rand, ca
   unealta sa ramana in primul ecran. */
.neon-builder-wrapper > .cfg-titlu { margin: 0 0 18px; }
.cfg-titlu h1 { margin: 0; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: #f4f1f8; }
.cfg-titlu p { margin: 6px 0 0; font-size: 14px; color: #b9b2c4; }
.cfg-despre { margin-top: 40px; max-width: 760px; color: #d8d2e0; font-size: 15px; line-height: 1.65; }
.cfg-despre h2 { font-family: 'Sora', sans-serif; font-size: 22px; color: #f4f1f8; margin: 28px 0 12px; }
.cfg-despre h2:first-child { margin-top: 0; }
.cfg-pasi { padding-left: 1.3em; display: grid; gap: 8px; margin: 14px 0 0; }
/* intrebarile ca pe paginile de semne (`numere.css: .numere-intrebari`, 23 oct 2026): randuri cu linie, nu casute */
.cfg-intrebari { display: grid; gap: 0; max-width: 760px; }
.cfg-intrebari details { border-bottom: 1px solid rgba(255,255,255,.1); }
.cfg-intrebari summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: #f4f1f8; }
.cfg-intrebari p { margin: 0; padding: 0 0 14px; }
.cfg-despre a { color: #ff7ac9; }
.cfg-alte { margin-top: 22px; }
@media (max-width: 749px) {
  .cfg-titlu h1 { font-size: 21px; }
  .cfg-titlu p { display: none; }   /* pe telefon, previzualizarea semnului ramane cat mai sus */
  .neon-builder-wrapper > .cfg-titlu { margin-bottom: 12px; }
}

/* Butonul de informatii de langa „Oras / adresa" (27 oct 2026, Marius): de ce cerem orasul - pentru transport, inclus in
   pretul semnelor neon. Explicatia apare cand treci cu mouse-ul peste buton, sau cand il atingi / il alegi cu tastatura. */
.cfg-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.cfg-info-buton {
  display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font: italic 700 11px/1 Georgia, serif; cursor: help;
}
.cfg-info-buton:hover, .cfg-info-buton:focus-visible { background: #ff36b0; outline: none; }
.cfg-info-text {
  position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 10px); width: 240px; padding: 10px 12px; border-radius: 10px;
  background: #1c1b20; color: #f4f1f8; font: 400 13px/1.45 Inter, system-ui, sans-serif; text-align: left;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; pointer-events: none;
}
.cfg-info-text::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #1c1b20; }
.cfg-info:hover .cfg-info-text, .cfg-info:focus-within .cfg-info-text { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 600px) {
  /* pe telefon se deschide spre dreapta, ca sa nu iasa din ecran */
  .cfg-info-text { left: -8px; transform: translate(0, 4px); }
  .cfg-info:hover .cfg-info-text, .cfg-info:focus-within .cfg-info-text { transform: translate(0, 0); }
  .cfg-info-text::after { left: 16px; }
}