/* =====================================================
   MOBILE MENU - UNIFIED FIX v5.0
   LPS Mircea Eliade
   
   Acest fișier ÎNLOCUIEȘTE:
   - mobile-menu-final.css
   - hamburger-final-fix.css
   
   Instrucțiuni: Încarcă DOAR acest fișier în loc de cele 2 de mai sus
   ===================================================== */

/* ========== RESET NUCLEAR - Eliminare conflicte ========== */
@media screen and (max-width: 1024px) {
    /* Elimină orice ::marker sau bullet points */
    html body .header .nav,
    html body .header .nav *,
    html body .header #nav,
    html body .header #nav *,
    html body nav.nav,
    html body nav.nav * {
        list-style: none !important;
        list-style-type: none !important;
        list-style-image: none !important;
    }
    
    /* Elimină pseudo-elemente problematice */
    html body .nav::before,
    html body .nav::after,
    html body .nav *::before,
    html body .nav *::after,
    html body .nav-link::before,
    html body .nav-link::after {
        content: none !important;
        display: none !important;
    }
    
    html body .nav *::marker {
        content: none !important;
        display: none !important;
        font-size: 0 !important;
    }
}

/* ========== DESKTOP (>1024px) - Ascunde hamburger complet ========== */
@media screen and (min-width: 1025px) {
    .mobile-toggle,
    #mobileToggle,
    button.mobile-toggle,
    button#mobileToggle,
    html body .mobile-toggle,
    html body #mobileToggle,
    html body button.mobile-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .nav-overlay {
        display: none !important;
    }
}

/* ========== MOBIL/TABLET (≤1024px) ========== */
@media screen and (max-width: 1024px) {

    /* ===== BUTONUL HAMBURGER ===== */
    html body button#mobileToggle.mobile-toggle,
    html body .header button#mobileToggle.mobile-toggle,
    html body .header-inner button#mobileToggle.mobile-toggle,
    html body .header-main button#mobileToggle.mobile-toggle,
    button#mobileToggle,
    #mobileToggle,
    .mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(10, 36, 99, 0.95) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        z-index: 1000002 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        overflow: visible !important;
    }
    
    /* ===== LINIILE HAMBURGER - POZIȚIONARE FIXĂ ===== */
    html body button#mobileToggle.mobile-toggle span,
    html body .header button#mobileToggle span,
    button#mobileToggle span,
    #mobileToggle span,
    .mobile-toggle span {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 22px !important;
        height: 2px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-radius: 2px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Linia 1 - sus (mai aproape de centru) */
    html body button#mobileToggle span:nth-child(1),
    button#mobileToggle span:nth-child(1),
    #mobileToggle span:nth-child(1),
    .mobile-toggle span:nth-child(1) {
        top: 18px !important; 
    }
    
    /* Linia 2 - mijloc */
    html body button#mobileToggle span:nth-child(2),
    button#mobileToggle span:nth-child(2),
    #mobileToggle span:nth-child(2),
    .mobile-toggle span:nth-child(2) {
        top: 23px !important;
    }
    
    /* Linia 3 - jos (mai aproape de centru) */
    html body button#mobileToggle span:nth-child(3),
    button#mobileToggle span:nth-child(3),
    #mobileToggle span:nth-child(3),
    .mobile-toggle span:nth-child(3) {
        top: 28px !important; 
    }
    
    /* ===== ANIMAȚIE DEZACTIVATĂ ===== */
    /* Liniile rămân paralele și vizibile chiar și când meniul este deschis */
    html body button#mobileToggle.active span:nth-child(1),
    button#mobileToggle.active span:nth-child(1),
    #mobileToggle.active span:nth-child(1),
    .mobile-toggle.active span:nth-child(1) {
        top: 18px !important;
        transform: translateX(-50%) rotate(0deg) !important;
    }
    
    html body button#mobileToggle.active span:nth-child(2),
    button#mobileToggle.active span:nth-child(2),
    #mobileToggle.active span:nth-child(2),
    .mobile-toggle.active span:nth-child(2) {
        opacity: 1 !important; 
        transform: translateX(-50%) scaleX(1) !important;
    }
    
    html body button#mobileToggle.active span:nth-child(3),
    button#mobileToggle.active span:nth-child(3),
    #mobileToggle.active span:nth-child(3),
    .mobile-toggle.active span:nth-child(3) {
        top: 28px !important;
        transform: translateX(-50%) rotate(0deg) !important;
    }
    
    /* ===== HOVER/FOCUS PE HAMBURGER ===== */
    html body button#mobileToggle:hover,
    html body button#mobileToggle:focus,
    .mobile-toggle:hover,
    .mobile-toggle:focus {
        background: rgba(30, 77, 140, 0.95) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
        outline: none !important;
    }

    /* ===== CONTAINER NAV MOBIL ===== */
    html body .nav,
    html body #nav,
    html body nav.nav,
    html body .header .nav,
    html body .header-inner .nav,
    html body .header-main .nav {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        left: auto !important;
        bottom: auto !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: linear-gradient(180deg, #0a1628 0%, #1a2d4a 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 80px 0 30px 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 1000001 !important;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    
    /* Nav activ (deschis) */
    html body .nav.active,
    html body #nav.active,
    html body nav.nav.active,
    html body .header .nav.active {
        right: 0 !important;
    }

    /* ===== LINK-URI PRINCIPALE ===== */
    html body .nav > a,
    html body .nav > a.nav-link,
    html body #nav > a,
    html body #nav > a.nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 16px 24px !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    html body .nav > a:hover,
    html body .nav > a.nav-link:hover {
        background: rgba(0, 229, 255, 0.1) !important;
        color: #00e5ff !important;
    }

    /* ===== DROPDOWN CONTAINER ===== */
    html body .nav .nav-dropdown,
    html body #nav .nav-dropdown,
    html body .nav-dropdown {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        background: transparent !important;
        border: none !important;
        pointer-events: auto !important;
    }
    
    /* Trigger dropdown (span cu text) */
    html body .nav .nav-dropdown > .nav-link,
    html body .nav .nav-dropdown > span.nav-link,
    html body .nav .nav-dropdown > span,
    html body #nav .nav-dropdown > .nav-link,
    html body .nav-dropdown > .nav-link,
    html body .nav-dropdown > span {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 16px 24px !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    html body .nav .nav-dropdown > .nav-link:hover,
    html body .nav-dropdown > .nav-link:hover,
    html body .nav-dropdown > span:hover {
        background: rgba(0, 229, 255, 0.1) !important;
        color: #00e5ff !important;
    }
    
    /* Săgeată dropdown */
    html body .nav .nav-dropdown > .nav-link i,
    html body .nav-dropdown > .nav-link i,
    html body .nav-dropdown > span i,
    html body .nav .nav-dropdown .bi-chevron-down {
        display: inline-block !important;
        font-size: 12px !important;
        transition: transform 0.3s ease !important;
        margin-left: auto !important;
        color: inherit !important;
        pointer-events: none !important;
    }
    
    html body .nav .nav-dropdown.active > .nav-link i,
    html body .nav-dropdown.active > .nav-link i,
    html body .nav-dropdown.active > span i {
        transform: rotate(180deg) !important;
    }

    /* ===== DROPDOWN MENU (SUBMENIU) ===== */
    html body .nav .dropdown-menu,
    html body #nav .dropdown-menu,
    html body .nav .nav-dropdown .dropdown-menu,
    html body .nav-dropdown .dropdown-menu,
    html body .dropdown-menu {
        position: static !important;
		display: block !important;
		visibility: hidden !important;
		height: 0 !important;
        width: 100% !important;
        max-height: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, 0.25) !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
		height: auto !important;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: auto !important;
    }
    
    /* Dropdown deschis */
    html body .nav .nav-dropdown.active .dropdown-menu,
    html body #nav .nav-dropdown.active .dropdown-menu,
    html body .nav-dropdown.active .dropdown-menu,
    html body .nav-dropdown.active > .dropdown-menu {
        max-height: 500px !important;
        padding: 8px 0 !important;
    }
    
    /* Link-uri în dropdown */
    html body .nav .dropdown-menu a,
    html body #nav .dropdown-menu a,
    html body .nav-dropdown .dropdown-menu a,
    html body .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 24px 12px 40px !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 0.95rem !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
        cursor: pointer !important;
    }
    
    html body .nav .dropdown-menu a:hover,
    html body .dropdown-menu a:hover {
        background: rgba(0, 229, 255, 0.1) !important;
        color: #00e5ff !important;
        padding-left: 48px !important;
    }

    /* ===== NAV-CTA (BUTON ÎNSCRIE-TE) ===== */
    html body .nav .nav-cta,
    html body #nav .nav-cta,
    html body .nav-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: calc(100% - 32px) !important;
        margin: 20px 16px !important;
        padding: 14px 24px !important;
        background: linear-gradient(135deg, #fb8b24 0%, #e36414 100%) !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        border: none !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 15px rgba(251, 139, 36, 0.4) !important;
        transition: all 0.3s ease !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
        cursor: pointer !important;
    }
    
    html body .nav .nav-cta:hover,
    html body .nav-cta:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(251, 139, 36, 0.5) !important;
    }

    /* ===== OVERLAY ===== */
    html body .nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 1000000 !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        cursor: pointer !important;
        pointer-events: none !important;
    }
    
	html body .nav-overlay.active {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		width: calc(100vw - 300px) !important;
		right: auto !important;
		left: 0 !important;
		z-index: 1000000 !important;
	}

    /* ===== ASCUNDE ELEMENTE DESKTOP ===== */
    html body .dropdown-mega,
    html body .dropdown-menu-lg,
    html body .dropdown-mega-grid,
    html body .sports-grid,
    html body .sport-menu-item {
        display: none !important;
    }
    
    /* ===== TOPBAR PE MOBIL ===== */
    html body .topbar {
        display: none !important;
    }
    
    /* ===== HEADER COMPACT PE MOBIL ===== */
    html body .header-main {
        padding: 8px 0 !important;
    }
    
    html body .header-inner {
        justify-content: flex-start !important;
    }
    
    html body .logo-img {
        height: 40px !important;
    }
    
    html body .logo-text {
        display: none !important;
    }
}

/* ========== TELEFON (<576px) ========== */
@media screen and (max-width: 576px) {
    html body .nav,
    html body #nav {
        width: 100% !important;
        max-width: 100vw !important;
        right: -100% !important;
    }
    
    html body .nav.active,
    html body #nav.active {
        right: 0 !important;
    }
    
    html body button#mobileToggle.mobile-toggle,
    .mobile-toggle {
        top: 10px !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }
    
    html body button#mobileToggle span,
    .mobile-toggle span {
        width: 20px !important;
    }
    
    /* Linii mai apropiate pentru telefoane mici */
    html body button#mobileToggle span:nth-child(1),
    .mobile-toggle span:nth-child(1) {
        top: 17px !important; 
    }
    
    html body button#mobileToggle span:nth-child(2),
    .mobile-toggle span:nth-child(2) {
        top: 21px !important; 
    }
    
    html body button#mobileToggle span:nth-child(3),
    .mobile-toggle span:nth-child(3) {
        top: 25px !important; 
    }
    
    /* Dezactivare animație pentru telefoane mici */
    html body button#mobileToggle.active span:nth-child(1),
    .mobile-toggle.active span:nth-child(1) {
        top: 17px !important;
    }
    html body button#mobileToggle.active span:nth-child(3),
    .mobile-toggle.active span:nth-child(3) {
        top: 25px !important;
    }
}

/* ========== FIX PENTRU iOS SAFE AREA ========== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 1024px) {
        html body .nav,
        html body #nav {
            padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ========== PRINT - Ascunde meniul mobil ========== */
@media print {
    .mobile-toggle,
    #mobileToggle,
    .nav-overlay {
        display: none !important;
    }
}

/* =====================================================
   HOTFIX FINAL - FORȚARE POZIȚIE DREAPTA
   Adaugă acest cod la sfârșitul fișierului CSS
   ===================================================== */

@media screen and (max-width: 1024px) {
    
    /* 1. Resetare agresivă a poziției pentru meniul închis */
    html body .nav,
    html body #nav,
    html body .header .nav,
    html body nav.nav {
        /* Ne asigurăm că stânga este ignorată total */
        left: auto !important; 
        top: 0 !important;
        bottom: 0 !important;
        
        /* Poziționare pe dreapta, ascuns inițial */
        right: -320px !important; 
        
        /* Lățime fixă pentru consistență */
        width: 300px !important; 
        max-width: 85vw !important;
        
        /* Asigură-te că transform nu mută meniul */
        transform: none !important; 
        
        /* Umbră corectă pentru meniu venit din dreapta */
        box-shadow: -5px 0 30px rgba(0,0,0,0.5) !important; 
    }

    /* 2. Poziția pentru meniul DESCHIS (Active) */
    html body .nav.active,
    html body #nav.active,
    html body .header .nav.active,
    html body nav.nav.active {
        left: auto !important; /* Re-confirmăm ignorarea stângii */
        right: 0 !important;   /* Lipit de marginea dreaptă */
    }

    /* 3. Corecție pentru Overlay (fundalul întunecat) */
    html body .nav-overlay.active {
        left: 0 !important;
        right: auto !important;
        width: 100% !important; /* Acoperă tot ecranul */
        z-index: 999999 !important; /* Sub meniu (care are 1000001) */
    }
    
    /* 4. Asigurăm că meniul e PESTE overlay */
    html body .nav.active {
        z-index: 1000001 !important;
    }
}

/* =====================================================
   FIX PENTRU ECRANE FOARTE MICI (TELEFOANE)
   Suprascrie regula de width: 100% care poate cauza confuzie
   ===================================================== */
@media screen and (max-width: 576px) {
    html body .nav,
    html body #nav {
        /* Păstrăm 300px sau maxim 85% pentru a nu acoperi totul */
        width: 300px !important; 
        max-width: 85vw !important;
        right: -320px !important;
    }
    
    html body .nav.active,
    html body #nav.active {
        right: 0 !important;
    }
}