/* ============================================================
   مستكشف الكورسات: تصنيف ← مستوى ← كورس ← باقة

   ملفٌّ مستقلّ لأنّ الشاشة تُعرض في مكانين: الموقع العام ولوحة الطالبة.
   وألوانه تُقرأ من الصفحة المضيفة — لكل متغيّر بديلٌ يسقط إلى أسماء
   البوّابة ثم إلى قيمة صريحة، فلا يرث الموقعُ لونَ اللوحة ولا العكس.
   ============================================================ */

/* السهم يتبع اتجاه القراءة: القاعدة معرَّفة في site.css، ولوحة الطالبة لا
   تحمّلها — فبقيت أسهم «اختر هذا الكورس» تشير يساراً في الصفحة الإنجليزية */
[dir="ltr"] .cx .flip-ltr { transform: scaleX(-1); }

.cx { width: min(1320px, 100%); margin-inline: auto; }

.cx-lead { text-align: center; color: var(--text-muted, var(--ink-3, #6b7280)); margin-bottom: 22px; font-size: .95rem; }

.cx-pane { display: none; }
.cx-pane.is-on { display: block; animation: cxIn .28s ease both; }

@keyframes cxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cx-pane.is-on { animation: none; } }

/* ① المستويات: شريط منزلق، الأوسط كبير وجيرانه صغار */
.cx-levels {
    position: relative;
    /* overflow مقصوصٌ لا ظاهر: Swiper يمدّ مساره بعرض كل الشرائح، وتركُه
       ظاهراً يدفع الصفحة كلها إلى تمرير أفقي. والحشو الرأسي يمنع قصّ
       الشريحة الوسطى وهي مكبَّرة */
    overflow: hidden;
    padding: 18px 0 14px;
}

.cx-levels .swiper-wrapper { align-items: center; }

.cx-levels .swiper-slide {
    width: min(330px, 80vw);
    transition: transform .35s ease, opacity .35s ease;
    transform: scale(.84);
    opacity: .45;
}

.cx-levels .swiper-slide-active { transform: scale(1); opacity: 1; z-index: 2; }

/* الجاران مباشرةً أوضح من البعيدين: تدرّجٌ يقود العين إلى الوسط */
.cx-levels .swiper-slide-prev,
.cx-levels .swiper-slide-next { transform: scale(.9); opacity: .7; }

@media (prefers-reduced-motion: reduce) { .cx-levels .swiper-slide { transition: none; } }

/* البطاقة ملوّنة كلها لا شريطاً فوق جسمٍ أبيض: اللون هو هوية المستوى،
   وحصرُه في رأسٍ ضيّق كان يقطع البطاقة نصفين */
.cx-level {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px 22px 22px;
    border-radius: 22px;
    border: 0;
    overflow: hidden;
    font-family: inherit;
    text-align: start;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(31, 34, 82, .1);
    transition: box-shadow .3s ease;
}

.cx-levels .swiper-slide-active .cx-level { box-shadow: 0 26px 54px rgba(31, 34, 82, .3); }

/* درجة اللون تتبع موقع المستوى على السلّم: التدرّج يقول «بداية» و«نهاية»
   قبل أن يُقرأ الاسم */
.cx-level.step-0 { background: linear-gradient(150deg, #17806c, #2fae94); }
.cx-level.step-1 { background: linear-gradient(150deg, #1a6d8c, #3aa5c8); }
.cx-level.step-2 { background: linear-gradient(150deg, #1c4e8f, #4a8fdc); }
.cx-level.step-3 { background: linear-gradient(150deg, #343aa8, #6d76e4); }
.cx-level.step-4 { background: linear-gradient(150deg, #533193, #8a61d8); }
.cx-level.step-5 { background: linear-gradient(150deg, #6b2c7e, #b25dc6); }
.cx-level.step-6 { background: linear-gradient(150deg, #8a2c52, #d45480); }

.cx-level-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    margin-bottom: 20px;
}

.cx-level-codes {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .05em;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 6px 14px;
}

/* موقعه من السلّم بخطٍّ واحد مقروء: الرقم الكبير مع كسرٍ صغير جداً كان
   يُقرأ رقماً سفلياً لا «واحد من سبعة» */
.cx-level-ord {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    /* الكسر يُقرأ يساراً←يميناً دائماً: في RTL كان «1/7» يُعرض «7/1»
       فيقول «السابع من واحد» */
    direction: ltr;
    unicode-bidi: isolate;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    opacity: .6;
}
.cx-level-ord small { font-size: .95rem; font-weight: 600; opacity: .85; }

.cx-level-body { display: flex; flex-direction: column; gap: 8px; padding: 0; }

.cx-level-name {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 2px 12px rgba(15, 16, 32, .18);
}

.cx-level-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .88);
}
.cx-level-count i { font-size: .85rem; opacity: .9; }

/* الزرّ أبيض على اللون: يقرأه العين فوق أي تدرّج من السبعة */
.cx-level-go {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-dark, var(--ink, #111));
    font-size: .94rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15, 16, 32, .22);
}
.cx-levels .swiper-slide-active .cx-level-go { display: flex; }
.cx-level-go i { font-size: .74rem; }

/* الأسهم: النقر باللمس يُوسّط، وهذه لمن يستعمل الفأرة */
.cx-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid #eef0f5;
    background: #ffffff;
    color: var(--primary-purple, var(--brand-500, #5b5ea6));
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(31, 34, 82, .12);
    transition: background-color .2s ease, color .2s ease;
}
.cx-nav:hover { background: var(--primary-purple, var(--brand-500, #5b5ea6)); color: #fff; }
.cx-nav.swiper-button-disabled { opacity: .35; cursor: default; }
.cx-prev { inset-inline-start: 0; }
.cx-next { inset-inline-end: 0; }

@media (max-width: 640px) { .cx-nav { display: none; } }

/* بلا Swiper: صفٌّ يُمرَّر بدل شريحة واحدة مقصوصة */
.cx-levels.is-plain .swiper-wrapper { overflow-x: auto; gap: 12px; }
.cx-levels.is-plain .swiper-slide { transform: none; opacity: 1; flex: 0 0 min(230px, 70%); }
.cx-levels.is-plain .cx-level-go { display: flex; }

/* الرجوع */
.cx-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 4px 0;
    margin-bottom: 14px;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--primary-purple, var(--brand-500, #5b5ea6));
    cursor: pointer;
}
.cx-back:hover { text-decoration: underline; }

/* ② الكورسات، مصنَّفة */
.cx-cat { margin-bottom: 26px; }
.cx-cat[hidden] { display: none; }

.cx-cat-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-dark, var(--ink, #111));
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef0f5;
}
.cx-cat-title i { color: var(--primary-purple, var(--brand-500, #5b5ea6)); margin-inline-end: 6px; }

.cx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
    gap: 18px;
}

/* نسخة الرئيسية: شريط يُسحب بدل شبكة تطول الصفحة */
.cx-cards.is-swipe {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin;
}
.cx-cards.is-swipe .cx-card { flex: 0 0 min(288px, 84%); scroll-snap-align: start; }

.cx-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid #eef0f5;
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    /* البطاقة زرٌّ على الموقع ورابطٌ في لوحة الطالبة — وهي بطاقة في الحالين:
       بلا هذين السطرين ترثُ من اللوحة خطَّ الرابط ولونَه، فيظهر الاسم
       والمهارات و«اختر هذا الكورس» مسطورةً بالأزرق داخل بطاقة */
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cx-card:hover,
.cx-card:focus,
.cx-card:focus-visible { text-decoration: none; }
.cx-card[hidden] { display: none; }

.cx-card:hover {
    transform: translateY(-4px);
    border-color: rgba(91, 94, 166, .45);
    box-shadow: 0 18px 38px rgba(31, 34, 82, .13);
}

/* الغلاف: صورة أو حرفان على تدرّج المسار — شكلٌ مقصود لا مربّع فارغ */
.cx-card-cover {
    position: relative;
    display: block;
    height: 132px;
    overflow: hidden;
}
.cx-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cx-card-cover.tint-0 { background: linear-gradient(135deg, #3a40a6, #6f77e0); }
.cx-card-cover.tint-1 { background: linear-gradient(135deg, #1f7a68, #34b39a); }
.cx-card-cover.tint-2 { background: linear-gradient(135deg, #8a5a1f, #d29b45); }
.cx-card-cover.tint-3 { background: linear-gradient(135deg, #6d2f7a, #b45fc4); }
.cx-card-cover.tint-4 { background: linear-gradient(135deg, #1e4f8a, #4a90d9); }

.cx-card-mono {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 3px 16px rgba(15, 16, 32, .3);
}

/* الشهادة شارةٌ على الغلاف: لا تزاحم الاسم ولا تُفقد في صفّ الحقائق */
.cx-card-cert {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #b8860b;
    font-size: .78rem;
    box-shadow: 0 2px 10px rgba(20, 20, 60, .22);
}

.cx-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 12px;
    flex: 1 1 auto;
}

.cx-card-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-dark, var(--ink, #111));
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cx-card-desc {
    font-size: .82rem;
    color: var(--text-muted, var(--ink-3, #6b7280));
    line-height: 1.75;
}

.cx-card-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.cx-card-skill {
    background: #eef0fb;
    color: #4a4d8c;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .7rem;
    font-weight: 600;
}
.cx-card-skill.is-more { background: #f1f2f7; color: #6b7280; }

/* القاع مدفوعٌ لأسفل: الأزرار تصطفّ مهما اختلفت أطوال الأوصاف */
.cx-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid #f1f3f9;
    background: #fbfbfe;
}

.cx-card-lessons { font-size: .76rem; color: #8b91a5; }
.cx-card-lessons i { margin-inline-end: 5px; }

.cx-card-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary-purple, var(--brand-500, #5b5ea6));
}
.cx-card-go i { font-size: .68rem; transition: transform .2s ease; }
.cx-card:hover .cx-card-go i { transform: translateX(-3px); }

/* ③ التفاصيل والباقات */
.cx-detail[hidden] { display: none; }

.cx-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cx-detail-head h3 { font-size: 1.35rem; font-weight: 700; color: var(--text-dark, var(--ink, #111)); margin: 0; }
.cx-detail-desc { color: var(--text-muted, var(--ink-3, #6b7280)); line-height: 1.9; margin-bottom: 14px; max-width: 70ch; }

.cx-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f1f2f7;
    color: #5a6076;
    font-size: .76rem;
    font-weight: 600;
}
.cx-chip.is-ok { background: #dcfce7; color: #166534; }
.cx-chip.is-skill { background: #eef0fb; color: #4a4d8c; }

.cx-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }

.cx-packages-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark, var(--ink, #111));
    margin: 0 0 14px;
}
.cx-packages-title i { color: var(--primary-purple, var(--brand-500, #5b5ea6)); margin-inline-end: 6px; }

.cx-empty {
    padding: 18px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    color: var(--text-muted, var(--ink-3, #6b7280));
    font-size: .88rem;
    margin-bottom: 20px;
}
.cx-empty i { color: var(--primary-purple, var(--brand-500, #5b5ea6)); margin-inline-end: 6px; }

.cx-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--primary-purple, var(--brand-500, #5b5ea6));
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(91, 94, 166, .3);
    transition: filter .2s ease, transform .2s ease;
}
.cx-cta:hover { filter: brightness(1.08); transform: translateY(-2px); color: #fff; }

/* ① التصنيفات: الخطوة الأولى — المجال قبل المستوى، شريطاً كشريط المستويات */
.cx-cats-swiper {
    position: relative;
    /* مقصوصٌ لا ظاهر: مسار Swiper يمتدّ بعرض كل الشرائح فيدفع الصفحة
       إلى تمرير أفقي. والحشو الرأسي يمنع قصّ الشريحة الوسطى مكبَّرةً */
    overflow: hidden;
    padding: 18px 0 14px;
}

.cx-cats-swiper .swiper-wrapper { align-items: center; }

.cx-cats-swiper .swiper-slide {
    width: min(360px, 84vw);
    height: auto;
    transition: transform .35s ease, opacity .35s ease;
    transform: scale(.84);
    opacity: .45;
}

.cx-cats-swiper .swiper-slide-active { transform: scale(1); opacity: 1; z-index: 2; }
.cx-cats-swiper .swiper-slide-prev,
.cx-cats-swiper .swiper-slide-next { transform: scale(.9); opacity: .7; }

@media (prefers-reduced-motion: reduce) { .cx-cats-swiper .swiper-slide { transition: none; } }

.cx-cat-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-height: 330px;
    padding: 26px 24px 24px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    text-align: start;
    box-shadow: 0 16px 38px rgba(31, 34, 82, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cx-cat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(31, 34, 82, .22); }

.cx-cat-card.tone-0 { background: linear-gradient(150deg, #3a40a6, #6f77e0); }
.cx-cat-card.tone-1 { background: linear-gradient(150deg, #17806c, #2fae94); }
.cx-cat-card.tone-2 { background: linear-gradient(150deg, #8a5a1f, #d29b45); }
.cx-cat-card.tone-3 { background: linear-gradient(150deg, #6b2c7e, #b25dc6); }
.cx-cat-card.tone-4 { background: linear-gradient(150deg, #1c4e8f, #4a8fdc); }
.cx-cat-card.tone-5 { background: linear-gradient(150deg, #4a4f63, #79809b); }


/* الزرّ على الوسطى وحدها: الجيران يُوسَّطون بالضغط، وهي وحدها تفتح */
.cx-cat-go {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-dark, var(--ink, #111));
    font-size: .92rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15, 16, 32, .22);
}
.cx-cats-swiper .swiper-slide-active .cx-cat-go { display: flex; }
.cx-cat-go i { font-size: .72rem; }

.cx-cats-swiper .swiper-slide-active .cx-cat-card { box-shadow: 0 26px 54px rgba(31, 34, 82, .28); }

/* بلا Swiper: صفٌّ يُمرَّر وكل بطاقة تفتح مباشرةً */
.cx-cats-swiper.is-plain .swiper-wrapper { overflow-x: auto; gap: 12px; }
.cx-cats-swiper.is-plain .swiper-slide { transform: none; opacity: 1; flex: 0 0 min(360px, 84%); }
.cx-cats-swiper.is-plain .cx-cat-go { display: flex; }

.cx-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.cx-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .18);
    font-size: 1.25rem;
}

.cx-cat-count {
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .8rem;
    font-weight: 700;
}

.cx-cat-name { font-size: 1.45rem; font-weight: 800; line-height: 1.35; }

.cx-cat-span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}
.cx-cat-span i { font-size: .78rem; opacity: .8; }

.cx-cat-skills { display: flex; flex-wrap: wrap; gap: 6px; }

.cx-cat-skill {
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    font-size: .74rem;
    font-weight: 600;
}

/* العيّنة تُقصّ على سطرين: أسماء الكورسات تطول فتُطيل البطاقة بلا حدّ */
.cx-cat-sample {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .82);
}
.cx-cat-sample b { font-weight: 700; color: rgba(255, 255, 255, .95); }

/* الزرّ إلى القاع مهما اختلف طول البطاقات فوقه */
.cx-cat-card .cx-cat-go { margin-top: auto; }

/* عنوان التصنيف فوق مجموعة الكورسات سقط: التصنيف يُختار في الخطوة الأولى */
.cx-cat[hidden] { display: none; }

/* ============================================================
   الجوّال: أن يُرى الشريطُ شريطاً

   على الهاتف كانت البطاقة تملأ العرض تقريباً (84vw)، وجارتها تُصغَّر
   إلى 0.9 فينسحب طرفها خارج الشاشة — فيبدو الشريط بطاقةً واحدة ساكنة.
   والأسهم مخفيّة تحت 640px، فلم يبقَ ما يقول «هنا ما يُمرَّر».

   ثلاثة أشياء تقولها معاً: جارةٌ تُطلّ، ونقاطٌ تعدّ، ودفعةٌ أولى تتحرّك.
   ============================================================ */
@media (max-width: 640px) {
    /* أضيق، فيظهر طرف الجارة: الإطلالة هي إشارة التمرير الأولى في كل واجهة */
    .cx-cats-swiper .swiper-slide { width: 72vw; }
    .cx-levels .swiper-slide      { width: 70vw; }
    .cx-plans .swiper-slide       { width: 74vw; }
    .cx-cards.is-swipe .cx-card   { flex: 0 0 74%; }

    /* وتصغيرٌ أخفّ للجارتين: 0.9 كانت تسحب طرفهما بعيداً عن حافة الشاشة
       فتُلغي الإطلالة التي أتينا بها */
    .cx-cats-swiper .swiper-slide-prev,
    .cx-cats-swiper .swiper-slide-next,
    .cx-levels .swiper-slide-prev,
    .cx-levels .swiper-slide-next { transform: scale(.95); opacity: .8; }
}

/* ── النقاط: كم واحدةً هنا، وأين أنا منها ── */
.cx-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    min-height: 10px;
}

.cx-dots .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--primary-purple, var(--brand-500, #5b5ea6));
    opacity: .28;
    transition: width .25s ease, opacity .25s ease;
}

.cx-dots .swiper-pagination-bullet-active {
    width: 20px;
    opacity: 1;
}

/* الشريط المحفوظ بلا مكتبة لا نقاط له: نُخفيها بدل تركها صفّاً ميتاً */
.cx-cats-swiper.is-plain .cx-dots,
.cx-levels.is-plain .cx-dots,
.cx-plans.is-plain .cx-dots { display: none; }

/* ── الدفعة الأولى: حركةٌ واحدة تقول «هذا يُمرَّر» ──
   تُشغَّل مرّةً عند أول ظهور للشريط، على اللمس وحده — والفأرة لها أسهمها. */
@media (hover: none) and (max-width: 640px) {
    .cx-nudge .swiper-wrapper,
    .cx-nudge.cx-cards.is-swipe { animation: cx-nudge .9s ease-in-out .35s 1; }
}

@keyframes cx-nudge {
    0%, 100% { transform: translateX(0); }
    35%      { transform: translateX(-26px); }
    70%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .cx-nudge .swiper-wrapper,
    .cx-nudge.cx-cards.is-swipe { animation: none; }
}