body{

margin:0;
font-family:system-ui;
background:#0f0f0f;
color:white;

}

header{

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

padding:15px 25px;

background:#1a1a1a;

}

.logo{

font-size:20px;
font-weight:bold;
color:#f5b942;

}

#searchMenu{

width:220px;
padding:10px;

border-radius:8px;
border:none;

}

.main{

display:grid;

grid-template-columns:65% 35%;

height:calc(100vh - 60px);

}



/* MENU */

.menuSection{

padding:20px;

overflow-y:auto;

}

.categories{

display:flex;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap;

}

.category{

background:#1e1e1e;
padding:8px 14px;
border-radius:20px;
cursor:pointer;

}

.category.active{

background:#f5b942;
color:black;

}

.menuGrid{

display:grid;

grid-template-columns:

repeat(auto-fill,minmax(120px,1fr));

gap:12px;

}

.menuItem{

background:#1b1b1b;

padding:14px;

border-radius:10px;

cursor:pointer;

transition:.2s;

}

.menuItem:hover{

background:#262626;

}

.menuName{

font-size:12px;

}

.menuPrice{

color:#00e676;
font-weight:bold;

}



/* CART */

.cartSection{

border-left:1px solid #333;

padding:20px;

}

.cartItem{

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

background:#1a1a1a;
padding:10px;

border-radius:8px;

margin-bottom:8px;

}

.cartLeft{
font-size:12px;
display:flex;
flex-direction:column;

}

.qty{

font-size:12px;
color:#bbb;

}

.removeBtn{

background:#ff3b30;
border:none;

padding:5px 10px;

border-radius:6px;

color:white;

cursor:pointer;

}

.total{

font-size:22px;
margin:20px 0;
color:#00e676;

}

input,select{

width:100%;
padding:10px;

margin-bottom:10px;

border:none;
border-radius:8px;

}

button{

width:100%;
padding:14px;

border:none;

border-radius:10px;

font-weight:bold;

cursor:pointer;

}

#orderBtn{

background:#00c853;
color:white;

}

.dangerBtn{

background:#ff3b30;
margin-bottom:10px;

}