/* ============================================================
   منصة التاريخ والجغرافيا - نظام التصميم الموحد
   الهوية: برتقالي / ذهب / بيج / بني ترابي (مرجع: منصة شكري ماتكس)
   الخطوط: Alexandria (عناوين) + Cairo (نصوص)
   القاعدة: كل مكوّن بيتعرّف مرة واحدة هنا، وكل الصفحات بتستخدمه.
   ============================================================ */

/* ---------- تحكمات أصلية (select/scrollbar/autofill) تتبع الثيم ---------- */
html { color-scheme: light; }
html[data-bs-theme="dark"] { color-scheme: dark; }

/* ---------- خلفية الصفحة الأساسية (ورق دافي بتوهج هادئ) ---------- */
body {
    background-color: var(--color-paper, #fdfbf7);
    background-image:
        radial-gradient(50rem 28rem at 100% -5rem, rgba(249, 115, 22, 0.06), transparent 60%),
        radial-gradient(42rem 24rem at -5% 110%, rgba(245, 158, 11, 0.05), transparent 60%);
    background-attachment: fixed;
    font-family: var(--font-sans, "Cairo"), sans-serif;
}
[data-bs-theme="dark"] body {
    background-color: #0c0a09;
    background-image:
        radial-gradient(50rem 28rem at 100% -5rem, rgba(249, 115, 22, 0.08), transparent 60%),
        radial-gradient(42rem 24rem at -5% 110%, rgba(245, 158, 11, 0.06), transparent 60%);
}

/* ---------- الحقول (النماذج اللي بترندر من Django) ---------- */
.form-control {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--color-sand-200, #e8dcc0);
    background: #fff;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink, #3d2c1c);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    outline: none;
    border-color: #fb923c;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}
.form-control::placeholder { color: var(--color-sand-400, #bfa878); }
textarea.form-control { line-height: 1.7; }
.form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-muted, #8a7355);
}
.form-text {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--color-muted, #8a7355);
}
.form-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: #f97316;
    flex-shrink: 0;
}
.form-check-label { font-size: 0.875rem; font-weight: 600; color: var(--color-muted, #8a7355); }
[data-bs-theme="dark"] .form-control {
    background: #1c1917;
    border-color: #44403c;
    color: #e7e5e4;
}
[data-bs-theme="dark"] .form-label { color: #d6d3d1; }
[data-bs-theme="dark"] .form-text { color: #a8a29e; }
[data-bs-theme="dark"] .form-check-label { color: #d6d3d1; }

/* ============================================================
   دمج الصور مع الصفحة بتدرجات لونية (زي مواقع المدرسين المرجعية)
   القاعدة: الصورة مش بتتحط لوحدها - فوقها طبقات تدرج بألوان الهوية.
   ============================================================ */

/* تدرج خلفية فوق صورة الهيرو - فاتح وشفيّ عشان الصورة تبان،
   مع تركيز داكن متدرج خلف عمود النص بس (الناحية اليمنى) + توهجات دافية.
   النص بيتقرا بوضوح بفضل text-shadow (class .text-shadow-hero). */
.overlay-hero {
    background:
        /* تركيز داكن خلف النص بس (يمين) وبيختفي ناحية اليسار عشان الصورة تبان */
        linear-gradient(to left, rgba(42, 30, 18, 0.78) 0%, rgba(42, 30, 18, 0.45) 40%, rgba(42, 30, 18, 0.12) 72%, rgba(42, 30, 18, 0) 100%),
        /* توهجات دافية فاتحة بدل التغطية البنية الغامقة */
        radial-gradient(40rem 26rem at 85% -10%, rgba(234, 88, 12, 0.32), transparent 60%),
        radial-gradient(30rem 22rem at 0% 110%, rgba(245, 158, 11, 0.22), transparent 60%);
}

/* ظل نص للهيرو: بيخلي النص واضح فوق صورة فاتحة من غير overlay غامق */
.text-shadow-hero {
    text-shadow: 0 1px 3px rgba(42, 30, 18, 0.65), 0 5px 22px rgba(42, 30, 18, 0.45);
}

/* تدرج يذوّب حافة الصورة الجانبية اليمنى في خلفية الصفحة (يمين فوق) */
.img-blend-right {
    -webkit-mask-image: linear-gradient(to left, black 45%, transparent 98%);
    mask-image: linear-gradient(to left, black 45%, transparent 98%);
    background: linear-gradient(to left, rgba(253, 247, 237, 0.15), rgba(253, 247, 237, 0.6) 70%, var(--color-paper, #fdfbf7) 100%);
    background-blend-mode: soft-light;
}

/* تدرج يذوّب حافة الصورة الجانبية اليسرى في خلفية الصفحة (يسار تحت) */
.img-blend-left {
    -webkit-mask-image: linear-gradient(to right, black 45%, transparent 98%);
    mask-image: linear-gradient(to right, black 45%, transparent 98%);
    background: linear-gradient(to right, rgba(253, 247, 237, 0.15), rgba(253, 247, 237, 0.6) 70%, var(--color-paper, #fdfbf7) 100%);
    background-blend-mode: soft-light;
}

/* طبقة تدرج برتقالي→شفاف فوق صورة بطاقة قسم (تاريخ/جغرافيا) */
.overlay-card-img {
    background: linear-gradient(to top, rgba(42, 30, 18, 0.85) 0%, rgba(194, 65, 12, 0.35) 55%, rgba(245, 158, 11, 0.1) 100%);
}

/* نسخ داكنة من مزج الصور الجانبية (للهيرو الداكن) - فاتحة وشفيّة */
.img-blend-right-dark {
    -webkit-mask-image: linear-gradient(to left, black 45%, transparent 98%);
    mask-image: linear-gradient(to left, black 45%, transparent 98%);
    background: linear-gradient(to left, rgba(42, 30, 18, 0.05), rgba(42, 30, 18, 0.28) 70%, rgba(42, 30, 18, 0.45) 100%);
    background-blend-mode: soft-light;
}
.img-blend-left-dark {
    -webkit-mask-image: linear-gradient(to right, black 45%, transparent 98%);
    mask-image: linear-gradient(to right, black 45%, transparent 98%);
    background: linear-gradient(to right, rgba(42, 30, 18, 0.05), rgba(42, 30, 18, 0.28) 70%, rgba(42, 30, 18, 0.45) 100%);
    background-blend-mode: soft-light;
}

/* ---------- سلسلة الدروس (لوحة موادي) ---------- */
.lesson-chain {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: 8px 0;
}
.chain-node { display: flex; align-items: center; flex-shrink: 0; }
.chain-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-sand-100, #f4ecd9);
    border: 2px solid var(--color-sand-400, #bfa878);
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.chain-dot.done { background: #f97316; border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2); }
.chain-line { width: 28px; height: 2px; background: var(--color-sand-100, #f4ecd9); flex-shrink: 0; }
.chain-line.done { background: #f97316; }

/* ---------- التقدم (شريط النسبة) ---------- */
.progress { border-radius: 9999px; background: var(--color-sand-100, #f4ecd9); overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(135deg, #f97316, #f59e0b); border-radius: 9999px; }

/* ---------- ملف الملزمة ---------- */
.file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #ea580c;
    background: #fff7ed;
    border-radius: 0.6rem;
    text-transform: uppercase;
}
[data-bs-theme="dark"] .file-badge { background: rgba(234, 88, 12, 0.15); color: #fdba74; }

/* ---------- أفاڤاتار ---------- */
.avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff7ed;
    color: #ea580c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    overflow: hidden;
    flex-shrink: 0;
}

/* ---------- أسئلة الاختبار ---------- */
.quiz-question {
    border: 1px solid var(--color-sand-200, #e8dcc0);
    border-radius: 1rem;
    background: #fff;
}
[data-bs-theme="dark"] .quiz-question { background: #1c1917; border-color: #44403c; }
.quiz-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-sand-200, #e8dcc0);
    border-radius: 0.8rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.12s ease;
}
.quiz-choice:hover { border-color: #f97316; background: #fff7ed; }
.quiz-choice input { width: 1.1rem; height: 1.1rem; accent-color: #f97316; }
[data-bs-theme="dark"] .quiz-choice { border-color: #44403c; }
[data-bs-theme="dark"] .quiz-choice:hover { background: #292524; }

/* ---------- حقل كلمة السر (زرار الإظهار/الإخفاء) ---------- */
.password-toggle { position: relative; }
.password-toggle > input {
    padding-left: 2.75rem;
}
.password-eye {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-sand-400, #bfa878);
    padding: 0.25rem;
    transition: color 0.15s ease;
}
.password-eye:hover { color: #f97316; }
[data-bs-theme="dark"] .password-eye { color: #78716c; }
[data-bs-theme="dark"] .password-eye:hover { color: #fbbf24; }

/* ---------- حلقة النتيجة ---------- */
.result-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 20px 48px rgba(61, 44, 28, 0.14);
}

/* ---------- خيار الدفع ---------- */
.payment-option {
    border: 2px solid var(--color-sand-200, #e8dcc0);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 1rem;
}
.payment-option:hover { border-color: #f97316; background: #fff7ed; }
.payment-option.active { border-color: #f97316; background: #fff7ed; }

[data-bs-theme="dark"] .payment-option:hover { background: rgba(249, 115, 22, 0.12); }
[data-bs-theme="dark"] .payment-option.active { background: rgba(249, 115, 22, 0.12); }

/* ============================================================
   Responsive - منع الفيضان الأفقي وتحسينات الشاشات الصغيرة
   ============================================================ */
html, body { overflow-x: hidden; }

@media (max-width: 575.98px) {
    .result-ring { width: 112px; height: 112px; font-size: 1.6rem; }
}