/* ===========================
   THEME TOKENS (Light/Dark)
   =========================== */
:root{
  --bg:#ffffff;          --text:#111827;     --muted:#6b7280;
  --border:#e5e7eb;      --surface:#f9fafb;  --card:#ffffff;
  --shadow:0 2px 4px rgba(0,0,0,.05);

  --primary:#1a237e;     --link:#1a237e;

  /* Header light */
  --header-bg:#283593;   --header-text:#ffffff;

  /* Banner (separat de border-ul global) */
  --banner-bg:#e9f5fc;   
  --banner-text:#005c8f;
  --banner-border:#cce4f3;

  --warn-bg:#ffecb3;     --warn-text:#5d4037;

  --btn-bg:#ffd700;      --btn-text:#000000;

  /* spațiu pentru bottom-nav sticky */
  --bottom-nav-h: 40px; 
}

[data-theme="dark"]{
  --bg:#0b0f1a;          --text:#e5e7eb;     --muted:#9ca3af;
  --border:#1f2937;      --surface:#111827;  --card:#0f172a; 
  --shadow:0 2px 6px rgba(0,0,0,.6);

  --primary:#8ab4f8;     --link:#93c5fd;

  /* Header dark – mai închis */
  --header-bg:#0a1338;   --header-text:#ffffff;

  /* Banner dark discret dar vizibil */
  --banner-bg:rgba(138,180,248,0.12);
  --banner-text:#9cc8ff;
  --banner-border:rgba(138,180,248,0.25);

  --warn-bg:#4b3f1d;     --warn-text:#fadd77;

  --btn-bg:#d0b200;      --btn-text:#000000;
}

/* ===========================
   GLOBAL BASE
   =========================== */
html, body{
  background:var(--bg);
  color:var(--text);
  margin:0; padding:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  padding-bottom: var(--bottom-nav-h);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--link); }
::selection{ background:rgba(90,124,255,.25); }
.text-center { text-align:center; }

/* ===========================
   HEADER + NAV (theme-aware)
   =========================== */
header{
  position:relative;
  background:var(--header-bg);
  color:var(--header-text);
  padding:12px 16px;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
  display:flex; 
  flex-direction:column;
}

/* Titlu + subtitlu – compact */
.logo-container{
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:2px;
}
.logo-container span{
  font-weight:600; 
  font-size:18px; 
  color:var(--header-text);
  text-align:center; 
  display:block; 
  margin:0; 
  line-height:1.15;
}
.logo-container div{
  font-size:13px; 
  color:rgba(255,255,255,.9); 
  text-align:center; 
  margin:0; 
  line-height:1.15;
}
@media (max-width:480px){
  .logo-container span,
  .logo-container div{ line-height:1.1; }
}

/* Icon toggle temă (sun/moon) – aliniat cu hamburger */
.theme-toggle{
  position:absolute;
  top:14px;
  right:52px;               /* hamburgerul e la right:16px; distanță ~36px */
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:var(--header-text);
  cursor:pointer;
  z-index: 5;
}
.theme-toggle i{
  font-size:16px;
  line-height:1;
  pointer-events:none;
}
.theme-toggle:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.theme-toggle:hover{ background:rgba(0,0,0,.06); }
[data-theme="dark"] .theme-toggle:hover{ background:rgba(255,255,255,.12); }

/* Hamburger – aceeași “cutie” ca theme-toggle + icon centrat */
.menu-toggle{
  position:absolute; 
  top:14px; 
  right:16px; 
  width:28px; 
  height:28px;
  display:grid; 
  place-items:center;
  border-radius:6px;
  color:var(--header-text);
  cursor:pointer;
  z-index: 5;
}
.menu-toggle i{
  line-height:1;
  font-size:18px;
  transform:translateY(-1px);  /* reglaj fin vertical */
}

/* Nav – desktop (inline), mobil = drawer (vezi secțiunea „Overlay + Drawer”) */
nav{
  display:none; 
  flex-direction:column; 
  background:var(--header-bg);
  margin-top:12px; 
  border-radius:8px; 
  overflow:hidden;
}
nav.show{ display:flex; }
nav a{
  color:var(--header-text); 
  text-decoration:none; 
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.1); 
  font-weight:500;
}
@media (min-width:768px){
  .menu-toggle{ display:none; }
  nav{ 
    display:flex !important; 
    flex-direction:row; 
    justify-content:center; 
    background:transparent; 
    position: static; 
    height:auto; width:auto;
    transform:none; box-shadow:none; border-left:none; 
    margin-top:12px;
    border-radius:8px;
  }
  nav a{ 
    background:none; 
    color:var(--header-text); 
    padding:8px 12px; 
    border:0; 
  }
}

/* ===========================
   SELECTORI limbă/temă (compacți)
   =========================== */
.lang-toggle{
  position:absolute; 
  top:14px; left:16px; 
  z-index:5;
  display:flex; 
  flex-direction:column; 
  gap:3px;
}
.lang-toggle select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:28px; 
  padding:3px 22px 3px 8px;
  border-radius:6px; 
  border:1px solid rgba(255,255,255,.45);
  background: var(--card)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23283993'><path d='M7 10l5 5 5-5'/></svg>")
    no-repeat right 6px center / 12px 12px;
  color:var(--text); 
  font-size:12px; 
  font-weight:600; 
  line-height:1.2; 
  cursor:pointer;
  width:85px; 
  min-width:auto;
}
#themeSelect{ width:85px; }
@media (min-width:768px){
  .lang-toggle{ flex-direction:row; align-items:center; gap:8px; }
}
/* Headerul drawer-ului (doar pe mobil) */
nav .drawer-header{
  display:block;
  padding:14px 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.15);
  background:var(--header-bg);
}

nav .drawer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--header-text);
  /* nu e link, deci cursor normal și fără efecte hover */
  cursor:default;
  text-decoration:none;
}

nav .drawer-brand img{
  display:block;
  width:36px; height:36px;
  border-radius:8px;           /* colțuri ca icon-ul de app */
  object-fit:cover;            /* umple cutia */
  background:transparent;      /* fără “rim” */
  padding:0; border:0; box-shadow:none;
}

/* dacă PNG-ul are margini transparente în el, „strânge-le” vizual */
nav .drawer-brand img.logo-tight{
  transform:scale(1.06);
  transform-origin:center;
}

nav .drawer-brand .brand-text strong{
  display:block; font-size:16px; line-height:1.15;
}
nav .drawer-brand .brand-text small{
  display:block; font-size:12px; line-height:1.1; opacity:.85;
}

/* Drawer header + spațiu DOAR pe mobil */
@media (max-width: 767px){
  nav .drawer-header{ display:block; }
  nav .drawer-header + a{ margin-top:8px; }
}

/* Pe desktop ascundem headerul și resetăm offsetul pe primul link */
@media (min-width: 768px){
  nav .drawer-header{ display:none; }
  nav .drawer-header + a{ margin-top:0 !important; }
  nav{ align-items:center; } /* aliniere verticală a link-urilor în bară */
}
/* Drawer user: doar pe mobil */
nav .drawer-user{
  margin-top:8px;
  padding:8px 10px;
  display:flex; align-items:center; gap:8px;
  color:var(--header-text);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  font-size: 13px;
}
@media (min-width: 768px){
  nav .drawer-user{ display: none !important; }
}
/* ============ Drawer header compact ============ */

/* containerul header-ului din drawer */
nav .drawer-header{
  gap: 8px;
  padding: 12px 12px 10px;
}

/* rând brand */
nav .drawer-brand{
  gap: 8px;
}
nav .drawer-brand img{
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
nav .drawer-brand .brand-text strong{
  font-size: 15px;
  line-height: 1.15;
}
nav .drawer-brand .brand-text small{
  font-size: 11.5px;
  line-height: 1.1;
  opacity: .85;
}

/* chip/pill user – mai subțire & discret */
nav .drawer-user{
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
[data-theme="light"] nav .drawer-user{
  background: rgba(255,255,255,.12);
  border-color: rgba(0,0,0,.06);
}

/* acțiuni (Login / My account / Logout) – compacte, fără aspect “greu” */
nav .drawer-header .drawer-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px;
  margin-top: 0;
}
nav .drawer-header .drawer-actions .nav-item{
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: var(--header-text);
  text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
[data-theme="light"] nav .drawer-header .drawer-actions .nav-item{
  border-color: rgba(0,0,0,.08);
}
nav .drawer-header .drawer-actions .nav-item:hover{
  background: rgba(255,255,255,.08);
  filter: none;
}
[data-theme="dark"] nav .drawer-header .drawer-actions .nav-item:hover{
  background: rgba(255,255,255,.10);
}

/* dacă rămâne un singur buton (ex. doar Login) îl întindem full width */
nav .drawer-header .drawer-actions.single .nav-item{
  grid-column: 1 / -1;
}
/* Drawer auth actions – butoane simple, fără iconițe */
nav .nav-auth-actions{
  margin-top: 8px;
}

#drawerAuthActions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
#drawerAuthActions.single{
  grid-template-columns: 1fr; /* doar Login -> full width */
}

/* buton generic */
#drawerAuthActions .btn-auth{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: var(--header-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .06s ease;
}
#drawerAuthActions .btn-auth:active{
  transform: translateY(1px);
}

/* hover states */
#drawerAuthActions .btn-auth:hover{
  background: rgba(255,255,255,.08);
}
[data-theme="light"] #drawerAuthActions .btn-auth{
  border-color: rgba(0,0,0,.10);
}
[data-theme="light"] #drawerAuthActions .btn-auth:hover{
  background: rgba(0,0,0,.04);
}

/* buton primar (Login) */
#drawerAuthActions .btn-primary{
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: transparent;
}
#drawerAuthActions .btn-primary:hover{
  filter: brightness(.97);
}

/* doar mobil (pe desktop oricum containerul e ascuns prin .mobile-only) */
@media (min-width:768px){
  nav .nav-auth-actions{ display: none !important; }
}

/* ===========================
   BANNER INFO (Telegram) – theme-aware
   =========================== */
.top-banner{
  background:var(--banner-bg);
  color:var(--banner-text);
  text-align:center; 
  padding:10px 16px; 
  font-size:14px; 
  font-weight:500;
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:8px;
  border-bottom:1px solid var(--banner-border);
}

.top-banner svg{
  width:18px; height:18px; 
  fill:currentColor;     /* icon = culoarea textului bannerului */
  flex:0 0 auto;
}
.top-banner a{ 
  color:inherit; 
  text-decoration:none; 
}
.top-banner a:hover{ text-decoration:underline; }

/* ===========================
   OVERLAY + DRAWER (mobil)
   =========================== */
body.menu-open { overflow: hidden; }

/* Overlay peste TOT (inclusiv lang/theme/hamburger) */
#navOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(3px); /* Safari/iOS */
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1100; /* sub nav (1200), peste orice din header */
}
#navOverlay.visible{
  opacity: 1;
  pointer-events: auto;
}

/* Drawer peste overlay */
header nav{ z-index: 1200; }

/* Cât timp meniul e deschis, blochează interacțiunile cu elementele din spate */
.menu-open .lang-toggle,
.menu-open .theme-toggle{
  pointer-events: none;
}

/* În loc să ascundem <select>-ul, îl blurăm ușor ca să nu „dea blue” */
.menu-open .lang-toggle{
  filter: blur(2px) saturate(0.9);
  opacity: .8;
  transition: filter .2s ease, opacity .2s ease;
}

/* Scoatem highlight-ul de focus cât timp e deschis meniul (evită tentă albastră pe unele browsere) */
.menu-open .lang-toggle select{
  outline: none;
  box-shadow: none;
}
/* Cât timp meniul e deschis, blochează interacțiunile cu elementele din spate */
.menu-open .lang-toggle,
.menu-open .theme-toggle{
  pointer-events: none;
}


/* Drawer din dreapta – doar pe mobil */
@media (max-width: 767px){
  nav{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1200;               /* peste overlay */
    background: var(--header-bg);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 24px rgba(0,0,0,.35);
    margin-top: 0;
    border-radius: 0;
  }
  nav.show{ transform: translateX(0); }
}

/* ===========================
   HELPERS
   =========================== */
.container{
  max-width:1000px; width:95%;
  margin:1rem auto; padding:1rem;
  background:var(--card); color:var(--text);
  border-radius:10px; box-shadow:var(--shadow); box-sizing:border-box;
  border:1px solid var(--border);
}

/* Pi warning bar – tematizat */
#piWarningBox{
  background:var(--warn-bg) !important;
  color:var(--warn-text) !important;
}
#piWarningBox a{ 
  color:var(--link) !important; 
  text-decoration:underline !important; 
}

/* ======================================================
   INDEX (homepage): carduri + variante dark
   ====================================================== */

/* containerul homepage */
.container-index{
  background:#ffffff; 
  border-radius:10px; 
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  padding:1rem; 
  max-width:1000px; 
  width:95%; 
  margin:1rem auto; 
  box-sizing:border-box;
}

/* Hero „Explore Our Topup & Gift Card Services” */
.topup-benefits-index{
  background:#dee1fa;
  padding:1.5rem .5rem;
  text-align:center;
  border-radius:12px;
}
.section-title-index{
  font-size:1.5rem; 
  font-weight:600; 
  color:#333; 
  text-align:center; 
  margin-bottom:1rem;
}

/* Grid 2 carduri (Topup / Gift) */
.benefits-grid-index{ display:flex; flex-direction:column; gap:1rem; }
.benefit-item-index{
  background:#fff; 
  border-radius:12px; 
  padding:1.2rem; 
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  text-align:center; 
  cursor:pointer; 
  transition:transform .2s, box-shadow .2s;
  border:1px solid #e5e7eb;
}
.benefit-item-index:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.benefit-item-index i{ font-size:2rem; color:#4a90e2; margin-bottom:.6rem; }
.benefit-item-index h3{ font-size:1.1rem; margin:.3rem 0; color:#222; }
.benefit-item-index p{ font-size:.9rem; color:#555; }

@media (min-width:600px){
  .benefits-grid-index{ flex-direction:row; justify-content:center; }
  .benefit-item-index{ width:45%; }
}

/* „Popular Gift Card Brands” */
.voucher-logos{
  margin-top:50px; 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:12px; 
  padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.section-title{ 
  font-size:1.4rem; 
  color:#1a237e; 
  margin:0 0 1rem; 
  font-weight:700; 
  text-align:center; 
}
.voucher-logos img{
  height: 50px;
  object-fit: contain;
  border-radius:8px; 
  background:#fff; 
  padding:6px;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
}

/* ====== DARK POLISH pentru index ====== */
[data-theme="dark"] .container-index{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}

[data-theme="dark"] .topup-benefits-index{
  background:#0f172a;
  color:#e5e7eb;
  border:1px solid #1f2937;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
[data-theme="dark"] .section-title-index,
[data-theme="dark"] .benefit-item-index h3,
[data-theme="dark"] .section-title{ color:#e5e7eb; }

[data-theme="dark"] .benefit-item-index{
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid #243047;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .benefit-item-index p{ color:#cbd5e1; }
[data-theme="dark"] .benefit-item-index i{ color:#8ab4f8; }

/* „Popular Gift Card Brands” pe dark – card închis + tiles temperate */
[data-theme="dark"] .voucher-logos{
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid #1f2937;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .voucher-logos img{
  height: 50px;
  object-fit: contain;
  background: #0f172a;
  border: 1px solid #243047;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,.45);
  filter: brightness(.98) saturate(.98);
}
/* ===== Overlay: sub nav, peste restul paginii și peste icon-urile din header ===== */
#navOverlay{
  position: fixed;
  inset: 0;
  background: transparent;
  transition: background .25s ease;
  z-index: 1002;              /* sub #nav (1003), peste header icons (1001) */
  pointer-events: none;
}
.menu-open #navOverlay.visible{
  background: rgba(0,0,0,.45);
  pointer-events: auto;
}

/* ===== Z-index-uri corecte ===== */
.theme-toggle,
.menu-toggle,
.lang-toggle{ z-index: 1001; } /* vor fi acoperite de overlay */
#nav{ z-index: 1003; }         /* mereu peste overlay */

/* ===== Drawer modern (mobil) ===== */
#nav{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 86vw; max-width: 360px;
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: -24px 0 48px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
  padding-bottom: 76px;        /* spațiu pt. footer */
}
#nav.show{ transform: translateX(0); }

/* header-ul din drawer */
nav .drawer-header{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: var(--header-bg);
  position: sticky; top: 0; z-index: 1;
}
nav .drawer-brand{
  display:flex; align-items:center; gap:10px;
}
nav .drawer-brand img{
  width:36px; height:36px; display:block;
  background:transparent; border:0; padding:0; margin:0;
  box-shadow:none; border-radius:6px;
}
nav .drawer-brand .brand-text strong{
  display:block; font-size:16px; line-height:1.15;
}
nav .drawer-brand .brand-text small{
  display:block; font-size:12px; line-height:1.1; opacity:.85;
}

/* itemurile cu iconițe */
#nav .nav-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  color:var(--header-text); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#nav .nav-item i{ width:18px; text-align:center; opacity:.95; }
#nav .nav-item:hover{ background:rgba(255,255,255,.07); }

/* grup pliant (dacă îl folosești) */
#nav .nav-group{ border-bottom:1px solid rgba(255,255,255,.08); }
#nav .nav-group > summary{
  list-style:none; display:flex; align-items:center; gap:12px;
  padding:14px 16px; cursor:pointer; color:var(--header-text);
}
#nav .nav-group > summary::-webkit-details-marker{ display:none; }
#nav .nav-group > summary .chev{ margin-left:auto; transition:transform .2s ease; opacity:.8; }
#nav .nav-group[open] > summary .chev{ transform:rotate(180deg); }
#nav .group-links{ padding:6px 0 10px 44px; }
#nav .nav-sub-item{
  display:block; padding:8px 16px 8px 0; color:var(--header-text);
  text-decoration:none; opacity:.9;
}
#nav .nav-sub-item:hover{ opacity:1; text-decoration:underline; }

/* puțin spațiu între cap și primul link în drawer (mobil) */
nav .drawer-header + a{ margin-top:8px; }

/* desktop: nav orizontal, fără drawer header/footer și fără iconițe în iteme */
@media (min-width:768px){
  #nav{
    position:static; height:auto; width:auto; max-width:none;
    transform:none; box-shadow:none; overflow:visible; padding-bottom:0;
    background:transparent;
    display:flex !important; flex-direction:row; justify-content:center;
  }
  nav .drawer-header{ display:none; }
  #nav .nav-item{ border:0; padding:8px 12px; border-radius:6px; background:transparent; }
  #nav .nav-item i{ display:none; }
  #nav .nav-item:hover{ background:rgba(255,255,255,.12); }
  nav .drawer-header + a{ margin-top:0; }  /* aliniază „Home” pe desktop */
}

/* ===== Footer simplu cu un singur CTA (Join Telegram) ===== */
/* ===========================
   THEME TOKENS (Light/Dark)
   =========================== */
:root{
  --bg:#ffffff;          --text:#111827;     --muted:#6b7280;
  --border:#e5e7eb;      --surface:#f9fafb;  --card:#ffffff;
  --shadow:0 2px 4px rgba(0,0,0,.05);

  --primary:#1a237e;     --link:#1a237e;

  --header-bg:#283593;   --header-text:#ffffff;

  --banner-bg:#e9f5fc;   --banner-text:#005c8f;  --banner-border:#cce4f3;

  --warn-bg:#ffecb3;     --warn-text:#5d4037;

  --btn-bg:#ffd700;      --btn-text:#000000;

  --bottom-nav-h:40px;
}

[data-theme="dark"]{
  --bg:#0b0f1a;          --text:#e5e7eb;     --muted:#9ca3af;
  --border:#1f2937;      --surface:#111827;  --card:#0f172a;
  --shadow:0 2px 6px rgba(0,0,0,.6);

  --primary:#8ab4f8;     --link:#93c5fd;

  --header-bg:#0a1338;   --header-text:#ffffff;

  --banner-bg:rgba(138,180,248,0.12);
  --banner-text:#9cc8ff; --banner-border:rgba(138,180,248,0.25);

  --warn-bg:#4b3f1d;     --warn-text:#fadd77;

  --btn-bg:#d0b200;      --btn-text:#000000;
}

/* ===========================
   GLOBAL BASE
   =========================== */
html,body{
  background:var(--bg); color:var(--text);
  margin:0; padding:0; line-height:1.6;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--bottom-nav-h);
}
a{ color:var(--link); }
::selection{ background:rgba(90,124,255,.25); }

/* ===========================
   HEADER (static)
   =========================== */
header{
  position:relative;
  background:var(--header-bg);
  color:var(--header-text);
  padding:12px 16px;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
}

/* Titlu + subtitlu – compact */
.logo-container{
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.logo-container span{
  font-weight:600; font-size:18px; color:var(--header-text);
  text-align:center; display:block; margin:0; line-height:1.15;
}
.logo-container div{
  font-size:13px; color:rgba(255,255,255,.9);
  text-align:center; margin:0; line-height:1.15;
}
@media (max-width:480px){
  .logo-container span,.logo-container div{ line-height:1.1; }
}

/* Toggle temă (moon/sun) */
.theme-toggle{
  position:absolute; top:14px; right:52px;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--header-text); cursor:pointer;
  z-index:10001; /* deasupra overlay-ului */
}
.theme-toggle i{ font-size:16px; line-height:1; pointer-events:none; }
.theme-toggle:hover{ background:rgba(0,0,0,.06); }
[data-theme="dark"] .theme-toggle:hover{ background:rgba(255,255,255,.12); }
.theme-toggle:focus{ outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.35); }

/* Hamburger */
.menu-toggle{
  position:absolute; top:14px; right:16px;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:6px; color:var(--header-text); cursor:pointer; z-index:10001;
}
.menu-toggle i{ line-height:1; font-size:18px; transform:translateY(-1px); }

/* Selectoare limbă */
.lang-toggle{
  position:absolute; top:14px; left:16px; z-index:10001;
  display:flex; flex-direction:column; gap:3px;
}
.lang-toggle select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:28px; padding:3px 22px 3px 8px;
  border-radius:6px; border:1px solid rgba(255,255,255,.45);
  background:var(--card)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23283993'><path d='M7 10l5 5 5-5'/></svg>")
    no-repeat right 6px center / 12px 12px;
  color:var(--text); font-size:12px; font-weight:600; line-height:1.2; cursor:pointer;
  width:85px; min-width:auto;
}
@media (min-width:768px){
  .lang-toggle{ flex-direction:row; align-items:center; gap:8px; }
}

/* ===========================
   DRAWER NAV (mobil)
   =========================== */

/* Overlay-ul semi-transparent (sub nav, peste pagină) */
#navOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.38);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:10000; /* sub nav, peste restul */
}
#navOverlay.visible{ opacity:1; pointer-events:auto; }

/* Drawer din dreapta pe mobil */
#nav{
  position:fixed; top:0; right:-300px; height:100dvh;
  width:280px; max-width:85vw;
  display:flex; flex-direction:column;
  background:var(--header-bg); color:var(--header-text);
  box-shadow:-8px 0 24px rgba(0,0,0,.35);
  transition:right .25s ease;
  z-index:10002;
  border-left:1px solid rgba(255,255,255,.08);
  border-top-left-radius:10px; border-bottom-left-radius:10px;
  overflow:hidden;
}
#nav.show{ right:0; }

/* Headerul drawer-ului (logo sus) */
nav .drawer-header{
  display:block;
  padding:14px 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.15);
  background:var(--header-bg);
}
nav .drawer-brand{
  display:flex; align-items:center; gap:10px;
  color:var(--header-text);
}
nav .drawer-brand img{
  width:36px; height:36px;
  display:block; border-radius:6px;
  /* fără “card” – imagine full în box */
  background:transparent; padding:0; border:0;
  object-fit:cover; object-position:center;
}
nav .drawer-brand .brand-text strong{
  display:block; font-size:16px; line-height:1.15;
}
nav .drawer-brand .brand-text small{
  display:block; font-size:12px; line-height:1.1; opacity:.85;
}

/* Linkuri principale din drawer */
nav .nav-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  color:var(--header-text); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.10);
}
nav .nav-item i{ width:22px; text-align:center; opacity:.95; }
nav .nav-item:hover{ background:rgba(0,0,0,.06); }
[data-theme="dark"] nav .nav-item:hover{ background:rgba(255,255,255,.08); }

/* Grup Support (mobil) */
nav .nav-group{ border-top:1px solid rgba(255,255,255,.12); }
nav .nav-group summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; color:var(--header-text);
}
nav .nav-group summary::-webkit-details-marker{ display:none; }
nav .nav-group summary i.fa-headset{ width:22px; text-align:center; opacity:.95; }
nav .nav-group summary .chev{ margin-left:auto; transition:transform .2s ease; opacity:.9; }
nav .nav-group[open] summary .chev{ transform:rotate(180deg); }
nav .group-links{
  display:grid; background:rgba(0,0,0,.04);
}
[data-theme="dark"] nav .group-links{ background:rgba(255,255,255,.04); }
nav .group-links .nav-sub-item{
  display:block; padding:12px 16px 12px 44px;
  color:var(--header-text); text-decoration:none;
  border-top:1px solid rgba(255,255,255,.10);
}
nav .group-links .nav-sub-item:hover{ background:rgba(0,0,0,.06); }
[data-theme="dark"] nav .group-links .nav-sub-item:hover{ background:rgba(255,255,255,.08); }

/* CTA “Join Telegram” la baza drawer-ului (doar mobil) */
nav .page-telegram-bar{
  margin-top:auto;      /* împinge în jos */
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.15);
  background:transparent;
}
nav .page-telegram-bar a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; color:var(--header-text);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px; padding:10px 12px;
}
nav .page-telegram-bar a:hover{
  background:rgba(255,255,255,.10);
}
nav .page-telegram-bar i.fa-telegram{
  font-size:18px; line-height:1; color:var(--header-text);
}

/* Ascunde/arată variantele desktop vs mobil */
.desktop-only{ display:none; }
.mobile-only{ display:block; }

/* ===========================
   NAV – DESKTOP (>=768px)
   =========================== */
@media (min-width:768px){
  /* ascunde drawer-ul, folosește nav orizontal clasic */
  #nav{
    position:static; right:auto; height:auto; width:auto; max-width:none;
    display:flex !important; flex-direction:row; background:transparent;
    box-shadow:none; border:0; border-radius:0; overflow:visible;
  }
  #nav .drawer-header,
  #nav .mobile-only,
  #nav .page-telegram-bar{ display:none !important; } /* CTA doar pe mobil */

  /* linkurile pe un rând */
  nav .nav-item{
    border:0; background:transparent; padding:8px 12px; gap:8px;
    color:var(--header-text);
  }
  nav .nav-item i{ display:none; }  /* ascunde icon-urile pe desktop */

  .desktop-only{ display:inline-flex !important; }
}

/* ===========================
   BANNER (Telegram de sus)
   =========================== */
.top-banner{
  background:var(--banner-bg); color:var(--banner-text);
  text-align:center; padding:10px 16px; font-size:14px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-bottom:1px solid var(--banner-border);
}
.top-banner svg{
  width:18px; height:18px; fill:currentColor; flex:0 0 auto;
}
.top-banner a{ color:inherit; text-decoration:none; }
.top-banner a:hover{ text-decoration:underline; }

/* ===========================
   CONTAINERE / UTILE
   =========================== */
.container{
  max-width:1000px; width:95%;
  margin:1rem auto; padding:1rem;
  background:var(--card); color:var(--text);
  border-radius:10px; box-shadow:var(--shadow); box-sizing:border-box;
  border:1px solid var(--border);
}

/* Pi warning bar */
#piWarningBox{
  background:var(--warn-bg) !important;
  color:var(--warn-text) !important;
}
#piWarningBox a{ color:var(--link) !important; text-decoration:underline !important; }
/* --- FIX: doar mobil — ascunde linkurile desktop-only (Support/Contact) --- */
nav .nav-item.desktop-only{
  display: none !important;
}

/* --- Desktop (>=768px): revino la comportamentul vechi --- */
@media (min-width:768px){
  /* arată din nou linkurile separate pe desktop */
  nav .nav-item.desktop-only{
    display: inline-flex !important;
  }
  /* ascunde grupul combinat (dropdown) pe desktop */
  nav .nav-group.mobile-only{
    display: none !important;
  }
}
/* ===== Drawer header și user chip — mai fin ===== */
nav .drawer-header{
  padding: 10px 12px 8px;
}
nav .drawer-brand{
  gap: 8px;
}
nav .drawer-brand img{
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
nav .drawer-brand .brand-text strong{
  font-size: 14px;
  line-height: 1.15;
}
nav .drawer-brand .brand-text small{
  font-size: 11px;
  line-height: 1.1;
  opacity: .8;
}

nav .drawer-user{
  padding: 5px 7px;
  font-size: 12px;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
[data-theme="light"] nav .drawer-user{
  background: rgba(255,255,255,.10);
  border-color: rgba(0,0,0,.06);
}

/* ===== Auth actions (Login / My account / Logout) — compacte, fără icon ===== */
#drawerAuthActions{
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px;
}
#drawerAuthActions.single{ grid-template-columns: 1fr; }

/* Variante fără icon (btn-auth) */
#drawerAuthActions .btn-auth{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: var(--header-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
#drawerAuthActions .btn-auth:hover{ background: rgba(255,255,255,.08); }
#drawerAuthActions .btn-auth:active{ transform: translateY(1px); }
[data-theme="light"] #drawerAuthActions .btn-auth{
  border-color: rgba(0,0,0,.10);
}
[data-theme="light"] #drawerAuthActions .btn-auth:hover{
  background: rgba(0,0,0,.04);
}

/* Buton primar (Login) mai discret */
#drawerAuthActions .btn-primary{
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: transparent;
}
#drawerAuthActions .btn-primary:hover{ filter: brightness(.97); }

/* Dacă, din JS-ul vechi, intră varianta cu .nav-item + icon,
   o facem la fel de fină și ascundem iconițele. */
#drawerAuthActions .nav-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: var(--header-text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
#drawerAuthActions .nav-item:hover{ background: rgba(255,255,255,.08); }
#drawerAuthActions .nav-item i{ display: none !important; } /* ascunde icon */
[data-theme="light"] #drawerAuthActions .nav-item{
  border-color: rgba(0,0,0,.10);
}
[data-theme="light"] #drawerAuthActions .nav-item:hover{
  background: rgba(0,0,0,.04);
}

/* Doar mobil (pe desktop e ascuns oricum) */
@media (min-width:768px){
  #drawerAuthActions{ display: none !important; }
}