/* ============================================================
   SFC LEARNING PLAYER — UI v5 (pixel-match Figma)
   ============================================================ */

/* ── Page wrapper ───────────────────────────────────────── */
.sfc-lp.wsus__course_video {
    background: #F1F8F5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 32px;
    gap: 32px;
    min-height: 100vh;
}

/* ── Left column ────────────────────────────────────────── */
.wsus__course_video_player.sfc-lp-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 0% !important;
}

/* ── Col header: breadcrumb + course title ──────────────── */
.sfc-col-header { display: flex; flex-direction: column; gap: 8px; }
.sfc-breadcrumb { display: flex; align-items: center; gap: 8px; }
.sfc-breadcrumb span { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(113, 121, 116, 0.7); line-height: 10px; }
.sfc-breadcrumb-sep { font-size: 7px; color: rgba(113, 121, 116, 0.7); }
.sfc-breadcrumb-cat { color: #006D39 !important; }
.sfc-course-title { font-size: 36px; font-weight: 700; color: #0D3D2D; margin: 0; line-height: 48px; letter-spacing: -0.9px; }

/* ── Mobile header ──────────────────────────────────────── */
.sfc-mobile-hdr { display: none; }
.sfc-sidebar-backdrop { display: none; }
@media (max-width: 991px) {
    /* The base theme's .wsus__course_header is itself `position:fixed`, but
       our custom progress row is a separate sibling and would scroll away
       from it. Make the whole .sfc-mobile-hdr unit fixed instead, and drop
       the inner element back to static so both rows move together. */
    .sfc-mobile-hdr {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1020;
    }
    .wsus__course_video .wsus__course_header { position: static !important; width: auto !important; padding: 12px 16px !important; flex-wrap: nowrap; gap: 10px; }
    .wsus__course_video .wsus__course_header a,
    .wsus__course_video .wsus__course_header p { font-size: 13px; }
    .sfc-mhdr-back { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

    /* The base theme's toggle button is `position:absolute` with a white
       background — invisible against a white icon. Rebuild it as a normal,
       clearly visible pill sitting in the flex row instead. */
    .wsus__course_header_btn.sfc-materi-btn {
        display: inline-flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        align-items: center;
        gap: 6px;
        padding: 8px 14px !important;
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        font-size: 12px !important;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #fff !important;
        line-height: 1;
        flex-shrink: 0;
        font-family: inherit;
        cursor: pointer;
    }
    .wsus__course_header_btn.sfc-materi-btn i { color: #fff !important; font-size: 12px; }
    .wsus__course_header_btn.sfc-materi-btn:hover { background: rgba(255, 255, 255, 0.22) !important; }

    .sfc-mhdr-progress { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; background: #1B3A2D; }
    .sfc-mhdr-progress__bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
    .sfc-mhdr-progress__fill { height: 100%; background: #1DB968; border-radius: 999px; transition: width 0.5s ease; }
    .sfc-mhdr-progress__pct { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.85); flex-shrink: 0; }
}

/* ── Video Card ─────────────────────────────────────────── */
.sfc-video-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; display: flex; flex-direction: column; padding: 16px; gap: 24px; }
.sfc-player-wrap { border-radius: 16px; overflow: hidden; background: #000; min-height: 200px; }
.sfc-video-card .video-payer { border-radius: 16px; overflow: hidden; background: #000; }
.sfc-video-card .video-payer iframe:not(.sfc-ytp__frame),
.sfc-video-card .video-payer video {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}
.sfc-video-card .video-payer .sfc-ytp {
    width: 100%;
}

/* .resource-file/.file-info (quiz-start card, document download card, live-session
   card, error states) is plain themed content with dark heading/body colors, but it
   always renders inside .video-payer's black background — without this override its
   text is unreadable (dark-on-black), same root cause fixed for .sfc-quiz-inline. */
.video-payer .file-info h6 { color: #fff; }
.video-payer .file-info p:not(.text-danger) { color: rgba(255, 255, 255, 0.75); }

/* ── Info Bar ───────────────────────────────────────────── */
.sfc-info-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 8px; }
.sfc-info-left { flex: 1; min-width: 0; }
.sfc-lesson-title { font-size: 24px; font-weight: 700; color: #161D1B; margin: 0 0 8px; line-height: 31px; letter-spacing: -0.6px; }
.sfc-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.sfc-lesson-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(153, 243, 177, 0.3); color: #006D39; border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.sfc-lesson-badge .fa-check-circle { font-size: 13.33px; color: #006D39; }
.sfc-meta-sep { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #717974; font-weight: 500; letter-spacing: 0.05em; }
.sfc-meta-sep i { font-size: 15px; color: #717974; }
.sfc-star-ico { color: #FFB800 !important; }
.sfc-rating-count { font-size: 10px; color: #717974; font-weight: 700; letter-spacing: 0.02em; }
.sfc-review-trigger { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; border: 1px solid #C1C8C3; border-radius: 12px; background: #fff; color: #414844; font-size: 12px; font-weight: 700; padding: 10px 20px; cursor: pointer; transition: border-color 0.15s, color 0.15s; letter-spacing: 0.05em; height: 48px; }
.sfc-review-trigger:hover { border-color: #9CA3AF; color: #111827; }

/* ── Description Card (tabs + nav) ─────────────────────── */
.sfc-desc-card { background: rgba(255, 255, 255, 0.5); border: 1px solid #FFFFFF; border-radius: 24px; overflow: hidden; }
.sfc-tabs-wrap { background: transparent; }
.sfc-tab-nav { display: flex; align-items: flex-end; gap: 0; padding: 0 32px; border-bottom: 1px solid rgba(193, 200, 195, 0.3); margin: 0; list-style: none; flex-wrap: nowrap; }
.sfc-tab-nav .nav-item { margin: 0; }
.sfc-tab-nav .nav-link,
.sfc-tab-nav .nav-link:not(.active) { background: transparent !important; color: #6B7280 !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 14px 16px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin: 0 !important; box-shadow: none !important; }
.sfc-tab-nav .nav-link:hover { color: #374151 !important; border-bottom-color: #D1D5DB !important; background: transparent !important; }
.sfc-tab-nav .nav-link.active { color: #0D3D2D !important; border-bottom-color: #0D3D2D !important; font-weight: 700 !important; background: transparent !important; }
.sfc-tab-content { padding: 32px; }
.sfc-about-title { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #006D39 !important; margin-bottom: 16px !important; line-height: 12px !important; }
.sfc-pdf-material__card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; background: #F0FAF4; border: 1px solid #D7ECDF; border-radius: 12px; }
.sfc-pdf-material__card h6 { margin: 0; font-size: 15px; font-weight: 700; color: #0D3D2D; }
.sfc-pdf-material__card .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sfc-pdf-material__actions { display: flex; align-items: center; gap: 10px; }
.sfc-pdf-material__download { padding: 8px 12px !important; }
.sfc-material-links { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sfc-material-links__item { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; color: #0D3D2D; font-weight: 600; font-size: 14px; transition: all 0.15s; }
.sfc-material-links__item:hover { border-color: #18A167; background: #F0FAF4; color: #0D3D2D; }
.sfc-material-links__item i { color: #18A167; }

/* ── Inline Quiz (rendered inside the video frame) ─────────── */
/* .video-payer defaults to a black video-letterbox background; the quiz
   is regular light-themed content, so it needs its own opaque surface or
   dark question text becomes unreadable against the black parent. */
.sfc-quiz-inline { background: #fff; border-radius: 16px; padding: 36px; max-width: 100%; }
@media (max-width: 767px) { .sfc-quiz-inline { padding: 22px; } }
.sfc-quiz-inline__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.sfc-quiz-stat { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: #F0FAF4; border: 1px solid #D7ECDF; border-radius: 12px; min-width: 0; }
.sfc-quiz-stat i { color: #18A167; font-size: 19px; flex-shrink: 0; }
.sfc-quiz-stat div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sfc-quiz-stat strong { font-size: 15px; color: #0D3D2D; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-quiz-stat span { font-size: 11px; color: #6B7280; font-weight: 500; }
.sfc-quiz-inline__notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; background: #FFF8EC; border: 1px solid #F5E1B8; border-radius: 12px; color: #92650F; font-size: 13.5px; line-height: 1.6; margin-bottom: 32px; }
.sfc-quiz-inline__notice i { margin-top: 2px; flex-shrink: 0; }
.sfc-quiz-inline__info { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; background: #EEF6FD; border: 1px solid #C9E2F5; border-radius: 12px; color: #1D4E73; font-size: 13.5px; line-height: 1.6; margin-bottom: 24px; }
.sfc-quiz-inline__info i { margin-top: 2px; flex-shrink: 0; color: #2E7BB8; }
.sfc-quiz-question { padding: 8px 0 4px; }
.sfc-quiz-question h6 { font-size: 16px; font-weight: 700; color: #161D1B; margin: 0 0 24px; line-height: 1.65; word-break: break-word; }
/* the result/review screen lists every question at once, so each needs its
   own breathing room and a divider — the paginated form only shows one
   question at a time and doesn't need either. */
.sfc-quiz-review .sfc-quiz-question { padding: 32px 0; border-top: 1px solid rgba(193, 200, 195, 0.3); }
.sfc-quiz-review .sfc-quiz-question:first-of-type { border-top: none; padding-top: 0; }
.sfc-quiz-answers { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sfc-quiz-answer { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #fff; border: 1.5px solid #E5E7EB; border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; min-width: 0; }
.sfc-quiz-answer:hover { border-color: #9CA3AF; }
.sfc-quiz-answer input[type="radio"] { display: none; }
.sfc-quiz-answer__mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C1C8C3; flex-shrink: 0; margin-top: 1px; position: relative; transition: border-color 0.15s; }
.sfc-quiz-answer input[type="radio"]:checked ~ .sfc-quiz-answer__mark { border-color: #18A167; }
.sfc-quiz-answer input[type="radio"]:checked ~ .sfc-quiz-answer__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #18A167; }
.sfc-quiz-answer:has(input[type="radio"]:checked),
.sfc-quiz-answer--checked { border-color: #18A167; background: #F0FAF4; }
.sfc-quiz-answer__text { font-size: 14.5px; color: #374151; font-weight: 500; line-height: 1.6; word-break: break-word; min-width: 0; }
.sfc-quiz-inline__submit { text-align: right; margin-top: 24px; }
.sfc-quiz-inline__submit .btn { padding: 12px 32px; }

/* ── Quiz progress (stepper + dots) ─────────────────────── */
.sfc-quiz-progress { margin-bottom: 32px; }
.sfc-quiz-progress__label { font-size: 12.5px; font-weight: 700; color: #414844; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.sfc-quiz-progress__bar { height: 6px; background: #EEF2F0; border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.sfc-quiz-progress__fill { height: 100%; background: #18A167; border-radius: 999px; transition: width 0.25s ease; }
.sfc-quiz-dots { display: flex; flex-wrap: wrap; gap: 10px; }
.sfc-quiz-dot { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #D1D5DB; background: #fff; color: #6B7280; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sfc-quiz-dot:hover { border-color: #9CA3AF; }
.sfc-quiz-dot.is-answered { border-color: #18A167; background: #F0FAF4; color: #0D3D2D; }
.sfc-quiz-dot.is-active { border-color: #0D3D2D; background: #0D3D2D; color: #fff; }

/* ── Quiz question nav (prev / next / submit) ───────────── */
.sfc-quiz-inline__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(193, 200, 195, 0.3); }
.sfc-quiz-inline__nav .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; white-space: nowrap; }
.sfc-quiz-prev-btn { margin-right: auto; }
.sfc-quiz-next-btn, .sfc-quiz-submit-btn { margin-left: auto; }
@media (max-width: 480px) {
    .sfc-quiz-inline__nav .btn span { display: none; }
    .sfc-quiz-inline__nav .btn { padding: 12px 18px; }
}

.sfc-quiz-answer--readonly { cursor: default; }
.sfc-quiz-answer--readonly:hover { border-color: #E5E7EB; }
.sfc-quiz-answer--correct { border-color: #18A167 !important; background: #F0FAF4; }
.sfc-quiz-answer--correct .sfc-quiz-answer__mark { border-color: #18A167; }
.sfc-quiz-answer--correct .sfc-quiz-answer__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #18A167; }
.sfc-quiz-answer--wrong { border-color: #E4534B !important; background: #FDF1F0; }
.sfc-quiz-answer--wrong .sfc-quiz-answer__mark { border-color: #E4534B; }
.sfc-quiz-answer--wrong .sfc-quiz-answer__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #E4534B; }
.sfc-quiz-answer__ico { margin-left: auto; flex-shrink: 0; font-size: 12px; }
.sfc-quiz-answer--correct .sfc-quiz-answer__ico { color: #18A167; }
.sfc-quiz-answer--wrong .sfc-quiz-answer__ico { color: #E4534B; }

.sfc-quiz-result-hdr { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 20px; border-radius: 16px; margin-bottom: 20px; }
.sfc-quiz-result-hdr i { font-size: 36px; margin-bottom: 6px; }
.sfc-quiz-result-hdr h6 { margin: 0; font-size: 17px; font-weight: 700; }
.sfc-quiz-result-hdr span { font-size: 13px; color: #6B7280; }
.sfc-quiz-result-hdr--pass { background: #F0FAF4; }
.sfc-quiz-result-hdr--pass i { color: #18A167; }
.sfc-quiz-result-hdr--pass h6 { color: #0D3D2D; }
.sfc-quiz-result-hdr--fail { background: #FDF1F0; }
.sfc-quiz-result-hdr--fail i { color: #E4534B; }
.sfc-quiz-result-hdr--fail h6 { color: #7A2A25; }
.sfc-quiz-review { margin-top: 4px; }
.sfc-quiz-explanation { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 14px 18px; background: #F0FAF4; border: 1px solid #D7ECDF; border-radius: 12px; }
.sfc-quiz-explanation i { color: #18A167; font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.sfc-quiz-explanation strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #0D3D2D; margin-bottom: 4px; }
.sfc-quiz-explanation p { margin: 0; font-size: 13.5px; color: #374151; line-height: 1.6; word-break: break-word; }

@media (max-width: 767px) {
    .sfc-quiz-inline__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sfc-quiz-inline__submit { text-align: stretch; }
    .sfc-quiz-inline__submit .btn { width: 100%; }
}

/* ── Bottom Navigation ──────────────────────────────────── */
.sfc-bottom-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 32px 24px; border-top: 1px solid rgba(193, 200, 195, 0.3); }
.sfc-nav-btn { display: inline-flex; align-items: center; gap: 12px; border-radius: 16px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; flex-shrink: 0; border: none; }
.sfc-btn-prev { background: #fff; border: 1px solid #C1C8C3 !important; color: #374151; padding: 12px 24px 12px 16px; }
.sfc-btn-prev:hover:not(:disabled) { border-color: #9CA3AF !important; color: #111827; }
.sfc-btn-prev:disabled { opacity: 0.35; cursor: not-allowed; }
.sfc-btn-next { background: #0D3D2D; color: #fff; padding: 12px 16px 12px 24px; box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); }
.sfc-btn-next:hover:not(:disabled) { background: #0a2e1f; }
.sfc-btn-next:disabled { opacity: 0.35; cursor: not-allowed; }
.sfc-nav-icon-wrap { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; }
.sfc-nav-icon-wrap-l { background: #E8EFEC; color: #18A167; }
.sfc-btn-prev:disabled .sfc-nav-icon-wrap-l { background: #F3F4F6; }
.sfc-nav-icon-wrap-r { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sfc-nav-labels { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.sfc-nav-labels-r { text-align: right; align-items: flex-end; }
.sfc-nav-main-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: block; line-height: 15px; color: #717974; }
.sfc-btn-next .sfc-nav-main-lbl { color: rgba(255, 255, 255, 0.6); }
.sfc-nav-sub-lbl { font-size: 12px; font-weight: 700; color: #161D1B; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; line-height: 12px; letter-spacing: 0.05em; }
.sfc-btn-next .sfc-nav-sub-lbl { color: #fff; }
.sfc-progress-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sfc-progress-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #717974; line-height: 10px; }
.sfc-progress-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.sfc-progress-track { flex: 1; height: 6px; background: #E8EFEC; border-radius: 9999px; overflow: hidden; }
.sfc-progress-fill { height: 100%; background: #1DB968; border-radius: 9999px; transition: width 0.5s ease; }
.sfc-progress-pct { font-size: 12px; font-weight: 700; color: #1DB968; white-space: nowrap; letter-spacing: 0.05em; }

/* ── Sidebar (transparent flex-col container) ───────────── */
.sfc-lp-sidebar.wsus__course_sidebar { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; padding: 0 !important; position: sticky !important; top: 32px !important; align-self: flex-start !important; width: 320px !important; flex: 0 0 320px !important; }
@media (max-width: 1199px) {
    .sfc-lp-sidebar.wsus__course_sidebar { width: 100% !important; flex: 1 1 100% !important; position: relative !important; top: 0 !important; }
}
.sfc-sidebar-close-btn { display: none; position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 18px; color: #6B7280; cursor: pointer; z-index: 10; }

/* ── Module Card (white rounded shadow) ─────────────────── */
.sfc-module-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); overflow: hidden; display: flex; flex-direction: column; }

/* ── Module Block (chapter) ─────────────────────────────── */
.sfc-module-block { border-bottom: 1px solid rgba(193, 200, 195, 0.3); }
.sfc-module-hdr { padding: 24px; cursor: pointer; user-select: none; background: rgba(238, 245, 242, 0.3); border-bottom: 1px solid rgba(193, 200, 195, 0.3); transition: background 0.12s; }
.sfc-module-hdr:hover { background: rgba(238, 245, 242, 0.6); }
.sfc-module-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sfc-module-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #006D39; line-height: 10px; }
.sfc-module-dots { color: #717974; font-size: 13px; }
.sfc-module-title { font-size: 18px; font-weight: 700; color: #0D3D2D; margin: 0 0 8px; line-height: 22px; }
.sfc-module-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sfc-module-pills .sfc-pill { display: inline-block; background: #E8EFEC; color: rgba(113, 121, 116, 0.8); border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 15px; }

/* ── Curriculum (session list) ──────────────────────────── */
.sfc-curriculum-wrap { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #E5E7EB transparent; }
.sfc-curriculum-wrap::-webkit-scrollbar { width: 4px; }
.sfc-curriculum-wrap::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 2px; }
.sfc-session-list { padding: 12px; display: flex; flex-direction: column; gap: 0; }
.sfc-session { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; transition: background 0.1s; position: relative; }
.sfc-session:hover { background: rgba(238, 245, 242, 0.3); border-radius: 8px; }
.sfc-session.sfc-session-now { background: rgba(0, 109, 57, 0.05); border: 1px solid rgba(0, 109, 57, 0.1); border-radius: 16px; padding: 16px; position: relative; }
.sfc-session.sfc-session-now::before { content: ''; position: absolute; left: 1px; top: 50%; transform: translateY(-50%); width: 4px; height: 32px; background: #006D39; border-radius: 0 9999px 9999px 0; }
.sfc-session.sfc-session-now .sfc-session-arrow { display: none; }

/* ── Checkbox ────────────────────────────────────────────── */
.sfc-cb-wrap { flex-shrink: 0; padding-top: 4px; position: relative; }
.sfc-cb-wrap .sfc-cb-real.form-check-input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none !important; }
.sfc-cb-lbl { display: block; cursor: pointer; margin: 0 !important; }
.sfc-cb-ring { width: 20px; height: 20px; border: 2px solid rgba(113, 121, 116, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.15s; background: #fff; }
.sfc-cb-icon { font-size: 9px; color: #fff; display: none; }
.sfc-cb-real:checked + .sfc-cb-lbl .sfc-cb-ring { background: #006D39; border-color: #006D39; }
.sfc-cb-real:checked + .sfc-cb-lbl .sfc-cb-icon { display: block; }
.sfc-session.sfc-session-now .sfc-cb-ring { background: #006D39; border-color: #006D39; }
.sfc-session.sfc-session-now .sfc-cb-icon { display: block; }

/* ── Session text ───────────────────────────────────────── */
.sfc-session-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sfc-now-playing-badge { display: none; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #006D39; line-height: 15px; }
.sfc-session-num { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #717974; line-height: 15px; }
.sfc-session.sfc-session-now .sfc-now-playing-badge { display: block; }
.sfc-session.sfc-session-now .sfc-session-num { display: none; }
.sfc-session-title { font-size: 16px; font-weight: 700; color: #414844; line-height: 24px; cursor: pointer; margin: 0 !important; display: block; white-space: normal; padding: 0 !important; border: none !important; background: none !important; }
.sfc-session.sfc-session-now .sfc-session-title { color: #161D1B; }
.sfc-session-dur { font-size: 10px; color: #717974; letter-spacing: 0.02em; line-height: 10px; }
.sfc-session-arrow { flex-shrink: 0; color: rgba(113, 121, 116, 0.5); font-size: 12px; padding-top: 6px; }

/* ── Help CTA (inside module card, at bottom) ───────────── */
.sfc-help-cta { background: #fff; border-top: 1px solid rgba(193, 200, 195, 0.2); padding: 16px; }
.sfc-help-box { background: #0D3D2D; border-radius: 16px; padding: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.sfc-nh-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #72FDA3; margin: 0; line-height: 10px; }
.sfc-nh-tagline { font-size: 12px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 12px; letter-spacing: 0.05em; }
.sfc-nh-send-btn { width: 100%; background: #fff; border: none; border-radius: 12px; padding: 8px 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; font-weight: 700; color: #006D39; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s; height: 36px; }
.sfc-nh-send-btn:hover { background: rgba(255, 255, 255, 0.9); }

/* ── Resources Card (separate standalone card) ──────────── */
.sfc-resources-card { background: #fff; border-radius: 24px; box-shadow: 0px 20px 50px rgba(0, 43, 22, 0.08); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sfc-res-card-hdr { display: flex; align-items: center; gap: 8px; }
.sfc-res-folder-ico { font-size: 16px; color: #006D39; }
.sfc-res-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0D3D2D; line-height: 12px; }
.sfc-res-list { display: flex; flex-direction: column; gap: 12px; }
.sfc-res-item { display: flex; align-items: center; gap: 16px; padding: 12px; background: rgba(238, 245, 242, 0.5); border-radius: 16px; text-decoration: none !important; transition: background 0.15s; color: inherit; }
.sfc-res-item:hover { background: rgba(238, 245, 242, 0.8); }
.sfc-res-icon-box { width: 40px; height: 40px; background: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16.67px; }
.sfc-res-icon-box.sfc-res-pdf { color: #BA1A1A; }
.sfc-res-icon-box.sfc-res-xlsx, .sfc-res-icon-box.sfc-res-xls, .sfc-res-icon-box.sfc-res-csv { color: #1DB968; }
.sfc-res-icon-box.sfc-res-doc, .sfc-res-icon-box.sfc-res-docx { color: #2563EB; }
.sfc-res-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sfc-res-name { font-size: 12px; font-weight: 700; color: #161D1B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05em; line-height: 12px; }
.sfc-res-size { font-size: 10px; font-weight: 700; color: #717974; text-transform: uppercase; line-height: 15px; }
.sfc-res-dl-ico { font-size: 12px; color: #717974; flex-shrink: 0; }

/* ── Review Modal ───────────────────────────────────────── */
.sfc-review-dialog { max-width: 720px; }
.sfc-review-modal { display: flex; flex-direction: row; border-radius: 16px !important; overflow: hidden; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important; }
.sfc-review-panel-l { width: 38%; flex-shrink: 0; background: #0D3D2D; padding: 44px 26px 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sfc-review-icon-wrap { width: 70px; height: 70px; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,0.9); margin-bottom: 18px; }
.sfc-review-panel-title { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.sfc-review-panel-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0 0 22px; }
.sfc-review-slogan { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.32); }
.sfc-review-panel-r { flex: 1; background: #fff; padding: 34px 30px 26px; position: relative; min-width: 0; }
.sfc-review-close-btn { position: absolute; top: 16px; right: 16px; }
.sfc-review-form-h { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 5px; }
.sfc-review-form-sub { font-size: 13.5px; color: #6B7280; margin: 0; }
.sfc-review-hr { margin: 16px 0; border-color: #F3F4F6; }
.sfc-form-field { margin-bottom: 16px; }
.sfc-field-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0D3D2D; display: block; margin-bottom: 9px; }
.sfc-stars { display: flex; gap: 5px; }
.sfc-star { font-size: 26px; color: #E5E7EB; cursor: pointer; transition: color 0.1s, transform 0.1s; }
.sfc-star:hover { transform: scale(1.1); }
.sfc-star.sfc-star-on { color: #F59E0B; }
.sfc-review-ta { width: 100%; border: 1.5px solid #E5E7EB; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #374151; min-height: 100px; resize: vertical; outline: none; font-family: inherit; transition: border-color 0.15s; }
.sfc-review-ta:focus { border-color: #0D3D2D; }
.sfc-review-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.sfc-btn-batal { background: transparent; border: none; color: #6B7280; font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 12px; transition: color 0.15s; }
.sfc-btn-batal:hover { color: #374151; }
.sfc-btn-kirim { display: inline-flex; align-items: center; gap: 7px; background: #0D3D2D; border: none; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; padding: 10px 22px; border-radius: 100px; transition: background 0.15s; }
.sfc-btn-kirim:hover { background: #0a2e1f; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199px) {
    .sfc-lp.wsus__course_video { padding: 20px; gap: 20px; }
    .sfc-course-title { font-size: 28px; line-height: 34px; }
}
@media (max-width: 991px) {
    /* top: clears the fixed mobile header (~76px tall: nav row + progress row);
       bottom: clears the fixed Prev/Next bar */
    .sfc-lp.wsus__course_video { padding: 76px 16px 16px; gap: 16px; }
    /* Kembali/Materi row relies on the base theme's own justify-content, which isn't
       guaranteed to be space-between — pin it explicitly so "Kembali" always sits
       flush left instead of drifting toward center. */
    .wsus__course_video .wsus__course_header { justify-content: space-between !important; }
    /* line-height:48px (the desktop value) was never overridden here, so a wrapped
       3-line mobile title rendered as three 48px-tall line boxes instead of ~28px —
       inflating the title block and reading as "way too much space between lines". */
    .sfc-course-title { font-size: 22px; line-height: 28px; letter-spacing: -0.3px; }
    .sfc-info-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    /* Badge stays left, clock/duration (+rating, if shown) pushed to the far right */
    .sfc-meta-row { justify-content: space-between; }
    .sfc-meta-right { display: flex; align-items: center; gap: 16px; }
    .sfc-review-trigger { width: 100%; justify-content: center; }
    .sfc-review-modal { flex-direction: column; }
    .sfc-review-panel-l { width: 100%; padding: 28px 22px 24px; }
    .sfc-review-panel-r { padding: 24px 22px 20px; }
    .sfc-review-dialog { max-width: 96vw; margin: auto; }

    /* ── Curriculum sidebar → off-canvas drawer ──────────────
       Previously forced `position:relative;width:100%` unconditionally,
       which defeated the show/hide toggle entirely and buried the
       curriculum list below all page content. Rebuilt as a real drawer. */
    .sfc-lp-sidebar.wsus__course_sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: min(340px, 86vw) !important;
        flex: none !important;
        height: 100dvh !important;
        margin: 0 !important;
        background: #F1F8F5 !important;
        padding: 76px 16px 24px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1050;
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    }
    .sfc-lp-sidebar.wsus__course_sidebar.show { transform: translateX(0); }

    .sfc-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(13, 61, 45, 0.5);
        z-index: 1040;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .sfc-sidebar-backdrop.show { display: block; opacity: 1; }
    body.sfc-sidebar-open { overflow: hidden; }

    .sfc-sidebar-close-btn { display: flex; align-items: center; justify-content: center; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); font-size: 15px; }

    /* ── Tab nav → horizontal scroll instead of silent clipping ──
       .sfc-desc-card has overflow:hidden for its rounded corners, and the
       tab row had no way to scroll, so tabs past the fold (e.g. "Materi
       PDF") were simply unreachable. */
    .sfc-tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        mask-image: linear-gradient(to right, black 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
    }
    .sfc-tab-nav::-webkit-scrollbar { display: none; }
    .sfc-tab-nav .nav-item { flex-shrink: 0; }

    /* ── Prev/Next → fixed bar, always reachable regardless of page length ── */
    .sfc-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1010;
        background: #fff;
        border-top: 1px solid rgba(193, 200, 195, 0.4);
        border-radius: 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        gap: 10px;
        flex-wrap: nowrap;
    }
    /* Progress is already shown in the fixed mobile header on small screens */
    .sfc-progress-wrap { display: none; }
    .sfc-nav-btn { flex: 1 1 0; justify-content: center; padding: 12px 10px !important; }
    .sfc-nav-sub-lbl { display: none; }
}
@media (max-width: 575px) {
    .sfc-course-title { font-size: 20px; line-height: 26px; }
    .sfc-info-bar { padding: 0; }
    .sfc-tab-content { padding: 20px 16px; }
    .sfc-tab-nav { padding: 0 16px; }
    .sfc-lesson-title { font-size: 18px; }
}