/* Global Mobile Menu Fix - Forces immediate visibility on page refresh */
/* This CSS is loaded before React components to ensure mobile menu shows up */

@media (max-width: 767px) {
    /* Force mobile menu area to be visible */
    .mobile-menu-area {
        display: block !important;
        background: #182B49 !important;
    }
    
    /* Force mobile menu logo area to be visible */
    .mobile-menu-area .mb-logo-area {
        display: block !important;
        padding: 18px 0 !important;
    }
    
    /* Force mobile menu logo box to use flex */
    .mobile-menu-area .mb-logo-area .mb-logo-box {
        display: flex !important;
    }
    
    /* Force hamburger button container to be visible */
    .mobile-menu-area .mb-logo-area .mb-logo-box .hm-button {
        display: block !important;
        margin-top: 8px !important;
        margin-right: 35px !important;
    }
    
    /* Force hamburger button to be visible */
    .mobile-menu-area .mb-logo-area .mb-logo-box .hm-button #mb-sidebar-btn {
        display: inline-block !important;
        padding: 8px 12px !important;
        cursor: pointer !important;
    }
    
    /* Force hamburger icon to be visible with green color */
    .mobile-menu-area .mb-logo-area .mb-logo-box .hm-button #mb-sidebar-btn i {
        display: inline-block !important;
        font-size: 20px !important;
        color: #11B67A !important;
    }
    
    /* Force logo to be visible */
    .mobile-menu-area .mb-logo-area .mb-logo-box .mb-logo {
        display: block !important;
    }
    
    .mobile-menu-area .mb-logo-area .mb-logo-box .mb-logo a {
        display: inline-block !important;
    }
    
    .mobile-menu-area .mb-logo-area .mb-logo-box .mb-logo a img {
        display: inline-block !important;
        max-width: 150px !important;
    }
}

/* Ensure mobile sidebar has proper z-index and visibility */
@media (max-width: 767px) {
    .mb-sidebar {
        z-index: 99999 !important;
        display: block !important;
    }
    
    .mb-sidebar.opened {
        left: 0 !important;
    }
    
    .mb-sidebar-overlay {
        z-index: 9998 !important;
    }
    
    .mb-sidebar-overlay.visible {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Fix for menu text colors */
.mb-sidebar .mb-menu-content ul li a {
    color: #182B49 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 10px 0 10px 15px !important;
}

.mb-sidebar .mb-menu-content ul li a:hover {
    color: #11B67A !important;
    background-color: rgba(17, 182, 122, 0.1) !important;
}