﻿.mega-menu-pro {
    display: none;
}

@media all and (max-width: 1024px) {
    .header-menu ul .back-button span:after {
        content: '\e925' !important;
    }
}

@media all and (min-width: 1025px) {
    .menu-title,
    .close-menu {
        display: none;
    }

    .mega-menu-responsive {
        display: none !important;
    }

    .home-page-body .mega-menu-pro {
        position: relative;
        z-index: 2;
    }

    .mega-menu-pro {
        background-color: #eee;
        text-align: right;
        display: block;
        width: min(1280px, calc(100vw - 40px)) !important;
        max-width: 1280px;
        margin: 0 auto;
        position: relative;
        border-radius: 20px !important;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Main dropdown: responsive width + viewport-aware height */
    .mega-menu-pro > li > .menu-categories-container {
        --mega-menu-height: calc(100vh - 190px);
        background-color: #fff;
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: min(1280px, calc(100vw - 230px));
        max-width: 1280px;
        height: var(--mega-menu-height);
        max-height: var(--mega-menu-height);
        min-height: 320px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top: 1px solid #eee;
        overflow: hidden;
        box-shadow: 0 10px 10px 0 rgba(0,0,0,.25);
        box-sizing: border-box;
        z-index: 9999;
        flex-direction: row;
        direction: rtl;
        align-items: stretch;
    }

    .mega-menu-pro > li:hover > .menu-categories-container,
    .mega-menu-pro > li:focus-within > .menu-categories-container {
        display: flex;
    }

    /* Right side / parent categories - independent scroll */
    .mega-menu-pro .parent-categories-scroll {
        direction: rtl;
        width: 210px;
        min-width: 210px;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        background: #f8f8f8;
        border-left: 1px solid #ddd;
        scrollbar-width: thin;
        scrollbar-color: #bdbdbd transparent;
    }

    .mega-menu-pro .category-item {
        display: block;
        width: 100%;
        min-height: 54px;
        text-align: right;
        padding: 13px 10px;
        border-bottom: 1px solid #ddd;
        background-color: #f8f8f8;
        box-sizing: border-box;
    }

    .mega-menu-pro .category-item > a > span {
        font-weight: bold;
    }

    .mega-menu-pro .category-item:hover,
    .mega-menu-pro .category-item.active {
        background-color: #fff;
    }

    .mega-menu-pro .category-item:hover > a > span,
    .mega-menu-pro .category-item.active > a > span {
        color: #dc1d7f;
    }

    .mega-menu-pro .category-item:last-child {
        border-bottom-right-radius: 10px;
    }

    .category-item > a {
        background-position-x: right;
        background-position-y: center;
        background-repeat: no-repeat;
        padding-right: 35px;
        display: block;
        min-height: 27px;
        line-height: 27px;
        box-sizing: border-box;
    }

    /* Left/content side */
    .mega-menu-pro .subcategories-pane {
        direction: rtl;
        position: relative;
        height: 100%;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        background: #fff;
    }

    .mega-menu-pro .sub-categories-container {
        display: none;
        position: absolute;
        inset: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        background: #fff;
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: #bdbdbd transparent;
    }

    .mega-menu-pro .sub-categories-container.active {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    /* Masonry-style columns: removes vertical gaps caused by CSS grid rows. */
    .mega-menu-pro .sub-categories-container .sub-category-items {
        display: block;
        column-width: 185px;
        column-gap: 20px;
        min-width: 0;
        flex: 1 1 auto;
        padding: 16px 20px 28px 12px;
        box-sizing: border-box;
    }

    .mega-menu-pro .sub-category-group {
        display: inline-block;
        width: 100%;
        min-width: 0;
        margin: 0 0 8px 0;
        padding: 0;
        vertical-align: top;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A parent with no children should not reserve an empty block below it. */
    .mega-menu-pro .sub-category-group:has(> .sub-category-item:only-child) {
        margin-bottom: 0;
    }

    .mega-menu-pro .sub-category-item {
        display: block;
        width: 100%;
        padding: 9px 0;
        font-weight: bold;
        border-bottom: 1px dashed #ddd;
        position: relative;
        box-sizing: border-box;
    }

    .mega-menu-pro .sub-category-item:after {
        content: '\e921';
        display: inline-block;
        margin-right: 3px;
        font-family: 'prisma';
        font-size: 10px;
        color: #888;
        transition: all .3s;
    }

    .mega-menu-pro .sub-category-item2 {
        display: block;
        width: 100%;
        padding: 5px 10px 5px 0;
        color: #555;
        box-sizing: border-box;
    }

    .mega-menu-pro .sub-category-item2:before {
        content: '\e924';
        display: inline-block;
        margin-left: 5px;
        font-family: 'prisma';
        font-size: 10px;
        color: #ddd;
        transition: all .3s;
    }

    .mega-menu-pro .sub-categories-container .sub-category-items a:hover {
        color: #dc1d7f;
    }

    .mega-menu-pro .sub-categories-container .featured-items {
        width: 270px;
        min-width: 270px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .mega-menu-pro .sub-categories-container .featured-items .featured-manufacgurers {
        min-height: 0;
        flex: 1 1 auto;
    }

    .mega-menu-pro .sub-categories-container .featured-items .featured-manufacgurer {
        display: inline-block;
        margin: 0 0 11px 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        cursor: pointer;
        height: 60px;
        width: 60px;
        vertical-align: middle;
        text-align: center;
    }

    .mega-menu-pro .sub-categories-container .featured-items .featured-manufacgurer:hover {
        box-shadow: 0 0 5px 3px rgba(0,0,0,.07);
    }

    .mega-menu-pro .sub-categories-container .featured-items .featured-manufacgurer > img {
        border-radius: 5px;
    }

    .mega-menu-pro .featured-adv img {
        margin-bottom: 10px !important;
        max-width: 100%;
        height: auto;
    }

    /* Thin Digikala-like scrollbars */
    .mega-menu-pro .parent-categories-scroll::-webkit-scrollbar,
    .mega-menu-pro .sub-categories-container::-webkit-scrollbar {
        width: 6px;
    }

    .mega-menu-pro .parent-categories-scroll::-webkit-scrollbar-track,
    .mega-menu-pro .sub-categories-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .mega-menu-pro .parent-categories-scroll::-webkit-scrollbar-thumb,
    .mega-menu-pro .sub-categories-container::-webkit-scrollbar-thumb {
        background: #bdbdbd;
        border-radius: 10px;
    }

    .mega-menu-pro > li {
        min-width: 50px;
        display: inline-block;
        padding: 10px 25px;
        cursor: pointer;
        font-size: 12px !important;
        color: #222 !important;
        border-bottom: 2px solid transparent;
        box-sizing: border-box;
    }

    .mega-menu-pro > li:hover {
        background-color: #f5f5f5;
        border-color: #dc1d7f;
    }

    .mega-menu-pro > li.all-categories > a > span {
        margin-right: 5px;
    }

    .mega-menu-pro > li.all-categories > a > span:after {
        content: '\e908';
        position: absolute;
        top: 50%;
        right: 30px;
        font-family: prisma;
        font-size: 15px;
        color: #333;
        -webkit-transform: translate(50%,-50%);
        -ms-transform: translate(50%,-50%);
        transform: translate(50%,-50%);
        cursor: pointer;
    }

    /* Small desktop / laptop */
    @media all and (max-width: 1250px) {
        .mega-menu-pro > li > .menu-categories-container {
            width: calc(100vw - 24px);
        }

        .mega-menu-pro .parent-categories-scroll {
        direction: rtl;
            width: 190px;
            min-width: 190px;
        }

        .mega-menu-pro .sub-categories-container .featured-items {
            width: 230px;
            min-width: 230px;
        }

        .mega-menu-pro .sub-categories-container .sub-category-items {
            column-width: 165px;
            column-gap: 14px;
            padding-right: 14px;
        }
    }

    @media all and (max-width: 1100px) {
        .mega-menu-pro .parent-categories-scroll {
        direction: rtl;
            width: 180px;
            min-width: 180px;
        }

        .mega-menu-pro .sub-categories-container .featured-items {
            display: none;
        }
    }
}
