/* =========================================================
   AJAXWEB PRODUCT MEGA MENU
========================================================= */

.ajaxweb-cat-wrapper,
.ajaxweb-cat-wrapper * {
    box-sizing: border-box;
}

.ajaxweb-cat-wrapper {
    --aw-primary: #2563eb;
    --aw-primary-soft: rgba(37, 99, 235, .08);
    --aw-text: #172033;
    --aw-muted: #718096;
    --aw-border: #e8edf4;
    --aw-bg: #ffffff;

    position: relative;
    width: 100%;
    max-width: 100%;

    display: flex;
    align-items: stretch;

    background: var(--aw-bg);

    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(15, 23, 42, .10),
        0 4px 18px rgba(15, 23, 42, .05);

    direction: rtl;

    isolation: isolate;
}


/* =========================================================
   POSITION
========================================================= */

.ajaxweb-pos-right {
    flex-direction: row;
}

.ajaxweb-pos-left {
    flex-direction: row-reverse;
}

.ajaxweb-pos-top {
    flex-direction: column;
}


/* =========================================================
   TABS
========================================================= */

.ajaxweb-tabs {
    position: relative;
    z-index: 5;

    flex: 0 0 128px;

    width: 128px;

    display: flex;
    flex-direction: column;

    padding: 8px;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f4f7fb 100%
        );

    border-left: 1px solid var(--aw-border);

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .35) transparent;
}

.ajaxweb-pos-left .ajaxweb-tabs {
    border-left: 0;
    border-right: 1px solid var(--aw-border);
}


/* =========================================================
   TAB
========================================================= */

.ajaxweb-tab {
    position: relative;

    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    flex: 0 0 auto;

    padding: 13px 12px;

    border: 1px solid transparent;
    border-radius: 15px;

    background: transparent;

    color: var(--aw-muted);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    line-height: 1.45;

    text-align: right;

    cursor: pointer;

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

.ajaxweb-tab:hover {
    color: var(--aw-primary);

    background: rgba(255, 255, 255, .9);

    border-color: rgba(37, 99, 235, .08);

    transform: translateX(-2px);
}

.ajaxweb-tab.active {
    color: var(--aw-primary);

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .12),
            rgba(37, 99, 235, .04)
        );

    border-color: rgba(37, 99, 235, .13);

    box-shadow:
        0 8px 24px rgba(37, 99, 235, .08);
}


/* active indicator */

.ajaxweb-tab::after {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    right: -8px;

    width: 3px;

    border-radius: 10px;

    background: transparent;

    opacity: 0;

    transition: .22s ease;
}

.ajaxweb-tab.active::after {
    right: -8px;

    background: var(--aw-primary);

    opacity: 1;
}

.ajaxweb-pos-left .ajaxweb-tab::after {
    right: auto;
    left: -8px;
}

.ajaxweb-pos-left .ajaxweb-tab.active::after {
    left: -8px;
}


/* =========================================================
   TAB ICON
========================================================= */

.ajaxweb-icon {
    width: 24px;
    height: 24px;

    min-width: 24px;
    min-height: 24px;

    flex: 0 0 24px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    line-height: 0;

    overflow: hidden;
}

.ajaxweb-icon svg {
    width: 21px;
    height: 21px;

    max-width: 100%;
    max-height: 100%;

    display: block;

    color: currentColor;

    fill: currentColor;

    flex: 0 0 auto;
}

.ajaxweb-icon img {
    width: 22px;
    height: 22px;

    max-width: 100%;
    max-height: 100%;

    display: block;

    object-fit: contain;

    flex: 0 0 auto;
}


/* =========================================================
   TAB LABEL
========================================================= */

.ajaxweb-tab-label {
    min-width: 0;

    flex: 1 1 auto;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   COUNT
========================================================= */

.ajaxweb-count {
    flex: 0 0 auto;

    min-width: 21px;
    height: 21px;

    padding: 0 6px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #eef2f7;

    color: #64748b;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   CONTENT
========================================================= */

.ajaxweb-content {
    position: relative;

    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(100, 116, 139, .55)
        transparent;

    background: #fff;
}


/* chrome scrollbar */

.ajaxweb-content::-webkit-scrollbar,
.ajaxweb-tabs::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.ajaxweb-content::-webkit-scrollbar-track,
.ajaxweb-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.ajaxweb-content::-webkit-scrollbar-thumb,
.ajaxweb-tabs::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);

    border-radius: 999px;
}

.ajaxweb-content::-webkit-scrollbar-thumb:hover,
.ajaxweb-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .55);
}


/* =========================================================
   CONTENT PANEL
========================================================= */

.ajaxweb-tab-content {
    position: relative;

    display: none;

    width: 100%;

    min-height: 100%;

    padding: 24px 28px 30px;

    background: #fff;
}

.ajaxweb-tab-content.active {
    display: block;
}


/* =========================================================
   VIEW ALL HEADER
========================================================= */

.ajaxweb-view-all {
    width: 100%;

    margin: 0;

    padding: 0;
}


.ajaxweb-view-all-link {
    width: 100%;

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    color: var(--aw-primary);

    text-decoration: none;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.5;

    white-space: nowrap;

    overflow: hidden;

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


.ajaxweb-view-all-link:hover {
    color: #174bc4;

    transform: translateX(-2px);
}


.ajaxweb-view-icon {
    width: 22px;
    height: 22px;

    min-width: 22px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    line-height: 0;

    flex: 0 0 22px;

    overflow: hidden;
}


.ajaxweb-view-icon svg {
    width: 20px;
    height: 20px;

    max-width: 100%;
    max-height: 100%;

    display: block;

    color: currentColor;

    fill: currentColor;
}


.ajaxweb-view-icon img {
    width: 20px;
    height: 20px;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    display: block;
}


.ajaxweb-view-title {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.ajaxweb-view-title strong {
    font-weight: 800;
}


/* =========================================================
   DIVIDER
========================================================= */

.ajaxweb-divider {
    width: 100%;

    margin: 12px 0 22px;

    border: 0;

    border-top: 1px solid var(--aw-border);

    height: 0;
}


/* =========================================================
   GRID
========================================================= */

.ajaxweb-content-grid {
    display: grid;

    align-items: stretch;

    width: 100%;

    gap: 28px 30px;
}


/* =========================================================
   COLUMN
========================================================= */

.ajaxweb-col {
    min-width: 0;

    position: relative;

    padding-inline-start: 15px;

    border-inline-start: 1px solid transparent;

    align-self: stretch;
}

.ajaxweb-col:hover {
    border-inline-start-color:
        rgba(37, 99, 235, .10);
}


/* =========================================================
   GROUP HEADING
========================================================= */

.ajaxweb-group-heading {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 26px;

    margin: 0 0 14px;

    padding-inline-start: 11px;

    border-inline-start: 2px solid var(--aw-primary);
}


.ajaxweb-group-heading a {
    display: block;

    color: var(--aw-text);

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.5;

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


.ajaxweb-group-heading a:hover {
    color: var(--aw-primary);

    transform: translateX(-2px);
}


/* =========================================================
   SUB CATEGORY
========================================================= */

.ajaxweb-subcat-list {
    list-style: none;

    margin: 0;
    padding: 0;
}


.ajaxweb-subcat-item {
    margin: 0;
    padding: 0;
}


.ajaxweb-subcat-item a {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 31px;

    gap: 7px;

    padding: 4px 0;

    color: #687891;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.6;

    transition:
        color .18s ease,
        padding-right .18s ease;
}


.ajaxweb-subcat-item a:hover {
    color: var(--aw-primary);

    padding-right: 4px;
}


.ajaxweb-arrow {
    width: 12px;
    height: 12px;

    flex: 0 0 12px;

    fill: currentColor;
}


/* =========================================================
   EMPTY CHILD CATEGORY
========================================================= */

.ajaxweb-col.no-children {
    padding-bottom: 4px;
}

.ajaxweb-col.no-children .ajaxweb-group-heading {
    margin-bottom: 0;
}


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

.ajaxweb-anim-fade
.ajaxweb-tab-content.active {
    animation: ajaxwebFade .22s ease both;
}

.ajaxweb-anim-slide-up
.ajaxweb-tab-content.active {
    animation: ajaxwebSlideUp .28s ease both;
}


@keyframes ajaxwebFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes ajaxwebSlideUp {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   TOP POSITION
========================================================= */

.ajaxweb-pos-top {
    overflow: hidden;
}


.ajaxweb-pos-top .ajaxweb-tabs {
    width: 100%;
    flex: 0 0 auto;

    flex-direction: row;

    overflow-x: auto;
    overflow-y: hidden;

    border: 0;
    border-bottom: 1px solid var(--aw-border);

    padding: 8px;
}


.ajaxweb-pos-top .ajaxweb-tab {
    width: auto;
    min-width: max-content;

    flex: 0 0 auto;
}


.ajaxweb-pos-top .ajaxweb-tab::after {
    top: auto;
    right: 12px;
    bottom: -8px;

    width: calc(100% - 24px);
    height: 3px;
}


.ajaxweb-pos-top .ajaxweb-tab.active::after {
    right: 12px;
    bottom: -8px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .ajaxweb-cat-wrapper {
        border-radius: 18px;
    }

    .ajaxweb-tabs {
        flex-basis: 110px;
        width: 110px;
    }

    .ajaxweb-tab {
        padding: 11px 9px;
        gap: 8px;

        font-size: 12px;
    }

    .ajaxweb-icon {
        width: 22px;
        height: 22px;

        min-width: 22px;
    }

    .ajaxweb-content-grid {
        gap: 24px 20px;
    }

    .ajaxweb-tab-content {
        padding: 20px;
    }

}


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

@media (max-width: 767px) {

    .ajaxweb-cat-wrapper {
        width: 100%;

        max-width: 100%;

        min-height: 0;

        display: flex;
        flex-direction: column;

        border-radius: 16px;

        overflow: hidden;
    }


    .ajaxweb-tabs {
        width: 100%;
        flex: 0 0 auto;

        display: flex;
        flex-direction: row;

        gap: 6px;

        padding: 7px;

        overflow-x: auto;
        overflow-y: hidden;

        border: 0;
        border-bottom: 1px solid var(--aw-border);

        scrollbar-width: none;
    }


    .ajaxweb-tabs::-webkit-scrollbar {
        display: none;
    }


    .ajaxweb-tab {
        width: auto;

        min-width: max-content;

        flex: 0 0 auto;

        padding: 10px 12px;

        border-radius: 12px;

        font-size: 12px;
    }


    .ajaxweb-tab::after {
        display: none;
    }


    .ajaxweb-tab.active {
        box-shadow: none;
    }


    .ajaxweb-icon {
        width: 20px;
        height: 20px;

        min-width: 20px;
    }


    .ajaxweb-icon svg {
        width: 19px;
        height: 19px;
    }


    .ajaxweb-icon img {
        width: 19px;
        height: 19px;
    }


    .ajaxweb-tab-label {
        max-width: 130px;
    }


    .ajaxweb-content {
        width: 100%;

        max-height: 68vh;

        overflow-y: auto;
        overflow-x: hidden;
    }


    .ajaxweb-tab-content {
        padding: 18px 16px 22px;
    }


    .ajaxweb-view-all-link {
        min-height: 34px;

        font-size: 14px;

        gap: 8px;
    }


    .ajaxweb-view-icon {
        width: 20px;
        height: 20px;

        min-width: 20px;
    }


    .ajaxweb-view-icon svg,
    .ajaxweb-view-icon img {
        width: 18px;
        height: 18px;
    }


    .ajaxweb-divider {
        margin: 10px 0 18px;
    }


    .ajaxweb-content-grid {
        grid-template-columns: 1fr !important;

        gap: 20px;
    }


    .ajaxweb-col {
        padding-inline-start: 11px;
    }


    .ajaxweb-group-heading {
        margin-bottom: 10px;
    }


    .ajaxweb-group-heading a {
        font-size: 13px;
    }


    .ajaxweb-subcat-item a {
        min-height: 29px;

        font-size: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .ajaxweb-cat-wrapper {
        border-radius: 12px;
    }


    .ajaxweb-tabs {
        padding: 6px;
    }


    .ajaxweb-tab {
        padding: 9px 10px;

        gap: 7px;

        font-size: 11px;
    }


    .ajaxweb-tab-label {
        max-width: 105px;
    }


    .ajaxweb-tab-content {
        padding: 16px 13px 20px;
    }


    .ajaxweb-view-all-link {
        font-size: 13px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.ajaxweb-tab:focus-visible,
.ajaxweb-view-all-link:focus-visible,
.ajaxweb-group-heading a:focus-visible,
.ajaxweb-subcat-item a:focus-visible {
    outline: 2px solid var(--aw-primary);

    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ajaxweb-cat-wrapper *,
    .ajaxweb-cat-wrapper *::before,
    .ajaxweb-cat-wrapper *::after {
        animation: none !important;
        transition: none !important;
    }

}