/* =========================================================
   MAHARAJA — Menu Page & Category Slider
   ========================================================= */

.cat-pill {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-pill:hover {
  transform: translateY(-2px);
}

.active-cat-pill {
  background-color: #2A0E3D !important;
  color: #F2C230 !important;
  border-color: #F2C230 !important;
  box-shadow: 0 4px 14px rgba(42, 14, 61, 0.35) !important;
  transform: scale(1.05) !important;
}

.home-menu-tab {
  background-color: #FFFFFF !important;
  color: #221421 !important;
  border: 1px solid #E4D9C7 !important;
  transition: all 0.25s ease-in-out;
}

.home-menu-tab:hover {
  color: #C22A9E !important;
  border-color: #C22A9E !important;
  background-color: #FDF8F0 !important;
}

.home-menu-tab.is-active,
.home-menu-tab.active {
  background-color: #C22A9E !important;
  color: #FFFFFF !important;
  border-color: #C22A9E !important;
  box-shadow: 0 4px 14px rgba(194, 42, 158, 0.35) !important;
}

.dish-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.dish-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   MAHARAJA — High-Performance Sticky Category & Filter Bar
   ========================================================= */
#menu-filter-bar {
  position: sticky !important;
  top: var(--header-height, 78px) !important;
  z-index: 45 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(228, 217, 199, 0.9) !important;
  box-shadow: 0 4px 18px rgba(34, 20, 33, 0.06) !important;
  transition: top 0.2s ease, box-shadow 0.25s ease;
  will-change: top;
}

.category-section-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  position: relative !important;
}

.category-group-section {
  scroll-margin-top: 210px !important;
}

@keyframes fadeInFast {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeInFast 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================================
   DARK MODE OVERRIDES (MENU PAGE & HOMEPAGE DISH TABS)
   ========================================================= */
[data-theme="dark"] .home-menu-tab {
  background-color: #1A0D2A !important;
  color: #F3EDE2 !important;
  border-color: rgba(242, 194, 48, 0.22) !important;
}
[data-theme="dark"] .home-menu-tab:hover {
  background-color: #241238 !important;
  color: #F2C230 !important;
  border-color: #F2C230 !important;
}
[data-theme="dark"] .home-menu-tab.is-active,
[data-theme="dark"] .home-menu-tab.active {
  background-color: #C22A9E !important;
  color: #FFFFFF !important;
  border-color: #C22A9E !important;
  box-shadow: 0 4px 14px rgba(194, 42, 158, 0.45) !important;
}
[data-theme="dark"] #menu-filter-bar {
  background: rgba(20, 9, 32, 0.96) !important;
  border-bottom: 1px solid rgba(242, 194, 48, 0.20) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .cat-pill {
  background: #1A0D2A;
  color: #F3EDE2;
  border: 1px solid rgba(242, 194, 48, 0.2);
}
[data-theme="dark"] .cat-pill:hover {
  color: #F2C230;
  border-color: #F2C230;
}
[data-theme="dark"] .active-cat-pill {
  background-color: #F2C230 !important;
  color: #1A0828 !important;
  border-color: #F2C230 !important;
  box-shadow: 0 4px 14px rgba(242, 194, 48, 0.35) !important;
}

[data-theme="dark"] .diet-btn:not(.bg-brand-magenta) {
  background-color: #1A0D2A !important;
  color: #F3EDE2 !important;
  border-color: rgba(242, 194, 48, 0.22) !important;
}
[data-theme="dark"] .diet-btn:not(.bg-brand-magenta):hover {
  background-color: #241238 !important;
  color: #F2C230 !important;
  border-color: #F2C230 !important;
}

[data-theme="dark"] #spice-filter {
  background-color: #1C0D2E !important;
  color: #F3EDE2 !important;
  border-color: rgba(242, 194, 48, 0.25) !important;
}

[data-theme="dark"] #categories-drawer {
  background-color: #140920 !important;
  border-color: rgba(242, 194, 48, 0.35) !important;
}