/* ===== Global Typography ===== */
body, input, select, textarea, button {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3 {
  font-family: 'Nunito', sans-serif;
}

/* ===== Gradient Text ===== */
.text-gradient {
  background: linear-gradient(135deg, #d97b1f 0%, #e8913a 40%, #d97b1f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Background ===== */
.bg-body {
  background: url('/images/bg.png') center center / cover no-repeat fixed;
  background-color: #fff7ed;
}
.bg-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(255, 247, 237, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
}

/* ===== Floating Food Particles ===== */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  animation: particleFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes particleFloat {
  0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
  5% { opacity: 0.25; }
  50% { opacity: 0.18; }
  95% { opacity: 0.08; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* ===== Glassmorphism Cards ===== */
main .bg-white {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 24px rgba(217, 123, 31, 0.06),
    0 1px 2px rgba(217, 123, 31, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
main .bg-white:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 32px rgba(217, 123, 31, 0.1),
    0 2px 4px rgba(217, 123, 31, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Glassmorphism for modals */
.fixed .bg-white {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Glassmorphism for tabs/selectors */
main .bg-gray-100,
main .bg-gray-50 {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ===== Animated Generate Button ===== */
.btn-generate {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-generate::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #d97b1f, #e8913a, #d97b1f, #d4762d, #d97b1f);
  background-size: 300% 300%;
  animation: gradientShift 3s ease infinite;
  border-radius: inherit;
  z-index: -2;
}
.btn-generate::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: #d97b1f;
  border-radius: inherit;
  z-index: -1;
  transition: opacity 0.3s;
}
.btn-generate:hover::after {
  opacity: 0.85;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Ripple Effect ===== */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
  background-size: 1000% 1000%;
  background-position: 50% 50%;
  opacity: 0;
  transition: background-size 0.5s, opacity 0.3s;
  pointer-events: none;
}
.ripple:active::after {
  background-size: 0% 0%;
  opacity: 1;
  transition: 0s;
}

/* ===== Checkbox Animation ===== */
input[type="checkbox"] {
  accent-color: #d97b1f;
  transition: transform 0.15s ease;
}
input[type="checkbox"]:checked {
  animation: checkBounce 0.3s ease;
}
@keyframes checkBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ===== Confetti ===== */
@keyframes confettiFall {
  0% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(100vh) translateX(var(--drift, 50px)) rotate(calc(var(--spin, 3) * 360deg)) scale(0.5); opacity: 0; }
}

/* ===== Skeleton Shimmer ===== */
.skeleton {
  background: linear-gradient(90deg, rgba(45,90,61,0.06) 25%, rgba(45,90,61,0.12) 50%, rgba(45,90,61,0.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== View Slide Transitions ===== */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-30px); }
}

/* ===== Bottom Nav ===== */
.bottom-nav {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
}

/* ===== Staggered card entrance ===== */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
main .bg-white {
  animation: cardIn 0.4s ease both;
}

/* ===== Cuisine Tag Icons ===== */
.cuisine-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 6px;
}

/* ===== Frosted Sticky Section Headers ===== */
.sticky-header {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: rgba(255, 247, 237, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 0;
}

/* ===== Chip Inputs ===== */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
}
.chip-red {
  background-color: rgba(254, 242, 242, 0.8);
  color: #dc2626;
  border: 1px solid #fecaca;
  backdrop-filter: blur(4px);
}
.chip-green {
  background-color: rgba(240, 253, 244, 0.8);
  color: #16a34a;
  border: 1px solid #bbf7d0;
  backdrop-filter: blur(4px);
}

/* ===== Spinners ===== */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #feecd5;
  border-top-color: #d97b1f;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.spinner-sm {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== Smooth transitions ===== */
[x-transition] {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ===== Button press + ripple ===== */
button:active:not(:disabled) {
  transform: scale(0.97);
}

/* ===== iOS safe area ===== */
html {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}

/* ===== Dark Mode ===== */
.dark .bg-body { background-color: #1a1a1a; }
.dark .bg-body::before { background: rgba(20, 20, 20, 0.78); }
.dark main .bg-white {
  background: rgba(36, 36, 36, 0.7) !important;
  border-color: rgba(217, 123, 31, 0.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  color: #e5e5e5;
}
.dark main .bg-gray-100, .dark main .bg-gray-50 { background: rgba(42, 42, 42, 0.6) !important; }
.dark .fixed .bg-white { background: rgba(30, 30, 30, 0.92) !important; }
.dark .text-gray-900, .dark .text-gray-800, .dark .text-gray-700 { color: #e5e5e5 !important; }
.dark .text-gray-600, .dark .text-gray-500 { color: #a3a3a3 !important; }
.dark .text-gray-400 { color: #737373 !important; }
.dark .border-gray-200, .dark .border-gray-100, .dark .border-gray-50 { border-color: rgba(255,255,255,0.08) !important; }
.dark input, .dark select, .dark textarea { background-color: rgba(42, 42, 42, 0.8) !important; color: #e5e5e5 !important; border-color: rgba(255,255,255,0.1) !important; }
.dark .divide-gray-100 > :not(:last-child), .dark .divide-gray-50 > :not(:last-child) { border-color: rgba(255,255,255,0.06) !important; }
.dark .chip-red { background-color: rgba(61, 31, 31, 0.7); color: #f87171; border-color: rgba(92, 42, 42, 0.5); }
.dark .chip-green { background-color: rgba(26, 46, 31, 0.7); color: #6ee7b7; border-color: rgba(39, 77, 53, 0.5); }
.dark .particle { filter: brightness(0.4); }
.dark .bottom-nav { background: rgba(30, 30, 30, 0.85); border-top-color: rgba(255,255,255,0.06); box-shadow: 0 -4px 24px rgba(0,0,0,0.3); }
.dark .skeleton { background: linear-gradient(90deg, rgba(60,60,60,0.3) 25%, rgba(80,80,80,0.5) 50%, rgba(60,60,60,0.3) 75%); background-size: 200% 100%; }
.dark .text-gradient { background: linear-gradient(135deg, #a8badf 0%, #f4a259 40%, #f4a259 100%); -webkit-background-clip: text; background-clip: text; }
.dark .sticky-header { background: rgba(26, 26, 26, 0.8); }
.dark .btn-generate::after { background: #9e5312; }