/* ==========================================================================
   RECENTRE — LearnPress Curriculum UI Restyle
   Child-theme CSS-only override. No templates or logic changed.

   Targets both rendering paths:
     Path A (template):  .course-curriculum  → .section  → .section-content
     Path B (block/REST): .lp-course-curriculum → .course-section → .course-section__items

   Design intent of this revision:
   - Make each week/section read as its own card
   - Remove dark green circular toggle/status backgrounds where possible
   - Improve left/right padding and arrow spacing
   - Keep LearnPress/Eduma behaviour and JS intact
   ========================================================================== */

/* ==========================================================================
   0. DESIGN TOKENS
   Scoped to curriculum only.
   ========================================================================== */

:root {
  /* --- Palette --- */
  --rc-green-900: #2d5e38;
  --rc-green-700: #3d7a4a;
  --rc-green-600: #4a8c5c;
  --rc-green-500: #5a9e6a;
  --rc-green-400: #74b584;
  --rc-green-200: #b8d9c0;
  --rc-green-100: #dceede;
  --rc-green-50: #eef7f0;
  --rc-green-25: #f6fbf7;
  --rc-white: #ffffff;
  --rc-grey-600: #6b7c6f;
  --rc-grey-400: #9aaa9e;
  --rc-grey-300: #b5c3b8;
  --rc-grey-200: #d2ddd4;
  --rc-grey-100: #e8ede9;
  --rc-grey-50: #f4f7f5;
  --rc-text-primary: #1e2d22;
  --rc-text-secondary: #455a4b;
  --rc-text-muted: #8a9d8e;

  /* --- Layout --- */
  --rc-panel-padding: 16px;
  --rc-panel-radius: 18px;
  --rc-card-gap: 18px;
  --rc-card-radius: 16px;
  --rc-header-padding-v: 18px;
  --rc-header-padding-h: 24px;
  --rc-row-min-height: 56px;
  --rc-row-padding-v: 16px;
  --rc-row-padding-h: 24px;
  --rc-row-gap: 14px;

  /* --- Icons --- */
  --rc-status-icon-size: 20px;
  --rc-type-icon-size: 18px;
  --rc-type-icon-box: 30px;
  --rc-toggle-size: 22px;

  /* --- Controls --- */
  --rc-badge-radius: 12px;
  --rc-badge-font: 11px;
  --rc-pill-radius: 20px;

  /* --- Misc --- */
  --rc-shadow-card: 0 2px 10px rgba(45, 94, 56, 0.04);
  --rc-shadow-hover: 0 6px 18px rgba(45, 94, 56, 0.08);
  --rc-transition: 0.18s ease;
  --rc-border-subtle: 1px solid var(--rc-green-100);
  --rc-border-card: 1px solid var(--rc-green-200);
  --rc-font-family:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
     1. OUTER CURRICULUM CONTAINER
     ========================================================================== */

#learn-press-course-curriculum,
.lp-course-curriculum {
  background: transparent;
  border-radius: var(--rc-panel-radius);
  padding: var(--rc-panel-padding);
  border: none;
  font-family: var(--rc-font-family);
}

.curriculum-scrollable {
  max-height: none !important;
  overflow: visible !important;
}

/* ==========================================================================
     2. SECTION LIST
     ========================================================================== */

ul.curriculum-sections,
ul.course-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rc-card-gap);
}

/* ==========================================================================
     3. SECTION CARD
     Each week/section becomes its own clearly separated card.
     ========================================================================== */

li.section,
li.course-section {
  background: var(--rc-white);
  border: 1px solid var(--rc-green-100);
  border-radius: var(--rc-card-radius);
  overflow: hidden;
  box-shadow: var(--rc-shadow-card);
  transition:
    box-shadow var(--rc-transition),
    border-color var(--rc-transition);
}

li.section:hover,
li.course-section:hover {
  box-shadow: var(--rc-shadow-hover);
  border-color: var(--rc-green-200);
}

/* Collapsed / muted section card */
li.section.closed,
li.course-section.lp-collapse {
  background: var(--rc-white);
  border-color: var(--rc-grey-200);
  box-shadow: none;
}

/* ==========================================================================
     4. SECTION HEADER — shared base
     ========================================================================== */

.section-header,
.course-section-header {
  display: flex;
  align-items: center;
  padding: var(--rc-header-padding-v) var(--rc-header-padding-h);
  cursor: pointer;
  background: var(--rc-white);
  border-bottom: 1px solid var(--rc-green-100);
  transition: background var(--rc-transition);
  gap: 14px;
  position: relative;
}

.section-header:hover,
.course-section-header:hover {
  background: var(--rc-green-25);
}

/* Collapsed header */
li.section.closed .section-header,
li.course-section.lp-collapse .course-section-header {
  border-bottom-color: transparent;
  background: var(--rc-white);
}

li.section.closed .section-header:hover,
li.course-section.lp-collapse .course-section-header:hover {
  background: var(--rc-grey-50);
}

/* --- Path A specific --- */
.section-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* --- Path B specific --- */
.course-section-info {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
     4a. SECTION TOGGLE / STATUS INDICATOR
     Remove the heavy filled green circles and use a lighter outlined style.
     ========================================================================== */

.section-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-toggle-size);
  height: var(--rc-toggle-size);
  border-radius: 50%;
  background: transparent;
  color: var(--rc-green-700);
  border: 1px solid var(--rc-green-200);
  font-size: 12px;
  flex-shrink: 0;
  transition: all var(--rc-transition);
  position: relative;
}

/* Chevron icons inside the toggle */
.section-toggle i {
  font-size: 11px;
  line-height: 1;
}

/* Collapsed toggle */
.section-toggle.collapse,
li.section.closed .section-toggle,
li.course-section.lp-collapse .section-toggle {
  background: transparent;
  color: var(--rc-text-muted);
  border-color: var(--rc-grey-200);
}

/* Right-side chevron indicator on the header */
.section-header::after,
.course-section-header::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--rc-grey-400);
  border-bottom: 2px solid var(--rc-grey-400);
  transform: rotate(-135deg);
  flex-shrink: 0;
  transition: transform var(--rc-transition);
  margin-left: 10px;
  margin-right: 2px;
}

li.section.closed .section-header::after,
li.course-section.lp-collapse .course-section-header::after {
  transform: rotate(45deg);
}

/* ==========================================================================
     4b. SECTION TITLE
     ========================================================================== */

h5.section-title,
h3.section-title,
.course-section__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--rc-text-primary);
  margin: 0;
  line-height: 1.35;
}

.section-desc,
.course-section__description {
  font-size: 13px;
  color: var(--rc-text-muted);
  margin: 3px 0 0;
  line-height: 1.4;
  font-weight: 400;
}

/* ==========================================================================
     4c. SECTION COUNT PILL / META
     ========================================================================== */

.section-meta,
.meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta .step,
.section-count-items {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 10px;
  border-radius: var(--rc-pill-radius);
  background: var(--rc-white);
  border: 1px solid var(--rc-green-200);
  color: var(--rc-text-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

/* Progress bar */
.learn-press-progress {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--rc-green-100);
  overflow: hidden;
}

.learn-press-progress__active {
  height: 100%;
  border-radius: 2px;
  background: var(--rc-green-600);
  transition: width 0.4s ease;
}

/* ==========================================================================
     5. ITEM LIST
     ========================================================================== */

ul.section-content,
ul.course-section__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
     6. ITEM ROWS — base layout
     ========================================================================== */

/* Shared item row base */
ul.section-content > li.course-item,
ul.course-section__items > li.course-item {
  position: relative;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #edf3ee;
  transition: background var(--rc-transition);
  background: var(--rc-white);
}

ul.section-content > li.course-item:last-child,
ul.course-section__items > li.course-item:last-child {
  border-bottom: none;
}

ul.section-content > li.course-item:hover,
ul.course-section__items > li.course-item:hover {
  background: var(--rc-green-25);
}

/* Item link — Path A */
ul.section-content > li.course-item a.section-item-link,
ul.section-content > li.course-item a.course-item-title,
ul.section-content > li.course-item a.lesson-title,
ul.section-content > li.course-item a.quiz-title {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  text-decoration: none;
  color: var(--rc-text-primary);
  gap: var(--rc-row-gap);
  min-height: var(--rc-row-min-height);
}

/* Item link — Path B */
a.course-item__link {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  text-decoration: none;
  color: var(--rc-text-primary);
  gap: var(--rc-row-gap);
  min-height: var(--rc-row-min-height);
}

/* ==========================================================================
     7. ITEM TYPE ICON 
     ========================================================================== */

.course-item__info {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Path B: type icon (the first .course-item-ico inside .course-item__info) */
.course-item__info > span.course-item-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-type-icon-box);
  height: var(--rc-type-icon-box);
  border-radius: 8px;
  font-family: "eduma-icon";
  font-size: 14px;
  background: var(--rc-green-50);
  color: var(--rc-green-500);
  border: 1px solid var(--rc-green-100);
  transition: all var(--rc-transition);
}

/* Type-specific icons */
.course-item__info > span.course-item-ico.lp_lesson::before {
  content: "\f518"; /* edu-book-open */
}

.course-item__info > span.course-item-ico.lp_quiz::before {
  content: "\e907"; /* edu-question-square */
}

.course-item__info > span.course-item-ico.lp_h5p::before {
  content: "\e90f"; /* edu-assessments */
}

.course-item__info > span.course-item-ico.lp_assignment::before {
  content: "\e90f"; /* edu-assessments */
}

/* Path A: template-path item icon (meta-left .index) */
.meta-left {
  flex-shrink: 0;
}

.meta-left .index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-type-icon-box);
  height: var(--rc-type-icon-box);
  border-radius: 8px;
  font-family: "eduma-icon";
  font-size: 14px;
  background: var(--rc-green-50);
  color: var(--rc-green-500);
  border: 1px solid var(--rc-green-100);
  overflow: hidden;
  text-indent: -9999px;
}

.meta-left .index::before {
  content: "\f518"; /* edu-book-open */
  text-indent: 0;
  display: block;
}

.meta-left .index .label {
  display: none;
}

/* ==========================================================================
     8. ITEM CONTENT (title and metadata)
     ========================================================================== */

.course-item__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 12px;
}

.course-item__left {
  flex: 1;
  min-width: 0;
}

.course-item-title,
.course-item__content .course-item-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--rc-text-primary);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-item__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.course-item__right .duration,
.course-item__right .question-count {
  font-size: 12px;
  color: var(--rc-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
     9. ITEM STATUS ICON (right side — completion/lock indicator)
     Keep the status mark light and remove heavy filled circles.
     ========================================================================== */

.course-item__status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.course-item__status .course-item-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-status-icon-size);
  height: var(--rc-status-icon-size);
  border-radius: 50%;
  font-size: 11px;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1;
}

/* Completed / passed */
.course-item__status .course-item-ico.passed,
.course-item__status .course-item-ico.passed.completed,
.course-item__status .course-item-ico.completed,
span.course-item-ico.passed.completed {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--rc-green-600);
}

.course-item__status .course-item-ico.passed::before,
.course-item__status .course-item-ico.passed.completed::before {
  content: "✓";
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
}

/* In progress */
.course-item__status .course-item-ico.in_progress {
  width: 18px;
  height: 18px;
  background: transparent !important;
  border-radius: 4px;
  color: var(--rc-green-600);
  border: 1px solid var(--rc-green-200);
}

/* Locked */
.course-item__status .course-item-ico.locked {
  width: 18px;
  height: 18px;
  background: transparent !important;
  border-radius: 4px;
  color: var(--rc-grey-400);
  font-size: 0;
  border: 1px solid var(--rc-grey-200);
}

.course-item__status .course-item-ico.locked::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395A0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' ry='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* Preview */
.course-item__status .course-item-ico.preview {
  background: transparent !important;
  color: var(--rc-green-500);
}

/* Path A: template status icon */
.course-item-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 4px;
}

.course-item-meta .item-meta.course-item-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rc-status-icon-size);
  height: var(--rc-status-icon-size);
  border-radius: 50%;
}

/* ==========================================================================
     10. COMPLETED ITEMS
     ========================================================================== */

li.course-item.status-completed {
  background: transparent;
}

li.course-item.status-completed a {
  color: var(--rc-text-primary);
}

/* Template path: keep completed template-path icon readable but less heavy */
li.course-item.status-completed .meta-left .index {
  background: var(--rc-green-50);
  color: var(--rc-green-600);
  border-color: var(--rc-green-100);
  border-radius: 50%;
}

li.course-item.status-completed .meta-left .index::before {
  content: "✓";
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
}

/* ==========================================================================
     11. CURRENT / STARTED ITEM
     ========================================================================== */

li.course-item.current,
li.course-item.status-started {
  background: var(--rc-green-50);
  border-left: 3px solid var(--rc-green-600);
}

li.course-item.current a,
li.course-item.status-started a {
  color: var(--rc-green-900);
  font-weight: 500;
}

li.course-item.current .course-item-title,
li.course-item.status-started .course-item-title {
  font-weight: 500;
  color: var(--rc-green-900);
}

/* Type icon for current item */
li.course-item.current .meta-left .index,
li.course-item.current .course-item__info > span.course-item-ico,
li.course-item.status-started .meta-left .index,
li.course-item.status-started .course-item__info > span.course-item-ico {
  background: var(--rc-green-600);
  color: var(--rc-white);
  border-color: var(--rc-green-600);
  border-radius: 5px;
}

/* "Current" badge */
li.course-item.current::after,
li.course-item.status-started::after {
  content: "Current";
  position: absolute;
  right: var(--rc-row-padding-h);
  top: 50%;
  transform: translateY(-50%);
  background: var(--rc-green-600);
  color: var(--rc-white);
  font-size: var(--rc-badge-font);
  font-weight: 500;
  padding: 3px 12px;
  border-radius: var(--rc-badge-radius);
  letter-spacing: 0.01em;
  pointer-events: none;
  z-index: 1;
  line-height: 1.4;
}

li.course-item.current a.course-item__link,
li.course-item.status-started a.course-item__link,
li.course-item.current a.section-item-link,
li.course-item.status-started a.section-item-link {
  padding-right: 96px;
}

/* ==========================================================================
     12. LOCKED / UNAVAILABLE ITEMS
     ========================================================================== */

li.course-item.item-locked {
  opacity: 0.65;
}

li.course-item.item-locked a {
  color: var(--rc-text-muted);
  cursor: default;
}

li.course-item.item-locked .meta-left .index,
li.course-item.item-locked .course-item__info > span.course-item-ico {
  background: var(--rc-grey-100);
  color: var(--rc-grey-400);
  border-color: var(--rc-grey-200);
  border-radius: 5px;
}

li.course-item.item-locked .meta-left .index::before {
  content: "\f518";
  font-family: "eduma-icon";
  opacity: 0.5;
}

li.course-item.item-locked .course-item-title {
  color: var(--rc-text-muted);
}

li.course-item.item-locked:hover {
  background: transparent;
}

/* ==========================================================================
     13. COLLAPSED SECTION STATE
     Collapse logic (height/display) is left to existing LearnPress CSS/JS.
     We only restyle the visual appearance.
     ========================================================================== */

li.section.closed .section-header .section-title,
li.section.closed .section-header h3.section-title,
li.course-section.lp-collapse .course-section__title {
  color: var(--rc-text-muted);
  font-weight: 400;
}

li.section.closed .meta .step,
li.course-section.lp-collapse .section-count-items {
  background: var(--rc-grey-50);
  border-color: var(--rc-grey-200);
  color: var(--rc-text-muted);
}

/* ==========================================================================
     14. LOAD-MORE BUTTON
     ========================================================================== */

.section-item__loadmore {
  display: flex;
  justify-content: center;
  padding: 12px var(--rc-row-padding-h);
  border-top: 1px solid var(--rc-grey-100);
}

.section-item__loadmore span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rc-green-600);
  cursor: pointer;
  transition: color var(--rc-transition);
}

.section-item__loadmore span:hover {
  color: var(--rc-green-700);
}

/* ==========================================================================
     15. TOGGLE-ALL BUTTON
     ========================================================================== */

.course-toggle-all-sections {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--rc-white);
  border: 1px solid var(--rc-green-200);
  color: var(--rc-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--rc-transition);
}

.course-toggle-all-sections:hover {
  background: var(--rc-green-50);
  border-color: var(--rc-green-400);
  color: var(--rc-green-700);
}

/* ==========================================================================
     16. RESPONSIVE
     ========================================================================== */

@media (max-width: 768px) {
  :root {
    --rc-panel-padding: 12px;
    --rc-panel-radius: 14px;
    --rc-card-gap: 12px;
    --rc-header-padding-v: 14px;
    --rc-header-padding-h: 18px;
    --rc-row-padding-v: 12px;
    --rc-row-padding-h: 18px;
    --rc-row-gap: 10px;
    --rc-row-min-height: 46px;
    --rc-type-icon-box: 26px;
    --rc-toggle-size: 24px;
  }

  .section-header,
  .course-section-header {
    flex-wrap: wrap;
  }

  .course-item-title,
  .course-item__content .course-item-title {
    white-space: normal;
    font-size: 13px;
  }

  li.course-item.current::after,
  li.course-item.status-started::after {
    position: static;
    transform: none;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 8px;
  }

  li.course-item.current a.course-item__link,
  li.course-item.status-started a.course-item__link,
  li.course-item.current a.section-item-link,
  li.course-item.status-started a.section-item-link {
    padding-right: var(--rc-row-padding-h);
  }

  .course-item__right {
    display: none;
  }

  .meta .step,
  .section-count-items {
    font-size: 11px;
    padding: 1px 8px;
  }

  h5.section-title,
  h3.section-title,
  .course-section__title {
    font-size: 14px;
  }

  .section-header::after,
  .course-section-header::after {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 480px) {
  :root {
    --rc-panel-padding: 8px;
    --rc-row-padding-h: 14px;
    --rc-row-padding-v: 10px;
    --rc-row-gap: 8px;
    --rc-type-icon-box: 24px;
    --rc-status-icon-size: 18px;
  }

  .section-header,
  .course-section-header {
    gap: 8px;
  }

  .section-toggle {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
}

/* ==========================================================================
     16a. PROGRAM AGENDA TAB (single course) — mirror sidebar curriculum look
     Same visual rules as body.course-item-popup #popup-sidebar … for weeks,
     section headers, lesson rows, and current row — without popup layout or
     transparent outer reset (tab keeps global .lp-course-curriculum panel).
     Eduma tab pane: .course-tab-panel-curriculum (see learnpress-v4/.../tabs.php).
     ========================================================================== */

body.single-lp_course .course-tab-panel-curriculum .course-curriculum,
body.single-lp_course .course-tab-panel-curriculum .lp-course-curriculum,
body.single-lp_course .course-tab-panel-curriculum ul.course-sections {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Full width of the tab column: strip curriculum side gutter so banner ::before matches column edges */
body.single-lp_course .course-tab-panel-curriculum .course-curriculum,
body.single-lp_course .course-tab-panel-curriculum .lp-course-curriculum,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Slight breakout past typical inner column padding (Eduma / Bootstrap) */
@media (min-width: 768px) {
  body.single-lp_course .course-tab-panel-curriculum {
    --recentre-agenda-bleed: clamp(0px, 4vw, 28px);
    margin-left: calc(-1 * var(--recentre-agenda-bleed));
    margin-right: calc(-1 * var(--recentre-agenda-bleed));
    width: calc(100% + 2 * var(--recentre-agenda-bleed));
    max-width: none;
    box-sizing: border-box;
  }
}

body.single-lp_course .course-tab-panel-curriculum li.course-section {
  box-shadow: 0 2px 10px rgba(45, 94, 56, 0.04) !important;
  border: 1px solid var(--rc-green-100) !important;
  border-radius: 14px !important;
  background: #fff !important;
  margin-bottom: 14px !important;
  max-width: 100%;
  overflow: hidden !important;
}

body.single-lp_course .course-tab-panel-curriculum .course-section-header {
  padding: 16px 18px !important;
}

body.single-lp_course .course-tab-panel-curriculum .course-item-title,
body.single-lp_course
  .course-tab-panel-curriculum
  .course-item__content
  .course-item-title {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.35 !important;
}

body.single-lp_course .course-tab-panel-curriculum a.course-item__link {
  padding: 16px 18px !important;
}

/* Program Agenda only: remove row divider lines and tighten row spacing */
body.single-lp_course
  .course-tab-panel-curriculum
  ul.course-section__items
  > li.course-item,
body.single-lp_course
  .course-tab-panel-curriculum
  ul.section-content
  > li.course-item {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.single-lp_course .course-tab-panel-curriculum a.course-item__link,
body.single-lp_course .course-tab-panel-curriculum a.section-item-link {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 8px 18px !important;
  min-height: 0 !important;
  align-items: center !important;
}

body.single-lp_course .course-tab-panel-curriculum .course-item-title,
body.single-lp_course
  .course-tab-panel-curriculum
  .course-item__content
  .course-item-title {
  line-height: 1.22 !important;
  margin: 0 !important;
}

body.single-lp_course .course-tab-panel-curriculum .course-item__content,
body.single-lp_course .course-tab-panel-curriculum .course-item__info {
  align-items: center !important;
}

body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.current::after,
body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.status-started::after {
  display: none !important;
}

body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.current
  a.course-item__link,
body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.status-started
  a.course-item__link,
body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.current
  a.section-item-link,
body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.status-started
  a.section-item-link {
  padding-right: var(--rc-row-padding-h) !important;
}

body.single-lp_course .course-tab-panel-curriculum li.course-item.current,
body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.status-started {
  background: var(--rc-green-100, #dceede) !important;
  border-left: 4px solid var(--rc-green-600, #4a8c5c) !important;
}

body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.current
  .course-item-title,
body.single-lp_course
  .course-tab-panel-curriculum
  li.course-item.status-started
  .course-item-title {
  font-weight: 500 !important;
  color: var(--rc-green-900, #2d5e38) !important;
}

/* ==========================================================================
     17. LEARNPRESS COURSE PLAYER (#popup-course)
     body.course-item-popup only. LTR: curriculum sits on the RIGHT on wide
     screens, then switches to off-canvas drawer at max-width 1024px (tablet
     and narrower).

     Multi-course sidebar: _recentre_program_course_ids + body.recentre-player-program-multi.
     ========================================================================== */

body:not(.rtl).course-item-popup {
  --recentre-player-sidebar-w: clamp(280px, 20vw, 360px);
  --recentre-player-drawer-w: min(380px, 88vw);
  --recentre-player-chrome-h: 70px;
}

/* No horizontal bleed from the player or sidebar */
body.course-item-popup #popup-course {
  overflow-x: hidden !important;
  max-width: 100vw;
  box-sizing: border-box;
}

body.course-item-popup #popup-sidebar {
  background: var(--rc-green-25, #f6fbf7) !important;
  overflow-x: hidden !important;
  overflow-y: auto;
  min-width: 0;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transition:
    flex-basis 0.22s ease,
    width 0.22s ease,
    max-width 0.22s ease,
    transform 0.22s ease,
    opacity 0.22s ease;
}

/* Popup sidebar typography: unify to 12px */
body.course-item-popup #popup-sidebar,
body.course-item-popup #popup-sidebar * {
  font-size: 12px !important;
}

body.course-item-popup #popup-sidebar .search-course {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Lesson popup only: hide curriculum search bar */
body.course-item-popup #popup-sidebar form.search-course {
  display: none !important;
}

body.course-item-popup #popup-sidebar .search-course input[name="s"] {
  min-width: 0;
  box-sizing: border-box;
  padding-left: 16px !important;
}

body.course-item-popup #popup-sidebar .course-curriculum,
body.course-item-popup #popup-sidebar .lp-course-curriculum,
body.course-item-popup #popup-sidebar ul.course-sections {
  max-width: 100% !important;
  box-sizing: border-box;
}

body.course-item-popup #popup-sidebar ul.course-sections {
  gap: 8px !important;
}

/* LearnPress sets min-width:100vw on small screens — causes sideways scroll */
body.course-item-popup #popup-content {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  scrollbar-color: #9d9dce rgba(157, 157, 206, 0.16);
  scrollbar-width: thin;
}

body.course-item-popup #popup-content::-webkit-scrollbar {
  width: 10px;
}

body.course-item-popup #popup-content::-webkit-scrollbar-track {
  background: rgba(157, 157, 206, 0.16);
}

body.course-item-popup #popup-content::-webkit-scrollbar-thumb {
  background: #9d9dce;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
}

body.course-item-popup #popup-content::-webkit-scrollbar-thumb:hover {
  background: #8583bf;
}

/* Full-width top bar (Eduma inner was ~792px centred; leaves a “gap” next to controls) */
body.course-item-popup #popup-header .popup-header__inner,
body.course-item-popup
  #popup-header
  .popup-header__inner.recentre-popup-header__inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  min-height: 70px;
  padding-left: 68px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  position: relative;
}

body.course-item-popup #popup-header .recentre-popup-header__controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0;
}

body.course-item-popup #popup-header .thim-course-item-popup-right {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

body.course-item-popup #popup-header #sidebar-toggle.toggle-content-item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  border-radius: 4px;
  background:
    linear-gradient(#fff, #fff) center calc(50% - 7px) / 22px 3px no-repeat,
    linear-gradient(#fff, #fff) center 50% / 22px 3px no-repeat,
    linear-gradient(#fff, #fff) center calc(50% + 7px) / 22px 3px no-repeat !important;
  color: #fff !important;
  position: absolute !important;
  right: 12px !important;
  top: 13px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 20;
  opacity: 1 !important;
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

body.course-item-popup
  #popup-header
  #sidebar-toggle.toggle-content-item::before {
  content: none !important;
  display: none !important;
}

body.course-item-popup
  #popup-header
  #sidebar-toggle.toggle-content-item::after {
  display: none !important;
}

body.course-item-popup
  #popup-header
  #sidebar-toggle.toggle-content-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* Back to course: high contrast on the dark header bar */
body.course-item-popup #popup-header a.back_course {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  color: #fff !important;
  border-radius: 4px;
  text-decoration: none !important;
  box-sizing: border-box;
  border: 0;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

body.course-item-popup #popup-header a.back_course:hover,
body.course-item-popup #popup-header a.back_course:focus {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  outline: none;
}

body.course-item-popup #popup-header a.back_course :is(.edu-times, i) {
  font-size: 1.2rem;
  line-height: 1;
  opacity: 1;
}

/* Close icon: eduma-icon webfont often shows as an empty box on mobile when the font
   stack does not resolve; render a Unicode ✕ with system fonts instead. */
body.course-item-popup.learnpress-v4
  .lp-single-course
  #popup-course
  #popup-header
  .thim-course-item-popup-right
  a.back_course
  .edu-times::before {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  content: "\2715" !important;
  font-style: normal !important;
  font-weight: 600 !important;
  -webkit-font-smoothing: antialiased;
}

/* --- Reset curriculum “panel” styling inside the player sidebar (narrow column) --- */
/*
   * LearnPress default: #popup-sidebar .course-curriculum { position:absolute; top:70px; bottom:0 }
   * is for ONE curriculum filling the sidebar. Multiple program panels require normal flow.
   */
body.course-item-popup #popup-sidebar .lp-course-curriculum {
  padding: 10px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.course-item-popup #popup-sidebar .course-curriculum {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.course-item-popup #popup-sidebar li.course-section {
  box-shadow: 0 2px 10px rgba(45, 94, 56, 0.04) !important;
  border: 1px solid var(--rc-green-100) !important;
  border-radius: 14px !important;
  background: #fff !important;
  margin-bottom: 8px !important;
  max-width: 100%;
  overflow: hidden !important;
}

body.course-item-popup #popup-sidebar .course-section-header {
  padding: 12px !important;
  background: #fff !important;
}

body.course-item-popup #popup-sidebar .course-item-title,
body.course-item-popup #popup-sidebar .course-item__content .course-item-title {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.35 !important;
}

body.course-item-popup #popup-sidebar a.course-item__link {
  padding: 16px 18px !important;
}

/* Sidebar only: remove row divider lines and tighten row spacing */
body.course-item-popup #popup-sidebar ul.course-section__items > li.course-item,
body.course-item-popup #popup-sidebar ul.section-content > li.course-item {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.course-item-popup #popup-sidebar a.course-item__link,
body.course-item-popup #popup-sidebar a.section-item-link {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  min-height: 0 !important;
  align-items: center !important;
}

body.course-item-popup #popup-sidebar .course-item-title,
body.course-item-popup #popup-sidebar .course-item__content .course-item-title {
  line-height: 1.22 !important;
  margin: 0 !important;
}

body.course-item-popup #popup-sidebar .course-item__content,
body.course-item-popup #popup-sidebar .course-item__info {
  align-items: flex-start !important;
}

body.course-item-popup #popup-sidebar li.course-item.current::after,
body.course-item-popup #popup-sidebar li.course-item.status-started::after {
  display: none !important;
}

/* Remove LearnPress default left marker strip on active item (purple) */
body.course-item-popup #popup-sidebar li.course-item.current::before {
  display: none !important;
  content: none !important;
}

body.course-item-popup
  #popup-sidebar
  li.course-item.current
  a.course-item__link,
body.course-item-popup
  #popup-sidebar
  li.course-item.status-started
  a.course-item__link,
body.course-item-popup
  #popup-sidebar
  li.course-item.current
  a.section-item-link,
body.course-item-popup
  #popup-sidebar
  li.course-item.status-started
  a.section-item-link {
  padding-right: var(--rc-row-padding-h) !important;
}

/* Program list: one accordion per course (multi) or plain block (single) */
body.course-item-popup .recentre-player-program-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

body.course-item-popup details.recentre-program-course-panel {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  border: 1px solid var(--rc-green-100, #dceede);
  border-radius: var(--rc-card-radius, 12px);
  background: var(--rc-white, #fff);
  position: relative;
  display: block;
}

body.course-item-popup
  details.recentre-program-course-panel
  summary.recentre-program-course-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--rc-text-primary, #1e2d22);
  background: var(--rc-green-50, #eef7f0);
  border-bottom: 1px solid transparent;
  user-select: none;
}

body.course-item-popup
  details.recentre-program-course-panel:not([open])
  summary.recentre-program-course-summary {
  border-bottom-color: transparent;
}

body.course-item-popup
  details.recentre-program-course-panel[open]
  summary.recentre-program-course-summary {
  border-bottom-color: var(--rc-green-100, #dceede);
}

body.course-item-popup
  details.recentre-program-course-panel
  summary.recentre-program-course-summary::-webkit-details-marker {
  display: none;
}

/* Keep custom multi-course panel toggle aligned with the lighter curriculum style */
body.course-item-popup .recentre-program-course-summary__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rc-green-200, #b8d9c0);
  position: relative;
}

body.course-item-popup
  details.recentre-program-course-panel[open]
  .recentre-program-course-summary__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--rc-green-700, #3d7a4a);
  border-bottom: 2px solid var(--rc-green-700, #3d7a4a);
  transform: translate(-50%, -30%) rotate(225deg);
}

body.course-item-popup
  details.recentre-program-course-panel:not([open])
  .recentre-program-course-summary__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--rc-green-700, #3d7a4a);
  border-bottom: 2px solid var(--rc-green-700, #3d7a4a);
  transform: translate(-50%, -50%) rotate(45deg);
}

body.course-item-popup .recentre-program-course-summary__title {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  font-weight: 700;
  font-size: 10px;
  color: var(--rc-text-primary, #1e2d22);
  font-family: var(--rc-font-family) !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left !important;
}

body.course-item-popup .recentre-program-course-summary__title-main {
  display: block;
  line-height: 1.2;
  font-size: 10px;
  text-align: left !important;
}

body.course-item-popup .recentre-program-course-summary__title-sub {
  display: block;
  line-height: 1.2;
  font-weight: 600;
  font-size: 10px;
  color: #7c8f82;
  text-align: left !important;
}

/* Popup sidebar: keep collapsed week titles darker/readable */
body.course-item-popup
  #popup-sidebar
  li.course-section.lp-collapse
  .course-section__title {
  color: var(--rc-text-secondary, #455a4b) !important;
  font-weight: 600 !important;
}

body.course-item-popup .recentre-program-course-summary__count {
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  color: var(--rc-text-secondary, #455a4b);
  background: var(--rc-white, #fff);
  border: 1px solid var(--rc-green-200, #b8d9c0);
}

/* Active course panel (lesson is from this course) */
body.course-item-popup
  details.recentre-program-course-panel.is-current-course
  summary.recentre-program-course-summary {
  background: var(--rc-green-100, #dceede);
  box-shadow: inset 0 6px 0 var(--rc-green-600, #4a8c5c);
}

/* Popup sidebar: week titles in Inter + active week accent on top (thicker) */
body.course-item-popup #popup-sidebar .course-section__title,
body.course-item-popup #popup-sidebar h3.section-title,
body.course-item-popup #popup-sidebar h5.section-title {
  font-family: var(--rc-font-family) !important;
  font-size: 12px !important;
  text-align: left !important;
}

body.course-item-popup #popup-sidebar .course-item__title,
body.course-item-popup #popup-sidebar .course-item-title,
body.course-item-popup #popup-sidebar .course-item__left {
  text-align: left !important;
}

body.course-item-popup
  #popup-sidebar
  li.course-section:has(li.course-item.current),
body.course-item-popup
  #popup-sidebar
  li.course-section:has(li.course-item.status-started) {
  border-top: 6px solid var(--rc-green-600, #4a8c5c) !important;
}

body.course-item-popup .recentre-program-course-panel__inner {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--lp-bg-color-lesson, #fff);
  position: relative;
  display: block;
}

body.course-item-popup .recentre-player-curriculum-block.is-single-course {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  display: block;
  padding: 0 10px 12px;
  box-sizing: border-box;
}

/* Stronger “you are here” on the active lesson row */
body.course-item-popup #popup-sidebar li.course-item.current,
body.course-item-popup #popup-sidebar li.course-item.status-started {
  background: var(--rc-green-100, #dceede) !important;
  border-left: none !important;
}

body.course-item-popup #popup-sidebar li.course-item.current .course-item-title,
body.course-item-popup
  #popup-sidebar
  li.course-item.status-started
  .course-item-title {
  font-weight: 500 !important;
  color: var(--rc-green-900, #2d5e38) !important;
}

/*
 * Lesson player sidebar: LP uses .course-item-ico.doing::before (\e921) which draws
 * as stacked horizontal bars. Replace “you are here” with a Fi-style loading ring —
 * radial pill segments in dark green (#2d5e38).
 */
body.course-item-popup
  #popup-sidebar
  li.course-item.current:not(.status-completed)
  .course-item__status,
body.course-item-popup
  #popup-sidebar
  li.course-item.status-started:not(.status-completed)
  .course-item__status,
body.course-item-popup
  #popup-sidebar
  .course-item__status:has(.course-item-ico.doing) {
  margin-left: auto !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

body.course-item-popup
  #popup-sidebar
  .course-item__status
  .course-item-ico.doing::before,
body.course-item-popup
  #popup-sidebar
  li.course-item.current:not(.status-completed)
  .course-item__status
  .course-item-ico::before,
body.course-item-popup
  #popup-sidebar
  li.course-item.status-started:not(.status-completed)
  .course-item__status
  .course-item-ico::before {
  content: "" !important;
  font-family:
    system-ui,
    -apple-system,
    sans-serif !important;
  font-size: 0 !important;
  font-weight: normal !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 0 !important;
  color: transparent !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='%232d5e38' transform='translate(11%2C11)'%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(0)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(30)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(60)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(90)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(120)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(150)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(180)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(210)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(240)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(270)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(300)'/%3E%3Crect x='-1' y='-8.05' width='2' height='3.25' rx='1' transform='rotate(330)'/%3E%3C/g%3E%3C/svg%3E")
    center right / contain no-repeat !important;
}

body.course-item-popup.recentre-player-program-multi
  .recentre-program-course-panel__inner
  .lp-course-curriculum__title {
  display: none !important;
}

/* --- Curriculum on the RIGHT on wide screens (LTR) --- */
body:not(.rtl).course-item-popup #popup-course {
  flex-direction: row;
}

body:not(.rtl).course-item-popup #popup-course #popup-content {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

body:not(.rtl).course-item-popup #popup-course #popup-sidebar {
  order: 2;
  flex: 0 0 var(--recentre-player-sidebar-w);
  width: var(--recentre-player-sidebar-w);
  max-width: var(--recentre-player-sidebar-w);
}

body:not(.rtl).lp-sidebar-toggle__close.course-item-popup
  #popup-course
  #popup-sidebar {
  flex-basis: 0;
  width: 0;
  max-width: 0;
}

body:not(.rtl).course-item-popup #popup-course #popup-header,
body:not(.rtl).course-item-popup #popup-course #popup-footer {
  left: 0 !important;
  right: var(--recentre-player-sidebar-w) !important;
}

body:not(.rtl).lp-sidebar-toggle__close.course-item-popup
  #popup-course
  #popup-header,
body:not(.rtl).lp-sidebar-toggle__close.course-item-popup
  #popup-course
  #popup-footer {
  right: 0 !important;
}

@media (max-width: 1024px) {
  body:not(.rtl).course-item-popup #popup-course #popup-content {
    flex: 1 1 100%;
  }

  body:not(.rtl).course-item-popup #popup-course #popup-sidebar {
    position: fixed;
    top: var(--recentre-player-chrome-h);
    right: 0;
    bottom: 16px;
    left: auto;
    z-index: 10020;
    flex: none;
    width: var(--recentre-player-drawer-w);
    max-width: var(--recentre-player-drawer-w);
    border-radius: 20px 0 0 20px;
    box-shadow: -18px 0 38px rgba(0, 0, 0, 0.16);
    opacity: 0;
    transform: translateX(100%);
  }

  body:not(.rtl).course-item-popup
    #popup-sidebar
    .recentre-player-program-list {
    padding: 24px 16px 28px;
  }

  body:not(.rtl).lp-sidebar-toggle__open.course-item-popup
    #popup-course
    #popup-sidebar {
    opacity: 1;
    transform: translateX(0);
  }

  body:not(.rtl).lp-sidebar-toggle__close.course-item-popup
    #popup-course
    #popup-sidebar,
  body:not(.rtl):not(.lp-sidebar-toggle__open).course-item-popup
    #popup-course
    #popup-sidebar {
    flex-basis: auto;
    width: var(--recentre-player-drawer-w);
    max-width: var(--recentre-player-drawer-w);
    opacity: 0;
    transform: translateX(100%);
  }

  body:not(.rtl).course-item-popup #popup-footer {
    z-index: 10000;
  }

  body:not(.rtl).course-item-popup #popup-course #popup-header,
  body:not(.rtl).course-item-popup #popup-course #popup-footer,
  body:not(.rtl).lp-sidebar-toggle__open.course-item-popup
    #popup-course
    #popup-header,
  body:not(.rtl).lp-sidebar-toggle__open.course-item-popup
    #popup-course
    #popup-footer {
    right: 0 !important;
  }
}

/* Lesson popup nav: bold + emphasize Prev/Next text */
body.course-item-popup #popup-footer .course-item-nav {
  color: #000 !important;
}
body.course-item-popup #popup-footer .course-item-nav a {
  color: #000 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Lesson Next and Prev Buttons */
@media (max-width: 1024px) {
  body.course-item-popup #popup-footer .course-item-nav a {
    font-size: 20px !important;
  }
}
@media (max-width: 768px) {
  body.course-item-popup #popup-footer .course-item-nav a {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}
body.course-item-popup #popup-footer .course-item-nav .next,
body.course-item-popup #popup-footer .course-item-nav .prev {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --- Hide duplicate lesson heading in the content pane (lesson player only) --- */
body.course-item-popup.course-item-lp_lesson
  #popup-content
  h1.lesson-title.course-item-title {
  display: none !important;
}

/* ==========================================================================
     18. PROGRAM AGENDA ONLY — week banner, header tint, matched accents
     body.single-lp_course .course-tab-panel-curriculum (not lesson sidebar).
     W1–W4: #FFDCEC, #FBAE68, #9D9DCE, #42B768. Banner art:
     assets/img/program-agenda/week-0N.svg (replace with .jpg/.webp and update url).
     ========================================================================== */

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section {
  display: flex;
  flex-direction: column;
}

/* Static week defaults by list order.
   Note: JS can override these via inline CSS variables when parsing explicit week labels. */
body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(1),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(1) {
  --recentre-week-banner-accent: #ffdcec;
  --recentre-week-header-bg: #ffdcec;
  --recentre-week-banner-image: url("../img/program-agenda/0 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(2),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(2) {
  --recentre-week-banner-accent: #fbae68;
  --recentre-week-header-bg: #fbae68;
  --recentre-week-banner-image: url("../img/program-agenda/1 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(3),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(3) {
  --recentre-week-banner-accent: #9d9dce;
  --recentre-week-header-bg: #9d9dce;
  --recentre-week-banner-image: url("../img/program-agenda/2 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(4),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(4) {
  --recentre-week-banner-accent: #42b768;
  --recentre-week-header-bg: #42b768;
  --recentre-week-banner-image: url("../img/program-agenda/3 Week.jpg");
}

/* Weeks 5+ use neutral card accents; image still varies per week where configured. */
body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(5),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(5) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/4 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(6),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(6) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/5 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(7),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(7) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/6 Week 1.JPG");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(8),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(8) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/7 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(9),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(9) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/8 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(10),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(10) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/9 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(11),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(11) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/10 Week.png");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(12),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(12) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/11 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(13),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(13) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
  --recentre-week-banner-image: url("../img/program-agenda/12 Week.jpg");
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:nth-child(n + 14),
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:nth-child(n + 14) {
  --recentre-week-banner-accent: var(--rc-green-100, #dceede);
  --recentre-week-header-bg: var(--rc-white, #fff);
}

/* Banner strip rendered as a pseudo-element so section content remains normal flow.
   Layer order: photo -> soft highlight. */
body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section::before,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 100%;
  min-height: clamp(190px, 34vw, 320px);
  box-sizing: border-box;
  border-bottom: 4px solid
    var(--recentre-week-banner-accent, var(--rc-green-200));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-color: var(--recentre-week-banner-accent, var(--rc-green-100));
  background-image:
    var(--recentre-week-banner-image, none),
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 42%
    ),
    radial-gradient(
      120% 90% at 18% 28%,
      rgba(255, 255, 255, 0.45) 0%,
      transparent 52%
    ),
    radial-gradient(90% 70% at 88% 72%, rgba(0, 0, 0, 0.06) 0%, transparent 45%);
  background-size: cover, cover, cover, cover;
  background-position:
    var(--recentre-week-banner-position, center), center, center, center;
  /* `--recentre-week-banner-position` is set per week in JS for better subject framing. */
  background-blend-mode: normal, soft-light, normal, normal;
}

body.single-lp_course .course-tab-panel-curriculum li.course-section,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section {
  border-color: color-mix(
    in srgb,
    var(--recentre-week-banner-accent, var(--rc-green-100)) 52%,
    var(--rc-green-200, #b8d9c0)
  ) !important;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section.lp-collapse,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section.closed {
  border-color: var(--rc-grey-200) !important;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .course-section-header,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-header {
  background: var(--recentre-week-header-bg, var(--rc-white, #fff)) !important;
  border-bottom-color: color-mix(
    in srgb,
    var(--recentre-week-banner-accent, var(--rc-green-100)) 35%,
    rgba(255, 255, 255, 0.55)
  ) !important;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .section-count-items,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-count-items,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .meta
  .step,
body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .meta
  .step {
  border-color: color-mix(
    in srgb,
    var(--recentre-week-banner-accent, var(--rc-green-200)) 55%,
    var(--rc-green-200)
  ) !important;
  background: color-mix(
    in srgb,
    var(--recentre-week-banner-accent, var(--rc-green-50)) 22%,
    var(--rc-white, #fff)
  ) !important;
  color: var(--rc-text-secondary, #455a4b) !important;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .section-toggle,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid
    color-mix(
      in srgb,
      var(--recentre-week-banner-accent, var(--rc-green-600)) 45%,
      var(--rc-green-700, #3d7a4a)
    );
  background: color-mix(
    in srgb,
    var(--rc-white, #fff) 88%,
    var(--recentre-week-banner-accent, var(--rc-green-25)) 12%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px rgba(45, 94, 56, 0.08);
  color: color-mix(
    in srgb,
    var(--recentre-week-banner-accent, var(--rc-green-700)) 35%,
    var(--rc-text-primary, #1e2d22)
  );
  transition:
    transform 0.2s ease,
    border-color var(--rc-transition, 0.18s ease),
    box-shadow 0.2s ease,
    background 0.2s ease;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .section-toggle
  i,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-toggle
  i {
  font-size: 12px;
  line-height: 1;
  color: inherit;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .section-toggle
  .lp-icon-angle-down::before,
body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .section-toggle
  .lp-icon-angle-up::before,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-toggle
  .lp-icon-angle-down::before,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-toggle
  .lp-icon-angle-up::before {
  color: inherit;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section:hover
  .section-toggle,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section:hover
  .section-toggle {
  transform: scale(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 3px 10px rgba(45, 94, 56, 0.12);
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section.lp-collapse
  .section-toggle,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section.closed
  .section-toggle {
  background: color-mix(
    in srgb,
    var(--rc-white, #fff) 70%,
    var(--recentre-week-banner-accent, var(--rc-grey-50)) 30%
  );
  border-color: color-mix(
    in srgb,
    var(--recentre-week-banner-accent, var(--rc-grey-200)) 25%,
    var(--rc-grey-200)
  );
  color: var(--rc-text-muted, #8a9d8e);
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .course-section-header::after,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-header::after {
  width: 10px;
  height: 10px;
  margin-left: 12px;
  margin-right: 4px;
  border-width: 0 2.5px 2.5px 0;
  border-style: solid;
  border-color: color-mix(
    in srgb,
    var(--recentre-week-banner-accent, var(--rc-green-700)) 42%,
    var(--rc-text-primary, #1e2d22)
  );
  transform: rotate(-135deg);
  opacity: 0.92;
  transition:
    transform 0.22s ease,
    opacity 0.2s ease,
    border-color var(--rc-transition, 0.18s ease);
  vertical-align: middle;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section.lp-collapse
  .course-section-header::after,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section.closed
  .section-header::after {
  transform: rotate(45deg);
  opacity: 0.75;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .course-section-header:hover::after,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  .section-header:hover::after {
  opacity: 1;
}

body.single-lp_course
  .course-tab-panel-curriculum
  .lp-course-curriculum
  ul.course-sections
  > li.course-section
  .course-section__items,
body.single-lp_course
  .course-tab-panel-curriculum
  #learn-press-course-curriculum
  ul.curriculum-sections
  > li.section
  ul.section-content {
  border-top: 1px solid
    color-mix(
      in srgb,
      var(--recentre-week-banner-accent, var(--rc-green-100)) 28%,
      transparent
    );
}

/* ==========================================================================
   19. LEARNPRESS CTA BUTTONS — match home page button styles
   Applies on single course + lesson popup/direct lesson contexts.
   Targets Start / Continue / Finish / Complete actions without restyling all LP buttons.
   ========================================================================== */
body.single-lp_course
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ),
body.single-lp_lesson
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ),
body.course-item-popup
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid #005b38;
  background: #005b38;
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.16s ease;
}

body.single-lp_course
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ):hover,
body.single-lp_lesson
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ):hover,
body.course-item-popup
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ):hover {
  background: #ffffff;
  color: #005b38;
  border-color: #005b38;
  transform: translateY(-1px);
}

body.single-lp_course
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ):focus-visible,
body.single-lp_lesson
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ):focus-visible,
body.course-item-popup
  :is(
    .lp-button.button-enroll-course,
    .lp-button.course-btn-continue,
    .form-button-finish-course .lp-button,
    .continue-course .lp-button,
    .form-button .course-btn-continue,
    .form-button .lp-btn-finish-course,
    .button-complete-lesson.lp-btn-complete-item,
    .lp-button.start
  ):focus-visible {
  outline: 2px solid color-mix(in srgb, #005b38 72%, white);
  outline-offset: 2px;
}

/* ==========================================================================
  20. CURRICULUM TYPOGRAPHY OVERRIDE (Inter)
  Ensure Program Agenda + popup program sidebar text doesn't inherit Belleza.
  ========================================================================== */
body.single-lp_course
  .course-tab-panel-curriculum
  :is(
    .lp-course-curriculum,
    #learn-press-course-curriculum,
    .course-section-title,
    .section-title,
    .course-item-title
  ),
body.course-item-popup
  :is(
    #popup-sidebar .lp-course-curriculum,
    .recentre-program-course-summary,
    .recentre-program-course-summary__title,
    .recentre-program-course-summary__count,
    #popup-sidebar .course-section-title,
    #popup-sidebar .section-title,
    #popup-sidebar .course-item-title
  ) {
  font-family: var(--rc-font-family) !important;
}