@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Mukta:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&family=Rozha+One&display=swap');

:root {
  --color-saffron-50: #FFF7ED;
  --color-saffron-100: #FFEDD5;
  --color-saffron-500: #FF9933;
  --color-saffron-600: #EA580C;
  --color-saffron-700: #C2410C;
  --color-saffron-900: #7C2D12;
  
  --color-navy-950: #060D1D;
  --color-navy-900: #0B1B3D;
  --color-navy-800: #132B5C;
  --color-navy-700: #1D407F;
  
  --color-cream: #FFFDF8;
  --color-cream-card: #FAF4E8;
  --color-gold-400: #FACC15;
  --color-gold-500: #EAB308;
  --color-gold-600: #CA8A04;
  --color-maroon: #800000;
}

body {
  font-family: 'Mukta', 'Poppins', sans-serif;
  background-color: var(--color-cream);
  color: #2D3748;
  overflow-x: hidden;
}

h1, h2, h3, .font-heading {
  font-family: 'Cinzel', 'Rozha One', 'Mukta', serif;
}

.font-sanskrit {
  font-family: 'Rozha One', 'Mukta', serif;
}

/* Sacred Temple Decorative Borders & Backgrounds */
.sacred-gradient-saffron {
  background: linear-gradient(135deg, #FF9933 0%, #E65100 100%);
}

.sacred-gradient-navy {
  background: linear-gradient(135deg, #0B1B3D 0%, #152A55 100%);
}

.sacred-gradient-gold {
  background: linear-gradient(135deg, #FFE259 0%, #FFA751 100%);
}

.temple-border-gold {
  border: 2px solid #EAB308;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.25);
}

.temple-arch-card {
  position: relative;
  background: #FFFDF9;
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 1.25rem;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(11, 27, 61, 0.04);
}

.temple-arch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(230, 81, 0, 0.18);
  border-color: #FF9933;
}

/* Glass card styling */
.glass-gold-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(234, 179, 8, 0.3);
  box-shadow: 0 10px 30px rgba(11, 27, 61, 0.05);
}

.glass-dark-card {
  background: rgba(11, 27, 61, 0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(234, 179, 8, 0.25);
}

/* Shimmer animation */
@keyframes goldShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.gold-shimmer-btn {
  background: linear-gradient(90deg, #F59E0B 0%, #FDE68A 50%, #F59E0B 100%);
  background-size: 200% 100%;
  animation: goldShimmer 3.5s infinite linear;
}

/* Floating animation */
@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

/* Blinking Live Badge */
.live-pulse {
  animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    transform: scale(1);
  }
}

.glow-diya {
  animation: diya-flame 2s ease-in-out infinite alternate;
}

@keyframes diya-flame {
  0% {
    filter: drop-shadow(0 0 4px #F59E0B) drop-shadow(0 0 10px #EF4444);
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 0 8px #FBBF24) drop-shadow(0 0 18px #DC2626);
    transform: scale(1.05);
  }
}

/* Decorative Om Pattern */
.bg-mandir-pattern {
  background-image: radial-gradient(#FF9933 1px, transparent 1px), radial-gradient(#FF9933 1px, #FFFDF8 1px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}

/* Golden text gradient */
.text-gold-gradient {
  background: linear-gradient(135deg, #FFF5B8 0%, #FBBF24 50%, #D97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-saffron-gradient {
  background: linear-gradient(135deg, #FF9933 0%, #E65100 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Floating WhatsApp / Live Quick Action */
.floating-badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #FFF8EE;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF9933, #E65100);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C2410C;
}

/* ==========================================================================
   Fullscreen TV Theater Mode with Pinned Running Marquee Ticker
   ========================================================================== */
.live-fullscreen-active,
#liveStreamWrapper:fullscreen,
#liveStreamWrapper:-webkit-full-screen,
#livePlayerSectionWrapper:fullscreen,
#livePlayerSectionWrapper:-webkit-full-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #000000 !important;
  z-index: 999999 !important;
}

.live-fullscreen-active #livePlayerContainer,
.live-fullscreen-active #livePlayerContainerHome,
#liveStreamWrapper:fullscreen #livePlayerContainer,
#liveStreamWrapper:-webkit-full-screen #livePlayerContainer,
#livePlayerSectionWrapper:fullscreen #livePlayerContainerHome,
#livePlayerSectionWrapper:-webkit-full-screen #livePlayerContainerHome {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: calc(100vh - 54px) !important;
  max-height: calc(100vh - 54px) !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
}

.live-fullscreen-active #liveMarqueeContainer,
.live-fullscreen-active #liveMarqueeContainerHome,
#liveStreamWrapper:fullscreen #liveMarqueeContainer,
#liveStreamWrapper:-webkit-full-screen #liveMarqueeContainer,
#livePlayerSectionWrapper:fullscreen #liveMarqueeContainerHome,
#livePlayerSectionWrapper:-webkit-full-screen #liveMarqueeContainerHome {
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  flex-shrink: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  z-index: 9999999 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.8) !important;
}

.live-fullscreen-active .hide-in-fullscreen,
#liveStreamWrapper:fullscreen .hide-in-fullscreen,
#liveStreamWrapper:-webkit-full-screen .hide-in-fullscreen,
#livePlayerSectionWrapper:fullscreen .hide-in-fullscreen,
#livePlayerSectionWrapper:-webkit-full-screen .hide-in-fullscreen {
  display: none !important;
}

.live-fullscreen-active .show-in-fullscreen,
#liveStreamWrapper:fullscreen .show-in-fullscreen,
#liveStreamWrapper:-webkit-full-screen .show-in-fullscreen,
#livePlayerSectionWrapper:fullscreen .show-in-fullscreen,
#livePlayerSectionWrapper:-webkit-full-screen .show-in-fullscreen {
  display: flex !important;
}

/* Google Translate Widget Optimization & Clean Theme */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.skiptranslate,
.goog-te-gadget {
  display: none !important;
}
body {
  top: 0px !important;
}
.goog-tooltip, .goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ===================================================
   Mobile View & Android App Experience Optimizations
   =================================================== */
.no-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar,
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.touch-scroll,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

.safe-area-pb {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Prevent accidental horizontal overflow of page across devices */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 1024px) {
  html, body {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
  }

  main,
  .admin-mobile-content {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }

  /* Prevent oversized tables/bars from expanding page width */
  .overflow-x-auto {
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Compact button styling on phones */
  .btn-mobile-compact {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    font-size: 0.75rem !important;
  }
}