/* ==================================
   الأنماط الأساسية والخطوط
   ================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Amiri', serif;
}

body {
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    transition: background-color 0.3s ease;
}

/* ==================================
   حاوية التطبيق الرئيسية
   ================================== */
.app-container {
    width: 100%;
    max-width: 800px;
    
    /* --- التعديل هنا --- */
    min-height: 80vh;  /* تم التغيير من 1123px إلى 80vh ليتناسب مع ارتفاع الشاشة */
    /* أو يمكنك كتابة: min-height: auto; */
    
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.notebook-lines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: repeating-linear-gradient(#eef2f5 0px, #eef2f5 24px, #d8e0e8 25px);
    opacity: 0.6;
    z-index: 0;
}

.header, .content, .controls {
    position: relative;
    z-index: 1;
    
}

/* ==================================
   محتوى التطبيق (Header, Content)
   ================================== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    
    /* 👇👇 هذا هو السطر الجديد الذي سيقلب الأماكن 👇👇 */
    flex-direction: row-reverse; 
}

/* تنسيق إضافي لضمان جمالية العنوان والرقم */
.lesson-title {
    text-align: center; /* ضمان أن النص العربي يبدأ من اليمين */
    flex-grow: 1; /* يأخذ المساحة المتبقية */
    border-bottom: 2px solid #1f8ce2;
}

.lesson-number {
    /* يمكنك تغيير لون أو حجم الرقم هنا إذا أردت */
    font-weight: bold;
    color: #4CAF50; /* لون أخضر مثلاً */
    font-size: 24px;
}

/* ==================================
   القائمة الجانبية (Sidebar)
   ================================== */
.sidebar-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.sidebar {
    position: fixed;
    top: 0; right: -350px;
    width: 335px; height: 100%;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    scrollbar-width: none; /* Firefox */
}
.sidebar::-webkit-scrollbar { display: none; } /* Chrome, Safari, Opera */

.sidebar.active { right: 0; }

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.sidebar-title { font-size: 22px; color: #333; font-weight: bold; }

.close-sidebar {
    background: none; border: none; font-size: 20px; cursor: pointer;
    color: #666; transition: color 0.3s, transform 0.3s;
}
.close-sidebar:hover { color: #f44336; transform: rotate(90deg); }

.grade-section { margin-bottom: 15px; }

.grade-title {
    font-size: 18px; color: #111a7d; margin-bottom: 10px;
    padding: 10px 5px; border-bottom: 1px dashed #ddd; cursor: pointer;
    display: flex;
    font-weight: 700;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    transition: color 0.3s;
    border-radius: 5px;
}
.grade-title:hover { color: #388E3C; background-color: #f9f9f9; }
.grade-title i { transition: transform 0.3s; }
.grade-section.active .grade-title i { transform: rotate(-90deg); }

.lessons-list {
    padding-right: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}
.lesson-item {
    padding: 8px 0; cursor: pointer; transition: all 0.2s;
    border-bottom: 1px solid #f5f5f5;
}
.lesson-item:hover { color: #4CAF50; padding-right: 5px; background-color: #f9f9f9; }

.sidebar-footer {
    margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;
}
.footer-item {
    padding: 10px 0; cursor: pointer; transition: color 0.3s;
    display: flex; align-items: center; gap: 10px;
}
.footer-item:hover { color: #4CAF50; }

.menu-toggle {
    position: fixed; top: 20px; right: 20px;
    width: 50px; height: 50px;
    background-color: #4CAF50; color: white;
    border-radius: 50%; display: flex;
    justify-content: center; align-items: center;
    cursor: pointer; z-index: 1001;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.menu-toggle:hover { transform: scale(1.1) rotate(15deg); }

/* ==================================
   محتوى التطبيق (Header, Content)
   ================================== */
.header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px;
}
/* ================================================== */
/* ================================================== */
/* تصميم قائمة الدروس (حل جذري للارتفاع والتمرير) */
/* ================================================== */
.lessons-list {
    /* 1. إجبار القائمة على ارتفاع محدد (400px تكفي لـ 10 دروس تقريباً) */
    /* نستخدم !important لمنع الجافاسكريبت من تكبير القائمة أكثر من اللازم */
    max-height: 400px !important; 
    
    /* 2. تفعيل التمرير العمودي */
    overflow-y: auto !important;
    
    /* 3. تنسيقات بصرية */
    background-color: #fafafa;
    border-radius: 8px;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid #eee;
    
    /* 4. ضمان الظهور */
    display: block;
    opacity: 1;
    visibility: visible;
}

/* ================================================== */
/* تنسيق شريط التمرير (Scrollbar) */
/* ================================================== */
/* Webkit browsers like Chrome/Safari */
.lessons-list::-webkit-scrollbar {
    width: 6px;
}

.lessons-list::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}

.lessons-list::-webkit-scrollbar-thumb {
    background-color: #ccc; 
    border-radius: 4px;
}

.lessons-list::-webkit-scrollbar-thumb:hover {
    background-color: #4CAF50; /* يتغير للأخضر عند التمرير */
}

/* Firefox */
.lessons-list {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}

/* ================================================== */
/* تعديل خاص للهواتف لضمان عدم تغطية الشاشة */
/* ================================================== */
@media (max-height: 700px) {
    .lessons-list {
        /* في الشاشات القصيرة، نقلل الارتفاع قليلاً */
        max-height: 300px !important; 
    }
}

.content {
    display: flex; flex-direction: row-reverse; gap: 30px;
    flex-grow: 1;
}
.image-container {
    width: 250px; height: 180px; border-radius: 15px; overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer;
    position: relative; transition: transform 0.3s ease; flex-shrink: 0;
    border: 5px solid white;
}
.image-container:hover { transform: scale(1.05); }
.image-container img { width: 100%; height: 100%; object-fit: cover; }

.lesson-content { flex-grow: 1; }
.words-container {
    display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px;
    justify-content: flex-end; align-content: flex-start;
}
.word {
    font-size: 28px; padding: 10px 15px; border-radius: 10px;
    cursor: pointer; transition: all 0.3s ease; position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #e0e0e0;
}
.word:hover { background-color: #f5f5f5; transform: translateY(-3px); }
.word.highlighted { box-shadow: 0 4px 8px rgba(0,0,0,0.1); background-color: #FFF9C4; }
.word.active-reading {
    animation: pulse 1s infinite; background-color: #FFEB3B;
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.7);
    border-color: #FFC107;
}
.haraka { color: #f44336; font-weight: bold; }

/* ==================================
   أزرار التحكم (Controls)
   ================================== */
.controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 40px; padding-top: 20px; border-top: 1px dashed #ccc;
}
.nav-buttons { display: flex; gap: 10px; }
.nav-button {
    width: 45px; height: 45px; border-radius: 50%;
    background-color: #4CAF50; color: white; display: flex;
    justify-content: center; align-items: center; cursor: pointer;
    transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: none; font-size: 16px;
}
.nav-button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.nav-button:disabled {
    background-color: #cccccc; cursor: not-allowed;
    transform: none; box-shadow: none;
}

.right-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-box { display: flex; align-items: center; gap: 5px; }
.search-box input {
    width: 80px; padding: 8px 12px; border: 1px solid #ddd;
    border-radius: 20px; outline: none; text-align: center;
    transition: all 0.3s ease;
}
.search-box input:focus { border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); }

.control-button, .search-button {
    padding: 8px 16px; color: white; border: none;
    border-radius: 20px; cursor: pointer; transition: all 0.3s ease;
    display: flex; align-items: center; gap: 8px; font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.control-button:hover, .search-button:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.control-button:disabled {
    background-color: #BDBDBD;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.search-button { background-color: #2196F3; }
.teach-me-button { background-color: #9C27B0; }
.refresh-button { background-color: #FF9800; }
.settings-button { background-color: #607D8B; }
.spell-button { background-color: #795548; }
.test-button { background-color: #E91E63; }

/* ==================================
   النوافذ المنبثقة (Popups)
   ================================== */
.welcome-popup, .settings-popup, .test-popup, .spell-popup, .info-popup {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 2000; padding: 20px;
}
.welcome-content, .settings-content, .test-content, .spell-content, .info-content {
    background-color: white; border-radius: 15px; padding: 30px 40px;
    width: 90%; max-width: 500px; text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: zoomIn 0.3s ease-out;
    max-height: 90vh; overflow-y: auto;
}

@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.welcome-image {
    width: 150px; height: 150px; margin: 0 auto 20px;
    border-radius: 50%; overflow: hidden;
    border: 5px solid #4CAF50; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.welcome-image img { width: 100%; height: 100%; object-fit: cover; }
.welcome-message { font-size: 24px; margin-bottom: 25px; color: #333; line-height: 1.6; }
.start-button {
    background-color: #4CAF50; color: white; border: none;
    padding: 12px 30px; font-size: 18px; border-radius: 30px;
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-flex; align-items: center; gap: 10px;
}
.start-button:hover { background-color: #3e8e41; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }

/* ==================================
   نافذة الإعدادات الاحترافية
   ================================== */
.settings-title { font-size: 24px; margin-bottom: 25px; color: #333; }
.settings-section {
    border: 1px solid #eee; border-radius: 8px;
    margin-bottom: 15px; overflow: hidden;
    background-color: #f9f9f9;
}
.settings-section-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; cursor: pointer;
    transition: background-color 0.3s;
}
.settings-section-header:hover { background-color: #f1f1f1; }
.settings-section-header h3 {
    font-size: 16px; color: #333; margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.settings-section-header .toggle-icon { transition: transform 0.3s ease-in-out; }
.settings-section.open .settings-section-header { background-color: #e8e8e8; }
.settings-section.open .settings-section-header .toggle-icon { transform: rotate(180deg); }

.settings-section-content {
    max-height: 0; overflow: hidden; padding: 0 15px;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    background-color: #fff;
}
.settings-section.open .settings-section-content {
    padding: 15px;
}

.settings-group { margin-bottom: 15px; text-align: right; }
.settings-label { display: block; margin-bottom: 8px; font-weight: bold; color: #555; }
.settings-input, .settings-select {
    width: 100%; padding: 10px; border: 1px solid #ddd;
    border-radius: 8px; font-size: 16px; background-color: white;
}
.settings-buttons { display: flex; justify-content: space-between; margin-top: 25px; gap: 15px; }
.save-button, .cancel-button, .close-button {
    padding: 10px 20px; border: none; border-radius: 8px;
    cursor: pointer; font-size: 16px; transition: all 0.3s ease;
    flex-grow: 1; display: flex; justify-content: center; align-items: center; gap: 8px;
}
.save-button, .close-button { background-color: #4CAF50; color: white; }
.cancel-button { background-color: #f44336; color: white; }
.save-button:hover, .close-button:hover { background-color: #3e8e41; }
.cancel-button:hover { background-color: #d32f2f; }

/* ==================================
   شريط التقدم
   ================================== */
.progress-container { margin-top: 20px; text-align: center; }
.progress-bar {
    width: 100%; height: 10px; background-color: #e0e0e0;
    border-radius: 5px; overflow: hidden; margin-top: 5px;
}
.progress-fill { height: 100%; background-color: #4CAF50; width: 0%; transition: width 0.5s ease; }
.progress-text { font-size: 14px; color: #666; }

/* ==================================
   نافذة الاختبار
   ================================== */
.test-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.test-option {
    padding: 12px 20px; background-color: #f5f5f5; border-radius: 10px;
    cursor: pointer; transition: all 0.3s ease; font-size: 18px;
    border: 1px solid #ddd;
}
.test-option:hover { background-color: #e0e0e0; }
.test-option.correct { background-color: #4CAF50; color: white; border-color: #388E3C; }
.test-option.incorrect { background-color: #f44336; color: white; border-color: #d32f2f; }
.test-result { margin-top: 20px; font-size: 18px; font-weight: bold; }

/* ==================================
   نافذة التهجئة
   ================================== */
.spell-word {
    font-size: 32px; font-weight: bold; margin: 20px 0;
    padding: 15px; background-color: #f9f9f9; border-radius: 10px;
    border: 2px solid #4CAF50;
}
.spell-syllables {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 10px; margin: 20px 0;
}
.syllable {
    padding: 10px 15px; background-color: #E3F2FD; border-radius: 8px;
    cursor: pointer; transition: all 0.3s ease; font-size: 20px;
    border: 1px solid #BBDEFB;
}
.syllable:hover {
    background-color: #BBDEFB; transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.syllable-separator {
    font-size: 20px; color: #666; font-weight: bold;
}

/* ==================================
   نافذة المعلومات
   ================================== */
.info-title { font-size: 24px; margin-bottom: 20px; color: #333; }
.info-body {
    text-align: right; line-height: 1.8; max-height: 400px;
    overflow-y: auto; padding: 10px;
}
.info-body h3 { color: #4CAF50; margin: 15px 0 10px; }
.info-body ul { padding-right: 20px; margin: 10px 0; }
.info-body li { margin-bottom: 8px; }
.contact-info p { margin: 10px 0; display: flex; align-items: center; gap: 10px; }

/* ==================================
   أنماط واجهة التنقل الجديدة
   ================================== */
.main-navigation {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #f0f4f8;
    z-index: 900; /* تحت النوافذ المنبثقة وفوق التطبيق */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.nav-section {
    width: 100%;
    max-width: 900px;
    animation: fadeIn 0.5s ease;
    text-align: center;
}

.nav-title {
    font-size: 28px;
    color: #333;
    margin-bottom: 30px;
    font-weight: bold;
}

/* تنسيق بطاقات الصفوف */
.grades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    justify-content: center;
}

.grade-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border: 2px solid transparent;
}

.grade-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #4CAF50;
}

.grade-card i {
    font-size: 50px;
    color: #4CAF50;
}

.grade-card span {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* تنسيق دوائر الدروس */
.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.back-btn {
    background: #607D8B;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}
.back-btn:hover { background: #455A64; }

.lessons-circles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}




/* تنسيق الدائرة مع الصورة الخلفية */
.lesson-circle {
    width: 130px;                /* حجم الدائرة */
    height: 130px;
    border-radius: 50%;          /* جعلها دائرية */
    
    /* خصائص الصورة الخلفية */
    background-size: cover;      /* جعل الصورة تغطي كامل الدائرة */
    background-position: center; /* توسيط الصورة */
    background-repeat: no-repeat;
    
    /* تنسيق الحدود والظلال */
    border: 4px solid #fff;      /* إطار أبيض جميل */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    
    /* لترتيب النص في المنتصف */
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    overflow: hidden;            /* لضمان عدم خروج المحتوى عن الدائرة */
    transition: transform 0.3s ease, border-color 0.3s;
}

.lesson-circle:hover {
    transform: scale(1.1);       /* تكبير عند التمرير */
    border-color: #4CAF50;       /* تغيير لون الإطار للأخضر */
    z-index: 10;
}

/* تنسيق خلفية النص داخل الدائرة */
.lesson-circle-content {
    width: 100%;                 /* الشريط يمتد لعرض الدائرة */
    background-color: rgba(255, 255, 255, 0.85); /* لون أبيض شفاف بنسبة 85% */
    padding: 8px 0;              /* مسافة داخلية علوية وسفلية */
    text-align: center;
    color: #000;                 /* لون النص أسود */
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* ظل خفيف للنص */
}

/* تنسيق رقم الدرس المصغر */
.lesson-circle-content .number {
    display: block;
    font-size: 11px;
    color: #E91E63;              /* لون مميز للرقم */
    margin-bottom: 2px;
}




@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* تحسين للجوال */
@media (max-width: 600px) {
    .lesson-circle { width: 100px; height: 100px; }
    .lesson-circle-content { font-size: 14px; }
    
}

/* ==================================
   أنماط قسم التهيئة والإعداد
   ================================== */
#prepCardsPopup .info-content {
    max-width: 950px;
    width: 95%;
}

.prep-grades-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.grade-select-button {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    background-color: #f0f4f8;
    border: 2px solid #d8e0e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.grade-select-button:hover {
    background-color: #4CAF50;
    color: white;
    border-color: #388E3C;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.prep-cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
    padding: 10px;
    /* ✨ التغيير: تم حذف الأسطر التالية لإزالة شريط التمرير الداخلي ✨ */
    /* max-height: 60vh; */
    /* overflow-y: auto; */
}

.prep-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease;
}
.prep-card:hover {
    transform: scale(1.05);
}

.prep-card-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.prep-card-description {
    padding: 15px;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* ==================================
   الاستجابة للشاشات الصغيرة (Responsive)
   ================================== */
@media (max-width: 768px) {
    .app-container { padding: 20px; min-height: auto; }
    .content { flex-direction: column; align-items: center; }
    .image-container { margin-bottom: 20px; }
    .words-container { justify-content: center; }
    .controls { flex-direction: column; gap: 20px; }
    .right-controls { width: 100%; justify-content: center; }
    .control-button, .search-button { padding: 8px 12px; font-size: 13px; }
    .lesson-title { font-size: 30px;  }
    .sidebar { width: 260px; }
   
    .lessons-list {
        max-height: 201px; /* تقليل الارتفاع في الشاشات القصيرة جداً */
    }
    .welcome-content, .settings-content, .test-content, .spell-content, .info-content {
        padding: 20px; margin: 10px;
    }
    
    .prep-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .grade-select-button {
        width: 100%;
    }
}

@media (max-width: 900px) and (min-width: 769px) {
    .prep-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}


@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
/* ==================================
   أنماط أيقونات التواصل الاجتماعي
   ================================== */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.social-icon.whatsapp { background-color: #25D366; }
.social-icon.telegram { background-color: #0088cc; }
.social-icon.facebook { background-color: #1877F2; }


/* تنسيق مجموعة الأزرار في القائمة */
.nav-buttons-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-height: 600px) {
    .lessons-list {
        max-height: 201px; /* تقليل الارتفاع في الشاشات القصيرة جداً */
    }
}