/* ============================================
   RAYAL EVENTS - Premium Event Services Website
   Design System & Styles
   Theme: Royal Gold & Dark Navy (from logo)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,700;1,800&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* ============================================
   RAYAL EVENTS - Dark Theme (Primary)
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
  /* Primary Gold Palette (from logo) */
  --gold-50: #fdf8e8;
  --gold-100: #f9edc4;
  --gold-200: #f3da8a;
  --gold-300: #e8c44e;
  --gold-400: #d4a935;
  --gold-500: #c6952b;
  --gold-600: #b8860b;
  --gold-700: #9a6f09;
  --gold-800: #7d5a07;
  --gold-900: #604506;

  /* Dark Navy/Charcoal (from logo background) */
  --navy-50: #e8eaf2;
  --navy-100: #c4c8db;
  --navy-200: #9da3c2;
  --navy-300: #757ea9;
  --navy-400: #586296;
  --navy-500: #3a4783;
  --navy-600: #2d3a6e;
  --navy-700: #1f2c59;
  --navy-800: #141e42;
  --navy-900: #0a0f2b;

  /* Section-specific accent colors */
  --caterer-accent: #c6952b;
  --caterer-bg: linear-gradient(135deg, #0a0f2b 0%, #1f2c59 50%, #141e42 100%);
  
  --decor-accent: #e8a0bf;
  --decor-bg: linear-gradient(135deg, #1a0a1e 0%, #2d1535 50%, #1a0a1e 100%);
  
  --stalls-accent: #D4AF37;
  --stalls-bg: linear-gradient(135deg, #1a0f0a 0%, #2d1f15 50%, #1a0f0a 100%);
  
  --atoz-accent: #6dd5ed;
  --atoz-bg: linear-gradient(135deg, #0a1a1e 0%, #152d35 50%, #0a1a1e 100%);

  /* Neutral */
  --white: #ffffff;
  --off-white: #f8f6f0;
  --cream: #faf5e4;
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a68;
  --text-light: #e8e4d9;
  --text-muted: #9e9bb2;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.24);
  --shadow-gold: 0 4px 20px rgba(198,149,43,0.3);
  --shadow-gold-lg: 0 8px 40px rgba(198,149,43,0.4);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Typography Details */
  --text-stroke: 1.5px rgba(212, 175, 55, 0.4);
  --text-stroke-dark: 2px rgba(10, 15, 43, 0.6);

  /* Typography */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-accent: 'Cormorant Garamond', 'Georgia', serif;

  /* Active accent (changes per section) */
  --active-accent: var(--gold-500);
}

/* ---- PREMIUM TYPOGRAPHY ---- */
.text-gradient-gold {
  background: linear-gradient(135deg, #f3da8a 0%, #c6952b 50%, #9a6f09 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-stroke-gold {
  -webkit-text-stroke: 2px var(--gold-400);
  paint-order: stroke fill;
  text-shadow: 0 0 15px rgba(198,149,43,0.3), 2px 2px 5px rgba(0,0,0,0.5);
}

.hero-prominent-text {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.6);
  paint-order: stroke fill;
  text-shadow: 2px 4px 10px rgba(0,0,0,0.8);
}

.text-stroke-navy {
  -webkit-text-stroke: 1.5px var(--navy-800);
  text-shadow: 2px 4px 12px rgba(0,0,0,0.6);
}

.text-shadow-premium {
  text-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.3);
}

.font-elegant { font-family: var(--font-display); }

.outline-text {
  color: transparent !important;
  -webkit-text-stroke: 1.2px #D4AF37;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.8;
}

.section-label.outline-text {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: block;
  -webkit-text-stroke: 0.8px var(--gold-500);
}

.contact-watermark {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-family: var(--font-display);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #fff;
  text-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

.hero-title .gold-text {
  display: block;
  font-style: italic;
  font-weight: 400;
  padding: 5px 0;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 20px rgba(0,0,0,0.2) !important;
}

/* Default color for caterer mode */
body[data-mode="caterer"] .hero-title .gold-text {
  background: linear-gradient(135deg, #fdf8e8 0%, #d4a935 50%, #c6952b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: brightness(1.15) !important;
}

/* Decor mode - pink gradient */
body[data-mode="decor"] .hero-title .gold-text {
  background: linear-gradient(135deg, #f5d8e8 0%, #f0b5d1 50%, #e88fb5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: brightness(1.15) !important;
}

/* Stalls mode - gold gradient */
body[data-mode="stalls"] .hero-title .gold-text {
  background: linear-gradient(135deg, #e8d5a3 0%, #d4af37 50%, #b8932f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: brightness(1.15) !important;
}

/* A-Z mode - light blue gradient */
body[data-mode="atoz"] .hero-title .gold-text {
  background: linear-gradient(135deg, #d6f3fa 0%, #a8e8f5 50%, #7dd9ed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: brightness(1.15) !important;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
  color: var(--white);
}

.section-title span {
  display: inline-block;
  background: linear-gradient(135deg, #c6952b 0%, #9a6f09 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text-light);
  background: var(--navy-900);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

/* ============================================
   MARQUEE BORDER - "A to Z Services"
   ============================================ */
.marquee-border {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.marquee-border .marquee-track {
  position: absolute;
}

/* Top track - hidden as requested */
.marquee-border .marquee-top {
  display: none;
}

/* Bottom track - hidden to match */
.marquee-border .marquee-bottom {
  display: none;
}

/* Left track - transparent background, glowing text only */
.marquee-border .marquee-left {
  top: 0;
  left: 0;
  width: 28px;
  height: 100%;
  background: transparent;
  border-right: 2px solid rgba(198,149,43,0.25);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: inset -4px 0 12px rgba(198,149,43,0.08);
}

/* Right track - transparent background, glowing text only */
.marquee-border .marquee-right {
  top: 0;
  right: 0;
  width: 28px;
  height: 100%;
  background: transparent;
  border-left: 2px solid rgba(198,149,43,0.25);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: inset 4px 0 12px rgba(198,149,43,0.08);
}

.marquee-content {
  display: inline-flex;
  white-space: nowrap;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee-top .marquee-content {
  animation: marquee-horizontal 20s linear infinite;
}

.marquee-bottom .marquee-content {
  animation: marquee-horizontal-reverse 20s linear infinite;
}

.marquee-left .marquee-content {
  animation: marquee-vertical 20s linear infinite;
}

.marquee-right .marquee-content {
  animation: marquee-vertical-reverse 20s linear infinite;
}

.marquee-content span {
  display: inline-block;
  padding: 0 30px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Vertical border spans glow gold on transparent bg */
.marquee-left .marquee-content span,
.marquee-right .marquee-content span {
  color: var(--gold-400);
  text-shadow:
    0 0 6px rgba(198,149,43,0.9),
    0 0 12px rgba(198,149,43,0.6),
    0 0 24px rgba(198,149,43,0.3);
  padding: 0 8px;
  letter-spacing: 2px;
  font-size: 9px;
}

.marquee-content span::after {
  content: '✦';
  margin-left: 20px;
  color: var(--navy-800);
  opacity: 0.6;
}

.marquee-left .marquee-content span::after,
.marquee-right .marquee-content span::after {
  color: var(--gold-600);
  opacity: 0.5;
  margin-left: 8px;
}

@keyframes marquee-horizontal {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-horizontal-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes marquee-vertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes marquee-vertical-reverse {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* ============================================
   MAIN CONTENT WRAPPER (inside marquee border)
   ============================================ */
.page-wrapper {
  margin: 0 28px;
  min-height: 100vh;
  position: relative;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 28px;
  right: 28px;
  z-index: 1000;
  padding: 0.8rem 2rem;
  margin: 0;
  background: rgba(10, 15, 43, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom: 1px solid rgba(198, 149, 43, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: padding 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.55s ease,
              box-shadow 0.55s ease;
}

.site-header.scrolled {
  padding: 0.4rem 1.5rem;
  background: rgba(10, 15, 43, 0.97);
  box-shadow: var(--shadow-lg);
}

/* Logo — big on landing hero, normal when scrolled */
.logo-img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 3px solid var(--gold-500);
  box-shadow: none;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              border-width 0.55s ease;
  display: block;
  flex-shrink: 0;
}

.site-header.scrolled .logo-img {
  width: 44px;
  height: 44px;
  border-width: 2px;
  box-shadow: none;
}

.logo-img:hover {
  transform: scale(1.05);
  box-shadow: none;
}

/* ============================================
   HEADER LAYOUT — brand text fills left, ends 20px before About
   ============================================ */

.brand-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

/* Left side: grows to fill space, right side stays fixed.
   overflow:hidden prevents brand text from ever overlapping the right side. */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;          /* clips brand text before it reaches mode buttons */
  padding-right: 20px;       /* 20px gap before right side */
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
  flex-grow: 0;
}

/* Brand text container — also clips to prevent overflow */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  max-width: min(42vw, 520px);
  overflow: hidden;
  flex: 1 1 0;
}

/* ── Brand wordmark: two words on one line, spaced apart ── */
.brand-wordmark {
  display: flex;
  align-items: baseline;
  gap: clamp(4px, 0.5vw, 8px);
  line-height: 1;
  min-width: 0;
  transition: gap 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-word-rayal,
.brand-word-events {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-style: italic;
  white-space: nowrap;
  display: block;
  letter-spacing: clamp(1.5px, 0.25vw, 5px);
  line-height: 1;
  transition: font-size 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              letter-spacing 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.45s ease;

  background: linear-gradient(
    160deg,
    #c8993a 0%,
    #e8c96a 28%,
    #f5dfa0 42%,
    #d4a93e 55%,
    #a87828 72%,
    #c8993a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55));
}

.brand-word-rayal {
  font-size: clamp(1rem, 2vw, 2.4rem);
}

.brand-word-events {
  font-size: clamp(1rem, 2vw, 2.4rem);
  background: linear-gradient(
    160deg,
    #b8882a 0%,
    #d8b85a 28%,
    #eedfa8 42%,
    #c49030 55%,
    #986820 72%,
    #b8882a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 148, 48, 0.5) 20%,
    rgba(220, 180, 80, 0.85) 50%,
    rgba(196, 148, 48, 0.5) 80%,
    transparent 100%
  );
  margin: 3px 0 4px;
  transition: opacity 0.45s ease, margin 0.45s ease;
  flex-shrink: 0;
}

.brand-name {
  display: none;
}

.brand-tagline {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: clamp(0.42rem, 0.9vw, 0.82rem);
  letter-spacing: clamp(1.5px, 0.35vw, 4.5px);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  display: block;
  color: rgba(205, 168, 70, 0.82);
  text-shadow: none;
  transition: font-size 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              letter-spacing 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.45s ease;
}

.site-header.scrolled .brand-word-rayal,
.site-header.scrolled .brand-word-events {
  font-size: clamp(1.1rem, 1.2vw, 1.5rem);
  letter-spacing: clamp(1.1px, 0.2vw, 3px);
}

.site-header.scrolled .brand-wordmark {
  gap: 6px;
}

.site-header.scrolled .brand-rule {
  margin: 1px 0 2px;
  opacity: 0.5;
}

.site-header.scrolled .brand-tagline {
  font-size: 0px;
  letter-spacing: 0px;
  opacity: 0;
  pointer-events: none;
}

.site-header.scrolled .brand-tagline-wrap {
  max-height: 0;
  overflow: hidden;
}

/* Scrolled: left side compact */
.site-header.scrolled .header-left {
  flex: 0 0 auto;
  padding-right: 0;
}
#successModal,
.modal-overlay-site {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000;
}
#successModal.open,
.modal-overlay-site.open {
  display: flex !important;
}
/* rayal-centered-alert is already centered via JS inline styles */

/* Floating WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  opacity: 0.5; /* 50% transparent by default */
}

.floating-whatsapp:hover {
  transform: scale(1.1) translateY(-5px);
  background-color: #128C7E;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  opacity: 1; /* Full opacity on hover */
}

/* WhatsApp Quote Button (in booking forms) */
.whatsapp-quote-btn {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: white !important;
  border: none !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  padding: 14px 20px !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 15px !important;
}

.whatsapp-quote-btn:hover {
  background: linear-gradient(135deg, #128c7e 0%, #075e54 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4) !important;
}

.whatsapp-quote-btn:active {
  transform: translateY(0) !important;
}

.whatsapp-quote-btn .whatsapp-icon {
  font-size: 1.5rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Header right: Stack switches (top) and nav (bottom) — defined in HEADER LAYOUT block above */

.mode-switches {
  display: flex;
  gap: 4px;
  align-items: center;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(198,149,43,0.18);
  border-radius: 50px;
  padding: 4px 6px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}

.nav-links {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}


/* Outlined Contrast Text (Prompt 2) */
.outline-text {
  -webkit-text-stroke: 1px var(--accent-color, var(--gold-500));
  color: transparent !important;
  font-weight: 800;
  letter-spacing: 1.5px;
}

:root {
  --accent-color: #D4AF37; /* Default Gold */
}

/* Broad Theme Application (Prompt 4) */
/* NOTE: Only apply accent color to specific accent elements, NOT all headings.
   Applying !important to h1-h4 breaks gradient text and section-title white color. */
.accent-text {
  color: var(--accent-color);
  transition: color 0.4s ease;
}

.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-outline {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.section-label {
  color: var(--accent-color);
  border-color: var(--accent-color);
}


.nav-links a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding: 0.15rem 0;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

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

.nav-links a:hover {
  color: var(--accent-color);
  filter: brightness(1.2);
}

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

/* P3: Active nav link — highlighted when user is in that section */
.nav-links a.nav-active {
  color: var(--accent-color) !important;
  font-weight: 700;
}

.nav-links a.nav-active::after {
  width: 100%;
  background: var(--accent-color);
  height: 2px;
}

/* Individual mode buttons — glass shiny pills */
.mode-btn {
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(198,149,43,0.2);
  color: rgba(230,220,200,0.85);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none !important;
  font-smooth: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fix A-Z button rendering - remove any line artifacts */
.mode-btn[data-mode="atoz"] {
  text-decoration: none !important;
  letter-spacing: 0.6px !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  word-spacing: normal !important;
}

/* Glass shine overlay */
.mode-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  pointer-events: none;
}

/* Hover — each button glows its own color */
.mode-btn[data-mode="caterer"]:hover {
  border-color: var(--gold-400);
  color: var(--gold-300);
  box-shadow: 0 0 10px rgba(198,149,43,0.5), 0 0 20px rgba(198,149,43,0.25);
  transform: translateY(-2px);
  background: rgba(198,149,43,0.12);
}
.mode-btn[data-mode="decor"]:hover {
  border-color: #e8a0bf;
  color: #f0c4d8;
  box-shadow: 0 0 10px rgba(232,160,191,0.5), 0 0 20px rgba(232,160,191,0.25);
  transform: translateY(-2px);
  background: rgba(232,160,191,0.1);
}
.mode-btn[data-mode="stalls"]:hover {
  border-color: #D4AF37;
  color: #d4c096;
  box-shadow: 0 0 10px rgba(212,175,55,0.5), 0 0 20px rgba(212,175,55,0.25);
  transform: translateY(-2px);
  background: rgba(212,175,55,0.1);
}
.mode-btn[data-mode="atoz"]:hover {
  border-color: #6dd5ed;
  color: #9de5f5;
  box-shadow: 0 0 10px rgba(109,213,237,0.5), 0 0 20px rgba(109,213,237,0.25);
  transform: translateY(-2px);
  background: rgba(109,213,237,0.08);
}

/* Active states — solid glassy color per button */
.mode-btn.active[data-mode="caterer"] {
  background: linear-gradient(135deg, rgba(184,134,11,0.8), rgba(212,169,53,0.9));
  border-color: var(--gold-400);
  color: var(--navy-900);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(198,149,43,0.7), 0 0 28px rgba(198,149,43,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mode-btn.active[data-mode="decor"] {
  background: linear-gradient(135deg, rgba(192,96,144,0.85), rgba(232,160,191,0.95));
  border-color: #e8a0bf;
  color: #2a0f1e;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(232,160,191,0.7), 0 0 28px rgba(232,160,191,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mode-btn.active[data-mode="stalls"] {
  background: linear-gradient(135deg, rgba(184, 147, 47, 0.85), rgba(212, 175, 55, 0.95));
  border-color: #D4AF37;
  color: #1a1a05;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(212,175,55,0.7), 0 0 28px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mode-btn.active[data-mode="atoz"] {
  background: linear-gradient(135deg, rgba(109,213,237,0.85), rgba(155,229,245,0.95));
  border-color: #6dd5ed;
  color: #1a3a4a;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(109,213,237,0.7), 0 0 28px rgba(109,213,237,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 180px; 
}

.brand-text .brand-name {
  /* Inherits all styles from .brand-name — no override here */
  display: block;
}

.brand-text .brand-tagline {
  /* Inherits all styles from .brand-tagline — no override here */
  display: block;
}

.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-400);
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--gold-600);
  line-height: 1.7;
}

.brand-gold-text {
  color: var(--gold-500) !important;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(5, 8, 22, 0.88) 0%,
    rgba(5, 8, 22, 0.5) 40%,
    rgba(5, 8, 22, 0.4) 75%,
    rgba(5, 8, 22, 0.3) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 2rem;
}

.hero-subtitle {
  font-family: var(--font-accent);
  font-size: 1.1rem;
  color: var(--gold-400);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5);
  animation: fadeInUp 0.8s 0.3s forwards;
  position: relative;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s 0.5s forwards;
  text-shadow: 0 10px 40px rgba(0,0,0,0.8), 2px 4px 10px rgba(0,0,0,0.6);
}



.hero-description {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.95);
  max-width: 750px;
  margin: 0 auto 2.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s 0.7s forwards;
  line-height: 1.8;
  text-shadow: 0 4px 15px rgba(0,0,0,0.9), 0 2px 5px rgba(0,0,0,0.5);
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s 0.9s forwards;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-color, var(--gold-600)), color-mix(in srgb, var(--accent-color, var(--gold-400)) 80%, white 20%));
  color: var(--navy-900);
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  filter: brightness(1.1);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.03);
  color: var(--accent-color, var(--gold-300));
  border: 2px solid var(--accent-color, var(--gold-500));
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--accent-color, var(--gold-500));
  color: var(--navy-900);
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/* ============================================
   SECTION CONTAINERS
   ============================================ */
.content-sections {
  position: relative;
}

.mode-section {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.mode-section.active {
  display: block;
  opacity: 1;
}

#section-caterer { --font-display: 'Playfair Display', serif; }
#section-decor   { --font-display: 'Cormorant Garamond', serif; }
#section-stalls  { --font-display: 'Inter', sans-serif; --font-accent: 'Inter', sans-serif; }
#section-atoz    { --font-display: 'Playfair Display', serif; --font-accent: 'Cormorant Garamond', serif; }

/* Generic Section Styling */
.section {
  padding: var(--space-4xl) var(--space-2xl);
  position: relative;
}/*  */

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-label {
  font-family: var(--font-accent);
  font-size: 0.9rem;
  color: var(--active-accent);
  letter-spacing: 5px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
  margin-bottom: 0.5rem;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.section-title span {
  color: var(--active-accent);
  text-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.section-divider {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  margin: 0 auto 2rem;
  border-radius: 2px;
}

.section-description {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

.about-image-wrapper {
  position: relative;
}

.about-image-wrapper img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.about-image-wrapper::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: 15px;
  bottom: 15px;
  border: 2px solid var(--gold-500);
  border-radius: var(--radius-lg);
  opacity: 0.3;
  z-index: -1;
}

.about-content h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 1rem;
}

.about-content p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--active-section-glow, rgba(198, 149, 43, 0.08));
  border: 1px solid var(--active-section-border, rgba(198, 149, 43, 0.15));
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
}

.stat-item:hover {
  transform: translateY(-5px);
  border-color: var(--gold-500);
  box-shadow: var(--shadow-gold);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--active-accent);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.5rem;
}

/* ============================================
   ABOUT SLIDESHOW (Desktop Only)
   ============================================ */
.about-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: #000;
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.slide {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.slide.active {
  display: block;
  opacity: 1;
  z-index: 10;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slideshow Controls */
.slideshow-nav {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 8px;
  align-items: center;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dot.active {
  background: var(--gold-500);
  box-shadow: 0 0 10px rgba(198, 149, 43, 0.6);
  border-color: var(--gold-400);
  transform: scale(1.2);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* Slideshow Arrows */
.slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  z-index: 15;
  opacity: 0.7;
  backdrop-filter: blur(8px);
}

.slideshow-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  opacity: 1;
}

.about-slideshow:hover .slideshow-arrow {
  opacity: 1;
}

.slideshow-arrow.prev {
  left: 12px;
}

.slideshow-arrow.next {
  right: 12px;
}

/* Placeholder for no photos */
.slideshow-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(198, 149, 43, 0.1), rgba(198, 149, 43, 0.05));
  color: rgba(198, 149, 43, 0.6);
}

.slideshow-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.slideshow-placeholder-text {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

/* ============================================
   SERVICES SECTION
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--active-section-border, rgba(198, 149, 43, 0.12));
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(198, 149, 43, 0.3);
  box-shadow: var(--shadow-gold);
  background: var(--active-section-glow, rgba(198, 149, 43, 0.05));
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(198, 149, 43, 0.15), rgba(198, 149, 43, 0.05));
  border: 1px solid rgba(198, 149, 43, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.8rem;
  transition: all var(--transition-normal);
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: var(--shadow-gold);
}

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ============================================
   GALLERY SECTION
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
  max-width: 1300px;
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(transparent, rgba(10, 15, 43, 0.8));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.gallery-item:hover::after {
  opacity: 1;
}

.gallery-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-normal);
}

.gallery-item:hover .gallery-label {
  opacity: 1;
  transform: translateY(0);
}

/* Remove the first-child span-2 rule — not needed with auto-fill */
.gallery-item:nth-child(1) {
  grid-row: span 1;
}

/* ── Gallery scroll box: fixed height, shows 6 photos (3×2), only grid scrolls ── */
.gallery-scroll-wrapper {
  max-height: 580px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-md);
  scrollbar-width: thin;
  scrollbar-color: rgba(198,149,43,0.4) transparent;
}
.gallery-scroll-wrapper::-webkit-scrollbar { width: 6px; }
.gallery-scroll-wrapper::-webkit-scrollbar-track { background: transparent; }
.gallery-scroll-wrapper::-webkit-scrollbar-thumb { background: rgba(198,149,43,0.4); border-radius: 3px; }

.gallery-scroll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  padding: 4px;
}

/* ============================================
   WHY CHOOSE US
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--active-section-glow, rgba(198, 149, 43, 0.04));
  border: 1px solid var(--active-section-border, rgba(198, 149, 43, 0.1));
  transition: all var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-5px);
  background: rgba(198, 149, 43, 0.08); /* slightly stronger glow on hover */
  border-color: rgba(198, 149, 43, 0.25);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-slider {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s ease;
}

.testimonial-card {
  min-width: 100%;
  padding: 3rem;
  text-align: center;
}

.testimonial-stars {
  color: var(--gold-400);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  letter-spacing: 4px;
}

.testimonial-text {
  font-family: var(--font-accent);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 2rem;
  position: relative;
}

.testimonial-text::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--gold-500);
  opacity: 0.2;
  position: absolute;
  top: -30px;
  left: -10px;
  line-height: 1;
}

.testimonial-author {
  font-weight: 600;
  color: var(--gold-400);
  font-size: 1rem;
}

.testimonial-role {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(198, 149, 43, 0.3);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.testimonial-dot.active {
  background: var(--gold-500);
  transform: scale(1.3);
}

/* ============================================
   BOOKING / CTA SECTION
   ============================================ */
.booking-section {
  background: linear-gradient(135deg, rgba(198, 149, 43, 0.08), rgba(198, 149, 43, 0.02));
  border: 1px solid rgba(198, 149, 43, 0.15);
  border-radius: var(--radius-xl);
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.booking-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(198, 149, 43, 0.05), transparent 50%);
  z-index: 0;
}

.booking-section > * {
  position: relative;
  z-index: 1;
}

.booking-section h2 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.booking-section p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

.form-group {
  position: relative;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.85rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(198, 149, 43, 0.2);
  border-radius: var(--radius-md);
  outline: none;
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(198, 149, 43, 0.15);
  background: rgba(255, 255, 255, 0.08);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-select {
  appearance: none;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: rgba(5, 8, 22, 0.8);
  border-top: 1px solid rgba(198, 149, 43, 0.15);
  padding: 4rem 2rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-brand .logo-img {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}

.footer-brand .brand-name {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 1rem;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 1.5rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(198, 149, 43, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--gold-400);
  transition: all var(--transition-normal);
}

.social-link:hover {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
  transform: translateY(-3px);
}

.footer-column h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-400);
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

.footer-column ul li {
  margin-bottom: 0.75rem;
}

.footer-column ul li a {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.footer-column ul li a:hover {
  color: var(--gold-400);
  padding-left: 5px;
}

.footer-bottom {
  border-top: 1px solid rgba(198, 149, 43, 0.1);
  margin-top: 3rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-section {
  position: relative;
  overflow: hidden;
}

.contact-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background-image: url('assets/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  filter: grayscale(1);
  z-index: 0;
  pointer-events: none;
}

.contact-grid,
.section-header {
  position: relative;
  z-index: 1;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--active-section-glow, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--active-section-border, rgba(198, 149, 43, 0.1));
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
}

.contact-info-item:hover {
  border-color: rgba(198, 149, 43, 0.3);
  transform: translateX(5px);
}

.contact-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  background: rgba(198, 149, 43, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--gold-400);
}

.contact-info-item h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.contact-info-item p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Scroll Reveal Animation Classes */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Pulse glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(198, 149, 43, 0.1); }
  50% { box-shadow: 0 0 40px rgba(198, 149, 43, 0.3); }
}

/* ============================================
   PARTICLE / DECORATIVE BACKGROUND
   ============================================ */
.particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold-500);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 8s infinite;
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-10vh) scale(1);
  }
}

/* ============================================
   ENHANCED MOBILE RESPONSIVE WITH COOL TRANSITIONS
   ============================================ */

/* ── Enhanced Mobile Animations ── */
@keyframes slideInFromRight {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromLeft {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mobileSlideUp {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Mobile-First Responsive Breakpoints ── */
@media (max-width: 1024px) {
  .nav-links {
    gap: 0.8rem;
  }
  .nav-links a {
    font-size: 0.68rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-links a:hover {
    transform: translateY(-2px);
  }
  .mode-btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.65rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mode-btn:hover {
    transform: translateY(-2px) scale(1.05);
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

  .about-slideshow {
    height: 400px;
    min-height: 400px;
  }

  .about-image {
    height: 400px;
    min-height: 400px;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Enhanced card animations on mobile */
  .service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  }
}

@media (max-width: 768px) {
  .marquee-border .marquee-top,
  .marquee-border .marquee-bottom {
    display: none;
  }
  .marquee-border .marquee-left,
  .marquee-border .marquee-right {
    width: 22px;
    top: 0;
    height: 100%;
  }
  .page-wrapper {
    margin: 0 22px;
  }
  .site-header {
    top: 0;
    left: 22px;
    right: 22px;
    gap: 6px;
    padding: 0.4rem 0.8rem;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .brand-name {
    /* Let fitBrandText() handle sizing — no !important override */
    font-size: clamp(1.4rem, 4vw, 3rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .brand-tagline {
    font-size: clamp(0.5rem, 1.5vw, 1.2rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .logo-img {
    width: 64px !important;
    height: 64px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .site-header.scrolled .logo-img {
    width: 36px !important;
    height: 36px !important;
  }
  .header-right {
    width: 100%;
  }
  /* .mode-switches styling moved to header-specific section below (line ~5935) */
  .nav-links {
    width: 100%;
    justify-content: center;
    gap: 0.6rem;
  }

  .hero-title {
    font-size: 2.2rem;
    animation: fadeInUp 0.8s 0.3s both;
  }

  .hero-subtitle {
    font-size: 0.85rem;
    animation: fadeInUp 0.8s 0.2s both;
  }

  .section-title {
    font-size: 2rem;
    animation: fadeInUp 0.6s ease both;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .service-card {
    animation: fadeInUp 0.6s ease both;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .service-card:nth-child(1) { animation-delay: 0.1s; }
  .service-card:nth-child(2) { animation-delay: 0.2s; }
  .service-card:nth-child(3) { animation-delay: 0.3s; }
  .service-card:nth-child(4) { animation-delay: 0.4s; }
  .service-card:nth-child(5) { animation-delay: 0.5s; }
  .service-card:nth-child(6) { animation-delay: 0.6s; }

  .service-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  }

  /* Decor services mobile layout - 2 columns with square cards */
  #decor-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  #decor-services-grid .service-card {
    min-height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    overflow: hidden !important;
  }
  #decor-services-grid .service-card > div:first-child {
    height: auto !important;
  }
  #decor-services-grid .service-card img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  #decor-services-grid .service-card > div:last-child {
    padding: 0.9rem 0.85rem !important;
  }

  /* A to Z 5-col grid → 2-col on tablet */
  #services-atoz > div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
  }

  .gallery-item {
    animation: fadeInUp 0.6s ease both;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .gallery-item:nth-child(1) { animation-delay: 0.1s; }
  .gallery-item:nth-child(2) { animation-delay: 0.2s; }
  .gallery-item:nth-child(3) { animation-delay: 0.3s; }
  .gallery-item:nth-child(4) { animation-delay: 0.4s; }

  .gallery-item:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  }

  /* PROMPT 1: View Services & Client Reviews buttons in single row */
  .about-grid {
    padding: 0 1rem;
  }

  .about-content h3,
  .about-heading {
    font-size: 1.5rem !important;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .about-content p,
  .about-para {
    font-size: 0.95rem !important;
    line-height: 1.7;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: justify;
    margin-bottom: 1rem;
  }

  .about-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    margin-top: 1.5rem !important;
  }

  .about-actions .btn {
    flex: 1;
    max-width: 48%;
    padding: 0.8rem 1rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
    text-align: center;
    justify-content: center;
  }

  /* Stats in single row on mobile */
  .about-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem;
  }

  .stat-item {
    padding: 0.8rem 0.5rem;
  }

  .stat-number {
    font-size: 1.4rem !important;
  }

  .stat-label {
    font-size: 0.75rem !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Hero CTA buttons in single row */
  .hero-cta-group {
    flex-direction: row !important;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  .hero-cta-group .btn {
    flex: 1 1 45%;
    min-width: 140px;
    max-width: 48%;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* PROMPT 2: Mobile nav menu items in single column */
  .mobile-nav-links {
    flex-direction: column !important;
    gap: 0.3rem;
  }

  .mobile-nav-links a {
    width: 100%;
    display: block;
  }

  /* Mobile mode switches in hamburger menu - HORIZONTAL */
  .mobile-mode-switches {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .mobile-mode-switches .mode-btn {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 25px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
  }

  .mobile-mode-switches .mode-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
  }

  /* Mode button theme colors (like desktop) */
  .mode-btn[data-mode="caterer"].active,
  .mobile-mode-switches .mode-btn[data-mode="caterer"].active {
    background: linear-gradient(135deg, #B8860B, #FFD700, #FFA500) !important;
    border-color: #FFD700 !important;
    color: #000 !important;
  }

  .mode-btn[data-mode="decor"].active,
  .mobile-mode-switches .mode-btn[data-mode="decor"].active {
    background: linear-gradient(135deg, #c9537a, #e8a0bf, #f0c4d8) !important;
    border-color: #e8a0bf !important;
    color: #fff !important;
  }

  .mode-btn[data-mode="stalls"].active,
  .mobile-mode-switches .mode-btn[data-mode="stalls"].active {
    background: linear-gradient(135deg, #b8932f, #D4AF37, #e8d5a3) !important;
    border-color: #D4AF37 !important;
    color: #1a1a05 !important;
  }

  .mode-btn[data-mode="atoz"].active,
  .mobile-mode-switches .mode-btn[data-mode="atoz"].active {
    background: linear-gradient(135deg, #6dd5ed, #9de5f5, #b8e8f7) !important;
    border-color: #6dd5ed !important;
    color: #1a3a4a !important;
  }

  /* Remove marquee border for mobile */
  .marquee-border {
    display: none !important;
  }

  .page-wrapper {
    margin: 0 !important;
  }

  .site-header {
    left: 0 !important;
    right: 0 !important;
  }

  /* Decor services - 2 columns instead of 5 */
  #services-decor > div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  #services-decor .service-card {
    text-align: center;
    padding: 1.2rem 1rem !important;
  }

  #services-decor .service-card h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem;
  }

  #services-decor .service-card p {
    text-align: justify !important;
    font-size: 0.85rem !important;
    line-height: 1.5;
  }

  #services-decor .service-icon {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.6rem !important;
    margin: 0 auto 0.8rem;
  }

  /* PROMPT 3: Service cards - smaller icons, justified text */
  .service-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.8rem !important;
  }

  .service-card h3 {
    font-size: 1.1rem !important;
  }

  .service-card p {
    text-align: justify !important;
    font-size: 0.9rem !important;
    line-height: 1.6;
  }

  /* PROMPT 4: Menu display in 2 columns */
  .standard-menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem;
    max-height: 60vh;
  }

  .menu-list-item {
    padding: 0.7rem 0.8rem;
    font-size: 0.85rem;
  }

  .menu-list-item h4 {
    font-size: 0.95rem !important;
  }

  .menu-list-item p {
    font-size: 0.8rem !important;
  }

  /* Override JavaScript inline styles for menu grid - FORCE 2 COLUMNS */
  .menu-selection-container > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Menu cards inside grid */
  .menu-selection-container > div > div[style*="background:rgba"] {
    font-size: 0.85rem !important;
  }

  /* Menu card titles */
  .menu-selection-container h4,
  .menu-selection-container span[style*="font-weight:800"] {
    font-size: 0.9rem !important;
  }

  /* Menu card item lists */
  .menu-selection-container div[style*="line-height:1.8"] {
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
  }

  /* REMOVED: Conflicting .mode-switches grid rule - header handles mobile layout */

  .mode-btn {
    width: 100% !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.8rem !important;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  /* Type switcher buttons (Standard/Customize in customize pages) */
  .type-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .type-btn {
    width: 100% !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.8rem !important;
    text-align: center;
  }

  /* Category tabs below mode buttons - 2 columns */
  .menu-category-tabs,
  .cat-tabs,
  .cat-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .cat-tab,
  .cat-btn {
    width: 100% !important;
    padding: 5px 0.9rem !important;
    line-height: 1 !important;
    font-size: 0.85rem !important;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* CATEGORY BUTTON HIGHLIGHTING - Using text content matching */
  
  /* Target category buttons by their text content */
  .menu-category-tabs button,
  div[style*="flex-wrap:wrap"] button[onclick*="switchMenuCat"] {
    position: relative;
    transition: all 0.3s ease !important;
  }

  /* BREAKFAST - Orange (check button text) */
  .menu-category-tabs button[style*="background:#D4AF37"]:has-text("BREAKFAST"),
  .menu-category-tabs button[style*="background:#D4AF37"]:has-text("Breakfast"),
  div[style*="flex-wrap:wrap"] button[onclick*="switchMenuCat"][style*="background:#D4AF37"]:has-text("BREAKFAST"),
  div[style*="flex-wrap:wrap"] button[onclick*="switchMenuCat"][style*="background:#D4AF37"]:has-text("Breakfast") {
    background: linear-gradient(135deg, #F97316, #FB923C, #FDBA74) !important;
    border-color: #F97316 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(249,115,22,0.7), 0 0 20px rgba(249,115,22,0.4) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    filter: brightness(1.1);
  }

  /* Alternative approach - use :nth-child or specific selectors */
  /* Since we can't use :has-text, let's use a different approach */
  
  /* Active category buttons (those with accent background color) */
  div[style*="flex-wrap:wrap"] > button[style*="background:#D4AF37"],
  div[style*="flex-wrap:wrap"] > button[style*="background:#d4af37"],
  div[style*="flex-wrap:wrap"] > button[style*="background:#e8a0bf"],
  div[style*="flex-wrap:wrap"] > button[style*="background:#ff7e5f"],
  div[style*="flex-wrap:wrap"] > button[style*="background:#6dd5ed"] {
    box-shadow: 0 0 12px currentColor, 0 0 25px currentColor !important;
    transform: scale(1.08) !important;
    font-weight: 900 !important;
    filter: brightness(1.2) !important;
    border-width: 2px !important;
  }

  /* Selection tabs (Standard/Customize at top of menu section) */
  .selection-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem;
    margin-bottom: 2rem;
  }

  .selection-tab {
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    font-size: 0.85rem !important;
    text-align: center;
    justify-content: center;
  }

  /* Menu tabs (Standard/Customize at top) */
  .menu-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
  }

  .menu-tab {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.85rem !important;
    text-align: center;
  }

  /* PROMPT 3: Active button highlighting with REDUCED glow (no blur on nearby buttons) */
  
  /* Standard/Customize Mode Buttons - GOLD for active (REDUCED GLOW) */
  .mode-btn.active,
  .type-btn.active,
  .menu-tab.active {
    background: linear-gradient(135deg, #B8860B, #FFD700, #FFA500) !important;
    border-color: #FFD700 !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(255,215,0,0.6), 0 0 15px rgba(255,215,0,0.3), inset 0 2px 4px rgba(255,255,255,0.4) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    filter: brightness(1.1);
  }

  /* Inactive menu-tab - clearly dimmed so active stands out */
  .menu-tab:not(.active) {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.5) !important;
    font-weight: 600 !important;
  }

  /* Light theme inactive */
  .light-theme .menu-tab:not(.active) {
    background: rgba(0,0,0,0.05) !important;
    color: rgba(0,0,0,0.45) !important;
  }

  /* Light theme active */
  .light-theme .menu-tab.active {
    background: linear-gradient(135deg, #B8860B, #D4AF37, #FFA500) !important;
    color: #fff !important;
    border-color: #B8860B !important;
  }

  /* Customize Mode - PURPLE/PINK for active (REDUCED GLOW) */
  .selection-tab.active {
    background: linear-gradient(135deg, #8B4789, #C060A1, #E8A0BF) !important;
    border-color: #E8A0BF !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(232,160,191,0.6), 0 0 15px rgba(232,160,191,0.3), inset 0 2px 4px rgba(255,255,255,0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    filter: brightness(1.1);
  }

  /* Category tabs - Color-coded by category type (REDUCED GLOW) */
  
  /* VEG - GREEN */
  .cat-tab.active[data-category*="veg"],
  .cat-tab.active[data-category*="Veg"],
  .cat-tab.active[data-category*="VEG"],
  .cat-btn.active[data-category*="veg"],
  .cat-btn.active[data-category*="Veg"],
  .cat-btn.active[data-category*="VEG"] {
    background: linear-gradient(135deg, #16A34A, #22C55E, #4ADE80) !important;
    border-color: #22C55E !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(34,197,94,0.6), 0 0 15px rgba(34,197,94,0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* NON-VEG - RED */
  .cat-tab.active[data-category*="non"],
  .cat-tab.active[data-category*="Non"],
  .cat-tab.active[data-category*="NON"],
  .cat-btn.active[data-category*="non"],
  .cat-btn.active[data-category*="Non"],
  .cat-btn.active[data-category*="NON"] {
    background: linear-gradient(135deg, #DC2626, #EF4444, #F87171) !important;
    border-color: #EF4444 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(239,68,68,0.6), 0 0 15px rgba(239,68,68,0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* SWEETS/DESSERTS - ORANGE */
  .cat-tab.active[data-category*="sweet"],
  .cat-tab.active[data-category*="Sweet"],
  .cat-tab.active[data-category*="SWEET"],
  .cat-tab.active[data-category*="dessert"],
  .cat-tab.active[data-category*="Dessert"],
  .cat-tab.active[data-category*="DESSERT"],
  .cat-btn.active[data-category*="sweet"],
  .cat-btn.active[data-category*="Sweet"],
  .cat-btn.active[data-category*="dessert"],
  .cat-btn.active[data-category*="Dessert"] {
    background: linear-gradient(135deg, #D97706, #F59E0B, #FBBF24) !important;
    border-color: #F59E0B !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(245,158,11,0.6), 0 0 15px rgba(245,158,11,0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* BEVERAGES/DRINKS - BLUE */
  .cat-tab.active[data-category*="beverage"],
  .cat-tab.active[data-category*="Beverage"],
  .cat-tab.active[data-category*="BEVERAGE"],
  .cat-tab.active[data-category*="drink"],
  .cat-tab.active[data-category*="Drink"],
  .cat-tab.active[data-category*="DRINK"],
  .cat-btn.active[data-category*="beverage"],
  .cat-btn.active[data-category*="Beverage"],
  .cat-btn.active[data-category*="drink"],
  .cat-btn.active[data-category*="Drink"] {
    background: linear-gradient(135deg, #2563EB, #3B82F6, #60A5FA) !important;
    border-color: #3B82F6 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(59,130,246,0.6), 0 0 15px rgba(59,130,246,0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* Default category active (if no specific match) - CATERER stays gold */
  .cat-tab.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]),
  .cat-btn.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]) {
    background: linear-gradient(135deg, #B8860B, #FFD700) !important;
    border-color: #FFD700 !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(255,215,0,0.6), 0 0 15px rgba(255,215,0,0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* A-Z mode override: light blue for custom category buttons */
  body[data-mode="atoz"] .cat-tab.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]),
  body[data-mode="atoz"] .cat-btn.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]) {
    background: rgba(109, 213, 237, 0.2) !important;
    border-color: #6dd5ed !important;
    color: #6dd5ed !important;
    box-shadow: 0 0 15px rgba(109, 213, 237, 0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* STALLS mode override: gold for custom category buttons */
  body[data-mode="stalls"] .cat-tab.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]),
  body[data-mode="stalls"] .cat-btn.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]) {
    background: linear-gradient(135deg, #b8932f, #D4AF37, #e8d5a3) !important;
    border-color: #D4AF37 !important;
    color: #1a1a05 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* DECOR mode override: pink for custom category buttons */
  body[data-mode="decor"] .cat-tab.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]),
  body[data-mode="decor"] .cat-btn.active:not([data-category*="veg"]):not([data-category*="non"]):not([data-category*="sweet"]):not([data-category*="dessert"]):not([data-category*="beverage"]):not([data-category*="drink"]) {
    background: linear-gradient(135deg, #c9537a, #e8a0bf, #f0c4d8) !important;
    border-color: #e8a0bf !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(232, 160, 191, 0.3) !important;
    transform: scale(1.05) !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    filter: brightness(1.1);
  }

  /* MOBILE NAV LINKS - Active section highlighting with underline (like image) */
  .mobile-nav-links a {
    position: relative;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
  }

  .mobile-nav-links a:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.05);
  }

  .mobile-nav-links a.nav-active,
  .mobile-nav-links a.active {
    color: #FFD700 !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    background: rgba(255,215,0,0.12) !important;
    text-decoration: underline;
    text-decoration-color: #FFD700;
    text-decoration-thickness: 2.5px;
    text-underline-offset: 5px;
    border-left: 4px solid #FFD700 !important;
    letter-spacing: 0.5px;
  }

  .mobile-nav-links a.nav-active::before,
  .mobile-nav-links a.active::before {
    transform: scaleY(1);
    background: #FFD700;
  }

  /* PROMPT 5 & 6: Selection tabs (Standard/Customize) in 2 columns with highlighting */
  /* Moved to main mobile section above */

  .features-grid {
    grid-template-columns: 1fr;
  }

  .booking-form {
    grid-template-columns: 1fr;
    animation: fadeInUp 0.8s ease both;
  }

  /* ── BOOKING SECTION: Mobile layout for all 4 sites ── */

  /* Override the outer 2-col grid (form + right panel) → single column */
  .booking-flow-container > div[style*="grid-template-columns:1fr 320px"],
  .booking-flow-container > div[style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Right panel (Add Menu buttons) — remove sticky, show below form */
  .booking-flow-container > div > div[style*="position:sticky"],
  .booking-flow-container > div > div[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* ALL form-rows inside booking-form → 2 equal columns, full width */
  .booking-form .form-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }

  /* Equal vertical gap between ALL rows (form-row divs and standalone form-groups) */
  .booking-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
  }

  /* Each form-group fills its cell fully */
  .booking-form .form-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Special Requirements textarea — full width (its own .form-group, not in .form-row) */
  .booking-form > .form-group {
    width: 100% !important;
  }

  /* Labels fit in 2-column layout */
  .booking-form .form-group label {
    font-size: 0.72rem !important;
    margin-bottom: 0.3rem !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Inputs/selects fill full cell width */
  .booking-form .form-group input,
  .booking-form .form-group select,
  .booking-form .form-group textarea {
    font-size: 0.78rem !important;
    padding: 0.55rem 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Add-menu panel: 2-col grid — first card full width, last 2 side by side */
  .booking-flow-container > div > div[style*="flex-direction:column"],
  .booking-flow-container > div > div[style*="flex-direction: column"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    position: static !important;
  }

  /* First add-menu card spans full width (site's own button) */
  .booking-flow-container > div > div[style*="flex-direction:column"] > div:first-child,
  .booking-flow-container > div > div[style*="flex-direction: column"] > div:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Add-menu card text sizing */
  .booking-flow-container h4 {
    font-size: 0.8rem !important;
  }

  .booking-flow-container .btn-outline {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
  }

  .booking-sel-preview {
    font-size: 0.72rem !important;
    min-height: 24px !important;
    padding: 6px !important;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
  }

  /* TASK 13: Footer layout - 3 columns (Our Services, Quick Links, Contact) in single row */
  .footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem;
  }

  /* Hide footer brand section on mobile */
  .footer-brand {
    display: none !important;
  }

  /* Footer links styling for mobile */
  .footer-links {
    padding: 0.5rem;
  }

  .footer-links h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.8rem;
    font-weight: 700;
  }

  .footer-links a {
    font-size: 0.75rem !important;
    padding: 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .footer-links a svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Footer bottom text */
  .footer-bottom {
    padding: 1rem 0.5rem;
  }

  .footer-bottom p {
    font-size: 0.7rem !important;
  }

  /* TASK 14: Contact section - 4 social buttons in 2 columns x 2 rows */
  .contact-socials {
    display: none !important;
  }

  /* Contact items - 2 column grid on mobile */
  .contact-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem !important;
  }

  .contact-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1rem !important;
    gap: 0.5rem !important;
    cursor: pointer;
  }

  .contact-item div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .contact-item .contact-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.2rem !important;
    flex-shrink: 0;
    margin: 0 auto !important;
  }

  .contact-item strong {
    font-size: 0.75rem !important;
    letter-spacing: 0.5px;
    text-align: center !important;
  }

  .contact-item a {
    font-size: 0.8rem !important;
    word-break: break-all;
    text-align: center !important;
    pointer-events: auto;
    cursor: pointer;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn:hover {
    transform: translateY(-3px) scale(1.02);
  }

  /* REMOVED: Duplicate .mode-switches rule - header handles mobile layout */

  .booking-section {
    padding: 2rem 1.5rem;
  }

  .marquee-content span {
    font-size: 10px;
    padding: 0 20px;
    letter-spacing: 2px;
  }

  /* Mobile menu button enhanced */
  .mobile-menu-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-menu-btn:hover {
    transform: scale(1.1);
    color: var(--gold-300);
  }

  .mobile-menu-btn:active {
    transform: scale(0.95);
  }

  /* ── Customize / Standard menu scroll box - smaller & centred on mobile ── */
  .menu-scroll-box {
    max-height: 340px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Customize mode pill buttons container - scrollable, centred */
  .customize-items-box {
    max-height: 300px !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    scrollbar-width: thin !important;
    padding: 4px 2px !important;
    justify-content: center !important;
  }

  /* Category dropdown (select) - full width centred on mobile */
  .menu-category-tabs select,
  select[onchange*="switchMenuCat"] {
    width: 90% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    padding: 10px 16px !important;
  }

  /* ══════════════════════════════════════════════════════
     LIGHT MODE: Per-site button highlight colors (mobile)
     Matches each site's switch button colour exactly
     ══════════════════════════════════════════════════════ */

  /* ── CATERER: Gold ── */
  body[data-mode="caterer"].light-theme .cat-tab.active,
  body[data-mode="caterer"].light-theme .cat-btn.active,
  body[data-mode="caterer"].light-theme .menu-tab.active,
  body[data-mode="caterer"].light-theme .type-btn.active,
  body[data-mode="caterer"].light-theme .selection-tab.active,
  body[data-mode="caterer"].light-theme .mode-btn.active {
    background: linear-gradient(135deg, #B8860B, #D4AF37, #FFA500) !important;
    border-color: #B8860B !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(184,134,11,0.5), 0 0 16px rgba(184,134,11,0.25) !important;
    font-weight: 900 !important;
  }

  /* ── DECOR: Pink ── */
  body[data-mode="decor"].light-theme .cat-tab.active,
  body[data-mode="decor"].light-theme .cat-btn.active,
  body[data-mode="decor"].light-theme .menu-tab.active,
  body[data-mode="decor"].light-theme .type-btn.active,
  body[data-mode="decor"].light-theme .selection-tab.active,
  body[data-mode="decor"].light-theme .mode-btn.active {
    background: linear-gradient(135deg, #c9537a, #e8a0bf, #f0c4d8) !important;
    border-color: #c9537a !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(201,83,122,0.5), 0 0 16px rgba(201,83,122,0.25) !important;
    font-weight: 900 !important;
  }

  /* ── STALLS: Gold ── */
  body[data-mode="stalls"].light-theme .cat-tab.active,
  body[data-mode="stalls"].light-theme .cat-btn.active,
  body[data-mode="stalls"].light-theme .menu-tab.active,
  body[data-mode="stalls"].light-theme .type-btn.active,
  body[data-mode="stalls"].light-theme .selection-tab.active,
  body[data-mode="stalls"].light-theme .mode-btn.active {
    background: linear-gradient(135deg, #b8932f, #D4AF37, #e8d5a3) !important;
    border-color: #b8932f !important;
    color: #1a1a05 !important;
    box-shadow: 0 0 8px rgba(184,147,47,0.5), 0 0 16px rgba(184,147,47,0.25) !important;
    font-weight: 900 !important;
  }

  /* ── A TO Z: Blue ── */
  body[data-mode="atoz"].light-theme .cat-tab.active,
  body[data-mode="atoz"].light-theme .cat-btn.active,
  body[data-mode="atoz"].light-theme .menu-tab.active,
  body[data-mode="atoz"].light-theme .type-btn.active,
  body[data-mode="atoz"].light-theme .selection-tab.active,
  body[data-mode="atoz"].light-theme .mode-btn.active {
    background: linear-gradient(135deg, #6dd5ed, #9de5f5, #b8e8f7) !important;
    border-color: #6dd5ed !important;
    color: #6dd5ed !important;
    box-shadow: 0 0 8px rgba(109,213,237,0.5), 0 0 16px rgba(109,213,237,0.25) !important;
    font-weight: 900 !important;
  }

  body[data-mode="atoz"] .cat-tab.active,
  body[data-mode="atoz"] .cat-btn.active,
  body[data-mode="atoz"] .menu-tab.active,
  body[data-mode="atoz"] .type-btn.active,
  body[data-mode="atoz"] .selection-tab.active,
  body[data-mode="atoz"] .mode-btn.active {
    background: linear-gradient(135deg, #6dd5ed, #9de5f5, #b8e8f7) !important;
    border-color: #6dd5ed !important;
    color: #6dd5ed !important;
    box-shadow: 0 0 8px rgba(109,213,237,0.5), 0 0 16px rgba(109,213,237,0.25) !important;
    font-weight: 900 !important;
  }

  /* Inactive buttons in light mode — clearly dimmed */
  .light-theme .cat-tab:not(.active),
  .light-theme .cat-btn:not(.active),
  .light-theme .menu-tab:not(.active),
  .light-theme .type-btn:not(.active),
  .light-theme .selection-tab:not(.active) {
    background: rgba(255,255,255,0.9) !important;
    color: rgba(0,0,0,0.45) !important;
    border-color: rgba(0,0,0,0.15) !important;
  }
}

@media (max-width: 480px) {
  .marquee-border .marquee-top,
  .marquee-border .marquee-bottom {
    height: 20px;
  }

  /* ── BOOKING: 480px — tighten further ── */
  /* Keep 2 cols but smaller text */
  .booking-form .form-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
  }

  .booking-form .form-group label {
    font-size: 0.65rem !important;
    margin-bottom: 0.2rem !important;
  }

  .booking-form .form-group input,
  .booking-form .form-group select {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.45rem !important;
  }

  /* Add-menu panel: keep 2-col for last 2 cards */
  .booking-flow-container > div > div[style*="flex-direction:column"],
  .booking-flow-container > div > div[style*="flex-direction: column"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .booking-flow-container h4 {
    font-size: 0.72rem !important;
  }

  .booking-flow-container .btn-outline {
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
  }

  .marquee-border .marquee-left,
  .marquee-border .marquee-right {
    width: 20px;
    top: 20px;
    height: calc(100% - 40px);
  }

  .page-wrapper {
    margin: 20px;
  }

  .site-header {
    top: 20px;
    left: 20px;
    right: 20px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .section {
    padding: var(--space-2xl) var(--space-md);
  }

  .section-title {
    font-size: 1.6rem;
  }

  /* About section - extra small mobile */
  .about-grid {
    padding: 0 0.5rem;
    gap: 1.5rem;
  }

  .about-content h3,
  .about-heading {
    font-size: 1.3rem !important;
    line-height: 1.4;
    margin-bottom: 0.8rem;
  }

  .about-content p,
  .about-para {
    font-size: 0.9rem !important;
    line-height: 1.6;
    text-align: left;
  }

  /* Stats remain in single row but smaller */
  .about-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem;
  }

  .stat-item {
    padding: 0.6rem 0.3rem;
  }

  .stat-number {
    font-size: 1.2rem !important;
  }

  .stat-label {
    font-size: 0.7rem !important;
  }

  /* Hero CTA buttons remain in row but smaller */
  .hero-cta-group .btn {
    padding: 0.7rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Service icons even smaller */
  .service-icon {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.6rem !important;
  }

  /* Menu grid - keep 2 columns but tighter */
  .standard-menu-grid {
    gap: 0.6rem;
  }

  /* Override JavaScript inline styles for menu grid - FORCE 2 COLUMNS */
  .menu-selection-container > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Decor and A-Z services - 2 columns on small mobile */
  #services-decor > div[style*="grid-template-columns:repeat(5"],
  #services-atoz > div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem !important;
  }

  /* Override mode-switches to use flex (not grid) */
  .mode-switches {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    grid-template-columns: none !important;
    gap: 3px !important;
  }
  
  .mode-switches .mode-btn {
    flex: 0 0 auto !important;
    font-size: 0.68rem !important;
    padding: 0.4rem 0.7rem !important;
    white-space: nowrap !important;
  }

  .mode-btn {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
  }

  /* Category tabs - 2 columns */
  .menu-category-tabs,
  .cat-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .cat-tab {
    padding: 5px 0.7rem;
    line-height: 1;
    font-size: 0.75rem;
  }

  /* Footer - keep 3 columns but smaller text */
  .footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.8rem;
  }

  .footer-links h4 {
    font-size: 0.8rem !important;
    margin-bottom: 0.6rem;
  }

  .footer-links a {
    font-size: 0.7rem !important;
    padding: 0.3rem 0;
  }

  .footer-links a svg {
    width: 12px !important;
    height: 12px !important;
  }

  .footer-bottom p {
    font-size: 0.65rem !important;
  }

  /* Contact section - keep 2 column grid on small mobile */
  .contact-socials {
    display: none !important;
  }

  .contact-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }

  .contact-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0.8rem !important;
    gap: 0.4rem !important;
  }

  .contact-item div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .contact-item .contact-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
    margin: 0 auto !important;
  }

  .contact-item strong {
    font-size: 0.7rem !important;
    text-align: center !important;
  }

  .contact-item a {
    font-size: 0.72rem !important;
    word-break: break-all;
    text-align: center !important;
  }

  /* Customize / Standard menu scroll box - smaller on very small screens */
  .menu-scroll-box {
    max-height: 280px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .customize-items-box {
    max-height: 250px !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 4px 2px !important;
  }

  select[onchange*="switchMenuCat"] {
    width: 95% !important;
    max-width: 280px !important;
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
  }
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--navy-900);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-600), var(--gold-800));
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold-500), var(--gold-700));
}

/* Selection color */
::selection {
  background: rgba(198, 149, 43, 0.3);
  color: var(--white);
}

/* ============================================
   LOADING ANIMATION
   ============================================ */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: pulseGlow 2s infinite, float 3s infinite;
}

/* ============================================
   MENU SECTION
   ============================================ */
.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.menu-tab {
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(198, 149, 43, 0.3);
  color: var(--text-light);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: normal;
  word-break: break-word;
  min-width: auto;
  max-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-tab.active {
  background: linear-gradient(135deg, var(--gold-600), var(--gold-400));
  border-color: var(--gold-400);
  color: var(--navy-900);
}

/* Mode-specific active menu-tab colors */
body[data-mode="decor"] .menu-tab.active {
  background: linear-gradient(135deg, #d97ea8, #e8a0bf) !important;
  border-color: #e8a0bf !important;
  color: #fff !important;
}

body[data-mode="stalls"] .menu-tab.active {
  background: linear-gradient(135deg, #c6952b, #D4AF37) !important;
  border-color: #D4AF37 !important;
  color: #1a1a05 !important;
}

body[data-mode="atoz"] .menu-tab.active {
  background: linear-gradient(135deg, #6dd5ed, #9de5f5) !important;
  border-color: #6dd5ed !important;
  color: #6dd5ed !important;
}

.menu-tab:hover:not(.active) {
  border-color: var(--gold-500);
  color: var(--gold-400);
}

/* Category Tabs (Inside Standard Menu) */
.menu-category-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
  animation: fadeIn 0.8s ease;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for category tabs */
.menu-category-tabs::-webkit-scrollbar {
  height: 6px;
}

.menu-category-tabs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.menu-category-tabs::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  border-radius: 3px;
  border: 1px solid rgba(10, 15, 43, 0.8);
}

.menu-category-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--gold-300);
}

.cat-tab {
  padding: 6px 20px;
  line-height: 1;
  font-size: clamp(0.75rem, 1.2vw, 0.92rem);
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(198, 149, 43, 0.2);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  cursor: pointer;
}

.cat-tab.active {
  background: rgba(198, 149, 43, 0.15);
  border-color: var(--gold-400);
  color: var(--gold-300);
  box-shadow: 0 0 15px rgba(198, 149, 43, 0.2);
}

/* Mode-specific active tab colors */
body[data-mode="decor"] .cat-tab.active {
  background: rgba(232, 160, 191, 0.2) !important;
  border-color: #e8a0bf !important;
  color: #e8a0bf !important;
  box-shadow: 0 0 15px rgba(232, 160, 191, 0.3) !important;
}

body[data-mode="stalls"] .cat-tab.active {
  background: rgba(212, 175, 55, 0.2) !important;
  border-color: #D4AF37 !important;
  color: #D4AF37 !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3) !important;
}

body[data-mode="atoz"] .cat-tab.active {
  background: rgba(109, 213, 237, 0.2) !important;
  border-color: #6dd5ed !important;
  color: #6dd5ed !important;
  box-shadow: 0 0 15px rgba(109, 213, 237, 0.3) !important;
}

.cat-tab:hover:not(.active) {
  border-color: var(--gold-500);
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}

/* Mobile: optimize cat-tab for touch and readability */
@media (max-width: 768px) {
  .menu-category-tabs {
    gap: 0.6rem;
    padding: 0.75rem 0;
    margin-bottom: 2rem;
    /* Container itself scrolls horizontally */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  .cat-tab {
    padding: 5px 12px;
    line-height: 1;
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    border-radius: 8px;
    gap: 0.4rem;
  }
}

/* Extra small screens: ultra-compact cat-tabs */
@media (max-width: 480px) {
  .menu-category-tabs {
    gap: 0.4rem;
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
  }

  .cat-tab {
    padding: 6px 10px;
    font-size: 0.7rem;
    letter-spacing: 0px;
    border-radius: 6px;
  }

  .cat-tab.active {
    box-shadow: 0 0 10px rgba(198, 149, 43, 0.15);
  }
}

/* CATERER, STALLS, A-Z MODE MOBILE: Reduce subcategory button height (350px-763px width, 800px+ height) */
@media (max-width: 763px) and (min-height: 800px) {
  body[data-mode="caterer"] .cat-tab,
  body[data-mode="stalls"] .cat-tab,
  body[data-mode="atoz"] .cat-tab {
    line-height: 1.1;
    padding-top: 2.5px !important;
    padding-bottom: 2.5px !important;
  }
}

/* Standard Menu Grid - Vertical Rectangles */
.standard-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.menu-card {
  background: rgba(10, 15, 43, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 149, 43, 0.25);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
  min-height: 400px;
}

.menu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(198, 149, 43, 0.05) 0%, transparent 40%);
  pointer-events: none;
  border-radius: inherit;
}

.menu-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-gold);
}

.menu-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-400);
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(198, 149, 43, 0.2);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.menu-card-items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.menu-card-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.4;
}

.menu-card-item::before {
  content: '✦';
  color: var(--gold-500);
  font-size: 0.8rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Customize Sections */
.customize-menu-header {
  text-align: center;
  margin-bottom: 3rem;
}

.customize-menu-header .customize-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.custom-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.custom-cat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(198, 149, 43, 0.15);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.custom-cat-card:hover {
  background: rgba(198, 149, 43, 0.1);
  border-color: var(--gold-500);
  transform: translateY(-5px);
}

.custom-cat-card h4 {
  color: var(--gold-400);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.custom-cat-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid rgba(198, 149, 43, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faq-item:hover {
  border-color: rgba(198, 149, 43, 0.25);
}

.faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: rgba(198, 149, 43, 0.05);
}

.faq-question h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
  text-align: left;
}

.faq-toggle {
  font-size: 1.2rem;
  color: var(--gold-400);
  transition: transform var(--transition-normal);
  min-width: 24px;
  text-align: center;
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ============================================
   PRICING SECTION (for A to Z)
   ============================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(198, 149, 43, 0.12);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  transition: all var(--transition-normal);
}

.pricing-card.featured {
  border-color: var(--gold-500);
  background: rgba(198, 149, 43, 0.06);
  transform: scale(1.05);
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-gold);
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-5px);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-600), var(--gold-400));
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.35rem 1.5rem;
  border-radius: var(--radius-full);
}

.pricing-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.pricing-card .price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold-400);
  margin: 1rem 0;
}

.pricing-card .price small {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 400;
}

.pricing-features {
  text-align: left;
  margin: 1.5rem 0;
}

.pricing-features li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pricing-features li::before {
  content: '✓';
  color: var(--gold-400);
  font-weight: 700;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.featured {
    transform: none;
  }
}

/* ============================================
   MOBILE MENU TOGGLE
   ============================================ */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gold-400);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
  transform: scale(1.05);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

@media (max-width: 1024px) {
  .mobile-menu-btn {
    display: flex;
  }
}

/* Smooth section transition */
.section-fade-enter {
  animation: fadeInUp 0.6s ease forwards;
}

/* ============================================
   LOADER SPINNER
   ============================================ */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(198,149,43,0.2);
  border-top-color: var(--gold-400);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   MOBILE NAV DRAWER
   ============================================ */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: rgba(10, 15, 43, 0.98);
  backdrop-filter: blur(20px);
  z-index: 10001;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  border-left: 1px solid rgba(198,149,43,0.2);
  overflow-y: auto;
  box-shadow: -10px 0 30px rgba(0,0,0,0.3);
}

.mobile-nav-drawer.open {
  right: 0;
  animation: slideInFromRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(198,149,43,0.3);
  background: rgba(198,149,43,0.1);
  color: var(--gold-400);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-close:hover {
  background: var(--gold-500);
  color: var(--navy-900);
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 0 15px rgba(198,149,43,0.4);
}

.mobile-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(198,149,43,0.15);
  animation: fadeInUp 0.6s 0.2s both;
}

.mobile-nav-brand img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  transition: all 0.3s ease;
}

.mobile-nav-brand img:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 15px rgba(198,149,43,0.5);
}

.mobile-nav-brand span {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-400);
  letter-spacing: 2px;
}

.mobile-mode-switches {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  animation: fadeInUp 0.6s 0.3s both;
}

.mobile-mode-switches .mode-btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 12px 16px;
  border-radius: 25px;
  font-size: 0.8rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.mobile-mode-switches .mode-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.mobile-mode-switches .mode-btn:hover::before {
  left: 100%;
}

.mobile-mode-switches .mode-btn:hover {
  transform: translateY(-2px);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fadeInUp 0.6s 0.4s both;
}

.mobile-nav-links a {
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.mobile-nav-links a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold-400);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.mobile-nav-links a:hover {
  color: var(--gold-400);
  background: rgba(198,149,43,0.08);
  padding-left: 1.5rem;
  transform: translateX(5px);
}

.mobile-nav-links a:hover::before {
  transform: scaleY(1);
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Show mobile menu button on mobile, hide desktop nav links */
@media (max-width: 1024px) {
  .header-right .nav-links {
    display: none !important;
  }
  
  .header-right {
    display: flex !important; /* Keep header-right visible for hamburger button */
  }
  .mobile-menu-btn {
    display: flex !important;
  }
}

@media (min-width: 1025px) {
  .mobile-menu-btn {
    display: none !important;
  }
}

/* ============================================
   BOOKING FORM LAYOUT
   ============================================ */
.booking-container,
.booking-flow-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Two-column booking layout: form left, selection right */
.booking-two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.booking-form-col {
  min-width: 0;
}

.booking-selection-col {
  position: sticky;
  top: 90px;
}

/* Selection panel (right side) */
.booking-sel-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.booking-sel-header {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-400, #D4AF37);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.booking-sel-btn {
  width: 100%;
  justify-content: center;
  padding: 11px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.booking-sel-preview {
  min-height: 120px;
  max-height: 380px;
  overflow-y: auto;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.15);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.3) transparent;
}

.booking-sel-preview::-webkit-scrollbar { width: 4px; }
.booking-sel-preview::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 2px; }

/* Responsive: stack on mobile */
@media (max-width: 900px) {
  .booking-two-col {
    grid-template-columns: 1fr;
  }
  .booking-selection-col {
    position: static;
    order: -1; /* Show selection panel above form on mobile */
  }
}

.booking-flow-container {
  max-width: 1100px;
  margin: 0 auto;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-light);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(198,149,43,0.2);
  border-radius: var(--radius-md);
  outline: none;
  transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(198,149,43,0.15);
  background: rgba(255,255,255,0.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.form-group select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23c6952b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 35px;
}

.form-group select option {
  background: var(--navy-800);
  color: var(--text-light);
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Custom Menu Display */
.custom-menu-display {
  padding: 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(198,149,43,0.2);
  border-radius: var(--radius-md);
  min-height: 60px;
}

.no-menu-msg {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.7;
}

/* ============================================
   GALLERY OVERLAY
   ============================================ */
.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(transparent, rgba(10,15,43,0.85));
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
  height: 100%;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
  font-weight: 600;
}

/* ============================================
   CONTACT ITEMS (New Structure)
   ============================================ */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(198,149,43,0.1);
  border-radius: var(--radius-md);
  transition: all 0.3s;
}

.contact-item:hover {
  border-color: rgba(198,149,43,0.3);
  transform: translateX(5px);
}

.contact-item .contact-icon {
  font-size: 1.5rem;
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 50%;
  background: rgba(198,149,43,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-item strong {
  display: block;
  font-size: 0.8rem;
  color: var(--gold-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.contact-item a {
  color: var(--text-light);
  font-size: 0.95rem;
  transition: color 0.2s;
}

.contact-item a:hover {
  color: var(--gold-400);
}

.contact-socials {
  display: flex;
  gap: 10px;
  margin-top: 0.5rem;
}

.contact-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(198,149,43,0.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

/* ============================================
   FOOTER LINKS (New Structure)
   ============================================ */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-400);
  margin-bottom: 0.8rem;
  letter-spacing: 1px;
}

.footer-links a {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 0.3rem 0;
  transition: all 0.2s;
}

.footer-links a:hover {
  color: var(--gold-400);
  padding-left: 5px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-400);
  letter-spacing: 2px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-tagline {
  margin-top: 0.5rem;
  font-style: italic;
  opacity: 0.7;
}

.footer-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  margin-bottom: 0.5rem;
}

.footer-bottom a {
  color: var(--gold-400);
  transition: opacity 0.2s;
}

.footer-bottom a:hover {
  opacity: 0.7;
}

/* ============================================
   MENU CATEGORY SECTION & CUSTOMIZE CTA
   ============================================ */
.menu-category-section {
  margin-bottom: 2rem;
}

.menu-cat-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-400);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(198,149,43,0.15);
}

.menu-list-item {
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(198,149,43,0.08);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  color: var(--text-light);
  font-size: 0.92rem;
  line-height: 1.6;
  transition: all 0.2s;
}

.menu-list-item:hover {
  border-color: rgba(198,149,43,0.25);
  background: rgba(198,149,43,0.05);
}

.customize-menu-cta {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(198,149,43,0.06), rgba(198,149,43,0.02));
  border: 2px dashed rgba(198,149,43,0.2);
  border-radius: var(--radius-xl);
  max-width: 600px;
  margin: 0 auto;
}

.customize-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.customize-menu-cta h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 1rem;
}

.customize-menu-cta p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* ============================================
   TESTIMONIAL SLIDER (wrapper fix)
   ============================================ */
.testimonial-slider {
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}

.testimonial-author strong {
  display: block;
  margin-bottom: 0.25rem;
}

.testimonial-author span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================
   ABOUT HEADING/IMAGE FIXES
   ============================================ */
.about-heading {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 1rem;
}

.about-para {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.about-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  min-height: 400px;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* ============================================
   FAQ ICON FIX
   ============================================ */
.faq-icon {
  font-size: 1.3rem;
  color: var(--gold-400);
  transition: transform 0.3s;
  min-width: 24px;
  text-align: center;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-question span:first-child {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
}

/* ============================================
   MAP EMBED
   ============================================ */
.map-embed {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(198,149,43,0.15);
}

/* ============================================
   GALLERY 4-COLUMN ON DESKTOP
   ============================================ */
@media (min-width: 1025px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .gallery-item:nth-child(1) {
    grid-row: span 1;
  }
}

/* ---- MENU SELECTION UI (CUSTOMIZE PAGE) ---- */
.selection-tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  position: relative;
}

.selection-tab {
  padding: 1.2rem 2.5rem;
  border-radius: var(--radius-full);
  background: var(--navy-800);
  border: 1px solid var(--glass-border);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-normal);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: var(--shadow-md);
}

.selection-tab.active {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
}

.selection-tab:not(.active):hover {
  background: var(--navy-700);
  transform: translateY(-2px);
}

.food-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.food-item-select {
  background: var(--navy-800);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.food-item-select:hover {
  border-color: var(--gold-400);
  transform: translateY(-5px);
}

.food-item-select.selected {
  border-color: var(--gold-500);
  background: rgba(198,149,43,0.1);
}

.food-item-select.selected::before {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: var(--gold-500);
  color: var(--navy-900);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.item-img-placeholder {
  height: 120px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

/* ============================================
   MENU SHOWCASE & CARDS
   ============================================ */
.menu-showcase-wrapper {
  max-width: 100%;
  margin: 2rem auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(198,149,43,0.3);
  background: rgba(10, 15, 43, 0.4);
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(198,149,43,0.05);
}

.standard-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 15px;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

/* Scrollbar for Standard Menu */
.standard-menu-grid::-webkit-scrollbar {
  width: 8px;
}
.standard-menu-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.standard-menu-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  border-radius: 10px;
  border: 1px solid rgba(10, 15, 43, 0.8);
}
.standard-menu-grid::-webkit-scrollbar-thumb:hover {
  background: var(--gold-300);
}

.menu-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(198, 149, 43, 0.2);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: all 0.3s ease;
  scroll-snap-align: start;
}

.menu-card:hover {
  border-color: var(--gold-400);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.menu-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-400);
  border-bottom: 1px dashed rgba(198, 149, 43, 0.3);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}

.menu-card-items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.menu-card-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #DDD;
  text-transform: uppercase;
}

.menu-card-item::before {
  content: "✦";
  color: var(--gold-500);
  margin-right: 8px;
  font-size: 0.75rem;
}

/* ============================================
   MODALS
   ============================================ */
.modal {
  display: none; 
  position: fixed; 
  z-index: 10000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--navy-800);
  margin: auto;
  padding: 40px;
  border: 1px solid var(--gold-400);
  width: 90%;
  max-width: 600px;
  border-radius: 20px;
  box-shadow: var(--shadow-gold-lg);
  position: relative;
  animation: modalIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 1024px) {
  .standard-menu-grid { grid-template-columns: repeat(2, 1fr); max-height: 600px; }
}

@media (max-width: 768px) {
  .standard-menu-grid { grid-template-columns: 1fr; max-height: 50vh; padding-right: 10px; }
  .menu-showcase-wrapper { padding: 1rem; }
}



/* ============================================
   BOOKING FORM WRAPPER - NEW LAYOUT
   ============================================ */
.booking-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.menu-selection-block {
    transition: all 0.3s ease;
}

.menu-selection-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.booking-sel-preview {
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}

.booking-sel-preview:empty::before {
    content: 'No selection yet';
    color: rgba(255,255,255,0.4);
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .booking-form-wrapper {
        padding: 15px;
    }
    
    .menu-selection-block {
        margin: 15px 0 !important;
        padding: 12px !important;
    }
    
    .menu-selection-block h4 {
        font-size: 0.85rem !important;
    }
    
    .menu-selection-block button {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   ENHANCED MOBILE TOUCH & INTERACTION STYLES
   ============================================ */

/* Mobile device specific styles */
.mobile-device {
  -webkit-tap-highlight-color: rgba(212,175,55,0.3);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-device * {
  -webkit-tap-highlight-color: transparent;
}

/* Touch-friendly button states */
.mobile-device .btn,
.mobile-device .mode-btn,
.mobile-device .mobile-menu-btn {
  -webkit-tap-highlight-color: rgba(212,175,55,0.3);
  touch-action: manipulation;
}

/* Enhanced touch feedback for cards */
.touch-active {
  transform: scale(0.98) !important;
  transition: transform 0.1s ease !important;
}

.service-card.touch-active,
.gallery-item.touch-active,
.metric-card.touch-active {
  background: rgba(212,175,55,0.05) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Mobile layout specific styles */
.mobile-layout .hero-section {
  min-height: 100vh;
  padding-top: 120px;
}

.mobile-layout .section {
  padding: 2rem 1rem;
  margin: 1rem 0;
}

.mobile-layout .section-title {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.mobile-layout .hero-cta-group .btn {
  width: 100%;
  max-width: 300px;
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Enhanced mobile form styles */
.mobile-layout .booking-form {
  padding: 1.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.mobile-layout .form-group input,
.mobile-layout .form-group select,
.mobile-layout .form-group textarea {
  padding: 1rem;
  font-size: 1rem;
  border-radius: 12px;
  border: 2px solid rgba(212,175,55,0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-layout .form-group input:focus,
.mobile-layout .form-group select:focus,
.mobile-layout .form-group textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.15);
  transform: scale(1.02);
}

/* Mobile-optimized gallery */
.mobile-layout .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.mobile-layout .gallery-item {
  border-radius: 15px;
  overflow: hidden;
}

/* Mobile navigation enhancements */
.mobile-layout .mobile-nav-drawer {
  width: min(320px, 90vw);
}

/* Swipe gesture indicators */
.swipe-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(212,175,55,0.9);
  color: var(--navy-900);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  pointer-events: none;
}

.swipe-indicator.show {
  opacity: 1;
}

/* Pull to refresh indicator */
.pull-refresh-indicator {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(212,175,55,0.9);
  color: #0a0f2b;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
}

/* Mobile-specific animations */
@media (max-width: 768px) {
  .reveal {
    animation: mobileReveal 0.8s ease both;
  }
  
  .reveal-left {
    animation: mobileSlideInLeft 0.8s ease both;
  }
  
  .reveal-right {
    animation: mobileSlideInRight 0.8s ease both;
  }
}

@keyframes mobileReveal {
  0% { 
    opacity: 0; 
    transform: translateY(40px) scale(0.95); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

@keyframes mobileSlideInLeft {
  0% { 
    opacity: 0; 
    transform: translateX(-50px) scale(0.95); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0) scale(1); 
  }
}

@keyframes mobileSlideInRight {
  0% { 
    opacity: 0; 
    transform: translateX(50px) scale(0.95); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0) scale(1); 
  }
}

/* Enhanced mobile menu button */
.mobile-menu-btn {
  position: relative;
  overflow: hidden;
}

.mobile-menu-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(212,175,55,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.mobile-menu-btn:active::before {
  width: 100px;
  height: 100px;
}

/* Mobile-optimized floating elements */
@media (max-width: 768px) {
  .floating-whatsapp {
    width: 50px;
    height: 50px;
    font-size: 24px;
    bottom: 20px;
    right: 20px;
  }
  
  .theme-toggle {
    width: 45px;
    height: 45px;
    font-size: 1rem;
    bottom: 20px;
    right: 80px;
  }
}

/* Improved mobile scrollbar */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,0.5);
    border-radius: 2px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(212,175,55,0.7);
  }
}

/* Mobile-specific loading states */
.mobile-layout .loading {
  position: relative;
}

.mobile-layout .loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(212,175,55,0.3);
  border-top-color: var(--gold-500);
  border-radius: 50%;
  animation: mobileSpinner 0.8s linear infinite;
}

@keyframes mobileSpinner {
  to { transform: rotate(360deg); }
}


/* ============================================
   RESPONSIVE DESIGN - DESKTOP VS MOBILE
   ============================================ */

/* Desktop-specific styles (screens wider than 768px) */
@media (min-width: 769px) {
  /* Desktop menu items - larger, more spacing */
  .menu-list-item {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
  
  /* Desktop brand text - reduced for full visibility */
  .brand-name {
    font-size: clamp(1.2rem, 3vw, 2.5rem); /* Reduced from 3rem to 2.5rem */
  }
  
  .brand-tagline {
    font-size: clamp(0.6rem, 1.2vw, 1rem);
  }
  
  /* Desktop forms - wider */
  .booking-form {
    max-width: 600px;
  }
  
  /* Desktop gallery - more columns */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  /* Desktop service cards - 3 columns */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet-specific styles (screens 481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  /* Tablet menu items - medium size */
  .menu-list-item {
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
  }
  
  /* Tablet brand text - medium */
  .brand-name {
    font-size: clamp(1.2rem, 3.5vw, 2.5rem);
  }
  
  /* Tablet gallery - 2 columns */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Tablet service cards - 2 columns */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile-specific styles (screens up to 480px) */
@media (max-width: 480px) {
  /* Mobile menu items - compact, better touch targets */
  .menu-list-item {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
  }
  
  /* Mobile brand text - smaller but readable */
  .brand-name {
    font-size: clamp(1rem, 5vw, 1.8rem) !important;
    letter-spacing: 1px !important;
  }
  
  .brand-tagline {
    font-size: clamp(0.5rem, 2vw, 0.75rem) !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Mobile forms - full width */
  .booking-form {
    padding: 1.5rem 1rem;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.75rem;
  }
  
  /* Mobile buttons - larger touch targets */
  .btn-primary,
  .btn-secondary {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    min-height: 48px; /* Minimum touch target size */
  }
  
  /* Mobile gallery - 1 column */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Mobile service cards - 1 column */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Mobile section padding - reduced */
  .section {
    padding: 3rem 1rem;
  }
  
  /* Mobile section titles - smaller */
  .section-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  
  .section-description {
    font-size: 0.95rem;
  }
  
  /* Mobile menu category title */
  .menu-cat-title {
    font-size: 1.2rem;
  }
  
  /* Mobile customize CTA - compact */
  .customize-menu-cta {
    padding: 2rem 1.5rem;
  }
  
  .customize-menu-cta h3 {
    font-size: 1.3rem;
  }
  
  .customize-menu-cta p {
    font-size: 0.9rem;
  }
  
  /* Mobile header - compact */
  .site-header {
    padding: 0.75rem 1rem;
  }
  
  /* Mobile navigation - stack vertically */
  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  /* Mobile mode buttons - smaller */
  .mode-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  
  /* Mobile stats - stack vertically */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Mobile FAQ - more compact */
  .faq-item {
    padding: 1rem;
  }
  
  .faq-question {
    font-size: 0.95rem;
  }
  
  /* Mobile testimonials - full width */
  .testimonial-card {
    padding: 1.5rem;
  }
  
  .testimonial-text {
    font-size: 0.95rem;
  }
  
  /* Mobile footer - stack vertically */
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  
  .footer-section {
    width: 100%;
  }
}

/* Extra small mobile (screens up to 360px) */
@media (max-width: 360px) {
  .brand-name {
    font-size: 1rem !important;
  }
  
  .brand-tagline {
    font-size: 0.5rem !important;
  }
  
  .menu-list-item {
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
  }
  
  .section {
    padding: 2rem 0.75rem;
  }
}

/* Light theme mobile adjustments */
@media (max-width: 768px) {
  .light-theme .menu-list-item {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1.5px solid rgba(198, 149, 43, 0.25) !important;
  }
  
  .light-theme .brand-name {
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
  }
  
  .light-theme .brand-tagline {
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
  }
}

/* Print styles */
@media print {
  .theme-toggle,
  .whatsapp-float,
  .site-header,
  .footer {
    display: none !important;
  }
  
  .section {
    page-break-inside: avoid;
  }
}


/* ============================================
   LIGHT THEME - COMPREHENSIVE MENU FIX
   Force all menu text to be visible
   ============================================ */

/* Target all divs inside menu containers */
.light-theme #menu-list-caterer div,
.light-theme #menu-list-decor div,
.light-theme #menu-list-stalls div,
.light-theme #menu-list-atoz div {
  color: #2c3e50 !important;
}

/* Target all spans inside menu containers */
.light-theme #menu-list-caterer span,
.light-theme #menu-list-decor span,
.light-theme #menu-list-stalls span,
.light-theme #menu-list-atoz span {
  color: #2c3e50 !important;
}

/* Target all paragraphs inside menu containers */
.light-theme #menu-list-caterer p,
.light-theme #menu-list-decor p,
.light-theme #menu-list-stalls p,
.light-theme #menu-list-atoz p {
  color: #34495e !important;
}

/* Fix menu card backgrounds */
.light-theme #menu-list-caterer > div > div > div[onclick],
.light-theme #menu-list-stalls > div > div > div[onclick],
.light-theme #menu-list-atoz > div > div > div[onclick] {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(198, 149, 43, 0.3) !important;
}

/* Fix menu buttons */
.light-theme #menu-list-caterer button,
.light-theme #menu-list-decor button,
.light-theme #menu-list-stalls button,
.light-theme #menu-list-atoz button {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #2c3e50 !important;
  border-color: rgba(198, 149, 43, 0.4) !important;
}

/* Fix menu button hover states */
.light-theme #menu-list-caterer button:hover,
.light-theme #menu-list-decor button:hover,
.light-theme #menu-list-stalls button:hover,
.light-theme #menu-list-atoz button:hover {
  background: rgba(198, 149, 43, 0.2) !important;
  color: #000 !important;
  border-color: rgba(198, 149, 43, 0.6) !important;
}

/* Fix select dropdowns in menu */
.light-theme #menu-list-caterer select,
.light-theme #menu-list-decor select,
.light-theme #menu-list-stalls select,
.light-theme #menu-list-atoz select {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #2c3e50 !important;
  border-color: rgba(198, 149, 43, 0.4) !important;
}

/* Fix select dropdown options */
.light-theme #menu-list-caterer select option,
.light-theme #menu-list-decor select option,
.light-theme #menu-list-stalls select option,
.light-theme #menu-list-atoz select option {
  background: #ffffff !important;
  color: #2c3e50 !important;
}

/* Override any white text in menu sections */
.light-theme .menu-selection-container [style*="color:#fff"],
.light-theme .menu-selection-container [style*="color: #fff"],
.light-theme .menu-selection-container [style*="color:white"],
.light-theme .menu-selection-container [style*="color: white"] {
  color: #2c3e50 !important;
}

/* Override any light rgba text in menu sections */
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.88)"],
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.75)"],
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.7)"],
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.6)"],
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.5)"],
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.4)"],
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.35)"],
.light-theme .menu-selection-container [style*="color:rgba(255,255,255,0.3)"] {
  color: #34495e !important;
}

/* Fix menu card item lists */
.light-theme .menu-selection-container div[style*="line-height:1.8"] {
  color: #34495e !important;
}

/* Fix menu card titles */
.light-theme .menu-selection-container span[style*="font-weight:800"] {
  color: #2c3e50 !important;
}

/* Fix empty state messages */
.light-theme .menu-selection-container div[style*="color:rgba(255,255,255,0.4)"],
.light-theme .menu-selection-container div[style*="color:rgba(255,255,255,0.35)"] {
  color: #6c757d !important;
}

/* ============================================
   M5 FIX: Disable sticky on booking add-ons panel for mobile
   Prevents overlap on screens below 768px
   ============================================ */
@media (max-width: 767px) {
  .booking-addons-panel {
    position: static !important;
    top: auto !important;
  }
}

/* Hide mobile brand banner on desktop by default */
.mobile-brand-banner {
  display: none;
}

/* ============================================
   MOBILE VIEW FIXES - CUSTOM ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
  
  /* MOBILE HEADER LAYOUT: [Logo] [🍽️ 🎀 🎪 ⭐ switches] [☰ hamburger] */
  
  /* Header: flex row, space-between - FIXED AT TOP WITH NO GAP */
  .site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.3rem !important;
    flex-wrap: nowrap !important;
    padding: 0.5rem 0.5rem !important;
    overflow-x: visible !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
  
  /* Keep same padding and gap when scrolled on mobile */
  .site-header.scrolled {
    padding: 0.5rem 0.5rem !important;
    gap: 0.3rem !important;
  }
  
  /* Logo — order 1, fixed left */
  .site-header .header-left {
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  
  .site-header .header-left a {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  
  .site-header .logo-img {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Keep logo same size when scrolled on mobile */
  .site-header.scrolled .logo-img {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Hide brand text on mobile to save space */
  .site-header .brand-text {
    display: none !important;
  }
  
  /* Mobile Brand Banner - Below Header, Fades on Scroll */
  .mobile-brand-banner {
    display: block;
    position: sticky;
    top: 60px;
    z-index: 90;
    background: linear-gradient(135deg, rgba(10, 15, 43, 0.95), rgba(20, 30, 66, 0.95));
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    transition: all 0.4s ease;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 0;
  }
  
  .mobile-brand-banner.scrolled {
    /* Keep visible when scrolled - no fade away */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  
  .mobile-brand-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  
  .mobile-brand-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #FFD700, #D4AF37, #B8860B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    margin: 0;
    transition: all 0.4s ease;
  }
  
  .mobile-brand-tagline {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(212, 175, 55, 0.9);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    transition: all 0.4s ease;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }

  .mobile-brand-highlight {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.26em;
    margin: 0;
    color: #f6d372;
    text-shadow: 0 2px 14px rgba(255, 215, 0, 0.25);
  }
  
  .mobile-brand-banner.scrolled .mobile-brand-name {
    /* Keep same size when scrolled */
    font-size: 1.5rem;
  }
  
  .mobile-brand-banner.scrolled .mobile-brand-tagline {
    /* Keep same size when scrolled */
    font-size: 0.75rem;
  }
  
  /* Mode switches — order 2, horizontal scrollable, takes remaining space */
  .site-header .header-right {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }
  
  .site-header .mode-switches {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 4px 2px !important;
    grid-template-columns: none !important;
  }
  
  .site-header .mode-switches::-webkit-scrollbar {
    display: none !important;
  }
  
  .site-header .mode-switches .mode-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 0.3rem 0.45rem !important;
    font-size: 0.62rem !important;
    width: auto !important;
    border-radius: 20px !important;
  }
  
  /* Nav links hidden on mobile (hamburger handles this) */
  .site-header .nav-links {
    display: none !important;
  }
  
  /* Hamburger — order 3, fixed right */
  .mobile-menu-btn {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--gold-400) !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
  }
  
  .mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(212, 175, 55, 0.35) !important;
    transform: scale(1.05) !important;
  }
  
  /* Hide mode switches from mobile drawer (they're in header now) */
  .mobile-mode-switches {
    display: none !important;
  }
  
  /* Override any conflicting grid rules for mode-switches */
  .mode-switches {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
  }
  
  /* Reduce hero section top padding on mobile to reduce gap between brand banner and hero */
  .hero-section {
    padding-top: 90px !important;
    min-height: 90vh !important;
  }
  
  /* P2: Reduce customize dropdown/tabular size */
  .customize-menu-cta {
    max-width: 100% !important;
    padding: 1rem !important;
    margin: 0.5rem !important;
  }
  
  .customize-menu-cta h4 {
    font-size: 1rem !important;
  }
  
  .customize-menu-cta p {
    font-size: 0.8rem !important;
  }
  
  .customize-menu-cta .btn {
    padding: 0.6rem 1rem !important;
    font-size: 0.85rem !important;
  }
  
  /* Menu dropdown - fit within screen */
  .menu-dropdown {
    max-width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  
  .menu-list-item {
    padding: 0.6rem 0.8rem !important;
    font-size: 0.85rem !important;
  }
  
  /* P3: All popups and dialogues fit within mobile screen */
  
  /* Success modal - already handled but ensure it fits */
  #successModal .modal-box {
    max-width: calc(100vw - 2rem) !important;
    width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  /* Alert/dialogue boxes */
  .alert-box,
  .dialog-box,
  .popup-box {
    max-width: calc(100vw - 2rem) !important;
    width: 92% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 1rem !important;
  }
  
  /* Booking form popups */
  .booking-form-popup,
  .booking-dialog {
    max-width: calc(100vw - 1.5rem) !important;
    width: 95% !important;
    padding: 1rem !important;
  }
  
  /* Date validation popup */
  .date-validation-popup {
    max-width: calc(100vw - 2rem) !important;
    width: 90% !important;
    font-size: 0.85rem !important;
    padding: 1rem !important;
  }
  
  /* Gallery lightbox */
  .lightbox-content {
    max-width: 95vw !important;
    max-height: 90vh !important;
  }

  .preview-modal-card {
    width: 96vw !important;
  }
  
  /* Dropdown menus */
  .dropdown-menu,
  .select-dropdown {
    max-width: calc(100vw - 2rem) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  
  /* Table containers */
  .table-container {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  
  table {
    font-size: 0.8rem !important;
  }
  
  /* Form inputs - prevent zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    max-width: 100% !important;
  }
  
  /* Ensure all fixed/absolute positioned elements fit */
  .fixed-popup,
  .absolute-popup,
  [style*="position: fixed"],
  [style*="position: absolute"] {
    max-width: calc(100vw - 1rem) !important;
  }

.preview-trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.preview-trigger:hover {
  transform: scale(1.06);
}

.preview-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
}

.preview-modal.open {
  display: flex;
}

.preview-modal-card {
  width: min(1100px, 96vw);
  max-height: 92vh;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(10,10,10,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.preview-modal-media {
  width: 100%;
  max-height: calc(92vh - 130px);
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-modal-media img {
  width: 100%;
  height: 100%;
  max-height: calc(92vh - 130px);
  object-fit: contain;
  display: block;
}

.preview-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  color: #fff;
}

.preview-modal-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.preview-modal-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}

.preview-modal-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Extra small mobile devices (< 400px) */
@media (max-width: 400px) {
  
  /* Even more compact header */
  .site-header .logo-img {
    width: 32px !important;
    height: 32px !important;
  }
  
  .site-header .mode-switches {
    max-width: calc(100vw - 100px) !important; /* Even less space on tiny screens */
  }
  
  .site-header .mode-switches .mode-btn {
    padding: 0.3rem 0.45rem !important;
    font-size: 0.62rem !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  
  /* Smaller popups */
  #successModal .modal-box {
    width: 96% !important;
    padding: 0 !important;
  }
  
  #successModal .modal-box > div:first-child {
    padding: 15px 12px !important;
  }
  
  #successModal .modal-box > div:last-child {
    padding: 15px 14px !important;
  }
  
  /* Compact customize menu */
  .customize-menu-cta {
    padding: 0.75rem !important;
    margin: 0.25rem !important;
  }
  
  .customize-menu-cta h4 {
    font-size: 0.9rem !important;
  }
  
  .customize-menu-cta p {
    font-size: 0.75rem !important;
  }
}

/* ============================================
   DIET FILTER BUTTONS & MENU CONTROLS - Main Site Menus
   ============================================ */

.menu-controls-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.menu-tab-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.menu-tab {
    flex: 1;
    min-width: 120px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1.5px solid var(--gold-400);
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.menu-tab:hover {
    border-color: var(--gold-400);
    color: var(--gold-400);
    background: rgba(212,175,55,0.1);
}

.menu-tab.active {
    background: var(--gold-400);
    color: #000;
    border-color: var(--gold-400);
    box-shadow: 0 4px 12px rgba(212,175,55,0.3);
    font-weight: 700;
}

.diet-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    min-width: 100px;
    text-align: center;
}

.diet-btn:hover {
    border-color: rgba(255,255,255,0.6);
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
}

.diet-btn.active {
    border-color: currentColor;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-weight: 700;
}

.diet-btn.diet-btn-veg.active {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
    box-shadow: 0 4px 12px rgba(34,197,94,0.4);
}

.diet-btn.diet-btn-nonveg.active {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    box-shadow: 0 4px 12px rgba(239,68,68,0.4);
}

/* Menu Container with Category Buttons and Grid */
.menu-container-box {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    margin-top: 20px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Category buttons - sticky header */
.category-buttons-sticky {
    display: flex;
    gap: 6px;
    padding: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.category-btn {
    flex: 0 0 25%;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    text-align: center;
}

.category-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

.category-btn.active {
    background: #D4AF37;
    color: #000;
    border-color: #D4AF37;
    font-weight: 700;
}

/* Mode-specific active category button colors */
body[data-mode="decor"] .category-btn.active {
    background: #e8a0bf;
    color: #fff;
    border-color: #e8a0bf;
}

body[data-mode="stalls"] .category-btn.active {
    background: #D4AF37;
    color: #1a1a05;
    border-color: #D4AF37;
}

body[data-mode="atoz"] .category-btn.active {
    background: #6dd5ed;
    color: #fff;
    border-color: #6dd5ed;
}

/* Menu grid container */
.menu-grid-container {
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Desktop: 4 columns × 2 rows */
@media (min-width: 769px) {
    .menu-grid-container {
        max-height: 500px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
}

/* Mobile: 2 columns × 2 rows */
@media (max-width: 768px) {
    .menu-grid-container {
        max-height: 400px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

.menu-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.menu-card-image {
    width: 100%;
    aspect-ratio: 1/1;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 2rem;
}

.menu-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.menu-card-count {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* Mobile: Standard/Customize 70% + Diet buttons 30% */
@media (max-width: 768px) {
    .menu-controls-wrapper {
        display: flex;
        gap: 8px;
        margin: 15px auto;
        padding: 10px;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        max-width: 100%;
        width: 100%;
    }
    
    .menu-tab-group {
        display: none;
    }
    
    /* Standard/Customize buttons - 70% total width (35% each) */
    .menu-tab {
        flex: 3.5;
        padding: 8px 10px;
        font-size: 0.75rem;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 16px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Inter', sans-serif;
    }
    
    .menu-tab:hover {
        transform: translateY(-2px);
    }
    
    /* Diet buttons - 30% total width (15% each) */
    .diet-btn {
        flex: 1.5;
        padding: 8px 10px;
        font-size: 0.75rem;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 16px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Inter', sans-serif;
    }
    
    .diet-btn:hover {
        transform: translateY(-2px);
    }
}

/* Category Buttons & Menu Scroll Box Enhancements */

/* Container wrapper for category buttons */
.cat-tabs-container {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
    align-items: center;
}

/* Base button sizing — min 100px, grow with content */
.cat-tabs-container .cat-tab {
    min-width: auto;
    max-width: fit-content;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0;
}

/* Desktop Styles */
@media (min-width: 769px) {
    /* Till 4 buttons: display in same line, centered */
    .cat-tabs-container.desktop-grid-4 {
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: visible;
    }
    .cat-tabs-container.desktop-grid-4 .cat-tab {
        flex: 0 0 auto !important;
        min-width: 100px !important;
        max-width: none !important;
        box-sizing: border-box;
        text-align: center;
    }
    
    /* More than 4 buttons: slide sideways */
    .cat-tabs-container.desktop-slide {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-bottom: 16px;
        scrollbar-width: thin;
        scrollbar-color: rgba(212,175,55,0.3) transparent;
    }
    .cat-tabs-container.desktop-slide::-webkit-scrollbar {
        height: 4px;
    }
    .cat-tabs-container.desktop-slide::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
    }
    .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb {
        background: rgba(212,175,55,0.4);
        border-radius: 4px;
    }
    .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb:hover {
        background: rgba(212,175,55,0.6);
    }
    .cat-tabs-container.desktop-slide .cat-tab {
        flex: 0 0 auto !important;
        min-width: 100px !important;
        white-space: nowrap;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    /* Reduce button padding/font on mobile so more buttons are visible */
    .cat-tabs-container .cat-tab {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        min-width: auto !important;
        max-width: fit-content !important;
        white-space: nowrap;
        line-height: 1.2;
    }

    /* Till 2 buttons: display in same line, auto sizing centered */
    .cat-tabs-container.mobile-grid-2 {
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: visible;
    }
    .cat-tabs-container.mobile-grid-2 .cat-tab {
        flex: 0 1 auto !important;
        text-align: center;
        box-sizing: border-box;
        min-width: auto;
        max-width: fit-content !important;
        white-space: nowrap;
    }
    
    /* More than 2 buttons: slide sideways, VISIBLE scrollbar */
    .cat-tabs-container.mobile-slide {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-bottom: 16px;
        scrollbar-width: thin;
        scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
        -ms-overflow-style: auto;
    }
    .cat-tabs-container.mobile-slide::-webkit-scrollbar {
        height: 6px;
        display: block;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .cat-tabs-container .cat-tab {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
    }
    .cat-tabs-container.mobile-grid-2 .cat-tab {
        min-width: 70px;
    }
}

/* ============================================
   MODE-SPECIFIC SCROLLBAR COLORS
   ============================================ */

/* CATERER MODE - Gold scrollbar (default) */
body[data-mode="caterer"] .cat-tabs-container.desktop-slide {
    scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
}
body[data-mode="caterer"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4AF37, #c6952b) !important;
}
body[data-mode="caterer"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb:hover {
    background: #D4AF37 !important;
}

/* DECOR MODE - Pink scrollbar */
body[data-mode="decor"] .cat-tabs-container.desktop-slide {
    scrollbar-color: rgba(232, 160, 191, 0.5) transparent;
}
body[data-mode="decor"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e8a0bf, #d97ea8) !important;
}
body[data-mode="decor"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb:hover {
    background: #e8a0bf !important;
}

/* STALLS MODE - Orange/Red scrollbar */
body[data-mode="stalls"] .cat-tabs-container.desktop-slide {
    scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
}
body[data-mode="stalls"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4AF37, #c6952b) !important;
}
body[data-mode="stalls"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb:hover {
    background: #D4AF37 !important;
}

/* A-Z MODE - Cyan scrollbar */
body[data-mode="atoz"] .cat-tabs-container.desktop-slide {
    scrollbar-color: rgba(109, 213, 237, 0.5) transparent;
}
body[data-mode="atoz"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6dd5ed, #5db8d1) !important;
}
body[data-mode="atoz"] .cat-tabs-container.desktop-slide::-webkit-scrollbar-thumb:hover {
    background: #6dd5ed !important;
}

/* ============================================
   MOBILE MODE-SPECIFIC SCROLLBAR COLORS
   ============================================ */

/* MOBILE: DECOR MODE - Pink scrollbar */
@media (max-width: 768px) {
    body[data-mode="decor"] .cat-tabs-container.mobile-slide {
        scrollbar-color: rgba(232, 160, 191, 0.5) transparent;
    }
    body[data-mode="decor"] .cat-tabs-container.mobile-slide::-webkit-scrollbar-thumb {
        background: #e8a0bf !important;
    }
    body[data-mode="decor"] .cat-tabs-container.mobile-slide::-webkit-scrollbar-thumb:hover {
        background: #f0b8d0 !important;
    }

    /* MOBILE: STALLS MODE - Gold scrollbar */
    body[data-mode="stalls"] .cat-tabs-container.mobile-slide {
        scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
    }
    body[data-mode="stalls"] .cat-tabs-container.mobile-slide::-webkit-scrollbar-thumb {
        background: #D4AF37 !important;
    }
    body[data-mode="stalls"] .cat-tabs-container.mobile-slide::-webkit-scrollbar-thumb:hover {
        background: #c6952b !important;
    }

    /* MOBILE: A-Z MODE - Cyan scrollbar */
    body[data-mode="atoz"] .cat-tabs-container.mobile-slide {
        scrollbar-color: rgba(109, 213, 237, 0.5) transparent;
    }
    body[data-mode="atoz"] .cat-tabs-container.mobile-slide::-webkit-scrollbar-thumb {
        background: #6dd5ed !important;
    }
    body[data-mode="atoz"] .cat-tabs-container.mobile-slide::-webkit-scrollbar-thumb:hover {
        background: #88dff5 !important;
    }
}

/* Scroll box container */
.menu-scroll-box {
    overflow-y: auto;
    overscroll-behavior: auto; /* Allow scroll propagation when reached last item */
    padding-right: 4px;
}

/* Stalls items grid layout */
.stalls-items-grid {
    display: grid;
    gap: 12px;
}
@media (min-width: 769px) {
    .stalls-items-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columns on desktop */
    }
    .stalls-items-grid button {
        min-height: 180px;
        word-break: break-word;
        white-space: normal;
        overflow: hidden;
    }
}
@media (max-width: 768px) {
    .stalls-items-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
    }
    .stalls-items-grid button {
        min-height: 160px;
        word-break: break-word;
        white-space: normal;
        overflow: hidden;
    }
}
}

/* Subtle scrollbar for menu-scroll-box on desktop */
.menu-scroll-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.menu-scroll-box::-webkit-scrollbar {
    width: 3px;
}
.menu-scroll-box::-webkit-scrollbar-track {
    background: transparent;
}
.menu-scroll-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}
.menu-scroll-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}

/* A-Z packages grid layout */
.atoz-packages-grid {
    display: grid;
    gap: 18px;
    text-align: left;
}
.atoz-packages-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on both mobile & desktop */
}

/* ============================================
   CATERER MENU SECTION LAYOUT
   ============================================ */

/* Controls row container */
.caterer-controls-row {
    max-width: 960px;
    margin: 0 auto 20px;
    padding: 0 20px;
}

/* Desktop: Standard/Customize = 35% each (70% total), Veg/NonVeg = 15% each (30% total) */
@media (min-width: 769px) {
    .caterer-controls-row .menu-tab {
        flex: 0 1 35% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        text-align: center;
        border-radius: 22px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid rgba(212,175,55,0.4);
        transition: all 0.2s;
        font-family: inherit;
        line-height: 1.2;
    }
    .caterer-controls-row .diet-btn {
        flex: 0 1 15% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 8px 4px !important;
        font-size: 0.72rem !important;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        text-align: center;
        border-radius: 22px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid rgba(212,175,55,0.4);
        transition: all 0.2s;
        font-family: inherit;
        line-height: 1.2;
    }
}

/* Mobile: Standard/Customize = 35% each (70% total), Veg/NonVeg = 15% each (30% total) */
@media (max-width: 768px) {
    .caterer-controls-row > div {
        flex-wrap: nowrap !important;
    }
    .caterer-controls-row .menu-tab {
        flex: 0 1 35% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 6px 3px !important;
        font-size: 0.6rem !important;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        border-radius: 18px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid rgba(212,175,55,0.4);
        transition: all 0.2s;
        font-family: inherit;
        line-height: 1.1;
    }
    .caterer-controls-row .diet-btn {
        flex: 0 1 15% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 6px 2px !important;
        font-size: 0.55rem !important;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        border-radius: 18px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid rgba(212,175,55,0.4);
        transition: all 0.2s;
        font-family: inherit;
        line-height: 1.1;
    }
    /* Mobile subcategory (cat-tab) buttons: 50px min, slide sideways */
    .cat-tabs-container .cat-tab {
        min-width: 50px !important;
        max-width: 130px !important;
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }
}

/* Caterer menu box height */
.caterer-menu-box {
    max-height: 480px;
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 4px;
}

/* Standard mode: 4-col desktop, 2-col mobile card grid */
.caterer-menu-grid {
    display: grid;
    gap: 12px;
}
@media (min-width: 769px) {
    .caterer-menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 768px) {
    .caterer-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Customize mode: pill buttons (flex wrap) */
.caterer-customize-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
}





/* ============================================
   70/30 MENU CONTROL BAR LAYOUT
   Standard/Customize (70%) + Veg/NonVeg (30%)
   ============================================ */

/* Main control bar container - flexbox with 70/30 split */
.menu-control-bar-70-30 {
  display: flex;
  gap: 12px;
  margin: 0 auto 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0 10px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Left section: Standard/Customize buttons (each 1/4 of container) */
.menu-control-left-70 {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.menu-control-left-70 .menu-btn-standard,
.menu-control-left-70 .menu-btn-customize {
  flex: 1 1 auto;
  padding: 12px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1.5px solid;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Right section: Veg/NonVeg diet buttons (each 1/4 of container) */
.menu-control-right-30 {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.menu-control-right-30 .menu-btn-veg,
.menu-control-right-30 .menu-btn-nonveg {
  flex: 1 1 auto;
  padding: 12px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border: 1.5px solid;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ============================================
   SCROLLBAR STYLING - Transparent Gold
   Applied to all menu scroll boxes
   ============================================ */

/* Webkit scrollbars (Chrome, Safari, Edge) */
.menu-scroll-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.menu-scroll-box::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
  margin: 5px 0;
}

.menu-scroll-box::-webkit-scrollbar-thumb {
  background: #d4af3744;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: background 0.2s ease;
}

.menu-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #d4af37aa;
}

/* Firefox scrollbars */
.menu-scroll-box {
  scrollbar-color: #d4af3744 transparent;
  scrollbar-width: thin;
}

/* Category tabs scrollbar */
.menu-category-tabs::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.menu-category-tabs::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
  margin: 5px 0;
}

.menu-category-tabs::-webkit-scrollbar-thumb {
  background: #d4af3744;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.menu-category-tabs::-webkit-scrollbar-thumb:hover {
  background: #d4af37aa;
}

/* Customize items box scrollbar */
.customize-items-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.customize-items-box::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.customize-items-box::-webkit-scrollbar-thumb {
  background: #d4af3744;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.customize-items-box::-webkit-scrollbar-thumb:hover {
  background: #d4af37aa;
}

/* ============================================
   RESPONSIVE: Tablet (769px - 1024px)
   ============================================ */

@media (max-width: 1024px) and (min-width: 769px) {
  .menu-control-bar-70-30 {
    gap: 10px;
    padding: 0 8px;
  }

  .menu-control-left-70 .menu-btn-standard,
  .menu-control-left-70 .menu-btn-customize {
    padding: 10px 10px;
    font-size: 0.8rem;
  }

  .menu-control-right-30 .menu-btn-veg,
  .menu-control-right-30 .menu-btn-nonveg {
    padding: 10px 10px;
    font-size: 0.8rem;
  }
}

/* ============================================
   RESPONSIVE: Mobile (max-width 768px)
   ============================================ */

@media (max-width: 768px) {
  .menu-control-bar-70-30 {
    gap: 6px;
    padding: 0 4px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0 auto 24px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .menu-control-left-70 {
    gap: 4px;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .menu-control-left-70 .menu-btn-standard,
  .menu-control-left-70 .menu-btn-customize {
    flex: 1 1 auto;
    padding: 8px 6px;
    font-size: 0.65rem;
    border-radius: 6px;
    min-width: 0;
  }

  .menu-control-right-30 {
    gap: 4px;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .menu-control-right-30 .menu-btn-veg,
  .menu-control-right-30 .menu-btn-nonveg {
    flex: 1 1 auto;
    padding: 8px 4px;
    font-size: 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 0;
  }
}

/* ============================================
   RESPONSIVE: Extra Small Mobile (max-width 480px)
   ============================================ */

@media (max-width: 480px) {
  .menu-control-bar-70-30 {
    gap: 6px;
    padding: 0 4px;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0 auto 24px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .menu-control-left-70 {
    gap: 4px;
    min-width: 0;
  }

  .menu-control-left-70 .menu-btn-standard,
  .menu-control-left-70 .menu-btn-customize {
    flex: 1 1 auto;
    padding: 8px 6px;
    font-size: 0.7rem;
    border-radius: 5px;
    min-width: 0;
  }

  .menu-control-right-30 {
    gap: 4px;
    min-width: 0;
  }

  .menu-control-right-30 .menu-btn-veg,
  .menu-control-right-30 .menu-btn-nonveg {
    flex: 1 1 auto;
    padding: 8px 5px;
    font-size: 0.65rem;
    border-radius: 5px;
    white-space: nowrap;
    min-width: 0;
  }

  /* Reduce scroll box heights on extra small screens */
  .menu-scroll-box {
    max-height: 300px !important;
  }
}

/* ============================================
   RESPONSIVE: Ultra Small Mobile (max-width 350px)
   ============================================ */

@media (max-width: 350px) {
  .menu-control-bar-70-30 {
    gap: 4px;
    padding: 0 3px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .menu-control-left-70 {
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .menu-control-left-70 .menu-btn-standard,
  .menu-control-left-70 .menu-btn-customize {
    flex: 1 1 auto;
    padding: 6px 4px;
    font-size: 0.6rem;
    border-radius: 4px;
    min-width: 0;
  }

  .menu-control-right-30 {
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .menu-control-right-30 .menu-btn-veg,
  .menu-control-right-30 .menu-btn-nonveg {
    flex: 1 1 auto;
    padding: 6px 3px;
    font-size: 0.55rem;
    border-radius: 4px;
    white-space: nowrap;
    min-width: 0;
  }

  .menu-scroll-box {
    max-height: 250px !important;
  }
}

/* ============================================
   MODE-SPECIFIC ACCENT COLORS FOR BUTTONS
   ============================================ */

/* Caterer Mode (Gold) */
body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-standard.active,
body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-customize.active {
  background: #d4a935;
  border-color: #d4a935;
}

body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-veg.active {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-nonveg.active {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  color: #000;
}

body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-standard:not(.active),
body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-customize:not(.active),
body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-veg:not(.active),
body[data-mode="caterer"] .menu-control-bar-70-30 .menu-btn-nonveg:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 175, 55, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

/* Decor Mode (Pink) */
body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-standard.active,
body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-customize.active {
  background: #e8a0bf;
  border-color: #e8a0bf;
}

body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-veg.active {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-nonveg.active {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  color: #2a0f1e;
}

body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-standard:not(.active),
body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-customize:not(.active),
body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-veg:not(.active),
body[data-mode="decor"] .menu-control-bar-70-30 .menu-btn-nonveg:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 160, 191, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

/* Stalls Mode (Gold) */
body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-standard.active,
body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-customize.active {
  background: #D4AF37;
  border-color: #D4AF37;
  color: #1a1a05;
}

body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-veg.active {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-nonveg.active {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  color: #1a0a05;
}

body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-standard:not(.active),
body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-customize:not(.active),
body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-veg:not(.active),
body[data-mode="stalls"] .menu-control-bar-70-30 .menu-btn-nonveg:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 175, 55, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

/* A-to-Z Mode (Cyan) */
body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-standard.active,
body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-customize.active {
  background: #6dd5ed;
  border-color: #6dd5ed;
}

body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-veg.active {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}

body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-nonveg.active {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  color: #041a20;
}

body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-standard:not(.active),
body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-customize:not(.active),
body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-veg:not(.active),
body[data-mode="atoz"] .menu-control-bar-70-30 .menu-btn-nonveg:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(109, 213, 237, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   HOVER STATES
   ============================================ */

.menu-control-bar-70-30 .menu-btn-standard:hover,
.menu-control-bar-70-30 .menu-btn-customize:hover,
.menu-control-bar-70-30 .menu-btn-veg:hover,
.menu-control-bar-70-30 .menu-btn-nonveg:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   CATEGORY TABS WITH SCROLL TRIGGER AT 5 ITEMS
   ============================================ */

.menu-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  max-width: 100%;
}

/* Trigger horizontal scroll when more than 4 categories */
.menu-category-tabs .cat-tab:nth-child(n+5) {
  display: inline-flex;
  white-space: nowrap;
}

.menu-category-tabs {
  -webkit-overflow-scrolling: touch;
}


/* ============================================
   HORIZONTAL SCROLL CONTAINERS FOR CATEGORIES
   (ONE ROW, SCROLL BEFORE 5TH BUTTON)
   ============================================ */

/* Static container (≤4 buttons, no scroll) */
.cat-pills-static-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

/* Scroll container (>4 buttons, horizontal scroll ONE ROW) */
.cat-pills-scroll-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin-bottom: 24px !important;
  padding: 8px 0 !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  /* Scrollbar colors: mode-specific (see below) */
}

/* Webkit scrollbar styling for scroll containers */
.cat-pills-scroll-container::-webkit-scrollbar {
  height: 6px !important;
}

.cat-pills-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 3px !important;
  margin: 5px 0 !important;
}

.cat-pills-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(10, 15, 43, 0.3) !important;
}

.cat-pills-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.6) !important;
}

/* Mode-specific scrollbar colors for scroll containers */
body[data-mode="caterer"] .cat-pills-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4) !important;
}

body[data-mode="caterer"] .cat-pills-scroll-container {
  scrollbar-color: rgba(212, 175, 55, 0.4) transparent !important;
}

body[data-mode="decor"] .cat-pills-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(232, 160, 191, 0.4) !important;
}

body[data-mode="decor"] .cat-pills-scroll-container {
  scrollbar-color: rgba(232, 160, 191, 0.4) transparent !important;
}

body[data-mode="stalls"] .cat-pills-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4) !important;
}

body[data-mode="stalls"] .cat-pills-scroll-container {
  scrollbar-color: rgba(212, 175, 55, 0.4) transparent !important;
}

body[data-mode="atoz"] .cat-pills-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(109, 213, 237, 0.4) !important;
}

body[data-mode="atoz"] .cat-pills-scroll-container {
  scrollbar-color: rgba(109, 213, 237, 0.4) transparent !important;
}

/* Mobile adjustments for scroll containers */
@media (max-width: 768px) {
  .cat-pills-scroll-container {
    gap: 6px !important;
    padding: 6px 0 !important;
    margin-bottom: 20px !important;
  }

  .cat-pills-scroll-container::-webkit-scrollbar {
    height: 5px !important;
  }

  .cat-pills-static-container {
    gap: 6px !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 480px) {
  .cat-pills-scroll-container {
    gap: 4px !important;
    padding: 4px 0 !important;
    margin-bottom: 16px !important;
  }

  .cat-pills-scroll-container::-webkit-scrollbar {
    height: 4px !important;
  }

  .cat-pills-static-container {
    gap: 4px !important;
    margin-bottom: 16px !important;
  }
}

/* ============================================
   MENU SCROLL BOX - INTERNAL SCROLL THEN PAGE SCROLL
   ============================================ */

.menu-scroll-box {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

/* When scroll reaches end, page continues scrolling */
.menu-scroll-box.scroll-end {
  overflow-y: visible !important;
}

/* Webkit scrollbar for menu boxes */
.menu-scroll-box::-webkit-scrollbar {
  width: 6px !important;
}

.menu-scroll-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 3px !important;
}

.menu-scroll-box::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4) !important;
  border-radius: 3px !important;
}

.menu-scroll-box::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.6) !important;
}

/* Mode-specific scrollbar colors for menu boxes */
body[data-mode="caterer"] .menu-scroll-box {
  scrollbar-color: rgba(212, 175, 55, 0.4) transparent !important;
}

body[data-mode="stalls"] .menu-scroll-box {
  scrollbar-color: rgba(212, 175, 55, 0.4) transparent !important;
}

body[data-mode="stalls"] .menu-scroll-box::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4) !important;
}

body[data-mode="atoz"] .menu-scroll-box {
  scrollbar-color: rgba(109, 213, 237, 0.4) transparent !important;
}

body[data-mode="atoz"] .menu-scroll-box::-webkit-scrollbar-thumb {
  background: rgba(109, 213, 237, 0.4) !important;
}


/* ============================================
   MOBILE CATEGORY BUTTONS - MIN 25% SCREEN WIDTH
   ============================================ */

@media (max-width: 768px) {
  /* Category buttons on mobile: min 25vw, max flexible */
  .cat-pills-scroll-container .cat-tab,
  .cat-pills-static-container .cat-tab {
    min-width: 25vw;
    max-width: fit-content;
    padding: 8px 12px;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Ensure active button styling is visible on mobile */
  .cat-pills-scroll-container .cat-tab.active,
  .cat-pills-static-container .cat-tab.active {
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* Mode-specific active colors on mobile */
  body[data-mode="caterer"] .cat-tab.active {
    background: #d4a935 !important;
    border-color: #d4a935 !important;
    color: #000 !important;
  }
  
  body[data-mode="decor"] .cat-tab.active {
    background: #e8a0bf !important;
    border-color: #e8a0bf !important;
    color: #fff !important;
  }
  
  body[data-mode="stalls"] .cat-tab.active {
    background: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #1a1a05 !important;
  }
  
  body[data-mode="atoz"] .cat-tab.active {
    background: #6dd5ed !important;
    border-color: #6dd5ed !important;
    color: #6dd5ed !important;
  }
}

@media (max-width: 480px) {
  .cat-pills-scroll-container .cat-tab,
  .cat-pills-static-container .cat-tab {
    min-width: 25vw;
    padding: 7px 10px;
    font-size: 0.7rem;
  }
}