/* ============================================================
   Course Detail — Pro Edition
   Layers a premium design on top of the existing course_detail.html
   markup WITHOUT touching any JS hooks or ids. Scoped under
   .ym-theme body wrapper so it only affects this page.
   Matches dashboard_pro / catalog_pro / textbook_list_pro language.
   ============================================================ */

body:has(.ym-theme) {
  background:linear-gradient(180deg,#f1f5f9 0%,#f8fafc 440px) !important;
}

.ym-theme {
  --cd-primary:#6366f1;
  --cd-primary-dark:#4f46e5;
  --cd-success:#10b981;
  --cd-danger:#ef4444;
  --cd-warning:#f59e0b;
  --cd-info:#0ea5e9;
  --cd-bg:#f8fafc;
  --cd-card:#ffffff;
  --cd-border:#e5e7eb;
  --cd-text:#1f2937;
  --cd-muted:#6b7280;
  --cd-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --cd-shadow-md:0 4px 12px rgba(0,0,0,.06);
  --cd-shadow-lg:0 12px 32px rgba(0,0,0,.10);
  --cd-radius:14px;
  --cd-radius-lg:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--cd-text);
}

/* ── Lesson title → gradient hero ───────────────────────── */
.ym-theme main > h2.h5,
.ym-theme main > h2 {
  background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 50%,#8b5cf6 100%) !important;
  color:#fff !important;
  border-radius:var(--cd-radius-lg) !important;
  padding:1.1rem 1.4rem !important;
  box-shadow:var(--cd-shadow-lg) !important;
  font-size:1.2rem !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  line-height:1.25 !important;
  margin:0 0 1rem 0 !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  gap:.6rem !important;
}
.ym-theme main > h2.h5::before,
.ym-theme main > h2::before {
  content:"";
  position:absolute;
  top:-50%; right:-15%;
  width:50%; height:200%;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%);
  pointer-events:none;
}
.ym-theme main > h2 i.bi {
  background:rgba(255,255,255,.22) !important;
  backdrop-filter:blur(6px);
  width:38px; height:38px;
  border-radius:10px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.1rem !important;
  border:2px solid rgba(255,255,255,.28);
  margin-right:.2rem !important;
  flex-shrink:0;
  position:relative;
}

/* ── TTS controls row (language/voice/engine/Speak/Stop/…) ── */
.ym-theme #tts-controls,
.ym-theme .tts-controls-row,
.ym-theme [id^="tts-controls"] {
  background:#fff;
  border:1px solid var(--cd-border);
  border-radius:var(--cd-radius);
  box-shadow:var(--cd-shadow-sm);
  padding:.8rem 1rem;
  margin-bottom:1rem;
}

/* Top dropdowns (Language, Voice, TTS Engine) */
.ym-theme select[id*="language"],
.ym-theme select[id*="gender"],
.ym-theme select[id*="engine"],
.ym-theme select.form-select,
.ym-theme select.form-control {
  padding:.5rem .75rem !important;
  border:1px solid var(--cd-border) !important;
  border-radius:9px !important;
  font-size:.85rem !important;
  background:#f9fafb !important;
  color:var(--cd-text) !important;
  font-weight:500 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right .65rem center !important;
  padding-right:1.8rem !important;
  transition:all .15s !important;
}
.ym-theme select:focus,
.ym-theme select.form-select:focus,
.ym-theme select.form-control:focus {
  outline:none !important;
  background-color:#fff !important;
  border-color:var(--cd-primary) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
}

/* Translate button */
.ym-theme #ym-translate-btn,
.ym-theme button[id*="translate"] {
  background:#ecfeff !important;
  color:#0369a1 !important;
  border:1px solid #a5f3fc !important;
  border-radius:9px !important;
  padding:.45rem .9rem !important;
  font-size:.82rem !important;
  font-weight:700 !important;
  transition:all .18s !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
}
.ym-theme #ym-translate-btn:hover {
  background:#0ea5e9 !important;
  color:#fff !important;
  border-color:#0ea5e9 !important;
  transform:translateY(-1px) !important;
}

/* Progress Check — Page N — Quiz button */
.ym-theme #progress-check-btn,
.ym-theme button[id*="progress-check"] {
  background:linear-gradient(135deg,#10b981,#059669) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  padding:.55rem 1rem !important;
  font-size:.85rem !important;
  font-weight:700 !important;
  box-shadow:0 4px 12px rgba(16,185,129,.3) !important;
  transition:all .18s !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;
}
.ym-theme #progress-check-btn:hover {
  transform:translateY(-1px) !important;
  box-shadow:0 6px 16px rgba(16,185,129,.42) !important;
  color:#fff !important;
}

/* ── Page number pagination strip ───────────────────────── */
.ym-theme #tts-pagination,
.ym-theme #tts-pagination-bottom {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.35rem !important;
  margin:1rem 0 !important;
  padding:.65rem !important;
  background:#fff;
  border:1px solid var(--cd-border);
  border-radius:12px;
  box-shadow:var(--cd-shadow-sm);
}
.ym-theme .page-num-btn,
.ym-theme #tts-prev-page,
.ym-theme #tts-next-page,
.ym-theme #tts-prev-page-bottom,
.ym-theme #tts-next-page-bottom {
  min-width:38px !important;
  height:38px !important;
  padding:0 .65rem !important;
  background:#f9fafb !important;
  color:var(--cd-text) !important;
  border:1px solid var(--cd-border) !important;
  border-radius:9px !important;
  font-size:.85rem !important;
  font-weight:700 !important;
  transition:all .15s !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.ym-theme .page-num-btn:hover,
.ym-theme #tts-prev-page:hover,
.ym-theme #tts-next-page:hover,
.ym-theme #tts-prev-page-bottom:hover,
.ym-theme #tts-next-page-bottom:hover {
  background:#eef2ff !important;
  border-color:#c7d2fe !important;
  color:var(--cd-primary-dark) !important;
  transform:translateY(-1px) !important;
}
.ym-theme .page-num-btn.active,
.ym-theme .page-num-btn[aria-current="page"],
.ym-theme .page-num-btn.current {
  background:linear-gradient(135deg,var(--cd-primary),#8b5cf6) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 3px 10px rgba(99,102,241,.32) !important;
}

/* ── Speak / Stop / Cache / Play Classroom / Clear TTS Cache row ── */
.ym-theme #tts-speak,
.ym-theme #ym-speak-btn,
.ym-theme button[id*="speak"]:not([id*="classroom"]):not([id*="group"]) {
  background:linear-gradient(135deg,var(--cd-primary),#8b5cf6) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:.6rem 1.2rem !important;
  font-weight:700 !important;
  box-shadow:0 4px 12px rgba(99,102,241,.3) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;
  transition:all .18s !important;
}
.ym-theme #tts-speak:hover,
.ym-theme #ym-speak-btn:hover {
  transform:translateY(-1px) !important;
  box-shadow:0 6px 16px rgba(99,102,241,.42) !important;
  color:#fff !important;
}

.ym-theme #tts-stop,
.ym-theme button[id*="stop"] {
  background:#fef2f2 !important;
  color:#b91c1c !important;
  border:1px solid #fecaca !important;
  border-radius:999px !important;
  padding:.55rem 1.1rem !important;
  font-weight:700 !important;
  transition:all .18s !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
}
.ym-theme #tts-stop:hover {
  background:var(--cd-danger) !important;
  color:#fff !important;
  border-color:var(--cd-danger) !important;
  transform:translateY(-1px) !important;
}

.ym-theme #tts-cache,
.ym-theme #tts-cache-btn {
  background:#f9fafb !important;
  color:var(--cd-muted) !important;
  border:1px solid var(--cd-border) !important;
  border-radius:999px !important;
  padding:.55rem 1.1rem !important;
  font-weight:700 !important;
}
.ym-theme #tts-cache:hover {
  background:#374151 !important;
  color:#fff !important;
  border-color:#374151 !important;
}

/* Play Classroom — purple gradient */
.ym-theme #ym-play-classroom,
.ym-theme button[id*="play-classroom"],
.ym-theme a[id*="play-classroom"],
.ym-theme .play-classroom-btn {
  background:linear-gradient(135deg,#8b5cf6,#ec4899) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:.6rem 1.2rem !important;
  font-weight:700 !important;
  box-shadow:0 4px 12px rgba(139,92,246,.32) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;
  transition:all .18s !important;
  text-decoration:none !important;
}
.ym-theme #ym-play-classroom:hover,
.ym-theme .play-classroom-btn:hover {
  transform:translateY(-1px) !important;
  box-shadow:0 6px 18px rgba(139,92,246,.45) !important;
  color:#fff !important;
}

/* Clear TTS Cache — subtle red text link */
.ym-theme #clear-tts-cache,
.ym-theme #tts-clear-cache,
.ym-theme a[id*="clear-tts"],
.ym-theme button[id*="clear-tts"] {
  color:#b91c1c !important;
  background:transparent !important;
  border:none !important;
  font-size:.83rem !important;
  font-weight:700 !important;
  padding:.45rem .75rem !important;
  text-decoration:none !important;
  transition:all .18s !important;
}
.ym-theme #clear-tts-cache:hover,
.ym-theme a[id*="clear-tts"]:hover,
.ym-theme button[id*="clear-tts"]:hover {
  color:var(--cd-danger) !important;
  text-decoration:underline !important;
}

/* ── Rich content section (Teacher Explains banner + chips + paragraphs) ── */
.ym-theme .course-content,
.ym-theme #course-page-html,
.ym-theme [id*="course-content"] {
  background:var(--cd-card);
  border:1px solid var(--cd-border);
  border-radius:var(--cd-radius-lg);
  box-shadow:var(--cd-shadow-md);
  padding:1.25rem 1.5rem 1.5rem;
  margin-bottom:1rem;
}

/* Teacher Explains banner — yellow/orange gradient card */
.ym-theme #course-page-html h2:first-of-type,
.ym-theme .course-content h2:first-of-type,
.ym-theme [data-role="teacher-explains"] {
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 60%,#fbbf24 100%) !important;
  color:#78350f !important;
  border:1px solid #fcd34d !important;
  border-radius:var(--cd-radius) !important;
  padding:1rem 1.25rem !important;
  margin:0 0 1.25rem 0 !important;
  font-size:1.15rem !important;
  font-weight:800 !important;
  display:flex !important;
  align-items:center !important;
  gap:.65rem !important;
  box-shadow:0 4px 14px rgba(251,191,36,.25) !important;
}

/* "Pin" topic chips (Stretcher Patient Carriage Protocol etc.) */
.ym-theme #course-page-html h3,
.ym-theme .course-content h3 {
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
  background:linear-gradient(135deg,#eef2ff,#f5f3ff) !important;
  color:#4338ca !important;
  border:1px solid #c7d2fe !important;
  border-radius:999px !important;
  padding:.5rem 1rem !important;
  margin:.6rem .35rem .35rem 0 !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  box-shadow:0 2px 8px rgba(99,102,241,.12) !important;
  transition:all .2s !important;
}
.ym-theme #course-page-html h3:hover,
.ym-theme .course-content h3:hover {
  background:linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color:#fff !important;
  border-color:transparent !important;
  transform:translateY(-1px) !important;
  box-shadow:0 4px 12px rgba(99,102,241,.3) !important;
}

/* Paragraphs */
.ym-theme #course-page-html p,
.ym-theme .course-content p {
  font-size:1rem !important;
  line-height:1.72 !important;
  color:var(--cd-text) !important;
  margin-bottom:1.1rem !important;
}

/* Page image (large blown-up) */
.ym-theme #course-page-html img,
.ym-theme .course-content img {
  border-radius:var(--cd-radius) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
  max-width:100% !important;
  height:auto !important;
  margin:1rem 0 !important;
}

/* ── Bottom actions toolbar (View Textbook / Cover + TOC / Content PDF / Study Materials) ── */
.ym-theme #ym-pdf-cover-btn,
.ym-theme #ym-pdf-content-btn,
.ym-theme .actions-toolbar a.btn,
.ym-theme #actions-toolbar .btn {
  border-radius:10px !important;
  font-weight:700 !important;
  padding:.6rem 1rem !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  transition:all .18s !important;
  border-width:1px !important;
}
.ym-theme .actions-toolbar a.btn:hover,
.ym-theme #actions-toolbar .btn:hover,
.ym-theme #ym-pdf-cover-btn:hover,
.ym-theme #ym-pdf-content-btn:hover {
  transform:translateY(-1px) !important;
}
.ym-theme .actions-toolbar .btn-outline-success,
.ym-theme #actions-toolbar .btn-outline-success {
  background:#ecfdf5 !important;
  color:#047857 !important;
  border-color:#a7f3d0 !important;
}
.ym-theme .actions-toolbar .btn-outline-success:hover,
.ym-theme #actions-toolbar .btn-outline-success:hover {
  background:var(--cd-success) !important;
  color:#fff !important;
  border-color:var(--cd-success) !important;
}
.ym-theme .actions-toolbar .btn-outline-secondary,
.ym-theme #actions-toolbar .btn-outline-secondary {
  background:#eef2ff !important;
  color:#4338ca !important;
  border-color:#c7d2fe !important;
}
.ym-theme .actions-toolbar .btn-outline-secondary:hover,
.ym-theme #actions-toolbar .btn-outline-secondary:hover {
  background:var(--cd-primary) !important;
  color:#fff !important;
  border-color:var(--cd-primary) !important;
}

/* ── Sidebar (Advertisement / Ask Teacher / related) ───── */
.ym-theme aside.col-lg-4 > .card,
.ym-theme .col-lg-4 > .card {
  background:var(--cd-card);
  border:1px solid var(--cd-border) !important;
  border-radius:var(--cd-radius-lg) !important;
  box-shadow:var(--cd-shadow-md) !important;
  overflow:hidden;
  margin-bottom:1rem;
}

/* ── Fade-in animation for main content blocks ─────────── */
@keyframes cd-fadeup {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.ym-theme main > h2,
.ym-theme main > div,
.ym-theme main > [id*="course-content"],
.ym-theme main > .course-content,
.ym-theme #tts-controls {
  animation:cd-fadeup .45s cubic-bezier(.22,1,.36,1) both;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width:575px){
  .ym-theme main > h2.h5,
  .ym-theme main > h2 {
    font-size:1rem !important;
    padding:.85rem 1rem !important;
  }
  .ym-theme main > h2 i.bi {
    width:32px; height:32px; font-size:.95rem !important;
  }
  .ym-theme #course-page-html,
  .ym-theme .course-content {
    padding:1rem 1.1rem !important;
  }
  .ym-theme #course-page-html h2:first-of-type {
    font-size:.98rem !important;
    padding:.75rem .9rem !important;
  }
  .ym-theme #course-page-html h3 {
    font-size:.8rem !important;
    padding:.35rem .75rem !important;
  }
  .ym-theme #course-page-html p {
    font-size:.92rem !important;
  }
}