/* ============================================================
   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;
}

/* ===================================================================
   Compact curriculum sidebar  —  added 2026-08-18
   Sizes approved by Tusher: title 14px, meta 12px, row padding 10px,
   icons 16px, section heading untouched.
   "3 Questions" is hidden in the sidebar — the quiz page already states it.
   The sidebar is ~318px wide, so the title keeps the FULL width and the
   meta line sits under it — side by side squeezed the title to 5 lines
   and overlapped the quiz label.
   Safe to remove as one block.
   =================================================================== */
.course-curriculum .course-item .course-item__link{
  padding-top:10px !important;
  padding-bottom:10px !important;
  min-height:0 !important;
}
.course-curriculum .course-item .course-item__content{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:3px !important;
}
.course-curriculum .course-item .course-item__left,
.course-curriculum .course-item .course-item__right{
  width:100% !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}
.course-curriculum .course-item .course-item__right{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:10px !important;
}
.course-curriculum .course-item .course-item-title{
  font-size:14px !important;
  line-height:19px !important;
  font-weight:600 !important;
  margin:0 !important;
}
.course-curriculum .course-item .duration{
  font-size:12px !important;
  line-height:16px !important;
  margin:0 !important;
  padding:0 !important;
}
/* question count removed from the sidebar — shown on the quiz page instead */
.course-curriculum .course-item .question-count{
  display:none !important;
}
.course-curriculum .course-item .course-item__info{
  align-self:flex-start !important;
  margin-top:1px !important;
}
.course-curriculum .course-item .course-item-ico,
.course-curriculum .course-item .course-item__status .course-item-ico{
  width:16px !important;
  height:16px !important;
  font-size:14px !important;
}


/* ===================================================================
   Auth pages (login / register / password reset)  -  2026-08-18
   The register form is the only one the Eduma theme styles, so it
   arrived italic and a different size. Everything below pins it to
   the sign-in page's own values, and lays the fields out in two
   columns. Safe to remove as one block.
   =================================================================== */
.elementor-widget-shortcode .learn-press-form-register, .elementor-widget-shortcode .learn-press-form{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; max-width:none !important; }
.elementor-widget-shortcode .learn-press-form-register > h3{ display:none !important; }
.elementor-widget-shortcode .learn-press-form-register ul.form-fields{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px 18px !important; align-items:start !important; }
.elementor-widget-shortcode .learn-press-form-register ul.form-fields > li{ margin:0 !important; padding:0 !important; min-width:0 !important; }
.elementor-widget-shortcode .learn-press-form-register ul.form-fields > li:empty{ display:none !important; }
.elementor-widget-shortcode .learn-press-form-register label{ display:block !important; font-style:normal !important; font-weight:600 !important; font-size:13px !important; line-height:18px !important; color:#344054 !important; text-transform:none !important; margin:0 0 7px 0 !important; }
.elementor-widget-shortcode .learn-press-form-register input:not([type=checkbox]):not([type=submit]):not([type=hidden]), .elementor-widget-shortcode .learn-press-form-register select, .elementor-widget-shortcode .learn-press-form-register textarea{ width:100% !important; height:47px !important; font-size:15px !important; line-height:normal !important; color:#101828 !important; background:#FFFFFF !important; border:1px solid #D0D5DD !important; border-radius:9px !important; padding:6px 16px !important; box-sizing:border-box !important; font-style:normal !important; }
.elementor-widget-shortcode .learn-press-form-register textarea{ height:auto !important; padding:10px 16px !important; }
.elementor-widget-shortcode .learn-press-form-register small{ display:block !important; margin-top:6px !important; font-size:12px !important; line-height:16px !important; color:#667085 !important; font-style:normal !important; }
.elementor-widget-shortcode .learn-press-form-register form > p{ margin:22px 0 0 0 !important; }
.elementor-widget-shortcode .learn-press-form-register button[type=submit], .elementor-widget-shortcode .learn-press-form-register input[type=submit], .elementor-widget-shortcode .learn-press-form-register button{ width:100% !important; background:#001B73 !important; color:#FFFFFF !important; border:0 !important; border-radius:12px !important; padding:14px 22px !important; font-size:15px !important; font-weight:600 !important; text-transform:none !important; cursor:pointer !important; }
@media (max-width:767px){ .elementor-widget-shortcode .learn-press-form-register ul.form-fields{ grid-template-columns:1fr !important; } }
.elementor-widget-shortcode input[type=submit]{ text-transform:none !important; }

/* our own shortcode forms (password reset) - stop the theme title-casing the button */
.elementor-widget-shortcode button, .elementor-widget-shortcode button[type=submit]{ text-transform:none !important; }


/* ===================================================================
   Course landing page  -  2026-08-18
   The enrol button sits on the navy hero, so it needs to invert.
   Safe to remove as one block.
   =================================================================== */
.myls-enrol form, .myls-enrol .lp-button-wrap{ margin:0 !important; }
.myls-enrol button, .myls-enrol a.button, .myls-enrol .lp-button, .myls-enrol input[type=submit]{
  background:#FFFFFF !important; color:#001B73 !important; border:0 !important;
  border-radius:12px !important; padding:15px 34px !important; font-size:15.5px !important;
  font-weight:700 !important; text-transform:none !important; opacity:1 !important;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.35) !important; cursor:pointer !important; }
.myls-enrol button:hover, .myls-enrol a.button:hover, .myls-enrol .lp-button:hover{ background:#E8B93B !important; color:#1D2939 !important; }
/* headings written in the course editor - stop the theme title-casing them */
.myls-learn-block h2, .myls-learn-block h3{ text-transform:none !important; font-size:24px !important; line-height:32px !important; font-weight:700 !important; color:#1D2939 !important; margin:0 0 14px !important; }
.myls-learn-block ul{ margin:0 0 0 20px !important; }
.myls-learn-block li{ margin-bottom:9px !important; font-size:15.5px !important; line-height:25px !important; color:#475467 !important; }


/* ===================================================================
   Home page blocks  -  2026-08-18
   Figures, three steps, six course cards. Motion: the figures count
   up once on entry; cards give quiet hover feedback. Safe to remove.
   =================================================================== */
.myls-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:34px 0 0}
.myls-stat-n{font-size:40px;line-height:46px;font-weight:700;color:#FFFFFF;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.myls-stat-word{color:#E8B93B}
.myls-stat-l{font-size:13.5px;line-height:19px;color:rgba(255,255,255,.74);margin-top:5px;max-width:22ch}
@media(max-width:767px){.myls-stats{grid-template-columns:repeat(2,1fr);gap:20px}.myls-stat-n{font-size:32px;line-height:38px}}
.myls-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.myls-step{background:#FFFFFF;border:1px solid #EAECF0;border-radius:14px;padding:26px 26px 24px;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1),border-color .28s}
.myls-step:hover{transform:translateY(-3px);border-color:#D5DEF6;box-shadow:0 14px 34px -18px rgba(16,24,40,.34)}
.myls-step-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.myls-step-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#EEF4FF;flex:none}
.myls-step-n{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#98A2B3}
.myls-step-h{font-size:19px;line-height:26px;font-weight:700;color:#1D2939;margin:0 0 8px;text-transform:none}
.myls-step-p{font-size:15px;line-height:24px;color:#475467;margin:0 0 16px}
.myls-step-cta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:#1F4AC2;text-decoration:none}
.myls-step-cta svg{transition:transform .24s cubic-bezier(.16,1,.3,1)}
.myls-step-cta:hover svg{transform:translateX(4px)}
@media(max-width:900px){.myls-steps{grid-template-columns:1fr}}
.myls-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.myls-course{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #EAECF0;border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.myls-course:hover{transform:translateY(-5px);border-color:#C7D7FE;box-shadow:0 22px 48px -24px rgba(0,27,115,.42)}
.myls-course-shot{display:block;height:150px;overflow:hidden;background:#F2F4F7;border-bottom:1px solid #EAECF0}
.myls-course-shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;filter:saturate(.82);transform:scale(1.02);transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s}
.myls-course:hover .myls-course-shot img{transform:scale(1.06);filter:saturate(1)}
.myls-course-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.myls-course-name{font-size:20px;line-height:27px;font-weight:700;color:#1D2939;margin-bottom:7px}
.myls-course-who{font-size:14.5px;line-height:22px;color:#475467;margin-bottom:16px}
.myls-course-meta{display:flex;gap:18px;font-size:13.5px;color:#667085;margin-bottom:16px}
.myls-course-meta span{display:inline-flex;align-items:center;gap:6px}
.myls-course-go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:#1F4AC2}
.myls-course-go svg{transition:transform .24s cubic-bezier(.16,1,.3,1)}
.myls-course:hover .myls-course-go svg{transform:translateX(4px)}
.myls-course:focus-visible{outline:3px solid #1F4AC2;outline-offset:3px}
@media(max-width:1100px){.myls-courses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.myls-courses{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.myls-course,.myls-step,.myls-course-shot img,.myls-course-go svg,.myls-step-cta svg{transition:none !important}.myls-course:hover,.myls-step:hover{transform:none}}

/* Card screenshots. A 3520px app capture cannot be read at 384px, and every
   MyLS screen shares the same logo strip at top-left - so a zoomed crop made
   four cards identical. Show the whole screen instead: the layout, the navy
   rail and the colour blocks differ per course, which is the recognisable part. */
.myls-course-shot{height:178px !important;position:relative;
  background:#EEF1F6 !important;border-bottom:1px solid #E4E9F2 !important;
  display:flex;align-items:center;justify-content:center;padding:12px 12px 0}
.myls-course-shot img{width:100% !important;max-width:100% !important;height:100% !important;
  object-fit:contain !important;object-position:center top !important;
  border-radius:8px 8px 0 0 !important;box-shadow:0 -1px 0 #E4E9F2, 0 6px 16px -10px rgba(16,24,40,.45) !important;
  transform:translateY(0) !important;
  transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s !important;filter:saturate(.94) !important}
.myls-course:hover .myls-course-shot img{transform:translateY(-6px) !important;filter:saturate(1) !important}
@media(prefers-reduced-motion:reduce){.myls-course-shot img{transition:none !important}.myls-course:hover .myls-course-shot img{transform:none !important}}


/* ===================================================================
   Course archive thumbnails  -  2026-08-18
   Each course now uses a real screenshot of its own screens, and those
   captures are different shapes, so the cards came out ragged. Pin one
   ratio and letterbox on the page ground. Safe to remove as one block.
   =================================================================== */
.elementor-widget-thim-loop-item-featured-image{background:#EEF1F6;border-bottom:1px solid #E4E9F2}
.elementor-widget-thim-loop-item-featured-image img{
  width:100% !important;height:200px !important;aspect-ratio:auto !important;
  object-fit:contain !important;object-position:center top !important;
  display:block !important;padding:10px 10px 0 !important;box-sizing:border-box !important;
  transition:transform .5s cubic-bezier(.16,1,.3,1) !important}
.elementor-widget-thim-loop-item-featured-image:hover img{transform:translateY(-4px) !important}
@media(prefers-reduced-motion:reduce){.elementor-widget-thim-loop-item-featured-image img{transition:none !important}.elementor-widget-thim-loop-item-featured-image:hover img{transform:none !important}}


/* ===================================================================
   Course archive: equal card heights  -  2026-08-18
   The grid row already stretches, but the Elementor card inside it did
   not fill the row, so a short description made a short card. Fill the
   row and push the button to the bottom. Safe to remove as one block.
   =================================================================== */
.thim-ekits-course__inner{align-items:stretch !important}
.thim-ekits-course__item{display:flex !important;height:100% !important}
.thim-ekits-course__item > .elementor.elementor-20193{
  display:flex !important;flex-direction:column !important;width:100% !important;height:100% !important}
.thim-ekits-course__item > .elementor.elementor-20193 > .e-con,
.thim-ekits-course__item > .elementor.elementor-20193 > .e-con-boxed{
  flex:1 1 auto !important;height:auto !important;display:flex !important;flex-direction:column !important}
.thim-ekits-course__item .elementor-widget-thim-loop-item-excerpt{flex:0 0 auto !important}
.thim-ekits-course__item .elementor-widget-thim-loop-item-read-more{margin-top:auto !important}


/* ===================================================================
   Signed-out call to action on a course  -  2026-08-18
   A guest cannot enrol; LearnPress silently reloads. Send them to
   sign in instead. Safe to remove as one block.
   =================================================================== */
.myls-signin-cta{display:inline-block;background:#FFFFFF;color:#001B73;border-radius:12px;
  padding:15px 34px;font-size:15.5px;font-weight:700;text-decoration:none;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.35);transition:background .24s cubic-bezier(.16,1,.3,1),color .24s}
.myls-signin-cta:hover{background:#E8B93B;color:#1D2939}
.myls-signin-note{margin-top:14px;font-size:13.5px;line-height:20px;color:rgba(255,255,255,.72)}
.myls-signin-note a{color:#E8B93B;text-decoration:none;font-weight:600}
.myls-signin-note a:hover{text-decoration:underline}


/* ===================================================================
   Secondary calls to action  -  2026-08-19
   The alternative action on each auth page was inheriting the theme's
   plain black body text, so nothing looked clickable; on the navy hero
   the theme turned the link navy on hover, making it vanish. Every
   colour below is set explicitly, at rest AND on hover, so the theme
   can never blend a link into its background again.
   Safe to remove as one block.
   =================================================================== */
a.myls-btn-outline, a.myls-btn-outline:visited{
  display:inline-block !important;background:transparent !important;color:#001B73 !important;
  border:1.5px solid #001B73 !important;border-radius:12px !important;
  padding:12.5px 26px !important;font-size:15px !important;font-weight:600 !important;
  line-height:1.2 !important;text-decoration:none !important;text-transform:none !important;
  transition:background .24s cubic-bezier(.16,1,.3,1),color .24s,border-color .24s !important}
a.myls-btn-outline:hover, a.myls-btn-outline:focus{
  background:#001B73 !important;color:#FFFFFF !important;border-color:#001B73 !important;text-decoration:none !important}
a.myls-btn-outline:focus-visible{outline:3px solid #1F4AC2 !important;outline-offset:2px !important}
a.myls-btn-outline-light, a.myls-btn-outline-light:visited{
  display:inline-block !important;background:transparent !important;color:#FFFFFF !important;
  border:1.5px solid rgba(255,255,255,.62) !important;border-radius:12px !important;
  padding:13.5px 26px !important;font-size:15.5px !important;font-weight:600 !important;
  line-height:1.2 !important;margin-left:12px !important;text-decoration:none !important;text-transform:none !important;
  transition:background .24s cubic-bezier(.16,1,.3,1),color .24s,border-color .24s !important}
a.myls-btn-outline-light:hover, a.myls-btn-outline-light:focus{
  background:#FFFFFF !important;color:#001B73 !important;border-color:#FFFFFF !important;text-decoration:none !important}
a.myls-btn-outline-light:focus-visible{outline:3px solid #E8B93B !important;outline-offset:2px !important}
@media(max-width:600px){a.myls-btn-outline-light{margin-left:0 !important;margin-top:12px !important;display:block !important;text-align:center}}
a.myls-link, a.myls-link:visited{color:#1F4AC2 !important;font-weight:600 !important;
  text-decoration:underline !important;text-underline-offset:3px !important;transition:color .2s !important}
a.myls-link:hover, a.myls-link:focus{color:#001B73 !important;text-decoration:underline !important}
@media(prefers-reduced-motion:reduce){a.myls-btn-outline,a.myls-btn-outline-light,a.myls-link{transition:none !important}}


/* ---------------------------------------------------------------------------
   8. CERTIFICATES — the profile "Certificates" tab      (added 2026-08-19)

   The addon crops each certificate into a fixed 250px box with
   object-fit:cover, which slices the logo off the top and the seal off the
   bottom, and frames it in a dashed placeholder-looking border. Show the whole
   certificate in a real card instead.
   ------------------------------------------------------------------------ */
#profile-content-certificates .profile-certificates {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-gap: 20px;
}
#profile-content-certificates .profile-certificates li.certificate-item,
#profile-content-certificates .profile-certificates li.course {
  border: 1px solid #E4E7EC;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
#profile-content-certificates .profile-certificates li.certificate-item:hover,
#profile-content-certificates .profile-certificates li.course:hover {
  border-color: #1F4AC2;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
  transform: translateY(-2px);
}
#profile-content-certificates .profile-certificates img.certificate-result {
  height: auto;
  max-height: none;
  width: 100%;
  object-fit: contain;
  border: 1px solid #E4E7EC;
  border-radius: 6px;
  background: #fff;
  display: block;
}
#profile-content-certificates .profile-certificates .certificate-thumbnail {
  border: 0;
}
#profile-content-certificates .course-title {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #001B73;
  -webkit-line-clamp: 2;
}
@media (prefers-reduced-motion: reduce) {
  #profile-content-certificates .profile-certificates li.certificate-item,
  #profile-content-certificates .profile-certificates li.course {
    transition: none;
  }
  #profile-content-certificates .profile-certificates li.certificate-item:hover,
  #profile-content-certificates .profile-certificates li.course:hover {
    transform: none;
  }
}


/* ---------------------------------------------------------------------------
   9. STOP THE THEME TITLE-CASING SENTENCES            (added 2026-08-19)

   The questions and lesson titles are stored correctly in sentence case, e.g.
   "You type your password and it is refused. What should you do next?" but the
   theme applies text-transform:capitalize, which renders them as
   "You Type Your Password And It Is Refused. What Should You Do Next?".
   That reads wrong and is inconsistent with the answer options beneath, which
   are not transformed. Same rule already applied to lesson headings.
   ------------------------------------------------------------------------ */
.quiz-questions .question-title,
.quiz-questions .question-title span,
h4.question-title,
h4.question-title span,
.question .question-title,
.question .question-title span,
.thim-ekit-single-course-item__navigation__link__content--title,
.quiz-results .result-field span {
  text-transform: none;
}

/* 9b. The prev/next strip needed more weight than block 9 gave it. (2026-08-19) */
.thim-ekit-single-course-item__navigation .thim-ekit-single-course-item__navigation__link__content--title,
.thim-ekit-single-course-item__navigation__link .thim-ekit-single-course-item__navigation__link__content--title,
span.thim-ekit-single-course-item__navigation__link__content--title {
  text-transform: none !important;
}


/* ---------------------------------------------------------------------------
   10. THE QUIZ START SCREEN                            (added 2026-08-20)

   Before a quiz begins, LearnPress shows a thin meta row and a small unstyled
   Start button sitting at the top of an otherwise blank page. It reads as a
   page that failed to load rather than a quiz waiting to be started.
   ------------------------------------------------------------------------ */
.quiz-buttons.is-first {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.quiz-buttons.is-first .button-left,
.quiz-buttons.is-first .button-right {
  float: none;
}
.lp-button.start {
  background: #001B73;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 17px 52px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lp-button.start:hover {
  background: #1F4AC2;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(31, 74, 194, .26);
}
.lp-button.start:focus-visible {
  outline: 3px solid #E8B93B;
  outline-offset: 2px;
}

/* the Questions / Duration / Passing grade row above it */
.quiz-intro,
ul.quiz-intro,
.lp-quiz-intro {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  max-width: 640px;
  margin: 30px auto 0;
  padding: 22px 28px;
  background: #fff;
  border: 1px solid #E4E7EC;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.quiz-intro li,
.lp-quiz-intro li {
  margin: 0;
  color: #475467;
}

/* stop the start screen sitting in a tall empty box */
.content-item-summary .quiz-buttons.is-first {
  margin-bottom: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-button.start { transition: none; }
  .lp-button.start:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   10b. QUIZ START BUTTON — override                    (added 2026-08-20)

   Block 10 above is correct but loses on specificity: Eduma styles this button
   through a long descendant chain, so a two-class selector never wins.
   !important is deliberate here — it is the only way to beat the theme without
   copying its whole selector chain, which would break on a theme update.
   ------------------------------------------------------------------------ */
.quiz-buttons .lp-button.start,
button.lp-button.start,
.thim-ekit-single-item__data .lp-button.start {
  background: #001B73 !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 17px 54px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important;
}
.quiz-buttons .lp-button.start:hover,
button.lp-button.start:hover,
.thim-ekit-single-item__data .lp-button.start:hover {
  background: #1F4AC2 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(31, 74, 194, .26) !important;
}
.quiz-buttons.is-first {
  margin-top: 34px !important;
  margin-bottom: 44px !important;
}

/* the Questions / Duration / Passing grade row that sits above it */
.quiz-intro,
ul.quiz-intro,
.lp-quiz-intro,
.content-item-summary .quiz-intro {
  max-width: 660px !important;
  margin: 34px auto 0 !important;
  padding: 22px 28px !important;
  background: #fff !important;
  border: 1px solid #E4E7EC !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}

/* the theme constrains the button box, so set the target size directly */
.quiz-buttons .lp-button.start,
button.lp-button.start {
  min-width: 190px !important;
  min-height: 52px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ---------------------------------------------------------------------------
   11. COURSE PAGE — spacing and polish only            (added 2026-08-20)

   Scoped to .elementor-widget-shortcode on purpose. The lesson sidebar uses the
   same .course-item / .section-header class names, and blocks 1–4 above make it
   deliberately compact — an unscoped rule here would undo that.

   This is the interim pass. The full course-page design is pipeline item P1.
   ------------------------------------------------------------------------ */

/* --- the two section headings ------------------------------------------- */
.elementor-widget-shortcode .myls-learn-block h2,
.elementor-widget-shortcode .curriculum-scrollable > h2,
.elementor-widget-shortcode > .elementor-widget-container > h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  color: #1D2939;
  letter-spacing: -.01em;
  margin: 0 0 20px;
}

/* --- what you will learn ------------------------------------------------- */
.elementor-widget-shortcode .myls-learn-block {
  margin-bottom: 56px;
}
.elementor-widget-shortcode .myls-learn-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px 40px;
}
.elementor-widget-shortcode .myls-learn-block li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: 16.5px;
  line-height: 26px;
  color: #475467;
}
.elementor-widget-shortcode .myls-learn-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #EEF4FF;
  border: 1px solid #C7D7FE;
}
.elementor-widget-shortcode .myls-learn-block li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #1F4AC2;
  border-bottom: 2px solid #1F4AC2;
  transform: rotate(-45deg);
}

/* --- the curriculum, as one card ---------------------------------------- */
.elementor-widget-shortcode .curriculum-sections {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #E4E7EC;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.elementor-widget-shortcode .curriculum-sections > li.section {
  margin: 0;
  list-style: none;
  border-top: 1px solid #E4E7EC;
}
.elementor-widget-shortcode .curriculum-sections > li.section:first-child {
  border-top: 0;
}
.elementor-widget-shortcode .curriculum-sections .section-header {
  padding: 18px 26px;
  background: #F9FAFB;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #001B73;
}
.elementor-widget-shortcode .curriculum-sections .section-content {
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-widget-shortcode .curriculum-sections .course-item {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #F2F4F7;
  transition: background .16s ease;
}
.elementor-widget-shortcode .curriculum-sections .course-item:hover {
  background: #FCFCFD;
}
.elementor-widget-shortcode .curriculum-sections .course-item .section-item-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 26px;
  text-decoration: none;
}
.elementor-widget-shortcode .curriculum-sections .course-item .item-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #1D2939;
  text-transform: none;
}
.elementor-widget-shortcode .curriculum-sections .course-item-meta,
.elementor-widget-shortcode .curriculum-sections .course-item .course-item-meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: #98A2B3;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-shortcode .curriculum-sections .course-item { transition: none; }
}

/* 11b. The section band had 0 left padding — Eduma beats a plain class rule
   here the same way it does on the quiz button, so this one is forced. */
.elementor-widget-shortcode .curriculum-sections .section-header,
.elementor-widget-shortcode .curriculum-sections li.section > .section-header {
  padding: 17px 26px !important;
}
.elementor-widget-shortcode .curriculum-sections .section-header .section-left {
  padding-left: 0 !important;
}


/* ---------------------------------------------------------------------------
   12. QUIZ RESULT BUTTONS — Retake / Review           (added 2026-08-20)

   LearnPress reuses the .start class for the Retake button, so block 10b's
   Start-button styling made Retake 190x52 while Review stayed at 99x42 and the
   pair looked mismatched. Retake stays the main action; Review becomes a
   proper secondary of the same height.
   ------------------------------------------------------------------------ */
.quiz-buttons {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.quiz-buttons .button-left,
.quiz-buttons .button-right {
  float: none !important;
  margin: 0 !important;
}

.quiz-buttons .lp-button.review-quiz,
button.lp-button.review-quiz {
  min-width: 150px !important;
  min-height: 52px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 17px 34px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  background: #FFFFFF !important;
  background-image: none !important;
  color: #001B73 !important;
  border: 1px solid #C9CEDA !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.quiz-buttons .lp-button.review-quiz:hover,
button.lp-button.review-quiz:hover {
  background: #FFFFFF !important;
  color: #001B73 !important;
  border-color: #001B73 !important;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .10) !important;
}
.quiz-buttons .lp-button.review-quiz:focus-visible,
button.lp-button.review-quiz:focus-visible {
  outline: 3px solid #E8B93B !important;
  outline-offset: 2px !important;
}

/* the Result button on the review screen — same family */
.lp-button.back-quiz,
button.lp-button.back-quiz {
  min-height: 52px !important;
  height: auto !important;
  padding: 17px 34px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

@media (prefers-reduced-motion: reduce) {
  .quiz-buttons .lp-button.review-quiz { transition: none !important; }
}


/* ---------------------------------------------------------------------------
   13. QUIZ RESULT SCREEN — two readability fixes        (added 2026-08-21)

   a) The circle stacked two unlabelled numbers: the score (66.67%) over the
      pass mark (60%). Read as a contradiction. The pass mark is already shown
      on the start screen and the Passed/Failed badge states the outcome, so
      the second number is removed here.

   b) The table below is a HISTORY list — it deliberately omits the attempt
      shown in the circle above, so "Last Attempt" is the wrong word for it.
      Renamed to "Previous attempts". Done in CSS because the heading is
      rendered by LearnPress's React app, where a PHP translation filter
      cannot reach it.
   ------------------------------------------------------------------------ */

/* a) one number in the circle, properly centred */
.quiz-result .result-grade .result-require,
.quiz-result .result-require {
  display: none !important;
}
.quiz-result .result-grade {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}
.quiz-result .result-grade .result-achieved {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* b) rename the history heading, and give the block room to breathe */
.quiz-attempts {
  margin-top: 46px !important;
}
.quiz-attempts .attempts-heading {
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 16px !important;
}
.quiz-attempts .attempts-heading::after {
  content: "Previous attempts";
  display: block;
  font-size: 19px;
  line-height: 27px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #1D2939;
}
.quiz-attempts table {
  border-collapse: collapse;
  width: 100%;
}
.quiz-attempts table th {
  background: #F9FAFB;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #667085;
  font-weight: 700;
}
.quiz-attempts table td {
  color: #475467;
}

/* ============================================================
   14. "Back to course" — the lesson header (template 23839)

   The learner's way out of a lesson. The link itself is rendered by
   the shortcode in novamira-sandbox/myls-back-to-course.php and sits
   beside the logo, top-left, where an exit control is expected.
   ============================================================ */
.myls-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  /* Eduma sets its own link colour at a higher specificity - hence !important */
  color: #001B73 !important;
  text-decoration: none;
  padding: 9px 17px 9px 14px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  background: #FFFFFF;
  transition: color .18s ease, border-color .18s ease,
              background-color .18s ease, box-shadow .18s ease;
}
.myls-back:hover,
.myls-back:focus-visible {
  color: #1F4AC2 !important;
  border-color: #1F4AC2;
  background: #F5F8FF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  text-decoration: none;
}
.myls-back:focus-visible {
  outline: 2px solid #1F4AC2;
  outline-offset: 2px;
}
.myls-back__arrow {
  font-size: 17px;
  line-height: 1;
  transition: transform .18s ease;
}
.myls-back:hover .myls-back__arrow {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .myls-back,
  .myls-back__arrow { transition: none; }
  .myls-back:hover .myls-back__arrow { transform: none; }
}