/* Mobile Menu - Complete Rewrite */

/* Mobile menu only shows on screens smaller than 992px */
@media (max-width: 991.98px) {
    /* Hide desktop navbar items */
    .navbar-nav {
        display: none !important;
    }
    
    /* Show navbar toggler */
    .navbar-toggler {
        display: block !important;
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        z-index: 1002 !important;
    }
    
    /* Mobile menu when open */
    .navbar-nav.mobile-menu-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #45246E !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
        z-index: 1001 !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        animation: slideDownMenu 0.3s ease !important;
    }
    
    @keyframes slideDownMenu {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Mobile menu items */
    .navbar-nav.mobile-menu-open .nav-item {
        display: block !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: 100% !important;
    }
    
    .navbar-nav.mobile-menu-open .nav-item:last-child {
        border-bottom: none !important;
    }
    
    /* Mobile menu links */
    .navbar-nav.mobile-menu-open .nav-link {
        display: block !important;
        padding: 1rem 1.5rem !important;
        color: white !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
        width: 100% !important;
    }
    
    .navbar-nav.mobile-menu-open .nav-link:hover,
    .navbar-nav.mobile-menu-open .nav-link.active {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-nav.mobile-menu-open .nav-link:after {
        display: none !important;
    }
    
    /* Mobile menu backdrop */
    .mobile-menu-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        opacity: 0;
        transition: opacity 0.3s ease !important;
        pointer-events: none !important;
    }
    
    .mobile-menu-backdrop.show {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Prevent body scroll when menu is open */
    body.mobile-menu-active {
        overflow: hidden !important;
    }
    
    /* Toggle icon animation */
    .navbar-toggler i {
        transition: transform 0.3s ease !important;
    }
    
    .navbar-toggler.active i.fa-bars {
        display: none !important;
    }
    
    .navbar-toggler.active i.fa-times {
        display: inline-block !important;
    }
    
    .navbar-toggler:not(.active) i.fa-times {
        display: none !important;
    }
}

/* Desktop - hide mobile menu elements */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none !important;
    }
    
    .mobile-menu-backdrop {
        display: none !important;
    }
    
    .navbar-nav {
        display: flex !important;
    }
}