/* Direct Mobile Menu Styles */
@media (max-width: 991px) {
    /* Mobile menu overlay */
    .direct-mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }
    
    /* Menu container */
    .mobile-menu-container {
        position: absolute;
        right: 0;
        top: 0;
        width: 80%;
        max-width: 320px;
        height: 100%;
        background: #fff;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Menu header */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: #0078d4;
        color: white;
    }
    
    .mobile-menu-header span {
        font-weight: bold;
        font-size: 18px;
    }
    
    .mobile-menu-close {
        background: none;
        border: none;
        color: white;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Menu items */
    .mobile-menu-items {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .mobile-menu-items li {
        border-bottom: 1px solid #eee;
    }
    
    .mobile-menu-items a {
        display: block;
        padding: 15px 20px;
        color: #333;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    
    .mobile-menu-items a:hover,
    .mobile-menu-items a:active {
        background-color: #f8f9fa;
        color: #0078d4;
    }
    
    /* Submenu */
    .mobile-menu-items .has-submenu {
        position: relative;
        padding-right: 50px;
    }
    
    .submenu-toggle {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        font-size: 20px;
        color: #666;
    }
    
    .mobile-submenu {
        display: none;
        background: #f8f9fa;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .mobile-submenu li {
        border-bottom: 1px solid #e9ecef;
    }
    
    .mobile-submenu a {
        padding-left: 40px;
        font-size: 14px;
    }
    
    /* Menu divider */
    .menu-divider {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    .menu-divider hr {
        margin: 0;
        border: none;
        border-top: 2px solid #eee;
    }
    
    /* Body when menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }
    
    /* Ensure navbar toggler is always visible */
    .navbar-toggler {
        display: block !important;
        z-index: 1100;
    }
}