/* style.css */
:root {
  /* Colors */
  --primary: #422833;
  --bg-slate-50: #f8fafc;
  --text-slate-900: #0f172a;
  --text-slate-500: #64748b;
  --border-gray-200: #e5e7eb;
  
  --brand-navy: #1E3A8A;
  --brand-teal: #61C9A8;
  --brand-maroon: #5A3E49;
  
  /* Fonts */
  --font-inter: 'Inter', sans-serif;
  --font-amiri: 'Amiri', serif;

  /* Spacing */
  --space-xs: 4px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --container-padding: 20px;
}

/* Base */
body {
  font-family: var(--font-inter);
  background-color: var(--bg-slate-50);
  color: var(--text-slate-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilities */
.text-primary { color: var(--primary) !important; }
.hover-text-primary:hover { color: var(--primary) !important; }
.text-slate-500 { color: var(--text-slate-500) !important; }
.text-brand-navy { color: var(--brand-navy) !important; }
.text-brand-teal { color: var(--brand-teal) !important; }
.text-brand-maroon { color: var(--brand-maroon) !important; }
.bg-brand-teal { background-color: var(--brand-teal) !important; }
.bg-brand-teal-10 { background-color: rgba(97,201,168,0.1) !important; }

.cursor-pointer { cursor: pointer; }

.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.container-custom {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Spacing */
.px-container-padding { padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; }
.py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-base { gap: var(--space-base) !important; }
.gap-xs { gap: var(--space-xs) !important; }

/* Borders */
.border-gray-200 { border-color: var(--border-gray-200) !important; }

/* Typography */
.font-label-lg {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
}
.text-label-md {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
}
.tracking-wider { letter-spacing: 0.05em !important; }
.fw-bold { font-weight: 700 !important; }
.font-arabic { font-family: var(--font-amiri) !important; }
.font-body-md { font-family: var(--font-inter) !important; font-size: 14px; }
.font-body-lg { font-family: var(--font-inter) !important; font-size: 16px; }
.font-headline-lg { font-family: var(--font-inter) !important; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }

/* Book 3D (from globals.css) */
.book-container { perspective: 1000px; }
.book-3d {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform: rotateY(-20deg);
}
.book-container:hover .book-3d { transform: rotateY(-5deg) scale(1.02); }
.book-side {
  position: absolute; height: 100%; width: 40px; left: 0;
  background: linear-gradient(to right, #422833 0%, #5a3e49 100%);
  transform: rotateY(-90deg) translateX(-20px); transform-origin: left center;
}
.book-front { position: relative; z-index: 1; box-shadow: 10px 10px 25px rgba(0,0,0,0.15); }

/* Audio Player */
.audio-player-container {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 48rem;
  z-index: 1050;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 500ms ease-out;
}
@media (min-width: 768px) { .audio-player-container { bottom: 1.5rem; } }

/* Progress Bar */
.progress-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 1.5rem; cursor: pointer; z-index: 10;
}
.progress-track {
  width: 100%; height: 0.375rem; background-color: #d1d5db; transition: all 200ms; position: relative;
}
@media (min-width: 768px) { .progress-track { height: 0.5rem; } }
.progress-container:hover .progress-track { height: 0.5rem; }
@media (min-width: 768px) { .progress-container:hover .progress-track { height: 0.625rem; } }
.progress-fill {
  position: absolute; top: 0; left: 0; height: 100%; background-color: var(--brand-teal);
  box-shadow: 0 0 8px rgba(97,201,168,0.6); transition: all 100ms linear; width: 33%;
}
.progress-thumb {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(50%);
  width: 1rem; height: 1rem; background-color: white; border: 3px solid var(--brand-teal);
  border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); opacity: 1; z-index: 20;
}
@media (min-width: 768px) {
  .progress-thumb { opacity: 0; transition: opacity 200ms; }
  .progress-container:hover .progress-thumb { opacity: 1; }
}

/* Custom Table fixes */
.doa-table {
  width: 100%;
  border-collapse: collapse;
}
@media (max-width: 767px) {
  .doa-table, .doa-table tbody, .doa-table tr, .doa-table td { display: block; }
}

/* Dark Mode Overrides */
body.dark-mode {
  --bg-slate-50: #0f172a;
  --text-slate-900: #f8fafc;
  --text-slate-500: #94a3b8;
  --border-gray-200: #1e293b;
  --brand-navy: #bfdbfe;
  --brand-maroon: #fbcfe8;
}

body.dark-mode .bg-white { 
  background-color: #0f172a !important; 
}
body.dark-mode .bg-light { 
  background-color: #1e293b !important; 
}
body.dark-mode .text-dark,
body.dark-mode .text-body { 
  color: #f8fafc !important; 
}
body.dark-mode .text-secondary,
body.dark-mode .text-muted { 
  color: #cbd5e1 !important; 
}
body.dark-mode .border-gray-200,
body.dark-mode .border-end { 
  border-color: #334155 !important; 
}
body.dark-mode .form-control {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}
body.dark-mode .form-control::placeholder {
  color: #64748b !important;
}
body.dark-mode .audio-player-container {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
body.dark-mode .progress-track {
  background-color: #334155;
}
body.dark-mode .bg-brand-navy {
  background-color: #1e293b !important;
}

/* Coming Soon Overlay */
.coming-soon-img {
    filter: blur(4px) brightness(0.8);
    transform: scale(1.05); /* Prevents blurred edges from bleeding */
}

/* Uniform Book Image Sizing */
.book-cover-img {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}