/* ============================================================
   CUSTOM — Per-store overrides for Template TF
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* ===== Open now / Closed now badge (new-website standards 2026-10-22) =====
   Sits just under the header (absolute, so it never shifts the layout).
   Hidden until the live hours check answers; stays hidden on any error. */
.open-badge {
  position: absolute;
  top: calc(100% + 8px);
  left: max(12px, calc((100% - 1200px) / 2 + 12px));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.open-badge[hidden] { display: none; }
.open-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
}
.open-badge.is-open::before { background: #15803d; }
.open-badge.is-closed::before { background: #b91c1c; }
/* Rakesh 2026-10-29: overflow:hidden makes min-height 0, so 26 categories shrank instead of scrolling - keep full height, sidebar scrolls */
.menu-buttons .menu-button { flex-shrink: 0; }

/* Logo: AFRA lockup (Brandy pack v1, 243x85, transparent), no white plate. */
.brand img {
  width: auto;
  height: 56px;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
@media (max-width: 480px) {
  .brand img { height: 46px; }
}
/* Footer: cream lockup (logo-light) on the dark #2D1008 footer, no white plate. */
.foot-brand img {
  width: auto;
  height: 60px;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* ---------- Reservation page: iOrders booking form embed (Rakesh via Atlas 2026-10-31) ---------- */
.reserve-sec { padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.reserve-frame { max-width: 760px; margin: 0 auto; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; overflow: hidden; background: #fff; }
.reserve-frame iframe { display: block; width: 100%; height: 1080px; border: 0; }
@media (min-width: 600px) { .reserve-frame iframe { height: 1040px; } }
.reserve-title { text-align: center; margin: 0 0 1rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.reserve-fallback, .reserve-note { max-width: 760px; margin: 1rem auto 0; text-align: center; }
.reserve-fallback a, .reserve-note a { color: var(--brand); text-decoration: underline; font-weight: 600; }