@import url('./assets/css/google_fonts_1.css');

:root {
  /* Colors */
  --color-base: #2b0d0d;
  --color-surface: #3d1212;
  --color-surface-dim: #381010;
  --color-surface-bright: #4a1515;
  --color-primary: #af0202;
  --color-secondary: #FF5E00;
  --color-tertiary: #78B13F;
  --color-text-main: #F9F5F0;
  /* Paper White */
  --color-text-muted: #e5bdb7;

  /* Typography */
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-base);
  color: var(--color-text-main);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--font-heading);
}

/* Hero Section */
.hero-section {
  background: radial-gradient(ellipse at 60% 40%, #4a1515 0%, #300a0a 40%, #1c0505 100%);
  position: relative;
  overflow: hidden;
  border-radius: 2.5rem;
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(80, 60, 120, 0.25) 0%, transparent 60%);
  pointer-events: none;
}

/* 3D Puffy Hero Heading */
.hero-heading {
  font-family: var(--font-heading);
  font-weight: 1000;
  color: #ffffff;
  text-shadow:
    0px 1px 0px #d0d0d0,
    0px 2px 0px #c0c0c0,
    0px 3px 0px #b0b0b0,
    0px 4px 0px #a8a8a8,
    0px 5px 0px #989898,
    0px 6px 1px rgba(0, 0, 0, 0.3),
    0px 0px 5px rgba(0, 0, 0, 0.2),
    0px 1px 3px rgba(0, 0, 0, 0.3),
    0px 3px 5px rgba(0, 0, 0, 0.25),
    0px 5px 10px rgba(0, 0, 0, 0.25),
    0px 10px 10px rgba(0, 0, 0, 0.2),
    0px 20px 20px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

/* Glassmorphism / Surface Effects */
.glass-panel {
  background: rgba(42, 42, 42, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.glass-card {
  background: linear-gradient(145deg, #3d1212, #4a1515);
  box-shadow: 8px 8px 16px #1c0505, -8px -8px 16px #300a0a;
  border-radius: 1.5rem;
}

/* Pedestal Effect */
.pedestal {
  background: radial-gradient(circle at 50% 0%, #ffdfba 0%, #d4a373 100%);
  border-radius: 1rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.5);
  position: relative;
}

.pedestal::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 10%;
  right: 10%;
  height: 20px;
  background: inherit;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  filter: brightness(0.6);
}

/* Neumorphic UI for Light Section */
.light-section {
  background-color: #f7eedf;
  /* Soft cream */
  color: #3D1E16;
  /* Earth brown */
}

.neumorphic-tab {
  background: #f7eedf;
  box-shadow: 5px 5px 10px #d4cbbd, -5px -5px 10px #ffffff;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.neumorphic-tab.active {
  background: #f7eedf;
  box-shadow: inset 5px 5px 10px #d4cbbd, inset -5px -5px 10px #ffffff;
  color: var(--color-primary);
}

.neumorphic-card {
  background: #f7eedf;
  box-shadow: 10px 10px 20px #d4cbbd, -10px -10px 20px #ffffff;
  border-radius: 1.5rem;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #ff5e5e, #af0202);
  color: white;
  border-radius: 9999px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(255, 40, 40, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 100, 100, 0.5);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ff7070, #c90000);
  box-shadow: 0 15px 35px rgba(255, 40, 40, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* Utilities */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

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

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

/* Glow Effects */
.glow-effect {
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--color-secondary);
  filter: blur(80px);
  opacity: 0.3;
  z-index: 0;
  border-radius: 50%;
}

/* Tiffin float animation */
@keyframes tiffinFloat {
  0% {
    transform: translateY(0px) rotate(-2deg);
  }

  25% {
    transform: translateY(-14px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(2deg);
  }

  75% {
    transform: translateY(-10px) rotate(0deg);
  }

  100% {
    transform: translateY(0px) rotate(-2deg);
  }
}

/* Category cards – match reference dark style */
.glass-card {
  background: linear-gradient(145deg, #4a1515, #3d1212);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Hero heading 3D text – override Tailwind size utilities to keep shadows */
.hero-heading.text-6xl {
  font-size: 3.75rem;
}

.hero-heading.text-8xl {
  font-size: 6rem;
}

/* Commerce interface */
.commerce-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 2, 2, 0.74);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.mobile-cart-button {
  display: grid;
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 95;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5e5e, #af0202);
  color: #fff;
  box-shadow: 0 10px 25px rgba(175, 2, 2, .6), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-cart-button:active {
  transform: scale(0.92);
}

.mobile-cart-button span {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f7eedf;
  color: #8e1515;
  border: 2px solid #2b0d0d;
  font-size: 10px;
  font-weight: 900;
}

.commerce-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer,
.commerce-modal {
  position: fixed;
  z-index: 210;
  background: linear-gradient(145deg, #4a1515, #2b0d0d);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .72), inset 0 1px 2px rgba(255, 255, 255, .06);
  visibility: hidden;
  transition: transform .3s ease, opacity .25s ease, visibility .3s ease;
}

.cart-drawer {
  top: 0;
  right: 0;
  width: min(430px, 100%);
  height: 100dvh;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
}

.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.commerce-modal {
  top: 50%;
  left: 50%;
  width: min(720px, calc(100% - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  padding: 30px;
  border-radius: 28px;
  overflow-y: auto;
  opacity: 0;
  transform: translate(-50%, -46%) scale(.97);
}

.commerce-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.compact-modal {
  width: min(530px, calc(100% - 28px));
}

.commerce-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.commerce-kicker {
  color: #ff6b6b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.icon-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  color: #ff8989;
  background: #2b0d0d;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .5), 0 1px 1px rgba(255, 255, 255, .08);
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.cart-items {
  flex: 1;
  min-height: 130px;
  overflow-y: auto;
  padding: 18px 2px;
}

.cart-empty {
  height: 100%;
  min-height: 260px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #a98585;
}

.cart-line {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cart-line-emoji {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #2b0d0d;
  font-size: 26px;
}

.quantity-control {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  color: #fff;
}

.quantity-control button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #ff8989;
  font-weight: 900;
}

.remove-cart-item {
  display: block;
  color: #936f6f;
  font-size: 11px;
  margin-top: 7px;
}

.cart-summary {
  padding-top: 20px;
  box-shadow: 0 -18px 28px rgba(43, 13, 13, .88);
}

.commerce-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-top: 24px;
}

.commerce-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #d8baba;
  font-size: 13px;
  font-weight: 700;
}

.commerce-form input,
.commerce-form textarea,
.commerce-form select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: #2b0d0d;
  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, .38);
  color: #fff;
  padding: 13px 15px;
  outline: none;
}

.commerce-form input:focus,
.commerce-form textarea:focus,
.commerce-form select:focus {
  border-color: rgba(255, 107, 107, .7);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .12), inset 3px 3px 7px rgba(0, 0, 0, .38);
}

.commerce-form input[readonly] {
  color: #78B13F;
}

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

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

.form-error {
  min-height: 20px;
  color: #ff8989;
  font-size: 13px;
}

.tracking-result {
  margin-top: 24px;
  padding: 20px;
  border-radius: 18px;
  background: #2b0d0d;
  color: #c9aaaa;
}

.status-pill {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(120, 177, 63, .15);
  color: #9cdd5a;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.confirmation-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(120, 177, 63, .15);
  color: #9cdd5a;
  border: 1px solid rgba(156, 221, 90, .25);
  font-size: 36px;
  font-weight: 900;
}

.commerce-toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  z-index: 300;
  max-width: calc(100% - 30px);
  padding: 12px 18px;
  border-radius: 999px;
  background: #f7eedf;
  color: #4a1515;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: all .25s ease;
}

.commerce-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.menu-loading,
.menu-error {
  min-height: 320px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #a98585;
}

body.commerce-locked {
  overflow: hidden;
}

@media (max-width: 640px) {
  .cart-drawer {
    padding: 22px 18px;
  }

  .commerce-modal {
    padding: 24px 18px;
    border-radius: 22px;
  }

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

  .form-full {
    grid-column: auto;
  }
}

/* ============================================================
   Styles migrated from index.php inline <style> block
   ============================================================ */
html {
  scroll-behavior: smooth;
}

:root {
  --surface-bg: #2b0d0d;
  --container-bg: #3d1212;
  --primary-red: #af0202;
  --flame-orange: #FF5E00;
  --text-white: #F9F5F0;
}

body {
  background-color: var(--surface-bg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: var(--text-white);
}

.font-nunito-black {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
}

.font-nunito-bold {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.font-nunito-extrabold {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}

/* ৩ডি টেক্সট ইফেক্ট */
.text-3d {
  color: #ffffff;
  text-shadow:
    0 1px 0 #e5e5e5,
    0 2px 0 #d4d4d4,
    0 3px 0 #c2c2c2,
    0 4px 0 #b0b0b0,
    0 5px 0 #9e9e9e,
    0 6px 1px rgba(0, 0, 0, .2),
    0 0 5px rgba(0, 0, 0, .1),
    0 1px 3px rgba(0, 0, 0, .4),
    0 3px 5px rgba(0, 0, 0, .3),
    0 5px 10px rgba(0, 0, 0, .3),
    0 10px 10px rgba(0, 0, 0, .2);
}

@media (max-width: 768px) {
  .text-3d {
    text-shadow:
      0 1px 0 #dedede,
      0 2px 0 #b0b0b0,
      0 3px 2px rgba(0, 0, 0, .4),
      0 6px 14px rgba(0, 0, 0, .35);
  }
}

/* নেভিগেশন বারের কাস্টম শ্যাডো */
.nav-pill {
  background: #3d1212;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    0px 15px 35px rgba(0, 0, 0, 0.6),
    0px 5px 15px rgba(0, 0, 0, 0.4),
    inset 0px 1.5px 1px rgba(255, 180, 180, 0.05),
    inset 0px -1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
}

.nav-item {
  color: #b5b5b5;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 9999px;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  white-space: nowrap;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* এক্টিভ 'Pressed' ইনসেট স্টাইল */
.nav-item-active {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  background: #2b0d0d;
  color: #ff6b6b;
  padding: 8px 22px;
  border-radius: 9999px;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.6),
    inset -1px -1px 3px rgba(255, 107, 107, 0.15),
    0px 1px 1px rgba(255, 180, 180, 0.05);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* 3D Clay Hero Buttons — Theme Aligned */
.btn-hero-primary {
  background: linear-gradient(135deg, #ff5e5e, #af0202);
  border-radius: 9999px;
  box-shadow:
    0 10px 25px rgba(255, 40, 40, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 100, 100, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
}

.btn-hero-primary:hover {
  background: linear-gradient(135deg, #ff7070, #c90000);
  box-shadow:
    0 15px 35px rgba(255, 40, 40, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn-hero-primary:active {
  box-shadow:
    0 5px 15px rgba(255, 40, 40, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.btn-hero-secondary {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: #d1d1d1;
  cursor: pointer;
}

.btn-hero-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
  color: #ffffff;
}

.btn-hero-secondary:active {
  background-color: rgba(255, 255, 255, 0.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

/* ভাসমান এনিমেশন */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(3deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes float-reverse {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(15px) rotate(-3deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes shadow-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(0.8);
    opacity: 0.2;
  }

  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-reverse 7s ease-in-out infinite;
}

.animate-shadow {
  animation: shadow-pulse 6s ease-in-out infinite;
}

/* মেটালিক টিফিন বক্সের জন্য গ্রেডিয়েন্ট */
.gold-metal {
  background: linear-gradient(90deg, #5c4210 0%, #b8912f 20%, #fdf0a6 50%, #b8912f 80%, #5c4210 100%);
  box-shadow: inset 0px 5px 10px rgba(255, 255, 255, 0.3), inset 0px -5px 15px rgba(0, 0, 0, 0.6);
}

.silver-metal {
  background: linear-gradient(90deg, #333 0%, #999 20%, #eee 50%, #999 80%, #333 100%);
  box-shadow: inset 0px 5px 10px rgba(255, 255, 255, 0.4), inset 0px -5px 15px rgba(0, 0, 0, 0.5);
}

/* (duplicate .text-3d removed — defined above) */

/* Weekly Menu Red 3D Text Effect */
.title-3d-red {
  color: #991616;
  text-shadow:
    0 1px 0 #851212,
    0 2px 0 #730e0e,
    0 3px 0 #610b0b,
    0 4px 0 #4f0808,
    0 5px 0 #3b0505,
    0 6px 1px rgba(0, 0, 0, 0.5),
    0 0 5px rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.6),
    0 10px 15px rgba(0, 0, 0, 0.7);
  -webkit-text-stroke: 1.5px #e33b3b;
  letter-spacing: 1px;
}

/* Dashboard Outer Frame (Like Reference Image) */
.dashboard-container {
  background: radial-gradient(ellipse at 50% 30%, #4a1515 0%, #3d1212 55%, #290a0a 100%);
  border-radius: 1.5rem;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.6),
    inset 1px 1px 2px rgba(255, 180, 180, 0.05),
    inset -1px -1px 2px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 180, 180, 0.05);
  padding: 0.75rem 0.5rem 1.5rem;
  position: relative;
}

@media (min-width: 640px) {
  .dashboard-container {
    padding: 1rem 1.5rem;
    border-radius: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .dashboard-container {
    padding: 1.5rem 2rem;
    border-radius: 3rem;
  }
}

/* --- সফট 3D Claymorphism ডিজাইন --- */
.clay-card {
  background: #4a1515;
  border-radius: 36px;
  box-shadow:
    20px 20px 40px rgba(0, 0, 0, 0.7),
    -10px -10px 20px rgba(255, 180, 180, 0.05),
    inset 2px 2px 5px rgba(255, 180, 180, 0.04);
  transition: transform 0.3s ease;
  padding: 2.5rem;
  border: 1px solid rgba(255, 180, 180, 0.03);
}

.clay-tab {
  background: #4a1515;
  border-radius: 20px;
  color: #eaa;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 18px;
  box-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.6),
    -5px -5px 12px rgba(255, 180, 180, 0.05),
    inset 1px 1px 2px rgba(255, 180, 180, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: center;
}

@media (min-width: 768px) {
  .clay-tab {
    font-size: 16px;
    padding: 14px 28px;
  }
}

.clay-tab:hover {
  color: #ddd;
  transform: translateY(-2px);
}

.clay-tab-active {
  background: #3d1212;
  color: #ff6b6b;
  transform: scale(1.1) translateY(-2px);
  box-shadow:
    12px 12px 24px rgba(0, 0, 0, 0.7),
    -8px -8px 16px rgba(255, 180, 180, 0.05),
    inset 2px 2px 4px rgba(255, 180, 180, 0.08);
  z-index: 10;
}

@media (min-width: 768px) {
  .clay-tab-active {
    transform: scale(1.15) translateY(-2px);
  }
}

/* --- Service Toggle Switch --- */
.service-toggle-container {
  background: rgba(43, 13, 13, 0.9);
  border-radius: 9999px;
  padding: 5px;
  display: inline-flex;
  position: relative;
  box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 440px;
}

@media (min-width: 640px) {
  .service-toggle-container {
    padding: 8px;
    margin-bottom: 2rem;
    max-width: 500px;
  }
}

.service-toggle-btn {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  border-radius: 9999px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #b5b5b5;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

@media (min-width: 640px) {
  .service-toggle-btn {
    padding: 14px 20px;
    font-size: 16px;
  }
}

.service-toggle-btn.active {
  color: #fff;
}

.service-toggle-slider {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: calc(50% - 8px);
  background: linear-gradient(135deg, #ff5e5e, #af0202);
  border-radius: 9999px;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 5px 15px rgba(175, 2, 2, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* --- Catering Menu Specifics --- */
.catering-filter-btn {
  background: #2b0d0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d1d1d1;
  border-radius: 9999px;
  padding: 8px 20px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
}

.catering-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.catering-filter-btn.active {
  background: #FF5E00;
  color: #fff;
  border-color: #FF5E00;
  box-shadow: 0 4px 10px rgba(255, 94, 0, 0.3);
}

.qty-control {
  display: flex;
  align-items: center;
  background: #2b0d0d;
  border-radius: 9999px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.qty-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3d1212;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.qty-btn:hover {
  background: #af0202;
}

.qty-input {
  width: 40px;
  text-align: center;
  background: transparent;
  color: #fff;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  outline: none;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Success Stories --- */
.testimonial-card {
  background: #3d1212;
  border: 1px solid rgba(255, 180, 180, 0.05);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 1px 1px 2px rgba(255, 180, 180, 0.05);
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}


#dayTabsContainer {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.clay-btn-red {
  background: linear-gradient(135deg, #ff5e5e, #af0202);
  color: white;
  border-radius: 9999px;
  padding: 12px 32px;
  box-shadow:
    0 10px 25px rgba(255, 40, 40, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 100, 100, 0.5);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}

.clay-btn-red:hover {
  background: linear-gradient(135deg, #ff7070, #c90000);
  box-shadow:
    0 15px 35px rgba(255, 40, 40, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.clay-btn-red:active {
  box-shadow:
    0 5px 15px rgba(255, 40, 40, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(1px) scale(0.98);
}

.clay-btn-yellow {
  background: linear-gradient(135deg, #FFB347, #FF5E00);
  color: white;
  border-radius: 9999px;
  padding: 12px 32px;
  box-shadow:
    0 10px 25px rgba(255, 94, 0, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 160, 60, 0.5);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}

.clay-btn-yellow:hover {
  background: linear-gradient(135deg, #FFC66D, #FF7020);
  box-shadow:
    0 15px 35px rgba(255, 94, 0, 0.65),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.clay-btn-yellow:active {
  box-shadow:
    0 5px 15px rgba(255, 94, 0, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(1px) scale(0.98);
}

.plate-container {
  background: #3d1212;
  box-shadow:
    inset 8px 8px 16px rgba(0, 0, 0, 0.6),
    inset -8px -8px 16px rgba(255, 180, 180, 0.05),
    0 6px 15px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 180, 180, 0.03);
  border-radius: 50%;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.menu-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ============================================ */
/* Scroll Reveal Animations                     */
/* ============================================ */

/* Base state — hidden before reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stagger delay helpers */
.delay-100 {
  transition-delay: 0.1s !important;
}

.delay-200 {
  transition-delay: 0.2s !important;
}

.delay-300 {
  transition-delay: 0.3s !important;
}

.delay-400 {
  transition-delay: 0.4s !important;
}

.delay-500 {
  transition-delay: 0.5s !important;
}

/* Revealed state — triggered by JS */
.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Global Sticky Navbar Style --- */
#mainNavbar {
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

#mainNavbar.scrolled {
  background: rgba(43, 13, 13, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

#navbarInner {
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), py 0.4s ease;
}

#mainNavbar.scrolled #navbarInner {
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (min-width: 1024px) {
  #mainNavbar.scrolled #navbarInner {
    padding-left: 50px;
    padding-right: 50px;
  }
}

#navLogo {
  transition: transform 0.4s ease;
}

#mainNavbar.scrolled #navLogo {
  transform: scale(0.9);
}

/* --- Mobile Menu Theme Custom Styling --- */
#mobileMenu {
  background: linear-gradient(180deg, rgba(61, 18, 18, 0.98) 0%, rgba(43, 13, 13, 0.99) 100%) !important;
}

.mobile-menu-active {
  background: #2b0d0d;
  color: #ff6b6b !important;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.6),
    inset -1px -1px 3px rgba(255, 107, 107, 0.15),
    0px 1px 1px rgba(255, 180, 180, 0.05);
}

.mobile-menu-item {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #b5b5b5;
  padding: 12px 36px;
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  width: 80%;
  max-width: 280px;
  text-decoration: none;
}

.mobile-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: translateY(-2px);
}

/* --- Marquee Animation for Top Bar --- */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: inline-block;
  animation: marquee 20s linear infinite;
}