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

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

/* السهم يتبع اتجاه القراءة: القاعدة معرَّفة في 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) {
    /* أضيق، فيظهر طرف الجارة: الإطلالة هي إشارة التمرير الأولى في كل واجهة.
       والقياس مقيَّدٌ بنسبةٍ من الحاوية لا بعرض الشاشة وحده: الشريط يُستضاف
       أحياناً داخل أقسامٍ متداخلة يأكل حشوُها ربع العرض — 296 بكسل من 390 في
       تقرير نتيجة الاختبار — فـ72vw هناك تساوي الحاوية كلها، فتختفي الجارة
       ويبدو الكورس واحداً فلا يُمرَّر. min تأخذ الأصغر، فتعمل في الحالتين. */
    .cx-cats-swiper .swiper-slide { width: min(72vw, 72%); }
    .cx-levels .swiper-slide      { width: min(70vw, 70%); }
    .cx-plans .swiper-slide       { width: min(74vw, 74%); }
    .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,
    .cx-plans .swiper-slide-prev,
    .cx-plans .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; }

/* ── الدفعة الأولى: حركةٌ واحدة تقول «هذا يُمرَّر» ──
   تُشغَّل مرّةً عند أول ظهور للشريط، على اللمس وحده — والفأرة لها أسهمها.

   وهي على البطاقات لا على .swiper-wrapper: المسار يحمل تحويل Swiper السطريّ،
   وحركةُ keyframes تعلو على النمط السطريّ في التتالي — فتقفز إلى صفرها ثم
   تعود إليه، وهذا ما يُرى وميضاً يظهر ويختفي قبل أن يستقرّ الشريط. والبطاقات
   تنزاح معاً فيُقرأ الأمر شريطاً يتحرّك، وصناديقُ الشرائح ثابتةٌ فلا تُمسّ
   حسابات المكتبة ولا يستقرّ شيءٌ منزاحاً إن تأخّر الجهاز. */
@media (hover: none) and (max-width: 640px) {
    .cx-nudge .cx-cat-card,
    .cx-nudge .cx-level,
    .cx-nudge .plan-card,
    .cx-nudge.cx-cards.is-swipe .cx-card {
        animation: cx-nudge 1.5s cubic-bezier(.33, .68, .35, 1) .3s 1;
    }
}

/* الجارة يسارَ الإطار في العربية، فكشفُها بإزاحة البطاقات يميناً — والعكس */
@keyframes cx-nudge {
    0%, 100% { transform: translateX(0); }
    30%      { transform: translateX(var(--cx-nudge-x, 58px)); }
    62%      { transform: translateX(0); }
    80%      { transform: translateX(calc(var(--cx-nudge-x, 58px) * .42)); }
}

[dir="ltr"] .cx-nudge { --cx-nudge-x: -58px; }

@media (prefers-reduced-motion: reduce) {
    .cx-nudge .cx-cat-card,
    .cx-nudge .cx-level,
    .cx-nudge .plan-card,
    .cx-nudge.cx-cards.is-swipe .cx-card { animation: none; }
}