/* ===== نظام التصميم المشترك - مركز تحسين مسارك للتدريب ===== */
: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: "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);
  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%);
  padding: 60px 0 40px;
}
.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: 14px; padding: 14px 16px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; background:#fff; border-bottom:1px solid var(--border-color);
}
.stories-bar::-webkit-scrollbar { display: none; }
.story-avatar { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:5px; width:64px; 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 #fff; }
.story-avatar-label { font-size:10.5px; font-weight:700; color: var(--text-mid); max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== عارض القصص كامل الشاشة ===== */
.story-viewer-overlay {
  display:none; position:fixed; inset:0; z-index:9998; background:#000;
  align-items:center; justify-content:center;
}
.story-viewer-overlay.open { display:flex; }
.story-viewer-progress { position:absolute; top:10px; inset-inline:10px; display:flex; gap:5px; z-index:3; }
.story-viewer-seg { flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.35); overflow:hidden; }
.story-viewer-seg-fill { display:block; height:100%; width:0%; background:#fff; }
.story-viewer-close { position:absolute; top:16px; inset-inline-end:14px; z-index:3; width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.18); color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.story-viewer-stage { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.story-viewer-image { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.story-viewer-link-btn { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); background:#fff; color:var(--navy-900); font-weight:800; font-size:13.5px; padding:10px 22px; border-radius:30px; text-decoration:none; z-index:3; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.story-viewer-nav-zone { position:absolute; top:0; bottom:0; width:34%; z-index:2; }
.story-viewer-nav-prev { inset-inline-start:0; }
.story-viewer-nav-next { inset-inline-end:0; }

/* ===== شريط البحث ===== */
.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; }
.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); }
.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; }

/* صفحة "جميع الدورات" (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; }
}
.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: #d99a1c; letter-spacing:1px; font-size:13px; }
.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:wrap; align-items:center; gap:8px; }
.course-price { font-weight: 800; color: var(--navy-900); font-size: 17px; }
.price-original { font-size: 13px; color: var(--text-light); text-decoration: line-through; }
.price-discount-badge { background:#fdeceb; color:#c23a2f; font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; }
.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; }
.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; }
.track-thumb.has-image img { width:100%; height:100%; object-fit:cover; }
.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); }

/* ===== شبكة "دورات المسار" داخل بطاقة الشراء بصفحة تفاصيل المسار: مربعات صغيرة بجانب بعض
   تُظهر مباشرة ما يحصل عليه المشتري قبل الضغط على زر الشراء — تحفّز على إتمام الشراء بإظهار
   القيمة الفعلية (عدد وأسماء الدورات) بشكل بصري سريع بدل الاكتفاء برقم مجرد ===== */
.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; }
.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; }
.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; }

/* ===== الشركاء ===== */
.partners-strip { padding: 40px 0; }
.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(--text-light); font-size: 15px; display:flex; align-items:center; justify-content:center; opacity:.8; filter: grayscale(100%); transition: opacity .2s, filter .2s; }
.partners-row .partner:hover { opacity: 1; filter: grayscale(0%); }
.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; }

/* ===== الفوتر ===== */
.site-footer { background: var(--bg-sidebar); padding-top: 50px; color: #b7c4e6; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-grid h4 { color: #fff; font-size: 15px; margin: 0 0 16px; }
.footer-grid li { margin-bottom: 10px; font-size: 13.5px; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { text-align: center; padding: 20px 0; font-size: 13px; color: #7f8fbb; }
.footer-social { display:flex; gap: 10px; margin-top: 14px; }
.footer-social a { width: 34px; height:34px; border-radius: 50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size: 13px; color:#fff; }

/* ===== مجموعات الروابط الإضافية أسفل الفوتر (روابط مهمة / انضم إلى فريقنا / أقسام الموقع):
   تُدار بالكامل من تبويب "الصفحات التعريفية" بلوحة التحكم — كل صفحة يُحدَّد لها المدير مجموعة
   فتظهر تلقائيًا هنا بعنوانها كرابط يفتح محتواها الفعلي؛ يظهر هذا الصف فقط عند وجود صفحة منشورة
   واحدة على الأقل بإحدى المجموعات (يُدار via JS بـ home.js)، ويختفي أي عمود فارغ منها تمامًا ===== */
.footer-links-groups { grid-template-columns: repeat(3, 1fr); gap:30px; padding:28px 0 6px; margin-top:2px; border-top:1px solid rgba(255,255,255,.08); }
.footer-links-groups .flg-col h4 { color:#fff; font-size:15px; margin:0 0 16px; font-weight:800; }
.footer-links-groups .flg-col ul { margin:0; padding:0; list-style:none; }
.footer-links-groups .flg-col li { margin-bottom:10px; font-size:13.5px; }
.footer-links-groups .flg-col a { color:#b7c4e6; transition:color .2s; }
.footer-links-groups .flg-col a:hover { color:#fff; }

/* ===== نماذج الدخول والتسجيل ===== */
.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; }
.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; }

.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; }
.course-detail-title { font-size: 30px; margin: 10px 0; line-height: 1.35; }
.course-detail-subtitle { color: #dbe6ff; font-size: 15px; max-width: 640px; line-height: 1.8; margin: 0 0 14px; }
.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:20px; flex-wrap:wrap; margin-top:20px; }
.di-stat { display:flex; align-items:center; gap:10px; color:#fff; font-size:13.5px; font-weight:600; }
.di-stat .di-icon { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; flex-shrink:0; }

/* شارة التقييم البارزة أعلى صفحة تفاصيل الدورة — نجوم كبيرة ملوّنة بدل رقم صغير باهت */
.detail-rating-badge { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.14); border:1px solid rgba(255,201,75,.55); border-radius:999px; padding:7px 18px; margin:4px 0 8px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.detail-rating-badge.muted { border-color:rgba(255,255,255,.3); }
.detail-rating-badge .drb-stars { display:inline-flex; gap:2px; font-size:19px; 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:16.5px; font-weight:800; color:#fff; }
.detail-rating-badge .drb-count { font-size:12.5px; color:#dbe6ff; font-weight:600; }

/* صف الثقة الاجتماعية أعلى الصفحة: شارة التقييم + عدد المتدربين المسجلين جنبًا إلى جنب،
   ليظهرا كدليل ثقة واحد واضح بدل تشتيتهما بين صفين منفصلين */
.hero-social-proof { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:2px 0 14px; }
.hero-enrolled-badge { color:#dbe6ff; font-size:13.5px; font-weight:600; }

/* شارة خصم بارزة (حمراء) تُضاف تلقائيًا لصف الشارات أعلى الصفحة عند وجود سعر أصلي أعلى من السعر الحالي */
.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; }

/* ===== عناصر تحفيزية ببطاقة الشراء: السعر مع الخصم، إلحاح المقاعد، الثقة الاجتماعية، مزايا
   مصوّرة بأيقونات بدل نص عادي — كلها مبنية من بيانات الدورة الفعلية (لا أرقام أو ادّعاءات وهمية) ===== */
.buy-price-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.buy-price-main { font-size:28px; font-weight:800; color:var(--navy-900); }
.buy-price-old { font-size:15px; color:var(--text-light); text-decoration:line-through; font-weight:600; margin-inline-end:8px; }
.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 { display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; color:var(--text-light); margin-top:14px; }

/* معرض صور الدورة (أعلى بطاقة الشراء) */
.course-gallery-main { width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#eef2fa; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.course-gallery-main img { width:100%; height:100%; object-fit:cover; }
.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:-6px; inset-inline-start:-6px; }

/* ===== زر واتساب عائم دائري — يظهر بالصفحة الرئيسية فقط على الجوال، برفعه فوق الشريط
   السفلي دائمًا حتى لا يغطيه أو يُغطى به، وبنبضة حركية خفيفة لجذب الانتباه دون إزعاج ===== */
.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 حسب ارتفاع الهيدر الفعلي ===== */
.mobile-back-row { display:none; position:sticky; top:0; z-index:99; padding:8px 16px; background:#fff; 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 دورات + أيقونة "المزيد") =====
   كل تصنيف يظهر الآن داخل إطار بطاقة احترافي كامل (خلفية بيضاء + حدود + ظل + زاوية علوية
   ملوّنة مميزة)، واسم التصنيف نفسه له إطاره الخاص المنفصل (شارة بارزة بخلفية متدرجة وحدود)
   بدل نص عادي، ليتميّز بصريًا عن باقي عناصر القسم ===== */
.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:9px;
  background: linear-gradient(135deg, #eef3ff, #f7faff);
  border:1.5px solid var(--navy-700);
  border-radius: 12px;
  padding:8px 18px 8px 14px;
  color: var(--navy-900);
  box-shadow: 0 2px 8px rgba(20,41,90,.06);
}
.cat-name-frame .cnf-icon {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background: var(--navy-700); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
}
.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; }

/* ===== الصفحة الرئيسية للمتدرب المسجّل دخوله: تُحذف عناصر التسويق (الهيرو بأزراره، وعنوان
   "الدورات المميزة" مع وصفها وزر "عرض جميع الدورات") نهائيًا — تُطبَّق دون قيد شاشة، أي على
   الجوال واللابتوب معًا؛ تبقى بطاقات الدورات نفسها ظاهرة أسفلها كما هي ===== */
body.trainee-mode .hero { 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-name { font-weight:700; font-size:14.5px; flex:1; }
.trainee-mobile-topbar .tmt-logout { width:34px; height:34px; flex-shrink:0; }
.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(3, 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; }
.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; }

/* ===== تحويل جدول الفواتير إلى بطاقات مكدّسة سهلة القراءة على الجوال ===== */
#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; }

/* ===== استجابة للشاشات الصغيرة ===== */
@media (max-width: 1100px) {
  .hero-grid, .courses-grid, .services-grid, .stats-grid, .footer-grid, .charts-row, .tables-row, .quick-tools { grid-template-columns: repeat(2, 1fr); }
  .testi-card { flex-basis: 300px; }
  .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; }
  /* أعمدة الفوتر: عمودين بجانب بعض بدل التكديس عمودًا واحدًا */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap:26px 14px; }
  .footer-grid h4 { font-size:13.5px; }
  .footer-grid li { font-size:12px; }
  /* مجموعات الروابط الإضافية أسفل الفوتر: عمودين بجانب بعض على الجوال أيضًا */
  .footer-links-groups { grid-template-columns: repeat(2, 1fr); gap:22px 14px; padding-top:20px; }
  .footer-links-groups .flg-col h4 { font-size:13.5px; margin-bottom:12px; }
  .footer-links-groups .flg-col li { font-size:12px; }
  .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; }
  .hero-text h1, .hero-text p { display:none; }
  .stories-bar { display:flex; }
  .hero { padding: 20px 0 22px; }
  .hero-grid { grid-template-columns: 1fr; gap:16px; }
  /* البانر الرئيسي المتحرك (5 صور) مخصّص لسطح المكتب فقط — يُخفى دائمًا بالجوال بغض النظر عن
     مفتاح heroBannerActive بالإعدادات (الذي يتحكم بظهوره على سطح المكتب فقط)، لأن الجوال لديه
     بانره الخاص المنفصل (.mobile-banner-slot) المخصص له أصلاً */
  .hero-image { display:none !important; }
  .hero-actions { flex-direction:column; }
  .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; }
  .category-section-head h3 { font-size:15.5px; }
  .cat-name-frame { padding:6px 12px 6px 10px; border-radius:10px; gap:7px; }
  .cat-name-frame .cnf-icon { width:24px; height:24px; font-size:12.5px; border-radius:7px; }
  .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.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; }

  /* بطاقات الدورات: 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-direction:column; align-items:center; gap:1px; }
  .courses-grid.mini-grid .course-price { font-size:13.5px; font-weight:800; color:var(--navy-700); }
  .courses-grid.mini-grid .price-original { font-size:10px; text-decoration:line-through; color:var(--text-light); }
  .courses-grid.mini-grid .price-discount-badge { display:none; }

  /* بطاقات الدورات بالصفحة الرئيسية فقط: دورتين بجانب بعض — صورة كبيرة بارزة + الاسم + رقم
     الاعتماد + زر أضف للسلة فقط (بلا سعر أو أي تفاصيل أخرى) */
  .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): صورة أكبر (بلا حشوة داخلية) + الاسم + السعر بأرقام إنجليزية + أيقونة تسجيل
     دائرية صغيرة بدل زر "أضف إلى الحقيبة" النصي وشارة الاعتماد — تُستهدف عبر معرّف الحاوية
     #courses-categories حتى لا تتأثر بطاقات الورش المصغّرة بنفس الكلاس */
  #courses-categories .courses-grid.mini-grid-2 .course-thumb { padding:0; }
  #courses-categories .courses-grid.mini-grid-2 .course-thumb.has-image img { padding:0; }
  #courses-categories .courses-grid.mini-grid-2 .course-thumb-badges { display:none; }
  #courses-categories .courses-grid.mini-grid-2 .course-accred { display:none; }
  #courses-categories .courses-grid.mini-grid-2 .course-title { min-height:36px; }
  /* عمود واحد رأسي: السعر أعلى الزرّين، ثم زر "أضف إلى الحقيبة" (ثانوي بحدود)، ثم زر
     "سجل الآن" (رئيسي معبّأ) — بدل التصميم السابق (سعر + أيقونة دائرية "+" فقط) */
  #courses-categories .courses-grid.mini-grid-2 .course-foot { flex-direction:column; align-items:stretch; gap:6px; }
  #courses-categories .courses-grid.mini-grid-2 .price-block { display:block; text-align:center; }
  #courses-categories .courses-grid.mini-grid-2 .price-original,
  #courses-categories .courses-grid.mini-grid-2 .price-discount-badge { display:none; }
  #courses-categories .courses-grid.mini-grid-2 .course-price { font-size:14px; font-weight:800; color:var(--navy-700); direction:ltr; display:block; }
  #courses-categories .courses-grid.mini-grid-2 .course-add-cart-btn {
    width:100%; background:#fff; color:var(--navy-700); border:1.5px solid var(--navy-700);
    font-size:11px; font-weight:700; padding:7px 4px; white-space:nowrap;
  }
  #courses-categories .courses-grid.mini-grid-2 .course-enroll-btn {
    display:flex; align-items:center; justify-content:center;
    width:100%; margin-top:6px; padding:8px 6px; border-radius:8px;
    background:var(--navy-700); color:#fff; font-size:12px; font-weight:800; line-height:1.3;
  }

  /* بانر الجوال: يظهر فقط عند تفعيله من لوحة التحكم (كلاس 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; }

  /* الإحصائيات بالجوال: 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:22px; }
  .partners-row.mobile-drag-track .partner { flex:0 0 20vw; opacity:1; filter:none; }

  /* صفحة "حسابي" (المتدرب) بالجوال: بطاقة واحدة بكل سطر بدل 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; }
  .account-hub-card .ahc-icon { margin:0; flex-shrink:0; width:48px; height:48px; font-size:21px; }

  /* جدول الفواتير (المالية/اشتراكاتي) يتحوّل إلى بطاقات مكدّسة سهلة القراءة على الجوال */
  #payments-table thead { display:none; }
  #payments-table, #payments-table tbody, #payments-table tr, #payments-table td { display:block; width:100%; }
  #payments-table tbody tr { margin-bottom:12px; border:1px solid var(--border-color); border-radius:14px; padding:14px 16px; background:#fff; 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 { padding: 24px 0 32px; }
  .course-detail-title { font-size: 21px; margin: 8px 0; line-height: 1.4; }
  .course-detail-subtitle { font-size: 13px; line-height: 1.7; margin-bottom: 10px; }
  .detail-badges { gap: 6px; margin-bottom: 10px; }
  .detail-badge { font-size: 11px; padding: 4px 10px; }
  /* شارة التقييم: نجوم أكبر وأوضح (20px بدل 19px) مع إحكام المسافات حولها لتبدو العنصر الأبرز
     بصف الثقة الاجتماعية أعلى الصفحة على شاشة ضيقة */
  .detail-rating-badge { padding: 7px 14px; gap: 7px; }
  .detail-rating-badge .drb-stars { font-size: 20px; }
  .detail-rating-badge .drb-score { font-size: 15px; }
  .detail-rating-badge .drb-count { font-size: 11px; }
  .hero-social-proof { gap: 10px; margin: 6px 0 10px; }
  .hero-enrolled-badge { font-size: 12px; }
  .detail-icon-stats { gap: 10px 16px; margin-top: 14px; }
  .di-stat { font-size: 12.5px; gap: 8px; }
  .di-stat .di-icon { width: 28px; height: 28px; font-size: 12.5px; }

  .course-info-card, .course-buy-card { padding: 16px; }
  .course-gallery-main { aspect-ratio: 16/9; }
  .buy-price-main { font-size: 23px; }

  /* تبويبات "نبذة عن الدورة / الحقيبة التدريبية / التعليقات": تمرير أفقي سلس بدل التفاف
     العناوين على بعضها أو تجاوزها عرض البطاقة على الشاشات الضيقة جدًا */
  .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:24px; }
}

/* ===== شريط تنبيه بسيط ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--navy-900); color:#fff; padding: 12px 22px; border-radius: 30px; font-size: 14px; box-shadow: var(--shadow-hover); z-index: 999; opacity:0; pointer-events:none; transition: opacity .3s, transform .3s; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(-6px); }