:root {
  /* Premium Dark Default Theme */
  --bg-color: #121212;
  --bg-color-alt: #1a1a1a;
  --text-main: #f5f5f5;
  --text-muted: #a0a0a0;
  
  --primary-color: #ff9800; /* Appetizing orange */
  --primary-hover: #e68a00;
  --secondary-color: #2196f3;
  --accent-color: #e91e63;
  
  --border-color: #333;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --transition: all 0.3s ease;
  --border-radius: 12px;
  --header-height: 91px; /* 15px padding x2 + 60px logo + 1px border */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* components.js injects the header/footer after DOMContentLoaded. Keep the page
   hidden until that's done so users never see content render at the top and then
   jump down as the sticky header is inserted above it. components.js reveals the
   body by adding .components-ready (with a window 'load' safety net). */
body { visibility: hidden; }
body.components-ready { visibility: visible; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

/* ---- Date & time pickers (consistent site-wide) ----
   Single source of truth, based on the admin edit-event form. color-scheme: dark
   renders the native calendar/clock popup in dark mode; accent-color tints the
   selected date/time highlight to the brand orange. */
input[type="date"],
input[type="time"] {
  color-scheme: dark;
  accent-color: var(--primary-color);
  cursor: pointer;
  letter-spacing: 0.3px;
}
input[type="date"]:hover,
input[type="time"]:hover {
  border-color: rgba(255, 152, 0, 0.5);
}
/* Calendar/clock indicator tinted brand orange (#ff9800) so it's clearly
   visible on the dark fields. The filter chain recolors the native (black)
   icon: brightness(0) flattens it to solid black, then the hue/sat values
   shift it to orange. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(64%) sepia(69%) saturate(1352%) hue-rotate(360deg) brightness(101%) contrast(104%);
  opacity: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: var(--transition);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(255, 152, 0, 0.18);
}

a:hover {
  color: var(--primary-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header & Navigation */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  padding: 15px 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav-links a {
  color: var(--text-main);
  font-weight: 500;
  font-size: 1.1rem;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--primary-color);
  transition: var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Hero Section */
.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 100px 20px;
  background-color: #0a0a0a;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-bg.active {
  opacity: 1;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4));
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  animation: fadeIn 1s ease-out forwards;
}

.hero h1 {
  font-size: 4rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

.hero p {
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 40px;
  color: #ffffff;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.9);
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #121212;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.6);
  color: #121212;
}

.btn-outline {
  background-color: transparent;
  color: var(--text-main);
  border: 2px solid var(--primary-color);
  box-shadow: inset 0 0 0 0 var(--primary-color);
}

.btn-outline:hover {
  color: #121212;
  box-shadow: inset 0 0 0 2em var(--primary-color), 0 4px 15px rgba(255, 152, 0, 0.4);
  transform: translateY(-2px);
}

/* Sections */
.section {
  padding: 100px 0;
}

/* First section on interior pages. The header is sticky (reserves its own
   space), so only a small top gap is needed below it. */
.section-first {
  padding-top: 60px;
}

.section-alt {
  background-color: var(--bg-color-alt);
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
  font-size: 2.5rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--primary-color);
  margin: 15px auto 0;
  border-radius: 2px;
}

/* Cards & Layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: var(--glass-shadow);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, border-color, box-shadow;
}

.glass-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 152, 0, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 152, 0, 0.1);
}

/* Upcoming Events grid & cards */
.events-grid {
  display: grid;
  /* Cards keep a consistent width and stay centered, so 1-2 events look
     intentional instead of stretching across an empty 3-column row. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
  gap: 24px;
}

/* Multiple events: a horizontal scroll-snap carousel that is itself 80% of the
   page width and centered, showing exactly one card at a time. */
.events-grid--carousel {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 80%;
  max-width: 80%;
  margin-inline: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Prevent the browser from auto-shifting scrollLeft when the loop clone is
     inserted, so the carousel starts on the first event as positioned in JS. */
  overflow-anchor: none;
  /* Small padding so the focus ring / hover lift isn't clipped. */
  padding: 4px 0;
  /* Hide the scrollbar (auto-play + snap drive the carousel); Firefox/IE. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Each card fills the whole carousel viewport, so only one event shows at a
   time and the next snaps fully into place. */
.events-grid--carousel .event-card {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: center;
}

/* Hide the scrollbar in WebKit/Blink browsers. */
.events-grid--carousel::-webkit-scrollbar {
  display: none;
}

.event-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.event-card__media {
  position: relative;
  width: 100%;
  /* Fixed minimal height so every card matches regardless of the uploaded
     image's shape; the image is cropped to fill rather than driving height. */
  height: 170px;
  background: #161616;
}

.event-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  flex: 1;
}

.event-card__title {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.25;
  font-family: var(--font-heading);
}

.event-card__date {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.25);
}

.event-card__time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.event-card__desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 4px;
}

/* Footer */
.footer {
  background-color: #0a0a0a;
  padding: 40px 0 20px;
  border-top: 1px solid var(--border-color);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  margin: 0 auto 30px;
  max-width: 960px;
  text-align: center;
  justify-items: center;
}

.footer-col {
  width: 100%;
}

.footer-col h3 {
  color: #fff;
  margin-bottom: 14px;
  font-size: 1.15rem;
}

.footer-col p {
  margin-bottom: 8px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col a {
  color: var(--text-muted);
}

.footer-col a:hover {
  color: var(--primary-color);
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  justify-content: center;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: var(--text-main);
  transition: var(--transition);
}

.social-links a:hover {
  background: var(--primary-color);
  color: #121212;
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  max-width: 960px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  /* Navigation */
  .nav-links {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    width: 100%;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    background: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 999;
  }
  
  .nav-links.active {
    left: 0;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  /* Layout & Spacing */
  .section {
    padding: 60px 0;
  }

  .section-first {
    padding-top: 40px;
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .glass-card {
    padding: 25px 20px;
  }

  .menu-category {
    margin-bottom: 40px;
  }
  
  /* Typography Scaling */
  .hero h1 {
    font-size: 2.2rem;
  }
  
  .section-title {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  .menu-category-title {
    font-size: 1.7rem;
    margin-bottom: 20px;
  }

  /* Footer: tighter, centered stack on mobile */
  .footer {
    padding: 35px 0 20px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    margin-bottom: 25px;
    text-align: center;
  }

  .footer-col h3 {
    margin-bottom: 10px;
  }
}

/* Footer: single column on the smallest screens */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Tablet / Laptop layout for 4-column grid */
@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Reservation modal */
.reservation-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reservation-modal.is-open {
  display: flex;
  opacity: 1;
}

.reservation-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-color-alt);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 0.3s ease;
}

.reservation-modal.is-open .reservation-modal__dialog {
  transform: translateY(0);
}

.reservation-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reservation-modal__header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
}

.reservation-modal__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.reservation-modal__close:hover {
  color: var(--primary-color);
}

.reservation-modal__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow-y: auto; /* scrolls on short viewports so the full widget stays reachable */
}

.reservation-modal__body iframe {
  display: block;
  width: 100%;
  /* Grow to fill, but never below the widget's natural height. A definite
     min-height (not height:100%) is required — a percentage height collapses
     to the iframe default of 150px when the parent height is not explicit. */
  flex: 1 0 auto;
  min-height: 580px;
  border: 0;
}

.reservation-modal__fallback {
  padding: 10px 20px 16px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.reservation-modal__fallback a {
  color: var(--primary-color);
}

/* When the centered card can't fit the full widget, an inner scrollbar would
   appear. Instead, take over the viewport so the iframe fills the space and
   the body never scrolls. The shared piece (below) fills the iframe; each
   query decides how wide the takeover is. */
@media (max-width: 600px), (max-height: 760px) {
  .reservation-modal {
    padding: 0;
    /* Match the *visible* viewport, not the layout viewport. On mobile,
       100%/100vh extends behind the address bar and home indicator, which
       would hide the dialog's footer; 100dvh tracks the area actually on
       screen. `bottom: auto` releases the inset so height takes effect. */
    bottom: auto;
    height: 100vh;
    height: 100dvh;
  }
  .reservation-modal__dialog {
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .reservation-modal__body {
    overflow: hidden;
  }
  .reservation-modal__body iframe {
    /* fill the available height rather than forcing 580px; the dialog now has
       a definite height, so no percentage-collapse risk */
    flex: 1 1 auto;
    min-height: 0;
  }
  /* keep the fallback footer clear of the home indicator / gesture bar */
  .reservation-modal__fallback {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Phones: edge-to-edge full screen. */
@media (max-width: 600px) {
  .reservation-modal__dialog {
    width: 100%;
    max-width: none;
    border: 0;
  }
}

/* First-visit announcements popup (events / special-hours).
   Mirrors the reservation-modal conventions above for a consistent look. */
.site-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-popup.is-open {
  display: flex;
  opacity: 1;
}

.site-popup__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-color-alt);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 0.3s ease;
}

.site-popup.is-open .site-popup__dialog {
  transform: translateY(0);
}

.site-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-popup__header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #fff;
}

.site-popup__header h3 i {
  color: var(--primary-color);
}

.site-popup__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.site-popup__close:hover {
  color: var(--primary-color);
}

.site-popup__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px;
}

.site-popup__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-popup__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-popup__item:last-child {
  border-bottom: none;
}

.site-popup__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 152, 0, 0.12);
  color: var(--primary-color);
  font-size: 1rem;
}

.site-popup__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.site-popup__item-title {
  color: #fff;
  font-weight: 600;
  font-size: 1.02rem;
}

.site-popup__item-detail {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.site-popup__footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.site-popup__cta {
  width: 100%;
}

/* Phones: take over the viewport like the reservation modal. */
@media (max-width: 600px) {
  .site-popup {
    padding: 0;
    bottom: auto;
    height: 100vh;
    height: 100dvh;
  }
  .site-popup__dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .site-popup__footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}



/* ==========================================================================
   Page-specific styles migrated out of inline style="" attributes and page
   <style> blocks. Grouped by page.
   ========================================================================== */

/* === Home page === */
.hp-hero-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.hp-btn-light {
  color: #fff;
  border-color: #fff;
}
.hp-award-title {
  color: var(--primary-color);
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.hp-feature-card {
  text-align: center;
  text-decoration: none;
  display: block;
}
.hp-feature-title {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #fff;
}
.hp-feature-desc {
  color: var(--text-muted);
  margin-bottom: 20px;
}
.hp-feature-btn {
  border-width: 1px;
  font-size: 0.9rem;
  padding: 8px 20px;
}

/* Guest reviews strip (homepage). Rendered from Firestore by reviews.js; the
   whole #reviews-section is display:none until there are reviews to show.
   Cards keep a consistent width and stay centered so 1-2 reviews look
   intentional rather than stretching across an empty row. */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 24px;
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-card__stars {
  color: var(--primary-color);
  font-size: 1.05rem;
  letter-spacing: 2px;
}
.review-card__text {
  color: var(--text-main);
  font-style: italic;
  /* Clamp long reviews so cards stay even and the strip stays compact. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.review-card__author {
  font-family: var(--font-heading);
  font-weight: 600;
  color: #fff;
}
.review-card__source {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.reviews-cta {
  text-align: center;
  margin-top: 50px;
}

/* === Events page === */
/* Hidden until events.js confirms there are events to show, so the section
   never flashes on screen before being hidden when the list is empty. */
.ev-upcoming-section { margin-bottom: 80px; display: none; }
.ev-upcoming-title { margin-bottom: 40px; }
.ev-bookings-grid { margin-bottom: 60px; }
.ev-bookings-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.ev-bookings-heading {
  color: var(--primary-color);
  margin-bottom: 15px;
}
.ev-bookings-para {
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.7;
}
.ev-bookings-image {
  animation-delay: 0.2s;
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
}
.ev-bookings-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ev-form-card {
  max-width: 800px;
  margin: 0 auto;
}
.ev-form-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.8rem;
  font-family: var(--font-heading);
}
.ev-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ev-form-row { gap: 20px; }
.ev-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ev-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 5px;
}
.ev-input {
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: #fff;
  width: 100%;
}
.ev-textarea {
  min-height: 150px;
  resize: vertical;
}
.ev-submit { align-self: flex-start; }

/* === About page === */
.ab-narrow-center {
  max-width: 800px;
  text-align: center;
}
.ab-story-card {
  text-align: left;
  margin-bottom: 40px;
}
.ab-card-heading {
  color: var(--primary-color);
  font-size: 1.8rem;
  margin-bottom: 20px;
}
.ab-card-text {
  font-size: 1.1rem;
  margin-bottom: 20px;
}
.ab-btn-spaced { margin-right: 15px; }

/* === Contact page === */
.ct-grid-gap { gap: 60px; }
.ct-card-mb { margin-bottom: 30px; }
.ct-card-title {
  color: var(--primary-color);
  margin-bottom: 10px;
  font-size: 1.5rem;
}
.ct-card-title-lg {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.5rem;
}
.ct-phone { font-size: 1.2rem; }
.ct-hours {
  color: var(--text-muted);
  font-size: 1.05rem;
}
.ct-hours-line { margin-bottom: 5px; }
.ct-mail-intro {
  color: var(--text-muted);
  margin-bottom: 15px;
}
.ct-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ct-input {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: #fff;
  flex: 1 1 160px;
  min-width: 0;
}
.ct-subscribe-btn { padding: 12px 20px; }
.ct-social-flush { margin-top: 0; }
.ct-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: rgba(0,0,0,0.4);
  text-align: center;
}
.ct-location-title { margin-bottom: 10px; }
.ct-location-addr {
  color: var(--text-muted);
  margin-bottom: 20px;
}
.ct-map {
  width: 100%;
  height: 300px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: 20px;
}
.ct-maps-btn {
  border-width: 1px;
  font-size: 0.9rem;
}

/* === Catering page === */
.cg-mb-60 { margin-bottom: 60px; }
.cg-mb-80 { margin-bottom: 80px; }
.cg-gap-20 { gap: 20px; }
.cg-delay-1 { animation-delay: 0.1s; }
.cg-delay-2 { animation-delay: 0.2s; }
.cg-intro-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.cg-card-heading {
  color: var(--primary-color);
  margin-bottom: 15px;
}
.cg-intro-text {
  margin-bottom: 20px;
  font-size: 1.1rem;
  line-height: 1.7;
}
.cg-img-card {
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
}
.cg-img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cg-subsection-title {
  font-size: 1.8rem;
  margin-bottom: 40px;
}
.cg-specialty-card {
  text-align: center;
  padding: 30px;
}
.cg-specialty-icon {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  display: block;
}
.cg-specialty-heading {
  color: #fff;
  margin-bottom: 10px;
  font-family: var(--font-heading);
}
.cg-specialty-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cg-form-card {
  max-width: 800px;
  margin: 0 auto;
}
.cg-form-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.8rem;
  font-family: var(--font-heading);
}
.cg-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cg-input {
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: #fff;
  width: 100%;
}
.cg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cg-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 5px;
}
.cg-textarea {
  min-height: 150px;
  resize: vertical;
}
.cg-submit { align-self: flex-start; }

/* === Menus page === */
.menu-category { margin-bottom: 60px; scroll-margin-top: 95px; }
.menu-category-title { font-size: 2rem; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 10px; margin-bottom: 30px; }
.menu-item { background: var(--glass-bg); padding: 20px; border-radius: var(--border-radius); border: 1px solid var(--glass-border); transition: var(--transition); display: flex; flex-direction: column; justify-content: space-between; }
.menu-item:hover { border-color: var(--primary-color); transform: translateY(-3px); }
.menu-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 15px;}
.menu-item-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: #fff; }
.menu-item-price { font-weight: 600; color: var(--accent-color); font-size: 1.2rem; min-width: 50px; text-align: right; }
.menu-item-desc { color: var(--text-muted); font-size: 0.95rem; margin-top: auto;}
.menu-nav { display: flex; gap: 15px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.menu-nav a { padding: 10px 20px; border-radius: 20px; background: var(--bg-color-alt); border: 1px solid var(--border-color); color: var(--text-main); font-weight: 500; }
.menu-nav a:hover { background: var(--primary-color); color: #000; border-color: var(--primary-color); }
.menu-item-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--border-radius); margin-bottom: 15px; }

/* === Admin page === */
.admin-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hidden { display: none !important; }
.auth-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  max-width: 450px;
  width: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  padding: 40px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auth-card h2 {
  font-size: 2rem;
  margin-bottom: 25px;
  text-align: center;
  color: #fff;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.event-hidden-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
}
.form-group label.inline-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  cursor: pointer;
}
.form-group label.inline-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
  cursor: pointer;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.2);
}
.form-control option {
  background-color: var(--bg-color-alt);
  color: #fff;
}
input[type="file"].form-control {
  padding: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}
input[type="file"].form-control:hover {
  border-color: rgba(255, 152, 0, 0.5);
}
input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button {
  margin-right: 14px;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-color), #ffb84d);
  color: #1a1a1a;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}
input[type="file"].form-control::file-selector-button:hover,
input[type="file"].form-control::-webkit-file-upload-button:hover {
  background: linear-gradient(135deg, #ffa726, var(--primary-color));
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
  transform: translateY(-1px);
}
.dashboard-container {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  flex: 1;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.dashboard-header h1 {
  font-size: 2.2rem;
  color: #fff;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.user-email {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  gap: 15px;
  flex-wrap: wrap;
}
.search-input { max-width: 300px; }
.admin-category-section { margin-bottom: 40px; }
.admin-category-title {
  font-size: 1.5rem;
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.admin-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.admin-item-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.admin-item-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  background: #252525;
}
.admin-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-item-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.admin-item-title {
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
}
.admin-item-price {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 1.05rem;
}
.admin-item-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: auto;
}
.admin-item-order {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}
.admin-item-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.admin-item-actions button {
  flex: 1;
  padding: 8px;
  font-size: 0.85rem;
  border-radius: 6px;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-content {
  background: #1a1a1a;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  position: relative;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}
.modal-header h3 {
  font-size: 1.5rem;
  color: #fff;
}
.close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
}
.close-btn:hover { color: #fff; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}
.image-preview-container {
  margin-top: 10px;
  position: relative;
  width: 100%;
  height: 160px;
  background: #252525;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-color);
}
.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-preview-placeholder {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: #333;
  color: #fff;
  padding: 15px 25px;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  font-size: 0.95rem;
  animation: slideIn 0.3s ease-out forwards;
  border-left: 4px solid var(--primary-color);
}
.toast.success { border-left-color: #4caf50; }
.toast.error { border-left-color: #f44336; }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.spinner {
  border: 4px solid rgba(255,255,255,0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: var(--primary-color);
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.admin-tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 5px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-heading);
  transition: var(--transition);
  white-space: nowrap;
  flex: 0 0 auto;
}
.admin-tab-btn:hover { color: #fff !important; }
.admin-tab-btn.active {
  color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
}
.day-row {
  display: grid;
  grid-template-columns: 150px 100px 1fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: var(--transition);
}
.day-row:hover { background: rgba(255, 255, 255, 0.04); }
.admin-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.weekday-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.weekday-picker label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  -webkit-user-select: none;
  user-select: none;
}
.weekday-picker input {
  accent-color: var(--primary-color);
  cursor: pointer;
}
@media (max-width: 600px) {
  .day-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .dashboard-header h1 { font-size: 1.8rem; }
  .user-info {
    width: 100%;
    justify-content: space-between;
  }
  .user-email { word-break: break-all; }
}
.ad-btn-logout { padding: 8px 15px; font-size: 0.9rem; }
.ad-tabs-bar {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-color);
}
.ad-stack-12 { display: flex; flex-direction: column; gap: 12px; }
.ad-stack-15 { display: flex; flex-direction: column; gap: 15px; }
.ad-stack-20 { display: flex; flex-direction: column; gap: 20px; }
.ad-card-800 { max-width: 800px; margin: 0 auto; padding: 30px; }
.ad-card-800--spaced { margin: 25px auto 0; }
.ad-section-h2 {
  color: var(--primary-color);
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}
.ad-form-actions {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}
.ad-btn-save { padding: 12px 30px; }
.ad-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}
.ad-card-header__title { color: var(--primary-color); margin: 0; }
.ad-card-header__desc { color: var(--text-muted); font-size: 0.85rem; margin: 6px 0 0; }
.ad-btn-nowrap { padding: 10px 20px; white-space: nowrap; }
.ad-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.ad-mb-20 { margin-bottom: 20px; }
.ad-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ad-btn-md { padding: 10px 20px; }
.ad-icon-gap { margin-right: 6px; }
.ad-btn-accent-outline { color: var(--accent-color); border-color: var(--accent-color); }
.ad-btn-danger {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}
.ad-warning-text { color: #fff; font-size: 1rem; line-height: 1.5; }
.ad-modal-narrow { max-width: 500px; }