@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Reem+Kufi:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Default Theme: Royal Emerald Dark Mode (Very calming and rich) */
  --bg-color: #020705;
  --bg-gradient: radial-gradient(circle at 50% -25%, #052618 0%, #020705 100%);
  --gold-primary: #d4af37;
  --gold-light: #fcfaf6;
  --gold-dim: rgba(212, 175, 55, 0.05);
  --gold-glow: rgba(212, 175, 55, 0.15);
  --emerald-dark: #010604;
  --emerald-light: #059669;
  --emerald-glow: rgba(5, 150, 105, 0.15);
  
  --text-main: #f3fcf6;
  --text-muted: #627c6f;
  
  --glass-bg: rgba(2, 10, 7, 0.7);
  --glass-border: rgba(5, 150, 105, 0.12);
  --glass-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
  --pattern-opacity: 0.035;
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 99px;
  
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  
  --font-main: 'Cairo', system-ui, sans-serif;
  --font-title: 'Reem Kufi', serif;
  --font-quran: 'Amiri', serif;
}

body.theme-slate {
  /* Alternative Theme: Calm Slate Sapphire & Rose Gold (Modern, calming, unique) */
  --bg-color: #07090e;
  --bg-gradient: radial-gradient(circle at 50% -25%, #101624 0%, #07090e 100%);
  --gold-primary: #e2ba7d; /* Soft Champagne / Rose Gold */
  --gold-light: #FAF8F5;
  --gold-dim: rgba(226, 186, 125, 0.06);
  --gold-glow: rgba(226, 186, 125, 0.18);
  --emerald-dark: #090c12;
  --emerald-light: #6366f1; /* Calm Indigo/Lavender Accent */
  --emerald-glow: rgba(99, 102, 241, 0.15);
  
  --text-main: #f1f5f9;
  --text-muted: #64748b;
  
  --glass-bg: rgba(9, 11, 18, 0.75);
  --glass-border: rgba(99, 102, 241, 0.12);
  --glass-shadow: 0 15px 40px rgba(0, 0, 0, 0.75);
  --pattern-opacity: 0.02;
}

body.lang-en {
  --font-main: 'Outfit', sans-serif;
  --font-title: 'Outfit', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  background-image: var(--bg-gradient);
  color: var(--text-main);
  min-height: 100vh;
  direction: rtl;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.lang-en {
  direction: ltr;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 600;
}

.text-gradient {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 60%, #9e7f1b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px var(--gold-glow);
}

body.lang-en .text-gradient {
  text-shadow: 0 0 15px var(--gold-glow);
}

.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: var(--gold-dim);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* Elegant Islamic Background Pattern */
.islamic-bg-ornament {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><path d="M30 0 L40 20 L60 30 L40 40 L30 60 L20 40 L0 30 L20 20 Z" fill="none" stroke="%23d4af37" stroke-width="0.8" opacity="0.6"/></svg>');
  background-repeat: repeat;
  background-size: 80px 80px;
  opacity: var(--pattern-opacity);
  z-index: -1;
  transition: opacity 0.4s ease;
}

/* Mosque Silhouette Background */
.mosque-silhouette {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 120" fill="%23d4af37" opacity="0.03" xmlns="http://www.w3.org/2000/svg"><path d="M0,120 L1000,120 L1000,90 C960,90 940,70 920,70 C900,70 880,90 840,90 C800,90 780,50 760,50 C740,50 720,90 680,90 C640,90 620,40 600,40 C580,40 560,90 520,90 C480,90 460,60 440,60 C420,60 400,90 360,90 C320,90 300,30 280,30 C260,30 240,90 200,90 C160,90 140,70 120,70 C100,70 80,90 40,90 C20,90 10,105 0,110 Z"/></svg>');
  background-size: 1200px 120px;
  background-repeat: repeat-x;
  background-position: bottom center;
  pointer-events: none;
  z-index: -2;
  transition: var(--transition);
}

/* Zen Mode */
body.zen-mode-active .sidebar, 
body.zen-mode-active .header-nav, 
body.zen-mode-active .site-header .logo-container,
body.zen-mode-active .theme-toggle {
    display: none !important;
}
body.zen-mode-active .main-content {
    margin-left: 0;
    width: 100%;
}
body.zen-mode-active {
    background: #000000 !important;
}

/* Theme 2 Cinematic */
body.theme-calm-slate::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 50% 0%, #1a2a40 0%, #0d1520 100%);
    z-index: -3;
}
body.theme-calm-slate::after {
    content: '';
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 40vh;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300"><path fill="%23ffffff" fill-opacity="0.03" d="M0,300 L0,200 Q50,200 100,150 T200,100 T300,120 T400,80 T500,150 T600,100 T700,160 T800,120 T900,180 T1000,100 L1000,300 Z"/></svg>') repeat-x bottom;
    background-size: contain;
    z-index: -2;
    animation: drift 60s linear infinite;
}
@keyframes drift {
    from { background-position: 0 bottom; }
    to { background-position: -1000px bottom; }
}

/* Float bubbles */
.float-bubble {
    position: fixed;
    color: var(--gold-light);
    font-weight: bold;
    font-size: 1.2rem;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 9999;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}