body{
font-family: Arial, sans-serif;
margin:0;
background:#fafafa;
}


/* HEADER */

#fixed-header{
position:sticky;
top:0;
background:white;
z-index:500;
padding:10px;
border-bottom:1px solid #ddd;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}


/* RESTAURANT HEADER */

.header{
text-align:center;
margin-bottom:10px;
}

.header h2{
margin:0;
font-size:20px;
}

.header p{
margin:4px 0 0 0;
color:#666;
font-size:14px;
}


/* CATEGORY BAR */

#category-bar{
display:flex;
overflow-x:auto;
gap:10px;
padding:8px 0;
border-bottom:1px solid #ddd;
}

#category-bar::-webkit-scrollbar{
display:none;
}

.category-btn{
padding:6px 14px;
border-radius:20px;
border:1px solid #ccc;
background:#f3f3f3;
cursor:pointer;
white-space:nowrap;
}

.category-btn.active{
background:#333;
color:white;
border-color:#333;
}


/* MENU HEADER */

.menu-header{
display:flex;
font-weight:bold;
padding:10px 0;
border-bottom:1px solid #eee;
color:#666;
}


/* COLUMN WIDTHS */

.col-item{
flex:5;
}

.col-price{
flex:2;
text-align:right;
}

.col-qty{
flex:3;
text-align:center;
}


/* MENU CONTAINER */

#menu-container{
padding:10px;
margin-bottom:90px;
}


/* CATEGORY TITLE */

.category-title{
font-size:18px;
font-weight:bold;
margin-top:20px;
margin-bottom:10px;
scroll-margin-top:120px;
}


/* MENU ITEM */

.menu-item{
display:flex;
align-items:center;
padding:12px 0;
border-bottom:1px solid #eee;
}


/* ITEM NAME */

.item-name{
flex:5;
}


/* PRICE */

.item-price{
flex:2;
text-align:right;
font-weight:bold;
}


/* QTY */

.item-qty{
flex:3;
text-align:center;
}


/* QTY BUTTONS */

.qty-btn{
padding:5px 10px;
margin:0 6px;
cursor:pointer;
border:1px solid #ccc;
background:white;
border-radius:6px;
}

.qty-btn:hover{
background:#f2f2f2;
}


/* LOADING */

#loading{
text-align:center;
margin-top:120px;
color:#666;
}


/* CART BAR */

#cart-bar{
position:fixed;
bottom:0;
left:0;
right:0;
background:#333;
color:white;
padding:14px;
text-align:center;
cursor:pointer;
font-size:15px;
box-shadow:0 -2px 8px rgba(0,0,0,0.2);
}


/* CART MODAL */

#cart-modal{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
z-index:1000;
}

.cart-content{
background:white;
padding:20px;
width:90%;
max-width:420px;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}


/* HELPERS */

.hidden{
display:none;
}

.flex{
display:flex;
}


/* TABLET IMPROVEMENT */

@media (min-width:768px){

#menu-container{
max-width:800px;
margin:auto;
margin-bottom:90px;
}

}


/* DESKTOP LAYOUT */

@media (min-width:1024px){

#menu-container{
max-width:900px;
margin:auto;
margin-bottom:90px;
}

.menu-header{
max-width:900px;
margin:auto;
}

#fixed-header{
padding-left:0;
padding-right:0;
}

}

/* DESKTOP CATEGORY ALIGNMENT */

@media (min-width:1024px){

#category-bar{
max-width:800px;
margin:0 auto;
}

}

.error-screen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

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

    background-color:#ffffff;
}

.error-box{
    background-color:#ffffff;
    border:2px solid #ff3b3b;
    color:#d8000c;

    padding:20px 30px;
    font-size:20px;
    font-weight:bold;

    border-radius:8px;
    text-align:center;
}

.error-icon{
    font-size:64px;
    margin-bottom:12px;
    line-height:1;
}