/* 
 * NESTED DROPDOWN FIX
 * Desktop: Show on hover (to the right)
 * Mobile: Show on click (directly below, inline)
 */

/* =============================================
   DESKTOP STYLES (Default - screens > 991px)
   ============================================= */

/* Allow nested dropdowns to overflow */
.navbar .dropdown .scrollable-dropdown {
    overflow: visible !important;
    max-height: none !important;
}

/* Position parent for nested dropdown */
.navbar .scrollable-dropdown>li.dropdown {
    position: relative !important;
}

/* Style the parent link with chevron */
.navbar .scrollable-dropdown>li.dropdown>a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 20px !important;
}

.navbar .scrollable-dropdown>li.dropdown>a i {
    margin-left: 8px !important;
    font-size: 12px !important;
    transition: transform 0.3s ease !important;
}

/* Nested UL - Hidden by default, positioned to the right */
.navbar .scrollable-dropdown>li.dropdown>ul {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
    min-width: 250px !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* SHOW ON HOVER */
.navbar .scrollable-dropdown>li.dropdown:hover>ul {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Nested list items */
.navbar .scrollable-dropdown>li.dropdown>ul>li {
    list-style: none !important;
}

/* Nested links */
.navbar .scrollable-dropdown>li.dropdown>ul>li>a {
    padding: 10px 20px !important;
    font-size: 14px !important;
    color: #333 !important;
    display: block !important;
    transition: all 0.2s ease !important;
}

.navbar .scrollable-dropdown>li.dropdown>ul>li>a:hover {
    color: #1ea7dc !important;
    background: #f5f9fc !important;
}

/* On smaller desktops, show to the left */
@media (max-width: 1366px) {
    .navbar .scrollable-dropdown>li.dropdown>ul {
        left: auto !important;
        right: 100% !important;
    }
}

/* =============================================
   MOBILE STYLES (991px and below)
   Show nested dropdown BELOW the parent item
   ============================================= */
@media (max-width: 991px) {

    /* Allow scrolling in main dropdown */
    .navbar-mobile .dropdown .scrollable-dropdown {
        overflow-y: auto !important;
        max-height: 70vh !important;
    }

    /* Reset position to static for mobile */
    .navbar-mobile .scrollable-dropdown>li.dropdown {
        position: static !important;
    }

    /* Parent link style */
    .navbar-mobile .scrollable-dropdown>li.dropdown>a {
        padding: 12px 15px !important;
        font-size: 15px !important;
        color: #333 !important;
        background: #fff !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid #eee !important;
    }

    .navbar-mobile .scrollable-dropdown>li.dropdown>a i {
        transition: transform 0.3s ease !important;
    }

    /* Rotate chevron when expanded */
    .navbar-mobile .scrollable-dropdown>li.dropdown.dropdown-active>a {
        color: #1ea7dc !important;
        background: #f0f8ff !important;
    }

    .navbar-mobile .scrollable-dropdown>li.dropdown.dropdown-active>a i {
        transform: rotate(90deg) !important;
    }

    /* NESTED UL - Position BELOW parent, hidden by default */
    .navbar-mobile .scrollable-dropdown>li.dropdown>ul {
        position: static !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #f8f9fa !important;
        border-left: 4px solid #1ea7dc !important;
    }

    /* SHOW WHEN ACTIVE - Display block to show below */
    .navbar-mobile .scrollable-dropdown>li.dropdown.dropdown-active>ul {
        display: block !important;
    }

    /* Nested list items */
    .navbar-mobile .scrollable-dropdown>li.dropdown>ul>li {
        width: 100% !important;
        list-style: none !important;
    }

    /* Nested links - full width, good tap targets */
    .navbar-mobile .scrollable-dropdown>li.dropdown>ul>li>a {
        padding: 14px 15px 14px 25px !important;
        font-size: 14px !important;
        color: #444 !important;
        background: #f8f9fa !important;
        display: block !important;
        border-bottom: 1px solid #eee !important;
        margin: 0 !important;
        border-radius: 0 !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    .navbar-mobile .scrollable-dropdown>li.dropdown>ul>li>a:hover,
    .navbar-mobile .scrollable-dropdown>li.dropdown>ul>li>a:active {
        background: #e8f4fc !important;
        color: #1ea7dc !important;
    }

    .navbar-mobile .scrollable-dropdown>li.dropdown>ul>li>a.active {
        background: #1ea7dc !important;
        color: #fff !important;
    }

    /* Last item no bottom border */
    .navbar-mobile .scrollable-dropdown>li.dropdown>ul>li:last-child>a {
        border-bottom: none !important;
    }

    /* Items without nested dropdown */
    .navbar-mobile .scrollable-dropdown>li:not(.dropdown)>a {
        padding: 12px 15px !important;
        font-size: 15px !important;
        color: #333 !important;
        display: block !important;
        border-bottom: 1px solid #eee !important;
        background: #fff !important;
    }
}

/* =============================================
   SMALL MOBILE (576px and below)
   ============================================= */
@media (max-width: 576px) {
    .navbar-mobile .scrollable-dropdown>li.dropdown>a {
        padding: 14px 12px !important;
        font-size: 14px !important;
    }

    .navbar-mobile .scrollable-dropdown>li.dropdown>ul>li>a {
        padding: 16px 12px 16px 22px !important;
        font-size: 13px !important;
    }
}