/* =====================================================
   SUITO — MENU PAGE STYLESHEET
   File: client/css/menu.css
===================================================== */

.menu-section {
  padding: 200px 0 120px;
}

.menu-header {
  text-align: center;
  margin-bottom: 48px;
}

/* Category filter buttons */
.category-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.filter-btn {
  padding: 11px 26px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--accent); color: var(--text); }
.filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}

/* Fade transition when filtering */
.product-grid.is-filtering .product-card { opacity: 0; transform: translateY(10px); }
.product-card { transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.4s var(--ease); }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 0;
  grid-column: 1 / -1;
}

/* ---------- Product Detail Modal ---------- */
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 10, 18, 0.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.detail-modal.is-open { opacity: 1; visibility: visible; }

.detail-modal-card {
  width: min(880px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.detail-modal.is-open .detail-modal-card { transform: scale(1); opacity: 1; }

.detail-modal-image {
  aspect-ratio: 1/1;
  align-self: start;
  background: linear-gradient(160deg, #ecdfc7, #ddc9a6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.detail-modal-image img { width: 100%; height: 100%; object-fit: cover; }

.detail-modal-body {
  padding: 44px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.detail-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.detail-modal-close:hover { border-color: var(--accent); color: var(--accent); }

.detail-modal-category {
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.detail-modal-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  margin-bottom: 14px;
}

.detail-modal-desc {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 22px;
}

.detail-modal-price {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 28px;
}

/* Add-Ons — shown only for the specific item that has them, never a
   generic list shared across items. This sits as its own full-width
   row below the image + details row (see menu.html), which is what
   gives it enough horizontal room for a multi-column grid — the
   narrower body column alone wasn't wide enough to fit several
   columns without wrapping. Food items render nothing here at all
   (see menu.js), so their layout, image, and button are untouched. */
.modal-addons {
  grid-column: 1 / -1;
  padding: 18px 40px 28px;
  border-top: 1px solid var(--border);
}

.modal-addons-title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.modal-addons-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  column-gap: 18px;
  row-gap: 4px;
}

.addon-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1.3;
}

.addon-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.addon-option .addon-name { flex: 1; color: var(--text); }
.addon-option .addon-price {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

@media (max-width: 720px) {
  .modal-addons { padding: 16px 24px 24px; }
  .modal-addons-list { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.qty-selector {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.qty-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.qty-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.qty-value {
  min-width: 24px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
}

.detail-modal-body .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 720px) {
  .detail-modal-card { grid-template-columns: 1fr; }
  .detail-modal-image { aspect-ratio: 16/10; }
}