/* =============================================================================
   Single Lesson Page – BEM Stylesheet
   flatsome-child/assets/css/single-lesson.css
   ============================================================================= */

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  --sl-primary:       #0d0d7a;
  --sl-primary-h:     #1a1ab0;
  --sl-accent:        #4f46e5;
  --sl-accent-light:  #e8e8ff;
  --sl-green:         #16a34a;
  --sl-green-bg:      #dcfce7;
  --sl-white:         #ffffff;
  --sl-bg:            #f2f4f8;
  --sl-text:          #1a1a2e;
  --sl-muted:         #64748b;
  --sl-border:        #e2e8f0;
  --sl-sidebar-w:     300px;
  --sl-topbar-h:      56px;
  --sl-r:             10px;
  --sl-r-lg:          16px;
  --sl-shadow-sm:     0 2px 8px rgba(0,0,0,.06);
  --sl-shadow:        0 4px 20px rgba(0,0,0,.09);
  --sl-transition:    0.22s ease;
}

/* ── Hide Flatsome site-header on lesson pages ───────────────────────────────── */
body.single-tutor_lesson .site-header,
body.single-tutor_lesson #top-bar,
body.tutor-lesson .site-header,
body.tutor-lesson #top-bar {
  display: none !important;
}

body.single-tutor_lesson #wrapper,
body.tutor-lesson #wrapper {
  padding-top: 0 !important;
}

body.single-tutor_lesson #main,
body.tutor-lesson #main {
  background: var(--sl-bg);
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Page wrapper ───────────────────────────────────────────────────────────── */
.sl-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--sl-bg);
  font-family: inherit;
  color: var(--sl-text);
}

/* ── Top bar ────────────────────────────────────────────────────────────────── */
.sl-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--sl-topbar-h);
  background: var(--sl-primary);
  color: var(--sl-white);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  flex-shrink: 0;
}

/* Hamburger toggle */
.sl-topbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--sl-white);
  flex-shrink: 0;
}
.sl-topbar__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--sl-transition), opacity var(--sl-transition);
}

/* Course link (back) */
.sl-topbar__course-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  transition: color var(--sl-transition);
}
.sl-topbar__course-link:hover {
  color: #fff !important;
}
.sl-topbar__back-icon { flex-shrink: 0; }
.sl-topbar__course-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-topbar__spacer { flex: 1; }

/* Progress */
.sl-topbar__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sl-topbar__progress-pct {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sl-white);
  min-width: 36px;
  text-align: right;
}
.sl-topbar__progress-track {
  width: 120px;
  height: 6px;
  background: rgba(255,255,255,0.25);
  border-radius: 99px;
  overflow: hidden;
}
.sl-topbar__progress-fill {
  height: 100%;
  background: #7ee8a2;
  border-radius: 99px;
  transition: width 0.6s ease;
}

/* Buttons */
.sl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--sl-r);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--sl-transition), transform var(--sl-transition), box-shadow var(--sl-transition);
  white-space: nowrap;
}
.sl-btn--complete {
  background: rgba(255,255,255,0.15);
  color: var(--sl-white);
  padding: 7px 14px;
  border: 1.5px solid rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.sl-btn--complete:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.7);
}
.sl-btn--primary {
  background: var(--sl-accent);
  color: var(--sl-white);
  padding: 10px 20px;
  border-radius: var(--sl-r-lg);
}
.sl-btn--primary:hover {
  background: var(--sl-primary-h);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79,70,229,.4);
}

/* Completed badge */
.sl-topbar__complete-form { display: contents; }
.sl-topbar__completed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sl-green-bg);
  color: var(--sl-green);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  flex-shrink: 0;
}

/* ── Overlay (mobile) ───────────────────────────────────────────────────────── */
.sl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 150;
  opacity: 0;
  transition: opacity var(--sl-transition);
}
.sl-overlay.is-visible {
  display: block;
  opacity: 1;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.sl-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - var(--sl-topbar-h));
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.sl-sidebar {
  width: var(--sl-sidebar-w);
  flex-shrink: 0;
  background: var(--sl-white);
  border-right: 1px solid var(--sl-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--sl-transition), box-shadow var(--sl-transition);
}

.sl-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sl-border);
  flex-shrink: 0;
}
.sl-sidebar__head-label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-muted);
}
.sl-sidebar__close {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--sl-muted);
  border-radius: 6px;
  transition: background var(--sl-transition), color var(--sl-transition);
}
.sl-sidebar__close:hover { background: var(--sl-accent-light); color: var(--sl-accent); }

.sl-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.sl-sidebar__scroll::-webkit-scrollbar { width: 4px; }
.sl-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.sl-sidebar__scroll::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 99px; }

.sl-sidebar__empty {
  padding: 24px 18px;
  color: var(--sl-muted);
  font-size: 0.875rem;
}

/* ── Topic accordion ────────────────────────────────────────────────────────── */
.sl-topic { border-bottom: 1px solid var(--sl-border); }

.sl-topic__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--sl-transition);
}
.sl-topic__head:hover { background: #f8f9fb; }
.sl-topic--open > .sl-topic__head { background: var(--sl-accent-light); }

.sl-topic__info {
  flex: 1;
  min-width: 0;
}
.sl-topic__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-text);
  line-height: 1.4;
}
.sl-topic__count {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--sl-muted);
  font-weight: 500;
}

.sl-topic__chevron {
  flex-shrink: 0;
  color: var(--sl-muted);
  margin-top: 2px;
  transition: transform var(--sl-transition);
}
.sl-topic--open > .sl-topic__head .sl-topic__chevron { transform: rotate(180deg); }

.sl-hidden { display: none !important; }

/* ── Lesson items ───────────────────────────────────────────────────────────── */
.sl-topic__items { padding: 4px 0; }

.sl-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 18px 9px 28px;
  text-decoration: none !important;
  color: var(--sl-text);
  font-size: 0.8125rem;
  line-height: 1.45;
  transition: background var(--sl-transition), color var(--sl-transition);
  position: relative;
}
.sl-item:hover { background: #f0f4ff; }

.sl-item--current {
  background: var(--sl-accent-light) !important;
  color: var(--sl-accent) !important;
  font-weight: 600;
}
.sl-item--current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sl-accent);
  border-radius: 0 2px 2px 0;
}
.sl-item--done { color: var(--sl-muted); }

.sl-item__icon {
  flex-shrink: 0;
  color: var(--sl-muted);
  margin-top: 1px;
}
.sl-item--current .sl-item__icon { color: var(--sl-accent); }

.sl-item__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sl-item__state {
  flex-shrink: 0;
  margin-top: 1px;
}
.sl-item--done .sl-item__state { color: var(--sl-green); }
.sl-item--locked .sl-item__state { color: var(--sl-muted); }

/* ── Main content ───────────────────────────────────────────────────────────── */
.sl-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  background: var(--sl-bg);
  display: flex;
  flex-direction: column;
}
.sl-main::-webkit-scrollbar { width: 6px; }
.sl-main::-webkit-scrollbar-track { background: transparent; }
.sl-main::-webkit-scrollbar-thumb { background: var(--sl-border); border-radius: 99px; }

/* ── Video wrapper ──────────────────────────────────────────────────────────── */
.sl-video-wrap {
  width: 100%;
  background: #000;
  position: relative;
  flex-shrink: 0;
}
.sl-video-wrap .tutor-video-player-wrapper,
.sl-video-wrap iframe,
.sl-video-wrap video,
.sl-video-wrap .tutor-player {
  display: block;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* ── Lesson body ────────────────────────────────────────────────────────────── */
.sl-lesson-body {
  flex: 1;
  padding: 28px 36px 40px;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
}

.sl-lesson-header { margin-bottom: 20px; }

.sl-lesson-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sl-text);
  line-height: 1.35;
  margin: 0 0 4px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.sl-tabs { margin-bottom: 0; }

.sl-tabs__nav.tutor-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--sl-border);
  margin-bottom: 24px;
  padding: 0;
  list-style: none;
}
.sl-tabs__link.tutor-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  color: var(--sl-muted) !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--sl-transition), border-color var(--sl-transition);
}
.sl-tabs__link.tutor-nav-link:hover {
  color: var(--sl-accent) !important;
}
.sl-tabs__link.tutor-nav-link.is-active {
  color: var(--sl-accent) !important;
  border-bottom-color: var(--sl-accent);
  font-weight: 700;
}

.sl-tabs__content { min-height: 80px; }

/* Override Tutor's tab item styles inside our wrapper */
.sl-tabs__content .tutor-tab-item {
  display: none;
}
.sl-tabs__content .tutor-tab-item.is-active {
  display: block;
}

/* ── Q&A / Comment form within tabs ────────────────────────────────────────── */
.sl-tabs__content .tutor-course-spotlight-wrapper {
  max-width: 100%;
}

/* ── Overview / body content typography ─────────────────────────────────────── */
.sl-tabs__content .tutor-course-lesson-overview-wrap,
.sl-tabs__content .tutor-lesson-overview-wrap {
  padding: 0;
}
.sl-tabs__content .tutor-single-lesson-content-body {
  font-size: 1rem;
  line-height: 1.75;
  color: #334155;
}
.sl-tabs__content .tutor-single-lesson-content-body h2,
.sl-tabs__content .tutor-single-lesson-content-body h3 {
  margin-top: 1.6em;
  margin-bottom: .5em;
  color: var(--sl-text);
}
.sl-tabs__content .tutor-single-lesson-content-body img {
  max-width: 100%;
  border-radius: var(--sl-r);
}
.sl-tabs__content .tutor-single-lesson-content-body a {
  color: var(--sl-accent);
}

/* ── No-access state ────────────────────────────────────────────────────────── */
.sl-no-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 60px 24px;
  text-align: center;
  gap: 16px;
  color: var(--sl-muted);
}
.sl-no-access svg { color: var(--sl-border); }
.sl-no-access h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--sl-text);
  margin: 0;
}
.sl-no-access p { margin: 0; font-size: 0.9375rem; }

/* ── Prev / Next pager ──────────────────────────────────────────────────────── */
.sl-pager {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 24px 36px;
  border-top: 1px solid var(--sl-border);
  background: var(--sl-white);
  flex-shrink: 0;
}
.sl-pager__btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--sl-white);
  border: 1.5px solid var(--sl-border);
  border-radius: var(--sl-r-lg);
  text-decoration: none !important;
  color: var(--sl-text) !important;
  transition: background var(--sl-transition), border-color var(--sl-transition), box-shadow var(--sl-transition), transform var(--sl-transition);
}
.sl-pager__btn:hover:not(.sl-pager__btn--off) {
  background: var(--sl-accent-light);
  border-color: var(--sl-accent);
  transform: translateY(-2px);
  box-shadow: var(--sl-shadow);
}
.sl-pager__btn--next { justify-content: flex-end; text-align: right; }
.sl-pager__btn--off {
  opacity: 0.4;
  pointer-events: none;
}
.sl-pager__btn svg { flex-shrink: 0; color: var(--sl-accent); }
.sl-pager__btn span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sl-pager__btn small {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-muted);
}
.sl-pager__btn strong {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

/* Tablet & below: sidebar becomes a drawer */
@media (max-width: 1024px) {
  :root { --sl-sidebar-w: 280px; }

  .sl-topbar__toggle { display: flex; }
  .sl-sidebar__close { display: flex; }

  .sl-layout { overflow: visible; height: auto; min-height: calc(100vh - var(--sl-topbar-h)); }

  .sl-sidebar {
    position: fixed;
    top: var(--sl-topbar-h);
    left: 0;
    bottom: 0;
    z-index: 160;
    transform: translateX(-100%);
    box-shadow: none;
    height: calc(100vh - var(--sl-topbar-h));
  }
  .sl-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }

  .sl-main { overflow: visible; }

  .sl-lesson-body { padding: 22px 24px 36px; }

  .sl-topbar__progress-track { width: 80px; }
}

/* Mobile */
@media (max-width: 640px) {
  .sl-topbar {
    padding: 0 14px;
    gap: 8px;
  }
  .sl-topbar__course-name { max-width: 120px; }
  .sl-topbar__progress { display: none; }

  .sl-lesson-body { padding: 18px 16px 32px; }
  .sl-lesson-title { font-size: 1.2rem; }

  .sl-pager {
    padding: 16px;
    gap: 8px;
  }
  .sl-pager__btn { padding: 11px 12px; gap: 8px; }
  .sl-pager__btn strong { max-width: 120px; font-size: 0.8125rem; }

  .sl-tabs__link.tutor-nav-link { padding: 8px 12px; font-size: 0.8125rem; }
}