/* style.css - Final Code with All Enhancements */
:root {
    /* Color Palette */
    --primary-hue: 220; 
    --secondary-hue: 195; 
    --accent-hue: 45; 
    --success-hue: 130; 
    --danger-hue: 0;   
    --neutral-hue: 220; 

    /* Light Theme */
    --bg-color-light: hsl(var(--neutral-hue), 30%, 97%);
    --text-color-light: hsl(var(--neutral-hue), 20%, 15%);
    --card-bg-light: hsl(var(--neutral-hue), 25%, 100%);
    --card-border-light: hsl(var(--neutral-hue), 20%, 88%);
    --primary-color-light: hsl(var(--primary-hue), 75%, 55%);
    --primary-hover-light: hsl(var(--primary-hue), 75%, 50%);
    --secondary-color-light: hsl(var(--secondary-hue), 50%, 60%);
    --header-bg-light: hsl(var(--primary-hue), 70%, 50%);
    --header-text-light: hsl(0, 0%, 100%);
    --success-color-light: hsl(var(--success-hue), 60%, 45%);
    --danger-color-light: hsl(var(--danger-hue), 70%, 50%);
    --shadow-color-light: hsla(var(--neutral-hue), 20%, 0%, 0.08);
    --input-bg-light: hsl(var(--neutral-hue), 20%, 94%);
    --theme-toggle-icon-color-light: hsl(var(--accent-hue), 90%, 55%); 
    --theme-toggle-bg-light: hsl(var(--neutral-hue), 20%, 90%);


    /* Dark Theme */
    --bg-color-dark: hsl(var(--neutral-hue), 15%, 10%);
    --text-color-dark: hsl(var(--neutral-hue), 15%, 88%);
    --card-bg-dark: hsl(var(--neutral-hue), 15%, 16%);
    --card-border-dark: hsl(var(--neutral-hue), 15%, 28%);
    --primary-color-dark: hsl(var(--primary-hue), 70%, 65%);
    --primary-hover-dark: hsl(var(--primary-hue), 70%, 60%);
    --secondary-color-dark: hsl(var(--secondary-hue), 40%, 55%);
    --header-bg-dark: hsl(var(--neutral-hue), 15%, 12%);
    --header-text-dark: hsl(var(--neutral-hue), 15%, 92%);
    --success-color-dark: hsl(var(--success-hue), 55%, 58%);
    --danger-color-dark: hsl(var(--danger-hue), 65%, 62%);
    --shadow-color-dark: hsla(var(--neutral-hue), 0%, 0%, 0.2);
    --input-bg-dark: hsl(var(--neutral-hue), 15%, 22%);
    --theme-toggle-icon-color-dark: hsl(var(--primary-hue), 60%, 75%); 
    --theme-toggle-bg-dark: hsl(var(--neutral-hue), 15%, 25%);


    --feedback-correct-bg-light: hsl(var(--success-hue), 70%, 92%);
    --feedback-correct-text-light: hsl(var(--success-hue), 70%, 25%);
    --feedback-incorrect-bg-light: hsl(var(--danger-hue), 80%, 95%);
    --feedback-incorrect-text-light: hsl(var(--danger-hue), 70%, 35%);

    --feedback-correct-bg-dark: hsla(var(--success-hue), 50%, 40%, 0.35);
    --feedback-correct-text-dark: hsl(var(--success-hue), 50%, 80%);
    --feedback-incorrect-bg-dark: hsla(var(--danger-hue), 50%, 45%, 0.3);
    --feedback-incorrect-text-dark: hsl(var(--danger-hue), 50%, 85%);

    --font-family-main: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --transition-speed: 0.25s;
    --animation-speed-fast: 0.2s;
    --animation-speed-normal: 0.4s;
    --animation-speed-slow: 0.6s;
}

/* Loader styles */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--neutral-hue), 20%, 50%, 0.3);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--animation-speed-fast) ease, visibility var(--animation-speed-fast) ease;
}
.loader-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.loader-spinner {
    border: 5px solid var(--card-border);
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body {
    font-family: var(--font-family-main);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.75; 
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    font-weight: 400; 
}
body[data-theme="light"] {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color-light);
    --card-bg: var(--card-bg-light);
    --card-border: var(--card-border-light);
    --primary-color: var(--primary-color-light);
    --primary-hover: var(--primary-hover-light);
    --secondary-color: var(--secondary-color-light);
    --header-bg: var(--header-bg-light);
    --header-text: var(--header-text-light);
    --success-color: var(--success-color-light);
    --danger-color: var(--danger-color-light);
    --shadow-color: var(--shadow-color-light);
    --input-bg: var(--input-bg-light);
    --theme-toggle-icon-color: var(--theme-toggle-icon-color-light);
    --theme-toggle-bg: var(--theme-toggle-bg-light);
    --feedback-correct-bg: var(--feedback-correct-bg-light);
    --feedback-correct-text: var(--feedback-correct-text-light);
    --feedback-incorrect-bg: var(--feedback-incorrect-bg-light);
    --feedback-incorrect-text: var(--feedback-incorrect-text-light);
}
body[data-theme="dark"] {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
    --bg-color: var(--bg-color-dark);
    --text-color: var(--text-color-dark);
    --card-bg: var(--card-bg-dark);
    --card-border: var(--card-border-dark);
    --primary-color: var(--primary-color-dark);
    --primary-hover: var(--primary-hover-dark);
    --secondary-color: var(--secondary-color-dark);
    --header-bg: var(--header-bg-dark);
    --header-text: var(--header-text-dark);
    --success-color: var(--success-color-dark);
    --danger-color: var(--danger-color-dark);
    --shadow-color: var(--shadow-color-dark);
    --input-bg: var(--input-bg-dark);
    --theme-toggle-icon-color: var(--theme-toggle-icon-color-dark);
    --theme-toggle-bg: var(--theme-toggle-bg-dark);
    --feedback-correct-bg: var(--feedback-correct-bg-dark);
    --feedback-correct-text: var(--feedback-correct-text-dark);
    --feedback-incorrect-bg: var(--feedback-incorrect-bg-dark);
    --feedback-incorrect-text: var(--feedback-incorrect-text-dark);
}

.container {
    max-width: 960px; 
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 0.8rem 0; 
    box-shadow: 0 4px 12px var(--shadow-color); 
    position: sticky;
    top: 0;
    z-index: 1000; 
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 1.9em;
    font-weight: 800; 
    color: var(--header-text) !important; 
}
.logo .fa-atom {
    margin-right: 10px;
    color: hsl(var(--accent-hue), 80%, 60%); 
}

.theme-toggle {
    background-color: var(--theme-toggle-bg);
    border: none;
    color: var(--theme-toggle-icon-color); 
    width: 44px;  
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color var(--transition-speed) ease, 
                transform var(--animation-speed-fast) ease,
                box-shadow var(--transition-speed) ease;
    box-shadow: 0 2px 6px hsla(var(--neutral-hue), 20%, 0%, 0.15);
    overflow: hidden; 
}
.theme-toggle:hover {
    transform: scale(1.1); 
    box-shadow: 0 4px 10px hsla(var(--primary-hue), 70%, 60%, 0.3);
}
.theme-toggle:active {
    transform: scale(0.95);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    font-size: 20px; 
    position: absolute; 
    top: 50%;
    left: 50%;
    transition: opacity var(--animation-speed-slow) cubic-bezier(0.22, 1, 0.36, 1), 
                transform var(--animation-speed-slow) cubic-bezier(0.34, 1.56, 0.64, 1); 
}
body[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
body[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-180deg) scale(0.3); 
}
body[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg) scale(0.3); 
}
body[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

main {
    padding-top: 40px;
    padding-bottom: 40px;
}
.page-section {
    padding: 30px 35px;
    margin-bottom: 35px;
    border-radius: var(--border-radius-lg); 
    background-color: var(--card-bg);
    box-shadow: 0 8px 25px var(--shadow-color); 
    border: 1px solid var(--card-border);
    animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.section-header {
    text-align: center;
    margin-bottom: 30px;
}
.section-header h1, .section-header h2 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}
.section-header .icon-title {
    margin-left: 10px; 
    opacity: 0.8;
}
.section-header p {
    font-size: 1.05em;
    color: var(--text-color);
    opacity: 0.8;
    max-width: 700px;
    margin: 0 auto;
}
.subject-name-emphasis {
    color: hsl(var(--accent-hue), 70%, 50%);
    font-weight: 800;
}
.hidden-section { display: none !important; }
.active-section { display: block !important; }
h1 { font-size: 2.4em; }
h2 { font-size: 2em; }

.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 30px;
}
.subject-card {
    background-color: var(--card-bg); 
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-md);
    padding: 30px 25px;
    text-align: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 15px var(--shadow-color);
}
.subject-card:hover {
    transform: translateY(-8px) scale(1.02); 
    box-shadow: 0 12px 30px hsla(var(--primary-hue), 50%, 50%, 0.15); 
}
.subject-card .subject-icon {
    font-size: 3em; 
    color: var(--primary-color);
    margin-bottom: 15px;
    transition: transform var(--transition-speed) ease;
}
.subject-card:hover .subject-icon {
    transform: scale(1.1) rotate(-5deg);
}
.subject-card h3 {
    font-size: 1.4em;
    color: var(--text-color);
    margin-bottom: 10px;
    font-weight: 700;
}
.subject-card p {
    font-size: 0.95em;
    opacity: 0.75;
    min-height: 45px;
}

.levels-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; 
    margin-top: 10px;
}
.level-btn {
    background-image: linear-gradient(45deg, var(--primary-color), hsl(var(--primary-hue), 75%, 65%));
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: var(--border-radius-md);
    font-size: 1.15em;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-image var(--transition-speed);
    box-shadow: 0 4px 15px hsla(var(--primary-hue), 50%, 50%, 0.2);
    letter-spacing: 0.5px;
}
.level-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px hsla(var(--primary-hue), 50%, 50%, 0.3);
    background-image: linear-gradient(45deg, hsl(var(--primary-hue), 75%, 50%), hsl(var(--primary-hue), 75%, 60%));
}

.quiz-progress-bar-container {
    width: 100%;
    height: 12px;
    background-color: var(--card-border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.quiz-progress-bar {
    height: 100%;
    width: 0%; 
    background-image: linear-gradient(to left, var(--success-color), hsl(var(--success-hue), 60%, 55%));
    border-radius: 6px;
    transition: width var(--animation-speed-normal) ease-in-out;
}
.quiz-info-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 0.95em;
    color: var(--text-color);
    opacity: 0.85;
    padding: 0 5px;
    font-weight: 600;
}
.lives-container {
    display: flex;
    align-items: center;
    gap: 5px; 
}
.life-heart {
    font-size: 1.4em; 
    color: hsl(var(--danger-hue), 70%, 55%); 
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease, color 0.3s ease; 
}
.life-heart.lost {
    color: var(--card-border); 
    transform: scale(0.8) rotate(-25deg) translateY(5px); 
    opacity: 0.5;
}

.modern-card {
    padding: 30px;
    background-color: var(--card-bg); 
    border-radius: var(--border-radius-md);
    margin-bottom: 25px;
    border: 1px solid var(--card-border);
}
.question-text-styled {
    font-size: 1.5em; 
    font-weight: 700;
    margin-bottom: 30px;
    text-align: right;
    line-height: 1.6;
    color: var(--text-color);
}
.answer-options-styled {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}
.answer-btn {
    width: 100%;
    padding: 18px 22px;
    background-color: var(--input-bg); 
    color: var(--text-color);
    border: 2px solid transparent; 
    border-radius: var(--border-radius-sm);
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    text-align: right;
    transition: all var(--transition-speed) ease;
    box-shadow: 0 2px 5px var(--shadow-color);
}
.answer-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    background-color: var(--card-bg); 
    transform: translateX(-5px); 
    box-shadow: 3px 3px 10px var(--shadow-color);
}
.answer-btn.selected {
    border-color: var(--primary-color) !important;
    background-color: hsla(var(--primary-hue), 70%, 60%, 0.1) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 0 10px hsla(var(--primary-hue), 70%, 60%, 0.2);
}
.answer-btn.correct {
    background-color: hsla(var(--success-hue), 60%, 50%, 0.15) !important;
    border-color: var(--success-color) !important;
    color: var(--success-color) !important;
    box-shadow: 0 0 10px hsla(var(--success-hue), 60%, 50%, 0.2);
}
.answer-btn.incorrect {
    background-color: hsla(var(--danger-hue), 70%, 50%, 0.1) !important;
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
    box-shadow: 0 0 10px hsla(var(--danger-hue), 70%, 50%, 0.2);
}
.answer-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}
#answerOptions input[type="text"] {
    width: 100%;
    padding: 18px 22px;
    border: 2px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    font-size: 1.05em;
    background-color: var(--input-bg);
    color: var(--text-color);
    box-sizing: border-box;
    font-family: var(--font-family-main);
    font-weight: 600;
    box-shadow: 0 2px 5px var(--shadow-color);
}
#answerOptions input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px hsla(var(--primary-hue), 70%, 60%, 0.2);
}
#answerOptions input[type="text"].correct {
    border-color: var(--success-color) !important;
    background-color: hsla(var(--success-hue), 60%, 50%, 0.1) !important;
}
#answerOptions input[type="text"].incorrect {
    border-color: var(--danger-color) !important;
    background-color: hsla(var(--danger-hue), 70%, 50%, 0.1) !important;
}

.feedback {
    padding: 0; /* سيبدأ بدون حشوة (باستثناء الجانبية إذا أردت إضافتها هنا) */
    max-height: 0; /* سيبدأ بارتفاع صفر ليكون مخفيًا */
    opacity: 0;
    border-radius: var(--border-radius-sm);
    margin-top: 25px; /* يمكنك تعديل هذه القيمة حسب رغبتك */
    font-weight: 600;
    text-align: center;
    font-size: 1.05em;
    line-height: 1.6;
    overflow: hidden; /* ابدأ بـ hidden لمنع ظهور أي شيء قبل الانتقال */
    transition: opacity var(--animation-speed-fast) ease,
                transform var(--animation-speed-fast) ease, /* إذا كنت تستخدم transform */
                max-height var(--animation-speed-normal) ease,
                padding var(--animation-speed-normal) ease; /* انتقل للحشوة كلها */
    
    /* إضافة حشوة جانبية ثابتة إذا أردت، حتى عندما يكون مخفياً بدون .visible */
    /* padding-left: 15px; */
    /* padding-right: 15px; */
}

.feedback.visible {
    padding: 18px; /* الحشوة الكاملة عند الظهور (علوية، سفلية، جانبية إذا لم تضفها أعلاه) */
    max-height: 250px; /* الارتفاع الأقصى الذي يمكن أن يصل إليه المحتوى قبل ظهور شريط التمرير */
                       /* إذا تجاوز المحتوى هذا الارتفاع، سيظهر شريط التمرير بسبب overflow-y التالي */
    opacity: 1;
    transform: translateY(0); /* إذا كنت تستخدم transform للظهور */
    overflow-y: auto;     /* مكّن التمرير العمودي فقط عندما يكون المحتوى أطول من max-height */
}

/* كلاسات الألوان (يجب أن تكون لديك هذه أو ما شابهها بالفعل لتطبيق ألوان الخلفية والنص) */
.feedback.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    /* ... أي أنماط ظل أو حدود إضافية ... */
}

.feedback.incorrect {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    /* ... أي أنماط ظل أو حدود إضافية ... */
}

/* (تأكد أن متغيرات الألوان معرفة: --feedback-correct-bg, --feedback-incorrect-bg, إلخ.) */
.feedback.correct {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    box-shadow: 0 3px 10px hsla(var(--success-hue), 60%, 50%, 0.15);
}
.feedback.incorrect {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    box-shadow: 0 3px 10px hsla(var(--danger-hue), 70%, 50%, 0.15);
}
.feedback strong {
    display: block;
    margin-top: 10px;
    font-weight: 400; 
    opacity: 0.9;
    font-size: 0.95em;
}
.feedback ul {
    list-style: none;
    padding-right: 0; 
    text-align: right;
    margin-top: 8px;
}
.feedback ul li {
    margin-bottom: 4px;
    font-size: 0.9em;
}
.feedback ul li .fas { 
    margin: 0 8px;
    color: var(--primary-color);
}

/* Matching Question Styles */
.matching-question-container {
    display: flex;
    justify-content: space-around; 
    gap: 20px; 
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px dashed var(--card-border);
    border-radius: var(--border-radius-sm);
}
.matching-column {
    display: flex;
    flex-direction: column;
    gap: 10px; 
    flex: 1; 
    padding: 10px;
    background-color: var(--input-bg); 
    border-radius: var(--border-radius-sm);
}
.matching-item {
    padding: 12px 18px;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 2px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    font-weight: 600;
    text-align: center; 
    box-shadow: 0 1px 3px var(--shadow-color);
}
.matching-item:hover:not(:disabled) {
    border-color: var(--primary-color);
    transform: scale(1.03);
}
.matching-item.selected-match-item {
    border-color: var(--primary-color) !important;
    background-color: hsla(var(--primary-hue), 70%, 60%, 0.2) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 0 8px hsla(var(--primary-hue), 70%, 60%, 0.3);
}
.matching-item.matched-item { 
    opacity: 0.6;
    background-color: var(--secondary-color) !important;
    color: white !important;
    border-color: var(--secondary-color) !important;
    cursor: not-allowed;
}
.matching-item.matched-item:hover {
    transform: none; 
}
.matching-item.correct-match {
    border-color: var(--success-color) !important;
    background-color: hsla(var(--success-hue), 60%, 50%, 0.2) !important;
    color: var(--success-color) !important;
    opacity: 1 !important; 
}
.matching-item.incorrect-match {
    border-color: var(--danger-color) !important;
    background-color: hsla(var(--danger-hue), 70%, 50%, 0.15) !important;
    color: var(--danger-color) !important;
    opacity: 1 !important;
}
#confirmFillBlankBtn:not(.hidden-section) {
    display: inline-flex !important; 
}

/* Ordering Question Styles */
.ordering-question-container {
    display: flex;
    flex-direction: column; 
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--input-bg);
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
}
.ordering-item {
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 15px 20px;
    border: 2px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    cursor: grab; 
    font-weight: 600;
    box-shadow: 0 2px 4px var(--shadow-color);
    transition: background-color var(--transition-speed) ease, 
                border-color var(--transition-speed) ease,
                transform var(--animation-speed-fast) ease,
                box-shadow var(--transition-speed) ease;
    display: flex; 
    align-items: center;
}
.ordering-item:active {
    cursor: grabbing;
}
.ordering-item:hover:not(.dragging):not(:disabled) {
    border-color: var(--primary-color);
    transform: scale(1.02);
}
.ordering-item .drag-handle {
    margin-left: 10px; 
    color: var(--secondary-color);
    cursor: grab;
}
.ordering-item:active .drag-handle {
    cursor: grabbing;
}
.ordering-item.dragging {
    opacity: 0.5;
    background-color: hsla(var(--primary-hue), 60%, 70%, 0.3);
    border-style: dashed;
    box-shadow: none;
    transform: scale(0.98);
}
.ordering-item.drag-over {
    border-bottom: 3px solid var(--primary-color); 
}
.ordering-item:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}
.ordering-item.correct-order-item { 
    border-color: var(--success-color) !important;
    background-color: hsla(var(--success-hue), 70%, 50%, 0.1) !important;
}
.ordering-item.incorrect-order-item { 
    border-color: var(--danger-color) !important;
    background-color: hsla(var(--danger-hue), 70%, 50%, 0.08) !important;
}
.ordering-item.touch-selected-for-swap {
    outline: 3px solid hsl(var(--accent-hue), 80%, 60%); 
    outline-offset: 2px;
}


.animation-feedback-container {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    overflow: hidden; 
    z-index: 10; 
}
.feedback-particle {
    position: absolute;
    border-radius: 50%; 
    opacity: 0;
    animation: floatUp 1.5s ease-out forwards;
}
.particle-correct {
    background-color: hsla(var(--success-hue), 70%, 60%, 0.7);
    width: 10px;
    height: 10px;
}
.particle-correct.star::before {
    content: '⭐'; 
    font-size: 18px; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent; 
    background-clip: text;
    -webkit-background-clip: text;
}
.particle-incorrect {
    background-color: hsla(var(--danger-hue), 70%, 60%, 0.6);
    width: 12px;
    height: 12px;
}
.particle-incorrect.cross::before {
    content: '✕'; 
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: hsl(var(--danger-hue), 70%, 50%);
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(0.5); opacity: 1; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-150px) scale(1.2); opacity: 0; }
}
#questionArea.modern-card {
    position: relative; 
}
.animate-question-change {
    animation: questionTransition 0.4s ease-in-out;
}
@keyframes questionTransition {
    0% { opacity: 0.3; transform: scale(0.95) translateX(-20px); } 
    100% { opacity: 1; transform: scale(1) translateX(0); }
}

.quiz-actions {
    display: flex;
    justify-content: center; 
    gap: 20px; 
    margin-top: 30px; 
}
.cta-button {
    padding: 14px 32px; 
    border: none;
    border-radius: var(--border-radius-md); 
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    box-shadow: 0 4px 15px var(--shadow-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; 
    text-decoration: none !important; 
    letter-spacing: 0.5px;
}
.cta-button:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px var(--shadow-color);
}
.cta-button:active:not(:disabled) {
    transform: translateY(0px) scale(1);
    box-shadow: 0 4px 10px var(--shadow-color);
}
.cta-button.primary-cta {
    background-color: var(--primary-color);
    color: white;
}
.cta-button.primary-cta:hover:not(:disabled) {
    background-color: var(--primary-hover);
}
.cta-button.success-cta {
    background-color: var(--success-color);
    color: white;
}
.cta-button.success-cta:hover:not(:disabled) {
    background-color: hsl(var(--success-hue), 60%, 40%);
}
.cta-button.secondary-cta { 
    background-color: var(--secondary-color);
    color: white;
}
.cta-button.secondary-cta:hover:not(:disabled) {
    background-color: hsl(var(--secondary-hue), 50%, 50%);
}
.cta-button:disabled {
    background-color: var(--secondary-color);
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.stylish-btn {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 12px 25px; 
    border-radius: var(--border-radius-md);
    font-size: 1em; 
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    margin-bottom: 0; 
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 10px var(--shadow-color);
    text-decoration: none !important;
}
.stylish-btn:hover {
    background-color: hsl(var(--secondary-hue), 50%, 50%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px var(--shadow-color);
}

.result-summary {
    text-align: center;
}
#resultPageHeader {
    color: var(--primary-color); 
}
#resultPageHeader .icon-title {
    color: hsl(var(--accent-hue), 80%, 55%);
}
.result-subject-name, .result-level-number {
    color: hsl(var(--accent-hue), 70%, 50%);
    font-weight: 800;
}
.final-score-text {
    font-size: 1.4em;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--text-color); 
}
.score-emphasis {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.2em;
}
.score-percentage-visual {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 25px auto; 
}
.progress-ring-circle, .progress-ring-circle-bg {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    transform: rotate(-90deg); 
    transform-origin: 50% 50%;
}
.progress-ring-circle-bg {
    stroke: var(--card-border); 
}
.progress-ring-circle {
    stroke: var(--success-color); 
    stroke-linecap: round; 
}
.percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8em;
    font-weight: 800;
    color: var(--primary-color);
}
.result-feedback-styled {
    font-size: 1.15em; 
    border-width: 0; 
    padding: 15px 0; 
    background-color: transparent !important; 
    line-height: 1.7;
}
.result-feedback-styled i {
    margin-right: 8px;
    font-size: 1.1em;
}
.lives-feedback-message { 
    font-weight: 600;
    color: var(--danger-color);
    margin-top: 10px;
    font-size: 1.1em;
}
.result-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 35px; 
    flex-wrap: wrap;
}
#nextLevelBtn.hidden-section {
    display: none !important;
}
.review-answers-container {
    margin-top: 20px;
}
.review-question-item {
    background-color: var(--input-bg); 
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--card-border);
    box-shadow: 0 3px 8px var(--shadow-color);
}
.review-question-item h4 { 
    font-size: 1.1em;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 8px;
}
.review-question-item .review-q-text {
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.5;
}
.review-question-item .review-user-answer,
.review-question-item .review-correct-answer {
    margin-bottom: 8px;
    font-size: 0.95em;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
}
.review-question-item .review-user-answer strong,
.review-question-item .review-correct-answer strong {
    font-weight: 700;
    margin-left: 5px; 
}
.review-question-item .review-user-answer.user-correct {
    background-color: hsla(var(--success-hue), 70%, 50%, 0.15);
    border-left: 4px solid var(--success-color); 
    border-right: 4px solid var(--success-color);
}
.review-question-item .review-user-answer.user-incorrect {
    background-color: hsla(var(--danger-hue), 70%, 50%, 0.1);
    border-left: 4px solid var(--danger-color); 
    border-right: 4px solid var(--danger-color);
}
.review-question-item .review-correct-answer {
    background-color: hsla(var(--success-hue), 70%, 50%, 0.1);
     border-left: 4px solid var(--success-color); 
    border-right: 4px solid var(--success-color);
}
.review-question-item .review-explanation {
    margin-top: 12px;
    font-size: 0.9em;
    opacity: 0.85;
    padding-top: 10px;
    border-top: 1px dashed var(--card-border);
}
.review-question-item .review-explanation strong {
    font-weight: 600;
}
#backToResultsBtn { 
    margin: 20px auto 0; 
    display: inline-flex !important; 
}


footer {
    background-color: var(--header-bg); 
    color: var(--header-text);
    text-align: center;
    padding: 1.8rem 0;
    margin-top: 40px;
    font-size: 0.9em;
    opacity: 0.9;
    border-top: 4px solid var(--primary-color); 
}

@media (max-width: 768px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.7em; }
    .page-section { padding: 25px 20px; }
    .cta-button, .level-btn, .stylish-btn {
        font-size: 1em; 
        padding: 10px 20px;
    }
    .subjects-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
    .result-actions .cta-button, .result-actions .stylish-btn {
        width: 100%; 
        margin-bottom: 10px;
    }
    .result-actions .cta-button:last-child, .result-actions .stylish-btn:last-child {
        margin-bottom: 0;
    }
    .matching-question-container {
        flex-direction: column; 
    }
}
@media (max-width: 480px) {
    .logo { font-size: 1.6em; }
    .theme-toggle { width: 40px; height: 40px; font-size: 1em;}
    .subjects-grid { grid-template-columns: 1fr; }
    .question-text-styled { font-size: 1.3em; }
    .answer-btn, #answerOptions input[type="text"], .matching-item, .ordering-item { font-size: 1em; padding: 14px 18px; }
    .final-score-text { font-size: 1.2em; }
    .percentage-text { font-size: 1.5em; }
}
/* style.css - Additions for Game Over UI and Enhanced Lives */

/* ... (جميع الأنماط السابقة تبقى كما هي) ... */


/* Enhanced Lives Container & Hearts */
.lives-container {
    display: flex;
    align-items: center;
    gap: 6px; /* مسافة بين القلوب */
    filter: drop-shadow(0 1px 1px hsla(var(--neutral-hue), 30%, 0%, 0.2)); /* ظل خفيف للقلوب */
}

.life-heart {
    font-size: 1.6em; /* حجم أيقونة القلب أكبر قليلاً */
    color: hsl(var(--danger-hue), 80%, 58%); /* لون القلب الأساسي (أحمر زاهي) */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                opacity 0.4s ease, 
                color 0.3s ease;
    animation: pulseHeart 2s infinite ease-in-out; /* أنيميشن نبض للقلوب المتبقية */
}

@keyframes pulseHeart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.life-heart.lost {
    color: hsl(var(--neutral-hue), 20%, 70%); /* لون القلب المفقود (رمادي باهت أكثر) */
    transform: scale(0.7) rotate(-30deg) translateY(8px); /* تأثير انكسار وسقوط أوضح */
    opacity: 0.4;
    animation: none; /* إيقاف أنيميشن النبض للقلب المفقود */
}


/* Game Over Overlay Styles */
.game-over-overlay {
    position: fixed; /* يغطي الشاشة كلها */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--neutral-hue), 20%, 10%, 0.8); /* خلفية داكنة شبه شفافة */
    backdrop-filter: blur(8px); /* تأثير ضبابي للخلفية */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500; /* فوق محتوى الكويز ولكن تحت اللودر إذا كان ظاهرًا */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--animation-speed-normal) ease, visibility var(--animation-speed-normal) ease;
    animation: fadeInOverlay 0.5s ease-out forwards; /* أنيميشن للظهور */
}

.game-over-overlay.visible { /* لإظهار الواجهة عبر JS */
    opacity: 1;
    visibility: visible;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

.game-over-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 40px 50px;
    border-radius: var(--border-radius-lg);
    text-align: center;
    box-shadow: 0 10px 30px hsla(var(--neutral-hue), 20%, 0%, 0.3);
    transform: scale(0.9);
    opacity: 0;
    animation: popInModal 0.5s 0.2s ease-out forwards; /* أنيميشن لظهور المحتوى بعد الواجهة */
    max-width: 500px;
    width: 90%;
}

@keyframes popInModal {
    0% { transform: scale(0.8) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.broken-heart-icon {
    font-size: 5em; /* أيقونة قلب مكسور كبيرة */
    color: var(--danger-color);
    margin-bottom: 20px;
    animation: shakeHeart 0.8s cubic-bezier(.36,.07,.19,.97) both;
    display: block; /* لضمان توسط الهامش */
}

@keyframes shakeHeart {
  10%, 90% { transform: translate3d(-1px, 0, 0) scale(1.05); }
  20%, 80% { transform: translate3d(2px, 0, 0) scale(1.05); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0) scale(1.05); }
  40%, 60% { transform: translate3d(3px, 0, 0) scale(1.05); }
}


.game-over-content h2 {
    font-size: 2.2em;
    color: var(--danger-color); /* لون عنوان الخسارة */
    margin-bottom: 15px;
}

.game-over-content p {
    font-size: 1.1em;
    opacity: 0.85;
    margin-bottom: 30px;
    line-height: 1.6;
}

.game-over-actions {
    display: flex;
    flex-direction: column; /* ترتيب الأزرار عموديًا */
    gap: 15px;
    align-items: center; /* توسط الأزرار */
}

.game-over-actions .cta-button,
.game-over-actions .stylish-btn {
    width: 100%; /* جعل الأزرار تملأ العرض المتاح في الحاوية */
    max-width: 300px; /* حد أقصى لعرض الأزرار */
    margin-bottom: 0; /* إزالة الهامش السفلي إذا كان موروثًا */
}

/* تعديل طفيف على .feedback.visible لضمان الانتقال السلس */
.feedback.visible { 
    padding: 18px; 
    max-height: 250px; /* تأكد من أنه كافٍ */
    opacity: 1;
    transform: translateY(0);
    /* transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, padding 0.3s ease; */ /* مكرر */
}
/* style.css - Additions for Report Question Feature */

/* ... (جميع الأنماط السابقة تبقى كما هي) ... */

/* Report Question Button */
.report-question-btn {
    position: absolute;
    top: 15px;
    left: 15px; /* لـ RTL، ستكون على اليسار */
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    padding: 6px 10px;
    font-size: 0.85em;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-speed) ease;
    opacity: 0.7;
}
.report-question-btn:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background-color: hsla(var(--danger-hue), 70%, 50%, 0.05);
    opacity: 1;
    transform: translateY(-1px);
}
.report-question-btn i {
    font-size: 0.9em;
}

/* Report Modal Styles */
.report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--neutral-hue), 20%, 10%, 0.65); /* تعتيم أكثر للخلفية */
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1600; /* فوق واجهة الخسارة */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--animation-speed-normal) ease, visibility var(--animation-speed-normal) ease;
}
.report-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.report-modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 30px 35px;
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 30px hsla(var(--neutral-hue), 20%, 0%, 0.25);
    width: 100%;
    max-width: 550px; /* عرض مناسب للنموذج */
    position: relative;
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    animation: slideInModal 0.4s 0.1s ease-out forwards;
}

@keyframes slideInModal {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.report-modal-content h3 {
    color: var(--primary-color);
    font-size: 1.6em;
    font-weight: var(--font-weight-bold);
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}
.report-modal-content h3 i {
    margin-left: 8px;
    color: var(--accent-hue, var(--primary-color)); /* لون مميز للأيقونة */
}

.report-modal-content p {
    font-size: 1em;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: right; /* تأكد من المحاذاة */
    line-height: 1.6;
}

.close-modal-btn {
    position: absolute;
    top: 10px;
    left: 15px; /* لـ RTL */
    background: transparent;
    border: none;
    font-size: 2.2em;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
}
.close-modal-btn:hover {
    color: var(--danger-color);
    transform: rotate(90deg);
}

#reportForm .form-group {
    margin-bottom: 20px;
    text-align: right;
}
#reportForm label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 0.95em;
}
#reportForm select,
#reportForm textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--input-bg);
    color: var(--text-color);
    font-family: var(--font-family-main);
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
#reportForm select:focus,
#reportForm textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px hsla(var(--primary-hue), 70%, 60%, 0.2);
}
#reportForm textarea {
    resize: vertical; /* السماح بتغيير الحجم رأسيًا فقط */
    min-height: 100px;
}

.report-question-info-preview {
    font-size: 0.9em;
    background-color: var(--input-bg);
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    border: 1px dashed var(--card-border);
    color: var(--text-secondary);
    margin-bottom: 25px;
    line-height: 1.7;
}
.report-question-info-preview strong {
    color: var(--text-color);
    font-weight: var(--font-weight-semibold);
}

.report-submit-btn {
    width: 100%; /* زر إرسال بعرض كامل */
    margin-top: 10px;
}
.report-submit-btn i {
    transform: scaleX(-1); /* عكس أيقونة الطائرة الورقية لـ RTL */
}
/* style.css - Additions for Winning Shark Character */

/* ... (جميع الأنماط السابقة تبقى كما هي) ... */

/* Winning Shark Character Styles */
.winning-shark-container {
    position: fixed; /* أو absolute إذا كنت تريده داخل result-summary فقط */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1700; /* فوق محتوى النتائج ولكن تحت اللودر إذا كان ظاهرًا */
    pointer-events: none; /* للسماح بالتفاعل مع ما خلفه بعد اختفائه */
    opacity: 0;
    visibility: hidden;
    /* transition: opacity var(--animation-speed-normal) ease, visibility var(--animation-speed-normal) ease; */ 
    /* الأنيميشن سيتم التحكم به بشكل أدق أدناه */
}
.winning-shark-container.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* السماح بالتفاعل إذا كان هناك زر إغلاق مثلاً */
    animation: fadeInSharkContainer 0.3s ease-out;
}
@keyframes fadeInSharkContainer {
    from { opacity: 0; }
    to { opacity: 1; }
}

.shark-character {
    position: relative;
    width: 200px; /* يمكنك تعديل حجم القرش */
    height: 150px;
    transform: scale(0); /* يبدأ صغيرًا */
    opacity: 0;
    animation: popInShark 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.2s forwards, /* يظهر بعد ظهور الحاوية */
                 swimShark 3s ease-in-out 1s infinite alternate; /* حركة سباحة بعد الظهور */
}
.winning-shark-container.visible .shark-character.disappearing {
    animation: popOutShark 0.5s ease-in forwards;
}


@keyframes popInShark {
    0% { transform: scale(0.2) rotate(-15deg); opacity: 0; }
    70% { transform: scale(1.1) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes popOutShark {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    30% { transform: scale(1.1) rotate(-5deg); opacity: 1;}
    100% { transform: scale(0) rotate(15deg); opacity: 0; }
}
@keyframes swimShark {
    0% { transform: translateY(0px) translateX(0px) rotate(-2deg); }
    50% { transform: translateY(-10px) translateX(5px) rotate(2deg); }
    100% { transform: translateY(0px) translateX(0px) rotate(-2deg); }
}


.shark-body {
    width: 100%;
    height: 100px; /* جسم القرش الرئيسي */
    background-color: hsl(var(--primary-hue), 60%, 65%); /* لون جسم القرش */
    border-radius: 100px 100px 60px 60px / 60px 60px 40px 40px; /* شكل بيضاوي لجسم القرش */
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: inset 0 -10px 15px hsla(var(--primary-hue), 60%, 50%, 0.7),
                0 5px 10px hsla(var(--neutral-hue), 30%, 0%, 0.2);
}

.shark-fin-top {
    width: 50px;
    height: 60px;
    background-color: hsl(var(--primary-hue), 60%, 60%); /* أغمق قليلاً */
    position: absolute;
    top: -40px; /* فوق الجسم */
    left: 50%;
    transform: translateX(-50%) rotate(5deg);
    border-radius: 30px 30px 0 0 / 50px 50px 0 0; /* شكل زعنفة */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* لجعلها مثلثة */
}

.shark-eye {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    border: 3px solid hsl(var(--primary-hue), 60%, 50%);
}
.shark-eye::before { /* بؤبؤ العين */
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: black;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: eyeBlink 5s infinite 1s;
}
@keyframes eyeBlink {
    0%, 90%, 100% { transform: translate(-50%, -50%) scaleY(1); }
    95% { transform: translate(-50%, -50%) scaleY(0.1); }
}

.left-eye { left: 45px; }
.right-eye { right: 45px; }

.shark-smile {
    width: 60px;
    height: 30px;
    border: 4px solid hsl(var(--neutral-hue), 15%, 25%); /* لون أغمق للفم */
    border-color: transparent transparent hsl(var(--neutral-hue), 15%, 25%) transparent;
    border-radius: 0 0 60px 60px / 0 0 30px 30px; /* نصف دائرة للابتسامة */
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}
body[data-theme="dark"] .shark-smile {
    border-color: transparent transparent hsl(var(--neutral-hue), 15%, 75%) transparent;
}


.shark-fin-side {
    width: 30px;
    height: 45px;
    background-color: hsl(var(--primary-hue), 60%, 60%);
    position: absolute;
    bottom: 15px;
    border-radius: 20px 0 0 20px / 30px 0 0 30px; /* شكل زعنفة جانبية */
}
.left-fin {
    left: 15px;
    transform: rotate(-25deg);
    animation: finWaveLeft 1.5s ease-in-out infinite alternate;
}
.right-fin {
    right: 15px;
    transform: rotate(25deg) scaleX(-1); /* عكس الزعنفة الأخرى */
    animation: finWaveRight 1.5s ease-in-out infinite alternate;
}
@keyframes finWaveLeft {
    from { transform: rotate(-25deg); }
    to { transform: rotate(-35deg) translateY(3px); }
}
@keyframes finWaveRight {
    from { transform: rotate(25deg) scaleX(-1); }
    to { transform: rotate(35deg) scaleX(-1) translateY(3px); }
}


.congrats-bubble {
    position: absolute;
    bottom: 130px; /* فوق القرش */
    left: 50%;
    transform: translateX(-50%) scale(0);
    background-color: var(--card-bg);
    color: var(--success-color);
    padding: 12px 20px;
    border-radius: var(--border-radius-md);
    font-size: 1.3em;
    font-weight: var(--font-weight-bold);
    box-shadow: 0 4px 10px var(--shadow-color);
    white-space: nowrap;
    opacity: 0;
    animation: bubblePopIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.8s forwards; /* تظهر بعد القرش */
}
.winning-shark-container.visible .congrats-bubble.disappearing {
    animation: bubblePopOut 0.4s ease-in forwards;
}

.congrats-bubble::after { /* ذيل فقاعة الكلام */
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--card-bg); /* نفس لون خلفية الفقاعة */
}

@keyframes bubblePopIn {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    70% { transform: translateX(-50%) scale(1.1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
@keyframes bubblePopOut {
    0% { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.5); opacity: 0; }
}
/* style.css - Additions for Division Selection */

/* ... (جميع الأنماط السابقة تبقى كما هي) ... */

.divisions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.division-btn {
    background-image: linear-gradient(45deg, var(--secondary-color), hsl(var(--secondary-hue), 60%, 65%));
    color: white;
    border: none;
    padding: 18px 35px;
    border-radius: var(--border-radius-md);
    font-size: 1.2em;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    box-shadow: 0 4px 15px hsla(var(--secondary-hue), 40%, 50%, 0.2);
    min-width: 250px; /* لضمان عرض جيد لأسماء الشعب */
    text-align: center;
}

.division-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px hsla(var(--secondary-hue), 40%, 50%, 0.3);
}

.small-cta { /* كلاس لزر تغيير الشعبة */
    padding: 10px 20px !important;
    font-size: 0.95em !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: none !important; /* إلغاء uppercase إذا كان مطبقًا على cta-button */
}
/* style.css - Enhanced Animated Graduation Cap Logo & Logo Positioning */

/* ... (جميع الأنماط السابقة الأخرى تبقى كما هي) ... */

.logo { 
    display: flex;
    align-items: center;
    font-size: 2em; 
    font-weight: var(--font-weight-extrabold); 
    color: var(--header-text) !important; 
    letter-spacing: -0.6px; 
    cursor: pointer; 
    margin-right: 15px; /*  <-- تعديل: إضافة هامش يميني لإبعاد الشعار عن الحافة */
    /* يمكنك زيادة هذه القيمة إذا أردت إبعادًا أكبر */
    position: relative; /* للسماح بتأثيرات إضافية إذا أردنا */
}

.logo .logo-icon-main { /* أيقونة قبعة التخرج */
    font-size: 0.8em; 
    margin-right: 8px; /* تقليل المسافة قليلاً بين النص والأيقونة إذا لزم الأمر */
    color: hsl(var(--accent-hue), 90%, 60%); 
    display: inline-block; 
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275), /* حركة ارتدادية أكثر وضوحًا */
                color 0.4s ease,
                text-shadow 0.4s ease; /* إضافة انتقال للظل */
    will-change: transform; /* تحسين أداء الأنيميشن */
}

/* حركة القبعة عند المرور على الشعار بأكمله - أكثر تميزًا */
.logo:hover .logo-icon-main {
    /* حركة رمي أكثر ديناميكية: ترتفع، تدور مرتين، تميل قليلاً، ثم تعود */
    transform: translateY(-18px) rotate(720deg) scale(1.25) skewX(-5deg); 
    color: hsl(var(--accent-hue), 100%, 65%); /* لون أكثر إشراقًا وتوهجًا */
    text-shadow: 0 0 8px hsla(var(--accent-hue), 100%, 60%, 0.5), /* توهج خفيف */
                 0 0 15px hsla(var(--accent-hue), 100%, 55%, 0.3);
}

/* يمكنك إضافة تأثير بسيط على النص "مراجعتي" عند المرور أيضًا (اختياري) */
.logo:hover {
    /* مثال: تغيير طفيف في لون النص أو إضافة ظل خفيف لكلمة مراجعتي */
    /* color: hsl(var(--neutral-hue), 0%, 95%) !important; */
}

/* إزالة أي أنماط شعار قديمة أخرى تأكد من أنها محذوفة */
/* .logo-sparkle-icon, .logo-brain-icon, .logo-animated-book, .logo-pencil-mark, .logo-key-icon { display: none !important; } */

/* style.css - Additions for New Landing Page & Under Construction Page */

/* ... (جميع الأنماط السابقة تبقى كما هي) ... */

/* General Helper Class */
.container-fluid.no-padding {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.container-fluid.no-padding > .page-section,
.container-fluid.no-padding > section { /* For hero section */
    border-radius: 0; /* Full width sections might not need border radius */
    margin-bottom: 0; /* Remove bottom margin for sections that are part of a full-width layout */
}


/* Landing Page - Hero Section */
.hero-section-landing {
    background: linear-gradient(135deg, hsla(var(--primary-hue), 70%, 55%, 0.95), hsla(var(--primary-hue), 80%, 45%, 0.9)), 
                url('https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80') no-repeat center center/cover; /* يمكنك تغيير الصورة */
    color: var(--header-text);
    padding: 80px 20px; /* حشوة كبيرة */
    text-align: center;
    min-height: 60vh; /* ارتفاع مناسب */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* لطبقة تعتيم إذا أردت */
}
.hero-section-landing::before { /* طبقة تعتيم طفيفة لتحسين قراءة النص فوق الصورة */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2); /* تعتيم بسيط */
    z-index: 1;
}
.hero-section-landing .container { /* لتوسيط المحتوى داخل قسم Hero */
    position: relative;
    z-index: 2;
}

.hero-section-landing h1 {
    font-size: 3.2em; /* خط كبير جدًا للعنوان الرئيسي */
    font-weight: var(--font-weight-extrabold);
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px hsla(var(--neutral-hue), 20%, 0%, 0.3);
    color: var(--header-text); /* ضمان لون النص فوق الخلفية */
    line-height: 1.2;
}

.hero-section-landing p {
    font-size: 1.3em;
    margin-bottom: 35px;
    max-width: 700px;
    line-height: 1.7;
    opacity: 0.95;
    color: hsl(var(--neutral-hue), 20%, 90%); /* لون نص فاتح قليلاً للتباين */
}

.hero-section-landing .hero-cta {
    padding: 18px 45px; /* زر كبير جدًا */
    font-size: 1.3em;
    background-image: linear-gradient(45deg, hsl(var(--accent-hue), 90%, 55%), hsl(var(--accent-hue), 100%, 50%));
    box-shadow: 0 6px 20px hsla(var(--accent-hue), 70%, 50%, 0.4);
    border: none;
}
.hero-section-landing .hero-cta:hover {
    background-image: linear-gradient(45deg, hsl(var(--accent-hue), 90%, 50%), hsl(var(--accent-hue), 100%, 45%));
    box-shadow: 0 8px 25px hsla(var(--accent-hue), 70%, 50%, 0.5);
}


/* Features Overview Section */
.features-overview-section {
    /* يمكن إضافة خلفية مختلفة قليلاً لهذا القسم إذا أردت */
    /* background-color: hsl(var(--neutral-hue), 30%, 95%); */
}
body[data-theme="dark"] .features-overview-section {
    /* background-color: hsl(var(--neutral-hue), 18%, 15%); */
}

.features-grid-landing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.feature-card-landing {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
    text-align: center;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 4px solid transparent; /* حد علوي شفاف مبدئيًا */
}
.feature-card-landing:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow-hover);
}

.feature-icon-landing {
    font-size: 3.5em; /* أيقونات كبيرة */
    color: var(--primary-color);
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    background-color: hsla(var(--primary-hue), 70%, 55%, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}
body[data-theme="dark"] .feature-icon-landing {
    background-color: hsla(var(--primary-hue), 70%, 65%, 0.15);
}
.feature-card-landing:hover .feature-icon-landing {
    background-color: hsla(var(--primary-hue), 70%, 55%, 0.2);
    transform: scale(1.1) rotate(5deg);
}


.feature-card-landing h3 {
    font-size: 1.6em;
    color: var(--text-color);
    margin-bottom: 12px;
    font-weight: var(--font-weight-bold);
}
.feature-card-landing p {
    font-size: 1em;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1; /* لدفع الزر للأسفل إذا كانت النصوص مختلفة الطول */
}
.feature-card-landing .cta-button {
    margin-top: auto; /* لدفع الزر للأسفل */
}


/* Quiz Feature Card - لجعلها بارزة */
.quiz-feature-card {
    border-top-color: var(--success-color); /* حد علوي بلون النجاح */
    /* background-color: hsl(var(--neutral-hue), 50%, 99%); /* خلفية أفتح قليلاً */
    transform: scale(1.03); /* أكبر قليلاً بشكل افتراضي */
    box-shadow: 0 10px 30px hsla(var(--success-hue), 50%, 50%, 0.15);
}
body[data-theme="dark"] .quiz-feature-card {
    /* background-color: hsl(var(--neutral-hue), 20%, 17%); */
    box-shadow: 0 10px 30px hsla(var(--success-hue), 50%, 40%, 0.2);
}

.quiz-feature-card:hover {
    transform: translateY(-10px) scale(1.06);
    box-shadow: 0 15px 35px hsla(var(--success-hue), 50%, 50%, 0.25);
}
.quiz-feature-card .feature-icon-landing {
    color: var(--success-color);
    background-color: hsla(var(--success-hue), 60%, 50%, 0.1);
}
body[data-theme="dark"] .quiz-feature-card .feature-icon-landing {
    background-color: hsla(var(--success-hue), 60%, 50%, 0.15);
}
.quiz-feature-card:hover .feature-icon-landing {
    background-color: hsla(var(--success-hue), 60%, 50%, 0.2);
}
.quiz-feature-card .cta-button {
    background-color: var(--success-color); /* زر الكويز بلون النجاح */
}
.quiz-feature-card .cta-button:hover {
    background-color: hsl(var(--success-hue), 60%, 40%);
}


/* Under Construction Page Styles */
.under-construction-section {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}
.construction-icon {
    font-size: 5em;
    color: var(--accent-hue, var(--primary-color)); /* لون مميز */
    margin-bottom: 30px;
    animation: bobbing 2s infinite ease-in-out;
    display: flex; /* لترتيب الأيقونتين جنبًا إلى جنب */
    justify-content: center;
    gap: 20px;
}
@keyframes bobbing {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.under-construction-section h1 {
    font-size: 2.8em;
    margin-bottom: 20px;
}
.under-construction-section p {
    font-size: 1.2em;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-secondary);
}
.under-construction-section p strong {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

/* تعديل بسيط على زر secondary-cta ليكون أقل بروزًا من primary */
.cta-button.secondary-cta {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}
.cta-button.secondary-cta:hover:not(:disabled) {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}
/* style.css - Enhancements for the new Landing Page (home.html) */

/* ... (جميع الأنماط السابقة تبقى كما هي: المتغيرات، اللودر، body، header، الأزرار العامة، إلخ) ... */

/* Landing Page - Hero Section NEW STYLES */
.hero-section-landing {
    background: linear-gradient(135deg, hsla(var(--primary-hue), 75%, 50%, 0.92), hsla(var(--primary-hue), 85%, 40%, 0.95)), 
                url('https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') no-repeat center center/cover; /* صورة خلفية أكثر حيوية - استبدلها إذا أردت */
    color: var(--header-text);
    padding: 100px 20px 120px; /* زيادة الحشوة العلوية والسفلية */
    text-align: center;
    min-height: 70vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* لإخفاء أي عناصر متحركة قد تخرج */
    border-bottom: 5px solid hsl(var(--accent-hue), 90%, 55%); /* حد سفلي مميز */
}
.hero-section-landing::before { /* طبقة تراكب للتأثير */
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, hsla(var(--primary-hue), 70%, 50%, 0.1) 0%, hsla(var(--primary-hue), 80%, 30%, 0.5) 70%, hsla(var(--neutral-hue), 20%, 10%, 0.7) 100%);
    opacity: 0.6;
    z-index: 1;
}
.hero-section-landing .hero-content-container { 
    position: relative;
    z-index: 2;
    display: flex; /* لترتيب النص والصورة جنبًا إلى جنب على الشاشات الكبيرة */
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px; /* لضمان عدم تمدد المحتوى بشكل كبير */
}
.hero-text-content {
    flex-basis: 60%; /* إعطاء مساحة أكبر للنص */
    text-align: right; /* محاذاة النص لليمين */
    animation: slideInFromRight 0.8s ease-out forwards;
}
@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

.hero-image-container {
    flex-basis: 35%; /* مساحة للصورة/الأيقونة */
    position: relative; /* للسماح بتموضع الأيقونة الخلفية */
    animation: slideInFromLeft 0.8s 0.2s ease-out forwards; /* تأخير بسيط */
    display: flex; /* لضمان توسط الصورة إذا كانت أصغر */
    justify-content: center;
    align-items: center;
}
@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
.hero-image-container img { /* إذا استخدمت صورة */
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 25px hsla(var(--neutral-hue), 0%, 0%, 0.2);
}
.hero-bg-icon { /* أيقونة الدماغ كخلفية */
    font-size: 18em; /* كبيرة جدًا */
    color: hsla(var(--accent-hue), 80%, 70%, 0.1); /* شفافة جدًا */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(15deg);
    z-index: -1; /* خلف المحتوى */
    opacity: 0.7;
    animation: subtlePulse 5s infinite ease-in-out alternate;
}
@keyframes subtlePulse {
    from { transform: translate(-50%, -50%) rotate(10deg) scale(0.95); opacity: 0.6; }
    to { transform: translate(-50%, -50%) rotate(20deg) scale(1.05); opacity: 0.8; }
}


.hero-title-landing {
    font-size: 3.5em; 
    font-weight: var(--font-weight-extrabold);
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px hsla(var(--neutral-hue), 20%, 0%, 0.1), 
                 0 0 30px hsla(var(--accent-hue), 100%, 70%, 0.3); /* توهج خفيف */
    color: var(--header-text); 
    line-height: 1.25;
}
.hero-title-landing span { /* لتمييز كلمات معينة */
    color: hsl(var(--accent-hue), 100%, 65%); /* لون مميز للكلمات */
    display: inline-block; /* للسماح بتأثيرات إذا أردت */
    /* text-decoration: underline hsl(var(--accent-hue), 100%, 65%) wavy; */
}

.hero-subtitle-landing {
    font-size: 1.35em;
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.8;
    opacity: 0.9;
    color: hsl(var(--neutral-hue), 20%, 92%); 
    font-weight: var(--font-weight-medium);
}

.hero-section-landing .hero-cta.main-action-btn {
    padding: 20px 50px; 
    font-size: 1.4em;
    background-image: linear-gradient(45deg, hsl(var(--success-hue), 60%, 50%), hsl(var(--success-hue), 65%, 45%));
    box-shadow: 0 8px 25px hsla(var(--success-hue), 50%, 40%, 0.4);
    border: none;
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
}
.hero-section-landing .hero-cta.main-action-btn:hover {
    background-image: linear-gradient(45deg, hsl(var(--success-hue), 60%, 45%), hsl(var(--success-hue), 65%, 40%));
    box-shadow: 0 10px 30px hsla(var(--success-hue), 50%, 40%, 0.5);
    transform: translateY(-3px) scale(1.03);
}
.hero-section-landing .hero-cta.main-action-btn i {
    margin-right: 12px; /* مسافة الأيقونة */
    animation: rocketLaunch 1.5s ease-in-out infinite alternate;
}
@keyframes rocketLaunch {
    0% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
    100% { transform: translateY(0) rotate(-5deg); }
}


/* Features Overview Section - Enhanced Styles */
.features-overview-section {
    padding-top: 60px; /* زيادة المسافة العلوية */
    padding-bottom: 60px;
}
.features-overview-section .section-header h2 {
    font-size: 2.5em; /* تكبير عنوان القسم */
}
.features-overview-section .section-header p {
    font-size: 1.2em; /* تكبير النص الوصفي */
}

.features-grid-landing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* بطاقات أعرض قليلاً */
    gap: 35px;
    margin-top: 40px;
}

.feature-card-landing {
    background-color: var(--card-bg);
    padding: 35px;
    border-radius: var(--border-radius-lg); /* استدارة أكبر */
    box-shadow: var(--card-shadow);
    text-align: center;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-top-color var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 5px solid transparent; 
}
.feature-card-landing:hover {
    transform: translateY(-12px) scale(1.02); /* رفع وتكبير أكثر */
    box-shadow: var(--card-shadow-hover);
    border-top-color: var(--primary-color); /* تغيير لون الحد العلوي عند المرور */
}

.feature-icon-landing {
    font-size: 3.8em; 
    color: var(--primary-color);
    margin-bottom: 25px;
    width: 90px; /* أيقونة أكبر */
    height: 90px;
    background-color: hsla(var(--primary-hue), 70%, 55%, 0.08); /* خلفية أخف */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed) ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* حركة ارتدادية للأيقونة */
    border: 2px solid hsla(var(--primary-hue), 70%, 55%, 0.15);
}
body[data-theme="dark"] .feature-icon-landing {
    background-color: hsla(var(--primary-hue), 70%, 65%, 0.12);
    border-color: hsla(var(--primary-hue), 70%, 65%, 0.2);
}
.feature-card-landing:hover .feature-icon-landing {
    background-color: hsla(var(--primary-hue), 70%, 55%, 0.15);
    transform: scale(1.15) rotate(10deg); /* حركة أكبر للأيقونة */
}

.feature-card-landing h3 {
    font-size: 1.7em;
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: var(--font-weight-bold);
}
.feature-card-landing p {
    font-size: 1.05em; /* نص أكبر قليلاً */
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 30px;
    flex-grow: 1; 
}
.feature-card-landing .cta-button {
    margin-top: auto; 
    width: 90%; /* جعل الزر أعرض قليلاً */
    max-width: 280px;
}
.feature-card-landing .cta-button i { /* تعديل أيقونة السهم */
    transition: transform 0.3s ease;
    margin-left: 0; /* إزالة الهامش الافتراضي */
    margin-right: 8px; /* إضافة هامش لليمين */
}
.feature-card-landing .cta-button:hover i {
    transform: translateX(-5px); /* تحريك السهم لليسار عند المرور */
}


/* Quiz Feature Card - لجعلها بارزة أكثر */
.quiz-feature-card {
    border-top-color: var(--success-color); 
    transform: scale(1.03); 
    box-shadow: 0 12px 35px hsla(var(--success-hue), 50%, 50%, 0.18);
}
body[data-theme="dark"] .quiz-feature-card {
    box-shadow: 0 12px 35px hsla(var(--success-hue), 50%, 40%, 0.25);
}
.quiz-feature-card:hover {
    transform: translateY(-12px) scale(1.07); /* تأثير مرور أقوى */
    box-shadow: 0 18px 40px hsla(var(--success-hue), 50%, 50%, 0.3);
    border-top-color: hsl(var(--success-hue), 60%, 40%);
}
.quiz-feature-card .feature-icon-landing {
    color: var(--success-color);
    background-color: hsla(var(--success-hue), 60%, 50%, 0.12);
    border-color: hsla(var(--success-hue), 60%, 50%, 0.2);
}
body[data-theme="dark"] .quiz-feature-card .feature-icon-landing {
    background-color: hsla(var(--success-hue), 60%, 50%, 0.18);
}
.quiz-feature-card:hover .feature-icon-landing {
    background-color: hsla(var(--success-hue), 60%, 50%, 0.22);
}
.quiz-feature-card .cta-button.primary-cta { /* استخدام primary-cta هنا */
    background-image: linear-gradient(45deg, var(--success-color), hsl(var(--success-hue), 65%, 40%));
}
.quiz-feature-card .cta-button.primary-cta:hover {
    background-image: linear-gradient(45deg, hsl(var(--success-hue), 60%, 40%), hsl(var(--success-hue), 65%, 35%));
}


/* Under Construction Page Styles (كما هي مع تعديلات طفيفة) */
.under-construction-section { text-align: center; padding-top: 70px; padding-bottom: 70px; }
.construction-icon {
    font-size: 5.5em; color: hsl(var(--accent-hue), 80%, 60%); margin-bottom: 35px;
    animation: bobbing 2.2s infinite ease-in-out; display: flex; 
    justify-content: center; gap: 25px;
}
@keyframes bobbing { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.under-construction-section h1 { font-size: 3em; margin-bottom: 25px; color: var(--primary-color); }
.under-construction-section p { font-size: 1.25em; max-width: 600px; margin-left: auto; margin-right: auto; color: var(--text-secondary); line-height: 1.8; }
.under-construction-section p strong { color: var(--primary-color); font-weight: var(--font-weight-bold); }


/* Responsive adjustments (تأكد من أنها موجودة في نهاية الملف) */
/* @media (max-width: 768px) { ... } */
/* @media (max-width: 480px) { ... } */
/* style.css - Fix for top white space and Hero section adjustments */

/* ... (جميع الأنماط السابقة) ... */

/* Resetting margin for first-child in sections if it's a heading */
.page-section > *:first-child,
.hero-section-landing .container > *:first-child { /* استهداف العناصر داخل حاوية الهيرو */
    margin-top: 0;
}

header {
    background: var(--header-bg); 
    color: var(--header-text); 
    padding: 0.9rem 0; /* تعديل الحشوة إذا لزم الأمر */
    box-shadow: 0 3px 10px hsla(var(--neutral-hue), 20%, 0%, 0.1); 
    position: sticky; 
    top: 0;
    left: 0; /* التأكد من أنه يبدأ من الحافة */
    right: 0; /* التأكد من أنه يمتد للعرض الكامل */
    width: 100%; /* ضمان أن الهيدر يأخذ العرض الكامل للشاشة */
    z-index: 1000; 
    box-sizing: border-box; /* لضمان أن padding لا يضيف للعرض */
}

/* ... (باقي أنماط الهيدر) ... */

.hero-section-landing {
    background: var(--primary-color); /*  <-- إزالة الصورة والتدرج المعقد مبدئيًا، استخدام لون أساسي */
    /* أو يمكنك استخدام تدرج أبسط: */
    /* background: linear-gradient(135deg, hsl(var(--primary-hue), 70%, 53%), hsl(var(--primary-hue), 80%, 45%)); */
    color: var(--header-text);
    padding: 80px 20px 100px; 
    text-align: center;
    min-height: 60vh; /* يمكنك تعديل هذا الارتفاع */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* border-bottom: 5px solid hsl(var(--accent-hue), 90%, 55%); /* يمكنك الاحتفاظ بهذا أو إزالته */
}

/* إزالة أو تعديل الـ ::before إذا كانت هي سبب التعتيم غير المرغوب فيه */
.hero-section-landing::before { 
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* تغيير الخلفية هنا إذا كنت لا تريد التعتيم الأسود */
    background: hsla(var(--primary-hue), 70%, 50%, 0.1); /* تراكب لوني خفيف جدًا بدلاً من التعتيم */
    /* أو اجعلها شفافة تمامًا إذا كنت لا تريد أي تراكب: */
    /* background: transparent; */
    opacity: 0.5; /* يمكنك التحكم في شفافية التراكب */
    z-index: 1;
}

/* ... (باقي أنماط Hero كما هي أو قم بتعديلها حسب الرغبة) ... */
/* style.css - Further enhancements for Hero section */

/* ... (الأنماط السابقة بما في ذلك إصلاح البياض) ... */

.hero-section-landing .hero-content-container { 
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column; /* جعل النص والزر تحت بعضهما البعض */
    align-items: center; /* توسيط المحتوى */
    gap: 20px; /* مسافة بين العنوان والفقرة والزر */
    max-width: 800px; /* تحديد عرض أقصى لمحتوى الهيرو */
    margin: 0 auto; /* توسيط الحاوية نفسها */
}

.hero-text-content {
    flex-basis: auto; /* لا حاجة لتحديد base إذا كان الترتيب عموديًا */
    text-align: center; /* توسيط كل النصوص */
    animation: slideInFromBottom 0.8s ease-out forwards;
}

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


.hero-image-container { /* يمكننا إزالة هذا القسم إذا لم نستخدم صورة بارزة */
    display: none; /* إخفاء هذا القسم مبدئيًا لتبسيط الهيرو */
    /* أو يمكنك الاحتفاظ به وتصميمه بشكل مختلف إذا أردت أيقونة أو صورة */
}
/* .hero-bg-icon { ... } /* يمكنك الاحتفاظ بهذا إذا أعجبك أو إزالته */


.hero-title-landing {
    font-size: 3.8em; /* خط كبير وبارز جدًا */
    font-weight: var(--font-weight-extrabold);
    margin-bottom: 15px; /* تقليل المسافة قليلاً */
    text-shadow: 0 2px 5px hsla(var(--neutral-hue), 20%, 0%, 0.2); /* ظل أنعم */
    color: var(--header-text); 
    line-height: 1.15; /* تقليل ارتفاع السطر قليلاً للعناوين الكبيرة */
    padding: 0 10px; /* لإعطاء مسافة من الحواف إذا كان النص طويلًا جدًا */
}
.hero-title-landing span { 
    color: hsl(var(--accent-hue), 100%, 60%); /* لون مميز أكثر إشراقًا */
    display: inline-block; 
    position: relative; /* لإضافة تأثيرات إذا أردت */
}
/* تأثير بسيط لكلمات span عند المرور (اختياري) */
/* .hero-title-landing span:hover {
    transform: scale(1.05);
    text-shadow: 0 0 10px currentColor;
} */


.hero-subtitle-landing {
    font-size: 1.25em; /* حجم مناسب */
    margin-bottom: 35px;
    max-width: 650px;
    line-height: 1.7;
    opacity: 0.95;
    color: hsl(var(--neutral-hue), 20%, 92%); 
    font-weight: var(--font-weight-medium);
}

.hero-section-landing .hero-cta.main-action-btn {
    padding: 18px 45px; 
    font-size: 1.25em; /* تعديل طفيف */
    background-image: linear-gradient(45deg, hsl(var(--success-hue), 65%, 50%), hsl(var(--success-hue), 70%, 45%));
    box-shadow: 0 7px 22px hsla(var(--success-hue), 50%, 40%, 0.35);
    border: none;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.8px;
    border-radius: var(--border-radius-lg); /* استدارة أكبر */
}
.hero-section-landing .hero-cta.main-action-btn:hover {
    background-image: linear-gradient(45deg, hsl(var(--success-hue), 65%, 45%), hsl(var(--success-hue), 70%, 40%));
    box-shadow: 0 9px 28px hsla(var(--success-hue), 50%, 40%, 0.45);
}
.hero-section-landing .hero-cta.main-action-btn i {
    margin-right: 10px; 
    /* إزالة أنيميشن الصاروخ إذا كان مشتتًا */
    /* animation: rocketLaunch 1.5s ease-in-out infinite alternate; */
}

/* أقسام الميزات (Features Overview Section) ستبقى كما هي لأنك ذكرت أنها ممتازة */
/* .features-overview-section { ... } */
/* .features-grid-landing { ... } */
/* .feature-card-landing { ... } */
/* ... الخ ... */
/* في style.css */
#divisionSelectionSection > .back-btn.stylish-btn {
    margin-bottom: 25px;
    display: block; /* أو inline-block إذا كنت تريد التعامل معه بشكل مختلف */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
/* style.css - Styles for Clickable Logo */

/* ... (جميع الأنماط السابقة تبقى كما هي) ... */

/* Styles for the logo link to ensure it behaves like the logo itself */
.logo-link {
    text-decoration: none; /* إزالة الخط السفلي الافتراضي للرابط */
    color: inherit; /* جعل الرابط يرث لون النص من العنصر الأب (الهيدر) */
    display: inline-flex; /* ليتناسب مع محتوى الشعار */
    align-items: center; /* لمحاذاة النص والأيقونة داخل الرابط إذا لزم الأمر */
}

.logo-link:hover,
.logo-link:focus,
.logo-link:active {
    text-decoration: none; /* إزالة الخط السفلي عند المرور أو التركيز أو النقر */
    color: inherit; /* الحفاظ على نفس اللون */
}

/* التأكد من أن تأثير المرور على الأيقونة لا يزال يعمل */
.logo-link:hover .logo .logo-icon-main {
    transform: translateY(-12px) rotate(360deg) scale(1.2); 
    color: hsl(var(--accent-hue), 100%, 70%); 
    text-shadow: 0 0 8px hsla(var(--accent-hue), 100%, 60%, 0.5),
                 0 0 15px hsla(var(--accent-hue), 100%, 55%, 0.3);
}
/* إذا كنت قد عدلت الحركة في الرد السابق، استخدم نفس قيم الـ transform والـ color هنا */
/* style.css - Adjust spacing between Logo and Theme Toggle Button */

/* ... (جميع الأنماط السابقة تبقى كما هي) ... */

header {
    background: var(--header-bg); 
    color: var(--header-text); 
    padding: 0.9rem 0; /* يمكنك تعديل الحشوة إذا أردت */
    box-shadow: 0 3px 10px hsla(var(--neutral-hue), 20%, 0%, 0.1); 
    position: sticky; 
    top: 0;
    left: 0; 
    right: 0; 
    width: 100%; 
    z-index: 1000; 
    box-sizing: border-box; 
}

.header-content {
    display: flex;
    justify-content: space-between; /* هذا هو المهم هنا */
    align-items: center;
}

.logo-link { /* وسم الرابط الذي يغلف الشعار */
    text-decoration: none;
    color: inherit;
    display: inline-flex; 
    align-items: center;
    /* لا حاجة لـ margin-right هنا إذا كان space-between يعمل بشكل جيد */
}

.logo { 
    display: flex;
    align-items: center;
    font-size: 2em; 
    font-weight: var(--font-weight-extrabold); 
    color: var(--header-text) !important; 
    letter-spacing: -0.6px; 
    /* cursor: pointer; /* تم نقله إلى .logo-link إذا كنت تستخدمه */
    /* margin-right: 15px; /* <--- أزل هذا الهامش من هنا إذا كان موجودًا */
}

.logo .logo-icon-main {
    font-size: 0.8em; 
    margin-right: 8px; 
    color: hsl(var(--accent-hue), 90%, 60%); 
    display: inline-block; 
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                color 0.4s ease,
                text-shadow 0.4s ease; 
    will-change: transform; 
}

.logo-link:hover .logo .logo-icon-main { /* تم تعديل المحدد ليشمل .logo-link */
    transform: translateY(-12px) rotate(360deg) scale(1.25) skewX(-5deg); 
    color: hsl(var(--accent-hue), 100%, 65%); 
    text-shadow: 0 0 8px hsla(var(--accent-hue), 100%, 60%, 0.5),
                 0 0 15px hsla(var(--accent-hue), 100%, 55%, 0.3);
}


.theme-toggle { 
    background-color: var(--theme-toggle-bg);
    border: none;
    color: var(--theme-toggle-icon-color); 
    width: 44px;  
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color var(--transition-speed) ease, 
                transform var(--animation-speed-fast) ease,
                box-shadow var(--transition-speed) ease;
    box-shadow: 0 2px 6px hsla(var(--neutral-hue), 20%, 0%, 0.15);
    overflow: hidden; 
    /* margin-left: 15px; /*  <-- !!!! تعديل مقترح: إضافة هامش يساري لزر الثيم !!!! */
                       /*  أو يمكنك زيادة القيمة إذا احتجت لمسافة أكبر  */
                       /*  إذا كان justify-content: space-between كافيًا، قد لا تحتاج لهذا  */
}
/* ... (باقي أنماط زر الثيم كما هي) ... */

/* ... (باقي أنماط CSS الأخرى) ... */









/* style.css - Additions for Onboarding Screens */

/* ... (جميع الأنماط السابقة تبقى كما هي، بما في ذلك أنماط Hero و Features) ... */

/* Onboarding Overlay Styles */
.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--card-bg); /* سيتغير لون الخلفية ديناميكيًا بالـ JS */
    z-index: 2500; 
    display: flex; 
    justify-content: center;
    align-items: center;
    opacity: 0; /* يبدأ مخفيًا */
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s; /* تأخير visibility */
    overflow: hidden; /* مهم لمنع أي تمرير إذا كانت الشرائح أكبر */
}
.onboarding-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.onboarding-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* لتوزيع المحتوى والـ navigation */
    align-items: center;
    padding: 40px 20px 30px; /* حشوة علوية وسفلية أكبر */
    box-sizing: border-box;
    position: relative; 
}

.onboarding-slides-wrapper {
    display: flex; 
    width: 100%; 
    flex-grow: 1; /* لجعل هذا الجزء يأخذ المساحة المتاحة */
    position: relative; /* لتموضع الشرائح المطلق */
    overflow: hidden; /* لإخفاء الشرائح غير النشطة */
    margin-bottom: 20px;
}

.onboarding-slide {
    min-width: 100%; 
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    text-align: center;
    padding: 20px 15px; /* حشوة داخلية للشريحة */
    box-sizing: border-box;
    opacity: 0; 
    transform: translateX(100%); /* تبدأ خارج الشاشة (لـ RTL) */
    position: absolute; 
    top: 0;
    left: 0; 
    transition: opacity var(--animation-speed-normal) ease-in-out, transform var(--animation-speed-normal) ease-in-out;
    will-change: transform, opacity;
}
.onboarding-slide.active-slide {
    opacity: 1;
    transform: translateX(0%);
    z-index: 10; 
    position: relative; /* لجعلها تتدفق بشكل طبيعي عند كونها نشطة */
}
/* أنيميشن الخروج عند الانتقال */
.onboarding-slide.exiting-slide-left { /* عند الانتقال للتالي (تذهب لليسار في RTL) */
    transform: translateX(-100%);
    opacity: 0;
}
.onboarding-slide.exiting-slide-right { /* عند الانتقال للسابق (تذهب لليمين في RTL) */
    transform: translateX(100%); /* نعكس الاتجاه الذي دخلت منه */
    opacity: 0;
}


.onboarding-slide-image {
    margin-bottom: 25px; /* مسافة أكبر تحت الأيقونة */
    min-height: 100px; /* ارتفاع أدنى لحاوية الأيقونة/الصورة */
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding-slide-image .slide-icon {
    font-size: 5.5em; /* أيقونات أكبر */
    color: #fff; /* لون أبيض للأيقونة ليتناسب مع الخلفيات الملونة */
    text-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.2); /* ظل خفيف للأيقونة */
    animation: iconEntry var(--animation-speed-slow) ease-out forwards;
    opacity: 0;
    transform: scale(0.7);
}
@keyframes iconEntry {
    to { opacity: 1; transform: scale(1); }
}

/* شخصية SVG للطالب */
.studying-person-svg {
    width: 150px; /* حجم مناسب */
    height: 150px;
    animation: iconEntry var(--animation-speed-slow) ease-out forwards;
    opacity: 0;
    transform: scale(0.7);
    margin-bottom: 0; /* إزالة الهامش إذا كان SVG هو الأيقونة */
}
/* تحديد ألوان التدرج لـ SVG من خلال متغيرات CSS */
.studying-person-svg .gradient-stop-1-person { stop-color: hsl(var(--primary-hue), 70%, 60%); }
.studying-person-svg .gradient-stop-2-person { stop-color: hsl(var(--primary-hue), 80%, 50%); }
.studying-person-svg .book-gradient-stop-1 { stop-color: hsl(var(--accent-hue), 90%, 60%); }
.studying-person-svg .book-gradient-stop-2 { stop-color: hsl(var(--accent-hue), 95%, 50%); }
.studying-person-svg .book-line { stroke: hsla(var(--neutral-hue), 20%, 30%, 0.7); }
body[data-theme="dark"] .studying-person-svg .book-line { stroke: hsla(var(--neutral-hue), 15%, 70%, 0.7); }

/* أنيميشن بسيط للشخصية والكتاب */
.studying-person-svg .person-group {
    transition: transform 0.3s ease-in-out;
}
.onboarding-slide:hover .studying-person-svg .person-group {
    transform: translateY(-3px);
}
.studying-person-svg .book-group {
    animation: bookSway 3s infinite ease-in-out alternate;
    transform-origin: 100px 185px; /* نقطة دوران حول أسفل الكتاب */
}
@keyframes bookSway {
    from { transform: rotate(-2deg); }
    to { transform: rotate(2deg); }
}


.onboarding-slide h2.onboarding-title {
    font-size: 2.4em; /* خط أكبر للعناوين */
    font-weight: var(--font-weight-extrabold);
    color: #fff; /* لون أبيض للنص ليتناسب مع الخلفيات الملونة */
    margin-bottom: 18px;
    text-shadow: 1px 1px 3px hsla(0, 0%, 0%, 0.25);
    animation: textFadeInUp 0.7s 0.2s ease-out forwards;
    opacity: 0;
}
.onboarding-slide p.onboarding-description {
    font-size: 1.2em; /* خط أكبر للوصف */
    color: hsla(0, 0%, 100%, 0.85); /* أبيض شفاف قليلاً */
    max-width: 500px; /* تحديد عرض النص */
    line-height: 1.7;
    margin-bottom: 30px;
    animation: textFadeInUp 0.7s 0.4s ease-out forwards;
    opacity: 0;
}
@keyframes textFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Onboarding Navigation Styles */
.onboarding-navigation {
    width: 100%;
    max-width: 600px; /* تحديد عرض أقصى لمنطقة التنقل */
    display: flex;
    justify-content: center; /* تم التغيير هنا لتوسيط المجموعة */
    align-items: center;
    gap: 25px; /* يمكنك تعديل هذه القيمة للمسافة بين زر التخطي والنقاط وزر التالي */
               /* الـ gap في .onboarding-dots-container هو للمسافة بين النقاط نفسها */
    padding: 10px 20px;
    box-sizing: border-box;
    position: absolute; /* تثبيت في الأسفل */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation: textFadeInUp 0.7s 0.6s ease-out forwards; /* ظهور متأخر */
    opacity: 0;
}

.onboarding-nav-btn {
    background-color: hsla(0, 0%, 100%, 0.2); /* خلفية شفافة قليلاً */
    color: #fff;
    border: none;
    font-size: 1.05em;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    padding: 12px 22px;
    border-radius: var(--border-radius-md);
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.onboarding-nav-btn:hover {
    background-color: hsla(0, 0%, 100%, 0.3);
    transform: translateY(-2px);
}
.onboarding-nav-btn.skip-btn {
    background-color: transparent;
    color: hsla(0, 0%, 100%, 0.7);
}
.onboarding-nav-btn.skip-btn:hover {
    color: hsla(0, 0%, 100%, 1);
    background-color: hsla(0, 0%, 100%, 0.1);
}
.onboarding-nav-btn.next-btn i { margin-right: 5px; }
.onboarding-nav-btn.prev-btn i { margin-left: 5px; }


.onboarding-dots-container {
    display: flex;
    gap: 10px; /* مسافة أكبر بين النقاط */
}
.onboarding-dot {
    width: 12px; /* نقاط أكبر */
    height: 12px;
    background-color: hsla(0, 0%, 100%, 0.4); /* نقاط شفافة */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}
.onboarding-dot.active {
    background-color: hsla(0, 0%, 100%, 0.9); /* نقطة نشطة أكثر وضوحًا */
    transform: scale(1.3);
}

/* زر "ابدأ الدراسة الآن" في الشريحة الأخيرة */
.onboarding-slide #finishOnboardingBtn {
    padding: 18px 45px;
    font-size: 1.3em;
    background-image: linear-gradient(45deg, hsl(var(--success-hue), 60%, 50%), hsl(var(--success-hue), 65%, 45%));
    box-shadow: 0 8px 25px hsla(var(--success-hue), 50%, 40%, 0.4);
    animation: textFadeInUp 0.6s 0.6s ease-out forwards; 
    opacity: 0;
}
.onboarding-slide #finishOnboardingBtn:hover {
    background-image: linear-gradient(45deg, hsl(var(--success-hue), 60%, 45%), hsl(var(--success-hue), 65%, 40%));
    box-shadow: 0 10px 30px hsla(var(--success-hue), 50%, 40%, 0.5);
}

/* للتحكم في إظهار المحتوى الرئيسي بعد التعريف */
#mainSiteContent.hidden-by-onboarding {
    display: none !important;
}

/* تحديد ألوان خلفية متدرجة لكل شريحة (ستحتاج لتعريف هذه المتغيرات في :root أو body[data-gradient-id="..."]) */
/* هذا الجزء للتحكم في لون خلفية .onboarding-overlay بناءً على الشريحة النشطة */
/* سيتم تطبيقه بواسطة JavaScript */
.onboarding-overlay[data-active-gradient="gradient-1"] { background: linear-gradient(135deg, hsl(210, 80%, 60%), hsl(230, 80%, 50%)); } /* ترحيب - أزرق */
.onboarding-overlay[data-active-gradient="gradient-2"] { background: linear-gradient(135deg, hsl(260, 70%, 60%), hsl(280, 70%, 50%)); } /* شعب - بنفسجي */
.onboarding-overlay[data-active-gradient="gradient-3"] { background: linear-gradient(135deg, hsl(140, 60%, 55%), hsl(160, 60%, 45%)); } /* كويزات - أخضر */
.onboarding-overlay[data-active-gradient="gradient-4"] { background: linear-gradient(135deg, hsl(45, 100%, 55%), hsl(35, 100%, 50%)); } /* شارات - برتقالي/ذهبي */
.onboarding-overlay[data-active-gradient="gradient-5"] { background: linear-gradient(135deg, hsl(300, 60%, 55%), hsl(320, 60%, 50%)); } /* مراجعة - وردي/بنفسجي */
.onboarding-overlay[data-active-gradient="gradient-6"] { background: linear-gradient(135deg, hsl(200, 20%, 40%), hsl(220, 20%, 30%)); } /* تطوير - رمادي داكن */

.onboarding-navigation {
    width: 100%; /* سيأخذ 100% من عرض المحتوى داخل .onboarding-container */
    max-width: 600px; /* الحد الأقصى للعرض على الشاشات الكبيرة */
    display: flex;
    justify-content: center; /* يبقي المجموعة في المنتصف */
    align-items: center;
    gap: 20px; /* مسافة بين زر التخطي، النقاط، وزر التالي. عدّلها حسب رغبتك (مثلاً 15px أو 25px) */
    padding: 10px 0; /* حشوة عمودية فقط، لا حشوة أفقية هنا لأن .onboarding-container يوفرها */
    box-sizing: border-box;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation: textFadeInUp 0.7s 0.6s ease-out forwards;
    opacity: 0;
}
@media (max-width: 420px) { /* استهداف الشاشات التي عرضها 420px أو أقل */
    .onboarding-navigation {
        gap: 10px; /* تقليل المسافة بين زر التخطي/النقاط/التالي */
        bottom: 15px; /* تقريبها قليلاً من الأسفل إذا لزم الأمر */
    }

    .onboarding-nav-btn {
        padding: 10px 15px; /* تقليل حشوة الأزرار لجعلها أصغر */
        font-size: 0.9em;  /* تصغير حجم خط الأزرار قليلاً */
    }
    
    /* إذا كان زر التخطي لديه تنسيق خاص للحشوة أو الخط، عدله هنا أيضًا */
    .onboarding-nav-btn.skip-btn {
         /* يمكنك إضافة تنسيقات خاصة لزر التخطي هنا إذا لزم الأمر،
            مثلاً إذا كانت حشوته مختلفة عن الأزرار الأخرى */
    }

    .onboarding-dots-container {
        gap: 7px; /* تقليل المسافة بين النقاط نفسها */
    }

    .onboarding-dot {
        width: 9px;  /* تصغير حجم النقاط */
        height: 9px;
    }
    .onboarding-dot.active {
        transform: scale(1.2); /* تعديل بسيط لحجم النقطة النشطة */
    }

    /* تصغير حجم خط عنوان ووصف الشريحة إذا كانا يسببان ضغطًا عموديًا */
    .onboarding-slide h2.onboarding-title {
        font-size: 2em; /* مثال: تصغير عنوان الشريحة */
    }
    .onboarding-slide p.onboarding-description {
        font-size: 1em; /* مثال: تصغير وصف الشريحة */
        line-height: 1.6;
        margin-bottom: 20px;
    }
    .onboarding-slide-image .slide-icon {
        font-size: 4.5em; /* تصغير الأيقونات الكبيرة في الشرائح */
    }
    .studying-person-svg {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 360px) { /* للشاشات الأضيق جدًا */
     .onboarding-navigation {
         gap: 8px;
     }
     .onboarding-nav-btn {
        padding: 8px 10px;
        font-size: 0.85em;
    }
    .onboarding-dot {
        width: 8px;
        height: 8px;
    }
    .onboarding-dots-container {
        gap: 5px;
    }
}