/* =========================================================
   ASA TAVAN HEADER
========================================================= */

:root{

    --asa-navy:#203862;
    --asa-navy-dark:#192f51;

    --asa-green:#8ac63f;
    --asa-green-dark:#679d27;

    --asa-white:#ffffff;

}


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

#asa-header{

    position:fixed;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 60px);
    max-width:1380px;

    height:90px;

    z-index:99999;

    direction:rtl;

    font-family:'Madani',sans-serif;

    transition:
        top .35s ease,
        width .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


/* =========================================================
   INNER
========================================================= */

.asa-header-inner{

    height:90px;

    padding:0 22px 0 20px;

    display:flex;

    align-items:center;

    gap:25px;

    background: rgb(233 233 233 / 70%);

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

    border-radius:22px;

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

    box-sizing:border-box;

}


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

.asa-logo{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

}


.asa-logo a{

    display:flex;

    align-items:center;

    text-decoration:none;

}


.asa-logo img{

    display:block;

    width:auto;

    max-width:155px;

    max-height:72px;

    object-fit:contain;

}


/* =========================================================
   NAVIGATION
========================================================= */

.asa-navigation{

    flex:1;

    display:flex;

    justify-content:center;

    height:100%;

}


.asa-navigation ul{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:2px;

}


.asa-navigation li{

    height:100%;

    display:flex;

    align-items:center;

    position:relative;

}


.asa-navigation li a{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    padding:0 15px;

    color:rgba(0,0,0,.94);

    font-size:14px;

    font-weight:500;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s ease;

}


/* Hover */

.asa-navigation li a:hover{

    color:var(--asa-green);

}


/* Active */

.asa-navigation li.active a{

    color:var(--asa-green);

}


/* Active underline */

.asa-navigation li.active a:after{

    content:"";

    position:absolute;

    bottom:-1px;

    left:50%;

    transform:translateX(-50%);

    width:76px;

    height:6px;

    background:var(--asa-green);

    border-radius:10px 10px 0 0;

}


/* =========================================================
   ACTIONS
========================================================= */

.asa-header-actions{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}


/* =========================================================
   LANGUAGE
========================================================= */

.asa-language{

    position:relative;

}


.asa-language-btn{

    border:0;

    background:none;

    color:#fff;

    display:flex;

    align-items:center;

    gap:7px;

    font-family:inherit;

    font-size:13px;

    cursor:pointer;

    padding:10px 2px;

}


.asa-language-btn .fa-globe{

    font-size:20px;

}


.asa-language-btn .fa-angle-down{

    font-size:11px;

    margin-right:3px;

}


.asa-language-menu{

    position:absolute;

    top:48px;

    right:0;

    min-width:120px;

    padding:8px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 15px 40px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:.25s;

}


.asa-language:hover .asa-language-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.asa-language-menu a{

    display:block;

    padding:9px 12px;

    color:#27344d;

    text-decoration:none;

    font-size:13px;

    border-radius:8px;

}


.asa-language-menu a:hover{

    background:#f1f5eb;

    color:var(--asa-green-dark);

}


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

.asa-divider{

    width:1px;

    height:25px;

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

}


/* =========================================================
   ACTION BUTTON
========================================================= */

.asa-action-btn{

    width:34px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    font-size:21px;

    transition:.3s;

}


.asa-action-btn:hover{

    color:var(--asa-green);

    transform:translateY(-2px);

}


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

.asa-cart{

    position:relative;

}


.asa-cart-btn{

    width:38px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    color:#fff;

    text-decoration:none;

    font-size:21px;

    transition:.3s;

}


.asa-cart-btn:hover{

    color:var(--asa-green);

    transform:translateY(-2px);

}


/* COUNT */

.asa-cart-count{

    position:absolute;

    top:4px;

    left:0;

    min-width:18px;

    height:18px;

    padding:0 4px;

    border-radius:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--asa-green);

    color:#17324d;

    border:2px solid var(--asa-navy);

    font-size:9px;

    font-weight:800;

}


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

.asa-cart-popup{

    position:absolute;

    top:65px;

    left:0;

    width:360px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:.3s ease;

    color:#26354d;

}


.asa-cart:hover .asa-cart-popup{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* popup arrow */

.asa-cart-popup:before{

    content:"";

    position:absolute;

    top:-8px;

    left:17px;

    width:16px;

    height:16px;

    background:#fff;

    transform:rotate(45deg);

}


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

.asa-cart-popup-header{

    padding:20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid #edf0f4;

}


.asa-cart-popup-header div{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.asa-cart-popup-header span{

    font-size:10px;

    color:#8ac63f;

}


.asa-cart-popup-header strong{

    font-size:16px;

}


.asa-cart-popup-header b{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef7e3;

    color:#629d26;

    font-size:12px;

}


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

.asa-cart-items{

    max-height:300px;

    overflow-y:auto;

}


.asa-cart-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    border-bottom:1px solid #f0f2f5;

}


.asa-cart-image{

    width:55px;

    height:65px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:10px;

    background:#f4f6f8;

}


.asa-cart-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


.asa-cart-info{

    flex:1;

    min-width:0;

}


.asa-cart-info h4{

    margin:0 0 5px;

    font-size:13px;

    line-height:1.5;

    color:#25344c;

}


.asa-cart-info span{

    display:block;

    color:#8b95a4;

    font-size:11px;

    margin-bottom:5px;

}


.asa-cart-info strong{

    color:#5e8d29;

    font-size:12px;

}


.asa-cart-remove{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:50%;

    background:#f8eeee;

    color:#c95b5b;

    cursor:pointer;

    transition:.25s;

}


.asa-cart-remove:hover{

    background:#c95b5b;

    color:#fff;

}


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

.asa-cart-footer{

    padding:18px;

    background:#fafbfd;

}


.asa-cart-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

    font-size:13px;

}


.asa-cart-total strong{

    color:#203862;

    font-size:15px;

}


.asa-cart-checkout{

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:10px;

    background:var(--asa-green);

    color:#203862;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.3s;

}


.asa-cart-checkout:hover{

    background:#79b331;

    color:#fff;

}


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

.asa-cart-empty{

    padding:40px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:8px;

}


.asa-cart-empty i{

    font-size:35px;

    color:#9bcf5a;

    margin-bottom:5px;

}


.asa-cart-empty strong{

    color:#26354d;

    font-size:14px;

}


.asa-cart-empty span{

    color:#929baa;

    font-size:11px;

}


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

.asa-mobile-toggle{

    display:none;

    width:40px;

    height:40px;

    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

}


.asa-mobile-toggle span{

    width:22px;

    height:2px;

    background:#fff;

    border-radius:5px;

    transition:.3s;

}


.asa-mobile-toggle.active span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}


.asa-mobile-toggle.active span:nth-child(2){

    opacity:0;

}


.asa-mobile-toggle.active span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}


/* =========================================================
   STICKY
========================================================= */

#asa-header.scrolled{

    top:0;

    width:100%;

    max-width:none;

}


#asa-header.scrolled .asa-header-inner{

    border-radius:0;

    border-left:0;

    border-right:0;

    box-shadow:
        0 8px 30px rgba(0,0,0,.15);

}


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

@media(max-width:1200px){

    .asa-navigation li a{

        padding:0 9px;

        font-size:13px;

    }

    .asa-header-inner{

        gap:12px;

    }

    .asa-logo img{

        max-width:135px;

    }

}


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

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

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

@media(max-width:991px){

    #asa-header{

        top:10px;

        left:50%;

        width:calc(100% - 20px);

        max-width:none;

    }


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

    .asa-header-inner{

        position:relative;

        height:70px;

        padding:0;

        border-radius:17px;

        display:block;

        box-sizing:border-box;

    }


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

    .asa-logo{

        position:absolute;

        top:50%;

        left:50%;

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

        width:auto;

        height:auto;

        z-index:5;

    }


    .asa-logo img{

        display:block;

        width:auto;

        max-width:110px;

        max-height:50px;

    }


    /* =====================================================
       ACTIONS CONTAINER
    ===================================================== */

    .asa-header-actions{

        position:static;

        width:100%;

        height:100%;

        display:block;

    }


    /* =====================================================
       LANGUAGE
    ===================================================== */

    .asa-language{

        position:absolute;

        top:50%;

        left:10px;

        transform:translateY(-50%);

        z-index:10;

    }


    .asa-language-btn{

        width:40px;

        height:40px;

        padding:0;

        display:flex;

        align-items:center;

        justify-content:center;

    }


    .asa-language-btn span,

    .asa-language-btn .fa-angle-down{

        display:none;

    }


    .asa-language-btn .fa-globe{

        font-size:20px;

    }


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

    .asa-header-actions > .asa-action-btn{

        position:absolute;

        top:50%;

        transform:translateY(-50%);

        width:40px;

        height:40px;

        display:flex;

        align-items:center;

        justify-content:center;

        z-index:10;

    }


    /* User */

    .asa-header-actions > .asa-action-btn[aria-label="حساب کاربری"]{

        left:52px;

    }


    /* Search */

    .asa-header-actions > .asa-action-btn[aria-label="جستجو"]{

        left:94px;

    }


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

    .asa-cart{

        position:absolute;

        top:50%;

        right:52px;

        transform:translateY(-50%);

        z-index:10;

    }


    .asa-cart-btn{

        width:40px;

        height:40px;

    }


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

    .asa-mobile-toggle{

        position:absolute;

        top:50%;

        right:8px;

        transform:translateY(-50%);

        display:flex;

        width:40px;

        height:40px;

        padding:0;

        z-index:10;

    }


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

    .asa-divider{

        display:none;

    }


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

    .asa-cart-count{

        top:0;

        left:0;

    }


    /* =====================================================
       NAVIGATION
    ===================================================== */

    .asa-navigation{

        position:absolute;

        top:78px;

        right:0;

        width:100%;

        height:auto;

        display:none;

        background:#fff;

        border-radius:17px;

        padding:12px;

        box-sizing:border-box;

        box-shadow:

            0 20px 50px rgba(0,0,0,.2);

        z-index:100;

    }


    .asa-navigation.open{

        display:block;

        animation:asaMenuOpen .3s ease;

    }


    .asa-navigation ul{

        flex-direction:column;

        align-items:stretch;

        gap:3px;

    }


    .asa-navigation li{

        height:auto;

    }


    .asa-navigation li a{

        height:48px;

        justify-content:flex-start;

        padding:0 16px;

        color:#203862;

        border-radius:10px;

        font-size:14px;

    }


    .asa-navigation li a:hover{

        background:#f1f6e9;

        color:#6da32c;

    }


    .asa-navigation li.active a{

        background:#eef6e3;

        color:#639d27;

    }


    .asa-navigation li.active a:after{

        display:none;

    }





    /* =====================================================
       STICKY
    ===================================================== */

    #asa-header.scrolled{

        top:0;

        width:100%;

    }


    #asa-header.scrolled .asa-header-inner{

        border-radius:0;

    }

}

@media(max-width:991px){

    /* آیکون‌های سمت چپ */
    .asa-language{
        left:6px;
    }

    .asa-header-actions > .asa-action-btn[aria-label="حساب کاربری"]{
        left:38px;
    }

    .asa-header-actions > .asa-action-btn[aria-label="جستجو"]{
        left:70px;
    }


    /* آیکون‌های سمت راست */
    .asa-cart{
        right:38px;
    }

    .asa-mobile-toggle{
        right:4px;
    }


    /* اندازه خود آیکون‌ها */
    .asa-language-btn,
    .asa-header-actions > .asa-action-btn,
    .asa-cart-btn,
    .asa-mobile-toggle{
        width:32px;
        height:36px;
    }


    .asa-language-btn .fa-globe,
    .asa-action-btn i,
    .asa-cart-btn i{
        font-size:18px;
    }


    .asa-mobile-toggle span{
        width:20px;
    }
    
    .asa-language-menu {
        right: -89px;
    }
    
    .asa-cart-popup{

        position:fixed !important;

        top:80px !important;

        left:12px !important;
        right:12px !important;

        width:auto !important;
        max-width:none !important;

        height:auto !important;
        min-height:180px;

        max-height:calc(100vh - 100px);

        margin:0 !important;

        background:#fff !important;

        border-radius:22px !important;

        overflow:hidden !important;

        box-sizing:border-box;

        z-index:999999 !important;

        box-shadow:
            0 20px 60px rgba(0,0,0,.25);

    }


    /* وقتی باز است */

    .asa-cart:hover .asa-cart-popup{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }


    /* محتوای محصولات */

    .asa-cart-items{

        max-height:300px;

        overflow-y:auto;

    }


    /* هدر */

    .asa-cart-popup-header{

        min-height:70px;

        box-sizing:border-box;

    }


    /* حالت خالی */

    .asa-cart-empty{

        min-height:160px;

        box-sizing:border-box;

    }
    
    
    /* =====================================================
       MOBILE OTHER SERVICES
    ===================================================== */
    
    .asa-dropdown{
        display:block !important;
    }
    
    .asa-dropdown > a{
    
        justify-content:space-between !important;
    
    }
    
    .asa-dropdown-arrow{
        transition:.3s ease;
    }
    
    .asa-dropdown.open .asa-dropdown-arrow{
        transform:rotate(180deg);
    }
    
    .asa-dropdown-menu{
    
        position:static;
    
        width:100%;
    
        min-width:0;
    
        padding:4px 8px;
    
        background:#f7f9f5;
    
        border-radius:10px;
    
        box-shadow:none;
    
        transform:none;
    
        opacity:1;
    
        visibility:visible;
    
        display:none;
    
    }
    
    .asa-dropdown.open .asa-dropdown-menu{
    
        display:block;
    
    }
    
    .asa-dropdown-menu a{
    
        height:40px !important;
    
        font-size:13px !important;
    
        padding:0 15px !important;
    
    }
    

}

@keyframes asaMenuOpen{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.cart-count{

    position:absolute;

    top:-5px;
    left:-5px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:#d43737;

    color:#fff;

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

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

    border:2px solid #fff;

    animation:pulseCart 2s infinite;
    
    z-index: 1;

}

.cart-count{

    top:-5px;

    left:-5px;

    width:20px;

    height:20px;

    font-size:10px;

}



/* =========================================================
   OTHER SERVICES DROPDOWN
========================================================= */

.asa-dropdown{
    position:relative;
}

.asa-dropdown > a{
    gap:7px;
}

.asa-dropdown-arrow{
    font-size:10px;
    transition:.3s ease;
}

.asa-dropdown:hover .asa-dropdown-arrow{
    transform:rotate(180deg);
}

.asa-dropdown-menu{

    position:absolute;

    top:calc(100% - 5px);
    right:50%;

    transform:translateX(50%) translateY(10px);

    min-width:190px;

    padding:8px;

    background:#fff;

    border-radius:14px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;

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

    z-index:999999;
}

.asa-dropdown:hover .asa-dropdown-menu{

    opacity:1;
    visibility:visible;

    transform:translateX(50%) translateY(0);

}

.asa-dropdown-menu a{

    display:flex !important;

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

    width:100%;
    height:43px !important;

    padding:0 13px !important;

    box-sizing:border-box;

    color:#203862 !important;

    border-radius:9px;

    font-size:13px !important;

    transition:.25s ease;

}

.asa-dropdown-menu a:hover{

    background:#f1f6e9;

    color:#679d27 !important;

}


/* =========================================================
   CART COUNT ANIMATION
========================================================= */

.cart-count{

    position:absolute;

    top:-5px;
    left:-5px;

    width:20px;
    height:20px;

    border-radius:50%;

    background:#d43737;

    color:#fff;

    display:flex;

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

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

    border:2px solid #fff;

    z-index:2;

    animation:pulseCart 2s infinite;

}


/* انیمیشن واقعی */

@keyframes pulseCart{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(212,55,55,.55);
    }

    50%{
        transform:scale(1.12);
        box-shadow:0 0 0 6px rgba(212,55,55,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(212,55,55,0);
    }

}



@media(max-width:991px){

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

    .asa-cart{

        position:absolute !important;

        top:15px !important;
        right:38px !important;

        width:40px !important;
        height:40px !important;

        transform:none !important;

        z-index:99999;

    }


    .asa-cart-btn{

        position:relative;

        width:40px !important;
        height:40px !important;

        display:flex;

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

    }


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

    .asa-cart-popup{

        position:fixed !important;

        top:80px !important;

        left:12px !important;
        right:12px !important;

        width:auto !important;

        height:auto !important;

        min-height:180px !important;

        max-height:calc(100vh - 100px) !important;

        margin:0 !important;

        padding:0 !important;

        background:#fff !important;

        border-radius:22px !important;

        overflow:hidden !important;

        box-sizing:border-box !important;

        z-index:999999 !important;

        opacity:0;

        visibility:hidden;

        transform:translateY(12px) !important;

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease;

    }


    /* باز شدن */

    .asa-cart:hover .asa-cart-popup{

        opacity:1 !important;

        visibility:visible !important;

        transform:translateY(0) !important;

    }


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

    .asa-cart-popup-header{

        display:flex !important;

        min-height:70px !important;

        padding:18px !important;

        box-sizing:border-box !important;

    }


    .asa-cart-items{

        display:block !important;

        width:100% !important;

        max-height:300px !important;

        overflow-y:auto !important;

    }


    .asa-cart-item{

        display:flex !important;

        width:100% !important;

        box-sizing:border-box !important;

    }


    .asa-cart-footer{

        display:block !important;

        width:100% !important;

        box-sizing:border-box !important;

    }


    .asa-cart-empty{

        display:flex !important;

        width:100% !important;

        min-height:160px !important;

        box-sizing:border-box !important;

    }
    
    .asa-cart:hover .asa-cart-popup {

        min-width: 300px !important;
    }




}