#menu-overflows{
    right: 0 !important;
   left: auto !important;
}

/* Ensure primary menu is horizontal on tablet and desktop */
@media (min-width: 768px) {
    #primary-menu.navbar-nav {
        flex-direction: row !important;
        max-width: var(--menu-width-tablet, 65%);
    }
}

@media (min-width: 992px) {
    #primary-menu.navbar-nav {
        max-width: var(--menu-width-desktop, 65%);
    }
}

/* Desktop: ≥992px */
@media (min-width: 992px) {
    #primary-menu[data-overflow-desktop="horizontal"] {
        overflow-x: auto;
        /* Changed from overflow-y: hidden to visible to allow dropdowns */
        overflow-y: visible;
        flex-wrap: nowrap !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
    }

    #primary-menu[data-overflow-desktop="horizontal"]::-webkit-scrollbar {
        display: none;
    }

    #primary-menu[data-overflow-desktop="horizontal"] .nav-item {
        flex-shrink: 0;
        white-space: nowrap;
    }

    #primary-menu[data-overflow-desktop="horizontal"].has-overflow::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to left, var(--bs-body-bg), transparent);
        pointer-events: none;
        z-index: 1;
    }

    /* Ensure dropdown menus are positioned correctly above the navbar */
    #primary-menu[data-overflow-desktop="horizontal"] .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
        /* Ensure dropdown appears outside the scrolling container */
        transform: translateY(0) !important;
    }

    /* Additional fix: make sure dropdown toggle has proper positioning context */
    #primary-menu[data-overflow-desktop="horizontal"] .dropdown {
        position: relative;
        z-index: 1001;
    }

    #primary-menu[data-overflow-desktop="vertical"] {
        flex-wrap: nowrap !important;
        overflow: visible;
    }

    #primary-menu[data-overflow-desktop="vertical"] .nav-item {
        flex-shrink: 0;
    }

    #primary-menu[data-overflow-desktop="vertical"] .nav-item.hidden-overflow {
        display: none !important;
    }

    #primary-menu[data-overflow-desktop="vertical"] .nav-item.menu-more {
        position: relative;
    }

    #primary-menu[data-overflow-desktop="vertical"] .nav-item.menu-more .nav-link {
        cursor: pointer;
        font-weight: 600;
    }

    #primary-menu[data-overflow-desktop="vertical"] .nav-item.menu-more .dropdown-menu {
        min-width: 200px;
    }
}

/* Tablet: 768px - 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
    #primary-menu[data-overflow-tablet="horizontal"] {
        overflow-x: auto;
        /* Changed from overflow-y: hidden to visible to allow dropdowns */
        overflow-y: visible;
        flex-wrap: nowrap !important;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
    }

    #primary-menu[data-overflow-tablet="horizontal"]::-webkit-scrollbar {
        display: none;
    }

    #primary-menu[data-overflow-tablet="horizontal"] .nav-item {
        flex-shrink: 0;
        white-space: nowrap;
    }

    #primary-menu[data-overflow-tablet="horizontal"].has-overflow::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to left, var(--bs-body-bg), transparent);
        pointer-events: none;
        z-index: 1;
    }

    /* Ensure dropdown menus are positioned correctly above the navbar */
    #primary-menu[data-overflow-tablet="horizontal"] .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
        /* Ensure dropdown appears outside the scrolling container */
        transform: translateY(0) !important;
    }

    /* Additional fix: make sure dropdown toggle has proper positioning context */
    #primary-menu[data-overflow-tablet="horizontal"] .dropdown {
        position: relative;
        z-index: 1001;
    }

    #primary-menu[data-overflow-tablet="vertical"] {
        flex-wrap: nowrap !important;
        overflow: visible;
    }

    #primary-menu[data-overflow-tablet="vertical"] .nav-item {
        flex-shrink: 0;
    }

    #primary-menu[data-overflow-tablet="vertical"] .nav-item.hidden-overflow {
        display: none !important;
    }

    #primary-menu[data-overflow-tablet="vertical"] .nav-item.menu-more {
        position: relative;
    }

    #primary-menu[data-overflow-tablet="vertical"] .nav-item.menu-more .nav-link {
        cursor: pointer;
        font-weight: 600;
    }

    #primary-menu[data-overflow-tablet="vertical"] .nav-item.menu-more .dropdown-menu {
        min-width: 200px;
    }
}