/* =========================================================
   AGENCY LESSON LAYOUT – FULL SCOPED CSS
   Parent: .lp-agency-lesson-page-container
   ========================================================= */

/* ---------- ROOT ---------- */
.lp-agency-lesson-page-container {
    min-height: 100vh;
    background: #f5f5f3;
    overflow: unset;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    display: flex;
}

.lp-agency-lesson-page-container #lp-agency-course {
    display: block;
    height: auto;
    background: #DEDED8;
}

body.course-item-lp_quiz .lp-agency-lesson-page-container #lp-agency-course {
    background: #f5f5f3;
}

/* ---------- SIDEBAR ---------- */
.lp-agency-lesson-page-container #lp-agency-sidebar {
    max-width: 300px;
    background: #DEDED8;
    border-right: 1px solid #d6d6d6;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    float: left;
    height: 100%;
    width: 100%;
    max-height: calc(100% - 77px);
}

.admin-bar .lp-agency-lesson-page-container #lp-agency-sidebar {
    max-height: calc(100% - 110px);
}


/* Course Image */
.lp-agency-lesson-page-container .ctm-course-image {
    height: 170px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.lp-agency-lesson-page-container .ctm-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.15));
    display: flex;
    align-items: flex-end;
    padding: 14px 16px;
}

.lp-agency-lesson-page-container .ctm-course-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.lp-agency-lesson-page-container .lp-course-curriculum__title,
.lp-agency-lesson-page-container .course-item-order,
.lp-agency-lesson-page-container .course-item__info,
.lp-agency-lesson-page-container .course-curriculum-info__right,
.lp-agency-lesson-page-container .course-curriculum-info {
    display: none !important;
}

.lp-agency-lesson-page-container .course-section__items {
    padding: 0 0 8px 0;
}

.lp-agency-lesson-page-container .course-item {
    margin: 0;
    background: transparent !important;
}

.lp-agency-lesson-page-container .course-item__link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    border-left: 4px solid transparent;
}

.lp-agency-lesson-page-container .course-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #222;
    line-height: 1.2;
}

.lp-agency-lesson-page-container .course-item .completed {
    opacity: 0.5;
}

.lp-agency-lesson-page-container .course-item.passed .course-item-title {
    text-decoration: line-through;
    color: #777;
}

.lp-agency-lesson-page-container .course-item__status {
    margin-left: auto;
    opacity: 0.6;
}

.lp-agency-lesson-page-container .course-item.current .course-item__link {
    background: rgba(255, 90, 60, 0.08);
    border-left-color: #ff5a3c;
}

.lp-agency-lesson-page-container .course-item.current .course-item-title {
    font-weight: 600;
}

.lp-agency-lesson-page-container .course-item__link:hover {
    background: rgba(0, 0, 0, 0.04);
}

.lp-agency-lesson-page-container .ctm-sidebar-footer {
    margin-top: auto;
    padding: 16px;
}

.lp-agency-lesson-page-container .ctm-sidebar-footer a {
    font-size: 13px;
    color: #444;
    text-decoration: none;
}

div#lp-single-course {
    max-width: 100%;
}

/* Curriculum Meta */
.lp-agency-lesson-page-container .course-curriculum-info {
    padding: 12px 16px;
    font-size: 13px;
    color: #444;
}

.lp-agency-lesson-page-container .course-curriculum-info__right,
.lp-agency-lesson-page-container .lp-course-curriculum__title {
    display: none;
}

/* Lesson List */


.lp-agency-lesson-page-container .course-item {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #ffffffad !important;
    transition: all 0.3s linear !important;
    opacity: 0.5;
}

.lp-agency-lesson-page-container .course-item__link,
.lp-agency-lesson-page-container .course-item__link-placeholder {
    display: flex;
    align-items: center;
    padding: 8px 32px 8px 10px;
    border-radius: 6px;
    text-decoration: none;
}

.lp-agency-lesson-page-container .course-item:hover,
.lp-agency-lesson-page-container .course-item:hover .course-item__link,
.lp-agency-lesson-page-container .course-item.current .course-item__link,
.course-curriculum .course-item.current {
    background: #D1D4CA !important;
    opacity: 1;
}

.lp-agency-lesson-page-container .course-item .course-item__link,
.lp-agency-lesson-page-container .course-item .course-item__link-placeholder {
    width: 100%;
    border: 0;
    background: transparent;
    transition: all 0.3s linear !important;
    border-radius: 0;
    padding: 16px 32px;
}

.lp-agency-lesson-page-container .course-item-title {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1f1f1f;
}

#lp-agency-sidebar .course-item__right {
    display: none;
}

/* Current Lesson */
.lp-agency-lesson-page-container .course-item.current .course-item__link,
.lp-agency-lesson-page-container .course-item.current .course-item__link-placeholder {
    background: #ffffff;
    border: 1px solid #dcdcdc;
}

.lp-agency-lesson-page-container .course-item::before {
    width: 8px !important;
    background: var(--agency-primary-color) !important;
}

/* Completed Lesson */
.lp-agency-lesson-page-container .course-item .completed {
    opacity: 0.6;
}

.lp-agency-lesson-page-container .course-item .completed+.course-item-title {
    text-decoration: line-through;
}

/* Sidebar Footer */
.lp-agency-lesson-page-container .ctm-sidebar-footer {
    margin-top: auto;
    padding: 14px 16px;
}

.lp-agency-lesson-page-container .ctm-sidebar-footer a {
    font-size: 13px;
    line-height: 1.4;
    color: #121212;
    text-decoration: underline;
}

.lp-agency-lesson-page-container .course-item:after {
    content: "";
    position: absolute;
    right: 10px;
    background: url("../images/check_mark.svg") no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* ---------- MAIN CONTENT ---------- */
.lp-agency-lesson-page-container #lp-agency-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: calc(100svh - 107px - 77px - 80px - 30px) !important;
}

.admin-bar .lp-agency-lesson-page-container #lp-agency-content {
    height: calc(100svh - 255px - 30px) !important;
}

.lp-agency-list-content-wrap {
    display: flex;
    flex-direction: column;
    padding: 40px;
    width: 100%;
    max-width: calc(100% - 300px);
}

.lp-agency-lesson-page-container #learn-press-content-item .content-item-wrap {
    width: 100%;
    padding: 0;
}

body.course-item-popup #learn-press-content-item .content-item-wrap {
    padding-bottom: 30px;
    overflow-y: auto;
    height: 100%;
    /* max-height: 600px; */
    margin-bottom: 20px;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    scrollbar-width: thin;
}

.lesson-main-content-wrapper.layout-A .content-window.type-image {
    align-content: center;
}

.lp-agency-lesson-page-container #learn-press-content-item>.content-item-scrollable {
    height: 100%;
}

body.course-item-popup #learn-press-content-item .content-item-wrap {
    padding-bottom: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: unset;
}

.lp-agency-lesson-page-container #learn-press-content-item.layout-C>.content-item-scrollable>.content-item-wrap,
.lp-agency-lesson-page-container #learn-press-content-item.layout-B>.content-item-scrollable>.content-item-wrap {
    overflow: unset !important;
    max-height: unset;
}

.lp-agency-lesson-page-container #learn-press-content-item.layout-C .content-item-wrap .lesson-main-content-wrapper.layout-C>div,
.lp-agency-lesson-page-container #learn-press-content-item.layout-B .content-item-wrap .lesson-main-content-wrapper.layout-B>div {
    overflow-y: auto;
    max-height: 600px;
    scrollbar-width: thin;
    height: auto;
}

body.course-item-popup #learn-press-content-item .content-item-wrap p.edit-course-item-link {
    padding: 0 36px;
    margin-inline: 0;
}

.lp-agency-lesson-page-container .ctm-lesson-navbar .ctm-nav-wrap {
    width: 100%;
    display: flex;
}

.lp-agency-lesson-page-container .ctm-lesson-navbar .ctm-nav-wrap .ctm-course-item-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.lp-agency-lesson-page-container #lp-agency-content div#learn-press-content-item {
    overflow: unset;
    height: 100%;
}

.lesson-main-content-wrapper {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

.lesson-main-content-wrapper .content-window {
    min-height: calc(100svh - 255px - 40px) !important;
    max-height: calc(100svh - 255px - 40px) !important;
    height: 100%;
    overflow-y: auto;
}

.admin-bar .lesson-main-content-wrapper .content-window {
    min-height: calc(100svh - 107px - 77px - 80px - 60px) !important;
    max-height: calc(100svh - 107px - 77px - 80px - 60px) !important;
}


.lesson-main-content-wrapper .content-window.type-image,
.lesson-main-content-wrapper .content-window.type-video .video-container {
    padding: 0;
}

.course-curriculum {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    max-height: calc(100vh - 247px - 82px);
}

/* Content Card */
.lp-agency-lesson-page-container .content-window {
    max-width: 100%;
    margin: 0;
    background: transparent;
    border: 0;
    box-sizing: border-box;
}

.lp-agency-lesson-page-container .window-inner {
    padding: 32px 36px;
    font-size: 15px;
    line-height: 1.65;
    /* color: #333; */
    width: 100%;
    box-sizing: border-box;
    display: block;
    /* Default for text flow */
}

/* 
.empty-content {
    display: none !important;
}

.empty-content+div {
    max-width: 100% !important;
    width: 100% !important;
} */

/* Free Content Stability */
.lp-agency-lesson-page-container .content-window.type-free .window-inner {
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.lp-agency-lesson-page-container .window-inner table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    margin: 24px 0;
    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
    table-layout: fixed;
}

.lp-agency-lesson-page-container .window-inner table th,
.lp-agency-lesson-page-container .window-inner table td {
    padding: 12px;
    border: 1px solid #e2e4e7;
    text-align: left;
}


.lp-agency-lesson-page-container .window-inner iframe,
.lp-agency-lesson-page-container .window-inner video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 24px 0;
}

/* Video Centering Logic overrides default flow */
.lp-agency-lesson-page-container .content-window.type-video .window-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 !important;
}

.lp-agency-lesson-page-container .content-window.type-image .window-inner {
    padding: 0 !important;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.lp-agency-lesson-page-container .video-container {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.course-item-popup #learn-press-content-item .content-item-wrap.layout-A.type-image,
body.course-item-popup #learn-press-content-item .content-item-wrap.layout-A.type-video {
    overflow: hidden;
}

.lp-agency-lesson-page-container .content-window.type-image img {
    margin: 0;
    width: 100%;
    max-height: 100%;
    /* aspect-ratio: 16/9; */
}

.lp-agency-lesson-page-container .content-window.type-image img.object-contain {
    object-fit: contain;
}

.lp-agency-lesson-page-container .content-window.type-image img.object-cover {
    object-fit: cover;
}

.lesson-main-content-wrapper.layout-B .video-container,
.lesson-main-content-wrapper.layout-C .video-container,
.lesson-main-content-wrapper.layout-A .video-container {
    padding: 32px 36px;
}

.lp-agency-lesson-page-container .video-container iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: none;
}

/* Images inside content - already handled above by broad rules */

body.single-lp_course {
    overflow-x: hidden !important;
    overflow-y: auto;
}

/* ---------- FOOTER ---------- */
.lp-agency-lesson-page-container #lp-agency-footer {
    background: #ffffff;
    border: 1px solid #d6d6d6;
    /* position: sticky; */
    /* bottom: 0; */
    width: 100%;
}

.lp-agency-lesson-page-container .ctm-lesson-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 36px;
    gap: 10px;
}

/* Progress */
.lp-agency-lesson-page-container .ctm-progress-text {
    font-size: 13px;
    color: #444;
}

.ctm-footer-center {
    width: 100%;
    max-width: 320px;
}

.lp-agency-lesson-page-container .ctm-progress-bar-bg {
    max-width: 200px;
    width: 100%;
    height: 12px;
    background: #fff;
    margin-top: 0;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
}

.lp-agency-lesson-page-container .ctm-progress-bar-fill {
    height: 100%;
    background: #c7c7b8;
    border-radius: 3px;
}

/* Next Button */
.lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn {
    background: var(--agency-primary-color);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 26px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s linear;
    min-width: 150px !important;
    display: block;
    text-align: center;
}

.lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn:hover {
    background: #1a1a1a;
}

.lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-prev-btn {
    background: #d5d5d5;
    color: #1a1a1a;
}

.lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-prev-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
}

/* Loading state (TA-2664).
   2026-lesson-auto-complete.php adds a generic `loading` class to these footer
   nav buttons while it completes the lesson and navigates. The dim + disable is
   the only affordance we want. The ic-dashboard plugin ships an UNSCOPED global
   spinner — `.loading::before { content:""; width/height:32px; border-radius:50%;
   animation:spin }` in assets/css/dynamic-table.css — that targets ANY `.loading`
   element. Its own `.loading` container is display:flex (so the circle renders
   correctly there), but our button is display:block, leaving the ::before inline
   so width/height/border-radius are ignored and the circle collapses into a
   squished vertical sliver next to "Next" (visible on staging, not local because
   the plugin isn't enqueued on the local player). Own the loading look here and
   suppress any inherited decorative glyph so it can't render on our buttons. */
.lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.loading {
    opacity: 0.5;
    cursor: progress;
    pointer-events: none;
}

.lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.loading::before,
.lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.loading::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.ctm-progress-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 20px;
    color: #000;
}

.lp-agency-lesson-page-container .course-item.cm-less {
    text-decoration: line-through;
}

.lp-agency-lesson-page-container .course-item.cm-less .course-item-title {
    text-decoration: line-through;
    opacity: 0.7;
}

.lp-agency-lesson-page-container .course-item.cm-less:after {
    opacity: 1;
}

/* Incomplete / Upcoming Lesson */
.lp-agency-lesson-page-container .course-item.in-cm-less {
    pointer-events: none;
    cursor: default;
    opacity: 0.8;
}

.lp-agency-lesson-page-container .course-item.in-cm-less:after {
    display: none !important;
}

/* ---------- CLEAN UP DEFAULT LP UI ---------- */
.lp-agency-lesson-page-container .course-item-order,
.lp-agency-lesson-page-container .course-item__info,
.lp-agency-lesson-page-container .lp-hidden {
    display: none !important;
}

.lp-agency-list-content-wrap {
    height: 100%;
}

.lp-agency-lesson-page-container .window-inner video {
    aspect-ratio: 16/9;
    width: 100%;
}

.lesson-main-content-wrapper>.content-window.type-free>.window-inner {
    margin: auto;
}

.lp-agency-lesson-page-container .course-summary {
    width: 100%;
}

.course-summary iframe {
    aspect-ratio: 16/9;
}

.lp-agency-lesson-page-container #lp-agency-course>.lp-agency-list-content-wrap {
    gap: 30px;
}

body.course-item-lp_quiz .lp-agency-lesson-page-container #lp-agency-course>.lp-agency-list-content-wrap,
body.course-item-lp_lesson .lp-agency-lesson-page-container #lp-agency-course>.lp-agency-list-content-wrap {
    gap: 0;
}

/* ---------- DYNAMIC CONTRAST ---------- */



/* =========================================================
   BRENDAN OVERRIDE (FINAL)
   Layouts: A / B / C
   Content: type-image + mixed (type-free, etc.)
   Markup:
     .lesson-main-content-wrapper.layout-[A|B|C]
       .content-window.window-a/.window-b.(type-image|type-free|...)
         .window-inner
           (if image) .lesson-image[data-fit="cover|contain"] > img.lesson-image__img
   ========================================================= */

/* ---------- Base image renderer ---------- */
.lesson-image {
    width: 100%;
    position: relative;
}

.lesson-image__img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   QUIZ OVERRIDES – TA-2381
   Scoped to .lp-agency-quiz-wrap (added in content-item.php)
   Overrides LearnPress 4.3.x default quiz styles to match
   the Agency brand (colours, typography, navigation, buttons).

   IMPORTANT: body.learnpress-page prefix is required on button
   selectors to beat LP's own specificity.
   ========================================================= */

/* ---------- ROOT / VARIABLES ---------- */
.lp-agency-quiz-wrap {
    --lp-primary-color: var(--agency-primary-color);
    --lp-secondary-color: var(--agency-secondary-color);
    font-family: Inter, system-ui, -apple-system, sans-serif;
    width: 100%;
}

/* ---------- QUIZ CONTENT ---------- */

/* Hide redundant "Quiz" h1 — the status bar already shows question progress */
.lp-agency-quiz-wrap .quiz-title {
    display: none;
}

.lp-agency-quiz-wrap .quiz-content {
    color: #333;
    font-weight: 400;
    line-height: 1.65;
}

/* Quiz content layout */
.lp-agency-quiz-wrap .quiz-questions {
    padding: 32px 0;
}

/* Individual question spacing */
.lp-agency-quiz-wrap .quiz-questions .question {
    margin-bottom: 32px;
}

/* ---------- QUIZ STATUS BAR ---------- */
.lp-agency-quiz-wrap .quiz-status {
    background: var(--agency-primary-color);
    color: #fff;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LP wraps status children in one anonymous div — override
   .lp-sidebar-toggle__open #content-item-quiz .quiz-status > div
   which forces flex-direction: column and caps max-width: 792px
   in learnpress.css */
.lp-sidebar-toggle__close #content-item-quiz .quiz-status > div,
.lp-sidebar-toggle__open #content-item-quiz .quiz-status > div {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100% !important;
    gap: 12px;
}

.lp-agency-quiz-wrap .quiz-status .questions-index {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.lp-agency-quiz-wrap .quiz-status .current-point {
    display: none;
}

.lp-agency-quiz-wrap .quiz-status .countdown {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Hide the timer when the quiz has no time limit set in its meta box. */
.lp-agency-quiz-wrap.lp-agency-quiz-no-timer .quiz-status .countdown {
    display: none;
}

/* Hide "FINISH QUIZ" in status bar — users finish via the footer button */
.lp-agency-quiz-wrap .quiz-status .submit-quiz {
    display: none !important;
}

/* Hide bottom "Finish Quiz" button — users finish via the status-bar button */
.lp-agency-quiz-wrap .quiz-buttons .button-right {
    display: none !important;
}

.lp-agency-quiz-wrap .quiz-status .countdown i {
    color: #fff;
}

/* Finish Quiz button inside the status bar */
body.learnpress-page .lp-agency-quiz-wrap .quiz-status .lp-button {
    background: #fff !important;
    color: var(--agency-primary-color) !important;
    border: none !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
}

body.learnpress-page .lp-agency-quiz-wrap .quiz-status .lp-button:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* ---------- ANSWER OPTIONS ---------- */
.lp-agency-quiz-wrap .answer-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-agency-quiz-wrap .answer-options .answer-option {
    border-radius: 8px;
    border: 1px solid #e2e0db;
    padding: 14px 16px;
    margin: 0;
    background: #fff;
    transition: background 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.lp-agency-quiz-wrap .answer-options .answer-option:hover {
    background: #fdf5f4;
    background: color-mix(in srgb, var(--agency-primary-color) 5%, #fff);
    border-color: #d0ccc7;
}

/* Highlight selected answer card */
.lp-agency-quiz-wrap .answer-options .answer-option:has(input:checked) {
    border-color: var(--agency-primary-color);
    background: #fdf5f4;
    background: color-mix(in srgb, var(--agency-primary-color) 6%, #fff);
}

/* Answer label — fill the full card so the entire row is clickable */
.lp-agency-quiz-wrap .answer-options .answer-option .option-title {
    display: block !important;
    font-size: 15px;
    color: #333;
    line-height: 1.4;
    cursor: pointer;
    flex: 1;
    margin: 0;
}

/* Make the whole answer-option a click target */
.lp-agency-quiz-wrap .answer-options .answer-option {
    cursor: pointer;
}

/* Remove LP's left accent bar and inner border on labels */
.lp-agency-quiz-wrap .answer-options .answer-option .option-title::before {
    display: none !important;
}

.lp-agency-quiz-wrap .answer-options .answer-option .option-title {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.lp-agency-quiz-wrap .answer-options .answer-option input[type=checkbox]:checked ~ .option-title::before,
.lp-agency-quiz-wrap .answer-options .answer-option input[type=radio]:checked ~ .option-title::before {
    background: var(--agency-primary-color);
}

.lp-agency-quiz-wrap .answer-options .answer-option input[type=radio]:checked::after {
    background: var(--agency-primary-color);
}

.lp-agency-quiz-wrap .answer-options .answer-option input[type=checkbox]::after {
    color: var(--agency-primary-color);
}

.lp-agency-quiz-wrap .answer-options .answer-option input[type=checkbox],
.lp-agency-quiz-wrap .answer-options .answer-option input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    border: 2px solid #d0d0d0 !important;
    background: #fff;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    order: -1;
    border-radius: 50%;
}

.lp-agency-quiz-wrap .answer-options .answer-option input[type=checkbox] {
    border-radius: 4px;
}

/* Kill the Eduma theme's duplicate checked indicators (::before pseudo) */
.lp-agency-quiz-wrap .answer-options .answer-option input[type=radio]:checked::before,
.lp-agency-quiz-wrap .answer-options .answer-option input[type=checkbox]:checked::before {
    content: none !important;
    display: none !important;
}

/* ---------- QUESTIONS PAGINATION ---------- */
.lp-agency-quiz-wrap .questions-pagination .nav-links {
    gap: 6px;
}

.lp-agency-quiz-wrap .questions-pagination .nav-links .page-numbers {
    border-radius: 4px;
    border-color: #d6d6d6;
    color: #555;
    background: #f5f5f3;
    font-weight: 500;
    font-size: 13px;
    padding: 8px 14px;
}

.lp-agency-quiz-wrap .questions-pagination .nav-links .page-numbers.current,
.lp-agency-quiz-wrap .questions-pagination .nav-links .page-numbers:hover {
    border-color: var(--agency-primary-color);
    color: #fff !important;
    background: var(--agency-primary-color);
}

/* Current page is a <span>, ensure it gets the same box styling as buttons */
.lp-agency-quiz-wrap .questions-pagination .nav-links span.page-numbers.current {
    display: inline-block;
    border: 1px solid var(--agency-primary-color);
}

.lp-agency-quiz-wrap .questions-pagination .nav-links .page-numbers.dots {
    border: none;
    background: transparent;
}

/* ---------- QUIZ BUTTONS (BOTTOM BAR) ---------- */
body.learnpress-page .lp-agency-quiz-wrap .quiz-buttons .lp-button,
body.learnpress-page .lp-agency-quiz-wrap .quiz-buttons .lp-button.submit-quiz {
    background: var(--agency-primary-color) !important;
    color: #fff !important;
    border: none !important;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 26px;
    border-radius: 4px;
    transition: all 0.3s linear;
    text-transform: none;
    cursor: pointer;
}

body.learnpress-page .lp-agency-quiz-wrap .quiz-buttons .lp-button:hover,
body.learnpress-page .lp-agency-quiz-wrap .quiz-buttons .lp-button.submit-quiz:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* "Finish Quiz" text-link in quiz content area */
.lp-agency-quiz-wrap .submit-quiz {
    text-align: center;
}

/* ---------- QUIZ UX POLISH ---------- */

/* Tone down admin-only links */
.lp-agency-quiz-wrap .edit-link,
.lp-agency-quiz-wrap .edit-course-item-link {
    opacity: 0.3;
    font-size: 12px;
    transition: opacity 0.2s;
}

.lp-agency-quiz-wrap .edit-link:hover,
.lp-agency-quiz-wrap .edit-course-item-link:hover {
    opacity: 1;
}

/* ---------- QUESTION TITLE ---------- */
/* LP auto-appends " – True or false" / " – Single choice" etc. to the
   question title; quiz-overrides.js strips that suffix at render time. */
.lp-agency-quiz-wrap .question-title {
    font-family: "Tobias", serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.45;
}

/* Question number */
.lp-agency-quiz-wrap .question-index {
    color: inherit;
    font-weight: inherit;
    margin-right: 2px;
}

/* ---------- QUESTION CONTENT / DESCRIPTION ---------- */
/* Extra .question beats LP's `.question .question-content` (30px) */
.lp-agency-quiz-wrap .question .question-content {
    font-size: 16px;
    color: #444;
    margin-bottom: 14px;
    line-height: 1.65;
}

/* Collapse empty question-content divs (common on fill-in-blank) */
.lp-agency-quiz-wrap .question-content:empty {
    display: none;
}

/* ---------- FILL IN BLANKS ---------- */
.lp-agency-quiz-wrap .lp-fib-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.65;
    color: #444;
    margin-top: 0;
}

.lp-agency-quiz-wrap .lp-fib-content .lp-fib-input {
    display: block !important;
    width: 100% !important;
    margin-top: 12px;
}

.lp-agency-quiz-wrap .lp-fib-content input[type=text] {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e0db;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: #1f1f1f;
    outline: none;
    transition: border-color 0.2s;
}

.lp-agency-quiz-wrap .lp-fib-content input[type=text]:focus {
    border-color: var(--agency-primary-color);
}

.lp-agency-quiz-wrap .lp-fib-content input[type=text]::placeholder {
    color: #aaa;
    font-weight: 400;
}

/* Reduce empty space below quiz content */
.lp-agency-quiz-wrap .content-item-summary {
    padding-bottom: 0;
}

.lp-agency-quiz-wrap #learn-press-quiz-app {
    margin-bottom: 16px;
}

/* ---------- QUIZ PAGE FOOTER ---------- */
/* Quiz footer matches the lesson footer — full-width, no cap. */

/* TA-2572: Hide the Questions/Duration/Passing-grade meta and the inline
   "Start" button that the LP React app renders in the page body. The same
   stats are re-rendered inside the sticky footer (see #lp-agency-footer
   .quiz-intro below), above the "Begin Quiz" CTA. */
.lp-agency-quiz-wrap .quiz-intro,
.lp-agency-quiz-wrap .quiz-buttons .lp-button.start {
    display: none !important;
}

/* ---------- QUIZ INTRO META (footer) ---------- */
/* Quiz intro stats shown in the bottom bar above the "Begin Quiz" button
   on the uninitiated quiz landing page. Styled as small stat cards
   separated by vertical dividers. Rendered server-side in the footer,
   so it is NOT inside .lp-agency-quiz-wrap and is unaffected by the
   hide rule above. */
#lp-agency-footer .quiz-intro {
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* When the intro is present, tighten the navbar padding so the whole
   footer feels balanced (normally navbar has 32px top+bottom). */
#lp-agency-footer .quiz-intro + .ctm-lesson-navbar {
    padding-top: 14px;
    padding-bottom: 18px;
}
#lp-agency-footer .quiz-intro-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 28px;
    border-right: 1px solid #e2e0db;
    min-width: 120px;
    order: 0 !important;   /* LP core reorders items — keep DOM order */
    margin: 0;
}
#lp-agency-footer .quiz-intro-item:last-child { border-right: none; }

/* Kill LP's default ::before icon glyphs */
#lp-agency-footer .quiz-intro-item::before {
    content: none !important;
    display: none !important;
}

#lp-agency-footer .quiz-intro-item__title {
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#lp-agency-footer .quiz-intro-item__title::after { content: none; } /* hide any trailing colon */

#lp-agency-footer .quiz-intro-item__content {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Mobile: slim horizontal row, no dividers */
@media (max-width: 640px) {
    #lp-agency-footer .quiz-intro {
        gap: 6px;
        margin-bottom: 12px;
    }
    #lp-agency-footer .quiz-intro-item {
        padding: 0 12px;
        min-width: 0;
        flex: 1 1 0;
        border-right: none;
    }
    #lp-agency-footer .quiz-intro-item__title {
        font-size: 10px;
    }
    #lp-agency-footer .quiz-intro-item__content {
        font-size: 15px;
    }
}

/* ---------- QUIZ PROGRESS ---------- */
.lp-agency-quiz-wrap .quiz-progress {
    background: #f5eeee;
    background: color-mix(in srgb, var(--agency-primary-color) 6%, #f5f5f3);
    border-radius: 6px;
}

/* ---------- QUIZ RESULT ---------- */
.lp-agency-quiz-wrap .quiz-result .result-grade svg circle {
    stroke: var(--agency-primary-color);
}

.lp-agency-quiz-wrap .quiz-result .result-grade::before {
    border-color: #e2e0db;
}

.lp-agency-quiz-wrap .quiz-result.passed .result-achieved {
    color: var(--agency-primary-color);
}

.lp-agency-quiz-wrap .quiz-result.passed .result-message {
    background: #3bb54a;
    border-radius: 4px;
}

.lp-agency-quiz-wrap .quiz-result .result-message {
    border-radius: 4px;
}

.lp-agency-quiz-wrap .quiz-result .result-statistic .result-statistic-field span::before {
    color: var(--agency-primary-color);
}

/* ---------- QUIZ SCROLL FIX ---------- */
/* On quiz pages the #lp-agency-content container uses overflow:hidden
   which clips longer quizzes. Switch to scroll so content is reachable,
   and enforce a min-height so the quiz area remains usable on short
   viewports. */
body.course-item-lp_quiz .lp-agency-lesson-page-container #lp-agency-content {
    overflow-y: auto !important;
    min-height: 320px !important;
}


/* ---------- QUIZ BUTTONS / PAGINATION BAR ---------- */

/* Disable "Next" / "Finish Quiz" until the user selects an answer.
   .quiz-no-answer is toggled by quiz-overrides.js.
   Uses dimmed colours instead of opacity so the ::after tooltip
   pseudo-element isn't affected by a parent opacity cascade. */
.lp-agency-lesson-page-container .ctm-lesson-navbar .quiz-question-nav[data-dir="next"].quiz-no-answer,
.lp-agency-lesson-page-container .ctm-lesson-navbar .quiz-complete-form .ctm-complete-btn.quiz-no-answer {
    background: #c8c8c8 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: not-allowed !important;
    position: relative;
}

/* Tooltip shown on hover / tap of a gated button */
.quiz-question-nav[data-dir="next"].quiz-no-answer::after,
.quiz-complete-form .ctm-complete-btn.quiz-no-answer::after {
    content: "Please provide an answer before continuing";
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 14px;
    border-radius: 6px;
    width: max-content;
    max-width: calc(100vw - 32px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 10;
}

/* Arrow tail — points down toward the button */
.quiz-question-nav[data-dir="next"].quiz-no-answer::before,
.quiz-complete-form .ctm-complete-btn.quiz-no-answer::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: #1a1a1a;
    border-bottom: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 11;
}

/* Show on hover or tap (JS adds .quiz-tooltip-show on click) */
.quiz-question-nav[data-dir="next"].quiz-no-answer:hover::after,
.quiz-complete-form .ctm-complete-btn.quiz-no-answer:hover::after,
.quiz-question-nav[data-dir="next"].quiz-tooltip-show::after,
.quiz-complete-form .ctm-complete-btn.quiz-tooltip-show::after,
.quiz-question-nav[data-dir="next"].quiz-no-answer:hover::before,
.quiz-complete-form .ctm-complete-btn.quiz-no-answer:hover::before,
.quiz-question-nav[data-dir="next"].quiz-tooltip-show::before,
.quiz-complete-form .ctm-complete-btn.quiz-tooltip-show::before {
    opacity: 1;
    visibility: visible;
}

/* (status-bar submit button is now fully hidden above) */

/* Hide the question pagination navigation entirely */
.lp-agency-quiz-wrap .quiz-buttons.align-center .button-left {
    display: none !important;
}



/* Responsive code Start */

@media screen and (max-width: 1366px) {

    .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn {
        min-width: 110px !important;
        width: 100%;
    }

    .lesson-main-content-wrapper.layout-B,
    .lesson-main-content-wrapper.layout-C {
        flex-direction: column;
        gap: 30px;
    }

    .lesson-main-content-wrapper.layout-B>div,
    .lesson-main-content-wrapper.layout-C>div,
    .lesson-main-content-wrapper.layout-A>div {
        width: 100% !important;
        margin: 0 !important;
    }

    .lesson-main-content-wrapper .content-window {
        min-height: 230px;
    }

    .lp-agency-lesson-page-container #learn-press-content-item.layout-C>.content-item-scrollable>.content-item-wrap,
    .lp-agency-lesson-page-container #learn-press-content-item.layout-B>.content-item-scrollable>.content-item-wrap {
        overflow-y: auto !important;
        /* max-height: 600px; */
    }


}


/* ---------- Desktop / Tablet (>=1025px): framed windows ---------- */
@media (min-width: 1025px) {

    /* Make image windows behave like “frames” */
    .content-window.type-image,
    .content-window.type-image .window-inner,
    .content-window.type-image .lesson-image {
        height: 100%;
    }

    .content-window.type-image .lesson-image {
        overflow: hidden;
    }

    .content-window.type-image .lesson-image__img {
        width: 100%;
        height: 100%;
        object-position: center;
    }

    .content-window.type-image .lesson-image[data-fit="cover"] .lesson-image__img {
        object-fit: cover;
    }

    .content-window.type-image .lesson-image[data-fit="contain"] .lesson-image__img {
        object-fit: contain;
    }
}

@media screen and (max-width: 1024px) {
    .course-curriculum {
        max-height: calc(100vh - 247px - 42px - 73px);
    }

    .admin-bar .lp-agency-lesson-page-container #lp-agency-sidebar {
        max-height: calc(100% - 104px);
    }

    .lp-agency-lesson-page-container #lp-agency-footer {
        bottom: 72px;
    }

    body.single-lp_course .desktop-top-bar {
        display: none !important;
    }

 
    .lp-agency-lesson-page-container #lp-agency-sidebar {
        max-height: calc(100% - 72px);
    }

    .admin-bar .lesson-main-content-wrapper .content-window,
    .lesson-main-content-wrapper .content-window {
        min-height: calc(100svh - 255px - 40px - 60px) !important;
        max-height: calc(100svh - 255px - 40px - 70px) !important;
    }

    .lp-agency-lesson-page-container {
        padding-top: 65px;
    }

    body.admin-bar .lp-agency-lesson-page-container {
        padding-top: 32px;
    }

    .admin-bar .lp-agency-lesson-page-container #lp-agency-sidebar {
        max-height: calc(100svh - 118px);
    }
    .lp-agency-lesson-page-container #lp-agency-course>.lp-agency-list-content-wrap {
        max-height: calc(100svh - 104px) !important;
        overflow-y: auto !important;
    }
    /* ========== 1) BREAK LEARNPRESS “HEIGHT CLAMPS” / SCROLL JAIL ========== */

    /* If LP/theme disables body scroll */
    html,
    body,
    body.course-scroll-remove {
        height: auto !important;
        overflow-y: auto !important;
    }

    body.course-scroll-remove {
        position: static !important;
    }

    /* Background owner must be allowed to grow */
    .lp-agency-list-content-wrap {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Kill the calc(100svh - …) clamp + any overflow hiding up the chain */
    #thim-body,
    #lp-single-course,
    .lp-agency-lesson-page-container,
    #lp-agency-content,
    .lp-agency-lesson-page-container #lp-agency-content,
    #learn-press-content-item,
    .learn-press-content-item,
    .content-item-scrollable,
    .content-item-wrap {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* ========== 2) Replace fixed padding-bottom:243px with footer-based ========== */
    :root {
        --lp-agency-footer-h: 121px;
    }

    /* your measured footer height */

    .lp-agency-lesson-page-container #lp-agency-course {
        /* enough clearance so content doesn't sit under footer/nav */
        padding-bottom: calc(var(--lp-agency-footer-h) + 24px) !important;
    }

    /* ========== 3) Stack all layouts into one column on mobile ========== */
    .lesson-main-content-wrapper.layout-A,
    .lesson-main-content-wrapper.layout-B,
    .lesson-main-content-wrapper.layout-C {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;

        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Defeat inline desktop widths (100% / 60/37 / 37/60) for ALL window types */
    .lesson-main-content-wrapper.layout-A>.content-window,
    .lesson-main-content-wrapper.layout-B>.content-window,
    .lesson-main-content-wrapper.layout-C>.content-window {
        width: 100% !important;
        max-width: none !important;

        flex: 0 0 auto !important;
        flex-basis: auto !important;

        margin: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* ========== 4) IMPORTANT: only “de-frame” IMAGE windows ==========
     - Keep backgrounds/padding for text windows (type-free etc.)
     - Remove gray frame only for image windows
  */
    .lesson-main-content-wrapper.layout-A>.content-window.type-image,
    .lesson-main-content-wrapper.layout-B>.content-window.type-image,
    .lesson-main-content-wrapper.layout-C>.content-window.type-image {
        background: transparent !important;
        /* lets configured page background show */
    }

    .lesson-main-content-wrapper.layout-A>.content-window.type-image .window-inner,
    .lesson-main-content-wrapper.layout-B>.content-window.type-image .window-inner,
    .lesson-main-content-wrapper.layout-C>.content-window.type-image .window-inner {
        padding: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* ========== 5) Mobile images: natural aspect ratio, no distortion ==========
     Also beats theme rules like aspect-ratio/max-height.
  */
    .lp-agency-lesson-page-container .content-window.type-image img,
    .lesson-main-content-wrapper.layout-A img.lesson-image__img,
    .lesson-main-content-wrapper.layout-B img.lesson-image__img,
    .lesson-main-content-wrapper.layout-C img.lesson-image__img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: unset !important;
    }

    .lp-agency-list-content-wrap:has(.layout-A) {
        min-height: unset !important;
    }




    /* =========================================================
   BRENDAN FINAL MOBILE HEIGHT / BACKGROUND FIX
   footer: 242px
   header: 87px + 56.8px = 143.8px
   ========================================================= */

    /* 1) Remove theme’s artificial mobile top spacing */
    .lp-agency-lesson-page-container {
        padding-top: 0 !important;
    }

    /* 2) Background should reach the bottom of the visible lesson area */
    .lp-agency-list-content-wrap {
        height: auto !important;
        min-height: calc(100svh - 385.8px) !important;
        /* footer + header total */
        max-height: none !important;
        overflow: visible !important;
        padding-top: 150px !important;
    }


    /* 4) Ensure page wrappers don’t enforce 100% heights */
    #main-content,
    #lp-single-course {
        height: auto !important;
        min-height: 0 !important;
    }
    .admin-bar .lp-agency-lesson-page-container #lp-agency-content, .lp-agency-lesson-page-container #lp-agency-content {
        height: calc(100svh - 355px) !important;
        overflow: hidden !important;
        overflow-y: auto !important;
    }

    /* Quiz: add clearance so content scrolls above the fixed footer */
    .lp-agency-quiz-wrap {
        padding-bottom: 140px;
    }
}

@media screen and (max-width: 880px) {
    .lp-agency-lesson-page-container .ctm-lesson-navbar {
        flex-wrap: wrap;
    }

    .ctm-footer-center {
        max-width: 100%;
        order: -1;
        margin-bottom: 10px;
    }

    .lp-agency-list-content-wrap {
        padding: 40px 30px;
    }

    .lp-agency-lesson-page-container .window-inner {
        padding: 24px;
    }

    body.course-item-popup #learn-press-content-item .content-item-wrap p.edit-course-item-link {
        padding: 0 24px;
    }

    .lp-agency-lesson-page-container .ctm-progress-bar-bg {
        max-width: 100%;
    }

    .lp-agency-lesson-page-container .ctm-lesson-navbar {
        padding: 24px;
    }

    .course-curriculum {
        max-height: calc(100vh - 247px - 40px - 73px);
    }

    .lp-agency-lesson-page-container .window-inner table {
        display: block;
        table-layout: auto;
    }

    .lesson-main-content-wrapper.layout-B .video-container,
    .lesson-main-content-wrapper.layout-C .video-container,
    .lesson-main-content-wrapper.layout-A .video-container {
        padding: 24px;
    }
}

@media (min-width: 769px) and (max-width: 782px) {


    body.admin-bar .lp-agency-lesson-page-container {
        padding-top: 18px;
    }
}

@media screen and (max-width: 768px) {
    .lp-agency-lesson-page-container {
        padding-top: 56px;
    }

    body.admin-bar .lp-agency-lesson-page-container {
        padding-top: 10px;
    }

}

@media screen and (max-width: 767px) {
    .lp-agency-lesson-page-container #lp-agency-course {
        display: flex;
        flex-direction: column;
    }

    .lp-agency-lesson-page-container #lp-agency-sidebar {
        max-width: 100%;
    }

    .lp-agency-list-content-wrap {
        /* Top 72px matches the desktop gap between the course banner and the
           content; the fixed `.ctm-curriculum-header` otherwise sits flush on
           the first content row. */
        padding: 72px 20px 24px;
        max-width: 100%;
    }

    body.course-item-popup {
        overflow-y: auto !important;
    }

    body.course-item-popup #learn-press-content-item .content-item-wrap {
        max-height: 500px;
        padding-bottom: 15px !important;
    }

    /* .lp-agency-lesson-page-container #learn-press-content-item.layout-C .content-item-wrap .lesson-main-content-wrapper.layout-C > div, 
    .lp-agency-lesson-page-container #learn-press-content-item.layout-B .content-item-wrap .lesson-main-content-wrapper.layout-B > div {
        max-height: 500px;
    } */

    /* Override fixed height for video windows on mobile */
    .lp-agency-lesson-page-container .content-window:has(.video-container) {
        height: auto !important;
        min-height: unset;
    }

    .lp-agency-lesson-page-container .content-window {
        height: 500px;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    .lesson-main-content-wrapper {
        flex-direction: column;
    }

    .course-curriculum {
        overflow-y: unset;
        max-height: unset;
    }

    .lp-agency-lesson-page-container #lp-agency-footer {
        position: relative;
    }

    .lp-agency-lesson-page-container .ctm-lesson-navbar,
    .lp-agency-lesson-page-container .window-inner {
        padding: 20px;
    }

    .lp-agency-lesson-page-container .course-item .course-item__link {
        padding: 10px 36px 10px 24px;
    }

    body.course-item-popup #learn-press-content-item .content-item-wrap p.edit-course-item-link {
        padding: 0 20px;
    }

    .lp-agency-lesson-page-container .course-section__items {
        padding: 8px 0 0;
    }


    .lp-agency-lesson-page-container .ctm-course-image {
        height: auto;
        min-height: 115px;
    }

    .lesson-main-content-wrapper.layout-B .video-container,
    .lesson-main-content-wrapper.layout-C .video-container,
    .lesson-main-content-wrapper.layout-A .video-container {
        padding: 20px;
    }

    .lesson-main-content-wrapper.layout-B,
    .lesson-main-content-wrapper.layout-C {
        gap: 20px;
    }

    .lesson-main-content-wrapper .content-window {
        min-height: unset;
        align-content: center;
    }

    .lp-agency-lesson-page-container #learn-press-content-item .content-item-wrap .lesson-main-content-wrapper .type-free,
    .lp-agency-lesson-page-container #learn-press-content-item .content-item-wrap .lesson-main-content-wrapper .type-video,
    .lp-agency-lesson-page-container #learn-press-content-item .content-item-wrap .lesson-main-content-wrapper .type-image {
        max-height: unset !important;
    }

    .lp-agency-lesson-page-container #learn-press-content-item.layout-C>.content-item-scrollable>.content-item-wrap,
    .lp-agency-lesson-page-container #learn-press-content-item.layout-B>.content-item-scrollable>.content-item-wrap {
        overflow-y: unset !important;
        max-height: unset;
    }

    .lp-agency-lesson-page-container #learn-press-content-item.layout-C>.content-item-scrollable>.content-item-wrap.type-free,
    .lp-agency-lesson-page-container #learn-press-content-item.layout-B>.content-item-scrollable>.content-item-wrap.type-free,
    .lp-agency-lesson-page-container #learn-press-content-item.layout-A>.content-item-scrollable>.content-item-wrap.type-free {
        overflow-y: auto !important;
        max-height: 600px;
    }

    .lp-agency-lesson-page-container #lp-agency-sidebar {
        max-height: 100%;
        overflow: hidden;
    }

    .lp-agency-lesson-page-container #lp-agency-footer {
        position: fixed;
        height: 100%;
        width: 100%;
        z-index: 100;
        left: 0;
        bottom: 121px;
        top: auto;
        min-height: 121px;
        border: 0;
        max-height: 121px;
    }

    .single-lp_course .mobile-bottom-nav {
        border: 0;
        margin: 0;
    }

    .lp-agency-lesson-page-container #lp-agency-footer .ctm-lesson-navbar span.ctm-label {
        color: #212529 !important;
    }

    .lp-agency-lesson-page-container #lp-agency-footer .ctm-lesson-navbar>div {
        min-width: calc(50% - 10px);
    }

    .lp-agency-lesson-page-container #learn-press-content-item.layout-C .content-item-wrap .lesson-main-content-wrapper.layout-C>div,
    .lp-agency-lesson-page-container #learn-press-content-item.layout-B .content-item-wrap .lesson-main-content-wrapper.layout-B>div {
        max-height: 500px;
    }

    .lp-agency-lesson-page-container .ctm-sidebar-footer {
        position: fixed;
        bottom: 72px;
        z-index: 2;
        width: 100%;
        max-width: 100%;
        background: #fff;
    }

    .admin-bar .lp-agency-lesson-page-container #lp-agency-sidebar {
        max-height: 100%;
    }

    .lp-agency-lesson-page-container #lp-agency-sidebar {
        overflow-y: unset;
    }

    .lp-agency-lesson-page-container #lp-agency-course {
        height: 100%;
    }

    .lp-agency-lesson-page-container #lp-agency-content,
    .admin-bar .lp-agency-lesson-page-container #lp-agency-content,
    .lp-agency-lesson-page-container #lp-agency-content {
        height: calc(100svh - 348px) !important;
    }

    body.admin-bar .lp-agency-lesson-page-container {
        padding-top: 126px;
    }

    .lp-agency-lesson-page-container #lp-agency-sidebar .ctm-curriculum-header {
        position: fixed;
        top: 57px;
        width: 100%;
        z-index: 111;
    }

    .lp-agency-lesson-page-container {
        padding-top: 172px;
    }

    .lp-agency-lesson-page-container #lp-agency-sidebar .lp-course-curriculum {
        display: none;
    }

    body.course-item-popup #learn-press-content-item .content-item-wrap {
        padding-bottom: 0 !important;
        max-height: unset !important;
    }

    .admin-bar .lp-agency-lesson-page-container #lp-agency-content,
    .lp-agency-lesson-page-container #lp-agency-content {
        height: calc(100svh - 463px) !important;
    }

    .admin-bar .lesson-main-content-wrapper .content-window,
    .lesson-main-content-wrapper .content-window {
        /* min-height: calc(100svh - 463px) !important; */
        max-height: calc(100svh - 463px) !important;
        height: auto !important;
    }


    .lp-agency-lesson-page-container #lp-agency-course {
        padding-bottom: 243px !important;
    }

    .lp-agency-lesson-page-container #lp-agency-content  .content-item-scrollable {
        height: 100% !important;
        max-height: 100% !important;
    }
     .lp-agency-lesson-page-container #lp-agency-content {
        height: auto !important;
        min-height: calc(100svh - 457px) !important;
    }
    .admin-bar .lp-agency-lesson-page-container #lp-agency-content{
        min-height: calc(100svh - 503px) !important;
        height: auto !important;

    }
    .lp-agency-lesson-page-container #lp-agency-course>.lp-agency-list-content-wrap {
       max-height: none !important;
        overflow-y: visible !important;
    }

    /* Quiz mobile overrides */
    .lp-agency-quiz-wrap .quiz-questions {
        padding: 10px 0;
    }

    .lp-agency-quiz-wrap .quiz-status {
        flex-wrap: wrap;
        gap: 8px;
    }

    .lp-agency-quiz-wrap .quiz-buttons .lp-button {
        width: 100%;
        text-align: center;
    }

    /* No bottom radius on footer bar */
    body.course-item-lp_quiz #lp-agency-footer,
    body.course-item-lp_lesson #lp-agency-footer {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* First question: Previous is hidden, so Next goes full width */
    .ctm-footer-left:has(.quiz-nav-hidden) {
        display: none;
    }
    .lp-agency-lesson-page-container #lp-agency-footer .ctm-lesson-navbar > .ctm-footer-left:has(.quiz-nav-hidden) ~ .ctm-footer-right {
        min-width: 100% !important;
    }

    /* Kill forced min-heights — content should shrink-wrap */
    body.course-item-lp_quiz .lp-agency-lesson-page-container #lp-agency-content,
    body.course-item-lp_quiz.admin-bar .lp-agency-lesson-page-container #lp-agency-content,
    body.course-item-lp_lesson .lp-agency-lesson-page-container #lp-agency-content,
    body.course-item-lp_lesson.admin-bar .lp-agency-lesson-page-container #lp-agency-content {
        min-height: 0 !important;
        height: auto !important;
    }

    body.course-item-lp_quiz .lp-agency-lesson-page-container #lp-agency-course,
    body.course-item-lp_lesson .lp-agency-lesson-page-container #lp-agency-course {
        padding-bottom: 0 !important;
    }

    /* Centralise the stacked fixed bottom UI so all clearance flows from one
       source. Prev/Next bar (121px) + sidebar "Back to overview" (~51px) +
       mobile tab nav (~72px) ≈ 244px. `--lp-agency-mobile-bottom-ui-h` can
       be bumped by JS later to match the actual rendered heights. */
    body.course-item-lp_quiz,
    body.course-item-lp_lesson {
        --lp-agency-mobile-bottom-ui-h: 244px;
    }

    body.course-item-lp_quiz .lp-agency-list-content-wrap,
    body.course-item-lp_lesson .lp-agency-list-content-wrap {
        min-height: 0 !important;
        /* Buffer 24px so the last content sits comfortably above the fixed UI. */
        padding-bottom: calc(var(--lp-agency-mobile-bottom-ui-h) + 24px) !important;
    }

    /* Kill the tablet-level 140px padding-bottom on quiz-wrap: all clearance
       for mobile is now on `.lp-agency-list-content-wrap`. Stacking both
       produced ~400px of dead space below the last question. */
    body.course-item-lp_quiz .lp-agency-quiz-wrap {
        padding-bottom: 0 !important;
    }
}

/* Responsive code End */

/* ── Begin Quiz CTA on the quiz landing page (TA-2572) ── */
/* When the user has not yet started the quiz, the "Begin Quiz" button
   spans the full footer width — Previous and the Course-progress block
   are hidden in this state so the CTA occupies the entire bar (matches
   the quiz-completion "Finish Course" treatment). */
body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar:has(.ctm-start-quiz-btn) .ctm-footer-left,
body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar:has(.ctm-start-quiz-btn) .ctm-footer-center {
    display: none;
}

body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .ctm-footer-right:has(.ctm-start-quiz-btn) {
    flex: 1 1 100%;
    width: 100%;
    display: flex;
}

body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-start-quiz-btn {
    width: 100%;
    max-width: 792px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0 !important;
    padding: 12px 28px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-start-quiz-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    opacity: 0.95;
}

body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-start-quiz-btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-start-quiz-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-start-quiz-btn[disabled],
body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-start-quiz-btn.loading {
    cursor: progress;
    opacity: 0.75;
    pointer-events: none;
}

/* When the center progress block is absent (lesson pages), push prev/next to the ends cleanly. */
body.course-item-lp_lesson .lp-agency-lesson-page-container .ctm-lesson-navbar {
    justify-content: space-between;
}

body.course-item-lp_lesson .lp-agency-lesson-page-container .ctm-lesson-navbar .ctm-footer-left:empty {
    /* Reserve space so the Next button stays right-aligned when there is no Previous. */
    flex: 0 0 auto;
    visibility: hidden;
}

@media screen and (max-width: 880px) {
    body.course-item-lp_quiz .lp-agency-lesson-page-container .ctm-lesson-navbar .agency-nav-btn.ctm-start-quiz-btn {
        width: 100%;
        min-width: 0 !important;
    }
}