/* =========================================================
   MOBILE NAVBAR FIX ONLY
   DESKTOP IS NOT AFFECTED
   ========================================================= */

@media (max-width: 991.98px) {

    /* -----------------------------------------
       MOBILE NAVBAR
       ----------------------------------------- */

    #navbarCollapse {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Prevent navbar from appearing open */
    #navbarCollapse:not(.show) {
        display: none;
    }

    /* -----------------------------------------
       MAIN PRODUCT DROPDOWN
       ----------------------------------------- */

    #navbarCollapse .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* -----------------------------------------
       PRODUCT MAIN MENU
       ----------------------------------------- */

    #navbarCollapse > .navbar-nav > .dropdown > .dropdown-menu {
        padding: 0;
        background: #f7f7f7;
    }

    #navbarCollapse > .navbar-nav > .dropdown > .dropdown-menu > .dropend > .dropdown-item,
    #navbarCollapse > .navbar-nav > .dropdown > .dropdown-menu > .dropdown-item {
        padding: 13px 25px;
        white-space: normal;
    }

    /* -----------------------------------------
       NESTED PRODUCT MENU
       ----------------------------------------- */

    #navbarCollapse .dropend > .dropdown-menu {
        display: none;
        background: #eeeeee;
        padding: 0;
    }

    /* Show submenu ONLY when JS adds show */
    #navbarCollapse .dropend.mobile-open > .dropdown-menu {
        display: block !important;
    }

    /* -----------------------------------------
       SUBMENU ITEMS
       ----------------------------------------- */

    #navbarCollapse .dropend > .dropdown-menu .dropdown-item {
        padding: 11px 40px;
        font-size: 13px;
        white-space: normal;
    }

    /* -----------------------------------------
       ARROW
       ----------------------------------------- */

    #navbarCollapse .dropend > .dropdown-item::after {
        float: right;
        margin-top: 5px;
        transition: transform 0.25s ease;
    }

    #navbarCollapse .dropend.mobile-open > .dropdown-item::after {
        transform: rotate(180deg);
    }

    /* -----------------------------------------
       NAVBAR LINKS
       ----------------------------------------- */

    #navbarCollapse .navbar-nav .nav-link {
        padding: 12px 18px;
    }

    /* -----------------------------------------
       PRODUCT DROPDOWN TOGGLE
       ----------------------------------------- */

    #navbarCollapse > .navbar-nav > .dropdown > .dropdown-toggle {
        padding: 12px 18px;
    }

}