/* Simple Mobile Menu Enhancement CSS */

/* Style the injected topbar items in mobile menu */
@media (max-width: 991px) {
    .mobile-menu .mobile-topbar-item {
        border-bottom: 1px solid rgba(33, 150, 243, 0.2);
        background-color: rgba(33, 150, 243, 0.05);
    }
    
    .mobile-menu .mobile-topbar-item:last-of-type {
        border-bottom: 2px solid rgba(33, 150, 243, 0.3);
        margin-bottom: 10px;
    }
    
    .mobile-menu .mobile-topbar-item a {
        color: #2196F3 !important;
        font-weight: 500;
    }
    
    .mobile-menu .mobile-topbar-item a:hover {
        background-color: rgba(33, 150, 243, 0.1) !important;
        color: #1976D2 !important;
    }
    
    .mobile-menu .mobile-topbar-item i {
        margin-right: 8px;
        width: 18px;
        text-align: center;
        color: inherit;
    }
}

/* Hide injected items on desktop (they shouldn't be there anyway) */
@media (min-width: 992px) {
    .mobile-topbar-item {
        display: none !important;
    }
}