/* base */
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: "Poppins", system-ui, Arial, sans-serif;
  background: #f7f7f7;
  color: #222;
  line-height: 1.5;
}

/* header & nav */
.site-header {
  background:#2c3e50; color:#fff; text-align:center; padding:20px 10px;
}
.top-nav {
  display:flex; justify-content:center; gap:8px; background:#34495e; padding:8px;
}
.top-nav button {
  background:none; border:none; color:#fff; padding:10px 16px; cursor:pointer; font-weight:600;
}
.top-nav button:hover { background:#2c3e50; border-radius:6px; }

/* Sections */
.menu-section { display:none; padding:28px 20px; }
.menu-section.active { display:block; }

/* grid of cards */
.menu-items {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  align-items:start;
}

/* card */
.card {
  background:#fff; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06);
  overflow:hidden; text-align:center; padding-bottom:14px;
}
.card img { width:100%; height:150px; object-fit:cover; display:block; }
.card h3 { margin:12px 0 6px; color:#2c3e50; font-size:1.05rem; }
.card p { padding:0 12px; color:#555; font-size:0.95rem; margin-bottom:8px; }
.card span { display:block; color:#e67e22; font-weight:700; margin-top:6px; }

/* Reservation form */
.reservation { background: #ecf0f1; border-radius:10px; padding:20px; max-width:760px; margin:0 auto; }
.reservation-form { display:grid; gap:12px; max-width:420px; margin:10px auto 0; }
.reservation-form input, .reservation-form select, .reservation-form button {
  padding:10px; border-radius:8px; border:1px solid #cfcfcf; font-size:1rem;
}
.reservation-form button {
  background:#27ae60; color:#fff; border:none; cursor:pointer; font-weight:700;
}
.reservation-form button:hover { background:#219150; }

/* Popup: appear near the top and centered horizontally */
.popup {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.45);
  justify-content:center;
  align-items:flex-start;          /* keep near top */
  padding-top:80px;                /* distance from top */
  z-index:9999;
}
.popup[aria-hidden="false"], .popup.show { display:flex; }

.popup-content {
  background:#fff; width:320px; max-width:90%;
  padding:20px 18px; border-radius:10px;
  text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.18);
  animation: slideDown 0.35s ease;
}
.popup-content h3 { color:#27ae60; margin-bottom:8px; }
.popup-content p { color:#444; font-size:0.96rem; }
#popupOk {
  margin-top:12px; padding:9px 16px; border-radius:8px;
  background:#27ae60; color:#fff; border:none; cursor:pointer; font-weight:700;
}
#popupOk:hover { background:#219150; }

/* simple animation */
@keyframes slideDown {
  from { opacity:0; transform: translateY(-12px); }
  to { opacity:1; transform: translateY(0); }
}

/* responsive tweaks */
@media (max-width:560px){
  .top-nav { flex-wrap:wrap; gap:6px; }
  .card img { height:130px; }
  .reservation { padding:16px; }
}