/* Custom Styles and Design System for Fountain Shake Bar Udaipur */
:root {
  --color-primary: #D97706; /* Rich Amber Gold */
  --color-primary-dark: #B45309;
  --color-accent: #EF4444; /* Warm Berry Red */
  --color-coffee-dark: #120A07; /* Roasted Espresso */
  --color-coffee-card: #1E120D;
  --color-coffee-border: #38241A;
  --color-cream: #FAF5EE;
  --color-cream-muted: #D1C7BD;
  --color-mint: #10B981;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #120A07;
}
::-webkit-scrollbar-thumb {
  background: #38241A;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D97706;
}

/* Glassmorphic elements */
.glass-panel {
  background: rgba(30, 18, 13, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(217, 119, 6, 0.15);
}

.glass-panel-light {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dropdown {
  background: rgba(20, 11, 7, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

/* Glow effects */
.glow-amber {
  box-shadow: 0 0 25px -5px rgba(217, 119, 6, 0.4);
}
.glow-whatsapp {
  box-shadow: 0 0 20px -2px rgba(37, 211, 102, 0.5);
}
.glow-card:hover {
  box-shadow: 0 10px 30px -10px rgba(217, 119, 6, 0.3);
}

/* Text Gradients */
.text-gradient-amber {
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #D97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cream {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF5EE 60%, #E5DACF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ticker / Marquee Animation */
@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}

.ticker-move {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
}

.ticker-move:hover {
  animation-play-state: paused;
}

/* Pulse keyframes */
@keyframes subtle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

.animate-float-delayed {
  animation: subtle-float 4s ease-in-out 2s infinite;
}

/* Custom Card Hover */
.menu-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-card:hover {
  transform: translateY(-6px);
  border-color: rgba(217, 119, 6, 0.4);
}

/* Badge colors */
.badge-gold {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #120A07;
  font-weight: 700;
}
.badge-danger {
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  color: #FFFFFF;
  font-weight: 700;
}
.badge-mint {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  font-weight: 700;
}
.badge-accent {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #FFFFFF;
  font-weight: 700;
}

/* Background grid styling */
.bg-radial-grid {
  background-image: radial-gradient(rgba(217, 119, 6, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Smooth Category Pill transitions */
.tab-btn {
  transition: all 0.25s ease;
}
.tab-btn.active {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #120A07;
  font-weight: 700;
  box-shadow: 0 4px 15px -3px rgba(217, 119, 6, 0.4);
}

/* Mobile Bottom Navigation Offset */
@media (max-width: 768px) {
  body {
    padding-bottom: 74px;
  }
}