/* ==========================================================================
   ZeroError — „Creează-ți setup gaming"
   Se încarcă doar pe pagina asta, după style.css, și scrie peste ea.

   Direcția e alta decât a site-ului: acolo e hârtie caldă și verde-petrol,
   aici e noapte albastră, muchii drepte și un accent electric. Restul
   site-ului rămâne calm; pagina asta n-are voie să fie.

   Culoarea de accent și fundalul vin din panou, ca variabile CSS scrise în
   <head>. Valorile de mai jos sunt doar plasa de siguranță.
   ========================================================================== */

/* Cele trei valori pe care le schimbă panoul stau pe :root, nu pe .cfg-body.
   Panoul le scrie tot pe :root, într-un <style> din <head> — dar dacă
   rezervele ar sta pe clasa .cfg-body, ele ar câștiga oricum: o clasă bate un
   element, iar <body> e strămoșul a tot ce e în pagină. Așa, la specificitate
   egală, câștigă cine e scris ultimul, adică setarea din panou. */
:root{
  --cfg-accent:      #7C5CFF;
  --cfg-accent-rgb:  124,92,255;
  --cfg-voal:        .62;
}

.cfg-body{
  --cfg-bg:      #06070F;
  --cfg-panou:   rgba(15,17,32,.66);
  --cfg-panou-2: rgba(22,25,45,.82);
  --cfg-linie:   rgba(255,255,255,.10);
  --cfg-linie-2: rgba(255,255,255,.055);
  --cfg-text:    #EEF0F8;
  --cfg-text-2:  #AAB0C8;
  --cfg-slab:    #767D99;

  --cfg-verde:  #3DDC97;
  --cfg-galben: #FFC24B;
  --cfg-rosu:   #FF5C7A;

  --cfg-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --cfg-in:   1320px;

  background:var(--cfg-bg);
  color:var(--cfg-text);
  min-height:100dvh;
}

/* Fotografia, voalul care o întunecă și grila fină, toate pe <body>::before,
   ca să stea fixe la derulare fără să prindă un strat de compunere în plus. */
.cfg-body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--cfg-bg);
  background-image:
    linear-gradient(180deg,
      rgba(6,7,15,calc(var(--cfg-voal) * .82)) 0%,
      rgba(6,7,15,var(--cfg-voal)) 45%,
      rgba(6,7,15,calc(var(--cfg-voal) + .18)) 100%),
    var(--cfg-fundal, none);
  background-size:cover, cover;
  background-position:center, center;
}

/* pata de culoare de sus, semnătura paginii */
.cfg-body::after{
  content:''; position:fixed; inset:0 0 auto; height:60vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(var(--cfg-accent-rgb),.20), transparent 70%),
    radial-gradient(50% 45% at 92% 6%, rgba(61,220,151,.10), transparent 72%);
}

.cfg-body > *{ position:relative; z-index:1; }

.cfg-in{
  width:100%; max-width:var(--cfg-in); margin-inline:auto;
  padding-inline:clamp(18px, 4vw, 40px);
}

.cfg-sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.cfg-ic{
  width:18px; height:18px; flex:0 0 auto;
  stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

.cfg-body h1, .cfg-body h2, .cfg-body h3{
  font-family:var(--body);
  letter-spacing:-.02em;
}


/* ==========================================================================
   BARA
   ========================================================================== */
.cfg-bara{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:16px;
  padding:12px clamp(18px, 4vw, 40px);
  background:rgba(6,7,15,.78);
  backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--cfg-linie-2);
  transition:border-color .25s, background .25s;
}
.cfg-bara.is-stuck{ background:rgba(6,7,15,.93); border-bottom-color:var(--cfg-linie); }

.cfg-marca{ display:inline-flex; flex:0 0 auto; }
.cfg-marca img{ height:32px; width:auto; display:block; filter:drop-shadow(0 2px 10px rgba(120,200,255,.28)); }

.cfg-bara-nume{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px 6px 10px;
  border:1px solid rgba(var(--cfg-accent-rgb),.34);
  background:linear-gradient(180deg, rgba(var(--cfg-accent-rgb),.20), rgba(var(--cfg-accent-rgb),.07));
  border-radius:3px;
  font-size:13px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:var(--cfg-text); white-space:nowrap;
}
.cfg-bara-ic{ width:17px; height:17px; stroke:var(--cfg-accent); fill:none; stroke-width:1.8; }

.cfg-bara-dreapta{ display:flex; align-items:center; gap:12px; margin-left:auto; }

.cfg-bara .limbi{ flex:0 0 auto; }

.cfg-inapoi{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:3px;
  border:1px solid var(--cfg-linie);
  background:rgba(255,255,255,.04);
  color:var(--cfg-text-2); text-decoration:none;
  font-size:14px; font-weight:600; white-space:nowrap;
  transition:color .18s, border-color .18s, background .18s;
}
.cfg-inapoi:hover{ color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08); }


/* ==========================================================================
   DESCHIDERE
   ========================================================================== */
.cfg-hero{ padding:clamp(40px, 7vw, 84px) 0 clamp(28px, 4vw, 44px); }

.cfg-eticheta{
  display:inline-block; margin-bottom:16px;
  padding:5px 12px; border-radius:2px;
  border-left:2px solid var(--cfg-accent);
  background:rgba(var(--cfg-accent-rgb),.12);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#CBBEFF;                                        /* dacă color-mix lipsește */
  color:color-mix(in srgb, var(--cfg-accent) 45%, #fff);
}

.cfg-hero h1{
  margin:0 0 16px;
  font-size:clamp(34px, 6.2vw, 68px); line-height:1.03;
  font-weight:700; letter-spacing:-.035em;
  text-wrap:balance;
}
.cfg-lead{
  margin:0; max-width:58ch;
  font-size:clamp(16px, 1.6vw, 18.5px); line-height:1.62; color:var(--cfg-text-2);
}


/* ==========================================================================
   PRESETĂRI
   ========================================================================== */
.cfg-presetari{ margin-top:clamp(28px, 4vw, 44px); }
.cfg-presetari-et{
  margin:0 0 12px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cfg-slab);
}
.cfg-presetari-lista{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
  max-width:840px;
}
.cfg-preset{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:16px 18px; text-align:left; cursor:pointer;
  border:1px solid var(--cfg-linie);
  background:var(--cfg-panou); backdrop-filter:blur(12px);
  border-radius:3px; color:var(--cfg-text);
  font:inherit;
  transition:border-color .2s, background .2s, transform .15s;
}
.cfg-preset::before{
  content:''; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--cfg-accent); opacity:.5; transition:opacity .2s;
}
.cfg-preset:hover{
  border-color:rgba(var(--cfg-accent-rgb),.55);
  background:var(--cfg-panou-2); transform:translateY(-2px);
}
.cfg-preset:hover::before{ opacity:1; }
.cfg-preset-nume{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.cfg-preset-desc{ font-size:13.5px; line-height:1.5; color:var(--cfg-slab); }
.cfg-preset-pret{
  margin-top:4px; font-family:var(--cfg-mono); font-size:13px;
  color:color-mix(in srgb, var(--cfg-accent) 55%, #fff);
}


/* ==========================================================================
   BANCUL DE LUCRU
   ========================================================================== */
.cfg-lucrare{
  display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:28px;
  align-items:start;
  padding-bottom:clamp(48px, 7vw, 90px);
}

.cfg-cap{ margin-bottom:18px; }
.cfg-cap h2{
  margin:0 0 5px;
  font-size:clamp(22px, 2.6vw, 30px); font-weight:700; letter-spacing:-.025em;
}
.cfg-cap p{ margin:0; font-size:14.5px; color:var(--cfg-slab); }

/* --- sloturile --- */
.cfg-sloturi{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }

.cfg-slot{
  position:relative;
  display:grid; align-items:center; gap:16px;
  grid-template-columns:34px 62px minmax(0,1fr) auto auto;
  padding:13px 16px 13px 0;
  border:1px solid var(--cfg-linie-2);
  background:var(--cfg-panou); backdrop-filter:blur(12px);
  border-radius:3px;
  transition:border-color .2s, background .2s;
}
.cfg-slot::before{
  content:''; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--cfg-slab); opacity:.32; transition:background .2s, opacity .2s;
}
.cfg-slot:hover{ border-color:var(--cfg-linie); background:var(--cfg-panou-2); }
.cfg-slot.e-plin::before{ background:var(--cfg-accent); opacity:1; }
.cfg-slot.e-rau{ border-color:rgba(255,92,122,.45); }
.cfg-slot.e-rau::before{ background:var(--cfg-rosu); opacity:1; }

.cfg-slot-nr{
  justify-self:center;
  font-family:var(--cfg-mono); font-size:12px; font-weight:600;
  color:var(--cfg-slab); letter-spacing:.04em;
}

.cfg-slot-poza{
  position:relative; display:grid; place-items:center;
  width:62px; height:52px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--cfg-linie-2); border-radius:2px;
  overflow:hidden;
}
.cfg-slot-ic{
  width:34px; height:34px;
  stroke:var(--cfg-slab); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .2s;
}
.cfg-slot.e-plin .cfg-slot-ic{ stroke:var(--cfg-accent); }
.cfg-slot-poza img{ position:absolute; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:contain; }

.cfg-slot-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cfg-slot-cat{
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cfg-slab);
}
.cfg-slot-nume{
  font-size:15.5px; font-weight:600; color:var(--cfg-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cfg-slot:not(.e-plin) .cfg-slot-nume{ color:var(--cfg-slab); font-weight:500; }
.cfg-slot-motiv{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--cfg-rosu);
}

.cfg-slot-pret{
  font-family:var(--cfg-mono); font-size:13.5px; color:var(--cfg-text-2);
  white-space:nowrap; text-align:right;
}
.cfg-slot-butoane{ display:flex; align-items:center; gap:6px; }


/* ==========================================================================
   BUTOANE
   ========================================================================== */
.cfg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  max-width:100%;
  padding:10px 16px; border-radius:3px; cursor:pointer;
  border:1px solid var(--cfg-linie);
  background:rgba(255,255,255,.05); color:var(--cfg-text);
  font:600 14.5px/1 var(--body); text-decoration:none; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s, transform .12s;
}
.cfg-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); }
.cfg-btn:active{ transform:translateY(1px); }
.cfg-btn-mic{ padding:8px 12px; font-size:13.5px; }

.cfg-btn-primar{
  width:100%;
  border-color:rgba(var(--cfg-accent-rgb),.6);
  background:linear-gradient(180deg,
    rgba(var(--cfg-accent-rgb),.9), rgba(var(--cfg-accent-rgb),.62));
  color:#fff; font-size:15.5px; padding:13px 18px;
  box-shadow:0 8px 26px -12px rgba(var(--cfg-accent-rgb),.9);
}
.cfg-btn-primar:hover{
  background:linear-gradient(180deg, rgb(var(--cfg-accent-rgb)), rgba(var(--cfg-accent-rgb),.75));
  border-color:rgb(var(--cfg-accent-rgb));
}
/* Butonul mare poartă o frază, nu un cuvânt. Pe telefon o frază care nu se
   rupe iese din ecran, lățește pagina, iar stratul de fundal — care e fixat pe
   fereastră — nu mai acoperă banda rămasă: pe margine apărea fotografia
   site-ului. Deci se rupe. */
.cfg-btn-mare{
  padding:14px 24px; font-size:16px;
  white-space:normal; text-align:center; line-height:1.35;
}

.cfg-btn-gol{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid transparent; background:none; cursor:pointer;
  color:var(--cfg-slab); border-radius:3px;
  transition:color .18s, background .18s, border-color .18s;
}
.cfg-btn-gol:hover{ color:var(--cfg-rosu); background:rgba(255,92,122,.1); border-color:rgba(255,92,122,.3); }

.cfg-body :focus-visible{ outline:2.5px solid var(--cfg-accent); outline-offset:2px; }


/* ==========================================================================
   SUMARUL
   ========================================================================== */
.cfg-sumar-lipit{
  position:sticky; top:76px;
  border:1px solid var(--cfg-linie);
  background:var(--cfg-panou-2); backdrop-filter:blur(16px);
  border-radius:3px; padding:20px;
  max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain;
}
.cfg-sumar-titlu{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cfg-text-2);
}
.cfg-sumar-titlu .cfg-ic{ stroke:var(--cfg-accent); }

.cfg-sumar-gol{ margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--cfg-slab); }

.cfg-sumar-lista{ list-style:none; margin:0 0 16px; padding:0; }
.cfg-sumar-lista:empty{ margin:0; }
.cfg-sumar-lista li{
  display:flex; justify-content:space-between; gap:12px;
  min-width:0;
  padding:8px 0; border-bottom:1px solid var(--cfg-linie-2);
  font-size:13.5px;
}
.cfg-sumar-lista li:last-child{ border-bottom:0; }
.cfg-sumar-lista .sl-nume{
  min-width:0; color:var(--cfg-text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cfg-sumar-lista .sl-pret{ font-family:var(--cfg-mono); color:var(--cfg-slab); white-space:nowrap; }
.cfg-sumar-lista li.e-rau .sl-nume{ color:var(--cfg-rosu); }

/* --- conflicte --- */
.cfg-conflicte{
  display:flex; align-items:flex-start; gap:9px; margin-bottom:16px;
  padding:11px 13px; border-radius:3px;
  border:1px solid rgba(255,92,122,.35); background:rgba(255,92,122,.11);
  font-size:13.5px; line-height:1.5; color:#FFC2CE;
}
.cfg-conflicte .cfg-ic{ stroke:var(--cfg-rosu); margin-top:1px; }

/* --- consumul --- */
.cfg-consum{ margin-bottom:18px; }
.cfg-consum-cap{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
.cfg-consum-cap > span{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cfg-slab);
}
.cfg-consum-cap .cfg-ic{ width:15px; height:15px; stroke:var(--cfg-galben); }
.cfg-consum-cap strong{ font-family:var(--cfg-mono); font-size:13.5px; color:var(--cfg-text); }

.cfg-bara-consum{
  height:6px; border-radius:100px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.cfg-bara-consum span{
  display:block; height:100%; width:0; border-radius:100px;
  background:var(--cfg-verde);
  transition:width .3s ease, background .3s;
}
.cfg-bara-consum span.e-strans{ background:var(--cfg-galben); }
.cfg-bara-consum span.e-rau{ background:var(--cfg-rosu); }
.cfg-consum-nota{ margin:7px 0 0; font-size:12.5px; line-height:1.5; color:var(--cfg-slab); }

/* --- totalul --- */
.cfg-total{
  padding:16px 0; margin-bottom:16px;
  border-top:1px solid var(--cfg-linie); border-bottom:1px solid var(--cfg-linie);
}
.cfg-total-et{
  display:block; margin-bottom:5px;
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cfg-slab);
}
.cfg-total-cifre{
  display:block; font-family:var(--cfg-mono);
  font-size:clamp(19px, 2.2vw, 24px); font-weight:600; letter-spacing:-.02em;
  color:#fff;
}
.cfg-total-nota{ margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--cfg-slab); }

.cfg-actiuni{ display:flex; flex-direction:column; gap:9px; }
.cfg-actiuni-mici{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.cfg-actiuni-mici .cfg-btn{ padding:8px 6px; font-size:12.5px; gap:6px; }
.cfg-actiuni-mici .cfg-ic{ width:15px; height:15px; }
.cfg-salvat-nota{ margin:4px 0 0; font-size:12px; line-height:1.5; color:var(--cfg-slab); }


/* ==========================================================================
   FEREASTRA DE ALEGERE
   ========================================================================== */
.cfg-dialog{
  width:min(940px, calc(100vw - 32px));
  max-height:calc(100dvh - 48px);
  margin:auto; padding:0;
  display:flex; flex-direction:column;
  border:1px solid var(--cfg-linie);
  background:#0C0E1B; color:var(--cfg-text);
  border-radius:4px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.cfg-dialog:not([open]){ display:none; }
.cfg-dialog::backdrop{ background:rgba(3,4,10,.78); backdrop-filter:blur(6px); }

.cfg-dialog-cap{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-bottom:1px solid var(--cfg-linie-2);
}
.cfg-dialog-cap h2{
  margin:0; flex:1 1 auto;
  font-size:18px; font-weight:700; letter-spacing:-.015em;
}
.cfg-dialog-x{
  display:grid; place-items:center; width:36px; height:36px; flex:0 0 auto;
  border:1px solid var(--cfg-linie); background:rgba(255,255,255,.04);
  border-radius:3px; color:var(--cfg-text-2); cursor:pointer;
  transition:color .18s, background .18s;
}
.cfg-dialog-x:hover{ color:#fff; background:rgba(255,255,255,.1); }
.cfg-dialog-x .cfg-ic{ width:19px; height:19px; }

.cfg-dialog-unelte{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 20px; border-bottom:1px solid var(--cfg-linie-2);
  background:rgba(255,255,255,.02);
}
.cfg-cauta{ flex:1 1 220px; }
.cfg-cauta input{
  width:100%; padding:9px 13px;
  border:1px solid var(--cfg-linie); border-radius:3px;
  background:rgba(255,255,255,.05); color:var(--cfg-text);
  font:400 14.5px/1.3 var(--body);
}
.cfg-cauta input::placeholder{ color:var(--cfg-slab); }
.cfg-doar{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13.5px; color:var(--cfg-text-2); white-space:nowrap;
}
.cfg-doar input{ width:16px; height:16px; accent-color:var(--cfg-accent); cursor:pointer; }

.cfg-dialog-corp{
  padding:14px 20px 20px; overflow-y:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:10px;
  align-content:start;
}

.cfg-op{
  position:relative; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:13px;
  padding:13px; border-radius:3px;
  border:1px solid var(--cfg-linie-2); background:rgba(255,255,255,.03);
  color:var(--cfg-text); font:inherit;
  transition:border-color .18s, background .18s, transform .12s;
}
.cfg-op:hover{ border-color:rgba(var(--cfg-accent-rgb),.5); background:rgba(var(--cfg-accent-rgb),.08); }
.cfg-op:active{ transform:translateY(1px); }
.cfg-op.e-ales{ border-color:var(--cfg-accent); background:rgba(var(--cfg-accent-rgb),.13); }

.cfg-op-poza{
  display:grid; place-items:center; width:64px; height:64px;
  background:rgba(255,255,255,.04); border:1px solid var(--cfg-linie-2);
  border-radius:2px; overflow:hidden; position:relative;
}
.cfg-op-poza svg{ width:36px; height:36px; stroke:var(--cfg-slab); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cfg-op-poza img{ position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); object-fit:contain; }

.cfg-op-corp{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cfg-op-brand{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cfg-slab); }
.cfg-op-nume{ font-size:14.5px; font-weight:600; line-height:1.35; }
.cfg-op-specs{ font-size:12.5px; line-height:1.5; color:var(--cfg-slab); }
.cfg-op-pret{ margin-top:2px; font-family:var(--cfg-mono); font-size:13px; color:color-mix(in srgb, var(--cfg-accent) 50%, #fff); }

.cfg-op-rau{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  padding:3px 8px; border-radius:2px;
  background:rgba(255,92,122,.14); border:1px solid rgba(255,92,122,.3);
  font-size:11.5px; font-weight:600; color:#FFB3C1;
}
.cfg-op.e-incompatibil{ opacity:.44; }
.cfg-op.e-incompatibil:hover{ opacity:.72; border-color:rgba(255,92,122,.4); background:rgba(255,92,122,.06); }

.cfg-nimic{
  grid-column:1 / -1; padding:36px 10px; text-align:center;
  font-size:14.5px; color:var(--cfg-slab);
}


/* ==========================================================================
   CUM MERGE — trei rânduri scurte la final
   ========================================================================== */
.cfg-cum{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
  padding-bottom:clamp(48px, 7vw, 88px);
}
.cfg-cum-card{
  padding:20px; border-radius:3px;
  border:1px solid var(--cfg-linie-2); background:var(--cfg-panou);
  backdrop-filter:blur(10px);
}
.cfg-cum-card h3{ margin:0 0 7px; font-size:16px; font-weight:700; }
.cfg-cum-card p{ margin:0; font-size:14px; line-height:1.62; color:var(--cfg-slab); }


/* ==========================================================================
   ÎN LUCRU — cât timp catalogul nu e complet
   ========================================================================== */
.cfg-lucru{ padding-bottom:clamp(56px, 8vw, 100px); }
.cfg-lucru-cutie{
  max-width:680px; padding:clamp(26px, 4vw, 40px);
  border:1px solid var(--cfg-linie); background:var(--cfg-panou-2);
  backdrop-filter:blur(14px); border-radius:3px;
  border-left:2px solid var(--cfg-galben);
}
.cfg-lucru-et{
  display:inline-block; margin-bottom:12px; padding:4px 10px; border-radius:2px;
  background:rgba(255,194,75,.14); border:1px solid rgba(255,194,75,.3);
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cfg-galben);
}
.cfg-lucru-cutie h2{ margin:0 0 10px; font-size:clamp(20px, 2.6vw, 27px); font-weight:700; }
.cfg-lucru-cutie p{ margin:0 0 20px; font-size:15.5px; line-height:1.65; color:var(--cfg-text-2); }
.cfg-lucru-cutie .cfg-btn{ width:100%; }
@media (min-width:721px){
  .cfg-lucru-cutie .cfg-btn{ width:auto; }
}
.cfg-nojs{ color:var(--cfg-rosu) !important; margin-top:14px !important; }


/* ==========================================================================
   SUBSOLUL SCURT
   ========================================================================== */
.cfg-subsol{
  border-top:1px solid var(--cfg-linie-2);
  background:rgba(4,5,12,.6); backdrop-filter:blur(10px);
}
.cfg-subsol-in{
  width:100%; max-width:var(--cfg-in); margin-inline:auto;
  padding:20px clamp(18px, 4vw, 40px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.cfg-subsol p{ margin:0; font-size:13px; color:var(--cfg-slab); }
.cfg-subsol nav{ display:flex; gap:16px; flex-wrap:wrap; }
.cfg-subsol a{ font-size:13px; color:var(--cfg-text-2); text-decoration:none; }
.cfg-subsol a:hover{ color:#fff; text-decoration:underline; }


/* ==========================================================================
   LĂȚIMI MICI
   ========================================================================== */
@media (max-width:1080px){
  /* minmax(0,1fr), nu 1fr: un `1fr` simplu are minimul egal cu conținutul, iar
     sumarul (nume de piese care nu se rup) împingea coloana la 429 px într-un
     ecran de 390. Pagina nu derula lateral doar pentru că `overflow-x:clip`
     de pe <html> tăia surplusul — adică bucata tăiată chiar lipsea. */
  .cfg-lucrare{ grid-template-columns:minmax(0,1fr); }
  .cfg-lucrare > *{ min-width:0; }
  .cfg-sumar-lipit{ position:static; max-height:none; }
  .cfg-cum{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .cfg-bara{ gap:10px; padding-block:10px; }
  .cfg-bara-nume{ padding:6px 10px; font-size:12px; }
  .cfg-inapoi span{ display:none; }
  .cfg-inapoi{ padding:8px 10px; }
}

/* Sub 620 px, din bară rămân marca, limba și drumul înapoi. Numele paginii
   iese de tot: redus la pictogramă arăta ca un pătrat rătăcit, iar titlul
   mare îl scrie oricum, la două degete mai jos. */
@media (max-width:620px){
  .cfg-bara-nume{ display:none; }
}

/* Pe ecranele foarte înguste, „Tipărește" nu mai încape în butonul lui alături
   de pictogramă și se taie. Cuvântul e mai util decât desenul, deci pică
   desenul. */
@media (max-width:400px){
  .cfg-actiuni-mici .cfg-ic{ display:none; }
  .cfg-actiuni-mici .cfg-btn{ padding:9px 4px; }
}

@media (max-width:720px){
  .cfg-presetari-lista{ grid-template-columns:1fr; }

  /* Slotul se rearanjează pe trei rânduri: identitatea, prețul, butoanele.
     Prețul nu are voie să rămână într-o coloană de 54 px — nu se rupe în
     două și împinge toată pagina în lateral. */
  .cfg-slot{
    grid-template-columns:26px 54px minmax(0,1fr);
    grid-template-areas:
      'nr poza text'
      'nr poza pret'
      'nr butoane butoane';
    gap:8px 12px; padding:12px 13px 12px 0;
  }
  .cfg-slot-nr{ grid-area:nr; align-self:start; padding-top:4px; }
  .cfg-slot-poza{ grid-area:poza; width:54px; height:46px; align-self:start; }
  .cfg-slot-text{ grid-area:text; }
  .cfg-slot-pret{ grid-area:pret; text-align:left; font-size:12.5px; min-width:0; }
  .cfg-slot-butoane{ grid-area:butoane; justify-content:flex-end; min-width:0; }
  .cfg-slot-nume{ white-space:normal; overflow-wrap:anywhere; }

  .cfg-dialog{ width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; border-radius:0; border:0; }
  .cfg-dialog-corp{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .cfg-body *,
  .cfg-body *::before,
  .cfg-body *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* ==========================================================================
   FOAIA DE TIPĂRIT
   Aceeași cale ca la facturi: nu generăm PDF pe server, lăsăm browserul.
   Culorile sunt scrise explicit, ca foaia să iasă albă chiar dacă pagina
   e pornită pe schema întunecată.
   ========================================================================== */
.cfg-foaie{ display:none; }

@media print{
  html, body{
    background:#fff !important;
    color:#111 !important;
    color-scheme:light only !important;
  }
  .cfg-body::before, .cfg-body::after{ display:none !important; }
  .cfg-bara, .cfg-hero, .cfg-lucrare, .cfg-cum, .cfg-subsol,
  .cfg-dialog, .skip, .zm-dialog, dialog{ display:none !important; }

  .cfg-foaie{
    display:block !important;
    padding:0; margin:0;
    font-family:var(--body);
    color:#111 !important;
  }
  .cfg-foaie *{ color:#111 !important; background:transparent !important; }

  .cf-cap{ display:flex; align-items:flex-start; justify-content:space-between;
           gap:24px; padding-bottom:14px; border-bottom:2px solid #111; }
  .cf-cap img{ height:34px; width:auto; }
  .cf-cap h1{ margin:0 0 4px; font-size:20px; font-weight:700; }
  .cf-cap p{ margin:0; font-size:12px; color:#555 !important; }

  .cf-tabel{ width:100%; border-collapse:collapse; margin-top:18px; }
  .cf-tabel th{ text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
                padding:0 8px 7px 0; border-bottom:1px solid #999; color:#555 !important; }
  .cf-tabel td{ padding:9px 8px 9px 0; border-bottom:1px solid #DDD; font-size:12.5px; vertical-align:top; }
  .cf-tabel .cf-cat{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#666 !important; }
  .cf-tabel .cf-nr{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .cf-tabel tfoot td{ border-bottom:0; border-top:2px solid #111; font-weight:700; font-size:14px; padding-top:11px; }

  .cf-note{ margin-top:18px; font-size:11px; line-height:1.6; color:#555 !important; }
  .cf-note p{ margin:0 0 5px; }

  @page{ margin:16mm; }
}

/* Mesajul care apare doar fără JavaScript. Sloturile rămân în pagină ca
   ilustrație, dar butoanele lor nu fac nimic — omul trebuie să știe de ce. */
.cfg-fara-js{
  margin:0 0 14px !important; padding:13px 16px;
  border:1px solid rgba(255,194,75,.32); border-radius:3px;
  background:rgba(255,194,75,.1);
  color:var(--cfg-galben) !important;
  font-size:14.5px; line-height:1.6;
}

/* ═══════════ avans la comandă ═══════════ */
.cfg-total-avans{
  display:flex; gap:8px; align-items:flex-start;
  margin:12px 0 0; padding:10px 12px;
  background:rgba(var(--cfg-accent-rgb), .10);
  border:1px solid rgba(var(--cfg-accent-rgb), .30);
  border-radius:10px;
  font-size:13px; line-height:1.45; color:var(--cfg-accent);
}
.cfg-total-avans .cfg-ic{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; }
.cfg-presetari-avans{
  margin:12px 2px 0; font-size:12.5px; color:rgba(255,255,255,.72);
}

/* ═══════════ vizual „de show" din antet ═══════════ */
.cfg-hero{ position:relative; overflow:hidden; }
.cfg-hero .cfg-in{ position:relative; z-index:1; }
.cfg-hero-art{
  position:absolute; top:50%; right:3%; transform:translateY(-50%);
  width:440px; max-width:40vw; z-index:0; pointer-events:none;
}
.cfg-hero-art picture, .cfg-hero-art img, .cfg-hero-art svg{ display:block; width:100%; height:auto; }
.cfg-hero-art img{
  border-radius:16px;
  border:1px solid rgba(var(--cfg-accent-rgb), .25);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 60px rgba(var(--cfg-accent-rgb), .18);
}
@media (max-width:1080px){ .cfg-hero-art{ display:none; } }

/* ═══════════ fallback grafic pe categorie (când piesa n-are poză) ═══════════ */
.cfg-slot-poza{
  background:rgba(var(--cfg-accent-rgb), .08);
  border:1px solid rgba(var(--cfg-accent-rgb), .18);
  border-radius:10px;
}
.cfg-slot-ic{ color:var(--cfg-accent); opacity:.85; }

/* ═══════════ comutator monedă € ⇄ RON ═══════════ */
.cfg-valuta{
  display:inline-flex; gap:2px; margin:0 0 12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:3px;
}
.cfg-valuta-btn{
  border:0; background:transparent; cursor:pointer;
  min-width:44px; padding:5px 14px; border-radius:999px;
  font:600 13px/1 inherit; color:rgba(255,255,255,.75);
  transition:background .15s, color .15s;
}
.cfg-valuta-btn:hover{ color:#fff; }
.cfg-valuta-btn.on{ background:var(--cfg-accent); color:#fff; }
.cfg-curs-nota{
  margin:10px 0 0; font-size:12px; line-height:1.45; color:rgba(255,255,255,.6);
}
