/* ============================================================
   MYLS Learning Hub - LearnPress learning-page skin v2
   Targets Thim Elementor Kit course-item template (post 23839).
   Safe to remove as one block.
   ============================================================ */

/* ---------- base ---------- */
body.course-item-popup #popup-course,
#popup-course{background:#F2F4F7;font-family:Inter,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}

/* ---------- progress header ---------- */
.thim-ekit-single-course-item__progress{font-family:Inter,sans-serif}
.thim-ekit-single-course-item__progress .results{font-size:13px;font-weight:600;color:#101828}
#popup-course .learn-press-progress,
.thim-ekit-single-course-item__progress .learn-press-progress{height:6px;border-radius:999px;background:#EAECF0;overflow:hidden}
#popup-course .learn-press-progress .learn-press-progress__active,
#popup-course .learn-press-progress .progress-active,
.thim-ekit-single-course-item__progress .learn-press-progress__active,
.thim-ekit-single-course-item__progress .progress-active{background:#039855;border-radius:999px}

/* ---------- sidebar: Thim curriculum widget ---------- */
.thim-ekit-single-course__curriculum{width:100%;background:#FFFFFF;border-right:1px solid #EAECF0}
.thim-ekit-single-course__curriculum .course-count-section{display:none}

/* section header band */
.thim-ekit-single-course__curriculum li.course-section{border-bottom:1px solid #EAECF0}
.thim-ekit-single-course__curriculum .course-section-header{padding:12px 16px;background:#F9FAFB;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}
.thim-ekit-single-course__curriculum .course-section__title{font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#101828}
.thim-ekit-single-course__curriculum .course-section__description{font-family:Inter,sans-serif;font-size:11px;font-weight:500;color:#98A2B3;margin-top:2px;text-transform:none;letter-spacing:0}
.thim-ekit-single-course__curriculum .section-count-items{font-family:Inter,sans-serif;font-size:11px;font-weight:700;color:#1F4AC2;background:#EEF4FF;border-radius:999px;padding:2px 8px;margin-left:auto}
.thim-ekit-single-course__curriculum .section-toggle i{color:#667085;font-size:12px}

/* items */
.thim-ekit-single-course__curriculum li.course-item{border-bottom:1px solid #F2F4F7;transition:background .15s}
.thim-ekit-single-course__curriculum li.course-item:hover{background:#F9FAFB}
.thim-ekit-single-course__curriculum .course-item__link{padding:12px 16px;display:flex;align-items:flex-start;gap:8px}
.thim-ekit-single-course__curriculum .course-item__info .course-item-ico{display:none}
.thim-ekit-single-course__curriculum .course-item__content{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1}
.thim-ekit-single-course__curriculum .course-item-title{font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:#344054;line-height:20px}
.thim-ekit-single-course__curriculum .course-item__right{margin-left:0}
.thim-ekit-single-course__curriculum .course-item__right .duration{background:none;padding:0;font-family:Inter,sans-serif;font-size:12px;font-weight:500;color:#98A2B3}
.thim-ekit-single-course__curriculum li.course-item:has(.course-item-ico.lp_lesson) .course-item__right .duration::before{content:"Reading \2022  "}
.thim-ekit-single-course__curriculum li.course-item:has(.course-item-ico.lp_quiz) .course-item__right .duration::before{content:"Quiz \2022  "}
.thim-ekit-single-course__curriculum li.course-item.current{background:#EEF4FF;box-shadow:inset 3px 0 0 #001B73}
.thim-ekit-single-course__curriculum li.course-item.current .course-item-title,
.thim-ekit-single-course__curriculum li.course-item.current .course-item-order{color:#001B73}
.thim-ekit-single-course__curriculum .course-item__status .course-item-ico{display:inline-block;color:#D0D5DD}
.thim-ekit-single-course__curriculum li.course-item.status-completed .course-item__status .course-item-ico,
.thim-ekit-single-course__curriculum .course-item__status .course-item-ico.completed{color:#039855}

/* ---------- content column ---------- */
#popup-course #popup-content{background:transparent}
#popup-course .lp-content-area{max-width:1020px;margin:0 auto;padding:24px 24px 40px}
#popup-course .content-item-wrap{background:#FFFFFF;border:1px solid #EAECF0;border-radius:12px;padding:36px 44px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
@media (max-width:880px){#popup-course .content-item-wrap{padding:24px 20px}}
#popup-course #popup-content .course-item-title{display:none}
#popup-course .course-item-nav{max-width:1020px;margin:12px auto 0}
#popup-course #sidebar-toggle{background:#001B73}
/* ---------- v2.1 specificity fixes (beats theme/LP important rules) ---------- */
.thim-ekit-single-course__curriculum .course-section-header{background:#F9FAFB!important}
.thim-ekit-single-course__curriculum .course-section-header .course-section__title{font-size:12px!important;font-weight:700!important;letter-spacing:.6px!important;text-transform:uppercase!important;color:#101828!important}
.thim-ekit-single-course__curriculum .course-section-header .course-section__description{display:block!important;font-size:11px!important;font-weight:500!important;color:#98A2B3!important;text-transform:none!important;letter-spacing:0!important;margin-top:2px!important}
.thim-ekit-single-course__curriculum li.course-count-section{display:none!important}
.thim-ekit-single-course__curriculum .course-item__content .course-item-title{font-size:14px!important;font-weight:600!important;color:#344054!important}
.thim-ekit-single-course__curriculum li.course-item.current .course-item__content .course-item-title{color:#001B73!important}
/* ---------- item numbering via CSS counters (design "1.1 -") ---------- */
.thim-ekit-single-course__curriculum .lp-course-curriculum{counter-reset:mylsSec}
.thim-ekit-single-course__curriculum li.course-section{counter-increment:mylsSec;counter-reset:mylsItem}
.thim-ekit-single-course__curriculum li.course-item{counter-increment:mylsItem}
.thim-ekit-single-course__curriculum li.course-count-section{counter-increment:none}
.thim-ekit-single-course__curriculum .course-item__content .course-item-title::before{content:counter(mylsSec) "." counter(mylsItem) " \2014  ";font-weight:600}
/* quizzes stay unnumbered; lessons count contiguously */
.thim-ekit-single-course__curriculum li.course-item:has(.course-item-ico.lp_quiz){counter-increment:none}
.thim-ekit-single-course__curriculum li.course-item:has(.course-item-ico.lp_quiz) .course-item__content .course-item-title::before{content:none}
/* ---------- v2.2: layout + status ring + typography ---------- */
/* 1. size the Elementor sidebar column itself (kills the 130px dead gap) */
#popup-course .elementor-element-158f062,
#popup-course .elementor-element-158f062 .elementor-widget-container{width:100%!important}
/* 2. compact section band: hide long description in the sidebar */
.thim-ekit-single-course__curriculum .course-section-header .course-section__description{display:none!important}
.thim-ekit-single-course__curriculum .course-section-header{padding:14px 18px}
/* 3. status ring moves LEFT; green check when completed */
.thim-ekit-single-course__curriculum .course-item__link{align-items:flex-start;padding:14px 18px;gap:10px}
.thim-ekit-single-course__curriculum .course-item__status{order:-1;margin-top:3px}
.thim-ekit-single-course__curriculum .course-item__status .course-item-ico{display:inline-flex!important;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid #D0D5DD;border-radius:50%;font-size:0;color:transparent;background:#FFFFFF;box-sizing:border-box}
.thim-ekit-single-course__curriculum .course-item__status .course-item-ico[class*="omplete"],
.thim-ekit-single-course__curriculum li.course-item[class*="omplete"] .course-item__status .course-item-ico{border-color:#ABEFC6;background:#ECFDF3;color:#039855;font-size:10px}
/* 4. typography & air */
.thim-ekit-single-course__curriculum .course-item__content .course-item-title{font-size:14px!important;line-height:20px!important}
.thim-ekit-single-course__curriculum .course-item__right .duration{font-size:13px!important}
.thim-ekit-single-course__curriculum .course-item__status .course-item-ico{width:16px!important;height:16px!important;min-width:16px!important;line-height:1!important}

/* ---------- v3: sidebar sizing via the theme's own variable (native collapse restored) ---------- */
.elementor-23839 .elementor-element.elementor-element-6e54afe3 #popup-course.thim-ekit-course-items.thim-ekit-course-items{--thim-width-sidebar-items:318px}

/* v3.1: transition opacity only (flex-basis transition loops in this flex layout) */
#popup-course .ekit-popup-sidebar{transition:opacity .25s ease!important}

/* v3.2: remove doubled vertical padding on curriculum items (link carries its own) */
.elementor-23839 .elementor-element.elementor-element-158f062 .lp-course-curriculum .course-item.course-item{padding:0px 30px 0px 30px}


/* ===================================================================
   MyLS lesson screenshots — sizing. Added 2026-08-09.
   Screenshots are 2x captures: some are wide (2560x1600), some narrow
   and very tall (480x1194). One rule handles both — fill the column,
   but never grow taller than the reader's screen. !important because
   Elementor writes per-widget width rules that would otherwise win.
   =================================================================== */
.elementor-widget-image img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:76vh !important;
  object-fit:contain !important;
  margin-inline:auto !important;
}

/* ===================================================================
   MyLS lesson media — corrective pass, 2026-08-09.
   Supersedes the earlier width:100% rule, which upscaled small captures
   (a 604x276 panel stretched to 1062px) and did nothing about an unsized
   inline <svg>, which expands to the full column width.
   =================================================================== */
.elementor-widget-image img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:76vh !important;
  object-fit:contain !important;
  margin-inline:auto !important;
}

/* Safety net: inline SVG in lesson copy has no sizing context here. */
.elementor-widget-text-editor svg,
.elementor-widget-heading svg{
  width:1em !important;
  height:1em !important;
  vertical-align:-0.125em;
}