/* Tema "default" - bara de navigare orizontala sub header (desktop) + flyout-ul "Meniu categorii
   (automat)" - vezi public/module/nav_bar/nav_bar.php si public/assets/js/nav_bar.js. Ascunsa pe
   mobil (sub 860px, acelasi breakpoint ca hamburger-ul din header) - pe mobil categoriile raman
   accesibile din meniul hamburger, ca <details> imbricate (vezi header.css). */

.pub-navbar {
    background: var(--pub-navbar-bg);
    border-bottom: 1px solid var(--pub-border);
}

.pub-navbar-inner {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pub-navbar-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pub-text);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.pub-navbar-link:hover {
    color: var(--pub-accent);
    text-decoration: none;
}

/* Liniuta verticala de separare intre elementele barei (linkuri simple + butonul "Produse") -
   pseudo-element cu gradient (fade sus/jos), nu border simplu, ca sa nu taie brusc din chenar.
   Una intre fiecare 2 elemente (::before pe toate in afara de primul) + una dupa ultimul (::after) -
   niciuna inainte de primul. Fiecare element are nevoie de position:relative ca sa poata pozitiona
   pseudo-elementul absolut fata de el insusi. */
.pub-navbar-inner > * {
    position: relative;
}

.pub-navbar-inner > * + *::before,
.pub-navbar-inner > *:last-child::after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 70%, transparent);
}

.pub-navbar-inner > * + *::before {
    left: 0;
}

.pub-navbar-inner > *:last-child::after {
    right: 0;
}

.pub-navbar-mega-icon {
    margin-right: 8px;
    flex-shrink: 0;
}

.pub-navbar-mega {
    position: relative;
}

.pub-navbar-mega-panel {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* --pub-navbar-panel-bg (Teme > Bara de navigare - transparenta) - implicit egala cu --pub-bg
       (vezi base_color.css), suprascrisa cu un rgba() calculat server-side cand adminul seteaza o
       transparenta sub 100% (theme.php, theme_colors_style_html()). */
    background: var(--pub-navbar-panel-bg);
    border: 1px solid var(--pub-border);
    border-top: none;
    border-radius: 0 0 var(--pub-radius) var(--pub-radius);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
    z-index: 200;
    min-width: 850px;
    max-width: min(92vw, 1100px);
}

.pub-navbar-mega.is-open .pub-navbar-mega-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Efect de aparitie (Teme > Bara de navigare) - fara clasa navbar-efect-* (implicit "Fara animatie")
   comutarea ramane instanta (fara proprietate "transition"), identic cu vechiul display:none/flex.
   "visibility" e intarziata cu delay DOAR la inchidere (0s linear 0.18s), ca panoul sa nu devina
   invizibil/neinteractiv brusc, taind animatia de opacity/transform la jumatate. */
.navbar-efect-fade .pub-navbar-mega-panel {
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.navbar-efect-fade .pub-navbar-mega.is-open .pub-navbar-mega-panel {
    transition: opacity 0.18s ease;
}

.navbar-efect-slide .pub-navbar-mega-panel {
    transform: translateY(-10px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.navbar-efect-slide .pub-navbar-mega.is-open .pub-navbar-mega-panel {
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.navbar-efect-scale .pub-navbar-mega-panel {
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.navbar-efect-scale .pub-navbar-mega.is-open .pub-navbar-mega-panel {
    transform: scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.pub-navbar-mega-list1 {
    flex: 0 0 240px;
    border-right: 1px solid var(--pub-border);
    padding: 8px 0;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Bara de scroll subtire, ca la #category-tree-card .pub-category-tree (filtre.css) - Firefox. */
    scrollbar-width: thin;
    scrollbar-color: var(--pub-header-footer-border) transparent;
}

/* Acelasi aspect subtire pt Chrome/Edge/Safari (nu au scrollbar-width/-color). */
.pub-navbar-mega-list1::-webkit-scrollbar {
    width: 6px;
}

.pub-navbar-mega-list1::-webkit-scrollbar-track {
    background: transparent;
}

.pub-navbar-mega-list1::-webkit-scrollbar-thumb {
    background: var(--pub-header-footer-border);
    border-radius: 999px;
}

.pub-navbar-mega-list1-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--pub-text);
}

/* Liniuta decorativa cu fade stanga->dreapta, la baza itemului - permanenta (acelasi tipar ca
   separatoarele verticale din bara principala de mai sus, dar orizontal); la hover/activ se
   schimba doar fundalul (vezi mai jos), liniuta ramane neschimbata. */
.pub-navbar-mega-list1-item::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 1px;
    background: linear-gradient(to right, var(--pub-accent), transparent);
}

/* Contor de produse (Setari > Teme > Bara de navigare) - bulina rotunda, transparenta, doar cu
   bordura (nu fundal plin), ca sa ramana discreta langa numele categoriei. */
.pub-navbar-mega-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: var(--pub-header-footer-bg);
    color: var(--pub-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.pub-navbar-mega-list1-item:hover,
.pub-navbar-mega-list1-item.active {
    background: var(--pub-surface);
    color: var(--pub-accent);
    text-decoration: none;
}

.pub-navbar-mega-arrow {
    color: var(--pub-accent);
    font-size: 25px;
    padding: 0px;
    line-height: 1px;
}

.pub-navbar-mega-list2 {
    flex: 1;
    padding: 16px 24px;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--pub-header-footer-border) transparent;
}

.pub-navbar-mega-list2::-webkit-scrollbar {
    width: 6px;
}

.pub-navbar-mega-list2::-webkit-scrollbar-track {
    background: transparent;
}

.pub-navbar-mega-list2::-webkit-scrollbar-thumb {
    background: var(--pub-header-footer-border);
    border-radius: 999px;
}

.pub-navbar-mega-list2-panel {
    display: none;
}

.pub-navbar-mega-list2-panel.active {
    display: block;
}

.pub-navbar-mega-links {
    column-count: 3;
    /* Impreuna cu column-count (setat inline din PHP, dupa Teme > Bara de navigare), browserul
       foloseste automat MAI PUTINE coloane decat cele alese daca nu incap la aceasta latime minima -
       fara asta, un titlu lung ar fi fortat sa se rupa pe 2 randuri intr-o coloana prea ingusta. */
    column-width: 190px;
    column-gap: 24px;
}

.pub-navbar-mega-links a {
    position: relative;
    display: block;
    padding: 6px 8px;
    margin: 0 -8px;
    font-size: 14px;
    color: var(--pub-text);
    break-inside: avoid;
    border-radius: var(--pub-radius);
}

/* Aceeasi liniuta cu fade, permanenta, ca la categoriile din Lista 1 (.pub-navbar-mega-list1-item) -
   la hover se schimba doar fundalul (vezi mai jos), liniuta ramane neschimbata. */
.pub-navbar-mega-links a::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 2px;
    height: 1px;
    background: linear-gradient(to right, var(--pub-accent), transparent);
}

.pub-navbar-mega-links a:hover {
    background: var(--pub-surface);
    color: var(--pub-accent);
}

.pub-navbar-mega-empty-link {
    display: inline-block;
    font-weight: 600;
    color: var(--pub-accent);
}

/* Subcategorie cu propriile ei subcategorii (ex. Fete > Rochite, Accesorii...) - grupate sub
   titlul ei in loc sa apara plat, amestecate cu surorile fara copii. */
.pub-navbar-mega-group {
    break-inside: avoid;
    margin-bottom: 8px;
}

.pub-navbar-mega-group-title {
    font-weight: 700;
}

.pub-navbar-mega-links a.pub-navbar-mega-subitem {
    padding-left: 12px;
    font-size: 13px;
}

/* Grup imbricat intr-un alt grup (categorie la a 3-a, a 4-a... adancime) - indentarea se
   acumuleaza automat, fiecare nivel adaugand 12px fata de parintele lui direct. */
.pub-navbar-mega-group .pub-navbar-mega-group {
    padding-left: 12px;
    margin-top: 4px;
}

/* Flyout simplu (o singura lista de linkuri) pt elementele de meniu "Categorie info" - vezi
   render_navbar_info_category_menu() din nav_bar.php. Suprascrie latimea/layout-ul mega-panoului
   de produse (mult mai lat, cu 2 coloane), care nu are sens pt o mana de pagini info. */
.pub-navbar-mega--simple .pub-navbar-mega-panel {
    display: block;
    min-width: 220px;
    max-width: 320px;
}

.pub-navbar-mega-panel--simple {
    padding: 8px 0;
}

.pub-navbar-mega-panel--simple a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--pub-text);
}

.pub-navbar-mega-panel--simple a:hover {
    background: var(--pub-surface);
    color: var(--pub-accent);
    text-decoration: none;
}

@media (max-width: 860px) {
    .pub-navbar {
        display: none;
    }
}

/* Categorii pe mobil - meniu "drill-down" pe panouri in meniul hamburger din header (vezi
   header.php pt markup si .pub-header-nav-panel* din header.css pt afisarea unui singur panou
   pe rand). La un click pe o categorie cu subcategorii, panoul ei devine singurul vizibil, cu
   un buton "inapoi" sus - in loc de acordeon cu <details> imbricate (categoriile se inghesuiau
   greu de citit pe ecrane mici cu acordeonul). */
.pub-header-nav-arrow {
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1;
    padding: 8px;
    margin: -8px;
    color: var(--pub-text-muted);
}

.pub-header-nav-panel-back {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 0 14px;
    margin-bottom: 6px;
    border: none;
    border-bottom: 1px solid var(--pub-border);
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--pub-text);
    cursor: pointer;
    text-align: left;
}

.pub-header-nav-back-arrow {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--pub-text-muted);
}

.pub-header-nav a.pub-header-nav-view-all {
    font-weight: 600;
    color: var(--pub-accent);
}