/* ==========================================================================
   EduVision Academy — Learning Area Skin v7 "Royal"
   Tutor LMS 4.x  •  templates/learning-area/*
   تغيير جوهري: قائمة جانبية داكنة + شريط علوي داكن + مسرح فيديو سينمائي
   ========================================================================== */

/* ---------- 1) الخطوط ---------- */
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Cairo:wght@400;600;700&display=swap");

/* ==========================================================================
   2) لوحات الألوان  —  غيّر اللوحة من functions-snippet.php
   الافتراضي: Royal (كحلي ملكي + ذهبي)
   ========================================================================== */
.tutor-learning-area,
.ev-theme-royal .tutor-learning-area {
  --ev-shell:        #0e2b47;   /* الشريط والقائمة الداكنة */
  --ev-shell-2:      #0a2138;   /* درجة أغمق */
  --ev-shell-line:   rgba(255,255,255,.09);
  --ev-shell-text:   #eaf1f8;
  --ev-shell-muted:  #9fb4c9;
  --ev-brand:        #124e78;
  --ev-brand-deep:   #0d3a5c;
  --ev-brand-soft:   #eef4f9;
  --ev-gold:         #c9a227;
  --ev-gold-2:       #e3c260;
  --ev-gold-soft:    #f8f1da;
  --ev-page:         #eef2f7;
  --ev-stage:        #08131f;   /* خلفية مسرح الفيديو */
  --ev-ink:          #16212c;
  --ev-ink-2:        #3a4753;
  --ev-muted:        #6d7885;
  --ev-line:         #e6eaef;
  --ev-ok:           #1f7a5c;
}

/* لوحة بديلة 1: Midnight (فحمي مزرق + فيروزي) */
.ev-theme-midnight .tutor-learning-area {
  --ev-shell:#101826; --ev-shell-2:#0b111c; --ev-shell-line:rgba(255,255,255,.08);
  --ev-shell-text:#e8eef6; --ev-shell-muted:#94a3b8;
  --ev-brand:#0f766e; --ev-brand-deep:#115e59; --ev-brand-soft:#e6f5f3;
  --ev-gold:#d9a84e; --ev-gold-2:#f0cd85; --ev-gold-soft:#fbf2e2;
  --ev-page:#eef1f5; --ev-stage:#070b12;
}

/* لوحة بديلة 2: Plum (نبيتي فاخر + وردي ذهبي) */
.ev-theme-plum .tutor-learning-area {
  --ev-shell:#2a1533; --ev-shell-2:#1f0f27; --ev-shell-line:rgba(255,255,255,.09);
  --ev-shell-text:#f3eaf6; --ev-shell-muted:#b9a4c2;
  --ev-brand:#6d2c6f; --ev-brand-deep:#54204f; --ev-brand-soft:#f6edf7;
  --ev-gold:#c08a5e; --ev-gold-2:#e0b48d; --ev-gold-soft:#f9f0e8;
  --ev-page:#f2eef4; --ev-stage:#150a1b;
}

/* ==========================================================================
   3) الأساس والخلفية
   ========================================================================== */
.tutor-learning-area {
  --ev-font: "Tajawal", "Cairo", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-family: var(--ev-font) !important;
  letter-spacing: 0 !important;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(18,78,120,.10), transparent 60%),
    radial-gradient(900px 460px at 10% 0%, rgba(201,162,39,.08), transparent 60%),
    var(--ev-page) !important;
  color: var(--ev-ink) !important;

  /* إعادة تلوين متغيرات Tutor الأساسية */
  --tutor-brand-100: var(--ev-brand-soft);
  --tutor-brand-200: #dde8f1;
  --tutor-brand-300: #c6d8e6;
  --tutor-brand-400: #6f9cbb;
  --tutor-brand-600: var(--ev-brand);
  --tutor-brand-700: var(--ev-brand-deep);
  --tutor-brand-800: var(--ev-brand-deep);
  --tutor-brand-900: var(--ev-shell);
  --tutor-brand-950: var(--ev-shell-2);
  --tutor-surface-brand-primary: var(--ev-brand);
  --tutor-surface-brand-primary-2: var(--ev-brand-deep);
  --tutor-surface-brand-secondary: #cfe0ec;
  --tutor-surface-brand-tertiary: var(--ev-brand-soft);
  --tutor-surface-brand-quaternary: #e2ecf4;
  --tutor-surface-brand-dark: var(--ev-shell);
  --tutor-text-brand: var(--ev-brand);
  --tutor-text-brand-hover: var(--ev-brand-deep);
  --tutor-icon-brand: var(--ev-brand);
  --tutor-icon-brand-hover: var(--ev-brand-deep);
  --tutor-text-primary: var(--ev-ink);
  --tutor-text-secondary: var(--ev-ink-2);
  --tutor-text-subdued: var(--ev-muted);
}

.tutor-learning-area *,
.tutor-learning-area *::before,
.tutor-learning-area *::after { letter-spacing: 0 !important; }

/* ==========================================================================
   4) الشريط العلوي — داكن فاخر
   ========================================================================== */
.tutor-learning-area .tutor-learning-header {
  position: sticky !important; top: 0 !important; z-index: 60 !important;
  background: linear-gradient(180deg, var(--ev-shell) 0%, var(--ev-shell-2) 100%) !important;
  border: 0 !important;
  box-shadow: 0 10px 30px -18px rgba(8,19,31,.85) !important;
}
.tutor-learning-area .tutor-learning-header::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ev-gold) 20%, var(--ev-gold-2) 50%, var(--ev-gold) 80%, transparent);
  opacity: .95;
}
.tutor-learning-area .tutor-learning-header-inner {
  min-height: 68px !important;
  padding-inline: 26px !important;
}
.tutor-learning-area .tutor-learning-header-title,
.tutor-learning-area .tutor-learning-header-title span {
  color: #fff !important;
  font-family: var(--ev-font) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}
/* شارة ذهبية قبل العنوان */
.tutor-learning-area .tutor-learning-header-title::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 22px; border-radius: 6px;
  margin-inline-end: 12px;
  background: linear-gradient(180deg, var(--ev-gold-2), var(--ev-gold));
}
.tutor-learning-area .tutor-learning-header-back,
.tutor-learning-area .tutor-learning-header-toggle-mobile,
.tutor-learning-area .tutor-expand-btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--ev-shell-line) !important;
  color: var(--ev-shell-text) !important;
  border-radius: 12px !important;
  transition: background .18s ease, transform .18s ease !important;
}
.tutor-learning-area .tutor-learning-header-back:hover,
.tutor-learning-area .tutor-learning-header-toggle-mobile:hover,
.tutor-learning-area .tutor-expand-btn:hover {
  background: rgba(201,162,39,.22) !important;
  border-color: var(--ev-gold) !important;
  transform: translateY(-1px) !important;
}
.tutor-learning-area .tutor-learning-header svg,
.tutor-learning-area .tutor-learning-header [class*="tutor-icon"] { color: var(--ev-shell-text) !important; }

/* ==========================================================================
   5) التقسيم العام
   ========================================================================== */
.tutor-learning-area .tutor-learning-area-container {
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: 30px 26px 40px !important;
}

/* ==========================================================================
   6) القائمة الجانبية — داكنة مع لمسات ذهبية
   ========================================================================== */
.tutor-learning-area .tutor-learning-sidebar {
  background: linear-gradient(180deg, var(--ev-shell) 0%, var(--ev-shell-2) 100%) !important;
  border: 0 !important;
  box-shadow: -18px 0 40px -30px rgba(8,19,31,.7) !important;
}
.tutor-learning-area .tutor-learning-sidebar-curriculum { padding: 6px 0 24px !important; }

/* التقدم */
.tutor-learning-area .tutor-learning-progress {
  margin: 18px 18px 14px !important;
  padding: 16px 18px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--ev-shell-line) !important;
  border-radius: 16px !important;
}
.tutor-learning-area .tutor-learning-progress-text,
.tutor-learning-area .tutor-learning-progress-text * {
  color: var(--ev-shell-text) !important;
  font-family: var(--ev-font) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}
.tutor-learning-area .tutor-learning-progress-text span {
  color: var(--ev-gold-2) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}
.tutor-learning-area .tutor-learning-progress .tutor-progress-bar,
.tutor-learning-area .tutor-learning-sidebar .tutor-progress-bar {
  height: 8px !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.tutor-learning-area .tutor-learning-sidebar .tutor-progress-bar-fill,
.tutor-learning-area .tutor-learning-sidebar [class*="progress-bar-fill"] {
  background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-2)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 14px rgba(201,162,39,.5) !important;
}

/* رأس الوحدة */
.tutor-learning-area .tutor-learning-nav-topic { border-color: var(--ev-shell-line) !important; }
.tutor-learning-area .tutor-learning-nav-header {
  padding: 15px 18px !important;
  border-radius: 12px !important;
  margin: 4px 12px !important;
  transition: background .18s ease !important;
}
.tutor-learning-area .tutor-learning-nav-header:hover { background: rgba(255,255,255,.06) !important; }
.tutor-learning-area .tutor-learning-nav-header-title,
.tutor-learning-area .tutor-learning-nav-header-title * {
  color: #fff !important;
  font-family: var(--ev-font) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}
.tutor-learning-area .tutor-learning-nav-header-summary,
.tutor-learning-area .tutor-learning-nav-header-summary * {
  color: var(--ev-shell-muted) !important;
  font-size: 12px !important;
}
.tutor-learning-area .tutor-learning-nav-header-arrow,
.tutor-learning-area .tutor-learning-nav-header-arrow svg { color: var(--ev-gold-2) !important; }
.tutor-learning-area .tutor-learning-nav-topic.active > .tutor-learning-nav-header,
.tutor-learning-area .tutor-learning-nav-topic.expanded > .tutor-learning-nav-header {
  background: rgba(201,162,39,.12) !important;
}

/* عناصر الدروس */
.tutor-learning-area .tutor-learning-nav-item {
  position: relative !important;
  padding: 13px 18px !important;
  margin: 4px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
.tutor-learning-area .tutor-learning-nav-item,
.tutor-learning-area .tutor-learning-nav-item div,
.tutor-learning-area .tutor-learning-nav-item span {
  color: #d7e3ee !important;
  font-family: var(--ev-font) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}
.tutor-learning-area .tutor-learning-nav-item .tutor-tiny-2,
.tutor-learning-area .tutor-learning-nav-item .tutor-text-subdued {
  color: var(--ev-shell-muted) !important;
  font-size: 12px !important;
}
.tutor-learning-area .tutor-learning-nav-item svg { color: var(--ev-shell-muted) !important; }
.tutor-learning-area .tutor-learning-nav-item:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--ev-shell-line) !important;
  transform: translateY(-1px) !important;
}
.tutor-learning-area .tutor-learning-nav-item.active {
  background: linear-gradient(180deg, rgba(201,162,39,.20), rgba(201,162,39,.10)) !important;
  border-color: rgba(201,162,39,.45) !important;
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.9) !important;
}
.tutor-learning-area .tutor-learning-nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 14% !important;
  height: 72% !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--ev-gold-2), var(--ev-gold)) !important;
}
.tutor-learning-area .tutor-learning-nav-item.active,
.tutor-learning-area .tutor-learning-nav-item.active div { color: #fff !important; font-weight: 700 !important; }
.tutor-learning-area .tutor-learning-nav-item.active svg { color: var(--ev-gold-2) !important; }

/* ==========================================================================
   7) مسرح الفيديو + كارت المحتوى
   ========================================================================== */
.tutor-learning-area .tutor-lesson-content-tab {
  background: #fff !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(16,24,40,.04),
    0 28px 60px -34px rgba(14,43,71,.35) !important;
}




.tutor-learning-area .tutor-lesson-feature-image { width: 100% !important; display: block !important; }

/* ==========================================================================
   8) شريط التبويبات — وحدة تحكم مجمّعة
   ========================================================================== */
.tutor-learning-area .tutor-tabs-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 14px 20px !important;
  background: linear-gradient(180deg, #f7f9fc, #f1f5f9) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ev-line) !important;
}
.tutor-learning-area .tutor-tabs-tab {
  font-family: var(--ev-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ev-ink-2) !important;
  background: #fff !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  height: 42px !important;
  min-height: 42px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  transition: all .18s ease !important;
}
.tutor-learning-area .tutor-tabs-tab:hover {
  color: var(--ev-brand) !important;
  border-color: #cfe0ec !important;
  background: var(--ev-brand-soft) !important;
  transform: translateY(-1px) !important;
}
.tutor-learning-area .tutor-tabs-tab.tutor-tabs-tab-active,
.tutor-learning-area .tutor-tabs-tab-active {
  color: #fff !important;
  background: linear-gradient(180deg, var(--ev-brand), var(--ev-brand-deep)) !important;
  border-color: var(--ev-brand-deep) !important;
  box-shadow: 0 12px 24px -14px rgba(18,78,120,.75) !important;
}
.tutor-learning-area .tutor-tabs-tab-active svg,
.tutor-learning-area .tutor-tabs-tab-active [class*="tutor-icon"] { color: var(--ev-gold-2) !important; }
/* زر "دوّن ملاحطة" ينزلق للطرف المقابل بلون ذهبي */
.tutor-learning-area .tutor-tabs-nav > *:last-child:not(.tutor-tabs-tab-active) { margin-inline-start: auto !important; }
.tutor-learning-area .tutor-tabs-nav button[class*="note"],
.tutor-learning-area .tutor-tabs-nav .tutor-btn-ghost {
  color: var(--ev-gold) !important;
  border-color: var(--ev-gold-soft) !important;
  background: var(--ev-gold-soft) !important;
}

/* ==========================================================================
   9) متن الدرس — طباعة عربية مريحة
   ========================================================================== */
.tutor-learning-area .tutor-tab-panel { padding: 34px 40px 40px !important; }
.tutor-learning-area .tutor-lesson-wrapper {
  max-width: 78ch !important;
  margin-inline: 0 !important;
  text-align: start !important;
}
.tutor-learning-area .tutor-lesson-wrapper,
.tutor-learning-area .tutor-lesson-wrapper p,
.tutor-learning-area .tutor-lesson-wrapper li {
  font-family: var(--ev-font) !important;
  font-size: 16.5px !important;
  line-height: 1.95 !important;
  color: var(--ev-ink-2) !important;
}
.tutor-learning-area .tutor-lesson-wrapper p { margin: 0 0 16px !important; }
.tutor-learning-area .tutor-lesson-wrapper h1,
.tutor-learning-area .tutor-lesson-wrapper h2,
.tutor-learning-area .tutor-lesson-wrapper h3,
.tutor-learning-area .tutor-lesson-wrapper h4 {
  font-family: var(--ev-font) !important;
  color: var(--ev-shell) !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  margin: 28px 0 12px !important;
}
.tutor-learning-area .tutor-lesson-wrapper h2 { font-size: 22px !important; }
.tutor-learning-area .tutor-lesson-wrapper h3 { font-size: 18.5px !important; }
.tutor-learning-area .tutor-lesson-wrapper h2::before,
.tutor-learning-area .tutor-lesson-wrapper h3::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 9px; height: 9px; border-radius: 50%;
  margin-inline-end: 10px;
  background: var(--ev-gold);
  box-shadow: 0 0 0 4px var(--ev-gold-soft);
}
.tutor-learning-area .tutor-lesson-wrapper blockquote {
  margin: 22px 0 !important;
  padding: 18px 22px !important;
  background: var(--ev-gold-soft) !important;
  border: 0 !important;
  border-inline-start: 4px solid var(--ev-gold) !important;
  border-radius: 14px !important;
  color: #6b5410 !important;
  font-weight: 500 !important;
}
.tutor-learning-area .tutor-lesson-wrapper ul,
.tutor-learning-area .tutor-lesson-wrapper ol { padding-inline-start: 22px !important; margin: 0 0 18px !important; }
.tutor-learning-area .tutor-lesson-wrapper li { margin-bottom: 8px !important; }
.tutor-learning-area .tutor-lesson-wrapper li::marker { color: var(--ev-brand) !important; font-weight: 700 !important; }
.tutor-learning-area .tutor-lesson-wrapper a { color: var(--ev-brand) !important; text-decoration-color: var(--ev-gold) !important; text-underline-offset: 3px !important; }
.tutor-learning-area .tutor-lesson-wrapper img { border-radius: 14px !important; box-shadow: 0 16px 40px -26px rgba(14,43,71,.55) !important; }
.tutor-learning-area .tutor-lesson-wrapper code,
.tutor-learning-area .tutor-lesson-wrapper pre { direction: ltr !important; text-align: left !important; }
.tutor-learning-area .tutor-lesson-wrapper table {
  width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
  border: 1px solid var(--ev-line) !important; border-radius: 14px !important; overflow: hidden !important;
  margin: 22px 0 !important;
}
.tutor-learning-area .tutor-lesson-wrapper th {
  background: var(--ev-brand-soft) !important; color: var(--ev-shell) !important;
  font-weight: 700 !important; padding: 12px 16px !important;
}
.tutor-learning-area .tutor-lesson-wrapper td { padding: 12px 16px !important; border-top: 1px solid var(--ev-line) !important; }

/* ==========================================================================
   10) شريط التنقل وزر الإكمال
   ========================================================================== */
.tutor-learning-area .tutor-learning-area-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
  padding: 16px 20px !important;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 46px -30px rgba(14,43,71,.45) !important;
}
.tutor-learning-area .tutor-learning-area-footer .tutor-btn {
  font-family: var(--ev-font) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  height: 46px !important;
  color: var(--ev-brand) !important;
  background: #fff !important;
  border: 1px solid #d9e4ee !important;
  text-decoration: none !important;
  transition: all .18s ease !important;
}
.tutor-learning-area .tutor-learning-area-footer .tutor-btn:hover {
  background: var(--ev-brand-soft) !important;
  border-color: var(--ev-brand) !important;
  transform: translateY(-1px) !important;
}
.tutor-learning-area .tutor-mark-as-complete-button {
  font-family: var(--ev-font) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  height: 50px !important;
  padding: 0 30px !important;
  border-radius: 14px !important;
  color: #22190a !important;
  background: linear-gradient(180deg, var(--ev-gold-2), var(--ev-gold)) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 16px 32px -16px rgba(201,162,39,.75) !important;
  transition: all .18s ease !important;
}
.tutor-learning-area .tutor-mark-as-complete-button:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-2px) !important;
}
.tutor-learning-area .tutor-mark-as-complete-button.completed {
  color: #fff !important;
  background: linear-gradient(180deg, #2a9273, var(--ev-ok)) !important;
  box-shadow: 0 16px 32px -18px rgba(31,122,92,.7) !important;
}

/* ==========================================================================
   11) التعليقات والملاحطات والمرفقات
   ========================================================================== */
.tutor-learning-area .tutor-lesson-content textarea,
.tutor-learning-area .tutor-lesson-content input[type="text"],
.tutor-learning-area .tutor-lesson-content .tutor-form-control {
  font-family: var(--ev-font) !important;
  border-radius: 14px !important;
  border: 1px solid #dde3ea !important;
  background: #fbfcfe !important;
  padding: 14px 16px !important;
  line-height: 1.9 !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.tutor-learning-area .tutor-lesson-content textarea:focus,
.tutor-learning-area .tutor-lesson-content input[type="text"]:focus,
.tutor-learning-area .tutor-lesson-content .tutor-form-control:focus {
  outline: 0 !important;
  background: #fff !important;
  border-color: var(--ev-brand) !important;
  box-shadow: 0 0 0 4px rgba(18,78,120,.12) !important;
}
.tutor-learning-area [class*="comment-card"] {
  background: #fbfcfe !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
}
.tutor-learning-area [class*="exercise-file"] a,
.tutor-learning-area [class*="attachment"] a {
  background: var(--ev-brand-soft) !important;
  border: 1px solid #d9e4ee !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: var(--ev-brand-deep) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   12) الاختبارات
   ========================================================================== */
.tutor-learning-area [class*="tutor-quiz"] .tutor-btn-primary,
.tutor-learning-area .tutor-btn-primary {
  background: linear-gradient(180deg, var(--ev-brand), var(--ev-brand-deep)) !important;
  border-color: var(--ev-brand-deep) !important;
  border-radius: 12px !important;
  font-family: var(--ev-font) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   13) الشاشات الأصغر
   ========================================================================== */
@media (max-width: 991px) {
  .tutor-learning-area .tutor-learning-area-container { padding: 20px 14px 30px !important; }
  .tutor-learning-area .tutor-tab-panel { padding: 24px 20px 28px !important; }
  .tutor-learning-area .tutor-lesson-content-tab { border-radius: 18px !important; }
  .tutor-learning-area .tutor-learning-header-title,
  .tutor-learning-area .tutor-learning-header-title span { font-size: 15.5px !important; }
}
@media (max-width: 600px) {
  .tutor-learning-area .tutor-tabs-nav { padding: 12px !important; gap: 6px !important; }
  .tutor-learning-area .tutor-tabs-tab { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; }
  .tutor-learning-area .tutor-lesson-wrapper,
  .tutor-learning-area .tutor-lesson-wrapper p,
  .tutor-learning-area .tutor-lesson-wrapper li { font-size: 15.5px !important; }
  .tutor-learning-area .tutor-learning-area-footer { padding: 12px !important; border-radius: 16px !important; }
  .tutor-learning-area .tutor-mark-as-complete-button { width: 100% !important; order: -1 !important; }
}

/* ==========================================================================
   الإصدار 8 — تصحيحات الوضوح + قائمة الموقع الرئيسية
   هذا القسم يأتي أخيرًا فيعلو على ما قبله.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) القائمة الجانبية: بيضاء نقية ونصوص كحلية واضحة (تباين AA)
   -------------------------------------------------------------------------- */
.tutor-learning-area .tutor-learning-sidebar,
.tutor-learning-area .tutor-learning-sidebar > *,
.tutor-learning-area .tutor-learning-sidebar-curriculum {
  background: #fff !important;
  box-shadow: none !important;
}
.tutor-learning-area .tutor-learning-sidebar {
  border-inline-start: 1px solid var(--ev-line) !important;
}

/* كارت التقدم */
.tutor-learning-area .tutor-learning-progress {
  background: var(--ev-brand-soft) !important;
  border: 1px solid #dbe6ef !important;
}
.tutor-learning-area .tutor-learning-progress-text,
.tutor-learning-area .tutor-learning-progress-text * {
  color: var(--ev-shell) !important;
  font-weight: 700 !important;
}
.tutor-learning-area .tutor-learning-progress-text span {
  color: var(--ev-brand) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.tutor-learning-area .tutor-learning-sidebar .tutor-progress-bar {
  background: #e3eaf1 !important;
}
.tutor-learning-area .tutor-learning-sidebar .tutor-progress-bar-fill,
.tutor-learning-area .tutor-learning-sidebar [class*="progress-bar-fill"] {
  background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-2)) !important;
  box-shadow: none !important;
}

/* رأس الوحدة */
.tutor-learning-area .tutor-learning-nav-topic { border-color: var(--ev-line) !important; }
.tutor-learning-area .tutor-learning-nav-header:hover { background: #f4f7fa !important; }
.tutor-learning-area .tutor-learning-nav-topic.active > .tutor-learning-nav-header,
.tutor-learning-area .tutor-learning-nav-topic.expanded > .tutor-learning-nav-header {
  background: var(--ev-brand-soft) !important;
}
.tutor-learning-area .tutor-learning-nav-header-title,
.tutor-learning-area .tutor-learning-nav-header-title * {
  color: var(--ev-shell) !important;
  font-weight: 700 !important;
}
.tutor-learning-area .tutor-learning-nav-header-summary,
.tutor-learning-area .tutor-learning-nav-header-summary * {
  color: var(--ev-muted) !important;
}
.tutor-learning-area .tutor-learning-nav-header-arrow,
.tutor-learning-area .tutor-learning-nav-header-arrow svg {
  color: var(--ev-brand) !important;
}

/* عناصر الدروس */
.tutor-learning-area .tutor-learning-nav-item,
.tutor-learning-area .tutor-learning-nav-item div,
.tutor-learning-area .tutor-learning-nav-item span,
.tutor-learning-area .tutor-learning-nav-item a {
  color: var(--ev-ink) !important;
  font-weight: 600 !important;
}
.tutor-learning-area .tutor-learning-nav-item .tutor-tiny-2,
.tutor-learning-area .tutor-learning-nav-item .tutor-text-subdued {
  color: var(--ev-muted) !important;
  font-weight: 500 !important;
}
.tutor-learning-area .tutor-learning-nav-item svg { color: #93a3b3 !important; }
.tutor-learning-area .tutor-learning-nav-item:hover {
  background: #f4f7fa !important;
  border-color: var(--ev-line) !important;
}
.tutor-learning-area .tutor-learning-nav-item.active {
  background: var(--ev-brand-soft) !important;
  border-color: #cfe0ec !important;
  box-shadow: none !important;
}
.tutor-learning-area .tutor-learning-nav-item.active,
.tutor-learning-area .tutor-learning-nav-item.active div,
.tutor-learning-area .tutor-learning-nav-item.active span {
  color: var(--ev-brand-deep) !important;
  font-weight: 800 !important;
}
.tutor-learning-area .tutor-learning-nav-item.active .tutor-tiny-2 {
  color: #4f6b83 !important;
}
.tutor-learning-area .tutor-learning-nav-item.active svg { color: var(--ev-brand) !important; }

/* --------------------------------------------------------------------------
   2) قائمة الموقع الرئيسية داخل الشريط العلوي
   -------------------------------------------------------------------------- */
.tutor-learning-area .ev-header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-inline-start: 18px !important;
  margin-inline-end: auto !important;
}
.tutor-learning-area .ev-header-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-inline-end: 6px !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  white-space: nowrap !important;
}
.tutor-learning-area .ev-header-brand img {
  height: 34px !important;
  width: auto !important;
  display: block !important;
}
.tutor-learning-area .ev-header-nav ul {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tutor-learning-area .ev-header-nav li { position: relative !important; margin: 0 !important; }
.tutor-learning-area .ev-header-nav a {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  color: #dbe6f1 !important;
  font-family: var(--ev-font) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .18s ease, color .18s ease !important;
}
.tutor-learning-area .ev-header-nav a:hover {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.tutor-learning-area .ev-header-nav .current-menu-item > a,
.tutor-learning-area .ev-header-nav .current_page_item > a {
  color: #fff !important;
  background: rgba(201,162,39,.20) !important;
  box-shadow: inset 0 -2px 0 var(--ev-gold) !important;
}
/* القوائم الفرعية */
.tutor-learning-area .ev-header-nav ul ul {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  inset-inline-start: 0 !important;
  min-width: 220px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 8px !important;
  background: #fff !important;
  border: 1px solid var(--ev-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 50px -24px rgba(14,43,71,.45) !important;
  z-index: 80 !important;
}
.tutor-learning-area .ev-header-nav li:hover > ul { display: flex !important; }
.tutor-learning-area .ev-header-nav ul ul a {
  color: var(--ev-ink) !important;
  height: 40px !important;
  width: 100% !important;
}
.tutor-learning-area .ev-header-nav ul ul a:hover {
  background: var(--ev-brand-soft) !important;
  color: var(--ev-brand-deep) !important;
}

/* زر القائمة للموبايل */
.tutor-learning-area .ev-header-nav-toggle {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin-inline-start: 10px !important;
  margin-inline-end: auto !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--ev-shell-line) !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

@media (max-width: 1100px) {
  .tutor-learning-area .ev-header-nav {
    position: absolute !important;
    top: 100% !important;
    inset-inline: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 10px 14px 14px !important;
    background: var(--ev-shell-2) !important;
    border-top: 1px solid var(--ev-shell-line) !important;
    box-shadow: 0 22px 40px -24px rgba(0,0,0,.7) !important;
  }
  .tutor-learning-area .ev-header-nav.is-open { display: flex !important; }
  .tutor-learning-area .ev-header-nav ul { flex-direction: column !important; align-items: stretch !important; }
  .tutor-learning-area .ev-header-nav a { height: 44px !important; width: 100% !important; }
  .tutor-learning-area .ev-header-nav ul ul {
    display: flex !important; position: static !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important; padding: 0 0 0 14px !important;
  }
  .tutor-learning-area .ev-header-nav ul ul a { color: var(--ev-shell-muted) !important; }
  .tutor-learning-area .ev-header-nav-toggle { display: inline-flex !important; }
  .tutor-learning-area .tutor-learning-header { position: relative !important; }
  .tutor-learning-area .ev-header-brand span { display: none !important; }
}

/* =====================================================================
   الإصدار 9 — لوحة الألوان المستخرجة حرفيًا من لوجو eduvision3
   كحلي #002460 / أزرق #0054c0 / ذهبي #f09c00
   (ملحق في النهاية ليفوز على ما قبله)
   ===================================================================== */
.tutor-learning-area,
.ev-theme-royal .tutor-learning-area,
body .tutor-learning-area {
	--ev-shell: #002454;
	--ev-shell-2: #001736;
	--ev-shell-line: rgba(255, 255, 255, 0.10);
	--ev-shell-text: #e8eefa;
	--ev-shell-muted: #a3b6d2;

	--ev-brand: #003078;
	--ev-brand-deep: #002460;
	--ev-brand-mid: #0054c0;
	--ev-brand-soft: #eef3fc;

	--ev-gold: #f09c00;
	--ev-gold-2: #ffc24d;
	--ev-gold-deep: #d89000;
	--ev-gold-soft: #fff6e6;

	--ev-page: #eef2f8;
	--ev-stage: #001126;
	--ev-ink: #14202f;
	--ev-ink-2: #38485c;
	--ev-muted: #6b7a8f;
	--ev-line: #e3e9f1;
	--ev-ok: #1f7a5c;

	--tutor-brand-600: #0054c0;
	--tutor-brand-700: #003078;
	--tutor-brand-800: #002460;
	--tutor-brand-950: #001736;
	--tutor-brand-300: #cfdff7;
	--tutor-brand-200: #e2ebfb;
	--tutor-brand-100: #eef3fc;
	--tutor-surface-brand-primary: #003078;
	--tutor-surface-brand-primary-2: #0054c0;
	--tutor-text-brand: #003078;
	--tutor-text-brand-hover: #0054c0;
	--tutor-icon-brand: #0054c0;
	--tutor-border-brand: #003078;
}

/* الشريط العلوي: تدرج كحلي اللوجو + شعرة ذهبية */
.tutor-learning-header {
	background: linear-gradient(180deg, #003078 0%, #002454 58%, #001736 100%) !important;
	border-bottom: 0 !important;
}

.tutor-learning-header::after {
	background: linear-gradient(90deg, #f09c00, #ffc24d 45%, rgba(240, 156, 0, 0)) !important;
	height: 3px !important;
}

/* اللوجو في الشريط */
.ev-header-brand img {
	height: 36px !important;
	width: auto !important;
	max-width: 190px !important;
	object-fit: contain !important;
}

.ev-header-brand span {
	color: #fff !important;
	font-weight: 800 !important;
	letter-spacing: 0.2px !important;
}

/* عناصر القائمة */
.ev-header-nav ul li > a {
	color: #d9e4f6 !important;
	font-weight: 600 !important;
}

.ev-header-nav ul li > a:hover {
	background: rgba(255, 255, 255, 0.10) !important;
	color: #fff !important;
}

.ev-header-nav ul li.current-menu-item > a,
.ev-header-nav ul li.current_page_item > a {
	background: rgba(240, 156, 0, 0.20) !important;
	color: #ffd07a !important;
	box-shadow: inset 0 -2px 0 #f09c00 !important;
}

/* الدرس الحالي في القائمة الجانبية — مؤشر ذهبي واضح */
.tutor-learning-nav-item.active {
	background: #eef3fc !important;
	border: 1px solid #cfdff7 !important;
	box-shadow: inset 3px 0 0 #f09c00 !important;
	color: #002460 !important;
}

.tutor-learning-nav-item.active svg,
.tutor-learning-nav-item.active path {
	color: #0054c0 !important;
	fill: currentColor !important;
}

/* شريط التقدم */
.tutor-learning-progress {
	background: #eef3fc !important;
	border: 1px solid #d7e3f7 !important;
}

.tutor-learning-progress-text,
.tutor-learning-progress-text * {
	color: #002460 !important;
}

.tutor-learning-progress-text span:last-child {
	color: #0054c0 !important;
}

.tutor-progress-bar-fill,
.tutor-progress-bar-brand .tutor-progress-bar-fill {
	background: linear-gradient(90deg, #d89000, #f09c00 60%, #ffc24d) !important;
}

/* التبويب النشط */
.tutor-tabs-tab-active {
	background: linear-gradient(180deg, #003078, #002454) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(0, 36, 96, 0.28) !important;
}

.tutor-tabs-tab-active svg,
.tutor-tabs-tab-active path {
	color: #f09c00 !important;
}

/* زر إكمال الدرس — ذهبي اللوجو */
.tutor-mark-as-complete-button:not(.completed) {
	background: linear-gradient(180deg, #f5a516, #d89000) !important;
	color: #14202f !important;
	border: 0 !important;
	box-shadow: 0 8px 20px rgba(216, 144, 0, 0.32) !important;
}

.tutor-mark-as-complete-button:not(.completed):hover {
	background: linear-gradient(180deg, #ffb42e, #e59700) !important;
}



/* أزرار أساسية */
.tutor-learning-area .tutor-btn-primary {
	background: #003078 !important;
	border-color: #003078 !important;
	color: #fff !important;
}

.tutor-learning-area .tutor-btn-primary:hover {
	background: #0054c0 !important;
	border-color: #0054c0 !important;
}

/* روابط داخل المحتوى */
.tutor-lesson-wrapper a {
	color: #0054c0 !important;
	text-decoration-color: rgba(0, 84, 192, 0.35) !important;
}

/* النقطة الذهبية قبل العناوين */
.tutor-lesson-wrapper h2::before,
.tutor-lesson-wrapper h3::before {
	background: #f09c00 !important;
}

/* =====================================================================
   الإصدار 10 — تكبير اللوجو + وضوح النصوص + قائمة أقوى في الشريط
   ملحق في النهاية ليفوز على كل ما قبله
   ===================================================================== */

/* ---------- الشريط العلوي أعلى وأوسع ---------- */
.tutor-learning-header {
	min-height: 78px !important;
}

.tutor-learning-header-inner,
.tutor-learning-header-content {
	min-height: 78px !important;
	gap: 16px !important;
	flex-wrap: nowrap !important;
}

/* عنوان الدرس في الشريط — أبيض واضح */
.tutor-learning-header-title,
.tutor-learning-header-title * {
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	text-shadow: 0 1px 2px rgba(0, 12, 32, 0.35) !important;
}

/* ---------- اللوجو كبير وواضح ---------- */
.ev-header-brand {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-shrink: 0 !important;
	padding: 4px 10px !important;
	border-radius: 12px !important;
	text-decoration: none !important;
	background: rgba(255, 255, 255, 0.94) !important;
	box-shadow: 0 4px 14px rgba(0, 12, 32, 0.28) !important;
}

.ev-header-brand:hover {
	background: #ffffff !important;
}

.ev-header-brand img {
	height: 54px !important;
	max-height: 54px !important;
	width: auto !important;
	max-width: 260px !important;
	object-fit: contain !important;
	display: block !important;
}

/* لو لم يوجد لوجو: اسم الموقع نصيًا بلون الهوية */
.ev-header-brand span {
	color: #002460 !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	letter-spacing: 0.2px !important;
	white-space: nowrap !important;
}

/* ---------- القائمة الرئيسية ---------- */
.ev-header-nav {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-inline-start: 14px !important;
	margin-inline-end: auto !important;
	min-width: 0 !important;
}

.ev-header-nav > ul,
.ev-header-nav ul.ev-header-menu {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ev-header-nav li {
	position: relative !important;
	list-style: none !important;
	margin: 0 !important;
}

.ev-header-nav li > a {
	display: inline-flex !important;
	align-items: center !important;
	height: 44px !important;
	padding: 0 15px !important;
	border-radius: 12px !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	color: #ffffff !important;
	transition: background 0.18s ease, color 0.18s ease !important;
}

.ev-header-nav li > a:hover,
.ev-header-nav li > a:focus {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
}

.ev-header-nav li.current-menu-item > a,
.ev-header-nav li.current_page_item > a,
.ev-header-nav li.current-menu-parent > a {
	background: rgba(240, 156, 0, 0.26) !important;
	color: #ffd782 !important;
	box-shadow: inset 0 -3px 0 #f09c00 !important;
}

/* القوائم الفرعية */
.ev-header-nav li ul {
	display: none !important;
	position: absolute !important;
	top: calc(100% + 6px) !important;
	inset-inline-start: 0 !important;
	min-width: 230px !important;
	padding: 8px !important;
	margin: 0 !important;
	list-style: none !important;
	background: #ffffff !important;
	border: 1px solid #e3e9f1 !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 40px rgba(0, 20, 50, 0.22) !important;
	z-index: 99999 !important;
}

.ev-header-nav li:hover > ul,
.ev-header-nav li:focus-within > ul {
	display: block !important;
}

.ev-header-nav li ul li > a {
	display: flex !important;
	height: auto !important;
	padding: 10px 12px !important;
	border-radius: 10px !important;
	color: #14202f !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	white-space: normal !important;
}

.ev-header-nav li ul li > a:hover {
	background: #eef3fc !important;
	color: #003078 !important;
}

/* زر القائمة للموبايل */
.ev-header-nav-toggle {
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.10) !important;
	color: #ffffff !important;
	font-size: 19px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

/* ---------- وضوح نصوص القائمة الجانبية (تكبير + تداكن) ---------- */
.tutor-learning-sidebar .tutor-learning-nav-item,
.tutor-learning-sidebar .tutor-learning-nav-item * {
	color: #101c2b !important;
}

.tutor-learning-nav-item {
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.75 !important;
}

.tutor-learning-nav-item .tutor-tiny-2,
.tutor-learning-nav-item .tutor-text-subdued,
.tutor-learning-nav-item small {
	color: #55697f !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

.tutor-learning-nav-item.active,
.tutor-learning-nav-item.active * {
	color: #002460 !important;
}

.tutor-learning-nav-item.active .tutor-tiny-2,
.tutor-learning-nav-item.active .tutor-text-subdued,
.tutor-learning-nav-item.active small {
	color: #274a72 !important;
}

.tutor-learning-nav-header-title {
	color: #002460 !important;
	font-size: 15px !important;
	font-weight: 800 !important;
}

.tutor-learning-nav-header-summary {
	color: #55697f !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

.tutor-learning-progress-text,
.tutor-learning-progress-text * {
	font-size: 14px !important;
	font-weight: 800 !important;
}

/* التبويبات أوضح */
.tutor-tabs-tab {
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: #2b3b4d !important;
}

.tutor-tabs-tab-active {
	color: #ffffff !important;
}

/* متن الدرس أكبر قليلاً */
.tutor-lesson-wrapper,
.tutor-lesson-wrapper p,
.tutor-lesson-wrapper li {
	font-size: 16.5px !important;
	line-height: 1.95 !important;
	color: #14202f !important;
}

/* ---------- الشاشات الأصغر ---------- */
@media ( max-width: 1200px ) {
	.ev-header-nav-toggle {
		display: inline-flex !important;
	}

	.tutor-learning-header {
		position: relative !important;
	}

	.ev-header-nav {
		display: none !important;
		position: absolute !important;
		top: 100% !important;
		inset-inline-start: 0 !important;
		inset-inline-end: 0 !important;
		margin: 0 !important;
		padding: 12px 16px 16px !important;
		background: linear-gradient(180deg, #002454, #001736) !important;
		border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
		box-shadow: 0 20px 40px rgba(0, 12, 32, 0.38) !important;
		z-index: 9999 !important;
	}

	.ev-header-nav.is-open {
		display: block !important;
	}

	.ev-header-nav > ul,
	.ev-header-nav ul.ev-header-menu {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 2px !important;
	}

	.ev-header-nav li > a {
		height: 48px !important;
		width: 100% !important;
	}

	.ev-header-nav li ul {
		display: block !important;
		position: static !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 0 0 14px !important;
		min-width: 0 !important;
	}

	.ev-header-nav li ul li > a {
		color: #cfdcee !important;
	}

	.ev-header-brand img {
		height: 44px !important;
		max-height: 44px !important;
		max-width: 190px !important;
	}

	.tutor-learning-header-title {
		font-size: 15px !important;
	}
}

@media ( max-width: 600px ) {
	.ev-header-brand img {
		height: 38px !important;
		max-height: 38px !important;
		max-width: 150px !important;
	}

	.tutor-learning-header-title {
		font-size: 13.5px !important;
	}
}

/* =====================================================================
   الإصدار 11 — تصحيح حاسم لخلفية الشريط العلوي + إخفاء الكتلة الفارغة

   السبب الحقيقي لعدم وضوح النصوص: خلفية بيضاء مفروضة على
   .tutor-learning-header-content (العنصر الداخلي) تغطّي التدرج الكحلي
   الموضوع على .tutor-learning-header فتبدو النصوش البيضاء مختفية.
   الحل: طلاء الطبقات الثلاث معًا.
   ===================================================================== */
body .tutor-learning-area .tutor-learning-header,
body .tutor-learning-area .tutor-learning-header-inner,
body .tutor-learning-area .tutor-learning-header-content,
body.ev-theme-royal .tutor-learning-header,
body.ev-theme-royal .tutor-learning-header-inner,
body.ev-theme-royal .tutor-learning-header-content {
	background: linear-gradient(180deg, #003078 0%, #002454 58%, #001736 100%) !important;
	background-color: #002454 !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* الشعرة الذهبية تبقى على الحاوية الخارجية فقط */
body .tutor-learning-area .tutor-learning-header {
	border-bottom: 3px solid #f09c00 !important;
}

/* كل نص داخل الشريط أبيض بالقوة (ما عدا اللوجو والقوائم الفرعية) */
body .tutor-learning-header-content > *:not(.ev-header-brand):not(.ev-header-nav),
body .tutor-learning-header-title,
body .tutor-learning-header-title *,
body .tutor-learning-header-back button,
body .tutor-learning-header-back a,
body .tutor-learning-header-back svg,
body .tutor-learning-header-toggle-mobile,
body .tutor-learning-header-toggle-mobile svg {
	color: #ffffff !important;
	fill: currentColor !important;
}

body .tutor-learning-header-title,
body .tutor-learning-header-title * {
	font-size: 17px !important;
	font-weight: 800 !important;
	text-shadow: 0 1px 3px rgba(0, 10, 28, 0.5) !important;
}

/* زر الرجوع يأخذ إطارًا ليكون مرئيًا */
body .tutor-learning-header-back .tutor-btn,
body .tutor-learning-header-back button,
body .tutor-learning-header-back a {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 12px !important;
	width: 44px !important;
	height: 44px !important;
}

/* ---------- اللوجو أكبر ---------- */
body .ev-header-brand {
	background: #ffffff !important;
	padding: 5px 12px !important;
	border-radius: 14px !important;
}

body .ev-header-brand img {
	height: 58px !important;
	max-height: 58px !important;
	max-width: 280px !important;
}

/* ---------- عناصر القائمة: رقائق لها خلفيتها الخاصة
   لتبقى مقروءة على أي خلفية (فاتحة أو داكنة) ---------- */
body .ev-header-nav > ul > li > a {
	background: rgba(255, 255, 255, 0.13) !important;
	border: 1px solid rgba(255, 255, 255, 0.20) !important;
	color: #ffffff !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	text-shadow: 0 1px 2px rgba(0, 10, 28, 0.45) !important;
}

body .ev-header-nav > ul > li > a:hover {
	background: rgba(255, 255, 255, 0.26) !important;
	color: #ffffff !important;
}

body .ev-header-nav > ul > li.current-menu-item > a,
body .ev-header-nav > ul > li.current_page_item > a,
body .ev-header-nav > ul > li.current-menu-parent > a {
	background: #f09c00 !important;
	border-color: #f09c00 !important;
	color: #001736 !important;
	font-weight: 800 !important;
	text-shadow: none !important;
	box-shadow: 0 4px 12px rgba(240, 156, 0, 0.35) !important;
}

/* القوائم الفرعية تبقى بيضاء بنص كحلي */
body .ev-header-nav li ul li > a {
	background: transparent !important;
	border: 0 !important;
	color: #14202f !important;
	text-shadow: none !important;
}

body .ev-header-nav li ul li > a:hover {
	background: #eef3fc !important;
	color: #003078 !important;
}

/* =====================================================================
   الكتلة الفارغة أسفل التعليقات
   هي شريط (السابق / إكمال الدرس / التالي). في درس معاينة أو درس
   منفرد، يخفي Tutor الأزرار بـ visibility:hidden ولا يرسم زر الإكمال
   لغير المشتركين — فيبقى الكارت فارغًا. السكربت يضيف ev-is-empty.
   ===================================================================== */
body .tutor-learning-area-footer.ev-is-empty,
body .tutor-learning-area-footer:empty,
body .tutor-tab-panel.ev-is-empty {
	display: none !important;
}

/* لو كان به زر واحد فقط، لا تترك فراغًا زائدًا */
body .tutor-learning-area-footer {
	min-height: 0 !important;
}

/* =====================================================================
   الإصدار 12
   1) إصلاح تداخل القائمة الرئيسية مع عنوان الدرس
      السبب: Tutor يجعل .tutor-learning-header-title في المنتصف بـ position:absolute
      فيطفو فوق العناصر الأخرى. الحل: إرجاعه لتدفق flex عادي
      مع ترتيب واضح وقص بالنقاط عند الضيق.
   2) تكبير اللوجو.
   ===================================================================== */

/* ارتفاع أكبر لاستيعاب اللوجو الجديد */
body .tutor-learning-area .tutor-learning-header,
body .tutor-learning-area .tutor-learning-header-inner,
body .tutor-learning-area .tutor-learning-header-content {
	min-height: 96px !important;
	height: auto !important;
}

/* تخطيط صف واحد منضبط بلا تراكب */
body .tutor-learning-area .tutor-learning-header-content {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 14px !important;
	position: relative !important;
	padding-inline: 18px !important;
	overflow: visible !important;
}

/* الترتيب: اللوجو ← القائمة ← (مسافة) ← عنوان الدرس ← زر الرجوع */
body .tutor-learning-header-content > .ev-header-brand {
	order: 1 !important;
	flex: 0 0 auto !important;
}

body .tutor-learning-header-content > .ev-header-nav {
	order: 2 !important;
	flex: 0 1 auto !important;
	min-width: 0 !important;
	margin-inline: 6px 0 !important;
}

body .tutor-learning-header-content > .tutor-learning-header-title,
body .tutor-learning-header-title {
	order: 3 !important;
	position: static !important;
	transform: none !important;
	inset: auto !important;
	margin-inline-start: auto !important;
	flex: 0 1 auto !important;
	min-width: 0 !important;
	max-width: 34% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-align: end !important;
	font-size: 16px !important;
}

body .tutor-learning-header-title > span {
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}

body .tutor-learning-header-content > .tutor-learning-header-back,
body .tutor-learning-header-back {
	order: 4 !important;
	position: static !important;
	transform: none !important;
	flex: 0 0 auto !important;
}

body .tutor-learning-header-content > .tutor-learning-header-toggle-mobile,
body .tutor-learning-header-toggle-mobile {
	order: 5 !important;
	flex: 0 0 auto !important;
}

/* القائمة لا تتمدد ولا تلتف فوق غيرها */
body .ev-header-nav > ul.ev-header-menu {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body .ev-header-nav > ul > li {
	position: relative !important;
	flex: 0 0 auto !important;
	list-style: none !important;
}

body .ev-header-nav > ul > li > a {
	white-space: nowrap !important;
	height: 44px !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 0 16px !important;
	border-radius: 12px !important;
}

/* ---------- اللوجو أكبر بوضوح ---------- */
body .ev-header-brand {
	display: inline-flex !important;
	align-items: center !important;
	background: #ffffff !important;
	padding: 6px 16px !important;
	border-radius: 16px !important;
	box-shadow: 0 6px 18px rgba(0, 12, 36, 0.28) !important;
	flex: 0 0 auto !important;
}

body .ev-header-brand img {
	height: 76px !important;
	max-height: 76px !important;
	max-width: 360px !important;
	width: auto !important;
	object-fit: contain !important;
	display: block !important;
}

body .ev-header-brand span {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #002460 !important;
}

/* ---------- شاشات أضيق: العنوان يتنازل أولاً لمنع أي تراكب ---------- */
@media (max-width: 1500px) {
	body .tutor-learning-header-title {
		max-width: 24% !important;
		font-size: 15px !important;
	}
	body .ev-header-brand img {
		height: 64px !important;
		max-height: 64px !important;
	}
}

@media (max-width: 1280px) {
	body .tutor-learning-header-title {
		display: none !important;
	}
}

@media (max-width: 1200px) {
	body .tutor-learning-area .tutor-learning-header,
	body .tutor-learning-area .tutor-learning-header-inner,
	body .tutor-learning-area .tutor-learning-header-content {
		min-height: 76px !important;
	}
	body .tutor-learning-header-title {
		display: block !important;
		max-width: 40% !important;
	}
	body .ev-header-brand {
		padding: 5px 12px !important;
	}
	body .ev-header-brand img {
		height: 52px !important;
		max-height: 52px !important;
	}
}

@media (max-width: 600px) {
	body .ev-header-brand img {
		height: 42px !important;
		max-height: 42px !important;
		max-width: 190px !important;
	}
	body .tutor-learning-header-title {
		font-size: 13.5px !important;
		max-width: 42% !important;
	}
}








/* =====================================================================
   ب) تكرار عنوان الدرس
   السبب: القالب يطبع عنوانين (اسم الكورس + اسم الدرس) ويخفي
   أحدهما بـ tutor-hidden / tutor-md-hidden، وقاعدة display:block في الإصدار 12
   ألغت هذا الإخفاء فظهر الاثنان. الحل: إظهار واحد فقط بالترتيب.
   ===================================================================== */
body .tutor-learning-header-title > span {
	display: none !important;
}

body .tutor-learning-header-title > span:first-child {
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}

@media (max-width: 992px) {
	body .tutor-learning-header-title > span:first-child {
		display: none !important;
	}
	body .tutor-learning-header-title > span:last-child {
		display: block !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 100% !important;
	}
}

/* =====================================================================
   ج) عناوين القائمة متقطّعة — منع أي انضغاط أو قطع
   ===================================================================== */
body .tutor-learning-header-content > .ev-header-nav,
body .ev-header-nav {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: max-content !important;
	max-width: none !important;
	overflow: visible !important;
}

body .ev-header-nav > ul.ev-header-menu {
	min-width: max-content !important;
	overflow: visible !important;
	flex-wrap: nowrap !important;
}

body .ev-header-nav > ul > li,
body .ev-header-nav > ul > li > a {
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	min-width: max-content !important;
	width: auto !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: nowrap !important;
}

/* العنوان هو وحده من يتنازل عن المساحة */
body .tutor-learning-header-content > .tutor-learning-header-title,
body .tutor-learning-header-title {
	flex: 0 1 auto !important;
	min-width: 0 !important;
	max-width: 26% !important;
}

/* =====================================================================
   د) اللوجو أكبر بوضوح
   ===================================================================== */
body .tutor-learning-area .tutor-learning-header,
body .tutor-learning-area .tutor-learning-header-inner,
body .tutor-learning-area .tutor-learning-header-content {
	min-height: 116px !important;
	max-height: none !important;
	height: auto !important;
}

body .ev-header-brand {
	padding: 7px 18px !important;
	border-radius: 18px !important;
}

body .ev-header-brand img {
	height: 96px !important;
	max-height: 96px !important;
	min-height: 96px !important;
	max-width: 620px !important;
	width: auto !important;
}

@media (max-width: 1500px) {
	body .tutor-learning-area .tutor-learning-header,
	body .tutor-learning-area .tutor-learning-header-inner,
	body .tutor-learning-area .tutor-learning-header-content {
		min-height: 100px !important;
	}
	body .ev-header-brand img {
		height: 80px !important;
		max-height: 80px !important;
		min-height: 80px !important;
		max-width: 460px !important;
	}
}

@media (max-width: 1200px) {
	body .tutor-learning-area .tutor-learning-header,
	body .tutor-learning-area .tutor-learning-header-inner,
	body .tutor-learning-area .tutor-learning-header-content {
		min-height: 80px !important;
	}
	body .ev-header-brand img {
		height: 58px !important;
		max-height: 58px !important;
		min-height: 58px !important;
		max-width: 320px !important;
	}
}

@media (max-width: 600px) {
	body .tutor-learning-area .tutor-learning-header,
	body .tutor-learning-area .tutor-learning-header-inner,
	body .tutor-learning-area .tutor-learning-header-content {
		min-height: 66px !important;
	}
	body .ev-header-brand img {
		height: 44px !important;
		max-height: 44px !important;
		min-height: 44px !important;
		max-width: 200px !important;
	}
}

/* =====================================================================
   الإصدار 14
   1) مشغل الفيديو: لا توجد أي قاعدة تمسه مطلقًا في هذا الملف.
      فقط إطار خارجي للحاوية (حدود منحنية وظل) بلا أبعاد
      ولا overflow ولا أي تدخل في طبقات Plyr أو الـ iframe.
   2) اللوجو: مقاس متوازن وأنيق بدل المبالغة.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) الفيديو — لمسة خارجية فقط (لا أبعاد، لا مواقع، لا قطع)
   المحدد المستخدم هو أب المشغل وليس المشغل نفسه.
   --------------------------------------------------------------------- */
body .tutor-learning-area .tutor-lesson-content > *:first-child {
	border-radius: 20px !important;
}

/* ---------------------------------------------------------------------
   2) اللوجو — مقاس متوازن
   لوجوك أبعاده 725x121 (عريض ومنخفض)، والمقاس المريح له في
   شريط علوي هو حدود 48–56px ارتفاعًا (وليس 96px).
   --------------------------------------------------------------------- */
body .tutor-learning-area .tutor-learning-header,
body .tutor-learning-area .tutor-learning-header-inner,
body .tutor-learning-area .tutor-learning-header-content {
	min-height: 76px !important;
	max-height: none !important;
	height: auto !important;
}

body .ev-header-brand {
	display: inline-flex !important;
	align-items: center !important;
	background: #ffffff !important;
	padding: 5px 12px !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 14px rgba(0, 12, 36, 0.22) !important;
	flex: 0 0 auto !important;
	line-height: 0 !important;
}

body .ev-header-brand img {
	height: 52px !important;
	min-height: 52px !important;
	max-height: 52px !important;
	max-width: 340px !important;
	width: auto !important;
	object-fit: contain !important;
	display: block !important;
}

/* وضع "لوجو فاتح بلا كارت" — يُفعّل بإضافة كلاس ev-brand-bare
   (انظر README: سطر واحد في functions.php) */
body .ev-header-brand.ev-brand-bare {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

body .ev-header-brand.ev-brand-bare img {
	height: 58px !important;
	min-height: 58px !important;
	max-height: 58px !important;
	max-width: 380px !important;
}

@media (max-width: 1200px) {
	body .tutor-learning-area .tutor-learning-header,
	body .tutor-learning-area .tutor-learning-header-inner,
	body .tutor-learning-area .tutor-learning-header-content {
		min-height: 68px !important;
	}
	body .ev-header-brand img,
	body .ev-header-brand.ev-brand-bare img {
		height: 44px !important;
		min-height: 44px !important;
		max-height: 44px !important;
		max-width: 260px !important;
	}
}

@media (max-width: 600px) {
	body .tutor-learning-area .tutor-learning-header,
	body .tutor-learning-area .tutor-learning-header-inner,
	body .tutor-learning-area .tutor-learning-header-content {
		min-height: 62px !important;
	}
	body .ev-header-brand img,
	body .ev-header-brand.ev-brand-bare img {
		height: 36px !important;
		min-height: 36px !important;
		max-height: 36px !important;
		max-width: 180px !important;
	}
}