/* =========================================================
   Hidden Café - Animated Fiery Ember UI & Custom Design
   Inspired by the official Hidden Café Fire Emblem Logo
   ========================================================= */

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

:root {
  --fire-orange: #ff5722;
  --fire-amber: #ff9800;
  --fire-gold: #ffc107;
  --fire-red: #d32f2f;
  --bg-deep: #050608;
  --bg-card: rgba(16, 17, 24, 0.78);
  --border-flame: rgba(255, 100, 20, 0.22);
  --glow-flame: rgba(255, 87, 34, 0.4);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-deep);
  color: #f8fafc;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  background-image: 
    radial-gradient(circle at 50% 8%, rgba(255, 87, 34, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 40%, rgba(255, 152, 0, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(211, 47, 47, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(255, 87, 34, 0.15) 0%, transparent 45%);
  background-attachment: fixed;
}

/* Canvas for rising fire embers */
#embers-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.font-serif-title {
  font-family: 'Playfair Display', serif;
}

.font-brand {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
}

/* Logo Fire Ring Breathing Animation */
@keyframes fireRingPulse {
  0%, 100% {
    box-shadow: 
      0 0 25px rgba(255, 87, 34, 0.6),
      0 0 50px rgba(255, 152, 0, 0.35),
      0 0 75px rgba(211, 47, 47, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 
      0 0 40px rgba(255, 87, 34, 0.85),
      0 0 70px rgba(255, 152, 0, 0.5),
      0 0 100px rgba(211, 47, 47, 0.35);
    transform: scale(1.025);
  }
}

.fire-logo-wrapper {
  animation: fireRingPulse 3.5s infinite ease-in-out;
  border-radius: 9999px;
  position: relative;
}

/* Rotating flame border gradient */
@keyframes flameRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fire-rotate-border {
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, #ff5722, #ff9800, #ffc107, #d32f2f, #ff5722);
  opacity: 0.75;
  filter: blur(4px);
  animation: flameRotate 6s linear infinite;
  z-index: 0;
}

/* Fiery Text Gradient */
.flame-gradient-text {
  background: linear-gradient(135deg, #ffffff 15%, #ffb74d 55%, #ff5722 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(255, 87, 34, 0.35);
}

/* Smoked Obsidian Glassmorphism Cards */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-flame);
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 152, 0, 0.4), transparent);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 100, 20, 0.18);
}

.glass-pill:hover {
  background: rgba(255, 87, 34, 0.1);
  border-color: rgba(255, 152, 0, 0.4);
}

/* Interactive Card Transitions */
.interactive-card {
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-card:active {
  transform: scale(0.975);
}

@media (hover: hover) {
  .interactive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -5px var(--glow-flame);
    border-color: rgba(255, 152, 0, 0.5);
  }
}

/* Molten Fire Primary Buttons */
.btn-molten-fire {
  background: linear-gradient(135deg, #ff5722 0%, #ff9800 50%, #f59e0b 100%);
  color: #050608;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(255, 87, 34, 0.45);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.btn-molten-fire:hover {
  background: linear-gradient(135deg, #f4511e 0%, #ffa726 50%, #fbbf24 100%);
  box-shadow: 0 6px 28px rgba(255, 87, 34, 0.7);
  transform: translateY(-1px);
}

.btn-molten-fire:active {
  transform: scale(0.97);
}

/* Subtle Heat Shimmer on Headings */
@keyframes heatShimmer {
  0% { filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.4)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 152, 0, 0.7)); }
  100% { filter: drop-shadow(0 0 8px rgba(255, 87, 34, 0.4)); }
}

.glow-flame-title {
  animation: heatShimmer 4s infinite ease-in-out;
}

/* Pulse animation for live badge */
@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

.pulse-dot {
  animation: pulseGlow 2s infinite ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #08090d;
}
::-webkit-scrollbar-thumb {
  background: #252835;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff5722;
}

/* Modal and Bottom Sheet Animations */
.sheet-overlay {
  transition: opacity 0.25s ease-out;
}

.sheet-content {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-out;
}

.sheet-overlay.hidden-sheet {
  opacity: 0;
  pointer-events: none;
}

.sheet-overlay.hidden-sheet .sheet-content {
  transform: translateY(100%);
}

@media (min-width: 768px) {
  .sheet-overlay.hidden-sheet .sheet-content {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* Confetti Container */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
}

/* Print Styles for Printable Table QR Stand */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
  }
  
  .no-print {
    display: none !important;
  }
  
  #table-stand-print-section {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
  }
  
  .printable-stand-card {
    border: 3px solid #111827 !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
  }
}


/* =========================================================
   Minimalist White Theme Styles (Default / Main UI)
   ========================================================= */

body.theme-minimal {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(241, 245, 249, 1) 0%, transparent 50%),
    radial-gradient(circle at 0% 50%, rgba(254, 243, 199, 0.4) 0%, transparent 40%) !important;
}

body.theme-minimal #embers-canvas {
  display: none !important;
}

body.theme-minimal .fire-rotate-border {
  display: none !important;
}

body.theme-minimal .fire-logo-wrapper {
  animation: none !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.12) !important;
  border-color: #e2e8f0 !important;
  background: #ffffff !important;
}

body.theme-minimal .flame-gradient-text {
  background: linear-gradient(135deg, #0f172a 20%, #334155 70%, #ff5722 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

body.theme-minimal .glow-flame-title {
  animation: none !important;
}

body.theme-minimal #hero-cafe-tagline {
  color: #64748b !important;
}

body.theme-minimal .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

body.theme-minimal .glass-panel::before {
  display: none !important;
}

body.theme-minimal .glass-panel:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.08) !important;
}

body.theme-minimal .glass-pill {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

body.theme-minimal .glass-pill:hover {
  background: #e2e8f0 !important;
}

body.theme-minimal h1,
body.theme-minimal h2,
body.theme-minimal h3,
body.theme-minimal h4 {
  color: #0f172a !important;
}

body.theme-minimal p {
  color: #64748b !important;
}

body.theme-minimal .text-white {
  color: #0f172a !important;
}

body.theme-minimal .text-slate-400,
body.theme-minimal .text-slate-300 {
  color: #64748b !important;
}

/* Modals & Bottom sheets in Minimalist mode */
body.theme-minimal .sheet-content {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

body.theme-minimal .sheet-content .bg-black\/40,
body.theme-minimal .sheet-content .bg-black\/50,
body.theme-minimal .sheet-content .bg-black\/60,
body.theme-minimal .sheet-content .bg-black\/20 {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body.theme-minimal input,
body.theme-minimal select,
body.theme-minimal textarea {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

body.theme-minimal input::placeholder,
body.theme-minimal textarea::placeholder {
  color: #94a3b8 !important;
}

/* Theme Toggle Button Styling */
#theme-toggle-btn {
  cursor: pointer;
  outline: none;
}

body.theme-minimal #theme-toggle-btn {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #1e293b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.theme-minimal #theme-toggle-btn:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

body.theme-fire #theme-toggle-btn {
  background: rgba(255, 87, 34, 0.18);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.45);
  box-shadow: 0 0 16px rgba(255, 87, 34, 0.35);
}

body.theme-fire #theme-toggle-btn:hover {
  background: rgba(255, 87, 34, 0.28);
  border-color: rgba(255, 152, 0, 0.7);
  transform: translateY(-1px);
}