/* Tema "default" - modul Header. Mutat integral din public/assets/css/base.css: acestea sunt
   proprietati de STRUCTURA/LAYOUT ale barei de navigare (inaltime, sticky, latimi dropdown-uri),
   nu doar culori - o alta tema poate vrea o bara mai ingusta/alt aspect, deci trebuie sa poata avea
   propriul header.css, nu sa impartaseasca unul singur global din afara sistemului de teme. */

/* Header + bara de navigare (.pub-navbar, vezi nav-bar.css) blocate impreuna la derulare - un
   singur container sticky (vezi layout_top.php), nu fiecare separat. Daca doar headerul ar fi
   sticky si bara ar ramane in flow normal, la scroll bara ar urca dedesubtul headerului fix, iar
   flyout-ul "Produse" (ancorat de pozitia CURENTA a barei in document) ar aparea decalat/acoperit
   de header in loc sa ramana aliniat corect sub bara vizibila. */
.pub-sticky-header-group {
    position: sticky;
    top: 0;
    z-index: 300;
}

/* Ancorele de pe pagina (#modul-X de la tipul de destinatie "Modul" din meniu, orice
   #ancora_custom) trebuie sa lase loc pt headerul+bara sticky de mai sus, altfel elementul tinta
   ajunge ascuns sub ele. --pub-sticky-offset e calculata dinamic in JS (vezi scroll_offset.js,
   inaltimea reala variaza intre mobil/desktop si dupa continut), cu fallback 0 daca JS nu a rulat
   inca (nu strica nimic, doar lasa un scroll usor imperfect pana se calculeaza). */
html {
    scroll-padding-top: var(--pub-sticky-offset, 0px);
}

.pub-header {
    background: var(--pub-header-footer-bg);
    border-bottom: 2px solid var(--pub-accent);
}

/* NU mai exista margin negativ aici (0 -15px) ca sa "anuleze" padding-ul lateral al body-ului pe
   mobil - acel padding e deja dezactivat direct in base.css (comentat), deci acest margin negativ
   ramasese orfan, fara nimic de compensat, si intindea .pub-header/.pub-mobile-logo-bar cu 15px mai
   lat decat ecranul pe fiecare parte. Combinat cu .pub-sticky-header-group (position:sticky), asta
   producea exact bug-ul raportat: randul cu iconitele disparea la scroll (flex-wrap-ul calcula
   latimea disponibila dupa cutia mai lata decat viewport-ul, nu dupa ce se vede efectiv). */

/* Bara cu logo de pe mobil (render_mobile_logo_bar(), vezi header.php) - element SEPARAT, in afara
   containerului sticky (.pub-sticky-header-group din layout_top.php), ca sa se deruleze normal cu
   pagina. Ascunsa pe desktop (unde logo-ul ramane pe randul sticky normal, in .pub-header-inner). */
.pub-mobile-logo-bar {
    display: none;
    background: var(--pub-header-footer-bg);
    padding: 10px 16px;
}

.pub-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 16px;
}

.pub-header-brand {
    font-weight: 700;
    font-size: 20px;
    color: var(--pub-text);
    text-decoration: none;
}

.pub-header-brand img {
    max-height: 72px;
    display: block;
}

/* Ascuns implicit (desktop) - bara noua de sub header (.pub-navbar, vezi nav-bar.css) preia rolul
   de navigare vizibila acolo; acest meniu ramane doar sertarul de pe mobil (redevine vizibil in
   media query-ul de la 860px mai jos, ca "drawer" glisant). */
.pub-header-nav {
    display: none;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1;
}

.pub-header-nav a {
    color: var(--pub-text);
    font-size: 14px;
    font-weight: 500;
}

/* Meniul mobil (hamburger + drawer lateral) - ascuns implicit pe desktop, vezi
   @media (max-width: 860px) mai jos si public/assets/js/header.js pt logica de deschidere. */

.pub-header-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.pub-header-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--pub-text);
    border-radius: 2px;
}

.pub-header-nav-backdrop {
    display: none;
}

.pub-header-nav-close {
    display: none;
}

.pub-header-search {
    position: relative;
    max-width: 240px;
    width: 100%;
    /* Impinge cautarea+contul/favorite/cos spre dreapta - rol preluat de aici, nu de .pub-header-nav
       (acum ascuns pe desktop, vezi mai sus), care avea flex:1 si facea asta inainte. */
    margin-left: auto;
}

.pub-header-search-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--pub-accent);
    border-radius: 999px;
    background: var(--pub-bg);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Stare de focus proprie (nu inelul albastru implicit al browserului) - aceeasi culoare ca
   bordura, doar mai accentuata, ca sa ramana coerenta cu header-ul/bara de navigare. */
.pub-header-search-box:focus-within {
    border-color: var(--pub-accent);
    /* Fallback pt browsere fara color-mix() - inel plin; browserele noi suprascriu cu varianta
       transparenta de mai jos (ultima declaratie valida pt aceeasi proprietate castiga). */
    box-shadow: 0 0 0 3px var(--pub-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pub-accent) 40%, transparent);
}

.pub-header-search input {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 8px 14px;
    font-size: 13px;
    width: 100%;
    color: var(--pub-text);
    background: transparent;
}

.pub-header-search button {
    border: none;
    background: transparent;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-text-muted);
    transition: color 0.15s ease;
}

.pub-header-search button:hover {
    color: var(--pub-accent);
}

.pub-header-search button img {
    width: 16px;
    height: 16px;
}

.pub-header-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: var(--pub-bg);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 50;
    overflow: hidden;
}

.pub-header-search-heading {
    padding: 10px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pub-text-muted);
}

.pub-header-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    color: var(--pub-text);
}

.pub-header-search-item:hover {
    background: var(--pub-surface);
    text-decoration: none;
}

.pub-header-search-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
}

.pub-header-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-header-search-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.pub-header-search-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
    text-align: right;
}

.pub-header-search-price-old {
    font-size: 11px;
    color: var(--pub-text-muted);
    text-decoration: line-through;
}

.pub-header-search-price-final {
    font-size: 14px;
    font-weight: 700;
    color: var(--pub-text);
    white-space: nowrap;
}

.pub-header-search-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub-header-search-sku {
    font-size: 12px;
    color: var(--pub-text-muted);
}

.pub-header-search-all {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid var(--pub-border);
    color: var(--pub-accent);
}

.pub-header-search-all:hover {
    background: var(--pub-surface);
    text-decoration: none;
}

.pub-cart-link,
.pub-header-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--pub-text);
    white-space: nowrap;
}

.pub-cart-link img,
.pub-header-account img,
.pub-header-heart-icon {
    width: 25px;
    height: 25px;
}

/* Inima de la Favorite - SVG inline (nu <img>, ca la celelalte iconite din header), ca sa poata
   folosi culoarea temei (currentColor) in loc de un fisier static cu culoare fixa (vezi heart.svg,
   care avea culoarea codata direct in fisier - trebuia editat manual la fiecare schimbare de tema). */
.pub-header-heart-icon {
    color: var(--pub-accent);
}

.pub-cart-badge {
    background: var(--pub-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Dropdown-uri hover pt cont/favorite/cos din header - vezi render_header() din header.php */

.pub-header-dropdown {
    position: relative;
}

/* Sagetuta centrata pe butonul-declansator (nu pe panou, care e mult mai lat si aliniat dreapta) -
   pseudo-elemente pe wrapper (latimea lui = latimea link-ului), nu pe panou. Doar pe dropdown-urile
   care chiar au un panou de aratat (--has-panel), ca sa nu apara o sageata orfana la un vizitator
   neautentificat (fara panou de cont). Doua triunghiuri suprapuse (tehnica standard de "bula cu coada
   conturata"): unul mai mare, culoarea bordurii, in spate; unul cu 1px mai mic, culoarea fundalului,
   in fata si cu varful cu 1px mai adanc - asa acopera exact segmentul de bordura al panoului de sub el,
   iar restul triunghiului mare ramane vizibil ca un contur fin, continuu cu bordura panoului. */
.pub-header-dropdown--has-panel::before {
    content: '';
    position: absolute;
    top: calc(100% - 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--pub-border);
    z-index: 51;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.pub-header-dropdown--has-panel::after {
    content: '';
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--pub-bg);
    z-index: 52;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.pub-header-dropdown--has-panel:hover::before,
.pub-header-dropdown--has-panel:hover::after {
    opacity: 1;
    visibility: visible;
}

.pub-header-dropdown-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--pub-bg);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 50;
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}

.pub-header-dropdown:hover .pub-header-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.pub-account-dropdown-panel {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 200px;
    padding: 8px;
}

.pub-account-dropdown-panel a {
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--pub-text);
    font-size: 14px;
}

.pub-account-dropdown-panel a:hover {
    background: var(--pub-surface);
    text-decoration: none;
}

.pub-header-dropdown-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pub-accent);
    text-align: center;
    margin-bottom: 10px;
    padding: 0 10px 8px;
}

.pub-account-dropdown-panel .pub-header-dropdown-heading {
    text-align: left;
    color: var(--pub-text);
    font-size: 14px;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid var(--pub-border);
}

.pub-header-dropdown-empty {
    color: var(--pub-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
}

.pub-header-dropdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pub-border);
}

.pub-header-dropdown-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
}

.pub-header-dropdown-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-header-dropdown-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pub-header-dropdown-name {
    font-size: 13px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub-header-dropdown-qty {
    font-size: 12px;
    color: var(--pub-text-muted);
}

.pub-header-dropdown-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--pub-accent);
    white-space: nowrap;
}

.pub-header-dropdown-total {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0;
}

.pub-header-dropdown-cta {
    display: block;
    text-align: center;
    background: var(--pub-accent);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
    border-radius: var(--pub-radius);
}

.pub-header-dropdown-cta:hover {
    background: var(--pub-accent-hover);
    text-decoration: none;
    color: #fff;
}

.pub-header-account {
    flex: 0 0 auto;
    color: var(--pub-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* Meniul devine drawer lateral pe ecrane inguste, deschis cu butonul hamburger. Randul de sus ramane
   doar cu iconite (fara textul "Autentificare"/"Favorite"/"Cos", care nu mai incape si se taia), iar
   cautarea trece pe un rand propriu, separat si mai lat - la fel ca la qrorderpro.com/ro/locations/. */
@media (max-width: 860px) {
    .pub-header-inner {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    /* Logo-ul din randul sticky (desktop) dispare complet pe mobil - inlocuit de bara separata,
       NE-sticky, de deasupra (.pub-mobile-logo-bar, randata de render_mobile_logo_bar() in afara
       .pub-sticky-header-group), care se deruleaza normal cu pagina, fara niciun JS de scroll. */
    .pub-header-inner > .pub-header-brand {
        display: none;
    }

    .pub-mobile-logo-bar {
        display: block;
    }

    /* Logo-ul (fostul rand 1) nu mai exista deloc in .pub-header-inner pe mobil (mutat in
       .pub-mobile-logo-bar, in afara containerului sticky) - hamburger-ul devine primul element pe
       acest rand, in stanga. */
    .pub-header-nav-toggle {
        display: flex;
        order: 1;
    }

    /* Iconitele (cont/favorite/cos) merg dupa hamburger, dar impinse la capatul din dreapta -
       margin-left:auto se pune DOAR pe prima dintre ele (contul, care e si prima in DOM), ca sa
       impinga tot grupul celor 3 deodata; daca l-am fi pus pe toate 3, fiecare s-ar fi impins
       separat spre dreapta, rupand gruparea lor. */
    .pub-header-dropdown-account,
    .pub-header-dropdown:not(.pub-header-dropdown-account) {
        order: 2;
    }

    .pub-header-dropdown-account {
        margin-left: auto;
    }

    /* Panourile de previzualizare (cont/favorite/cos) nu mai apar deloc pe mobil - iconitele devin
       linkuri simple catre paginile respective (cont.php/favorite.php/cos.php), fara preview la
       tap (":hover" ramane "lipicios" pe atingere pe multe telefoane, deschizand panoul nedorit). */
    .pub-header-dropdown-panel {
        display: none !important;
    }

    /* Sageata care leaga panoul de buton (vezi .pub-header-dropdown--has-panel::before/::after mai
       sus) nu mai are sens aici - panoul nu mai sta chiar sub butonul care l-a deschis (e centrat
       fata de tot ecranul), deci sageata ar arata spre un loc care n-are legatura cu panoul. */
    .pub-header-dropdown--has-panel::before,
    .pub-header-dropdown--has-panel::after {
        display: none;
    }

    .pub-header-label {
        display: none;
    }

    .pub-header-search {
        order: 10;
        flex: 1 1 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .pub-header-search-box {
        min-height: 44px;
    }

    .pub-header-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 190;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .pub-header-nav-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .pub-header-nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 82vw;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 70px 24px 30px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 200;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    .pub-header-nav.is-open {
        transform: translateX(0);
    }

    .pub-header-nav-close {
        display: block;
        position: absolute;
        top: 14px;
        right: 16px;
        background: none;
        border: none;
        font-size: 28px;
        line-height: 1;
        color: var(--pub-text);
        cursor: pointer;
    }

    .pub-header-nav a,
    .pub-header-nav-drill {
        position: relative;
        width: 100%;
        padding: 10px 0;
    }

    .pub-header-nav a::after,
    .pub-header-nav-drill::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, var(--pub-text-muted), transparent);
    }

    .pub-header-nav-panel > *:last-child::after {
        display: none;
    }

    /* Meniul mobil e "drill-down" pe panouri (vezi header.php si nav-bar.css pt .pub-header-nav-panel*) -
       un singur panou vizibil pe rand, in loc de acordeon cu <details> imbricate. */
    .pub-header-nav-panels {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .pub-header-nav-panel {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .pub-header-nav-panel.is-active {
        display: flex;
        gap: 4px;
    }

    .pub-header-nav-drill {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: none;
        border: none;
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--pub-text);
        text-align: left;
        cursor: pointer;
    }
}