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

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

html{
    scroll-behavior:smooth;
}

:root{

    --bg:#0b1120;
    --bg2:#111827;
    --bg3:#1e293b;

    --glass:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.14);

    --white:#fff;

    --text:#d6dce5;

    --blue:#3b82f6;

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

}


/* ==========================================
        BODY
========================================== */

body{

    min-height:100vh;

    font-family:
    "Segoe UI",
    sans-serif;

    color:white;

    overflow-x:hidden;

    background:

    radial-gradient(
    circle at 10% 10%,
    rgba(59,130,246,.18),
    transparent 28%
    ),

    radial-gradient(
    circle at 90% 20%,
    rgba(14,165,233,.15),
    transparent 35%
    ),

    radial-gradient(
    circle at 80% 90%,
    rgba(99,102,241,.14),
    transparent 35%
    ),

    linear-gradient(
    135deg,
    #0b1120,
    #172554,
    #1e293b);

    background-attachment:fixed;

    position:relative;

}
body::before{

    content:"";

    position:fixed;

    width:650px;
    height:650px;

    left:-250px;
    top:-220px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(59,130,246,.18),
        transparent 70%
    );

    filter:blur(70px);

    animation:
    float1 16s ease-in-out infinite;

    pointer-events:none;

}
body::after{

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    right:-220px;
    bottom:-180px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(14,165,233,.15),
        transparent 70%
    );

    filter:blur(70px);

    animation:
    float2 18s ease-in-out infinite;

    pointer-events:none;

}
@keyframes float1{

0%{

transform:
translate(0,0);

}

50%{

transform:
translate(80px,40px);

}

100%{

transform:
translate(0,0);

}

}

@keyframes float2{

0%{

transform:
translate(0,0);

}

50%{

transform:
translate(-60px,-60px);

}

100%{

transform:
translate(0,0);

}

}
.container{

    padding-top:60px;

    padding-bottom:60px;

}
/* ==========================================
        PRODUCT CARD
========================================== */

.card{

    width:340px;

    min-height:520px;

    margin:20px auto;

    position:relative;

    overflow:hidden;

    border-radius:26px;

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

    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.12),

        rgba(255,255,255,.04)

    );

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

    box-shadow:

        0 30px 70px rgba(0,0,0,.40);

    transform-style:preserve-3d;

    perspective:1200px;

    cursor:pointer;

    transition:

        transform .15s linear,

        box-shadow .30s ease,

        border-color .30s ease;
}

.card:hover{

    border-color:

        rgba(255,255,255,.25);

    box-shadow:

        0 45px 90px rgba(0,0,0,.50);

}
.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        650px circle at var(--x) var(--y),

        rgba(255,255,255,.18),

        transparent 40%

    );

    opacity:0;

    transition:.2s;

    pointer-events:none;

}

.card:hover::before{

    opacity:1;

}
.card::after{

    content:"";

    position:absolute;

    top:0;

    left:-170%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.card:hover::after{

    left:170%;

}
.card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

    transition:

        transform .35s ease,

        filter .35s ease;

    transform:

        translateZ(60px);

    filter:

        brightness(.97);

}

.card:hover img{

    transform:

        translateZ(80px)

        scale(1.05);

    filter:

        brightness(1.05);

}
.card-body{

    padding:20px;

    transform:

        translateZ(35px);

}
.card-title{

    color:white;

    font-size:1.25rem;

    font-weight:700;

    letter-spacing:.4px;

}
.card-text{

    margin-top:10px;

    color:#cbd5e1;

    font-size:1rem;

    font-weight:600;

}   
.card:hover .card-title{

    color:#93c5fd;

    transition:.3s;

}

.card:hover .card-text{

    color:white;

}
/* ===========================
        SEARCH
=========================== */

.search-box{

    width:min(700px,90%);

    margin:40px auto;

    display:flex;

    align-items:center;

    gap:12px;
}

.search-box input{

    flex:1;

    height:58px;

    padding:0 22px;

    border-radius:18px;

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

    background:

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

    backdrop-filter:blur(20px);

    color:white;

    font-size:16px;

    outline:none;

    transition:.3s;

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

}

.search-box input::placeholder{

    color:rgba(255,255,255,.55);

}

.search-box input:focus{

    border-color:#60a5fa;

    box-shadow:

        0 0 0 4px rgba(59,130,246,.15),

        0 20px 40px rgba(0,0,0,.35);

}

.search-box button{

    width:58px;

    height:58px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:white;

    font-size:22px;

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    transition:.25s;

    box-shadow:
        0 12px 30px rgba(37,99,235,.35);

}

.search-box button:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 40px rgba(37,99,235,.45);

}

.search-box button:active{

    transform:
        scale(.95);

}
.search-box{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:30px;
}
.search-box input{
    flex:1;
    width:100%;
}
/* ===========================
        PAGINATION
=========================== */

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:50px 0;

    padding:0;

    list-style:none;

}

.pagination .page-item{

    list-style:none;

}

.pagination .page-item a{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    height:45px;

    padding:0 18px;

    text-decoration:none;

    color:#dbeafe;

    border-radius:14px;

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

    backdrop-filter:blur(16px);

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

    transition:all .25s ease;

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

}

.pagination .page-item a:hover{

    background:rgba(59,130,246,.25);

    border-color:rgba(96,165,250,.5);

    color:#fff;

    transform:translateY(-3px);

}

.pagination .active a{

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    border:none;

    box-shadow:
        0 10px 25px rgba(37,99,235,.45);

}

.pagination .active a:hover{

    transform:none;

}
.pagination .page-item a{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    height:45px;

    padding:0 20px;

    text-decoration:none;

    color:#dbeafe;

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

    backdrop-filter:blur(16px);

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

    border-radius:14px;

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

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        background .28s ease,
        border-color .28s ease,
        color .28s ease,
        box-shadow .28s ease;

}

.pagination .page-item a:hover{

    transform:
        translateY(-4px)
        scale(1.04);

    background:rgba(59,130,246,.20);

    border-color:rgba(96,165,250,.45);

    color:white;

    box-shadow:
        0 18px 35px rgba(37,99,235,.28);

}
.pagination .page-item a:active{

    transform:
        translateY(0)
        scale(.95);

}
.pagination .active a{

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:white;

    border:none;

    box-shadow:
        0 18px 40px rgba(37,99,235,.45);

}
.pagination .page-item a::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:translateX(-160%);

    transition:transform .6s;

}
.pagination .page-item a{

    position:relative;

    overflow:hidden;
}
.pagination .page-item a:hover::before{

    transform:translateX(160%);

}
.detail-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:10px 18px;

    margin-top:15px;

    color:#dbeafe;
    text-decoration:none;
    font-size:14px;
    font-weight:600;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(96,165,250,.18);

    backdrop-filter:blur(18px);

    border-radius:999px;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .35s,
        box-shadow .35s,
        color .35s;

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

}

.detail-btn::after{

    content:"↗";

    font-size:15px;

    transition:
        transform .35s ease;

}

.detail-btn:hover{

    color:#fff;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.9),
        rgba(14,165,233,.8)
    );

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px rgba(37,99,235,.35);

}

.detail-btn:hover::after{

    transform:
        translateX(4px)
        translateY(-2px);

}

.detail-btn:active{

    transform:
        scale(.97);

}   
:root{

    --nav-bg:rgba(10,18,35,.65);

    --blue:#3b82f6;

    --cyan:#06b6d4;

    --text:#dbeafe;

}



/* ==========================
        NAVBAR
========================== */


.navbar{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);


    width:92%;

    max-width:1400px;

    height:75px;


    padding:0 35px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    background:var(--nav-bg);


    backdrop-filter:blur(25px);

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


    border:

    1px solid rgba(96,165,250,.18);



    border-radius:24px;



    box-shadow:


    0 20px 60px rgba(0,0,0,.45),


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



    overflow:visible;


    z-index:9999;


}





/* نور متحرک پشت Navbar */

.navbar::before{


    content:"";


    position:absolute;


    width:400px;

    height:400px;


    border-radius:50%;


    background:


    radial-gradient(

        circle,

        rgba(59,130,246,.35),

        transparent 70%

    );


    left:-200px;

    top:-200px;


    filter:blur(40px);



    animation:

    navGlow 8s infinite alternate;



}



@keyframes navGlow{


    from{

        transform:translateX(0);

    }


    to{

        transform:translateX(900px);

    }


}





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


.logo{

    position:relative;

    z-index:2;

}


.logo a{


    display:flex;

    align-items:center;


    gap:12px;


    text-decoration:none;


}



.logo-icon{


    font-size:32px;


    color:#60a5fa;



    filter:


    drop-shadow(

        0 0 15px rgba(59,130,246,.8)

    );



    transition:.5s;


}



.logo-text{


    color:white;


    font-size:26px;


    font-weight:800;


    letter-spacing:1px;


}



.logo:hover .logo-icon{


    transform:


    rotate(180deg)

    scale(1.25);



}





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


.nav-links{


    display:flex;


    align-items:center;


    gap:15px;


    list-style:none;


    padding:0;

    margin:0;


    position:relative;


    z-index:2;



}



.nav-links a{


    position:relative;


    display:flex;


    align-items:center;

    justify-content:center;



    padding:12px 20px;



    border-radius:16px;



    text-decoration:none;


    color:var(--text);


    font-weight:600;


    overflow:hidden;



    transition:.35s;



}





/* نور روی لینک */

.nav-links a::before{


    content:"";


    position:absolute;


    inset:0;



    background:


    radial-gradient(

        circle,

        rgba(59,130,246,.4),

        transparent 70%

    );



    opacity:0;



    transform:scale(.3);



    transition:.4s;



}





.nav-links a:hover::before{


    opacity:1;


    transform:scale(1);


}




.nav-links a:hover{


    color:white;


    transform:


    translateY(-4px);



    background:

    rgba(255,255,255,.05);



    box-shadow:


    0 10px 30px rgba(59,130,246,.25);



}
/* ==========================
        NAV ACTIONS
========================== */


.nav-actions{

    display:flex;

    align-items:center;

    gap:15px;

    position:relative;

    z-index:5;

}





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


.cart-btn{


    width:50px;

    height:50px;


    display:flex;


    align-items:center;

    justify-content:center;



    position:relative;



    border-radius:17px;



    border:

    1px solid rgba(96,165,250,.25);



    background:


    rgba(255,255,255,.07);



    backdrop-filter:blur(15px);



    color:white;


    font-size:22px;


    cursor:pointer;



    transition:


    .35s cubic-bezier(.22,1,.36,1);



}





.cart-btn:hover{


    transform:


    translateY(-5px)

    rotate(6deg);



    background:


    rgba(59,130,246,.25);



    box-shadow:


    0 15px 40px rgba(59,130,246,.35);



}





.cart-btn:active{


    transform:


    scale(.9);



}




/* نور داخل دکمه */


.cart-btn::before{


    content:"";


    position:absolute;


    inset:0;



    border-radius:inherit;



    background:


    radial-gradient(

        circle,

        rgba(59,130,246,.45),

        transparent 70%

    );



    opacity:0;



    transition:.4s;



}




.cart-btn:hover::before{


    opacity:1;


}




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


.cart-count{


    position:absolute;


    top:-8px;


    right:-8px;



    width:23px;


    height:23px;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    background:


    linear-gradient(

        135deg,

        #3b82f6,

        #06b6d4

    );



    color:white;



    font-size:12px;


    font-weight:800;



    box-shadow:


    0 0 20px rgba(59,130,246,.8);



    animation:


    pulseCart 2s infinite;



}





@keyframes pulseCart{


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.2);

    }


    100%{

        transform:scale(1);

    }


}





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


.menu-btn{


    display:none;



    width:50px;


    height:50px;



    border-radius:17px;



    border:

    1px solid rgba(96,165,250,.25);



    background:


    rgba(255,255,255,.07);



    backdrop-filter:blur(15px);



    color:white;


    font-size:24px;



    cursor:pointer;



    transition:.35s;



}




.menu-btn:hover{


    transform:


    translateY(-5px)

    rotate(-5deg);



    background:


    rgba(59,130,246,.25);



}




.menu-btn:active{


    transform:scale(.9);


}
@media(max-width:768px){



    .navbar{

        width:94%;

        height:70px;

        padding:0 18px;

        border-radius:22px;

    }





    .logo-text{

        font-size:20px;

    }




    .logo-icon{

        font-size:25px;

    }




    /* مخفی کردن لینک ها */


    .nav-links{


        position:absolute;


        top:85px;


        left:0;



        width:100%;



        padding:20px;



        display:flex;


        flex-direction:column;


        gap:12px;



        background:


        linear-gradient(

            145deg,

            rgba(15,23,42,.95),

            rgba(30,41,59,.85)

        );



        backdrop-filter:blur(25px);



        border-radius:25px;



        border:

        1px solid rgba(96,165,250,.25);



        box-shadow:


        0 35px 80px rgba(0,0,0,.55);





        /* حالت بسته */


        opacity:0;



        visibility:hidden;



        transform:


        perspective(900px)

        rotateX(-90deg)

        translateY(-40px);



        transform-origin:top;



        transition:


        .55s cubic-bezier(.22,1,.36,1);



    }







    /* حالت باز */


    .nav-links.active{


        opacity:1;



        visibility:visible;



        transform:


        perspective(900px)

        rotateX(0deg)

        translateY(0);



    }





    .nav-links li{


        width:100%;


    }





    .nav-links a{


        width:100%;


        padding:15px;


        justify-content:center;


    }






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


    .menu-btn{


        display:flex;


        align-items:center;


        justify-content:center;



    }




    .nav-actions{


        gap:10px;


    }




    .cart-btn,

    .menu-btn{


        width:45px;


        height:45px;


        border-radius:15px;


    }





}
@keyframes menuShow{


    from{


        opacity:0;


        transform:


        translateY(-20px)

        rotateX(-40deg);



    }




    to{


        opacity:1;


        transform:


        translateY(0)

        rotateX(0);



    }


}
/* ================================
        MOBILE MENU FIX
================================ */

.menu-btn{
    display:none;
}


@media(max-width:768px){


    .menu-btn{

        display:flex;

        width:45px;
        height:45px;

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

        border-radius:15px;

        border:1px solid rgba(96,165,250,.25);

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

        color:white;

        font-size:22px;

        cursor:pointer;

    }



    .nav-links{

        position:absolute;

        top:85px;

        left:0;

        width:100%;


        flex-direction:column;

        gap:12px;

        padding:20px;


        background:

        rgba(11,17,32,.95);


        border-radius:22px;


        opacity:0;

        visibility:hidden;


        transform:

        translateY(-20px);


        transition:.35s ease;


        box-shadow:

        0 25px 60px rgba(0,0,0,.5);


    }



    .nav-links.active{


        opacity:1;

        visibility:visible;


        transform:

        translateY(0);


    }



    .nav-links li{

        width:100%;

    }



    .nav-links li a{


        width:100%;

        justify-content:center;

    }



}
@media(max-width:768px){

    .menu-btn{

        display:flex !important;

        width:45px;
        height:45px;

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

        border-radius:15px;

        border:1px solid rgba(96,165,250,.25);

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

        color:white;

        font-size:22px;

        cursor:pointer;

    }

}

@media(max-width:768px){

.nav-links.active{
    opacity:1 !important;
    visibility:visible !important;
    transform:
    perspective(800px)
    rotateX(0deg) !important;
}
}
.mini-cart{

    position:fixed;

    top:110px;

    right:-420px;

    width:380px;

    max-height:600px;

    overflow:auto;

    padding:25px;

    border-radius:25px;

    background:rgba(17,24,39,.92);

    backdrop-filter:blur(25px);

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

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

    transition:.45s cubic-bezier(.22,1,.36,1);

    z-index:99999;

}

.mini-cart.show{

    right:30px;

}

.mini-cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.mini-cart-header h4{

    color:white;

}

#closeCart{

    border:none;

    background:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}

.cart-item{

    display:flex;

    gap:15px;

    margin-bottom:18px;

}

.cart-item img{

    width:70px;

    height:70px;

    border-radius:15px;

    object-fit:cover;

}

.cart-info{

    color:white;

}

.cart-page-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;


    width:100%;

    padding:15px 25px;


    color:white;

    text-decoration:none;


    font-size:16px;

    font-weight:700;


    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


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


    box-shadow:

    0 15px 35px rgba(37,99,235,.35);


    overflow:hidden;


    transition:

    .35s cubic-bezier(.22,1,.36,1);

}


/* نور متحرک روی دکمه */

.cart-page-btn::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );


    transform:translateX(-120%);


    transition:.6s;

}



.cart-page-btn:hover::before{

    transform:translateX(120%);

}



.cart-page-btn:hover{

    transform:

    translateY(-5px)
    scale(1.03);


    box-shadow:

    0 25px 50px rgba(37,99,235,.55);

}



.cart-page-btn:active{

    transform:

    scale(.96);

}
.qty-minus:hover,
.qty-plus:hover {

    background: #1e3a8a; /* آبی روشن‌تر */

    transform: scale(1.1);

}



.cart-product > div:last-child {

    display: flex;

    align-items: center;

    gap: 12px;

}

.qty-minus,
.qty-plus {

    width: 32px;
    height: 32px;

    border: none;

    background: #0f172a; /* آبی تیره */

    color: white;

    font-size: 20px;

    font-weight: bold;

    border-radius: 8px;

    cursor: pointer;

    transition: .3s;

}

.cart-product span {

    min-width: 30px;

    text-align: center;

    font-weight: bold;

    color: #ededed;

}
/* =========================================
   PRODUCT FILTER / SORT
========================================= */

.category-box {
    position: relative;

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

    width: 100%;

    margin: 25px 0;

    padding: 18px 22px;

    background:
        linear-gradient(
            135deg,
            rgba(30, 41, 59, 0.95),
            rgba(15, 23, 42, 0.92)
        );

    border: 1px solid rgba(96, 165, 250, 0.18);

    border-radius: 18px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(15px);

    overflow: hidden;
}


/* نور ظریف بالای باکس */

.category-box::before {
    content: "";

    position: absolute;

    top: 0;
    right: 8%;

    width: 120px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #60a5fa,
        transparent
    );

    opacity: 0.8;
}


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

.category-box label {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #e2e8f0;

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

    white-space: nowrap;
}


/* آیکون کنار متن */

.category-box label::before {
    content: "⚙";

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

    width: 34px;
    height: 34px;

    background: rgba(59, 130, 246, 0.12);

    border: 1px solid rgba(96, 165, 250, 0.2);

    border-radius: 10px;

    color: #60a5fa;

    font-size: 15px;
}


/* =========================================
   SELECT
========================================= */

.category-box select {
    appearance: none;
    -webkit-appearance: none;

    min-width: 220px;

    padding: 12px 42px 12px 16px;

    background-color: #111827;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #60a5fa 50%
        ),
        linear-gradient(
            135deg,
            #60a5fa 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;

    color: #f8fafc;

    border: 1px solid rgba(96, 165, 250, 0.22);

    border-radius: 12px;

    outline: none;

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

    cursor: pointer;

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


/* Hover */

.category-box select:hover {
    border-color: rgba(96, 165, 250, 0.55);

    background-color: #172033;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.12);
}


/* Focus */

.category-box select:focus {
    border-color: #60a5fa;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.12),
        0 8px 25px rgba(37, 99, 235, 0.1);
}


/* Options */

.category-box select option {
    background: #111827;

    color: #f8fafc;

    padding: 10px;
}


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

@media (max-width: 768px) {

    .category-box {
        flex-direction: column;

        align-items: stretch;

        gap: 14px;

        padding: 16px;
    }


    .category-box label {
        font-size: 14px;
    }


    .category-box select {
        width: 100%;

        min-width: 0;

        padding: 12px 42px 12px 14px;
    }

}


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

@media (max-width: 400px) {

    .category-box {
        margin: 18px 0;

        padding: 14px;

        border-radius: 15px;
    }

    .category-box label::before {
        width: 31px;
        height: 31px;
    }

    .category-box select {
        font-size: 13px;
    }

}
/* =========================================
   PRODUCT FILTER
========================================= */

.filter-box {
    width: 100%;
    margin: 25px 0;
    padding: 22px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}


/* HEADER */

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-header strong {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.filter-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);

    border-radius: 10px;
    font-size: 18px;
}


/* FILTER OPTIONS */

.filter-options {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 11px 16px;

    color: #cbd5e1;
    background: #1e293b;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.filter-item:hover {
    color: #fff;
    background: #263449;
    border-color: rgba(96, 165, 250, 0.35);
    transform: translateY(-2px);
}


/* HIDE DEFAULT CHECKBOX */

.filter-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* CUSTOM CHECKMARK */

.checkmark {
    width: 19px;
    height: 19px;

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

    border: 2px solid #64748b;
    border-radius: 6px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


/* CHECKED */

.filter-item input:checked + .checkmark {
    background: #3b82f6;
    border-color: #3b82f6;
}

.filter-item input:checked + .checkmark::after {
    content: "✓";

    color: #fff;
    font-size: 13px;
    font-weight: 800;
}


/* SELECTED ITEM */

.filter-item:has(input:checked) {
    color: #fff;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.45);
}


/* SUBMIT BUTTON */

.filter-submit {
    border: none;
    outline: none;

    padding: 11px 20px;

    color: #fff;
    background: #2563eb;

    border-radius: 11px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.filter-submit:hover {
    background: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.filter-submit:active {
    transform: translateY(0);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .filter-box {
        padding: 17px;
        border-radius: 15px;
    }

    .filter-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter-submit {
        width: 100%;
    }

    .filter-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .filter-item {
        justify-content: center;
    }

}


@media (max-width: 480px) {

    .filter-options {
        grid-template-columns: 1fr;
    }

    .filter-item {
        justify-content: flex-start;
    }

}
/* =========================================
   PRODUCTS GRID
========================================= */

.products-grid {
    width: 100%;
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 340px)
        );

    justify-content: center;

    gap: 30px;

    padding: 20px 0 40px;
}


/* کارت‌ها */

.products-grid .card {
    width: 340px;
    margin: 0;
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 1200px) {

    .products-grid {
        grid-template-columns:
            repeat(3, 340px);
    }

}


/* =========================================
   LAPTOP
========================================= */

@media (min-width: 769px) and (max-width: 1199px) {

    .products-grid {
        grid-template-columns:
            repeat(2, 340px);
    }

}


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

@media (max-width: 768px) {

    .products-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 25px;
    }

    .products-grid .card {
        width: min(340px, 92vw);
    }

}
/* =========================================================
   LIGHT THEME
========================================================= */

body.light-mode {
    background: #f4f8fc;
    color: #172033;
}


/* =========================
   NAVBAR
========================= */

body.light-mode .navbar {
    background: rgba(255,255,255,.82);
    border-color: rgba(15,23,42,.08);
}

body.light-mode .logo-text {
    color: #111827;
}

body.light-mode .nav-links a {
    color: #334155;
}

body.light-mode .nav-links a:hover {
    color: #1688e8;
}

body.light-mode .theme-btn,
body.light-mode .cart-btn,
body.light-mode .menu-btn {
    background: rgba(15,23,42,.05);
    color: #2563eb;
    border-color: rgba(15,23,42,.10);
}


/* =========================
   HERO
========================= */

body.light-mode .hero {
    background: #f4f8fc;
}

body.light-mode .hero-title {
    color: #0f172a;
}

body.light-mode .hero-description {
    color: #475569;
}

body.light-mode .hero-label {
    background: rgba(37,99,235,.07);
    border-color: rgba(37,99,235,.15);
    color: #2563eb;
}


/* =========================
   TRUST
========================= */

body.light-mode .trust-card {
    background: rgba(255,255,255,.75);
    border-color: rgba(15,23,42,.08);
}

body.light-mode .trust-label {
    color: #64748b;
}

body.light-mode .trust-number {
    color: #0f172a;
}


/* =========================
   SECTIONS
========================= */

body.light-mode .section {
    background: #f4f8fc;
}

body.light-mode .section-title {
    color: #0f172a;
}

body.light-mode .section-description {
    color: #64748b;
}

body.light-mode .eyebrow {
    color: #2563eb;
}


/* =========================
   ABOUT
========================= */

body.light-mode .about-box {
    background: rgba(255,255,255,.8);
    border-color: rgba(15,23,42,.08);
}

body.light-mode .about-box-title {
    color: #334155;
}

body.light-mode .about-box-heading {
    color: #0f172a;
}

body.light-mode .about-box-text {
    color: #64748b;
}

body.light-mode .about-description {
    color: #475569;
}

body.light-mode .feature {
    background: rgba(255,255,255,.75);
    border-color: rgba(15,23,42,.08);
}

body.light-mode .feature-title {
    color: #0f172a;
}

body.light-mode .feature-text {
    color: #64748b;
}


/* =========================
   WHY
========================= */

body.light-mode .why-card {
    background: rgba(255,255,255,.8);
    border-color: rgba(15,23,42,.08);
}

body.light-mode .why-title {
    color: #0f172a;
}

body.light-mode .why-text {
    color: #64748b;
}


/* =========================
   PROCESS
========================= */

body.light-mode .process-card {
    background: rgba(255,255,255,.8);
    border-color: rgba(15,23,42,.08);
}

body.light-mode .process-title {
    color: #0f172a;
}

body.light-mode .process-text {
    color: #64748b;
}


/* =========================
   CATEGORIES
========================= */

body.light-mode .category {
    background: rgba(255,255,255,.8);
    border-color: rgba(15,23,42,.08);
}

body.light-mode .category-title {
    color: #0f172a;
}

body.light-mode .category-text {
    color: #64748b;
}


/* =========================
   CTA
========================= */

body.light-mode .cta {
    background: #f4f8fc;
}

body.light-mode .cta-box {
    border-color: rgba(15,23,42,.08);
}


/* =========================
   HERO PRODUCT SLIDER
========================= */

body.light-mode .hero-product-slider {
    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(25,130,255,.10),
            transparent 45%
        ),
        #ffffff;

    border-color: rgba(15,23,42,.08);

    box-shadow:
        0 30px 80px rgba(15,23,42,.12);
}

body.light-mode .hero-product-gradient {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.95) 22%,
            rgba(255,255,255,.82) 40%,
            rgba(255,255,255,.30) 50%,
            rgba(255,255,255,.05) 70%,
            rgba(255,255,255,0) 100%
        );
}

body.light-mode .hero-product-content h2 {
    color: #0f172a;
    text-shadow:
        0 5px 30px rgba(0,0,0,.08);
}

body.light-mode .hero-product-content p {
    color: #64748b;
}

body.light-mode .hero-slide-number {
    background: rgba(15,23,42,.05);
    border-color: rgba(15,23,42,.10);
    color: #334155;
}

body.light-mode .hero-slider-dots {
    background: rgba(255,255,255,.65);
    border-color: rgba(15,23,42,.08);
}
/* =========================================================
   INDEX - LIGHT MODE FIX
   فقط برای صفحه اصلی
========================================================= */

body.light-mode {
    background: #f4f8fc;
}

/* =========================================================
   HERO PRODUCT SLIDER
========================================================= */

body.light-mode .hero-product-slider {
    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(37, 99, 235, .08),
            transparent 45%
        ),
        #ffffff;

    border-color: rgba(15, 23, 42, .08);

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .12);
}


/* متن اصلی اسلایدر */
body.light-mode .hero-product-content h2 {
    color: #0f172a !important;
}


/* توضیحات */
body.light-mode .hero-product-content p {
    color: #475569 !important;
}


/* لیبل */
body.light-mode .hero-product-label {
    color: #2563eb !important;

    background: rgba(37, 99, 235, .08);

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


/* شماره اسلاید */
body.light-mode .hero-slide-number {
    color: #334155 !important;

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

    border-color:
        rgba(15, 23, 42, .10);
}


/* نقطه‌های اسلایدر */
body.light-mode .hero-slider-dots {
    background: rgba(255, 255, 255, .75);

    border-color:
        rgba(15, 23, 42, .10);
}


/* =========================================================
   NAVBAR - LIGHT MODE
========================================================= */

body.light-mode .navbar {
    background: rgba(255, 255, 255, .88);

    border-color:
        rgba(15, 23, 42, .10);

    box-shadow:
        0 20px 60px rgba(15, 23, 42, .12);
}


/* لوگو */
body.light-mode .logo-text {
    color: #111827 !important;
}


body.light-mode .logo-icon {
    color: #2563eb !important;
}


/* لینک‌های Navbar */
body.light-mode .nav-links a {
    color: #334155 !important;
}

body.light-mode .nav-links a:hover {
    color: #2563eb !important;

    background:
        rgba(37, 99, 235, .06);
}


/* =========================================================
   NAV BUTTONS
========================================================= */

body.light-mode .cart-btn,
body.light-mode .menu-btn,
body.light-mode .theme-btn {
    color: #2563eb !important;

    background:
        rgba(15, 23, 42, .05);

    border-color:
        rgba(15, 23, 42, .10);
}

body.light-mode .cart-btn:hover,
body.light-mode .menu-btn:hover,
body.light-mode .theme-btn:hover {
    color: #2563eb !important;

    background:
        rgba(37, 99, 235, .10);
}


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

@media (max-width: 768px) {

    body.light-mode .nav-links {
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .98),
                rgba(241, 245, 249, .97)
            ) !important;

        border:
            1px solid rgba(15, 23, 42, .10);

        box-shadow:
            0 30px 70px rgba(15, 23, 42, .18);

        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);
    }


    /* متن لینک‌های منوی موبایل */
    body.light-mode .nav-links li a {
        color: #334155 !important;
    }


    body.light-mode .nav-links li a:hover {
        color: #2563eb !important;

        background:
            rgba(37, 99, 235, .08);
    }


    /* دکمه همبرگر */
    body.light-mode .menu-btn {
        color: #2563eb !important;

        background:
            rgba(15, 23, 42, .05) !important;

        border-color:
            rgba(15, 23, 42, .10) !important;
    }


    body.light-mode .menu-btn:hover {
        background:
            rgba(37, 99, 235, .10) !important;
    }
}


/* =========================================================
   HERO MOBILE - LIGHT MODE
========================================================= */

@media (max-width: 768px) {

    body.light-mode .hero-product-gradient {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, .96),
                rgba(255, 255, 255, .82),
                rgba(255, 255, 255, .35),
                rgba(255, 255, 255, 0)
            ) !important;
    }


    body.light-mode .hero-product-content h2 {
        color: #0f172a !important;

        text-shadow:
            0 4px 20px rgba(255, 255, 255, .8);
    }


    body.light-mode .hero-product-content p {
        color: #475569 !important;
    }
   
}
 body.light-mode h2{
    color: #122745 !important;
    }
/* =========================================================
   PRODUCT PRICE - LIGHT MODE
   همیشه مشکی، حتی هنگام Hover
========================================================= */