/* ══ MENIUL DE PE MOBIL (≤1200px) ════════════════════════════════════════
   24 sept 2026, cerere a utilizatorului: meniul de pe mobil „super profesional",
   cu dimensiuni normale. Până acum îl desenau patru foi care se băteau între
   ele (header.css, navbar-spectacular.css, style.css, phone-perfect.css):
   fiecare link era o cutie cu chenar și text centrat, iar avatarul plutea
   singur jos. Foaia asta se încarcă ultima (includes/header.php) și deține
   singură meniul de pe mobil; de aici `header.nav` în față și !important.

   Cum arată: un panou sub bara de sus, din dreapta (pe telefon, pe toată
   lățimea), cu pagina întunecată în spate. Rânduri de 48px aliniate la stânga (fără chenare);
   dropdown-urile au săgeata în dreapta, iar subopțiunile stau indentate, lângă
   o linie fină. Sub o linie de despărțire, acțiunile: „Programează-te" pe toată
   lățimea și rândul „Contul meu" cu avatarul.
   Butonul cu trei linii devine X când meniul e deschis. */

/* Eticheta „Contul meu" din butonul de cont se vede doar în meniul de pe mobil */
.nav-avatar-eticheta { display: none; }

@media (max-width: 1200px) {

    /* backdrop-filter pe bara de sus ar face panoul fix relativ la bară */
    header.nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

    /* ── Butonul cu trei linii ─────────────────────────────────────────── */
    header.nav .menu-toggle {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 42px !important; height: 42px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        position: relative; z-index: 10001;
        cursor: pointer;}
    header.nav .menu-toggle span {
        display: block !important;
        width: 18px !important; height: 2px !important;
        margin: 0 !important;
        border-radius: 2px;
        background: #ffffff !important;
        transition: transform 0.25s ease, opacity 0.2s ease;}
    header.nav .menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    header.nav .menu-toggle.active span:nth-child(2) { opacity: 0; transform: none; }
    header.nav .menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* ── Panoul ────────────────────────────────────────────────────────── */
    /* Panoul începe sub bara de sus (60px): logoul și X-ul rămân pe fundalul barei,
       iar lista se derulează doar sub ele (altfel trecea pe sub logo). */
    header.nav .menu {
        position: fixed !important;
        top: 60px !important; right: 0 !important; bottom: 0 !important; left: auto !important;
        width: min(340px, 86vw) !important; max-width: none !important;
        height: calc(100vh - 60px) !important; height: calc(100dvh - 60px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        /* o singură coloană: cu wrap (dintr-o foaie veche), pe ecranele scunde ce nu
           încăpea (butoanele, contul) sărea într-o a doua coloană, în dreapta */
        flex-wrap: nowrap !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: #0b1220 !important;
        border: 0 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45) !important;
        z-index: 10000 !important;
        visibility: hidden;
        opacity: 1 !important;
        transform: translateX(100%);
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.3s !important;}
    /* rândurile nu se turtesc când conținutul e mai înalt decât ecranul: panoul se derulează */
    header.nav .menu > * { flex-shrink: 0 !important; }
    header.nav .menu.active {
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0s !important;}
    /* Pe telefon panoul ocupă toată lățimea, sub bara cu logoul și X-ul */
    @media (max-width: 560px) {
        header.nav .menu { width: 100vw !important; border-left: 0 !important; box-shadow: none !important; }
    }

    /* pagina întunecată în spatele panoului (click pe ea închide meniul: header.php) */
    body.menu-open::after {
        content: '';
        position: fixed; inset: 0;
        background: rgba(5, 10, 20, 0.55);
        z-index: 9990;}

    /* fără efectele de desktop (sublinieri animate, luciri, separatoare vechi) */
    header.nav .menu a::before,
    header.nav .menu a::after,
    header.nav .menu .dropdown-toggle::before,
    header.nav .menu .dropdown-toggle::after,
    header.nav .menu .dropdown-menu::before,
    /* „puntea" invizibilă de hover de pe PC (navbar-spectacular.css, 30px în fiecare
       parte) lățea panoul cu 14px */
    header.nav .menu .nav-dropdown::before,
    header.nav .menu .nav-dropdown::after { content: none !important; display: none !important; }

    /* ── Linkurile principale și dropdown-urile ────────────────────────── */
    header.nav .menu > a:not(.btn):not(.nav-avatar),
    header.nav .menu .nav-dropdown > .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-decoration: none !important;
        transform: none !important;}
    header.nav .menu > a:not(.btn):not(.nav-avatar):hover,
    header.nav .menu .nav-dropdown > .dropdown-toggle:hover {
        background: rgba(255, 255, 255, 0.06) !important;}
    header.nav .menu > a.active:not(.btn):not(.nav-avatar) {
        background: rgba(110, 193, 255, 0.12) !important;
        color: #8fcbff !important;}

    /* Mativera+ : iconița în stânga, textul lângă ea, „+" lipit de text */
    header.nav .menu > a.nav-plus-link:not(.btn):not(.nav-avatar) { justify-content: flex-start !important; }
    header.nav .menu > a.nav-plus-link i { width: 18px; text-align: center; }
    header.nav .menu > a.nav-plus-link .plus-badge { margin-left: -8px !important; }

    /* săgeata dropdown-ului, în dreapta; se rotește când e deschis */
    header.nav .menu .nav-dropdown {
        display: flex !important; flex-direction: column !important;
        align-items: stretch !important;   /* altfel subopțiunile se centrau */
        width: 100% !important; margin: 0 !important;}
    header.nav .menu .nav-dropdown > .dropdown-toggle i {
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.55) !important;
        transition: transform 0.25s ease !important;}
    header.nav .menu .nav-dropdown.open > .dropdown-toggle { background: rgba(255, 255, 255, 0.06) !important; }
    header.nav .menu .nav-dropdown.open > .dropdown-toggle i { transform: rotate(180deg) !important; }

    /* subopțiunile: indentate, sub o linie fină, fără cutie */
    header.nav .menu .nav-dropdown .dropdown-menu {
        position: static !important;
        width: auto !important; min-width: 0 !important;
        align-self: stretch !important;
        left: auto !important; top: auto !important;
        margin: 0 0 0 16px !important;
        padding: 0 0 0 10px !important;
        background: transparent !important;
        border: 0 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        max-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease, opacity 0.2s ease !important;}
    header.nav .menu .nav-dropdown.open .dropdown-menu {
        max-height: 420px !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 4px 0 8px 16px !important;
        padding: 2px 0 2px 10px !important;}
    header.nav .menu .nav-dropdown .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        text-align: left !important;}
    header.nav .menu .nav-dropdown .dropdown-menu a:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; }
    header.nav .menu .nav-dropdown .dropdown-menu a.active { background: rgba(110, 193, 255, 0.12) !important; color: #8fcbff !important; }

    /* ── Acțiunile, jos: Programează-te / Intră în cont / Panel, apoi contul ── */
    /* o linie fină desparte linkurile de acțiuni (sub Mativera+; pe butoane ar fi
       tăiată de overflow: hidden) */
    header.nav .menu > a.nav-plus-link:not(.btn):not(.nav-avatar) { position: relative; margin-bottom: 14px !important; }
    header.nav .menu > a.nav-plus-link:not(.btn):not(.nav-avatar)::after {
        content: '' !important;
        display: block !important;
        position: absolute; left: 14px; right: 14px; bottom: -8px;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);}

    header.nav .menu .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        margin: 8px 0 0 !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        font-size: 0.98rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        box-shadow: none !important;
        transform: none !important;}
    header.nav .menu .btn.primary {
        background: #6ec1ff !important;
        border: 0 !important;
        color: #06213f !important;}
    header.nav .menu .btn:not(.primary) {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;}

    /* Contul meu: rând cu avatarul, eticheta și săgeata */
    header.nav .menu a.nav-avatar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 10px 0 0 !important;
        padding: 10px 14px 10px 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        overflow: visible !important;
        transform: none !important;
        color: #ffffff !important;
        text-decoration: none !important;}
    header.nav .menu a.nav-avatar:hover { background: rgba(255, 255, 255, 0.08) !important; }
    header.nav .menu a.nav-avatar img,
    header.nav .menu a.nav-avatar .nav-avatar-initial {
        width: 38px !important; height: 38px !important;
        flex: 0 0 38px;
        border-radius: 50% !important;
        object-fit: cover;
        object-position: 50% 20%;}
    header.nav .menu a.nav-avatar .nav-avatar-initial {
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(145deg, #1f4fbf, #0a3aa5);
        color: #ffffff !important;
        font-size: 0.95rem;}
    header.nav .menu a.nav-avatar .nav-avatar-eticheta {
        display: flex; align-items: center; justify-content: space-between;
        flex: 1 1 auto;
        font-size: 0.98rem; font-weight: 600; color: #ffffff;}
    header.nav .menu a.nav-avatar .nav-avatar-eticheta::after {
        content: '';
        width: 8px; height: 8px;
        border-right: 2px solid rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        transform: rotate(-45deg);
        margin-right: 4px;}
}