/*
 * ==========================================
 * AUTO WOOCOMMERCE MEGA MENU
 * FRONTEND CSS
 * VERSION 3.1
 * ==========================================
 */


/*
 * ==========================================
 * ROOT
 * ==========================================
 */

.auto-mega-menu {

    --awmm-border: #e7e7e7;

    --awmm-text: #222;

    --awmm-muted: #777;

    --awmm-hover: #f5f5f5;

    --awmm-active: #f3c623;

    width: 100%;

    direction: rtl;

    position: relative;

    z-index: 9999;

    font-family: inherit;

    display: grid;

    grid-template-columns:
        25% 25% 50%;

    height:
        var(--awmm-menu-height);

    min-height:
        350px;

    background:
        #fff;

    border:
        1px solid var(--awmm-border);

    border-radius:
        12px;

    overflow:
        hidden;

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.10);

    /*
     * جلوگیری از Scroll Anchoring
     */

    overflow-anchor:
        none;
}


/*
 * ==========================================
 * BOX SIZING
 * ==========================================
 */

.auto-mega-menu *,
.auto-mega-menu *::before,
.auto-mega-menu *::after {

    box-sizing:
        border-box;
}


/*
 * ==========================================
 * COLUMNS
 * ==========================================
 */

.mega-menu-right,
.mega-menu-middle,
.mega-menu-left {

    width: 100%;

    height: 100%;

    overflow-y: auto;

    scrollbar-width: thin;

    background:
        #fff;

    overflow-anchor:
        none;
}


.mega-menu-right {

    background:
        #fafafa;

    border-left:
        1px solid var(--awmm-border);
}


.mega-menu-middle {

    border-left:
        1px solid var(--awmm-border);
}


/*
 * ==========================================
 * LIST
 * ==========================================
 */

.mega-parent-list,
.mega-level2-list {

    width: 100%;

    display:
        flex;

    flex-direction:
        column;

    overflow-anchor:
        none;
}


.mega-parent-item,
.mega-level2-item {

    width: 100%;

    overflow-anchor:
        none;
}


/*
 * ==========================================
 * LINKS
 * ==========================================
 */

.mega-parent-link,
.mega-level2-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    width:
        100%;

    min-height:
        52px;

    padding:
        13px 18px;

    color:
        var(--awmm-text);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        500;

    transition:
        background .2s ease,
        color .2s ease;
}


.mega-parent-link {

    border-right:
        3px solid transparent;
}


.mega-level2-link {

    border-right:
        3px solid transparent;

    border-bottom:
        1px solid #f0f0f0;
}


.mega-parent-link:hover,
.mega-level2-link:hover {

    background:
        var(--awmm-hover);

    color:
        var(--awmm-text);

    text-decoration:
        none;
}


.mega-parent-item.active >
.mega-parent-link,
.mega-level2-item.active >
.mega-level2-link {

    background:
        var(--awmm-active);

    border-right-color:
        #222;

    font-weight:
        500;
}


/*
 * ==========================================
 * TITLES
 * ==========================================
 */

.mega-parent-title,
.mega-level2-title {

    flex:
        1;

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.mega-parent-count,
.mega-level2-count {

    font-size:
        11px;

    color:
        var(--awmm-muted);

    white-space:
        nowrap;
}


/*
 * ==========================================
 * ARROWS
 * ==========================================
 */

.mega-mobile-arrow,
.mega-level2-arrow {

    flex:
        0 0 auto;

    width:
        7px;

    height:
        7px;

    border-left:
        2px solid currentColor;

    border-bottom:
        2px solid currentColor;

    transform:
        rotate(45deg);

    transition:
        transform .2s ease;
}


.mega-parent-item.active >
.mega-parent-link
.mega-mobile-arrow,
.mega-level2-item.active >
.mega-level2-link
.mega-level2-arrow {

    transform:
        rotate(-45deg);
}


/*
 * ==========================================
 * PANELS
 * ==========================================
 */

.mega-category-panel,
.mega-level2-panel,
.mega-level3-panel {

    display:
        none;

    width:
        100%;

    min-height:
        100%;

    padding:
        24px;

    animation:
        awmmFadeIn .18s ease;

    overflow-anchor:
        none;
}


.mega-level2-panel.active,
.mega-level3-panel.active {

    display:
        block;
}


.mega-parent-item
.mobile-inline-panel {

    display:
        none;
}


/*
 * ==========================================
 * LEVEL 3 PANEL
 * ==========================================
 */

.mega-level3-panel {

    padding:
        24px;
}


/*
 * ==========================================
 * HEADER
 * ==========================================
 */

.mega-panel-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding-bottom:
        18px;

    margin-bottom:
        20px;

    border-bottom:
        1px solid var(--awmm-border);
}


.mega-panel-title {

    margin:
        0;

    padding:
        0;

    color:
        var(--awmm-text);

    font-size:
        21px;

    font-weight:
        700;

    line-height:
        1.5;
}


.mega-view-parent {

    color:
        #555;

    text-decoration:
        none;

    font-size:
        13px;

    white-space:
        nowrap;
}


.mega-view-parent:hover {

    color:
        #000;

    text-decoration:
        none;
}


/*
 * ==========================================
 * LEVEL 3 GRID
 * ==========================================
 */

.mega-level3-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            var(--awmm-columns),
            minmax(0,1fr)
        );

    gap:
        18px;

    width:
        100%;
}


/*
 * ==========================================
 * CARD
 * ==========================================
 */

.mega-child-card {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-width:
        0;

    background:
        #fff;

    border:
        1px solid var(--awmm-border);

    border-radius:
        10px;

    overflow:
        hidden;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.mega-child-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #d4d4d4;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.08);

    color:
        inherit;

    text-decoration:
        none;
}


/*
 * ==========================================
 * IMAGE
 * ==========================================
 */

.mega-child-image,
.mega-child-image-placeholder {

    display:
        block;

    width:
        100%;

    height:
        var(--awmm-card-image-height);

    object-fit:
        cover;

    background:
        #f5f5f5;
}


.mega-child-image-placeholder {

    background:
        linear-gradient(
            135deg,
            #f5f5f5,
            #e9e9e9
        );

    position:
        relative;
}


.mega-child-image-placeholder::after {

    content:
        '';

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        35px;

    height:
        35px;

    border:
        2px solid #ccc;

    border-radius:
        50%;

    transform:
        translate(-50%,-50%);
}


/*
 * ==========================================
 * CARD INFO
 * ==========================================
 */

.mega-child-info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        12px;

    min-height:
        65px;

    justify-content:
        center;
}


.mega-child-title {

    display:
        block;

    color:
        var(--awmm-text);

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.6;

    text-align:
        center;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    /*white-space:*/
    /*    nowrap;*/
}


.mega-child-count {

    display:
        block;

    color:
        var(--awmm-muted);

    font-size:
        11px;

    text-align:
        center;
}


/*
 * ==========================================
 * MOBILE LEVEL 3
 * ==========================================
 */

.mega-mobile-level3 {

    display:
        none;

    overflow-anchor:
        none;
}


/*
 * ==========================================
 * NO CHILDREN
 * ==========================================
 */

.mega-no-children {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        180px;

    color:
        #888;

    font-size:
        14px;

    text-align:
        center;

    padding:
        20px;
}


/*
 * ==========================================
 * EMPTY
 * ==========================================
 */

.awmm-empty,
.awmm-notice {

    width:
        100%;

    padding:
        25px;

    background:
        #fafafa;

    border:
        1px solid #eee;

    border-radius:
        10px;

    text-align:
        center;
}


/*
 * ==========================================
 * ANIMATION
 * ==========================================
 */

@keyframes awmmFadeIn {

    from {

        opacity:
            0;

        transform:
            translateX(-8px);
    }

    to {

        opacity:
            1;

        transform:
            translateX(0);
    }
}


/*
 * ==========================================
 * DESKTOP RESPONSIVE
 * ==========================================
 */

@media (max-width:1100px) {

    .mega-level3-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }
}


@media (max-width:900px) {

    .mega-level3-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .mega-level2-panel,
    .mega-level3-panel {

        padding:
            18px;
    }
}


/*
 * ==========================================
 * MOBILE
 * ==========================================
 */

@media (max-width:768px) {

    /*
     * ==============================
     * Main container
     * ==============================
     */

    .auto-mega-menu {

        display:
            block;

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        border-radius:
            8px;

        overflow:
            visible;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Level 1
     * ==============================
     */

    .mega-menu-right {

        width:
            100%;

        height:
            auto;

        border-left:
            none;

        overflow:
            visible;

        background:
            #fff;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Desktop columns hidden
     * ==============================
     */

    .mega-menu-middle,
    .mega-menu-left {

        display:
            none;
    }


    /*
     * ==============================
     * Parent list
     * ==============================
     */

    .mega-parent-list {

        display:
            block;

        margin:
            0;

        padding:
            0;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Parent item
     * ==============================
     */

    .mega-parent-item {

        border-bottom:
            1px solid var(--awmm-border);

        background:
            #fff;

        position:
            relative;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Parent link
     * ==============================
     */

    .mega-parent-link {

        width:
            100%;

        min-height:
            55px;

        padding:
            15px 16px;

        border-right:
            none;

        border-bottom:
            none;

        background:
            #fff;

        font-size:
            15px;

        -webkit-tap-highlight-color:
            transparent;

        user-select:
            none;

        overflow-anchor:
            none;
    }


    .mega-parent-link:hover {

        background:
            #f8f8f8;
    }


    /*
     * ==============================
     * Active parent
     * ==============================
     */

    .mega-parent-item.active >
    .mega-parent-link {

        background:
            var(--awmm-active);

        border-right:
            none;

        color:
            #111;
    }


    /*
     * ==============================
     * Arrow
     * ==============================
     */

    .mega-mobile-arrow {

        display:
            block;
    }


    /*
     * ==============================
     * Mobile parent panel
     *
     * CLOSED BY DEFAULT
     * ==============================
     */

    .mega-parent-item
    .mobile-inline-panel {

        display:
            block;

        width:
            100%;

        min-height:
            0;

        max-height:
            0;

        height:
            0;

        overflow:
            hidden;

        padding:
            0;

        margin:
            0;

        background:
            #fff;

        opacity:
            0;

        visibility:
            hidden;

        overflow-anchor:
            none;

        /*
         * مهم:
         * transition روی height نداریم
         * تا Layout باعث پرش Scroll نشود.
         */

        transition:
            opacity .15s ease;
    }


    /*
     * ==============================
     * Mobile parent panel OPEN
     * ==============================
     */

    .mega-parent-item.active
    .mobile-inline-panel {

        display:
            block;

        max-height:
            none;

        height:
            auto;

        overflow:
            visible;

        padding:
            16px;

        margin:
            0;

        background:
            #fff;

        opacity:
            1;

        visibility:
            visible;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Header
     * ==============================
     */

    .mobile-inline-panel
    .mega-panel-header {

        margin-bottom:
            12px;

        padding-bottom:
            10px;
    }


    .mobile-inline-panel
    .mega-panel-title {

        font-size:
            18px;
    }


    .mobile-inline-panel
    .mega-view-parent {

        font-size:
            12px;
    }


    /*
     * ==============================
     * Level 2
     * ==============================
     */

    .mobile-inline-panel
    .mega-level2-list {

        display:
            block;

        width:
            100%;

        overflow-anchor:
            none;
    }


    .mobile-inline-panel
    .mega-level2-item {

        border-bottom:
            1px solid #eee;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Level 2 link
     * ==============================
     */

    .mobile-inline-panel
    .mega-level2-link {

        min-height:
            48px;

        padding:
            12px 10px;

        border-right:
            none;

        font-size:
            14px;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Active Level 2
     * ==============================
     */

    .mobile-inline-panel
    .mega-level2-item.active >
    .mega-level2-link {

        border-right:
            none;

        background:
            #f8f8f8;
    }


    /*
     * ==============================
     * Level 3 CLOSED
     * ==============================
     */

    .mobile-inline-panel
    .mega-mobile-level3 {

        display:
            none;

        padding:
            10px 0 14px;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Level 3 OPEN
     * ==============================
     */

    .mobile-inline-panel
    .mega-level2-item.active
    .mega-mobile-level3 {

        display:
            block;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Level 3 Grid
     * ==============================
     */

    .mobile-inline-panel
    .mega-level3-grid {

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            10px;

        width:
            100%;

        overflow-anchor:
            none;
    }


    /*
     * ==============================
     * Cards
     * ==============================
     */

    .mobile-inline-panel
    .mega-child-card {

        border-radius:
            8px;

        transform:
            none;

        overflow-anchor:
            none;
    }


    .mobile-inline-panel
    .mega-child-card:hover {

        transform:
            none;

        box-shadow:
            0 5px 15px
            rgba(0,0,0,.06);
    }


    /*
     * ==============================
     * Images
     * ==============================
     */

    .mobile-inline-panel
    .mega-child-image,
    .mobile-inline-panel
    .mega-child-image-placeholder {

        height:
            120px;
    }


    /*
     * ==============================
     * Card info
     * ==============================
     */

    .mobile-inline-panel
    .mega-child-info {

        min-height:
            58px;

        padding:
            8px;

        gap:
            4px;
    }


    .mobile-inline-panel
    .mega-child-title {

        font-size:
            12px;
    }
}