/* ===================================================================
   ALL CATEGORIES MENU
   File: cartridges/app_emega_storefront/cartridge/static/default/css/header/allContentsMenu.css

   DOM STRUCTURE (from menu.isml + pdStorePageHeaderEmega.isml):

   #sg-navbar-collapse
     nav.navbar.navbar-expand-md
       div.close-menu          (mobile back/close buttons)
       div.menu-group          ← MAIN NAV LIST — needs scroll
         ul.nav.navbar-nav
           li.nav-item ...

   div#all-menu-overlay        (separate from sg-navbar-collapse)
   div#all-menu-wrapper        ← ALL CATEGORIES DRAWER — separate
     .all-categories-menu
       .all-menu-header
       nav.navbar
         .menu-group
           ul.navbar-nav

   Mobile: hidden entirely — emega-mobile-menu handles mobile nav
   =================================================================== */

/* ===================================================================
   MOBILE — Hide all-menu-wrapper and related, mobile drawer handles nav
   =================================================================== */
@media (max-width: 767px) {
    #all-menu-wrapper,
    #all-menu-overlay,
    #open-all-menu {
        display: none !important;
    }
}

/* ===================================================================
   DESKTOP NAV BAR — keep main-menu navbar-nav as flex row
   =================================================================== */
@media (min-width: 768px) {
    .main-menu ul.navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
}

/* ===================================================================
   DESKTOP — Main nav list scroll (#sg-navbar-collapse > nav > .menu-group)
   This is the parent category list in the horizontal nav bar.
   On smaller desktop viewports with many categories it needs to scroll.
   =================================================================== */
@media (min-width: 768px) {
    #sg-navbar-collapse nav.navbar .menu-group {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #sg-navbar-collapse nav.navbar .menu-group::-webkit-scrollbar {
        width: 6px;
    }

    #sg-navbar-collapse nav.navbar .menu-group::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #sg-navbar-collapse nav.navbar .menu-group::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 4px;
    }

    #sg-navbar-collapse nav.navbar .menu-group::-webkit-scrollbar-thumb:hover {
        background: #555555;
    }
}

/* ===================================================================
   DESKTOP — All Categories drawer (#all-menu-wrapper)
   Separate from sg-navbar-collapse — slides in from left on "All" click
   All rules anchored to #all-menu-wrapper for maximum specificity
   =================================================================== */
@media (min-width: 768px) {
    /* ------------------------------------------------------------------
       OVERLAY
    ------------------------------------------------------------------ */
    #all-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        display: none;
    }

    #all-menu-overlay.active {
        display: block;
    }

    /* ------------------------------------------------------------------
       WRAPPER — slides in from left
       position: relative on wrapper so close X at right: -48px is
       positioned relative to wrapper edge, not clipped
    ------------------------------------------------------------------ */
    #all-menu-wrapper {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        width: 365px;
        background-color: #ffffff;
        z-index: 1050;
        transition: left 0.5s cubic-bezier(0, 1, 0.5, 1);
        display: flex;
        flex-direction: column;
        overflow: visible; /* visible so close X at right: -48px shows */
    }

    #all-menu-wrapper.in {
        left: 0;
    }

    /* ------------------------------------------------------------------
       ROOT CONTAINER — must clip scroll content but not the header X
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu {
        background-color: #ffffff;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
        z-index: 1;
        overflow: visible; /* header X needs to escape */
    }

    /* ------------------------------------------------------------------
       HEADER — fixed height, overflow visible for close X button
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-menu-header {
        flex-shrink: 0;
        position: relative;
        display: flex;
        align-items: center;
        overflow: visible;
        z-index: 10;
    }

    #all-menu-wrapper .all-categories-menu .close-menu {
        width: 100%;
        height: 56px;
        min-height: 56px;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        background-color: #232f3e;
        border: none;
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        box-sizing: border-box;
        text-decoration: none;
    }

    #all-menu-wrapper .all-categories-menu .close-menu i {
        font-size: 20px;
    }

    #all-menu-wrapper .all-categories-menu .menu-account-text {
        white-space: nowrap;
    }

    /* Close X — sits outside the drawer at right: -48px */
    #all-menu-wrapper .all-categories-menu .menu-close-x {
        position: absolute;
        top: 50%;
        right: -48px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
        border: 2px solid #ffffff;
        border-radius: 4px;
        font-size: 36px;
        font-weight: 300;
        line-height: 0.85;
        font-family: Arial, sans-serif;
        cursor: pointer;
        z-index: 9999;
        pointer-events: auto;
        padding: 0;
        margin: 0;
    }

    #all-menu-wrapper .all-categories-menu .menu-close-x:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    /* ------------------------------------------------------------------
       nav.navbar inside #all-menu-wrapper — Bootstrap element that sits
       between .all-categories-menu and .menu-group, must be in flex chain
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu > nav,
    #all-menu-wrapper .all-categories-menu .navbar {
        flex: 1 1 auto;
        min-height: 0;
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* ------------------------------------------------------------------
       SCROLL AREA inside #all-menu-wrapper
       flex: 1 + min-height: 0 + overflow-y: auto = scrollable
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .menu-group {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(48px + env(safe-area-inset-bottom));
        position: static !important; /* ← force static so dropdown skips it */
        display: block !important;
        width: 100% !important;
    }

    #all-menu-wrapper .all-categories-menu .menu-group::-webkit-scrollbar {
        width: 6px;
    }

    #all-menu-wrapper
        .all-categories-menu
        .menu-group::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #all-menu-wrapper
        .all-categories-menu
        .menu-group::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 4px;
    }

    #all-menu-wrapper
        .all-categories-menu
        .menu-group::-webkit-scrollbar-thumb:hover {
        background: #555555;
    }

    /* ------------------------------------------------------------------
       NAV LIST — force block, kill all Bootstrap flex/center overrides
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .navbar-nav,
    #all-menu-wrapper .all-categories-menu ul.nav,
    #all-menu-wrapper .all-categories-menu ul.navbar-nav {
        display: block !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        float: none !important;
    }

    /* ------------------------------------------------------------------
       NAV ITEMS — parent categories
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .nav-item {
        display: block !important;
        width: 100% !important;
        float: none !important;
        flex: unset !important;
        border-bottom: 1px solid #eeeeee;
        text-align: left !important;
        position: static !important;
    }

    #all-menu-wrapper .all-categories-menu .nav-item .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 12px 16px !important;
        color: #333333 !important;
        text-decoration: none !important;
        text-align: left !important;
        box-sizing: border-box !important;
        position: relative !important;
        background-color: transparent !important;
        float: none !important;
    }

    #all-menu-wrapper .all-categories-menu .nav-item .nav-link:hover {
        background-color: #f7f7f7 !important;
        color: #333333 !important;
    }

    /* ------------------------------------------------------------------
       DROPDOWN TOGGLE ARROW
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .dropdown-toggle {
        padding-right: 40px !important;
    }

    #all-menu-wrapper .all-categories-menu .dropdown-toggle::after {
        content: "" !important;
        border: none !important;
        border-top: 0.3em solid transparent !important;
        border-bottom: 0.3em solid transparent !important;
        border-left: 0.3em solid #666666 !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        vertical-align: unset !important;
    }

    /* ------------------------------------------------------------------
       DROPDOWN BASE
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .dropdown {
        display: block !important;
        position: static !important;
    }

    /* ------------------------------------------------------------------
       DROPDOWN PANEL — slides in over parent list, scrolls independently
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .dropdown-menu {
        position: absolute !important;
        left: -100% !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
        transition: left 0.5s cubic-bezier(0, 1, 0.5, 1) !important;
        display: block !important;
        background-color: #ffffff !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        float: none !important;
        min-width: unset !important;
        box-shadow: none !important;
    }

    /* Show active panel */
    #all-menu-wrapper .all-categories-menu .dropdown.show > .dropdown-menu,
    #all-menu-wrapper .all-categories-menu .nav-item.show > .dropdown-menu,
    #all-menu-wrapper .all-categories-menu li.show > .dropdown-menu {
        left: 0 !important;
        visibility: visible !important;
    }

    /* Hard block hover open (click only) */
    #all-menu-wrapper .all-categories-menu .dropdown:hover > .dropdown-menu,
    #all-menu-wrapper .all-categories-menu .nav-item:hover > .dropdown-menu,
    #all-menu-wrapper .all-categories-menu li:hover > .dropdown-menu {
        left: -100% !important;
        visibility: hidden !important;
    }

    /* Keep active panel visible even while hovering */
    #all-menu-wrapper
        .all-categories-menu
        .dropdown.show:hover
        > .dropdown-menu,
    #all-menu-wrapper
        .all-categories-menu
        .nav-item.show:hover
        > .dropdown-menu {
        left: 0 !important;
        visibility: visible !important;
    }

    /* ------------------------------------------------------------------
       BACK BUTTON
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .back-button-wrapper {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: #ffffff;
        flex-shrink: 0;
    }

    #all-menu-wrapper .all-categories-menu .back-button {
        display: block;
        padding: 12px 16px;
        background-color: #f3f3f3;
        border: none;
        border-bottom: 1px solid #dddddd;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: #111111;
    }

    #all-menu-wrapper .all-categories-menu .back-button::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 0.3em solid transparent;
        border-bottom: 0.3em solid transparent;
        border-right: 0.3em solid #666666;
        margin-right: 8px;
        vertical-align: middle;
    }

    #all-menu-wrapper .all-categories-menu .back-button:hover {
        background-color: #e8e8e8;
    }

    /* ------------------------------------------------------------------
       SUBCATEGORY ITEMS inside dropdown panel
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .dropdown-item {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #eeeeee;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        background-color: transparent !important;
    }

    #all-menu-wrapper .all-categories-menu .dropdown-item:hover,
    #all-menu-wrapper .all-categories-menu .dropdown-item:focus {
        background-color: transparent !important;
    }

    #all-menu-wrapper .all-categories-menu .dropdown-item .dropdown-link {
        display: block !important;
        padding: 12px 16px 12px 32px !important;
        color: #333333 !important;
        text-decoration: none !important;
        text-align: left !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    #all-menu-wrapper .all-categories-menu .dropdown-item .dropdown-link:hover {
        background-color: #f7f7f7 !important;
    }

    /* ------------------------------------------------------------------
       VIEW ALL LINK
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .view-all-item {
        border-bottom: 2px solid #dddddd !important;
    }

    #all-menu-wrapper .all-categories-menu .view-all-link {
        font-weight: 700 !important;
        padding-left: 16px !important;
    }

    /* ------------------------------------------------------------------
       HIERARCHY LEVELS — indentation + weight
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .level-1 .level-1-link {
        font-weight: 600 !important;
        padding-left: 16px !important;
    }

    #all-menu-wrapper .all-categories-menu .level-2 .level-2-link {
        padding-left: 32px !important;
        font-weight: 400 !important;
    }

    #all-menu-wrapper .all-categories-menu .level-3 .level-3-link {
        padding-left: 48px !important;
        font-weight: 400 !important;
        color: #555555 !important;
    }

    #all-menu-wrapper .all-categories-menu .level-4 .level-4-link {
        padding-left: 64px !important;
        font-weight: 400 !important;
        color: #666666 !important;
    }

    #all-menu-wrapper .all-categories-menu .level-5 .level-5-link {
        padding-left: 80px !important;
        font-weight: 400 !important;
        color: #777777 !important;
    }

    /* ------------------------------------------------------------------
       SECTION HEADER
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .section-header {
        display: block;
        padding: 12px 16px;
        background-color: #f3f3f3;
        font-weight: 700;
        font-size: 14px;
        color: #111111;
    }

    /* ------------------------------------------------------------------
       DESKTOP "ALL" TOGGLE BUTTON (in main nav bar)
    ------------------------------------------------------------------ */
    .desktop-all-toggle {
        background: none;
        border: none;
        cursor: pointer;
        font-size: inherit;
        padding: 0.5rem 1rem;
        color: inherit;
    }

    .desktop-all-toggle:hover {
        opacity: 0.8;
    }

    .desktop-all-toggle:focus {
        outline: 2px solid #007bff;
        outline-offset: 2px;
    }

    /* ------------------------------------------------------------------
       SCROLLBAR — dropdown child panels
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }

    #all-menu-wrapper
        .all-categories-menu
        .dropdown-menu::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #all-menu-wrapper
        .all-categories-menu
        .dropdown-menu::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 4px;
    }

    #all-menu-wrapper
        .all-categories-menu
        .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: #555555;
    }

    /* ------------------------------------------------------------------
       USER ACCOUNT DROPDOWN inside header bar
    ------------------------------------------------------------------ */
    #all-menu-wrapper .all-categories-menu .user-menu-wrapper {
        position: relative;
        width: 100%;
    }

    #all-menu-wrapper .all-categories-menu .user-menu-wrapper .popover {
        display: none !important;
        position: absolute !important;
        left: 0 !important;
        top: 100% !important;
        width: 100% !important;
        background-color: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-top: none !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #all-menu-wrapper .all-categories-menu .user-menu-wrapper:hover .popover {
        display: block !important;
    }

    #all-menu-wrapper .all-categories-menu .user-menu-wrapper .popover .nav {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #all-menu-wrapper
        .all-categories-menu
        .user-menu-wrapper
        .popover
        .nav-item {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #eeeeee !important;
        flex: unset !important;
        text-align: left !important;
    }

    #all-menu-wrapper
        .all-categories-menu
        .user-menu-wrapper
        .popover
        .nav-item:last-child {
        border-bottom: none !important;
    }

    #all-menu-wrapper
        .all-categories-menu
        .user-menu-wrapper
        .popover
        .nav-item
        a {
        display: block !important;
        padding: 12px 16px !important;
        color: #333333 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        width: 100% !important;
        text-align: left !important;
    }

    #all-menu-wrapper
        .all-categories-menu
        .user-menu-wrapper
        .popover
        .nav-item
        a:hover {
        background-color: #f7f7f7 !important;
    }

    #all-menu-wrapper
        .all-categories-menu
        .user-menu-wrapper
        .close-menu
        i.fa-user-circle {
        font-size: 20px;
        margin-right: 10px;
    }

    #all-menu-wrapper
        .all-categories-menu
        .user-menu-wrapper
        .close-menu
        i.dropdown-indicator {
        font-size: 10px !important;
        margin-left: 6px;
        margin-right: 0;
        transition: transform 0.3s ease;
    }

    #all-menu-wrapper
        .all-categories-menu
        .user-menu-wrapper:hover
        .dropdown-indicator {
        transform: rotate(180deg);
    }
} /* end @media (min-width: 768px) */