*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f5f5f5;
}

.page{
display:none !important;
min-height: 100vh;
}

.page.active{
display:block !important;
}
nav{
position:fixed;
top:0;
width:100%;
padding:15px 8%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(0,0,0,.85);
backdrop-filter:blur(10px);
z-index:999;
}

.logo{
font-size:32px;
font-weight:800;
color:#ff9800;
}

nav ul{
display:flex;
list-style:none;
gap:20px;
}

nav ul li a{
color:white;
text-decoration:none;
font-weight:600;
}

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url('https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=1600&q=80');

    background-size:cover;
    background-position:center;
}



.hero h1{
font-size:70px;
line-height:1.2;
padding-top:60px;
}

.hero span{
color:#ff9800;
}

.btn{
background:#ff9800;
color:white;
padding:12px 30px;
border:none;
border-radius:30px;
cursor:pointer;
font-size:18px;
}

section{
padding:90px 8%;
}

.title{
font-size:40px;
text-align:center;
margin-bottom:30px;
}

.card{
background:white;
padding:25px;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}

input,select,textarea{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ddd;
border-radius:10px;
}

.menu-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:15px;
}
#menu{
    background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('https://images.unsplash.com/photo-1504674900247-0877df9cc836');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
}
.food{
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.food:hover{
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.food-content h3{
    color:#333;
    font-weight:700;
}
.food{
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 3px 12px rgba(0,0,0,.1);
}

.food img{
width:60%;
height:80px;
object-fit:cover;
}

.food-content{
padding:10px;
text-align:center;
}

.add-btn{
background:#ff9800;
color:white;
border:none;
padding:10px 10px;
border-radius:20px;
cursor:pointer;
}
.added{
background:#28a745 !important;
color:white;
}

.cart-item{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:17px;
margin:10px 0;
border-radius:16px;
}

.qty-btn{
padding:5px 12px;
margin:0 5px;
border:none;
background:#ff9800;
color:white;
border-radius:5px;
cursor:pointer;
}

.total{
font-size:37px;
font-weight:bold;
color:#ff9800;
margin-top:20px;
}
#customer{
    background: 
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('https://images.unsplash.com/photo-1550547660-d9450f859349');
    background-size: cover;
    background-position: center;
    color: white;
}
.customer-card{
    max-width:500px;
    margin:auto;
    border-radius:20px;
    padding:30px;
    background:rgba(255,255,255,0.95);
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    backdrop-filter:blur(10px);
}

.customer-card input,
.customer-card textarea{
    border:none;
    border-bottom:2px solid #ff9800;
    border-radius:0;
    background:transparent;
    font-size:16px;
    padding:12px 5px;
    outline:none;
}

.customer-card input:focus,
.customer-card textarea:focus{
    border-bottom:2px solid #28a745;
}

.customer-card textarea{
    min-height:80px;
    resize:none;
}
.logo{
    font-size:22px;
    font-weight:800;
    background:linear-gradient(90deg,#ff512f,#dd2476);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    white-space:nowrap;
    letter-spacing:1px;
}
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
}
#placeOrderBtn:disabled{
    background: gray;
    cursor: not-allowed;
    opacity: 0.8;
}
body{
  margin:0;
  font-family: Poppins, sans-serif;
}

/* Bottom Nav */
.bottom-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background: linear-gradient(135deg, #ff4d4d, #ff9900);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
  z-index: 9999;
}

/* Buttons */
.nav-item{
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 8px;
  transition: 0.3s;
}

/* Active + Hover */
.nav-item:hover,
.nav-item.active{
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  transform: translateY(-3px);
}

/* Mobile spacing fix (important) */
body{
  padding-bottom: 80px;
}
#customer,
#menu,
#cart{
    min-height:100vh;
}
/* Mobile Responsive */

@media (max-width:768px){

nav{
padding:12px 15px;
}

.logo{
font-size:18px;
}

nav ul{
gap:10px;
}

nav ul li a{
font-size:13px;
}

.hero h1{
font-size:38px;
padding-top:80px;
}

.title{
font-size:28px;
}

section{
padding:70px 15px;
}

.menu-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.food img{
width:100%;
height:120px;
}

.food-content h3{
font-size:14px;
}

.btn,
.add-btn{
font-size:14px;
padding:10px 15px;
}

.customer-card{
padding:20px;
}

input,
select,
textarea{
font-size:16px;
}

.total{
font-size:24px;
}

.bottom-nav{
height:60px;
}

.nav-item{
font-size:12px;
}
}

/* Extra Small Phones */

@media (max-width:480px){

.hero h1{
font-size:30px;
}

.menu-grid{
grid-template-columns:1fr 1fr;
}

.logo{
font-size:16px;
}

.food img{
height:100px;
}

.title{
font-size:24px;
}

.bottom-nav{
height:55px;
}

.nav-item{
font-size:11px;
}
}
/* Premium Rating Box */

.rating-box{
    margin-top:20px;
    padding:20px 25px;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:25px;
    display:inline-block;
    color:white;
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
    animation:floatBox 3s ease-in-out infinite;
}

.rating-box h3{
    font-size:20px;
    font-weight:700;
    margin-bottom:12px;
}

.star-rating{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:10px;
}

.star-rating span{
    font-size:35px;
    cursor:pointer;
    transition:0.3s;
}

.star-rating span:hover{
    transform:scale(1.3) rotate(10deg);
    filter:drop-shadow(0 0 10px gold);
}

.rating-box p{
    margin:5px 0;
    font-size:17px;
    font-weight:600;
}

#avgRating{
    color:#FFD700;
    font-size:22px;
}

#totalRatings{
    color:#00ff88;
}

@keyframes floatBox{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-5px);
    }
}

/* Mobile */

@media(max-width:768px){

.rating-box{
    width:90%;
    padding:15px;
}

.star-rating span{
    font-size:28px;
}

.rating-box h3{
    font-size:18px;
}

.rating-box p{
    font-size:15px;
}
}
#home .rating-box{
    margin-top:20px;
    padding:20px 25px;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(15px);
    border-radius:25px;
    display:inline-block;
    color:white;
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
}

#home .star-rating span{
    font-size:35px;
    cursor:pointer;
    transition:0.3s;
}

#home .star-rating span:hover{
    transform:scale(1.2);
}

#home #avgRating{
    color:gold;
    font-size:22px;
}