/* =====================================================================
   COURSE PLAYER — مشغّل الدورات (start-paid-teacher)
   يعتمد توكنات premium-theme.css (--brand / --pt-*). RTL-first.
   ⚠️ أسماء خطّافات JS محفوظة: active-video / textvideo / play-list-* /
      plyr-video-* / videoframe / stick-top / vertical-example
   ===================================================================== */

/* ---------------------------------------------------------------------
   ترويسة الدورة
   --------------------------------------------------------------------- */
.cp-head { margin-bottom: 1.1rem; }
.cp-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: var(--brand-soft, rgba(212, 110, 42, .1)); color: var(--brand-hover, #B85B21);
  margin-bottom: .55rem;
}
.cp-title { font-weight: 800; color: var(--pt-text, #1F2937); margin-bottom: .25rem; }
.cp-desc { color: var(--pt-text-2, #6B7280); margin-bottom: 0; }

/* شريط التقدّم */
.cp-progress { min-width: 210px; }
.cp-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; font-weight: 700; color: var(--pt-text-2, #6B7280); margin-bottom: .35rem;
}
.cp-progress-label .pct { color: var(--brand-hover, #B85B21); font-size: .95rem; }
.cp-progress .progress { height: 8px; border-radius: 999px; background: rgba(212, 110, 42, .12); }
.cp-progress .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-light, #F2B58C), var(--brand, #D46E2A));
  transition: width .6s cubic-bezier(.22,.61,.36,1), background .4s ease;
}
/* حالة الإكمال — الشريط أخضر */
.cp-progress .progress-bar.is-complete {
  background: linear-gradient(90deg, #34d399, #28A76F);
}
.cp-progress-label .pct { transition: color .3s ease; }

/* ---------------------------------------------------------------------
   احتفال الإكمال — قصاصات ملوّنة تتساقط
   --------------------------------------------------------------------- */
.cp-confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 20000; overflow: hidden;
}
.cp-confetti span {
  position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
  opacity: .95; animation: cp-confetti-fall linear forwards;
}
@keyframes cp-confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .cp-confetti { display: none; } }

/* ---------------------------------------------------------------------
   موديل احتفال الإكمال — بطاقة فاخرة بالهوية
   --------------------------------------------------------------------- */
.cp-celebrate-modal .modal-dialog { max-width: 420px; }
.cp-celebrate-modal .modal-content.cp-celebrate {
  position: relative; overflow: hidden; border: 0; border-radius: 24px;
  padding: 2.6rem 1.9rem 2rem; text-align: center;
  background: #fff;
  box-shadow: 0 30px 70px rgba(16, 24, 40, .28);
}
/* توهّج نحاسي علوي */
.cp-celebrate-glow {
  position: absolute; inset: -40% 0 auto 0; height: 60%; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(212, 110, 42, .28), transparent 70%);
}
/* شارة الكأس */
.cp-celebrate-badge {
  position: relative; z-index: 1;
  width: 88px; height: 88px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; color: #fff;
  background: linear-gradient(135deg, #E8A05F, #D46E2A 55%, #B85B21);
  box-shadow: 0 14px 30px rgba(212, 110, 42, .5), inset 0 2px 0 rgba(255, 255, 255, .35);
  animation: cp-badge-pop .55s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes cp-badge-pop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.cp-celebrate-title {
  position: relative; z-index: 1; font-weight: 800; color: var(--pt-text, #1F2937);
  margin-bottom: .4rem; animation: cp-rise .5s ease .1s both;
}
.cp-celebrate-text { position: relative; z-index: 1; color: var(--pt-text-2, #6B7280); margin-bottom: 1rem; animation: cp-rise .5s ease .18s both; }
.cp-celebrate-course { color: var(--brand-hover, #B85B21); font-weight: 800; }
@keyframes cp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cp-celebrate-stat {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand-hover, #B85B21);
  border-radius: 999px; padding: .45rem 1rem; font-weight: 700; font-size: .9rem;
  margin-bottom: 1.5rem; animation: cp-rise .5s ease .26s both;
}
.cp-celebrate-stat .cp-celebrate-pct { color: #28A76F; font-weight: 800; }

.cp-celebrate-btn {
  position: relative; z-index: 1; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.4rem; border: 0; border-radius: 14px; cursor: pointer;
  font-weight: 800; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, #E8A05F 0%, #D46E2A 45%, #B85B21 100%);
  box-shadow: 0 10px 24px rgba(212, 110, 42, .4), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: cp-rise .5s ease .34s both;
}
.cp-celebrate-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(212, 110, 42, .52); }

/* داكن */
html.dark-style .cp-celebrate-modal .modal-content.cp-celebrate { background: #2B2F45; }
html.dark-style .cp-celebrate-title { color: #E4E6F1; }
html.dark-style .cp-celebrate-text { color: rgba(228, 230, 241, .65); }
html.dark-style .cp-celebrate-course { color: #F2B58C; }
html.dark-style .cp-celebrate-stat { background: rgba(212, 110, 42, .16); color: #F2B58C; }

/* ---------------------------------------------------------------------
   إطار السينما — حول المشغّل (زجاجي فحمي دافئ كإطار الكتاب)
   --------------------------------------------------------------------- */
.cp-cinema {
  position: relative; border-radius: 22px; overflow: hidden;
  padding: .9rem .9rem 0;
  background:
    linear-gradient(160deg, rgba(64, 44, 31, .85) 0%, rgba(24, 17, 12, .92) 100%) padding-box,
    linear-gradient(135deg, rgba(232, 160, 95, .6), rgba(220, 214, 205, .35), rgba(212, 110, 42, .5)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 50px rgba(24, 16, 8, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.cp-cinema::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent);
  pointer-events: none; z-index: 1;
}
.cp-cinema .plyr-video-iframe iframe,
.cp-cinema .plyr-video-iframe { border-radius: 14px; overflow: hidden; }
.cp-cinema iframe { display: block; border: 0; width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 400px; }
.cp-cinema .plyr, .cp-cinema video { border-radius: 14px; overflow: hidden; }

/* شريط «الآن يعرض» */
.cp-nowbar {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem .4rem .9rem; position: relative; z-index: 1;
}
.cp-nowbar-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  color: #fff; font-size: 1rem;
  box-shadow: 0 6px 14px rgba(212, 110, 42, .4);
}
.cp-nowbar .textvideo {
  color: #F5EFE8; font-weight: 700; font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   شريط «تابع من حيث توقفت»
   --------------------------------------------------------------------- */
.cp-resume {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: .9rem; padding: .7rem .9rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(212,110,42,.12), rgba(212,110,42,.04));
  border: 1px solid rgba(212, 110, 42, .3);
  animation: cp-rise .4s ease both;
}
.cp-resume-info { color: var(--pt-text, #1F2937); font-weight: 600; font-size: .92rem; min-width: 0; }
.cp-resume-info i { color: var(--brand, #D46E2A); margin-inline-end: .3rem; }
.cp-resume-info strong { color: var(--brand-hover, #B85B21); }
.cp-resume-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.cp-resume-btn {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .5rem 1rem; border: 0; border-radius: 10px; cursor: pointer; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #E8A05F, #D46E2A);
  box-shadow: 0 6px 14px rgba(212, 110, 42, .35); transition: transform .2s ease;
}
.cp-resume-btn:hover { transform: translateY(-1px); }
.cp-resume-close {
  border: 0; background: transparent; color: var(--pt-text-2, #6B7280);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.cp-resume-close:hover { background: rgba(0, 0, 0, .06); }

/* ---------------------------------------------------------------------
   شريط تنقّل الدروس (السابق / التالي)
   --------------------------------------------------------------------- */
.cp-lesson-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: 1rem; padding: .55rem .65rem;
  border-radius: 14px; border: 1px solid var(--pt-border, #E7EAF0);
  background: #fff; box-shadow: 0 6px 16px rgba(16, 24, 40, .05);
}
.cp-nav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 10px; font-weight: 700; font-size: .9rem;
  border: 1px solid rgba(212, 110, 42, .35); background: var(--brand-soft, rgba(212,110,42,.1));
  color: var(--brand-hover, #B85B21); cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.cp-nav-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); color: #fff; transform: translateY(-1px); }
.cp-nav-btn:disabled { opacity: .4; cursor: not-allowed; }
.cp-nav-next { background: linear-gradient(135deg, #E8A05F, #D46E2A); color: #fff; border-color: transparent; }
.cp-nav-next:hover:not(:disabled) { box-shadow: 0 8px 18px rgba(212, 110, 42, .4); }
.cp-lesson-indicator { font-size: .82rem; font-weight: 700; color: var(--pt-text-2, #6B7280); text-align: center; }

/* ---------------------------------------------------------------------
   بانر الرخصة (الدورة المجانية)
   --------------------------------------------------------------------- */
.cp-license {
  border-radius: 18px; padding: 1.4rem; margin-top: 1.25rem; text-align: center;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, rgba(212,110,42,.5), rgba(242,181,140,.35), rgba(39,76,119,.3)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 10px 26px rgba(16, 24, 40, .07);
}
.cp-btn-gold, .cp-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem; border-radius: 12px; font-weight: 700; text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.cp-btn-gold {
  background: linear-gradient(135deg, #E8A05F 0%, #D46E2A 45%, #B85B21 100%);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(212, 110, 42, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cp-btn-gold:hover { transform: translateY(-2px); color: #fff !important; box-shadow: 0 12px 26px rgba(212, 110, 42, .48); }
.cp-btn-gold .tag {
  background: rgba(255, 255, 255, .92); color: var(--brand-hover, #B85B21);
  border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; font-weight: 800;
}
.cp-btn-ghost { background: #fff; color: var(--brand-hover, #B85B21) !important; border: 1.5px solid rgba(212, 110, 42, .4); }
.cp-btn-ghost:hover { background: var(--brand-soft, rgba(212,110,42,.1)); border-color: var(--brand, #D46E2A); transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   قائمة التشغيل (السايدبار)
   --------------------------------------------------------------------- */
/* اسكرول خارجي: القائمة كلها تُمرّر كوحدة واحدة (لاصقة) */
.cp-playlist {
  max-height: calc(100vh - 30px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 4px 2px;
}
.stick-top.cp-playlist.course-content-fixed { max-height: calc(100vh - 100px); }
.cp-playlist::-webkit-scrollbar { width: 8px; }
.cp-playlist::-webkit-scrollbar-track { background: transparent; }
.cp-playlist::-webkit-scrollbar-thumb {
  background: rgba(212, 110, 42, .3); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.cp-playlist::-webkit-scrollbar-thumb:hover { background: rgba(212, 110, 42, .5); background-clip: content-box; }

/* بحث الدروس — رأس لاصق أعلى القائمة المتمرّرة */
.cp-search {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .8rem; padding: .5rem .75rem;
  border-radius: 12px; border: 1px solid var(--pt-border, #E7EAF0);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(16, 24, 40, .06);
}
.cp-search-ico { color: var(--brand, #D46E2A); font-size: 1.05rem; flex-shrink: 0; }
.cp-search-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: .9rem; color: var(--pt-text, #1F2937); min-width: 0;
}
.cp-search-input::placeholder { color: var(--pt-text-2, #6B7280); }
.cp-search-clear {
  border: 0; background: rgba(212, 110, 42, .12); color: var(--brand-hover, #B85B21);
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
  transition: background .2s ease;
}
.cp-search-clear:hover { background: rgba(212, 110, 42, .24); }
.cp-search-empty {
  text-align: center; color: var(--pt-text-2, #6B7280); font-weight: 600;
  padding: 1.5rem .5rem; font-size: .9rem;
}
/* تلوين نص المطابقة */
.cp-hl {
  background: rgba(212, 110, 42, .16);
  color: var(--brand-hover, #B85B21);
  padding: 0 1px; border-radius: 3px; font-weight: 800;
}

.cp-playlist .accordion-item {
  border: 1px solid var(--pt-border, #E7EAF0) !important;
  border-radius: 14px !important; overflow: hidden;
  margin-bottom: 1rem; background: #fff;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .05);
}
.cp-playlist .accordion-button {
  background: #fff !important; box-shadow: none !important; padding: .9rem 1rem;
}
.cp-playlist .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, rgba(212, 110, 42, .08), rgba(212, 110, 42, .02)) !important;
}
.cp-chapter-name { font-weight: 800; color: var(--pt-text, #1F2937); font-size: .95rem; }

/* نسبة إكمال الفصل — شريط رفيع + عدّاد */
.cp-chapter-progress { display: flex; align-items: center; gap: .5rem; width: 100%; margin: .4rem 0 .1rem; }
.cp-chapter-progress .cp-cp-track {
  flex: 1; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(212, 110, 42, .14);
}
.cp-chapter-progress .cp-cp-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-light, #F2B58C), var(--brand, #D46E2A));
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.cp-chapter-progress .cp-cp-text {
  font-size: .72rem; font-weight: 700; color: var(--pt-text-2, #6B7280); min-width: 34px; text-align: end;
}
/* فصل مكتمل — يتحوّل العدّاد والشريط للأخضر */
.cp-chapter-complete .cp-cp-fill { background: linear-gradient(90deg, #34d399, #28A76F); }
.cp-chapter-complete .cp-cp-text { color: #28A76F; }
.cp-chapter-complete .cp-chapter-name::after {
  content: "\2713"; margin-inline-start: .35rem; color: #28A76F; font-weight: 900;
}
.cp-chapter-meta { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: .3rem; }
.cp-count {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 700; color: var(--brand-hover, #B85B21);
  background: var(--brand-soft, rgba(212, 110, 42, .1));
  border-radius: 999px; padding: .15rem .6rem;
}

/* عناصر الدروس */
.cp-playlist .row-content { padding-top: .6rem !important; }
.cp-playlist .form-check { padding: .45rem .5rem; border-radius: 10px; transition: background .2s ease; margin-bottom: .35rem !important; }
.cp-playlist .form-check:hover { background: rgba(212, 110, 42, .05); }
.cp-playlist .form-check-input {
  width: 1.15em; height: 1.15em; margin-top: .15em;
  border: 2px solid rgba(212, 110, 42, .45); border-radius: 50% !important;
  flex-shrink: 0; cursor: pointer;
}
.cp-playlist .form-check-input:checked { background-color: #28A76F; border-color: #28A76F; }
.cp-playlist .play-list-click { cursor: pointer; }
.cp-playlist .play-list-click .h6 { transition: color .2s ease; }
.cp-playlist .play-list-click:hover .h6 { color: var(--brand-hover, #B85B21); }
.cp-playlist .play-list-sum { font-size: .78rem; }

/* الدرس النشط — خطّاف JS، الاسم محفوظ */
.active-video {
  display: block; width: 100%; padding: 6px 8px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(212, 110, 42, .16), rgba(212, 110, 42, .05)) !important;
  box-shadow: inset 3px 0 0 var(--brand, #D46E2A);
  transition: background-color .3s;
}
.active-video .h6 { color: var(--brand-hover, #B85B21) !important; }

/* أزرار الاختبارات والملفات */
.cp-tools { display: flex; gap: .5rem; padding: .55rem .8rem .8rem; }
.cp-tools .btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-weight: 700; border-radius: 10px; padding: .5rem .6rem; font-size: .85rem;
}
.cp-tools .cp-tool-exams { background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand-hover, #B85B21); border: 1px solid rgba(212, 110, 42, .3); }
.cp-tools .cp-tool-exams:hover { background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); color: #fff; }
.cp-tools .cp-tool-files { background: rgba(39, 76, 119, .08); color: #274C77; border: 1px solid rgba(39, 76, 119, .25); }
.cp-tools .cp-tool-files:hover { background: #274C77; color: #fff; }
.cp-tools .dropdown-menu { border-radius: 12px; box-shadow: 0 12px 30px rgba(16,24,40,.14); }

/* لا اسكرول داخلي — الفصل يتمدّد بالكامل والتمرير خارجي على القائمة */
.cp-playlist .vertical-example { height: auto !important; position: relative; }
/* تباعد أوضح بين الدروس */
.cp-playlist .form-check { margin-bottom: .55rem !important; }

@media (max-width: 991.98px) {
  .cp-progress { min-width: 100%; margin-top: .8rem; }
  .cp-cinema iframe { min-height: 240px; }
  .cp-playlist { max-height: none; overflow: visible; }
}

/* الشاشات الصغيرة — «السابق/التالي» فقط + إخفاء المؤشّر (يبقى البحث) */
@media (max-width: 575.98px) {
  .cp-lesson-indicator { display: none; }
  .cp-lesson-nav { gap: .5rem; }
  .cp-nav-btn { flex: 1; justify-content: center; padding: .6rem .5rem; }
}

/* ---------------------------------------------------------------------
   مشغّل مصغّر لاصق (الجوال فقط) — يطفو الفيديو أثناء تصفّح القائمة
   --------------------------------------------------------------------- */
.cp-cinema-placeholder { height: 0; }
.cp-mini-close { display: none; }

@media (max-width: 991.98px) {
  .cp-cinema.cp-mini {
    position: fixed; bottom: 12px; inset-inline-start: 12px;
    width: 200px; max-width: 58vw; z-index: 1055;
    padding: 0; margin: 0; border-radius: 12px; overflow: hidden;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    animation: cp-mini-in .25s ease both;
  }
  .cp-cinema.cp-mini::before,
  .cp-cinema.cp-mini::after { display: none; }
  .cp-cinema.cp-mini .cp-nowbar { display: none; }
  .cp-cinema.cp-mini iframe,
  .cp-cinema.cp-mini video { min-height: 0 !important; border-radius: 12px; }
  .cp-cinema.cp-mini .plyr-video-iframe,
  .cp-cinema.cp-mini .plyr-video-iframe iframe { border-radius: 12px; }

  .cp-cinema.cp-mini .cp-mini-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 5px; inset-inline-end: 5px; z-index: 3;
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; font-size: .85rem;
  }
  .cp-cinema.cp-mini .cp-mini-close:hover { background: rgba(0, 0, 0, .8); }
}
@keyframes cp-mini-in { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-cinema.cp-mini { animation: none; } }

/* ---------------------------------------------------------------------
   الوضع الداكن (html.dark-style — مبدّل سمة اللياوت)
   إطار السينما داكن أصلاً؛ نعالج البطاقات والنصوص الفاتحة فقط.
   --------------------------------------------------------------------- */
html.dark-style .cp-title { color: #E4E6F1; }
html.dark-style .cp-desc,
html.dark-style .cp-progress-label { color: rgba(228, 230, 241, .65); }
html.dark-style .cp-progress-label .pct { color: #F2B58C; }
html.dark-style .cp-progress .progress { background: rgba(212, 110, 42, .22); }
html.dark-style .cp-eyebrow { background: rgba(212, 110, 42, .16); color: #F2B58C; }

/* قائمة التشغيل */
html.dark-style .cp-playlist .accordion-item {
  background: #2F3349;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
html.dark-style .cp-playlist .accordion-button { background: #2F3349 !important; }
html.dark-style .cp-playlist .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, rgba(212, 110, 42, .16), rgba(212, 110, 42, .04)) !important;
}
html.dark-style .cp-chapter-name { color: #E4E6F1; }
html.dark-style .cp-count { background: rgba(212, 110, 42, .16); color: #F2B58C; }
html.dark-style .cp-chapter-progress .cp-cp-track { background: rgba(212, 110, 42, .2); }
html.dark-style .cp-chapter-progress .cp-cp-text { color: rgba(228, 230, 241, .6); }

/* شريط التنقّل — داكن */
html.dark-style .cp-lesson-nav { background: #2F3349; border-color: rgba(255, 255, 255, .08); box-shadow: 0 6px 16px rgba(0,0,0,.22); }
html.dark-style .cp-nav-btn { background: rgba(212, 110, 42, .14); color: #F2B58C; border-color: rgba(212, 110, 42, .35); }
html.dark-style .cp-lesson-indicator { color: rgba(228, 230, 241, .6); }

/* بحث الدروس — داكن */
html.dark-style .cp-resume { border-color: rgba(212, 110, 42, .4); }
html.dark-style .cp-resume-info { color: #E4E6F1; }
html.dark-style .cp-resume-info strong { color: #F2B58C; }
html.dark-style .cp-resume-close { color: rgba(228, 230, 241, .6); }
html.dark-style .cp-resume-close:hover { background: rgba(255, 255, 255, .08); }
html.dark-style .cp-search { background: rgba(47, 51, 73, .92); border-color: rgba(255, 255, 255, .08); }
html.dark-style .cp-search-input { color: #E4E6F1; }
html.dark-style .cp-search-input::placeholder { color: rgba(228, 230, 241, .5); }
html.dark-style .cp-hl { background: rgba(212, 110, 42, .28); color: #F2B58C; }
html.dark-style .cp-playlist .form-check:hover { background: rgba(212, 110, 42, .1); }
html.dark-style .cp-playlist .play-list-click:hover .h6 { color: #F2B58C; }

/* الدرس النشط */
html.dark-style .active-video {
  background: linear-gradient(90deg, rgba(212, 110, 42, .22), rgba(212, 110, 42, .06)) !important;
  box-shadow: inset 3px 0 0 #F2B58C;
}
html.dark-style .active-video .h6 { color: #F2B58C !important; }

/* بانر الرخصة */
html.dark-style .cp-license {
  background:
    linear-gradient(#2F3349, #2F3349) padding-box,
    linear-gradient(120deg, rgba(212,110,42,.5), rgba(242,181,140,.3), rgba(39,76,119,.4)) border-box;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
html.dark-style .cp-btn-ghost {
  background: rgba(255, 255, 255, .04);
  color: #F2B58C !important;
  border-color: rgba(212, 110, 42, .45);
}
html.dark-style .cp-btn-ghost:hover { background: rgba(212, 110, 42, .16); }

/* أزرار الاختبارات والملفات */
html.dark-style .cp-tools .cp-tool-exams { background: rgba(212, 110, 42, .14); color: #F2B58C; border-color: rgba(212, 110, 42, .35); }
html.dark-style .cp-tools .cp-tool-files { background: rgba(122, 165, 210, .12); color: #9FC2E8; border-color: rgba(122, 165, 210, .3); }
html.dark-style .cp-tools .cp-tool-files:hover { background: #3E5A7E; color: #fff; }

/* ═══ إسعاف «الفيديو لا يظهر؟» — بطاقة إرشاد أصلية بلا JS ═══ */
.cp-video-help {
  margin-top: .65rem;
  border: 1px dashed rgba(212, 110, 42, .35);
  border-radius: .6rem;
  background: rgba(212, 110, 42, .04);
}
.cp-video-help summary {
  cursor: pointer;
  padding: .55rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: #B4632A;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cp-video-help summary::-webkit-details-marker { display: none; }
.cp-video-help[open] summary { border-bottom: 1px dashed rgba(212, 110, 42, .25); }
.cp-video-help-body { padding: .75rem 1rem .9rem; font-size: .85rem; }
.cp-video-help-body p { margin-bottom: .5rem; font-weight: 600; }
.cp-video-help-body ol { margin: 0 0 .75rem; padding-inline-start: 1.2rem; }
.cp-video-help-body li { margin-bottom: .35rem; line-height: 1.7; }
.cp-video-help-body code {
  background: rgba(212, 110, 42, .1);
  color: #B4632A;
  padding: .1rem .4rem;
  border-radius: .3rem;
}
.cp-video-help-wa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border-radius: 2rem;
  background: #1FA855;
  color: #fff !important;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
.cp-video-help-wa:hover { background: #178A45; color: #fff; }
html.dark-style .cp-video-help { background: rgba(212, 110, 42, .07); }
html.dark-style .cp-video-help summary { color: #F2B58C; }
html.dark-style .cp-video-help-body code { color: #F2B58C; }