body{

background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: Arial, sans-serif;
margin:0;

}

.app-overlay{
  background: rgba(255,255,255,0.95);
  min-height:100vh;
}

/* 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-logo{
  width:45px;
  height:45px;
  object-fit:contain;
  display:block;
  margin:0 auto 8px auto;
}

/* CATEGORY BAR */

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

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

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

  transition:all 0.2s ease;
}


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

.category-btn:hover{
  background:#eee;
}





/* COLUMN WIDTHS */

.col-item{
flex:5;
}

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

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



/* ITEM NAME */

.item-name{
flex:5;
}


/* PRICE */

.item-price{
  flex:2;
  text-align:right;
  font-weight:600;
  font-size:15px;
}

/* QTY */

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


/* QTY BUTTONS */

.qty-btn{
  padding:6px 10px;
  margin:0 6px;
  cursor:pointer;
  border:1px solid #ccc;
  background:#f8f8f8;
  border-radius:8px;
  font-weight:bold;
  transition:all 0.15s ease;
}

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

.qty-btn:active{
  transform:scale(0.92);
}


/* 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;
}