/*
   ─────────────────────────────────────────────────────────────
   ٥ · الصفحات العامة: الواجهة والكتالوج والحساب
   ─────────────────────────────────────────────────────────────
*/

/* ══════════════════════════════════════════
   الواجهة الرئيسية
   ══════════════════════════════════════════ */

.hero {
    position: relative;
    background: var(--surface);
    color: var(--text);
    padding-block: var(--s-10) var(--s-11);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: center; }

@media (max-width: 991px) {
    .hero { padding-block: var(--s-8) var(--s-9); }
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: .3em .9em;
    margin-bottom: var(--s-5);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    color: var(--p-700);
    background: var(--p-50);
    border: 1px solid var(--p-200);
    border-radius: var(--r-pill);
}

.hero__title {
    font-size: clamp(1.9rem, 4.2vw, var(--t-4xl));
    font-weight: var(--fw-black);
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--text);
    margin: 0 0 var(--s-5);
    text-wrap: balance;
}

.hero__subtitle {
    font-size: var(--t-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--text-2);
    max-width: 52ch;
    margin: 0 0 var(--s-7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* الزر الأساسي في الواجهة هو نفسه في كل مكان: كان أبيض هنا وبلون الهوية
   في بقية المنصة، فبدا العرض الأول وكأنه من موقع آخر. الثانوي يعالجه
   ‎.ink .btn-secondary‎ في طبقة المكوّنات. */

.hero__points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }

.hero__point {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-4) var(--s-5);
    background: var(--ink-fill);
    border: 1px solid var(--ink-line);
    border-radius: var(--r);
    margin: 0;
}

.hero__point .icon { color: var(--p-300); margin-top: .2em; }
.hero__point-title { display: block; font-weight: var(--fw-semibold); color: var(--n-0); margin-bottom: .15rem; }
.hero__point-text { display: block; font-size: var(--t-sm); color: var(--n-400); line-height: var(--lh-snug); }

/* شريط الأرقام تحت الواجهة */
.stat-band {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.stat-strip {
    display: grid;
    /* min(100%, …) عشان رقمين يقفوا جنب بعض حتى على موبايل ٣٢٠px، والحد الأقصى
       للعرض عشان على التابلت مايتفرقوش لآخر الشاشة ويسيبوا نصها فاضي */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--s-5);
    max-width: 44rem;
    margin-inline: auto;
    padding-block: var(--s-7);
}

.stat-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
}

.stat-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: var(--r-lg);
}

.stat-strip__item--courses .stat-strip__icon { background: linear-gradient(135deg, var(--p-50), var(--p-200)); color: var(--p-700); }
.stat-strip__item--lessons .stat-strip__icon { background: var(--ok-50); color: var(--ok-600); }
.stat-strip__item--certs   .stat-strip__icon { background: var(--a-50);  color: var(--a-600); }

.stat-strip__body { text-align: start; }

.stat-strip__value {
    display: block;
    font-size: var(--t-2xl);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.stat-strip__label { display: block; font-size: var(--t-sm); color: var(--text-muted); margin-top: var(--s-1); }

/* موبايل صغير: الرقمين جنب بعض — الأيقونة والمسافة أصغر عشان الكلام مايتكسرش */
@media (max-width: 420px) {
    .stat-strip { gap: var(--s-3); padding-block: var(--s-5); }
    .stat-strip__item { gap: var(--s-3); }
    .stat-strip__icon { width: 2.5rem; height: 2.5rem; }
    .stat-strip__value { font-size: var(--t-xl); }
}

/* ══════════════════════════════════════════
   بطاقة الكورس
   ══════════════════════════════════════════ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: var(--s-5);
}

.card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

/* الوحدات والدروس: عدد ثابت في الصف مش «أكبر عدد يساع» — ٤ هنا، و٢ على
   التابلت و١ على الموبايل (app.css). الصنف مكرَّر عشان يغلب قواعد
   ‎.card-grid‎ العامة في responsive.css اللي بتتحمّل بعد الملف ده. */
.card-grid.card-grid--units { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.course-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
}

.course-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.course-card__link:hover { text-decoration: none; color: inherit; }

.course-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--surface-inset);
    overflow: hidden;
}

.course-card__media img { width: 100%; height: 100%; object-fit: cover; }

.course-card__level {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-start: var(--s-3);
    padding: .2em .7em;
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-fg);
    background: var(--overlay-chip);
    backdrop-filter: blur(6px);
    border-radius: var(--r-pill);
}

.course-card__body { flex: 1; padding: var(--s-4) var(--s-5); }

.course-card__title {
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: 0 0 var(--s-2);
    color: var(--p-800);
    transition: color var(--dur) var(--ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card:hover .course-card__title { color: var(--p-600); }

.course-card__subtitle {
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    margin: 0 0 var(--s-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card__instructor {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin: 0 0 var(--s-3);
}

.course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.course-card__meta span { display: inline-flex; align-items: center; gap: var(--s-1); }
.course-card__meta .icon { color: var(--text-faint); }

.course-card__rating { color: var(--a-600); font-weight: var(--fw-semibold); }
.course-card__rating .icon { color: var(--a-500); fill: var(--a-500); stroke: none; }

.course-card__footer {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--line-soft);
    background: var(--surface-sunken);
}

.price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    font-size: var(--t-md);
    font-weight: var(--fw-bold);
    color: var(--p-700);
    font-variant-numeric: tabular-nums;
}

.price--free { color: var(--ok-600); }
.price--lg { font-size: var(--t-2xl); font-weight: var(--fw-bold); }

.price__compare {
    font-size: var(--t-sm);
    font-weight: var(--fw-regular);
    color: var(--text-faint);
    text-decoration: line-through;
}

/* ══════════════════════════════════════════
   بطاقة الوحدة (منهج الكورس)
   ══════════════════════════════════════════ */

.module-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.module-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
}

.module-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.module-card__link:hover { text-decoration: none; color: inherit; }

.module-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--surface-inset);
    color: var(--n-300);
    overflow: hidden;
}

/* أغلفة الوحدات غالبًا تصاميم بوستر رأسية (عنوان وشعار موزّعان على طولها) لا
   صور أفقية — قصّها لملء ١٦:٩ يقتطع ما يهم من التصميم، فتُعرض كاملة غير مقصوصة. */
.module-card__media img { width: 100%; height: 100%; object-fit: contain; }
.module-card__media .icon { width: 2.5rem; height: 2.5rem; }

.module-card__badge {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-start: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}

.module-card__badge .icon { width: 1rem; height: 1rem; }

.module-card.is-locked .module-card__media img,
.module-card.is-locked .cover-fallback { opacity: .5; filter: grayscale(.4); }

.module-card__body { flex: 1; padding: var(--s-4) var(--s-5); }

.module-card__title {
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: 0 0 var(--s-2);
    color: var(--p-800);
    transition: color var(--dur) var(--ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-card:hover .module-card__title { color: var(--p-600); }

.module-card__subtitle {
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    margin: 0 0 var(--s-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.module-card__meta span { display: inline-flex; align-items: center; gap: var(--s-1); }
.module-card__meta .icon { color: var(--text-faint); }

.module-card__footer {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--line-soft);
    background: var(--surface-sunken);
}

.module-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    color: var(--accent);
}

/* ══════════════════════════════════════════
   بطاقة الدرس (دروس الوحدة)
   ══════════════════════════════════════════ */

.lesson-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.lesson-card:not(.is-locked):hover {
    border-color: var(--line-strong);
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
}

.lesson-card.is-locked { opacity: .75; }

.lesson-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.lesson-card__link:hover { text-decoration: none; color: inherit; }

.lesson-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--surface-inset);
    color: var(--n-300);
    overflow: hidden;
}

.lesson-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* أيقونة التشغيل فوق الاسم البديل تحجبه — تكفي البطاقة كلها رابطًا */
.cover-fallback:not([hidden]) ~ .lesson-card__play { display: none; }

.lesson-card.is-locked .lesson-card__media img,
.lesson-card.is-locked .cover-fallback { opacity: .5; filter: grayscale(.4); }

.lesson-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-fg);
    background: linear-gradient(0deg, rgb(0 0 0 / 25%), transparent 60%);
}

.lesson-card__play .icon { width: 2.75rem; height: 2.75rem; filter: drop-shadow(0 1px 4px rgb(0 0 0 / 35%)); }

.lesson-card__badge {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-start: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}

.lesson-card__body { flex: 1; padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }

.lesson-card__title {
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: 0;
    color: var(--p-800);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lesson-card__lock-reason { font-size: var(--t-sm); color: var(--warn-600); margin: 0; }

.lesson-card__duration {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.lesson-card__duration .icon { color: var(--text-faint); }

/* ══════════════════════════════════════════
   خريطة المنهج (كل الوحدات والدروس)
   ══════════════════════════════════════════ */

.curriculum-map {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface);
}

.curriculum-map__module + .curriculum-map__module { border-top: 1px solid var(--line); }

.curriculum-map__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-5);
    background: var(--surface-sunken);
    cursor: pointer;
    list-style: none;
}

.curriculum-map__head::-webkit-details-marker { display: none; }

.curriculum-map__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--p-50);
    color: var(--p-700);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
}

.curriculum-map__title { font-weight: var(--fw-semibold); color: var(--p-800); }
.curriculum-map__count { font-size: var(--t-sm); color: var(--text-muted); }

.curriculum-map__module.is-locked .curriculum-map__index { background: var(--n-100); color: var(--n-600); }

.curriculum-map__lessons { list-style: none; margin: 0; padding: 0; }

.curriculum-map__lesson {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--line-soft);
}

.curriculum-map__lesson > .icon { flex-shrink: 0; margin-top: .15rem; color: var(--accent); }
.curriculum-map__lesson.is-done > .icon { color: var(--ok-700); }
.curriculum-map__lesson.is-locked { color: var(--text-faint); }
.curriculum-map__lesson.is-locked > .icon { color: var(--text-faint); }

.curriculum-map__lesson-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.curriculum-map__reason { font-size: var(--t-xs); color: var(--warn-600); }
.curriculum-map__minutes { flex-shrink: 0; font-size: var(--t-sm); color: var(--text-muted); }

/* ══════════════════════════════════════════
   الكتالوج: التصفية والنتائج
   ══════════════════════════════════════════ */

.catalog {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
}

@media (max-width: 991px) {
    .catalog { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

.filters {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

@media (max-width: 991px) {
    .filters { position: static; }
}

/* ─── الطيّ ───
   ‎<details>‎ لا ‎<div>‎ + سكربت: الطيّ يعمل بلا جافاسكربت، ويتولّى
   ui.js إغلاقه على الشاشات الضيّقة وحدها. المقبض مخفيّ على المكتب
   حيث لا يزاحم العمود الجانبي شيئًا. */

.filters__summary {
    display: none;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    font-size: var(--t-ui);
    font-weight: var(--fw-semibold);
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.filters__summary::-webkit-details-marker { display: none; }
.filters__summary:hover { background: var(--surface-sunken); }
.filters__summary .icon { color: var(--text-muted); }

.filters__caret { margin-inline-start: auto; transition: transform var(--dur) var(--ease); }
.filters__disclosure[open] .filters__caret { transform: rotate(180deg); }

.filters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: .35em;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--text-invert);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991px) {
    .filters__summary { display: flex; }
    .filters__disclosure[open] .filters__summary { border-bottom: 1px solid var(--line-soft); }
}

.filters__group { padding: var(--s-5); border-bottom: 1px solid var(--line-soft); }
.filters__group:last-child { border-bottom: 0; }

.filters__heading {
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    margin: 0 0 var(--s-3);
}

/* ─── مجموعة الرقائق ───
   روابط لا خانات اختيار: الحالة في العنوان، والتنقّل بالسهم أو باللمس
   لا يفرّق. «الكل» رقاقة صريحة تعيد إلى الرابط بلا هذا المعيار. */

.chip-set { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--control-h-sm);
    padding-inline: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.chip:hover { border-color: var(--p-300); color: var(--text); text-decoration: none; background: var(--surface-sunken); }

.chip.is-active {
    background: var(--p-50);
    border-color: var(--p-300);
    color: var(--p-800);
    font-weight: var(--fw-semibold);
}

.chip.is-active:hover { background: var(--p-100); color: var(--p-900); }

/* ─── شريط المرشّحات المُفعَّلة ─── */

.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.active-filters__label {
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
}

.active-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    max-width: 16rem;
    padding: .3em .5em .3em .85em;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--p-800);
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

html[dir='rtl'] .active-filters__chip { padding: .3em .85em .3em .5em; }

.active-filters__chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filters__chip .icon { flex: none; color: var(--text-muted); }
.active-filters__chip:hover { background: var(--p-100); border-color: var(--p-400); text-decoration: none; color: var(--p-900); }
.active-filters__chip:hover .icon { color: inherit; }

.active-filters__clear {
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    margin-inline-start: var(--s-2);
}

.active-filters__clear:hover { color: var(--accent); }

.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li { margin: 0; }

.category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    margin-inline: calc(var(--s-3) * -1);
    border-radius: var(--r-sm);
    font-size: var(--t-ui);
    color: var(--text-2);
    transition: background-color var(--dur-fast) var(--ease);
}

.category-list a:hover { background: var(--n-50); text-decoration: none; color: var(--text); }
.category-list a.is-active { background: var(--p-50); color: var(--p-800); font-weight: var(--fw-semibold); }

.category-list__count {
    font-size: var(--t-xs);
    font-weight: var(--fw-medium);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.catalog__toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
}

.catalog__sort { margin-inline-start: auto; min-width: 12rem; }

/* ══════════════════════════════════════════
   صفحة الكورس
   ══════════════════════════════════════════ */

.course-hero {
    position: relative;
    background: var(--ink);
    color: var(--n-200);
    padding-block: var(--s-7) var(--s-9);
}

.course-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(50rem 26rem at 80% 0%, rgba(73, 108, 171, .28), transparent 62%);
    pointer-events: none;
}

.course-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8);
    align-items: start;
}

@media (max-width: 991px) {
    .course-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.course-hero .breadcrumb { color: var(--n-500); }
.course-hero .breadcrumb-item a { color: var(--n-400); }
.course-hero .breadcrumb-item a:hover { color: var(--n-100); }
.course-hero .breadcrumb-item.active { color: var(--n-300); }
.course-hero .breadcrumb-item + .breadcrumb-item::before { color: var(--n-600); }

.course-hero__title {
    font-size: clamp(1.6rem, 3.4vw, var(--t-3xl));
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--n-0);
    margin: 0 0 var(--s-4);
}

.course-hero__subtitle {
    font-size: var(--t-lg);
    font-weight: var(--fw-light);
    color: var(--n-300);
    line-height: var(--lh-body);
    margin: 0 0 var(--s-5);
    max-width: 56ch;
}

.course-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-6);
    font-size: var(--t-ui);
    color: var(--n-400);
    margin-bottom: var(--s-5);
}

.course-hero__meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.course-hero__meta .icon { color: var(--n-500); }
.course-hero__meta .is-rating { color: var(--a-500); }
.course-hero__meta .is-rating .icon { color: var(--a-500); fill: var(--a-500); stroke: none; }

.course-hero__instructor {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
    background: var(--ink-fill);
    border: 1px solid var(--ink-line);
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    color: var(--n-300);
}

html[dir='rtl'] .course-hero__instructor { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }

.course-hero__instructor strong { color: var(--n-0); font-weight: var(--fw-semibold); }

/* بطاقة الحجز */
.buy-card {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4));
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-4);
    overflow: hidden;
    color: var(--text);
}

@media (max-width: 991px) { .buy-card { position: static; } }

/* بطاقة الحجز سطح يتبع السمة داخل ترويسة حبر ثابتة الدكانة.
   سلّم الحبر يسري على أبنائها، فيلبس زرّها الأساسي درجة الوضع الفاتح
   ولو كانت المنصة في الداكن. الأدوار (‎--accent‎ و‎--text-invert‎)
   محسوبة على الجذر فتعيده إلى لون الزر نفسه في بقية الشاشات. */
.buy-card .btn-primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--text-invert);
    --btn-line: var(--accent);
    --btn-bg-hover: var(--accent-hover);
    --btn-line-hover: var(--accent-hover);
}

.buy-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.buy-card__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.buy-card__body { padding: var(--s-5); }
.buy-card__price { margin-bottom: var(--s-5); }

.buy-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    overflow: hidden;
    margin: var(--s-5) 0 0;
}

.buy-card__stat {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    font-size: var(--t-sm);
    color: var(--text-2);
}

.buy-card__stat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-card__stat .icon { color: var(--ok-500); flex: none; }

.buy-card__note {
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    margin: var(--s-3) 0 0;
}

/* أقسام محتوى الكورس */
.course-layout {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--s-8);
    align-items: start;
}

@media (max-width: 991px) {
    .course-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.content-section { margin-bottom: var(--s-8); }
.content-section:last-child { margin-bottom: 0; }

.content-section__title {
    font-size: var(--t-xl);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--line);
}

.outcomes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--s-3) var(--s-5);
}

.outcomes li { display: flex; align-items: flex-start; gap: var(--s-3); margin: 0; }
.outcomes .icon { color: var(--ok-500); margin-top: .2em; flex: none; }

.bullet-list { list-style: none; padding: 0; margin: 0; }

.bullet-list li {
    position: relative;
    padding-inline-start: var(--s-5);
    margin-bottom: var(--s-2);
}

.bullet-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .65em;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--line-strong);
}

.prose { color: var(--text-2); font-size: var(--t-md); line-height: var(--lh-body); }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.prose h3 { font-size: var(--t-lg); margin-top: var(--s-6); }
.prose > :first-child { margin-top: 0; }

.sidebar-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s-5);
    margin-bottom: var(--s-5);
}

.sidebar-block__title {
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-faint);
    margin: 0 0 var(--s-3);
}

/* ══════════════════════════════════════════
   صفحات الحساب
   ══════════════════════════════════════════ */

.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding-block: var(--s-9) var(--s-10);
}

.auth__inner { width: 100%; max-width: 27rem; }
.auth__inner--wide { max-width: 34rem; }

.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: var(--s-7);
}

@media (max-width: 575px) { .auth-card { padding: var(--s-5); } }

.auth-card__head { margin-bottom: var(--s-6); }

.auth-card__title {
    font-size: var(--t-2xl);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--s-2);
    letter-spacing: -.01em;
}

.auth-card__subtitle { color: var(--text-muted); margin: 0; line-height: var(--lh-snug); }

.auth-card--centered { text-align: center; }
.auth-card--centered .auth-card__head { margin-bottom: var(--s-5); }

.auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--s-5);
    border-radius: 50%;
    background: var(--p-50);
    color: var(--p-600);
    border: 1px solid var(--p-100);
}

.auth-icon--success { background: var(--ok-50); color: var(--ok-600); border-color: var(--ok-100); }
.auth-icon--danger  { background: var(--err-50); color: var(--err-500); border-color: var(--err-100); }
.auth-icon--warning { background: var(--warn-50); color: var(--warn-600); border-color: var(--warn-100); }

.auth__foot { text-align: center; margin-top: var(--s-5); color: var(--text-muted); font-size: var(--t-ui); }

/* صفحة الخطأ الموحدة: خطوات التبليغ + كود المشكلة اللي بيبان في السكرين شوت */
.error-page__icon { animation: error-wobble 2.4s ease-in-out infinite; }

@keyframes error-wobble {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(-12deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) { .error-page__icon { animation: none; } }

.error-page__steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0 0 var(--s-5);
    text-align: start;
}

.error-page__steps li {
    position: relative;
    counter-increment: step;
    padding-inline-start: 2.5rem;
    padding-block: var(--s-2);
    line-height: var(--lh-snug);
}

.error-page__steps li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .4rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--p-50);
    border: 1px solid var(--p-200);
    color: var(--p-700);
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
}

.error-page__ref {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-4);
    margin-bottom: var(--s-5);
    border: 1px dashed var(--accent-line);
    border-radius: var(--r);
    background: var(--surface-inset);
    font-size: var(--t-ui);
    color: var(--text-muted);
}

.error-page__code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--t-xl);
    font-weight: var(--fw-bold);
    letter-spacing: .15em;
    color: var(--text);
}

.error-page__actions { display: grid; gap: var(--s-2); }

.error-page__tech {
    margin-top: var(--s-5);
    text-align: start;
    font-size: var(--t-xs);
}

.error-page__tech pre {
    max-height: 20rem;
    overflow: auto;
    padding: var(--s-3);
    border-radius: var(--r);
    background: var(--surface-inset);
    white-space: pre-wrap;
    word-break: break-word;
}

.auth__brand { display: flex; justify-content: center; margin-bottom: var(--s-6); }

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.label-row .form-label { margin-bottom: var(--s-2); }
.label-row a { font-size: var(--t-sm); font-weight: var(--fw-medium); }

/* ══════════════════════════════════════════
   إعدادات الحساب
   ══════════════════════════════════════════ */

.settings {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
}

@media (max-width: 991px) {
    .settings { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

.settings-nav {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4));
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s-2);
}

@media (max-width: 991px) {
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
}

.settings-nav__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-ui);
    font-weight: var(--fw-medium);
    color: var(--text-2);
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.settings-nav__item .icon { color: var(--text-faint); }
.settings-nav__item:hover { background: var(--n-50); color: var(--text); text-decoration: none; }
.settings-nav__item.is-active { background: var(--p-50); color: var(--p-800); font-weight: var(--fw-semibold); }
.settings-nav__item.is-active .icon { color: var(--p-600); }

/* قائمة الأجهزة */
.device-list { list-style: none; padding: 0; margin: 0; }

.device-item {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-4) 0;
    border-top: 1px solid var(--line-soft);
    margin: 0;
}

.device-item:first-child { border-top: 0; padding-top: 0; }

.device-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-sm);
    background: var(--surface-inset);
    color: var(--text-muted);
    flex: none;
}

.device-item__info { flex: 1; min-width: 12rem; }

.device-item__name {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: var(--fw-semibold);
    color: var(--text);
    flex-wrap: wrap;
}

.device-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin-top: var(--s-1);
}

/* ══════════════════════════════════════════
   قائمة بيانات: مصطلح ووصفه في سطر
   ══════════════════════════════════════════ */

.data-list { margin: 0; padding: 0; }

.data-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--line-soft);
}

.data-list__row:last-child { border-bottom: 0; }

.data-list dt { color: var(--text-muted); font-size: var(--t-ui); font-weight: var(--fw-regular); flex: none; }
.data-list dd { margin: 0; font-weight: var(--fw-semibold); color: var(--text); text-align: end; }
.data-list--flush .data-list__row { padding-inline: 0; }

/* رقم الشهادة: يُقرأ حرفًا حرفًا عند إملائه على الدعم،
   فتُوسَّع المسافة بين الحروف ويُثبَّت عرضها */
.serial {
    font-family: var(--font-mono);
    background: var(--surface-inset);
    border: 1px solid var(--line);
    padding: .2em .55em;
    border-radius: var(--r-xs);
    letter-spacing: .06em;
    font-size: var(--t-ui);
}

/* ══════════════════════════════════════════
   صفحات نصية (الشروط والخصوصية)
   ══════════════════════════════════════════ */

.doc-page { max-width: 72ch; }
.doc-page h2 { margin-top: var(--s-7); font-size: var(--t-xl); }
.doc-page h3 { margin-top: var(--s-6); }
.doc-page p, .doc-page li { color: var(--text-2); font-size: var(--t-md); }

.doc-page__updated {
    font-size: var(--t-sm);
    color: var(--text-muted);
    padding-bottom: var(--s-5);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--line);
}

/* ── مقال الدرس المجاني (/courses/{slug}/lessons/{lesson}) ── */

.lesson-article { max-width: 52rem; }
.lesson-article__head { margin-bottom: var(--s-5); }
.lesson-article__title { font-size: var(--t-2xl, 1.9rem); font-weight: var(--fw-bold); line-height: 1.4; margin: 0 0 var(--s-3); }
.lesson-article__lead { color: var(--text-2); font-size: var(--t-md); line-height: var(--lh-body); margin: 0; }

.lesson-article__video {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--s-6);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--d-950);
    color: #fff;
    text-decoration: none;
}

.lesson-article__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lesson-article__video:hover { text-decoration: none; }

.lesson-article__play {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    background: rgb(0 0 0 / 65%);
    font-weight: var(--fw-bold);
    transition: transform .2s ease;
}

.lesson-article__video:hover .lesson-article__play { transform: scale(1.05); }

/* النص نفسه بتنسيق المشغّل، من غير الخط الفاصل اللي فوقه هناك */
.lesson-article__body.player__prose { margin-top: 0; padding-top: 0; border-top: 0; }

.lesson-article__box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-top: var(--s-6);
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.lesson-article__box > div:not(.lesson-article__box-actions) { flex: 1 1 16rem; }
.lesson-article__box--course { border-color: var(--p-200); background: var(--p-50); }
.lesson-article__box-title { font-size: var(--t-md); font-weight: var(--fw-bold); margin: 0 0 var(--s-1); }
.lesson-article__box-text { color: var(--text-2); margin: 0; }
.lesson-article__box-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.lesson-article__pager {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.lesson-article__pager-link {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.lesson-article__pager-link:hover { border-color: var(--p-300); text-decoration: none; }
.lesson-article__pager-link small { color: var(--text-muted); }
.lesson-article__pager-link span { font-weight: var(--fw-bold); }
.lesson-article__pager-link--next { text-align: end; }

/* رابط «اقرأ الشرح» تحت كارت الدرس المجاني في صفحة الوحدة */
.lesson-card__read {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin: 0 var(--s-4) var(--s-3);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
}

/* ── صفحات الهبوط (البرمجة للثانوية العامة / البكالوريا) ── */

.landing-eyebrow {
    display: inline-block;
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    color: var(--p-700);
    background: var(--p-50);
    border: 1px solid var(--p-200);
    border-radius: var(--r-pill);
    padding: var(--s-1) var(--s-3);
    margin: var(--s-3) 0 var(--s-2);
}

.landing-body { display: grid; gap: var(--s-7); }
.landing-prose { max-width: 72ch; }
.landing-prose h2 { margin-top: var(--s-6); }

.landing-faq { display: grid; gap: var(--s-3); max-width: 72ch; }

.landing-faq__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.landing-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    cursor: pointer;
    list-style: none;
}

.landing-faq__q::-webkit-details-marker { display: none; }
.landing-faq__q h3 { font-size: var(--t-md); font-weight: var(--fw-bold); margin: 0; }
.landing-faq__caret { flex: none; transition: transform .2s ease; }
.landing-faq__item[open] .landing-faq__caret { transform: rotate(180deg); }

.landing-faq__a {
    margin: 0;
    padding: 0 var(--s-5) var(--s-4);
    color: var(--text-2);
    line-height: var(--lh-body);
}