*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#050505;color:#fff}
.hero{position:relative}
.hero img{width:100%;max-height:420px;object-fit:cover;display:block}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:center;align-items:center}
h1{font-size:3rem;color:#d99a2b;margin:0;text-shadow:0 2px 10px #000}
.overlay p{font-size:1.2rem}
main{max-width:1200px;margin:auto;padding:20px}
h2{color:#d99a2b;border-bottom:2px solid #d99a2b;padding-bottom:8px}
.category{margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px}
.card,.addon-item,.cart-item{background:#111;border:1px solid #d99a2b;border-radius:12px;padding:15px}
.card h3{margin:0 0 10px;color:#d99a2b}
.price{font-weight:bold;margin-bottom:10px}
button{background:#d99a2b;color:#000;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:bold}
button:hover{opacity:.9}
.addon-item label{display:block;margin:6px 0}
.cart-item{margin-bottom:10px}
.cart-total{font-size:1.4rem;font-weight:bold;color:#d99a2b;margin:15px 0}
#whatsappBtn{width:100%;font-size:1.2rem;background:#25D366;color:#fff}
@media (max-width:600px){h1{font-size:2rem}}


body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05), transparent 30%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.04), transparent 25%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.05), transparent 30%);
  filter: blur(30px);
  animation: smokeMove 25s linear infinite alternate;
}
@keyframes smokeMove{
  from{transform: translate(-3%, -2%) scale(1);}
  to{transform: translate(3%, 2%) scale(1.15);}
}


body{
  background:
    radial-gradient(circle at 20% 20%, rgba(217,154,43,0.10), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05), transparent 30%),
    linear-gradient(135deg, #020202, #0a0a0a, #000000);
  background-size: 200% 200%;
  animation: bgShift 18s ease-in-out infinite;
}

@keyframes bgShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.menu-preview{
  margin-bottom: 30px;
}

.menu-image-wrapper{
  margin-top: 15px;
  overflow: hidden;
  border: 2px solid #d99a2b;
  border-radius: 12px;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  max-height: 2000px;
  opacity: 1;
}

.menu-image-wrapper.hidden{
  max-height: 0;
  opacity: 0;
  border-width: 0;
}

.menu-image-wrapper img{
  width: 100%;
  display: block;
}


body{
  background:
    radial-gradient(circle at 20% 20%, rgba(217,154,43,0.08), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(217,154,43,0.05), transparent 25%),
    #000;
  background-size: 200% 200%;
  animation: goldGlow 12s ease-in-out infinite;
}
@keyframes goldGlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.card img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:10px;
  border:1px solid #d99a2b;
}


.menu-toggle-section{
  margin: 20px 0;
  text-align: center;
}

#toggleMenuBtn{
  font-size: 1.1rem;
  padding: 12px 24px;
  box-shadow: 0 0 20px rgba(217,154,43,0.35);
}

.hidden{
  display: none !important;
}


/* Animated restaurant-style background */
body{
  background:
    linear-gradient(rgba(0,0,0,0.88), rgba(0,0,0,0.92)),
    url('menu.jpg') center center / cover fixed no-repeat !important;
  overflow-x: hidden;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, rgba(217,154,43,0.12), transparent 20%),
    radial-gradient(circle at 80% 20%, rgba(217,154,43,0.08), transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(255,140,0,0.06), transparent 22%);
  filter: blur(25px);
  animation: ambientMove 14s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(217,154,43,0.7) 1px, transparent 1.5px);
  background-size: 140px 140px;
  opacity: 0.25;
  animation: sparkleMove 24s linear infinite;
}

@keyframes ambientMove{
  from { transform: scale(1) translate(-1%, -1%); }
  to   { transform: scale(1.08) translate(1%, 1%); }
}

@keyframes sparkleMove{
  from { transform: translateY(0); }
  to   { transform: translateY(140px); }
}