/* استيراد خطوط Google Fonts (Lato, Oswald, Cairo) */
/* تأكد من أنك قمت باختيار الأوزان الصحيحة من Google Fonts لهذه الخطوط */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Lato:wght@300;400;700;900&family=Oswald:wght@300;400;500;700&display=swap');

/*
* قاموس مصطلحات الأمن السيبراني
* ملف الأنماط المخصص (CSS)
*
* هذا الملف يحتوي على الأنماط الخاصة بواجهة قاموس المصطلحات
* من متغيرات الألوان، التخطيط، عناصر واجهة المستخدم مثل البحث والفلترة،
* وبطاقات المصطلحات، بالإضافة إلى تنسيقات الاستجابة للشاشات المختلفة.
*/

/* --- */

/* تعريف متغيرات CSS لتسهيل إدارة الألوان والقيم المتكررة */
:root {
    /* ألوان الخلفيات */
    --primary-bg: #f4f7f6; /* خلفية أساسية فاتحة للجسم */
    --main-bg: #fff; /* خلفية بيضاء للعناصر الرئيسية مثل البطاقات */
    --header-bg: #2c3e50; /* خلفية رأس الصفحة والقسم الداكن (مثل التذييل) */
    --definition-bg: #ecf0f1; /* خلفية لتعريفات معينة أو عناصر مميزة */
    --glossary-bg: #f9f9f9; /* خلفية مخصصة لأقسام القاموس */

    /* ألوان النصوص */
    --text-color: #333; /* لون النص الأساسي (داكن) */
    --header-text: #ecf0f1; /* لون النص في الأقسام ذات الخلفية الداكنة (الرأس، التذييل) */
    --intro-color: #555; /* لون نص المقدمات أو الأمثلة (متوسط الداكن) */
    --light-text-color: #bdc3c7; /* لون نص رمادي فاتح (للوصف في الرأس مثلاً) */

    /* ألوان الحدود والظلال */
    --definition-border: #2c3e50; /* لون حدود داكنة (يمكن استخدامه لتأطير) */
    --glossary-border: #ddd; /* لون حدود فاتحة (للخطوط الفاصلة) */
    --box-shadow-light: rgba(0, 0, 0, 0.1); /* ظل خفيف */
    --box-shadow-dark: rgba(0, 0, 0, 0.2); /* ظل أغمق */

    /* ألوان الأزرار والعناصر المميزة */
    --button-bg: #3498db; /* لون خلفية الزر الأساسي (أزرق) */
    --button-hover: #2980b9; /* لون الزر عند التمرير (أزرق أغمق) */
    --accent-color: #e74c3c; /* لون مميز أو لافت للنظر (أحمر، للفئات مثلاً) */
    --correct-color: #2ecc71; /* لون أخضر للإجابات الصحيحة */
    --incorrect-color: #e74c3c; /* لون أحمر للإجابات الخاطئة */

    /* ألوان الأزرار والأيقونات للتمرير الأفقي */
    --secondary-color: #34495e; /* لون ثانوي لأزرار التمرير (داكن) */
    --primary-color: #1abc9c; /* لون أساسي لتأثير التمرير (أخضر مزرق) */
}

/* --- */

/* إعادة ضبط التنسيقات الافتراضية للمتصفح */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* يجعل ال padding و border جزءًا من عرض العنصر */
}

/* --- */

/* تنسيقات الجسم الرئيسية */
body {
    font-family: 'Cairo', sans-serif; /* استخدام خط القاهرة */
    background-color: var(--primary-bg); /* خلفية الجسم من المتغير */
    color: var(--text-color); /* لون النص الأساسي من المتغير */
    line-height: 1.6; /* تباعد الأسطر لتحسين القراءة */
    direction: rtl; /* لجعل اتجاه النص من اليمين لليسار */
    text-align: right; /* لمحاذاة النص لليمين افتراضياً */
}

/* --- */

/* تنسيقات الحاوية العامة للمحتوى */
.container {
    max-width: 1200px; /* أقصى عرض للحاوية */
    margin: 0 auto; /* توسيط الحاوية أفقياً */
    padding: 20px; /* مسافة داخلية للحاوية */
}

/* --- */

/* تنسيقات رأس الصفحة (Header) */
header {
    text-align: center; /* توسيط المحتوى داخل الرأس */
    padding: 30px 0; /* مسافة داخلية علوية وسفلية */
    background: linear-gradient(135deg, var(--header-bg), var(--definition-border)); /* تدرج لوني للخلفية */
    border-bottom: 3px solid var(--button-bg); /* خط سفلي بلون مميز */
    box-shadow: 0 4px 12px var(--box-shadow-dark); /* ظل للرأس */
    color: var(--header-text); /* لون النص الافتراضي في الرأس */
}

header h1 {
    font-family: 'Oswald', sans-serif; /* استخدام خط Oswald للعناوين */
    font-size: 2.5rem; /* حجم الخط للعناوين الرئيسية */
    margin-bottom: 10px; /* مسافة سفلية */
    color: var(--header-text); /* لون العنوان */
}

header p {
    font-size: 1.2rem; /* حجم الخط للوصف */
    max-width: 800px; /* أقصى عرض للوصف */
    margin: 0 auto; /* توسيط الوصف أفقياً */
    color: var(--light-text-color); /* لون رمادي فاتح للوصف */
}

/* --- */

/* تنسيقات حاوية البحث */
.search-container {
    max-width: 600px; /* أقصى عرض لحاوية البحث */
    margin: 30px auto; /* توسيط الحاوية أفقياً مع مسافة علوية وسفلية */
    position: relative; /* لتحديد موقع الأيقونة بداخله */
}

.search-container input {
    width: 100%; /* عرض كامل داخل الحاوية */
    padding: 15px 20px; /* مسافة داخلية */
    border-radius: 50px; /* حواف دائرية جداً */
    border: none; /* إزالة الحدود الافتراضية */
    background: rgba(255, 255, 255, 0.1); /* خلفية شفافة */
    backdrop-filter: blur(10px); /* تأثير ضبابي على الخلفية */
    color: var(--header-text); /* لون النص المدخل (يُفترض أن يكون هذا في منطقة داكنة) */
    font-size: 1.1rem; /* حجم الخط */
    border: 2px solid var(--button-bg); /* حدود بلون الزر */
}

.search-container input::placeholder {
    color: rgba(255, 255, 255, 0.7); /* لون النص النائب (placeholder) الشفاف */
}

.search-container input:focus {
    outline: none; /* إزالة الإطار الأزرق عند التركيز */
    box-shadow: 0 0 10px var(--button-bg); /* ظل عند التركيز */
}

.search-container i {
    position: absolute; /* تحديد موضع الأيقونة بشكل مطلق */
    left: 20px; /* الأيقونة على اليسار لاتجاه RTL */
    top: 50%; /* توسيط الأيقونة عموديًا */
    transform: translateY(-50%); /* ضبط التوسيط العمودي */
    color: var(--button-bg); /* لون الأيقونة */
    font-size: 1.2rem; /* حجم الأيقونة */
}

/* --- */

/* تنسيقات أزرار الفلترة (العامة، مثل الفئات) */
.filter-buttons {
    display: flex; /* ترتيب الأزرار باستخدام Flexbox */
    justify-content: center; /* توسيط الأزرار أفقياً */
    flex-wrap: wrap; /* السماح للأزرار بالانتقال إلى سطر جديد */
    gap: 10px; /* مسافة بين الأزرار */
    margin: 20px 0 30px; /* مسافة علوية وسفلية */
}

.filter-btn {
    background: rgba(52, 152, 219, 0.2); /* خلفية شفافة من لون الزر */
    border: 1px solid var(--button-bg); /* حدود بلون الزر */
    color: var(--header-text); /* لون النص (يُفترض أن يكون فاتحًا) */
    padding: 8px 20px; /* مسافة داخلية */
    border-radius: 30px; /* حواف دائرية */
    cursor: pointer; /* مؤشر الفأرة على شكل يد */
    font-size: 1em; /* حجم الخط */
    transition: all 0.3s ease; /* انتقال سلس لجميع التغييرات */
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--button-bg); /* خلفية بلون الزر عند التمرير أو التفعيل */
    color: white; /* نص أبيض عند التفعيل أو التمرير */
}

/* --- */

/* تنسيقات شبكة المصطلحات (Grid of Terms) */
.terms-grid {
    display: grid; /* استخدام CSS Grid */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 300px هو الحد الأدنى لعرض البطاقة */
    gap: 25px; /* مسافة بين عناصر الشبكة */
}

/* --- */

/* تنسيقات بطاقة المصطلح الفردية */
.term-card {
    background: var(--main-bg); /* خلفية بيضاء لبطاقة المصطلح */
    border-radius: 15px; /* حواف دائرية */
    overflow: hidden; /* إخفاء أي محتوى يتجاوز الحدود */
    box-shadow: 0 5px 15px var(--box-shadow-light); /* ظل خفيف للبطاقة */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* انتقال سلس عند التفاعل */
    border: 1px solid #eee; /* حدود خفيفة */
}

.term-card:hover {
    transform: translateY(-10px); /* رفع البطاقة قليلاً عند التمرير */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* ظل أعمق عند التمرير */
    border-color: var(--button-bg); /* تغيير لون الحدود عند التمرير */
}

.term-header {
    background: var(--definition-border); /* خلفية رأس البطاقة بلون داكن */
    padding: 20px; /* مسافة داخلية */
    border-bottom: 2px solid var(--button-bg); /* خط سفلي بلون الزر */
    color: var(--header-text); /* لون النص في رأس البطاقة */
}

.term-header h3 {
    font-family: 'Oswald', sans-serif; /* استخدام خط Oswald للعناوين */
    font-size: 1.5rem; /* حجم الخط لعنوان المصطلح */
    margin-bottom: 5px; /* مسافة سفلية */
    color: var(--header-text); /* لون العنوان */
}

.term-header .category {
    display: inline-block; /* ليتصرف ككتلة ولكنه يبقى في سطر واحد */
    background: var(--accent-color); /* لون مميز للفئة */
    padding: 3px 10px; /* مسافة داخلية */
    border-radius: 20px; /* حواف دائرية جداً */
    font-size: 0.85rem; /* حجم خط صغير للفئة */
    color: white; /* لون نص أبيض */
}

.term-body {
    padding: 20px; /* مسافة داخلية لجسم البطاقة */
    color: var(--text-color); /* لون نص جسم البطاقة */
}

.term-body p {
    margin-bottom: 15px; /* مسافة سفلية للفقرات */
    font-size: 1.1rem; /* حجم الخط للفقرات */
}

.term-body .example {
    background: rgba(52, 152, 219, 0.1); /* خلفية شفافة للمثال */
    padding: 15px; /* مسافة داخلية */
    border-radius: 10px; /* حواف دائرية */
    border-right: 3px solid var(--button-bg); /* خط جانبي على اليمين للمثال (لأن الاتجاه RTL) */
    margin-top: 15px; /* مسافة علوية */
    font-style: italic; /* خط مائل للمثال */
    color: var(--intro-color); /* لون نص المثال */
}

/* --- */

/* تنسيقات قسم الاختبار (Quiz Section) */
.quiz-section {
    background: var(--header-bg); /* خلفية داكنة لقسم الاختبار */
    padding: 40px 20px; /* مسافة داخلية */
    margin: 50px 0; /* مسافة علوية وسفلية */
    border-radius: 15px; /* حواف دائرية */
    border: 1px solid var(--button-bg); /* حدود بلون الزر */
    text-align: center; /* توسيط المحتوى داخله */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* ظل للقسم */
}

.quiz-section h2 {
    font-family: 'Oswald', sans-serif; /* استخدام خط Oswald للعناوين */
    font-size: 2rem; /* حجم خط العنوان */
    margin-bottom: 20px; /* مسافة سفلية */
    color: var(--header-text); /* لون النص */
}

.quiz-container {
    max-width: 800px; /* أقصى عرض لحاوية الاختبار */
    margin: 0 auto; /* توسيط الحاوية أفقياً */
    background: rgba(44, 62, 80, 0.7); /* خلفية شفافة قليلاً للكونتينر الداخلي */
    padding: 30px; /* مسافة داخلية */
    border-radius: 15px; /* حواف دائرية */
}

.quiz-question {
    font-size: 1.4rem; /* حجم خط السؤال */
    margin-bottom: 25px; /* مسافة سفلية */
    color: var(--header-text); /* لون نص السؤال */
}

.quiz-options {
    display: grid; /* استخدام Grid لخيارات الإجابة */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* خيارين أو أكثر في الصف */
    gap: 15px; /* مسافة بين الخيارات */
    margin-bottom: 25px; /* مسافة سفلية */
}

.quiz-option {
    background: rgba(52, 152, 219, 0.2); /* خلفية شفافة للخيار */
    border: 1px solid var(--button-bg); /* حدود بلون الزر */
    padding: 15px; /* مسافة داخلية */
    border-radius: 10px; /* حواف دائرية */
    cursor: pointer; /* مؤشر الفأرة */
    transition: all 0.3s ease; /* انتقال سلس */
    color: var(--header-text); /* لون نص الخيار */
}

.quiz-option:hover {
    background: var(--button-bg); /* خلفية بلون الزر عند التمرير */
}

.quiz-result {
    font-size: 1.3rem; /* حجم الخط للنتيجة */
    font-weight: bold; /* خط عريض */
    margin-top: 20px; /* مسافة علوية */
    min-height: 30px; /* الحد الأدنى للارتفاع لتجنب التحولات المفاجئة */
}

.result-correct {
    color: var(--correct-color); /* أخضر للإجابة الصحيحة */
}

.result-incorrect {
    color: var(--incorrect-color); /* أحمر للإجابة الخاطئة */
}

/* --- */

/* تنسيقات الأزرار العامة (مثل زر السؤال التالي) */
.btn {
    background: var(--button-bg); /* خلفية بلون الزر */
    color: white; /* نص أبيض */
    border: none; /* إزالة الحدود */
    padding: 12px 30px; /* مسافة داخلية */
    border-radius: 50px; /* حواف دائرية جداً */
    font-size: 1.1rem; /* حجم الخط */
    cursor: pointer; /* مؤشر الفأرة */
    transition: all 0.3s ease; /* انتقال سلس */
    display: inline-block; /* ليكون زرًا بخصائص الكتلة ولكن في نفس السطر */
    margin-top: 15px; /* مسافة علوية */
}

.btn:hover {
    background: var(--button-hover); /* لون أغمق عند التمرير */
    transform: translateY(-3px); /* رفع الزر قليلاً */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* ظل عند التمرير */
}

/* --- */

/* تنسيقات التذييل (Footer) */
footer {
    text-align: center; /* توسيط المحتوى */
    padding: 30px 0; /* مسافة داخلية علوية وسفلية */
    margin-top: 50px; /* مسافة علوية كبيرة */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* خط علوي خفيف */
    background-color: var(--header-bg); /* خلفية التذييل بلون الرأس */
    color: var(--light-text-color); /* لون نص رمادي فاتح */
}

.share-buttons {
    margin-top: 20px; /* مسافة علوية لأزرار المشاركة */
}

.share-btn {
    display: inline-block; /* ليكون زرًا بخصائص الكتلة ولكنه في نفس السطر */
    width: 50px; /* عرض ثابت */
    height: 50px; /* ارتفاع ثابت */
    border-radius: 50%; /* شكل دائري */
    background: var(--button-bg); /* خلفية بلون الزر */
    color: white; /* نص أبيض */
    line-height: 50px; /* توسيط عمودي للنص داخل الدائرة */
    text-align: center; /* توسيط أفقي للنص */
    margin: 0 10px; /* مسافة أفقية بين الأزرار */
    font-size: 1.2rem; /* حجم الأيقونة/النص */
    transition: all 0.3s ease; /* انتقال سلس */
}

.share-btn:hover {
    transform: translateY(-5px); /* رفع الزر قليلاً عند التمرير */
    background: var(--button-hover); /* لون أغمق عند التمرير */
}

/* --- */

/* الاستجابة لتنسيقات الشاشات الصغيرة (Mobile Responsiveness) */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem; /* تصغير حجم العنوان */
    }
    header p {
        font-size: 1rem; /* تصغير حجم الوصف */
    }
    .search-container {
        margin: 20px 10px; /* ضبط الهوامش */
    }
    .filter-buttons {
        flex-direction: column; /* الأزرار عمودية */
        padding: 0 10px; /* ضبط المسافة الداخلية */
    }
    .filter-btn {
        width: 100%; /* الأزرار تأخذ عرضًا كاملاً */
    }
    .terms-grid {
        grid-template-columns: 1fr; /* عمود واحد لبطاقات المصطلحات */
        padding: 0 10px; /* ضبط المسافة الداخلية */
    }
    .term-card {
        margin: 0 auto; /* توسيط البطاقة */
        width: 95%; /* عرض 95% من الحاوية */
    }
    .quiz-section {
        margin: 30px 10px; /* ضبط الهوامش */
        padding: 20px; /* ضبط المسافة الداخلية */
    }
    .quiz-question {
        font-size: 1.2rem; /* تصغير حجم السؤال */
    }
    .quiz-options {
        grid-template-columns: 1fr; /* عمود واحد لخيارات الاختبار */
    }
    .quiz-option {
        padding: 12px; /* ضبط المسافة الداخلية */
    }
    .quiz-result {
        font-size: 1.1rem; /* تصغير حجم النتيجة */
    }
    .btn {
        padding: 10px 25px; /* ضبط المسافة الداخلية */
        font-size: 1rem; /* تصغير حجم الخط */
    }
    footer {
        padding: 20px 10px; /* ضبط المسافة الداخلية */
    }
}

/* --- */

/* أنماط CSS المخصصة لبطاقات القاموس (إذا كانت مختلفة عن .term-card) */
.ul-cards-glossary {
    list-style: none; /* إزالة النقاط الافتراضية للقائمة */
    padding: 0; /* إزالة الحشوة الافتراضية للقائمة */
    display: flex; /* ترتيب البطاقات باستخدام Flexbox */
    flex-wrap: wrap; /* السماح بالانتقال إلى سطر جديد */
    gap: 20px; /* مسافة بين البطاقات */
    justify-content: flex-start; /* محاذاة البطاقات من البداية (اليمين في RTL) */
}

.ul-cards-glossary li {
    flex: 0 0 calc(33.333% - 20px); /* 3 بطاقات في الصف مع أخذ المسافة في الاعتبار */
    max-width: calc(33.333% - 20px); /* الحد الأقصى لعرض البطاقة */
    box-sizing: border-box; /* لضمان أن البادنج والحدود لا تزيد عن العرض الكلي */
    background-color: var(--main-bg); /* خلفية بيضاء */
    border-radius: 8px; /* حواف دائرية */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* ظل خفيف */
    overflow: hidden; /* إخفاء المحتوى الزائد */
    display: flex; /* لترتيب محتوى البطاقة عمودياً */
    flex-direction: column; /* المحتوى داخل البطاقة مرتب عمودياً */
    transition: transform 0.2s ease-in-out; /* انتقال سلس عند التفاعل */
}

.ul-cards-glossary li:hover {
    transform: translateY(-5px); /* رفع البطاقة قليلاً عند التمرير */
}

.card-wrap {
    padding: 20px; /* مسافة داخلية لمحتوى البطاقة */
    display: flex; /* لترتيب العناصر داخل الغلاف عمودياً */
    flex-direction: column; /* ترتيب المحتوى عمودياً */
    flex-grow: 1; /* لجعل الغلاف يملأ المساحة المتاحة في البطاقة */
}

.card-title {
    color: var(--text-color); /* لون عنوان البطاقة */
    font-size: 1.5em; /* حجم الخط */
    margin-bottom: 10px; /* مسافة سفلية */
}

.card-text {
    color: #666; /* لون نص البطاقة */
    font-size: 1em; /* حجم الخط */
    line-height: 1.6; /* تباعد الأسطر */
    flex-grow: 1; /* لجعل النص يأخذ المساحة المتاحة ويدفع المحتوى الأسفل للأسفل */
}

/* --- */

/* أنماط صندوق البحث (بديل لـ .search-container إذا كان هذا للصندوق داخل القاموس) */
.search-box {
    display: flex; /* ترتيب عناصر صندوق البحث */
    gap: 10px; /* مسافة بين العناصر */
    margin-bottom: 30px; /* مسافة سفلية */
}

.search-box input {
    flex-grow: 1; /* جعل حقل الإدخال يأخذ المساحة المتبقية */
    padding: 10px 15px; /* مسافة داخلية */
    border: 1px solid #ddd; /* حدود خفيفة */
    border-radius: 5px; /* حواف دائرية */
}

.search-box button {
    padding: 10px 20px; /* مسافة داخلية للزر */
    background-color: var(--button-bg); /* خلفية بلون الزر */
    color: #fff; /* نص أبيض */
    border: none; /* إزالة الحدود */
    border-radius: 5px; /* حواف دائرية */
    cursor: pointer; /* مؤشر الفأرة */
    transition: background-color 0.3s ease; /* انتقال سلس للخلفية */
}

.search-box button:hover {
    background-color: var(--button-hover); /* لون أغمق عند التمرير */
}

/* --- */

/* أنماط فلتر الأحرف (قاموس الحروف والأرقام) */
#lettersFilter {
    list-style: none; /* إزالة النقاط الافتراضية */
    padding: 0; /* إزالة الحشوة الافتراضية */
    display: flex; /* ترتيب الأحرف باستخدام Flexbox */
    flex-wrap: wrap; /* السماح بالانتقال إلى سطر جديد */
    gap: 5px; /* مسافة بين الأحرف */
    margin-bottom: 20px; /* مسافة سفلية */
    justify-content: center; /* توسيط الأحرف أفقياً */
}

#lettersFilter li {
    margin-bottom: 5px; /* مسافة سفلية لكل عنصر قائمة (لضمان تباعد جيد عند الالتفاف) */
}

#lettersFilter .letters-filter-btn {
    display: block; /* لجعل الزر كتلة وتطبيق البادنج عليه */
    padding: 8px 12px; /* مسافة داخلية */
    background-color: #f8f9fa; /* خلفية فاتحة */
    border: 1px solid #ddd; /* حدود خفيفة */
    border-radius: 5px; /* حواف دائرية */
    text-decoration: none; /* إزالة الخط السفلي */
    color: var(--text-color); /* لون النص */
    transition: background-color 0.3s, color 0.3s; /* انتقال سلس للخلفية واللون */
}

#lettersFilter .letters-filter-btn:hover {
    background-color: #e2e6ea; /* خلفية أغمق عند التمرير */
    color: var(--button-hover); /* لون النص بلون أزرق أغمق */
}

#lettersFilter .letters-filter-btn.active {
    background-color: var(--button-bg); /* خلفية بلون الزر عند التفعيل */
    color: #fff; /* نص أبيض */
    border-color: var(--button-bg); /* حدود بلون الزر */
}

/* --- */

/* أنماط الترقيم (Pagination) */
.pagination {
    display: flex; /* ترتيب عناصر الترقيم باستخدام Flexbox */
    justify-content: center; /* توسيط عناصر الترقيم أفقياً */
    margin-top: 30px; /* مسافة علوية */
    list-style: none; /* إزالة النقاط الافتراضية */
    padding: 0; /* إزالة الحشوة الافتراضية */
}

.pagination li {
    margin: 0 5px; /* مسافة أفقية بين عناصر الترقيم */
}

.pagination li a {
    display: block; /* لجعل الرابط كتلة وتطبيق البادنج عليه */
    padding: 8px 15px; /* مسافة داخلية */
    border: 1px solid #ddd; /* حدود خفيفة */
    border-radius: 5px; /* حواف دائرية */
    text-decoration: none; /* إزالة الخط السفلي */
    color: var(--button-bg); /* لون نص الرابط */
    transition: background-color 0.3s, color 0.3s; /* انتقال سلس للخلفية واللون */
}

.pagination li a:hover {
    background-color: #e2e6ea; /* خلفية أغمق عند التمرير */
}

.pagination li.active a {
    background-color: var(--button-bg); /* خلفية بلون الزر للعنصر النشط */
    color: #fff; /* نص أبيض */
    border-color: var(--button-bg); /* حدود بلون الزر */
}

.pagination li.disabled a {
    background-color: #f8f9fa; /* خلفية فاتحة للعنصر المعطل */
    color: #6c757d; /* لون نص رمادي */
    cursor: not-allowed; /* مؤشر الفأرة يدل على عدم الإمكانية */
}
.glossary-nav .breadcrumb-in-nav {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: transparent;
    width: 100%; /* Ensure it takes full width in mobile menu */
    border-radius: 0;
}
.glossary-nav .breadcrumb-in-nav .breadcrumb-item {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7); /* Lighter color for text */
}
.glossary-nav .breadcrumb-in-nav .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7); /* Lighter color for links */
}
.glossary-nav .breadcrumb-in-nav .breadcrumb-item.active {
    color: white; /* Active item is white for contrast */
}
/* Custom Styles for Horizontal Scroll Navigation */
.navigation-wrapper {
    position: relative;
    display: flex; /* لترتيب الأزرار والقائمة جنبًا إلى جنب */
    align-items: center;
    overflow: hidden; /* لإخفاء أي محتوى يتجاوز الحاوية */
    width: 100%;
}

.horizontal-scroll-menu {
    display: flex; /* لجعل عناصر القائمة تظهر في سطر واحد */
    flex-wrap: nowrap; /* لمنع العناصر من الالتفاف إلى سطر جديد */
    overflow-x: auto; /* لجعل القائمة قابلة للتمرير أفقيًا */
    -webkit-overflow-scrolling: touch; /* لتحسين التمرير على iOS */
    scroll-behavior: smooth; /* لتمرير سلس */
    list-style: none; /* إزالة النقاط الافتراضية للقائمة */
    padding: 0;
    margin: 0;
    flex-grow: 1; /* للسماح للقائمة بأن تأخذ المساحة المتبقية */
    scrollbar-width: none; /* لإخفاء شريط التمرير على Firefox */
    -ms-overflow-style: none;  /* لإخفاء شريط التمرير على IE/Edge */
}

/* إخفاء شريط التمرير على WebKit (Chrome, Safari) */
.horizontal-scroll-menu::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll-menu .nav-item {
    flex-shrink: 0; /* لمنع العناصر من الانكماش */
    padding: 0 5px; /* مسافة بين الروابط */
}

.scroll-btn {
    background-color: var(--secondary-color); /* لون الأزرار */
    color: white;
    border: none;
    padding: 0.8rem 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    z-index: 10;
    opacity: 0; /* إخفاء الأزرار بشكل افتراضي */
    pointer-events: none; /* تعطيل تفاعلها عندما تكون مخفية */
    border-radius: 5px;
    margin: 0 5px; /* مسافة عن القائمة */
}

.scroll-btn:hover {
    background-color: var(--primary-color);
}

.scroll-btn.active {
    opacity: 1; /* إظهار الأزرار عندما تكون هناك حاجة للتمرير */
    pointer-events: all; /* تفعيل التفاعل */
}

/* لضبط موضع الأزرار إذا كان هناك مسافة */
.scroll-btn-left {
    margin-right: 10px;
}
.scroll-btn-right {
    margin-left: 10px;
}

/* Media Queries لتكييف المظهر على الشاشات الكبيرة والصغيرة */
@media (min-width: 992px) { /* عند الشاشات الكبيرة (lg) */
    .horizontal-scroll-menu {
        overflow-x: visible; /* إظهار جميع العناصر وعدم الحاجة للتمرير */
        justify-content: flex-start; /* ترتيب العناصر من البداية */
    }
    .scroll-btn {
        display: none; /* إخفاء أزرار التمرير على الشاشات الكبيرة */
    }
}

@media (max-width: 991.98px) { /* عند الشاشات الصغيرة (أقل من lg) */
    .navigation-wrapper {
        justify-content: center;
    }
}