/* plata.v1.css: pagina de plata a produsului platit (acces.i-vory.studio/plata/), peste acces.v1.css si carcasa casei.
   Nascuta 21 septembrie 2026, CONTRACT-CHECKOUT.md din acelasi folder. Se incarca imediat DUPA /assets/acces.v1.css, in
   aceeasi lista de foi ca pagina de vanzare: fonts.css, motor.v1.css, carcasa-plus.v1.css, tabel.v2.css, nivel3.v1.css,
   acces.v1.css, plata.v1.css, telefon.v1.css, subsol.v1.css. Tokenii, .pagina, .sus, .eticheta, .buton, .firimituri sunt
   ai carcasei si nu se redeclara. Aici stau doar piesele paginii de plata: comutatorul de plan (obiectul paginii), sumarul
   comenzii cu aritmetica la vedere, butonul plin (singurul lucru saturat de pe pagina), locul formularului Stripe (faza 2).
   Nicio cifra de pret nu sta in CSS. Versiunea sta in nume: /assets/* pe audit-tiktok se serveste imutabil un an. */

/* ---------- scheletul: decizia in stanga, sumarul lipit in dreapta ---------- */
.plata{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px 5vw;align-items:start;padding:30px 0 64px;
  grid-template-areas:"cap sumar" "sub sumar" "planuri sumar" "form sumar" "primesti sumar"}
.plata__cap{grid-area:cap;min-width:0}
.plata__cap h1{font-size:clamp(2rem,3.6vw,3rem);max-width:16ch}
.plata > p.sub{grid-area:sub;margin:0;max-width:46ch;font-size:clamp(1rem,1.25vw,1.12rem);color:var(--lumina-2)}
.sumar{grid-area:sumar;position:sticky;top:96px;min-width:0}

/* ---------- comutatorul de plan: doua celule, una aleasa; culoarea dubleaza textul ALES si chenarul ---------- */
.planuri{grid-area:planuri;margin:0;padding:0;border:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.planuri__cap{grid-column:1 / -1;padding:0;margin-bottom:2px;font-family:'Geist Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lumina-3);display:flex;align-items:center;gap:10px}
.planuri__cap s{width:6px;height:6px;border-radius:50%;background:var(--arde);text-decoration:none;
  box-shadow:0 0 10px 2px rgba(255,207,110,.7)}
.plan{position:relative;display:grid;gap:6px;min-height:44px;padding:18px 20px 18px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(238,242,248,.12);background:linear-gradient(165deg,rgba(238,242,248,.045),rgba(238,242,248,.012));
  transition:border-color .25s,background .25s,transform .25s}
.plan:hover{border-color:rgba(238,242,248,.28);transform:translateY(-1px)}
.plan input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.plan__nume{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15.5px;color:var(--lumina)}
.plan__pret{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.plan__pret b{font-family:'Geist Mono',monospace;font-size:2rem;font-weight:500;letter-spacing:-.03em;line-height:1;
  color:var(--lumina);font-variant-numeric:tabular-nums}
.plan__pret small{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lumina-2)}
.plan__nota{font-size:13.5px;color:var(--lumina-2);line-height:1.45}
.plan__ales{position:absolute;right:14px;top:14px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--arde);opacity:0;transition:opacity .25s}
.plan:has(input:checked),.plan.plan--ales{border-color:rgba(255,207,110,.7);
  background:linear-gradient(165deg,rgba(255,207,110,.1),rgba(238,242,248,.015))}
.plan:has(input:checked) .plan__ales,.plan.plan--ales .plan__ales{opacity:1}
.plan:has(input:focus-visible),.plan.plan--focus{outline:2px solid var(--sistem);outline-offset:3px}

/* .pastila (cifra reducerii) traieste in acces.v1.css, fiindca o poarta si pagina de vanzare: o singura definitie (21 sep 2026) */

/* ---------- sumarul comenzii: aritmetica pe randuri, un singur rand ingrosat ----------
   Un singur card vizibil: cel al planului ales. Fara script, :has() pe butonul radio; cu script, data-plan al sectiunii
   (tinut in pas de plata.v1.js) e rezerva pentru browserele fara :has(). Cele doua nu se contrazic: cu script, atributul
   si radio-ul spun mereu acelasi plan. Chitanta: prima proba din 21 sep 2026, arata 99 lei pe planul anual, fiindca regula
   asta lipsea si primul card din DOM (lunar) ramanea vizibil peste cel anual. */
.plata:has(#plan-lunar:checked) .sumar__card[data-plan="anual"],
.plata:has(#plan-anual:checked) .sumar__card[data-plan="lunar"],
html.js .plata[data-plan="lunar"] .sumar__card[data-plan="anual"],
html.js .plata[data-plan="anual"] .sumar__card[data-plan="lunar"]{display:none}
.sumar__card{padding:24px 26px 26px;border-radius:18px;border:1px solid rgba(255,207,110,.44);
  background:linear-gradient(165deg,rgba(255,207,110,.1),rgba(238,242,248,.02));animation:apare .28s ease-out}
/* doar opacitate: un transform aici ar face din card blocul de referinta al barei fixe de pe telefon (a doua rulare a portii, 21 sep 2026) */
@keyframes apare{from{opacity:0}to{opacity:1}}
.sumar__cap{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lumina-2)}
.sumar__desc{margin-top:10px;font-size:13.5px;color:var(--lumina-2);line-height:1.5}
.sumar__randuri{margin:18px 0 0;display:grid;gap:0}
.sumar__randuri > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;
  border-top:1px solid rgba(238,242,248,.08)}
.sumar__randuri dt{font-size:14.5px;color:var(--lumina-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sumar__randuri dt small{display:block;width:100%;font-size:12px;color:var(--lumina-3)}
.sumar__randuri dd{margin:0;font-family:'Geist Mono',monospace;font-size:15px;color:var(--lumina);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right}
.sumar__reducere dd{color:var(--arde)}
.sumar__total{padding:14px 0 6px!important;border-top:1px solid rgba(255,207,110,.35)!important}
.sumar__total dt{font-size:15.5px;font-weight:500;color:var(--lumina)}
.sumar__total dd b{display:block;font-size:1.9rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.sumar__total dd small{display:block;margin-top:6px;font-family:'Geist',sans-serif;font-size:12.5px;color:var(--lumina-2);
  white-space:normal}
.sumar__tva{padding:2px 0 10px!important;border-top:0!important}
.sumar__tva dt,.sumar__tva dd{font-size:12.5px;color:var(--lumina-3)}
.sumar__banda{margin-top:14px;padding:11px 14px;border-radius:12px;border:1px solid rgba(111,240,200,.25);
  background:rgba(111,240,200,.08);font-size:13.5px;color:var(--lumina);line-height:1.45}
.sumar__banda b{font-family:'Geist Mono',monospace;font-weight:500;color:var(--sistem)}
.sumar__forma{margin:0}
.sumar .buton{margin-top:18px;width:100%;justify-content:center;font:inherit;font-size:15.5px;cursor:pointer}
.sumar__legal{margin-top:14px;font-size:12.5px;color:var(--lumina-3);line-height:1.5}
.sumar__sigur{margin-top:14px;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lumina-3)}

/* butonul plin: singurul lucru saturat de pe pagina; textul e negrul golului pe auriul casei (13:1) */
.buton--plin{background:var(--arde);border-color:var(--arde);color:var(--gol);font-weight:600;
  box-shadow:0 12px 34px rgba(255,207,110,.16)}
.buton--plin:hover{background:var(--arde-tare);border-color:var(--arde-tare);color:var(--gol);transform:translateY(-2px)}
.buton--plin span{color:var(--gol)}

/* ---------- ce primesti: lista scurta, din proprietari ---------- */
.primesti{grid-area:primesti;min-width:0}
.primesti__cap{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lumina-3);display:flex;
  align-items:center;gap:10px}
.primesti__cap s{width:6px;height:6px;border-radius:50%;background:var(--arde);text-decoration:none;
  box-shadow:0 0 10px 2px rgba(255,207,110,.7)}
.primesti ul{margin:12px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--lumina-2)}
.primesti li{padding:7px 0 7px 18px;position:relative}
.primesti li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:1px;background:var(--arde)}
.primesti b{color:var(--lumina);font-weight:500}
.primesti__promisiune{margin-top:16px;padding:12px 14px;border-radius:12px;border:1px solid rgba(238,242,248,.09);
  font-size:13.5px;color:var(--lumina-2);line-height:1.5}
.primesti__promisiune b{color:var(--lumina);font-weight:500}

/* ---------- faza 2: formularul Stripe (ui_mode: form) montat in coloana stanga; butonul de plata e al lui ----------
   Regulile stau sub `html.js`: fara script nu are cine sa monteze formularul, deci butonul clasic (POST, 303) ramane
   drumul; cu script, plata.v1.js scoate data-mod="form" daca Stripe.js nu raspunde, si butonul revine. */
.plata__form{grid-area:form;min-width:0;display:none}
html.js .plata[data-mod="form"] .plata__form{display:block;min-height:420px;padding:8px;border-radius:16px;
  border:1px solid rgba(238,242,248,.1);background:rgba(11,16,24,.6)}
html.js .plata[data-mod="form"] .plata__form[aria-busy="true"]{background:linear-gradient(90deg,rgba(11,16,24,.6),rgba(20,27,38,.6),rgba(11,16,24,.6))}
html.js .plata[data-mod="form"] .sumar__forma{display:none}
.plata__form--proba{display:flex;align-items:center;justify-content:center;text-align:center;min-height:404px;
  border:1px dashed rgba(238,242,248,.22);border-radius:12px;padding:20px;font-family:'Geist Mono',monospace;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lumina-3);line-height:1.8}

/* ---------- telefon si tableta ---------- */
@media(max-width:1000px){
  .plata{grid-template-columns:minmax(0,1fr);gap:16px;padding:10px 0 46px;
    grid-template-areas:"cap" "planuri" "sumar" "sub" "form" "primesti"}
  .plata__cap h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  .plata > p.sub{font-size:15px}
  .sumar{position:static}
  .planuri{gap:8px}
  .plan{padding:12px 12px 12px;gap:3px;border-radius:14px}
  .plan__nume{font-size:14px}
  .plan__pret b{font-size:1.55rem}
  .plan__pret small{font-size:10px;letter-spacing:.1em}
  .plan__nota{font-size:12px;line-height:1.35}
  .plan__ales{right:10px;top:10px;font-size:10px}
  .pastila{min-height:20px;padding:1px 7px;font-size:10px}
  .sumar__card{padding:16px 16px 18px;border-radius:16px}
  .sumar__desc{margin-top:8px;font-size:13px}
  .sumar__randuri{margin-top:12px}
  .sumar__randuri > div{padding:8px 0}
  .sumar__randuri dt{font-size:14px}
  .sumar__randuri dd{font-size:14.5px}
  .sumar__total{padding:12px 0 4px!important}
  .sumar__total dd b{font-size:1.7rem}
  .sumar__tva{padding:0 0 8px!important}
  .sumar__banda{margin-top:10px;padding:9px 12px;font-size:13px}
  /* butonul de plata sta intr-o bara fixa jos, mereu pe ecran: la 375x667 cardul anual il impingea la 720-776 px, sub
     ecran cu ~110 px (masurat pe prima proba, 21 sep 2026); comutatorul si randul „De plata azi” raman in primul ecran, butonul e mereu
     la deget. Pagina primeste loc jos, ca subsolul si textul legal sa nu ramana sub bara. */
  .sumar__forma{position:fixed;left:0;right:0;bottom:0;z-index:7;margin:0;
    padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:rgba(4,6,12,.92);
    border-top:1px solid rgba(255,207,110,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .sumar .buton{margin-top:0;padding:15px 22px}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* in modul form bara fixa lipseste (butonul e al formularului Stripe), deci pagina nu mai are nevoie de locul de jos, iar
     formularul urca imediat sub sumar, ca omul sa vada intai cat plateste si apoi unde da cardul */
  html.js body:has(.plata[data-mod="form"]){padding-bottom:0}
  html.js .plata[data-mod="form"]{grid-template-areas:"cap" "planuri" "sumar" "form" "sub" "primesti"}
  .sumar__legal{margin-top:12px}
  .sumar__legal{margin-top:12px;font-size:12px}
  .primesti li{padding:6px 0 6px 18px}
}
@media(max-width:480px){
  /* descrierea cardului repeta „Ce primesti” de mai jos; pe telefon lasa loc randului „De plata azi” deasupra barei fixe
     (a treia rulare a portii, 21 sep 2026: la 375x667 randul se termina la ~660 px, sub bara care incepe la 583) */
  .sumar__desc{display:none}
  /* „ALES” iese din coltul celulei si primeste randul lui, deasupra numelui: la 360 px celula anuala are ~140 px, iar
     „Anual −50%” intra sub „ALES” (vazut in captura de executie, 21 sep 2026). Randul exista pe amandoua celulele (pe cea
     nealeasa e invizibil), deci cele doua raman la aceeasi inaltime. */
  .plan__ales{position:static;order:-1;justify-self:end;margin:-2px 0 -6px}
}
@media(max-width:400px){
  .plan__pret b{font-size:1.4rem}
  .plan__nota{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .sumar__card{animation:none}
  .plan,.plan__ales,.buton--plin{transition:none}
}