/* =========================================================
   SEDAYE GHARB
   CUSTOM MOBILE BOTTOM NAVIGATION
   Version: 1.0
========================================================= */


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

:root {

    --sg-mobile-bg: #0b0d0e;
    --sg-mobile-bg-soft: #111416;
    --sg-mobile-border: rgba(255,255,255,0.16);

    --sg-mobile-text: #f5f5f5;
    --sg-mobile-text-soft: #bdbdbd;

    --sg-mobile-red: #df1d26;
    --sg-mobile-red-dark: #b8141c;

    --sg-mobile-shadow:
        0 -5px 25px rgba(0,0,0,0.45);

    --sg-mobile-radius: 26px;

}


/* =========================================================
   RESET
========================================================= */

#sg-mobile-menu-wrapper,
#sg-mobile-menu-wrapper * {

    box-sizing: border-box;

}

#sg-mobile-menu-wrapper button,
#sg-mobile-menu-wrapper a {

    -webkit-tap-highlight-color: transparent;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

#sg-mobile-menu-wrapper {

    display: none;

}


/* =========================================================
   MOBILE BOTTOM NAVIGATION
========================================================= */

#sg-mobile-bottom-nav {

    position: fixed;

    left: 9px;
    right: 9px;

    bottom: 8px;

    z-index: 99990;

    height: 86px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    direction: rtl;

    padding:

        7px

        5px

        calc(7px + env(safe-area-inset-bottom))

        5px;

    background:

        linear-gradient(

            145deg,

            #111416 0%,

            #090b0c 100%

        );

    border:

        1px solid

        rgba(255,255,255,0.16);

    border-radius:

        var(--sg-mobile-radius);

    box-shadow:

        var(--sg-mobile-shadow),

        inset 0 1px 0 rgba(255,255,255,0.04);

    backdrop-filter:

        blur(14px);

    -webkit-backdrop-filter:

        blur(14px);

}


/* =========================================================
   NAV ITEMS
========================================================= */

#sg-mobile-bottom-nav
.sg-mobile-nav-item {

    position: relative;

    flex:

        1 1 20%;

    height: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding:

        4px

        2px;

    margin: 0;

    border: 0;

    background: transparent;

    color:

        var(--sg-mobile-text);

    text-decoration: none;

    font-family: inherit;

    cursor: pointer;

    transition:

        color .25s ease,

        transform .25s ease;

}


/* =========================================================
   NAV ICON
========================================================= */

#sg-mobile-bottom-nav
.sg-mobile-nav-icon {

    position: relative;

    width: 40px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:

        #eeeeee;

    font-size: 28px;

    line-height: 1;

    transition:

        color .25s ease,

        transform .25s ease;

}


/* =========================================================
   NAV LABEL
========================================================= */

#sg-mobile-bottom-nav
.sg-mobile-nav-label {

    display: block;

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    text-align: center;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.4;

    color:

        #eeeeee;

    transition:

        color .25s ease;

}


/* =========================================================
   ACTIVE HOME
========================================================= */

#sg-mobile-bottom-nav
.sg-home-item
.sg-mobile-nav-icon {

    color:

        var(--sg-mobile-red);

}

#sg-mobile-bottom-nav
.sg-home-item
.sg-mobile-nav-label {

    color:

        #ffffff;

}


/* =========================================================
   HOVER / ACTIVE
========================================================= */

#sg-mobile-bottom-nav
.sg-mobile-nav-item:hover
.sg-mobile-nav-icon,

#sg-mobile-bottom-nav
.sg-mobile-nav-item:focus
.sg-mobile-nav-icon {

    color:

        var(--sg-mobile-red);

}

#sg-mobile-bottom-nav
.sg-mobile-nav-item:active {

    transform:

        scale(.94);

}


/* =========================================================
   BADGES
========================================================= */

.sg-mobile-cart-count,
.sg-mobile-wishlist-count {

    position: absolute;

    top: -7px;

    right: -7px;

    min-width: 22px;

    height: 22px;

    padding:

        0 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        var(--sg-mobile-red);

    color:

        #ffffff;

    border:

        2px solid

        #0b0d0e;

    border-radius:

        50px;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    box-shadow:

        0 2px 8px

        rgba(223,29,38,0.4);

}


/* =========================================================
   DRAWER OVERLAY
========================================================= */

.sg-mobile-menu-overlay {

    position: fixed;

    inset: 0;

    z-index: 99995;

    background:

        rgba(0,0,0,0.72);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:

        opacity .3s ease,

        visibility .3s ease;

    backdrop-filter:

        blur(3px);

    -webkit-backdrop-filter:

        blur(3px);

}


/* =========================================================
   DRAWERS
========================================================= */

.sg-mobile-drawer {

    position: fixed;

    top: 0;

    bottom: 0;

    z-index: 99996;

    width:

        min(88vw, 390px);

    display: flex;

    flex-direction: column;

    background:

        linear-gradient(

            160deg,

            #121516 0%,

            #080a0b 100%

        );

    box-shadow:

        0 0 40px

        rgba(0,0,0,0.55);

    transition:

        transform .38s

        cubic-bezier(.22,.61,.36,1);

}


/* =========================================================
   CATEGORY DRAWER
   RIGHT SIDE
========================================================= */

.sg-category-drawer {

    right: 0;

    transform:

        translateX(105%);

    border-radius:

        0 0 0 24px;

}


/* =========================================================
   CART DRAWER
   LEFT SIDE
========================================================= */

.sg-cart-drawer {

    left: 0;

    transform:

        translateX(-105%);

    border-radius:

        0 0 24px 0;

}


/* =========================================================
   DRAWER OPEN STATE
========================================================= */

#sg-mobile-menu-wrapper.sg-drawer-open
.sg-mobile-menu-overlay {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


#sg-mobile-menu-wrapper.sg-category-open
.sg-category-drawer {

    transform:

        translateX(0);

}


#sg-mobile-menu-wrapper.sg-cart-open
.sg-cart-drawer {

    transform:

        translateX(0);

}


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

.sg-drawer-header {

    min-height: 76px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    direction: rtl;

    padding:

        14px

        18px;

    border-bottom:

        1px solid

        rgba(255,255,255,0.09);

    background:

        rgba(255,255,255,0.025);

}


/* =========================================================
   DRAWER TITLE
========================================================= */

.sg-drawer-title {

    display: flex;

    align-items: center;

    gap: 10px;

    color:

        #ffffff;

    font-size: 16px;

    font-weight: 700;

}


.sg-drawer-title i {

    color:

        var(--sg-mobile-red);

    font-size: 20px;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.sg-drawer-close {

    width: 38px;

    height: 38px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:

        1px solid

        rgba(255,255,255,0.12);

    border-radius: 50%;

    background:

        rgba(255,255,255,0.05);

    color:

        #ffffff;

    font-size: 16px;

    cursor: pointer;

    transition:

        all .25s ease;

}


.sg-drawer-close:hover {

    background:

        var(--sg-mobile-red);

    border-color:

        var(--sg-mobile-red);

    transform:

        rotate(90deg);

}


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

.sg-drawer-content,
.sg-cart-drawer-content {

    flex: 1;

    overflow-y: auto;

    overflow-x: hidden;

    padding:

        15px;

    -webkit-overflow-scrolling:

        touch;

}


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

.sg-category-mobile-list {

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;

}


.sg-category-mobile-list li {

    list-style: none !important;

    margin: 0 0 9px !important;

    padding: 0 !important;

}


.sg-category-mobile-list li a {

    min-height: 62px;

    display: flex;

    align-items: center;

    direction: rtl;

    gap: 13px;

    padding:

        8px

        12px;

    border:

        1px solid

        rgba(255,255,255,0.08);

    border-radius:

        15px;

    background:

        rgba(255,255,255,0.035);

    color:

        #ffffff;

    text-decoration: none;

    transition:

        all .25s ease;

}


.sg-category-mobile-list li a:hover {

    background:

        rgba(223,29,38,0.12);

    border-color:

        rgba(223,29,38,0.55);

    transform:

        translateX(-3px);

}


/* =========================================================
   CATEGORY ICON
========================================================= */

.sg-category-mobile-icon {

    flex-shrink: 0;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:

        12px;

    background:

        rgba(223,29,38,0.1);

    border:

        1px solid

        rgba(223,29,38,0.3);

    color:

        var(--sg-mobile-red);

    font-size: 19px;

}


/* =========================================================
   CATEGORY NAME
========================================================= */

.sg-category-mobile-name {

    flex: 1;

    text-align: right;

    font-size: 14px;

    font-weight: 600;

    color:

        #f3f3f3;

}


/* =========================================================
   CATEGORY ARROW
========================================================= */

.sg-category-arrow {

    flex-shrink: 0;

    color:

        #777;

    font-size: 12px;

    transition:

        color .2s ease,

        transform .2s ease;

}


.sg-category-mobile-list li a:hover
.sg-category-arrow {

    color:

        var(--sg-mobile-red);

    transform:

        translateX(-3px);

}


/* =========================================================
   CART
========================================================= */

.sg-cart-drawer-content {

    padding:

        15px;

}


/* WooCommerce Mini Cart */

.sg-cart-drawer
.woocommerce-mini-cart {

    margin: 0 !important;

    padding: 0 !important;

    list-style: none !important;

}


.sg-cart-drawer
.woocommerce-mini-cart-item {

    position: relative;

    min-height: 85px;

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 10px !important;

    padding: 10px !important;

    border:

        1px solid

        rgba(255,255,255,0.08);

    border-radius:

        14px;

    background:

        rgba(255,255,255,0.035);

}


.sg-cart-drawer
.woocommerce-mini-cart-item
img {

    width: 62px !important;

    height: 62px !important;

    object-fit: cover;

    border-radius:

        10px;

}


.sg-cart-drawer
.woocommerce-mini-cart-item
a:not(.remove) {

    color:

        #ffffff !important;

    font-size: 12px;

    font-weight: 600;

}


.sg-cart-drawer
.woocommerce-mini-cart-item
.quantity {

    color:

        #aaaaaa;

    font-size: 11px;

}


.sg-cart-drawer
.woocommerce-mini-cart-item
.remove {

    position: absolute;

    top: 6px;

    left: 7px;

    color:

        #999 !important;

    font-size: 17px;

}


.sg-cart-drawer
.woocommerce-mini-cart-item
.remove:hover {

    color:

        var(--sg-mobile-red) !important;

}


/* =========================================================
   CART TOTAL
========================================================= */

.sg-cart-drawer
.woocommerce-mini-cart__total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin:

        12px 0;

    padding:

        12px 0;

    border-top:

        1px solid

        rgba(255,255,255,0.08);

    border-bottom:

        1px solid

        rgba(255,255,255,0.08);

    color:

        #ffffff;

    font-size: 13px;

    font-weight: 700;

}


.sg-cart-drawer
.woocommerce-mini-cart__total
.amount {

    color:

        var(--sg-mobile-red);

}


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

.sg-cart-empty {

    min-height: 280px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color:

        #999;

}


.sg-cart-empty i {

    margin-bottom: 15px;

    color:

        var(--sg-mobile-red);

    font-size: 48px;

}


.sg-cart-empty p {

    margin: 0;

    font-size: 14px;

}


/* =========================================================
   CART FOOTER
========================================================= */

.sg-cart-drawer-footer {

    flex-shrink: 0;

    display: flex;

    gap: 8px;

    padding:

        13px

        15px

        calc(13px + env(safe-area-inset-bottom));

    border-top:

        1px solid

        rgba(255,255,255,0.09);

    background:

        rgba(0,0,0,0.2);

}


.sg-cart-drawer-footer a {

    flex: 1;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:

        10px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:

        all .25s ease;

}


.sg-cart-view-button {

    background:

        rgba(255,255,255,0.07);

    border:

        1px solid

        rgba(255,255,255,0.1);

    color:

        #ffffff;

}


.sg-cart-checkout-button {

    background:

        var(--sg-mobile-red);

    border:

        1px solid

        var(--sg-mobile-red);

    color:

        #ffffff;

}


.sg-cart-view-button:hover {

    background:

        rgba(255,255,255,0.12);

}


.sg-cart-checkout-button:hover {

    background:

        var(--sg-mobile-red-dark);

}


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

@media screen and (max-width: 849px) {

    #sg-mobile-menu-wrapper {

        display: block;

    }

}


/* =========================================================
   SMALL MOBILE
   320px - 374px
========================================================= */

@media screen and (max-width: 374px) {

    #sg-mobile-bottom-nav {

        left: 5px;

        right: 5px;

        bottom: 5px;

        height: 78px;

        border-radius: 22px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-icon {

        width: 34px;

        height: 31px;

        font-size: 23px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-label {

        font-size: 10px;

    }


    .sg-mobile-cart-count,
    .sg-mobile-wishlist-count {

        min-width: 19px;

        height: 19px;

        top: -6px;

        right: -5px;

        font-size: 9px;

    }


    .sg-mobile-drawer {

        width:

            92vw;

    }

}


/* =========================================================
   STANDARD MOBILE
   375px - 480px
========================================================= */

@media screen and (min-width: 375px)
and (max-width: 480px) {

    #sg-mobile-bottom-nav {

        height: 84px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-icon {

        font-size: 27px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-label {

        font-size: 11px;

    }

}


/* =========================================================
   LARGE MOBILE / SMALL TABLET
   481px - 600px
========================================================= */

@media screen and (min-width: 481px)
and (max-width: 600px) {

    #sg-mobile-bottom-nav {

        left: 20px;

        right: 20px;

        bottom: 12px;

        height: 88px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-icon {

        font-size: 29px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-label {

        font-size: 12px;

    }

}


/* =========================================================
   TABLET
   601px - 849px
========================================================= */

@media screen and (min-width: 601px)
and (max-width: 849px) {

    #sg-mobile-bottom-nav {

        left: 50%;

        right: auto;

        width:

            min(620px, calc(100% - 50px));

        transform:

            translateX(-50%);

        bottom: 16px;

        height: 92px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-icon {

        font-size: 30px;

    }


    #sg-mobile-bottom-nav
    .sg-mobile-nav-label {

        font-size: 13px;

    }


    .sg-mobile-drawer {

        width:

            min(430px, 80vw);

    }

}


/* =========================================================
   SAFE AREA
   iPHONE / MODERN DEVICES
========================================================= */

@supports (padding: env(safe-area-inset-bottom)) {

    #sg-mobile-bottom-nav {

        padding-bottom:

            calc(

                7px +

                env(safe-area-inset-bottom)

            );

    }

}


/* =========================================================
   PREVENT BODY SCROLL WHEN DRAWER OPEN
========================================================= */

body.sg-mobile-drawer-lock {

    overflow: hidden !important;

}


/* =========================================================
   HIDE DEFAULT FLATSOME MOBILE NAV
   ONLY IF PRESENT
========================================================= */

/*
   این قسمت را فعلاً فعال نکن.
   اگر بعداً مشخص شد Flatsome منوی موبایل
   خودش را هم نمایش می‌دهد، این بخش را فعال می‌کنیم.
*/


/*
@media screen and (max-width: 849px) {

    .mobile-nav {

        display: none !important;

    }

}
*/


/* =========================================================
   DARK SCROLLBAR
========================================================= */

.sg-mobile-drawer-content::-webkit-scrollbar,
.sg-cart-drawer-content::-webkit-scrollbar {

    width: 4px;

}


.sg-mobile-drawer-content::-webkit-scrollbar-track,
.sg-cart-drawer-content::-webkit-scrollbar-track {

    background:

        transparent;

}


.sg-mobile-drawer-content::-webkit-scrollbar-thumb,
.sg-cart-drawer-content::-webkit-scrollbar-thumb {

    background:

        rgba(223,29,38,0.55);

    border-radius:

        10px;

}