/* =====================================
   KASIAN FOOD MENU
   STEP 2
===================================== */

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Vazirmatn",sans-serif;

    background:#090909;

    color:#fff;

    overflow-x:hidden;

}


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

.hero{

    width:100%;

    height:420px;

    position:relative;

    background:url("../../assets/imags/arvt.png") center center;

    background-size:cover;

    display:flex;

    justify-content:center;

    align-items:center;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

}

.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

}

.top-title{

    color:#d4af37;

    font-size:20px;

    margin-bottom:15px;

}

.hero-content h1{

    font-size:65px;

    color:#d4af37;

    font-weight:800;

    margin-bottom:15px;

}

.sub-title{

    color:#fff;

    font-size:18px;

}


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

.menu{

    padding:70px 25px;

}

.container{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}


/* =========================
   FOOD CARD
========================= */

.food-card{

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

    border:1px solid rgba(212,175,55,.25);

    border-radius:28px;

    backdrop-filter:blur(18px);

    text-align:center;

    padding:30px;

    transition:.35s;

    cursor:pointer;

}

.food-card:hover{

    transform:translateY(-10px);

    border-color:#d4af37;

    box-shadow:0 20px 40px rgba(212,175,55,.15);

}

.food-card img{

    width:180px;

    height:180px;

    object-fit:contain;

}

.food-card h3{

    color:#d4af37;

    margin-top:20px;

    font-size:24px;

}

/* =====================================
   STEP 3
   RESPONSIVE DESIGN
   MOBILE FIRST SUPPORT
===================================== */


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

@media (max-width: 992px){


    .hero{

        height:360px;

    }


    .hero-content h1{

        font-size:48px;

    }


    .top-title{

        font-size:18px;

    }


    .sub-title{

        font-size:16px;

    }


    .container{

        grid-template-columns:

        repeat(2,1fr);

        gap:25px;

    }


    .food-card img{

        width:160px;

        height:160px;

    }


}






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


@media (max-width:768px){



    body{

        overflow-x:hidden;

    }



    /* HERO */


    .hero{

        height:280px;

        background-position:center;

    }



    .hero-content{

        width:90%;

    }



    .top-title{

        font-size:15px;

    }



    .hero-content h1{

        font-size:34px;

        line-height:1.5;

    }



    .sub-title{

        font-size:14px;

    }






    /* MENU */


    .menu{

        padding:

        35px 15px;

    }



    .container{


        grid-template-columns:1fr;


        gap:20px;


    }


    






    /* FOOD CARD */


    .food-card{


        width:100%;


        min-height:300px;


        padding:25px 15px;


        border-radius:25px;


    }




    .food-card img{


        width:170px;


        height:170px;


    }




    .food-card h3{


        font-size:22px;


        margin-top:15px;


    }




}







/* =========================
   SMALL PHONE
========================= */


@media(max-width:380px){



    .hero{

        height:250px;

    }




    .hero-content h1{


        font-size:30px;


    }




    .food-card{


        min-height:270px;


    }



    .food-card img{


        width:150px;


        height:150px;


    }



    .food-card h3{


        font-size:20px;


    }


}

/* =====================================
   STEP 4
   FOOD DETAIL MODAL
===================================== */


/* لایه پشت پنجره */

.food-modal{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(10px);

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:9999;

}



/* فعال شدن پنجره */

.food-modal.active{

    display:flex;

}




/* کارت اصلی */

.modal-box{

    width:min(950px,90vw);

    height:520px;

    display:flex;

    background:

    rgba(15,15,15,.92);


    border:

    1px solid

    rgba(212,175,55,.35);


    border-radius:35px;

    overflow:hidden;

    position:relative;


}





/* دکمه بستن */

.close{


    position:absolute;


    top:20px;


    left:20px;



    width:45px;


    height:45px;



    border-radius:50%;



    border:none;



    background:#d4af37;



    color:#000;



    font-size:30px;



    cursor:pointer;



    z-index:5;


}





/* عکس غذا */

.modal-image{

    width:55%;

    height:100%;

}



.modal-image img{


    width:100%;


    height:100%;


    object-fit:cover;


}





/* اطلاعات غذا */

.modal-content{


    width:45%;


    padding:45px;


    display:flex;


    flex-direction:column;


    justify-content:center;


}





.modal-content h2{


    color:#d4af37;


    font-size:40px;


    margin-bottom:20px;


}




.price{


    font-size:20px;

}



.price strong{


    color:#d4af37;


}




.modal-content p{


    margin-top:25px;


    color:#ddd;


    line-height:2;


}





/* دکمه سفارش */


.order{


    margin-top:30px;


    height:50px;


    border:none;


    border-radius:30px;



    background:#d4af37;


    color:#000;


    font-size:17px;


    cursor:pointer;


}






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


@media(max-width:768px){


    .food-modal{

        padding:15px;

    }



    .modal-box{


        width:100%;


        max-width:390px;


        height:auto;


        max-height:85vh;


        flex-direction:column;


        border-radius:25px;


    }



    .modal-image{


        width:100%;


        height:220px;


    }



.modal-content{
    width:100%;
    padding:25px;
}



    .modal-content h2{


        font-size:28px;


    }



}

/*==============================
MENU FILTER
==============================*/

.menu-filter{

    display:flex;

    justify-content:center;

    margin:60px 0 40px;

}

.filter-box{

    display:flex;

    gap:18px;

    padding:12px;

    border:1px solid rgba(212,175,55,.45);

    border-radius:18px;

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

    backdrop-filter:blur(20px);

}

.filter-btn{

    padding:14px 32px;

    background:transparent;

    border:1px solid rgba(212,175,55,.35);

    color:#fff;

    border-radius:12px;

    cursor:pointer;

    transition:.35s;

    font-family:inherit;

    font-size:16px;

}

.filter-btn:hover{

    transform:translateY(-3px);

    border-color:#D4AF37;

}

.filter-btn.active{

    background:#D4AF37;

    color:#111;

    font-weight:700;

    box-shadow:0 0 20px rgba(212,175,55,.45);

}