/* --- General Styles --- */
:root {
    --primary-blue: #0D6EFD;
    --primary-dark: #121212;
    --secondary-dark: #1a1a1a;
    --text-light: #FFFFFF;
    --text-muted: #a0aec0;
    --danger-red: #dc3545;
}
html[lang="ar"] body { font-family: 'Cairo', sans-serif; }
html[lang="en"] body { font-family: 'Poppins', sans-serif; }
body {
    background-color: var(--primary-dark);
    color: var(--text-light);
    overflow-x: hidden;
     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Old versions of Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;     
}

/* --- Animated Hero Background --- */
.hero-bg { background-color: var(--primary-dark); position: relative; overflow: hidden; }
#particles-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-content { position: relative; z-index: 2; }

/* --- Buttons & Links --- */
.btn-primary { background-color: var(--primary-blue); transition: background-color 0.3s ease, transform 0.2s ease; }
.btn-primary:hover { background-color: #0a58ca; transform: translateY(-2px); }
.btn-secondary { border: 1px solid var(--primary-blue); color: var(--primary-blue); transition: background-color 0.3s ease, color 0.3s ease; }
.btn-secondary:hover { background-color: var(--primary-blue); color: var(--text-light); }
.nav-link { position: relative; transition: color  #f47531 0.3s ease; }
.nav-link:hover { color:#f47531 }
html[dir="rtl"] .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; right: 0; background-color: #f47531; transition: width 0.3s ease; }
html[dir="rtl"] .nav-link:hover::after { width: 100%; }
html[dir="ltr"] .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: #f47531; transition: width 0.3s ease; }
html[dir="ltr"] .nav-link:hover::after { width: 100%; }

/* --- Content Cards --- */
.content-card { transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: var(--secondary-dark); cursor: pointer; }
.content-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2); }

/* --- Reels Section --- */
.reels-container::-webkit-scrollbar { height: 8px; }
.reels-container::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 10px; }
.reels-container::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 10px; }
.reel-card { flex: 0 0 180px; }
.reel-overlay { background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); }

/* --- Modal Styles --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { background-color: var(--secondary-dark); transform: scale(0.95); transition: transform 0.3s ease; border-radius: 0.75rem; max-height: 90vh; display: flex; flex-direction: column; width: 90%; max-width: 600px; }
.modal-overlay.active .modal-content { transform: scale(1); }
.modal-body { overflow-y: auto; padding: 1.5rem 2rem; }
/* Scrollbar for modal body */
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 10px; }

.form-input { background-color: #2a2a2a; border: 1px solid #444; transition: border-color 0.2s; }
.form-input:focus { border-color: var(--primary-blue); outline: none; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3); }
.form-input.invalid { border-color: var(--danger-red); }
.subscription-plan { border: 2px solid #444; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.subscription-plan.selected { border-color: var(--primary-blue); background-color: rgba(13, 110, 253, 0.1); }
.quiz-option, .mbti-option { border: 1px solid #444; transition: background-color 0.2s, border-color 0.2s; cursor: pointer; }
.quiz-option:hover, .mbti-option:hover { background-color: #2a2a2a; border-color: var(--primary-blue); }
#progress-bar, #mbti-progress-bar { transition: width 0.5s ease-in-out; }

/* --- Footer --- */
.social-icon { transition: color 0.3s ease, transform 0.3s ease; }
.social-icon:hover { color: var(--primary-blue); transform: translateY(-3px); }

/* --- Gemini Search --- */
#gemini-answer.loading::after {
    content: 'جاري البحث...';
    display: block;
    text-align: center;
    color: var(--primary-blue);
    animation: pulse 1.5s infinite;
}
html[lang="en"] #gemini-answer.loading::after { content: 'Searching...'; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- Floating Widgets --- */
.floating-btn {
    position: fixed;
    z-index: 1000;
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease;
}
.floating-btn:hover {
    transform: scale(1.1);
}

/* إخفاء أزرار التنقل (السابق والتالي) على الشاشات الصغيرة */
#prevVideo,
#nextVideo {
    display: none !important; /* !important لضمان تجاوز أي قواعد أخرى */
}

/* إظهار أزرار التنقل على الشاشات المتوسطة والكبيرة (MD) */
@media (min-width: 768px) { /* 768px هي نقطة توقف MD الافتراضية في Tailwind */
    #prevVideo,
    #nextVideo {
        display: block !important; /* !important لضمان تجاوز أي قواعد أخرى */
    }
}
/* --- إخفاء شريط التمرير (لكافة المتصفحات) --- */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* --- تنسيقات لكل عنصر ريل فردي (داخل reels-container) --- */
/* هذه التنسيقات مهمة لضمان أن كل ريل له حجمه الخاص ولا ينكمش */
.reel-card {
    flex-shrink: 0; /* يمنع الريل من الانكماش */
    margin-right: 1rem; /* مسافة بين الريلز (معادل لـ mr-4 في Tailwind) */
    width: 16rem; /* عرض ثابت لكل ريل (معادل لـ w-64 في Tailwind) */
    /* يمكنك إضافة أي تنسيقات أخرى لبطاقة الريل هنا مثل border-radius, shadow, background, etc. */
}

/* لجعل الريلز أكبر على الشاشات المتوسطة وما فوق */
@media (min-width: 768px) { /* 768px هي نقطة توقف MD الافتراضية في Tailwind */
    .reel-card {
        width: 20rem; /* عرض أكبر للريل (معادل لـ md:w-80) */
    }
}

/* --- أنماط للحاويات القابلة للتمرير أفقيًا (التي تحتوي على الفئات والبودكاست) --- */
/* هذه الفئات ستُضاف للـ div الداخلي الذي يحمل المحتوى القابل للتمرير */
.horizontal-scroll-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.horizontal-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    /* يمكنك ترك هذا أو إزالته إذا كان display: none */
}
/* لا داعي لتعريف track و thumb هنا إذا كان الشريط مخفيًا تمامًا */


/* --- أنماط لبطاقات الفئات الفردية (ستُطبق بواسطة JavaScript) --- */
.category-card {
    flex-shrink: 0; /* يمنع البطاقة من الانكماش */
    margin-right: 1rem; /* مسافة بين البطاقات */
    width: 16rem; /* عرض افتراضي (مثل w-64 في Tailwind) */
    /* أضف أي أنماط أخرى تريدها للبطاقة نفسها هنا */
    background-color: var(--secondary-dark); /* مثال */
    border-radius: 0.5rem; /* مثال */
    padding: 1rem; /* مثال */
}

/* ضبط عرض بطاقة الفئة للشاشات المتوسطة وما فوق */
@media (min-width: 768px) {
    .category-card {
        width: 20rem; /* عرض أكبر للشاشات المتوسطة (مثل md:w-80) */
    }
}

/* --- أنماط لبطاقات البودكاست الفردية (ستُطبق بواسطة JavaScript) --- */
.podcast-card {
    flex-shrink: 0; /* يمنع البطاقة من الانكماش */
    margin-right: 1rem; /* مسافة بين البطاقات */
    width: 16rem; /* عرض افتراضي (مثل w-64 في Tailwind) */
    /* أضف أي أنماط أخرى تريدها للبطاقة نفسها هنا */
    background-color: var(--secondary-dark); /* مثال */
    border-radius: 0.5rem; /* مثال */
    padding: 1rem; /* مثال */
}

/* ضبط عرض بطاقة البودكاست للشاشات المتوسطة وما فوق */
@media (min-width: 768px) {
    .podcast-card {
        width: 20rem; /* عرض أكبر للشاشات المتوسطة (مثل md:w-80) */
    }
}

/* --- تنسيقات لشريط التمرير المخصص داخل قسم التعليقات --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* عرض شريط التمرير */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #2a2a2a; /* لون خلفية شريط التمرير */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #555; /* لون شريط التمرير نفسه */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #777; /* لون شريط التمرير عند التحويم */
}

/* --- Course Card Styles --- */
.course-card {
    /* These flex-shrink and margin rules are crucial for horizontal scrolling */
    flex-shrink: 0; /* Prevents the card from shrinking */
    margin-right: 1rem; /* Space between cards (equivalent to mr-4 in Tailwind) */
    width: 16rem; /* Default width for each course card (equivalent to w-64 in Tailwind) */
    background-color: var(--secondary-dark);
    border-radius: 0.75rem; /* rounded-xl */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    overflow: hidden; /* Ensures content respects border-radius */
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
}

.course-card img {
    height: 10rem; /* h-40 */
}

.course-card h4 {
    min-height: 3rem; /* Ensure consistent height for titles across cards */
}

/* Adjust width for medium screens and up */
@media (min-width: 768px) { /* 768px is Tailwind's default MD breakpoint */
    .course-card {
        width: 20rem; /* Larger width for medium screens (equivalent to md:w-80) */
    }
}

/* Ensure horizontal-scroll-container and hide-scrollbar are defined as you have them */
/* If not, ensure these are present as well, likely already in your style.css: */
.horizontal-scroll-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.horizontal-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}



/* --- قسم الأقسام والكورسات الجديدة --- */
#categories-courses-section {
    background-color: var(--secondary-dark); /* استخدام اللون الثانوي الداكن للخلفية */
}

#category-chips-container {
    /* تنسيق الحاوية لأزرار الأقسام */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem; /* مسافة بين الأزرار (mb-3 في Tailwind) */
    margin-bottom: 3rem; /* مسافة أسفل الحاوية (mb-12 في Tailwind) */
}

.category-chip {
    /* التنسيق الأساسي لزر القسم */
    background-color: var(--primary-blue); /* أو لون افتراضي آخر مثل #6a4a9e */
    color: var(--text-light);
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-radius: 9999px; /* rounded-full */
    font-weight: 600; /* font-semibold */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    border: 2px solid transparent; /* حدود شفافة */
    white-space: nowrap; /* يمنع الكلمات من الالتفاف */
}

.category-chip:hover {
    background-color: #0a58ca; /* لون أغمق عند التحويم */
    transform: translateY(-2px); /* تأثير بسيط للارتفاع */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.category-chip.active-category {
    /* تنسيق القسم النشط */
    background-color: #6a4a9e; /* اللون البنفسجي المميز */
    border-color: var(--text-light); /* حدود بيضاء لتبريزه */
    transform: translateY(-2px) scale(1.05); /* تبريز أكبر */
    box-shadow: 0 8px 15px rgba(106, 74, 158, 0.4); /* ظل بلون بنفسجي */
}

/* تنسيقات كروت الكورسات */
.course-item {
    background-color: var(--primary-dark); /* خلفية الكارت */
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative; /* لتأثيرات الرسوم المتحركة */
    opacity: 0; /* لتأثير الظهور التدريجي */
    transform: translateY(20px); /* لتأثير الارتفاع */
    animation: fadeInRise 0.5s forwards; /* الرسوم المتحركة الافتراضية */
    width: 100%; /* اجعل الكارت يملأ عرضه المتاح داخل عمود الشبكة */
}

.course-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(106, 74, 158, 0.3);
}

.course-item img {
    width: 100%;
    height: 12rem; /* ارتفاع ثابت للصور */
    object-fit: cover; /* لضمان تغطية الصورة للمساحة */
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.course-item-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%; /* لضمان أن المحتوى يملأ الكارت */
}

/* تصغير حجم خط عنوان الكورس على الموبايل */
.course-item h4 {
    font-size: 1.25rem; /* Keep default for larger screens (text-xl) */
    font-weight: 700; /* font-bold */
    color: var(--text-light);
    margin-bottom: 0.5rem;
    min-height: 3rem; /* للحفاظ على ارتفاع ثابت للعناوين */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عرض سطرين كحد أقصى */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) { /* Media query for screens smaller than 768px (md breakpoint) */
    .course-item h4 {
        font-size:  0.9rem; /* Smaller font size for mobile screens */
        min-height: 0.8rem; /* Adjust min-height if needed with smaller font */
    }
}


.course-item p {
    font-size: 0.875rem; /* text-sm */
    color: var(--text-muted);
    margin-bottom: 1rem;
    flex-grow: 1; /* لتوسيع الفقرة لملء المساحة المتاحة */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* عرض 3 أسطر كحد أقصى للوصف */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* تصغير حجم خط اسم المقدم على الموبايل */
.course-item .instructor-name {
    font-size: 0.9rem; /* Keep default for larger screens */
    color: #6a4a9e; /* لون المدرب */
    font-weight: 600;
    margin-top: auto; /* لدفع اسم المدرب للأسفل */
}

@media (max-width: 767px) { /* Media query for screens smaller than 768px (md breakpoint) */
    .course-item .instructor-name {
        font-size: 0.7rem; /* Smaller font size for mobile screens */
    }
}

/* الرسوم المتحركة لظهور الكورسات */
@keyframes fadeInRise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) { /* Applies to screens smaller than 768px (common mobile breakpoint) */
    header .flex img {
        width: 140px; /* Adjust as needed */
        height: auto; /* Maintain aspect ratio */
    }
}


/* إخفاء شريط التمرير الأفقي لمعظم المتصفحات */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* For Webkit browsers (Chrome, Safari) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* تعديلات على حجم الكارت لجعله ثابتًا وأفقيًا */
.course-item {
    flex: 0 0 280px; /* لا تنمو ولا تتقلص، عرض ثابت 280 بكسل */
    min-width: 280px; /* ضمان الحد الأدنى للعرض */
    max-width: 280px; /* ضمان الحد الأقصى للعرض */
    vertical-align: top; /* محاذاة علوية إذا كانت هناك كروت بأحجام مختلفة قليلاً */
    /* قم بإزالة أي عرض أو عرض أقصى سابق كان خاصًا بالـ grid */
    /* و تأكد ان الـ padding و الـ margin تم التعامل معهم من خلال الـ gap في الـ flex container */
    background-color: #1a1a1a; /* لون خلفية الكارت */
    border-radius: 0.5rem; /* حواف دائرية */
    overflow: hidden; /* إخفاء أي محتوى زائد */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    display: flex; /* لكي يتمكن المحتوى الداخلي من الترتيب العمودي */
    flex-direction: column; /* ترتيب المحتوى داخل الكارت عمودياً */
    height: auto; /* السماح بتحديد الارتفاع تلقائيًا بناءً على المحتوى */
}

/* تعديل صورة الكورس داخل الكارت لتتناسب بشكل جيد */
.course-item img {
    width: 100%;
    height: 180px; /* ارتفاع ثابت للصورة */
    object-fit: cover; /* لضمان تغطية الصورة للمساحة دون تشويه */
    border-radius: 0.5rem 0.5rem 0 0; /* حواف دائرية في الأعلى فقط */
}

.course-item > div { /* لتحديد الـ p-4 div داخل الكارت */
    padding: 1rem; /* إعادة تعريف الـ padding لضمان الثبات */
    flex-grow: 1; /* للسماح للمحتوى النصي بالتمدد وأخذ المساحة المتاحة */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* لدفع اسم المدرب للأسفل إذا كان هناك مساحة إضافية */
}

/* لضمان أن العنوان لا يتجاوز سطرين ويظهر الثلاث نقاط */
.course-item h4 {
    white-space: normal; /* السماح للنص بالالتفاف */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* تحديد سطرين كحد أقصى */
    -webkit-box-orient: vertical;
    min-height: 2.5rem; /* ضمان ارتفاع ثابت للعنوان لكي لا تتغير أحجام الكروت */
    line-height: 1.25; /* ضبط ارتفاع السطر */
    font-size: 1.125rem; /* text-xl */
}

/* لضمان أن اسم المدرب لا يلتف إذا كان طويلاً جداً */
.course-item .instructor-name {
    white-space: nowrap; /* يمنع التفاف النص */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem; /* Keep default for larger screens */
    color: #6a4a9e; /* لون المدرب */
    font-weight: 600;
    margin-top: auto; /* لدفع اسم المدرب للأسفل */
}

/* قم بإزالة أي media queries سابقة كانت تغير حجم الكارت على الموبايل */
/* مثل هذه (أو ما يشابهها): */
/*
@media (max-width: 767px) {
    .course-item h4 {
        font-size:  0.9rem;
        min-height: 0.8rem;
    }
    .course-item .instructor-name {
        font-size: 0.7rem;
    }
}
*/

/* إخفاء أسهم التنقل على الشاشات الصغيرة (الموبايل) */
@media (max-width: 768px) { /* يمكنك تعديل هذه القيمة حسب تعريفك للموبايل، md: في Tailwind عادةً ما تكون 768px */
    #prevSlide,
    #nextSlide {
        display: none;
    }
}
.subscription-plan { border: 2px solid #444; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.subscription-plan.selected { border-color: var(--primary-blue); background-color: rgba(13, 110, 253, 0.1); }

/* Custom styles to improve scrolling behavior */
.flex-row {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* لتحسين التمرير على أجهزة iOS */
}

/* Custom styles to hide the native scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar for Webkit Browsers (Chrome, Safari, Edge) */
.prose::-webkit-scrollbar {
    width: 8px; /* عرض شريط التمرير */
}

.prose::-webkit-scrollbar-track {
    background: transparent; /* خلفية شفافة */
}

.prose::-webkit-scrollbar-thumb {
    background-color: #f97316; /* لون شريط التمرير (البرتقالي) */
    border-radius: 4px; /* حواف دائرية */
    border: 2px solid transparent;
}


/* تخصيص شريط التمرير للصفحة بأكملها */
body::-webkit-scrollbar {
    width: 8px; /* عرض شريط التمرير */
}

body::-webkit-scrollbar-track {
    background: transparent; /* خلفية شفافة */
}

body::-webkit-scrollbar-thumb {
    background-color: #f97316; /* لون شريط التمرير (البرتقالي) */
    border-radius: 4px; /* حواف دائرية */
    border: 2px solid transparent;
}







/* أنماط الوضع الفاتح */
body.light-mode {
    --primary-dark: #f3f4f6;
    --secondary-dark: #ffffff;
    --text-light: #1f2937;
    --text-muted: #6b7280;
    --primary-blue: #3b82f6;
}

body.light-mode {
    background-color: var(--primary-dark);
    color: var(--text-light);
}

body.light-mode .bg-gray-900 {
    background-color: #f1f5f9 !important;
}

body.light-mode .bg-black {
    background-color: #f8fafc !important;
    color: #1f2937 !important;
}

body.light-mode .text-white {
    color: #1f2937 !important;
}

body.light-mode .text-gray-400 {
    color: #6b7280 !important;
}

body.light-mode .bg-\[\#181818\] {
    background-color: #e5e7eb !important;
}

body.light-mode .content-card,
body.light-mode .course-card,
body.light-mode .course-item,
body.light-mode .modal-content,
body.light-mode .subscription-plan,
body.light-mode .form-input {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
}

body.light-mode .nav-link {
    color: #4b5563 !important;
}

body.light-mode .nav-link:hover {
    color: #3b82f6 !important;
}

body.light-mode footer a,
body.light-mode footer p,
body.light-mode footer h4 {
    color: #4b5563 !important;
}

body.light-mode footer a:hover {
    color: #3b82f6 !important;
}

/* زر تبديل الوضع */
#theme-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 1000;
    background-color: #6a4a9e;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

#theme-toggle:hover {
    transform: scale(1.1);
    background-color: #5a3a8e;
}

/* أيقونات بديلة في حالة عدم تحميل Feather Icons */
.icon-moon::before {
    content: "🌙";
    font-size: 24px;
}

.icon-sun::before {
    content: "☀️";
    font-size: 24px;
}


/* أنماط الوضع الفاتح - إصدار محدث */
body.light-mode {
    --primary-dark: #f3f4f6;
    --secondary-dark: #ffffff;
    --text-light: #1f2937;
    --text-muted: #6b7280;
    --primary-blue: #3b82f6;
}

body.light-mode {
    background-color: var(--primary-dark);
    color: var(--text-light);
}

/* تحديث أنماط الهيدر للوضع الفاتح */
body.light-mode header.bg-\[\#181818\]\/80 {
    background-color: rgba(229, 231, 235, 0.8) !important; /* رمادي فاتح مع شفافية */
    backdrop-filter: blur(8px);
}

body.light-mode .bg-gray-900 {
    background-color: #f1f5f9 !important;
}

body.light-mode .bg-black {
    background-color: #f8fafc !important;
    color: #1f2937 !important;
}

body.light-mode .text-white {
    color: #1f2937 !important;
}

body.light-mode .text-gray-300 {
    color: #4b5563 !important;
}

body.light-mode .text-gray-400 {
    color: #6b7280 !important;
}

body.light-mode .bg-\[\#1a1a1a\] {
    background-color: #e5e7eb !important;
}

body.light-mode .content-card,
body.light-mode .course-card,
body.light-mode .course-item,
body.light-mode .modal-content,
body.light-mode .subscription-plan,
body.light-mode .form-input {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
}

body.light-mode .nav-link {
    color: #4b5563 !important;
}

body.light-mode .nav-link:hover {
    color: #3b82f6 !important;
}

body.light-mode footer a,
body.light-mode footer p,
body.light-mode footer h4 {
    color: #4b5563 !important;
}

body.light-mode footer a:hover {
    color: #3b82f6 !important;
}

/* أنماط القوائم المنسدلة في الوضع الفاتح */
body.light-mode .bg-gray-800 {
    background-color: #f9fafb !important;
}

body.light-mode .bg-gray-800 a {
    color: #1f2937 !important;
}

body.light-mode .bg-gray-800 a:hover {
    background-color: #e5e7eb !important;
}

/* زر تبديل الوضع */
#theme-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 1000;
    background-color: #6a4a9e;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

#theme-toggle:hover {
    transform: scale(1.1);
    background-color: #5a3a8e;
}

/* أيقونات بديلة في حالة عدم تحميل Feather Icons */
.icon-moon::before {
    content: "🌙";
    font-size: 24px;
}

.icon-sun::before {
    content: "☀️";
    font-size: 24px;
}

/* تأثيرات انتقال سلسة */
body, header, .content-card, .course-card, .modal-content, footer, 
.nav-link, .bg-gray-800, .bg-gray-900, .bg-black {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* تحديث أنماط الأقسام المحددة للوضع الفاتح */
body.light-mode #reels-section,
body.light-mode #podcast,
body.light-mode #gemini-search {
    background-color: #f3f4f6 !important; /* لون فاتح */
}

body.light-mode #reels-section h3,
body.light-mode #podcast h3,
body.light-mode #gemini-search h3 {
    color: #1f2937 !important; /* لون نص داكن للعناوين */
}

body.light-mode #gemini-search .bg-gray-800 {
    background-color: #e5e7eb !important; /* لون فاتح للمحتوى الداخلي */
    color: #1f2937 !important; /* لون نص داكن */
}

body.light-mode #gemini-search input {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

body.light-mode #gemini-search input::placeholder {
    color: #6b7280 !important;
}

body.light-mode #gemini-answer {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
}

/* إصلاح أي تعارض مع أنماط الترجمة */
body.light-mode .goog-te-combo {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}
/* تأكد من أن حقول الإدخال تحافظ على لونها في كلا الوضعين */
input, select, textarea {
    color: white !important;
}

/* استثناء لعناصر أخرى قد تتأثر */
input[type="checkbox"], input[type="radio"] {
    background-color: initial !important;
}
body.light-mode input, select, textarea {
    color: white !important;
}

/* تنسيقات كروت المدونة في الوضع الفاتح */
body.light-mode .bg-\[\#212121\] {
    background-color: #ffffff !important;
}

body.light-mode .text-white {
    color: #1f2937 !important;
}

body.light-mode .text-gray-400 {
    color: #6b7280 !important;
}

body.light-mode .text-gray-500 {
    color: #9ca3af !important;
}

body.light-mode .text-purple-400 {
    color: #7c3aed !important;
}

body.light-mode .text-purple-400:hover {
    color: #6d28d9 !important;
}

body.light-mode .shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .hover\:scale-105:hover {
    transform: scale(1.05);
}


/* تنسيقات نموذج تدريب الشركات في الوضع الفاتح */
body.light-mode #training-form {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body.light-mode #training-form h3 {
    color: #1f2937 !important;
}

body.light-mode #training-form label {
    color: #4b5563 !important;
}

body.light-mode #training-form input,
body.light-mode #training-form select,
body.light-mode #training-form textarea {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

body.light-mode #training-form input::placeholder,
body.light-mode #training-form textarea::placeholder {
    color: #9ca3af !important;
}

body.light-mode #training-form .text-gray-400 {
    color: #6b7280 !important;
}

body.light-mode #training-form .bg-gray-800 {
    background-color: #f1f5f9 !important;
    border-color: #e5e7eb !important;
}

body.light-mode #training-form .bg-gray-800 p {
    color: #4b5563 !important;
}

body.light-mode #training-form .bg-gray-800 .text-white {
    color: #1f2937 !important;
}

body.light-mode #training-form .bg-gray-800 .text-gray-300 {
    color: #6b7280 !important;
}

/* تنسيق السهم في حقل الاختيار (select) */
body.light-mode #training-form .pointer-events-none svg {
    fill: #6b7280 !important;
}

/* تنسيق الأزرار */
body.light-mode #training-form button[type="submit"],
body.light-mode a[href="#training-form"] {
    background-color: #6a4a9e !important;
    color: white !important;
}

body.light-mode #training-form button[type="submit"]:hover,
body.light-mode a[href="#training-form"]:hover {
    background-color: #5a3a8e !important;
}


/* تنسيقات صفحة فئة الكورسات في الوضع الفاتح */
body.light-mode main {
    background-color: #f3f4f6 !important;
}

body.light-mode .bg-\[\#121212\] {
    background-color: #f3f4f6 !important;
}

body.light-mode h2 {
    color: #1f2937 !important;
}

body.light-mode .course-card {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .course-card h4 {
    color: #1f2937 !important;
}

body.light-mode .course-card .text-gray-400 {
    color: #6b7280 !important;
}

body.light-mode .text-gray-400 {
    color: #6b7280 !important;
}

body.light-mode .btn-primary {
    background-color: #6a4a9e !important;
    color: white !important;
}

body.light-mode .btn-primary:hover {
    background-color: #5a3a8e !important;
}


body.light-mode h1 {
    color: #1f2937 !important;
}


/* تنسيقات صفحات إنشاء الحساب وتسجيل الدخول في الوضع الفاتح */
body.light-mode main {
    background-color: #f3f4f6 !important;
}

body.light-mode .bg-gray-800 {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode h2 {
    color: #1f2937 !important;
}

body.light-mode .text-gray-400 {
    color: #6b7280 !important;
}

body.light-mode label {
    color: #4b5563 !important;
}

body.light-mode input,
body.light-mode textarea,
body.light-mode select {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #9ca3af !important;
}

body.light-mode .bg-red-500 {
    background-color: #dc2626 !important;
}

body.light-mode .bg-blue-600 {
    background-color: #6a4a9e !important;
}

body.light-mode .bg-blue-600:hover {
    background-color: #5a3a8e !important;
}

body.light-mode .text-blue-600 {
    color: #6a4a9e !important;
}

body.light-mode .text-blue-600:hover {
    color: #5a3a8e !important;
}

body.light-mode .border-gray-600 {
    border-color: #d1d5db !important;
}

body.light-mode .focus\:ring-blue-500:focus {
    --tw-ring-color: #6a4a9e !important;
}

body.light-mode .focus\:border-blue-500:focus {
    border-color: #6a4a9e !important;
}

body.light-mode input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

body.light-mode input[type="checkbox"]:checked {
    background-color: #6a4a9e !important;
    border-color: #6a4a9e !important;
}