/* Reguli comune TUTUROR paginilor site-ului (24 sept 2026).
 *
 * Pusa in fiecare pagina de `scripts/sabloane/site-comun.js` - la conversie, pe sablonul de
 * produs si pe paginile de acum -, ultima foaie din <head> dupa cele ale temei. Aici stau
 * doar lucruri care tin de TELEFON si de NETEZIMEA miscarii, nu de aspectul unei pagini
 * anume: alea au foile lor (cos, cautare, cerere, produs, numere).
 */

/* ---------------------------------------------------------------- campurile
 * 16 px, nu mai putin, pe orice camp de scris: pe iPhone Safari MARESTE pagina la atingerea
 * unui camp cu text sub 16 px, iar omul trebuie apoi s-o micsoreze cu degetele. Asa erau
 * filtrele de pret si sortarea din colectii (14 px), cantitatea din pagina de produs (14 px)
 * si campurile ferestrei „Trimite designul" din configurator (14 px).
 *
 * Lista e scrisa pe nume, nu „orice input": o regula generala ar fi MICSORAT si campurile mari
 * (numarul casei are 26 px). Ce scapa de lista prinde `site.js`, care doar RIDICA la 16 px un
 * camp mai mic, chiar inainte sa fie atins. */
@media (max-width: 860px), (pointer: coarse) {
  .price-facet__input,
  .sorting-filter__select,
  .facets select, .facets input[type="text"], .facets input[type="number"],
  quantity-selector-component input, .quantity-selector input, input[name="quantity"],
  #quote-modal input:not([type="hidden"]), #quote-modal select, #quote-modal textarea,
  .contact-form input:not([type="hidden"]), .contact-form select, .contact-form textarea {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------- hero-ul
 * „Respiratia" butoanelor din primul ecran (`.nl-alegeri`, pana la 28 sept `.nl-cta`) animă `box-shadow` - o umbra mare, estompata, redesenata
 * la FIECARE cadru, la nesfarsit, cat timp esti pe pagina. Pe telefon asta tine procesorul
 * ocupat si face derularea sacadata chiar cand hero-ul abia se mai vede. Acelasi efect, dar
 * din OPACITATEA unui strat de stralucire desenat o singura data: opacitatea o anima placa
 * video, fara redesenare. Umbrele sunt cele din `nlBreath` / `nlBreathWhite` (neon-redesign.css),
 * la varf. */
.nl-alegeri .nl-btn-white,
.nl-alegeri .nl-btn-accent {
  animation: none;
  position: relative;
  isolation: isolate;
}
.nl-alegeri .nl-btn-white::after,
.nl-alegeri .nl-btn-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: nl-respira 3.4s ease-in-out infinite;
}
/* Umbrele CENTRATE (deplasare 0): cu 8-12 px in jos, lumina iesea sub buton (Marius, 28 sept). */
.nl-alegeri .nl-btn-white::after {
  box-shadow: 0 0 48px #ffffff94, 0 0 34px 4px #ffffff4d;
}
/* `nlBreathAccent`: acelasi ritm, pornit la jumatate de respiratie dupa celalalt */
.nl-alegeri .nl-btn-accent::after {
  box-shadow: 0 0 44px rgba(var(--np-rgb), .58), 0 0 34px 4px rgba(var(--np-rgb), .32);
  animation-delay: 1.7s;
}
@keyframes nl-respira {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* „lumina" din titlu tremura la nesfarsit (`nlHum`) sub trei straturi de stralucire. Pe
 * telefon, dupa trei tremurari se opreste aprins - efectul s-a vazut, bateria nu mai
 * plateste pentru el. Pe calculator ramane ca pana acum. */
@media (pointer: coarse) {
  .nl-write svg.nl-lit .nl-neon { animation-iteration-count: 1, 3; }
}

/* Cand o sectiune animata iese din ecran, animatiile ei se opresc (le porneste la loc
 * `site.js` cand revine). Pana acum rulau si cu hero-ul la 3000 px deasupra. */
.nl-oprit, .nl-oprit *, .nl-oprit *::before, .nl-oprit *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .nl-alegeri .nl-btn-white::after,
  .nl-alegeri .nl-btn-accent::after { animation: none; opacity: .5; }
}

/* ---------------------------------------------------------------- caseta de cookie-uri Meta
   (`consimtamant.js`, 26 sept 2026). Jos, nu peste toata pagina: omul poate citi site-ul si
   inainte sa aleaga. „Refuz" si „Accept" au ACEEASI marime si acelasi aspect - legea cere ca
   refuzul sa fie la fel de usor ca acceptul, deci niciunul nu e „butonul mare". */
.nl-cookie {
  position: fixed; z-index: 2147483000; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(520px, calc(100% - 24px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 16px; border-radius: 18px;
  background: rgba(18, 16, 22, 0.96); color: rgba(241, 241, 244, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 13px/1.55 Inter, system-ui, -apple-system, sans-serif;
}
.nl-cookie p { margin: 0; }
.nl-cookie .nl-cookie-titlu { color: #fff; font: 600 15px/1.3 Sora, Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
.nl-cookie a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
/* „Refuz" si „Accept" la fel de vizibile: legea cere ca refuzul sa fie la fel de usor ca acordul */
.nl-cookie-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.nl-cookie-btn button {
  min-height: 44px; border-radius: 12px; cursor: pointer;
  font: 600 14.5px/1 Inter, system-ui, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background .2s, border-color .2s;
}
.nl-cookie-btn button:hover, .nl-cookie-btn button:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }
.nl-cookie-btn button[aria-pressed="true"] { border-color: rgba(255, 255, 255, 0.6); }
@media (max-width: 480px) {
  .nl-cookie { bottom: 10px; padding: 16px 16px 14px; }
}

/* ---------------------------------------------------------------- prima pagina, primul ecran
 * Titlu, subtitlu, doua butoane (`sabloane/acasa-alegeri.js`, 28 sept 2026): „Configurează-ți
 * semnul neon" si „Plăcuțe și numere personalizate". Glow-ul lor: stratul `::after` de mai sus;
 * pe telefon unul sub altul, pe toata latimea - textele nu incap alaturi. */
.nl-alegeri { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nl-alegeri .nl-btn { padding: 19px 32px; font-size: 17px; font-weight: 700; border-radius: calc(var(--nl-r, 12px) + 2px); }
@media (max-width: 749px) {
  /* antetul (60 px, `--header-height`, pus de tema) sta PESTE sectiune; inainte, 96 px il ocoleau */
  .nl-hero { padding-top: calc(var(--header-height, 60px) + 16px); }
  .nl-hero .nl-eyebrow { display: none; }
  .nl-hero h1 { margin: 0 0 18px; }
  .nl-hero .nl-sub { font-size: 16px; margin: 0 auto 24px; }
  .nl-alegeri { flex-direction: column; align-items: stretch; gap: 12px; }
  .nl-alegeri .nl-btn { justify-content: center; padding: 17px 20px; font-size: 16px; }
}

/* ---------------------------------------------------------------- iconitele (28 sept 2026)
 * Toate din `scripts/sabloane/iconite.js`: SVG, contur 1,8, in culoarea textului. Inainte erau
 * caractere (✆ ✉ ◷ ↔ 💡), pe care iPhone-ul le desena ca emoji, fiecare de alta marime. */
.nl-i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; }
.nl-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.nl-ic .nl-i { width: 20px; height: 20px; }
.nl-compare-grip .nl-i { width: 18px; height: 18px; stroke-width: 2.2; }
#dn-icon .nl-i { width: 16px; height: 16px; vertical-align: -3px; }
.mode-btn .nl-i { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }

/* ---------------------------------------------------------------- sertarul de pe telefon
 * `sabloane/meniu-telefon.js`: grupuri, iconite, text de 17 px, „Cere ofertă" ca buton la capat.
 * Era 28 px ingrosat, opt randuri la fel de mari. */
.nl-meniu { display: flex; flex-direction: column; padding-top: 4px; }
.nl-meniu .menu-drawer__menu-item--mainlist {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  min-height: 48px; padding-block: 10px;
  font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 17px; font-weight: 500;
  letter-spacing: 0; line-height: 1.2;
}
.nl-meniu .menu-drawer__menu-item-text { white-space: nowrap; flex: 0 1 auto; text-align: left; }
.nl-meniu .menu-drawer__menu-item .nl-i { width: 21px; height: 21px; color: var(--np, #ff2fb0); opacity: .9; }
.nl-meniu .menu-drawer__menu-item--active { font-weight: 650; }
.nl-meniu-grup {
  list-style: none; margin: 18px 0 2px;
  font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.nl-meniu-oferta { margin-top: 22px; }
.nl-meniu-oferta .menu-drawer__menu-item--mainlist {
  justify-content: center; border-radius: 14px; font-weight: 650;
  background: var(--np, #ff2fb0); color: #15030e;
}
.nl-meniu-oferta .menu-drawer__menu-item .nl-i { color: #15030e; opacity: 1; }
/* Randurile apar DEODATA, cu panoul. Tema le aducea pe rand (fiecare cu 0,1 s dupa cel de dinainte,
 * dupa ce se deschidea panoul): ultimul venea dupa peste o secunda. Doar panoul mai aluneca. */
.menu-drawer-container[open] .menu-drawer__animated-element { animation: none; opacity: 1; transform: none; }

/* ---------------------------------------------------------------- glow-ul butoanelor, centrat
 * Umbrele „care respira" (`neon-redesign.css`: nlBreath*) erau deplasate cu 6-12 px in jos, deci
 * lumina iesea sub buton, nu in jurul lui. Aceleasi umbre, cu deplasarea 0. Ultima definitie a
 * unui @keyframes castiga, iar foaia asta vine dupa a temei. */
@keyframes nlBreath {
  0%, to { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 22px rgba(var(--np-rgb), .3); }
  50% { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 30px rgba(var(--np-rgb), .52), 0 0 26px 2px rgba(var(--np-rgb), .28); }
}
@keyframes nlBreathWhite {
  0%, to { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 32px #ffffff57; }
  50% { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 44px #ffffff94, 0 0 34px 4px #ffffff4d; }
}
@keyframes nlBreathAccent {
  0%, to { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 28px rgba(var(--np-rgb), .34); }
  50% { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 40px rgba(var(--np-rgb), .58), 0 0 34px 4px rgba(var(--np-rgb), .32); }
}
.nl-btn-primary { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 30px rgba(var(--np-rgb), .35); }
.nl-btn-white { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 22px #ffffff38; }
.nl-btn-accent { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 22px rgba(var(--np-rgb), .3); }
/* Si restul butoanelor cu glow din tema, la trecerea mouse-ului si pe paginile de produs / cos /
 * configurator - aceleasi umbre, deplasarea 0. Gasite scanand toate foile dupa umbre colorate cu
 * deplasare verticala (28 sept 2026). `!important` doar unde tema il are deja. */
.nl-btn-primary:hover { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 40px rgba(var(--np-rgb), .55); }
.nl-btn-white:hover { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 40px #fff6; }
.nl-btn-accent:hover { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 40px rgba(var(--np-rgb), .5); }
.nl-compare-grip { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 26px rgba(var(--np-rgb), .45); }
.nl-compare-media:hover .nl-compare-grip { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 30px rgba(var(--np-rgb), .6); }
.product-information .add-to-cart-button { box-shadow: 0 0 0 1px #ffffff14 inset, 0 0 30px rgba(var(--np-rgb), .35); }
.product-information .add-to-cart-button:hover { box-shadow: 0 0 40px rgba(var(--np-rgb), .55) !important; }
.product-information .button[type=submit]:hover, .product-information button[name=add]:hover, .product-form__buttons .button:hover { box-shadow: 0 0 30px rgba(var(--np-rgb), .4); }
.cart__checkout-button.button, .cart__ctas .button, .cart__ctas button[name=checkout] { box-shadow: 0 0 30px rgba(var(--np-rgb), .35); }
.cart__checkout-button.button:hover, .cart__ctas .button:hover { box-shadow: 0 0 40px rgba(var(--np-rgb), .55) !important; }
.nl-pdpx-byo:hover { box-shadow: 0 0 36px rgba(var(--np-rgb), .2); }
body #contact_form button[type=submit]:hover { box-shadow: 0 0 28px rgba(255, 54, 176, .5) !important; }

/* ---------------------------------------------------------------- spatiul de sub primul ecran
 * Fara cifre si fara butoane, primul ecran se termina la subtitlu: spatiul pe care il dadeau ele ramane. */
.nl-hero .nl-inner { padding-bottom: 64px; }
@media (max-width: 749px) { .nl-hero .nl-inner { padding-bottom: 36px; } }

/* ---------------------------------------------------------------- portofoliul, pe telefon
 * „Vezi portofoliul complet" sub banda de poze, nu deasupra ei (Marius, 28 sept 2026). In HTML
 * butonul sta in capul sectiunii (`.nl-pfbar-head`), langa titlu - pe ecran lat ramane acolo.
 * Pe telefon capul devine `display: contents`: titlul si butonul ajung copii directi ai
 * sectiunii, iar `order` pune butonul dupa banda. Titlul isi ia inapoi marginile capului. */
@media (max-width: 749px) {
  .nl-pfbar { display: flex; flex-direction: column; }
  .nl-pfbar-head { display: contents; }
  .nl-pfbar-head > div { order: 1; box-sizing: border-box; width: 100%; max-width: var(--nl-maxw); margin: 0 auto 24px; padding: 0 30px; } /* ca `.nl-wrap` */
  .nl-pfbar > :not(.nl-pfbar-head):not(script) { order: 2; }
  .nl-pfbar-cta { order: 3; align-self: center; margin-top: 22px; }
}