/* [cc 17.10] cont-v2/sticla.css — stratul de sticlă (glassmorphism, ca pe iPhone) peste cont.css. David 17.10: „go with 1, but can we use glassomorphism for it, proper iphone things”.
   Se încarcă DUPĂ cont.css. Nu atinge antetul sau subsolul (doar clase ca-).
   Ce face: un fond cu lumini colorate, fix, în spatele paginii (sticla are nevoie de ceva în spate); suprafețele = sticlă (blur + saturație, margine de 0.5 px, lumină sus);
   butoane capsulă cu apăsare elastică; câmpuri umplute ca în iOS; comutator segmentat cu „degetul” alb; numărător capsulă; pe telefon secțiunile = bară de file plutitoare jos (ca iOS 26).
   Fără sticlă (prefers-reduced-transparency sau browser fără backdrop-filter) = aceleași suprafețe, pline. */

:root{
  --gl-bg:rgba(24,26,32,.52); --gl-bg-hi:rgba(34,37,44,.66);
  --gl-bd:rgba(255,255,255,.12); --gl-hi:inset 0 1px 0 rgba(255,255,255,.10);
  --gl-sep:rgba(255,255,255,.10);
  --gl-fill:rgba(118,118,128,.24); --gl-fill2:rgba(255,255,255,.05);
  --gl-in-bd:rgba(255,255,255,.22);
  --gl-sh:0 1px 1px rgba(0,0,0,.25),0 24px 60px -24px rgba(0,0,0,.7);
  --gl-thumb:rgba(255,255,255,.22); --gl-thumb-ink:#fff;
  --gl-solid:#15171c;
  --gl-blur:blur(28px) saturate(180%);
  --gl-a1:rgba(56,102,214,.46); --gl-a2:rgba(20,150,140,.30); --gl-a3:rgba(160,80,200,.28); --gl-base:#05070b;
  --gl-spring:cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme=light]{
  --gl-bg:rgba(255,255,255,.56); --gl-bg-hi:rgba(255,255,255,.74);
  --gl-bd:rgba(255,255,255,.75); --gl-hi:inset 0 1px 0 rgba(255,255,255,.95);
  --gl-sep:rgba(20,42,62,.11);
  --gl-fill:rgba(118,118,128,.12); --gl-fill2:rgba(20,42,62,.035);
  --gl-in-bd:rgba(20,42,62,.26);
  --gl-sh:0 1px 1px rgba(20,42,62,.04),0 18px 44px -20px rgba(20,42,62,.24);
  --gl-thumb:#fff; --gl-thumb-ink:var(--ink);
  --gl-solid:#fbfaf8;
  --gl-a1:rgba(120,165,255,.55); --gl-a2:rgba(255,185,140,.50); --gl-a3:rgba(140,220,195,.45); --gl-base:#eceef2;
}

/* ---------- fondul: lumini moi, fixe (nu se mișcă la derulare) ---------- */
html:has(body.ca){background:var(--gl-base)}
body.ca{background:transparent;-webkit-tap-highlight-color:transparent}
body.ca::before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vmax 34vmax at 12% 18%,var(--gl-a1),transparent 70%),
    radial-gradient(38vmax 32vmax at 92% 30%,var(--gl-a2),transparent 70%),
    radial-gradient(46vmax 36vmax at 50% 105%,var(--gl-a3),transparent 70%)}
body.ca .ft{background:transparent}

/* ---------- materialul ---------- */
.ca-st,.ca-sec,.ca-rail,.ca-li,.ca-tc,.ca-acct-m,.ca-pv-b,.ca-pv-l,.ca-row{
  background:var(--gl-bg);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:.5px solid var(--gl-bd);box-shadow:var(--gl-hi),var(--gl-sh)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ca-st,.ca-sec,.ca-rail,.ca-li,.ca-tc,.ca-acct-m,.ca-pv-b,.ca-pv-l,.ca-row{background:var(--gl-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .ca-st,.ca-sec,.ca-rail,.ca-li,.ca-tc,.ca-acct-m,.ca-pv-b,.ca-pv-l,.ca-row{background:var(--gl-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- Contul meu: carduri de sticlă grupate (ca Setările de pe iPhone) ---------- */
.ca-acc{row-gap:0}
.ca-st{padding:34px 34px 34px;border-radius:28px}
.ca-st .ca-st-tag{margin-top:13px}
.ca-sec{margin-top:21px;padding:34px;border-radius:28px;border-top:.5px solid var(--gl-bd)}
@media (max-width:1023px){.ca-row+.ca-sec{border-top:.5px solid var(--gl-bd)}}
.ca-r,.ca-inv li,.ca-opt,.ca-qty,.ca-step{border-top-color:var(--gl-sep)}
.ca-opts,.ca-qty:last-child{border-bottom-color:var(--gl-sep)}
.ca-sub-h{border-bottom-color:var(--gl-sep)}
.ca-lines .ca-sum{border-top-color:var(--gl-sep)}

/* șina din stânga = card de sticlă lipit */
.ca-rail{top:21px;padding:21px 13px 13px;border-radius:24px}
.ca-rail-l{border-left:0;margin-top:8px}
.ca-rail-a{padding:8px 12px;border-radius:14px}
.ca-rail-a::before{display:none}
.ca-rail-a:hover{background:var(--gl-fill2)}
.ca-rail-a[aria-current=true]{background:var(--gl-fill)}
.ca-rail-out{margin-left:12px;margin-top:13px}
.ca-rail>.ca-eb{padding-left:12px}

/* ce se deschide pe loc: un panou adâncit în card, nu o linie */
.ca-open{padding:21px;border-left:0;border-radius:20px;background:var(--gl-fill2);box-shadow:inset 0 0 0 .5px var(--gl-sep)}

/* ---------- butoane: capsule, apăsare elastică ---------- */
.ca-btn,.ca-g{border-radius:999px;min-height:50px;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .35s var(--gl-spring)}
.ca-btn--p{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -6px rgba(0,0,0,.35)}
.ca-btn--s,.ca-g{border-color:transparent;background:var(--gl-fill)}
.ca-btn--s:hover,.ca-g:hover{border-color:transparent;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.ca-btn:active,.ca-g:active,.ca-row a:active,.ca-stp button:active,.ca-acct-b:active,.ca-pv-b:active{transform:scale(.96);transition-duration:.08s}

/* ---------- câmpuri umplute ---------- */
.ca-in{border-radius:12px;background:var(--gl-fill);border-color:var(--gl-in-bd)}
.ca-in:focus-visible{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 18%,transparent)}
.ca-f.is-bad .ca-in{box-shadow:0 0 0 3px color-mix(in srgb,var(--ca-bad) 22%,transparent)}
.ca-in[readonly]{background:transparent}
.ca-cardf{border-radius:12px;background:var(--gl-fill);border-color:var(--gl-in-bd);overflow:hidden}
.ca-cardf input+input{border-left-color:var(--gl-sep)}
.ca-cardf:focus-within{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 18%,transparent)}
.ca :where(a,button,summary):focus-visible{border-radius:10px}

/* ---------- comutatorul segmentat (lunar / anual) ca în iOS ---------- */
.ca-seg{border:0;border-radius:12px;padding:3px;gap:2px;background:var(--gl-fill)}
.ca-seg label{min-height:40px;border-radius:9px;color:var(--ink2);transition:background-color .2s ease,box-shadow .2s ease}
.ca-seg label+label{border-left:0}
.ca-seg label:has(input:checked){background:var(--gl-thumb);color:var(--gl-thumb-ink);box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.06)}

/* ---------- numărătorul capsulă ---------- */
.ca-stp{border:0;border-radius:999px;background:var(--gl-fill);overflow:hidden}
.ca-stp input{border-left:.5px solid var(--gl-sep);border-right:.5px solid var(--gl-sep)}
.ca-stp button{transition:transform .35s var(--gl-spring)}

/* ---------- butonul radio: punct plin, ca bifa iOS ---------- */
.ca-rd{width:22px;height:22px;border-width:1.5px}
.ca-opt{grid-template-columns:22px minmax(0,1fr) auto}
.ca-opt input:checked~.ca-rd{border:0;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 11.3 3 3 6-6.3'/%3E%3C/svg%3E") center/100% no-repeat}
:root:not([data-theme=light]) .ca-opt input:checked~.ca-rd{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 11.3 3 3 6-6.3'/%3E%3C/svg%3E")}

/* ---------- meniul contului + comutatorul de stări: sticlă groasă ---------- */
.ca-acct-m,.ca-pv-l{border-radius:20px;background:var(--gl-bg-hi)}
.ca-acct-m a,.ca-pv-l a{border-radius:12px}
.ca-acct-who{border-bottom-color:var(--gl-sep)}
.ca-pv-b{border-radius:999px}

/* ---------- intrarea în cont + anularea probei: un card de sticlă pe lumini ---------- */
.ca-li{width:min(440px,calc(100% - 2*var(--gut)));margin:55px auto 89px;padding:40px 34px 34px;border-radius:30px}
.ca-tc{width:min(600px,calc(100% - 2*var(--gut)));margin:55px auto 89px;padding:40px 34px 34px;border-radius:30px}
.ca-li-ft{border-top-color:var(--gl-sep)}
.ca-or::before,.ca-or::after{background:var(--gl-sep)}

/* ---------- telefon / tabletă: secțiunile = bară de file plutitoare jos (iOS 26) ---------- */
@media (max-width:1023px){
  .ca-acc{padding-bottom:121px}
  /* [cc 17.10] z-index 20 (era 40): sub antet (.top are 30, foaia meniului de pe telefon e în el), ca bara #ct-bar de pe Contact; cu meniul deschis bara nu mai stă peste foaie */
  .ca-row{position:fixed;top:auto;left:50%;transform:translateX(-50%);bottom:calc(13px + env(safe-area-inset-bottom));z-index:20;
    width:min(560px,calc(100% - 24px));margin:0;padding:4px;gap:0;justify-content:space-between;border-radius:999px;background:var(--gl-bg-hi)}
  .ca-row a{flex:1 1 0;justify-content:center;min-height:48px;padding:0 4px;border-radius:999px;font-size:13px;color:var(--ink2);transition:background-color .2s ease,transform .35s var(--gl-spring)}
  .ca-row a[aria-current=true]{background:var(--gl-fill);color:var(--ink);font-weight:600}
  .ca-row a[aria-current=true]::after{display:none}
  .ca main .ca-sec{scroll-margin-top:13px}
  /* [cc 17.10 revizie] comutatorul de stări (doar previzualizare) nu mai plutește peste card sau peste bara de file: pe telefon / tabletă stă la capătul paginii, centrat,
     deasupra locului pe care îl acoperă bara de file; lista lui se deschide în sus, tot centrată */
  .ca-pv{position:relative;right:auto;bottom:auto;display:flex;justify-content:center;margin:21px 16px calc(21px + env(safe-area-inset-bottom))}
  /* [cc 17.10] locul barei de file (13 + 56 px) + 20 px de aer stă pe pagină, nu pe comutator: și fără comutator (?shot=1, pagina reală) ultimul rând al subsolului („English”) rămâne deasupra barei */
  body:has(.ca-row){padding-bottom:calc(89px + env(safe-area-inset-bottom))}
  body:has(.ca-row) .ca-pv{margin-bottom:21px}
  .ca-pv-l{right:auto;left:50%;transform:translateX(-50%)}
}
@media (max-width:760px){
  .ca-st{padding:24px 21px;border-radius:24px}
  .ca-sec{margin-top:13px;padding:24px 18px;border-radius:24px}
  .ca-open{padding:18px 14px}
  .ca-li,.ca-tc{margin:21px auto 55px;padding:28px 21px 24px;border-radius:26px}
}
@media (max-width:380px){.ca-row a{font-size:12px}}

@media (prefers-reduced-motion:reduce){
  .ca-btn,.ca-g,.ca-row a,.ca-stp button,.ca-seg label{transition:none}
  .ca-btn:active,.ca-g:active,.ca-row a:active,.ca-stp button:active,.ca-acct-b:active,.ca-pv-b:active{transform:none}
}