/* ==============================================
   MOBILE MENU CSS
   ============================================== */

@media screen and (max-width: 768px) {
    /* Menu block styling (position controlled in mobile.css) */
    .block-superfish,
    #block-numart-light-mainnavigation,
    #block-numart-dark-mainnavigation,
    #block-belgrade-subtheme-mainnavigation {
        font-family: 'Cairo', sans-serif;
    }

    /* Toggle button styling */
    .sf-accordion-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    div.sf-accordion-toggle.sf-style-white a {
        background: white !important;
        border: none !important;
        color: black !important;
        font-weight: 400 !important;
        padding: 8px !important;
    }

    .orders-count-link {
        margin-left: 0 !important;
        padding-right: 1rem !important;
    }

    div.sf-accordion-toggle.sf-style-white > a:after {
        font-size: 1.7em !important;
    }

    .block-superfish a {
        color: white;
    }

    #superfish-main-accordion.sf-accordion.sf-expanded {
        position: fixed;
        top: 20px !important;
        right: 0 !important;
        width: 50vw;
        max-width: 400px;
        min-width: 220px;
        height: 100vh;
        background: rgba(30, 30, 30, 0.97);
        color: #fff !important;
        z-index: 1000000 !important;
        overflow-y: auto;
        box-sizing: border-box;
        box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.45);
        transition: opacity 0.5s cubic-bezier(.4, 1.7, .7, 1.1), transform 0.5s cubic-bezier(.4, 1.7, .7, 1.1);
    }

    #superfish-main-toggle {
        position: relative;
        font-size: 1.5rem !important;
    }

    #superfish-main {
        display: none !important;
    }

    #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-1 > a,
    #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-1 > span,
    #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-2 > a,
    #superfish-main-accordion.sf-accordion.sf-expanded .sf-depth-2 > span {
        color: #ffffff !important;
        background-color: #2c2a2a !important;
    }

    #superfish-main-accordion.sf-accordion.sf-expanded li {
        border-bottom: 1px solid rgb(161 156 156);
    }

    /* Expanded parent item - darker background */
    #superfish-main-accordion li.menuparent.sf-expanded > a,
    #superfish-main-accordion li.menuparent.sf-expanded > span {
        background-color: #1a1a1a !important;
    }

    /* All submenus - position relative to push content down */
    #superfish-main-accordion ul,
    ul.sf-menu.sf-accordion ul {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        display: none;
    }
    
    /* Override Superfish library defaults for accordion */
    ul.sf-menu.sf-accordion.sf-expanded ul,
    #superfish-main-accordion.sf-expanded ul {
        top: auto !important;
        left: auto !important;
        position: relative !important;
    }
    
    /* Show first level submenu when parent is expanded */
    #superfish-main-accordion li.sf-expanded > ul,
    #superfish-main-accordion li.menuparent.sf-expanded > ul,
    ul.sf-menu.sf-accordion li.sf-expanded > ul {
        display: block !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        top: auto !important;
        left: auto !important;
    }
    
    /* Override sf-hidden when expanded */
    #superfish-main-accordion li.sf-expanded > ul.sf-hidden {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Submenu container - dark background */
    #superfish-main-accordion ul ul,
    #superfish-main-accordion li.sf-expanded > ul {
        background-color: #414042 !important;
    }

    /* Submenu items - ensure visibility */
    #superfish-main-accordion ul li,
    #superfish-main-accordion ul ul li,
    #superfish-main-accordion li.sf-expanded > ul > li {
        background-color: #414042 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
    

    /* Submenu links - white text on dark background */
    #superfish-main-accordion ul li a,
    #superfish-main-accordion ul ul li a,
    #superfish-main-accordion li.sf-expanded > ul > li > a,
    #superfish-main-accordion .sf-depth-2 > a,
    #superfish-main-accordion .sf-depth-3 > a {
        background-color: #414042 !important;
        color: #ffffff !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px 15px !important;
        text-align: right !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
    
    /* Indent child item text (not background) */
    #superfish-main-accordion > li > ul > li > a {
        text-indent: 15px !important;
    }
    
    /* Further indent grandchild item text */
    #superfish-main-accordion > li > ul > li > ul > li > a {
        text-indent: 30px !important;
    }
    
    /* Second level (inside first level submenus) - always expanded */
    #superfish-main-accordion > li > ul li.menuparent > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }
    
    #superfish-main-accordion > li > ul li.menuparent > ul.sf-hidden {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Second level items with children - show plus to indicate has children */
    #superfish-main-accordion > li > ul li.menuparent > a::after,
    #superfish-main-accordion > li > ul li.menuparent > span::after {
        content: "\2b" !important; /* Plus to indicate has children */
    }
    
    /* When clicked/toggled - show minus */
    #superfish-main-accordion > li > ul li.menuparent.icon-toggled > a::after,
    #superfish-main-accordion > li > ul li.menuparent.icon-toggled > span::after {
        content: "\2212" !important; /* Minus when toggled */
    }

    .sf-depth-1 > a[href="/promotions"]::after {
        top: -10px;
        font-size: 8px;
    }

    /* Menu item links - RTL: text to right, toggle before text */
    #superfish-main-accordion li.menuparent > a,
    #superfish-main-accordion li.menuparent > span {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        position: relative;
        gap: 10px;
        text-align: right !important;
    }
    
    /* All menu links - RTL alignment */
    #superfish-main-accordion li > a,
    #superfish-main-accordion li > span {
        text-align: right !important;
        direction: rtl !important;
    }
    
    /* Submenu items with children - icon on left (same as level 1) */
    #superfish-main-accordion ul li.menuparent > a,
    #superfish-main-accordion ul li.menuparent > span {
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    /* Hide ::after for submenu items, use ::before instead */
    #superfish-main-accordion ul li.menuparent > a::after,
    #superfish-main-accordion ul li.menuparent > span::after {
        display: none !important;
        content: none !important;
    }
    
    /* Use ::before for submenu item icons (on the left) */
    #superfish-main-accordion ul li.menuparent > a::before,
    #superfish-main-accordion ul li.menuparent > span::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 18px;
        content: "\2b"; /* plus sign */
        flex-shrink: 0;
        opacity: 0.9;
        margin-left: 10px;
    }
    
    #superfish-main-accordion ul li.menuparent.sf-expanded > a::before,
    #superfish-main-accordion ul li.menuparent.sf-expanded > span::before {
        content: "\2212"; /* minus sign */
    }
    
    /* Hide Superfish cloned parent row to avoid duplicate item on expand */
    #superfish-main-accordion .sf-clone-parent {
        display: none !important;
    }

    /* Plus/Minus icons for expandable menu items */
    #superfish-main-accordion li.menuparent > a::after,
    #superfish-main-accordion li.menuparent > span::after {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1;
        font-size: 18px;
        flex-shrink: 0;
        opacity: 0.9;
        transition: content 0.3s ease, transform 0.3s ease;
        content: "\2b"; /* plus sign */
    }

    #superfish-main-accordion li.menuparent > a[aria-expanded="false"]::after,
    #superfish-main-accordion li.menuparent > span[aria-expanded="false"]::after {
        content: "\2b"; /* plus sign */
    }

    #superfish-main-accordion li.menuparent > a[aria-expanded="true"]::after,
    #superfish-main-accordion li.menuparent > span[aria-expanded="true"]::after {
        content: "\2212"; /* minus sign */
    }

    #superfish-main-accordion li.menuparent.sf-expanded > a::after,
    #superfish-main-accordion li.menuparent.sf-expanded > span::after {
        content: "\2212"; /* minus sign */
    }

    #superfish-main-accordion li {
        background-color: #414042 !important;
        color: white !important;
    }

    ul.sf-menu.sf-style-white a,
    ul.sf-menu.sf-style-white a:visited {
        color: white !important;
    }
}