/* ===================================
   Mobile Navigation Styles
   Collapsible mobile menu for dropdown items
   =================================== */

/* Mobile Navigation Styles */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item.has-mobile-submenu > .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
    }

    .navbar-nav .nav-item.has-mobile-submenu > .nav-link::after {
        display: none;
    }

    .mobile-submenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-left: auto;
        pointer-events: none; /* Make it not clickable separately - whole item is clickable */
        transition: transform 0.3s ease;
    }

    .mobile-submenu-toggle i {
        font-size: 0.875rem;
        transition: transform 0.3s ease;
    }

    .mobile-submenu-toggle.rotated i {
        transform: rotate(180deg);
    }

    .mobile-submenu {
        display: none;
        padding-left: 1rem;
        margin-top: 0.25rem;
        border-left: 3px solid var(--primary-color);
        margin-left: 0.5rem;
    }

    .mobile-submenu.show {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 500px;
        }
    }

    .mobile-submenu .submenu-item {
        display: block;
        padding: 0.5rem 1rem;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: all 0.2s ease;
        border-radius: 0.25rem;
        margin: 0.125rem 0;
    }

    .mobile-submenu .submenu-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        padding-left: 1.25rem;
    }

    .mobile-submenu .submenu-item i {
        margin-right: 0.5rem;
        font-size: 0.875rem;
    }

    /* Hide desktop dropdown menu in mobile */
    .navbar-nav .dropdown-menu {
        display: none !important;
    }

    /* Category toggle icon rotation */
    .category-toggle-icon.rotated {
        transform: rotate(180deg) !important;
    }
}

/* Desktop - Keep original dropdown behavior */
@media (min-width: 992px) {
    .mobile-submenu {
        display: none !important;
    }

    .mobile-submenu-toggle {
        display: none !important;
    }
}