/* =========================================================
   تنسيق الموقع (نمط Neubrutalism)
   حدود سوداء سميكة + ظلال حادة بلا تمويه + ألوان صريحة

   الأقسام:
   1. الألوان والخطوط
   2. أساسيات الصفحة
   3. الشريط العلوي والقائمة
   4. الأزرار العامة
   5. الصفحة الرئيسية (اختيار الصف + البطاقات)
   6. رأس الصفحة (البطاقة الصفراء)
   7. الفهارس (الوحدات والدروس)
   8. صفحات الدروس
   9. الجداول
   10. البطاقات والنوافذ العامة
   11. نافذة الإعلان + نافذة الانتظار + رسالة التحديث
   12. أسماء الأنماط القديمة المستخدمة داخل الدروس
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700;900&family=Readex+Pro:wght@400;700&display=swap");


/* =========================================================
   1. الألوان والخطوط
   لتغيير لون في الموقع كله غيّره هنا فقط
   ========================================================= */
:root {
    --page-color: #FFF4E0;
    /* خلفية الصفحة (كريمي) */
    --card-color: #FFFFFF;
    --text-color: #111111;
    --gray-text: #3D3D3D;

    /* ألوان البطاقات */
    --yellow: #FFD43B;
    --pink: #FF8FAB;
    --blue: #74C0FC;
    --green: #8CE99A;
    --purple: #B197FC;

    /* ألوان النصوص داخل الدروس (بدل الأحمر والأزرق الصارخ القديم) */
    --text-red: #D6336C;
    --text-blue: #1864AB;
    --text-brown: #9C4221;
    --text-purple: #862E9C;
    --text-green: #2B8A3E;

    /* خلفيات فاتحة داخل الدروس */
    --bg-blue: #D0EBFF;
    --bg-yellow: #FFEC99;
    --bg-gray: #F1F3F5;

    /* الحدود والظلال */
    --border: 3px solid #111111;
    --thin-border: 2px solid #111111;
    --shadow: 4px 4px 0 #111111;
    --radius: 14px;
}


/* =========================================================
   2. أساسيات الصفحة
   ========================================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    direction: rtl;
    font-family: "Cairo", "Tajawal", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--page-color);
    /* background-image: radial-gradient(#11111122 1px, transparent 1.5px); */
    background-size: 18px 18px;
}

.page {
    max-width: 700px;
    margin: auto;
    padding: 16px;
}

a {
    color: inherit;
}

button {
    font-family: inherit;
}

img {
    max-width: 100%;
}

ul,
ol {
    padding-right: 22px;
}


/* =========================================================
   3. الشريط العلوي والقائمة
   (يُحمَّل من header_part.html داخل div#header)
   ========================================================= */
#header,
#header1,
#header_part {
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: var(--yellow);
    border-bottom: var(--border);
}

.top-bar .logo {
    width: 38px;
    height: 38px;
}

.top-bar-title {
    flex: 1;
    font-size: 17px;
    font-weight: 900;
}

.icon-button {
    width: 42px;
    height: 42px;
    border: var(--border);
    border-radius: 8px;
    background-color: white;
    color: #111;
    font-size: 20px;
    box-shadow: 3px 3px 0 #111;
    cursor: pointer;
}

.icon-button:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 #111;
}

/* القائمة (تظهر عند الضغط على ☰) */
.main-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    width: 250px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: white;
    box-shadow: 6px 6px 0 #111;
    overflow: hidden;
}

.main-menu.show {
    display: block;
    animation: menu-open 0.2s ease;
}

@keyframes menu-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.menu-item-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: var(--thin-border);
    background: none;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    text-align: right;
    cursor: pointer;
}

.menu-item-btn:last-child {
    border-bottom: none;
}

.menu-item-btn:active {
    background-color: var(--yellow);
}

.menu-icon {
    width: 22px;
    text-align: center;
}

.menu-item-btn.exit {
    background-color: var(--pink);
}


/* =========================================================
   4. الأزرار العامة
   ========================================================= */
.btn {
    display: inline-block;
    padding: 10px 22px;
    border: var(--border);
    border-radius: 10px;
    background-color: var(--yellow);
    color: #111;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #111;
}

.btn.white {
    background-color: white;
}

.btn.pink {
    background-color: var(--pink);
}

.btn.blue {
    background-color: var(--blue);
}

.btn.green {
    background-color: var(--green);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 16px 0;
}


/* =========================================================
   5. الصفحة الرئيسية
   ========================================================= */

/* اختيار الصف */
.class-switch {
    display: flex;
    padding: 4px;
    margin-bottom: 16px;
    border: var(--border);
    border-radius: 12px;
    background-color: white;
    box-shadow: var(--shadow);
}

.class-switch button {
    flex: 1;
    padding: 11px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    cursor: pointer;
}

.class-switch button.selected {
    border-color: #111;
    background-color: var(--pink);
}

/* البطاقات */
.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.card {
    position: relative;
    display: block;
    padding: 16px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: white;
    color: #111;
    text-align: right;
    text-decoration: none;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.card:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #111;
}

/* لون صريح مختلف لكل بطاقة */
.cards .card:nth-child(2) {
    background-color: var(--pink);
}

.cards .card:nth-child(3) {
    background-color: var(--blue);
}

.cards .card:nth-child(4) {
    background-color: var(--green);
}

.cards .card:nth-child(5) {
    background-color: var(--purple);
}

/* البطاقة الكبيرة (دروس المنهج) */
.card.big {
    grid-column: span 2;
    background-color: var(--yellow);
}

.card-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border: var(--thin-border);
    border-radius: 10px;
    background-color: white;
    font-size: 22px;
    line-height: 42px;
    text-align: center;
}

.card-title {
    font-size: 17px;
    font-weight: 900;
}

.card-text {
    margin: 2px 0 10px;
    font-size: 13px;
    color: #222;
}

.card-count {
    display: inline-block;
    padding: 1px 8px;
    border: var(--thin-border);
    border-radius: 6px;
    background-color: white;
    font-size: 12px;
    font-weight: 700;
}

/* شارة "جديد" كملصق مائل */
.new-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 2px 9px;
    border: var(--thin-border);
    border-radius: 6px;
    background-color: var(--yellow);
    font-size: 11px;
    font-weight: 700;
    transform: rotate(-8deg);
}

/* رابط "ادعمنا" */
.support-link {
    display: block;
    margin-top: 16px;
    padding: 14px 16px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--pink);
    color: #111;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.support-link:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #111;
}


/* =========================================================
   6. رأس الصفحة (البطاقة الصفراء)
   ========================================================= */
.header-card {
    padding: 18px;
    margin-bottom: 18px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--yellow);
    box-shadow: var(--shadow);
}

.header-card h1,
.header-card h2 {
    margin: 10px 0 4px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
}

.header-card p {
    margin: 0;
    font-size: 14px;
}

.chip {
    display: inline-block;
    padding: 1px 10px;
    margin-left: 4px;
    border: var(--thin-border);
    border-radius: 6px;
    background-color: white;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   7. الفهارس: الوحدات (تُفتح وتُغلق) والدروس
   ========================================================= */
.unit {
    margin-bottom: 16px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: white;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.unit summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    list-style: none;
    cursor: pointer;
}

.unit summary::-webkit-details-marker {
    display: none;
}

/* علامة الفتح والإغلاق */
.unit summary::after {
    content: "▾";
    font-size: 20px;
    transition: transform 0.2s;
}

.unit[open] summary::after {
    transform: rotate(180deg);
}

.unit-number {
    flex-shrink: 0;
    min-width: 64px;
    padding: 4px 8px;
    border: var(--thin-border);
    border-radius: 8px;
    background-color: var(--yellow);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    transform: rotate(-3deg);
}

.unit-title {
    flex: 1;
    font-weight: 900;
    line-height: 1.4;
}

.unit-title small {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: var(--gray-text);
}

.chapter-title {
    padding: 8px 16px 4px;
    border-top: var(--thin-border);
    background-color: var(--page-color);
    font-size: 13px;
    font-weight: 700;
}

.lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-top: var(--thin-border);
    background: none;
    color: #111;
    font-size: 15px;
    text-align: right;
    cursor: pointer;
}

.lesson:active {
    background-color: var(--yellow);
}

.lesson-number {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: var(--thin-border);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

.lesson-title {
    flex: 1;
    line-height: 1.5;
}

.lesson-title small {
    display: block;
    font-size: 11px;
    color: var(--gray-text);
}


/* =========================================================
   8. صفحات الدروس
   ========================================================= */
.lesson-page {
    max-width: 760px;
    margin: auto;
    padding: 16px;
    /* خط الأجوبة ونصوص الشرح (العناوين والأسئلة تبقى بخط Cairo) */
    font-family: "Readex Pro", "Cairo", sans-serif;
    line-height: 1.7;
}

.lesson-page h1,
.lesson-page h2,
.lesson-page h3,
.lesson-page h4,
.lesson-page h5,
.lesson-page th,
.lesson-page .question,
.lesson-title-card,
.rate-card {
    font-family: "Cairo", "Tajawal", sans-serif;
}

/* بطاقة عنوان الدرس (الوحدة / الفصل / الدرس) */
.lesson-title-card {
    padding: 14px 16px;
    margin-bottom: 18px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--yellow);
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.lesson-title-card> :last-child {
    display: block;
    margin-top: 4px;
    font-size: 19px;
    font-weight: 900;
}

/* العناوين داخل الدرس */
.lesson-page h1,
.lesson-page h2,
.lesson-page h3 {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 4px 14px;
    margin: 24px 0 12px;
    border: var(--thin-border);
    border-radius: 8px;
    background-color: #111;
    color: white;
    font-size: 17px;
    line-height: 1.6;
}

/* الأسئلة والعناوين الفرعية: ملصق أبيض بشريط أصفر */
.lesson-page h4 {
    padding: 6px 12px;
    margin: 20px 0 8px;
    border: var(--thin-border);
    border-right: 8px solid var(--yellow);
    border-radius: 8px;
    background-color: white;
    box-shadow: 3px 3px 0 #111;
    font-size: 16px;
    line-height: 1.6;
}

.lesson-page h5 {
    margin: 14px 0 6px;
    font-size: 15px;
}

.lesson-page p {
    margin: 8px 0;
}

.lesson-page li {
    margin-bottom: 4px;
}

.lesson-page hr {
    margin: 20px 0;
    border: none;
    border-top: var(--thin-border);
}

/* صورة الفيديو */
.lesson-page a[href*="youtube"] img {
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* الرسومات (المخططات) */
.lesson-page svg {
    max-width: 100%;
    height: auto;
}

/* بطاقة التقييم في آخر الصفحة */
.rate-card {
    max-width: 700px;
    margin: 24px auto 30px;
    padding: 16px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--green);
    box-shadow: var(--shadow);
    text-align: center;
    font-weight: 700;
}

.rate-card .btn {
    margin-top: 10px;
    background-color: white;
}


/* =========================================================
   9. الجداول
   ========================================================= */
table {
    max-width: 100%;
    border-collapse: collapse;
    background-color: white;
}

.lesson-page table,
.page table {
    border: var(--thin-border);
}

.lesson-page th,
.page th {
    padding: 8px;
    border: var(--thin-border);
    background-color: #111;
    color: white;
}

/* خلايا عناوين لها خلفية فاتحة خاصة بها: نص أسود */
.lesson-page th[style*="background"],
.page th[style*="background"] {
    color: #111;
}

.lesson-page td,
.page td {
    padding: 8px;
    border: 1.5px solid #111;
    vertical-align: top;
}

/* الجداول العريضة تتحرك أفقياً بدل أن تخرج عن الشاشة */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
}


/* =========================================================
   10. البطاقات والنوافذ العامة (صفحات المعلومات)
   ========================================================= */
.box {
    padding: 16px;
    margin-bottom: 18px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: white;
    box-shadow: var(--shadow);
}

.box h2,
.box h3 {
    margin-top: 0;
}

.box.blue {
    background-color: var(--blue);
}

.box.pink {
    background-color: var(--pink);
}

.box.green {
    background-color: var(--green);
}

.box.purple {
    background-color: var(--purple);
}

/* حقول الإدخال */
input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: var(--border);
    border-radius: 10px;
    background-color: white;
    font-family: inherit;
    font-size: 16px;
    box-shadow: 3px 3px 0 #111;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #111;
    vertical-align: middle;
}

label {
    font-weight: 700;
}


/* =========================================================
   11. نافذة الإعلان + نافذة الانتظار + رسالة التحديث
   ========================================================= */

/* نافذة طلب الإذن بعرض الإعلان */
dialog.reward-dialog {
    width: min(90vw, 360px);
    padding: 18px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: white;
    box-shadow: 6px 6px 0 #111;
    font-family: "Cairo", "Tajawal", sans-serif;
    text-align: center;
}

dialog.reward-dialog::backdrop {
    background-color: rgba(17, 17, 17, 0.55);
}

dialog.reward-dialog p {
    margin: 6px 0;
}

dialog.reward-dialog form {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

/* نافذة الانتظار (loading_window.html) */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: rgba(17, 17, 17, 0.6);
}

.loading-box {
    padding: 18px 26px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--yellow);
    box-shadow: 6px 6px 0 #111;
    font-weight: 900;
    text-align: center;
}

.loading-squares {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.loading-squares span {
    width: 16px;
    height: 16px;
    border: var(--thin-border);
    background-color: white;
    animation: jump 0.9s ease-in-out infinite;
}

.loading-squares span:nth-child(2) {
    background-color: var(--pink);
    animation-delay: 0.15s;
}

.loading-squares span:nth-child(3) {
    background-color: var(--blue);
    animation-delay: 0.3s;
}

@keyframes jump {
    50% {
        transform: translateY(-10px);
    }
}

/* رسالة التحديث الإلزامي */
.update-note {
    display: none;
    padding: 20px;
    margin-top: 10px;
    border: var(--border);
    border-radius: var(--radius);
    background-color: var(--pink);
    box-shadow: var(--shadow);
    text-align: center;
}

.update-note h2 {
    margin: 0 0 8px;
}


/* =========================================================
   12. أسماء الأنماط القديمة المستخدمة داخل الدروس
   ========================================================= */
.question {
    border-right-color: var(--pink) !important;
    font-weight: 700;
}

.answer {
    color: var(--text-green);
}

/* نص أسود حتى لا يختفي على الخلفية الفاتحة
   (العناوين h2/h3 التي تحمل هذا الاسم تبقى بيضاء على ملصقها الأسود لأن قاعدة .lesson-page h3 أقوى) */
.section-title {
    color: var(--text-color);
}

.question-area {
    padding: 10px 16px;
    margin: 10px 0;
    border: var(--thin-border);
    border-radius: 10px;
    background-color: white;
}

.simple-table td,
.simple-table tr {
    border: 1.5px solid #111;
}

.boxed {
    padding: 2px 8px;
    border: var(--thin-border);
    border-radius: 6px;
}

/* أنماط الحركة القديمة */
.opasity-flip {
    animation: flip-opacity 3s linear infinite;
}

@keyframes flip-opacity {
    50% {
        opacity: 0.2;
    }
}

.flip-color {
    animation: flip-text-color 3s linear infinite;
}

@keyframes flip-text-color {
    0% {
        color: var(--text-red);
    }

    50% {
        color: var(--text-green);
    }

    100% {
        color: var(--text-purple);
    }
}

.flip-background {
    animation: flip-background 3s linear infinite;
}

@keyframes flip-background {
    50% {
        background-color: var(--bg-yellow);
    }
}

/* أزرار قديمة ما زالت داخل بعض الصفحات */
.button1,
.button2,
.button3,
.button4,
.button5,
.button6,
.button7 {
    padding: 10px 20px;
    margin: 6px;
    border: var(--border);
    border-radius: 10px;
    background-color: var(--yellow);
    color: #111;
    font-weight: 700;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.button1:active,
.button2:active,
.button3:active,
.button4:active,
.button5:active,
.button6:active,
.button7:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #111;
}