/**
 * AMWAG Educational Platform - Student LMS Deep Experience Continuation
 * Bridges native Frappe Learning pages with the AMWAG Student Shell design system.
 * Scoped safely to #app so it does not affect Desk, Teacher portal, or Corporate sites.
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  /* Harmonized AMWAG Unified Design System Bridge (AMWAG-04.02) */
  --amw-primary: var(--amwag-primary, #105c81);
  --amw-primary-dark: var(--amwag-primary-hover, #0d4a68);
  --amw-primary-hover: var(--amwag-primary-hover, #0c4765);
  --amw-primary-light: var(--amwag-primary-light, #e0f2fe);
  --amw-primary-subtle: var(--amwag-primary-subtle, #f0f9ff);
  --amw-navy: var(--amwag-navy, #102f55);
  --amw-navy2: var(--amwag-navy-soft, #163f70);
  --amw-blue-bg: var(--amwag-primary-subtle, #edf7fe);
  --amw-sky-brand: var(--amwag-primary, #0284c7);
  --amw-text-main: var(--amwag-navy, #0f172a);
  --amw-text-muted: var(--amwag-muted, #64748b);
  --amw-text-light: var(--amwag-subtle, #94a3b8);
  --amw-border: var(--amwag-border-default, #e2e8f0);
  --amw-border-subtle: var(--amwag-border-subtle, #f1f5f9);
  --amw-bg: var(--amwag-bg-canvas, #f8fafc);
  --amw-card-bg: var(--amwag-bg-surface, #ffffff);
  --amw-emerald: var(--amwag-success, #10b981);
  --amw-emerald-bg: var(--amwag-success-light, #ecfdf5);
  --amw-amber: var(--amwag-warning, #f59e0b);
  --amw-amber-bg: var(--amwag-warning-light, #fffbeb);
  --amw-shadow-sm: var(--amwag-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.05));
  --amw-shadow-card: var(--amwag-shadow-md, 0 4px 20px -2px rgba(15, 23, 42, 0.05));
  --amw-shadow-hover: var(--amwag-shadow-lg, 0 10px 25px -4px rgba(15, 23, 42, 0.08));
}

/* ==========================================================================
   1. Typography & Global Body Harmonization
   ========================================================================== */

#app,
#app * {
  font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#app {
  color: var(--amw-text-main);
  background-color: var(--amw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
#app h1, #app h2, #app h3, #app h4, #app h5, #app h6 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  color: var(--amw-navy) !important;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   2. Desktop Layout & Container Centering
   ========================================================================== */

/* Prevent dead space: Center the main content area with comfortable max-width */
@media (min-width: 1024px) {
  #main-content {
    background-color: var(--amw-bg) !important;
  }

  /* Wrap page contents cleanly */
  #main-content > div:not(.player-container):not(.no-bound) {
    max-width: 1240px;
    margin-inline: auto;
    width: 100%;
    padding-inline: 24px;
  }

  /* Course detail view balance */
  .course-overview-container,
  div[class*="CourseOverview"] {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   3. Buttons & CTAs - Replace raw black pills with AMWAG Gradient
   ========================================================================== */

/* Primary Action Buttons (e.g., "تابع التعلم", "بدء الاختبار", "حفظ", "شراء هذا الكورس") */
button.btn-primary,
button[class*="bg-surface-gray-10"],
button[class*="bg-surface-gray-9"],
button[class*="bg-surface-gray-7"],
button[class*="bg-ink-gray-9"],
a[class*="bg-surface-gray-10"],
a[class*="bg-surface-gray-9"],
a[class*="bg-surface-gray-7"],
a[class*="bg-ink-gray-9"],
.course-card-overlay button,
a:has(button[class*="bg-surface-gray-10"]) button,
button:has(span[class*="lucide-book-text"]),
button:has(span[class*="lucide-book-open"]),
button:has(span[class*="lucide-play"]),
button:has(span[class*="lucide-credit-card"]),
.walid-quiz-start-btn {
  background: linear-gradient(135deg, #105c81 0%, #0d4a68 100%) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(16, 92, 129, 0.28) !important;
  font-weight: 600 !important;
  border: none !important;
  min-height: 44px !important;
  padding-inline: 1.25rem !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button.btn-primary:hover,
button[class*="bg-surface-gray-10"]:hover,
button[class*="bg-surface-gray-9"]:hover,
button[class*="bg-surface-gray-7"]:hover,
button[class*="bg-ink-gray-9"]:hover,
a[class*="bg-surface-gray-10"]:hover,
a[class*="bg-surface-gray-9"]:hover,
a[class*="bg-surface-gray-7"]:hover,
a[class*="bg-ink-gray-9"]:hover,
.course-card-overlay button:hover,
.walid-quiz-start-btn:hover {
  background: linear-gradient(135deg, #0c4765 0%, #09374d 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(16, 92, 129, 0.38) !important;
}

button.btn-primary:active,
button[class*="bg-surface-gray-10"]:active,
button[class*="bg-surface-gray-7"]:active {
  transform: translateY(0) !important;
}

/* Secondary & Outline Buttons */
button[class*="border-outline-gray"],
button.btn-secondary {
  border-color: var(--amw-border) !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  color: var(--amw-text-main) !important;
  transition: all 0.15s ease !important;
}

button[class*="border-outline-gray"]:hover {
  background-color: var(--amw-border-subtle) !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   4. Desktop Sidebar Polish
   ========================================================================== */

/* Sidebar container */
div[class*="bg-surface-sidebar"],
aside[class*="AppSidebar"],
nav[class*="AppSidebar"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
}

/* Sidebar navigation links */
nav[class*="AppSidebar"] a,
aside[class*="AppSidebar"] a,
nav[class*="AppSidebar"] button {
  font-family: 'Cairo', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}

nav[class*="AppSidebar"] a:hover,
aside[class*="AppSidebar"] a:hover {
  background-color: #f8fafc !important;
  color: #102f55 !important;
}

/* Active Nav Link in Sidebar - Reference B Polished Pill */
nav a[class*="router-link-active"]:not([href*="/courses/"]):not([href="/courses"]),
nav a.router-link-exact-active,
nav button[aria-current="page"],
[class*="SidebarLink"][class*="active"],
.router-link-active[class*="SidebarLink"] {
  background-color: #f0f9ff !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
  border: 1px solid #bae6fd !important;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.05) !important;
  border-radius: 10px !important;
}

nav a[class*="router-link-active"] svg,
nav a.router-link-exact-active svg,
[class*="SidebarLink"][class*="active"] svg {
  color: #0284c7 !important;
  stroke: #0284c7 !important;
}


/* Suppress distracting SaaS profile completion box */
div:has(> div > span.lucide-user + div:contains("أكمل ملفك الشخصي")),
div[class*="bg-surface-base"]:has(div:contains("أكمل ملفك الشخصي")),
div[class*="bg-surface-base"]:has(div:contains("Complete your profile")) {
  display: none !important;
}

/* ==========================================================================
   5. Course Detail & Outline Accordions
   ========================================================================== */

/* Course Detail Cards & Aside Card */
.course-card-overlay,
aside.sticky > div,
div[class*="CourseCardOverlay"],
div[class*="CourseCreatorCard"] {
  background-color: #ffffff !important;
  border: 1px solid var(--amw-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--amw-shadow-card) !important;
  padding: 1.25rem !important;
}

/* Outline Chapter Accordion Container */
div[class*="CourseOutline"],
.course-outline-box,
section div.border.rounded-md {
  border: 1px solid var(--amw-border) !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  box-shadow: var(--amw-shadow-sm) !important;
  overflow: hidden;
}

/* Chapter header item */
div[class*="chapter-header"],
div[class*="CourseChapter"] {
  border-bottom: 1px solid var(--amw-border-subtle) !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
}

/* Lesson rows */
div[class*="lesson-row"],
a[href*="/learn/"] {
  border-radius: 10px !important;
  transition: background-color 0.15s ease !important;
}

a[href*="/learn/"]:hover {
  background-color: var(--amw-border-subtle) !important;
}

/* Badges */
span[class*="Badge"],
div[class*="Badge"] {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
}

/* ==========================================================================
   6. Mobile Bottom Navigation Bar Harmony
   ========================================================================== */

nav[aria-label="Primary"],
nav[aria-label="الرئيسية"] {
  background-color: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--amw-border) !important;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.04) !important;
  padding-bottom: env(safe-area-inset-bottom, 8px) !important;
}

nav[aria-label="Primary"] button,
nav[aria-label="الرئيسية"] button {
  font-family: 'Cairo', sans-serif !important;
  transition: all 0.2s ease !important;
}

nav[aria-label="Primary"] button[aria-current="page"] span,
nav[aria-label="الرئيسية"] button[aria-current="page"] span {
  color: var(--amw-primary) !important;
  font-weight: 700 !important;
}

nav[aria-label="Primary"] button[aria-current="page"] svg,
nav[aria-label="الرئيسية"] button[aria-current="page"] svg {
  color: var(--amw-primary) !important;
  stroke-width: 2.2 !important;
}

/* Safe margins and non-floating footer on mobile */
@media (max-width: 640px) {
  #scrollContainer,
  .overflow-y-auto:has(footer),
  main.flex-1 {
    padding-bottom: 88px !important;
  }
  
  /* Ensure course list pagination strip never sticks or floats over cards */
  div:has(> .flex-wrap.border-t),
  div:has(> [data-testid="list-footer"]),
  div.sticky.bottom-0 {
    position: static !important;
    bottom: auto !important;
    box-shadow: none !important;
    margin-bottom: 40px !important;
  }

  nav[aria-label="Primary"] button,
  nav[aria-label="الرئيسية"] button {
    min-height: 48px !important;
    min-width: 48px !important;
  }
}

/* ==========================================================================
   7. Lesson Player & Video Experience
   ========================================================================== */

/* Player layout */
.player-container,
div[class*="Lesson"] {
  background-color: var(--amw-bg) !important;
}

/* Breadcrumbs */
header[class*="PageHeader"],
div[class*="breadcrumbs"] {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--amw-border) !important;
}

[dir="rtl"] header[class*="PageHeader"] svg,
[dir="rtl"] div[class*="breadcrumbs"] svg {
  transform: scaleX(-1);
}

/* Lesson TOC Sidebar */
div[class*="LessonSidebar"],
div[class*="toc"],
aside:has(> div:has(.list-none)) {
  background-color: #ffffff !important;
  border-inline-start: 1px solid var(--amw-border) !important;
}

/* Lesson item touch targets & active/completed states */
aside .list-none a,
aside .list-none button,
aside .list-none li > div {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding-block: 0.5rem !important;
  transition: all 0.15s ease-in-out !important;
}

/* Native lesson frame: recovered bounded geometry, shared with Learning patch. */
.amwag-video-frame,
.video-block,
.video-player,
div.plyr,
.lesson-content div:has(> video),
.ProseMirror div:has(> video) {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 70vh !important;
  background-color: #000000 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-block: 1rem !important;
  box-shadow: var(--amw-shadow-card) !important;
}

/* Anti-flash / Solid Veil for initial YouTube player bar & Frame-0 Leak Protection */
.amwag-video-frame,
.video-player,
div.plyr--youtube {
  position: relative;
}

#app .amwag-video-frame:not(:has(.amwag-player-top-veil))::before,
#app .video-player:not(:has(.amwag-player-top-veil))::before,
#app div.plyr--youtube:not(:has(.amwag-player-top-veil))::before,
.amwag-video-frame:not(:has(.amwag-player-top-veil))::before,
.video-player:not(:has(.amwag-player-top-veil))::before,
div.plyr--youtube:not(:has(.amwag-player-top-veil))::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 48px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0) 100%) !important;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0) 100%) !important;
  pointer-events: none !important;
  z-index: 20 !important;
  opacity: 1 !important;
  transition: opacity 0.25s ease, height 0.25s ease;
}

/* While video is actively playing without JS veil, gently soften fallback veil */
#app div.plyr--youtube.plyr--playing:not(:has(.amwag-player-top-veil))::before,
#app .video-player.plyr--playing:not(:has(.amwag-player-top-veil))::before,
#app .amwag-video-frame:has(.plyr--playing):not(:has(.amwag-player-top-veil))::before,
div.plyr--youtube.plyr--playing:not(:has(.amwag-player-top-veil))::before,
.video-player.plyr--playing:not(:has(.amwag-player-top-veil))::before,
.amwag-video-frame:has(.plyr--playing):not(:has(.amwag-player-top-veil))::before {
  height: 36px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 100%) !important;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 100%) !important;
  opacity: 0.9 !important;
}

/* Dedicated DOM Top Veil for YouTube embeds - renders in front of iframe layer */
.amwag-player-top-veil {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 48px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0) 100%) !important;
  pointer-events: none !important;
  z-index: 2147483640 !important;
  opacity: 1 !important;
  transition: opacity 0.25s ease, height 0.25s ease, background 0.25s ease !important;
}

.amwag-player-top-veil.amwag-veil-playing {
  height: 36px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 100%) !important;
  opacity: 0.9 !important;
}

@media (max-width: 640px) {
  #app .amwag-video-frame:not(:has(.amwag-player-top-veil))::before,
  #app .video-player:not(:has(.amwag-player-top-veil))::before,
  #app div.plyr--youtube:not(:has(.amwag-player-top-veil))::before,
  .amwag-video-frame:not(:has(.amwag-player-top-veil))::before,
  .video-player:not(:has(.amwag-player-top-veil))::before,
  div.plyr--youtube:not(:has(.amwag-player-top-veil))::before,
  .amwag-player-top-veil {
    height: 32px !important;
  }

  #app div.plyr--youtube.plyr--playing:not(:has(.amwag-player-top-veil))::before,
  #app .video-player.plyr--playing:not(:has(.amwag-player-top-veil))::before,
  #app .amwag-video-frame:has(.plyr--playing):not(:has(.amwag-player-top-veil))::before,
  div.plyr--youtube.plyr--playing:not(:has(.amwag-player-top-veil))::before,
  .video-player.plyr--playing:not(:has(.amwag-player-top-veil))::before,
  .amwag-video-frame:has(.plyr--playing):not(:has(.amwag-player-top-veil))::before,
  .amwag-player-top-veil.amwag-veil-playing {
    height: 24px !important;
  }
}

.amwag-video-frame video,
.amwag-lesson-video,
.video-block video,
.video-player iframe,
div.plyr iframe,
.lesson-content div:has(> video) > video,
.ProseMirror div:has(> video) > video,
.lesson-content video,
.ProseMirror video {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background-color: #000000 !important;
  display: block !important;
  border: none !important;
}

/* Video container */
div[class*="plyr"],
div.video-block {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: var(--amw-shadow-card) !important;
}

/* Navigation buttons (Next/Prev) touch targets */
div:has(> button[class*="lucide-chevron"]) button,
button:has(> span[class*="lucide-chevron"]) {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* ==========================================================================
   8. Quiz Assessment Surfaces
   ========================================================================== */

div[class*="QuizPage"],
div[class*="quiz-page"] {
  max-width: 900px !important;
  margin-inline: auto !important;
}

/* Quiz instructions & timer card */
.walid-quiz-instructions,
div[class*="QuizPage"] > div,
div[class*="quiz-container"] {
  border-radius: 16px !important;
  box-shadow: var(--amw-shadow-card) !important;
}

/* Question active card */
div[class*="QuizPage"] .border.rounded-md,
div.border:has(div:contains("الدرجات")),
div.border:has(div:contains("Marks")) {
  border: 1px solid var(--amw-border) !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  box-shadow: var(--amw-shadow-card) !important;
  padding: 1.5rem !important;
}

/* Quiz options (radio options) */
div[class*="QuizPage"] div[role="radio"],
div[class*="QuizPage"] label:has(input[type="radio"]),
div[class*="QuizPage"] .group:has(input[type="radio"]) {
  border: 1.5px solid var(--amw-border) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem !important;
  margin-block: 0.5rem !important;
  background-color: #ffffff !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

div[class*="QuizPage"] div[role="radio"]:hover,
div[class*="QuizPage"] label:has(input[type="radio"]):hover,
div[class*="QuizPage"] .group:has(input[type="radio"]):hover {
  border-color: var(--amw-primary) !important;
  background-color: var(--amw-primary-subtle) !important;
}

/* Question check/submit button ("تحقق" / "التالي") */
div[class*="QuizPage"] button:has-text("تحقق"),
div[class*="QuizPage"] button:has-text("تسليم"),
div[class*="QuizPage"] button:has-text("التالي") {
  background: linear-gradient(135deg, #105c81 0%, #0d4a68 100%) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1.75rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(16, 92, 129, 0.25) !important;
}

/* ==========================================================================
   8. Teacher Course Authoring & Settings Harmony
   ========================================================================== */

/* Authoring cards */
#app .bg-surface-base.rounded-xl {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* BooleanSwitch layout & text wrap prevention */
#app .lms-switch,
#app div[class*="BooleanSwitch"] {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  min-height: 44px !important;
}

#app .lms-switch [role="switch"],
#app div[class*="BooleanSwitch"] [role="switch"] {
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}

#app .lms-switch label,
#app div[class*="BooleanSwitch"] label {
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
}

#app .lms-switch p,
#app div[class*="BooleanSwitch"] p {
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin-top: 2px !important;
}

/* Combobox & Popovers */
#app [data-popover-content] {
  font-family: 'Cairo', sans-serif !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
}

#app input[type="text"],
#app input[type="number"],
#app textarea,
#app select {
  font-family: 'Cairo', sans-serif !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   9. RTL Icon Directional Consistency
   ========================================================================== */

[dir="rtl"] #app .lucide-chevron-left,
[dir="rtl"] #app .lucide-chevron-right,
[dir="rtl"] #app .lucide-arrow-left,
[dir="rtl"] #app .lucide-arrow-right {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
   10. AMWAG Student Space Premium Redesign (Identity: الأستاذ وليد أبو الخير)
   ========================================================================== */

/* Page Hero Banner */
.walid-page-hero {
  background: linear-gradient(135deg, #07192f 0%, #0f2d54 50%, #163f70 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 28px 18px 24px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.walid-page-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -40% !important;
  right: -15% !important;
  width: 480px !important;
  height: 480px !important;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.22) 0%, rgba(2, 132, 199, 0) 70%) !important;
  pointer-events: none !important;
}

@media (min-width: 640px) {
  .walid-page-hero {
    padding: 36px 28px 28px !important;
  }
}

@media (min-width: 1024px) {
  .walid-page-hero {
    padding: 44px 36px 36px !important;
  }
}

.walid-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.walid-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(2, 132, 199, 0.2) !important;
  border: 1px solid rgba(186, 230, 253, 0.35) !important;
  color: #bae6fd !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

.walid-hero-sparkle {
  color: #f59e0b !important;
  font-size: 13px !important;
}

.walid-hero-title {
  font-size: 24px !important;
  line-height: 1.3 !important;
  margin: 4px 0 10px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: -0.01em !important;
}

@media (min-width: 640px) {
  .walid-hero-title {
    font-size: 28px !important;
  }
}

@media (min-width: 1024px) {
  .walid-hero-title {
    font-size: 32px !important;
  }
}

.walid-hero-subtitle {
  color: #cbd5e1 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  max-width: 680px !important;
}

.walid-hero-features {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.walid-hero-feature-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

.walid-feature-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
}

/* Floating Filter & Search Panel */
div[data-testid="page-header-block"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 47, 83, 0.06) !important;
  padding: 16px 20px !important;
  margin: 16px 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

@media (min-width: 768px) {
  div[data-testid="page-header-block"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* Filter inputs inside panel (WCAG >= 44px) */
div[data-testid="page-header-block"] input[type="text"] {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  padding-inline: 14px !important;
  transition: all 0.2s ease !important;
}

div[data-testid="page-header-block"] input[type="text"]:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* TabButtons styling */
div[data-testid="page-header-block"] button {
  min-height: 40px !important;
  border-radius: 10px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

div[data-testid="page-header-block"] button[aria-selected="true"] {
  background-color: #0b2545 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.25) !important;
}

/* Course Cards Unification */
.walid-course-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.walid-course-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -4px rgba(11, 37, 69, 0.12), 0 4px 12px -2px rgba(11, 37, 69, 0.06) !important;
}

.walid-course-media {
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

.walid-course-title {
  color: #0b2545 !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
}

.walid-btn-action {
  font-family: 'Cairo', sans-serif !important;
  min-height: 44px !important;
}

/* 3-Column Grid on Desktop, 2 on Tablet, 1 on Mobile */
@media (min-width: 1024px) {
  #main-content div:has(> a > .walid-course-card),
  #main-content div:has(> .walid-course-card) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  #main-content div:has(> a > .walid-course-card),
  #main-content div:has(> .walid-course-card) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 639px) {
  #main-content div:has(> a > .walid-course-card),
  #main-content div:has(> .walid-course-card) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   11. Course Detail & Outline Deep Polish
   ========================================================================== */

/* Syllabus Chapter Accordion */
div[class*="CourseOutline"] .chapter-item,
section div.border.rounded-md .chapter-item {
  border-bottom: 1px solid #f1f5f9;
}

div[class*="CourseOutline"] button[class*="DisclosureButton"],
section div.border.rounded-md button {
  min-height: 48px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  color: #0b2545 !important;
  border-radius: 10px !important;
}

/* Lesson rows inside outline */
div[class*="CourseOutline"] a[href*="/learn/"],
section div.border.rounded-md a[href*="/learn/"] {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  margin-block: 2px !important;
  transition: all 0.15s ease !important;
}

div[class*="CourseOutline"] a[href*="/learn/"]:hover,
section div.border.rounded-md a[href*="/learn/"]:hover {
  background-color: #f0f9ff !important;
  color: #0284c7 !important;
}

/* Aside Sticky Action Card */
aside.sticky > div,
.course-card-overlay {
  border-radius: 20px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Aside Primary Button */
aside.sticky button.btn-primary,
.course-card-overlay button {
  min-height: 48px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
}

/* ==========================================================================
   12. Lesson Viewer Focus Mode & Navigation Polish
   ========================================================================== */

/* Lesson Header & Breadcrumbs */
header[class*="PageHeader"] {
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  background-color: #ffffff !important;
}

/* Lesson Title */
div[class*="Lesson"] h1 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0b2545 !important;
}

@media (min-width: 640px) {
  div[class*="Lesson"] h1 {
    font-size: 26px !important;
  }
}

/* Lesson Prev/Next action buttons (WCAG >= 44px) */
div[class*="Lesson"] button:has-text("Previous"),
div[class*="Lesson"] button:has-text("Next"),
div[class*="Lesson"] button:has-text("السابق"),
div[class*="Lesson"] button:has-text("التالي"),
div[class*="Lesson"] a:has(button) button {
  min-height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: 'Cairo', sans-serif !important;
}

/* Lesson Sidebar Active Item */
aside .list-none a.active,
aside .list-none a[aria-current="page"],
aside .list-none li:has(> a.active) {
  background-color: #f0f9ff !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
  border-inline-start: 4px solid #0284c7 !important;
  border-radius: 8px !important;
}

/* Mobile Bottom Navigation Label Fix (No wrapping on 320px) */
@media (max-width: 360px) {
  nav[aria-label="Primary"] button span,
  nav[aria-label="الرئيسية"] button span {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}