/* ================================
   THEME SYSTEM - CSS VARIABLES
================================ */
:root {
  /* Default: Ottoman Theme */
  --color-primary: #8B1538;
  --color-secondary: #D4AF37;
  --color-tertiary: #C49A6C;
  --color-background: #FFF8F0;
  --color-surface: #FFFFFF;
  --color-text-primary: #2C1810;
  --color-text-secondary: #5A4A3F;
  --color-text-tertiary: #8A7968;
  
  --font-display: 'Amiri', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-arabic: 'Scheherazade New', serif;
  
  --pattern-type: ottoman;
  --shadow-color: rgba(139, 21, 56, 0.1);
  --border-style: 2px solid rgba(212, 175, 55, 0.3);
}

/* Ottoman Theme (Default) */
[data-theme="ottoman"] {
  --color-primary: #8B1538;
  --color-secondary: #D4AF37;
  --color-tertiary: #C49A6C;
  --color-background: #FFF8F0;
  --color-surface: #FFFFFF;
  --color-text-primary: #2C1810;
  --color-text-secondary: #5A4A3F;
  --color-text-tertiary: #8A7968;
  
  --font-display: 'Amiri', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-arabic: 'Scheherazade New', serif;
  
  --pattern-type: ottoman;
  --shadow-color: rgba(139, 21, 56, 0.1);
}

/* Andalusian Theme */
[data-theme="andalusian"] {
  --color-primary: #2A6F4A;
  --color-secondary: #F4E4D0;
  --color-tertiary: #8FA88E;
  --color-background: #F9F6F1;
  --color-surface: #FFFFFF;
  --color-text-primary: #1F3A2C;
  --color-text-secondary: #3D5A4A;
  --color-text-tertiary: #7A8C82;
  
  --font-display: 'Crimson Text', serif;
  --font-body: 'Inter', sans-serif;
  --font-arabic: 'Lateef', serif;
  
  --pattern-type: andalusian;
  --shadow-color: rgba(42, 111, 74, 0.1);
}

/* Modern Minimal Theme */
[data-theme="modern"] {
  --color-primary: #48C9B0;
  --color-secondary: #1C1C1C;
  --color-tertiary: #7DCEA0;
  --color-background: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-text-primary: #1C1C1C;
  --color-text-secondary: #495057;
  --color-text-tertiary: #ADB5BD;
  
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', sans-serif;
  
  --pattern-type: modern;
  --shadow-color: rgba(72, 201, 176, 0.1);
}

/* Dark mode adjustments */
.dark {
  --color-background: #191919;
  --color-surface: #262626;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A3A3A3;
  --color-text-tertiary: #737373;
}

/* ================================
   THEME TRANSITION
================================ */
body {
  transition: background-color 0.5s ease, color 0.3s ease;
}

.theme-transition {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   PATTERN ANIMATIONS
================================ */
@keyframes pattern-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pattern-flow {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(5px); }
}

@keyframes pattern-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.animate-pattern-rotate {
  animation: pattern-rotate 30s linear infinite;
  transform-origin: center;
}

.animate-pattern-flow {
  animation: pattern-flow 8s ease-in-out infinite;
}

.animate-pattern-pulse {
  animation: pattern-pulse 4s ease-in-out infinite;
}

/* Theme Ripple Animation (removed theme modal) */
@keyframes theme-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
  }
  100% {
    width: 300vmax;
    height: 300vmax;
    opacity: 0;
  }
}

.animate-theme-ripple {
  animation: theme-ripple 0.8s ease-out forwards;
}

/* ================================
   ENHANCED ISLAMIC GREEN OVERRIDES
================================ */
.bg-islamic-green {
  background-color: var(--color-primary) !important;
}

.text-islamic-green {
  color: var(--color-primary) !important;
}

.border-islamic-green\/30 {
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

.bg-islamic-green\/10 {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

.bg-islamic-green\/15 {
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
}

.bg-islamic-green\/5 {
  background-color: color-mix(in srgb, var(--color-primary) 5%, transparent) !important;
}

/* Header background uses secondary for some themes */
[data-theme="modern"] header.bg-primary {
  background-color: var(--color-secondary) !important;
}

/* Share Section Gradient */
.share-section-gradient {
  background: linear-gradient(to right, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, #10b981));
}

[data-theme="modern"] .share-section-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-tertiary));
}

/* First Greeting Card uses theme colors */
.greeting-card-primary {
  background: linear-gradient(to bottom right, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #000));
}

/* ================================
   KALMA SECTION — Islamic Panel Layout
================================ */
@keyframes kalma-glow {
  0%, 100% { opacity: 0; transform: translateX(-140%) skewX(-18deg); }
  10% { opacity: 0.4; }
  35% { opacity: 0.4; }
  50%, 100% { opacity: 0; transform: translateX(220%) skewX(-18deg); }
}

/* Outer Frame */
.kalma-frame {
  border-radius: 1rem;
  padding: 6px;
  margin-bottom: 0.625rem;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-secondary) 80%, #8B6914) 0%,
    color-mix(in srgb, var(--color-secondary) 60%, var(--color-primary)) 50%,
    color-mix(in srgb, var(--color-secondary) 80%, #8B6914) 100%
  );
  box-shadow:
    0 6px 20px color-mix(in srgb, var(--color-primary) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.dark .kalma-frame {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-secondary) 40%, #1a1a1a) 0%,
    color-mix(in srgb, var(--color-primary) 25%, #222) 50%,
    color-mix(in srgb, var(--color-secondary) 40%, #1a1a1a) 100%
  );
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 3-Panel Grid */
.kalma-layout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: stretch;
}

/* Circles: Muhammad & Allah */
.kalma-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.kalma-circle__ring {
  width: clamp(60px, 17vw, 76px);
  height: clamp(60px, 17vw, 76px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.15) 0%, transparent 60%),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-primary) 85%, #1a0a12) 0%,
      color-mix(in srgb, var(--color-primary) 95%, #000) 50%,
      color-mix(in srgb, var(--color-primary) 80%, #2a0f1a) 100%
    );
  border: 2.5px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  box-shadow:
    0 3px 10px color-mix(in srgb, var(--color-primary) 30%, transparent),
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2);
}

.dark .kalma-circle__ring {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.06) 0%, transparent 60%),
    linear-gradient(160deg, #2a2a2a 0%, #1e1e1e 50%, #252525 100%);
  border-color: color-mix(in srgb, var(--color-secondary) 45%, transparent);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.kalma-circle__text {
  font-family: 'Scheherazade New', var(--font-arabic);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fef0c3 0%, #e8c44a 40%, #c9a02e 70%, #fce8a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

.dark .kalma-circle__text {
  background: linear-gradient(180deg, #fff5d6 0%, #edc55e 45%, #d4a93a 75%, #f5e09a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kalma-circle__sub {
  font-family: 'Scheherazade New', var(--font-arabic);
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  line-height: 1;
  color: var(--color-secondary);
  opacity: 0.7;
  margin-top: -2px;
}

/* Right Circle: Larger Allah text */
.kalma-circle:last-child .kalma-circle__text {
  font-size: clamp(1.35rem, 5vw, 1.75rem);
}

/* Center Panel */
.kalma-panel {
  position: relative;
  overflow: hidden;
  border-radius: 0.65rem;
  border: 2px solid color-mix(in srgb, var(--color-secondary) 70%, transparent);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 65%),
    linear-gradient(
      170deg,
      color-mix(in srgb, var(--color-primary) 88%, #1a0a12) 0%,
      color-mix(in srgb, var(--color-primary) 95%, #000) 50%,
      color-mix(in srgb, var(--color-primary) 85%, #2a0f1a) 100%
    );
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -3px 10px rgba(0, 0, 0, 0.25),
    0 2px 8px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.dark .kalma-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 65%),
    linear-gradient(170deg, #2a2a2a 0%, #1e1e1e 50%, #252525 100%);
  border-color: color-mix(in srgb, var(--color-secondary) 45%, transparent);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.05),
    inset 0 -3px 10px rgba(0, 0, 0, 0.2),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

.kalma-panel__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  min-height: clamp(60px, 17vw, 76px);
}

.kalma-panel__text {
  font-family: 'Scheherazade New', var(--font-arabic);
  font-size: clamp(1.1rem, 4.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.005em;
  text-align: center;
  background: linear-gradient(180deg, #fef5d0 0%, #f0d670 35%, #d4af37 70%, #f5e5a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.dark .kalma-panel__text {
  background: linear-gradient(180deg, #fff8dc 0%, #f5d770 40%, #e5c555 75%, #f8ebb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Shimmer */
.kalma-shimmer {
  position: absolute;
  top: -30%;
  left: -25%;
  width: 35%;
  height: 180%;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  filter: blur(1px);
  transform: translateX(-140%) skewX(-18deg);
  animation: kalma-glow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.dark .kalma-shimmer {
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80%);
}

@media (max-width: 380px) {
  .kalma-frame { padding: 4px; }
  .kalma-layout { gap: 4px; }
  .kalma-circle__ring { width: 54px; height: 54px; border-width: 2px; }
  .kalma-circle__text { font-size: 1rem; }
  .kalma-circle__sub { font-size: 0.55rem; }
  .kalma-panel__inner { padding: 0.5rem 0.375rem; min-height: 54px; }
  .kalma-panel__text { font-size: 1rem; line-height: 1.4; }
}

/* ================================
   TIMING CARD — Enhanced Design
================================ */

/* Islamic Pattern Overlay */
.timing-card-pattern {
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 40px),
    repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 40px),
    radial-gradient(circle at 25% 25%, rgba(212,175,55, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(212,175,55, 0.05) 0%, transparent 50%);
}

/* Time Display Glow */
.time-glow {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Countdown Glow Effect */
.countdown-glow {
  animation: countdown-pulse 2s ease-in-out infinite;
}

@keyframes countdown-pulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.5), 0 0 24px rgba(212, 175, 55, 0.3);
  }
}

/* Divider Dot Pulse Animation */
.divider-pulse {
  animation: divider-glow 3s ease-in-out infinite;
}

@keyframes divider-glow {
  0%, 100% {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 0 rgba(212, 175, 55, 0.4);
  }
  50% {
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  }
}

/* Secondary Color Utilities for Timing Card */
.border-t-secondary {
  border-top-color: var(--color-secondary) !important;
}

.text-secondary\/20 {
  color: color-mix(in srgb, var(--color-secondary) 20%, transparent) !important;
}

.text-secondary\/50 {
  color: color-mix(in srgb, var(--color-secondary) 50%, transparent) !important;
}

.text-secondary\/90 {
  color: color-mix(in srgb, var(--color-secondary) 90%, transparent) !important;
}

.bg-secondary\/25 {
  background-color: color-mix(in srgb, var(--color-secondary) 25%, transparent) !important;
}

.bg-secondary\/35 {
  background-color: color-mix(in srgb, var(--color-secondary) 35%, transparent) !important;
}

.bg-secondary\/90 {
  background-color: color-mix(in srgb, var(--color-secondary) 90%, transparent) !important;
}

.border-secondary\/40 {
  border-color: color-mix(in srgb, var(--color-secondary) 40%, transparent) !important;
}

/* ================================
   BASE STYLES
================================ */
html, body {
  height: 100%;
}

body {
  font-family: 'Lexend', sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

main {
  padding-bottom: 120px; /* space for fixed footer */
}

/* ================================
   iOS SAFE AREAS
================================ */
.ios-safe-top {
  padding-top: env(safe-area-inset-top);
}

.ios-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ================================
   PWA INSTALL PROMPT ANIMATIONS
================================ */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes scale-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out forwards;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.3s ease-out forwards;
}

.animate-scale-out {
  animation: scale-out 0.3s ease-out forwards;
}

.animate-slide-down {
  animation: slide-down 0.3s ease-in forwards;
}

/* ================================
   FOOTER SLIDER
================================ */
.slider-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.slider-track {
  display: flex;
  width: 400%;
  animation: slide-auto 24s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-item {
  width: 25%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

@keyframes slide-auto {
  0%, 22% { transform: translateX(0); }
  25%, 47% { transform: translateX(-25%); }
  50%, 72% { transform: translateX(-50%); }
  75%, 97% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}

/* Footer Slider Dots */
.dot-1 { animation: dot-active 24s infinite; }
.dot-2 { animation: dot-active 24s infinite 6s; }
.dot-3 { animation: dot-active 24s infinite 12s; }
.dot-4 { animation: dot-active 24s infinite 18s; }

@keyframes dot-active {
  0%, 20% { 
    background-color: var(--color-primary);
    transform: scale(1.25);
    opacity: 1;
  }
  25%, 100% { 
    background-color: #d4d4d4;
    transform: scale(1);
    opacity: 0.5;
  }
}

.dark .dot-1,
.dark .dot-2,
.dark .dot-3,
.dark .dot-4 {
  background-color: #525252;
}

/* ================================
   DUA SLIDER
================================ */
.dua-slider-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.dua-slider-track {
  display: flex;
  width: 300%;
  animation: dua-slide-auto 18s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.dua-slider-track.paused {
  animation-play-state: paused;
}

.dua-slider-item {
  width: 33.333%;
  flex-shrink: 0;
  padding: 0 4px;
}

@keyframes dua-slide-auto {
  0%, 28% { transform: translateX(0); }
  33%, 61% { transform: translateX(-33.333%); }
  66%, 94% { transform: translateX(-66.666%); }
  100% { transform: translateX(0); }
}

/* Dua Slider Dots */
.dua-dot-1 { animation: dua-dot-active 18s infinite; }
.dua-dot-2 { animation: dua-dot-active 18s infinite 6s; }
.dua-dot-3 { animation: dua-dot-active 18s infinite 12s; }

.dua-dot-1.paused,
.dua-dot-2.paused,
.dua-dot-3.paused {
  animation-play-state: paused;
}

@keyframes dua-dot-active {
  0%, 28% { 
    background-color: var(--color-primary);
    transform: scale(1.25);
    opacity: 1;
  }
  33%, 100% { 
    background-color: #d4d4d4;
    transform: scale(1);
    opacity: 0.5;
  }
}

.dark .dua-dot-1,
.dark .dua-dot-2,
.dark .dua-dot-3 {
  background-color: #525252;
}

/* ================================
   DUA SCROLL CONTAINER
================================ */
.dua-scroll-container {
  max-height: 90px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-primary) 20%, transparent) transparent;
}

.dua-scroll-container::-webkit-scrollbar {
  width: 3px;
}

.dua-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.dua-scroll-container::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 10px;
}

/* ================================
   MONTH TABLE
================================ */
.month-table-container {
  max-height: calc(100vh - 580px);
  min-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ================================
   SKELETON LOADING ANIMATION
================================ */
.skeleton {
  background: linear-gradient(90deg, 
    rgba(0,0,0,0.06) 25%, 
    rgba(0,0,0,0.12) 50%, 
    rgba(0,0,0,0.06) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
}

.dark .skeleton {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.06) 25%, 
    rgba(255,255,255,0.12) 50%, 
    rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  min-width: 2em;
}

.skeleton-time {
  height: 1.5em;
  min-width: 3em;
}

/* ================================
   SCROLLBAR HIDE UTILITY
================================ */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* ================================
   COUNTDOWN TIMER
================================ */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.animate-pulse {
  animation: pulse-subtle 2s ease-in-out infinite;
}

/* ================================
   ISLAMIC LOADER ANIMATIONS
================================ */

/* #1: Rotating 8-Point Star Loader */
@keyframes star-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes star-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes star-glow {
  0%, 100% { filter: drop-shadow(0 0 10px currentColor); }
  50% { filter: drop-shadow(0 0 25px currentColor); }
}

.islamic-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.islamic-loader-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.star-loader {
  width: 80px;
  height: 80px;
  animation: star-rotate 2s ease-in-out infinite, star-pulse 2s ease-in-out infinite;
}

.star-loader svg {
  width: 100%;
  height: 100%;
  animation: star-glow 2s ease-in-out infinite;
}

.loader-text {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  opacity: 0.9;
  animation: pulse-subtle 2s ease-in-out infinite;
}

/* ================================
   PROGRESS BAR
================================ */
@keyframes progress-glow {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(400%); opacity: 0; }
}

.animate-progress-glow {
  animation: progress-glow 2.5s ease-in-out infinite;
}

/* ================================
   SPONSORED GREETING CARD
================================ */
#sponsored-greeting {
  transition: transform 0.2s ease;
}

#sponsored-greeting:active {
  transform: scale(0.95);
}

/* ================================
   ISLAMIC LOADER #2: CRESCENT MOON & STAR
================================ */
@keyframes crescent-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px var(--color-secondary));
    opacity: 0.9;
  }
  50% {
    filter: drop-shadow(0 0 20px var(--color-secondary));
    opacity: 1;
  }
}

@keyframes star-orbit {
  0% {
    transform: rotate(0deg) translateX(35px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(35px) rotate(-360deg);
  }
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 4px currentColor);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 12px currentColor);
  }
}

.crescent-star-loader {
  width: 100px;
  height: 100px;
  position: relative;
}

.crescent-star-loader svg {
  width: 100%;
  height: 100%;
}

.crescent-star-loader .crescent-moon {
  transform-origin: 50px 40px;
  animation: crescent-glow 3s ease-in-out infinite;
}

.crescent-star-loader .orbiting-star {
  transform-origin: 50px 40px;
  animation: star-orbit 3s linear infinite, star-twinkle 1.5s ease-in-out infinite;
}

/* ================================
   ISLAMIC LOADER #3: EXPANDING GEOMETRIC MANDALA
================================ */
@keyframes mandala-breathe-outer {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
}

@keyframes mandala-breathe-middle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1) rotate(45deg);
    opacity: 1;
  }
}

@keyframes mandala-breathe-inner {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes mandala-center-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.3) rotate(180deg);
    opacity: 1;
  }
}

@keyframes mandala-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px var(--color-primary));
  }
  50% {
    filter: drop-shadow(0 0 20px var(--color-secondary));
  }
}

.mandala-loader {
  width: 100px;
  height: 100px;
  position: relative;
}

.mandala-loader svg {
  width: 100%;
  height: 100%;
  animation: mandala-glow 3s ease-in-out infinite;
}

.mandala-loader .mandala-ring-outer {
  transform-origin: 50px 50px;
  animation: mandala-breathe-outer 3s ease-in-out infinite;
}

.mandala-loader .mandala-ring-middle {
  transform-origin: 50px 50px;
  animation: mandala-breathe-middle 3s ease-in-out infinite;
}

.mandala-loader .mandala-ring-inner {
  transform-origin: 50px 50px;
  animation: mandala-breathe-inner 3s ease-in-out infinite;
}

.mandala-loader .mandala-center {
  transform-origin: 50px 50px;
  animation: mandala-center-pulse 3s ease-in-out infinite;
}

/* ================================
   ISLAMIC LOADER #4: RAMADAN LANTERN (FANOOS)
================================ */
@keyframes lantern-swing {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

@keyframes lantern-light-flicker {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  25% {
    opacity: 0.95;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
  75% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes lantern-glow {
  0%, 100% {
    filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 20px var(--color-secondary));
  }
  50% {
    filter: drop-shadow(0 0 20px #FFD700) drop-shadow(0 0 35px var(--color-secondary));
  }
}

@keyframes chain-sway {
  0%, 100% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(1px);
  }
}

.lantern-loader {
  width: 110px;
  height: 110px;
  position: relative;
}

.lantern-loader svg {
  width: 100%;
  height: 100%;
}

.lantern-loader .lantern-body {
  transform-origin: 50px 20px;
  animation: lantern-swing 3s ease-in-out infinite;
}

.lantern-loader .lantern-light {
  transform-origin: 50px 45px;
  animation: lantern-light-flicker 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px #FFD700);
}

.lantern-loader .lantern-chain {
  animation: chain-sway 3s ease-in-out infinite;
}

.lantern-loader svg {
  animation: lantern-glow 3s ease-in-out infinite;
}

/* ================================
   ISLAMIC LOADER #5: PRAYER BEADS (TASBIH)
================================ */
@keyframes tasbih-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bead-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  8.33% {
    transform: scale(1.4);
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--color-secondary));
  }
  16.66% {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes tassel-sway {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

@keyframes center-bead-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px var(--color-primary));
    opacity: 0.9;
  }
  50% {
    filter: drop-shadow(0 0 16px var(--color-secondary));
    opacity: 1;
  }
}

.tasbih-loader {
  width: 100px;
  height: 100px;
  position: relative;
  opacity: 0.15;
}

.tasbih-loader svg {
  width: 100%;
  height: 100%;
}

.tasbih-loader .tasbih-beads {
  transform-origin: 50px 50px;
  animation: tasbih-rotate 4s linear infinite;
}

.tasbih-loader .bead {
  animation: bead-pulse 4s ease-in-out infinite;
}

/* Stagger the pulse animation for each bead */
.tasbih-loader .bead-1 { animation-delay: 0s; }
.tasbih-loader .bead-2 { animation-delay: 0.33s; }
.tasbih-loader .bead-3 { animation-delay: 0.66s; }
.tasbih-loader .bead-4 { animation-delay: 1s; }
.tasbih-loader .bead-5 { animation-delay: 1.33s; }
.tasbih-loader .bead-6 { animation-delay: 1.66s; }
.tasbih-loader .bead-7 { animation-delay: 2s; }
.tasbih-loader .bead-8 { animation-delay: 2.33s; }
.tasbih-loader .bead-9 { animation-delay: 2.66s; }
.tasbih-loader .bead-10 { animation-delay: 3s; }
.tasbih-loader .bead-11 { animation-delay: 3.33s; }
.tasbih-loader .bead-12 { animation-delay: 3.66s; }

.tasbih-loader .tasbih-center {
  animation: center-bead-glow 2s ease-in-out infinite;
}

.tasbih-loader .tasbih-tassel {
  transform-origin: 50px 58px;
  animation: tassel-sway 2s ease-in-out infinite;
}

/* ================================
   DHIKR PHRASES CYCLING ANIMATION
================================ */
.dhikr-container {
  position: relative;
  margin-top: 30px;
  width: 280px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dhikr-phrase {
  position: absolute;
  text-align: center;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  animation: dhikr-fade 8s ease-in-out infinite;
}

.dhikr-1 { animation-delay: 0s; }
.dhikr-2 { animation-delay: 2s; }
.dhikr-3 { animation-delay: 4s; }
.dhikr-4 { animation-delay: 6s; }

@keyframes dhikr-fade {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  5% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

.dhikr-arabic {
  font-family: 'Amiri', 'Scheherazade New', serif;
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin: 0 0 8px 0;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  direction: rtl;
}

.dhikr-transliteration {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: white;
  opacity: 0.85;
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.loader-status {
  margin-top: 170px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  opacity: 0.7;
  text-align: center;
  animation: pulse-subtle 2s ease-in-out infinite;
}

/* ================================
   DUA AUDIO PROGRESS SLIDER
================================ */
.dua-progress-slider {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: transparent;
}

.dua-progress-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, 
    var(--color-primary) 0%, 
    var(--color-primary) var(--progress, 0%), 
    #e5e7eb var(--progress, 0%), 
    #e5e7eb 100%);
  border-radius: 2px;
}

.dark .dua-progress-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, 
    var(--color-primary) 0%, 
    var(--color-primary) var(--progress, 0%), 
    #374151 var(--progress, 0%), 
    #374151 100%);
}

.dua-progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.dua-progress-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.dua-progress-slider::-moz-range-track {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, 
    var(--color-primary) 0%, 
    var(--color-primary) var(--progress, 0%), 
    #e5e7eb var(--progress, 0%), 
    #e5e7eb 100%);
  border-radius: 2px;
}

.dark .dua-progress-slider::-moz-range-track {
  background: linear-gradient(to right, 
    var(--color-primary) 0%, 
    var(--color-primary) var(--progress, 0%), 
    #374151 var(--progress, 0%), 
    #374151 100%);
}

.dua-progress-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.dua-progress-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

.dua-controls {
  padding-top: 8px;
}