/* ==========================================
   بصيرة | رفيق المسلم والمساعد الشرعي
   تصميم إسلامي فاخر متكامل مع المؤثرات البصرية
   ========================================== */

:root {
  --font-size-multiplier: 1;
  --emerald-deep: #0b241c;
  --emerald-main: #143d30;
  --gold-accent: #d4af37;
  --gold-glow: rgba(212, 175, 55, 0.35);
}

/* Islamic Geometric Background Pattern */
.islamic-bg {
  background-color: #FAF8F4;
  background-image: 
    radial-gradient(#143d30 0.85px, transparent 0.85px), 
    radial-gradient(#d4af37 0.85px, #FAF8F4 0.85px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}

/* Safe Area Spacer for Mobile WebViews */
.safe-top-spacer {
  height: env(safe-area-inset-top, 0px);
}
.safe-bottom-padding {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* Typography styles */
.font-quran {
  font-family: 'Amiri', serif;
  letter-spacing: 0.02em;
  line-height: 2.1;
  font-size: calc(1.2rem * var(--font-size-multiplier));
}

.font-hadith {
  font-family: 'Amiri', serif;
  line-height: 1.95;
  font-size: calc(1.05rem * var(--font-size-multiplier));
}

.answer-body-text {
  font-size: calc(0.96rem * var(--font-size-multiplier));
  line-height: 1.8;
}

/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Navigation Tabs */
.nav-tab-btn {
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-tab-btn.active {
  background: linear-gradient(135deg, #143d30 0%, #0b241c 100%);
  color: #fef9c3;
  border-color: #d4af37;
  box-shadow: 0 4px 14px rgba(20, 61, 48, 0.28);
}

/* Category Filter Pills */
.cat-pill {
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.2s ease;
}
.cat-pill.active {
  background-color: #143d30 !important;
  color: #ffffff !important;
  border-color: #d4af37 !important;
  box-shadow: 0 4px 12px rgba(20, 61, 48, 0.2);
}

/* Topic Card Hover Lift */
.topic-card {
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.topic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -6px rgba(20, 61, 48, 0.12);
  border-color: rgba(212, 175, 55, 0.5);
}
.topic-card:active {
  transform: scale(0.985);
}

/* Tasbeeh Counter Circle Interaction */
.tasbeeh-circle {
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}
.tasbeeh-circle:active {
  transform: scale(0.93);
  box-shadow: 0 0 35px var(--gold-glow);
}

/* Wave Audio Indicator */
@keyframes audioPulse {
  0%, 100% { height: 6px; }
  50% { height: 20px; }
}
.audio-bar-1 { animation: audioPulse 0.75s ease-in-out infinite 0.1s; }
.audio-bar-2 { animation: audioPulse 0.75s ease-in-out infinite 0.3s; }
.audio-bar-3 { animation: audioPulse 0.75s ease-in-out infinite 0.5s; }

/* Pulse Glow */
@keyframes softGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}
.animate-glow {
  animation: softGlow 3s ease-in-out infinite;
}

/* Modal Animations */
@keyframes modalScale {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.animate-modal {
  animation: modalScale 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Selection Highlight */
::selection {
  background: rgba(212, 175, 55, 0.35);
  color: #0b241c;
}