/**
 * booklet-themes.css - Sahalna Alykom 7 Wavy Booklet Themes (Light & Dark)
 * Version 31.0
 */

/* ===================================================
   1. ROOT DEFAULT: THEME 1 - أمواج الفجر السماوي (LIGHT)
   =================================================== */
:root,
.booklet-theme-aurora {
  --booklet-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 35%, #e0e7ff 70%, #f5f3ff 100%);
  --booklet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 Q 30 35 60 60 T 120 60' fill='none' stroke='%230ea5e9' stroke-opacity='0.18' stroke-width='2'/%3E%3Cpath d='M0 30 Q 30 5 60 30 T 120 30' fill='none' stroke='%236366f1' stroke-opacity='0.14' stroke-width='1.5'/%3E%3Cpath d='M0 90 Q 30 65 60 90 T 120 90' fill='none' stroke='%236366f1' stroke-opacity='0.14' stroke-width='1.5'/%3E%3C/svg%3E");
  --booklet-hero-bg: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  --booklet-hero-border: #bae6fd;
  --booklet-card-bg: #ffffff;
  --booklet-card-border: #cbd5e1;
  --booklet-text-title: #0f172a;
  --booklet-text-body: #1e293b;
  --booklet-text-muted: #475569;
  --booklet-table-th-bg: #f8fafc;
  --booklet-table-stripe: #f1f5f9;
  --booklet-opt-bg: #f8fafc;
  --booklet-tip-bg: rgba(245, 158, 11, 0.1);
  --booklet-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.12), 0 8px 10px -6px rgba(14, 165, 233, 0.06);
}

/* ===================================================
   2. THEME 2: شفق الغروب الذهبي (LIGHT WARM SUNSET)
   =================================================== */
.booklet-theme-sunset {
  --booklet-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 35%, #fee2e2 70%, #ffedd5 100%);
  --booklet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 50 Q 30 25 60 50 T 120 50' fill='none' stroke='%23f59e0b' stroke-opacity='0.22' stroke-width='2'/%3E%3Cpath d='M0 80 Q 30 55 60 80 T 120 80' fill='none' stroke='%23f43f5e' stroke-opacity='0.16' stroke-width='1.5'/%3E%3Cpath d='M0 20 Q 30 -5 60 20 T 120 20' fill='none' stroke='%23fbbf24' stroke-opacity='0.18' stroke-width='1.5'/%3E%3C/svg%3E");
  --booklet-hero-bg: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  --booklet-hero-border: #fde68a;
  --booklet-card-bg: #ffffff;
  --booklet-card-border: #fcd34d;
  --booklet-text-title: #451a03;
  --booklet-text-body: #78350f;
  --booklet-text-muted: #92400e;
  --booklet-table-th-bg: #fffbeb;
  --booklet-table-stripe: #fef3c7;
  --booklet-opt-bg: #fffdf5;
  --booklet-tip-bg: rgba(245, 158, 11, 0.12);
  --booklet-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15);
}

/* ===================================================
   3. THEME 3: أمواج الزمرد والنعناع (LIGHT MINT EMERALD)
   =================================================== */
.booklet-theme-emerald {
  --booklet-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 40%, #ccfbf1 80%, #f0fdfa 100%);
  --booklet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 Q 30 40 60 60 T 120 60' fill='none' stroke='%2310b981' stroke-opacity='0.2' stroke-width='2'/%3E%3Cpath d='M0 25 Q 30 5 60 25 T 120 25' fill='none' stroke='%2314b8a6' stroke-opacity='0.16' stroke-width='1.5'/%3E%3Cpath d='M0 95 Q 30 75 60 95 T 120 95' fill='none' stroke='%23059669' stroke-opacity='0.14' stroke-width='1.5'/%3E%3C/svg%3E");
  --booklet-hero-bg: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  --booklet-hero-border: #a7f3d0;
  --booklet-card-bg: #ffffff;
  --booklet-card-border: #86efac;
  --booklet-text-title: #064e3b;
  --booklet-text-body: #065f46;
  --booklet-text-muted: #047857;
  --booklet-table-th-bg: #f0fdf4;
  --booklet-table-stripe: #ecfdf5;
  --booklet-opt-bg: #f0fdf4;
  --booklet-tip-bg: rgba(16, 185, 129, 0.12);
  --booklet-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15);
}

/* ===================================================
   4. THEME 4: أمواج اللافندر الملكي (LIGHT ROYAL LAVENDER)
   =================================================== */
.booklet-theme-lavender {
  --booklet-bg: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 40%, #e9d5ff 75%, #fdf4ff 100%);
  --booklet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 50 Q 30 25 60 50 T 120 50' fill='none' stroke='%23a855f7' stroke-opacity='0.2' stroke-width='2'/%3E%3Cpath d='M0 85 Q 30 60 60 85 T 120 85' fill='none' stroke='%23d946ef' stroke-opacity='0.15' stroke-width='1.5'/%3E%3Cpath d='M0 15 Q 30 -10 60 15 T 120 15' fill='none' stroke='%23c084fc' stroke-opacity='0.16' stroke-width='1.5'/%3E%3C/svg%3E");
  --booklet-hero-bg: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  --booklet-hero-border: #e9d5ff;
  --booklet-card-bg: #ffffff;
  --booklet-card-border: #d8b4fe;
  --booklet-text-title: #4c1d95;
  --booklet-text-body: #5b21b6;
  --booklet-text-muted: #6d28d9;
  --booklet-table-th-bg: #faf5ff;
  --booklet-table-stripe: #f5f3ff;
  --booklet-opt-bg: #faf5ff;
  --booklet-tip-bg: rgba(168, 85, 247, 0.12);
  --booklet-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.15);
}

/* ===================================================
   5. THEME 5: أعماق الياقوت الأزرق (DARK SAPPHIRE OCEAN)
   =================================================== */
.booklet-theme-sapphire {
  --booklet-bg: linear-gradient(135deg, #020617 0%, #0b192c 40%, #1e1b4b 75%, #0c4a6e 100%);
  --booklet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 Q 30 35 60 60 T 120 60' fill='none' stroke='%2338bdf8' stroke-opacity='0.25' stroke-width='2'/%3E%3Cpath d='M0 25 Q 30 0 60 25 T 120 25' fill='none' stroke='%23818cf8' stroke-opacity='0.2' stroke-width='1.5'/%3E%3Cpath d='M0 95 Q 30 70 60 95 T 120 95' fill='none' stroke='%230284c7' stroke-opacity='0.2' stroke-width='1.5'/%3E%3C/svg%3E");
  --booklet-hero-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.9));
  --booklet-hero-border: rgba(56, 189, 248, 0.38);
  --booklet-card-bg: rgba(15, 23, 42, 0.92);
  --booklet-card-border: rgba(56, 189, 248, 0.3);
  --booklet-text-title: #ffffff;
  --booklet-text-body: #f8fafc;
  --booklet-text-muted: #94a3b8;
  --booklet-table-th-bg: rgba(30, 41, 59, 0.95);
  --booklet-table-stripe: rgba(15, 23, 42, 0.7);
  --booklet-opt-bg: rgba(30, 41, 59, 0.75);
  --booklet-tip-bg: rgba(245, 158, 11, 0.16);
  --booklet-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.6);
}

/* ===================================================
   6. THEME 6: الليل السيبراني الفضائي (DARK CYBER MATRIX)
   =================================================== */
.booklet-theme-cyber {
  --booklet-bg: linear-gradient(135deg, #050811 0%, #071927 40%, #064e3b 75%, #022c22 100%);
  --booklet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 50 Q 30 25 60 50 T 120 50' fill='none' stroke='%2310b981' stroke-opacity='0.28' stroke-width='2'/%3E%3Cpath d='M0 85 Q 30 60 60 85 T 120 85' fill='none' stroke='%2334d399' stroke-opacity='0.2' stroke-width='1.5'/%3E%3Cpath d='M0 15 Q 30 -10 60 15 T 120 15' fill='none' stroke='%23059669' stroke-opacity='0.2' stroke-width='1.5'/%3E%3C/svg%3E");
  --booklet-hero-bg: linear-gradient(135deg, rgba(7, 21, 36, 0.95), rgba(6, 78, 59, 0.88));
  --booklet-hero-border: rgba(16, 185, 129, 0.45);
  --booklet-card-bg: rgba(7, 21, 36, 0.92);
  --booklet-card-border: rgba(16, 185, 129, 0.32);
  --booklet-text-title: #ffffff;
  --booklet-text-body: #f0fdf4;
  --booklet-text-muted: #a7f3d0;
  --booklet-table-th-bg: rgba(6, 78, 59, 0.75);
  --booklet-table-stripe: rgba(7, 21, 36, 0.8);
  --booklet-opt-bg: rgba(6, 78, 59, 0.35);
  --booklet-tip-bg: rgba(16, 185, 129, 0.16);
  --booklet-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.7);
}

/* ===================================================
   7. THEME 7: جمشت وبرقوق ملكي داكن (DARK ROYAL PLUM)
   =================================================== */
.booklet-theme-plum {
  --booklet-bg: linear-gradient(135deg, #180828 0%, #2e1065 40%, #4a044e 75%, #1e1b4b 100%);
  --booklet-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 Q 30 35 60 60 T 120 60' fill='none' stroke='%23d946ef' stroke-opacity='0.25' stroke-width='2'/%3E%3Cpath d='M0 25 Q 30 0 60 25 T 120 25' fill='none' stroke='%23c084fc' stroke-opacity='0.2' stroke-width='1.5'/%3E%3Cpath d='M0 95 Q 30 70 60 95 T 120 95' fill='none' stroke='%23e879f9' stroke-opacity='0.2' stroke-width='1.5'/%3E%3C/svg%3E");
  --booklet-hero-bg: linear-gradient(135deg, rgba(46, 16, 101, 0.95), rgba(74, 4, 78, 0.9));
  --booklet-hero-border: rgba(217, 70, 239, 0.42);
  --booklet-card-bg: rgba(24, 8, 40, 0.92);
  --booklet-card-border: rgba(217, 70, 239, 0.32);
  --booklet-text-title: #ffffff;
  --booklet-text-body: #faf5ff;
  --booklet-text-muted: #d8b4fe;
  --booklet-table-th-bg: rgba(74, 4, 78, 0.75);
  --booklet-table-stripe: rgba(46, 16, 101, 0.8);
  --booklet-opt-bg: rgba(74, 4, 78, 0.4);
  --booklet-tip-bg: rgba(217, 70, 239, 0.16);
  --booklet-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.7);
}

/* ===================================================
   MODAL OVERLAY & SCROLL BODY FIXES
   =================================================== */

/* Clean overlay: Remove pitch black tint completely */
.booklet-clean-overlay {
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
}

.booklet-clean-overlay::before {
  display: none !important;
}

/* Body container with wavy gradient and SVG lines */
.laws-body.booklet-scroll-body {
  padding: 1.75rem 2.25rem !important;
  background: var(--booklet-bg) !important;
  background-image: var(--booklet-pattern), var(--booklet-bg) !important;
  background-attachment: fixed !important;
  background-size: 120px 120px, 100% 100% !important;
  overflow-y: auto !important;
  height: calc(100vh - 180px) !important;
  transition: background 0.35s ease, color 0.35s ease !important;
}

/* ===================================================
   THEME SWITCHER TOOLBAR
   =================================================== */
.booklet-theme-toolbar {
  background: var(--booklet-hero-bg, #ffffff);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--booklet-card-border, #cbd5e1);
  padding: 0.65rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

.theme-toolbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.theme-toolbar-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--booklet-text-title, #0f172a);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.theme-toolbar-label i {
  color: var(--brand-primary, #0d9488);
  font-size: 1.1rem;
}

.theme-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  overflow-x: auto;
  padding: 2px 0;
}

.theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  border: 1.5px solid var(--booklet-card-border, #cbd5e1);
  background: var(--booklet-card-bg, #ffffff);
  color: var(--booklet-text-body, #1e293b);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-family: inherit;
}

.theme-pill:hover {
  transform: translateY(-2px);
  border-color: #0d9488;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.theme-pill.active {
  border-color: #0d9488 !important;
  background: #0d9488 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4) !important;
  transform: scale(1.04);
}

.theme-pill.active .theme-dot {
  border: 2px solid #ffffff;
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
}

.theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Footer styling */
.booklet-footer-bar {
  background: var(--booklet-hero-bg, #ffffff) !important;
  border-top: 1px solid var(--booklet-card-border, #cbd5e1) !important;
  padding: 0.85rem 2rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 65px !important;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.04) !important;
  z-index: 10 !important;
  transition: all 0.3s ease !important;
}

.booklet-footer-bar span {
  color: var(--booklet-text-title, #0f172a) !important;
  font-weight: 800 !important;
}

@media (max-width: 768px) {
  .laws-body.booklet-scroll-body {
    padding: 1rem 0.85rem !important;
  }
  .theme-toolbar-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .theme-pills {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .theme-pill {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
  }
}