/*!
 * Bundled CSS — auto-generated by _dev/bundle_css.mjs
 * Source : styles/articles/main.css
 * Built  : 2026-06-06T07:54:17.979Z
 * NOTE   : لا تعدّل هذا الملف يدوياً — حدّث الملفات المصدر ثم أعد البناء.
 */

/* ─── begin: styles/articles/main.css ─── */
/* ============================================
   ARTICLES-MAIN.CSS - ملف التجميع الرئيسي للمقالات
   ============================================
   
   🏆 يستورد كل ملفات CSS الخاصة بالمقالات
   
   📋 ترتيب الاستيراد مهم:
   1. المتغيرات أولاً
   2. الهيكل
   3. المحتوى الإسلامي
   4. المكونات
   5. الصناديق
   6. الودجات
   7. الطباعة (آخر شيء)
   
   📅 تاريخ التحديث: 2026-01-17
   ============================================ */

/* المتغيرات المشتركة المركزية */

/* ─── begin: styles/site/core/variables.css ─── */
/* ============================================
   VARIABLES.CSS - متغيرات الثيمات المركزية
   ============================================
   
   📋 محتويات الملف:
   1. DARK MODE VARIABLES - الوضع الداكن (الافتراضي)
   2. ACADEMIC MODE VARIABLES - الوضع النهاري
   
   📅 آخر تحديث: 2026-01-16
   ============================================ */

/* ============================================
   1. DARK MODE VARIABLES - الوضع الداكن (الافتراضي)
   ============================================ */
:root {
   /* ⭐ منع Vivaldi وبعض المتصفحات من تغيير الألوان تلقائياً */
   color-scheme: dark;

   /* Primary Colors */
   --primary-color: #1565C0;
   --primary-dark: #0D47A1;

   /* Backgrounds */
   --bg-color: #18181b;
   --card-bg: #1e293b;

   /* Text Colors */
   --text-main: #ffffff;
   --text-secondary: #e2e8f0;

   /* Glass Effects */
   --glass-bg: rgba(255, 255, 255, 0.05);
   --glass-border: rgba(255, 255, 255, 0.1);
   --glass-card-bg: rgba(30, 41, 59, 0.6);
   --border-color: rgba(255, 255, 255, 0.1);

   /* Headings */
   --heading-primary: #1565C0;
   --heading-secondary: #BA68C8;
   --heading-accent: #ff7e00;

   /* Hadith & Narrator Colors */
   --hadith-problem-bg: #422006;
   --hadith-problem-color: #FCD34D;
   --hadith-ok-bg: #4C320A;
   --hadith-ok-color: #FFECB3;
   --narrator-weak-bg: #5B0000;
   --narrator-weak-color: #FFC0CB;
   --narrator-problem-color: #FFECB3;
   --narrator-problem-bg: #5C4000;

   /* Article semantic boxes — الوضع الليلي (افتراضي) */
   --hadith-weak-bg: #301717;
   --hadith-weak-border: #753939;
   --hadith-weak-text: #f5e0e0;
   --daif-bg: var(--hadith-weak-bg);
   --daif-border: var(--hadith-weak-border);
   --daif-text: var(--hadith-weak-text);
   --sahih-bg: #1a3a28;
   --sahih-border: #4caf50;
   --sahih-text: #c8e6c9;
   --verse-bg: #1a3a52;
   --verse-border: #4a7ba7;
   --verse-text: #b8d4e8;
   --info-box-bg: rgba(23, 162, 184, 0.18);
   --info-box-text: #cce8f0;
   --info-box-border: #26a69a;

   /* Hadith Search Colors (Sunnah Books) */
   --hadith-bab-color: #fbbf24;
   --hadith-sanad-color: #22d3ee;
   --hadith-matn-color: #34d399;
   --hadith-highlight-bg: rgba(251, 191, 36, 0.35);

   /* ⭐ Border Colors - ألوان حدود الكروت (مرتبطة مركزياً بلون البادج والزر) */
   --border-blue: var(--tab-blue-border);
   --border-teal: var(--tab-teal-border);
   --border-green: var(--tab-green-border);
   --border-red: var(--tab-red-border);
   --border-orange: var(--tab-orange-border);
   --border-purple: var(--tab-purple-border);
   --border-slate: var(--tab-navy-border);
   --border-indigo: var(--tab-indigo-border);
   --border-fuchsia: var(--tab-fuchsia-border);
   --border-lime: var(--tab-lime-border);
   --border-cyan: var(--tab-cyan-border);

   /* ============================================
       🎨 TAB & BADGE COLORS SYSTEM - نظام ألوان التبويبات والبادجات المركزي
       ============================================ */

   /* Blue - أزرق كلاسيكي */
   --tab-blue-bg-start: #3b82f6;
   --tab-blue-bg-end: #2563eb;
   --tab-blue-border: #60a5fa;
   --tab-blue-text: #ffffff;
   --tab-blue-shadow: rgba(59, 130, 246, 0.4);

   /* Purple - بنفسجي (الصوتيات) */
   --tab-purple-bg-start: #9333ea;
   --tab-purple-bg-end: #7c3aed;
   --tab-purple-border: #a855f7;
   --tab-purple-text: #ffffff;
   --tab-purple-shadow: rgba(147, 51, 234, 0.4);

   /* Orange - برتقالي (الإنفوجرافيك) */
   --tab-orange-bg-start: #f59e0b;
   --tab-orange-bg-end: #d97706;
   --tab-orange-border: #fbbf24;
   --tab-orange-text: #ffffff;
   --tab-orange-shadow: rgba(245, 158, 11, 0.4);

   /* Green - أخضر (الصحيح) */
   --tab-green-bg-start: #10b981;
   --tab-green-bg-end: #059669;
   --tab-green-border: #34d399;
   --tab-green-text: #ffffff;
   --tab-green-shadow: rgba(16, 185, 129, 0.4);

   /* Red - أحمر (الضعيف) */
   --tab-red-bg-start: #ef4444;
   --tab-red-bg-end: #dc2626;
   --tab-red-border: #f87171;
   --tab-red-text: #ffffff;
   --tab-red-shadow: rgba(239, 68, 68, 0.4);

   /* Teal - تركواز (علم الأسماء) */
   --tab-teal-bg-start: #14b8a6;
   --tab-teal-bg-end: #0d9488;
   --tab-teal-border: #2dd4bf;
   --tab-teal-text: #ffffff;
   --tab-teal-shadow: rgba(20, 184, 166, 0.4);

   /* Navy/Slate - أصفر ذهبي */
   --tab-navy-bg-start: #f59e0b;
   --tab-navy-bg-end: #d97706;
   --tab-navy-border: #fbbf24;
   --tab-navy-text: #ffffff;
   --tab-navy-shadow: rgba(245, 158, 11, 0.4);

   /* Light Blue - أزرق هوية الموقع */
   --tab-light-blue-bg-start: #1565C0;
   --tab-light-blue-bg-end: #0D47A1;
   --tab-light-blue-border: #42a5f5;
   --tab-light-blue-text: #ffffff;
   --tab-light-blue-shadow: rgba(21, 101, 192, 0.4);

   /* Indigo - نيلي (شبهات الإلحاد) */
   --tab-indigo-bg-start: #6366f1;
   --tab-indigo-bg-end: #4f46e5;
   --tab-indigo-border: #818cf8;
   --tab-indigo-text: #ffffff;
   --tab-indigo-shadow: rgba(99, 102, 241, 0.4);

   /* Fuchsia - فوشيا (مفاهيم مقلوبة) */
   --tab-fuchsia-bg-start: #8a3985;
   --tab-fuchsia-bg-end: #6b2d68;
   --tab-fuchsia-border: #a84da3;
   --tab-fuchsia-text: #ffffff;
   --tab-fuchsia-shadow: rgba(138, 57, 133, 0.4);

   /* Lime - أخضر داكن (سبر الرواة) */
   --tab-lime-bg-start: #444d07;
   --tab-lime-bg-end: #2d3305;
   --tab-lime-border: #5a6609;
   --tab-lime-text: #ffffff;
   --tab-lime-shadow: rgba(68, 77, 7, 0.4);

   /* Cyan - أزرق مخضر (علم السند) */
   --tab-cyan-bg-start: #006885;
   --tab-cyan-bg-end: #004d61;
   --tab-cyan-border: #00a3cc;
   --tab-cyan-text: #ffffff;
   --tab-cyan-shadow: rgba(0, 104, 133, 0.4);

   /* AI - أزرق ذكاء اصطناعي (المدارسة) */
   --tab-ai-bg-start: #197cea;
   --tab-ai-bg-end: #1565c0;
   --tab-ai-border: #42a5f5;
   --tab-ai-text: #ffffff;
   --tab-ai-shadow: rgba(25, 124, 234, 0.4);

   /* Gold - ذهبي/برتقالي (الاستقراء) */
   --tab-gold-bg-start: #be5f0a;
   --tab-gold-bg-end: #a85208;
   --tab-gold-border: #e07b1a;
   --tab-gold-text: #ffffff;
   --tab-gold-shadow: rgba(190, 95, 10, 0.4);

   /* Icon Colors - ألوان الأيقونات */
   --icon-default: #9ca3af;
   --icon-hover: #ffffff;

   /* Article Identity Colors - ألوان هوية المقال */
   --article-title-color: #ff7e00;
   --article-header-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
   --article-heading-color: #ff7e00;

   /* Status Colors - ألوان الحالة */
   --success-color: #10B981;
   --danger-color: #EF4444;

   /* Islamic Typography Colors - ألوان الخطوط الإسلامية (الأكاديمي) */
   --hadith-sahih-color: #1b5e20;
   --hadith-daif-color: #b71c1c;
   --emphasis-color: #c62828;

   /* Islamic Typography Colors - ألوان الخطوط الإسلامية */
   --hadith-sahih-color: #34d399;
   --hadith-daif-color: #ff8a80;
   --emphasis-color: #fbbf24;

   /* ============================================
       📐 ARTICLE TYPOGRAPHY SYSTEM - نظام الخطوط المركزي للمقالات
       ============================================
       🎯 هذا النظام يوحد أحجام الخطوط بصرياً
       
       المبدأ: كل الأحجام تعتمد على --article-base-size و --article-scale
       - Cairo (sans-serif): معامل 1.0
       - Amiri (serif): معامل 0.95 (لأنه يظهر أكبر بصرياً)
       ============================================ */
   
   /* الحجم الأساسي للمقال (rem) - تم زيادته بدرجتين */
   --article-base-size: 1.3rem;
   
   /* معامل التكبير (يتغير عبر JavaScript) */
   --article-scale: 1;
   
   /* 📝 أحجام نص Cairo (النص العادي) */
   --article-text-size: calc(var(--article-base-size) * var(--article-scale));
   --article-text-small: calc(var(--article-base-size) * var(--article-scale) * 0.85);
   --article-text-large: calc(var(--article-base-size) * var(--article-scale) * 1.1);
   
   /* 📖 أحجام نص Amiri (الآيات والأحاديث) - معامل 0.95 للتوازن البصري */
   --article-islamic-size: calc(var(--article-base-size) * var(--article-scale) * 0.95);
   --article-islamic-small: calc(var(--article-base-size) * var(--article-scale) * 0.8);
   
   /* 📏 ارتفاعات الأسطر */
   --article-line-height: 1.9;
   --article-islamic-line-height: 2.1;
   
   /* 🔤 الخطوط */
   --article-font-main: 'Cairo', sans-serif;
   --article-font-islamic: 'Amiri', serif;
   --article-font-quran: 'Amiri Quran', 'Amiri', serif;

   /* ============================================
       📐 COMPONENT SIZES SYSTEM - نظام الأحجام المركزي
       ============================================ */

   /* أحجام أزرار التبويب (Filter Buttons) */
   --btn-padding-x: 1.5rem;
   --btn-padding-y: 0.625rem;
   --btn-font-size: 1rem;
   --btn-font-weight: 700;
   --btn-border-radius: 9999px;
   --btn-gap: 0.5rem;

   /* أحجام البادجات (Tab Badges) */
   --badge-padding-x: 0.625rem;
   --badge-padding-y: 0.2rem;
   --badge-font-size: 0.6875rem;
   --badge-font-weight: 700;
   --badge-border-radius: 9999px;
   --badge-gap: 0.375rem;

   /* أحجام الكروت (Section Cards) */
   --card-padding: 0.5rem;
   --card-border-radius: 0.75rem;
   --card-title-size: 1.125rem;
   --card-title-size-md: 1.375rem;
   --card-desc-size: 0.8125rem;

   /* ============================================
      📏 SECTION LAYOUT SPACING - مسافات صفحات الأقسام (مركزية)
      ============================================ */
   --section-hero-mt: 2rem;
   --section-hero-mb: 2.5rem;
   --section-tabs-mb: 2rem;
   --section-sort-mb: 0.25rem;
   --section-main-pb: 6rem;

   /* ============================================
       🔍 SEARCH PANEL SYSTEM - نظام صناديق البحث المركزي
       ============================================ */

   /* خلفية وحدود صندوق البحث */
   --search-panel-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.85) 100%);
   --search-panel-border: rgba(255, 255, 255, 0.1);
   --search-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   --search-panel-radius: 1.5rem;

   /* حقول الإدخال والقوائم */
   --search-input-bg: rgba(255, 255, 255, 0.08);
   --search-input-border: rgba(255, 255, 255, 0.15);
   --search-input-focus-border: var(--primary-color);
   --search-input-radius: 0.75rem;

   /* النصوص */
   --search-label-color: #e2e8f0;
   --search-input-color: #ffffff;
   --search-placeholder-color: #94a3b8;

   /* زر البحث */
   --search-btn-radius: 0.75rem;
   --search-btn-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

   /* ============================================
       🎴 CARD STYLES - أنماط الكروت
       ============================================ */
   --card-border: rgba(255, 255, 255, 0.05);
   --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
   --card-hover-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
   --card-accent-line: transparent;

   /* ============================================
       🔘 INACTIVE BUTTON STYLES - أنماط الأزرار غير النشطة
       ============================================ */
   --btn-inactive-bg: transparent;
   --btn-inactive-border: rgba(255, 255, 255, 0.2);
   --btn-inactive-text: var(--text-secondary);

   /* ============================================
       📱 SOCIAL ICON STYLES - أنماط الأيقونات الاجتماعية
       ============================================ */
   --social-icon-color: #9ca3af;
   --social-icon-hover: #ffffff;
   --theme-toggle-bg: transparent;

   /* ============================================
       🌊 GLASS HOVER STYLES - أنماط تأثيرات الهوفر الزجاجية
       ============================================ */
   --glass-hover-bg: rgba(255, 255, 255, 0.08);
   --glass-hover-border: rgba(255, 255, 255, 0.25);

   /* ============================================
       📦 INFO BOX STYLES - أنماط صناديق المعلومات
       ============================================ */
   --info-box-background: rgba(59, 130, 246, 0.1);
   --info-box-border-color: #3B82F6;
   --info-box-text-color: inherit;

   /* ============================================
       📄 ARTICLE CARD STYLES - أنماط بطاقات المقالات
       ============================================ */
   --article-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   --article-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   --article-border: transparent;
   --article-hover-border: transparent;

   /* ============================================
       🏷️ NEUTRAL BADGE STYLES - أنماط البادج المحايد
       ============================================ */
   --badge-neutral-bg: rgba(255, 255, 255, 0.05);
   --badge-neutral-color: rgba(255, 255, 255, 0.5);
   --badge-neutral-border: rgba(255, 255, 255, 0.1);

   /* ============================================
       🔍 SEARCH RESULTS - أنماط نتائج البحث
       ============================================ */
   --result-card-bg: rgba(255, 255, 255, 0.03);
   --result-card-border: rgba(255, 255, 255, 0.08);
   --result-card-hover-bg: rgba(255, 255, 255, 0.05);
   --result-card-hover-border: rgba(255, 255, 255, 0.15);
   --result-title-color: #ffffff;
   --result-excerpt-color: rgba(255, 255, 255, 0.7);

   /* القوائم المنسدلة */
   --select-option-bg: #4b5563;
   --select-option-color: #ffffff;

   /* تظليل الكلمات */
   --mark-bg: linear-gradient(120deg, rgba(255, 235, 59, 0.2) 0%, rgba(255, 235, 59, 0.05) 100%);
   --mark-color: #ffffff;
   --mark-partial-bg: rgba(239, 68, 68, 0.15);
   --mark-partial-color: #ef4444;

   /* الصناديق التنبيهية */
   --warning-bg: rgba(255, 193, 7, 0.15);
   --warning-text: #ffc107;
   --warning-border: #ffc107;
   --example-bg: rgba(255, 183, 77, 0.1);
   --example-text: #FFB74D;
   --example-border: #FFB74D;

   /* ============================================
       📝 FORM STYLES - أنماط النماذج
       ============================================ */
   --input-bg: var(--glass-bg);
   --input-border: var(--glass-border);
   --input-placeholder: rgba(255, 255, 255, 0.4);
   --sort-dropdown-bg: var(--bg-color);
   --sort-dropdown-border: var(--glass-border);

   /* ============================================
       📍 NAVIGATION STYLES - أنماط الملاحة
       ============================================ */
   --nav-glass-bg: rgba(24, 24, 27, 0.85);
   --nav-glass-border: rgba(255, 255, 255, 0.1);
   --nav-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
   --nav-link-color: #d1d5db;
   --nav-link-hover-bg: rgba(255, 255, 255, 0.1);
   --nav-link-hover-color: #ffffff;

   /* ============================================
       👣 FOOTER STYLES - أنماط التذييل
       ============================================ */
   --footer-bg: rgba(0, 0, 0, 0.2);
   --footer-text: #ffffff;
   --marquee-text: #ffffff;
   --marquee-separator: rgba(255, 255, 255, 0.5);

   /* ============================================
       🔠 TYPOGRAPHY & INTERFACE - الخطوط والواجهة
       ============================================ */
   --text-primary-color: #ffffff;
   --text-header-color: #d1d5db;
   --scrollbar-thumb: #334155;

   /* ============================================
       🔄 LOADER & INTERFACE - مؤشرات التحميل
       ============================================ */
   --loader-border: var(--glass-border);
   --footer-font-weight: 400;
}

/* ============================================
   2. ACADEMIC MODE VARIABLES - الوضع النهاري
   ============================================ */
[data-theme="academic"] {
   /* ⭐ إجبار الوضع الفاتح */
   color-scheme: light;

   /* Backgrounds */
   --bg-color: #e4e2de;
   --card-bg: #ffffff;

   /* Text Colors */
   --text-main: #1f2937;
   --text-secondary: #4b5563;
   --text-on-beige: #222c3b;

   /* Accent */
   --accent-color: #1565C0;
   --primary-color: #1565C0;

   /* Glass Effects (Light Edition) */
   --glass-bg: rgba(255, 255, 255, 0.9);
   --glass-border: rgba(0, 0, 0, 0.08);
   --glass-card-bg: rgba(255, 255, 255, 0.9);
   --border-color: rgba(0, 0, 0, 0.12);

   /* Hadith & Narrator Colors */
   --hadith-problem-bg: #FFFBF0;
   --hadith-problem-color: #92400E;
   --hadith-ok-bg: #F5FFFA;
   --hadith-ok-color: #047857;
   --narrator-weak-bg: #FEE2E2;
   --narrator-weak-color: #B91C1C;
   --narrator-problem-bg: #FEF3C7;
   --narrator-problem-color: #92400E;

   /* Hadith Search Colors (Academic Mode) */
   --hadith-bab-color: #92400e;
   --hadith-sanad-color: #0369a1;
   --hadith-matn-color: #047857;
   --hadith-highlight-bg: rgba(251, 191, 36, 0.45);

   /* Article semantic boxes — الوضع الأكاديمي */
   --hadith-weak-bg: #fdf5f5;
   --hadith-weak-border: #E53E3E;
   --hadith-weak-text: #212529;

   /* Box Colors */
   --sahih-bg: #e8f5e8;
   --sahih-border: #4caf50;
   --sahih-text: #2e7d32;
   --daif-bg: #ffebee;
   --daif-border: #f44336;
   --daif-text: #c62828;
   --verse-bg: #e3f2fd;
   --verse-border: #1976d2;
   --verse-text: #0d47a1;
   --key-bg: #fff8e1;
   --key-border: #ff8f00;
   --key-text: #e65100;
   --takhreej-bg: #f5f5f5;
   --takhreej-border: #757575;
   --takhreej-text: #424242;
   --warning-box-bg: #fff3cd;
   --warning-box-text: #856404;
   --warning-box-border: #ffc107;
   --info-box-bg: #d1ecf1;
   --info-box-text: #E55100;
   --info-box-border: #17a2b8;
   --conclusion-bg: #f0fdf4;
   --conclusion-border: #2c5530;
   --conclusion-text: #2c5530;

   /* Article Identity Colors - ألوان هوية المقال (الأكاديمي) */
   --article-title-color: #ff7e00;
   --article-header-bg: linear-gradient(135deg, #1565C0, #2C5282);
   --article-heading-color: #e65100;

   /* Icon Colors */
   --icon-default: #374151;
   --icon-hover: #1565C0;

   /* Status Colors */
   --success-color: #059669;
   --danger-color: #dc2626;

   /* ============================================
      🎴 CARD STYLES - أنماط الكروت (الوضع النهاري)
      ============================================ */
   --card-border: rgba(0, 0, 0, 0.08);
   --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
   --card-hover-shadow: 0 8px 30px rgba(21, 101, 192, 0.1);
   --card-accent-line: linear-gradient(90deg, transparent, rgba(21, 101, 192, 0.3), transparent);

   /* ============================================
      📏 SECTION LAYOUT SPACING - مسافات صفحات الأقسام (الوضع النهاري)
      ============================================ */
   --section-hero-mt: 2rem;
   --section-hero-mb: 2.5rem;
   --section-tabs-mb: 2rem;
   --section-sort-mb: 0.25rem;
   --section-main-pb: 6rem;

   /* ============================================
      🔘 INACTIVE BUTTON STYLES - أنماط الأزرار غير النشطة (الوضع النهاري)
      ============================================ */
   --btn-inactive-bg: transparent;
   --btn-inactive-border: rgba(0, 0, 0, 0.15);
   --btn-inactive-text: #333333;

   /* ============================================
      📱 SOCIAL ICON STYLES - أنماط الأيقونات الاجتماعية (الوضع النهاري)
      ============================================ */
   --social-icon-color: #374151;
   --social-icon-hover: #1565C0;
   --theme-toggle-bg: transparent;

   /* ============================================
      🎨 TAB & BADGE COLORS SYSTEM - نظام ألوان التبويبات والبادجات المركزي (الوضع النهاري)
      ============================================ */

   /* ⭐ Border Colors - ألوان حدود الكروت (مرتبطة مركزياً بلون البادج والزر) */
   --border-blue: var(--tab-blue-bg-end);
   --border-teal: var(--tab-teal-bg-end);
   --border-green: var(--tab-green-bg-end);
   --border-red: var(--tab-red-bg-end);
   --border-orange: var(--tab-orange-bg-end);
   --border-purple: var(--tab-purple-bg-end);
   --border-slate: var(--tab-navy-bg-end);
   --border-indigo: var(--tab-indigo-bg-end);
   --border-fuchsia: var(--tab-fuchsia-bg-end);
   --border-lime: var(--tab-lime-bg-end);
   --border-cyan: var(--tab-cyan-bg-end);

   /* Blue - أزرق كلاسيكي */
   --tab-blue-bg-start: #3b82f6;
   --tab-blue-bg-end: #2563eb;
   --tab-blue-border: #60a5fa;
   --tab-blue-text: #ffffff;
   --tab-blue-shadow: rgba(59, 130, 246, 0.2);

   /* Purple - بنفسجي (الصوتيات) */
   --tab-purple-bg-start: #9333ea;
   --tab-purple-bg-end: #7c3aed;
   --tab-purple-border: #a855f7;
   --tab-purple-text: #ffffff;
   --tab-purple-shadow: rgba(147, 51, 234, 0.2);

   /* Orange - برتقالي (الإنفوجرافيك) */
   --tab-orange-bg-start: #f59e0b;
   --tab-orange-bg-end: #d97706;
   --tab-orange-border: #fbbf24;
   --tab-orange-text: #ffffff;
   --tab-orange-shadow: rgba(245, 158, 11, 0.2);

   /* Green - أخضر (الصحيح) */
   --tab-green-bg-start: #10b981;
   --tab-green-bg-end: #059669;
   --tab-green-border: #34d399;
   --tab-green-text: #ffffff;
   --tab-green-shadow: rgba(16, 185, 129, 0.2);

   /* Red - أحمر (الضعيف) */
   --tab-red-bg-start: #ef4444;
   --tab-red-bg-end: #dc2626;
   --tab-red-border: #f87171;
   --tab-red-text: #ffffff;
   --tab-red-shadow: rgba(239, 68, 68, 0.2);

   /* Teal - تركواز (علم الأسماء) */
   --tab-teal-bg-start: #14b8a6;
   --tab-teal-bg-end: #0d9488;
   --tab-teal-border: #2dd4bf;
   --tab-teal-text: #ffffff;
   --tab-teal-shadow: rgba(20, 184, 166, 0.2);

   /* Navy/Slate - أصفر ذهبي */
   --tab-navy-bg-start: #f59e0b;
   --tab-navy-bg-end: #d97706;
   --tab-navy-border: #fbbf24;
   --tab-navy-text: #ffffff;
   --tab-navy-shadow: rgba(245, 158, 11, 0.2);

   /* Light Blue - أزرق هوية الموقع */
   --tab-light-blue-bg-start: #1565C0;
   --tab-light-blue-bg-end: #0D47A1;
   --tab-light-blue-border: #42a5f5;
   --tab-light-blue-text: #ffffff;
   --tab-light-blue-shadow: rgba(21, 101, 192, 0.2);

   /* Indigo - نيلي (شبهات الإلحاد) */
   --tab-indigo-bg-start: #6366f1;
   --tab-indigo-bg-end: #4f46e5;
   --tab-indigo-border: #818cf8;
   --tab-indigo-text: #ffffff;
   --tab-indigo-shadow: rgba(99, 102, 241, 0.2);

   /* Fuchsia - فوشيا (مفاهيم مقلوبة) */
   --tab-fuchsia-bg-start: #a21caf;
   --tab-fuchsia-bg-end: #86198f;
   --tab-fuchsia-border: #d946ef;
   --tab-fuchsia-text: #ffffff;
   --tab-fuchsia-shadow: rgba(162, 28, 175, 0.2);

   /* Lime - أخضر داكن (سبر الرواة) */
   --tab-lime-bg-start: #65a30d;
   --tab-lime-bg-end: #4d7c0f;
   --tab-lime-border: #84cc16;
   --tab-lime-text: #ffffff;
   --tab-lime-shadow: rgba(101, 163, 13, 0.2);

   /* Cyan - أزرق مخضر (علم السند) */
   --tab-cyan-bg-start: #0891b2;
   --tab-cyan-bg-end: #0e7490;
   --tab-cyan-border: #22d3ee;
   --tab-cyan-text: #ffffff;
   --tab-cyan-shadow: rgba(8, 145, 178, 0.2);

   /* AI - أزرق ذكاء اصطناعي (المدارسة) */
   --tab-ai-bg-start: #2563eb;
   --tab-ai-bg-end: #1d4ed8;
   --tab-ai-border: #60a5fa;
   --tab-ai-text: #ffffff;
   --tab-ai-shadow: rgba(37, 99, 235, 0.2);

   /* Gold - ذهبي/برتقالي (الاستقراء) */
   --tab-gold-bg-start: #ea580c;
   --tab-gold-bg-end: #c2410c;
   --tab-gold-border: #fb923c;
   --tab-gold-text: #ffffff;
   --tab-gold-shadow: rgba(234, 88, 12, 0.2);

   /* ============================================
      🌊 GLASS HOVER STYLES - أنماط تأثيرات الهوفر الزجاجية (الوضع النهاري)
      ============================================ */
   --glass-hover-bg: rgba(0, 0, 0, 0.08);
   --glass-hover-border: rgba(0, 0, 0, 0.25);

   /* ============================================
      📦 INFO BOX STYLES - أنماط صناديق المعلومات (الوضع النهاري)
      ============================================ */
   --info-box-background: #dbeafe;
   --info-box-border-color: #bfdbfe;
   --info-box-text-color: #1e3a8a;

   /* ============================================
      📄 ARTICLE CARD STYLES - أنماط بطاقات المقالات (الوضع النهاري)
      ============================================ */
   --article-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   --article-hover-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   --article-border: 1px solid rgba(0, 0, 0, 0.1);
   --article-hover-border: rgba(21, 101, 192, 0.3);

   /* ============================================
      🏷️ NEUTRAL BADGE STYLES - أنماط البادج المحايد (الوضع النهاري)
      ============================================ */
   --badge-neutral-bg: rgba(0, 0, 0, 0.04);
   --badge-neutral-color: var(--text-secondary);
   --badge-neutral-border: rgba(0, 0, 0, 0.08);

   /* ============================================
      🔍 SEARCH RESULTS - أنماط نتائج البحث (الوضع النهاري)
      ============================================ */
   --result-card-bg: #ffffff;
   --result-card-border: rgba(0, 0, 0, 0.1);
   --result-card-hover-bg: #f8fafc;
   --result-card-hover-border: rgba(21, 101, 192, 0.2);
   --result-title-color: var(--text-main);
   --result-excerpt-color: var(--text-secondary);

   /* القوائم المنسدلة */
   --select-option-bg: #ffffff;
   --select-option-color: #000000;

   /* تظليل الكلمات */
   --mark-bg: linear-gradient(120deg, rgba(255, 235, 59, 0.4) 0%, rgba(255, 235, 59, 0.2) 100%);
   --mark-color: #000000;
   --mark-partial-bg: rgba(239, 68, 68, 0.2);
   --mark-partial-color: #b91c1c;

   /* الصناديق التنبيهية (الأكاديمي) */
   --warning-bg: #fff3cd;
   --warning-text: #856404;
   --warning-border: #ffc107;
   --example-bg: rgba(230, 81, 0, 0.08);
   --example-text: #e65100;
   --example-border: #e65100;

   /* ============================================
      📝 FORM STYLES - أنماط النماذج (الوضع النهاري)
      ============================================ */
   --input-bg: rgba(0, 0, 0, 0.05);
   --input-border: rgba(0, 0, 0, 0.2);
   --input-placeholder: #6b7280;
   --sort-dropdown-bg: #e4e2de;
   --sort-dropdown-border: rgba(0, 0, 0, 0.15);

   /* ============================================
      📍 NAVIGATION STYLES - أنماط الملاحة (الوضع النهاري)
      ============================================ */
   --nav-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 248, 245, 0.95) 100%);
   --nav-glass-border: rgba(0, 0, 0, 0.06);
   --nav-glass-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06), 0 -1px 4px rgba(0, 0, 0, 0.03);
   --nav-link-color: #333333;
   --nav-link-hover-bg: rgba(21, 101, 192, 0.08);
   --nav-link-hover-color: #1565C0;

   /* ============================================
      👣 FOOTER STYLES - أنماط التذييل (الوضع النهاري)
      ============================================ */
   --footer-bg: #F59E0B;
   --footer-text: #000000;
   --marquee-text: #ffffff;
   --marquee-separator: rgba(255, 255, 255, 0.5);

   /* ============================================
      🔠 TYPOGRAPHY & INTERFACE - الخطوط والواجهة (الوضع النهاري)
      ============================================ */
   --text-primary-color: #000000;
   --text-header-color: #000000;
   --scrollbar-thumb: #94a3b8;

   /* ============================================
      🔄 LOADER & INTERFACE - مؤشرات التحميل (الوضع النهاري)
      ============================================ */
   --loader-border: rgba(0, 0, 0, 0.1);
   --footer-font-weight: 700;

   /* ============================================
       🔍 SEARCH PANEL - استثناءات الوضع النهاري
       ============================================ */

   /* خلفية وحدود صندوق البحث */
   --search-panel-bg: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
   --search-panel-border: rgba(0, 0, 0, 0.15);
   --search-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);

   /* ⭐ حقول الإدخال والقوائم - إصلاح الحدود والنص */
   --search-input-bg: #ffffff;
   --search-input-border: rgba(0, 0, 0, 0.25);
   --search-input-focus-border: var(--primary-color);

   /* ⭐ النصوص - إصلاح لون النص في الحقول */
   --search-label-color: #1f2937;
   --search-input-color: #111827;
   --search-placeholder-color: #6b7280;
}

/* ============================================
   AMBIENT LIGHT SYSTEM VARIABLES
   ============================================ */
:root {
   --spot-opacity: 0.04;
   --spot-blur: 150px;
   --glow-1: #1565C0;
   --glow-2: #0D47A1;
   --glow-3: #000000;
}

[data-theme="academic"] {
   --spot-opacity: 0.08;
   --spot-blur: 120px;
   --glow-1: #d97706;
   --glow-2: #b45309;
   --glow-3: #ffffff;
}
/* ─── end:   styles/site/core/variables.css ─── */


/* هيكل صفحة المقال */

/* ─── begin: styles/articles/layout.css ─── */
/* ============================================
   ARTICLES.CSS - قواعد المقالات فقط
   ============================================
   
   📋 محتويات الملف:
   1. ARTICLE PAGE VARIABLES - متغيرات صفحات المقالات
   2. PROGRESS BAR & MOBILE TOC - شريط التقدم وقائمة المحتويات
   3. ARTICLE CONTAINER & HEADER - الحاوية والهيدر
   4. ARTICLE CONTENT BASE - أساسيات المحتوى
   5. TYPOGRAPHY - الطباعة (Cairo للنص، Amiri للآيات)
   6. QURAN VERSES - الآيات القرآنية (قاعدة شاملة واحدة)
   7. HADITH QUOTES - الأحاديث
   8. AUTHOR TEXT - نص الكاتب
   9. SPECIAL BOXES - الصناديق الخاصة
   10. HEADINGS & ICONS - العناوين والأيقونات (قواعد شاملة)
   10.5. SIDE HEADINGS - العناوين الجانبية (warning-heading, example-heading)
   11. VERSE BOX - صندوق الآيات
   12. ARTICLE ENDING - خاتمة المقال
   13. COMPARISON CARDS - كروت المقارنة
   13.5. COMPARISON TABLES - جداول المقارنة (تصميم شيك وجذاب)
   14. RESPONSIVE - التجاوب
   
   📅 آخر تحديث: 2025-12-05 (إضافة قواعد العناوين الجانبية والجداول المقارنة)
   ============================================ */

/* ============================================
   1. ARTICLE PAGE VARIABLES - متغيرات صفحات المقالات
   ============================================ */
.article-page {
    --text-color: var(--text-main);
    --text-light: var(--text-secondary);

    --primary-color: #1565C0;
    --on-primary-color: #E0E0E0;
    --secondary-color: #ff7e00;
    --on-secondary-color: #1A1A1A;
    --accent-color: #2C5282;
    --on-accent-color: #EFEBE9;
    --danger-color: #E53E3E;
    --success-color: #4CAF50;

    --border-color: #444;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);

    --primary-light: #e3f2fd;
    --secondary-light: #fff8e1;
    --accent-light: #e0f2f1;
    --danger-light: #ffebee;
    --success-light: #e8f5e9;

    --base-font-size: 1rem;
    --font-body: 'Cairo', sans-serif;
    --font-heading: 'Cairo', sans-serif;
    --font-hadith: 'Amiri', serif;
    --header-height: 60px;

    /* مساحة أقل أسفل الصفحة (زر العودة للأعلى لا يزال بعيدًا عن الحافة) */
    padding-bottom: 36px;
    padding-top: calc(var(--header-height) + 4px);
    /* ✅ إضافة padding-top لمنع تغطية المحتوى */
}

@media (min-width: 768px) {
    .article-page {
        padding-top: var(--header-height);
        /* ✅ على الشاشات الكبيرة */
    }
}

[data-theme="academic"] .article-page {
    --text-color: var(--text-main);
    --text-light: var(--text-secondary);
    --on-primary-color: #FFFFFF;
    --on-secondary-color: #FFFFFF;
    --on-accent-color: #212529;
    --border-color: #e0e0e0;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .article-page {
    --text-color: var(--text-main);
    --text-light: var(--text-secondary);
    --danger-color: #EF5350;
    --success-color: #81C784;
    --border-color: #333333;
    --primary-light: #1a3a52;
    --secondary-light: #3d3520;
    --accent-light: #1e3330;
    --danger-light: var(--daif-bg);
    --success-light: var(--sahih-bg);
}

/* ============================================
   2. PROGRESS BAR & MOBILE TOC - شريط التقدم وقائمة المحتويات
   ============================================ */

/* Progress Bar */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    z-index: 9999;
    transition: all 0.3s ease;
}

/* Mobile TOC Container - ثابت في الأعلى */
.mobile-toc-container {
    position: fixed;
    /* ✅ تغيير من sticky إلى fixed */
    top: 4px;
    /* ✅ إضافة top: 4px ليكون تحت شريط التحميل */
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    height: 60px;
}

[data-theme="academic"] .mobile-toc-container {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
    .mobile-toc-container {
        top: 0;
        /* ✅ على الشاشات الكبيرة يكون top: 0 */
        display: flex;
        align-items: center;
        padding-top: 4px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    [data-theme="academic"] .mobile-toc-container {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
}

.mobile-toc-toggle {
    width: 100%;
    padding: 12px 20px;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
}

.mobile-toc-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--card-bg);
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    border-bottom: 1px solid var(--secondary-color, #ff7e00);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

[data-theme="academic"] .mobile-toc-dropdown {
    background: #f8f9fa;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.mobile-toc-dropdown.active {
    max-height: 400px;
    overflow-y: auto;
}

.mobile-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-toc-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
    font-family: 'Cairo', sans-serif;
    font-size: 0.85rem;
}

[data-theme="academic"] .mobile-toc-list li a {
    color: #212529;
    border-bottom-color: #e0e0e0;
}

.mobile-toc-list li a:hover {
    background: linear-gradient(135deg, var(--primary-color), #2C5282);
    color: #ffffff;
    padding-right: 25px;
    transform: translateX(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-right: 3px solid var(--secondary-color, #ff7e00);
}

.mobile-toc-list li a.active {
    background: #2C5282;
    color: #EFEBE9;
    border-right: 4px solid var(--secondary-color, #ff7e00);
}

.mobile-toc-list li a i {
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

/* ============================================
   3. ARTICLE CONTAINER & HEADER - الحاوية والهيدر
   ============================================ */

.article-container {
    max-width: 95%;
    margin: 40px auto;
    padding: 40px 5%;
    /* ⚠️ إزالة جميع الحركات من حاوية المقال */
    transition: none !important;
    transform: none !important;
    animation: none !important;
}

@media (min-width: 1600px) {
    .article-container {
        max-width: 1400px;
        padding: 40px 60px;
    }
}

/* فقط حاوية المحتوى داخل <main> — لا تُطبَّق على .container داخل الفوتر (شريط الإصدار) */
.article-page main .container {
    max-width: 95%;
    margin: 40px auto;
    padding: 40px 5% 22px;
    /* ⚠️ إزالة جميع الحركات من الحاوية */
    transition: none !important;
    transform: none !important;
    animation: none !important;
}

@media (min-width: 1600px) {
    .article-page main .container {
        max-width: 1400px;
        padding: 40px 60px 22px;
    }
}

.article-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 60px 40px;
    background: linear-gradient(135deg, var(--primary-color), #2C5282);
    border-radius: 20px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--secondary-color, #ff7e00);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.article-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(218, 165, 32, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.article-title {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 20px;
    color: #ff7e00 !important;
    /* ⭐ لون ثابت دائماً: #FF7E00 (سواء الوضع الليلي أو النهاري) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

/* ⭐ التأكيد على اللون الثابت في جميع الأوضاع */
[data-theme="academic"] .article-title,
[data-theme="dark"] .article-title {
    color: #ff7e00 !important;
}

.article-subtitle {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 400;
    opacity: 0.95;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* شريط أجزاء المقال المدمج (منفصل عن خريطة المقال) */
.article-parts-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 28px;
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 126, 0, 0.35);
}

.article-parts-nav__link {
    flex: 1 1 auto;
    min-width: max(7.5rem, 22%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    font-family: 'Cairo', sans-serif;
    font-size: 0.78rem;
    line-height: 1.35;
}

.article-parts-nav__link:hover {
    background: rgba(255, 126, 0, 0.22);
    border-color: rgba(255, 126, 0, 0.5);
    color: #fff;
}

.article-parts-nav__link.is-active {
    background: rgba(255, 126, 0, 0.35);
    border-color: var(--secondary-color, #ff7e00);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.article-parts-nav__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--secondary-color, #ff7e00);
    color: #1a1a1a;
}

.article-parts-nav__label {
    text-align: center;
}

@media (min-width: 768px) {
    .article-parts-nav__link {
        font-size: 0.85rem;
        padding: 12px 14px;
    }
}

/* روابط الأجزاء الأخرى عند كل جزء (3 روابط — ليس الجزء الحالي) */
.article-parts-siblings {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 126, 0, 0.45);
    position: relative;
    z-index: 2;
}

.article-parts-siblings__hint {
    display: block;
    font-family: 'Cairo', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.82;
    margin-bottom: 10px;
    color: inherit;
}

.article-parts-siblings__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.article-parts-siblings__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 126, 0, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.article-parts-siblings__link:hover {
    background: rgba(255, 126, 0, 0.38);
    border-color: var(--secondary-color, #ff7e00);
    color: #fff;
    transform: translateY(-1px);
}

.article-parts-siblings__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 4px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--secondary-color, #ff7e00);
    color: #1a1a1a;
    flex-shrink: 0;
}

.article-parts-siblings__text {
    text-align: start;
}

.article-parts-siblings--trail {
    margin: 36px auto 8px;
    max-width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 126, 0, 0.45);
    background: rgba(21, 101, 192, 0.1);
}

.article-parts-siblings--trail .article-parts-siblings__hint {
    opacity: 0.9;
}

/* trail داخل المحتوى (خلفية فاتحة في الوضع الأكاديمي) */
[data-theme="academic"] .article-content .article-parts-siblings--trail {
    background: rgba(21, 101, 192, 0.06);
    border-color: rgba(21, 101, 192, 0.28);
}

[data-theme="academic"] .article-content .article-parts-siblings--trail .article-parts-siblings__hint {
    color: var(--text-color, #212529);
    opacity: 0.85;
}

[data-theme="academic"] .article-content .article-parts-siblings--trail .article-parts-siblings__link {
    color: var(--text-color, #212529);
    background: #fff;
    border-color: #c5c5c5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="academic"] .article-content .article-parts-siblings--trail .article-parts-siblings__link:hover {
    border-color: var(--secondary-color, #ff7e00);
    background: var(--secondary-light, #fff8e1);
    color: #1a1a1a;
}

[data-theme="dark"] .article-content .article-parts-siblings--trail {
    background: rgba(255, 126, 0, 0.08);
    border-color: rgba(255, 126, 0, 0.35);
}

[data-theme="dark"] .article-content .article-parts-siblings--trail .article-parts-siblings__link {
    color: #f5f5f5;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 126, 0, 0.45);
}

/* pills داخل فاصل الجزء (خلفية زرقاء — لا يورث لون النص الداكن من .article-content) */
.article-part-divider,
.article-part-divider .article-parts-siblings__hint {
    color: #fff;
}

.article-part-divider .article-parts-siblings {
    margin-top: 20px;
    padding-top: 16px;
    border-top-color: rgba(255, 255, 255, 0.35);
}

.article-part-divider .article-parts-siblings__hint {
    opacity: 0.95;
}

.article-part-divider .article-parts-siblings__link {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.38) !important;
    border-color: rgba(255, 126, 0, 0.6) !important;
}

.article-part-divider .article-parts-siblings__link:hover {
    background: rgba(255, 126, 0, 0.42) !important;
    border-color: var(--secondary-color, #ff7e00) !important;
}

[data-theme="academic"] .article-part-divider .article-parts-siblings__link,
[data-theme="dark"] .article-part-divider .article-parts-siblings__link {
    color: #fff !important;
}

/* شريط الأربعة في الرأس — الوضع الأكاديمي (الرأس يبقى على التدرج الأزرق) */
[data-theme="academic"] .article-header .article-parts-nav {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 126, 0, 0.45);
}

[data-theme="academic"] .article-header .article-parts-nav__link {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.18);
}

[data-theme="academic"] .article-header .article-parts-nav__link.is-active {
    background: rgba(255, 126, 0, 0.4);
    border-color: var(--secondary-color, #ff7e00);
    color: #fff;
}

@media (min-width: 768px) {
    .article-parts-siblings__link {
        font-size: 0.85rem;
        padding: 9px 16px;
    }
}

/* فواصل الأجزاء داخل المحتوى */
.article-part-anchor {
    scroll-margin-top: 120px;
    height: 0;
    overflow: hidden;
}

.article-part-divider {
    text-align: center;
    margin: 48px 0 36px;
    padding: 36px 28px;
    background: linear-gradient(135deg, var(--primary-color, #1565C0), #2C5282);
    border-radius: 16px;
    color: #fff;
    border: 1px solid var(--secondary-color, #ff7e00);
    scroll-margin-top: 120px;
}

.article-part-title {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 8px;
    color: #ff7e00 !important;
}

.article-part-divider .article-subtitle,
.article-part-divider .part-number {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.article-part-divider .part-number {
    margin-top: 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ============================================
   4. ARTICLE CONTENT BASE - أساسيات المحتوى
   ============================================ */

.article-content {
    background: var(--card-bg);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
    /* ⭐ الخط يورث الآن بشكل طبيعي من articles-islamic.css */
}

[data-theme="academic"] .article-content {
    padding: 60px 50px;
    border: 1px solid #e0e0e0;
    background: #ffffff !important;
    color: #212529 !important;
}

/* 🛡️ القواعد الشاملة للمقال: منع الحركات العشوائية وضبط المسافات الموحدة */
.article-content,
.article-content *,
.article-container,
.article-container * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    word-break: normal;
    hyphens: none;
}

/* ============================================
   5. TYPOGRAPHY - الطباعة (يستخدم المتغيرات من variables.css)
   ============================================ */

.article-content p {
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
    margin-bottom: 20px;
    color: inherit;
    /* ضيق العمود + justify = فجوات كلمات مزعجة على الموبايل */
    text-align: start;
}

@media (min-width: 768px) {
    .article-content p {
        text-align: justify;
        text-justify: inter-word;
    }
}

/* قواعد الخطوط في articles-islamic.css */

/* استثناء الأيقونات من قاعدة Cairo - حماية قوية */
.article-content p i,
.article-content p [class*="fa-"],
.article-content i,
.article-content [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* القوائم المرقمة */
.article-content ol,
.article-content .deceptions-list,
.article-content .article-numbered-list,
.article-numbered-list {
    padding-right: 20px;
    line-height: var(--article-line-height);
    font-size: var(--article-text-size);
    margin: 20px 0;
}

.article-content ol li,
.article-content .deceptions-list li,
.article-content .article-numbered-list li,
.article-numbered-list li {
    margin-bottom: 10px;
    padding-right: 10px;
}

[data-theme="dark"] .article-content ol,
[data-theme="dark"] .article-content .deceptions-list,
[data-theme="dark"] .article-content ol li,
[data-theme="dark"] .article-content .deceptions-list li {
    color: #ffffff !important;
}

.article-content strong {
    color: var(--secondary-color);
    font-weight: 700;
}
/* ─── end:   styles/articles/layout.css ─── */


/* الآيات والأحاديث */

/* ─── begin: styles/articles/islamic.css ─── */
/* ==========================================================================
   ARTICLES-ISLAMIC.CSS - نظام الخطوط الإسلامي الموحد
   ==========================================================================
   ⭐ يستخدم المتغيرات المركزية من variables.css:
      - --article-text-size (للنص العادي - Cairo)
      - --article-islamic-size (للآيات والأحاديث - Amiri)
      - --article-scale (معامل التكبير/التصغير)
   
   📅 آخر تحديث: 2026-01-17 (نظام متغيرات مركزي)
   ========================================================================== */

/* تخطّي استيراد مكرر: D:\_Al7amdWeb\styles\site\core\variables.css */


/* ══════════════════════════════════════════
   1. BASE TYPOGRAPHY - القوام الأساسي للمقال
   ══════════════════════════════════════════ */

.article-content {
    font-family: var(--article-font-main);
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
}

/* نص الكاتب والفقرات العادية */
.author-text,
.author-text p,
.author-text li,
.article-content p,
.article-content li,
.article-content div:not([class]) {
    font-family: var(--article-font-main);
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
    text-align: start;
    color: inherit;
}

/* تراجم الرواة: محاذاة يمين على كل أحجام الشاشات (موبايل / WebView / تطبيق) */
#tarajim .author-text,
#tarajim .author-text p,
#tarajim .author-text li {
    text-align: right;
}

@media (min-width: 768px) {
    .author-text,
    .author-text p,
    .author-text li,
    .article-content p,
    .article-content li,
    .article-content div:not([class]) {
        text-align: justify;
        text-justify: inter-word;
    }
}

/* ══════════════════════════════════════════
   2. ISLAMIC TYPOGRAPHY - النصوص الإسلامية
   ⭐ يستخدم --article-islamic-size للتوازن البصري
   ══════════════════════════════════════════ */

/* الآيات القرآنية، الأحاديث، وقواعد الخط العربي */
.quran-verse,
.hadith-inline,
.hadith-quote,
.hadith-text,
.hadith-content,
.dua,
.final-verse,
.verse-box,
.font-amiri {
    font-family: var(--article-font-islamic);
    font-size: var(--article-islamic-size);
    line-height: var(--article-islamic-line-height);
}

/* ضمان أن العناصر الداخلية ترث الخط */
.quran-verse *,
.hadith-inline *,
.hadith-quote *,
.hadith-text *,
.hadith-content *,
.verse-box * {
    font-family: inherit;
    font-size: inherit;
}

/* ⭐ خط قرآني متخصص للآيات فقط
   - Amiri Quran: يدعم رموز Unicode القرآنية الكاملة (التشكيل، علامات الوقف) بدون تداخل
   - الأحاديث تبقى بـ Amiri العادي الأنسب للنصوص المكتوبة */
.quran-verse,
.quran-verse * {
    font-family: var(--article-font-quran, 'Amiri Quran', 'Amiri', serif) !important;
}

/* ══════════════════════════════════════════
   3. REFINEMENTS - لمسات فنية وتصحيحات
   ══════════════════════════════════════════ */

/* استثناء: المراجع والمصادر تعود لخط Cairo للوضوح */
.hadith-source,
.hadith-source-inline,
.verse-reference {
    font-family: var(--article-font-main);
    font-size: var(--article-islamic-small);
    line-height: 1.6;
}

.hadith-source *,
.hadith-source-inline *,
.verse-reference * {
    font-family: inherit;
    font-size: inherit;
}

.article-content .hadith-source p {
    text-align: right;
}

/* الأحاديث المدمجة */
.hadith-inline {
    padding: 2px 4px;
    display: inline;
}

.hadith-inline.sahih {
    color: #1B5E20;
}

.hadith-inline.daif {
    color: #B71C1C;
}

/* ══════════════════════════════════════════
   4. THEME OVERRIDES - توافق الثيمات
   ══════════════════════════════════════════ */

/* الوضع الليلي */
[data-theme="dark"] .article-content {
    color: var(--text-main);
}

[data-theme="dark"] .hadith-inline.sahih {
    color: #81C784;
}

[data-theme="dark"] .hadith-inline.daif {
    color: #EF9A9A;
}

/* الوضع الأكاديمي */
[data-theme="academic"] .article-content {
    color: #212529;
}

[data-theme="academic"] .hadith-inline.sahih {
    color: #2E7D32;
}

/* ══════════════════════════════════════════
   6. FINAL SAFETY NET - شبكة الأمان النهائية
   ══════════════════════════════════════════ */
/* القاعدة الأقوى في المشروع لضمان ظهور خط الأحاديث المدمجة */
html body .article-content span.hadith-inline,
html body .article-content .hadith-inline,
html body .author-text span.hadith-inline {
    font-family: 'Amiri', serif !important;
}

/* ══════════════════════════════════════════
   7. TAKHREEJ HIGHLIGHTS - تظليل التخريج والحكم
   ══════════════════════════════════════════ */

.narrator-status,
.critical-term {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 700;
    margin-left: 5px;
    white-space: normal;
}

.critical-term,
.al-takhreej-error {
    background-color: var(--hadith-problem-bg);
    color: var(--hadith-problem-color);
}

.narrator-status.narrator-weak,
.narrator-status.narrator-problematic,
.narrator-status.narrator-unknown {
    background-color: var(--hadith-weak-bg, var(--hadith-problem-bg));
    color: var(--hadith-weak-color, var(--hadith-problem-color));
}

.narrator-status.narrator-reliable {
    background-color: var(--hadith-ok-bg);
    color: var(--hadith-ok-color);
}

.author-text p.hukm-verdict {
    text-align: center;
}

span.critical-term.final-hukm {
    display: block;
    font-size: 26px;
    font-weight: 700;
    margin-top: -35px;
    text-align: right;
}

[data-theme="dark"] span.critical-term.final-hukm {
    color: rgba(255, 255, 255, 1);
}
/* ─── end:   styles/articles/islamic.css ─── */


/* المكونات (العناوين، الصناديق، إلخ) */

/* ─── begin: styles/articles/components.css ─── */
/* ============================================
   8.3. HIGHLIGHT KEYWORD - تظليل الكلمات المفتاحية
   ============================================
   يُستخدم لتظليل الكلمات المهمة داخل النص
   - الوضع الافتراضي: تظليل أصفر خفيف
   - الوضع الليلي: تظليل أخف للعين
   - الوضع النهاري: تظليل برتقالي خفيف
   ============================================ */

/* ============================================
   ⭐ HIGHLIGHT KEYWORD - تظليل الكلمات المفتاحية
   ============================================
   - داخل .quran-verse: يستخدم Amiri
   - خارج .quran-verse (في كلام الكاتب): يستخدم Cairo
   ============================================ */

.highlight-keyword {
    background: linear-gradient(120deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 235, 59, 0.1) 100%) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-weight: 500;
    transition: background 0.2s ease;
    display: inline;
    color: var(--secondary-color);
    /* ⚡ الخط الافتراضي: Cairo (لكلام الكاتب) */
    font-family: 'Cairo', sans-serif !important;
}

/* ⚡ أولوية قصوى: highlight-keyword في كلام الكاتب (يجب أن يظهر التظليل دائماً) */
.article-content .highlight-keyword,
.article-content p .highlight-keyword,
.author-text .highlight-keyword,
.author-text p .highlight-keyword,
.article-content .author-text .highlight-keyword,
.article-content .author-text p .highlight-keyword {
    background: linear-gradient(120deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 235, 59, 0.1) 100%) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* ⚡ أولوية قصوى: highlight-keyword داخل quran-verse (يستخدم Amiri) */
.quran-verse .highlight-keyword,
.article-content .quran-verse .highlight-keyword,
.author-text .quran-verse .highlight-keyword,
.article-content span.quran-verse .highlight-keyword,
.author-text span.quran-verse .highlight-keyword {
    background: linear-gradient(120deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 235, 59, 0.1) 100%) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    /* ⚡ داخل الآيات: Amiri */
    font-family: 'Amiri', serif !important;
}

/* Dark Mode - Highlight Keyword */
[data-theme="dark"] .highlight-keyword {
    background: rgba(7, 183, 93, 0.25) !important;
    color: #ffffff !important;
    /* ⚡ الخط الافتراضي: Cairo */
    font-family: 'Cairo', sans-serif !important;
}

/* ⚡ أولوية قصوى: highlight-keyword في كلام الكاتب في الوضع الليلي */
[data-theme="dark"] .article-content .highlight-keyword,
[data-theme="dark"] .article-content p .highlight-keyword,
[data-theme="dark"] .author-text .highlight-keyword,
[data-theme="dark"] .author-text p .highlight-keyword,
[data-theme="dark"] .article-content .author-text .highlight-keyword,
[data-theme="dark"] .article-content .author-text p .highlight-keyword {
    background: rgba(7, 183, 93, 0.25) !important;
    color: #ffffff !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* ⚡ أولوية قصوى: highlight-keyword داخل quran-verse في الوضع الليلي (يستخدم Amiri) */
[data-theme="dark"] .quran-verse .highlight-keyword,
[data-theme="dark"] .article-content .quran-verse .highlight-keyword,
[data-theme="dark"] .author-text .quran-verse .highlight-keyword,
[data-theme="dark"] .article-content span.quran-verse .highlight-keyword,
[data-theme="dark"] .author-text span.quran-verse .highlight-keyword {
    background: rgba(7, 183, 93, 0.25) !important;
    color: #ffffff !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    /* ⚡ داخل الآيات: Amiri */
    font-family: 'Amiri', serif !important;
}

/* ⚡ أولوية قصوى: highlight-keyword في كلام الكاتب في الوضع الأكاديمي */
[data-theme="academic"] .article-content .highlight-keyword,
[data-theme="academic"] .article-content p .highlight-keyword,
[data-theme="academic"] .author-text .highlight-keyword,
[data-theme="academic"] .author-text p .highlight-keyword,
[data-theme="academic"] .article-content .author-text .highlight-keyword,
[data-theme="academic"] .article-content .author-text p .highlight-keyword {
    /* توحيد اللون مع الوضع الليلي (أصفر جميل) */
    background: linear-gradient(120deg, rgba(255, 235, 59, 0.4) 0%, rgba(255, 235, 59, 0.2) 100%) !important;
    color: #000000 !important;
    /* نص أسود للقراءة */
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-family: 'Cairo', sans-serif !important;
}

/* ⚡ أولوية قصوى: highlight-keyword داخل quran-verse في الوضع الأكاديمي (يستخدم Amiri) */
[data-theme="academic"] .quran-verse .highlight-keyword,
[data-theme="academic"] .article-content .quran-verse .highlight-keyword,
[data-theme="academic"] .author-text .quran-verse .highlight-keyword,
[data-theme="academic"] .article-content span.quran-verse .highlight-keyword,
[data-theme="academic"] .author-text span.quran-verse .highlight-keyword {
    /* توحيد اللون مع الوضع الليلي (أصفر جميل) */
    background: linear-gradient(120deg, rgba(255, 235, 59, 0.4) 0%, rgba(255, 235, 59, 0.2) 100%) !important;
    color: #000000 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    /* ⚡ داخل الآيات: Amiri */
    font-family: 'Amiri', serif !important;
}

/* ============================================
   8.5. SUBHEADINGS - العناوين الجانبية (2025-12-06)
   ============================================
   بديل عن info-box للتصميم الانسيابي
   - example-heading: عناوين أمثلة وملاحظات (برتقالي)
   - warning-heading: عناوين تحذيرات (أحمر)
   ============================================ */

/* Example Heading - العنوان الجانبي للأمثلة */
.example-heading,
h4.example-heading,
h3.example-heading,
.article-content .example-heading,
.article-content .author-text .example-heading {
    font-family: 'Cairo', sans-serif !important;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color, #ff7e00);
    margin: 25px 0 10px 0;
    padding: 8px 15px;
    background: rgba(255, 126, 0, 0.08);
    border-right: 4px solid var(--secondary-color, #ff7e00);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.example-heading i,
h4.example-heading i,
h3.example-heading i,
.article-content .example-heading i,
.article-content .author-text .example-heading i {
    color: var(--secondary-color, #ff7e00) !important;
    font-size: 1em;
}

/* Dark Mode - Example Heading */
[data-theme="dark"] .example-heading,
[data-theme="dark"] h4.example-heading,
[data-theme="dark"] h3.example-heading,
[data-theme="dark"] .article-content .example-heading {
    color: #FFB74D !important;
    background: rgba(255, 183, 77, 0.1);
    border-right-color: #FFB74D;
}

[data-theme="dark"] .example-heading i,
[data-theme="dark"] h4.example-heading i,
[data-theme="dark"] h3.example-heading i {
    color: #FFB74D !important;
}

/* Academic Mode - Example Heading */
[data-theme="academic"] .example-heading,
[data-theme="academic"] h4.example-heading,
[data-theme="academic"] h3.example-heading {
    color: #e65100 !important;
    background: rgba(230, 81, 0, 0.08);
    border-right-color: #e65100;
}

[data-theme="academic"] .example-heading i,
[data-theme="academic"] h4.example-heading i,
[data-theme="academic"] h3.example-heading i {
    color: #e65100 !important;
}

/* Warning Heading - العنوان الجانبي للتحذيرات */
.warning-heading,
h3.warning-heading,
h4.warning-heading,
.article-content .warning-heading,
.article-content .author-text .warning-heading {
    font-family: 'Cairo', sans-serif !important;
    font-size: 1.15rem;
    font-weight: 700;
    color: #dc2626;
    margin: 30px 0 10px 0;
    padding: 10px 15px;
    background: rgba(220, 38, 38, 0.08);
    border-right: 4px solid #dc2626;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.warning-heading i,
h3.warning-heading i,
h4.warning-heading i,
.article-content .warning-heading i,
.article-content .author-text .warning-heading i {
    color: #dc2626 !important;
    font-size: 1em;
}

/* Dark Mode - Warning Heading */
[data-theme="dark"] .warning-heading,
[data-theme="dark"] h3.warning-heading,
[data-theme="dark"] h4.warning-heading,
[data-theme="dark"] .article-content .warning-heading {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.1);
    border-right-color: #f87171;
}

[data-theme="dark"] .warning-heading i,
[data-theme="dark"] h3.warning-heading i,
[data-theme="dark"] h4.warning-heading i {
    color: #f87171 !important;
}

/* Academic Mode - Warning Heading */
[data-theme="academic"] .warning-heading,
[data-theme="academic"] h3.warning-heading,
[data-theme="academic"] h4.warning-heading {
    color: #b91c1c !important;
    background: rgba(185, 28, 28, 0.08);
    border-right-color: #b91c1c;
}

[data-theme="academic"] .warning-heading i,
[data-theme="academic"] h3.warning-heading i,
[data-theme="academic"] h4.warning-heading i {
    color: #b91c1c !important;
}

/* ============================================
   9. SPECIAL BOXES - الصناديق الخاصة
   ============================================ */

/* Info Box */
.info-box {
    background: rgba(59, 130, 246, 0.1);
    border-right: 4px solid #3B82F6;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.9;
}

.info-box p,
.info-box li {
    font-size: 1.1rem !important;
    line-height: 1.9 !important;
}

.info-box ul,
.info-box ol {
    font-size: 1.1rem;
    line-height: 1.9;
}

[data-theme="academic"] .info-box {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

/* ============================================
   VERSES GRID - شبكة الآيات (2025-12-06)
   ============================================ */
.verses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.verse-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.verse-item .quran-verse {
    font-size: 1.2rem !important;
    line-height: 2 !important;
}

/* Academic Mode - Verses Grid */
[data-theme="academic"] .verse-item {
    background: rgba(30, 64, 175, 0.05);
    border-color: rgba(30, 64, 175, 0.2);
}

/* Mobile - Single Column */
@media (max-width: 768px) {
    .verses-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   COMPARISON GRID - شبكة المقارنة (2025-12-06)
   ============================================ */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 25px 0;
}

.comparison-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.comparison-card h4 {
    color: var(--secondary-color, #FFB74D);
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center;
}

.comparison-card p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 12px;
}

.comparison-card ul {
    margin: 0;
    padding-right: 20px;
}

.comparison-card li {
    margin-bottom: 8px;
    line-height: 1.7;
}

/* Academic Mode */
[data-theme="academic"] .comparison-card {
    background: rgba(30, 64, 175, 0.05);
    border-color: rgba(30, 64, 175, 0.2);
}

[data-theme="academic"] .comparison-card h4 {
    color: #1e40af;
}

/* Mobile - Single Column */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   VERSE REFERENCE - مرجع الآية (2025-12-06)
   ============================================ */
.verse-reference {
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e40af;
    margin-right: 8px;
    display: inline;
}

/* Verse Box - المرجع مباشرة بعد الآية في نفس السطر (محدث 2026-01-14) */
.verse-box {
    text-align: right;
    display: block;
}

/* الآية والمرجع في نفس السطر - لا ينفصلان أبداً */
.verse-box p.quran-verse {
    display: inline;
    margin: 0;
}

.verse-box .verse-reference {
    display: inline !important;
    margin-right: 8px;
    color: #1e40af !important;
    font-family: 'Cairo', sans-serif !important;
    white-space: nowrap;
    /* منع كسر المرجع */
}

/* التأكد من عدم انفصال الآية عن المرجع - حتى لو كانت الآية طويلة */
.verse-box p.quran-verse::after {
    content: ' ';
    /* مسافة واحدة فقط بين الآية والمرجع */
}

[data-theme="dark"] .verse-reference,
[data-theme="dark"] .verse-box .verse-reference {
    color: #ffffff !important;
}

[data-theme="academic"] .verse-reference,
[data-theme="academic"] .verse-box .verse-reference {
    color: #1e40af !important;
}

/* ============================================
   COMPARISON TABLE - جدول المقارنة (2025-12-06)
   ============================================ */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--card-bg, #1e293b);
    border-radius: 12px;
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table th {
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    color: #ffffff;
    font-weight: 700;
}

.comparison-table td {
    color: #ffffff;
}

/* Topic Badge - شارة الموضوع */
.topic-badge {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255, 183, 77, 0.2);
    color: #FFB74D;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Academic Mode - Comparison Table */
[data-theme="academic"] .comparison-table {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

[data-theme="academic"] .comparison-table th,
[data-theme="academic"] .comparison-table td {
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="academic"] .comparison-table td {
    color: #1e293b !important;
}

/* ⭐ topic-badge في الوضع الأكاديمي - النص أبيض لأن الخلفية زرقاء */
[data-theme="academic"] .topic-badge {
    background: linear-gradient(135deg, #1565C0, #1976D2);
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(21, 101, 192, 0.2);
}

/* Example Item in Table */
.example-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.example-item i {
    color: var(--secondary-color, #FFB74D);
    margin-top: 4px;
}

[data-theme="academic"] .example-item i {
    color: #e65100;
}

/* Surah Icons */
.surah-icon {
    font-size: 0.6rem;
    margin-left: 5px;
}

.surah-icon.icon-green {
    color: #22c55e;
}

.surah-icon.icon-orange {
    color: #f97316;
}

.surah-icon.icon-blue {
    color: #3b82f6;
}

.surah-icon.icon-purple {
    color: #a855f7;
}

.surah-icon.icon-red {
    color: #ef4444;
}

/* Warning Box */
.warning-box {
    background: #fff3cd;
    border-right: 4px solid #ffc107;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    color: #856404;
}

[data-theme="dark"] .warning-box {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

/* Hero Box */
.hero-box {
    background: linear-gradient(135deg, var(--primary-light), var(--card-bg));
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
}

/* Conclusion Box */
.conclusion,
.conclusion-box {
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
    border: 3px solid #2C5530;
    border-right: 8px solid #2C5530;
    border-radius: 18px;
    padding: 35px;
    margin: 40px 0;
    box-shadow: 0 6px 20px rgba(44, 85, 48, 0.2);
    font-family: 'Cairo', sans-serif;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2C5530;
    line-height: 2;
    position: relative;
}

.conclusion::before {
    content: '✓';
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2rem;
    color: #2C5530;
    opacity: 0.3;
}

[data-theme="academic"] .conclusion,
[data-theme="academic"] .conclusion p {
    color: #2C5530 !important;
}

[data-theme="dark"] .conclusion {
    background: linear-gradient(135deg, #1B3A1F 0%, #0F2512 100%);
    border-color: #4CAF50;
    color: #A5D6A7;
}

[data-theme="dark"] .conclusion::before {
    color: #4CAF50;
}

/* Scholar Quote */
.scholar-quote {
    background: var(--card-bg);
    padding: 20px;
    margin: 25px 0;
    border-right: 5px solid var(--accent-color);
    border-radius: 0 15px 15px 0;
    line-height: 1.9;
    font-family: 'Cairo', sans-serif !important;
    box-shadow: none;
    font-style: italic;
}

[data-theme="dark"] .scholar-quote {
    background: #252525;
}

[data-theme="academic"] .scholar-quote {
    background: #f8f9fa;
    border-right: 5px solid #FF9800;
}

/* Highlight */
.highlight {
    background: linear-gradient(120deg, #ffeaa7 0%, #fdcb6e 100%);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #2d3436;
    font-family: 'Cairo', sans-serif;
}

[data-theme="dark"] .highlight {
    background: rgba(7, 183, 93, 0.25) !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-family: 'Cairo', sans-serif !important;
}

[data-theme="academic"] .highlight {
    background: linear-gradient(120deg, rgba(255, 235, 59, 0.5) 0%, rgba(255, 235, 59, 0.3) 100%) !important;
    color: #B8860B !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-family: 'Cairo', sans-serif !important;
}


/* Emphasis */
.emphasis {
    color: #C62828;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
}

[data-theme="dark"] .emphasis {
    color: #EF5350;
}

/* ⭐ الوضع الأكاديمي: emphasis يجب أن يكون واضحاً - أولوية قصوى */
/* هذه القاعدة يجب أن تكون في articles.css (يُحمّل بعد components.css) */
[data-theme="academic"] .emphasis,
[data-theme="academic"] article .emphasis,
[data-theme="academic"] article span.emphasis,
[data-theme="academic"] .article-content .emphasis,
[data-theme="academic"] .article-content span.emphasis,
[data-theme="academic"] .author-text .emphasis,
[data-theme="academic"] .author-text span.emphasis,
[data-theme="academic"] article .author-text span.emphasis,
[data-theme="academic"] .article-content article span.emphasis {
    color: #C62828 !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Separator */
.separator {
    text-align: center;
    margin: 45px 0;
    position: relative;
}

.separator::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin-bottom: 20px;
}

.separator-icon {
    font-size: 1.8em;
    color: var(--secondary-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   10. HEADINGS & ICONS - العناوين والأيقونات (قواعد شاملة)
   ============================================ */

/* ⭐ قاعدة شاملة للأيقونات في جميع العناوين (نص + SVG) */
.article-content h1 i,
.article-content h2 i,
.article-content h3 i,
.article-content h4 i,
.article-content h5 i,
.article-content h6 i,
.article-content section h1 i,
.article-content section h2 i,
.article-content section h3 i,
.article-content section h4 i,
.article-content section h5 i,
.article-content section h6 i,
.article-content div[id] h3 i,
.warning-heading i,
.example-heading i,
.warning-heading i.fas,
.warning-heading i.fab,
.warning-heading i.far,
.warning-heading i.fal,
.example-heading i.fas,
.example-heading i.fab,
.example-heading i.far,
.example-heading i.fal,
.comparison-table th i,
.comparison-table td i,
.comparison-table .example-item i,
.example-item i,
.surah-icon,
.topic-badge i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* حماية SVG icons في العناوين */
.article-content h1 svg.svg-inline--fa,
.article-content h2 svg.svg-inline--fa,
.article-content h3 svg.svg-inline--fa,
.article-content h4 svg.svg-inline--fa,
.article-content section h1 svg.svg-inline--fa,
.article-content section h2 svg.svg-inline--fa,
.article-content section h3 svg.svg-inline--fa,
.warning-heading svg.svg-inline--fa,
.example-heading svg.svg-inline--fa,
.comparison-table th svg.svg-inline--fa,
.comparison-table td svg.svg-inline--fa,
.comparison-table .example-item svg.svg-inline--fa,
.example-item svg.svg-inline--fa {
    display: inline-block !important;
    height: 1em !important;
    width: 1em !important;
    vertical-align: -0.125em !important;
    fill: currentColor !important;
}

/* h2 Base */
.article-content h2,
.article-content section h2 {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: #FF9800;
    margin-top: 50px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    padding-right: 50px;
    border-bottom: none;
    position: relative;
    font-weight: 700;
    transition: color 0.3s ease;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    /* ⭐ ضبط المسافات بين الكلمات والحروف - قاعدة مركزية */
    word-spacing: normal !important;
    letter-spacing: normal !important;
    word-break: normal;
    hyphens: none;
}

/* h2 خط مرن */
.article-content h2::after,
.article-content section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50px;
    left: 0;
    height: 3px;
    background-color: #FF9800;
    margin-left: -10px;
    width: calc(100% - 50px + 10px);
}

/* h2 Icon */
.article-content h2 i,
.article-content section h2 i {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2em;
    color: #FF9800;
    line-height: 1;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Dark Mode h2 */
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .article-content section h2 {
    color: #FFB74D !important;
    border-bottom: none !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .article-content h2::after,
[data-theme="dark"] .article-content section h2::after {
    background-color: #FFB74D !important;
}

[data-theme="dark"] .article-content h2 i,
[data-theme="dark"] .article-content section h2 i {
    color: #FFB74D !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Academic Mode h2 */
[data-theme="academic"] .article-content h2,
[data-theme="academic"] .article-content section h2 {
    color: #000080 !important;
    border-bottom: none !important;
}

[data-theme="academic"] .article-content h2::after,
[data-theme="academic"] .article-content section h2::after {
    background-color: #FF9800 !important;
}

[data-theme="academic"] .article-content h2 i,
[data-theme="academic"] .article-content section h2 i {
    color: #FF9800 !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* h3 Base */
.article-content div[id] h3,
.article-content h3 {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: #2C5282;
    margin: 30px 0 20px 0;
    padding-right: 45px;
    border-right: 4px solid var(--secondary-color, #ff7e00);
    font-weight: 600;
    transition: color 0.3s ease;
    position: relative;
}

/* h3 Icon */
.article-content div[id] h3 i,
.article-content h3 i {
    position: absolute;
    right: 0;
    top: -3px;
    font-size: 0.85em;
    color: var(--secondary-color, #ff7e00);
    line-height: 1;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Dark Mode h3 */
[data-theme="dark"] .article-content div[id] h3,
[data-theme="dark"] .article-content h3 {
    color: var(--heading-secondary);
}

[data-theme="dark"] .article-content div[id] h3 i,
[data-theme="dark"] .article-content h3 i {
    color: var(--heading-accent) !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Academic Mode h3 */
[data-theme="academic"] .article-content h3 {
    color: var(--accent-color);
}

/* Section h1 */
.article-content section h1 {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--secondary-color);
    margin: 0 0 30px 0;
    padding-right: 50px;
    font-weight: 700;
    position: relative;
    line-height: 1.5;
}

.article-content section h1 i {
    position: absolute;
    right: 0;
    top: 5px;
    font-size: 0.8em;
    color: var(--secondary-color);
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

[data-theme="dark"] .article-content section h1 {
    color: #FFB74D;
}

[data-theme="dark"] .article-content section h1 i {
    color: #FFB74D !important;
}

/* ============================================
   10.5. SIDE HEADINGS - العناوين الجانبية (warning-heading, example-heading)
   ============================================ */

/* Warning Heading (h3) */
.warning-heading,
h3.warning-heading,
.article-content h3.warning-heading,
.author-text h3.warning-heading {
    font-family: 'Cairo', sans-serif !important;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    color: #E53E3E;
    margin: 25px 0 15px 0;
    padding: 12px 20px;
    padding-right: 40px;
    background: rgba(229, 62, 62, 0.1);
    border-right: 4px solid #E53E3E;
    border-radius: 0 12px 12px 0;
    font-weight: 600;
    position: relative;
    display: inline-block;
    width: fit-content;
    min-width: 200px;
}

/* Warning Heading Icon */
.warning-heading i,
h3.warning-heading i,
.article-content h3.warning-heading i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    color: #E53E3E;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Dark Mode - Warning Heading */
[data-theme="dark"] .warning-heading,
[data-theme="dark"] h3.warning-heading {
    background: rgba(229, 62, 62, 0.15);
    color: #EF5350;
    border-color: #EF5350;
}

[data-theme="dark"] .warning-heading i {
    color: #EF5350 !important;
}

/* Academic Mode - Warning Heading */
[data-theme="academic"] .warning-heading,
[data-theme="academic"] h3.warning-heading {
    background: #ffe5e5;
    color: #C62828;
    border-color: #E53E3E;
}

[data-theme="academic"] .warning-heading i {
    color: #C62828 !important;
}

/* تطبيق خط Amiri على الآيات داخل warning-heading */
.warning-heading .quran-verse,
.warning-heading+p .quran-verse,
.warning-heading+p .quran-verse *,
.author-text .warning-heading+p .quran-verse,
.author-text .warning-heading+p .quran-verse *,
/* ✅ قواعد قوية: تطبيق Amiri على الصناديق التي تحتوي على آيات */
.warning-box .quran-verse,
.warning-box .quran-verse *,
.info-box .quran-verse,
.info-box .quran-verse *,
.hero-box .quran-verse,
.hero-box .quran-verse *,
.article-content .info-box:has(span.quran-verse),
.article-content .info-box:has(span.quran-verse) *,
.article-content .warning-box:has(span.quran-verse),
.article-content .warning-box:has(span.quran-verse) *,
.article-content .hero-box:has(span.quran-verse),
.article-content .hero-box:has(span.quran-verse) *,
.article-content .author-text .info-box:has(span.quran-verse),
.article-content .author-text .info-box:has(span.quran-verse) *,
.article-content .author-text .warning-box:has(span.quran-verse),
.article-content .author-text .warning-box:has(span.quran-verse) *,
.article-content .author-text .hero-box:has(span.quran-verse),
.article-content .author-text .hero-box:has(span.quran-verse) * {
    font-family: 'Amiri', serif !important;
}

/* ✅ قواعد إضافية: تطبيق Amiri على الصناديق التي تحتوي على رموز الآيات مباشرة */
.article-content .info-box:has-text('﴿'),
.article-content .info-box:has-text('﴾'),
.article-content .warning-box:has-text('﴿'),
.article-content .warning-box:has-text('﴾'),
.article-content .hero-box:has-text('﴿'),
.article-content .hero-box:has-text('﴾') {
    font-family: 'Amiri', serif !important;
}

/* Example Heading (h4) */
.example-heading,
h4.example-heading,
.article-content h4.example-heading,
.author-text h4.example-heading {
    font-family: 'Cairo', sans-serif !important;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #2C5282;
    margin: 20px 0 12px 0;
    padding: 10px 18px;
    padding-right: 38px;
    background: rgba(44, 82, 130, 0.1);
    border-right: 3px solid #2C5282;
    border-radius: 0 10px 10px 0;
    font-weight: 600;
    position: relative;
    display: inline-block;
    width: fit-content;
    min-width: 180px;
}

/* Example Heading Icon */
.example-heading i,
h4.example-heading i,
.article-content h4.example-heading i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    color: #2C5282;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Dark Mode - Example Heading */
[data-theme="dark"] .example-heading,
[data-theme="dark"] h4.example-heading {
    background: rgba(44, 82, 130, 0.15);
    color: #64B5F6;
    border-color: #64B5F6;
}

[data-theme="dark"] .example-heading i {
    color: #64B5F6 !important;
}

/* Academic Mode - Example Heading */
[data-theme="academic"] .example-heading,
[data-theme="academic"] h4.example-heading {
    background: #e3f2fd;
    color: #1565C0;
    border-color: #2C5282;
}

[data-theme="academic"] .example-heading i {
    color: #1565C0 !important;
}

/* تطبيق خط Amiri على الآيات داخل example-heading */
.example-heading .quran-verse,
.example-heading+p .quran-verse,
.example-heading+p .quran-verse *,
.author-text .example-heading+p .quran-verse,
.author-text .example-heading+p .quran-verse *,
.comparison-table .quran-verse,
.comparison-table .quran-verse *,
.comparison-table td .quran-verse,
.comparison-table td .quran-verse *,
.comparison-table .example-item .quran-verse,
.comparison-table .example-item .quran-verse * {
    font-family: 'Amiri', serif !important;
}

/* ============================================
   11. VERSE BOX - صندوق الآيات
   ============================================ */

.verse-box,
.author-text .verse-box,
.article-content .verse-box,
.article-content .author-text .verse-box {
    background: linear-gradient(135deg, var(--primary-light, #e3f2fd), var(--card-bg));
    color: var(--text-main);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 20px 0;
    text-align: right;
    /* المرجع مباشرة بعد الآية في نفس السطر */
    font-size: 1.1em;
    font-weight: 500;
    position: relative;
    line-height: 1.8;
    font-family: 'Amiri', serif !important;
}

/* تطبيق خط Amiri على كل العناصر داخل verse-box */
.verse-box,
.verse-box *,
.verse-box p,
.verse-box span:not(.verse-reference),
.verse-box div,
.author-text .verse-box *:not(.verse-reference),
.article-content .verse-box *:not(.verse-reference),
.article-content .author-text .verse-box *:not(.verse-reference) {
    font-family: 'Amiri', serif !important;
}

.verse-box::before {
    content: '﴿';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 2em;
    opacity: 0.08;
    color: var(--primary-color);
    font-family: 'Amiri', serif;
}

.verse-box::after {
    content: '﴾';
    position: absolute;
    bottom: 8px;
    left: 12px;
    font-size: 2em;
    opacity: 0.08;
    color: var(--primary-color);
    font-family: 'Amiri', serif;
}

[data-theme="academic"] .verse-box,
[data-theme="academic"] .author-text .verse-box {
    background: linear-gradient(135deg, #e3f2fd, #f8f9fa);
    color: #212529 !important;
    border-color: #1565C0;
    font-family: 'Amiri', serif !important;
}

[data-theme="academic"] .verse-box p,
[data-theme="academic"] .verse-box *,
[data-theme="academic"] .author-text .verse-box * {
    color: #212529 !important;
    font-family: 'Amiri', serif !important;
}

[data-theme="dark"] .verse-box,
[data-theme="dark"] .author-text .verse-box {
    background: linear-gradient(135deg, #1a3a52 0%, #0f2537 100%);
    color: #b8d4e8;
    border-color: #4a7ba7;
    font-family: 'Amiri', serif !important;
}

[data-theme="dark"] .verse-box p,
[data-theme="dark"] .verse-box *,
[data-theme="dark"] .author-text .verse-box * {
    font-family: 'Amiri', serif !important;
}

/* صندوق آية/حديث صحيح — يتبع متغيرات الثيم المركزية */
.verse-box--success,
.article-content .verse-box--success,
.article-content .author-text .verse-box--success {
    background: var(--sahih-bg);
    color: var(--sahih-text);
    border-color: var(--sahih-border);
}

.verse-box--success p,
.verse-box--success *:not(.verse-reference):not(.source) {
    color: inherit;
}

[data-theme="dark"] .verse-box.verse-box--success,
[data-theme="dark"] .article-content .verse-box.verse-box--success,
[data-theme="dark"] .author-text .verse-box.verse-box--success {
    background: var(--sahih-bg) !important;
    color: var(--sahih-text) !important;
    border-color: var(--sahih-border) !important;
}

[data-theme="academic"] .verse-box--success,
[data-theme="academic"] .article-content .verse-box--success {
    background: var(--sahih-bg);
    color: var(--sahih-text);
    border-color: var(--sahih-border);
}

/* Verse Standalone - بدون box، مع Bold للتمييز */
.verse-standalone,
p.verse-standalone {
    font-family: 'Amiri', serif !important;
    font-weight: bold !important;
    text-align: center;
    font-size: 1.3em;
    line-height: 2.2;
    margin: 30px 0;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--primary-color);
}

.verse-standalone *:not(.verse-reference) {
    font-family: 'Amiri', serif !important;
    font-weight: bold !important;
}

/* ✅ الوضع الليلي: .verse-standalone */
[data-theme="dark"] .verse-standalone,
[data-theme="dark"] p.verse-standalone {
    font-family: 'Amiri', serif !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

[data-theme="dark"] .verse-standalone *:not(.verse-reference) {
    font-family: 'Amiri', serif !important;
    font-weight: bold !important;
}

/* ✅ الوضع الأكاديمي: .verse-standalone */
[data-theme="academic"] .verse-standalone,
[data-theme="academic"] p.verse-standalone {
    font-family: 'Amiri', serif !important;
    font-weight: bold !important;
    color: var(--primary-color) !important;
}

[data-theme="academic"] .verse-standalone *:not(.verse-reference) {
    font-family: 'Amiri', serif !important;
    font-weight: bold !important;
}

/* ============================================
   12. ARTICLE ENDING - خاتمة المقال
   ============================================ */

/* ⭐ قاعدة شاملة للخاتمة - نص عادي بدون صندوق (جزء من جسم المقال) */
.article-ending {
    text-align: center;
    margin-top: 44px;
    margin-bottom: 22px;
    padding: 0;
    border: none;
    background: none;
    font-family: 'Amiri', serif !important;
    font-size: 1.4em;
    line-height: 2.2;
    font-weight: 400;
}

/* ⚡ قواعد قوية جداً: جميع العناصر داخل .article-ending = Amiri (أولوية مطلقة) */
.article-ending,
.article-ending *,
.article-content .article-ending,
.article-content .article-ending *,
.article-ending p,
.article-ending .dua,
.article-ending .final-verse,
.article-ending span,
.article-ending div,
.article-ending strong,
.article-ending em {
    font-family: 'Amiri', serif !important;
}

.dua,
.article-ending .dua,
.article-content .article-ending .dua,
p.dua {
    font-family: 'Amiri', serif !important;
    font-size: 25px !important;
    line-height: 2.2;
    margin: 15px 0;
    color: inherit;
    text-align: center !important;
}

.final-verse,
.article-ending .final-verse,
.article-content .article-ending .final-verse,
p.final-verse {
    font-family: 'Amiri', serif !important;
    font-size: 22.5px !important;
    line-height: 2.2;
    margin: 15px 0;
    color: inherit;
    text-align: center !important;
}

/* Dark Mode - Article Ending (خط Amiri ثابت) */
[data-theme="dark"] .article-ending,
[data-theme="dark"] .article-ending *,
[data-theme="dark"] .article-content .article-ending,
[data-theme="dark"] .article-content .article-ending *,
[data-theme="dark"] .article-ending p,
[data-theme="dark"] .article-ending .dua,
[data-theme="dark"] .article-ending .final-verse,
[data-theme="dark"] .article-ending span,
[data-theme="dark"] .article-ending div,
[data-theme="dark"] .article-ending strong,
[data-theme="dark"] .article-ending em {
    font-family: 'Amiri', serif !important;
    color: #ffffff;
}

/* Academic Mode - Article Ending (خط Amiri ثابت) */
[data-theme="academic"] .article-ending,
[data-theme="academic"] .article-ending *,
[data-theme="academic"] .article-content .article-ending,
[data-theme="academic"] .article-content .article-ending *,
[data-theme="academic"] .article-ending p,
[data-theme="academic"] .article-ending .dua,
[data-theme="academic"] .article-ending .final-verse,
[data-theme="academic"] .article-ending span,
[data-theme="academic"] .article-ending div,
[data-theme="academic"] .article-ending strong,
[data-theme="academic"] .article-ending em {
    font-family: 'Amiri', serif !important;
    color: #212529;
}

/* Article Final Line - سطر الحمد الأخير */
.article-final-line,
.article-ending .article-final-line,
.article-content .article-ending .article-final-line,
p.article-final-line {
    font-family: 'Amiri', serif !important;
    font-size: 25px !important;
    line-height: 2.2;
    margin: 0 0 15px 0;
    padding: 0;
    color: inherit;
    font-weight: 400;
    text-align: center !important;
}

[data-theme="dark"] .article-ending,
[data-theme="dark"] .article-ending *,
[data-theme="dark"] .article-ending .article-final-line,
[data-theme="dark"] .article-ending .dua,
[data-theme="dark"] .article-ending .final-verse {
    color: #ffffff !important;
}

/* Dark Mode - تطبيق التنسيقات المركزية */
[data-theme="dark"] .article-final-line,
[data-theme="dark"] .article-ending .article-final-line,
[data-theme="dark"] .article-content .article-ending .article-final-line,
[data-theme="dark"] p.article-final-line {
    font-size: 25px !important;
    text-align: center !important;
}

[data-theme="dark"] .dua,
[data-theme="dark"] .article-ending .dua,
[data-theme="dark"] .article-content .article-ending .dua,
[data-theme="dark"] p.dua {
    font-size: 25px !important;
    text-align: center !important;
}

[data-theme="dark"] .final-verse,
[data-theme="dark"] .article-ending .final-verse,
[data-theme="dark"] .article-content .article-ending .final-verse,
[data-theme="dark"] p.final-verse {
    font-size: 22.5px !important;
    text-align: center !important;
}

[data-theme="academic"] .article-ending,
[data-theme="academic"] .article-ending *,
[data-theme="academic"] .article-ending .article-final-line,
[data-theme="academic"] .article-ending .dua,
[data-theme="academic"] .article-ending .final-verse {
    color: #212529 !important;
}

/* Academic Mode - تطبيق التنسيقات المركزية */
[data-theme="academic"] .article-final-line,
[data-theme="academic"] .article-ending .article-final-line,
[data-theme="academic"] .article-content .article-ending .article-final-line,
[data-theme="academic"] p.article-final-line {
    font-size: 25px !important;
    text-align: center !important;
}

[data-theme="academic"] .dua,
[data-theme="academic"] .article-ending .dua,
[data-theme="academic"] .article-content .article-ending .dua,
[data-theme="academic"] p.dua {
    font-size: 25px !important;
    text-align: center !important;
}

[data-theme="academic"] .final-verse,
[data-theme="academic"] .article-ending .final-verse,
[data-theme="academic"] .article-content .article-ending .final-verse,
[data-theme="academic"] p.final-verse {
    font-size: 22.5px !important;
    text-align: center !important;
}

/* Social Channels */
.social-channels {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* سلسلة النسخ (na_articles) — استثناء تنسيقي */
.naskh-series-title-block {
    margin-bottom: 0.5rem;
}

.naskh-series-title-block .author-text p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    font-weight: 600;
    color: var(--primary-color, #1565C0);
}

.article-content h2.naskh-series-intro-heading,
.article-content section h2.naskh-series-intro-heading {
    --naskh-intro-heading: #1565C0;
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding-right: 0;
    color: var(--naskh-intro-heading);
}

.article-content h2.naskh-series-intro-heading::after,
.article-content section h2.naskh-series-intro-heading::after {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 4.5rem;
    margin-left: 0;
}

[data-theme="dark"] .article-content h2.naskh-series-intro-heading,
[data-theme="dark"] .article-content section h2.naskh-series-intro-heading {
    --naskh-intro-heading: #64B5F6;
    color: var(--naskh-intro-heading) !important;
}

[data-theme="dark"] .article-content h2.naskh-series-intro-heading::after,
[data-theme="dark"] .article-content section h2.naskh-series-intro-heading::after {
    background-color: var(--naskh-intro-heading) !important;
}

[data-theme="academic"] .article-content h2.naskh-series-intro-heading,
[data-theme="academic"] .article-content section h2.naskh-series-intro-heading {
    color: var(--naskh-intro-heading, #1565C0) !important;
}

[data-theme="academic"] .article-content h2.naskh-series-intro-heading::after,
[data-theme="academic"] .article-content section h2.naskh-series-intro-heading::after {
    background-color: var(--naskh-intro-heading, #1565C0) !important;
}

/* ============================================
/* ─── end:   styles/articles/components.css ─── */


/* صناديق التنبيه والمعلومات */

/* ─── begin: styles/articles/boxes.css ─── */
/* ============================================
   BOXES.CSS - صناديق التنبيه والمعلومات
   ============================================
   
   📋 المحتويات:
   1. صندوق المعلومات
   2. صندوق التحذير
   3. صندوق الخلاصة
   4. العناوين الجانبية
   5. التجاوب
   
   📅 تاريخ الإنشاء: 2026-01-16
   ============================================ */

/* تخطّي استيراد مكرر: D:\_Al7amdWeb\styles\site\core\variables.css */


/* ============================================
   1. صندوق المعلومات
   ============================================ */
.info-box {
    background: var(--info-box-bg);
    border-right: 4px solid var(--info-box-border);
    border-radius: 0 12px 12px 0;
    padding: 20px 25px;
    margin: 25px 0;
    color: var(--info-box-text);
}

.info-box p {
    margin: 0;
    font-family: var(--article-font-main);
}

/* ============================================
   2. صندوق التحذير
   ============================================ */
.warning-box {
    background: var(--warning-box-bg);
    border-right: 4px solid var(--warning-box-border);
    border-radius: 0 12px 12px 0;
    padding: 20px 25px;
    margin: 25px 0;
    color: var(--warning-box-text);
}

.warning-box p {
    margin: 0;
    font-family: var(--article-font-main);
}

/* ============================================
   3. صندوق الخلاصة
   ============================================ */
.conclusion-box,
.hero-box {
    background: var(--conclusion-bg);
    border: 2px solid var(--conclusion-border);
    border-radius: 15px;
    padding: 25px 30px;
    margin: 40px 0;
    text-align: center;
    font-family: var(--article-font-main);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--conclusion-text);
    line-height: 2;
    position: relative;
}

.conclusion-box::before,
.hero-box::before {
    content: '★';
    position: absolute;
    top: -12px;
    right: 50%;
    transform: translateX(50%);
    background: var(--conclusion-bg);
    padding: 0 10px;
    font-size: 1.5rem;
    color: var(--conclusion-border);
}

/* ============================================
   4. عنوان المثال (Example Heading)
   ============================================ */
.example-heading,
h4.example-heading,
h3.example-heading {
    font-family: 'Cairo', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--example-text);
    margin: 25px 0 10px 0;
    padding: 8px 15px;
    padding-right: 35px;
    background: var(--example-bg);
    border-right: 4px solid var(--example-border);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.example-heading i {
    color: var(--example-text);
    font-size: 1em;
}

/* ============================================
   5. عنوان التحذير (Warning Heading)
   ============================================ */
.warning-heading,
h3.warning-heading,
h4.warning-heading {
    font-family: 'Cairo', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--danger-color);
    margin: 30px 0 10px 0;
    padding: 10px 15px;
    padding-right: 40px;
    background: var(--warning-bg);
    border-right: 4px solid var(--danger-color);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.warning-heading i {
    color: var(--danger-color);
    font-size: 1.1em;
}

/* ============================================
   6. عناصر الأمثلة
   ============================================ */
.example-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--glass-bg);
    border-right: 3px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    font-family: 'Cairo', sans-serif;
}

.example-item:hover {
    background: var(--glass-hover-bg);
    transform: translateX(-5px);
}

.example-item i {
    color: var(--example-text);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.example-item span,
.example-item div {
    flex: 1;
    color: var(--text-main);
}

/* الآيات داخل عنصر المثال */
.example-item .quran-verse {
    font-family: 'Amiri', serif !important;
    font-size: 1.05rem;
    line-height: 2;
}


/* ============================================
   7. صناديق التخريج والأحاديث الضعيفة (مركزي)
   ============================================ */
.hadith-problems,
.note-box,
.note-box--danger,
.article-content .hadith-problems,
.article-content .note-box {
    background: var(--daif-bg);
    color: var(--daif-text);
    border-right: 4px solid var(--daif-border);
    border-left: 1px solid var(--border-color);
    border-radius: 0 10px 10px 0;
    padding: 20px;
    margin: 20px 0;
    text-align: right;
    line-height: 1.9;
    font-size: 1.05em;
    box-shadow: none;
}

.hadith-problems p,
.note-box p {
    margin: 0 0 0.75em;
    color: inherit;
}

.hadith-problems p:last-child,
.note-box p:last-child {
    margin-bottom: 0;
}

.note-box--primary,
.article-content .note-box--primary {
    background: var(--verse-bg);
    color: var(--verse-text);
    border-right-color: var(--verse-border);
}

.note-box--success,
.article-content .note-box--success {
    background: var(--sahih-bg);
    color: var(--sahih-text);
    border-right-color: var(--sahih-border);
}

.note-box--accent,
.article-content .note-box--accent {
    background: var(--info-box-bg);
    color: var(--info-box-text);
    border-right-color: var(--info-box-border);
}

/* ============================================
   8. التجاوب
   ============================================ */
@media (max-width: 768px) {

    .info-box,
    .warning-box {
        padding: 15px 20px;
    }

    .conclusion-box,
    .hero-box {
        padding: 20px 25px;
        font-size: 1.2rem;
    }

    .example-heading,
    h4.example-heading {
        font-size: 0.95rem;
        padding: 8px 14px;
        padding-right: 32px;
    }

    .warning-heading,
    h3.warning-heading {
        font-size: 1.1rem;
        padding: 10px 16px;
        padding-right: 35px;
    }

    .example-item {
        padding: 10px;
        gap: 8px;
    }
}

@media (max-width: 480px) {

    .example-heading,
    h4.example-heading {
        font-size: 0.9rem;
        padding: 6px 10px;
        padding-right: 28px;
    }

    .warning-heading,
    h3.warning-heading {
        font-size: 1rem;
        padding: 8px 12px;
        padding-right: 30px;
    }

    .example-item {
        padding: 8px;
        gap: 6px;
        font-size: 0.85rem;
    }

    .example-item .quran-verse {
        font-size: 0.9rem;
        line-height: 1.8;
    }
}
/* ─── end:   styles/articles/boxes.css ─── */


/* الودجات */

/* ─── begin: styles/articles/widgets.css ─── */
/* ============================================
   13. COMPARISON CARDS - كروت المقارنة
   ============================================ */

/* ⭐ الأنماط الأساسية لكروت المقارنة موروثة من core.css ✅ */
.jannah-card::before,
.dunya-card::before,
.force-rounded-border-radius::before {
    border-radius: 20px !important;
}

/* Comparison Arrow */


/* ============================================
   13.5. COMPARISON TABLES - جداول المقارنة (تصميم شيك وجذاب)
   ============================================ */

/* Comparison Table - التصميم الأساسي */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 35px 0;
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    font-family: 'Cairo', sans-serif;
}

/* Table Header */
.comparison-table thead {
    background: linear-gradient(135deg, var(--primary-color), #2C5282);
}

.comparison-table th {
    padding: 18px 20px;
    text-align: right;
    color: #ffffff;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.comparison-table th:first-child {
    border-top-right-radius: 15px;
}

.comparison-table th:last-child {
    border-top-left-radius: 15px;
}

/* Icons في Header */
.comparison-table th i {
    margin-left: 8px;
    font-size: 1rem;
    color: var(--secondary-color, #ff7e00);
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Table Body */
.comparison-table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table tbody tr:hover {
    background: rgba(21, 101, 192, 0.08);
    transform: translateX(-3px);
    box-shadow: -3px 0 0 var(--secondary-color, #ff7e00);
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

/* Table Cells */
.comparison-table td {
    padding: 20px;
    text-align: right;
    vertical-align: top;
    font-family: 'Cairo', sans-serif;
    color: var(--text-main);
    line-height: 1.7;
}

.comparison-table td:first-child {
    font-weight: 600;
    color: var(--primary-color);
}

/* Dark Mode - Table */
[data-theme="dark"] .comparison-table {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .comparison-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .comparison-table td {
    color: var(--text-main);
}

/* Academic Mode - Table */
[data-theme="academic"] .comparison-table {
    background: #ffffff;
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="academic"] .comparison-table tbody tr:hover {
    background: rgba(21, 101, 192, 0.05);
}

[data-theme="academic"] .comparison-table td {
    color: #212529;
}

/* Topic Badge - شارات المواضيع */
.topic-badge {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--primary-color), #2C5282);
    color: #ffffff;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
    transition: all 0.3s ease;
}

.topic-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.4);
}

[data-theme="dark"] .topic-badge {
    background: linear-gradient(135deg, #1565C0, #1976D2);
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.5);
}

[data-theme="academic"] .topic-badge {
    background: linear-gradient(135deg, #1565C0, #1976D2);
    box-shadow: 0 2px 6px rgba(21, 101, 192, 0.2);
}

/* Surah Icon - أيقونات السور */
.surah-icon {
    margin-left: 8px;
    font-size: 0.85rem;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    vertical-align: middle;
}

.surah-icon.icon-green {
    color: #4CAF50 !important;
}

.surah-icon.icon-orange {
    color: #FF9800 !important;
}

.surah-icon.icon-blue {
    color: #2196F3 !important;
}

.surah-icon.icon-purple {
    color: #9C27B0 !important;
}

.surah-icon.icon-red {
    color: #F44336 !important;
}

[data-theme="dark"] .surah-icon.icon-green {
    color: #81C784 !important;
}

[data-theme="dark"] .surah-icon.icon-orange {
    color: #FFB74D !important;
}

[data-theme="dark"] .surah-icon.icon-blue {
    color: #64B5F6 !important;
}

[data-theme="dark"] .surah-icon.icon-purple {
    color: #BA68C8 !important;
}

[data-theme="dark"] .surah-icon.icon-red {
    color: #EF5350 !important;
}

/* Example Item - عناصر الأمثلة */
.example-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-right: 3px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    font-family: 'Cairo', sans-serif;
}

.example-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-5px);
    box-shadow: -3px 0 0 var(--secondary-color, #ff7e00);
}

.example-item i {
    color: var(--secondary-color, #ff7e00);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

.example-item span,
.example-item div {
    flex: 1;
    color: var(--text-main);
    font-family: 'Cairo', sans-serif;
}

/* تطبيق خط Amiri على الآيات داخل example-item */
.example-item .quran-verse,
.example-item span.quran-verse {
    font-family: 'Amiri', serif !important;
    font-size: 1.05rem;
    line-height: 2;
    color: inherit;
}

/* Dark Mode - Example Item */
[data-theme="dark"] .example-item {
    background: rgba(255, 255, 255, 0.05);
    border-right-color: var(--primary-color);
}

[data-theme="dark"] .example-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .example-item span,
[data-theme="dark"] .example-item div {
    color: var(--text-main);
}

/* Academic Mode - Example Item */
[data-theme="academic"] .example-item {
    background: #f5f5f5;
    border-right-color: #1565C0;
}

[data-theme="academic"] .example-item:hover {
    background: #eeeeee;
    box-shadow: -3px 0 0 #ff7e00;
}

[data-theme="academic"] .example-item span,
[data-theme="academic"] .example-item div {
    color: #212529;
}

/* ============================================
   14. RESPONSIVE - التجاوب
   ============================================ */

@media (max-width: 768px) {
    .article-content {
        padding: 30px 20px;
    }

    .article-header {
        padding: 40px 20px;
    }

    .verse-box {
        padding: 20px 15px;
    }

    .hadith-sahih,
    .hadith-daif {
        padding: 20px;
    }

    .hadith-text,
    .hadith-content {
        padding-right: 50px !important;
        /* ⚡ مسافة آمنة من الأيقونة في الموبايل */
        font-size: 1.1rem;
    }

    /* ⚡ تصحيح موضع الأيقونة في الموبايل */
    .status-icon {
        top: 10px !important;
        right: 10px !important;
        font-size: 1.5em !important;
    }

    .hadith-source {
        padding-right: 0;
    }

    .article-content h2,
    .article-content section h2 {
        padding-right: 40px;
        font-size: 1.4rem;
    }

    .article-content h3 {
        padding-right: 35px;
        font-size: 1.2rem;
    }

    /* Side Headings - Responsive */
    .warning-heading,
    h3.warning-heading {
        font-size: 1.1rem;
        padding: 10px 16px;
        padding-right: 35px;
        min-width: auto;
    }

    .example-heading,
    h4.example-heading {
        font-size: 0.95rem;
        padding: 8px 14px;
        padding-right: 32px;
        min-width: auto;
    }

    /* Comparison Table - Responsive */
    .comparison-table {
        font-size: 0.9rem;
        margin: 25px 0;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 10px;
    }

    .comparison-table th {
        font-size: 0.95rem;
    }

    .topic-badge {
        font-size: 0.85rem;
        padding: 4px 10px;
    }

    .example-item {
        padding: 10px;
        gap: 8px;
    }

    .example-item .quran-verse {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .article-content {
        padding: 20px 15px;
    }

    .article-page main .container {
        padding: 20px 10px;
    }

    .article-title {
        font-size: 1.5rem;
    }

    .article-subtitle {
        font-size: 1rem;
    }

    /* Side Headings - Mobile */
    .warning-heading,
    h3.warning-heading {
        font-size: 1rem;
        padding: 8px 12px;
        padding-right: 30px;
    }

    .example-heading,
    h4.example-heading {
        font-size: 0.9rem;
        padding: 6px 10px;
        padding-right: 28px;
    }

    /* Comparison Table - Mobile */
    .comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }

    .comparison-table thead,
    .comparison-table tbody,
    .comparison-table tr,
    .comparison-table th,
    .comparison-table td {
        display: block;
    }

    .comparison-table thead {
        display: none;
    }

    .comparison-table tbody tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 10px;
        background: var(--card-bg);
    }

    .comparison-table td {
        padding: 8px;
        text-align: right;
        border-bottom: 1px solid var(--border-color);
    }

    .comparison-table td:last-child {
        border-bottom: none;
    }

    .comparison-table td:before {
        content: attr(data-label);
        font-weight: 700;
        display: block;
        margin-bottom: 5px;
        color: var(--primary-color);
    }

    .topic-badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .example-item {
        padding: 8px;
        gap: 6px;
        font-size: 0.85rem;
    }

    .example-item .quran-verse {
        font-size: 0.9rem;
        line-height: 1.8;
    }
}

/* ============================================
   ⭐ قاعدة قوية جداً: Cairo للنص العادي (كلام الكاتب)
   ============================================
   هذه القاعدة تضمن تطبيق Cairo على جميع النصوص العادية
   وتستثني الآيات والأحاديث والصناديق الخاصة
   ============================================ */

/* ============================================
   ⭐ تطهير الخطوط: تمت إزالة قواعد font-family المتعارضة
   للسماح بالوراثة النظيفة من articles-islamic.css
   ============================================ */

/* ✅ نصوص المقال العادية - وراثة الخط */
.article-content p,
.article-content .author-text,
.article-content .author-text p,
.article-content li {
    font-family: inherit;
    /* الخط يورث الآن بشكل طبيعي من العنصر الأب */
}

/* ✅ الوضع الليلي: الألوان */
[data-theme="dark"] .article-content p,
[data-theme="dark"] .article-content .author-text,
[data-theme="dark"] .article-content .author-text p,
[data-theme="dark"] .article-content li {
    color: #ffffff !important;
}

/* ✅ الوضع الأكاديمي: الألوان */
[data-theme="academic"] .article-content p,
[data-theme="academic"] .article-content .author-text,
[data-theme="academic"] .article-content .author-text p,
[data-theme="academic"] .article-content li {
    color: #212529 !important;
}

/* ✅ المراجع (الهوامش) - Cairo هو الخط المناسب لها دائماً */
.article-content .verse-box .verse-reference,
.article-content .author-text .verse-box .verse-reference,
.verse-box .verse-reference {
    font-family: 'Cairo', sans-serif !important;
    display: inline;
    margin-right: 8px;
    font-size: 0.85em;
    font-weight: 600;
}


/* ============================================
   ⭐⭐ قواعد قوية جداً: الآيات داخل القوائم (ul, ol, li)
   ============================================
   هذه القواعد تضمن تطبيق خط Amiri على الآيات
   حتى لو كانت داخل عناصر القوائم
   ============================================ */

/* ✅ الآيات داخل القوائم العادية */
.article-content ul li .quran-verse,
.article-content ul li .quran-verse *,
.article-content ul li span.quran-verse,
.article-content ul li span.quran-verse *,
.article-content ol li .quran-verse,
.article-content ol li .quran-verse *,
.article-content ol li span.quran-verse,
.article-content ol li span.quran-verse *,
.article-content .author-text ul li .quran-verse,
.article-content .author-text ul li .quran-verse *,
.article-content .author-text ul li span.quran-verse,
.article-content .author-text ul li span.quran-verse *,
.article-content .author-text ol li .quran-verse,
.article-content .author-text ol li .quran-verse *,
.article-content .author-text ol li span.quran-verse,
.article-content .author-text ol li span.quran-verse *,
/* ✅ الأحاديث داخل القوائم */
.article-content ul li .hadith-quote,
.article-content ul li .hadith-quote *,
.article-content ol li .hadith-quote,
.article-content ol li .hadith-quote * {
    font-family: 'Amiri', serif !important;
}

/* ✅ الوضع الليلي: الآيات داخل القوائم */
[data-theme="dark"] .article-content ul li .quran-verse,
[data-theme="dark"] .article-content ul li .quran-verse *,
[data-theme="dark"] .article-content ul li span.quran-verse,
[data-theme="dark"] .article-content ul li span.quran-verse *,
[data-theme="dark"] .article-content ol li .quran-verse,
[data-theme="dark"] .article-content ol li .quran-verse *,
[data-theme="dark"] .article-content ol li span.quran-verse,
[data-theme="dark"] .article-content ol li span.quran-verse *,
[data-theme="dark"] .article-content .author-text ul li .quran-verse,
[data-theme="dark"] .article-content .author-text ul li span.quran-verse,
[data-theme="dark"] .article-content .author-text ol li .quran-verse,
[data-theme="dark"] .article-content .author-text ol li span.quran-verse {
    font-family: 'Amiri', serif !important;
    color: #ffffff !important;
}

/* ✅ الوضع الأكاديمي: الآيات داخل القوائم */
[data-theme="academic"] .article-content ul li .quran-verse,
[data-theme="academic"] .article-content ul li .quran-verse *,
[data-theme="academic"] .article-content ul li span.quran-verse,
[data-theme="academic"] .article-content ul li span.quran-verse *,
[data-theme="academic"] .article-content ol li .quran-verse,
[data-theme="academic"] .article-content ol li .quran-verse *,
[data-theme="academic"] .article-content ol li span.quran-verse,
[data-theme="academic"] .article-content ol li span.quran-verse *,
[data-theme="academic"] .article-content .author-text ul li .quran-verse,
[data-theme="academic"] .article-content .author-text ul li span.quran-verse,
[data-theme="academic"] .article-content .author-text ol li .quran-verse,
[data-theme="academic"] .article-content .author-text ol li span.quran-verse {
    font-family: 'Amiri', serif !important;
}

/* ============================================
   14.5 ARTICLE ACTION BUTTONS - أزرار المقال
   ============================================ */

/* حاوية الأزرار */
.article-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    float: left;
    margin-bottom: 10px;
}

/* الزر الأساسي (الوضع الليلي) */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: none !important;
}

.action-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

.action-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.action-btn i {
    font-size: 12px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* أزرار تكبير/تصغير الخط - تصميم مربع */
.font-size-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.font-size-btn:active {
    transform: scale(0.95);
}

/* حالة النجاح (تم النسخ) */
.action-btn.copied {
    color: #4ADE80 !important;
    border-color: #4ADE80 !important;
}

/* ============================================
   الوضع الأكاديمي (النهاري) - أزرار نظيفة
   ============================================ */
/* القاعدة الأساسية - أعلى أولوية */
html[data-theme="academic"] .article-action-buttons .action-btn,
html[data-theme="academic"] .action-btn {
    color: #4b5563 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* عند التحويم - hover */
html[data-theme="academic"] .article-action-buttons .action-btn:hover,
html[data-theme="academic"] .action-btn:hover {
    color: #1f2937 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: #9ca3af !important;
}

html[data-theme="academic"] .action-btn.copied {
    color: #16A34A !important;
    border-color: #16A34A !important;
}



/* ⭐ إزالة shadow من الصناديق في الوضع النهاري */
[data-theme="academic"] .info-box,
[data-theme="academic"] .warning-box,
[data-theme="academic"] .verse-box,
[data-theme="academic"] .hadith-sahih,
[data-theme="academic"] .hadith-daif,
[data-theme="academic"] .hero-box {
    box-shadow: none !important;
}

/* ============================================
   التظليل الأصفر للنصوص المهمة
   ============================================ */
/* الوضع الليلي */
.article-content mark,
.article-content .highlight-text {
    background: #fff59d !important;
    background-color: #fff59d !important;
    color: #000 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

/* الوضع النهاري - أعلى أولوية لتتجاوز core.css */
html[data-theme="academic"] .article-content mark,
html[data-theme="academic"] article mark,
html[data-theme="academic"] .article-content .highlight-text {
    background: #fff176 !important;
    background-color: #fff176 !important;
    color: #000 !important;
    box-shadow: none !important;
}


/* ============================================
   الوضع الليلي - تأكيد الألوان
   ============================================ */
[data-theme="dark"] .action-btn {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .action-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

/* إخفاء في الطباعة */
@media print {
    .article-action-buttons {
        display: none !important;
    }
}

/* ============================================
   15. PRINT STYLES - قواعد الطباعة المركزية
   ============================================
   
   🖨️ فلسفة الطباعة:
   - فرض الوضع الأبيض (نهاري) دائماً لتوفير الحبر
   - إزالة الإطارات والفراغات - المحتوى يملأ الصفحة مباشرة
   - إخفاء العناصر التفاعلية (هيدر، فوتر، TOC، أزرار)
   
   📅 آخر تحديث: 2025-12-08
   ============================================ */

@media print {
    /* ========================================
       1. إخفاء العناصر التفاعلية
       ======================================== */

    /* الهيدر الرئيسي للموقع */
    header:not(.article-header),
    .header,
    .site-header {
        display: none !important;
    }

    /* الفوتر */
    footer,
    .footer,
    .site-footer {
        display: none !important;
    }

    /* قائمة المحتويات والتنقل */
    .mobile-toc-container,
    .mobile-toc-toggle,
    .mobile-toc-dropdown,
    .toc,
    .table-of-contents,
    .progress-bar,
    .reading-progress,
    #progressBar,
    .back-to-top,
    .scroll-to-top,
    #scrollToTop,
    nav,
    .bottom-nav,
    .bottom-nav-container,
    .bottom-nav-glass,
    .bottom-nav-link,
    .theme-toggle,
    .theme-switcher,
    .ambient-light-container,
    .light-spot {
        display: none !important;
    }

    /* ========================================
       2. فرض الوضع الأبيض (توفير الحبر)
       ======================================== */

    html,
    body,
    body.article-page,
    .article-page {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ========================================
       3. إزالة الإطارات - المحتوى يملأ الصفحة
       ======================================== */

    /* الحاوية الرئيسية - بلا حدود */
    .container,
    .article-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* صندوق العنوان - بدون خلفية ملونة */
    .article-header {
        display: block !important;
        background: transparent !important;
        background-color: transparent !important;
        color: #000000 !important;
        box-shadow: none !important;
        border: none !important;
        border-bottom: 2px solid #333333 !important;
        border-radius: 0 !important;
        padding: 10px 0 !important;
        margin: 0 0 15px 0 !important;
    }

    .article-header::before {
        display: none !important;
    }

    .article-title {
        color: #000000 !important;
        text-shadow: none !important;
        font-size: 20pt !important;
    }

    .article-subtitle {
        color: #333333 !important;
        font-size: 11pt !important;
    }

    /* محتوى المقال - بلا إطار */
    .article-content {
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ========================================
       4. تنسيق النصوص للطباعة
       ======================================== */

    /* ⚠️ قاعدة شاملة: فرض اللون الأسود على جميع النصوص */
    * {
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .article-content,
    .article-content *,
    .article-content p,
    .article-content li,
    .article-content span,
    .article-content div,
    .author-text,
    .author-text *,
    .author-text p,
    .author-text span,
    .hadith-text,
    .hadith-source {
        color: #000000 !important;
        background: transparent !important;
    }

    /* تجاوز قواعد الوضع الليلي */
    [data-theme="dark"] .article-content,
    [data-theme="dark"] .article-content *,
    [data-theme="dark"] .author-text,
    [data-theme="dark"] .author-text *,
    [data-theme="dark"] .hadith-text,
    [data-theme="dark"] .hadith-source,
    [data-theme="dark"] p,
    [data-theme="dark"] span,
    [data-theme="dark"] li,
    [data-theme="dark"] div {
        color: #000000 !important;
        background: transparent !important;
    }

    /* العناوين */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #000000 !important;
        page-break-after: avoid !important;
    }

    /* الروابط */
    a {
        color: #0066cc !important;
        text-decoration: underline !important;
    }

    a[href]::after {
        content: none !important;
    }

    /* ========================================
       5. الصناديق الخاصة - تنسيق بسيط
       ======================================== */

    .verse-box,
    .quran-verse {
        background: #f8f8f8 !important;
        border: 1px solid #cccccc !important;
        border-right: 4px solid #1565C0 !important;
        color: #000000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 10px 15px !important;
        margin: 10px 0 !important;
    }

    .hadith-sahih,
    .hadith-box,
    .hadith-quote {
        background: #f0fff0 !important;
        border: 1px solid #4CAF50 !important;
        border-right: 4px solid #4CAF50 !important;
        color: #000000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        position: relative !important;
        padding-top: 40px !important;
    }

    /* ⚡ تصحيح موضع أيقونة الحديث في وضع الطباعة */
    .status-icon {
        position: absolute !important;
        top: 8px !important;
        right: 10px !important;
        font-size: 1.2em !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    /* ⚡ إصلاح تداخل الأيقونات في وضع الطباعة */
    .hadith-text,
    .hadith-content {
        padding-right: 40px !important;
    }

    .hadith-source {
        padding-right: 40px !important;
    }

    .hadith-daif {
        background: #fff0f0 !important;
        border: 1px solid #f44336 !important;
        border-right: 4px solid #f44336 !important;
        color: #000000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .warning-box {
        background: #fff8e1 !important;
        border: 1px solid #ff9800 !important;
        border-right: 4px solid #ff9800 !important;
        color: #000000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .info-box,
    .hero-box {
        background: #f5f5f5 !important;
        border: 1px solid #999999 !important;
        color: #000000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* جداول المقارنة */
    .comparison-table,
    .comparison-table th,
    .comparison-table td {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #333333 !important;
    }

    /* الكروت - تبسيط */
    .jannah-card,
    .dunya-card {
        background: #f5f5f5 !important;
        color: #000000 !important;
        border: 1px solid #cccccc !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* الخاتمة */
    .article-ending,
    .conclusion {
        background: #f0f0f0 !important;
        border: 1px solid #cccccc !important;
        color: #000000 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* ========================================
       6. تحسينات الطباعة
       ======================================== */

    /* منع قطع العناصر */
    section,
    .verse-box,
    .hadith-sahih,
    .hadith-daif,
    .warning-box,
    .info-box,
    .comparison-table,
    .jannah-card,
    .dunya-card,
    .article-ending,
    blockquote {
        page-break-inside: avoid !important;
    }

    /* الصور */
    img {
        max-width: 100% !important;
        page-break-inside: avoid !important;
    }

    /* إخفاء الأيقونات */
    i.fas,
    i.far,
    i.fab,
    i[class*="fa-"],
    svg.svg-inline--fa {
        display: none !important;
    }
}

/* صندوق التخريج (مقالات محوّلة من HTML الاحتياطي) */
.takhreej-box {
    background: linear-gradient(135deg, var(--takhreej-bg, #f5f5f5) 0%, #fafafa 100%);
    color: var(--takhreej-text, #424242);
    border: 2px solid var(--takhreej-border, #757575);
    border-right: 5px solid var(--takhreej-border, #757575);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    font-size: 1.05em;
    text-align: right;
    transition: box-shadow 0.2s ease;
}

.takhreej-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.takhreej-box h4 {
    margin: 0 0 0.75rem;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--secondary-color, #ff7e00);
}

.takhreej-box h5 {
    margin: 1rem 0 0.5rem;
    font-size: 1em;
    font-weight: 600;
}

[data-theme="academic"] .takhreej-box h4 {
    color: var(--primary-color, #1565c0);
}

[data-theme="dark"] .takhreej-box {
    background: #2a2a2a;
    color: #cfd8dc;
    border-color: #546e7a;
    border-right-color: #546e7a;
}

[data-theme="academic"] .takhreej-box {
    box-shadow: none;
}

@media print {
    .takhreej-box {
        background: #f5f5f5 !important;
        color: #000 !important;
        border: 1px solid #999 !important;
        page-break-inside: avoid !important;
    }
}

/* ============================================
   NEW INFOGRAPHIC TABLES - جداول الإنفوجرافيك (المحدثة)
   ============================================ */

/* ⭐ CSS للجداول المقارنة (Infographic Tables) */
.comparison-table {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-color) 100%);
    border-radius: 16px;
    padding: 30px;
    margin: 40px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--border-color);
}

[data-theme="academic"] .comparison-table {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
}

[data-theme="dark"] .comparison-table {
    background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
    border: 2px solid #333;
}

.comparison-header {
    text-align: center;
    margin-bottom: 30px;
}

.comparison-header h3 {
    font-family: 'Cairo', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.comparison-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: start;
}

.comparison-column {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="academic"] .comparison-column {
    background: white;
}

[data-theme="dark"] .comparison-column {
    background: #1e1e1e;
}

.left-column {
    border-right: 3px solid var(--success-color);
}

.right-column {
    border-left: 3px solid var(--danger-color);
}

.column-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.column-header i {
    font-size: 1.5rem;
    color: var(--text-color);
}

.column-header h4 {
    font-family: 'Cairo', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    font-family: 'Cairo', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.comparison-list li:last-child {
    border-bottom: none;
}

.comparison-list li i {
    margin-top: 4px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.comparison-list li i.fa-check {
    color: var(--success-color);
}

.comparison-list li i.fa-times {
    color: var(--danger-color);
}

.comparison-list li strong {
    font-weight: 700;
    color: var(--text-color);
}

.comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.comparison-divider i {
    font-size: 2rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

/* جدول عمودي للحالات */
.comparison-table.vertical {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-color) 100%);
}

.comparison-table.vertical .comparison-content {
    grid-template-columns: 1fr;
}

.comparison-table.vertical .comparison-column {
    border: none;
    border-top: 3px solid var(--primary-color);
}

/* ⭐ جداول بدون صندوق - مباشرة على جسم المقال */
.comparison-table.no-box {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px 0 !important;
    margin: 30px 0 !important;
    box-shadow: none !important;
}

.comparison-table.no-box .comparison-column {
    background: none !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    box-shadow: none !important;
}

.comparison-table.no-box .left-column {
    border-right: 2px solid var(--success-color);
    padding-right: 30px;
    margin-right: 5px;
}

.comparison-table.no-box .right-column {
    border-left: 2px solid var(--danger-color);
    padding-left: 30px;
    margin-left: 5px;
}

.comparison-table.no-box .comparison-list {
    padding-right: 5px;
}

/* ✅ تم دمج القواعد الشاملة للمسافات والحركات في المقال في بداية الملف 2025-01-14 ✅ */

/* ============================================
   ⭐⭐ قاعدة شاملة: إزالة التظليل من الأزرار في الوضع النهاري
   ============================================
   هذه القاعدة تضمن إزالة أي تظليل غير مبرر من الأزرار العلوية
   في الوضع النهاري (الأكاديمي) - تطبق على جميع المقالات
   ============================================ */

.comparison-table.no-box .column-header {
    border-bottom: 1px solid var(--border-color);
}

/* الموبايل */
@media (max-width: 768px) {
    .comparison-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .comparison-divider {
        transform: rotate(90deg);
        padding: 10px 0;
    }

    .left-column {
        border-right: none;
        border-bottom: 3px solid var(--success-color);
    }

    .right-column {
        border-left: none;
        border-top: 3px solid var(--danger-color);
    }

    .comparison-header h3 {
        font-size: 1.4rem;
    }
}
/* ─── end:   styles/articles/widgets.css ─── */


/* محتوى المقال */

/* ─── begin: styles/articles/content.css ─── */
/* ============================================
   CONTENT.CSS - محتوى المقال (النصوص والعناصر)
   ============================================
   
   📋 المحتويات:
   1. الفقرات والنصوص
   2. التظليل والتمييز
   3. الروابط
   4. العناصر القوية
   5. الجداول
   6. أزرار المقال
   7. التجاوب
   
   📅 تاريخ الإنشاء: 2026-01-16
   ============================================ */

/* تخطّي استيراد مكرر: D:\_Al7amdWeb\styles\site\core\variables.css */


/* ============================================
   1. الفقرات والنصوص
   ============================================ */
.article-content p {
    margin: 20px 0;
    color: var(--article-text-color);
}

.author-text {
    font-family: var(--article-font-main);
    font-size: var(--article-text-size);
    line-height: var(--article-line-height);
    color: var(--article-text-color);
}

/* ============================================
   2. التظليل والتمييز
   ============================================ */
.article-content mark,
.highlight-text {
    background: #fff59d;
    color: #000;
    padding: 2px 4px;
    border-radius: 3px;
}

.highlight-keyword {
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    color: #000;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

/* الوضع النهاري */
[data-theme="academic"] .article-content mark,
[data-theme="academic"] .highlight-text {
    background: #fff176;
}

/* داخل الآيات */
.quran-verse .highlight-keyword,
.hadith-text .highlight-keyword {
    font-family: var(--article-font-islamic);
}

/* ============================================
   3. الروابط
   ============================================ */
.article-content a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dashed var(--primary-color);
    transition: all 0.2s ease;
}

.article-content a:hover {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

/* ============================================
   4. العناصر القوية
   ============================================ */
.article-content strong {
    color: var(--secondary-color);
    font-weight: 700;
}

.article-content em {
    font-style: italic;
    color: var(--text-secondary);
}

/* ============================================
   5. الجداول
   ============================================ */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    font-family: var(--article-font-main);
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

.comparison-table th:first-child {
    border-top-right-radius: 12px;
}

.comparison-table th:last-child {
    border-top-left-radius: 12px;
}

.comparison-table tbody tr {
    transition: background 0.2s ease;
}

.comparison-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.comparison-table td {
    color: var(--text-main);
    line-height: 1.7;
}

.comparison-table td:first-child {
    font-weight: 600;
    color: var(--primary-color);
}

/* الوضع النهاري */
[data-theme="academic"] .comparison-table {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

[data-theme="academic"] .comparison-table tbody tr:hover {
    background: rgba(21, 101, 192, 0.05);
}

[data-theme="academic"] .comparison-table td {
    color: #212529;
}

/* ============================================
   6. أزرار المقال
   ============================================ */
.article-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    float: left;
    margin-bottom: 10px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--article-font-main);
    font-size: 0.7rem;
    font-weight: 400;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.action-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

.action-btn svg,
.action-btn i {
    width: 12px;
    height: 12px;
}

.action-btn.copied {
    color: #4ADE80;
    border-color: #4ADE80;
}

/* أزرار تكبير/تصغير الخط */
.font-size-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.font-size-btn:active {
    transform: scale(0.95);
}

/* الوضع النهاري */
[data-theme="academic"] .action-btn {
    color: #4b5563;
    border-color: #d1d5db;
}

[data-theme="academic"] .action-btn:hover {
    color: #1f2937;
    border-color: #9ca3af;
}

[data-theme="academic"] .action-btn.copied {
    color: #16A34A;
    border-color: #16A34A;
}

/* ============================================
   6.5. زر رمز المقال (Article ID Badge)
   ============================================ */
.article-id-btn {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding-right: 10px;
    margin-right: 2px;
    font-variant-numeric: tabular-nums;
}

.article-id-btn i {
    font-size: 0.6rem;
    opacity: 0.7;
}

[data-theme="academic"] .article-id-btn {
    border-right-color: rgba(0, 0, 0, 0.1);
}


/* ============================================
   7. شارات المواضيع
   ============================================ */
.topic-badge {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--primary-color), #2C5282);
    color: #ffffff;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--article-font-main);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
    transition: all 0.3s ease;
}

.topic-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.4);
}

/* ============================================
   8. التجاوب
   ============================================ */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.9rem;
        margin: 25px 0;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 10px;
    }

    .comparison-table th {
        font-size: 0.95rem;
    }

    .topic-badge {
        font-size: 0.85rem;
        padding: 4px 10px;
    }
}

@media (max-width: 480px) {
    .comparison-table {
        display: block;
        overflow-x: auto;
        font-size: 0.85rem;
    }

    .comparison-table thead {
        display: none;
    }

    .comparison-table tbody,
    .comparison-table tr,
    .comparison-table td {
        display: block;
    }

    .comparison-table tbody tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 10px;
        background: var(--card-bg);
    }

    .comparison-table td {
        padding: 8px;
        text-align: right;
        border-bottom: 1px solid var(--border-color);
    }

    .comparison-table td:last-child {
        border-bottom: none;
    }

    .comparison-table td::before {
        content: attr(data-label);
        font-weight: 700;
        display: block;
        margin-bottom: 5px;
        color: var(--primary-color);
    }

    .topic-badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* نص مقال بصيغة pre (يُحفظ لف المقال كما في نسخة HTML الأصلية للمشاركة) */
.article-content pre,
.article-content pre.raw-article {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--article-font-islamic);
    font-size: 1.15em;
    line-height: 2.1;
    margin: 0;
    color: var(--article-text-color);
    background: transparent;
    border: none;
    padding: 0;
    overflow-x: auto;
}

.article-content pre::first-line,
.article-content pre.raw-article::first-line {
    font-family: var(--article-font-main);
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.6;
}

/* ============================================
   9. إخفاء في الطباعة
   ============================================ */
@media print {
    .article-action-buttons {
        display: none;
    }
}
/* ─── end:   styles/articles/content.css ─── */


/* قواعد الطباعة */

/* ─── begin: styles/articles/print.css ─── */
/* ============================================
   PRINT.CSS - قواعد الطباعة للمقالات
   ============================================
   
   🖨️ فلسفة الطباعة:
   - فرض الوضع الأبيض (نهاري) دائماً لتوفير الحبر
   - إزالة الإطارات والفراغات
   - إخفاء العناصر التفاعلية
   
   📅 تاريخ الإنشاء: 2026-01-16
   ============================================ */

@media print {
    /* ============================================
       1. إخفاء العناصر التفاعلية
       ============================================ */

    /* الهيدر والفوتر */
    header:not(.article-header),
    .header,
    .site-header,
    footer,
    .footer,
    .site-footer {
        display: none !important;
    }

    /* التنقل */
    nav,
    .bottom-nav,
    .bottom-nav-container,
    .bottom-nav-glass,
    .mobile-toc-container,
    .mobile-toc-toggle,
    .mobile-toc-dropdown,
    .toc,
    .table-of-contents {
        display: none !important;
    }

    /* الأزرار والتفاعل */
    .article-action-buttons,
    .progress-bar,
    .reading-progress,
    #progressBar,
    .back-to-top,
    .scroll-to-top,
    #scrollToTop,
    .theme-toggle,
    .theme-switcher {
        display: none !important;
    }

    /* الخلفيات الديناميكية */
    .ambient-light-container,
    .light-spot {
        display: none !important;
    }

    /* ============================================
       2. فرض الوضع الأبيض
       ============================================ */
    html,
    body,
    body.article-page,
    .article-page {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* فرض اللون الأسود على جميع النصوص */
    * {
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ============================================
       3. إزالة الإطارات
       ============================================ */
    .container,
    .article-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* ============================================
       4. تنسيق الهيدر للطباعة
       ============================================ */
    .article-header {
        display: block !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-bottom: 2px solid #333333 !important;
        border-radius: 0 !important;
        padding: 10px 0 !important;
        margin: 0 0 15px 0 !important;
    }

    .article-header::before {
        display: none !important;
    }

    .article-title {
        color: #000000 !important;
        text-shadow: none !important;
        font-size: 20pt !important;
    }

    .article-subtitle {
        color: #333333 !important;
        font-size: 11pt !important;
    }

    /* ============================================
       5. تنسيق المحتوى للطباعة
       ============================================ */
    .article-content {
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .article-content p,
    .article-content li,
    .author-text {
        color: #000000 !important;
        font-size: 11pt !important;
        line-height: 1.6 !important;
    }

    /* ============================================
       6. تنسيق الصناديق للطباعة
       ============================================ */
    .verse-box {
        background: #f5f5f5 !important;
        border: 1px solid #333333 !important;
        border-right-width: 4px !important;
        padding: 10px !important;
        margin: 15px 0 !important;
    }

    .hadith-sahih {
        background: #f0fff0 !important;
        border: 1px solid #228b22 !important;
        border-right-width: 4px !important;
        padding: 10px !important;
    }

    .hadith-daif {
        background: #fff0f0 !important;
        border: 1px solid #dc143c !important;
        border-right-width: 4px !important;
        padding: 10px !important;
    }

    .info-box,
    .warning-box {
        background: #f5f5f5 !important;
        border: 1px solid #666666 !important;
        border-right-width: 4px !important;
        padding: 10px !important;
    }

    .conclusion-box,
    .hero-box {
        background: #f5f5f5 !important;
        border: 2px solid #333333 !important;
        padding: 15px !important;
    }

    /* ============================================
       7. تنسيق الجداول للطباعة
       ============================================ */
    .comparison-table {
        border: 1px solid #333333 !important;
    }

    .comparison-table th {
        background: #f0f0f0 !important;
        color: #000000 !important;
        border: 1px solid #333333 !important;
    }

    .comparison-table td {
        border: 1px solid #cccccc !important;
        color: #000000 !important;
    }

    /* ============================================
       8. تنسيق النصوص للطباعة
       ============================================ */
    .highlight-keyword,
    .article-content mark {
        background: #ffff00 !important;
        color: #000000 !important;
    }

    .article-content a {
        color: #000000 !important;
        text-decoration: underline !important;
    }

    .article-content strong {
        color: #000000 !important;
    }

    /* ============================================
       9. إعدادات الصفحة
       ============================================ */
    @page {
        margin: 1.5cm;
        size: A4;
    }

    /* منع القطع */
    h2,
    h3,
    h4 {
        page-break-after: avoid !important;
    }

    .verse-box,
    .hadith-sahih,
    .hadith-daif,
    .conclusion-box {
        page-break-inside: avoid !important;
    }

    p {
        orphans: 3;
        widows: 3;
    }
}
/* ─── end:   styles/articles/print.css ─── */

/* ─── end:   styles/articles/main.css ─── */