/* ============================================================================
   92-navbar.css · BARA DE JOS PE MOBIL, patru taburi

   ⚠⚠ NUMAI SUB 921px. Pragul e al temei (`mds-asset.css:142`), acelasi la care
      sidebar-ul devenea banda de jos. Pe desktop bara nu exista deloc: sidebar-ul
      e acolo si face aceeasi treaba, mai bine.

   ⚠⚠ MECANISMUL E DIN `<input>`, NU DIN JAVASCRIPT. Doua grupuri de butoane
      radio, amandoua emise INAINTEA panourilor (`x-navbar.php`), ca regulile
      `#id:checked ~ .panou` sa ajunga la ele:
        `xnb-p`  care panou e deschis: niciunul / Analiza / Investeste
        `xnb-g`  care grup e ales in panoul Analiza: niciunul / 0..11
      Fara JS totul merge: se deschide, se alege grupul, se sare la sectiune.
      Scriptul adauga tabul activ dupa derulare, inchiderea la apasare in afara
      si derularea lina.

   ⚠⚠ CELE 12 PERECHI DE REGULI DE LA FINAL nu sunt o scapare. CSS nu poate lega
      valoarea unui radio de atributul unui frate, deci fiecare grup isi cere
      perechea lui de reguli, pe index. 12 e plafonul din
      `MDS_XNB_MAX_GRUPURI`; azi se randeaza 8.

   ⚠ Tokenii `--x*` (`sectiuni/20-grup2.css`) se pot folosi aici: fisierul se
     incarca numai pe pagina de activ, unde ei exista.
   ============================================================================ */

/* ⚠ Bara nu se randeaza pe desktop. `display:none` pe radacina, nu pe bara:
   altfel radio-urile ar fi ramas active si ar fi tinut un panou deschis
   invizibil peste continut. */
.xnb{ display:none; }

@media (max-width:920px){

  /* ══ ASCUNDEREA BENZII VECHI ═══════════════════════════════════════════
     ⚠⚠ Sidebar-ul devenea banda de jos cu cele 30 de link-uri de sectiune
        (`mds-asset.css:142-153`). Bara noua ii ia locul, deci cea veche pleaca.
        Fisierul temei NU se atinge: se ascunde de aici.
     ⚠ `.mds-asset__side` e la (0,1,0) in tema; (0,2,0) aici. */
  .mds-asset__side.mds-asset__side{ display:none; }

  /* ⚠ Locul pentru bara, sub continut. Tema rezerva deja
     `calc(var(--mds-tap) + var(--mds-6))` jos (`mds-asset.css:154`), adica
     ~44+38px; bara noua are 58px plus zona sigura a telefonului. */
  .mds-asset__main.mds-asset__main{
    padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px) + 26px);
  }

  .xnb{ display:block; }

  /* ⚠⚠ `position:fixed` PE COMUTATOARE, SI E O REPARATIE, NU UN CAPRICIU.
        Cu `absolute` ele stau la locul lor din pagina, iar bara se emite pe
        `wp_footer`, adica la FINALUL documentului. Un `<input>` ascuns care
        primeste focalizare de la `<label for>` e derulat in ecran de browser,
        deci apasarea pe un chip de grup arunca pagina la final. Masurat exact
        asta: apasarea pe „Valoare & Evaluare" muta derularea de la 11.288 la
        85.209px. Aceeasi cauza ca bug-ul prins la Proiectii, alta imbracaminte.
        `fixed` le tine mereu in ecran, deci nu mai e nimic de derulat.
     ⚠ Se lasa deliberat in coltul din stanga-jos, sub bara: chiar daca un
       browser le-ar arata, sunt 1x1px transparent, peste un fundal opac. */
  .xnb__r{ position:fixed; left:0; bottom:0; width:1px; height:1px;
    opacity:0; pointer-events:none; margin:0; }

  /* ══ BARA ══════════════════════════════════════════════════════════════
     ⚠⚠ TOT TEANCUL BAREI STA SUB 60, SI E MASURAT. Tema are sertarul mobil la
        `z-index:70` si voalul lui la 60 (`mds-shell.css:54` si `:56`), iar
        sertarul se emite in `header.php`, adica INAINTEA barei. La egalitate de
        z-index castiga cel de mai tarziu in marcaj, deci bara ar fi ramas
        deasupra sertarului deschis. Probat in banc cu sertarul alaturi: la 70,
        bara statea peste el.
        Acum: voal 52, bara 55, panoul Analiza 56, sheet 57. Sertarul (70),
        voalul lui (60), fereastra de cautare (90) si modalul de grafic (120)
        trec toate peste bara, cum trebuie.
     ⚠ Meniurile din antet sunt la 50, dar sunt numai pe desktop, unde bara nu
       exista deloc. */
  .xnb__bar{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background:color-mix(in srgb, var(--xc-bg, #0b0b0d) 92%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .xnb__t{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:46px; padding:5px 2px; border:0; background:none;
    border-radius:var(--xr-i, 18px); cursor:pointer;
    color:var(--xc-ink3, #7d7a74); text-decoration:none;
    font:600 10.5px/1.1 var(--xf, system-ui); letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
  }
  .xnb__i{ width:21px; height:21px; flex:none; }
  .xnb__t:active{ background:var(--xs-inset, #0e0e10); }
  /* ⚠ `.is-on` il pune scriptul, dupa derulare. Fara JS nu se aprinde nimic,
     si nu e o pierdere: bara ramane la fel de folosibila. */
  .xnb__t.is-on{ color:var(--xc-ink, #f5f3f0); }

  /* ⚠ Tabul panoului deschis se aprinde din CSS, nu din JS: starea e chiar
     radio-ul de deasupra lui. */
  #xnb-p-an:checked ~ .xnb__bar .xnb__t--an,
  #xnb-p-inv:checked ~ .xnb__bar .xnb__t--inv{ color:var(--xc-ink, #f5f3f0); }

  /* ══ VOALUL ════════════════════════════════════════════════════════════
     ⚠ E o eticheta care duce la „niciun panou", deci apasarea oriunde in afara
       inchide. Acelasi mecanism ca la tooltipuri. */
  .xnb__voal{
    position:fixed; inset:0; z-index:52; display:none;
    background:rgba(0,0,0,.55); cursor:default;
  }
  #xnb-p-an:checked ~ .xnb__voal,
  #xnb-p-inv:checked ~ .xnb__voal{ display:block; }
  /* ⚠ La panoul Analiza voalul e INVIZIBIL dar ramane: pista e o fasie subtire
     deasupra barei, iar un voal negru peste toata pagina pentru ea ar fi fost
     mult. Tot inchide la apasare in afara. */
  #xnb-p-an:checked ~ .xnb__voal{ background:none; }

  /* ══ PANOUL „ANALIZA" ══════════════════════════════════════════════════ */
  .xnb__pan--an{
    position:fixed; left:0; right:0; z-index:56; display:none;
    bottom:calc(58px + env(safe-area-inset-bottom, 0px));
    padding:10px 0 11px;
    background:color-mix(in srgb, var(--xc-bg, #0b0b0d) 96%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -18px 40px -24px rgba(0,0,0,.9);
  }
  #xnb-p-an:checked ~ .xnb__pan--an{ display:block; }

  /* ⚠ Pista se deruleaza pe orizontala, cu marginile scoase in afara ca primul
     si ultimul chip sa poata ajunge lipite de margine. Acelasi tipar ca la
     cardurile de Proiectii si de Indicatoare. */
  .xnb__pista{
    display:none; gap:7px; align-items:center;
    padding:0 14px; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .xnb__pista::-webkit-scrollbar{ display:none; }
  .xnb__pista--gr{ display:flex; }

  .xnb__chip{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    min-height:34px; padding:8px 15px; border-radius:var(--xr-p, 999px);
    background:var(--xs-inset, #0e0e10); color:var(--xc-ink2, #9c9a96);
    font:600 12.5px/1.2 var(--xf, system-ui); white-space:nowrap;
    text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .xnb__chip:active{ background:var(--xs-track, #1c1c1f); }
  .xnb__chip--s.is-on{ background:var(--xc-ac, #00ba7c); color:#08120c; }

  .xnb__inapoi{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; cursor:pointer;
    background:var(--xs-track, #1c1c1f); color:var(--xc-ink2, #9c9a96);
  }
  .xnb__inapoi .xnb__i{ width:18px; height:18px; }

  /* ══ SHEET-UL „INVESTESTE" ═════════════════════════════════════════════
     ⚠⚠ 76vh, adica „aproape trei sferturi de ecran", cerut. `dvh` unde exista,
        fiindca pe telefon `vh` include bara de adresa a browserului si sheet-ul
        ar fi iesit din ecran cand ea se retrage.
     ⚠ Se deruleaza CORPUL, nu sheet-ul: capul cu titlul si butonul de inchidere
       raman pe loc. */
  .xnb__pan--inv{
    position:fixed; left:0; right:0; bottom:0; z-index:57; display:none;
    height:76vh; max-height:76vh;
    flex-direction:column;
    background:var(--xc-bg, #0b0b0d);
    border-radius:26px 26px 0 0;
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 -26px 60px -20px rgba(0,0,0,1);
  }
  @supports (height:76dvh){
    .xnb__pan--inv{ height:76dvh; max-height:76dvh; }
  }
  #xnb-p-inv:checked ~ .xnb__pan--inv{ display:flex; }

  /* ⚠ Mantaua de sus: semnul ca sheet-ul se trage. Nu e apasabila si n-are nume,
     de aia `aria-hidden`. */
  .xnb__manta{
    flex:none; width:38px; height:4px; margin:9px auto 2px;
    border-radius:999px; background:rgba(255,255,255,.18);
  }
  /* ⚠ `flex-start`, nu `center`: capul are acum doua randuri (titlu si
     subtitlu), iar butonul de inchidere trebuie sa ramana la varf, nu la
     mijlocul lor. */
  .xnb__cap{
    flex:none; display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; padding:8px 18px 12px;
  }
  .xnb__capt{ flex:1 1 auto; min-width:0; }
  /* ⚠ `text-wrap:balance` fiindca titlul are simbolul la final: fara el,
     „Unde poți investi în acțiuni TSLA" rupea exact inaintea simbolului si
     TSLA ramanea singur pe randul doi. Cu el, randurile ies egale. Unde nu e
     suportat, se rupe ca pana acum - nimic nu se strica. */
  .xnb__cap b{ display:block; font:600 var(--xt-5, 20px)/1.25 var(--xf, system-ui);
    color:var(--xc-ink, #f5f3f0); letter-spacing:-.015em; text-wrap:balance; }
  /* ⚠ Numele companiei poate fi lung („Saxo Bank Investor Services România"),
     deci subtitlul are voie sa treaca pe doua randuri. Titlul de deasupra are
     doar simbolul, deci ramane scurt. */
  .xnb__sub{ display:block; margin-top:4px;
    font:400 var(--xt-7, 13.5px)/1.4 var(--xf, system-ui); color:var(--xc-ink3, #7d7a74); }
  .xnb__x{
    flex:none; position:relative; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:var(--xs-inset, #0e0e10); color:var(--xc-ink2, #9c9a96);
  }
  .xnb__x::before{ content:"\2715"; font:400 13px/1 var(--xf, system-ui); }

  .xnb__corp{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 14px calc(20px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; gap:11px;
  }

  /* ══ CARDUL DE BROKER ══════════════════════════════════════════════════ */
  .xnb__br{
    background:var(--xs-card, #151517); border-radius:var(--xr-i, 20px);
    padding:15px 16px 16px;
    box-shadow:0 1px 1px rgba(0,0,0,.5), 0 16px 34px -26px rgba(0,0,0,1);
  }
  .xnb__brh{ display:flex; align-items:center; gap:11px; }
  .xnb__logo{ flex:none; width:40px; height:40px; border-radius:11px;
    object-fit:contain; background:var(--xs-inset, #0e0e10); }
  .xnb__logo--gol{ display:flex; align-items:center; justify-content:center;
    font:600 16px/1 var(--xf, system-ui); color:var(--xc-ink2, #9c9a96); }
  .xnb__brn{ flex:1 1 auto; min-width:0; }
  .xnb__brn b{ display:block; font:600 var(--xt-6, 15.5px)/1.25 var(--xf, system-ui);
    color:var(--xc-ink, #f5f3f0); letter-spacing:-.012em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .xnb__tip{ display:block; margin-top:1px;
    font:400 var(--xt-8, 12px)/1.3 var(--xf, system-ui); color:var(--xc-ink3, #7d7a74); }
  .xnb__rat{ flex:none; display:inline-flex; align-items:center; gap:4px;
    padding:4px 9px; border-radius:var(--xr-p, 999px);
    background:var(--xs-inset, #0e0e10);
    font:600 var(--xt-8, 12px)/1 var(--xf, system-ui); color:var(--xc-yellow, #ffd400); }
  .xnb__rat .xnb__i{ width:13px; height:13px; }

  .xnb__tag{ margin:11px 0 0;
    font:400 var(--xt-7, 13.5px)/1.5 var(--xf, system-ui); color:var(--xc-ink2, #9c9a96); }

  /* ⚠ Doua coloane egale: perechile eticheta/valoare se aliniaza intre carduri
     chiar daca unul are reglementare lunga si altul scurta. */
  .xnb__meta{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:9px 12px; margin:13px 0 0; }
  .xnb__m{ min-width:0; font:600 var(--xt-7, 13.5px)/1.35 var(--xf, system-ui);
    color:var(--xc-ink, #f5f3f0); overflow:hidden; text-overflow:ellipsis; }
  .xnb__m em{ display:block; font:400 var(--xt-8, 12px)/1.3 var(--xf, system-ui);
    font-style:normal; color:var(--xc-ink3, #7d7a74); margin-bottom:2px; }

  .xnb__brc{ display:flex; align-items:stretch; gap:8px; margin:15px 0 0; }
  .xnb__cta{
    flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center;
    gap:7px; min-height:44px; padding:11px 16px; border-radius:var(--xr-p, 999px);
    background:linear-gradient(135deg,#00ba7c,#00a86e); color:#08230a;
    font:600 var(--xt-7, 13.5px)/1.2 var(--xf, system-ui); text-decoration:none;
    letter-spacing:-.01em; text-align:center;
  }
  /* ⚠ Jetonul „AD" de pe butoane a plecat, cerut. Marcarea afilierii e acum un
     singur rand la finalul listei, `.xnb__afil` mai jos. */
  .xnb__rev{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:11px 16px; border-radius:var(--xr-p, 999px);
    background:var(--xs-inset, #0e0e10); color:var(--xc-ink2, #9c9a96);
    font:600 var(--xt-7, 13.5px)/1.2 var(--xf, system-ui); text-decoration:none;
    white-space:nowrap;
  }
  .xnb__disc{ margin:11px 0 0;
    font:400 var(--xt-8, 12px)/1.45 var(--xf, system-ui); color:var(--xc-ink4, #66645f); }

  /* ⚠ Randul de afiliere si cel de risc, amandoua la finalul listei. Cel de
     afiliere e cu o treapta mai deschis: e o informare, nu un avertisment. */
  .xnb__afil{ margin:6px 2px 0;
    font:400 var(--xt-8, 12px)/1.5 var(--xf, system-ui); color:var(--xc-ink3, #7d7a74); }
  .xnb__risc{ margin:8px 2px 0;
    font:400 var(--xt-8, 12px)/1.5 var(--xf, system-ui); color:var(--xc-ink4, #66645f); }

  /* ⚠ Sub 360px butoanele nu mai incap unul langa altul: 44px inaltime fiecare
     plus doua texte intr-un rand de ~300px. Trec unul sub altul, tot la 44px. */
  @media (max-width:359px){
    .xnb__brc{ flex-direction:column; }
    .xnb__rev{ flex:1 1 auto; }
    .xnb__meta{ grid-template-columns:1fr; }
  }

  /* ══ CELE 12 PERECHI ═══════════════════════════════════════════════════
     ⚠ Vezi antetul: CSS nu poate lega valoarea unui radio de atributul unui
       frate, deci fiecare index isi cere perechea. Cand un grup e ales, pista
       cu grupuri pleaca si vine pista lui de sectiuni. */
  #xnb-g-0:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-1:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-2:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-3:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-4:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-5:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-6:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-7:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-8:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-9:checked  ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-10:checked ~ .xnb__pan--an .xnb__pista--gr,
  #xnb-g-11:checked ~ .xnb__pan--an .xnb__pista--gr{ display:none; }

  #xnb-g-0:checked  ~ .xnb__pan--an .xnb__pista--0,
  #xnb-g-1:checked  ~ .xnb__pan--an .xnb__pista--1,
  #xnb-g-2:checked  ~ .xnb__pan--an .xnb__pista--2,
  #xnb-g-3:checked  ~ .xnb__pan--an .xnb__pista--3,
  #xnb-g-4:checked  ~ .xnb__pan--an .xnb__pista--4,
  #xnb-g-5:checked  ~ .xnb__pan--an .xnb__pista--5,
  #xnb-g-6:checked  ~ .xnb__pan--an .xnb__pista--6,
  #xnb-g-7:checked  ~ .xnb__pan--an .xnb__pista--7,
  #xnb-g-8:checked  ~ .xnb__pan--an .xnb__pista--8,
  #xnb-g-9:checked  ~ .xnb__pan--an .xnb__pista--9,
  #xnb-g-10:checked ~ .xnb__pan--an .xnb__pista--10,
  #xnb-g-11:checked ~ .xnb__pan--an .xnb__pista--11{ display:flex; }
}

@media (prefers-reduced-motion:reduce){
  .xnb__pista{ scroll-behavior:auto; }
}