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

.title {
  text-align:center;
  padding:15px;
}

.container {
  display:flex;
  flex-wrap:wrap;
}

.menu {
  flex:2;
  padding:15px;
}

.order {
  flex:1;
  background:#1a1a1a;
  padding:15px;
  border-left:3px solid #ff2f92;
}

.menu-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:15px;
}

.menu-card {
  background:#222;
  padding:20px;
  border-radius:14px;
  text-align:center;
  cursor:pointer;
  transition:.2s;
}

.menu-card:hover {
  transform:scale(1.05);
  box-shadow:0 0 15px #ff2f92;
}

button {
  width:100%;
  padding:12px;
  border:none;
  border-radius:12px;
  background:#ff2f92;
  color:white;
  font-size:16px;
  cursor:pointer;
  margin-top:10px;
}

ul { list-style:none; padding:0; }

.overlay {
  position:fixed;
  inset:0;
  background:#111;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  z-index:10;
}

.hidden { display:none; }

input {
  padding:12px;
  border-radius:10px;
  border:none;
  width:260px;
  font-size:16px;
}

.choice button {
  width:130px;
  background:#222;
}

.note { opacity:.7; text-align:center; }

/* 📱 MOBILE */
@media(max-width:768px){
  .container { flex-direction:column; }
  .order { border-left:none; border-top:3px solid #ff2f92; }
}