/* FastFood page: clean, responsive layout scoped to .fastfood-page */

.fastfood-page {
  /* Will be set by JS for accurate fixed-header height */
  --ff-header-h: 80px;
  --ff-gap: 16px;
  --ff-card-bg: #fff;
  --ff-card-bd: #e9e9e9;
  --ff-accent: #FAF3E0;
  --ff-text: #111;
  --ff-muted: #666;
  --ff-brand: #28a745;
  background: #fff;
  padding-top: calc(var(--ff-header-h) + 12px);
}

/* Top guide card (first content section) */
.fastfood-page > div:first-of-type {
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  padding: 20px 18px !important;
  margin: 14px auto !important;
  width: min(1100px, 94%);
  text-align: left;
}
.fastfood-page > div:first-of-type h2 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 8px; color: var(--ff-text); }
.fastfood-page > div:first-of-type ul { margin: 6px 0 10px 1.25rem !important; padding: 0; }
.fastfood-page > div:first-of-type ul li { line-height: 1.5; margin: 6px 0; position: relative; }
.fastfood-page > div:first-of-type ul li::marker { content: '🍔  '; font-size: 1rem; }

/* Modal (scoped) */
.fastfood-page .ff-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.44); z-index: 1000; opacity: 0; transition: opacity .18s ease-out; }
.fastfood-page .ff-modal.is-open { opacity: 1; }
.fastfood-page .ff-modal .ff-modal-content { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(520px, 92vw); max-height: min(78vh, 720px); overflow: auto; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.2); }
.fastfood-page .ff-modal-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fastfood-page .ff-modal-title { margin:0; font-size: 1.25rem; }
.fastfood-page .ff-modal-section { margin-top: 12px; }
.fastfood-page .ff-modal-section h4 { margin: 0 0 8px; font-size: 1rem; }
.fastfood-page #ff-removables label, .fastfood-page #ff-choices label { display:block; padding:6px 0; font-size:.95rem; }
.fastfood-page .ff-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top: 14px; }

/* Buttons */
.fastfood-page .ff-btn { appearance:none; background:#eee; color:#111; border:1px solid #ddd; border-radius:10px; padding:10px 14px; font-size: .95rem; cursor:pointer; transition: filter .15s ease, background .15s ease; }
.fastfood-page .ff-btn:hover { filter: brightness(.96); }
.fastfood-page .ff-btn-primary { background: var(--ff-brand); color:#fff; border-color: var(--ff-brand); }
.fastfood-page .ff-btn-ghost { background: transparent; border: none; font-size: 1.1rem; padding: 6px 8px; }

@media (max-width: 480px) {
  .fastfood-page .ff-modal .ff-modal-content { width: 96vw; height: auto; max-height: 86vh; border-radius: 12px; padding: 14px; }
}

/* Guide box formatting */
.fastfood-page .ff-muted { color: var(--ff-muted); font-size: 0.98rem; margin: 4px 0 6px; }

/* Layout: keep defaults from retail.css; just add subtle divider */
.fastfood-page .contains { border-top: 1px solid #eee; padding-top: 16px; padding-inline: min(2vw, 24px); }

/* Left menu: keep original behavior; only light padding if applicable */
.fastfood-page .menu { padding: 12px; }

/* Animated menu panel */
.fastfood-page .menu {
  transition: transform .22s ease, opacity .2s ease;
}
.fastfood-page .menu.is-collapsed {
  transform: translateX(-8px);
  opacity: .0;
  pointer-events: none;
}
.fastfood-page .menu.is-expanded {
  transform: translateX(0);
  opacity: 1;
}

/* Animated mobile dropdown */
.fastfood-page #mobile-category-menu {
  transition: max-height .22s ease, opacity .18s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}
.fastfood-page #mobile-category-menu.show-menu {
  max-height: 60vh;
  opacity: 1;
}

/* Category list inside menu */
.fastfood-page #category-menu { position: static; display: block; background: transparent; border: 0; box-shadow: none; height: auto; overflow: visible; padding: 8px 0 0; }
.fastfood-page .category-link { display:block; padding: 10px 12px; font-size: .98rem; border-radius: 10px; color:#111; text-decoration:none; border:1px solid transparent; }
.fastfood-page .category-link:hover { background: #fff; border-color:#ddd; }

/* Search area under header, sticky on scroll */
.fastfood-page .search_container {
  position: sticky !important;
  top: var(--ff-header-h);
  z-index: 2;
  background: #fff;
  padding: 14px min(2vw, 24px) 18px;
  margin: 0 auto !important;
  border-top: 1px solid #eee;
}
.fastfood-page .search_container form { display: flex; gap: 10px; max-width: 880px; margin: 0 auto; }
.fastfood-page .search_container .search-bar { flex: 1; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--ff-card-bd); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.fastfood-page .search_container .search-button { padding: 12px 16px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.05); }

/* Products grid (use defaults from retail.css; only keep table width reset) */
.fastfood-page .table { width: 100%; margin: 0; }

/* Footer spacing safety */
.fastfood-page footer { margin-top: 24px; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .fastfood-page { padding-top: calc(var(--ff-header-h) + 8px); }
  .fastfood-page .search_container form { max-width: 100%; }
  .fastfood-page #toggle-mobile-menu { top: calc(var(--ff-header-h) + 8px); }
  .fastfood-page #mobile-category-menu { top: calc(var(--ff-header-h) + 60px); }
  .fastfood-page .add-to-cart-form { flex-direction: column; align-items: stretch; }
  .fastfood-page .add-to-cart-form input[type="number"] { width: 100%; }
  .fastfood-page .contains { grid-template-columns: 1fr; }
  .fastfood-page .menu { width: 100% !important; position: relative !important; top: 0; }
}