/* ===== نظام التصميم المشترك - مركز تحسين مسارك للتدريب ===== */
/* ═══ خط الموقع Tajawal: يُطلب من رأس كل صفحة لا من هنا ═══
   كان يُجلب بـ‎@import‎ في هذا السطر — سطرٌ واحد يوفّر وسمًا في كل صفحة، لكنه يكلّف
   الزائر انتظارًا مضاعفًا: المتصفّح لا يعرف بوجود الخطّ أصلًا حتى ينزّل هذا الملف
   كاملًا (٢٦٨ ك.ب) ويقرأ أوّل سطوره، فيبدأ عندها رحلة جديدة إلى جوجل. سلسلةٌ تحجب
   الرسم مرّتين متتاليتين، وهي أوّل ما يأخذه عليك تقرير PageSpeed.

   والآن الوسمان في رأس كل صفحة مع ‎preconnect‎، فيمشي الخطّ **بالتوازي** مع هذا
   الملف لا بعده. والأوزان أربعة (٤٠٠ · ٧٠٠ · ٨٠٠ · ٩٠٠) بدل سبعة: هذه وحدها
   المستعملة في الموقع، والوزن ٦٠٠ المكتوب في مواضع لا وجود له في Tajawal أصلًا
   فيقرّبه المتصفّح كما كان يقرّبه قبل — لا فرق بصريّ في حرف واحد.

   ملاحظة مهمة: نطاقا fonts.googleapis.com و fonts.gstatic.com مسموح بهما صراحةً برأس
   Content-Security-Policy بملف server/app.js — بدونهما يحجب المتصفح الخط بصمت ويعود الموقع
   لخط النظام الافتراضي دون أي رسالة خطأ ظاهرة للمستخدم */
/* ═══════════════════════════════════════════════════════════════════════════════
   خطّ الموقع Tajawal — من الموقع نفسه، لا من خوادم جوجل
   ───────────────────────────────────────────────────────────────────────────────
   المرصود: حروف الياء في آخر الكلمة تظهر **بلا نقطتين** في صندوق الدخول وصفحة
   تسجيل الدخول، على الجوال والكمبيوتر معًا: «البريد الإلكترونى» و«الرقم السرى».

   والنصّ في الكود سليم تمامًا — فُحص حرفًا حرفًا فكان آخره U+064A (ياء بنقطتين) لا
   U+0649. وفُحصت الخطوط الثمانية التي تُختار من لوحة التحكم (Tajawal · Cairo ·
   Almarai · IBM Plex Sans Arabic · Noto Kufi Arabic · Readex Pro · El Messiri ·
   Changa) فرسمتها كلّها بنقطتيها.

   إذن الخطّ المستعمل ليس خطَّ الموقع أصلًا: لم يصل، فسقط المتصفّح على خطّ النظام،
   وبعض خطوط الأنظمة ترسم الياء الأخيرة بلا نقاط. ولوصوله أسبابٌ تمنعه لا يد لنا
   فيها: حجب نطاق جوجل في بعض الشبكات، أو خيار «منع الخطوط الخارجية» في مانعات
   الإعلانات ومتصفّحات الخصوصية، أو بطء يتجاوز مهلة الخطّ.

   فصار الخطّ يُقدَّم من الموقع نفسه — وهو نفس المبدأ المكتوب أسفل هذا الملف لخطّ
   رمز الريال حرفًا بحرف: ما لا يمكن حجبه لا يسقط. والملفات عشرة (٥ أوزان × عربي
   ولاتيني) مجموعها ١٢٤ ك.ب، ولا يُنزّل المتصفّح منها إلا ما تستعمله الصفحة فعلًا
   بفضل unicode-range.

   ووسوم جوجل في رؤوس الصفحات تبقى كما هي: إن وصلت فلا ضير، وإن حُجبت فالخط هنا.
   ═══════════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-arabic-800.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-arabic-900.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/tajawal/tajawal-latin-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy-900: #0c1f3f;
  --navy-800: #12295199;
  --navy-800-solid: #14295a;
  --navy-700: #1a3a75;
  --navy-600: #234b96;
  --blue-500: #2f5fc4;
  --blue-400: #3f74e0;
  --gold-500: #f5a623;
  --gold-600: #e0921a;
  --green-500: #1fb387;
  --red-500: #e6543f;
  --teal-500: #17a2b8;
  --purple-500: #7c5cf0;
  --bg-page: #f3f6fb;
  --bg-card: #ffffff;
  --bg-sidebar: #0e2348;
  --text-dark: #16233f;
  --text-mid: #5b6b8c;
  --text-light: #94a3c4;
  --border-color: #e6eaf3;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 4px 20px rgba(20, 41, 90, 0.06);
  --shadow-hover: 0 10px 30px rgba(20, 41, 90, 0.12);
   --font-main: "Tajawal", "Segoe UI", "Tahoma", "Arial", sans-serif;
}

* { box-sizing: border-box; }

/* إزالة تظليل اللمس الأسود المزعج بالجوال (الهالة الرمادية/السوداء التي تظهر عند الضغط على أي زر أو رابط) */
* { -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  /* حجم الخط الأساسي للموقع كاملاً — 16px هو نفس الحجم الافتراضي للمتصفحات، فلا يتغير أي شيء
     بصريًا عن الوضع الحالي إطلاقًا ما لم يغيّره المدير فعليًا من صندوق "خط الموقع" بلوحة التحكم.
     كل أحجام الخطوط الأخرى بالموقع مكتوبة بوحدة px ثابتة، لذا يؤثر هذا المتغير على النص العام
     (الفقرات والنصوص غير المحددة بحجم صريح) دون أن يكسر تنسيق أي مكوّن مضبوط مسبقًا */
  font-size: var(--base-font-size, 16px);
  background: var(--bg-page);
  color: var(--text-dark);
  direction: rtl;
  text-align: right;
  scroll-behavior: smooth;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== أزرار ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--navy-700); color: #fff; }
.btn-primary:hover { background: var(--navy-600); transform: translateY(-1px); }
.btn-gold { background: var(--gold-500); color: #1a1a1a; }
.btn-gold:hover { background: var(--gold-600); transform: translateY(-1px); }
.btn-outline { background: transparent; border: 1.5px solid var(--navy-700); color: var(--navy-700); }
.btn-outline:hover { background: var(--navy-700); color: #fff; }
.btn-outline-light { background: transparent; border: 1.5px solid #fff; color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--navy-700); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ===== الهيدر العام ===== */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--navy-800-solid); }
.brand .logo-badge {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-700), var(--blue-500));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
}
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { font-weight: 600; color: var(--text-mid); font-size: 15px; transition: color .2s; }
.main-nav a:hover, .main-nav a.active { color: var(--navy-700); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-page);
  display: flex; align-items: center; justify-content: center; border: none; color: var(--text-mid);
}
.user-chip { display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius: 30px; background: var(--bg-page); font-weight:600; font-size: 14px; }
.avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--navy-700); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }

/* ===== الهيرو ===== */
.hero {
  background: linear-gradient(120deg, #f6f8fd 55%, #eef3ff 100%);
  /* حشو علوي فقط: المسافة السفلية تتكفّل بها #courses أدناه، فتتساوى المسافة
     فوق البانر مع التي تحته بدل تراكم الحشوين معًا */
  padding: 20px 0 0;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.hero-text h1 { font-size: 44px; line-height: 1.3; margin: 0 0 18px; color: var(--navy-900); font-weight: 800; }
.hero-text h1 span { color: var(--blue-500); }
.hero-text p { font-size: 17px; color: var(--text-mid); line-height: 1.9; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 14px; }
.hero-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-hover); aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy-800-solid), var(--blue-500)); display:flex; align-items:center; justify-content:center; color:#dbe6ff; font-size:15px; position:relative; }
/* عند إيقاف البانر الرئيسي المتحرك من لوحة التحكم (heroBannerActive=false): يُخفى العنصر بالكامل
   ويتحول العمود إلى عمود واحد بعرض كامل بدل ترك فراغ فارغ مكانه — على سطح المكتب والجوال معًا */
.hero-grid.hbc-off { grid-template-columns: 1fr; }
.hero-grid.hbc-off .hero-image { display:none !important; }

/* ===== بانر الرئيسية المتحرك (سلايدر حتى 5 صور) — سطح المكتب والجوال معًا ===== */
#hero-banner .hbc-slide {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease; will-change:opacity, transform;
}
#hero-banner .hbc-slide.active { opacity:1; z-index:1; }
#hero-banner .hbc-slide.kb-in { animation: hbcZoomIn 5.3s ease-in-out forwards; }
#hero-banner .hbc-slide.kb-out { animation: hbcZoomOut 5.3s ease-in-out forwards; }
#hero-banner.hbc-single .hbc-slide { animation: hbcZoomLoop 12s ease-in-out infinite alternate !important; }
@keyframes hbcZoomIn { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes hbcZoomOut { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes hbcZoomLoop { from { transform: scale(1); } to { transform: scale(1.06); } }
#hero-banner.hbc-active::after {
  content:''; position:absolute; inset-inline:0; bottom:0; height:44%; z-index:2; pointer-events:none;
  background:linear-gradient(transparent, rgba(6,16,40,.32));
}
#hero-banner .hbc-dots { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:3; }
#hero-banner .hbc-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:.25s; border:none; padding:0; }
#hero-banner .hbc-dot.active { background:#fff; width:22px; border-radius:5px; }

/* ===== شريط "القصص" الدائري أعلى الرئيسية (إنستقرام/سناب) — الجوال فقط، الظهور يُفعَّل بوسائط الشاشة الصغيرة أدناه ===== */
.stories-bar {
  display: none; gap: 9px; padding: 14px 12px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* خلفية شريط القصص = خلفية صفحات الموقع نفسها تمامًا (--bg-page) بدل الأبيض الصريح، حتى يندمج
     الشريط مع الصفحة بلا أي فاصل لوني ظاهر بالجوال. الفاصل السفلي أُزيل أيضًا لأنه كان يرسم خطًا
     يفصل مستطيلاً أبيض عن بقية الصفحة — لم يعد له معنى بعد توحيد اللون */
  scrollbar-width: none; background: var(--bg-page);
  /* العناوين تنزل سطرين أو ثلاثة حسب طولها، فلو بقيت المحاذاة في الوسط ارتفعت الدوائر
     وانخفضت حسب طول العنوان تحتها. المحاذاة من الأعلى تُبقي كل الدوائر على خطٍّ واحد */
  align-items: flex-start;
  /* القصص متوسّطة الشاشة ما دامت تتّسع لها. و‎safe center‎ للمتصفّحات التي تعرفها: إن زاد
     عددها عن العرض رجعت المحاذاة للبداية تلقائيًا، وإلا اختفت أولى القصص خلف الحافة
     ولم يستطع الزائر التمرير إليها */
  justify-content: center;
  justify-content: safe center;
}
.stories-bar::-webkit-scrollbar { display: none; }
.story-avatar { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:5px; width:68px; background:none; border:none; padding:0; cursor:pointer; }
.story-avatar-ring {
  width:60px; height:60px; border-radius:50%; padding:2.5px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--gold-500), var(--red-500), var(--purple-500), var(--blue-500));
}
.story-avatar.viewed .story-avatar-ring { background: var(--border-color); }
/* الحلقة البيضاء الرفيعة بين الإطار المتدرج وصورة القصة أصبحت بلون خلفية الموقع أيضًا، وإلا بقيت
   دائرة بيضاء صغيرة ظاهرة حول كل قصة بعد توحيد لون خلفية الشريط */
.story-avatar-img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2.5px solid var(--bg-page); }
/* العنوان كاملًا تحت الدائرة: كان يُقصّ بثلاث نقاط فلا يقرأ الزائر اسم القصة. الآن ينزل
   على أسطر بقدر ما يحتاج بلا قصّ، و‎overflow-wrap‎ يكسر أي كلمة أطول من عرض البطاقة */
.story-avatar-label {
  font-size:10.5px; font-weight:700; color: var(--text-mid);
  width:100%; text-align:center; line-height:1.4;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}

/* ===== عارض القصص كامل الشاشة (بأسلوب سناب شات) =====
   شريط تقدّم رفيع أعلى الشاشة بعدد صور القصة المفتوحة، أسفله صف الاسم والصورة الدائرية،
   والصورة نفسها داخل بطاقة تنزلق أفقيًا عند السحب للتنقّل بين القصص. */
.story-viewer-overlay {
  display:none; position:fixed; inset:0; z-index:9998; background:#000;
  align-items:center; justify-content:center; overflow:hidden;
  transition: opacity .15s linear;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.story-viewer-overlay.open { display:flex; }

/* الإطار الحاوي: بملء الشاشة على الجوال، وبنسبة الجوال وسط الشاشة على الكمبيوتر (أسفل) */
.sv-frame { position:relative; width:100%; height:100%; overflow:hidden; }

/* الشريط العلوي: تدرّج أسود خفيف خلفه ليبقى مقروءًا فوق أي صورة فاتحة */
.sv-top {
  position:absolute; top:0; inset-inline:0; z-index:4; padding:8px 10px 22px;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
.sv-top .story-viewer-close { pointer-events:auto; }

.story-viewer-progress { position:static; display:flex; gap:3px; }
.story-viewer-seg { flex:1; height:2.5px; border-radius:3px; background:rgba(255,255,255,.32); overflow:hidden; }
.story-viewer-seg-fill { display:block; height:100%; width:0%; background:#fff; border-radius:3px; }

.sv-head { display:flex; align-items:center; gap:9px; margin-top:11px; }
.sv-head-avatar { width:31px; height:31px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1.5px solid rgba(255,255,255,.85); }
.sv-head-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
/* اسم القصة داخل العارض يظهر كاملًا أيضًا — ينزل سطرًا ثانيًا بدل القصّ بثلاث نقاط */
.sv-head-title { flex:1; min-width:0; color:#fff; font-size:13.5px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.5); white-space:normal; line-height:1.35; overflow-wrap:anywhere; }
.story-viewer-close {
  position:static; width:32px; height:32px; flex-shrink:0; border-radius:50%; border:none;
  background:rgba(255,255,255,.18); color:#fff; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ‎touch-action:none‎ لا ‎pan-y‎: العارض يملأ الشاشة ولا شيء فيه يُمرَّر، وكان المتصفّح
   يخطف السحب الرأسي لنفسه فلا تكتمل حركة الإغلاق الدائرية */
.story-viewer-stage { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; touch-action:none; }
.sv-card { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; will-change:transform; overflow:hidden; }
/* خلفية ضبابية من الصورة نفسها بدل الأشرطة السوداء حين لا تكون الصورة بمقاس الشاشة تمامًا */
.sv-blur { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(26px) brightness(.5); transform:scale(1.15); z-index:0; }
.story-viewer-image { position:relative; z-index:1; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; pointer-events:none; }

/* ═══ السحب للأسفل: البطاقة تتقلّص دائرةً ثم تختفي ═══
   أثناء السحب تُقصّ البطاقة بـ‎clip-path: circle()‎ بقطرٍ ينقص مع الإصبع، فتتحوّل من
   مستطيل ملء الشاشة إلى دائرة تدريجيًا. وعند رفع الإصبع بعد الحد تطير الدائرة إلى مكان
   القصة في الشريط وتتلاشى — لا اختفاء مفاجئ. الانتقالات هنا لا في ‎.sv-card‎ نفسها حتى
   لا تُبطئ انزلاق القصص الأفقي. */
.sv-card.sv-dismissing {
  transition: transform .34s cubic-bezier(.32,.72,0,1), clip-path .34s cubic-bezier(.32,.72,0,1), opacity .3s ease .04s;
}

/* على الشاشات العريضة: تُعرض القصة داخل إطار بنسبة الجوال وسط الشاشة بدل تمددها بعرض الشاشة */
@media (min-width: 820px) {
  .story-viewer-overlay { background:#0b0b0f; }
  .sv-frame {
    width:min(420px, 26vw);
    height:min(90vh, calc(min(420px, 26vw) * 16 / 9));
    border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.6);
  }
}
.story-viewer-link-btn { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); background:#fff; color:#12295a; font-weight:800; font-size:13.5px; padding:10px 22px; border-radius:30px; text-decoration:none; z-index:5; box-shadow:0 6px 20px rgba(0,0,0,.3); }

/* ═══ مناطق الضغط الثلاث في عارض القصص ═══
     اليمين = رجوع للصورة السابقة (أو إعادة الأولى)
     اليسار = الصورة/القصة التالية
     الوسط  = إيقاف المؤشّر وتشغيله

   والجهات بـ‎inset-inline-start/end‎ لا ‎left/right‎: الصفحة عربية فالبداية هي اليمين،
   ولو عُرضت يومًا بلغة تُكتب من اليسار انقلبت المناطق وحدها فبقي «التالي» في جهة القراءة.

   والوسط ٣٢٪ بين ٣٤٪ و٣٤٪ — يسع الإبهام بلا أن يبتلع منطقتي التنقّل. */
.story-viewer-nav-zone { position:absolute; top:0; bottom:0; width:34%; z-index:3; }
.story-viewer-nav-prev { inset-inline-start:0; }
.story-viewer-nav-next { inset-inline-end:0; }
.story-viewer-nav-mid  { inset-inline-start:34%; width:32%; }

/* شارة الإيقاف: مخفيّة حتى يوقف الزائر المؤشّر بضغطة الوسط. بلا هذه الشارة يبدو
   العارض معطَّلًا لا موقوفًا، ولا يعرف الزائر أن ضغطة أخرى تُعيده. */
.sv-pause-badge {
  position:absolute; z-index:4; bottom:16%;
  inset-inline-start:50%; transform:translateX(50%);   /* RTL: النصف يعيدها للمنتصف */
  display:none; align-items:center; gap:8px; white-space:nowrap;
  pointer-events:none;   /* لا تحجب ضغطة الوسط التي تحتها */
  color:#fff; font-size:12.5px; font-weight:700;
  background:rgba(10,20,45,.66); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:7px 15px;
}
.sv-pause-badge svg { width:15px; height:15px; flex-shrink:0; }
.story-viewer-overlay.sv-paused .sv-pause-badge { display:flex; }

/* ===== شريط البحث ===== */
.search-bar {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 18px; margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 12px;
}
.search-bar select, .search-bar input {
  border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; background: var(--bg-page);
}
.search-bar .search-btn {
  background: var(--navy-700); color: #fff; border: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600;
}

/* ===== أقسام عامة ===== */
.section { padding: 64px 0; }
/* أول قسم بعد البانر مباشرة: مسافة علوية بسيطة مساوية تمامًا للمسافة التي فوق البانر
   (بقية أقسام الصفحة تحتفظ بحشوها الطبيعي 64px) */
#courses { padding-top: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.section-head h2 { font-size: 28px; font-weight: 800; color: var(--navy-900); margin: 0; }
.section-sub { color: var(--text-mid); font-size: 15px; margin-top: 6px; }

/* ===== بطاقات الدورات ===== */
.courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.course-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s; display:flex; flex-direction:column;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
/* إطار مربع بلون أزرار الموقع الأساسي حول كل بطاقة دورة ضمن تصنيفات الرئيسية فقط (#courses-categories) —
   لا يؤثر على بطاقات صفحة "جميع الدورات" أو صفحة المسار. الزوايا تتبع انحناء البطاقة الأصلي (--radius-lg)
   فلا تظهر حادة، بفضل overflow:hidden الموروثة أعلاه بقاعدة .course-card */
#courses-categories .course-card { border: 2px solid var(--navy-700); }
/* نفس الإطار بالضبط، مطبَّق أيضًا على بطاقات المسارات وورش العمل والمنتجات الرقمية بتصنيفات الرئيسية
   فقط (كل قسم بمعرّفه الخاص) — بدون أي تأثير على صفحاتها الكاملة (courses.html, workshops.html,
   digital-products.html, track.html) لأن التحديد مقيّد بمعرّف قسم الرئيسية تحديدًا في كل قاعدة */
#tracks-categories .track-card { border: 2px solid var(--navy-700); }
#workshops-categories .course-card { border: 2px solid var(--navy-700); }
#digital-products-categories .course-card { border: 2px solid var(--navy-700); }
.course-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--navy-700), var(--blue-400)); display:flex; align-items:flex-end; padding:14px; color: #dbe6ff; font-size: 13px; position: relative; overflow:hidden; }
.course-thumb.has-image { background:#eef2fa; align-items:stretch; padding:0; }
.course-thumb.has-image img { width:100%; height:100%; object-fit:contain; padding:10px; }
.course-thumb-title { font-size:13.5px; font-weight:700; color:#fff; line-height:1.4; }
.course-thumb-badges { position:absolute; top:12px; inset-inline-start:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:1; }
.thumb-badge { background: rgba(255,255,255,.95); color: var(--navy-800-solid); font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space:nowrap; }
.thumb-badge.level-متقدم { background: #fdeceb; color: #b23a2f; }
.thumb-badge.level-متوسط { background: #fff3e0; color: #a8681a; }
.thumb-badge.level-مبتدئ { background: #e8f8f2; color: #1c8a5f; }
.thumb-badge.mode-badge { background: rgba(20,41,90,.85); color:#fff; }
/* شارة "التسجيل منتهٍ" تظهر أعلى بطاقة الدورة (بالرئيسية وصفحة كل الدورات) بدل شارتي المستوى/نمط
   التدريب، عند إغلاق تسجيل الدورة من لوحة التحكم مع بقائها ظاهرة بالموقع */
/* شارة "التسجيل منتهٍ": بلا أي خلفية أو حدود ملوّنة (خلافًا لبقية الشارات) — نص أحمر عريض فقط،
   ليبرز كتنبيه واضح مباشر دون صندوق ملوّن يشتت النظر عن صورة الدورة */
.thumb-badge.closed-badge { background:transparent; color:var(--red-500); font-weight:800; padding:4px 0; border-radius:0; }
/* نفس منطق الإغلاق داخل صفحة تفاصيل الدورة: شريط تنبيه بدل شريط إلحاح المقاعد، وزرا الشراء
   يظهران معطّلين (رمادي باهت) بدل إخفائهما كليًا حتى لا ينكسر تخطيط بطاقة الشراء */
.urgency-strip.closed-strip { background:#fdeceb; color:#b23a2f; }

/* ===== عنصر "غير متاح" (دورة/مسار بحالة إغلاق تسجيل من لوحة التحكم، أو ورشة انتهى تاريخها):
   صورة المنتج تتحوّل لتدرّج رمادي بالكامل (بدون ألوان) وهذا كل شيء — لا نص ولا شريط فوقها.
   الشريط النصي السابق ("انتهى التسجيل" فوق خلفية بيضاء بمنتصف الصورة) أُزيل بالكامل لأنه كان يحجب
   جزءًا من الصورة ويُثقل شكل البطاقة؛ تحوّل الصورة للرمادي وحده إشارة كافية وواضحة بصريًا، وجملة
   "التسجيل مغلق" الصريحة تظهر بدل ذلك داخل صفحة الدورة/المسار/الورشة نفسها عند فتحها.
   تُطبَّق بكل مكان تظهر به هذه البطاقات بالموقع، ولا تشمل المنتجات الرقمية إطلاقًا ===== */
.course-thumb.thumb-closed img,
.track-thumb.thumb-closed img,
.wl-thumb.thumb-closed img { filter: grayscale(1); }

/* ===== شبكة "الدورات المتضمنة في المسار" بصفحة تفاصيل المسار: بطاقات دورة حقيقية (courseCard
   المشتركة) بدل قائمة نصية بسيطة، بأعمدة أضيق تلائم عرض بطاقة المحتوى (وليست عرض الصفحة كاملة) ===== */
.track-included-courses-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:16px; margin-top:2px; }
.track-included-courses-grid .course-card { box-shadow: 0 2px 12px rgba(20,41,90,.07); }

/* ═══ موعد الدورة داخل صفحة المسار (‎opts.schedule‎ في course-card.js) ═══
   صفٌّ مستقلّ بخلفية خفيفة يفصله عمّا فوقه: الموعد قرارٌ لا وصف، فلا يُدفن بين أسطر
   البطاقة. ويلتفّ عند الضيق فلا يخرج بندٌ عن البطاقة على الجوال. */
.course-schedule {
  display:flex; flex-wrap:wrap; gap:6px 12px; margin:8px 0 2px; padding:8px 10px;
  background: var(--bg-page, #f4f7fb); border-radius:9px;
  font-size:12.5px; font-weight:700; color: var(--text-mid, #475569); line-height:1.7;
}
.course-schedule .cs-item { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }

/* الفئة المستهدفة — قائمة بنود تُقرأ بلمحة، لا فقرةٌ تُقرأ بتمعّن */
.trk-audience-list { margin:0 0 6px; padding-inline-start:20px; color: var(--text-mid, #475569); line-height:2.1; font-size:15px; }
.trk-audience-list li { margin-bottom:4px; }
@media (max-width: 680px) {
  .course-schedule { font-size:11.5px; padding:7px 9px; gap:5px 10px; }
  .trk-audience-list { font-size:13.5px; line-height:1.95; }
}

/* صفحة "جميع الدورات" (courses.html) على الويب فقط:
   1) تكبير صورة بطاقة الدورة (ارتفاع ثابت بدل النسبة المرنة، فلا تتغيّر مع عرض العمود)
   2) تبسيط البطاقة لتعرض فقط: الاسم + السعر + نمط التدريب (شارة أعلى الصورة) + الاعتماد —
      إخفاء التصنيف والوصف والمحاور وصف التقييم وزر "عرض التفاصيل" (البطاقة كلها رابط أصلاً)
   3) ارتفاع ثابت واحد لكل البطاقات (height بدل الاعتماد على المحتوى) — بهذا تتساوى كل البطاقات
      تمامًا بنفس الحجم دائمًا، بغض النظر عن طول الاسم أو وجود شارة الاعتماد من عدمه؛ أي محتوى
      زائد عن المساحة يُقصّ تلقائيًا (overflow:hidden موروثة أصلاً من .course-card) — لا يؤثر أي
      من هذا على بطاقات الرئيسية أو صفحة تفاصيل الدورة */
@media (min-width: 681px) {
  #courses-grid .course-card { height: 360px; }
  #courses-grid .course-thumb { aspect-ratio: auto; height: 190px; flex-shrink: 0; }
  #courses-grid .course-body { padding: 14px 16px 16px; }
  #courses-grid .course-cat,
  #courses-grid .course-subtitle,
  #courses-grid .course-topics,
  #courses-grid .course-meta,
  #courses-grid .course-rating-row,
  #courses-grid .course-enroll-btn { display: none; }
  #courses-grid .course-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px; margin-top:2px; }
  #courses-grid .course-accred { margin-bottom:8px; }

  /* ══════════════════════════════════════════════════════════════════════
     بطاقة الدورة بالصفحة الرئيسية (#courses-categories) — الكمبيوتر
     تكديس رأسي: صورة ← اسم الدورة ← النجوم ← السعر ← التفاصيل ← أضف للحقيبة
     ══════════════════════════════════════════════════════════════════════ */
  #courses-categories .course-card {
    height: auto; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #fbfcff 0%, #e6edf9 100%);
    border: 1px solid #d3ddf0; border-radius: 16px;
    box-shadow: 0 6px 18px rgba(12,31,63,.13);
  }
  #courses-categories .course-card:hover { box-shadow: 0 12px 28px rgba(12,31,63,.2); border-color: #bcccea; }

  /* لمعة تعبر البطاقة كل 5 ثوانٍ (transform فقط ⇒ خفيفة على المعالج) */
  #courses-categories .course-card::after {
    content: ''; position: absolute; top: 0; left: -70%;
    width: 45%; height: 100%; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    animation: tmCardShine 5s ease-in-out infinite;
  }

  /* الصورة من حافة إلى حافة بلا حشو ⇒ تبدو أكبر */
  #courses-categories .course-thumb { aspect-ratio: auto; height: 200px; flex-shrink: 0; }
  #courses-categories .course-thumb.has-image { background: #dfe7f4; }
  #courses-categories .course-thumb.has-image img { padding: 8px; object-fit: contain; }

  /* شارة الاعتماد فوق الصورة */
  #courses-categories .course-card .course-accred {
    display: inline-flex; align-items: center; gap: 4px;
    position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
    margin: 0; max-width: calc(100% - 24px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(255,248,232,.97); color: #8a5a12;
    border: 1px solid rgba(206,157,54,.55);
    font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 9px;
    box-shadow: 0 2px 8px rgba(12,31,63,.2);
  }

  /* إخفاء العناصر الوسيطة كي تلتصق النجوم باسم الدورة */
  #courses-categories .course-cat,
  #courses-categories .course-subtitle,
  #courses-categories .course-topics,
  #courses-categories .course-meta { display: none; }
  #courses-categories .thumb-badge:not(.closed-badge) { display: none; }

  /* عمود واحد: كل عنصر بسطر مستقل */
  #courses-categories .course-body {
    display: grid; grid-template-columns: 1fr;
    grid-template-areas: "title" "rating" "price" "detailsbtn" "cartbtn";
    grid-template-rows: 1fr auto auto auto auto;
    align-items: center; gap: 9px; padding: 14px 16px 18px;  }
  #courses-categories .course-foot { display: contents; }

  #courses-categories .course-title {
    grid-area: title; display: block; text-align: center;
    font-size: 17px; font-weight: 800; line-height: 1.5; margin: 0;
  }
  #courses-categories .course-rating-row {
    grid-area: rating; justify-content: center; gap: 8px; margin: 0; font-size: 14px;
  }
  #courses-categories .course-rating-row .stars { font-size: 26px; letter-spacing: 2px; line-height: 1; color: #e8a91d; }
  #courses-categories .course-rating-row .rating-num { font-size: 16px; font-weight: 800; }
  #courses-categories .price-block { grid-area: price; justify-self: center; text-align: center; margin: 0; }
  #courses-categories .course-price { font-size: 24px; font-weight: 900; white-space: nowrap; }
  /* المشطوب بجانب سعرٍ من ٢٤ بكسل: ١٣ يضيع بجانبه، و١٦ تُقرأ من بعيد ولا تزاحمه */
  #courses-categories .price-original { font-size: 16px; }

  #courses-categories .course-enroll-btn {
    grid-area: detailsbtn; width: 100%; margin: 0; padding: 11px 8px;
    border-radius: 10px; font-size: 13.5px; font-weight: 800;
    background: rgba(255,255,255,.92); color: var(--navy-700); border: 1.5px solid var(--navy-700);
  }
  #courses-categories .course-card:hover .course-enroll-btn { background: var(--navy-700); color: #fff; }
  #courses-categories .course-add-cart-btn {
    grid-area: cartbtn; display: flex; align-items: center; justify-content: center;
    width: 100%; margin: 0; padding: 12px 10px; border-radius: 10px;
    font-size: 13.5px; font-weight: 800; white-space: nowrap; gap: 5px; border: none;
    background: linear-gradient(180deg, var(--navy-700), var(--navy-800-solid));
    box-shadow: 0 4px 12px rgba(20,41,90,.28);
  }
  #courses-categories .course-add-cart-btn:disabled {
    background: #eef1f7; color: #7d8aa3; opacity: 1;    border: 1.5px solid var(--border-color); box-shadow: none; cursor: not-allowed;
  }

  /* لمعة تمر فوق الزرّين عند تمرير الماوس فوق البطاقة */
  #courses-categories .course-add-cart-btn,
  #courses-categories .course-enroll-btn { position: relative; overflow: hidden; }
  #courses-categories .course-add-cart-btn::after,
  #courses-categories .course-enroll-btn::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
  }
  #courses-categories .course-card:hover .course-add-cart-btn::after,
  #courses-categories .course-card:hover .course-enroll-btn::after { left: 125%; }
}.course-body { padding: 16px 18px 18px; flex:1; display:flex; flex-direction:column; }
.course-cat { font-size: 12px; color: var(--text-mid); font-weight: 600; margin-bottom: 8px; display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.course-cat-chip { background:#eaf1ff; color:var(--blue-500); font-weight:800; padding:3px 10px; border-radius:20px; font-size:11.5px; }

/* ===== شريط تصنيفات الدورات ===== */
.cat-chips-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.cat-chip { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--border-color); color:var(--text-mid); font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:30px; transition: all .2s; }
.cat-chip:hover { border-color:var(--navy-700); color:var(--navy-700); }
.cat-chip.active { background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.course-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--navy-900); line-height: 1.5; }
.course-subtitle { font-size: 12.5px; color: var(--text-mid); line-height:1.6; margin: 0 0 10px; }
.course-meta { display:flex; align-items:center; flex-wrap:wrap; gap: 12px; font-size: 12.5px; color: var(--text-mid); margin-bottom: 8px; }
.course-rating-row { display:flex; align-items:center; gap:6px; font-size: 13px; margin-bottom: 14px; }
.course-rating-row .stars { color: var(--navy-700); letter-spacing:1px; font-size:16px; }
.course-rating-row .rating-num { font-weight:700; color: var(--navy-900); }
.course-rating-row .rating-count { color: var(--text-light); font-size:12px; }
.course-foot { margin-top:auto; padding-top: 10px; border-top: 1px solid var(--border-color); }
/* ═══ صندوق السعر: رقمٌ واحد كبير، وبجانبه المشطوب إن كان هناك خصم ═══
   كان الترتيب: المشطوبُ ونسبةُ الخصم في سطر، والسعر تحتهما في سطر ثانٍ. فكانت البطاقة
   ذات الخصم **أطول من جارتها بثمانية عشر بكسلًا**، فينزل زرّاها عن زرّي بقية الصف —
   وهو الاختلاف الذي يُرى في صفٍّ فيه بطاقة عليها خصم وأخرى بلا خصم.
   والآن سطرٌ واحد في الحالين: السعر ثم المشطوب بجانبه، فتتساوى البطاقات وتصطفّ أزرارها.
   وشارة «وفّر ٪» حُذفت من البطاقات: الرقمان جنبًا إلى جنب يقولان قيمة العرض بلا كلام. */
.price-block { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:center; gap:8px; }
/* ‎nowrap‎ على السعر نفسه لا على الصندوق وحده: بلا هذا ينكسر «14,375 ﷼» إلى سطرين داخل
   البطاقة الضيّقة فتطول عن جارتها وينزل زرّاها — وهو العيب نفسه بابٍ آخر. */
.course-price { font-weight: 800; color: var(--navy-900); font-size: 17px; white-space: nowrap; }
/* المشطوب بلون النص المتوسط لا الخفيف: كان يكاد لا يُقرأ، وهو نصف الرسالة — لا قيمة
   لسعرٍ مخفَّض إن لم يُر السعر الذي نزل عنه. وخطُّ الشطب أثخن قليلًا للسبب نفسه. */
.price-original {
  font-size: 13px; font-weight: 700; color: var(--text-mid);
  text-decoration: line-through; text-decoration-thickness: 1.5px; white-space: nowrap;
}
.course-accred { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; background:#fff3e0; color:#a8681a; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; margin-bottom:10px; }
/* ═══ رقم الدورة داخل المسار: «الدورة الأولى» فما بعدها ═══
   المسار رحلةٌ لا سلّة، فموضعُ الدورة فيه جزءٌ من المعلومة لا زينة. ولذلك هو أوّل ما في
   البطاقة وأبرزه لونًا — بلون الهوية لا بلون تنبيه، فلا يُقرأ تحذيرًا.
   ولا يظهر إلا حيث يُمرَّر ‎orderLabel‎ (صفحة المسار)، فبطاقة الدورة في بقيّة الصفحات كما هي. */
.course-order-badge {
  display:inline-flex; align-items:center; align-self:flex-start;
  background: var(--blue-500, #2563eb); color:#fff;
  font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:20px;
  margin-bottom:9px; letter-spacing:.2px; white-space:nowrap;
}
.course-desc { font-size: 13px; color: var(--text-mid); line-height:1.6; margin: 0 0 10px; }
.course-topics { list-style:none; margin: 0 0 14px; padding: 0; display:flex; flex-direction:column; gap:6px; }
.course-topics li { position:relative; padding-inline-start: 18px; font-size: 12.5px; color: var(--text-mid); line-height:1.5; }
.course-topics li::before { content: "✓"; position:absolute; inset-inline-start: 0; color: var(--blue-500); font-weight:700; font-size: 12px; }
.course-enroll-btn { display:flex; align-items:center; justify-content:center; margin-top: 14px; padding: 11px; border-radius: 10px; background: var(--navy-700); color: #fff; font-size: 13.5px; font-weight: 700; transition: background .2s; }
.course-card:hover .course-enroll-btn { background: var(--blue-500); }
/* زر "أضف إلى السلة" داخل بطاقة الدورة: يظهر فقط بتصميم بطاقة الرئيسية المصغّرة على الجوال (mini-grid-2) */
.course-add-cart-btn { display:none; }
/* بانر خاص يظهر أعلى الصفحة الرئيسية على الجوال فقط، عند تفعيله من لوحة التحكم */
.mobile-banner-slot { display:none; }
.mobile-banner-slot img { width:100%; height:auto; display:block; }
.mobile-banner-slot a { display:block; }

/* ===== الشريط الإعلاني (أعلى الصفحة الرئيسية فقط، نص ثابت في المنتصف، يُدار من لوحة التحكم) ===== */
.top-announcement-bar { position:relative; display:flex; align-items:center; justify-content:center; background: var(--navy-700); color:#fff; height:38px; padding:0 40px; }
.top-announcement-bar .tab-marquee { max-width:100%; overflow:hidden; text-align:center; }
.top-announcement-bar .tab-item { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:700; color:#fff; text-decoration:none; }
.top-announcement-bar a.tab-item:hover { text-decoration:underline; }
.top-announcement-bar .tab-close { position:absolute; inset-inline-end:4px; top:0; flex-shrink:0; width:30px; height:100%; border:none; background:transparent; color:#fff; font-size:18px; line-height:1; cursor:pointer; opacity:.85; }
.top-announcement-bar .tab-close:hover { opacity:1; }

/* ===== الإعلان المنبثق (مربع أبيض صغير، الصفحة الرئيسية فقط، قابل للإغلاق) ===== */
.home-popup-ad-overlay { position:fixed; inset:0; background:rgba(12,31,63,.55); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; animation: hpa-fade .2s ease; }
@keyframes hpa-fade { from { opacity:0; } to { opacity:1; } }
.home-popup-ad { position:relative; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); max-width:320px; width:100%; overflow:hidden; }
.home-popup-ad img { width:100%; height:auto; display:block; border-radius: var(--radius-lg); }
.home-popup-ad .hpa-close { position:absolute; top:8px; inset-inline-start:8px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(12,31,63,.65); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; }
.home-popup-ad .hpa-close:hover { background: var(--red-500); }

/* ===== المسارات التدريبية ===== */
.tracks-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:20px; }
.track-card { background: linear-gradient(180deg, #f5f8ff, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-card); overflow:hidden; }
/* صورة المسار (منتج): نفس أسلوب صورة بطاقة الدورة، بارتفاع نسبي ثابت وخلفية متدرجة عند عدم وجود صورة */
.track-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--navy-700), var(--blue-400)); display:flex; align-items:flex-end; padding:14px; color:#dbe6ff; font-size:13px; position:relative; overflow:hidden; }
.track-thumb.has-image { background:#eef2fa; align-items:stretch; padding:0; }
/* contain لا cover: صور المسارات مصمَّمة ويُكتب داخلها اسم المسار وشعار المركز، و cover كان
   يملأ الإطار لكنه يقصّ الأطراف فيضيع جزء من التصميم أو يُبتر النص. contain يُظهر الصورة كاملة
   دائمًا مهما اختلفت نسبتها، وثمنه شريطان بلون خلفية البطاقة نفسها على الجانبين — غير ملحوظين
   لأن الخلفية موحّدة معها. وهو نفس ما تفعله بطاقة الدورة وصورة صفحة المسار أصلًا، فتوحّد الشكل. */
.track-thumb.has-image img { width:100%; height:100%; object-fit:contain; padding:10px; box-sizing:border-box; }
.track-thumb-title { font-size:13.5px; font-weight:700; color:#fff; line-height:1.4; }
.track-body { padding: 22px 24px; }
.track-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.track-title { margin:0; font-size:16.5px; font-weight:800; color: var(--navy-900); }
.track-count { flex-shrink:0; background:#eaf1ff; color: var(--blue-500); font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.track-desc { font-size:13px; color: var(--text-mid); line-height:1.6; margin: 0 0 14px; }
.track-courses { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.track-course-tag { font-size:12px; font-weight:700; color: var(--navy-700); background:#fff; border:1px solid var(--border-color); border-radius:20px; padding:6px 12px; transition: background .2s, color .2s; }
.track-course-tag:hover { background: var(--navy-700); color:#fff; border-color: var(--navy-700); }
.track-foot { border-top:1px solid var(--border-color); padding-top:12px; }
.track-price { font-size:13px; font-weight:800; color: var(--navy-900); white-space: nowrap; }
/* ═══ سعر المسار قبل الخصم ═══
   بجانب السعر الحالي في سطرٍ واحد، بنفس أصناف بطاقة الدورة — فيستوي المنتجان شكلًا،
   ولا تطول البطاقة ذات الخصم عن جارتها فينزل زرّاها عن الصف. */
.track-price-block { display:flex; flex-wrap:nowrap; align-items:baseline; gap:8px; }

/* ===== بطاقة المسار المختصرة (الصفحة الرئيسية فقط ضمن قسم تصنيفات المسارات): صورة + عنوان +
   سعر، ثم عمود إجراءات ثابت أسفلها — زر "التفاصيل" أعلى، وأيقونة "أضف إلى الحقيبة" تحته مباشرة
   (وليسا جنبًا إلى جنب) — بدون قائمة دورات المسار أو الوصف — تفاديًا لازدحام قسم التصنيفات
   بالرئيسية؛ صفحة "كل الدورات" وصفحة "استكشف مسارك" تستخدمان بطاقة المسار الكاملة كما هي دون
   أي تأثير من هذا الشكل المختصر. كلا الزرّين بعرض كامل موحّد (width:100%) وبنفس الارتفاع الثابت
   (height:40px) حتى تتساوى أيقونة "أضف إلى الحقيبة" بالحجم لدى كل المسارات، بغض النظر عن عرض
   البطاقة الفعلي (يختلف باختلاف عدد المسارات بالصف ضمن الشبكة أو صف السحب) ===== */
.track-card-compact .track-body:first-of-type { padding-bottom:16px; }
.track-card-compact .track-title { margin-bottom:8px; }
/* صف الإجراءات يمتد بعرض الصورة بالضبط (بلا حشوة جانبية) بدل حشوة track-body الموروثة (22px 24px)،
   ليتساوى عرض الزرّين تمامًا مع عرض صورة المسار أعلى البطاقة — overflow:hidden على .track-card
   أعلاه يتكفّل تلقائيًا بتدوير الزاويتين السفليتين حول الزر الأخير فلا حاجة لضبط يدوي */
.track-compact-actions { padding:0 0 20px; display:flex; flex-direction:column; gap:8px; }
.track-compact-actions .btn-outline,
.track-add-cart-icon { width:100%; flex-shrink:0; height:44px; padding:0 8px; font-size:13.5px; border-radius:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }

/* ===== شبكة "دورات المسار" داخل بطاقة الشراء بصفحة تفاصيل المسار: مربعات صغيرة بجانب بعض
   تُظهر مباشرة ما يحصل عليه المشتري قبل الضغط على زر الشراء — تحفّز على إتمام الشراء بإظهار
   القيمة الفعلية (عدد وأسماء الدورات) بشكل بصري سريع بدل الاكتفاء برقم مجرد ===== */
.track-buy-courses { margin: 6px 0 18px; }
.track-buy-courses-label { font-size:12.5px; font-weight:800; color: var(--text-mid); margin-bottom:10px; }
.track-buy-courses-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.track-buy-course-tile {
  aspect-ratio: 1/1; background: var(--bg-page); border:1px solid var(--border-color); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:8px 6px; gap:5px; text-decoration:none; color: var(--navy-900);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.track-buy-course-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--navy-700); }
.track-buy-course-tile .tbc-icon { font-size:19px; }
.track-buy-course-tile .tbc-title { font-size:10.5px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ===== الخدمات ===== */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.service-card { background: #fff; border-radius: var(--radius-lg); padding: 28px 22px; box-shadow: var(--shadow-card); text-align:center; }
.service-icon { width: 56px; height: 56px; border-radius: 16px; background: #eef3ff; color: var(--navy-700); display:flex; align-items:center; justify-content:center; margin: 0 auto 16px; font-size: 24px; }
.service-card h3 { font-size: 17px; margin: 0 0 10px; color: var(--navy-900); }
.service-card p { font-size: 14px; color: var(--text-mid); line-height: 1.8; margin-bottom: 16px; }
.service-link { font-weight: 700; color: var(--navy-700); font-size: 14px; }

/* ===== الإحصائيات ===== */
.stats-strip { background: linear-gradient(120deg, var(--navy-800-solid), var(--navy-700)); padding: 44px 0; }

/* عنوان «الإحصائيات» — كان الشريط يبدأ بالأرقام بلا عنوان، فلا يعرف الزائر ما يقرأ.
   وحجمه حجم «خدماتنا» نفسه (‎.section-head h2‎) ليكون عنوانَ قسمٍ كإخوته لا سطرًا صغيرًا.
   ⚠️ ولونه أبيض صريحًا: الشريط وحده داكن في السِّمة الفاتحة، و‎navy-900‎ عليه لا يُقرأ. */
.stats-strip .section-head { margin-bottom: 26px; }
.stats-strip .section-head h2 { color: #ffffff; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-item .num { font-size: 34px; font-weight: 800; color: #fff; }
.stat-item .lbl { color: #c9d6f5; font-size: 14px; margin-top: 6px; }

/* ===== آراء المتدربين: كاروسيل احترافي قابل للسحب بالماوس/اللمس (نفس السلوك بالجوال وسطح
   المكتب معًا) + تحريك تلقائي سلس لا نهائي، يُدار بالكامل عبر JS في home.js (initDragCarousel) ===== */
.testi-carousel { overflow: hidden; position: relative; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.testi-carousel.dragging { cursor: grabbing; }
.testi-carousel::before, .testi-carousel::after { content:''; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none; }
.testi-carousel::before { inset-inline-end:0; background: linear-gradient(to left, #fff, transparent); }
.testi-carousel::after { inset-inline-start:0; background: linear-gradient(to right, #fff, transparent); }
.testi-track { display:flex; gap: 22px; width:max-content; }
.testi-card { background: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); flex: 0 0 360px; }
.testi-stars { color: #f0a800; margin-bottom: 14px; font-size: 14px; text-align: left; position: relative; z-index: 1; }
.testi-text { color: var(--text-mid); line-height: 1.9; font-size: 14.5px; margin-bottom: 20px; }
.testi-person { display:flex; align-items:center; gap: 12px; }
.testi-person .avatar-circle { width: 42px; height: 42px; }
.testi-person .p-name { font-weight: 700; font-size: 14px; color: var(--navy-900); }
.testi-person .p-title { font-size: 12.5px; color: var(--text-light); }
.testi-nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid var(--border-color); background:#fff; box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; color:var(--navy-700); transition:.2s; }
.testi-nav-btn:hover { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.testi-nav-prev { inset-inline-start:8px; }
.testi-nav-next { inset-inline-end:8px; }

/* ===== شريط ملخص التقييمات (4 صناديق) أعلى بطاقات آراء المتدربين — نفس ألوان الموقع الحالية
   (خلفية بيضاء/فاتحة، عناوين navy-900، لكِن الصندوق الرابع "التقييم العام" مُبرز بإطار وخلفية زرقاء
   فاتحة ليتماشى مع تصميم المرجع الذي يُبرز الصندوق الأخير) ===== */
.ratings-strip { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 0 34px; }
.rs-box { background:#fff; border:1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px 16px; text-align:center; box-shadow: var(--shadow-card); }
.rs-box.rs-featured { background: linear-gradient(180deg, #eef3ff, #fff); border-color: var(--blue-500); box-shadow: var(--shadow-hover); }
.rs-icon { width:48px; height:48px; border-radius:50%; background: var(--bg-page); color: var(--blue-500); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.rs-icon svg { width:24px; height:24px; }
.rs-box.rs-featured .rs-icon { background: var(--blue-500); color:#fff; }
.rs-score { font-weight:800; color: var(--navy-900); font-size:22px; margin-bottom:4px; }
.rs-score .rs-max { font-weight:600; color: var(--text-light); font-size:14px; }
.rs-label { font-size:13px; color: var(--text-mid); font-weight:600; margin-bottom:10px; }
.rs-stars { position:relative; display:inline-block; font-size:14px; letter-spacing:2px; direction:ltr; }
.rs-stars-bg { color:#e2e6f0; }
.rs-stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:#f0a800; width:0; }

/* ===== بطاقة الرأي بتصميم جديد: علامة اقتباس أعلى الزاوية + نجوم + نص + صورة دائرية بحلقة ملوّنة
   (بدون صورة فعلية بقاعدة البيانات - يبقى avatar بأحرف الاسم كما هو، فقط بإطار حلقة مضاف) ===== */
.testi-card { position: relative; padding-top: 30px; }
.testi-quote-icon { position:absolute; top:18px; right:20px; width:34px; height:34px; color: rgba(47,95,196,.13); }
.testi-quote-icon svg { width:100%; height:100%; }
.testi-person .avatar-circle { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue-500); }

/* ===== تخصيص ترتيب الواجهة الرئيسية: غلاف التصنيف المنقول + البانر العريض =====
   .hl-cat-section هو الغلاف الذي يُنشأ لبطاقة التصنيف حين تُنقل خارج قسمها الأصلي، وحشوه
   العلوي صفر ليُطابق تمامًا شكل أقسام التصنيفات المتتالية بالصفحة اليوم (تُترك المسافة السفلية
   فقط)، فلا يتغيّر أي شيء بصريًا سوى الترتيب نفسه */
.hl-cat-section { padding-top: 0; }
.home-wide-banner { padding: 10px 0 26px; }
.home-wide-banner picture, .home-wide-banner .hwb-link { display: block; }
.home-wide-banner img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hover);
}
.home-wide-banner .hwb-link { transition: transform .25s ease; }
.home-wide-banner .hwb-link:hover { transform: translateY(-3px); }
@media (max-width: 680px) {
  .home-wide-banner { padding: 6px 0 18px; }
  .home-wide-banner img { border-radius: 14px; }
}

/* ===== الشركاء ===== */
/* الحشو السفلي أكبر من العلوي عمدًا: تحت هذا الشريط يقع القسم التالي (الأسئلة الشائعة
   غالبًا) وكان يلتصق به بلا فاصل يُذكر — فصار بينهما متنفَّس. وهو حشوٌ على الشريط نفسه
   لا على ما بعده، فلا يتعلّق الأمر بترتيب الأقسام الذي يغيّره المدير من لوحته. */
.partners-strip { padding: 40px 0 66px; }

/* عنوان «الاعتمادات والشركاء» — كان سطرًا صغيرًا (‎section-sub‎ بحجم ١٥) في الوسط،
   فصار عنوانَ قسمٍ بحجم «خدماتنا» ومحاذاته إلى اليمين كبقية عناوين الصفحة، فيقرأ
   الزائر عمودًا واحدًا من العناوين لا عنوانًا شاردًا إلى الجهة الأخرى.

   ‎start‎ لا ‎right‎: الصفحة عربية (RTL) فـ‎start‎ هي اليمين — ولو عُرضت يومًا بلغة تُكتب
   من اليسار انقلبت معها إلى الجهة الصحيحة وحدها. */
.partners-head {
  font-size: 28px; font-weight: 800; color: var(--navy-900);
  margin: 0 0 24px; text-align: start; line-height: 1.4;
}
.partners-carousel { overflow: visible; }
.partners-row { display:flex; align-items:center; justify-content: center; gap: 40px; flex-wrap: wrap; }
/* الشعارات بألوانها الكاملة دائمًا — لا تدرّج رمادي ولا اشتراط تمرير المؤشر */
.partners-row .partner {
  font-weight: 800; color: var(--navy-800-solid); font-size: 15px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border-color); border-radius:16px;
  padding:16px 14px; min-height:96px; box-sizing:border-box;
  box-shadow: 0 4px 14px rgba(12,31,63,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.partners-row .partner:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(12,31,63,.16); }
.partners-row .partner img { max-height:58px; max-width:100%; object-fit:contain; display:block; }
.partners-row a.partner { text-decoration:none; }

/* ===== النشرة البريدية ===== */
.newsletter { background: var(--bg-sidebar); padding: 46px 0; }
.newsletter-grid { display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap: wrap; }.newsletter h3 { color:#fff; font-size: 20px; margin: 0 0 6px; }
.newsletter p { color: #9fb0d6; margin: 0; font-size: 14px; }
.newsletter-form { display:flex; gap: 10px; }
.newsletter-form input { padding: 12px 16px; border-radius: var(--radius-sm); border: none; width: 280px; }

/* ===== شريط الميزات فوق الفوتر (4 عناصر: شهادة معتمدة/تدريب عملي/مدربون خبراء/تطوير مستمر) =====
   قسم مستقل بخلفية بيضاء يسبق الفوتر مباشرة (الصفحة الرئيسية فقط، عبر public/index.html) —
   محتوى ثابت (ليس من لوحة التحكم) لأنه نص تسويقي عام لا يحتاج إدارة ديناميكية حاليًا */
.site-trust-strip { padding: 34px 0 30px; background:#fff; border-top:1px solid var(--border-color); }
/* عنوان قسم "لماذا تختار مركزنا؟" — نفس أسلوب عناوين أقسام الرئيسية الأخرى (section-head h2).
   ومحاذاته إلى اليمين لا الوسط: كانت وسطًا لأن القسم بلا زرّ جانبي، ثم طلب صاحب الموقع
   أن يصطفّ مع بقية عناوين الصفحة فيقرأ الزائر عمودًا واحدًا من العناوين لا عنوانًا شاردًا.
   ‎start‎ لا ‎right‎: الصفحة عربية فـ‎start‎ هي اليمين، وتنقلب وحدها لو تغيّر اتجاه الصفحة. */
.site-trust-strip .stt-head { text-align:start; margin-bottom:28px; }
.site-trust-strip .stt-head h2 { font-size:26px; font-weight:800; color: var(--navy-900); margin:0; }
.site-trust-strip .stt-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.stt-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:0 10px; }
.stt-icon { width:64px; height:64px; border-radius:16px; background:#eef3ff; color: var(--navy-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stt-icon svg { width:28px; height:28px; }
.stt-title { font-weight:800; font-size:15px; color: var(--navy-900); }
.stt-desc { font-size:12.5px; color: var(--text-mid); line-height:1.7; }
@media (min-width:1101px) {
  .stt-item:not(:first-child) { border-inline-start:1px solid var(--border-color); }
}

/* ===== الفوتر ===== */
.site-footer { background: var(--bg-sidebar); padding-top: 42px; color: #b7c4e6; }
/* الفوتر بصف واحد فقط: الشعار/الوصف + روابط سريعة + [أقسام إضافية اختيارية من لوحة التحكم] +
   خدماتنا + تواصل معنا — كلها أعمدة جنبًا إلى جنب بنفس الصف (flex بدل grid ثابت الأعمدة) حتى
   تستوعب عدد الأعمدة المتغيّر (4 أعمدة ثابتة + حتى 3 أعمدة اختيارية) دون كسر التخطيط، وتلتف
   تلقائيًا لصفوف إضافية عند ضيق الشاشة بدل استخدام قالب أعمدة صلب */
.footer-grid { display: flex; flex-wrap: wrap; gap: 30px 34px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-grid > div:first-child { flex: 1.3 1 230px; }
.footer-grid > div:not(:first-child) { flex: 1 1 130px; }
/* الغلاف الذي تبنيه home.js لأعمدة "روابط مهمة/انضم إلى فريقنا/أقسام الموقع": display:contents
   يذيب صندوقه فتصبح أعمدته (flg-col) عناصر مباشرة ضمن نفس صف footer-grid أعلاه بدل صف منفصل —
   القيمة الافتراضية display:none (بالـ HTML) تبقى سارية حتى تضيف home.js عمودًا واحدًا فعليًا */
.footer-links-groups .flg-col { flex: 1 1 130px; }
.footer-grid h4 { color: #fff; font-size: 15px; margin: 0 0 18px; padding-bottom:10px; position:relative; }
.footer-grid h4::after { content:''; position:absolute; bottom:0; inset-inline-start:0; width:28px; height:2px; background: var(--blue-500); border-radius:2px; }
.footer-grid ul { margin:0; padding:0; list-style:none; }
.footer-grid li { margin-bottom: 12px; font-size: 13.5px; line-height:1.7; }
.footer-grid p { line-height:1.9; }
.footer-grid a { color:#b7c4e6; transition: color .2s ease, padding-inline-start .2s ease; }
.footer-grid a:hover { color: #fff; padding-inline-start:3px; }
/* السطر السفلي: الحقوق في بداية السطر (اليمين بصفحة عربية) وأيقونات بوابات الدفع في نهايته
   (اليسار). لا float ولا direction معكوس — ترتيب العناصر في DOM وحده يحدّد الجهتين، فتنقلب
   الجهتان تلقائيًا وبشكل صحيح لو عُرضت صفحة بالإنجليزية يومًا ما. */
.footer-bottom { padding: 16px 0; font-size: 13px; color: #7f8fbb; border-top: 1px solid rgba(255,255,255,.06); text-align: center; }
.footer-bottom .fb-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px; text-align: start;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
}
.footer-bottom .fb-copy-wrap { flex: 0 1 auto; }
/* سطر الحقوق: أبيض وأكبر — كان ‎#7f8fbb‎ بحجم ١٣ فيُقرأ كهامشٍ منسيّ في أسفل الصفحة،
   وهو اسم صاحب الموقع وحقُّه. */
.footer-bottom .fb-copy { display: block; line-height: 1.9; font-size: 15px; font-weight: 700; color: #fff; }

/* ═══ سطر التطوير ═══
   شارةٌ لا سطرٌ عابر: نصٌّ أبيض داخل إطارٍ خفيف بخلفيةٍ زجاجية، يتوسّط تحت الحقوق.
   والإطار يُكسبه حدًّا يميّزه عن سطر الحقوق فوقه بلا أن ينافسه في الثِّقل. */
.footer-bottom .fb-credit {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  padding: 7px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .4px; line-height: 1;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
/* نقطةٌ صغيرة قبل النصّ — علامةٌ بصرية تفصل الشارة عمّا فوقها بلا كلمةٍ زائدة */
.footer-bottom .fb-credit::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #8fb6ff, #e0c068); flex: 0 0 auto;
}
.fb-pay { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* بطاقة البوابة: خلفية فاتحة على خلفية الفوتر الداكنة — الشعارات الرسمية للبوابات مصمَّمة
   لخلفية بيضاء، فوضعها مباشرة على الأزرق الداكن يُخفي أجزاء منها حين تُرفع لاحقًا */
/* بطاقة موحّدة المقاس تمامًا لكل البوابات (لا min-width بل width ثابت): تساوي البطاقات هو
   ما يجعل الصف يبدو مرتّبًا، وملفات الشعارات نفسها مُجهّزة على لوحة 2:1 فيملأ كلٌّ منها
   بطاقته بالكامل — فتظهر الأيقونات متساوية الحجم فعليًا لا بالمصادفة */
.pay-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 44px; padding: 0 5px; box-sizing: border-box; flex: 0 0 auto;
  background: #fff; border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.24);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pay-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.28); }
.pay-chip .pay-mark {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: .2px; color: #16233f; white-space: nowrap;
}
.pay-chip .pay-mark svg { width: 13px; height: 13px; fill: #16233f; flex-shrink: 0; }
/* بطاقة "تحويل بنكي" أعرض لأن نصها عربي كامل لا كلمة لاتينية قصيرة */
.pay-chip-ar { min-width: 0; }
.pay-chip-ar .pay-mark { font-family: inherit; font-size: 11px; font-weight: 700; }
/* الشعار يملأ البطاقة كاملة: الصورة نفسها مُجهّزة بهوامشها الداخلية على لوحة 2:1، فلا
   حاجة لحدود هنا. object-fit:contain يحفظ النسبة لو رُفع ملف بأبعاد مختلفة لاحقًا. */
.pay-chip .pay-img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ============ شريط نتيجة الدفع بعد الرجوع من البوابة (public/js/payment-notice.js) ============
   شريط ثابت يقرؤه العميل ويُغلقه بنفسه، لا "توست" عابر يمرّ أثناء تحميل الصفحة فلا يُلحظ —
   وهذا بالضبط ما رصدته مراجعة تابي: الإلغاء والرفض كانا يعودان للسلة بلا رسالة مرئية. */
.pay-notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 12px; margin: 22px 0;
  border: 1px solid transparent; border-inline-start-width: 5px;
  font-size: 14.5px; line-height: 1.9; font-weight: 600;
}
.pay-notice .pn-icon { font-size: 17px; line-height: 1.5; flex-shrink: 0; }
.pay-notice .pn-body { flex: 1; min-width: 0; }
.pay-notice .pn-close {
  border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 4px; color: inherit; opacity: .55; flex-shrink: 0;
}
.pay-notice .pn-close:hover { opacity: 1; }
.pay-notice-bad  { background: #fdecea; border-color: #f3c2bd; color: #9b2c1e; }
.pay-notice-warn { background: #fff6e5; border-color: #f0d3a0; color: #8a5a00; }
.pay-notice-info { background: #eaf1ff; border-color: #bcd0f5; color: #1b3a7a; }
@media (max-width: 680px) {
  .pay-notice { font-size: 13.5px; padding: 12px 13px; margin: 16px 0; }
}

/* ملاحظة: تنسيق **خيارات طريقة الدفع** (البلاطات وشعاراتها) ليس هنا، بل في ملف مستقل:
       public/css/pay-logos.css
   لأن شعارات البوابات مضمَّنة فيه كصور data URI بحجم ٢٧ كيلوبايت، وهذا الملف يُحمَّل في كل
   صفحة بالموقع — فلا معنى لأن يحمل الزائر شعارات الدفع وهو بالصفحة الرئيسية. الملف المستقل
   لا تستدعيه إلا صفحتا السلة والدورة. */


@media (max-width: 700px) {
  .footer-bottom .fb-inner { justify-content: center; text-align: center; gap: 12px; }
  .footer-bottom .fb-copy-wrap { flex: 1 1 100%; text-align: center; }
  .fb-pay { justify-content: center; width: 100%; }
  /* مساحة سفلية إضافية: زر واتساب العائم مثبّت بأسفل الشاشة يسارًا (fixed)، وشريط التبويبات
     السفلي فوقه. بدون هذه المساحة يستقر صف أيقونات الدفع تحت الزر تمامًا عند الوصول لآخر
     الصفحة، فتختفي أيقونة أو اثنتان خلفه — وقد رصدناها فعلًا على شاشة 390 بكسل. */
  .footer-bottom { padding-bottom: 92px; }
  .footer-bottom .fb-inner { padding: 0 14px; }
  /* على الجوال تتقاسم البطاقات عرض السطر بالتساوي (flex:1 1 0 بأساس صفري) بدل عرض ثابت.
     السبب: بعرض ثابت كانت خمس بطاقات تحتاج 344 بكسل والمتاح 342 على شاشة 390 — بكسلان
     فقط يدفعان البطاقة الخامسة إلى سطر وحدها، فيبدو الصف غير متزن. وبالتقاسم تبقى
     الخمس في سطر واحد على أي عرض، ويظل عرضها متطابقًا تمامًا لأن أساسها واحد. */
  .fb-pay { gap: 6px; flex-wrap: nowrap; }
  .pay-chip { flex: 1 1 0; width: auto; max-width: 74px; min-width: 0; height: 42px; padding: 0 4px; }
}

/* أسهم صغيرة بجانب كل رابط بعمودي "روابط سريعة" و"خدماتنا" (وأعمدة الروابط الإضافية أسفل
   الفوتر) — ::after بدل عنصر HTML إضافي حتى تعمل تلقائيًا مع الروابط التي تُبنى ديناميكيًا عبر
   home.js (لا تُضاف لعمود "تواصل معنا" لأنه بيانات نصية وليس روابط تنقّل) */
.footer-grid > div:nth-child(2) ul li a,
.footer-grid > div:nth-child(4) ul li a,
.footer-links-groups .flg-col ul li a {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.footer-grid > div:nth-child(2) ul li a::after,
.footer-grid > div:nth-child(4) ul li a::after,
.footer-links-groups .flg-col ul li a::after {
  content:'‹'; font-size:13px; line-height:1; flex-shrink:0; opacity:.5; transition: opacity .2s ease, transform .2s ease;
}
.footer-grid > div:nth-child(2) ul li a:hover::after,
.footer-grid > div:nth-child(4) ul li a:hover::after,
.footer-links-groups .flg-col ul li a:hover::after {
  opacity:1; transform: translateX(-2px);
}

/* أيقونات التواصل الاجتماعي: دوائر أكبر بأيقونات SVG واضحة بدل الحروف النصية الصغيرة السابقة،
   مع تأثير ارتفاع ولون خاص بكل منصة عند المرور (X/LinkedIn/واتساب) — يُخفى الصف بالكامل تلقائيًا
   (:empty) إن لم يُفعّل المدير أي رابط تواصل من تبويب "التواصل الاجتماعي" باللوحة، بدل ظهور
   دوائر فارغة لا تقود لأي مكان. راجع public/js/settings-apply.js لمنطق بناء الأيقونات */
.footer-social { display:flex; gap: 12px; margin-top: 20px; }
.footer-social:empty { display:none; }
.footer-social a {
  width: 46px; height:46px; border-radius: 50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.footer-social a svg { width:21px; height:21px; }
.footer-social a:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,.28); }
.footer-social a.fs-x:hover { background:#000; }
.footer-social a.fs-linkedin:hover { background:#0a66c2; }
.footer-social a.fs-whatsapp:hover { background:#25d366; }
.footer-social a.fs-youtube:hover { background:#ff0000; }
.footer-social a.fs-telegram:hover { background:#26a5e4; }
.footer-social a.fs-tiktok:hover { background:#010101; }
/* إنستجرام: تدرّجه الرسمي لا لونٌ واحد — برتقاليّ إلى بنفسجيّ */
.footer-social a.fs-instagram:hover { background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }

/* ===== مجموعات الروابط الإضافية (روابط مهمة / انضم إلى فريقنا / أقسام الموقع):
   تُدار بالكامل من تبويب "الصفحات التعريفية" بلوحة التحكم — كل صفحة يُحدَّد لها المدير مجموعة
   فتظهر تلقائيًا هنا بعنوانها كرابط يفتح محتواها الفعلي. أصبحت الآن مدمجة ضمن صف .footer-grid
   نفسه (بجانب روابط سريعة/خدماتنا/تواصل معنا مباشرة، كالتصميم المرجعي) بدل ظهورها كصف منفصل
   أسفل الفوتر كما كان سابقًا — الغلاف #footer-links-groups نفسه display:contents (مُعرَّف أعلى
   الملف بجانب .footer-grid)، فقط أعمدته .flg-col تحتاج تنسيقًا هنا؛ يظهر أي عمود فقط عند وجود
   صفحة منشورة واحدة على الأقل بمجموعته (يُدار via JS بـ home.js) */
.footer-links-groups .flg-col h4 { color:#fff; font-size:15px; margin:0 0 16px; font-weight:800; padding-bottom:10px; position:relative; }
.footer-links-groups .flg-col h4::after { content:''; position:absolute; bottom:0; inset-inline-start:0; width:28px; height:2px; background: var(--blue-500); border-radius:2px; }
.footer-links-groups .flg-col ul { margin:0; padding:0; list-style:none; }
.footer-links-groups .flg-col li { margin-bottom:12px; font-size:13.5px; }
.footer-links-groups .flg-col a { color:#b7c4e6; transition: color .2s ease, padding-inline-start .2s ease; }
.footer-links-groups .flg-col a:hover { color:#fff; padding-inline-start:3px; }

/* ===== نماذج الدخول والتسجيل ===== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: linear-gradient(135deg, var(--navy-800-solid), var(--blue-500)); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; padding: 40px; text-align:center; }
.auth-side h2 { font-size: 26px; margin-bottom: 12px; }
.auth-side p { color: #d3ddfa; max-width: 380px; line-height: 1.9; }
.auth-form-wrap { display:flex; align-items:center; justify-content:center; padding: 40px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; color: var(--navy-900); }
.auth-card .sub { color: var(--text-mid); margin-bottom: 28px; font-size: 14.5px; }
.form-group { margin-bottom: 18px; }
.form-group label { display:block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--navy-900); }
.form-group input, .form-group select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-page); font-size: 14px; }
.form-group input:focus, .form-group select:focus { outline: 2px solid var(--blue-400); }
.form-error { background: #fdeceb; color: var(--red-500); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 16px; display:none; }
.form-success { background: #e8f8f2; color: var(--green-500); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 16px; display:none; }
.auth-switch { text-align:center; margin-top: 22px; font-size: 14px; color: var(--text-mid); }
.auth-switch a { color: var(--blue-500); font-weight: 700; }
/* ===== صفحتا الدخول والتسجيل على الجوال =====
   كانتا تبقيان بعمودين (1fr 1fr) على كل المقاسات، فيصير عرض عمود النموذج ~195px فقط بشاشة 390px
   بينما .auth-card حدّها الأدنى 400px + حشو 40px من كل جهة — فيخرج النموذج خارج حدود الشاشة
   وتظهر بقايا الخلفية القديمة من الجانب ويُقص جزء من الحقول والأزرار. الحل: عمود واحد بالجوال
   مع إخفاء اللوحة الجانبية الترويجية (محتواها تسويقي بحت ولا داعي لدفعه النموذج للأسفل). */
@media (max-width: 680px) {
  .auth-wrap { grid-template-columns: 1fr !important; min-height: 100vh; }
  .auth-side { display: none; }
  .auth-form-wrap { padding: 30px 18px 44px; align-items: flex-start; }
  .auth-card { max-width: 100%; }
  .auth-card h1 { font-size: 23px; }
  .auth-card .sub { margin-bottom: 22px; font-size: 13.5px; }
}
.role-toggle { display:flex; gap: 10px; margin-bottom: 20px; }
.role-toggle label { flex: 1; text-align:center; padding: 10px; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--text-mid); }
.role-toggle input { display:none; }
.role-toggle input:checked + span { color: var(--navy-700); }
.role-toggle label:has(input:checked) { border-color: var(--navy-700); background: #eef3ff; color: var(--navy-700); }

/* ===== لوحات التحكم (تخطيط عام) ===== */
.dash-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.dash-sidebar { background: var(--bg-sidebar); color: #cdd9f5; padding: 24px 18px; position: sticky; top:0; height: 100vh; overflow-y:auto; }
.dash-sidebar .brand { color: #fff; padding: 0 8px 24px; }
.dash-nav a { display:flex; align-items:center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; margin-bottom: 4px; color: #b7c4e6; }
.dash-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.dash-nav a.active { background: var(--blue-500); color: #fff; }
.dash-nav .nav-icon { width: 20px; text-align:center; }
.nav-badge { background: var(--red-500); color:#fff; font-size:11px; font-weight:800; border-radius:20px; padding:2px 8px; margin-inline-start:auto; }
.dash-main { padding: 26px 30px; min-width: 0; }
.dash-topbar { display:flex; align-items:center; justify-content: space-between; margin-bottom: 26px; flex-wrap:wrap; gap:10px; }
.dash-topbar h1 { font-size: 24px; margin: 0; color: var(--navy-900); }
.dash-topbar .welcome { color: var(--text-mid); font-size: 14px; margin-top: 4px; }
/* تنسيق صندوق الصورة+الاسم+تسجيل الخروج بالشريط العلوي للوحات المتدرب — كان مضبوطًا سابقًا بخاصية
   style الداخلية بكل ملف HTML مباشرة، ما جعل قاعدة إخفائه بالجوال (بالأسفل ضمن الجوال) عاجزة عن
   العمل فعليًا (الخاصية الداخلية inline تتغلّب دائمًا على أي قاعدة بملف CSS خارجي مهما كانت
   خصوصيتها) — نُقل التنسيق هنا ليصبح إخفاؤه بالجوال فعّالاً */
.dash-topbar #header-user { display:flex; align-items:center; gap:14px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 22px; }
.stat-card { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); display:flex; align-items:center; justify-content:space-between; min-width: 0; }
.stat-card .s-label { color: var(--text-mid); font-size: 13.5px; margin-bottom: 8px; }
.stat-card .s-value { font-size: 26px; font-weight: 800; color: var(--navy-900); }
.stat-card .s-delta { font-size: 12.5px; color: var(--green-500); font-weight: 700; margin-top: 6px; }
.stat-card .s-icon { width: 48px; height: 48px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size: 20px; flex-shrink:0; }

.charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 22px; }
.card-panel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; min-width: 0; overflow-x: auto; }
.card-panel h3 { font-size: 15.5px; margin: 0 0 16px; color: var(--navy-900); }
.tables-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th { text-align: right; padding: 10px 8px; color: var(--text-light); font-weight: 700; border-bottom: 1px solid var(--border-color); font-size: 12.5px; }
table.data-table td { padding: 12px 8px; border-bottom: 1px solid var(--border-color); color: var(--text-dark); }
table.data-table tr:last-child td { border-bottom: none; }
.pill { padding: 4px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700; display:inline-block; }
.pill-green { background: #e8f8f2; color: var(--green-500); }
.pill-orange { background: #fff3e0; color: var(--gold-600); }
.pill-red { background: #fdeceb; color: var(--red-500); }
.pill-blue { background: #eaf1ff; color: var(--blue-500); }

.progress-track { width: 100%; height: 8px; border-radius: 6px; background: var(--border-color); overflow: hidden; }
.progress-fill { height: 100%; background: var(--blue-500); border-radius: 6px; }

.quick-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tool-card { background: #fff; border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-card); text-align:center; font-size: 13.5px; font-weight: 700; color: var(--navy-900); }
.tool-card .t-icon { font-size: 22px; margin-bottom: 8px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-light); font-size: 14px; }

/* ===== صفحة تفاصيل الدورة / التسجيل ===== */
.course-detail-hero { background: linear-gradient(120deg, var(--navy-800-solid), var(--blue-500)); color:#fff; padding: 56px 0 50px; position:relative; background-size:cover; background-position:center; }
.course-detail-hero.has-image { background-blend-mode: normal; }
.course-detail-hero.has-image::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,31,63,.65), rgba(12,31,63,.9)); }
.course-detail-hero.custom-bg::before { display:none; }
.course-detail-hero .container { position: relative; z-index: 1; }
/* صورة نظيفة منفصلة (بلا أي تظليل فوقها) تُستخدم فقط على الجوال بدل خلط الصورة مع التظليل
   والنص بمنطقة واحدة — مخفية افتراضيًا على الشاشات الكبيرة، راجع استعلام الوسائط أدناه لتفعيلها */
.hero-mobile-image { display:none; }
/* هرم بصري واضح بأعلى صفحة الدورة: التصنيف صغير ومتباعد الحروف ← العنوان ضخم وواضح ←
   النبذة أهدأ منه ← ثم خط فاصل يعزل "دليل الثقة" و"تفاصيل الجدولة" عن الكتلة النصية.
   بلا هذا الفصل كانت كل العناصر تسبح بنفس الوزن فتبدو مزدحمة بلا ترتيب. */
.course-detail-title { font-size: 34px; font-weight: 800; margin: 10px 0 12px; line-height: 1.3; letter-spacing: -.3px; }
.course-detail-subtitle { color: #d6e3ff; font-size: 16px; max-width: 660px; line-height: 1.85; margin: 0; }
.course-cat { font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.detail-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.detail-badge { background: rgba(255,255,255,.15); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.35); white-space:nowrap; }

/* صف الأيقونات البيضاء (الوقت، التاريخ، عدد المتدربين...) بأعلى صفحة الدورة */
/* بطاقات صغيرة بدل نص عائم بجانب دوائر: الحدّ الخارجي يجمع الأيقونة ونصّها في وحدة واحدة،
   فتُقرأ الأربع كصف مرتّب لا ككلمات متناثرة. وأزلنا الدائرة حول الأيقونة لأن البطاقة نفسها
   صارت هي الحاوية — شكلان متداخلان لنفس الغرض يزيدان الضجيج البصري بلا فائدة. */
.detail-icon-stats { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.di-stat {
  display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:14px; font-weight:600;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  border-radius:12px; padding:9px 14px; backdrop-filter:blur(2px);
}
.di-stat .di-icon { width:auto; height:auto; border-radius:0; background:none; border:none; font-size:16px; line-height:1; flex-shrink:0; }

/* شارة التقييم البارزة أعلى صفحة تفاصيل الدورة — نجوم كبيرة ملوّنة بدل رقم صغير باهت */
.detail-rating-badge { display:inline-flex; align-items:center; gap:11px; background:rgba(255,255,255,.14); border:1px solid rgba(255,201,75,.55); border-radius:999px; padding:8px 20px; margin:0; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.detail-rating-badge.muted { border-color:rgba(255,255,255,.3); }
/* النجوم أكبر بنحو الثلث: هي أول ما تقع عليه العين كدليل ثقة، وبحجم 19px كانت تُقرأ كزخرفة */
.detail-rating-badge .drb-stars { display:inline-flex; gap:3px; font-size:26px; line-height:1; }
.detail-rating-badge .drb-star { color:rgba(255,255,255,.3); text-shadow:none; }
.detail-rating-badge .drb-star.filled { color:#ffc94b; text-shadow:0 1px 6px rgba(255,201,75,.55); }
.detail-rating-badge .drb-score { font-size:19px; font-weight:900; color:#fff; }
.detail-rating-badge .drb-count { font-size:13px; color:#dbe6ff; font-weight:600; }

/* صف الثقة الاجتماعية أعلى الصفحة: شارة التقييم + عدد المتدربين المسجلين جنبًا إلى جنب،
   ليظهرا كدليل ثقة واحد واضح بدل تشتيتهما بين صفين منفصلين */
.hero-social-proof { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); }
/* عدد المسجلين بنفس هيئة شارة التقييم ليقرأهما الزائر كوحدة واحدة "دليل ثقة"، بدل نص
   باهت ملتصق بشارة بارزة — التفاوت بينهما كان يجعل الصف يبدو غير مكتمل */
.hero-enrolled-badge { display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:14px; font-weight:700; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:9px 17px; }

/* شارة خصم بارزة (حمراء) تُضاف تلقائيًا لصف الشارات أعلى الصفحة عند وجود سعر أصلي أعلى من السعر الحالي */
.discount-badge { background: var(--red-500) !important; border-color: var(--red-500) !important; color:#fff !important; }

/* تبويبا "نبذة عن الدورة" / "التعليقات" أعلى بطاقة معلومات الدورة */
.info-tabs-row { display:flex; gap:6px; border-bottom:1px solid var(--border-color); margin-bottom:20px; }
.info-tab-btn { background:none; border:none; font:inherit; padding:12px 4px; margin-inline-end:22px; font-size:15.5px; font-weight:700; color:var(--text-light); cursor:pointer; position:relative; display:inline-flex; align-items:center; gap:6px; }
.info-tab-btn.active { color:var(--navy-900); }
.info-tab-btn.active::after { content:''; position:absolute; right:0; left:0; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--navy-700); }
.info-tab-badge { background:var(--navy-700); color:#fff; font-size:11px; font-weight:800; border-radius:20px; min-width:19px; height:19px; padding:0 5px; align-items:center; justify-content:center; }

/* قسم تقييمات الدورة وتعليقات المتدربين السابقين (بطاقة معلومات الدورة) */
.detail-reviews-list { display:flex; flex-direction:column; gap:12px; margin-bottom:8px; }
.detail-review-item { border:1px solid var(--border-color); border-radius:12px; padding:14px 16px; background:var(--bg-page); }
.detail-review-item .dri-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.detail-review-item .dri-name { font-weight:700; font-size:13.5px; color:var(--navy-900); }
.detail-review-item .dri-stars { display:inline-flex; gap:1px; font-size:12.5px; margin-top:2px; }
.detail-review-item .dri-star { color:#dfe4ee; }
.detail-review-item .dri-star.filled { color:#ffc94b; }
.detail-review-item .dri-text { font-size:13.5px; color:var(--text-mid); line-height:1.9; margin:0; }

/* الشبكة: يمين = صورة الدورة وبطاقة الشراء، يسار = المحتوى (تلقائيًا بحكم اتجاه RTL) */
/* position:relative + z-index هنا ضروري: .course-detail-hero بالأعلى معرّف position:relative، وبدون
   هذا السطر تُرسم صورة الهيرو (لأنها "مُموضعة" positioned) فوق بطاقات القسم التالي رغم أنها تسبقها
   بالترتيب — وهذا بالضبط سبب تغطية الصورة على "نبذة عن الدورة" بمنطقة التراكب السالبة (margin-top:-50px) */
.course-detail-grid { display:grid; grid-template-columns: 380px 1fr; gap: 30px; margin-top: -50px; align-items:start; position:relative; z-index:2; }
.course-info-card, .course-buy-card { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 26px; }
.course-buy-card { position: sticky; top: 96px; }

/* ===== عناصر تحفيزية ببطاقة الشراء: السعر مع الخصم، إلحاح المقاعد، الثقة الاجتماعية، مزايا
   مصوّرة بأيقونات بدل نص عادي — كلها مبنية من بيانات الدورة الفعلية (لا أرقام أو ادّعاءات وهمية) ===== */
/* سطر خصم الإحالة — يظهر في بطاقة شراء الدورة وفي صفحة الدفع معًا، فعُرِّف هنا مرّة واحدة.
   يقول للزائر **لماذا** نقص السعر، فلا يظنّه خطأً ولا يبحث عن صندوق كودٍ أُخفي عنه. */
.ref-discount-note {
  font-size:13px; font-weight:800; color:var(--green-500);
  background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.28);
  border-radius:9px; padding:6px 10px; margin:8px 0; line-height:1.7;
}

/* ═══════════ سطر السعر: الثلاثة مجموعة لا متفرّقة ═══════════
   كان ‎justify-content:space-between‎ يدفع شارة «وفّر ٪» إلى الطرف المقابل من البطاقة،
   فيقرأ المشتري السعر في جهة ونسبة الخصم في جهةٍ أخرى — وهما خبرٌ واحد لا خبران.
   فصارت الثلاثة متجاورة تُقرأ دفعةً واحدة: المشطوب فالسعر فالنسبة. */
/* ═══════════ سطر السعر: مجموعٌ في وسط البطاقة تحت الصورة ═══════════
   كان ‎space-between‎ يدفع شارة «وفّر ٪» إلى الطرف المقابل، فيقرأ المشتري السعر في جهة
   والنسبة في جهة — وهما خبرٌ واحد. ثم صار مجموعًا في أوّل السطر، وبقي طرفه الآخر فارغًا
   تحت صورةٍ تملأ عرض البطاقة، فبدا السطر مائلًا عنها.
   فصار في **وسط** البطاقة تحت مركز الصورة تمامًا، وأكبر قليلًا — هو الرقم الذي جاء
   الزائر لأجله، فيُقرأ من مسافة لا بتحديق. */
.buy-price-row { display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:wrap; margin-bottom:6px; }
.buy-price-main { font-size:32px; font-weight:800; color:var(--navy-900); display:inline-flex; align-items:center; gap:10px; }
.buy-price-old { font-size:17px; color:var(--text-light); text-decoration:line-through; font-weight:600; margin-inline-end:0; }
/* وسطر الضريبة يتبعه: سطران تحت صورة واحدة، أحدهما وسطٌ والآخر طرفٌ يبدوان غير مقصودين */
.price-tax-note { text-align:center; }
.urgency-strip { display:flex; align-items:center; justify-content:center; gap:6px; background:#fff3e0; color:#a8681a; font-size:12.5px; font-weight:700; padding:9px 12px; border-radius:10px; margin:12px 0 16px; text-align:center; }
.buy-social-proof { font-size:12.5px; color:var(--text-mid); text-align:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-color); }
.buy-perks-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.buy-perk-item { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-mid); line-height:1.5; }
.buy-perk-item .bpi-icon { flex-shrink:0; font-size:15px; width:20px; text-align:center; }
/* حُذف .buy-secure-note — سطر «🔒 دفع آمن عبر بوابة إلكترونية معتمدة» استُبدل بصفّ شعارات
   وسائل الدفع (‎.pay-trust‎ في css/pay-logos.css). لم يبقَ في الموقع ما يستعمل هذا الصنف. */

/* معرض صور الدورة (أعلى بطاقة الشراء) */
/* ═══ لا نسبة ثابتة للإطار ═══
   قِيست الصور فعليًا: بنسبة ثابتة كان الإطار ٣٢٦×٢٤٥ والصورة العريضة ترسم ٣٢٦×٢١٠ —
   أي فراغ رأسي ميّت؛ والأسوأ أن الصورة الطولية تُحشر في المستطيل العريض فترسم ١٧٥×٢٤٥
   وتخسر ثلثي مساحتها بلا سبب. النسبة الثابتة تفرض قالبًا واحدًا على صور مختلفة.
   بترك الارتفاع للصورة نفسها، وسقف أعلى يمنع الطول المفرط: العريضة كما هي بلا فراغ،
   والطولية ترسم ٣٠٠×٤٢٠ — أي أربعة أضعاف مساحتها السابقة. */
.course-gallery-main { width:100%; min-height:170px; max-height:420px; border-radius:12px; overflow:hidden; background:#eef2fa; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
/* contain لا cover: cover يملأ الإطار لكنه يقصّ أطراف الصورة، فتضيع أجزاء من التصميم
   أو النص المكتوب داخلها. contain يُظهر الصورة كاملة دائمًا. */
.course-gallery-main img { width:100%; height:auto; max-height:420px; object-fit:contain; padding:3px; box-sizing:border-box; }
.course-gallery-main .no-image { color:var(--text-light); font-size:13px; }
.course-gallery-thumbs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.course-gallery-thumbs img { width:54px; height:54px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; opacity:.65; transition: all .15s; }
.course-gallery-thumbs img:hover { opacity:1; }
.course-gallery-thumbs img.active { border-color: var(--navy-700); opacity:1; }

/* قائمة معاينة دروس الدورة (غير متزامن فقط) بإعلان الدورة قبل التسجيل */
.lesson-preview-list { display:flex; flex-direction:column; gap:8px; }
.lesson-preview-item { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border-color); border-radius:10px; font-size:13.5px; color: var(--text-dark); }
.lesson-preview-item .lp-icon { width:30px; height:30px; border-radius:50%; background:var(--bg-page); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.lesson-preview-item.locked { color:var(--text-light); cursor:not-allowed; }
.lesson-preview-item.unlocked { border-color:#c8dcff; background:#f7faff; cursor:pointer; }
.lesson-preview-item.unlocked .lp-icon { background:#eaf1ff; color:var(--blue-500); }
/* حالة "متاح ضمن مساري": الدرس مقفل للزوار لكن المتدرب الحالي مسجّل فعليًا بهذه الدورة،
   فيظهر بلون أخضر مع رابط مباشر لصفحة تشغيل الدروس بدل قفل التسجيل والدفع */
.lesson-preview-item.owned { border-color:#c8e6d4; background:#f4fbf7; cursor:pointer; }
.lesson-preview-item.owned .lp-icon { background:#e8f8f2; color:var(--green-500); }
.lp-owned { margin-inline-start:auto; color:var(--green-500); font-size:11px; font-weight:800; white-space:nowrap; }
.lp-badge-free { margin-inline-start:auto; background:#e8f8f2; color:var(--green-500); font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.lp-lock { margin-inline-start:auto; color:var(--text-light); font-size:14px; }
.preview-video-box { position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; }
.preview-video-box iframe, .preview-video-box video { width:100%; height:100%; border:0; }
.detail-section-title { font-size:17px; font-weight:800; color: var(--navy-900); margin: 26px 0 12px; }
.outcomes-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.outcome-item { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--text-mid); line-height:1.6; }
.outcome-item .chk { color: var(--green-500); font-weight:800; flex-shrink:0; }
.curriculum-module { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom:10px; overflow:hidden; }
.curriculum-module summary { padding:14px 16px; font-weight:700; font-size:14px; cursor:pointer; background:var(--bg-page); color: var(--navy-900); list-style:none; }
.curriculum-module summary::-webkit-details-marker { display:none; }
.curriculum-module .points { padding: 12px 16px 16px; margin:0; }
.curriculum-module .points li { position:relative; padding-inline-start:18px; font-size:13px; color:var(--text-mid); line-height:1.8; }
.curriculum-module .points li::before { content:"•"; position:absolute; inset-inline-start:0; color: var(--blue-500); }
.two-col-list { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.two-col-list h4 { font-size:14px; margin:0 0 10px; color: var(--navy-900); }
.two-col-list ul { margin:0; }
.two-col-list ul li { font-size:13px; color: var(--text-mid); line-height:1.8; position:relative; padding-inline-start:16px; }
.two-col-list ul li::before { content:"—"; position:absolute; inset-inline-start:0; color: var(--text-light); }
/* بطاقة المدرب أسفل تبويبات معلومات الدورة: أفتيار أكبر بارز + خلفية متدرجة خفيفة وحدود واضحة
   بدل الصف البسيط السابق ذي الخلفية الرمادية المسطحة */
.instructor-card { display:flex; align-items:center; gap:14px; padding:18px; background: linear-gradient(135deg, var(--bg-page), #fff); border:1px solid var(--border-color); border-radius:14px; margin-top:8px; }
.instructor-card .instructor-avatar { width:52px; height:52px; font-size:17px; flex-shrink:0; box-shadow:0 4px 14px rgba(20,41,90,.15); }
.instructor-card .instructor-name { font-weight:800; color:var(--navy-900); font-size:14.5px; }
.instructor-card .instructor-title { font-size:12.5px; color:var(--text-light); margin-top:3px; }
.image-upload-zone { border: 1.5px dashed var(--border-color); border-radius: 12px; padding: 16px; text-align:center; background: var(--bg-page); }
.image-upload-preview { width:100%; max-height:220px; object-fit:cover; border-radius:10px; margin-bottom:10px; }
.gallery-upload-list { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.gallery-upload-item { position:relative; width:76px; height:76px; border-radius:8px; overflow:hidden; border:1px solid var(--border-color); }
.gallery-upload-item img { width:100%; height:100%; object-fit:cover; }
.gallery-upload-item .gu-del { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:rgba(15,25,50,.65); color:#fff; border:none; font-size:11px; cursor:pointer; line-height:1; }
.color-swatch-row { display:flex; align-items:center; gap:12px; }
.color-swatch-row input[type=color] { width:52px; height:40px; padding:2px; border-radius:8px; border:1px solid var(--border-color); background:#fff; cursor:pointer; }

/* ===== واجهة البث المباشر ===== */
.live-shell { background: #0b1120; min-height: 100vh; color: #e7ecff; display:grid; grid-template-columns: 260px 1fr 300px; }
.live-participants { background: #10182c; padding: 18px; overflow-y:auto; }
.live-participants h3 { font-size: 14px; margin-bottom: 14px; color: #9fb0d6; }
.participant-row { display:flex; align-items:center; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 13.5px; }
.participant-row:hover { background: rgba(255,255,255,.05); }
.dot-online { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }
.live-stage { display:flex; flex-direction:column; }
.live-topbar { display:flex; align-items:center; justify-content:space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
.rec-badge { display:flex; align-items:center; gap:6px; background: rgba(230,84,63,.15); color: #ff6b57; padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700; }
.rec-dot { width:8px; height:8px; border-radius:50%; background:#ff4444; animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.video-grid { flex:1; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px; align-content: start; }
.video-tile { aspect-ratio: 16/10; background: #182241; border-radius: 12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.video-tile video { width:100%; height:100%; object-fit:cover; }
.video-tile .name-tag { position:absolute; bottom: 8px; right: 10px; background: rgba(0,0,0,.5); padding: 3px 10px; border-radius: 20px; font-size: 12px; }
.video-tile .avatar-circle { width: 56px; height: 56px; font-size: 18px; }
.live-controls { display:flex; align-items:center; justify-content:center; gap: 14px; padding: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.ctrl-btn { width: 46px; height: 46px; border-radius: 50%; border:none; background: #1c2540; color:#fff; display:flex; align-items:center; justify-content:center; font-size: 17px; }
.ctrl-btn.danger { background: var(--red-500); }
.ctrl-btn.active { background: var(--blue-500); }
.live-chat { background: #10182c; display:flex; flex-direction:column; padding: 16px; }
.live-chat h3 { font-size: 14px; margin-bottom: 12px; color: #9fb0d6; }
.chat-messages { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap: 10px; margin-bottom: 12px; }
.chat-msg { font-size: 13px; background: rgba(255,255,255,.04); padding: 8px 12px; border-radius: 10px; }
.chat-msg b { color: #7fb0ff; }
.chat-system { font-size: 12px; color: #7d8bb3; text-align:center; }
.chat-input-row { display:flex; gap: 8px; }
.chat-input-row input { flex:1; padding: 10px 12px; border-radius: 20px; border: none; background: #1c2540; color:#fff; font-size: 13px; }
.chat-input-row button { width: 40px; height: 40px; border-radius: 50%; border:none; background: var(--blue-500); color:#fff; }

/* ===== قائمة الجوال المنسدلة (الهيدر العام) ===== */
.nav-toggle-btn { display:none; width:40px; height:40px; border-radius:10px; border:none; background:var(--bg-page); align-items:center; justify-content:center; font-size:18px; cursor:pointer; color:var(--navy-800-solid); flex-shrink:0; }
.mobile-nav-overlay { display:none; position:fixed; inset:0; background:rgba(15,25,50,.55); z-index:150; }
.mobile-nav-overlay.open { display:block; }
.mobile-nav-panel { position:fixed; top:0; inset-inline-start:0; width:82%; max-width:320px; height:100%; background:#fff; z-index:151; padding:22px 22px 30px; transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; box-shadow:8px 0 26px rgba(0,0,0,.18); }
.mobile-nav-panel.open { transform:translateX(0); }
.mobile-nav-panel .brand { margin-bottom:26px; padding-top:6px; }
.mobile-nav-panel .mnp-close { position:absolute; top:18px; inset-inline-end:18px; width:34px; height:34px; border-radius:50%; border:none; background:var(--bg-page); font-size:14px; cursor:pointer; color:var(--text-mid); }
.mnp-nav { display:flex; flex-direction:column; }
.mnp-nav a { display:block; padding:14px 6px; font-weight:700; color:var(--text-mid); border-bottom:1px solid var(--border-color); font-size:15px; }
.mnp-nav a.active, .mnp-nav a:hover { color:var(--navy-700); }

/* ===== قائمة جوال منسدلة (لوحات التحكم) ===== */
.dash-hamburger-btn { display:none; width:38px; height:38px; border-radius:10px; border:none; background:var(--bg-page); align-items:center; justify-content:center; font-size:17px; cursor:pointer; color:var(--navy-800-solid); flex-shrink:0; margin-inline-end:4px; }
.dash-overlay { display:none; position:fixed; inset:0; background:rgba(15,25,50,.55); z-index:205; }
.dash-overlay.open { display:block; }

/* ===== شريط تنقّل سفلي للجوال (موحّد للزوار والمتدربين معًا) — أيقونات SVG بلون أزرار
   الموقع دائمًا (وليس رماديًا ثم أزرق عند التفعيل)، والتبويب النشط يتميّز بخلفية دائرية خفيفة ===== */
.mobile-tabbar { display:none; }
.mobile-tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 6px; font-size:10.5px; font-weight:700; color:var(--navy-700); position:relative; }
.mobile-tabbar a .mt-icon { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.mobile-tabbar a .mt-icon svg { width:21px; height:21px; }
.mobile-tabbar a.active { font-weight:800; }
.mobile-tabbar a.active .mt-icon { background:#eaf1ff; }
.mobile-tabbar a .mt-dot { position:absolute; top:4px; inset-inline-end:24%; width:7px; height:7px; border-radius:50%; background:var(--red-500); }
/* شارة عدد عناصر السلة: رقم صغير (وليس مجرد نقطة) — تُستخدم بالهيدر العام وبتبويب السلة بالجوال معًا */
.cart-badge { background:var(--red-500); color:#fff; font-size:10.5px; font-weight:800; line-height:1; min-width:16px; height:16px; border-radius:9px; align-items:center; justify-content:center; padding:0 3px; }
.mobile-tabbar a .cart-badge { position:absolute; top:2px; inset-inline-end:20%; }
.icon-btn .cart-badge { position:absolute; top:-4px; inset-inline-start:-4px; }

/* ===== زر واتساب عائم دائري — يظهر بالصفحة الرئيسية فقط على الجوال، برفعه فوق الشريط
   السفلي دائمًا حتى لا يغطيه أو يُغطى به، وبنبضة حركية خفيفة لجذب الانتباه دون إزعاج ===== */
.mobile-fab {
  display:none; position:fixed; bottom: calc(72px + env(safe-area-inset-bottom)); inset-inline-end:18px; z-index:110;
  width:54px; height:54px; align-items:center; justify-content:center;
  background: var(--navy-700); color:#fff; border-radius:50%;
  font-size:24px; box-shadow: 0 10px 26px rgba(20,41,90,.35); border:none;
  animation: fabPulse 2.6s ease-in-out infinite;
}
.mobile-fab svg { width:26px; height:26px; fill:#fff; }
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(20,41,90,.35), 0 0 0 0 rgba(37,143,73,.45); }
  50% { box-shadow: 0 10px 26px rgba(20,41,90,.35), 0 0 0 9px rgba(37,143,73,0); }
}

/* ===== شريط "رجوع" مدمج تحت الشعار مباشرة (وليس عائمًا وليس مغطّيًا للهيدر) — لاصق ضمن
   الشريط العلوي (position:sticky) بحيث يبقى ظاهرًا دائمًا عند التمرير لأسفل ولا يختفي أبدًا؛
   المسافة اللاصقة (top) تُحسب وتُضبط ديناميكيًا عبر JS حسب ارتفاع الهيدر الفعلي ===== */
/* ⚠️ ‎var(--bg-page)‎ لا ‎#fff‎: كان اللون أبيض صريحًا، والموقع كلّه صار كحليًّا — فبقي
   الشريط **شريطًا أبيض عريضًا** بين الترويسة الداكنة والصفحة الداكنة، يقطع الصفحة بخطٍّ
   لا معنى له على الجوال وحده. والمتغيّر يتبع السِّمة: كحليٌّ الآن، وأبيض لو عادت فاتحة. */
.mobile-back-row { display:none; position:sticky; top:0; z-index:99; padding:8px 16px; background:var(--bg-page); border-bottom:1px solid var(--border-color); }
.mobile-back-row .mbr-btn { display:inline-flex; align-items:center; gap:6px; background:var(--bg-page); color:var(--navy-700); font-weight:700; font-size:13px; padding:7px 14px; border-radius:20px; cursor:pointer; border:none; }
.mobile-back-row .mbr-btn svg { width:16px; height:16px; }

/* ===== قائمة "التصنيفات" المنسدلة أعلى الموقع (الهيدر العام) ===== */
.nav-cat-dropdown { position:relative; }
.nav-cat-trigger { background:none; border:none; font:inherit; font-weight:600; color:var(--text-mid); font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:0; transition:color .2s; }
.nav-cat-trigger:hover { color:var(--navy-700); }
.nav-cat-caret { font-size:10px; }
.nav-cat-menu { display:none; position:absolute; top:calc(100% + 16px); inset-inline-start:0; background:#fff; border:1px solid var(--border-color); border-radius:12px; box-shadow:var(--shadow-hover); min-width:220px; max-height:70vh; overflow-y:auto; padding:8px; z-index:200; }
.nav-cat-menu.open { display:block; }
.nav-cat-menu a { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text-dark); }
.nav-cat-menu a:hover { background:var(--bg-page); color:var(--navy-700); }
/* داخل قائمة الجوال المنسدلة: تُعرض القائمة الفرعية مبسوطة ضمن التدفّق الطبيعي بدل صندوق عائم */
.mnp-nav .nav-cat-trigger { width:100%; justify-content:space-between; padding:14px 6px; border-bottom:1px solid var(--border-color); font-size:15px; color:var(--text-mid); }
.mnp-nav .nav-cat-menu { position:static; display:none; box-shadow:none; border:none; background:var(--bg-page); border-radius:10px; margin:4px 0 8px; padding:4px; max-height:none; }
.mnp-nav .nav-cat-menu.open { display:block; }

/* ===== الدورات المميزة بالرئيسية: تجميع حسب التصنيف (4 دورات + أيقونة "المزيد") =====
   كل تصنيف يظهر داخل إطار بطاقة احترافي كامل (خلفية بيضاء + حدود + ظل + زاوية علوية ملوّنة
   مميزة)، أما اسم التصنيف نفسه فبلا أي إطار أو خلفية أو حدود — نص صِرف بخط عريض احترافي
   (وزن 800 + تباعد أحرف خفيف) مع أيقونة صغيرة ملوّنة بجانبه فقط، على الجوال وسطح المكتب معًا ===== */
.category-section {
  margin-bottom:26px;
  background:#fff;
  border:1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding:24px 24px 28px;
  border-top:3px solid var(--navy-700);
}
.category-section:last-child { margin-bottom:0; }
.category-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.category-section-head h3 { font-size:19px; font-weight:800; color:var(--navy-900); margin:0; }
.cat-name-frame {
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; border-radius:0; padding:0; box-shadow:none;
  color: var(--navy-900); font-weight:800; letter-spacing:.2px;
}
.cat-name-frame .cnf-icon {
  width:auto; height:auto; flex-shrink:0;
  background:none; color: var(--navy-700);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05em;
}
.category-more-link { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--navy-700); background:#eaf1ff; padding:7px 14px; border-radius:20px; white-space:nowrap; flex-shrink:0; transition: background .2s, color .2s; }
.category-more-link:hover { background:var(--navy-700); color:#fff; }
.category-more-link svg { width:14px; height:14px; }
.cnf-icon svg { display:block; }/* ===== تصنيف بنوع عرض "متحرك" (يُختار من لوحة التحكم لكل تصنيف على حدة): صف بطاقات قابل للسحب
   اليدوي بدل الشبكة الثابتة — بدون أي حركة تلقائية إطلاقًا، السحب فقط بالإصبع بالجوال أو بالماوس
   بسطح المكتب (Pointer Events)، بنفس أسلوب صف الاعتمادات والشركاء بالجوال ===== */
/* user-select:none ثابت هنا دائمًا (وليس فقط أثناء .dragging) — هذا هو سبب عطل الضغط بزر الفأرة
   الأيسر على بطاقات هذا الصف تحديدًا: كانت user-select:none تُفعَّل فقط بعد إضافة كلاس dragging
   عبر JS داخل pointerdown، وهذا متأخر جدًا؛ يبدأ المتصفح تحديد نص تلقائيًا بمجرد الضغط بالماوس على
   أي نص داخل البطاقة (كعنوان الدورة) حتى قبل أن يُطبَّق الكلاس فعليًا، وإن حصل أي تحديد نص ولو
   بسيط أثناء الضغط، يُلغي كروم حدث click بالكامل بلا أي رسالة خطأ - فيبدو وكأن الضغط "لا يعمل"
   رغم أن الرابط سليم تمامًا (يعمل عبر "فتح الرابط بتبويب جديد" أو باللمس بالجوال حيث لا يحصل هذا
   التحديد أصلًا). التثبيت هنا بالـ CSS الأساسي يمنع بداية أي تحديد نص من الأصل بدل محاولة إلغائه لاحقًا */
/* width:fit-content + max-width:100% هنا ضروريان: بدونهما يمتد الصف (لأنه عنصر block عادي بحكم
   flex الأب) بعرض حاوية القسم كاملة دائمًا مهما كان عدد البطاقات الفعلي بداخله — فإن كان التصنيف
   يحوي بطاقات أقل من العدد الذي يملأ الصف (3 بدل 4 مثلًا)، تبقى مساحة فارغة غير مرئية لكنها لا
   تزال جزءًا من نفس عنصر الصف القابل للضغط، وأي ضغطة تقع بالخطأ داخل هذه المساحة (قريبة جدًا من
   آخر بطاقة ظاهرة، خصوصًا بحواف البطاقة) لا تفتح شيئًا لأنها فعليًا خارج حدود أي بطاقة رغم قربها
   البصري منها — بتحديد عرض الصف بعرض محتواه الفعلي فقط، تختفي هذه المنطقة الميتة نهائيًا ولا يبقى
   شيء قابل للضغط إلا البطاقات نفسها بالضبط؛ max-width:100% يحافظ على قصّ الصف والسحب الأفقي
   الطبيعي إن كان عدد البطاقات كافيًا لتجاوز عرض الحاوية */
.cat-scroll-row { display:flex !important; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:16px; cursor:grab; padding-bottom:2px; user-select:none; -webkit-user-select:none; -ms-user-select:none; width:fit-content; max-width:100%; }
.cat-scroll-row::-webkit-scrollbar { display:none; }
.cat-scroll-row.dragging { cursor:grabbing; scroll-behavior:auto; }
/* ═══ سحب الصف بالفأرة على الكمبيوتر ═══
   الرابط والصورة قابلان للسحب أصلًا في المتصفّح، فكان سحبُه هو يُلغي سحبَنا فلا يتحرّك الصف
   بالفأرة إطلاقًا (واللمس يعمل لأنه لا يمرّ بهذا الطريق). والمنع الأساسي في ‎home.js‎ بإلغاء
   ‎dragstart‎، وهذه القاعدة سندٌ يسبق الحدث. ولا تمسّ النقر: الرابط يُفتح كما كان. */
.cat-scroll-row a, .cat-scroll-row img,
.partners-carousel a, .partners-carousel img { -webkit-user-drag:none; user-drag:none; }
.cat-scroll-row > * { flex:0 0 auto; }
.cat-scroll-row.courses-grid > .course-card { width:250px; }
.cat-scroll-row.tracks-grid > .track-card { width:300px; }
@media (max-width:680px) {
  .cat-scroll-row.courses-grid.mini-grid-2 > .course-card { width:150px; }
  .cat-scroll-row.tracks-grid > .track-card { width:250px; }
}

/* ===== الصفحة الرئيسية للمتدرب المسجّل دخوله =====
   سابقًا كان الهيرو كاملاً يُخفى للمتدرب. الآن يظهر له الهيرو (العنوان + النص الفرعي + البانر
   المتحرك) تمامًا كالزائر، ويبقى المخفي فقط ما هو تسويقي بحت ولا معنى له لمن سجّل دخوله أصلاً:
   أزرار الهيرو (دعوة التسجيل/التواصل) وعنوان "الدورات المميزة" مع وصفه وزر "عرض جميع الدورات".
   تُطبَّق دون قيد شاشة، أي على الجوال واللابتوب معًا. */
body.trainee-mode .hero-actions { display:none; }
body.trainee-mode #courses .section-head { display:none; }

/* ===== غلاف تطبيق المتدرب بالجوال (يستبدل الهيدر العادي بشريط علوي مصغّر + شريط تبويبات سفلي موحّد) ===== */
.trainee-mobile-topbar { display:none; }
.trainee-mobile-topbar .tmt-menu-btn { width:34px; height:34px; border-radius:8px; background:var(--bg-page); border:none; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--navy-800-solid); flex-shrink:0; cursor:pointer; }
.trainee-mobile-topbar .tmt-logo { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg, var(--navy-700), var(--blue-500)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; flex-shrink:0; }
/* شعار المركز الفعلي (صورة مرفوعة بلوحة التحكم) بالشريط العلوي المصغّر — بديل النص "تم" الاحتياطي */
.trainee-mobile-topbar .tmt-logo-img { height:30px; width:auto; max-width:90px; border-radius:6px; flex-shrink:0; object-fit:contain; }.trainee-mobile-topbar .tmt-name { font-weight:700; font-size:14.5px; flex:1; }
/* ═══════════ الجرس وزرّ الخروج: زوجٌ واحد لا عنصران متجاوران ═══════════
   كان الجرس ‎٣٤‎ بكسل برسمٍ ‎١٩‎ — أصغر من علامة الخروج (⏻) التي تُرسم بحجم الخطّ، فيبدوان
   غيرَ متساويين. والفجوة بينهما ‎١٠‎ بكسل، وهي فجوة الشريط كلِّه، فيقعان متباعدين كأنّ كلًّا
   منهما مستقلّ عن الآخر.
   فصارا مربّعين متساويين ‎٣٨‎ بكسل، ورسمُ الجرس ‎٢٢‎ فيُقرأ ويُلمس، وبينهما ‎٤‎ بكسل وحدها —
   والانتقاء بالمجاورة (‎+‎) فلا يتأثّر بقيّة الشريط بحرف. */
.trainee-mobile-topbar .tmt-logout {
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1;
}
.trainee-mobile-topbar .tmt-notif { width:38px !important; height:38px !important; }
.trainee-mobile-topbar .tmt-notif svg { width:22px !important; height:22px !important; }
.trainee-mobile-topbar .tmt-notif .mt-dot { top:6px; inset-inline-end:6px; }
.trainee-mobile-topbar .tmt-notif + .tmt-logout { margin-inline-start:-6px; }
/* أيقونة الإشعارات بالشريط العلوي (انتقلت إليه من الشريط السفلي) — بالشريط المصغّر للمتدرب،
   وبهيدر الصفحات العامة للزائر، وبشريط لوحة المتدرب العلوي. position:relative ضرورية حتى تستقر
   نقطة التنبيه (.mt-dot) على زاوية الأيقونة بدقة بدل أن تسبح بمكان عشوائي من الصفحة */
.trainee-mobile-topbar .tmt-notif, .site-header .hdr-notif, .dash-topbar .dash-notif,
.site-header .cart-icon-link, .dash-topbar .cart-icon-link {
  position:relative; width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  /* لون أيقونة الجرس = نفس لون أزرار الموقع الأساسي (currentColor داخل الـ SVG يرث هذا اللون) */
  color: var(--navy-700);
}
.trainee-mobile-topbar .tmt-notif svg, .site-header .hdr-notif svg, .dash-topbar .dash-notif svg,
.site-header .cart-icon-link svg, .dash-topbar .cart-icon-link svg { width:19px; height:19px; }
.trainee-mobile-topbar .tmt-notif .mt-dot, .site-header .hdr-notif .mt-dot, .dash-topbar .dash-notif .mt-dot {
  position:absolute; top:5px; inset-inline-end:5px; width:9px; height:9px; border-radius:50%; background:var(--red-500); border:2px solid #fff;
}
/* أيقونة الحقيبة بالشريط السفلي أصبحت إيموجي (نفس أيقونة الكمبيوتر) بدل رسم SVG — تحتاج حجم خط
   صريح لأن قاعدة .mt-icon svg السابقة لا تنطبق على النص */
.mobile-tabbar a .mt-icon { font-size:19px; line-height:1; }.continue-learning-strip { display:none; }
.continue-learning-strip .cls-label { font-size:12px; font-weight:800; color:var(--blue-500); margin-bottom:6px; }
.continue-learning-strip .cls-course { font-size:14.5px; font-weight:700; color:var(--navy-900); margin-bottom:10px; }
.continue-learning-strip .cls-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }

/* ===== صفحة "حسابي" (المتدرب): بطاقات مركزية بياناتي/اشتراكاتي/الفواتير ===== */
.account-profile-row { display:flex; align-items:center; gap:14px; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding:18px 20px; margin-bottom:18px; }
.account-profile-row .avatar-circle { width:52px; height:52px; font-size:18px; flex-shrink:0; }
.account-profile-row .ap-name { font-weight:800; font-size:16px; color: var(--navy-900); }
.account-profile-row .ap-email { font-size:12.5px; color: var(--text-mid); direction:ltr; text-align:right; }
.account-hub-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; }
.account-hub-card { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding:26px 20px; text-align:center; transition: transform .2s, box-shadow .2s; border:none; cursor:pointer; font:inherit; color:inherit; width:100%; }
.account-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.account-hub-card .ahc-icon { width:56px; height:56px; border-radius:16px; background:#eef3ff; color: var(--navy-700); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:26px; }
.account-hub-card .ahc-title { font-weight:800; font-size:16px; color: var(--navy-900); margin-bottom:6px; }
.account-hub-card .ahc-desc { font-size:12.5px; color: var(--text-mid); line-height:1.7; }

/* بطاقات "دوراتي / مرفقاتي / شهاداتي" - أزرار بارزة ملوّنة أعلى صفحة "حسابي"، كل بطاقة تفتح صفحتها
   المستقلة الخاصة بها (بخلاف بطاقات account-hub-card أدناه المخصصة لبيانات الحساب والفواتير) */
.account-primary-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin-bottom:22px; }
.account-primary-card { display:flex; align-items:center; gap:14px; border-radius: var(--radius-lg); padding:20px 18px; color:#fff; box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; text-decoration:none; }
.account-primary-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.account-primary-card .apc-icon { width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.account-primary-card .apc-text { flex:1; min-width:0; }
.account-primary-card .apc-title { font-weight:800; font-size:15.5px; margin-bottom:3px; }
.account-primary-card .apc-desc { font-size:11.5px; opacity:.92; line-height:1.6; }
.account-primary-card .apc-arrow { font-size:20px; opacity:.85; flex-shrink:0; }
.account-primary-card.apc-courses { background: linear-gradient(135deg, #3b7bf6, #1a3a75); }
.account-primary-card.apc-mytracks { background: linear-gradient(135deg, #4fd1a5, #0f7a54); }
.account-primary-card.apc-digitalproducts { background: linear-gradient(135deg, #ff9f6b, #c2470f); }
.account-primary-card.apc-attachments { background: linear-gradient(135deg, #a06bf5, #5b2fa8); }
.account-primary-card.apc-certs { background: linear-gradient(135deg, #f4b93f, #c9770a); }
.account-primary-card.apc-workshops { background: linear-gradient(135deg, #f06ba8, #a31d5e); }
/* ===== تحويل جدول الفواتير إلى بطاقات مكدّسة سهلة القراءة على الجوال ===== */
#payments-table .invoice-dl-cell { text-align:center; }

/* ===== منع "ومضة" ظهور حالة خاطئة (كأزرار الزائر لمستخدم مسجّل دخوله، أو ظهور الشعار/الهيرو
   للحظة ثم اختفائهما لمتدرب بالجوال) عند تحميل/تحديث الصفحة: تُخفى منطقة الهيدر بالكامل وقسم
   الهيرو بنفس المساحة (visibility) دون أي قفزة بالتخطيط، حتى ينتهي التحقق الفعلي من الجلسة عبر
   JS (header.js + trainee-app-shell.js)، فيظهر الشكل الصحيح دفعة واحدة دون أي ومضة ===== */
html.auth-pending .site-header,
html.auth-pending .hero { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════════
   ومضة الاتصال الضعيف — ولماذا لم تعد تقع
   ───────────────────────────────────────────────────────────────────────────────
   القاعدة أعلاه تُخفي **الهيدر والهيرو معًا** حتى ينتهي التحقّق من الجلسة. وعلى اتصالٍ
   سريع لا يُلحَظ ذلك. أمّا على اتصالٍ ضعيف فيرى الزائر **موقعًا بلا ترويسة ولا بانر**
   ثوانيَ طويلة — ثم يظهر كل شيء دفعةً واحدة. وهذه هي «الومضة المزعجة».

   وسببها أن الموقع لا يعرف حال الزائر إلا بعد ردّ الشبكة. فصار **يتذكّره**: تُحفظ هيئته
   في ‎localStorage‎ عند كل تحقّق ناجح، وتُطبَّق في أول سطر من الصفحة قبل أي طلب.

       زائرٌ نعرف هيئته  ⇐ ‎shell-known‎  ⇒ **لا يُخفى شيء ولا يُنتظر شيء**
       زيارةٌ أولى        ⇐ ‎auth-pending‎ ⇒ السلوك القديم حرفًا (والمهلة ٢٫٥ ثانية لا ٦)

   فالضمان القديم باقٍ كما هو لمن لا نعرفه، والانتظار زال عمّن نعرفه — وهم الأكثرية.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* هيئة المتدرب تُطبَّق فورًا من الذاكرة، فلا تظهر الترويسة ثم تُنزع.
   وهي نظير ‎body.trainee-mode .site-header‎ أدناه بنفس نقطة الكسر تمامًا. */
@media (max-width: 680px) {
  html.shell-trainee .site-header { display: none !important; }
}
html.shell-trainee .hero-actions { display: none; }

/* ═══ هيكلٌ يشغل المكان بدل فراغٍ يقفز ═══
   العناصر التي تنتظر الشبكة تُعطى وميضًا خفيفًا بحجمها النهائي — فلا يقفز التخطيط
   حين تصل، ولا يقرأ الزائر الفراغ على أنه عطل. والحركة تتوقّف لمن طلب تقليل الحركة. */
.tm-skel {
  position: relative;
  background: linear-gradient(100deg, #eef2f8 30%, #f7f9fc 50%, #eef2f8 70%);
  background-size: 220% 100%;
  animation: tm-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-lg);
  color: transparent !important;
}
.tm-skel > * { visibility: hidden; }
/* البانر أوّل ما يُبنى يخرج من حالة الهيكل — والصنفان قد يجتمعان لحظةً واحدة */
.hero-image.hbc-active { animation: none; background-image: none; }
.hero-image.hbc-active > * { visibility: visible; }
@keyframes tm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .tm-skel { animation: none; } }

/* ===== استجابة للشاشات الصغيرة ===== */
@media (max-width: 1100px) {
  .hero-grid, .courses-grid, .services-grid, .stats-grid, .charts-row, .tables-row, .quick-tools { grid-template-columns: repeat(2, 1fr); }
  /* الفوتر بشاشات اللوحي: عمود الشعار والوصف والتواصل الاجتماعي يمتد بعرض الصف كاملاً أعلى
     الفوتر بدل الانضغاط داخل عمود ضيق، وبقية الأعمدة (روابط سريعة/أقسام إضافية اختيارية/خدماتنا/
     تواصل معنا) تلتف تلقائيًا (flex-wrap) بعرض متساوٍ أسفله مهما كان عددها الفعلي */
  .footer-grid { gap: 28px 24px; }
  .footer-grid > div:first-child { flex-basis: 100%; }
  .footer-grid > div:not(:first-child),
  .footer-links-groups .flg-col { flex: 1 1 160px; }
  /* شريط الميزات فوق الفوتر باللوحي: عمودان بدل 4 أعمدة ضيقة، بلا خطوط فاصلة رأسية */
  .site-trust-strip .stt-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .testi-card { flex-basis: 300px; }
  /* شريط ملخص التقييمات باللوحي: عمودان بدل 4 أعمدة ضيقة */
  .ratings-strip { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .course-detail-grid { grid-template-columns: 1fr; margin-top:24px; }
  .course-buy-card { position:static; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-hamburger-btn { display:flex; }
  .dash-sidebar {
    position: fixed; inset-inline-start:0; top:0; height:100%; width:80%; max-width:300px;
    z-index:210; transform: translateX(100%); transition: transform .28s ease;
    box-shadow: 8px 0 26px rgba(0,0,0,.2);
  }
  .dash-sidebar.mobile-open { transform: translateX(0); }
  .live-shell { grid-template-columns: 1fr; }
  .live-participants, .live-chat { display:none; }
}
@media (max-width: 680px) {
  html { touch-action: pan-x pan-y; }
  .courses-grid, .services-grid, .search-bar, .charts-row, .tables-row, .quick-tools { grid-template-columns: 1fr; }
  .testi-carousel::before, .testi-carousel::after { display:none; }
  /* شريط ملخص التقييمات بالجوال: عمودان بصناديق أصغر بدل تكديس عمودي واحد */
  .ratings-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
  .rs-box { padding: 16px 10px; }
  .rs-icon { width:38px; height:38px; margin-bottom:8px; }
  .rs-icon svg { width:19px; height:19px; }
  .rs-score { font-size:18px; }
  .rs-label { font-size:11.5px; margin-bottom:6px; }
  .testi-quote-icon { width:26px; height:26px; top:14px; right:16px; }
  /* الفوتر بالجوال: كل الأعمدة (روابط سريعة/أقسام إضافية اختيارية/خدماتنا) تظهر جنبًا إلى جنب
     بعمودين (بدل تكديس كل قسم تحت الآخر بعمود واحد كما كان سابقًا)، مع عمود الشعار/الوصف بعرض
     كامل أعلاها وعمود "تواصل معنا" بعرض كامل أسفلها — هذا يقلّص ارتفاع الفوتر الكلي بالجوال
     بشكل واضح بدل التكديس الرأسي، مع تكبير أيقونات التواصل الاجتماعي وتوسيطها ليسهل لمسها */
  .footer-grid { gap: 22px 16px; padding-bottom: 24px; }
  .footer-grid > div:first-child { flex-basis: 100%; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .footer-grid > div:last-child { flex-basis: 100%; }
  .footer-grid > div:not(:first-child):not(:last-child),
  .footer-links-groups .flg-col { flex: 1 1 42%; max-width:48%; }
  .footer-grid h4 { font-size:13.5px; }
  .footer-grid li { font-size:12.5px; }
  /* شريط الميزات فوق الفوتر بالجوال: عمودان مع تصغير الأيقونة والنص لضيق الشاشة */
  .site-trust-strip { padding: 26px 0 22px; }
  .site-trust-strip .stt-head { margin-bottom: 18px; }
  .site-trust-strip .stt-head h2 { font-size: 19px; }
  .site-trust-strip .stt-grid { gap: 22px 14px; }
  .stt-icon { width: 52px; height: 52px; border-radius: 14px; }
  .stt-icon svg { width: 22px; height: 22px; }
  .stt-title { font-size: 13px; }
  .stt-desc { font-size: 11px; }
  .footer-social { justify-content: center; margin-top: 18px; }
  .footer-social a { width: 50px; height: 50px; }
  .footer-social a svg { width: 23px; height: 23px; }
  .footer-links-groups .flg-col h4 { font-size:13.5px; margin-bottom:12px; }
  .footer-links-groups .flg-col li { font-size:12.5px; }
  .main-nav { display:none; }
  .nav-toggle-btn { display:flex; }
  .site-header .container { flex-wrap:wrap; height:auto; padding-top:14px; padding-bottom:14px; row-gap:10px; }
  .header-actions #header-guest { display:none !important; }
  .header-actions #header-user .user-name { display:none; }
  /* ═══════════ أيقونات الهيدر على الجوال: حجمٌ واحد وتقاربٌ واحد ═══════════
     كان الجرس ‎٣٤‎ بكسل برسمٍ ‎١٩‎، وزرّ الخروج حبّةً ‎٤٠‎ بكسل بخلفية — حجمان وشكلان
     متجاوران، والمسافة بينهما ‎١٢‎ بكسل تُباعد بينهما كأنّ كلًّا منهما من عائلة.
     فصارا مربّعين متساويين ‎٣٨‎ بكسل بلا خلفية، ورسمُ الجرس أكبر ‎٢٢‎ فيُقرأ باللمس،
     والفجوة ‎٤‎ بكسل تجمعهما مجموعةً واحدة. والحقيبة معهما على النسق نفسه. */
  .header-actions { gap: 4px; }
  .site-header .hdr-notif,
  .site-header .cart-icon-link,
  .site-header .logout-btn.icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .site-header .hdr-notif svg,
  .site-header .cart-icon-link svg { width: 22px; height: 22px; }
  /* زرّ الخروج نصٌّ (⏻) لا رسم، فحجمه بحجم الخطّ — يُضبط ليُساوي الجرس في العين */
  .site-header .logout-btn.icon-btn { font-size: 19px; line-height: 1; }
  /* نقطة التنبيه تتبع الحجم الجديد فلا تسبح بعيدًا عن حافة الجرس */
  .site-header .hdr-notif .mt-dot { top: 6px; inset-inline-end: 6px; }
  .stories-bar { display:flex; }
  .hero { padding: 14px 0 10px; }
  #courses { padding-top: 14px; }
  /* ===== هيرو الجوال: النص الترحيبي بجانب البانر المتحرك (عمودان) =====
     .hero-text تصبح display:contents حتى يخرج العنوان والنص الفرعي وصف الأزرار من غلافهم ويصيروا
     عناصر مباشرة في الشبكة، فيمكن وضع كل واحد في منطقته:
       httl = العنوان | hsub = النص الفرعي | himg = البانر المتحرك | hact = الأزرار (سطر كامل)
     ملاحظة اتجاه: الصفحة RTL فالعمود الأول في grid-template-areas هو الأيمن — أي النص يمينًا
     والبانر يسارًا تمامًا كشكل سطح المكتب. كل هذه القواعد داخل @media للجوال فقط، فلا يتأثر
     متصفح الكمبيوتر ولا أي صفحة أخرى في الموقع إطلاقًا. */
  /* عمود واحد والبانر أولًا: البانر بعرض الشاشة كاملًا فوق النص، ثم العنوان فالوصف.
     العمودان السابقان كانا يضغطان النص في نصف الشاشة فيلتفّ العنوان على ثلاثة أسطر
     بمقاس 17px؛ وبعرض الشاشة الكامل عاد العنوان إلى 25px مقروءًا، وصار البانر أول
     ما تقع عليه العين. */
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "himg"
      "httl"
      "hsub"
      "hact";
    gap: 14px 0;
    align-items: start;
  }
  .hero-text { display: contents; }
  .hero-text h1 {
    grid-area: httl; align-self: start;
    font-size: 25px; line-height: 1.4; margin: 0 0 6px; letter-spacing: -.2px;
  }
  .hero-text h1 br { display: none; }
  .hero-text p {
    grid-area: hsub; align-self: start;
    font-size: 13.5px; line-height: 1.85; margin: 0;
  }
  /* البانر المتحرك (حتى 5 صور) بعرض الشاشة كاملًا أعلى الهيرو، ويبقى خاضعًا لمفتاح
     heroBannerActive بلوحة التحكم عبر كلاس hbc-off أدناه.
     نسبة 16/10 عريضة لا طولية: البانر صار يملأ العرض، ولو بقي طوليًّا (4/5) لبلغ ارتفاعه
     ٤٤٠ بكسل على جوال عادي فابتلع الشاشة الأولى وحده ودفع العنوان خارجها. */
  .hero-image {
    grid-area: himg; display: block !important;
    aspect-ratio: 16 / 10; width: 100%; justify-self: stretch;
    border-radius: 16px; box-shadow: 0 10px 26px rgba(6,16,40,.34);
  }
  /* نقاط التنقل والتدرّج السفلي عادت لمقاسها الكامل: كانت مصغَّرة لأن البانر كان صغيرًا
     في نصف الشاشة، وبعرضه الكامل تصير النقاط الصغيرة صعبة اللمس وغير متناسبة */
  #hero-banner .hbc-dots { bottom: 14px; gap: 7px; }
  #hero-banner .hbc-dot { width: 8px; height: 8px; }
  #hero-banner .hbc-dot.active { width: 22px; border-radius: 5px; }
  #hero-banner.hbc-active::after { height: 42%; }
  /* عند إيقاف البانر من لوحة التحكم: عمود واحد بعرض كامل والنص أكبر دون ترك فراغ */
  .hero-grid.hbc-off {
    grid-template-columns: 1fr;
    grid-template-areas: "httl" "hsub" "hact";
  }
  /* لم تعد هناك حاجة لتكبير النص عند إيقاف البانر: صار بمقاسه الكامل في الحالتين */
  .hero-actions { grid-area: hact; flex-direction:column; margin-top: 14px; }
  .hero-actions .btn { width:100%; }
  .search-bar { margin-top:20px; padding:14px; border-radius:16px; }
  .section { padding: 40px 0; }
  .section-head { flex-direction:column; align-items:flex-start; gap:10px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap:14px; }
  .stat-item .num { font-size: 26px; }
  .cat-chips-row { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:-4px; }
  .cat-chips-row::-webkit-scrollbar { display:none; }
  .cat-chip { flex-shrink:0; }
  .newsletter-grid { flex-direction:column; text-align:center; }
  .newsletter-form { width:100%; }
  .newsletter-form input { width:100%; flex:1; }
  .mobile-fab { display:flex; }
  .mobile-back-row { display:block; }
  .outcomes-grid, .two-col-list, .course-detail-grid { grid-template-columns: 1fr; }
  .category-section { margin-bottom:18px; padding:16px 14px 20px; border-radius:14px; }
  .category-section-head { margin-bottom:14px; }
  /* شارة رقم/وسم الاعتماد: كانت مخفية بالكامل بهذه البطاقة المصغّرة (الرئيسية/جوال) لضيق المساحة؛
     أُعيد إظهارها كصف مستقل ضمن شبكة course-body أدناه، بحجم مصغّر ومتوسّطة أفقيًا لتناسب عرض
     البطاقة الضيق دون كسر تناسق ارتفاع البطاقات */
  #courses-categories .courses-grid.mini-grid-2 .course-accred {
    grid-area:accred; display:flex; align-self:center; justify-self:center;
    font-size:9.5px; padding:3px 8px; margin:0;
  }
  .cat-name-frame { gap:6px; }
  .category-more-link { font-size:11.5px; padding:6px 10px; }

  /* إخفاء عنوان "الدورات المميزة" ووصفه وزر "عرض جميع الدورات" بالرئيسية على الجوال للزائر
     أيضًا (وليس فقط للمتدرب) — تبقى بطاقات الدورات نفسها ظاهرة أسفله كما هي */
  #courses .section-head { display:none; }

  /* لوحات التحكم على الجوال */
  .dash-main { padding: 18px 14px 88px; }
  .dash-topbar { flex-direction:column; align-items:flex-start; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); gap:12px; }
  .stat-card { padding:14px; }
  .stat-card .s-icon { width:38px; height:38px; font-size:16px; }
  .stat-card .s-value { font-size:20px; }
  table.data-table { font-size:12px; }
  .mobile-tabbar { display:flex; position:fixed; bottom:0; inset-inline-start:0; inset-inline-end:0; background:#fff; border-top:1px solid var(--border-color); z-index:120; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -4px 16px rgba(20,41,90,.08); }
  .step-card { padding:16px; }
  .lesson-video-frame, .lesson-pdf-frame { height:230px; }

  /* غلاف تطبيق المتدرب: إخفاء الهيدر العادي واستبداله بالشريط المصغّر + شريط الاستكمال —
     !important احترازي لضمان إخفائه دائمًا حتى مع أي تعارض تنسيق آخر (يمنع ظهور اسم المتدرب/
     أيقونة القائمة/زر الدخول من الهيدر العادي مكرَّرة فوق الشريط المصغّر الخاص بالمتدرب) */
  body.trainee-mode .site-header { display:none !important; }
  body.trainee-mode { padding-bottom: 78px; }
  body:has(.mobile-tabbar) { padding-bottom: 78px; }
  body.trainee-mode .trainee-mobile-topbar { display:flex; align-items:center; gap:10px; padding:14px 16px; background:#fff; border-bottom:1px solid var(--border-color); position:sticky; top:0; z-index:100; }
  body.trainee-mode .continue-learning-strip { display:block; background:#eaf1ff; margin:14px 16px 0; padding:14px 16px; border-radius:14px; }

  /* الشريط العلوي بلوحات المتدرب (dash-topbar): إخفاء أيقونة السلة/اسم المتدرب/الخروج المكرّرة
     على الجوال، لأن نفس هذه الإجراءات متاحة أصلًا عبر الشريط السفلي الموحّد (السلة/حسابي) */
    .dash-topbar #header-user { display:none; }
  /* اسم المتدرب بجملة الترحيب أعلى صفحة "مساري" (welcome-msg): يظهر بسطح المكتب فقط، ويُخفى هنا     بمتصفح الجوال لأن اسم المتدرب يجب أن يظهر بمكان واحد فقط بتطبيق الجوال (بطاقة "حسابي" حصرًا) */
  #welcome-msg .welcome-name { display:none; }

  /* بطاقات الدورات: 4 أعمدة بجانب بعض — تعرض فقط الصورة + الاسم + السعر */
  .courses-grid.mini-grid { grid-template-columns: repeat(4, 1fr); gap:10px; }
  .courses-grid.mini-grid .course-card { border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(20,41,90,.09); }
  .courses-grid.mini-grid .course-thumb { aspect-ratio:1/1; padding:8px; }
  .courses-grid.mini-grid .course-thumb-title { display:none; }
  .courses-grid.mini-grid .course-body { padding:8px 6px 12px; }
  .courses-grid.mini-grid .course-cat,
  .courses-grid.mini-grid .course-subtitle,
  .courses-grid.mini-grid .course-meta,
  .courses-grid.mini-grid .course-rating-row,
  .courses-grid.mini-grid .course-desc,
  .courses-grid.mini-grid .course-topics,
  .courses-grid.mini-grid .course-accred,
  .courses-grid.mini-grid .course-enroll-btn { display:none; }
  .courses-grid.mini-grid .course-title { font-size:12.5px; line-height:1.35; margin:0 0 5px; font-weight:800; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .courses-grid.mini-grid .course-foot { display:block; margin-top:0; }
  .courses-grid.mini-grid .price-block { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:center; gap:5px; }
  .courses-grid.mini-grid .course-price { font-size:14.5px; font-weight:900; color:var(--navy-700); }
  .courses-grid.mini-grid .price-original { font-size:11px; }

  /* بطاقات الدورات بالصفحة الرئيسية فقط: دورتين بجانب بعض — صورة كبيرة بارزة + الاسم + رقم
     الاعتماد + زر أضف للسلة فقط (بلا سعر أو أي تفاصيل أخرى) */
  .courses-grid.mini-grid-2 { grid-template-columns: repeat(2, 1fr); gap:14px; }
  .courses-grid.mini-grid-2 .course-card { border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(20,41,90,.09); }
  .courses-grid.mini-grid-2 .course-thumb { aspect-ratio:1/1; padding:4px; }
  .courses-grid.mini-grid-2 .course-thumb.has-image img { padding:2px; }
  .courses-grid.mini-grid-2 .course-thumb-title { display:none; }
  .courses-grid.mini-grid-2 .course-body { padding:10px 10px 14px; }
  .courses-grid.mini-grid-2 .course-cat,
  .courses-grid.mini-grid-2 .course-subtitle,
  .courses-grid.mini-grid-2 .course-meta,
  .courses-grid.mini-grid-2 .course-rating-row,
  .courses-grid.mini-grid-2 .course-desc,
  .courses-grid.mini-grid-2 .course-topics,
  .courses-grid.mini-grid-2 .course-enroll-btn,
  .courses-grid.mini-grid-2 .price-block { display:none; }
  .courses-grid.mini-grid-2 .course-title { font-size:13.5px; line-height:1.35; margin:0 0 6px; font-weight:800; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .courses-grid.mini-grid-2 .course-accred { font-size:10px; padding:3px 8px; margin-bottom:8px; }
  .courses-grid.mini-grid-2 .course-foot { display:flex; flex-direction:column; gap:8px; margin-top:6px; padding-top:8px; }
  .courses-grid.mini-grid-2 .course-add-cart-btn { display:block; width:100%; font-size:12px; padding:9px 10px; }

  /* بطاقة الدورة ضمن تصنيفات الرئيسية بالجوال تحديدًا (وليس بطاقة الورش التي تشارك نفس كلاس
     mini-grid-2). التصنيف "المتحرك" (بسحب أفقي، كلاس cat-scroll-row) يبقى بصورة مربعة مقصوصة
     بالكامل (object-fit:cover) بحجم مصغّر ثابت العرض، تناسبًا مع صف السحب الأفقي الضيق. تُستهدف
     عبر معرّف الحاوية #courses-categories حتى لا تتأثر بطاقات الورش المصغّرة بنفس الكلاس */
  #courses-categories .courses-grid.mini-grid-2.cat-scroll-row .course-thumb { padding:0; }
  #courses-categories .courses-grid.mini-grid-2.cat-scroll-row .course-thumb.has-image img { padding:6px; object-fit:contain; }

  /* التصنيف "الثابت" (غير المتحرك): نفس حجم بطاقة "المتحرك" تمامًا (عمودان بجانب بعض، حجم معتدل
     غير ضخم) — الفرق الوحيد بينهما: الصورة هنا تظهر بالكامل بلا أي قص (object-fit:contain بدل
     cover) واسم الدورة يظهر كاملًا بدون اقتطاع لسطرين. كلا النوعين يعرض حتى 10 دورات الآن (من home.js) */
  #courses-categories .courses-grid.mini-grid-2:not(.cat-scroll-row) .course-thumb.has-image img {
    object-fit: contain;
  }
  #courses-categories .courses-grid.mini-grid-2:not(.cat-scroll-row) .course-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    min-height: 0;
  }
  /* تبقى شارة "التسجيل منتهٍ" ظاهرة دائمًا فوق بطاقة الدورة المصغّرة بتصنيفات الرئيسية بالجوال
     (للزائر والمتدرب معًا)، ويُخفى فقط شارتا المستوى ونمط التدريب لتوفير مساحة العرض الضيقة —
     التعديل السابق كان يُخفي الحاوية بالكامل (course-thumb-badges) فتختفي شارة الإغلاق معها خطأً */
  #courses-categories .courses-grid.mini-grid-2 .thumb-badge:not(.closed-badge) { display:none; }
  #courses-categories .courses-grid.mini-grid-2 .course-accred { display:none; }
  /* ترتيب موحّد عبر CSS Grid بدل التكديس الرأسي: صف الاسم (سطران كحد أقصى بارتفاع ثابت) ثم صف
     السعر، ثم زر "التفاصيل" أعلى، ثم زر "أضف إلى الحقيبة" أسفله — كل زر بعرض كامل البطاقة —
     بهذا يتساوى ارتفاع كل بطاقات الرئيسية تلقائيًا وتصبح متناسقة تمامًا بغض النظر عن طول اسم
     الدورة أو وجود خصم من عدمه */
 #courses-categories .courses-grid.mini-grid-2 .course-body {
    display:grid; grid-template-columns:1fr; gap:9px;
    grid-template-rows: 1fr auto auto auto auto;    grid-template-areas: "title" "accred" "rating" "price" "enroll" "addcart";
  }
  #courses-categories .courses-grid.mini-grid-2 .course-title { grid-area:title; min-height:36px; text-align:center; }
  /* صف التقييم مُخفى عمومًا ببطاقة mini-grid-2 (القاعدة العامة أعلاه تخدم الورش/المنتجات الرقمية
     التي لا تملك هذا العنصر أصلاً) — يُعاد إظهاره هنا تحديدًا لبطاقة الدورة بالرئيسية على الجوال،
     بنفس منطق إعادة إظهار price-block أدناه، مع توسيطه ليلائم عرض البطاقة الضيق */
  #courses-categories .courses-grid.mini-grid-2 .course-rating-row {
    grid-area:rating; display:flex; align-items:center; justify-content:center; gap:6px; margin:0; font-size:12px;
  }
  /* course-foot يحتوي أصلًا على السعر وزر "أضف إلى الحقيبة" فقط؛ display:contents يُذيب صندوقه
     كي يشارك عنصراه مباشرة في شبكة course-body أعلاه بدل تكوين مستوى تكديس منفصل */
  #courses-categories .courses-grid.mini-grid-2 .course-foot { display:contents; }
  /* ═══ السعر على الجوال: سطر واحد مُوسَّط ═══
     السعر أوّلًا كبيرًا، والمشطوب بجانبه أصغر — وكلاهما يظهر على الجوال كما على الكمبيوتر.
     و‎nowrap‎ تمنع نزول المشطوب سطرًا ثانيًا في البطاقة الضيّقة، فيبقى ارتفاع كل البطاقات
     واحدًا وتصطفّ أزرارها. */
  #courses-categories .courses-grid.mini-grid-2 .price-block {
    grid-area:price; display:flex; flex-wrap:nowrap; align-items:baseline;
    justify-content:center; gap:6px; text-align:center;
  }
  /* ‎clamp‎ لا رقمٌ ثابت: البطاقة نصف الشاشة، فسعرٌ من خمسة أرقام مع مشطوبه يفيض عنها في
     شاشة ٣٢٠ بكسلًا. فيتنفّس الرقم مع عرض الشاشة ولا يتجاوز حدّه الأعلى في الشاشات العادية. */
  #courses-categories .courses-grid.mini-grid-2 .price-original { font-size: clamp(9.5px, 3.1vw, 13px); }
  #courses-categories .courses-grid.mini-grid-2 .course-price { font-size: clamp(12.5px, 4.6vw, 15px); font-weight:800; color:var(--navy-700); direction:ltr; }
  /* زر "التفاصيل" أعلى (ثانوي بحدود واضحة) ثم زر "أضف إلى الحقيبة" أسفله (رئيسي معبّأ بظل خفيف) —
     كلاهما بعرض كامل وارتفاع مريح للمس وزوايا دائرية متناسقة لمظهر احترافي مكتمل */
  #courses-categories .courses-grid.mini-grid-2 .course-enroll-btn {
    grid-area:enroll; display:flex; align-items:center; justify-content:center;
    width:100%; margin:0; padding:10px 8px; border-radius:10px;
    background:#fff; color:var(--navy-700); border:1.5px solid var(--navy-700);
    font-size:12.5px; font-weight:800; line-height:1.3; transition: background .2s, color .2s;
  }
  #courses-categories .courses-grid.mini-grid-2 .course-add-cart-btn {
    grid-area:addcart; width:100%; background:var(--navy-700); color:#fff; border:1.5px solid var(--navy-700);
    border-radius:10px; font-size:12.5px; font-weight:800; padding:10px 8px; white-space:nowrap; margin:0;
    display:flex; align-items:center; justify-content:center; gap:6px;
    box-shadow:0 4px 12px rgba(20,41,90,.2); transition: background .2s, transform .15s;
  }
  #courses-categories .courses-grid.mini-grid-2 .course-add-cart-btn:active { transform: scale(.97); }
  /* زر "أضف إلى الحقيبة" لدورة مغلقة (تسجيل منتهٍ): يبقى ظاهرًا بنفس مكانه وحجمه للحفاظ على تناسق
     ارتفاع كل البطاقات، لكن بمظهر رمادي معطّل وغير قابل للنقر (disabled فعليًا في HTML) */
  #courses-categories .courses-grid.mini-grid-2 .course-add-cart-btn:disabled {
    background:#eef1f7; color:#7d8aa3; opacity:1; border:1.5px solid #d7dfec;    box-shadow:none; cursor:not-allowed;
  }

  /* بانر الجوال: يظهر فقط عند تفعيله من لوحة التحكم (كلاس active تضيفه home.js) */
  .mobile-banner-slot.active { display:block; margin-bottom:0; }

  /* خدماتنا بالجوال: 4 بطاقات بجانب بعض بدل التكديس عمودًا واحدًا */
  .services-grid { grid-template-columns: repeat(4, 1fr); gap:8px; }
  .service-card { padding:10px 5px; border-radius:12px; }
  .service-icon { width:34px; height:34px; border-radius:9px; font-size:14px; margin:0 auto 6px; }
  .service-card h3 { font-size:10px; margin:0 0 3px; line-height:1.25; }
  .service-card p { display:none; }
  .service-link { font-size:9.5px; }

  /* عناوين الأقسام بالشاشات الضيقة تحتفظ بحجمها (كـ«خدماتنا»)، لكن المسافة تحتها تضيق:
     الحجم هو ما يوازن العناوين ببعضها، والمسافة هي ما يلتهم الشاشة الضيقة. */
  .stats-strip .section-head { margin-bottom: 16px; }
  .partners-head { margin-bottom: 18px; }
  .partners-strip { padding: 30px 0 54px; }

  /* الإحصائيات بالجوال: 4 بجانب بعض */
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap:6px; }
  .stat-item .num { font-size:17px; }
  .stat-item .lbl { font-size:9px; margin-top:3px; line-height:1.3; }

  /* آراء المتدربين بالجوال: بطاقة شبه كاملة العرض (مع لمحة من التالية) بنفس منطق السحب والتحريك
     التلقائي الموحّد عبر home.js لكل الشاشات (initDragCarousel) — بلا اعتماد على scroll-snap */
  .testi-track { gap:14px; }
  .testi-card { flex: 0 0 86vw; padding:22px; }
  .testi-nav-btn { width:34px; height:34px; font-size:15px; }

  /* الشركاء بالجوال: يظهر 4 بجانب بعض، بحركة تلقائية مستمرة سلسة (بلا توقف وإعادة)،
     وقابلة للإمساك والسحب باليد في أي وقت (تمرير أفقي طبيعي عبر JS + لمس المتصفح) */
  .partners-carousel.mobile-drag { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; }
  .partners-carousel.mobile-drag::-webkit-scrollbar { display:none; }
  .partners-row.mobile-drag-track { flex-wrap:nowrap; justify-content:flex-start; width:max-content; gap:14px; padding:6px 2px; }
  /* بطاقات أعرض بكثير على الجوال (38% من عرض الشاشة بدل 20%) وشعارات أكبر */
  .partners-row.mobile-drag-track .partner { flex:0 0 38vw; padding:16px 12px; min-height:104px; border-radius:18px; }
  .partners-row.mobile-drag-track .partner img { max-height:66px; }

/* صفحة "حسابي" (المتدرب) بالجوال: بطاقة واحدة بكل سطر بدل 3 أعمدة */
  .account-hub-grid { grid-template-columns: 1fr; gap:12px; }
  .account-hub-card { display:flex; align-items:center; gap:14px; text-align:start; padding:16px 18px; width:100%; border:none; background:#fff; cursor:pointer; font:inherit; color:inherit; }
  .account-hub-card .ahc-icon { margin:0; flex-shrink:0; width:48px; height:48px; font-size:21px; }
  .account-primary-grid { grid-template-columns: 1fr; gap:12px; }

  /* غلاف تطبيق الجوال: يُخفي الشريط العلوي (dash-topbar) بالكامل بصفحات التبويبات الأربع الجذرية
     فقط (مساري/اشتراكاتي/الإشعارات/حسابي، المُعلَّمة بكلاس body.mobile-app-root)، ليبدو الموقع
     كتطبيق حقيقي بلا عنوان/هيدر متكرر فوق الشريط السفلي الثابت — الصفحات الفرعية الأخرى
     (بياناتي، دوراتي...) تحتفظ بشريطها العلوي مع زر "رجوع" بدلاً من ذلك */
   body.mobile-app-root .dash-topbar { display:none; }

  /* حقول الإدخال بنماذج لوحة المتدرب: حجم الخط 16px (بدل 14px) بالجوال تحديدًا، لأن متصفح
     Safari بالآيفون يُكبّر (zoom) الصفحة تلقائيًا عند التركيز على أي حقل بخط أصغر من 16px بغض
     النظر عن إعداد user-scalable=no بالـ viewport — هذا هو السبب الفعلي لأي "تكبير" يظهر عند
     الكتابة بنماذج الموقع على الجوال، وليس خللاً بمنع القرص (pinch-zoom) نفسه */
  .form-group input, .form-group select, .form-group textarea { font-size:16px; }
  /* جدول الفواتير (المالية/اشتراكاتي) يتحوّل إلى بطاقات مكدّسة سهلة القراءة على الجوال */
  #payments-table thead { display:none; }
  #payments-table, #payments-table tbody, #payments-table tr, #payments-table td { display:block; width:100%; }
  /* ⚠️ كانت ‎background:#fff‎ — كُتبت قبل أن يصير للموقع لونٌ داكن ثابت. ولمّا صار، بقيت
     البطاقة بيضاء بينما لون نصّها يأتي من ‎--text-dark‎ وهو في الوضع الداكن أبيضُ مائل
     للأزرق: **أبيضُ على أبيض**. فكان المتدرب يرى على الجوال بطاقةً فيها العناوين وحدها
     (رقم الفاتورة · الدورة · الحالة …) بلا قيمها، فيظنّ أن فاتورته لم تُسجَّل أصلًا.
     و‎--bg-card‎ هو لون البطاقة في تدرّج الموقع: الصفحة (الأغمق) ← اللوح ← البطاقة. */
  #payments-table tbody tr { margin-bottom:12px; border:1px solid var(--border-color); border-radius:14px; padding:14px 16px; background:var(--bg-card); box-shadow:var(--shadow-card); }
  #payments-table tbody tr:last-child { margin-bottom:0; }
  #payments-table td { border-bottom:1px dashed var(--border-color); padding:8px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
  #payments-table td:last-child { border-bottom:none; }
  #payments-table td[data-label]::before { content: attr(data-label); font-weight:700; color:var(--text-mid); font-size:11.5px; flex-shrink:0; }
  #payments-table .invoice-dl-cell { padding-top:12px; }
  #payments-table .invoice-dl-cell a { width:100%; }
  #payments-table td.empty-state { display:block; text-align:center; border:none; box-shadow:none; background:transparent; }

  /* ===== صفحة تفاصيل الدورة على الجوال: ترتيب أوضح لكل المعلومات + نجوم تقييم أبرز + تبويبات
     قابلة للتمرير الأفقي بدل التفافها أو خروجها عن حدود البطاقة (خصوصًا "الحقيبة التدريبية"
     و"التعليقات" مع شارة العدد المرافقة لهما) ===== */
  /* رأس الصفحة على الجوال: صورة الدورة تُعرض نظيفة بلا أي تظليل غامق فوقها (بدل استخدامها خلفية
     للقسم كاملاً مع تدرج قاتم للتباين)، ومنفصلة عن لوحة المعلومات التي تحتها — لوحة المعلومات
     تصبح بلون واحد مصمت مطابق للون الأزرار الأساسي بالموقع بدل التدرج الأزرق/صورة الخلفية،
     فيتوحد الشكل العلوي للصفحة مع هوية الموقع بصريًا */
  .course-detail-hero { background: var(--navy-700) !important; background-image: none !important; padding: 0 0 26px; }
  .course-detail-hero.has-image::before,
   /* صورة الدورة العلوية مخفية على الجوال بطلب صاحب الموقع: كانت تشغل 200 بكسل من أول الشاشة قبل
     اسم الدورة وسعرها، والصورة نفسها معروضة بالبطاقة التي وصل منها الزائر. الصفحة تفتح الآن على
     اسم الدورة مباشرة. (الصورة تبقى كما هي على الكمبيوتر كخلفية للقسم العلوي) */
  .course-detail-hero.has-image .hero-mobile-image { display: none; }
  .course-detail-hero .container { padding-top: 22px; }
  .course-detail-hero .container { padding-top: 18px; }
  .course-detail-title { font-size: 23px; font-weight: 800; margin: 8px 0 9px; line-height: 1.35; }
  .course-detail-subtitle { font-size: 13.5px; line-height: 1.75; margin: 0; }
  /* الشارات (نوع التدريب/المستوى/الاعتماد) بلا صناديق أو حدود — عناصر نصية بسيطة مفصولة بخط
     رفيع بينها بدل "الإطارات" (الحبّات البيضاوية) السابقة، أوضح وأخف بصريًا على الجوال */
  .detail-badges { gap: 0; margin-bottom: 12px; }
  .detail-badge { background: none; border: none; border-radius: 0; padding: 0 10px; font-size: 11.5px; border-inline-start: 1px solid rgba(255,255,255,.3); }
  .detail-badge:first-child { padding-inline-start: 0; border-inline-start: none; }
  .detail-badge.discount-badge { border-radius: 20px !important; padding: 4px 10px !important; border: none !important; }
  /* شارة التقييم: بلا صندوق أو حدود أيضًا — نجوم + رقم + عدد التقييمات كصف نصي واحد واضح */
  .detail-rating-badge { background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; gap: 8px; }
  .detail-rating-badge.muted { border: none; }
  /* النجوم على الجوال أكبر — الشاشة أصغر فالحاجة للوضوح أشدّ لا أقل */
  .detail-rating-badge .drb-stars { font-size: 23px; gap: 2px; }
  .detail-rating-badge .drb-score { font-size: 17px; }
  .detail-rating-badge .drb-count { font-size: 12px; }
  .hero-social-proof { gap: 9px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
  .hero-enrolled-badge { font-size: 12.5px; padding: 7px 13px; }
  /* صف الأيقونات (المدة/الدروس/التاريخ/الوقت): تُنزع عنها الفقاعة الدائرية المحدّدة بإطار، وتبقى
     الأيقونة نفسها فقط بلا خلفية ولا حدود تناسقًا مع بقية اللوحة الخالية من "الإطارات" */
  .detail-icon-stats { gap: 7px; margin-top: 13px; }
  .di-stat { font-size: 12.5px; gap: 6px; padding: 7px 11px; border-radius: 10px; }
  .di-stat .di-icon { font-size: 14px; }

  .course-info-card, .course-buy-card { padding: 16px; }
  /* سقف أقصر على الجوال: ٤٢٠ بكسل تلتهم نصف الشاشة فيهبط السعر وزر الشراء تحت الطيّة */
  .course-gallery-main { max-height: 340px; }
  .course-gallery-main img { max-height: 340px; }
  .buy-price-main { font-size: 26px; }   /* أكبر قليلًا على الجوال كذلك — نفس سبب الكمبيوتر */

  /* تبويبات "نبذة عن الدورة / الحقيبة التدريبية / التعليقات": تمرير أفقي سلس بدل التفاف
     العناوين على بعضها أو تجاوزها عرض البطاقة على الشاشات الضيقة جدًا */
  .info-tabs-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .info-tabs-row::-webkit-scrollbar { display: none; }
  .info-tab-btn { white-space: nowrap; flex-shrink: 0; font-size: 13.5px; margin-inline-end: 18px; }

  .detail-section-title { font-size: 15px; margin: 20px 0 10px; }
  .outcome-item, .curriculum-module .points li, .two-col-list ul li, .lesson-preview-item { font-size: 13px; }
  .curriculum-module summary { font-size: 13.5px; padding: 12px 14px; }

  .instructor-card { padding: 14px; gap: 12px; margin-top: 4px; }
  .instructor-card .instructor-avatar { width: 46px; height: 46px; font-size: 15px; }
  .instructor-card .instructor-name { font-size: 13.5px; }
  .instructor-card .instructor-title { font-size: 12px; }
}
@media (max-width: 400px) {
  .stat-cards { grid-template-columns: 1fr 1fr; }
  /* شاشات ضيقة جدًا: تصغير بسيط فقط — لم يعد النص يزاحم البانر بعد أن صار كلٌّ منهما
     في سطر مستقل بعرض الشاشة */
  .hero-text h1 { font-size:23px; }
  .hero-text p { font-size:13px; }
}

/* ===== شريط تنبيه بسيط ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--navy-900); color:#fff; padding: 13px 22px 13px 18px; border-radius: 30px; font-size: 14px; font-weight:600; box-shadow: 0 12px 30px rgba(20,41,90,.35); z-index: 999; opacity:0; pointer-events:none; transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); display:flex; align-items:center; gap:9px; max-width:88vw; }
.toast::before { content:"✓"; flex-shrink:0; width:19px; height:19px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(-6px); }
/* على الجوال: تُرفع الشارة فوق الشريط السفلي (mobile-tabbar) بنفس المسافة المستخدمة لزر الواتساب
   العائم (72px + حافة الأمان)، حتى لا تغطي أيقونتي "حقيبتي"/"مساري" كما كانت سابقًا، مع مسافة
   جانبية بدل الشكل الحبّي الملاصق للحواف على الشاشات الصغيرة */
@media (max-width: 680px) {
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); padding:12px 18px 12px 16px; font-size:13.5px; border-radius:16px; width:calc(100% - 32px); max-width:380px; }
}
/* ===== شريط تنبيه بسيط ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--navy-900); color:#fff; padding: 13px 22px 13px 18px; border-radius: 30px; font-size: 14px; font-weight:600; box-shadow: 0 12px 30px rgba(20,41,90,.35); z-index: 999; opacity:0; pointer-events:none; transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); display:flex; align-items:center; gap:9px; max-width:88vw; }
.toast::before { content:"✓"; flex-shrink:0; width:19px; height:19px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(-6px); }
/* على الجوال: تُرفع الشارة فوق الشريط السفلي (mobile-tabbar) بنفس المسافة المستخدمة لزر الواتساب
   العائم (72px + حافة الأمان)، حتى لا تغطي أيقونتي "حقيبتي"/"مساري" كما كانت سابقًا، مع مسافة
   جانبية بدل الشكل الحبّي الملاصق للحواف على الشاشات الصغيرة */
@media (max-width: 680px) {
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); padding:12px 18px 12px 16px; font-size:13.5px; border-radius:16px; width:calc(100% - 32px); max-width:380px; }
}

/* ===== شريط تقدّم رفيع أعلى الصفحة أثناء تحميل المحتوى الأول (index.html) — إحساس بالسرعة
   بلا حجب أي محتوى خلفه، بخلاف "ومضة الشعار" التي تغطي الصفحة كاملة؛ منطق التقدّم والاختفاء
   بالكامل عبر JS مباشرة بالصفحة (راجع السكربت المرافق له) ===== */
.page-progress-bar {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--blue-500), var(--gold-500));
  z-index: 100000; transition: width .35s ease, opacity .3s ease .1s;
  border-radius: 0 3px 3px 0; pointer-events: none;
}
.page-progress-bar.done { width: 100% !important; opacity: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   إضافات بطاقة الدورة — كتلة موحّدة (حركة اللمعة + خط رمز الريال + نسخة الجوال)
   ══════════════════════════════════════════════════════════════════════════ */

/* حركة اللمعة — تُعرَّف مرة واحدة على المستوى العام لتعمل بالجوال والكمبيوتر معًا */
@keyframes tmCardShine {
  0%, 62%  { transform: translateX(0) skewX(-18deg); }
  100%     { transform: translateX(360%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  #courses-categories .course-card::after { animation: none; opacity: 0; }
}

/* خط رمز الريال السعودي (U+20C1)
   ────────────────────────────────────────────────────────────────────────────
   الرمز أُضيف في Unicode 17 (سبتمبر 2025) ولا تعرفه خطوط كثير من الأجهزة بعد،
   فيظهر مربعًا فارغًا بلا هذا الخط.

   لماذا الخط مضمَّن هنا لا مُحمَّل من CDN؟ لأنه كان يُجلب من jsdelivr، وأي سبب
   يمنع وصوله — حجب، أو مانع إعلانات، أو شبكة بطيئة، أو نسخة قديمة بالمخزن
   المؤقت — يعني مربعًا فارغًا مكان السعر في كل صفحات الموقع. والملف 1.2 كيلوبايت
   فقط، فتضمينه أرخص من طلب شبكة أصلًا ولا يمكن أن يفشل.

   unicode-range يقصر استعمال هذا الخط على هذا الحرف وحده — بقية النصوص تبقى
   بخط الموقع المختار من لوحة التحكم بلا أي تغيير. */
@font-face {
  font-family: 'saudi_riyal';
  src: url('data:font/woff2;base64,d09GMgABAAAAAAT0AA0AAAAAC2QAAASeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGhgGYACCZhEICocEhXcLGgABNgIkAzAEIAWHLgeBBRvVCSCOwnEvSojJ5ORhKiWep9/bPPc32mdnUaW+wXeJKlVIJCg8CIfcQWViVHSETJeZqNqErgZPp/28VaAy13pTkXvNQZv4IHCbHD9In+dyevP5Cfy7K+slmC3ybGwuLx2T18L1PKA2pnPbFCvQCdbLLSJq0N0AB31thACv29f9APD1k6ZUJ0tAD4aoQDO8bhmyFC1UI+oCuAO15AO2Q8G5MwSqDefwClCi9Be6wX9nQPsMEKAeA1AQUIMaLCGACzQCljAqQE+OwoCjcu0D6kv8/x/sl6sfkIpP/3/9/WpgdgoEQAeYoIR0QACkAlSghuJ31w3LAXyr/P+vAvSAOTCAzAK5B6CBQzRNhcGgGoYLL+dYrlnFKgu9iOcEj646uXaI2W3sJ9lTI4EetCRQAgulmH6SYMZBziQb1xBipCaQaS6l0vWRWr1q1aFDnTA52r1fr8fUTpXKWvLQ4KnSwb0+PppFHxtVC1at2uXrO9JOSIUWTzV+QWdXLT0K2uhG0jpJEiZs6WjSR9KuG9Zv1u+P2q1UujpcsT1L3dNzqhQszNevVtPHSYnHKlXoGEWtDpi6yX/duUgVJGGvzwIypcpt/Ni4Jly1atcq32n6zc+V4+ld7k6gz53h7vgOHLKN10L3KkUS7kouYUcPhGVony1zOi//ctkTdm/3kAqubk+P0MptoSFlXH1d5ZyIwuAyWX7+z+picypWzAjs1xCbVaGJLgqt5qqbqg/Y6ntEjm76aneF9Yjvano5HXrdrjSkllfHmVOk+o/IY8O89mBNc9Lbwcoe28z7DRmFzSmN4wbrT5X+B/E2SdMQn2S1PFaUu1OkJfIXKxVt+w1pFa2xjdll47yrvsvczl7/4ETotcmj56Zkzxs3b+7w0ZMNx9wX7srQ8rIsghhH+yj839cG7rwS/FVUQnWXgYUdjUP+HL5C8fybvBJ6ZQRWMKOhfsi7ZqHZEz4e3TZxMtEqXR8kGN0n/5/a9jk9IKKiFlmPtlWvYKy8rF34efCtxR9snP0uNWnu7Jj8kj9HHV1INdJDNT2jhozoFXwqYPLE+VjfWDBpsq7FUrJmU3brXPVwppI6gm8PCAjcX9RU3FdX8KtcJcczkIBc+4K9C8ZdxNPL/LtD9KcF19fLgOpBtODVPMNO+5d0/C2p2BEBPefddskgYA8Aa9mMABgKQwChUg9RkbGjprcJDW9v0SJ+QccrQRhDkk6Os7mYoEtPTCIZQk6xo9ALyCFMI3lIDtjnGFLlm9EzZJUcNNIoAAUACL10ULSMoCUYAkaUk2BRfgAnwm+QoZJMytlMKIQkH0pUBpAqdhjUMjIGGlTuklr2MTzoI92UJ23+wONVGmQ40WC8UgM5iCwsRBYopXLQcHEwXzrQIVosogW4IRrFwqmv4ZzGEQ2Em8tRFmff4c5x4kDgmpXdKAOJhsMnRWOAIg8/SVZ+YGXZ5ee18vMkZYbYopod2PHxMh22lbggxy4aiTp8UzunkRxGMUliNsQgyayTKk8k+l05RzpGmT7YjNb5FSWKKTxHRVTCPj0ISoRIUaJDEZowhCWctufXnHPwkJG/e0pZDQA=') format('woff2');
  font-display: swap;
  unicode-range: U+20C1;
}
body, button, input, select, textarea { font-family: 'saudi_riyal', var(--font-main); }

/* ═══ بطاقة الدورة المطوّرة — الجوال (الرئيسية وتصنيفاتها) ═══ */
@media (max-width: 680px) {

  #courses-categories .courses-grid.mini-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  #courses-categories .courses-grid.mini-grid-2.cat-scroll-row > .course-card { width: calc(50vw - 21px); }

  #courses-categories .courses-grid.mini-grid-2 .course-card {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #fbfcff 0%, #e6edf9 100%);
    border: 1px solid #d3ddf0;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(12,31,63,.14);
  }

  #courses-categories .courses-grid.mini-grid-2 .course-card::after {
    content: ''; position: absolute; top: 0; left: -70%;
    width: 50%; height: 100%; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
    animation: tmCardShine 5s ease-in-out infinite;
  }

  #courses-categories .courses-grid.mini-grid-2 .course-thumb { aspect-ratio: 1/1; padding: 0; background: #dfe7f4; }
  #courses-categories .courses-grid.mini-grid-2 .course-thumb.has-image img,
  #courses-categories .courses-grid.mini-grid-2:not(.cat-scroll-row) .course-thumb.has-image img {
    padding: 6px; object-fit: contain; width: 100%; height: 100%; box-sizing: border-box;
  }

  #courses-categories .courses-grid.mini-grid-2 .course-accred {
    position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px; margin: 0;
    max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(255,248,232,.97); color: #8a5a12;
    border: 1px solid rgba(206,157,54,.55);
    font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 8px;
    box-shadow: 0 2px 6px rgba(12,31,63,.18);
  }

  #courses-categories .courses-grid.mini-grid-2 .course-body {
    display: grid; grid-template-columns: 1fr; gap: 7px;
    grid-template-areas: "title" "rating" "price" "enroll" "addcart";
    padding: 11px 10px 12px;
  }

  #courses-categories .courses-grid.mini-grid-2 .course-title,
  #courses-categories .courses-grid.mini-grid-2:not(.cat-scroll-row) .course-title {
    grid-area: title; display: block; -webkit-line-clamp: unset; overflow: visible;
    min-height: 0; text-align: center; font-size: 13.5px; font-weight: 800;
    line-height: 1.45; margin: 0; color: var(--navy-900);
  }

  #courses-categories .courses-grid.mini-grid-2 .course-rating-row {
    grid-area: rating; display: flex; align-items: center; justify-content: center;
    gap: 5px; margin: 0; font-size: 11.5px;
  }
  #courses-categories .courses-grid.mini-grid-2 .course-rating-row .stars {
    font-size: 17px; color: #e8a91d; letter-spacing: .5px; line-height: 1;
  }
  #courses-categories .courses-grid.mini-grid-2 .course-rating-row .rating-num { font-size: 12px; font-weight: 800; }
  #courses-categories .courses-grid.mini-grid-2 .course-rating-row .rating-count { font-size: 10.5px; }

  /* السعر أكبر ممّا كان (١٦٫٥) — هو أوّل ما تبحث عنه العين في البطاقة */
  #courses-categories .courses-grid.mini-grid-2 .course-price {
    font-size: clamp(12.5px, 4.6vw, 19px); font-weight: 900; color: var(--navy-900); direction: ltr;
  }

  #courses-categories .courses-grid.mini-grid-2 .course-enroll-btn {
    padding: 8px 6px; font-size: 12px; border-radius: 9px;
    background: rgba(255,255,255,.92); border: 1.5px solid var(--navy-700); color: var(--navy-700);
  }
  #courses-categories .courses-grid.mini-grid-2 .course-add-cart-btn {
    padding: 9px 6px; font-size: 12px; border-radius: 9px; gap: 5px;
    background: linear-gradient(180deg, var(--navy-700), var(--navy-800-solid));
    box-shadow: 0 4px 12px rgba(20,41,90,.28);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   الهوية الزرقاء — خلفية الموقع بلون شريط الحقوق
   ══════════════════════════════════════════════════════════════════════════════
   التدرّج المقصود:  خلفية الصفحة (الأغمق) ← اللوح/التصنيف (أفتح) ← بطاقة الدورة (الأفتح)

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

body {
  --bg-page:      #0e2348;   /* = لون شريط الحقوق تمامًا */
  --bg-panel:     #16305e;   /* التصنيفات */
  --bg-card:      #1e3d72;   /* بطاقة الدورة */
  --border-color: #2b4c83;
  --shadow-card:  0 4px 18px rgba(0,0,0,.30);
  --shadow-hover: 0 12px 34px rgba(0,0,0,.45);

  /* ألوان النص تُعرَّف هنا على body لا على :root — كي تتغلّب على "لون النص" القادم
     من لوحة التحكم بـ !important، فلا يبقى نص غامق فوق خلفية غامقة بأي حال */
  --text-dark:  #eef3fc;
  --text-mid:   #a9bddf;
  --text-light: #8098c4;
  --navy-900:   #eef3fc;     /* يُستعمل للعناوين؛ استعماله كخلفية محصور بالتوست أدناه */

  background: var(--bg-page);
  color: var(--text-dark);
}

/* ═══ خلفية ما تحت الصفحة ═══
   المتغيّرات الداكنة أعلاه مُعرَّفة على ‎body‎ لا على ‎:root‎ (لسبب مشروح فوق: كي تتغلّب على
   لون النص القادم من لوحة التحكم). ونتيجةً لذلك يبقى ‎html‎ على القيمة الفاتحة الأصلية
   ‎#f3f6fb‎ التي يضبطها ‎html, body‎ أعلى الملف.

   وما دام ‎html‎ يحمل خلفية، فالمتصفح لا ينشر خلفية ‎body‎ على الشاشة — فأي صفحة محتواها
   أقصر من الشاشة يظهر أسفلها **مستطيل فاتح**: المساحة الواقعة تحت ‎body‎ وفوق حافة النافذة.

   لم يكن يُلحَظ لأن الفوتر كان يطيل كل صفحة حتى تتجاوز الشاشة، فظهر أول ما أُخفي الفوتر من
   صفحات المنتجات. وهو عيب قائم أصلًا في أي صفحة قصيرة، لا نتيجة لذلك الإخفاء.

   واللون مكتوب صريحًا لا بمتغيّر: ‎--bg-page‎ على ‎html‎ يساوي الفاتح لا الداكن، وهذا هو
   أصل المشكلة. فإن غُيّرت خلفية الصفحة الداكنة يومًا فليُغيَّر هذا السطر معها. */
html { background: #0e2348; }

.toast { background: #0a1730; color: #fff; }

/* ───── الهيدر والبانر ───── */
.site-header { background: #0a1c3c; border-bottom: 1px solid var(--border-color); }
.brand { color: #ffffff; }
.main-nav a { color: #b9caea; }
.main-nav a:hover,
.main-nav a.active { color: #ffffff; }
.icon-btn { background: transparent; color: #cfe0ff; }
.avatar-circle,
.user-chip { background: #1b3768; color: var(--text-dark); }
/* ═══ خلفية أعلى الصفحة = خلفية الموقع تمامًا ═══
   كان الهيرو بتدرّجٍ ينتهي إلى ‎#17325f‎ وهو **أفتح** من خلفية الصفحة ‎#0e2348‎، فيظهر أعلى
   الرئيسية مستطيلٌ أفتح خلف «طوّر مهاراتك» تراه العين مباشرةً وكأنه لوحٌ دخيل لا جزءٌ من
   الصفحة. وصار لونًا واحدًا بلا تدرّج — نفس ‎--bg-page‎ الذي يُلوّن الصفحة كلَّها، فلا يفترق
   عنها في أي متصفّح ولا على أي شاشة مهما اختلفت معالجتها للتدرّجات. */
.hero { background: var(--bg-page); }
.hero-text h1 span { color: #7aa4ff; }

/* ───── التصنيفات: أفتح من الخلفية ───── */
.category-section {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-top: 3px solid #4f80dd;
}
.category-section-head h3,
.cat-name-frame { color: #ffffff; }
.cat-name-frame .cnf-icon { color: #8fb2f5; }
.category-more-link { background: #27497f; color: #d6e4ff; }
.category-more-link:hover { background: #3c6cc2; color: #fff; }

/* ───── بطاقة الدورة: الأفتح ───── */
.course-card { background: var(--bg-card); }
#courses-categories .course-card {
  background: linear-gradient(180deg, #24467e 0%, #1a3568 100%);
  border: 1px solid #33578f;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
#courses-categories .course-card:hover {
  border-color: #4f80dd; box-shadow: 0 12px 30px rgba(0,0,0,.46);
}
/* اللمعة تُخفَّف من .55 إلى .14 — الشدّة الأصلية مصمَّمة لبطاقة بيضاء وتُبيّض الداكنة */
#courses-categories .course-card::after {
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
}
.course-thumb.has-image,
#courses-categories .course-thumb.has-image { background: #24406f; }
.course-title,
.course-price { color: var(--text-dark); }
.course-enroll-btn { background: #4f80dd; }
.course-card:hover .course-enroll-btn { background: #6f9bff; }
#courses-categories .course-enroll-btn {
  background: rgba(255,255,255,.94); color: #1a3568; border-color: #cfe0ff;
}
#courses-categories .course-card:hover .course-enroll-btn { background: #fff; color: #12295a; }
#courses-categories .course-add-cart-btn {
  background: linear-gradient(180deg, #4f80dd, #3560ae);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* ───── بقية الألواح التي كانت بيضاء ───── */
.service-card,
.rs-box,
.testi-card,
.card-panel,
.course-buy-card,
.course-info-card,
.account-hub-card,
.account-profile-row,
.stat-card,
.tool-card,
.home-popup-ad {
  background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-dark);
}
.rs-box.rs-featured { background: linear-gradient(180deg, #27497f, #1a3568); }
.testi-carousel::before { background: linear-gradient(to left, var(--bg-page), transparent); }
.testi-carousel::after  { background: linear-gradient(to right, var(--bg-page), transparent); }
.testi-nav-btn { background: #1b3768; color: #d6e4ff; border-color: var(--border-color); }
.instructor-card { background: linear-gradient(135deg, #1b3768, #24467e); border-color: var(--border-color); }
.detail-review-item,
.lesson-preview-item .lp-icon,
.curriculum-module summary,
.image-upload-zone,
.nav-toggle-btn { background: #1b3768; color: var(--text-dark); }
.curriculum-module summary { color: #ffffff; }
.cat-chip,
.track-course-tag { background: #1b3768; color: #cfe0ff; border-color: var(--border-color); }
.cat-chip.active { background: #4f80dd; border-color: #4f80dd; color: #fff; }

/* ───── شريط الأرقام وقسم "لماذا تختار مركزنا؟" ───── */
.stats-strip { background: #16305e; }
.site-trust-strip { background: #0b1d3d; border-top: 1px solid var(--border-color); }
.site-trust-strip .stt-head h2,
.stt-title { color: #ffffff; }

/* ───── الروابط والنصوص الثانوية ───── */
.service-link,
.footer-links a { color: #8fb2f5; }
.service-link:hover { color: #ffffff; }
.empty-state { color: #8098c4; }
.stt-desc,
.section-sub,
.hero-text p { color: var(--text-mid); }
.course-price-big { color: #9dc0ff; }

/* ───── الأزرار والحقول ───── */
.btn-outline { border-color: #6f9bff; color: #cfe0ff; }
.btn-outline:hover { background: #6f9bff; color: #0e2348; }
input,
select,
textarea,
.form-group input,
.form-group select {
  background: #0a1c3c; color: var(--text-dark); border-color: var(--border-color);
}

/* ───── التذييل: صار بلون الصفحة فيلتحم بها بلا فاصل ───── */
.site-footer { border-top: 1px solid var(--border-color); }

/* ───── الجوال ───── */
@media (max-width: 1100px) {
  .mobile-tabbar {
    background: #0a1c3c; border-top: 1px solid var(--border-color); box-shadow: 0 -4px 16px rgba(0,0,0,.35);
  }
  .mobile-tabbar a { color: #a9bddf; }
  .mobile-tabbar a.active { color: #ffffff; }
  .mobile-tabbar a.active .mt-icon { background: #24467e; }
  .mobile-nav-panel { background: #0e2348; color: var(--text-dark); }
  .mnp-nav a { color: #b9caea; }
  .mnp-nav a.active,
  .mnp-nav a:hover { color: #ffffff; }
  .nav-cat-menu { background: #16305e; }
  .nav-cat-menu a:hover { background: #24467e; color: #ffffff; }
  .mobile-back-row .mbr-btn { background: #1b3768; color: #cfe0ff; }
  .courses-grid.mini-grid .course-card,
  .courses-grid.mini-grid-2 .course-card {
    background: linear-gradient(180deg, #24467e 0%, #1a3568 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,.32);
  }
  .courses-grid.mini-grid .course-price,
  #courses-categories .courses-grid.mini-grid-2 .course-price { color: #9dc0ff; }
  .courses-grid.mini-grid-2 .course-enroll-btn {
    background: rgba(255,255,255,.94); color: #1a3568; border-color: #cfe0ff;
  }
}

/* ───── أنماط مكتوبة داخل الصفحات نفسها ─────
   هذه القواعد موجودة في وسوم <style> داخل صفحات بعينها، وهي تأتي بعد هذا الملف في
   ترتيب المستند فتتغلّب عليه — ولهذا وحده استُخدم !important هنا، لا لغيره. */
.cl-filters input,
.cl-filters select,
.item-link-row input,
.link-copy-row input {
  background: #0a1c3c !important; color: var(--text-dark) !important; border-color: var(--border-color) !important;
}
.cl-chip { background: #1b3768 !important; color: #cfe0ff !important; border-color: var(--border-color) !important; }
.cl-chip.active { background: #4f80dd !important; border-color: #4f80dd !important; color: #fff !important; }
.cl-msg.err { background: #40202a !important; color: #ff9d8f !important; }
.contact-type-btn { background: #1b3768 !important; color: #cfe0ff !important; border-color: var(--border-color) !important; }
.contact-info-card,
.m-card,
.verify-card,
.modal-box {
  background: var(--bg-panel) !important; border-color: var(--border-color) !important; color: var(--text-dark) !important;
}
.copy-mini-btn { background: #1b3768 !important; color: #cfe0ff !important; }
.cert-note { background: #3a2f18 !important; color: #f0c46a !important; }

/* ملاحظة مقصودة: بطاقات الشركاء تبقى بيضاء — شعاراتهم ملوّنة ومصمَّمة لخلفية بيضاء،
   ووضعها على خلفية داكنة يُفقد بعضها حدوده تمامًا. */

/* ═══════════ سطر تحت الحقل: تطابق البريد وشرط طول الرقم السري ═══════════
   موضعهما هنا لا في كل نموذج: نموذج التسجيل مكتوب في ثلاثة مواضع (صفحة التسجيل،
   ونافذتا الجوال وسطح المكتب)، فلو كُتب التنسيق في كلٍّ منها لاختلفت الثلاثة بأوّل
   تعديل. وهذان الصنفان هما وحدهما المشترك بينها. */
.ec-msg { font-size:12px; font-weight:700; line-height:1.8; margin-top:6px; }
.ec-msg.ok  { color: var(--green-500); }
.ec-msg.bad { color: var(--red-500); }
/* التلميح رماديّ خفيف: شرطٌ يُقرأ عند الحاجة، لا تحذيرٌ يُنازع الحقل على الانتباه */
.field-hint { font-size:11.5px; color: var(--text-light); line-height:1.8; margin-top:6px; }

/* ═══════════ صفحات الدخول والتسجيل (لا هيدر عام فيها) ═══════════ */
.auth-wrap { background: var(--bg-page); }
.auth-form-wrap { background: var(--bg-page); }
.auth-card h1 { color: #ffffff; }
.auth-card .sub { color: var(--text-mid); }
.auth-switch { color: var(--text-mid); }

/* ═══════════ لوحات التحكم (الإدارة والمتدرب) ═══════════ */
.dash-layout { background: var(--bg-page); }
.dash-sidebar { background: #081733; border-inline-start: 1px solid var(--border-color); }
.dash-main { background: var(--bg-page); }
.dash-topbar h1 { color: #ffffff; }
.dash-topbar .welcome { color: var(--text-mid); }
.dash-nav a { color: #b7c4e6; }
.dash-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.dash-nav a.active { background: #4f80dd; color: #fff; }

table.data-table th { color: #8fb2f5; border-bottom-color: var(--border-color); }
table.data-table td { color: var(--text-dark); border-bottom-color: var(--border-color); }
table.data-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* قائمة حساب المستخدم مكتوبة داخل كل صفحة لوحة، فتحتاج !important */
.user-menu-dropdown { background: var(--bg-panel) !important; border-color: var(--border-color) !important; }
.user-menu-dropdown a { color: var(--text-dark) !important; }
.user-menu-dropdown a:hover { background: #24467e !important; }
.user-menu-dropdown a.danger { color: #ff8f7d !important; }

/* بطاقات صفحة "خدماتي" بلوحة المتدرب — نمط مكتوب داخل الصفحة */
.svc-card { background: var(--bg-panel) !important; border-color: var(--border-color) !important; color: var(--text-dark) !important; }

/* ═══════════ قائمة التصنيفات المنسدلة — الكمبيوتر أيضًا لا الجوال وحده ═══════════ */
.nav-cat-menu { background: #16305e; border-color: var(--border-color); }
.nav-cat-menu a { color: var(--text-dark); }
.nav-cat-menu a:hover { background: #24467e; color: #ffffff; }
.nav-cat-trigger:hover { color: #ffffff; }

/* ═══════════ الشريط العلوي بالجوال (يظهر للمتدرب بدل الهيدر العام) ═══════════ */
body.trainee-mode .trainee-mobile-topbar { background: #0a1c3c; border-bottom: 1px solid var(--border-color); }
.trainee-mobile-topbar .tmt-menu-btn { background: #1b3768; color: #cfe0ff; }
.trainee-mobile-topbar .tmt-name { color: var(--text-dark); }

/* ═══════════ بطاقات الدورات بالجوال — تشمل الشبكة المصغّرة بالرئيسية ═══════════ */
@media (max-width: 1100px) {
  .course-card,
  #courses-categories .course-card,
  .courses-grid .course-card {
    background: linear-gradient(180deg, #24467e 0%, #1a3568 100%);
    border: 1px solid #33578f;
    box-shadow: 0 2px 10px rgba(0,0,0,.32);
  }
  .course-body { background: transparent; }
  .dash-sidebar { border: none; }
}

/* ═══════════ نافذة الدخول المنبثقة بالكمبيوتر ═══════════
   تنسيقاتها تُحقن من desktop-auth-modal.js داخل <head> بعد هذا الملف، فتتغلّب عليه —
   ولهذا وحده استُخدم !important هنا. */
.dam-card { background: var(--bg-panel) !important; color: var(--text-dark) !important; }
.dam-brand { color: #ffffff !important; }
.dam-tabs { background: #0a1c3c !important; }
.dam-tab { color: var(--text-mid) !important; }
.dam-tab.active { background: #24467e !important; color: #ffffff !important; }
.dam-close { background: #1b3768 !important; color: #cfe0ff !important; }
.dam-note, .dam-divider span, .dam-switch { color: var(--text-light) !important; }

/* أزرار إغلاق النوافذ داخل صفحة الدورة */
.modal-close { background: #1b3768; color: #cfe0ff; }

/* ══════════════════════════════════════════════════════════════════════════════
   أنماط مكتوبة داخل صفحات لوحة الإدارة ولوحة المتدرب
   ══════════════════════════════════════════════════════════════════════════════
   كل صفحة من هذه الصفحات تحمل وسم <style> خاصًا بها داخلها، وهو يأتي في ترتيب
   المستند بعد هذا الملف فيتغلّب عليه مهما تأخّر موضعه — ولهذا السبب وحده استُخدم
   !important في هذه الكتلة، لا لغيره.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── ألواح وبطاقات ── */
.app-card, .room-card, .rf-card, .rf-stat, .hub-card, .vs-card, .vs-kpi, .vs-chart,
.rd-item, .step-card, .cvb-sec, .pc-box, .ats-panel, .attach-item, .hub-attach-item,
.notif-icon, .msg-item, .notif-item, .notif-inbox-item, .te-filters, .vs-range {
  background: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  color: var(--text-dark) !important;
}
.app-card .app-icon, .attach-item .ai-icon, .hub-attach-item .hai-icon, .pc-icon,
.cat-icon-pick, .publish-switch .ps-dot {
  background: #24467e !important; color: #cfe0ff !important;
}
.attach-item:hover, .hub-attach-item:hover, .cart-remove-btn:hover { background: #24467e !important; }

/* ── أزرار صغيرة وحقول داخل الجداول ── */
.row-action-btn, .row-del-btn, .rep-del, .attend-btn,
.attachment-row-actions button, .lesson-row-actions button,
.meeting-link-row button.mlr-del, .rte-toolbar button, .order-btns button,
.type-toggle button, .vs-range button, .pick button, .type-tab,
.attachment-row-head select, .lesson-row-head select,
.te-filters select, .te-filters input, .rd-confirm-box input,
.nat-combo-list, #explore-filter-form, .color-row input[type=color],
.color-swatch-row input[type=color] {
  background: #1b3768 !important; color: #cfe0ff !important; border-color: var(--border-color) !important;
}
.type-tab.active, .type-toggle button.active, .vs-range button.active,
.pick button.active, .rf-btn.primary { background: #4f80dd !important; color: #ffffff !important; }

/* ── شارات ورسائل الحالة: تُحوَّل إلى نسخ داكنة من نفس المعنى ──
   الأخضر = نجاح · البرتقالي = تنبيه · الأحمر = خطأ · الأزرق = معلومة */
.action-tag.ok, .rf-badge.ok, .save-indicator.saved, .room-status-pill.live,
.svc-badge.ready, #rd-result.ok {
  background: #12341f !important; color: #5fd699 !important; border-color: #1f5c38 !important;
}
.action-tag.warn, .te-chip.warn, .vs-note.warn, .warn-banner, .rf-badge.wait,
.save-indicator.dirty, .te-badge.missing, .field-note, .lessons-hint, .super-note {
  background: #3a2f18 !important; color: #f0c46a !important; border-color: #5c4a22 !important;
}
.action-tag.danger, .bulk-errors, #rd-result.err, #te-error {
  background: #3a1f22 !important; color: #ff9d8f !important; border-color: #5c2f33 !important;
}
.info-banner, .attach-instructions, .hub-attach-instructions, .vs-note,
.te-badge, .rd-keep-chip, .msg-item.is-new, .notif-item.unread, .notif-inbox-item.unread {
  background: #1b3768 !important; color: #cfe0ff !important; border-color: var(--border-color) !important;
}

/* ── تبويبات الإعدادات والمالية والشهادات ── */
.settings-tab-btn { color: var(--text-mid) !important; background: transparent !important; }
.settings-tab-btn.active { background: #4f80dd !important; color: #ffffff !important; }

/* ── عناصر متفرّقة ظهرت بالتدقيق ── */
.mobile-nav-panel { background: #0e2348; }
label, .form-group label, summary { color: var(--text-dark); }
.sec-n, .ib-icon { color: #cfe0ff; }

/* ══════════════════════════════════════════════════════════════════════════════
   تبقى بيضاء عمدًا — ليست خلفيات صفحات بل "أوراق" حقيقية
   ══════════════════════════════════════════════════════════════════════════════
   ورقة السيرة الذاتية تُطبع وتُرسل لجهة توظيف: لونها أبيض لأن هذا لون الورق، لا
   لأن الموقع فاتح. وعارض ملفات إكسل يرسم جدولاً أبيض بداخله ولا يتبع ألوان الموقع. */
.cv-sheet, .cv-sheet *, .cv-ats .a-side, .cv-free .f-main,
.cv-free .f-bar .f-btrack span, .lesson-frame-wrap.excel-wrap {
  --text-dark: #16233f;
  --text-mid: #5b6b8c;
  --text-light: #94a3c4;
  --bg-page: #f3f6fb;
  --border-color: #e6eaf3;
}

/* ═══════════ سعر المنتج: الثلاثة بيضاء وواضحة ═══════════
   كان السعر قبل الخصم بلون ‎--text-light‎ (أزرقَ رماديًّا باهتًا) فيكاد لا يُقرأ على الأزرق
   الداكن، والمشتري إنّما يُقنعه **الفرق** بين الرقمين — فإخفاء أحدهما يُذهب الحجّة كلَّها.
   فصار أبيض كالسعر، وإنما يفرّقه الشطب وصغر حجمه لا بهتانُ لونه. وشارة «وفّر» بيضاء على
   أحمرَ صريح، فالثلاثة تُقرأ من مسافة. */
.buy-price-main { color: #fff !important; }
.buy-price-old { color: rgba(255,255,255,.82) !important; }
.buy-price-row .discount-badge { color: #fff !important; }

/* ── عناصر بقيت بلون الأزرار الغامق فوق سطح داكن ── */
.contact-form label { color: var(--text-dark) !important; }
.course-rating-row .stars { color: #f0b429; }
.site-header .cart-icon-link, .site-header .hdr-notif,
.trainee-mobile-topbar .tmt-notif, .trainee-mobile-topbar .tmt-logout { color: #cfe0ff; }
.dash-topbar .cart-icon-link, .dash-topbar .dash-notif { color: #cfe0ff; }
.cvb-sec > h3 .sec-n { background: #24467e !important; color: #cfe0ff !important; }
.cvb-ctrl { background: var(--bg-panel) !important; border-color: var(--border-color) !important; }
.cvb-tip { background: #14342b !important; border-color: #1f5c4a !important; color: #7fd9bd !important; }
.ats-note { background: #1b3768 !important; color: #cfe0ff !important; }
.course-gallery-main { background: #24406f; }
/* قائمة الجوال المنسدلة: خلفيتها داكنة في كل المقاسات، فألوان روابطها تخرج من طوق الجوال */
.mnp-nav a { color: #b9caea; }
.mnp-nav a.active, .mnp-nav a:hover { color: #ffffff; }
.mobile-nav-panel .brand { color: #ffffff; }
/* تبويبا «تسجيل الدخول / حساب جديد» داخل القائمة المنسدلة بالجوال: أنماطهما تُحقن من ملف
   mobile-nav.js داخل وسم <style> يُضاف للصفحة بعد هذا الملف، فيتغلّب على أي قاعدة بنفس قوّته.
   لذلك تُكتب هنا بمُحدِّد أقوى (إضافة .mobile-nav-panel قبلها) فتفوز مهما كان ترتيب التحميل.
   القيمة المحقونة كانت background:#fff مع color:var(--navy-900) — وبعد اعتماد الهوية الزرقاء
   صار --navy-900 لونًا فاتحًا، فظهر التبويب النشط مربعًا أبيض بنص أبيض غير مقروء إطلاقًا. */
.mobile-nav-panel .mnp-auth-tabs { background: #16305e; }
.mobile-nav-panel .mnp-auth-tab { color: #a9bddf; }
.mobile-nav-panel .mnp-auth-tab.active {
  background: #4f80dd; color: #ffffff; box-shadow: 0 2px 8px rgba(6,16,40,.4);
}
.mobile-nav-panel .mnp-auth-box { border-top-color: #2b4c83; }
.mobile-nav-panel .mnp-auth-note, .mobile-nav-panel .mnp-auth-divider span { color: #8098c4; }
.mobile-nav-panel .mnp-auth-divider::before,
.mobile-nav-panel .mnp-auth-divider::after { background: #2b4c83; }
details.bulk-details summary { color: #8fb2f5 !important; }

/* ── آخر ما كشفه التدقيق ── */
table.data-table a { color: #8fb2f5; }
.cvb-tip p { color: #7fd9bd !important; }
.cvb-tip p.tip-en { color: #6cc3aa !important; border-top-color: #1f5c4a !important; }
.cvb-tip .tip-h { color: #4fd6a8 !important; }
.dash-nav a .nav-icon { color: inherit; }
/* صندوق معاينة الخط بالإعدادات: يعرض لون النص المحفوظ، وهو لون فاتح لا يُقرأ إلا على
   خلفية داكنة — فيُثبَّت لونه على لون نص الموقع الفعلي كي تكون المعاينة صادقة */
#font-preview-box, #font-preview-title, #font-preview-text { color: var(--text-dark) !important; }
/* هذه مكتوبة بخاصية style="" مباشرة على العنصر داخل HTML/JS، ولا يتغلّب عليها إلا !important */
table.data-table a { color: #8fb2f5 !important; }
#month-target { color: #9dc0ff !important; }
.cat-row-icon { background: #24467e !important; color: #cfe0ff !important; }
.wcu-icon-preview { background: #24467e !important; color: #cfe0ff !important; }

/* ══════════ صناديق ملاحظات مكتوبة بخاصية style="" مباشرة على العنصر ══════════
   هذه الصناديق (ملاحظة زرقاء / خضراء / برتقالية / بنفسجية / حمراء) موزّعة داخل صفحات
   ولوحات مختلفة بلا أصناف CSS تُميّزها — لا اسم كلاس يُمسك به. لذلك تُستهدَف بلونها
   نفسه عبر مُحدِّد الخاصية، وهي الطريقة الوحيدة لتوحيدها بلا تعديل كل صفحة على حدة. */
[style*="#eaf1ff"], [style*="#eef2fb"] { background: #1b3768 !important; color: #cfe0ff !important; }
[style*="#e8f8f2"], [style*="#e7f7f0"] { background: #12341f !important; color: #5fd699 !important; }
[style*="#fff3e0"], [style*="#fff6e8"] { background: #3a2f18 !important; color: #f0c46a !important; }
[style*="#f3ecff"] { background: #2a1f45 !important; color: #c3aef5 !important; }
[style*="#fdeceb"] { background: #3a1f22 !important; color: #ff9d8f !important; }

/* ══════════ بطاقات الجوال بالصفحة الرئيسية (شبكة العمودين) ══════════
   القاعدة الأصلية لهذه البطاقات تبدأ بـ #courses-categories (مُحدِّد معرّف)، وهو يتفوّق
   على أي مُحدِّد أصناف مهما تأخّر موضعه — لذلك تُكتب هنا بنفس المُحدِّد لا بأقل منه.
   وهذه البطاقة نفسها تُستعمل للدورات والمسارات والورش والمنتجات الرقمية جميعًا
   (ملف course-card.js يبنيها كلها بصنف .course-card). */
@media (max-width: 1100px) {
  #courses-categories .courses-grid.mini-grid-2 .course-card,
  #courses-categories .courses-grid.mini-grid .course-card,
  #courses-categories .courses-grid.mini-grid-2.cat-scroll-row > .course-card {
    background: linear-gradient(180deg, #24467E 0%, #1A3568 100%);
    border: 1px solid #33578F;
    box-shadow: 0 2px 10px rgba(0,0,0,.32);
  }
  /* اللمعة الأصلية .6 مصمَّمة لبطاقة بيضاء وتُبيّض الداكنة */
  #courses-categories .courses-grid.mini-grid-2 .course-card::after {
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
  }
  #courses-categories .courses-grid.mini-grid-2 .course-thumb,
  #courses-categories .courses-grid.mini-grid .course-thumb { background: #24406F; }
}

/* بطاقة المسار التدريبي — تدرّج فاتح لم يشمله التعديل السابق */
.track-card { background: linear-gradient(180deg, #24467E, #1A3568); border-color: #33578F; }
.track-card-compact { border-color: #33578F; }
/* عناصر بطاقة المسار والورشة الداخلية */
.track-thumb.has-image { background: #24406F; }
.track-count { background: #24467E; color: #9DC0FF; }
.track-title, .track-price { color: var(--text-dark); }
.track-buy-course-tile { color: var(--text-dark); }

/* ══════════════════════════════════════════════════════════════════════════════
   مجموعة قابلة للطيّ في قائمة لوحة الإدارة ("مساحة العمل")
   ══════════════════════════════════════════════════════════════════════════════
   زر لا رابط: الضغط عليه يفتح المجموعة ولا ينقل لأي صفحة. وحالة الفتح تُحفظ في
   المتصفح فلا تنطوي المجموعة من جديد مع كل تنقّل. */
.nav-group { margin-bottom: 4px; }
.nav-group-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: #b7c4e6;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-align: start;
}
.nav-group-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-group.has-active > .nav-group-btn { color: #fff; }
.nav-group-btn .ngb-label { flex: 1; }
.nav-group-btn .ngb-arrow { display: flex; opacity: .75; transition: transform .2s ease; }
.nav-group.open > .nav-group-btn .ngb-arrow { transform: rotate(180deg); }

/* الخط الرأسي الفاصل يوضّح أن ما تحته تابع للمجموعة لا أقسام مستقلة */
.nav-group-items {
  display: none;
  margin: 2px 0 8px;
  padding-inline-start: 15px;
  border-inline-start: 1px solid rgba(255,255,255,.14);
}
.nav-group.open > .nav-group-items { display: block; }
.nav-group-items a { font-size: 13.5px; padding: 10px 12px; }

/* ══════════════════════════════════════════════════════════════════════════════
   شرائح التقسيط الخارجية (تمارا · تابي) — بطاقة فاتحة معزولة عن هوية الموقع
   ══════════════════════════════════════════════════════════════════════════════
   هذه الشرائح يبنيها مزوّد الخدمة لا نحن، وهي مصمَّمة على افتراض موقع فاتح:
   بعض عناصرها يرسم خلفيته بنفسه، وبعضها يتركها شفافة معتمدًا على خلفية الصفحة،
   ولون النص بداخلها **موروث** من الصفحة في كل الأحوال.

   فلمّا صار الموقع أزرق داكنًا اختلّ الطرفان معًا:
   · تمارا ترسم خلفيتها الكريمية، فورث نصّها اللون الفاتح ⇒ أبيض على فاتح: يختفي.
     (ولهذا بدت إطارًا فارغًا، وبدت نافذتها أيقونات بلا كلمات — الأيقونات لها لون
      صريح في كودهم لا موروث.)
   · تابي يترك خلفيته للصفحة ⇒ بطاقته صارت بلون الموقع بلا حدّ يفصلها.

   ولأن ملاحقة تنسيقات مزوّد خارجي داخليًا معركة لا تنتهي (يغيّرون أصنافهم متى شاؤوا)،
   الحلّ هنا يعالج الحاوية لا المحتوى: نمنح الشريحة **بطاقة بيضاء ونصًّا غامقًا** فتصبح
   بيئتها كما توقّعها المزوّد تمامًا، مهما رسم بداخلها.

   :not(:empty) شرط مقصود: الشريحة قبل أن يملأها المزوّد تكون فارغة، ولولاه لظهر
   مستطيل أبيض فارغ تحت السعر في كل صفحة لم تُفعَّل فيها الخدمة.

   ولا شيء من هذا يمسّ مسار الدفع — تنسيق عرض فقط. */
/* ═══ الحجم واللون — بعد ملاحظة صاحب الموقع ═══
   كانت البطاقة **بيضاء ناصعة بعرض بطاقة الشراء كاملًا**: شريطان أبيضان عريضان تحت السعر
   في موقعٍ كحليّ. فصارت:

     • ‎width:fit-content‎ ⇒ تُحيط بالشارة نفسها لا بعرض البطاقة — فتصغر بقدر محتواها.
     • حشوٌ أقلّ (‎6/10‎ بدل ‎10/12‎) وزوايا أصغر ⇒ حجمٌ أنحف.
     • واللون ‎#eaf1ff‎ — وهو **أزرق الموقع الفاتح** المستعمل في حبّات التصنيف وأيقونات
       البطاقات، بحدٍّ أزرق خفيف. فصارت من لوحة الموقع بدل الأبيض الناصع.

   ⚠️ ولماذا بقيت **فاتحة** ولم تصر كحليّة كبقيّة الموقع: محتوى الشارة يرسمه سكربت
   المزوّد لا نحن، ونصّه داكن — فالخلفية الداكنة تجعله غير مقروء. وهذا مشروحٌ بتفصيله
   في الفقرة أعلاه: نحن نملك الحاوية لا ما بداخلها. فالتصغير والتلوين الفاتح أقصى ما
   يُضمن ألّا يكسر شارة مزوّدٍ خارجي لا نتحكّم في داخلها. */
#tamara-widget-slot:not(:empty),
#tabby-promo-slot:not(:empty) {
  background: #eaf1ff;
  color: #16233f;
  border: 1px solid #cfdcf5;
  border-radius: 10px;
  padding: 6px 10px;
  width: fit-content;
  max-width: 100%;
}

/* نوافذ المزوّد المنبثقة تُلحَق بـ body خارج الشريحة، فتحتاج لون نصّها صراحةً.
   الخاصية color موروثة وتعبر حدود الـ Shadow DOM، فضبطها على المضيف يكفي. */
tamara-widget,
[class*="tamara"], [id*="tamara"],
[class*="tabby"],  [id*="tabby"] {
  color: #16233f;
}

/* ══════════════════════════════════════════════════════════════════════════════
   صفحة التسويق — مربّعات المزايا
   ══════════════════════════════════════════════════════════════════════════════
   كل ميزة تسويقية في مربّع، والضغط عليه يفتح لوحها وحده أسفل. السبب: مزايا التسويق
   الأربع مجتمعة مبسوطة معًا تصنع صفحة بطول ثلاث شاشات لا تُقرأ ولا يُعثر فيها على شيء.
   وشارة الحالة على كل مربّع تُغني عن فتحه لمعرفة إن كان يعمل. */
.mk-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.mk-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px 12px; min-height: 128px;
  background: var(--bg-card); border: 1.5px solid var(--border-color);
  border-radius: 16px; cursor: pointer; font-family: inherit; text-align: center;
  color: var(--text-dark); box-shadow: var(--shadow-card);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mk-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.mk-tile.active { border-color: var(--blue-500); box-shadow: var(--shadow-hover); }
.mk-tile .mk-ico { font-size: 26px; line-height: 1; }
.mk-tile .mk-name { font-size: 14px; font-weight: 800; line-height: 1.5; }
.mk-tile .mk-state {
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-page); color: var(--text-light);
}
.mk-tile .mk-state.on  { background: #12341f; color: #5fd699; }
.mk-tile .mk-state.off { background: #3a2f18; color: #f0c46a; }

@media (max-width: 560px) {
  .mk-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mk-tile { min-height: 112px; padding: 16px 8px; }
  .mk-tile .mk-ico { font-size: 22px; }
  .mk-tile .mk-name { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   لوحات المربّعات بلوحة الإدارة (التسويق · الإعدادات) + المسار العلوي
   ══════════════════════════════════════════════════════════════════════════════
   الأيقونات هنا خطية أحادية اللون ترث لون النص (currentColor) — نفس أسلوب أيقونات
   القائمة الجانبية تمامًا، لا إيموجي ملوّنة، فتبدو اللوحة نظامًا واحدًا لا مجموعة
   صور متنافرة. */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; margin-bottom: 18px; color: var(--text-mid);
}
.crumbs a { color: #8fb2f5; font-weight: 600; }
.crumbs a:hover { color: #ffffff; }
.crumbs span { color: var(--text-light); }
.crumbs b { color: var(--text-dark); font-weight: 800; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.hub-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px 16px; min-height: 158px; text-align: center;
  background: var(--bg-card); border: 1.5px solid var(--border-color);
  border-radius: 16px; box-shadow: var(--shadow-card);
  color: var(--text-dark); text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hub-tile:hover { transform: translateY(-3px); border-color: #4f80dd; box-shadow: var(--shadow-hover); }
.hub-tile .hub-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: #24467e; color: #cfe0ff;
}
.hub-tile:hover .hub-ico { background: #4f80dd; color: #ffffff; }
.hub-tile .hub-name { font-size: 15px; font-weight: 800; line-height: 1.5; }
.hub-tile .hub-desc { font-size: 12px; color: var(--text-mid); line-height: 1.7; }

.hub-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #8fb2f5;
  background: #1b3768; border-radius: 20px; padding: 8px 15px;
  margin-bottom: 18px; text-decoration: none;
}
.hub-back:hover { background: #24467e; color: #ffffff; }

/* قاعدة الصنف أعلاه تضبط display، وهي تتغلّب على خاصية hidden فيبقى العنصر ظاهرًا —
   لذا يُعاد إخفاؤه صراحةً */
.hub-grid[hidden], .hub-tile[hidden], .hub-back[hidden] { display: none; }

@media (max-width: 560px) {
  .hub-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub-tile { min-height: 138px; padding: 20px 10px; }
  .hub-tile .hub-ico { width: 44px; height: 44px; border-radius: 12px; }
  .hub-tile .hub-name { font-size: 13px; }
  .hub-tile .hub-desc { display: none; }
}

/* رابط "معاينة الموقع" أسفل شعار لوحة التحكم — يُبنى من admin-nav-badge.js */
.dash-preview-link {
  display: flex; align-items: center; gap: 10px;
  margin: -14px 0 4px; padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; color: #8fb2f5;
  background: rgba(255,255,255,.05); text-decoration: none;
}
.dash-preview-link:hover { background: rgba(255,255,255,.12); color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════════════
   رأس صفحة الدورة — الجوال: بطاقة بارزة بترتيب واضح
   ══════════════════════════════════════════════════════════════════════════════
   كان شريطًا ممتدًا من حافة الشاشة إلى حافتها، ومحتواه مبعثرًا: الشارات مفصولة بخطوط
   رأسية، والتصنيف سطرًا يتيمًا، والنجوم وعدد المسجّلين وحبيبات الجدولة كلٌّ في صف.

   صار بطاقة **أضيق من الشاشة** بحواف دائرية وحدّ فاتح وظل — فتبرز كقطعة مستقلة لا
   كخلفية ممتدة. والترتيب يُعاد بـ order وحدها (بلا لمس HTML): تصنيف ← شارات ← اسم ←
   نبذة ← جدولة في شبكة عمودين ← تقييم ومسجّلون. كل هذا داخل طوق الجوال فقط،
   وشكل الكمبيوتر لم يُمَسّ بحرف. */
@media (max-width: 1100px) {
  .course-detail-hero {
    margin: 12px 14px 0;
    border-radius: 20px;
    padding: 18px 0 18px !important;
    background: linear-gradient(158deg, #2A4F8C 0%, #16305E 55%, #102banner) !important;
    background: linear-gradient(158deg, #2A4F8C 0%, #16305E 55%, #102A52 100%) !important;
    border: 1px solid #3A6AC0;
    box-shadow: 0 10px 28px rgba(0,0,0,.38);
    overflow: hidden;
  }
  .course-detail-hero .container { padding-inline: 16px; display: flex; flex-direction: column; }

  /* الترتيب البصري — مستقل عن ترتيب العناصر في الصفحة.
     (حبّة التصنيف حُذفت من أعلى صفحة الدورة، فحُذفت قاعدتاها معها ولم تُترك ميتة.) */
  .course-detail-hero .detail-badges     { order: 2; }
  .course-detail-hero .course-detail-title    { order: 3; }
  .course-detail-hero .course-detail-subtitle { order: 4; }
  .course-detail-hero .detail-icon-stats { order: 5; }
  .course-detail-hero .hero-social-proof { order: 6; }

  /* الشارات: حبّات متناسقة تلتفّ — لا خطوط رأسية فاصلة تُربك العين */
  .course-detail-hero .detail-badges { gap: 7px; margin-bottom: 12px; }
  .course-detail-hero .detail-badge {
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px; padding: 5px 11px; font-size: 11.5px; border-inline-start: 1px solid rgba(255,255,255,.24);
  }
  .course-detail-hero .detail-badge:first-child { padding-inline-start: 11px; border-inline-start: 1px solid rgba(255,255,255,.24); }

  .course-detail-hero .course-detail-title { font-size: 21px; margin: 0 0 8px; }
  .course-detail-hero .course-detail-subtitle { font-size: 13px; opacity: .9; margin: 0 0 14px; }

  /* الجدولة: شبكة عمودين متساويين — الحبيبات كانت تلتفّ بأطوال مختلفة فتبدو مبعثرة */
  .course-detail-hero .detail-icon-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px;
  }
  .course-detail-hero .di-stat {
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px; padding: 9px 10px; font-size: 12px; justify-content: center;
  }
  /* عنصر فردي أخير يأخذ العمودين فلا يبقى نصف صف فارغ */
  .course-detail-hero .di-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* التقييم وعدد المسجّلين: صف واحد أسفل فاصل رفيع.
     يبدآن من الحافة نفسها (flex-start) لا متباعدَين بـ space-between — فلو لم يتّسع
     السطر لهما نزل الثاني تحت الأول بمحاذاة واحدة، بدل أن يُقذف لأقصى الطرف الآخر
     فيبدو معلّقًا بلا رابط بصري. */
  .course-detail-hero .hero-social-proof {
    margin: 0; padding-top: 13px; gap: 9px;
    border-top: 1px solid rgba(255,255,255,.16);
    justify-content: flex-start; align-items: center;
  }
  .course-detail-hero .detail-rating-badge { gap: 6px; }
  .course-detail-hero .detail-rating-badge .drb-stars { font-size: 16px; gap: 1px; }
  .course-detail-hero .detail-rating-badge .drb-count { font-size: 11.5px; }
  .course-detail-hero .detail-rating-badge .drb-score { font-size: 15px; }
  .course-detail-hero .hero-enrolled-badge { font-size: 11.5px; padding: 5px 11px; gap: 5px; }
}

/* بطاقتا صفحة الدورة تتجاوزان حافة الشاشة بالجوال
   ────────────────────────────────────────────────────────────────────────────
   صف التبويبات (نبذة · الحقيبة · التعليقات) أعرض من عمود الشبكة، وعنصر الشبكة
   افتراضيًا min-width:auto فلا ينكمش دون محتواه — فيتمدّد العمود ويدفع البطاقتين
   خارج الحاوية (كانتا تبدآن من -4px وتخرجان عن محاذاة بقية الصفحة).
   min-width:0 يسمح للعمود بالانكماش، والتفافُ التبويبات يستوعب الزائد. */
@media (max-width: 1100px) {
  .course-detail-grid > * { min-width: 0; }
  .info-tabs-row { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   أيقونات التواصل الاجتماعي أسفل النص الترحيبي (الصفحة الرئيسية)
   ───────────────────────────────────────────────────────────────────────────
   كتلة مستقلة بالكامل، لا تعدّل أي قاعدة قائمة ولا تؤثر على أيقونات التذييل
   في بقية الصفحات. توضع في نهاية الملف عمدًا ليسهل مراجعتها أو إزالتها.
   الشكل مطابق لأيقونات التذييل: دائرة شفافة تأخذ لون المنصة عند المرور.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-social { display:flex; gap:12px; margin:0 0 22px; flex-wrap:wrap; }
.hero-social:empty { display:none; }
.hero-social a {
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.hero-social a svg { width:21px; height:21px; }
.hero-social a:hover { transform: translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,.28); }
.hero-social a.fs-x:hover        { background:#000; }
.hero-social a.fs-linkedin:hover { background:#0a66c2; }
.hero-social a.fs-whatsapp:hover { background:#25d366; }
.hero-social a.fs-youtube:hover  { background:#ff0000; }
.hero-social a.fs-telegram:hover { background:#26a5e4; }
.hero-social a.fs-tiktok:hover   { background:#010101; }
.hero-social a.fs-instagram:hover { background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }

/* الجوال: أيقونات التواصل الست في صفّ متمركز بعد الوصف وقبل الأزرار.
   هذه الكتلة تُعيد تعريف مناطق الشبكة كاملةً لأن إضافة منطقة hsoc تتطلب ذكر كل المناطق
   معًا — فأي تغيير في ترتيب الهيرو أعلاه يجب أن يُنسخ هنا أيضًا وإلا تناقضت الكتلتان
   وفازت الأخيرة (وهذه) بترتيب قديم. */
@media (max-width: 680px) {
  .hero-grid {
    grid-template-areas:
      "himg"
      "httl"
      "hsub"
      "hsoc"
      "hact";
  }
  .hero-grid.hbc-off { grid-template-areas: "httl" "hsub" "hsoc" "hact"; }
  /* كانت الأيقونات مصغَّرة هنا (38px) لأن عمود النص الضيّق لم يكن يتّسع لستٍّ بمقاسها
     الكامل. وبعد أن صار الصفّ بعرض الشاشة زال السبب، فحُذف التصغير كليًّا ورجعت إلى
     مقاس الموقع الأصلي (46px) — مصدر واحد للمقاس بدل قاعدتين تتباعدان مع الوقت. */
  .hero-social { grid-area: hsoc; justify-content:center; gap:10px; margin:14px 0 0; }
}

/* الكمبيوتر: البانر المتحرك كان يكاد يلامس أول تصنيف (٢٠ بكسل فقط)، فتُضاف مسافة سفلية
   للهيرو وحده ليصير الفاصل ٦٤ بكسل — نفس إيقاع بقية أقسام الصفحة. الجوال مستثنى لأن
   المسافة عنده ١٣٦ بكسل أصلًا بوجود الأيقونات والأزرار بين البانر وأول تصنيف. */
@media (min-width: 681px) {
  .hero { padding-bottom: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   إطار الهيرو — بنفس تصميم بطاقات التصنيفات تمامًا
   ───────────────────────────────────────────────────────────────────────────
   يضم العنوان الترحيبي والنص الفرعي وأيقونات التواصل والبانر المتحرك داخل بطاقة
   واحدة: نفس الخلفية والحدود والشريط العلوي الملوّن والانحناء والظل المستخدمة في
   ‎.category-section‎. يُطبَّق على ‎.hero-grid‎ نفسه فلا يحتاج أي تعديل في HTML،
   ويعمل على كل المقاسات. لا يمسّ أي قاعدة قائمة ولا يؤثر على أي ميزة.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ خلفية الهيرو = خلفية الموقع ═══
   كانت ‎--bg-panel‎ وهي **أفتح** من خلفية الصفحة، فيظهر أعلى الرئيسية لوحٌ فاتح خلف
   «طوّر مهاراتك» يختلف لونه عمّا حوله — وهو أوّل ما تقع عليه العين في الموقع.
   و‎transparent‎ لا لونٌ مكتوب: تُساوي ما خلفها دائمًا، في السمة الداكنة والفاتحة وفي كل
   متصفّح، فلا يمكن أن تفترق عن الصفحة مهما تغيّرت ألوان الموقع مستقبلًا.
   والإطار والشريط الأزرق أعلاه يبقيان — هما هوية الهيرو، والفرق كان في اللون لا في الشكل.
   والظلّ يزول معها: ظلٌّ تحت سطحٍ شفّاف يوحي بارتفاعٍ لا وجود له. */
.hero-grid {
  background: transparent;
  border: 1px solid var(--border-color);
  border-top: 3px solid #4f80dd;
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 26px 26px 30px;
}
/* الجوال: يُنزع عن الهيرو شكل البطاقة كاملًا — لا خلفية ولا حدّ ولا ظلّ ولا حشو.
   على الشاشة الضيقة كانت البطاقة تضيف إطارًا حول ما يملأ الشاشة أصلًا، فتسرق من عرض
   البانر وتضع خطًّا حول أول ما تراه العين بلا داعٍ. وشكل البطاقة يبقى كما هو على
   الكمبيوتر حيث للهيرو ما حوله من فراغ يبرّره. */
@media (max-width: 680px) {
  .hero-grid {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   صندوق السيو بلوحة التحكم (public/js/seo-box.js)
   ═══════════════════════════════════════════════════════════════════════════ */
.seo-box .seo-hint { font-size:12.5px; color:var(--text-light); line-height:1.8; margin:0 0 16px; }
.seo-box .seo-note { font-size:11.5px; color:var(--text-light); margin-top:5px; line-height:1.7; }
.seo-slug-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.seo-slug-row .seo-slug-base { font-size:13px; color:var(--text-light); direction:ltr; flex-shrink:0; font-family:ui-monospace, monospace; }
.seo-slug-row input { flex:1; min-width:200px; }
.seo-img-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.seo-img-row input[type=text] { flex:1; min-width:200px; }
.seo-count { font-size:11px; font-weight:600; margin-inline-start:6px; color:var(--text-light); }
.seo-count.ok   { color:var(--green-500); }
.seo-count.warn { color:#d99a12; }
.seo-count.over { color:var(--red-500); }

.seo-preview-wrap { border-top:1px solid var(--border-color); padding-top:16px; margin-top:4px; }
.seo-preview-title { font-size:12px; font-weight:700; color:var(--text-mid); margin-bottom:8px; }
.seo-g { background:var(--bg-panel); border:1px solid var(--border-color); border-radius:10px; padding:12px 14px; }
.seo-g-url   { font-size:12px; color:#9bb7e6; direction:ltr; text-align:start; margin-bottom:3px; word-break:break-all; }
.seo-g-title { font-size:16px; color:#8ab4f8; line-height:1.4; margin-bottom:3px; }
.seo-g-desc  { font-size:12.5px; color:var(--text-mid); line-height:1.7; }
.seo-w { display:flex; gap:10px; background:var(--bg-panel); border:1px solid var(--border-color); border-radius:10px; padding:10px; align-items:stretch; }
.seo-w-img { width:76px; height:76px; border-radius:8px; flex-shrink:0; background:var(--bg-page) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:10.5px; color:var(--text-light); text-align:center; }
.seo-w-body { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.seo-w-title { font-size:13.5px; font-weight:700; color:var(--text-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seo-w-desc  { font-size:12px; color:var(--text-mid); line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seo-w-url   { font-size:11px; color:var(--text-light); direction:ltr; text-align:start; }

/* ═══════════════════════════════════════════════════════════════════════════════
   منع قصّ الحروف العربية النازلة تحت السطر داخل الحقول
   ───────────────────────────────────────────────────────────────────────────────
   المشكلة: "تركي" تظهر "تركى"، و"البرامج" تبدو الجيم فيها ناقصة، وذلك داخل الحقول
   بكل صفحات الموقع (بيانات المتدرب · منشئ السيرة الذاتية · الهوية البصرية بالإعدادات).

   السبب: المتصفح يقصّ نص الحقل عند حدود **صندوق المحتوى** لا عند حدود الحقل الظاهرة،
   وارتفاع صندوق المحتوى الافتراضي (line-height: normal) يساوي نحو 1.2 من حجم الخط —
   وهو مقاس مبني على الخطوط اللاتينية التي لا تنزل حروفها تحت السطر كثيرًا. أما العربية
   فنقطتا الياء في آخر الكلمة، وبطن الجيم والحاء والخاء، وذيل الميم والراء، تنزل أعمق من
   ذلك. فتُقصّ وحدها بينما يبقى فراغ الحشو (padding) ظاهرًا تحتها — ولهذا يبدو الحقل
   واسعًا والحرف مقصوصًا في آن واحد، وهو ما يُربك تشخيص المشكلة.

   قِيس فعليًا: حقل بحجم خط 20px كان صندوق محتواه **24px فقط**؛ وبعد هذا الإصلاح صار 46px.

   العلاج: ارتفاع سطر عربي مريح داخل الحقول. لا يمسّ مربعات الاختيار ولا أزرار الاختيار
   ولا منتقي الألوان ولا رفع الملفات ولا الأزرار، ولا يغيّر أي تنسيق آخر في الموقع.

   ═══════════════════════════════════════════════════════════════════════════════
   ⚠️ تصحيح لاحق: العلاج أعلاه كان يُبطل نفسه — والنقاط ظلّت مقصوصة
   ───────────────────────────────────────────────────────────────────────────────
   الحقل ذو السطر الواحد ارتفاع صندوق محتواه **يساوي ارتفاع السطر بالضبط**، لا أكثر.
   فرفعُ ‎line-height‎ يرفع صندوق المحتوى معه بالقدر نفسه، ويبقى الفرق بينهما صفرًا
   مهما زدنا. قِيس على الحقل الحقيقي بخطّ Tajawal: ارتفاع السطر 26.6px وصندوق المحتوى
   26.6px — أي **بلا فسحة إطلاقًا**، فأيّ حبرٍ ينزل تحت خطّ الأساس يُقصّ. ولهذا بقيت
   نقطتا الياء مبتورتين رغم الإصلاح.

   والفسحة لا تأتي إلا من ‎min-height‎ حين **يتغلّب** على الارتفاع الطبيعي. وهو لم يكن
   يتغلّب: 26.6 سطرًا + 24 حشوًا + 2 حدًّا = 52.6px، وهي فوق الـ48 فلا أثر لها.

   العلاج الصحيح شيئان معًا:
   ١) سطر أقصر (1.5 بدل 1.9) وحشو رأسي أنحف (7px بدل 12px) ⇒ الارتفاع الطبيعي 37px،
   ٢) فيتغلّب ‎min-height: 48px‎ ⇒ صندوق المحتوى 48−14−2 = 32px، والسطر 21px،
      **فالفسحة 11px** تحت الحرف وفوقه، تكفي نقاط الياء وبطن الجيم بمساحة واسعة.

   والحقل يبقى بارتفاع 48px الظاهر نفسه تمامًا — لم يتغيّر شكل أي نموذج في الموقع،
   تغيّر توزيع الارتفاع داخله فقط. وخطّ ‎textarea‎ مستثنى (أسطره متتالية، فيحتاج 1.9).
   ═══════════════════════════════════════════════════════════════════════════════ */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]),
select,
.form-group input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.form-group select {
  line-height: 1.5;
}

/* القوائم المنسدلة (select) حالة خاصة: كروم **يتجاهل** line-height فيها، فلا ينفع معها إلا
   توسيع الصندوق نفسه — وهذا الارتفاع يفعله. وهو نفسه ما يصنع الفسحة في الحقول (راجع
   أعلاه)، فلا يُخفَّض ولا يُحذف الحشو الرأسي معه وإلا عاد القصّ. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]),
select {
  /* لماذا ‎max()‎ وليس 48px وحدها:
     الـ 48 تصنع الفسحة ما دامت **تتغلّب** على الارتفاع الطبيعي (سطر + حشو).
     وهي تتغلّب عند خطّ 14px، لكنّها تسقط متى كبُر الخط: عند 22px يصير
     الارتفاع الطبيعي 49px فوق الـ 48، فتعود الفسحة صفرًا وتُبتر النقاط من جديد.

     وحجم خطّ الموقع **يُضبط من لوحة التحكم** (‎siteFontSize‎ حتى 24px — راجع
     ‎js/settings-apply.js‎)، فرقمٌ ثابت هنا يعني إصلاحًا ينقضه صاحب الموقع من لوحته
     وهو لا يدري. والمعادلة ‎2.25em + 16‎ (والـ16 هي الحشو 7+7 والحدّ 1+1)
     تضمن فسحة ‎0.75em‎ تحت الحرف **عند أيّ حجم خطّ كان** — فلا تعود المشكلة.
     وعند 14px تبقى الـ 48px هي الفائزة، فلا يتغيّر شكل أي نموذج في الموقع. */
  min-height: max(48px, calc(2.25em + 16px));
  padding-top: 7px;
  padding-bottom: 7px;
}

/* مربعات النص الطويل: سطر أوسع قليلًا لأن الأسطر فيها متتالية لا سطرًا واحدًا */
textarea { line-height: 1.95; }

/* حُذفت شارة «عرض اليوم الوطني» من الموقع بالكامل بطلب صاحب الموقع:
   لا في بطاقات الرئيسية، ولا في صفحات المنتجات، ولا مربّعها في لوحة التحكم. */


/* ═══════════════════════════════════════════════════════════════════════════════
   شريط «قطاع الأعمال» بالرئيسية
   ───────────────────────────────────────────────────────────────────────────────
   شريطٌ واحد لا شبكةُ بطاقات: رسالتُه واحدة وهدفُه ضغطةٌ واحدة. ومكتوبٌ للجوال أولًا —
   عمودٌ متراصّ بزرٍّ كامل العرض، ثم يصير صفًّا على الكمبيوتر.
   ═══════════════════════════════════════════════════════════════════════════════ */
.biz-band {
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:22px 20px; border-radius:18px; text-decoration:none;
  background:linear-gradient(135deg, rgba(79,128,221,.20), rgba(79,128,221,.06));
  border:1px solid rgba(79,128,221,.42);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.biz-band:hover { border-color:#4f80dd; transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.biz-ico {
  width:48px; height:48px; flex-shrink:0; border-radius:14px;
  background:rgba(79,128,221,.22); color:#9cc3ff;
  display:flex; align-items:center; justify-content:center;
}
.biz-ico svg { width:25px; height:25px; display:block; }
.biz-txt { flex:1; min-width:0; }
.biz-eye { display:block; font-size:11.5px; font-weight:800; letter-spacing:.04em; color:#8fb6f5; margin-bottom:5px; }
.biz-h { display:block; font-size:17px; font-weight:900; color:var(--text-dark); line-height:1.5; margin-bottom:7px; }
.biz-p { display:block; font-size:12.5px; font-weight:700; color:var(--text-light); line-height:1.85; }
.biz-cta {
  display:block; width:100%; text-align:center; flex-shrink:0;
  background:var(--navy-700); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:13px 22px; font-size:14.5px; font-weight:900;
  transition:background .18s ease;
}
.biz-band:hover .biz-cta { background:var(--navy-600, #3560ae); }

@media (min-width: 769px) {
  .biz-band { flex-direction:row; align-items:center; gap:20px; padding:24px 28px; }
  .biz-h { font-size:20px; margin-bottom:6px; }
  .biz-p { font-size:13.5px; }
  .biz-cta { width:auto; }
}
@media (prefers-reduced-motion: reduce) { .biz-band { transition:none; } }

/* ═══════════════════════════════════════════════════════════════════════════════
   زرّ «دليل جهات التوظيف» في القائمة العلوية
   ───────────────────────────────────────────────────────────────────────────────
   زرٌّ مميَّز لا رابطًا كبقية الروابط: صاحب الموقع أراده بارزًا، والصفحة خدمةٌ
   مجانية تجلب زوّارًا جددًا — فهي أوّل ما يُشار إليه في الهيدر.

   وهو داخل ‎.main-nav‎ نفسها، فتستنسخه قائمةُ الجوال المنسدلة تلقائيًّا. ولذلك له
   شكلان: حبّة مضيئة على الكمبيوتر، وسطرٌ في القائمة المنسدلة تُميّزه شارته وحده
   (الحبّة داخل قائمةٍ رأسية تبدو دخيلة على بقية السطور).

   واسمه وشارته وظهوره من لوحة التحكم — والشارة تُخفى إن أفرغ المدير نصّها.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══ بلون أزرار الموقع لا بلونٍ خاصّ به ═══
   كان بتدرّجٍ أزرقَ لامع وشارةٍ صفراء — لونان لا يوجدان في أي زرّ آخر بالموقع، فيبدو في
   الهيدر كأنه إعلانٌ مُلصق لا زرٌّ من أزرار الموقع. صار بلون ‎.btn-primary‎ نفسه
   (‎--navy-700‎ وهوفره ‎--navy-600‎)، وشارته بيضاء — فيتميّز بموضعه وشكله لا بغربته. */
/* ═══ زرٌّ يُقرأ زرًّا ═══
   كان بلون ‎--navy-700‎ الصريح، وخلفية الهيدر ‎#0e2348‎ قريبةٌ منه — فيذوب فيها ويبدو
   لطخةً داكنة لا زرًّا. والحلّ ليس لونًا غريبًا عن الموقع (جُرِّب من قبل فبدا إعلانًا
   مُلصقًا)، بل **أزرق الموقع نفسه أفتحَ درجةً** مع تدرّجٍ خفيف يعطيه حجمًا، وحدٍّ فاتح
   يفصله عن الخلفية، وظلٍّ من لونه هو لا من السواد — فيبدو مضيئًا لا ثقيلًا. */
.nav-featured-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #3a71e0 0%, #1e46a0 100%);
  color: #fff !important; font-weight: 800; font-size: 13.5px; line-height: 1;
  /* حشوٌ غير متساوٍ بالمنطق لا بالجهة: الشارة في نهاية الزرّ ولها حشوها، فلو تساوى
     الطرفان بدت متباعدة عن حافّته. ‎padding-inline‎ يعمل في الاتجاهين بلا نسختين. */
  padding: 8px; padding-inline-end: 8px; padding-inline-start: 14px;
  border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 4px 14px rgba(47,95,196,.42), inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.nav-featured-btn:hover {
  transform: translateY(-1px); filter: brightness(1.07);
  box-shadow: 0 7px 20px rgba(47,95,196,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.nav-featured-btn.active { box-shadow: 0 0 0 3px rgba(255,255,255,.28), 0 4px 14px rgba(47,95,196,.42); }

/* الأيقونة في قرصٍ شفيف: تفصلها عن النص وتمنع التصاقها بحافّة الزرّ */
.nav-featured-btn .nfb-icon {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
}
.nav-featured-btn .nfb-icon svg { width: 14px; height: 14px; display: block; }

/* «جديد» حبّة بيضاء صريحة: على أرضيةٍ زرقاء تُقرأ من أوّل نظرة، والشفيفة السابقة كانت
   تذوب في الزرّ فلا تُلحَظ — وهي سبب وجوده في الهيدر أصلًا */
.nfb-badge {
  background: #fff; color: #1a3a75; font-size: 10px; font-weight: 900;
  padding: 4px 9px; border-radius: 999px; line-height: 1; letter-spacing: .2px;
  border: 0; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.22);
}

/* ═══ داخل قائمة الجوال: سطرٌ كبقية السطور، خطُّه أبيض وشارته حبّة بيضاء ═══
   كان لونه أزرقَ فاتحًا وسط سطورٍ بيضاء، فيبدو رابطًا مكسورًا لا سطرًا مميّزًا. صار خطُّه
   أبيضَ كإخوته، و«جديد» وحدها هي العلامة: حبّة بيضاء صريحة تُقرأ من أوّل نظرة على أرضية
   القائمة الداكنة. */
/* ═══ الشاشات المتوسطة: الهيدر يضيق فيضيق معه ═══
   القائمة العلوية تبقى ظاهرة حتى ‎680px‎، وبين ذلك وبين ‎1100px‎ تتزاحم روابطها الستّة مع
   الشعار وأزرار الحساب حتى تخرج عن عرض الشاشة ويظهر شريط تمرير أفقي — وهو عيبٌ سابق
   يزيده أيُّ عنصرٍ جديد. فتُضيَّق المسافات ويصغر الزرّ في هذا النطاق وحده: يبقى زرًّا
   بهيئته كاملة، لكن بمقاسٍ يسع الشاشة. ولا يمسّ هذا الكمبيوتر ولا الجوال. */
/* ودون ‎900px‎ لا تضييق ينفع: الشعار وأزرار الحساب وحدها تلتهم عرض الشاشة، فتخرج
   القائمة عن الهيدر مهما صغرت. فتُطوى إلى الدرج المنسدل من هنا لا من ‎680px‎ — وهو
   موضعها الطبيعي على اللوحي، وفيها الزرّ بهيئته الكاملة بعرض الدرج. */
@media (min-width: 681px) and (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle-btn { display: flex; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 13.5px; }
  .nav-featured-btn { font-size: 12.5px; gap: 7px; padding-inline-start: 11px; }
  .nav-featured-btn .nfb-icon { width: 21px; height: 21px; }
  .nav-featured-btn .nfb-icon svg { width: 12px; height: 12px; }
  .nav-featured-btn .nfb-badge { font-size: 9.5px; padding: 3px 7px; }
}

/* ═══ وفي قائمة الجوال زرٌّ أيضًا ═══
   كان سطرًا كبقية السطور تُميّزه شارته وحدها — فيراه صاحب الجوال رابطًا عاديًّا بينما
   يراه صاحب الكمبيوتر زرًّا بارزًا، وهما شيء واحد. صار زرًّا في الحالين: نفس التدرّج
   ونفس الشارة، بعرض القائمة كاملًا ليُضغط بالإبهام بلا تصويب — والاستدارة أقلّ من
   الكمبيوتر (‎14px‎ لا حبّة كاملة) لأن الحبّة بعرض الشاشة تبدو شريطًا لا زرًّا. */
.mnp-nav .nav-featured-btn {
  display: flex; justify-content: center; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #3a71e0 0%, #1e46a0 100%);
  border: 1px solid rgba(255,255,255,.30); border-radius: 14px;
  box-shadow: 0 5px 16px rgba(47,95,196,.40), inset 0 1px 0 rgba(255,255,255,.20);
  padding: 13px 14px; margin: 12px 0 6px;
  font-size: 14.5px; color: #fff !important; font-weight: 800;
}
.mnp-nav .nav-featured-btn:hover { transform: none; filter: brightness(1.05); }
.mnp-nav .nav-featured-btn .nfb-icon { width: 26px; height: 26px; }
.mnp-nav .nav-featured-btn .nfb-icon svg { width: 15px; height: 15px; }
.mnp-nav .nfb-badge {
  background: #fff; color: var(--navy-700); border: 0;
  font-size: 10.5px; font-weight: 900; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   بطاقة الحساب: الأيقونة وحدها بلا اسم
   ───────────────────────────────────────────────────────────────────────────────
   بطلب صاحب الموقع: لا يُعرض اسم المتدرب ولا الإداري ولا الموظف في واجهة الموقع
   ولا في اللوحات — تكفي الأيقونة. والاسم يبقى في موضعين اثنين فقط:
     • **التقييمات وآراء المتدربين** — الرأي بلا صاحبٍ لا قيمة له (‎.dri-name‎ وأخواتها)
     • **مقدّم الدورة** في لوحة الدورات وصفحة الدورة (‎.instructor-name‎)
   وكلاهما بأصنافٍ أخرى لا تمسّها القاعدة هنا.

   ═══ لماذا إخفاءٌ بالتنسيق لا حذفٌ من الكود ═══
   الاسم يُكتب في ‎.user-name‎ من عشرات الصفحات، وحذفه من كلٍّ منها تعديلٌ في ستّين
   ملفًّا — وكلّ ملفٍ فرصة عطل. وقاعدةٌ واحدة هنا تكفي، وتُراجَع بسطرٍ واحد إن أردت
   إعادته يومًا. ولا تُلمس أي ميزة: البطاقة نفسها تبقى زرًّا يفتح قائمة الحساب كما هي.

   و‎!important‎ ضرورية: ‎settings-apply.js‎ يحقن لهذا العنصر شريط انتظارٍ متحرّكًا
   (‎tm-chip-wait‎) بعرضٍ ثابت ريثما يصل الاسم — ولولا الأولوية لبقي الشريط يحجز مكانًا
   لاسمٍ لن يظهر.
   ═══════════════════════════════════════════════════════════════════════════════ */
.user-chip .user-name { display: none !important; }

/* اسم المتدرب داخل سطر الترحيب بلوحته («مرحبًا بك يا فلان») */
.welcome-name { display: none !important; }

/* البطاقة بلا اسم تصير حبّةً مائلة، فتُعاد دائرةً حول الأيقونة وحدها */
.user-chip { gap: 0; padding: 5px; }


/* ═══════════════════════════════════════════════════════════════════════════════
   بطاقة المسار المختصرة — الرئيسية وصفحة البحث
   ───────────────────────────────────────────────────────────────────────────────
   و‎.cl-scope‎ هي حاوية بطاقات صفحة البحث: حين يُعرض نوع واحد تأخذ معرّف قسمه بالرئيسية،
   وحين تُخلط الأنواع تبقى بصنفها وحده — فتُذكر هنا مع كل محدِّد ليظهر المسار المختصر في
   الحالتين. والرئيسية لا يصلها هذا الصنف أصلًا، فلا يتغيّر فيها حرف.
   ───────────────────────────────────────────────────────────────────────────────
   نُقلت إلى هنا من داخل public/index.html بلا تغيير حرف واحد. السبب: صفحة البحث
   (courses.html) صارت ترسم بطاقات الرئيسية نفسها بدوالّها المشتركة، وتُلبس حاويتها
   معرّف القسم المقابل بالرئيسية — ومعرّف المسارات ‎#tracks-categories‎. وما دامت هذه
   القواعد حبيسة ملف الرئيسية كانت بطاقة المسار تظهر هناك بلا تنسيق.

   ولماذا في آخر الملف: هذا موضعها الأصلي في الترتيب (كانت آخر ما يُقرأ)، فلا قاعدة
   بعدها تنازعها — والرئيسية تبقى كما هي حرفًا بحرف.

   وبطاقة المسار الكاملة (‎.track-card‎ بلا ‎compact‎) لها قواعدها أعلاه ولم تُمسّ.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   بطاقة المسار بالرئيسية = بطاقة الدورة بالرئيسية بالضبط
   ───────────────────────────────────────────────────────────────────────────
   نفس شبكة بطاقة الدورة (#courses-categories .course-body) حرفًا بحرف: صورة
   أعلى البطاقة، ثم الاسم، ثم النجوم، ثم السعر، ثم زر «التفاصيل»، ثم زر «أضف
   إلى الحقيبة» — كلها مُوسَّطة وبعرض البطاقة كاملًا وبنفس المقاسات والألوان.
   والقواعد مقصورة على حاويتَين اثنتين: قسم المسارات بالرئيسية (#tracks-categories)
   وحاوية بطاقات صفحة البحث (.cl-scope) — وبطاقة المسار الكاملة (بلا compact) لا
   يصلها منها شيء، فصفحة «استكشف مسارك» وغيرها لا تتأثر بحرف واحد. */
#tracks-categories .track-card-compact, .cl-scope .track-card-compact {
  display: block; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
}
/* اللمعة التي تعبر البطاقة كل ٥ ثوانٍ — نفس لمعة بطاقة الدورة بالرئيسية بالضبط،
   وتستخدم الحركة نفسها (tmCardShine) المعرّفة أصلًا في style.css فلا شيء جديد يُضاف */
#tracks-categories .track-card-compact::after, .cl-scope .track-card-compact::after {
  content: ''; position: absolute; top: 0; left: -70%;
  width: 45%; height: 100%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  animation: tmCardShine 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #tracks-categories .track-card-compact::after, .cl-scope .track-card-compact::after { animation: none; opacity: 0; }
}

/* ═══ صورة المسار: تملأ أعلى البطاقة من حافة إلى حافة، وتظهر كاملة بلا قصّ ═══
   المشكلة أن صور المسارات ترد بنسب مختلفة (عريضة · مربّعة · طولية)، فإن أُظهرت كاملة
   (contain) ظهرت كل صورة بحجم مختلف تسبح في فراغ ملوّن، وإن مُلئ الإطار (cover) قُصّت
   الأطراف وبُتر اسم المسار المكتوب داخل الصورة.
   الحل: الفراغ يُملأ بنسخة مكبَّرة مضبَّبة من الصورة نفسها. فالإطار ممتلئ كاملًا في كل
   البطاقات، والصورة الحقيقية فوقه كاملة لا يُقصّ منها شيء. */
#tracks-categories .track-card-compact .track-thumb, .cl-scope .track-card-compact .track-thumb {
  aspect-ratio: auto; height: 260px; flex-shrink: 0; padding: 0;
}
#tracks-categories .track-card-compact .track-thumb.has-image, .cl-scope .track-card-compact .track-thumb.has-image {
  background: #24406f; position: relative; isolation: isolate;
}
/* ‎--tm-thumb‎ يضعها ملف course-card.js على العنصر نفسه — لأن رابط الصورة يختلف لكل مسار
   ولا يمكن كتابته في ملف تنسيق ثابت */
#tracks-categories .track-card-compact .track-thumb.has-image::before, .cl-scope .track-card-compact .track-thumb.has-image::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--tm-thumb); background-size: cover; background-position: center;
  filter: blur(20px) saturate(1.35) brightness(.72); transform: scale(1.25);
}
/* المسار المغلق: الصورة تتحوّل للرمادي — والخلفية معها، وإلا بقيت ملوّنة خلف صورة رمادية */
#tracks-categories .track-card-compact .track-thumb.thumb-closed.has-image::before, .cl-scope .track-card-compact .track-thumb.thumb-closed.has-image::before {
  filter: blur(20px) grayscale(1) brightness(.62);
}
#tracks-categories .track-card-compact .track-thumb.has-image img, .cl-scope .track-card-compact .track-thumb.has-image img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; padding: 0; box-sizing: border-box; object-fit: contain;
}
@media (max-width: 680px) {
  #tracks-categories .track-card-compact .track-thumb, .cl-scope .track-card-compact .track-thumb { height: 230px; }
}
#tracks-categories .track-card-compact .track-body, .cl-scope .track-card-compact .track-body {
  display: grid; grid-template-columns: 1fr;
  grid-template-areas: "title" "rating" "price" "detailsbtn" "cartbtn";
  grid-template-rows: 1fr auto auto auto auto;
  align-items: center; gap: 9px; padding: 14px 16px 18px;
}
/* العنوان سطران دائمًا — لا سطر ولا ثلاثة.
   كان العنوان الطويل يأخذ سطرين فيدفع النجوم والسعر والزرّين سطرًا كاملًا لأسفل، فتختلف
   مستوياتها بين بطاقة وأخرى في الصف الواحد. بتثبيته على سطرين تتساوى كل البطاقات، ومن
   زاد عنوانه يُقصّ بثلاث نقاط بدل أن يكسر الصف كله.
   الارتفاع الأدنى ضروري ولا يُستغنى عنه بـ‎1fr‎: جُرّب حذفه فعادت المستويات تختلف ٢٥ بكسل،
   لأن الخانة تتمدّد بمقدار ما فيها لا بمقدار أطول عنوان في الصف.
   و‎3em‎ لا ‎51px‎: هي حاصل سطرين × ارتفاع السطر ‎1.5‎، فتبقى صحيحة لو تغيّر مقاس الخط.
   و‎box-pack: center‎ توسّط العنوان القصير داخل الخانة بدل أن يعلق في أعلاها. */
#tracks-categories .track-card-compact .track-title, .cl-scope .track-card-compact .track-title {
  grid-area: title; text-align: center;
  font-size: 17px; font-weight: 800; line-height: 1.5; margin: 0;
  min-height: 3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  -webkit-box-pack: center; overflow: hidden;
}
#tracks-categories .track-card-compact .course-rating-row, .cl-scope .track-card-compact .course-rating-row {
  grid-area: rating; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 0; font-size: 14px;
}
#tracks-categories .track-card-compact .course-rating-row .stars, .cl-scope .track-card-compact .course-rating-row .stars {
  font-size: 26px; letter-spacing: 2px; line-height: 1; color: #e8a91d;
}
#tracks-categories .track-card-compact .course-rating-row .rating-num, .cl-scope .track-card-compact .course-rating-row .rating-num { font-size: 16px; font-weight: 800; }
#tracks-categories .track-card-compact .track-price-block, .cl-scope .track-card-compact .track-price-block {
  grid-area: price; justify-self: center; text-align: center; margin: 0;
}
#tracks-categories .track-card-compact .track-price, .cl-scope .track-card-compact .track-price {
  font-size: 24px; font-weight: 900; white-space: nowrap;
}
#tracks-categories .track-card-compact .price-original, .cl-scope .track-card-compact .price-original {
  font-size: 16px;
}
/* زر «التفاصيل»: عنصر span لا رابط — لأن البطاقة كلها رابط، ولا يصح رابط داخل رابط
   (نفس حيلة بطاقة الدورة تمامًا مع .course-enroll-btn) */
/* ⚠️ ولماذا كانت ألوان زرَّي المسار تخالف الدورة رغم تطابق هذه القواعد معها حرفًا بحرف:
   سِمة الموقع الداكنة في style.css تُعيد تلوين زرَّي **الدورة** وحدهما بعد تعريفهما
   (‎#courses-categories .course-enroll-btn‎ و‎.course-add-cart-btn‎ هناك)، ولا نظير لها
   للمسار. فبقي زرّ الدورة بحدٍّ أزرق فاتح ‎#cfe0ff‎، وزرّ المسار بحدٍّ كحليّ داكن —
   وهو الفرق الذي كان يُرى بالعين.

   فالقيم أدناه هي **القيم النهائية** التي ينتهي إليها زرّ الدورة بعد سِمة الداكن، لا
   القيم المكتوبة في تعريفه الأول. ومقيسة من الصفحة نفسها لا منقولة من الكود. */
#tracks-categories .track-card-compact .track-enroll-btn, .cl-scope .track-card-compact .track-enroll-btn {
  grid-area: detailsbtn; width: 100%; height: auto; margin: 0;
  /* flex لا block — زرّ الدورة flex، والفرق يظهر في توسيط النصّ رأسيًّا */
  display: flex; align-items: center; justify-content: center;
  padding: 11px 8px; border-radius: 10px; text-align: center; cursor: pointer;
  font-size: 13.5px; font-weight: 800;
  background: rgba(255,255,255,.94); color: #1a3568; border: 1.5px solid #cfe0ff;
  transition: background .2s, color .2s;
}
#tracks-categories .track-card-compact:hover .track-enroll-btn, .cl-scope .track-card-compact:hover .track-enroll-btn { background: #fff; color: #12295a; }
#tracks-categories .track-card-compact .track-add-cart-icon, .cl-scope .track-card-compact .track-add-cart-icon {
  grid-area: cartbtn; display: flex; align-items: center; justify-content: center;
  width: 100%; height: auto; margin: 0; padding: 12px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 800; white-space: nowrap; gap: 5px; border: none; color: #fff;
  background: linear-gradient(180deg, #4f80dd, #3560ae);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
/* والمسار المغلق: زرّ معطَّل بنفس شكل زرّ الدورة المغلقة، لا شارة حمراء.
   كان شكلًا ثالثًا في الصفحة نفسها — والمطلوب زرّان لا غير. */
#tracks-categories .track-card-compact .track-add-cart-icon:disabled, .cl-scope .track-card-compact .track-add-cart-icon:disabled {
  background: #eef1f7; color: #7d8aa3; opacity: 1;
  border: 1.5px solid var(--border-color); box-shadow: none; cursor: not-allowed;
}

/* لمعة تمر فوق الزرّين عند تمرير الماوس — نفس بطاقة الدورة */
#tracks-categories .track-card-compact .track-enroll-btn,
.cl-scope .track-card-compact .track-enroll-btn,
#tracks-categories .track-card-compact .track-add-cart-icon, .cl-scope .track-card-compact .track-add-cart-icon { position: relative; overflow: hidden; }
#tracks-categories .track-card-compact .track-enroll-btn::after,
.cl-scope .track-card-compact .track-enroll-btn::after,
#tracks-categories .track-card-compact .track-add-cart-icon::after, .cl-scope .track-card-compact .track-add-cart-icon::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
#tracks-categories .track-card-compact:hover .track-enroll-btn::after,
.cl-scope .track-card-compact:hover .track-enroll-btn::after,
#tracks-categories .track-card-compact:hover .track-add-cart-icon::after, .cl-scope .track-card-compact:hover .track-add-cart-icon::after { left: 125%; }

/* ═══════════════════════════════════════════════════════════════════════════════
   شريط الشراء السفلي — الجوال وحده
   ───────────────────────────────────────────────────────────────────────────────
   يبنيه ‎public/js/mobile-buy-bar.js‎ في صفحات المنتجات. وهنا شكله وموضعه فقط.

   موضعه: فوق شريط التبويبات السفلي لا تحته — و‎--tm-tabbar-h‎ يقيسه السكربت ويضعه على
   ‎<html>‎، لأن ارتفاع ذلك الشريط يتغيّر بمنطقة الأمان في أجهزة آيفون فلا يصحّ افتراضه.
   وطبقته ١١٩ أي **دون** التبويبات (١٢٠) ودون قائمة الجوال المنسدلة (١٥١)، فلا يغطّيهما.

   وزرّاه متساويان تمامًا عرضًا وارتفاعًا (‎flex:1‎ ونفس المقاسات) — التمييز باللون وحده.
   ═══════════════════════════════════════════════════════════════════════════════ */
.tm-buybar { display: none; }

@media (max-width: 680px) {
  .tm-buybar {
    display: flex; gap: 10px; align-items: stretch;
    position: fixed; inset-inline: 0; bottom: var(--tm-tabbar-h, 0px); z-index: 119;
    padding: 10px 14px; background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .28);
  }
  /* بلا شريط تبويبات أسفله ⇒ الشريط هو آخر الشاشة، فيأخذ هو منطقة الأمان */
  body.tm-no-tabbar .tm-buybar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

  .tm-buybar .tm-bb-btn {
    flex: 1 1 0; min-width: 0; min-height: 46px;
    display: flex; align-items: center; justify-content: center;
    padding: 12px 8px; border-radius: 12px; border: 1.5px solid transparent;
    font-family: inherit; font-size: 14.5px; font-weight: 800; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; box-sizing: border-box; transition: transform .12s ease;
  }
  .tm-buybar .tm-bb-btn:active { transform: scale(.98); }

  .tm-buybar .tm-bb-buy {
    color: #fff; border-color: transparent;
    background: linear-gradient(180deg, #4f80dd, #3560ae);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  .tm-buybar .tm-bb-cart {
    background: rgba(255, 255, 255, .94); color: #1a3568; border-color: #cfe0ff;
  }
  /* المغلق: زرٌّ باهت لا يُضغط — نفس شكل الزرّ المعطَّل في البطاقات */
  .tm-buybar .tm-bb-btn:disabled {
    background: #eef1f7; color: #7d8aa3; border-color: var(--border-color);
    box-shadow: none; cursor: not-allowed; opacity: 1;
  }

  /* الزرّ الأصلي داخل بطاقة الشراء: يُخفى ويبقى في الصفحة — الشريط يمرّر إليه الضغطة */
  .tm-buybar-src { display: none !important; }

  /* مساحة أسفل الصفحة بقدر الشريطين معًا، فلا يغطّي الشريط آخر المحتوى.
     تأتي بعد قاعدة ‎body:has(.mobile-tabbar)‎ أعلاه فتغلبها بالترتيب لا بالأهمية. */
  body.tm-buybar-on { padding-bottom: 150px; }
  body.tm-buybar-on.tm-no-tabbar { padding-bottom: 86px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   حجز المساحة قبل وصول البيانات — علاج تغيّر التخطيط (CLS)
   ───────────────────────────────────────────────────────────────────────────────
   أربعة عناصر في الشاشة الأولى تُملأ بعد ردّ الشبكة، فيكبر كلٌّ منها من صفر إلى حجمه
   ويدفع كل ما تحته. وقيست الزيادة على جوال ٣٩٠ بكسل:

     أزرار الهيدر      ٠ ← ٣٨    (والهيدر معها ٦٩ ← ١١٩ لأن الصفّ ينكسر سطرين)
     شريط القصص       ٢٠ ← ٩٧
     أزرار الهيرو      ٠ ← ٤٤
     تواصل الهيرو      ٠ ← ٤٦

   فصار لكلٍّ مكانه محجوزًا من أوّل إطار. والقيم تأتي **من الخادم** لا مكتوبةً هنا:
   صفحة الرئيسية تُبنى في ‎server/routes/seo.js‎ وهو يعرف ما إذا كانت هناك قصص أو أزرار
   أو روابط تواصل أصلًا، فيحجز لما سيأتي فقط. ولولا ذلك لبقي فراغٌ دائم في موقعٍ بلا قصص.

   والافتراضي صفر: أي صفحة لا يصلها هذا الحجز تعمل كما كانت حرفًا بحرف.
   ═══════════════════════════════════════════════════════════════════════════════ */
.hero-actions { min-height: var(--tm-hero-actions-h, 0px); }
/* صندوق التواصل فارغٌ حتى تصل الإعدادات، و‎:empty‎ تُخفيه — فلا ينفع حجزُ ارتفاعٍ لعنصرٍ
   لا وجود له في التخطيط. فيُعاد إظهاره **فقط** حين يخبرنا الخادم أن ثمّة روابط تواصل
   فعلًا (‎html.tm-has-social‎ أدناه يضعها الخادم في الرئيسية وحدها). */
.hero-social  { min-height: var(--tm-hero-social-h, 0px); }
html.tm-has-social .hero-social:empty { display: flex; }

@media (max-width: 680px) {
  .site-header .header-actions { min-height: var(--tm-hdr-actions-h, 0px); }
  .stories-bar { min-height: var(--tm-stories-h, 0px); }

  /* ═══ الهيدر لا ينكسر سطرين فجأة ═══
     صفّ الهيدر بالجوال ينتهي دائمًا إلى سطرين: الاسم فوق، والقائمة وأيقونات الحقيبة
     والجرس تحته. لكنه يبدأ سطرًا واحدًا (٦٩ بكسلًا) لأن الأيقونات لم تُضف بعد، ثم
     تُضاف فينكسر الصفّ ويصير ١١٩ — قفزةُ خمسين بكسلًا تدفع الصفحة كلّها.
     فيُفرض السطران من أوّل إطار: الاسم يأخذ سطره وحده. والنتيجة هي نفسها التي تنتهي
     إليها الصفحة، لا شكلٌ جديد. */
  .site-header .container > .brand { flex: 1 0 100%; }
}

/* ═══ أقسام التصنيفات الفارغة لا تحجز فراغًا قبل وصول بياناتها ═══
   أقسام الدورات والمسارات والورش والمنتجات الرقمية تبدأ فارغة تمامًا (‎<div id="…-categories">‎
   خالٍ)، لكن حشوة القسم وحدها تشغل نحو أربعين بكسلًا لكلٍّ منها. فإذا رتّبت الصفحةُ أقسامها
   بعد وصول الإعدادات واختفت هذه الأقسام الفارغة، انكمش ما فوق «خدماتنا» بنحو ١٧٤ بكسلًا
   وقفز كل ما تحته — وهو آخر «تغيّر تخطيط» بقي في الرئيسية.
   فالقسم الفارغ لا يُعرض أصلًا، ويعود وحده لحظة امتلاء صندوقه بأول بطاقة. ومتصفّح لا يعرف
   ‎:has‎ يتجاهل القاعدة ويبقى على السلوك السابق تمامًا — لا شيء ينكسر. */
.section:has(> .container > [id$="-categories"]:empty) { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   لوحة المدرّب على الجوال
   ───────────────────────────────────────────────────────────────────────────────
   شبكة «خدماتي» عمودان على الجوال لا عمود: ستّ بطاقاتٍ في عمودٍ واحد تعني شاشتين من
   التمرير للوصول إلى «الإعدادات»، والقاعدة العامة ‎.quick-tools‎ تجعلها عمودًا دون ٦٨٠
   بكسل. وهي أسماءٌ قصيرة تسع العمودين بلا قصّ.

   والشريط السفلي يُبنى من ‎js/instructor-mobile.js‎ بصنف ‎mobile-tabbar‎ نفسه الذي
   يستعمله المتدرّب، فيرث تنسيقه ووضعه الداكن كاملًا — ولا قاعدة جديدة له هنا سوى إخفائه
   على الشاشات الكبيرة، إذ القائمة الجانبية هي وسيلة التنقّل هناك.
   ═══════════════════════════════════════════════════════════════════════════════ */
.tables-row.im-rows { grid-template-columns: 1.4fr 1fr; }

@media (max-width: 900px) {
  /* عمودٌ واحد: خدماتي فوق جدول الدورات. وكانت النسبة مكتوبةً في الصفحة نفسها فتتفوّق
     على هذه القاعدة، فيبقى العمودان متلاصقَين وتُقصّ أسماء البطاقات بثلاث نقاط */
  .tables-row.im-rows { grid-template-columns: 1fr; }
  /* «خدماتي» أوّلًا على الجوال: هي مركز التنقّل، والجدول قراءةٌ تأتي بعده */
  .tables-row.im-rows .im-services-panel { order: -1; }
}

@media (max-width: 680px) {
  .quick-tools.im-services { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .quick-tools.im-services .tool-card { padding: 15px 8px; font-size: 12.5px; line-height: 1.45; }
  .quick-tools.im-services .t-icon { font-size: 20px; margin-bottom: 6px; }
}