/* ==========================================================================
   NIVELURILE DE ACCES · LOT 176 · `inc/sections/00-acces.php`

   Poarta nu are card, chenar sau fundal: textul stă direct pe pagină, peste un
   schelet estompat care se stinge spre fundal. Scheletul e decor, fără nicio
   cifră reală (conținutul blocat nu se trimite deloc în pagină).

   ⚠ Prefixul `xpay` e ales fiindcă tema are deja `.tg__*` (alt component): o
     clasă comună aducea o linie de separare din regula `.mdsx .tg__l`.
   ⚠ Fiecare `var()` are valoare de rezervă: banda și bara de jos stau în afara
     `.mdsx__in`, unde tokenurile `--xt-*` nu sunt definite.
   ========================================================================== */

/* ── poarta mare ── */
.xpay{position:relative;isolation:isolate;display:grid;place-items:center;min-height:400px;margin:20px 0 0;padding:64px 24px;overflow:hidden;overflow:clip;border:0;background:none;box-shadow:none}
.xpay__sk{position:absolute;inset:0;z-index:-1;display:grid;gap:16px;padding:8px 0;pointer-events:none;filter:blur(18px) saturate(.6);opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 88%);mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 88%)}
.xpay__sk i{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--xr-c,28px);background:rgba(255,255,255,.035)}
.xpay__sk b{display:block;height:12px;border-radius:6px;background:rgba(255,255,255,.12)}
.xpay__sk b:nth-child(1){width:42%;height:14px}
.xpay__sk b:nth-child(2){width:64%;height:40px;background:radial-gradient(60% 120% at 20% 50%,rgba(0,186,124,.35),transparent 70%),rgba(255,255,255,.08)}
.xpay__sk b:nth-child(3){width:80%}
.xpay__sk--grila{grid-template-columns:repeat(3,minmax(0,1fr))}
.xpay__sk--grila i:nth-child(2) b:nth-child(2){background:radial-gradient(60% 120% at 30% 50%,rgba(240,108,0,.32),transparent 70%),rgba(255,255,255,.08)}
.xpay__sk--grila i:nth-child(3) b:nth-child(2){background:radial-gradient(60% 120% at 40% 50%,rgba(29,155,240,.3),transparent 70%),rgba(255,255,255,.08)}
.xpay__sk--grafic,.xpay__sk--tabel{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.xpay__sk--grafic i:first-child b:nth-child(2){height:120px;width:100%;background:linear-gradient(180deg,rgba(0,186,124,.22),transparent),rgba(255,255,255,.05)}
.xpay__sk--tabel i b{height:10px}
.xpay__sk--tabel i b:nth-child(2){height:10px;width:90%;background:rgba(255,255,255,.12)}
.xpay__sk--card i b:nth-child(2){width:38%;height:28px;background:radial-gradient(60% 120% at 30% 50%,rgba(240,108,0,.35),transparent 70%),rgba(255,255,255,.08)}

.xpay__p{position:relative;width:min(460px,100%);text-align:center;font-family:var(--xf,'Hanken Grotesk',system-ui,sans-serif)}
.xpay__i{display:block;margin:0 auto 20px;color:var(--xc-ink,#f5f3f0)}
.xpay .xpay__h{margin:0 0 12px;padding:0;border:0;font:700 var(--xt-3,28px)/1.12 var(--xf,'Hanken Grotesk',system-ui,sans-serif);letter-spacing:-.025em;color:var(--xc-ink,#f5f3f0);text-wrap:balance}
.xpay .xpay__d{margin:0 auto;max-width:400px;padding:0;border:0;font:400 var(--xt-6,15.5px)/1.5 var(--xf,'Hanken Grotesk',system-ui,sans-serif);color:var(--xc-ink2,#9c9a96);text-wrap:pretty}
.xpay__a{display:flex;flex-direction:column;align-items:center;gap:16px;margin:28px 0 0}
.xpay .xpay__f{margin:20px 0 0;padding:0;border:0;font:400 var(--xt-8,12px)/1.45 var(--xf,'Hanken Grotesk',system-ui,sans-serif);color:var(--xc-ink3,#7d7a74)}

/* butonul principal și legătura de sub el (și în bandă, și în bara de jos) */
.xpay__b{display:inline-flex;align-items:center;justify-content:center;min-width:220px;height:48px;padding:0 28px;border:0;border-radius:999px;background:var(--xc-ink,#f5f3f0);color:var(--xc-bg,#0b0b0d);font:600 var(--xt-6,15.5px)/1 var(--xf,'Hanken Grotesk',system-ui,sans-serif);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:transform .2s ease,opacity .2s}
.xpay__b:hover{transform:scale(1.02);color:var(--xc-bg,#0b0b0d);text-decoration:none}
.xpay__b:active{transform:scale(.98);opacity:.9}
.xpay__b:focus-visible,.xpay__lk:focus-visible,.xpay__c:focus-visible{outline:2px solid var(--xc-cyan,#1d9bf0);outline-offset:3px}
.xpay__lk{display:inline;padding:0;border:0;background:none;font:500 var(--xt-6,15.5px)/1.2 var(--xf,'Hanken Grotesk',system-ui,sans-serif);color:var(--xc-cyan,#1d9bf0);text-decoration:none;cursor:pointer}
.xpay__lk::after{content:" \203A"}
.xpay__lk:hover{color:var(--xc-cyan,#1d9bf0);text-decoration:underline}
.xpay__lk--q{margin-top:8px;font-size:var(--xt-7,13.5px);color:var(--xc-ink2,#9c9a96)}
.xpay__lk--q:hover{color:var(--xc-ink,#f5f3f0)}

/* verdictul: cardul temei își pierde fundalul, umbra și aurora cât e blocat */
.xvd .xvd__card.xvd__card--acces{padding:0;background:none!important;box-shadow:none!important;border:0!important;overflow:visible}
.xvd__card--acces .xpay{margin:0}

/* ── pastila (argumentele de după primele 3, nota analiștilor) ── */
.xpay-chip{margin:16px 0 0;padding:0;border:0}
.xpay__c{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:10px 20px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--xc-ink,#f5f3f0);font:500 var(--xt-7,13.5px)/1.3 var(--xf,'Hanken Grotesk',system-ui,sans-serif);text-decoration:none;transition:background .2s}
.xpay__c:hover{background:rgba(255,255,255,.12);color:var(--xc-ink,#f5f3f0);text-decoration:none}
.xpay__c svg{flex:none}
.xpay__c em{font-style:normal;color:var(--xc-cyan,#1d9bf0)}

/* istoricul: rândul „în curs", fără etichetă și fără culoare */
.xvm__ir .xvm__iv.xvm__iv--acces{display:inline-flex;align-items:center;gap:6px;background:var(--xs-track,#1c1c1f)!important;color:var(--xc-ink2,#9c9a96)!important}

/* ── banda de sus, pentru conturi ── */
.xpay-band{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 24px;padding:14px 20px;border:0;border-radius:var(--xr-i,22px);background:rgba(255,255,255,.04);font:400 var(--xt-7,13.5px)/1.45 var(--xf,'Hanken Grotesk',system-ui,sans-serif);color:var(--xc-ink2,#9c9a96)}
.xpay-band p{margin:0;padding:0;border:0}
.xpay-band__t{flex:1 1 240px;min-width:0}
.xpay-band__t b{color:var(--xc-ink,#f5f3f0);font-weight:600}
.xpay-band__m{display:flex;align-items:center;gap:16px;flex:none}
.xpay-band .xpay__lk{font-size:var(--xt-7,13.5px)}
.xpay-meter{display:inline-flex;gap:4px}
.xpay-meter i{width:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.xpay-meter i.on{background:var(--xc-ink,#f5f3f0)}

/* ── bara de jos, pentru vizitatori ── */
.xpay-dock{position:fixed;left:50%;bottom:20px;z-index:100;display:flex;align-items:center;gap:20px;max-width:calc(100vw - 24px);padding:8px 8px 8px 24px;border-radius:999px;
  background:rgba(30,30,33,.78);-webkit-backdrop-filter:saturate(1.8) blur(24px);backdrop-filter:saturate(1.8) blur(24px);box-shadow:0 20px 50px -16px rgba(0,0,0,.9);
  font:400 var(--xt-7,13.5px)/1.3 var(--xf,'Hanken Grotesk',system-ui,sans-serif);color:var(--xc-ink2,#9c9a96);transform:translate(-50%,160%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.xpay-dock[hidden]{display:none}
/* sub ferestrele temei (z-index 120) și ascunsă cât e deschisă una */
body:has(.vmod.is-open) .xpay-dock{display:none}
.xpay-dock.is-on{transform:translate(-50%,0)}
.xpay-dock__t{margin:0}
.xpay-dock__t b{color:var(--xc-ink,#f5f3f0);font-weight:600}
.xpay-dock .xpay__b{min-width:0;height:40px;padding:0 20px;font-size:var(--xt-7,13.5px)}
.xpay-dock__x{width:32px;height:32px;display:grid;place-items:center;flex:none;padding:0;border:0;border-radius:50%;background:none;color:var(--xc-ink3,#7d7a74);cursor:pointer}
.xpay-dock__x:hover{color:var(--xc-ink,#f5f3f0)}

/* ── telefon și tabletă ── */
@media (max-width:899px){
  .xpay{min-height:380px;padding:48px 8px}
  .xpay__sk--grila{grid-template-columns:minmax(0,1fr)}
  .xpay__sk--grila i:nth-child(n+2){display:none}
  .xpay__sk--grafic,.xpay__sk--tabel{grid-template-columns:minmax(0,1fr)}
  .xpay-dock{left:12px;right:12px;gap:10px;border-radius:24px;padding:8px 4px 8px 18px;transform:translateY(160%)}
  .xpay-dock.is-on{transform:none}
  .xpay-dock__t{flex:1;min-width:0}
  .xpay-dock .xpay__b{flex:none}
  .xpay-dock__x{width:28px;height:28px}
}
@media (max-width:559px){
  .xpay__b{width:100%;min-width:0}
  .xpay-dock .xpay__b{width:auto}
}
@media (prefers-reduced-motion:reduce){.xpay-dock,.xpay__b,.xpay__c{transition:none}}
@media print{.xpay-dock{display:none}}