/* =========================================================
   supplier-shop3
   RESPONSIVE.CSS
   HEADER RESPONSIVE SYSTEM
   RTL / DESKTOP / TABLET / MOBILE
   ========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}



.header {

    width: 92%;
    max-width: 1400px;

    min-height: 76px;

    margin: 25px auto;
    padding: 15px 22px;

    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;

    align-items: center;

    direction: rtl;

    /*
       فاصله عادی بین لوگو و همبرگری
    */
    gap: 10px;

    position: relative;

    z-index: 10000;

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

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    /*
       فقط یک حاشیه
    */
    border:
        1px solid transparent;

    border-radius:
        30px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

    isolation: isolate;

    overflow: visible;
}


/* =========================================================
   SINGLE HEADER GLOW
========================================================= */

.header::before {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius:
        inherit;

    padding: 1px;

    background:
        linear-gradient(
            90deg,
            #D99B7F,
            #A56F63,
            #0F3040,
            #464858,
            #D99B7F
        );

    background-size:
        300% 100%;

    animation:
        headerGradient 8s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    pointer-events:
        none;

    z-index:
        -1;
}


@keyframes headerGradient {

    0% {
        background-position:
            0% 50%;
    }

    100% {
        background-position:
            300% 50%;
    }
}


/* =========================================================
   LOGO
   سمت راست
========================================================= */

.header .logo {

    order: 1;

    flex:
        0 1 auto;

    min-width:
        0;

    max-width:
        none;

    color:
        #fff;

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    position:
        relative;

    z-index:
        10001;
}


/* =========================================================
   HAMBURGER
   دقیقاً بعد از لوگو
========================================================= */

.header .menu-toggle {

    order: 2;

    flex:
        0 0 45px;

    width:
        45px;

    height:
        45px;

    min-width:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    border:
        none;

    outline:
        none;

    border-radius:
        12px;

    background:
        transparent !important;

    color:
        #fff;

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;

    position:
        relative;

    z-index:
        100000;

    pointer-events:
        auto;

    appearance:
        none;

    -webkit-appearance:
        none;

    -webkit-tap-highlight-color:
        transparent;
}


.header .menu-toggle:hover {

    color:
        #D99B7F;

    background:
        rgba(255,255,255,.06) !important;
}


.header .menu-toggle:active {

    transform:
        scale(.94);
}


.header .menu-toggle:focus {

    outline:
        none;

    box-shadow:
        none !important;
}


/* =========================================================
   MAIN MENU
   سبد خرید + کاربر + ورود

   مهم:
   margin-right:auto

   باعث می‌شود این بخش به سمت چپ هدر برود
   و فضای خالی بین همبرگری و منو ایجاد شود.
========================================================= */

.header .menu {

    order: 3;

    display:
        flex !important;

    flex-direction:
        row;

    flex-wrap:
        nowrap !important;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        7px;

    /*
       این مهم‌ترین قسمت است.
       منو را به سمت چپ هل می‌دهد.
    */
    margin-right:
        auto;

    margin-left:
        0;

    padding:
        0;

    width:
        auto;

    min-width:
        max-content;

    max-width:
        none;

    flex:
        0 0 auto;

    position:
        relative;

    z-index:
        10001;

    direction:
        rtl;

    overflow:
        visible;
}


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

.header .menu a {

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto !important;

    flex-shrink:
        0 !important;

    min-width:
        max-content;

    width:
        auto;

    text-decoration:
        none;

    white-space:
        nowrap !important;

    box-sizing:
        border-box;
}


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

.header .menu .nav-link {

    min-height:
        44px;

    padding:
        10px 14px;

    border-radius:
        14px;

    color:
        #fff;

    background:
        transparent;

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap !important;

    flex:
        0 0 auto !important;

    flex-shrink:
        0 !important;

    transition:
        .25s;
}


.header .menu .nav-link:hover {

    background:
        #A56F63;
}


/* =========================================================
   USER
========================================================= */

.header .menu .user-name {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    max-width:
        180px;

    min-width:
        0;

    padding:
        10px 14px;

    border-radius:
        14px;

    color:
        #fff;

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

    font-size:
        14px;

    font-weight:
        600;

    white-space:
        nowrap !important;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    flex:
        0 1 auto;

    transition:
        .25s;
}


.header .menu .user-name:hover {

    background:
        rgba(255,255,255,.15);
}


/* =========================================================
   LOGIN / LOGOUT
========================================================= */

.header .menu .btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        10px 15px;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #A56F63,
            #D99B7F
        );

    color:
        #fff !important;

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap !important;

    flex:
        0 0 auto !important;

    flex-shrink:
        0 !important;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.header .menu .btn:hover {

    transform:
        translateY(-2px);

    opacity:
        .9;
}


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

.header .mobile-menu {

    display:
        none;

    position:
        absolute;

    top:
        calc(100% + 10px);

    right:
        10px;

    width:
        230px;

    max-width:
        calc(100vw - 20px);

    padding:
        14px;

    box-sizing:
        border-box;

    background:
        #0F3040;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:
        20px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.5);

    z-index:
        9999999;
}


.header .mobile-menu.show {

    display:
        block;
}


.header .mobile-menu a {

    display:
        block;

    width:
        100%;

    padding:
        13px 14px;

    margin:
        0 0 7px;

    border-radius:
        12px;

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        .25s;
}


.header .mobile-menu a:last-child {

    margin-bottom:
        0;
}


.header .mobile-menu a:hover {

    background:
        linear-gradient(
            135deg,
            #A56F63,
            #D99B7F
        );
}


/* =========================================================
   TABLET
   <= 1000px
========================================================= */

@media (max-width: 1000px) {

    .header {

        width:
            94%;

        min-height:
            68px;

        padding:
            12px 15px;

        gap:
            7px;
    }


    .header .logo {

        font-size:
            23px;
    }


    .header .menu-toggle {

        flex:
            0 0 42px;

        width:
            42px;

        height:
            42px;

        min-width:
            42px;

        font-size:
            25px;
    }


    /*
       همچنان منو سمت چپ می‌ماند
    */

    .header .menu {

        margin-right:
            auto;

        margin-left:
            0;

        gap:
            5px;

        min-width:
            max-content;

        flex:
            0 0 auto;
    }


    .header .menu .nav-link,
    .header .menu .user-name,
    .header .menu .btn {

        min-height:
            40px;

        padding:
            8px 10px;

        font-size:
            12px;
    }


    .header .menu .user-name {

        max-width:
            115px;
    }
}




@media (max-width: 768px) {

    .header {

        width:
            96%;

        min-height:
            58px;

        margin:
            12px auto;

        padding:
            7px 8px;

        gap:
            4px;

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        direction:
            rtl !important;

        overflow:
            visible !important;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .header .logo {

        order:
            1 !important;

        flex:
            0 1 auto !important;

        min-width:
            0 !important;

        max-width:
            125px !important;

        font-size:
            17px !important;

        white-space:
            nowrap !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .header .menu-toggle {

        order:
            2 !important;

        flex:
            0 0 36px !important;

        width:
            36px !important;

        height:
            36px !important;

        min-width:
            36px !important;

        max-width:
            36px !important;

        font-size:
            21px !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    /* =====================================================
       MAIN MENU

       ❗ مهم:

       اینجا margin-right:auto داریم.

       بنابراین:
       لوگو → همبرگری → فضای خالی → منو

       و منو دیگر به همبرگری نمی‌چسبد.
    ===================================================== */

    .header .menu {

        order:
            3 !important;

        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            3px !important;

        width:
            auto !important;

        min-width:
            max-content !important;

        max-width:
            none !important;

        flex:
            0 0 auto !important;

        /*
           ⭐⭐⭐ قسمت اصلی اصلاح
        */

        margin-right:
            auto !important;

        margin-left:
            0 !important;

        padding:
            0 !important;

        direction:
            rtl !important;

        overflow:
            visible !important;
    }


    /* =====================================================
       ALL MENU LINKS
    ===================================================== */

    .header .menu a {

        display:
            inline-flex !important;

        flex:
            0 0 auto !important;

        flex-shrink:
            0 !important;

        min-width:
            max-content !important;

        width:
            auto !important;

        white-space:
            nowrap !important;
    }


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

    .header .menu .nav-link {

        min-height:
            35px !important;

        padding:
            5px 7px !important;

        border-radius:
            9px !important;

        font-size:
            9px !important;

        line-height:
            1 !important;

        flex:
            0 0 auto !important;

        flex-shrink:
            0 !important;
    }


    /* =====================================================
       USER
    ===================================================== */

    .header .menu .user-name {

        min-height:
            35px !important;

        max-width:
            65px !important;

        min-width:
            0 !important;

        padding:
            5px 6px !important;

        border-radius:
            9px !important;

        font-size:
            9px !important;

        line-height:
            1 !important;

        flex:
            0 1 auto !important;

        white-space:
            nowrap !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;
    }


    /* =====================================================
       LOGIN / LOGOUT
    ===================================================== */

    .header .menu .btn {

        min-height:
            35px !important;

        padding:
            5px 7px !important;

        border-radius:
            9px !important;

        font-size:
            9px !important;

        line-height:
            1 !important;

        flex:
            0 0 auto !important;

        flex-shrink:
            0 !important;

        white-space:
            nowrap !important;
    }


    /* =====================================================
       DROPDOWN
    ===================================================== */

    .header .mobile-menu {

        top:
            calc(100% + 8px);

        right:
            3px;

        width:
            220px;

        max-width:
            calc(100vw - 20px);
    }
}


/* =========================================================
   SMALL MOBILE
   <= 520px
========================================================= */

@media (max-width: 520px) {

    .header {

        width:
            97%;

        min-height:
            53px;

        padding:
            6px;

        gap:
            2px;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .header .logo {

        max-width:
            95px !important;

        font-size:
            14px !important;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .header .menu-toggle {

        flex:
            0 0 33px !important;

        width:
            33px !important;

        height:
            33px !important;

        min-width:
            33px !important;

        max-width:
            33px !important;

        font-size:
            19px !important;
    }


    /* =====================================================
       MAIN MENU

       همچنان سمت چپ
    ===================================================== */

    .header .menu {

        margin-right:
            auto !important;

        margin-left:
            0 !important;

        gap:
            2px !important;

        min-width:
            max-content !important;

        flex:
            0 0 auto !important;
    }


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

    .header .menu .nav-link {

        min-height:
            33px !important;

        padding:
            5px 5px !important;

        font-size:
            8px !important;

        border-radius:
            8px !important;
    }


    /* =====================================================
       USER
    ===================================================== */

    .header .menu .user-name {

        max-width:
            52px !important;

        min-height:
            33px !important;

        padding:
            5px 4px !important;

        font-size:
            8px !important;

        border-radius:
            8px !important;
    }


    /* =====================================================
       LOGIN / LOGOUT
    ===================================================== */

    .header .menu .btn {

        min-height:
            33px !important;

        padding:
            5px 5px !important;

        font-size:
            8px !important;

        border-radius:
            8px !important;
    }


    /* =====================================================
       DROPDOWN
    ===================================================== */

    .header .mobile-menu {

        right:
            2px;

        width:
            210px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   <= 380px
========================================================= */

@media (max-width: 380px) {

    .header {

        width:
            98%;

        min-height:
            49px;

        padding:
            5px;

        gap:
            1px;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .header .logo {

        max-width:
            78px !important;

        font-size:
            12px !important;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .header .menu-toggle {

        flex:
            0 0 30px !important;

        width:
            30px !important;

        height:
            30px !important;

        min-width:
            30px !important;

        max-width:
            30px !important;

        font-size:
            17px !important;
    }


    /* =====================================================
       MAIN MENU

       جای منو حفظ می‌شود:
       سمت چپ هدر
    ===================================================== */

    .header .menu {

        margin-right:
            auto !important;

        margin-left:
            0 !important;

        gap:
            1px !important;

        min-width:
            max-content !important;

        flex:
            0 0 auto !important;
    }


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

    .header .menu .nav-link {

        min-height:
            30px !important;

        padding:
            4px 3px !important;

        font-size:
            7px !important;

        border-radius:
            6px !important;
    }


    /* =====================================================
       USER
    ===================================================== */

    .header .menu .user-name {

        max-width:
            43px !important;

        min-height:
            30px !important;

        padding:
            4px 3px !important;

        font-size:
            7px !important;

        border-radius:
            6px !important;
    }


    /* =====================================================
       LOGIN / LOGOUT
    ===================================================== */

    .header .menu .btn {

        min-height:
            30px !important;

        padding:
            4px 3px !important;

        font-size:
            7px !important;

        border-radius:
            6px !important;
    }


    /* =====================================================
       DROPDOWN
    ===================================================== */

    .header .mobile-menu {

        width:
            205px;

        right:
            2px;
    }
}