/* ============================================
   SEARCH.CSS - نظام البحث الموحد
   الموقع: search/shared/css/search.css
   ============================================
   
   📋 محتويات الملف:
   1. CSS VARIABLES - متغيرات موحدة
   2. SEARCH PANEL - صندوق البحث الرئيسي
   3. SEARCH INPUT - حقول الإدخال
   4. SEARCH BUTTONS - الأزرار الملونة
   5. QURAN UMBRELLA BTN - زر القرآن العلوي
   6. TAB SYSTEM - نظام التبويبات وإضاءاتها
   7. QURAN SEARCH - بطاقات وأزرار القرآن
   8. QIRAAT COMPARISON - مقارنة القراءات
   9. HADITH LABELS - ألوان labels الحديث
   10. SEARCH RESULTS - بطاقات النتائج
   11. SEARCH HISTORY - سجل البحث
   12. HIGHLIGHTING - تظليل النتائج
   13. MODALS & TOASTS - النوافذ والإشعارات
   14. RESPONSIVE - تجاوبية الشاشات
   
   📅 آخر تحديث: 2026-01-17
   ============================================ */

/* ============================================
   1. CSS VARIABLES - متغيرات موحدة
   ============================================ */
:root {
   /* ألوان صناديق البحث */
   --search-input-bg: rgba(255, 255, 255, 0.05);
   --search-input-border: rgba(255, 255, 255, 0.15);
   --search-input-color: #f8fafc;
   --search-input-radius: 1rem;
   --search-btn-radius: 1rem;

   /* ألوان التظليل */
   --search-highlight-bg: rgba(251, 191, 36, 0.15);
   --diff-highlight-color: #f59e0b;
   --match-highlight-color: #dc2626;

   /* ألوان labels الحديث */
   --hadith-bab-color: #fbbf24;
   --hadith-sanad-color: #22d3ee;
   --hadith-matn-color: #34d399;
   --hadith-highlight-bg: rgba(251, 191, 36, 0.15);

   /* ألوان القرآن */
   --quran-accent: #10b981;
   --quran-accent-glow: rgba(16, 185, 129, 0.2);
   --quran-diff-orange: #f59e0b;
}

/* ============================================
   2. SEARCH PANEL - صندوق البحث الرئيسي
   ============================================ */
.search-panel {
   background: var(--search-panel-bg);
   border: 1px solid var(--search-panel-border);
   border-radius: var(--search-panel-radius);
   box-shadow: var(--search-panel-shadow);
   padding: 2.5rem;
   padding-bottom: 1.5rem;
   margin-bottom: 0;
}

.search-panel form.space-y-6 {
   display: flex;
   flex-direction: column;
   margin-bottom: 0;
   padding-bottom: 0;
}

.search-panel form.space-y-6>* {
   margin-top: 0;
   margin-bottom: 0;
}

.search-panel form.space-y-6>*+* {
   margin-top: 1.5rem;
}

.search-panel form.space-y-6>*:first-child {
   margin-top: 0;
   padding-top: 0;
}

.search-panel form.space-y-6>input[type="hidden"] {
   display: none;
   margin: 0;
   padding: 0;
   height: 0;
   width: 0;
}

.search-panel form.space-y-6>button[type="submit"]:last-of-type {
   margin-top: 0;
   /* ⭐ تم ضبط المسافة من سجل البحث بدلاً من هنا */
   margin-bottom: 0;
}

/* ============================================
   3. SEARCH INPUT - حقول الإدخال
   ============================================ */
.search-panel-label {
   display: block;
   font-size: 0.875rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   color: var(--search-label-color);
   font-family: 'Cairo', sans-serif;
}

.search-panel-input {
   width: 100%;
   padding: 0.875rem 1.5rem;
   font-size: 1rem;
   background: var(--search-input-bg);
   border: 1px solid var(--search-input-border);
   border-radius: var(--search-input-radius);
   color: var(--search-input-color);
   transition: all 0.3s ease;
   font-family: 'Cairo', sans-serif;
   font-weight: 500;
}

.search-panel-select {
   width: 100%;
   padding: 0.875rem 1.5rem;
   font-size: 1rem;
   background: var(--search-input-bg);
   border: 1px solid var(--search-input-border);
   border-radius: var(--search-input-radius);
   color: var(--search-input-color);
   transition: all 0.3s ease;
   font-family: 'Cairo', sans-serif;
   font-weight: 500;
}

.search-panel-select option {
   background: var(--select-option-bg);
   color: var(--select-option-color);
   font-family: 'Cairo', sans-serif;
   font-weight: 500;
}

.search-panel-input:focus,
.search-panel-select:focus {
   outline: none;
   border-color: var(--search-input-focus-border);
   box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

.search-panel-input::placeholder {
   color: var(--search-placeholder-color);
}

/* ⭐ إصلاحات الوضع النهاري - حدود واضحة */
[data-theme="academic"] .search-panel-input,
[data-theme="academic"] .search-panel-select {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.2);
   color: #111827;
}

[data-theme="academic"] .search-panel-input:focus,
[data-theme="academic"] .search-panel-select:focus {
   border-color: var(--primary-color, #1565C0);
   box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

[data-theme="academic"] .search-panel-input::placeholder {
   color: #6b7280;
}

/* ⭐ إصلاح صندوق البحث السريع في الهيدر */
[data-theme="academic"] .quick-search-input,
[data-theme="academic"] input[type="search"],
[data-theme="academic"] header input[type="text"] {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.2);
   color: #111827;
}

[data-theme="academic"] .quick-search-input::placeholder,
[data-theme="academic"] header input::placeholder {
   color: #6b7280;
}

.search-panel-input-lg {
   padding: 1.25rem 1.5rem;
   padding-right: 3.5rem;
   font-size: 1.125rem;
   border-radius: 1rem;
}

/* زر مسح البحث */
.search-clear-btn {
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   color: #9ca3af;
   transition: color 0.2s ease;
   cursor: pointer;
   padding: 0.25rem;
   border-radius: 50%;
}

.search-clear-btn:hover {
   color: #ef4444;
   background: rgba(239, 68, 68, 0.1);
}

.search-clear-btn svg {
   width: 1.5rem;
   height: 1.5rem;
}

/* ============================================
   4. SEARCH BUTTONS - الأزرار الملونة
   ============================================ */
.search-panel-btn {
   width: 100%;
   padding: 1.25rem;
   font-size: 1.125rem;
   font-weight: 700;
   border: none;
   border-radius: var(--search-btn-radius);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
   transition: all 0.3s ease;
   box-shadow: var(--search-btn-shadow);
   font-family: 'Cairo', sans-serif;
}

.search-panel-btn:hover {
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.search-panel-btn-gold {
   background: linear-gradient(135deg, var(--tab-gold-bg-start) 0%, var(--tab-gold-bg-end) 100%);
   color: var(--tab-gold-text);
}

.search-panel-btn-gold:hover {
   background: linear-gradient(135deg, var(--tab-gold-bg-end) 0%, var(--tab-gold-bg-start) 100%);
}

.search-panel-btn-cyan {
   background: linear-gradient(135deg, var(--tab-cyan-bg-start) 0%, var(--tab-cyan-bg-end) 100%);
   color: var(--tab-cyan-text);
}

.search-panel-btn-cyan:hover {
   background: linear-gradient(135deg, var(--tab-cyan-bg-end) 0%, var(--tab-cyan-bg-start) 100%);
}

.search-panel-btn-ai {
   background: linear-gradient(135deg, var(--tab-ai-bg-start) 0%, var(--tab-ai-bg-end) 100%);
   color: var(--tab-ai-text);
}

.search-panel-btn-ai:hover {
   background: linear-gradient(135deg, var(--tab-ai-bg-end) 0%, var(--tab-ai-bg-start) 100%);
}

.search-panel-btn-purple {
   background: linear-gradient(135deg, var(--tab-purple-bg-start) 0%, var(--tab-purple-bg-end) 100%);
   color: var(--tab-purple-text);
}

.search-panel-btn-purple:hover {
   background: linear-gradient(135deg, var(--tab-purple-bg-end) 0%, var(--tab-purple-bg-start) 100%);
}

.search-panel-btn-green {
   background: linear-gradient(135deg, var(--tab-green-bg-start) 0%, var(--tab-green-bg-end) 100%);
   color: var(--tab-green-text);
}

.search-panel-btn-green:hover {
   background: linear-gradient(135deg, var(--tab-green-bg-end) 0%, var(--tab-green-bg-start) 100%);
}

/* ============================================
   5. QURAN UMBRELLA BTN - زر القرآن العلوي
   ⭐ تم نقله إلى: /search/quran/css/quran.css
   ============================================ */
.quran-umbrella-btn {
   position: relative;
   z-index: 10;
   letter-spacing: 0.05em;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   box-shadow:
      0 8px 32px rgba(25, 124, 234, 0.3),
      0 16px 48px rgba(25, 124, 234, 0.2),
      0 24px 64px rgba(25, 124, 234, 0.15);
}

.quran-umbrella-btn::after {
   content: '';
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
   height: 40px;
   background: radial-gradient(ellipse at center, rgba(25, 124, 234, 0.4) 0%, transparent 70%);
   filter: blur(20px);
   pointer-events: none;
   z-index: -1;
   opacity: 0.8;
   transition: opacity 0.3s ease, height 0.3s ease;
}

.quran-umbrella-btn:hover {
   box-shadow:
      0 8px 32px rgba(25, 124, 234, 0.5),
      0 16px 48px rgba(25, 124, 234, 0.35),
      0 24px 64px rgba(25, 124, 234, 0.25);
}

.quran-umbrella-btn:hover::after {
   opacity: 1;
   height: 50px;
}

.quran-umbrella-btn.active {
   box-shadow:
      0 8px 40px rgba(25, 124, 234, 0.6),
      0 20px 60px rgba(25, 124, 234, 0.4),
      0 30px 80px rgba(25, 124, 234, 0.3);
   transform: scale(1.02);
}

.quran-umbrella-btn.active::after {
   opacity: 1;
   height: 60px;
   background: radial-gradient(ellipse at center, rgba(25, 124, 234, 0.5) 0%, transparent 70%);
}

/* ============================================
   6. TAB SYSTEM - نظام التبويبات وإضاءاتها
   ============================================ */

/* شبكة مركز البحث: عمود واحد على الموبايل، 2×2 من md فما فوق */
.search-hub-tabs-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0.625rem;
   width: 100%;
}

@media (min-width: 768px) {
   .search-hub-tabs-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 1.25rem;
   }
}

@media (min-width: 1024px) {
   .search-hub-tabs-grid {
      gap: 1.125rem 1.5rem;
   }
}

.search-hub-tab-btn {
   width: 100%;
   min-width: 0;
   flex: none;
   padding: 0.7rem 0.85rem;
   font-size: 0.95rem;
}

@media (min-width: 768px) {
   .search-hub-tab-btn {
      padding: 0.85rem 1.15rem;
      font-size: 1rem;
   }
}

.search-hub-quran-btn {
   padding: 0.85rem 1rem;
}

@media (min-width: 768px) {
   .search-hub-quran-btn {
      padding: 1.35rem 2.5rem;
   }
}

#tabs-container {
   position: relative;
   margin-top: 12px;
}

@media (min-width: 768px) {
   #tabs-container {
      margin-top: 20px;
   }
}

#tabs-container::before {
   content: '';
   position: absolute;
   top: -30px;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   max-width: 800px;
   height: 30px;
   background: radial-gradient(ellipse at center, rgba(25, 124, 234, 0.25) 0%, transparent 70%);
   filter: blur(15px);
   pointer-events: none;
   z-index: 0;
   opacity: 0.6;
}

/* وصف مختصر تحت عنوان كل تبويب */
.search-tab-subtitle {
   margin: 0;
   max-width: 22rem;
   font-size: 0.75rem;
   line-height: 1.45;
   font-weight: 400;
   text-align: center;
   color: var(--text-secondary, rgba(148, 163, 184, 0.92));
   opacity: 0.88;
   letter-spacing: 0;
   text-shadow: none;
}

.quran-umbrella-btn .search-tab-subtitle {
   max-width: 36rem;
   font-size: 0.8125rem;
   line-height: 1.5;
   opacity: 0.9;
}

/* وصف التبويب: أبيض عند التفعيل أو تحريك الماوس (قراءة واضحة على الخلفية الملوّنة) */
.filter-btn.active .search-tab-subtitle,
.filter-btn:hover:not(.active) .search-tab-subtitle,
.quran-umbrella-btn.active .search-tab-subtitle,
.quran-umbrella-btn:hover:not(.active) .search-tab-subtitle {
   color: rgba(255, 255, 255, 0.94);
   opacity: 1;
}

#tabs-container .filter-btn .search-tab-subtitle {
   max-width: 15.5rem;
   font-size: 0.78rem;
}

@media (max-width: 767px) {
   .search-page .search-hub-header h1 {
      font-size: 1.75rem;
      line-height: 1.25;
   }

   .search-page .search-hub-header p {
      font-size: 0.9rem;
      padding-inline: 0.5rem;
   }

   .search-page .search-tab-subtitle {
      max-width: 100%;
      font-size: 0.7rem;
      line-height: 1.38;
      padding-inline: 0.35rem;
   }

   .search-page .quran-umbrella-btn .search-tab-subtitle {
      font-size: 0.72rem;
      line-height: 1.4;
   }

   #tabs-container .filter-btn .search-tab-subtitle {
      max-width: 100%;
   }

   .search-hub-tab-btn>span {
      font-size: 0.95rem;
   }

   .search-hub-tab-btn svg {
      width: 1.125rem;
      height: 1.125rem;
   }
}

#tabs-container .filter-btn {
   position: relative;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#tabs-container .filter-btn::before {
   content: '';
   position: absolute;
   top: -8px;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   height: 8px;
   background: linear-gradient(to bottom, rgba(25, 124, 234, 0.3), transparent);
   border-radius: 50%;
   filter: blur(4px);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

#tabs-container .filter-btn:hover::before {
   opacity: 1;
}

#tabs-container .filter-btn.active::before {
   opacity: 1;
   background: linear-gradient(to bottom, rgba(25, 124, 234, 0.5), transparent);
   height: 12px;
}

/* ============================================
   7. QURAN SEARCH - بطاقات وأزرار القرآن
   ⭐ تم نقله إلى: /search/quran/css/quran.css
   ============================================ */

/* شريط التحكم اللاصق */
.quran-sticky-controls {
   position: sticky;
   top: 10px;
   z-index: 100;
   margin-top: 1.5rem;
   /* ⭐ مسافة متساوية مع العناصر الأخرى */
   margin-bottom: 1.5rem;
   /* ⭐ مسافة متساوية قبل النتائج */
}

.quran-controls-card {
   background: var(--glass-bg, rgba(15, 23, 42, 0.9));
   backdrop-filter: blur(30px);
   border-radius: 50px;
   padding: 10px 20px;
   /* ⭐ زيادة padding-right لضمان مسافة مناسبة من اليمين */
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   width: fit-content;
   /* ⭐ حجم متناسق مع المحتوى */
   min-width: fit-content;
}

[data-theme="academic"] .quran-controls-card {
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

/* حاوية شرائح القراءات - ⭐ توزيع 7 + 7 */
.quran-chips-container {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   flex-grow: 1;
   padding: 5px 0;
   max-width: 100%;
   /* ⭐ توزيع متساوي: 7 عناصر في الصف الأول، 7 في الصف الثاني */
   align-content: flex-start;
   /* ⭐ ضمان أن كل صف يحتوي على 7 عناصر بالضبط */
   --items-per-row: 7;
}

/* ⭐ توزيع دقيق: 7 عناصر في الصف الأول (6 قراءات + 1 تحويل)، 7 في الصف الثاني */
.quran-chips-container>* {
   flex: 0 0 calc((100% - (var(--items-per-row) - 1) * 8px) / var(--items-per-row));
   max-width: calc((100% - (var(--items-per-row) - 1) * 8px) / var(--items-per-row));
}

.quran-chips-container::-webkit-scrollbar {
   width: 4px;
   height: 4px;
}

.quran-chips-container::-webkit-scrollbar-track {
   background: transparent;
}

.quran-chips-container::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 2px;
}

/* ⭐ زر وضع المقارنات - متناسق مع أزرار القراءات */
.quran-mode-toggle-btn {
   padding: 6px 16px;
   border-radius: 50px;
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
   background: var(--glass-bg, rgba(15, 23, 42, 0.8));
   color: var(--text-primary, #f8fafc);
   cursor: pointer;
   font-size: 0.85rem;
   white-space: nowrap;
   font-family: 'Cairo', sans-serif;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   flex-shrink: 0;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quran-mode-toggle-btn:hover {
   background: rgba(59, 130, 246, 0.15);
   border-color: rgba(59, 130, 246, 0.5);
   transform: translateY(-2px);
}

.quran-mode-toggle-btn .mode-toggle-label {
   font-weight: 600;
}

.quran-mode-toggle-btn .mode-toggle-switch {
   position: relative;
   width: 32px;
   height: 18px;
   border-radius: 999px;
   background: rgba(15, 23, 42, 0.9);
   border: 1px solid rgba(148, 163, 184, 0.8);
   flex-shrink: 0;
}

.quran-mode-toggle-btn .mode-toggle-knob {
   position: absolute;
   top: 2px;
   right: 2px;
   width: 14px;
   height: 14px;
   border-radius: 999px;
   background: #e5e7eb;
   box-shadow: 0 1px 4px rgba(15, 23, 42, 0.6);
}

.quran-mode-toggle-btn.active {
   background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, #2563eb));
   color: #fff;
   border-color: var(--primary, #60a5fa);
   box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
}

.quran-mode-toggle-btn.active .mode-toggle-switch {
   background: rgba(15, 23, 42, 0.2);
   border-color: rgba(191, 219, 254, 0.9);
}

.quran-mode-toggle-btn.active .mode-toggle-knob {
   right: auto;
   left: 2px;
   background: #f9fafb;
}

/* أزرار القراءات */
.quran-reading-btn {
   padding: 6px 16px;
   border-radius: 50px;
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
   background: var(--glass-bg, rgba(15, 23, 42, 0.8));
   color: var(--text-primary, #f8fafc);
   cursor: pointer;
   font-size: 0.85rem;
   white-space: nowrap;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: 'Cairo', sans-serif;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   /* ⭐ توسيط النص */
   gap: 6px;
   flex-shrink: 0;
}

.quran-reading-btn:hover {
   background: rgba(59, 130, 246, 0.15);
   border-color: rgba(59, 130, 246, 0.5);
   transform: translateY(-2px);
}

.quran-reading-btn.active {
   background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, #2563eb));
   color: #fff;
   border-color: var(--primary, #60a5fa);
   box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
   transform: scale(1.02);
}

/* ============================================
   PAGINATION - ترقيم الصفحات (مطابق لصفحة الإدارة)
   ============================================ */
.quran-pagination-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
   margin: 30px 0;
   padding: 20px;
   background: var(--glass-bg, rgba(15, 23, 42, 0.6));
   border-radius: 12px;
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

.quran-pagination {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   justify-content: center;
}

.quran-page-numbers {
   display: flex;
   align-items: center;
   gap: 5px;
}

.quran-page-btn {
   min-width: 40px;
   height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--glass-bg, rgba(255, 255, 255, 0.08));
   color: var(--text-primary, #fff);
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
   border-radius: 8px;
   text-decoration: none;
   font-weight: 600;
   font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.2s;
}

.quran-page-btn:hover {
   background: rgba(255, 215, 0, 0.15);
   border-color: var(--accent-gold, #ffd700);
   color: var(--accent-gold, #ffd700);
}

.quran-page-btn-active {
   background: linear-gradient(135deg, var(--accent-gold, #ffd700), #ffaa00);
   color: var(--bg-primary, #1a1a2e);
   border-color: var(--accent-gold, #ffd700);
}

.quran-page-ellipsis {
   color: var(--text-muted, #777);
   padding: 0 8px;
   font-size: 1rem;
}

.quran-page-info-container {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   justify-content: center;
}

.quran-page-info {
   color: var(--text-secondary, #aaa);
   font-size: 0.95rem;
}

.quran-goto-form {
   display: flex;
   align-items: center;
   gap: 8px;
}

.quran-goto-input {
   width: 70px;
   padding: 8px 10px;
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
   border-radius: 6px;
   background: rgba(0, 0, 0, 0.3);
   color: var(--text-primary, #fff);
   font-size: 0.9rem;
   text-align: center;
}

.quran-goto-input:focus {
   outline: none;
   border-color: var(--accent-gold, #ffd700);
}

.quran-goto-btn {
   padding: 8px 16px;
   background: var(--glass-bg, rgba(255, 255, 255, 0.08));
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
   border-radius: 6px;
   color: var(--text-primary, #fff);
   font-size: 0.85rem;
   cursor: pointer;
   transition: all 0.2s;
}

.quran-goto-btn:hover {
   background: rgba(255, 215, 0, 0.15);
   border-color: var(--accent-gold, #ffd700);
}

/* Academic Theme - الوضع النهاري */
[data-theme="academic"] .quran-pagination-container {
   background: rgba(255, 255, 255, 0.9);
   border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="academic"] .quran-page-btn {
   background: rgba(255, 255, 255, 0.95);
   color: #1f2937;
   border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="academic"] .quran-page-btn:hover {
   background: rgba(255, 215, 0, 0.2);
   border-color: #d4a500;
   color: #92660a;
}

[data-theme="academic"] .quran-page-btn-active {
   background: linear-gradient(135deg, #ffd700, #ffaa00);
   color: #1a1a2e;
   border-color: #ffd700;
}

[data-theme="academic"] .quran-page-ellipsis {
   color: #6b7280;
}

[data-theme="academic"] .quran-page-info {
   color: #4b5563;
}

[data-theme="academic"] .quran-goto-input {
   background: #ffffff;
   color: #111827;
   border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="academic"] .quran-goto-input:focus {
   border-color: #d4a500;
}

[data-theme="academic"] .quran-goto-btn {
   background: #f3f4f6;
   color: #1f2937;
   border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="academic"] .quran-goto-btn:hover {
   background: rgba(255, 215, 0, 0.2);
   border-color: #d4a500;
}

/* Responsive */
@media (max-width: 600px) {
   .quran-pagination {
      gap: 5px;
   }

   .quran-page-btn {
      min-width: 35px;
      height: 35px;
      font-size: 0.85rem;
   }

   .quran-page-info-container {
      flex-direction: column;
      gap: 10px;
   }
}

.quran-reading-btn.has-diff {
   border-color: rgba(245, 158, 11, 0.4);
   box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
   position: relative;
}

.quran-reading-btn.has-diff::after {
   content: '';
   position: absolute;
   top: -2px;
   right: -2px;
   width: 8px;
   height: 8px;
   background: #f59e0b;
   border-radius: 50%;
   box-shadow: 0 0 8px #f59e0b;
}

/* مفتاح تبديل الوضع - ⭐ تحويل إلى Switch */
/* ⭐ إخفاء مفتاح تبديل الوضع القديم - تم دمجه مع الأزرار */
.quran-mode-toggle {
   display: none;
   /* ⭐ تم دمجه مع أزرار القراءات */
}

.quran-mode-label {
   font-size: 0.85rem;
   color: var(--text-secondary, #94a3b8);
   font-family: 'Cairo', sans-serif;
   white-space: nowrap;
}

/* ⭐ Switch Toggle بدلاً من Checkbox */
.quran-mode-toggle .switch {
   position: relative;
   display: inline-block;
   width: 44px;
   height: 24px;
   flex-shrink: 0;
}

.quran-mode-toggle .switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.quran-mode-toggle .switch .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(255, 255, 255, 0.2);
   transition: 0.3s;
   border-radius: 24px;
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
}

.quran-mode-toggle .switch .slider:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   left: 2px;
   bottom: 2px;
   background-color: #fff;
   transition: 0.3s;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.quran-mode-toggle .switch input:checked+.slider {
   background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, #2563eb));
   border-color: var(--primary, #60a5fa);
}

.quran-mode-toggle .switch input:checked+.slider:before {
   transform: translateX(20px);
}

.quran-mode-toggle .switch input:focus+.slider {
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ⭐ الوضع النهاري للـ Switch */
[data-theme="academic"] .quran-mode-toggle .switch .slider {
   background-color: rgba(0, 0, 0, 0.15);
   border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="academic"] .quran-mode-toggle .switch .slider:before {
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

[data-theme="academic"] .quran-mode-toggle .switch input:checked+.slider {
   background: linear-gradient(135deg, #3b82f6, #2563eb);
   border-color: #3b82f6;
}

/* بطاقة الآية */
/* ⭐ منطقة النتائج - إزالة margin-top الكبير من Tailwind */
#quran-results {
   margin-top: 0;
   /* ⭐ إزالة mt-8 من Tailwind - المسافة تأتي من quran-stats-bar */
}

.quran-verse-card {
   background: var(--glass-bg, rgba(30, 41, 59, 0.4));
   backdrop-filter: blur(20px);
   border-radius: 24px;
   padding: 30px;
   margin-bottom: 30px;
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
   position: relative;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="academic"] .quran-verse-card {
   box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

/* ⭐ أول بطاقة آية - مسافة متساوية بعد شريط الإحصائيات */
#quran-results .quran-verse-card:first-child {
   margin-top: 0;
   /* ⭐ لا توجد مسافة إضافية - المسافة تأتي من quran-stats-bar */
}

.quran-verse-card:hover {
   border-color: var(--primary, #10b981);
}

/* رأس الآية */
.quran-verse-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

.quran-verse-ref {
   color: var(--primary, #10b981);
   font-weight: 700;
   font-size: 1.3rem;
}

/* نص الآية */
.quran-verse-text {
   font-family: 'Amiri Quran', 'Amiri', serif;
   font-size: 2rem;
   line-height: 2.2;
   text-align: center;
   margin: 25px 0;
   padding: 15px;
   color: var(--text-primary, #fff);
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   cursor: pointer;
}

/* Smart-Text Overlay (PoC) */
.quran-smart-text-wrapper {
   position: relative;
   display: inline-block;
   isolation: isolate;
}

.quran-smart-text-content {
   position: relative;
   z-index: 1;
}

.quran-smart-text-overlay {
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
   user-select: none;
}

.quran-smart-text-ink {
   position: absolute;
   inset: 0;
   pointer-events: none;
   user-select: none;
   white-space: pre-wrap;
   direction: rtl;
   unicode-bidi: plaintext;
   font: inherit;
   line-height: inherit;
   text-align: inherit;
   letter-spacing: inherit;
   opacity: 0.92;
}

.quran-smart-text-box {
   position: absolute;
   border-radius: 4px;
   opacity: 0.35;
   mix-blend-mode: color;
   filter: saturate(1.1);
}

.quran-query-highlight {
   color: var(--match-highlight-color);
   font-weight: inherit;
}


[data-theme="academic"] .quran-smart-text-box {
   opacity: 0.22;
}

[data-theme="dark"] .quran-smart-text-box {
   opacity: 0.45;
}

.quran-verse-text:hover {
   color: var(--primary, #10b981);
}

/* قسم القراءة */
.quran-reading-section {
   border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.05));
   padding-top: 20px;
   margin-top: 25px;
}

.quran-reading-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
   flex-wrap: wrap;
   gap: 10px;
}

.quran-reading-label {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 1.1rem;
   font-weight: 600;
}

.quran-reading-badge {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: 'Cairo', sans-serif;
}

.quran-status-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
}

.quran-reading-context {
   font-size: 0.9rem;
   color: var(--text-secondary, #94a3b8);
   opacity: 0.8;
}

/* أزرار الإجراءات */
.quran-action-btn {
   background: var(--glass-bg, rgba(30, 41, 59, 0.7));
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
   color: #fff;
   padding: 10px 14px;
   border-radius: 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.quran-action-btn:hover {
   background: var(--primary, #10b981);
   border-color: var(--primary, #10b981);
}

.quran-action-btn.audio-btn:hover {
   background: #3b82f6;
   border-color: #3b82f6;
}

.quran-action-btn.playing {
   background: #ef4444;
   border-color: #ef4444;
   animation: none;
}

[data-theme="academic"] .quran-action-btn {
   background: rgba(30, 41, 59, 0.8);
   border-color: rgba(15, 23, 42, 0.6);
   color: #fff;
}

@keyframes quran-pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
   }

   70% {
      box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
   }
}

/* شريط إحصائيات النتائج */
.quran-stats-bar {
   color: var(--text-secondary, #94a3b8);
   font-size: 1.05rem;
   margin-bottom: 1.5rem;
   font-family: 'Cairo', sans-serif;
}

.quran-stats-layout {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.quran-stats-count {
   white-space: nowrap;
}

.quran-stats-pages {
   flex: 1;
   display: flex;
   justify-content: center;
}

/* ============================================
   8. QIRAAT COMPARISON - مقارنة القراءات
   ⭐ تم نقله إلى: /search/quran/css/quran.css
   ============================================ */
.qiraat-comparison-card {
   /* تم إزالة الأنيميشن */
}

.qiraat-split-view {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
   margin-top: 1.5rem;
}

@media (max-width: 1024px) {
   .qiraat-split-view {
      grid-template-columns: 1fr;
   }
}

.qiraat-base-panel {
   position: sticky;
   top: 1rem;
   height: fit-content;
   max-height: calc(100vh - 2rem);
   overflow-y: auto;
   background: var(--card-bg, rgba(255, 255, 255, 0.05));
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
   border-radius: 1rem;
   padding: 1.5rem;
}

.qiraat-comparison-panel {
   background: var(--card-bg, rgba(255, 255, 255, 0.05));
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
   border-radius: 1rem;
   padding: 1.5rem;
}

/* Tabs للقراءات */
.qiraat-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 1rem;
   border-bottom: 2px solid var(--border-color, rgba(255, 255, 255, 0.1));
   padding-bottom: 0.5rem;
}

.qiraat-tab {
   padding: 0.5rem 1rem;
   background: transparent;
   border: none;
   border-bottom: 2px solid transparent;
   color: var(--text-secondary, rgba(255, 255, 255, 0.7));
   cursor: pointer;
   font-size: 0.9rem;
   position: relative;
}

.qiraat-tab:hover {
   color: var(--text-main, #ffffff);
   background: rgba(255, 255, 255, 0.05);
}

.qiraat-tab.active {
   color: var(--primary, #3b82f6);
   border-bottom-color: var(--primary, #3b82f6);
   font-weight: bold;
}

.qiraat-tab.has-diff::after {
   content: '●';
   position: absolute;
   top: 0.25rem;
   right: 0.25rem;
   color: #f59e0b;
   font-size: 0.6rem;
}

.qiraat-tab-content {
   display: none;
}

.qiraat-tab-content.active {
   display: block;
   /* تم إزالة الأنيميشن */
}

/* Accordion للشاشات الصغيرة */
.qiraat-accordion {
   display: none;
}

@media (max-width: 1024px) {
   .qiraat-split-view {
      display: none;
   }

   .qiraat-accordion {
      display: block;
   }
}

.qiraat-accordion-item {
   margin-bottom: 1rem;
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
   border-radius: 0.75rem;
   overflow: hidden;
   background: var(--card-bg, rgba(255, 255, 255, 0.05));
}

.qiraat-accordion-header {
   padding: 1rem;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.qiraat-accordion-header:hover {
   background: rgba(255, 255, 255, 0.05);
}

.qiraat-accordion-header.active {
   background: rgba(59, 130, 246, 0.1);
   border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.qiraat-accordion-content {
   max-height: 0;
   overflow: hidden;
   /* تم إزالة الأنيميشن */
}

.qiraat-accordion-content.active {
   max-height: 2000px;
   padding: 1rem;
}

/* ألوان الفروقات */
.diff-minor {
   background: rgba(34, 197, 94, 0.2);
   border-bottom: 2px solid rgba(34, 197, 94, 0.4);
}

.diff-medium {
   background: rgba(251, 191, 36, 0.3);
   border-bottom: 2px solid rgba(251, 191, 36, 0.5);
}

.diff-major {
   background: rgba(239, 68, 68, 0.25);
   border-bottom: 2px solid rgba(239, 68, 68, 0.5);
}

.diff-same {
   color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}

.qiraat-toggle-btn {
   background: var(--glass-bg, rgba(255, 255, 255, 0.1));
   border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
   color: var(--text-main, #ffffff);
   backdrop-filter: blur(8px);
}

.qiraat-toggle-btn:hover {
   background: var(--glass-bg-hover, rgba(255, 255, 255, 0.15));
   border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.3));
}

/* ============================================
   9. HADITH LABELS - ألوان labels الحديث
   ============================================ */
.amiri-vocalized {
   font-family: 'Amiri', serif;
   line-height: 2.4;
   font-size: 1.55rem;
   text-align: justify;
   padding-bottom: 1rem;
}

@media (max-width: 768px) {
   .amiri-vocalized {
      font-size: 1.35rem;
      line-height: 2.2;
   }
}

.hadith-label-tag {
   font-family: 'Amiri', serif;
   font-weight: bold;
   font-size: 1.2rem;
   display: block;
   margin-bottom: 0.4rem;
   opacity: 0.9;
}

.hadith-result-card {
   padding: 1.5rem;
   border-radius: 1rem;
   margin-bottom: 1.5rem;
}

.hadith-number {
   color: #22d3ee;
   font-weight: bold;
}

.hadith-bab-label {
   color: var(--hadith-bab-color, #fbbf24);
}

.hadith-sanad-label {
   color: var(--hadith-sanad-color, #22d3ee);
}

.hadith-matn-label {
   color: var(--hadith-matn-color, #34d399);
}

/* الوضع الأكاديمي */
[data-theme="academic"] .hadith-bab-label {
   color: rgb(197, 79, 7);
}

[data-theme="academic"] .hadith-sanad-label {
   color: #0369a1;
}

[data-theme="academic"] .hadith-matn-label {
   color: #047857;
}

/* ============================================
   10. HIGHLIGHTING - تظليل النتائج
   ============================================ */
.match-highlight {
   color: var(--match-highlight-color);
   font-weight: 700;
   background: none;
   border: none;
}

/* ⭐ ألوان الفروقات تم نقلها إلى: /search/quran/css/quran.css */

/* ⭐ التظليل الأساسي للكلمات المطابقة تماماً - لون أحمر واضح */
.search-highlight,
mark.search-highlight {
   color: #dc2626;
   font-weight: 700;
   background: none;
   border: none;
   padding: 0;
}

/* ⭐ التظليل الثانوي للكلمات القريبة - لون برتقالي خافت */
.search-highlight-secondary,
mark.search-highlight-secondary {
   color: #ea580c;
   font-weight: 700;
   background: none;
   border: none;
   padding: 0;
}

/* الوضع النهاري - نفس الألوان لأنها واضحة على الخلفية الفاتحة */
[data-theme="academic"] .search-highlight,
[data-theme="academic"] mark.search-highlight {
   color: #dc2626;
   font-weight: 700;
   background: none;
}

[data-theme="academic"] .search-highlight-secondary,
[data-theme="academic"] mark.search-highlight-secondary {
   color: #ea580c;
   font-weight: 700;
   background: none;
}

/* الوضع الداكن - أحمر أفتح للوضوح */
[data-theme="dark"] .search-highlight,
[data-theme="dark"] mark.search-highlight {
   color: #f87171;
   font-weight: 700;
   background: none;
}

[data-theme="dark"] .search-highlight-secondary,
[data-theme="dark"] mark.search-highlight-secondary {
   color: #fb923c;
   font-weight: 700;
   background: none;
}

[data-theme="academic"] .match-highlight {
   color: #dc2626;
}

[data-theme="dark"] {
   --match-highlight-color: #f87171;
}

/* ⭐ تم نقل diff-highlight إلى: /search/quran/css/quran.css */

/* ============================================
   11. MODALS & TOASTS - النوافذ والإشعارات
   ============================================ */
.qiraat-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   backdrop-filter: blur(4px);
   /* تم إزالة الأنيميشن */
}

.qiraat-modal.active {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
}

.qiraat-modal-content {
   background: var(--card-bg, #1e293b);
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
   border-radius: 1rem;
   max-width: 90vw;
   max-height: 90vh;
   overflow-y: auto;
   padding: 2rem;
   position: relative;
   /* تم إزالة الأنيميشن */
}

.qiraat-modal-close {
   position: absolute;
   top: 1rem;
   left: 1rem;
   background: rgba(239, 68, 68, 0.2);
   border: 1px solid rgba(239, 68, 68, 0.4);
   color: #ef4444;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

.qiraat-modal-close:hover {
   background: rgba(239, 68, 68, 0.3);
}

.quran-toast {
   position: fixed;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--primary, #10b981);
   color: #fff;
   padding: 12px 30px;
   border-radius: 50px;
   font-weight: 600;
   box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
   opacity: 0;
   pointer-events: none;
   transition: 0.3s;
   z-index: 10000;
}

.quran-toast.show {
   opacity: 1;
   bottom: 50px;
}

/* ============================================
   12. ACADEMIC THEME - الوضع الأكاديمي
   ============================================ */
[data-theme="academic"] .quran-verse-card {
   background: rgba(255, 255, 255, 0.9);
   border-color: rgba(0, 0, 0, 0.1);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="academic"] .quran-controls-card {
   background: rgba(255, 255, 255, 0.95);
   border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="academic"] .quran-reading-btn {
   background: rgba(0, 0, 0, 0.03);
   color: #1f2937;
   border-color: rgba(0, 0, 0, 0.1);
   box-shadow: none;
}

[data-theme="academic"] .quran-reading-btn.active {
   background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, #2563eb));
   color: #fff;
   border-color: var(--primary, #60a5fa);
}

[data-theme="academic"] .quran-mode-toggle-btn {
   background: rgba(0, 0, 0, 0.03);
   color: #1f2937;
   border-color: rgba(0, 0, 0, 0.1);
   box-shadow: none;
}

[data-theme="academic"] .quran-mode-toggle-btn:hover {
   background: rgba(59, 130, 246, 0.1);
   border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="academic"] .quran-mode-toggle-btn .mode-toggle-switch {
   background: rgba(0, 0, 0, 0.08);
   border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="academic"] .quran-mode-toggle-btn .mode-toggle-knob {
   background: #6b7280;
}

[data-theme="academic"] .quran-mode-toggle-btn.active {
   background: linear-gradient(135deg, var(--primary, #3b82f6), var(--primary-dark, #2563eb));
   color: #fff;
   border-color: var(--primary, #60a5fa);
}

[data-theme="academic"] .quran-verse-text {
   color: #1f2937;
   text-shadow: none;
}

[data-theme="academic"] .qiraat-toggle-btn {
   background: rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.2);
   color: #111827;
}

[data-theme="academic"] .qiraat-toggle-btn:hover {
   background: rgba(0, 0, 0, 0.1);
   border-color: rgba(0, 0, 0, 0.3);
}

/* القوائم المنسدلة */
#results-riwayah-select,
#riwayah-select {
   background: var(--search-input-bg);
   color: var(--search-input-color);
   border: 1px solid var(--search-input-border);
}

[data-theme="dark"] #results-riwayah-select option,
[data-theme="dark"] #riwayah-select option,
html:not([data-theme="academic"]) #results-riwayah-select option,
html:not([data-theme="academic"]) #riwayah-select option {
   background: #1f2937;
   color: #f9fafb;
}

[data-theme="academic"] #results-riwayah-select option,
[data-theme="academic"] #riwayah-select option {
   background: #ffffff;
   color: #111827;
}

#riwayah-select:not(:disabled) {
   opacity: 1;
   cursor: pointer;
   pointer-events: auto;
}

#riwayah-select:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
}

/* ============================================
   12.5. RESULTS COUNT - عداد النتائج
   ============================================ */
.results-count {
   font-size: 0.8em;
   font-weight: 600;
   color: var(--quran-accent, #10b981);
   margin-right: 0.25rem;
}

[data-theme="academic"] .results-count {
   color: #059669;
}

/* ============================================
   13. UTILITIES - أدوات مساعدة
   ============================================ */
[x-cloak] {
   display: none !important;
}

.quran-mode-btn,
.quran-mode-btn * {
   color: inherit;
   font-weight: inherit;
   text-decoration: none;
}

.riwayah-item {
   /* تم إزالة الأنيميشن */
}

.riwayah-item:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.base-riwayah {
   position: relative;
}

/* ============================================
   14. CENTRAL PAGINATION
   الأنماط في: styles/site/components/pagination.css (عبر main.css)
   ============================================ */