body{
background:#f5f5f5;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
margin:0;
color:#1f2937;
}


/* CATEGORY SLIDER */

.menuTabs{
display:flex;
gap:12px;
overflow-x:auto;
padding:12px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}

.menuTabs::-webkit-scrollbar{
display:none;
}


/* CATEGORY CARD */

.menuTab{

flex:0 0 150px;

border-radius:14px;

overflow:hidden;

cursor:pointer;

position:relative;

background:#1e293b;

border:1px solid #334155;

transition:.25s;

}

.menuTab:hover{
transform:translateY(-2px);
}


/* CATEGORY IMAGE */

.menuCatImg{
width:100%;
height:90px;
object-fit:cover;
}



/* CATEGORY TITLE */

.menuCatTitle{

position:absolute;

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

text-align:center;

padding:7px;

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

color:#f1f5f9;

background:linear-gradient(
to top,
rgba(0,0,0,0.7),
transparent
);

}



/* ACTIVE CATEGORY */

.menuTab.active{
border:1px solid #22c55e;
}





/* MENU CONTENT */

.menuContent{
padding:14px;
}



/* CATEGORY SECTION */

.menuCategory{
display:none;
}

.menuCategory.active{
display:block;
}



/* PRODUCT CARD */

.menuItem{

display:flex;

gap:14px;

background:#1e293b;

padding:12px;

border-radius:14px;

margin-bottom:12px;

border:1px solid #e5e7eb;

animation:productFade .35s ease forwards;

opacity:0;

transform:translateY(15px);

}


/* PRODUCT ANIMATION */

@keyframes productFade{

from{
opacity:0;
transform:translateY(15px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* STAGGER ANIMATION */

.menuCategory.active .menuItem:nth-child(1){animation-delay:.05s}
.menuCategory.active .menuItem:nth-child(2){animation-delay:.1s}
.menuCategory.active .menuItem:nth-child(3){animation-delay:.15s}
.menuCategory.active .menuItem:nth-child(4){animation-delay:.2s}
.menuCategory.active .menuItem:nth-child(5){animation-delay:.25s}
.menuCategory.active .menuItem:nth-child(6){animation-delay:.3s}



/* PRODUCT IMAGE */

.menuItemImg{
width:72px;
height:72px;
border-radius:12px;
object-fit:cover;
}



/* CONTENT */

.menuItemContent{
flex:1;
}



/* TITLE + PRICE */

.menuItemTop{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:3px;
}



.menuItemTitle{
font-weight:600;
font-size:15px;
color:#f1f5f9;
}



.menuItemPrice{
font-weight:700;
color:#22c55e;
font-size:14px;
}



/* DESCRIPTION */

.menuItemDesc{
font-size:13px;
color:#94a3b8;
line-height:1.4;
margin-top:3px;
}