/* =========================================================================
   NAVIGAREA — bara de sus, bara de jos (telefon), foaia „Cont / Mai mult”,
   bara laterală de administrare.
   Datele vin dintr-o singură definiție: utils/navigatie.py.
   Culorile și dimensiunile citesc token-urile --is-* (tokens.css), cu valori
   de rezervă, ca fișierul să funcționeze și fără ele.
   Desktop = ≥ 992px. Sub 992px: bara de jos + foaia.
   ========================================================================= */

/* ---------- Bara de sus ---------- */
.is-topbar { gap: 16px; z-index: var(--is-z-topbar, 1020); }
.is-topbar .top-bar-left { min-width: 0; }
.is-topbar__links { display: flex; align-items: center; gap: 4px; }
.is-topbar__link,
.is-topbar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 12px; border-radius: var(--is-radius-sm, 8px);
  color: rgba(255,255,255,.86); text-decoration: none; font-weight: 600; font-size: 14.5px;
  white-space: nowrap; background: transparent; border: 0; font-family: inherit; cursor: pointer;
}
.is-topbar__link:hover, .is-topbar__btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.is-topbar__link.is-active { color: var(--is-gold-500, #EABE33); }
.is-topbar__link:focus-visible, .is-topbar__btn:focus-visible,
.is-bottomnav__item:focus-visible, .is-sheet a:focus-visible, .is-sheet button:focus-visible,
.is-sheet summary:focus-visible {
  outline: 3px solid var(--is-gold-500, #EABE33); outline-offset: 2px;
}
.is-topbar__link--accent { color: var(--is-gold-500, #EABE33); }
.is-topbar__btn--primary {
  background: var(--is-gold-500, #EABE33); color: var(--is-navy-900, #0b1b45);
}
.is-topbar__btn--primary:hover { background: var(--is-gold-600, #d4a82e); color: var(--is-navy-900, #0b1b45); }
.is-topbar__right { display: flex; align-items: center; gap: 6px; flex: none; }
.is-topbar .badge { font-size: .62rem; }
.is-topbar__bell { position: relative; font-size: 18px; }
.is-topbar__bell .badge { position: absolute; top: 2px; right: 0; }
.is-topbar .dropdown-menu { min-width: 240px; max-height: 75vh; overflow-y: auto; }
.is-topbar .dropdown-header { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.is-topbar .dropdown-item { display: flex; align-items: center; gap: 8px; }
.is-topbar .dropdown-item .badge { margin-left: auto; }
.is-topbar .dropdown-item.is-active { font-weight: 700; }

/* Căutarea de ecrane (personal) */
.is-topbar__search { position: relative; }
.is-topbar__search input {
  width: 210px; height: 38px; border-radius: var(--is-radius-pill, 999px);
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  color: #fff; padding: 0 14px 0 34px; font-size: 14px;
}
.is-topbar__search input::placeholder { color: rgba(255,255,255,.6); }
.is-topbar__search input:focus { outline: 3px solid var(--is-gold-500, #EABE33); outline-offset: 1px; background: rgba(255,255,255,.14); }
.is-topbar__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.6); pointer-events: none; }

.is-only-mobile { display: none !important; }

/* Lățimi intermediare: păstrăm esențialul, ascundem ce e și în foaie/footer */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .is-topbar .logo span { display: none; }
  .is-topbar__link, .is-topbar__btn { padding: 8px 9px; font-size: 14px; }
  .is-topbar__hide-md { display: none !important; }
  .is-topbar__search input { width: 150px; }
}

@media (max-width: 991.98px) {
  .is-topbar__links, .is-only-desktop { display: none !important; }
  .is-only-mobile { display: inline-flex !important; }
  .is-topbar__right { gap: 2px; }
  .is-topbar__btn { min-width: 44px; min-height: 44px; justify-content: center; font-size: 20px; }
}

/* ---------- Bara de jos (telefon) ---------- */
.is-bottomnav, .is-bottomnav-spacer { display: none; }

@media (max-width: 991.98px) {
  /* --is-fab-bottom se redeclară aici: o variabilă definită pe :root își
     rezolvă var()-urile acolo, deci n-ar vedea offsetul schimbat pe body. */
  body.is-has-bottomnav {
    --is-bottomnav-offset: var(--is-bottomnav-h, 64px);
    --is-fab-bottom: calc(var(--is-bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  .is-bottomnav {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--is-z-bottomnav, 1020);
    /* Bleumarin, ca bara de sus: pe paginile albe meniul se pierdea în fond
       (cerut pe 6 nov 2026). Tabul activ e auriu, la fel ca în header. */
    background: var(--is-navy-900, #0b1b45);
    border-top: 1px solid rgba(234, 190, 51, .25);
    box-shadow: 0 -6px 18px rgba(11, 27, 69, .22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .is-bottomnav ul {
    display: flex; margin: 0; padding: 0; list-style: none;
    height: var(--is-bottomnav-h, 64px);
  }
  .is-bottomnav li { flex: 1 1 0; min-width: 0; display: flex; }
  .is-bottomnav__item {
    position: relative; flex: 1; min-width: 44px; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 2px; border: 0; background: transparent; font-family: inherit;
    color: rgba(255, 255, 255, .72); text-decoration: none; cursor: pointer;
    font-size: 11px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .is-bottomnav__item i { font-size: 21px; line-height: 1; }
  .is-bottomnav__label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px;
  }
  .is-bottomnav__item:hover { color: #fff; }
  .is-bottomnav__item.is-active { color: var(--is-gold-500, #EABE33); }
  .is-bottomnav__item.is-active::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--is-gold-500, #EABE33);
  }
  .is-bottomnav__item.is-active i { color: var(--is-gold-500, #EABE33); }
  .is-bottomnav__badge {
    position: absolute; top: 5px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--is-danger, #dc2626); color: #fff; font-size: 10.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  }

  /* Loc sub conținut, ca bara să nu acopere ultimul rând al paginii */
  .is-bottomnav-spacer {
    display: block;
    height: calc(var(--is-bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px));
  }

  /* Elementele plutitoare urcă deasupra barei */
  body.is-has-bottomnav .chat-widget-btn,
  body.is-has-bottomnav .bug-report-btn {
    bottom: calc(var(--is-bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
  body.is-has-bottomnav #cookieBanner {
    bottom: calc(var(--is-bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.is-has-bottomnav .promo-adulti {
    bottom: calc(var(--is-bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
  body.is-has-bottomnav:has(.chat-widget-btn) .promo-adulti {
    bottom: calc(var(--is-bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px) + 84px) !important;
  }
}

/* ---------- Foaia „Cont” / „Mai mult” ---------- */
.is-sheet[hidden] { display: none !important; }
.is-sheet {
  position: fixed; inset: 0; z-index: var(--is-z-drawer, 1045);
  display: flex; align-items: flex-end; justify-content: center;
}
.is-sheet__backdrop {
  position: absolute; inset: 0; background: var(--is-backdrop, rgba(11, 27, 69, .5));
}
.is-sheet__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--is-surface, #fff); color: var(--is-text, #0f172a);
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.2);
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  animation: is-sheet-in var(--is-dur, 200ms) var(--is-ease, ease-out);
}
.is-sheet__panel:focus { outline: none; }
@keyframes is-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-sheet__panel { animation: none; } }
@media (min-width: 992px) {
  .is-sheet { align-items: center; }
  .is-sheet__panel { border-radius: 16px; max-height: 80vh; }
}
.is-sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--is-slate-300, #cbd5e1); margin: 4px auto 8px; }
.is-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; }
.is-sheet__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--is-heading, #0b1b45); }
.is-sheet__sub { font-size: 12.5px; color: var(--is-text-muted, #64748b); font-weight: 600; }
.is-sheet__close {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--is-slate-100, #f1f5f9);
  color: var(--is-slate-700, #334155); font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
}
.is-sheet__search {
  width: 100%; height: 44px; border-radius: var(--is-radius-sm, 8px);
  border: 1px solid var(--is-border, #e2e8f0); padding: 0 12px; margin: 4px 0 10px; font-size: 15px;
}
.is-sheet__group { border-top: 1px solid var(--is-border, #e2e8f0); padding: 6px 0; }
.is-sheet__group:first-of-type { border-top: 0; }
.is-sheet__group > summary, .is-sheet__group > h3 {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  color: var(--is-text-muted, #64748b); cursor: pointer; list-style: none;
}
.is-sheet__group > summary::-webkit-details-marker { display: none; }
.is-sheet__group > summary::after {
  content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: 13px; transition: transform .15s;
}
.is-sheet__group[open] > summary::after { transform: rotate(180deg); }
.is-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
@media (max-width: 359.98px) { .is-sheet__list { grid-template-columns: 1fr; } }
.is-sheet__link {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px;
  border-radius: var(--is-radius-sm, 8px); color: var(--is-text, #0f172a); text-decoration: none;
  font-weight: 600; font-size: 14.5px; line-height: 1.2; background: transparent; border: 0; width: 100%;
  text-align: left; font-family: inherit;
}
.is-sheet__link i { font-size: 18px; color: var(--is-navy-700, #1e3a8a); flex: none; width: 20px; text-align: center; }
.is-sheet__link:hover { background: var(--is-slate-100, #f1f5f9); color: var(--is-navy-900, #0b1b45); }
.is-sheet__link.is-active { background: rgba(234,190,51,.16); }
.is-sheet__link .badge { margin-left: auto; }
.is-sheet__link--accent, .is-sheet__link--accent i { color: var(--is-gold-700, #a87f0c); }
.is-sheet__link--danger, .is-sheet__link--danger i { color: var(--is-danger, #dc2626); }
.is-sheet__spaces { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.is-sheet__space {
  min-height: 44px; padding: 8px 14px; border-radius: var(--is-radius-pill, 999px);
  border: 1px solid var(--is-border-strong, #cbd5e1); background: var(--is-surface, #fff);
  font-weight: 700; font-size: 14px; color: var(--is-navy-900, #0b1b45);
}
.is-sheet__space[aria-current="true"] {
  background: var(--is-navy-900, #0b1b45); color: #fff; border-color: var(--is-navy-900, #0b1b45);
}
.is-sheet__langs { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 8px; }
.is-sheet__lang {
  min-width: 52px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--is-radius-sm, 8px); border: 1px solid var(--is-border-strong, #cbd5e1);
  color: var(--is-navy-900, #0b1b45); font-weight: 700; text-decoration: none;
}
.is-sheet__lang[aria-current="true"] { background: var(--is-gold-500, #EABE33); border-color: var(--is-gold-500, #EABE33); }
.is-sheet__legal { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 0 4px; font-size: 13px; }
.is-sheet__legal a { color: var(--is-text-muted, #64748b); min-height: 32px; display: inline-flex; align-items: center; }
.is-sheet__empty { color: var(--is-text-muted, #64748b); font-size: 14px; padding: 8px 0; }
body.is-sheet-open { overflow: hidden; }

/* ---------- Foaia „Mai mult” / „Cont”, bleumarin ca headerul și bara de jos ----------
   Cerut pe 6 nov 2026: meniul de pe telefon să aibă aceeași culoare ca restul
   navigării. Textul alb, iconițele aurii, tabul/linkul activ pe auriu. */
.is-sheet__panel { background: var(--is-navy-900, #0b1b45); color: #fff; box-shadow: 0 -8px 30px rgba(0,0,0,.35);
                  border-top: 2px solid var(--is-gold-500, #EABE33); }
.is-sheet__handle { background: rgba(255,255,255,.28); }
.is-sheet__title { color: #fff; }
.is-sheet__sub { color: rgba(255,255,255,.65); }
.is-sheet__close { background: rgba(255,255,255,.10); color: #fff; }
.is-sheet__close:hover { background: rgba(255,255,255,.18); }
.is-sheet__search { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.is-sheet__search::placeholder { color: rgba(255,255,255,.55); }
.is-sheet__search:focus { outline: 2px solid var(--is-gold-500, #EABE33); outline-offset: 1px; border-color: transparent; }
.is-sheet__group { border-top-color: rgba(255,255,255,.12); }
.is-sheet__group > summary, .is-sheet__group > h3 { color: rgba(255,255,255,.62); }
.is-sheet__link { color: #fff; }
.is-sheet__link i { color: var(--is-gold-500, #EABE33); }
.is-sheet__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.is-sheet__link.is-active { background: rgba(234,190,51,.18); color: var(--is-gold-500, #EABE33); }
.is-sheet__link--accent, .is-sheet__link--accent i { color: var(--is-gold-500, #EABE33); }
.is-sheet__link--danger, .is-sheet__link--danger i { color: #fca5a5; }
.is-sheet__space { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.is-sheet__space[aria-current="true"] { background: var(--is-gold-500, #EABE33); border-color: var(--is-gold-500, #EABE33); color: var(--is-navy-900, #0b1b45); }
.is-sheet__lang { border-color: rgba(255,255,255,.28); color: #fff; }
.is-sheet__lang[aria-current="true"] { color: var(--is-navy-900, #0b1b45); }
.is-sheet__legal a { color: rgba(255,255,255,.62); }
.is-sheet__empty { color: rgba(255,255,255,.62); }
.is-sheet a:focus-visible, .is-sheet button:focus-visible, .is-sheet summary:focus-visible { outline-color: var(--is-gold-500, #EABE33); }

/* ---------- Bara laterală (grupuri pliabile) ---------- */
.console-rail .rail-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.console-rail .rail-sec > summary::-webkit-details-marker { display: none; }
.console-rail .rail-sec > summary::after {
  content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: 10px; transition: transform .15s;
}
.console-rail .rail-sec[open] > summary::after { transform: rotate(180deg); }
.console-rail .rail-sec > summary:hover { color: #fff; }
.console-rail .rail-sec > summary:focus-visible { outline: 2px solid var(--is-gold-500, #EABE33); outline-offset: -2px; border-radius: 6px; }
.console-rail .rail-sec .badge-sum { font-size: .6rem; margin-left: 4px; }
.rail-collapsed .console-rail .rail-sec > summary { display: none; }

/* ---------- Panoul de notificări (clopoțelul) ----------
   Pe telefon/tabletă: foaie de jos, ca „Mai mult”. Pe calculator: panou sub
   clopoțel. Se închide cu ✕, atingere pe fundal sau Esc. */
.is-notif[hidden] { display: none !important; }
.is-notif { position: fixed; inset: 0; z-index: var(--is-z-drawer, 1045); display: flex; align-items: flex-end; justify-content: center; }
.is-notif__backdrop { position: absolute; inset: 0; background: rgba(11, 27, 69, .45); }
.is-notif__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column;
  background: var(--is-surface, #fff); color: var(--is-text, #0f172a);
  border-radius: 18px 18px 0 0; border-top: 2px solid var(--is-gold-500, #EABE33);
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  animation: is-sheet-in var(--is-dur, 200ms) var(--is-ease, ease-out);
}
.is-notif__panel:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .is-notif__panel { animation: none; } }
.is-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 8px; }
.is-notif__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--is-heading, #0b1b45); }
.is-notif__close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--is-slate-100, #f1f5f9); color: var(--is-slate-700, #334155); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.is-notif__body { overflow-y: auto; min-height: 60px; }
.is-notif__list { list-style: none; margin: 0; padding: 0; }
.is-notif__item + .is-notif__item { border-top: 1px solid var(--is-border, #e2e8f0); }
.is-notif__item form { margin: 0; }
.is-notif__btn { display: grid; gap: 2px; width: 100%; text-align: left; background: transparent; border: 0; padding: 12px 4px; min-height: 48px; font-family: inherit; color: inherit; border-radius: 8px; }
.is-notif__btn:hover { background: var(--is-slate-50, #f8fafc); }
.is-notif__t { font-weight: 700; color: var(--is-heading, #0b1b45); }
.is-notif__b { color: var(--is-text-muted, #64748b); font-size: var(--is-fs-sm, 14px); }
.is-notif__d { color: var(--is-text-muted, #64748b); font-size: var(--is-fs-xs, 12px); }
.is-notif__empty { color: var(--is-text-muted, #64748b); padding: 16px 0; margin: 0; }
.is-notif__foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--is-border, #e2e8f0); }
.is-notif__foot form { margin: 0; }
body.is-notif-open { overflow: hidden; }
/* De la tabletă în sus (768px), panoul apare sub clopoțel, ca pe calculator
   (decizia din 6 nov 2026); foaia de jos rămâne doar pe telefon. */
@media (min-width: 768px) {
  .is-notif { align-items: flex-start; justify-content: flex-end; padding: calc(var(--is-topbar-h, 70px) + 6px) 24px 0; }
  .is-notif__backdrop { background: transparent; }
  .is-notif__panel { width: 400px; max-height: 70vh; border-radius: 14px; border-top: 0; box-shadow: 0 16px 40px rgba(11,27,69,.22); }
  body.is-notif-open { overflow: auto; }
}