@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Vazirmatn',Tahoma,sans-serif;
}


body{

    direction:rtl;
    background:#fff;
    color:#1b2525;

}



.container{

    width:90%;
    max-width:1300px;
    margin:auto;

}




/* HEADER */


.header{

    position:fixed;
    top:0;
    right:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(15px);
    border-bottom:1px solid #eee;

}



.header .container{

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

}



.logo{

    display:flex;
    align-items:center;
    gap:15px;
    color:#00a896;
    font-size:22px;
    font-weight:800;

}



.logo img{

    width:60px;
    height:60px;
    object-fit:contain;

}



nav{

    display:flex;
    gap:30px;

}



nav a{

    text-decoration:none;
    color:#222;
    transition:.3s;

}



nav a:hover{

    color:#00a896;

}



.language-btn{

    background:#00a896;
    border:0;
    color:white;
    width:45px;
    height:45px;
    border-radius:50%;
    cursor:pointer;

}






/* HERO */


.hero{

    height:100vh;
    background:url('../images/hero/hero.jpg')
    center/cover;

    display:flex;
    align-items:center;
    position:relative;

}



.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,168,150,.8),
    rgba(0,0,0,.55)
    );

}



.hero-content{

    position:relative;
    z-index:2;
    color:white;
    width:90%;
    max-width:900px;
    margin:auto;

}



.hero-content h1{

    font-size:65px;
    font-weight:900;

}



.hero-content h2{

    font-size:35px;
    margin:15px 0;

}



.hero-content p{

    font-size:20px;

}



.hero-buttons{

    margin-top:35px;
    display:flex;
    gap:20px;

}



.hero-buttons a{

    text-decoration:none;
    background:white;
    color:#00a896;
    padding:15px 35px;
    border-radius:40px;
    font-weight:bold;

}






/* CATEGORIES */


.categories{

    padding:100px 0;

}



.categories h2,
.products-preview h2{

    text-align:center;
    color:#00a896;
    font-size:38px;
    margin-bottom:50px;

}



.category-grid{

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;

}



.category-card{

    background:#f3fbfa;
    padding:30px 10px;
    text-align:center;
    border-radius:25px;
    transition:.3s;
    font-size:35px;

}



.category-card h3{

    font-size:16px;
    margin-top:15px;

}



.category-card:hover{

    transform:translateY(-10px);
    background:#00a896;
    color:white;

}






/* PRODUCTS */


.products-preview{

    padding:100px 0;
    background:#f7fbfb;

}



.product-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}



.product-card{

    background:white;
    border-radius:25px;
    overflow:hidden;
    text-align:center;
    padding-bottom:25px;
    box-shadow:0 15px 40px #00000012;

}



.product-card img{

    width:100%;
    height:230px;
    object-fit:cover;

}



.product-card h3{

    margin:20px 0;

}



.product-card a{

    color:#00a896;
    text-decoration:none;
    font-weight:bold;

}






/* FEATURES */


.features-section{

    padding:80px 0;

}



.features{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.feature{

    text-align:center;
    background:white;
    padding:30px;
    border-radius:25px;
    box-shadow:0 10px 30px #00000010;

}



.feature h3{

    font-size:35px;
    color:#00a896;

}






/* FOOTER */


footer{

    background:#071f1f;
    color:white;
    padding:60px 0 20px;

}



.footer-container{

    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;

}



.footer-container h3{

    color:#00d5bd;

}



.copyright{

    text-align:center;
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid #ffffff22;

}

/* =========================
   Featured Products Design
========================= */


.products-preview{

    padding:100px 0;
    background:#f7fbfb;

}


.products-preview h2{

    position:relative;
    margin-bottom:60px;

}


.products-preview h2:after{

    content:"";
    width:70px;
    height:4px;
    background:#00a896;
    display:block;
    margin:15px auto;
    border-radius:20px;

}



.product-card{

    position:relative;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 10px 35px rgba(0,0,0,.08);

}



.product-card:hover{

    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(0,168,150,.18);

}



.product-card img{

    height:250px;
    width:100%;
    object-fit:cover;
    transition:.4s;

}



.product-card:hover img{

    transform:scale(1.05);

}



.product-card h3{

    font-size:22px;
    color:#111;
    margin:25px 0 10px;

}



.product-card p{

    color:#777;
    font-size:15px;

}



.product-card a{

    display:inline-block;
    margin-top:15px;
    background:#00a896;
    color:white;
    padding:10px 25px;
    border-radius:30px;
    transition:.3s;

}



.product-card a:hover{

    background:#007f72;

}





/* =========================
   Features 4 Cards
========================= */


.features-section{

    padding:90px 0;
    background:white;

}



.features{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}



.feature{

    position:relative;
    background:#fff;
    border-radius:30px;
    padding:40px 20px;
    text-align:center;

    border:1px solid #e8eeee;

    transition:.35s;

}



.feature:hover{

    transform:translateY(-10px);
    border-color:#00a896;
    box-shadow:0 15px 40px rgba(0,168,150,.15);

}



.feature h3{

    width:75px;
    height:75px;

    margin:0 auto 20px;

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

    border-radius:50%;

    background:#e8faf7;

    color:#00a896;

    font-size:35px;

}



.feature p{

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

    color:#333;

}

/* Section Title */

.section-title{

    text-align:center;
    margin-bottom:50px;

}


.section-title h2{

    color:#00a896;
    font-size:38px;
    font-weight:800;
    margin-bottom:15px;

}



.section-title h2:after{

    content:"";
    display:block;
    width:70px;
    height:4px;
    background:#00a896;
    margin:15px auto;
    border-radius:20px;

}



.section-title p{

    color:#666;
    font-size:17px;

}

/* Special Offers */

.offer-box{

    background:#fff;
    border-radius:35px;
    padding:35px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);

}



.offer-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;

}



.offer-header h3{

    color:#00a896;
    font-size:28px;

}



.timer{

    display:flex;
    gap:12px;

}



.timer span{

    background:#071f1f;
    color:white;
    width:75px;
    height:75px;
    border-radius:20px;

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

    font-size:25px;
    font-weight:bold;

}



.timer small{

    font-size:12px;
    font-weight:normal;

}



.discount-card{

    position:relative;

}



.discount{

    position:absolute;
    top:15px;
    right:15px;

    background:#00a896;
    color:white;

    padding:8px 15px;

    border-radius:20px;

    font-weight:bold;

}



.price{

    display:flex;
    flex-direction:column;
    gap:5px;

    margin:15px 0;

}



.price del{

    color:#999;

}



.price strong{

    color:#00a896;
    font-size:22px;

}

/* =========================
   Hero Slider
========================= */


.hero-slider{

    height:100vh;
    position:relative;
    overflow:hidden;

}



.slide{

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    opacity:0;
    visibility:hidden;

    transition:opacity 1s ease;

    display:flex;
    align-items:center;

}



.slide.active{

    opacity:1;
    visibility:visible;

}




.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,168,150,.85),
    rgba(0,0,0,.65)
    );

}




.hero-content{

    position:relative;
    z-index:2;

    width:90%;
    max-width:1200px;

    margin:auto;

    color:white;

    animation:fadeUp 1s ease;

}




.hero-content h1{

    font-size:70px;
    font-weight:900;

    margin-bottom:15px;

}



.hero-content h2{

    font-size:38px;
    margin-bottom:15px;

}



.hero-content p{

    font-size:21px;
    max-width:650px;

}





.hero-buttons{

    display:flex;
    gap:20px;

    margin-top:35px;

}



.hero-buttons a{

    padding:15px 35px;

    border-radius:50px;

    background:white;

    color:#00a896;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}



.hero-buttons a:hover{

    transform:translateY(-5px);

    background:#00a896;

    color:white;

}





/* Slider Buttons */


.slider-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:58px;

height:58px;

margin:0;

padding:0;

display:flex;

align-items:center;

justify-content:center;

border:none;

border-radius:50%;

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

backdrop-filter:blur(12px);

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

color:#fff;

cursor:pointer;

transition:.3s;

z-index:20;

}

.slider-btn svg{

width:24px;

height:24px;

display:block;

flex-shrink:0;

}

.slider-btn:hover{

background:#00a896;

transform:translateY(-50%) scale(1.08);

box-shadow:0 10px 25px rgba(0,168,150,.35);

}

.slider-btn.prev{

right:30px;

}

.slider-btn.next{

left:30px;

}






/* Animation */


@keyframes fadeUp{


from{

    opacity:0;

    transform:translateY(40px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}

/* =====================
   Search Box
===================== */


.search-section{

    margin-top:-80px;
    position:relative;
    z-index:10;
    padding-bottom:80px;

}



.search-box{

    background:white;

    border-radius:35px;

    padding:40px;

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

    text-align:center;

}



.search-box h2{

    color:#00a896;

    font-size:32px;

    margin-bottom:10px;

}



.search-box p{

    color:#777;

    margin-bottom:30px;

}



.search-input{

    display:flex;

    gap:15px;

    position:relative;

}



.search-input input{

    flex:1;

    height:60px;

    border:1px solid #ddd;

    border-radius:30px;

    padding:0 25px;

    font-size:16px;

    outline:none;

}



.search-input select{

    width:220px;

    border:1px solid #ddd;

    border-radius:30px;

    padding:0 20px;

}



.search-input button{

    width:150px;

    border:none;

    border-radius:30px;

    background:#00a896;

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}



.search-input button:hover{

    background:#007d70;

}

.about-page{

padding:140px 0 80px;

}


.about-header{

text-align:center;
margin-bottom:50px;

}


.about-header h1{

font-size:45px;
color:#00a896;

}



.about-header p{

color:#777;
font-size:18px;

}



.about-box{

background:white;
padding:50px;
border-radius:35px;
box-shadow:0 15px 40px #00000012;

}



.about-box h2{

color:#00a896;
margin-bottom:20px;

}



.about-box p{

font-size:18px;
color:#555;
line-height:2;

}




.about-features{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:50px;

}



.about-features div{

text-align:center;
background:#f3fbfa;
padding:35px;
border-radius:25px;

}



.about-features h3{

font-size:40px;

}



.about-features p{

font-weight:bold;

}

.contact-page{

    padding:140px 0 80px;

}



.contact-title{

    text-align:center;
    margin-bottom:50px;

}



.contact-title h1{

    color:#00a896;
    font-size:45px;

}



.contact-title p{

    color:#777;

}



.contact-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;

}



.contact-info,
.contact-form,
.working-hours{

    background:white;

    padding:40px;

    border-radius:35px;

    box-shadow:0 15px 40px #00000012;

}



.contact-info h2,
.contact-form h2,
.working-hours h2{

    color:#00a896;
    margin-bottom:25px;

}



.contact-item{

    display:flex;

    gap:20px;

    align-items:center;

    margin-bottom:25px;

}



.contact-item span{

    width:55px;
    height:55px;

    display:flex;

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

    background:#e8faf7;

    border-radius:50%;

    font-size:25px;

}



.contact-form form{

    display:flex;
    flex-direction:column;
    gap:15px;

}



.contact-form input,
.contact-form textarea{

    border:1px solid #ddd;

    border-radius:20px;

    padding:15px;

    font-size:15px;

}



.contact-form textarea{

    height:140px;
    resize:none;

}



.contact-form button{

    background:#00a896;

    color:white;

    border:none;

    padding:15px;

    border-radius:30px;

    cursor:pointer;

}



.working-hours{

    margin-top:40px;

    text-align:center;

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Vazirmatn,Tahoma;

}


body{

background:#f4fbfa;

}



.admin-layout{

display:flex;
min-height:100vh;

}



.sidebar{

width:280px;

background:#071f1f;

color:white;

padding:35px 20px;

}



.sidebar h2{

text-align:center;

color:#00d5bd;

margin-bottom:40px;

}



.sidebar ul{

list-style:none;

}



.sidebar li{

margin:15px 0;

}



.sidebar a{

display:block;

padding:15px;

border-radius:15px;

color:white;

text-decoration:none;

transition:.3s;

}



.sidebar a:hover{

background:#00a896;

}





.dashboard{

flex:1;

padding:40px;

}




.dashboard header h1{

font-size:35px;

color:#00a896;

}



.dashboard header p{

color:#777;

margin-top:10px;

}





.stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:40px;

}





.stat-card{

background:white;

padding:35px;

border-radius:30px;

text-align:center;

box-shadow:0 15px 40px #00000012;

transition:.3s;

}



.stat-card:hover{

transform:translateY(-8px);

}



.stat-card span{

font-size:40px;

}



.stat-card h3{

font-size:35px;

color:#00a896;

margin:15px;

}





.quick-box{

background:white;

margin-top:40px;

padding:35px;

border-radius:30px;

}



.quick-box h2{

color:#00a896;

}



.quick-links{

display:flex;

gap:20px;

margin-top:25px;

}



.quick-links a{

background:#e8faf7;

padding:20px;

border-radius:20px;

text-decoration:none;

color:#007d70;

font-weight:bold;

}

body{

background:#f4fbfa;
font-family:Vazirmatn,Tahoma;

}


.admin-page{

padding:40px;

}



.admin-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}



.admin-top h1{

color:#00a896;

}



.admin-top a{

background:#00a896;

color:white;

padding:15px 30px;

border-radius:30px;

text-decoration:none;

}




.product-table{

background:white;

padding:30px;

border-radius:30px;

box-shadow:0 15px 40px #00000012;

}



table{

width:100%;

border-collapse:collapse;

}



th{

background:#e8faf7;

padding:20px;

}



td{

padding:20px;

text-align:center;

border-bottom:1px solid #eee;

}



td img{

width:80px;

height:80px;

border-radius:15px;

object-fit:cover;

}



button{

border:none;

padding:10px 20px;

border-radius:20px;

cursor:pointer;

}



.edit{

background:#e8faf7;

color:#007d70;

}



.delete{

background:#ffe7e7;

color:#d00000;

}

body{

background:#f4fbfa;
font-family:Vazirmatn,Tahoma;

}



.add-product-page{

padding:50px;

}



.form-box{

background:white;

max-width:700px;

margin:auto;

padding:45px;

border-radius:35px;

box-shadow:0 15px 40px #00000012;

}



.form-box h1{

text-align:center;

color:#00a896;

margin-bottom:35px;

}



form{

display:flex;

flex-direction:column;

gap:12px;

}



label{

font-weight:bold;

color:#333;

margin-top:10px;

}



input,
select,
textarea{

padding:15px;

border-radius:20px;

border:1px solid #ddd;

font-size:15px;

outline:none;

}



textarea{

height:150px;

resize:none;

}



.switch-box{

display:flex;

align-items:center;

gap:15px;

background:#f3fbfa;

padding:15px;

border-radius:20px;

}



button{

margin-top:20px;

background:#00a896;

color:white;

border:none;

padding:17px;

border-radius:30px;

font-size:17px;

cursor:pointer;

transition:.3s;

}



button:hover{

background:#007d70;

transform:translateY(-3px);

}

.success{

background:#e8faf7;

color:#007d70;

padding:15px;

border-radius:20px;

margin-bottom:20px;

text-align:center;

font-weight:bold;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Vazirmatn,Tahoma,sans-serif;
}


body{

    background:#f2fbfa;

}



.add-product-page{

    min-height:100vh;
    padding:50px;

}



.form-box{

    max-width:750px;

    margin:auto;

    background:white;

    padding:45px;

    border-radius:35px;

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

}



.form-box h1{

    text-align:center;

    color:#00a896;

    font-size:35px;

    margin-bottom:35px;

}




.success{

    background:#e8faf7;

    color:#008b7d;

    padding:15px;

    border-radius:20px;

    text-align:center;

    margin-bottom:25px;

    font-weight:bold;

}





form{

    display:flex;

    flex-direction:column;

    gap:12px;

}





label{

    font-weight:700;

    color:#333;

    margin-top:10px;

}





input,
select,
textarea{


    width:100%;

    border:1px solid #ddd;

    background:#fafdfd;

    padding:16px 20px;

    border-radius:20px;

    outline:none;

    font-size:15px;

    transition:.3s;


}





input:focus,
select:focus,
textarea:focus{


    border-color:#00a896;

    background:white;

    box-shadow:0 0 0 4px #00a89622;


}





input[type="file"]{

    padding:12px;

}





textarea{

    height:160px;

    resize:none;

}





.switch-box{


    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#f3fbfa;

    padding:20px;

    border-radius:20px;

    margin-top:15px;


}




.switch-box input{


    width:25px;

    height:25px;

    accent-color:#00a896;


}





button{

    margin-top:25px;

    height:60px;

    border:none;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #00a896,
    #007d70
    );

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px #00a89655;


}

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

.home-products{
    padding:80px 0;
    background:#f8ffff;
}


.section-title{
    text-align:center;
    margin-bottom:40px;
}


.section-title h2{
    font-size:32px;
    color:#008f83;
    margin-bottom:10px;
}


.section-title p{
    color:#666;
    font-size:16px;
}




.products-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}





.shop-product{

    background:#fff;
    border-radius:20px;
    padding:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
    overflow:hidden;
    position:relative;

}



.shop-product:hover{

    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);

}




.product-image{

    height:230px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:15px;
    background:#f4fafa;

}



.product-image img{

    width:100%;
    height:100%;
    object-fit:cover;

}



.product-image span{

    position:absolute;
    top:15px;
    right:15px;
    background:#00a896;
    color:white;
    padding:7px 15px;
    border-radius:30px;
    font-size:13px;

}





.shop-product h3{

    font-size:20px;
    margin:20px 0 10px;
    color:#222;

}



.shop-product p{

    color:#777;
    font-size:14px;
    min-height:45px;

}





.product-price{

    margin:20px 0;

}



.product-price del{

    display:block;
    color:#999;
    font-size:15px;

}



.product-price strong{

    display:block;
    color:#00a896;
    font-size:24px;
    margin-top:5px;

}





.shop-product a{

    display:block;
    text-align:center;
    background:#00a896;
    color:white;
    padding:12px;
    border-radius:12px;
    text-decoration:none;
    transition:.3s;

}



.shop-product a:hover{

    background:#007d70;

}





@media(max-width:900px){

.products-list{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:600px){

.products-list{

grid-template-columns:1fr;

}

}
.discount-products{

padding:80px 0;
background:#fff;

}



.discount-box{

background:#f0fffc;
border-radius:25px;
padding:30px;

}



.discount-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;

}



.discount-header h3{

color:#008f83;
font-size:25px;

}



.timer{

display:flex;
gap:10px;

}



.timer span{

background:#00a896;
color:white;
padding:12px 15px;
border-radius:12px;
text-align:center;

}



.timer small{

display:block;
font-size:12px;

}

.no-special{

text-align:center;
padding:50px;
background:white;
border-radius:20px;
color:#008f83;
font-size:18px;

}

.timer{
    display:flex;
    direction:ltr;
    gap:10px;
}

.dashboard-cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin:30px 0;

}

.dashboard-cards .card{

background:#fff;

padding:25px;

border-radius:12px;

text-align:center;

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

}

.dashboard-cards h2{

font-size:38px;

color:#008f83;

margin-bottom:10px;

}

.latest-products{

background:#fff;

padding:25px;

border-radius:12px;

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

margin-top:30px;

}

.latest-products table{

width:100%;

border-collapse:collapse;

}

.latest-products td,

.latest-products th{

padding:15px;

border-bottom:1px solid #eee;

text-align:center;

}

.edit-btn{

background:#008f83;

color:#fff;

padding:8px 18px;

border-radius:8px;

text-decoration:none;

}

.dashboard-header{
margin-bottom:30px;
}

.dashboard-cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:30px;
}

.dashboard-card{
background:#fff;
padding:25px;
border-radius:12px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.dashboard-card h2{
font-size:38px;
margin-bottom:10px;
color:#008f83;
}

.latest-products,
.quick-box,
.info-box{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
margin-bottom:25px;
}

.latest-products table,
.info-box table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

.latest-products th,
.latest-products td,
.info-box th,
.info-box td{
padding:12px;
border-bottom:1px solid #eee;
text-align:center;
}

.edit-btn{
display:inline-block;
padding:8px 18px;
background:#008f83;
color:#fff;
text-decoration:none;
border-radius:8px;
}

.quick-links{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-top:20px;
}

.quick-links a{
background:#008f83;
color:#fff;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
}

.quick-links a:hover{
background:#0b5ed7;
}

@media(max-width:992px){

.dashboard-cards{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.dashboard-cards{

grid-template-columns:1fr;

}

.quick-links{

flex-direction:column;

}

}

.success-message{

background:#d4edda;

color:#155724;

padding:15px;

border-radius:10px;

margin-bottom:20px;

text-align:center;

font-weight:bold;

}

.message-box{

background:#fff;

padding:30px;

border-radius:12px;

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

max-width:900px;

margin:auto;

}

.message-box p{

margin:15px 0;

line-height:2;

}

.message-text{

background:#f8f8f8;

padding:20px;

border-radius:10px;

line-height:2;

min-height:180px;

}

.search-card{

background:#fff;

padding:45px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

text-align:center;

margin:60px auto;

max-width:900px;

}

.search-card h2{

font-size:30px;

margin-bottom:10px;

}

.search-card p{

color:#666;

margin-bottom:30px;

}

.search-wrapper{

display:flex;

align-items:center;

gap:15px;

}

.search-wrapper input{

flex:1;

height:60px;

padding:0 20px;

font-size:17px;

border:2px solid #eee;

border-radius:12px;

box-sizing:border-box;

}

.search-wrapper button{

width:170px;

height:60px;

margin-top:0;

display:flex;

align-items:center;

justify-content:center;

padding:0;

border:none;

background:#008f83;

color:#fff;

font-size:17px;

font-weight:600;

border-radius:12px;

cursor:pointer;

box-sizing:border-box;

transition:.3s;

flex-shrink:0;

}

#search-result{

margin-top:20px;

text-align:right;

}

/* ===========================
   دکمه‌های استاندارد سایت
=========================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border:none;

border-radius:12px;

cursor:pointer;

font-size:16px;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.btn-primary{

background:linear-gradient(135deg,#00a896,#007d70);

color:#fff;

}

.btn-primary:hover{

transform:translateY(-3px);

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

}

.btn-danger{

background:#dc3545;

color:#fff;

}

.btn-danger:hover{

background:#bb2d3b;

}

.btn-gray{

background:#ececec;

color:#333;

}

.btn-gray:hover{

background:#ddd;

}




.hero-content{
    position:relative;
    z-index:5;
}


.slider-btn{

    position:absolute !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    width:58px !important;

    height:58px !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border:none !important;

    border-radius:50% !important;

    background:rgba(255,255,255,.25) !important;

    color:white !important;

    z-index:100 !important;

    font-size:0 !important;

}


.slider-btn svg{

display:block;

width:28px;

height:28px;

}


.slider-btn.prev{

right:30px;

}


.slider-btn.next{

left:30px;

}


.slider-btn:hover{

background:#00a896 !important;

transform:translateY(-50%) scale(1.1) !important;

}

.slider-btn svg path{
    pointer-events:none;
}

.slider-btn{
    overflow:hidden;
}



.slide{
    position:absolute;
    width:100%;
    height:100%;
}


.slide.active{
    position:relative;
}


.hero-content{
    position:relative;
    z-index:2;
}


.slider-btn{

    position:absolute !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    z-index:999 !important;

    width:55px !important;

    height:55px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    padding:0 !important;

    margin:0 !important;

    font-size:0 !important;

}


.slider-btn svg{

    pointer-events:none;

}

/* اصلاح نهایی فلش های اسلایدر */

.hero-slider > .slider-btn{

    position:absolute !important;

    top:50% !important;

    transform:translateY(-50%) !important;

    width:55px !important;

    height:55px !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:50% !important;

    font-size:0 !important;

    z-index:9999 !important;

}


.hero-slider > .slider-btn svg{

    width:25px;

    height:25px;

    display:block;

}


.hero-slider > .prev{

    right:30px;

}


.hero-slider > .next{

    left:30px;

}

.hero-content{
    padding-right:100px;
    padding-left:100px;
}

/* ===========================
   Live Search
=========================== */

#search-result{

margin-top:20px;

background:#fff;

border-radius:15px;

overflow:hidden;

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

}

.search-item{

display:flex;

align-items:center;

gap:15px;

padding:15px 20px;

text-decoration:none;

color:#222;

transition:.3s;

border-bottom:1px solid #eee;

}

.search-item:last-child{

border-bottom:none;

}

.search-item:hover{

background:#f6fffd;

}

.search-item img{

width:70px;

height:70px;

object-fit:cover;

border-radius:10px;

background:#f5f5f5;

}

.search-item h4{

margin:0 0 8px;

font-size:18px;

}

.search-item p{

margin:0;

color:#00a896;

font-weight:bold;

}

.search-empty{

padding:25px;

text-align:center;

color:#888;

font-size:16px;

}

.search-wrapper{

position:relative;

display:flex;

align-items:center;

gap:15px;

}

#search-result{

position:absolute;

top:calc(100% + 8px);

right:0;

width:100%;

background:#fff;

border-radius:15px;

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

z-index:999;

display:none;

max-height:400px;

overflow-y:auto;

}

.search-item{

display:flex;

align-items:center;

gap:18px;

padding:15px 20px;

text-decoration:none;

color:#222;

transition:.3s;

border-bottom:1px solid #eee;

}

.search-item:hover{

background:#f7fffe;

}

.search-image{

position:relative;

}

.search-image img{

width:80px;

height:80px;

border-radius:12px;

object-fit:cover;

background:#f8f8f8;

}

.search-discount{

position:absolute;

top:-8px;

right:-8px;

background:#ff3b30;

color:#fff;

padding:4px 8px;

border-radius:20px;

font-size:12px;

font-weight:bold;

}

.search-info{

flex:1;

}

.search-info h4{

margin:0 0 8px;

font-size:17px;

color:#222;

}

.search-info del{

display:block;

font-size:13px;

color:#999;

margin-bottom:5px;

}

.search-info strong{

font-size:18px;

color:#00a896;

}

/* Footer Links Fix */


.footer-links a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}


.footer-links a:hover{

    color:#ddd;

}




/* Social Buttons */

.footer-social{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}



.footer-social a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:12px;

    background:#fff;

    color:#111;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    transition:.3s;

}



.footer-social a:hover{

    transform:translateY(-3px);

}



/* Mobile */

@media(max-width:600px){


.footer-social{

    justify-content:center;

}


.footer-social a{

    width:100%;

}


}

/* =========================
   ADMIN PANEL RESPONSIVE
========================= */


@media(max-width:900px){


.admin-layout{

    flex-direction:column;

}



/* Sidebar */

.sidebar{

    width:100%;

    padding:20px 15px;

}



.sidebar h2{

    margin-bottom:20px;

    font-size:24px;

}



.sidebar ul{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:8px;

}



.sidebar li{

    margin:0;

}



.sidebar a{

    padding:10px 15px;

    font-size:14px;

}



/* Dashboard */

.dashboard{

    padding:20px 15px;

}



.dashboard header h1{

    font-size:26px;

}



.dashboard header p{

    font-size:14px;

}



}





@media(max-width:600px){



.admin-layout{

    width:100%;

}



/* Sidebar موبایل */


.sidebar{

    border-radius:0 0 25px 25px;

}



.sidebar ul{

    display:grid;

    grid-template-columns:repeat(2,1fr);

}



.sidebar a{

    text-align:center;

    font-size:13px;

}



/* Dashboard */

.dashboard{

    padding:15px;

}



/* اگر کارت داشبورد داری */

.dashboard .cards,
.dashboard .stats,
.dashboard .box-container{

    grid-template-columns:1fr !important;

}



/* جدول ها */

table{

    width:100%;

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}



/* فرم ها */

form{

    width:100%;

}



input,
textarea,
select{

    width:100% !important;

}



button{

    width:100%;

}



/* عنوان ها */

h1{

    font-size:24px !important;

}


h2{

    font-size:20px;

}


}

/* =====================================================
   PETRO ARTAVIL LIAN
   HOME PAGE - FINAL RESPONSIVE
   ===================================================== */

/* جلوگیری از بیرون‌زدگی کلی سایت */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

img {
    max-width: 100%;
}

.container {
    width: 90%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}


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

@media (max-width: 992px) {

    .container {
        width: 92%;
    }

    /* HEADER */

    .header .container {
        height: 75px;
    }

    .logo {
        gap: 8px;
        font-size: 18px;
    }

    .logo img {
        width: 48px;
        height: 48px;
    }

    nav {
        gap: 14px;
    }

    nav a {
        font-size: 13px;
    }

    .language-btn {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }


    /* HERO */

    .hero-slider {
        height: 600px;
    }

    .hero-content {
        width: 92%;
        max-width: 850px;

        padding-left: 60px;
        padding-right: 60px;
    }

    .hero-content h1 {
        font-size: 48px;
        line-height: 1.4;
    }

    .hero-content h2 {
        font-size: 27px;
        line-height: 1.6;
    }

    .hero-content p {
        font-size: 17px;
        line-height: 2;
    }

    .hero-buttons {
        gap: 12px;
    }


    /* SLIDER BUTTON */

    .hero-slider > .slider-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .hero-slider > .prev {
        right: 15px;
    }

    .hero-slider > .next {
        left: 15px;
    }


    /* CATEGORIES */

    .categories {
        padding: 70px 0;
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }


    /* PRODUCTS */

    .home-products .products-list,
    .products-preview .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }


    /* FEATURES */

    .features {
        grid-template-columns: repeat(2, 1fr);
    }


    /* SEARCH */

    .search-section {
        margin-top: -60px;
    }

    .search-box {
        padding: 30px;
    }

    .search-input {
        flex-wrap: wrap;
    }

    .search-input input {
        width: 100%;
        flex: 1 1 100%;
    }

    .search-input select {
        width: calc(60% - 8px);
    }

    .search-input button {
        width: calc(40% - 8px);
    }


    /* OFFER */

    .offer-header {
        gap: 20px;
    }

    .timer span {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }


    /* FOOTER */

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 600px) {

    /* مهم‌ترین بخش */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        max-width: 100%;
    }


    .container {
        width: calc(100% - 30px) !important;
        max-width: none !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }


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

    .header {
        width: 100% !important;
        right: 0 !important;
        left: 0 !important;
    }

    .header .container {
        width: calc(100% - 30px) !important;
        height: 68px;

        display: flex;
        flex-direction: row !important;

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

        gap: 8px;

        margin: 0 15px !important;
    }


    .logo {
        min-width: 0;
        max-width: calc(100% - 55px);

        display: flex;
        align-items: center;

        gap: 7px;

        font-size: 15px;

        white-space: nowrap;
    }


    .logo img {
        width: 42px !important;
        height: 42px !important;

        flex: 0 0 42px;
    }


    .logo span {
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* مخفی کردن منوی دسکتاپ */

    .header nav {
        display: none !important;
    }


    .language-btn {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        max-width: 42px !important;

        flex: 0 0 42px;
    }


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

    .hero,
    .hero-slider {
        width: 100% !important;

        height: 500px !important;

        min-height: 500px !important;
        max-height: 500px !important;

        overflow: hidden !important;
    }


    .slide {
        width: 100% !important;
        height: 100% !important;

        background-position: center center !important;
        background-size: cover !important;
    }


    .hero-overlay {
        width: 100% !important;
    }


    .hero-content {
        width: calc(100% - 70px) !important;

        max-width: none !important;

        margin: 0 auto !important;

        padding: 0 !important;

        text-align: center;

        overflow: hidden;
    }


    .hero-content h1 {
        font-size: 27px !important;

        line-height: 1.5 !important;

        margin-bottom: 8px;
    }


    .hero-content h2 {
        font-size: 18px !important;

        line-height: 1.7 !important;

        margin: 8px 0;
    }


    .hero-content p {
        display: block !important;

        font-size: 13px !important;

        line-height: 2 !important;

        max-width: 100% !important;

        margin: 8px auto;
    }


    /* دکمه‌های هیرو */

    .hero-buttons {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 8px !important;

        margin-top: 18px !important;
    }


    .hero-buttons a {
        width: 100% !important;

        max-width: 280px !important;

        padding: 11px 15px !important;

        font-size: 14px;

        text-align: center;
    }


    /* فلش‌ها */

    .hero-slider > .slider-btn {
        width: 40px !important;
        height: 40px !important;

        top: 50% !important;
    }


    .hero-slider > .slider-btn svg {
        width: 19px !important;
        height: 19px !important;
    }


    .hero-slider > .prev {
        right: 8px !important;
    }


    .hero-slider > .next {
        left: 8px !important;
    }


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

    .search-section {
        width: 100% !important;

        margin-top: -35px !important;

        padding-bottom: 45px !important;
    }


    .search-box,
    .search-card {
        width: 100% !important;

        margin: 0 auto !important;

        padding: 20px !important;

        border-radius: 22px !important;
    }


    .search-box h2,
    .search-card h2 {
        font-size: 21px !important;

        line-height: 1.7;
    }


    .search-box p,
    .search-card p {
        font-size: 13px !important;

        line-height: 2;
    }


    .search-input,
    .search-wrapper {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 10px !important;
    }


    .search-input input,
    .search-input select,
    .search-input button,
    .search-wrapper input,
    .search-wrapper button {
        width: 100% !important;

        min-width: 0 !important;

        height: 52px !important;

        box-sizing: border-box !important;
    }


    /* نتایج سرچ */

    #search-result {
        width: 100% !important;

        right: 0 !important;

        left: 0 !important;

        max-width: 100% !important;

        overflow-x: hidden;
    }


    .search-item {
        width: 100% !important;

        min-width: 0;

        display: flex;

        gap: 10px;

        padding: 12px !important;
    }


    .search-image img,
    .search-item img {
        width: 55px !important;
        height: 55px !important;

        flex: 0 0 55px;
    }


    .search-info {
        min-width: 0;
        overflow: hidden;
    }


    .search-info h4 {
        font-size: 14px !important;

        white-space: normal;

        overflow-wrap: anywhere;
    }


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

    .categories {
        width: 100%;

        padding: 55px 0;
    }


    .categories h2,
    .products-preview h2 {
        font-size: 25px !important;

        line-height: 1.7;

        margin-bottom: 30px !important;
    }


    .category-grid {
        width: 100%;

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    .category-card {
        width: 100%;

        min-width: 0;

        padding: 20px 8px !important;

        border-radius: 18px !important;

        font-size: 27px !important;
    }


    .category-card h3 {
        font-size: 13px !important;

        line-height: 1.7;

        word-break: break-word;
    }


    /* =================================================
       HOME PRODUCTS
       ================================================= */

    .home-products,
    .products-preview {
        width: 100% !important;

        padding: 55px 0 !important;
    }


    .home-products .products-list,
    .products-preview .product-grid,
    .products-preview .products-list {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }


    .shop-product,
    .product-card {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        border-radius: 18px !important;
    }


    .product-image {
        width: 100% !important;

        height: 210px !important;
    }


    .product-image img,
    .product-card img {
        width: 100% !important;

        max-width: 100% !important;

        height: 210px !important;

        object-fit: cover;
    }


    /* =================================================
       مهم: توضیحات محصول
       ================================================= */

    .shop-product h3,
    .product-card h3 {
        width: 100% !important;

        font-size: 18px !important;

        line-height: 1.8 !important;

        margin: 15px 0 8px !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;

        word-break: break-word !important;
    }


    .shop-product p,
    .product-card p {
        width: 100% !important;

        min-height: 0 !important;

        height: auto !important;

        max-height: none !important;

        font-size: 14px !important;

        line-height: 2 !important;

        white-space: normal !important;

        overflow: visible !important;

        overflow-wrap: anywhere !important;

        word-break: break-word !important;

        display: block !important;
    }


    .product-price {
        width: 100%;

        margin: 15px 0 !important;
    }


    .product-price strong {
        font-size: 21px !important;

        white-space: normal !important;

        overflow-wrap: anywhere;
    }


    .shop-product a,
    .product-card a {
        width: 100% !important;

        display: block;

        padding: 12px !important;

        font-size: 14px;
    }


    /* =================================================
       FEATURES
       ================================================= */

    .features-section {
        padding: 55px 0 !important;
    }


    .features {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 15px !important;
    }


    .feature {
        width: 100% !important;

        padding: 25px 15px !important;

        border-radius: 22px !important;
    }


    .feature h3 {
        width: 65px !important;
        height: 65px !important;

        font-size: 28px !important;
    }


    .feature p {
        font-size: 15px !important;

        line-height: 2;
    }


    /* =================================================
       SPECIAL OFFER
       ================================================= */

    .discount-products {
        width: 100% !important;

        padding: 50px 0 !important;
    }


    .discount-box,
    .offer-box {
        width: 100% !important;

        padding: 18px !important;

        border-radius: 22px !important;
    }


    .discount-header,
    .offer-header {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 15px !important;

        text-align: center;
    }


    .discount-header h3,
    .offer-header h3 {
        font-size: 20px !important;

        line-height: 1.7;
    }


    .timer {
        width: 100% !important;

        justify-content: center !important;

        gap: 6px !important;

        transform: none !important;
    }


    .timer span {
        width: 55px !important;

        height: 55px !important;

        padding: 5px !important;

        border-radius: 12px !important;

        font-size: 17px !important;
    }


    .timer small {
        font-size: 9px !important;
    }


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

    footer {
        width: 100% !important;

        padding: 45px 0 15px !important;

        margin-top: 30px !important;
    }


    .footer-container {
        width: calc(100% - 30px) !important;

        margin: 0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 25px !important;

        text-align: center !important;
    }


    .footer-container > div {
        width: 100% !important;

        min-width: 0;
    }


    .footer-container h3 {
        font-size: 18px !important;
    }


    .footer-container p {
        font-size: 13px !important;

        line-height: 2 !important;

        overflow-wrap: anywhere;
    }


    .footer-social {
        justify-content: center !important;
    }


    .footer-social a {
        width: 100% !important;

        max-width: 280px;
    }


    .copyright {
        font-size: 12px !important;

        line-height: 2;

        padding: 15px !important;
    }

}


/* =====================================================
   SMALL PHONES
   ===================================================== */

@media (max-width: 380px) {

    .container {
        width: calc(100% - 24px) !important;

        margin-left: 12px !important;
        margin-right: 12px !important;
    }


    .header .container {
        width: calc(100% - 24px) !important;

        margin: 0 12px !important;
    }


    .logo {
        font-size: 13px;
    }


    .logo img {
        width: 38px !important;
        height: 38px !important;

        flex-basis: 38px;
    }


    .language-btn {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
    }


    .hero,
    .hero-slider {
        height: 470px !important;
        min-height: 470px !important;
    }


    .hero-content {
        width: calc(100% - 60px) !important;
    }


    .hero-content h1 {
        font-size: 23px !important;
    }


    .hero-content h2 {
        font-size: 16px !important;
    }


    .hero-content p {
        font-size: 12px !important;
    }


    .category-grid {
        grid-template-columns: 1fr 1fr !important;
    }


    .category-card {
        padding: 16px 5px !important;
    }


    .timer span {
        width: 48px !important;
        height: 48px !important;

        font-size: 15px !important;
    }

}

.footer-social{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:25px;
}

.footer-social .social-icon{
    width:58px;
    height:58px;

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

    border-radius:16px;

    background:#ffffff15;

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

    transition:all .3s ease;

    text-decoration:none;
}

.footer-social .social-icon svg{
    width:32px;
    height:32px;

    fill:#ffffff;

    transition:all .3s ease;
}

.footer-social .social-icon:hover{
    transform:translateY(-6px) scale(1.08);

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

.footer-social .instagram:hover{
    background:linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
    );
}

.footer-social .telegram:hover{
    background:#229ED9;
}

.footer-social .whatsapp:hover{
    background:#25D366;
}

.footer-social .social-icon:hover svg{
    transform:scale(1.12);
}

.footer-links a{
    color:#ffffff;
    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;

    display:inline-block;
}

.footer-links a:hover{
    color:#20c9b5;

    transform:translateX(-6px);
}

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

.mobile-bottom-nav {
    display: none;
}


@media (max-width: 768px) {

    .mobile-bottom-nav {

        position: fixed;

        right: 0;
        bottom: 0;
        left: 0;

        z-index: 99999;

        min-height: 68px;

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        background: rgba(255, 255, 255, 0.97);

        border-top: 1px solid rgba(0, 0, 0, 0.08);

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

        backdrop-filter: blur(18px);

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

        padding-bottom: env(safe-area-inset-bottom);

    }


    .mobile-bottom-item {

        position: relative;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 4px;

        color: #718089;

        text-decoration: none;

        font-size: 10px;

        font-weight: 700;

        transition: all 0.25s ease;

        -webkit-tap-highlight-color: transparent;

    }


    .mobile-bottom-icon {

        position: relative;

        width: 32px;

        height: 32px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 20px;

        border-radius: 10px;

        transition: all 0.25s ease;

    }


    .mobile-bottom-item:hover {

        color: #08aaa3;

    }


    .mobile-bottom-item:active
    .mobile-bottom-icon {

        transform: scale(0.90);

    }


    /* Cart badge */

    .cart-bottom-icon {

        position: relative;

    }


    .mobile-cart-count {

        position: absolute;

        top: -7px;

        right: -9px;

        min-width: 18px;

        height: 18px;

        padding: 0 4px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50px;

        background: #12cfc5;

        color: #052126;

        border: 2px solid #fff;

        font-size: 8px;

        font-weight: 900;

        line-height: 1;

    }


    /*

       Space for fixed navigation

       تا محتوای صفحه پشت نوار نرود

    */

    body {

        padding-bottom: 82px;

    }


    /*
       دکمه‌های حساب و سبد موجود در Header
       در موبایل نمایش داده نشوند
    */

    .header-actions {

        display: none !important;

    }

}


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

@media (min-width: 769px) {

    .mobile-bottom-nav {

        display: none !important;

    }

}

@media (max-width: 768px) {

    .header-actions {
        display: none !important;
    }

}

/* =========================================================
   HEADER ACTIONS - DESKTOP
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* دکمه‌های حساب و سبد */

.header-action-btn {
    position: relative;

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

    gap: 8px;

    min-width: 46px;
    height: 46px;

    padding: 0 14px;

    border: 1px solid rgba(18, 207, 197, 0.20);

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.95);

    color: #26383d;

    text-decoration: none;

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

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.06);

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

}


/* آیکون */

.header-action-icon {
    width: 28px;
    height: 28px;

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

    border-radius: 9px;

    background: rgba(18, 207, 197, 0.10);

    font-size: 17px;

}


/* Hover */

.header-action-btn:hover {

    transform: translateY(-2px);

    border-color: rgba(18, 207, 197, 0.45);

    color: #08aaa3;

    box-shadow:
        0 10px 25px rgba(18, 207, 197, 0.14);

}


/* Badge سبد */

.header-cart-count {

    position: absolute;

    top: -6px;
    right: -6px;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

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

    border-radius: 50px;

    background: #12cfc5;

    color: #052126;

    border: 2px solid #fff;

    font-size: 9px;
    font-weight: 900;

    line-height: 1;

}


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

@media (max-width: 768px) {

    .header-actions {

        display: none !important;

    }

}

/* =========================================================
   HEADER ACCOUNT & CART
   ========================================================= */

/* Desktop */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-account,
.header-cart {

    position: relative;

    width: 46px;
    height: 46px;

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

    border-radius: 14px;

    background: #ffffff;

    border: 1px solid rgba(18, 207, 197, 0.22);

    color: #26383d;

    text-decoration: none;

    font-size: 19px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.06);

    transition:
        all 0.25s ease;
}


/* Hover */

.header-account:hover,
.header-cart:hover {

    transform: translateY(-2px);

    border-color: #12cfc5;

    color: #08aaa3;

    box-shadow:
        0 10px 25px rgba(18, 207, 197, 0.15);

}


/* Cart badge */

.header-cart .cart-count {

    position: absolute;

    top: -6px;
    right: -6px;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

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

    border-radius: 50px;

    background: #12cfc5;

    color: #052126;

    border: 2px solid #ffffff;

    font-size: 9px;

    font-weight: 900;

    line-height: 1;
}


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

@media (max-width: 768px) {

    /* حذف کامل دو دکمه بالای صفحه */

    .header-actions,
    .header-account,
    .header-cart {

        display: none !important;

    }

}

/* =========================================================
   مشاهده همه محصولات
   ========================================================= */

.products-more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.products-more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    height: 48px;

    padding: 0 24px;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #12cfc5,
        #08aaa3
    );

    color: #ffffff;

    text-decoration: none;

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

    box-shadow:
        0 8px 22px rgba(18, 207, 197, 0.20);

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

.products-more a:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(18, 207, 197, 0.28);

    background: linear-gradient(
        135deg,
        #08aaa3,
        #078f89
    );
}

.products-more a:active {
    transform: scale(0.97);
}


/* موبایل */

@media (max-width: 768px) {

    .products-more {
        margin-top: 24px;
    }

    .products-more a {
        min-width: 175px;
        height: 46px;

        font-size: 13px;

        border-radius: 13px;
    }

}


@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-bottom-nav .mobile-bottom-item {
        flex: 1 1 0;
        min-width: 0;
        width: 25%;
        box-sizing: border-box;
        white-space: nowrap;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 11px;
    }

    .mobile-bottom-nav .mobile-bottom-icon {
        font-size: 19px;
    }
}