/* ── Self-hosted Inter variable font ─────────────────────────────────────── */
@font-face {
    font-family: "Inter";
    src: url("/fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: block;
}

/* Override Bootstrap buttons */
.btn-primary {
    background-color: #afeb2b !important;
    border-color: #8bc220 !important;
    color: #000000 !important; /* Optional: ensure readable text */
    border-radius: 6px;
}
.btn-primary:hover {
    background-color: #9bd326 !important;
    border-color: #008800 !important;
    color: #000000 !important;
    text-decoration: underline !important;
}

.btn-secondary {
    background-color: #fa6915 !important;
    border-color: #fa6915 !important;
    color: #fff !important; /* Optional: ensure readable text */
    border-radius: 6px;
}

.btn-secondary:hover {
    background-color: darkorange !important;
    border-color: #000000 !important;
    color: #fff !important;
    text-decoration: underline !important;
}

.btn-outline-primary {
    color: #000000 !important;
    border-color: #000000 !important;
}

.btn-outline-primary:hover {
    background-color: #ddd !important; /* Light gray */
    border-color: #000000 !important;
    color: #000000 !important;
    text-decoration: underline !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    background-color: transparent !important;
    border-color: #fa6915 !important;
    color: #000000 !important;
    box-shadow: 0 0 0 0.25rem rgba(250, 105, 21, 0.25) !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: #000000 !important;
    border-color: #000000 !important;
    opacity: 0.5 !important;
}

/* Override Bootstrap success button background color */
.btn-success {
    background-color: #fa6915 !important;
    border-color: #fa6915 !important;
    color: white !important; /* Optional: ensure readable text */
    border-radius: 6px;
}

/* Use Google Font Inter */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.table,
.section-header,
.item-tile,
.quiz-option,
.score-bar-container,
.score-bar,
.navbar-brand,
.nav-link {
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
}

/* Match text style with Podia */
.navbar a {
    font-size: 1.3rem;
    font-weight: 400 !important;
    line-height: 1.65;
    color: black !important;
    text-decoration: none !important;
}

.navbar a.nav-link:hover,
.navbar .dropdown-item:hover {
    color: #fa6915 !important;
    text-decoration: underline !important;
}

.navbar .dropdown-item:active {
    color: #ffffff !important;
    background-color: #fa6915 !important;
}

.navbar-brand img {
    height: 52px;
}

/* Search Result Item Styling */
.search-result-item {
    text-decoration: none !important;
}

.search-result-item .badge {
    text-decoration: none !important;
}

.search-result-item h6 {
    color: #212529; /* Dark text by default */
    text-decoration: none !important;
}

.search-result-item:hover h6 {
    color: #fa6915 !important; /* Orange on hover */
    text-decoration: underline !important;
}

/* Branded link */
.branded-link {
    color: #fa6915 !important; /* Orange */
    text-decoration: none !important;
}

.branded-link:hover {
    color: #fa6915 !important; /* Orange on hover */
    text-decoration: underline !important;
}

/* Breadcrumb link */
.breadcrumb-item a.breadcrumb-link,
.breadcrumb-item a.breadcrumb-link:link,
.breadcrumb-item a.breadcrumb-link:visited,
a.breadcrumb-link,
a.breadcrumb-link:link,
a.breadcrumb-link:visited {
    --bs-link-color: #000;
    --bs-link-color-rgb: 0, 0, 0;
    color: #000 !important;
    text-decoration: none !important;
}

.breadcrumb-item a.breadcrumb-link:hover,
a.breadcrumb-link:hover {
    --bs-link-color: #fa6915;
    --bs-link-color-rgb: 250, 105, 21;
    color: #fa6915 !important;
    text-decoration: underline !important;
}

/* Layout helpers */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
.footer {
    margin-top: auto;
}

/* Markdown content styling */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #212529;
}
.markdown-content h1 {
    font-size: 1.75rem;
    font-weight: bold;
}
.markdown-content h2 {
    font-size: 1.5rem;
    font-weight: bold;
}
.markdown-content h3 {
    font-size: 1.25rem;
    font-weight: bold;
}
.markdown-content ul,
.markdown-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.markdown-content p {
    margin-bottom: 1rem;
}
.markdown-content img {
    border-radius: 0.375rem; /* Bootstrap's .rounded value */
    max-width: 100%;
    height: auto;
}

/* Lab lesson image hover + lightbox */
.lab-content img,
.markdown-content img {
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lab-content img:hover,
.markdown-content img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
/* Disable zoom effect on plain content pages */
.markdown-content--static img {
    cursor: default;
    transition: none;
}
.markdown-content--static img:hover {
    transform: none;
    box-shadow: none;
}
.markdown-content table {
    font-size: 0.9rem;
}
.markdown-content table thead th {
    font-weight: 600;
}
.markdown-content a {
    color: #fa6915 !important; /* Orange */
    text-decoration: none !important;
}
.markdown-content a:hover {
    color: #fa6915 !important; /* Orange on hover */
    text-decoration: underline !important;
}
.markdown-content a.btn {
    color: inherit !important;
    text-decoration: none !important;
}
.markdown-content a.btn:hover {
    color: inherit !important;
    text-decoration: underline !important;
}

/* Custom utility classes */
.fs-xs {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.fs-xxs {
    font-size: 0.7rem;
}

.sticky-top-custom {
    top: 1rem;
    z-index: 1020;
}

.lesson-list-scroll {
    overflow: visible;
}

/* Narrower container for main layout */
.container-narrow {
    max-width: 960px;
}

/* Styles for the faq section */
.faq-section details {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    background-color: #fff;
}
.faq-section summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 500;
    color: #212529;
    background-color: #fff;
    position: relative;
    list-style: none; /* Hide default marker */
    border-radius: 0.25rem;
}
/* Hide default marker for webkit */
.faq-section summary::-webkit-details-marker {
    display: none;
}
/* Custom chevron */
.faq-section summary::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 0.75rem;
    height: 0.75rem;
    border-right: 2px solid #212529;
    border-bottom: 2px solid #212529;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.faq-section details[open] summary::after {
    transform: rotate(-135deg);
}
.faq-section details[open] summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #000;
    background-color: #e2fcc2; /* Light shade of #afeb2b */
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}
.faq-section .faq-body {
    padding: 1rem 1.25rem;
}

/* Module/lesson navigation bar */
.module-nav {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #3d3d3d 100%) !important;
}

.module-nav-pct {
    color: #fa6915 !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    align-self: flex-end !important;
}

.module-nav-pct-label {
    font-size: 0.7rem !important;
    align-self: flex-end !important;
}

.module-nav-track {
    height: 6px !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.module-nav-track .progress-bar {
    background-color: #fa6915 !important;
}

.module-nav-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.module-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

.module-nav-btn-disabled {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Override Bootstrap focus ring on form inputs */
.form-control:focus {
    border-color: #fa6915 !important;
    box-shadow: 0 0 0 0.25rem rgba(250, 105, 21, 0.25) !important;
}

/* Override Bootstrap focus ring color globally */
:root {
    --bs-focus-ring-color: rgba(250, 105, 21, 0.25) !important;
    --bs-focus-ring-box-shadow: 0 0 0 0.25rem rgba(250, 105, 21, 0.25) !important;
}

/* Override Bootstrap blue focus ring on ALL focusable elements */
:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn:focus,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible,
.form-select:focus,
.form-check-input:focus,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(250, 105, 21, 0.25) !important;
}

/* ── Syntax highlighted code blocks (highlight.js) ─────────────────────── */
.markdown-content pre {
    position: relative;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: zoom-in;
    border: 1px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.markdown-content pre:hover {
    transform: scale(1.02);
    border-color: rgba(250, 105, 21, 0.5);
}

@media (max-width: 991.98px) {
    .markdown-content pre {
        cursor: default;
    }
    .markdown-content pre:hover {
        transform: none;
        border-color: transparent;
    }
    .lab-content img,
    .markdown-content img {
        cursor: default;
    }
    .lab-content img:hover,
    .markdown-content img:hover {
        transform: none;
        box-shadow: none;
    }
}

.markdown-content pre code.hljs {
    display: block;
    padding: 1.25rem 1.5rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-x: auto;
    border-radius: 0.5rem;
}

/* Inline code (not inside a pre) */
.markdown-content code:not(.hljs) {
    padding: 0.2em 0.4em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
    background-color: rgba(0, 0, 0, 0.07);
    border-radius: 0.25rem;
    color: #222;
}

/* ── AI prompt callout ──────────────────────────────────────────────────── */
.prompt-callout {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    background-color: rgba(250, 105, 21, 0.06);
    border-left: 3px solid rgba(250, 105, 21, 0.4);
    border-radius: 0.375rem;
    color: #555;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.prompt-callout-icon {
    color: #fa6915;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.15em;
}

/* ── Student tip callout ────────────────────────────────────────────────── */
.tip-callout {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    background-color: rgba(25, 135, 84, 0.06);
    border-left: 3px solid rgba(25, 135, 84, 0.35);
    border-radius: 0.375rem;
    color: #555;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.tip-callout-icon {
    color: #198754;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.15em;
}

/* ── Homework assignment callout ────────────────────────────────────────── */
.homework-callout {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    background-color: rgba(0, 0, 0, 0.04);
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.375rem;
    color: #555;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.homework-callout-icon {
    color: #444;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.15em;
}

/* ── Copy buttons (code blocks + prompt callouts) ───────────────────────── */
.copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-family: inherit;
    line-height: 1.4;
    color: #aaa;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    z-index: 2;
}

.markdown-content pre:hover .copy-btn,
.prompt-callout:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* Prompt callout copy button — dark text for light background */
.prompt-callout .copy-btn {
    color: #888;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.2);
}

.prompt-callout .copy-btn:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.35);
}

.copy-btn.copied {
    color: #4caf50 !important;
    border-color: rgba(76, 175, 80, 0.4) !important;
    opacity: 1 !important;
}

/* Copy button inside the code zoom modal header — always visible, not absolute */
#codeZoomCopyBtn {
    position: absolute;
    opacity: 1;
}


/* ── Blockquote inside markdown content ─────────────────────────────────── */
.markdown-content blockquote {
    border-left: 4px solid #dee2e6;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    color: #6c757d;
    font-size: 1rem;
}

.markdown-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Hide the real radio inputs; they only carry state */
.quiz-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Hide the submit-state checkbox */
.quiz-submitted-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Answer option row */
.quiz-option-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1.5px solid #dee2e6;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    user-select: none;
}

.quiz-option-label:hover {
    border-color: #adb5bd;
    background-color: #f8f9fa;
}

/* Custom radio circle */
.quiz-radio-circle {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.25rem;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: relative;
}

.quiz-radio-circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #fa6915;
    transition: transform 0.15s ease;
}

/* When a radio is checked — highlight circle */
.quiz-radio:checked + .quiz-option-label .quiz-radio-circle {
    border-color: #fa6915;
}

.quiz-radio:checked + .quiz-option-label .quiz-radio-circle::after {
    transform: translate(-50%, -50%) scale(1);
}

.quiz-radio:checked + .quiz-option-label {
    border-color: #fa6915;
    background-color: rgba(250, 105, 21, 0.05);
}

/* Answer text + explanation area */
.quiz-answer-content {
    flex: 1;
    line-height: 1.5;
}

.quiz-answer-content .markdown-content p:last-child {
    margin-bottom: 0;
}

/* Explanation block — hidden by default */
.quiz-explanation {
    display: none;
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: #555;
}

.quiz-explanation .markdown-content p:last-child {
    margin-bottom: 0;
}

/* Result icon (check / cross) at the right of each label — hidden until submitted */
.quiz-result-icon {
    display: none;
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 0.15rem;
    align-self: flex-start;
}

/* Submit button label */
.quiz-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    font-weight: 400;
    border-radius: 6px;
    cursor: pointer;
    background-color: #afeb2b;
    border: 1.5px solid #8bc220;
    color: #000;
    font-family: inherit;
    font-size: 1rem;
    transition: background-color 0.15s ease;
    user-select: none;
}

.quiz-submit-btn:hover {
    background-color: #9bd326;
}

.quiz-submit-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── After submission (.quiz-submitted-toggle is :checked) ───────────────── */

/* Hide the submit button */
.quiz-submitted-toggle:checked ~ .quiz-submit-btn {
    display: none;
}

/* Lock all labels so nothing can be changed after submitting */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-option-label {
    pointer-events: none;
    cursor: default;
}

.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-option-label:hover {
    background-color: inherit;
    border-color: inherit;
}

/* Show result icon on the selected answer only */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-radio:checked + .quiz-option-label .quiz-result-icon {
    display: block;
}

/* Always show correct answer with a thick dashed green border after submit (even if not selected) */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-option-label {
    border-color: #afeb2b;
    border-style: dashed;
    border-width: 3px;
    background-color: rgba(175, 235, 43, 0.08);
}

/* Correct answer selected → solid brand green (overrides above) */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-radio:checked + .quiz-option-label {
    border-color: #afeb2b;
    border-style: solid;
    background-color: rgba(175, 235, 43, 0.12);
}

.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-radio:checked + .quiz-option-label .quiz-radio-circle {
    border-color: #8bc220;
    background-color: #afeb2b;
}

.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-radio:checked + .quiz-option-label .quiz-radio-circle::after {
    background: #000;
    transform: translate(-50%, -50%) scale(1);
}

/* Incorrect answer selected → brand orange */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-incorrect .quiz-radio:checked + .quiz-option-label {
    border-color: #fa6915;
    border-style: solid;
    background-color: rgba(250, 105, 21, 0.08);
}

.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-incorrect .quiz-radio:checked + .quiz-option-label .quiz-radio-circle {
    border-color: #fa6915;
    background-color: #fa6915;
}

.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-incorrect .quiz-radio:checked + .quiz-option-label .quiz-radio-circle::after {
    background: #fff;
    transform: translate(-50%, -50%) scale(1);
}

/* Brand colors for correct/incorrect icons and labels */
.quiz-answers-list .bi-check-circle-fill { color: #8bc220; }
.quiz-answers-list .bi-x-circle-fill { color: #fa6915; }
.quiz-answers-list strong.text-success { color: #8bc220 !important; }
.quiz-answers-list strong.text-danger { color: #fa6915 !important; }

/* Show explanations after submission */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-explanation {
    display: block;
}

/* ── Feedback panels (correct / incorrect) ───────────────────────────────── */

.quiz-feedback-correct,
.quiz-feedback-incorrect {
    display: none;
    margin-bottom: 1rem;
    color: #000;
}

.quiz-feedback-correct .bi {
    color: #afeb2b;
}

.quiz-feedback-incorrect .bi {
    color: #fa6915;
}

/* Show correct panel when submitted and a correct answer was selected */
.quiz-container:has(.quiz-submitted-toggle:checked):has(.is-correct .quiz-radio:checked) .quiz-feedback-correct {
    display: block;
}

/* Show incorrect panel when submitted and an incorrect answer was selected */
.quiz-container:has(.quiz-submitted-toggle:checked):has(.is-incorrect .quiz-radio:checked) .quiz-feedback-incorrect {
    display: block;
}

/* ── Multiple-answer (checkbox) quiz widget ──────────────────────────────── */

/* Hide the actual checkbox input */
.quiz-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom square indicator (mirrors .quiz-radio-circle but square) */
.quiz-checkbox-square {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.25rem;
    border: 2px solid #adb5bd;
    border-radius: 0.25rem;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: relative;
}

.quiz-checkbox-square::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.1rem;
    background: #fa6915;
    transition: transform 0.15s ease;
}

/* When a checkbox is checked — thick orange border, filled orange square centre */
.quiz-checkbox:checked + .quiz-option-label .quiz-checkbox-square {
    border-color: #fa6915;
    border-width: 2px;
}

.quiz-checkbox:checked + .quiz-option-label .quiz-checkbox-square::after {
    transform: translate(-50%, -50%) scale(1);
}

.quiz-checkbox:checked + .quiz-option-label {
    border-color: #fa6915;
    background-color: rgba(250, 105, 21, 0.05);
}

/* ── After submission — multiple variant ─────────────────────────────────── */

/* Lock all labels */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-checkbox:checked + .quiz-option-label {
    pointer-events: none;
    cursor: default;
}

/* Show result icon on all checked answers after submit */
.quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-checkbox:checked + .quiz-option-label .quiz-result-icon {
    display: block;
}

/* Always highlight correct answers with dashed green after submit */
.quiz-multiple-container .quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-option-label {
    border-color: #afeb2b;
    border-style: dashed;
    border-width: 3px;
    background-color: rgba(175, 235, 43, 0.08);
}

/* Correct answer checked → solid green */
.quiz-multiple-container .quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-checkbox:checked + .quiz-option-label {
    border-color: #afeb2b;
    border-style: solid;
    background-color: rgba(175, 235, 43, 0.12);
}

.quiz-multiple-container .quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-checkbox:checked + .quiz-option-label .quiz-checkbox-square {
    border-color: #8bc220;
    background-color: #afeb2b;
}

.quiz-multiple-container .quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-correct .quiz-checkbox:checked + .quiz-option-label .quiz-checkbox-square::after {
    background: #000;
    transform: translate(-50%, -50%) scale(1);
}

/* Incorrect answer checked → orange */
.quiz-multiple-container .quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-incorrect .quiz-checkbox:checked + .quiz-option-label {
    border-color: #fa6915;
    border-style: solid;
    background-color: rgba(250, 105, 21, 0.08);
}

.quiz-multiple-container .quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-incorrect .quiz-checkbox:checked + .quiz-option-label .quiz-checkbox-square {
    border-color: #fa6915;
    background-color: #fa6915;
}

.quiz-multiple-container .quiz-submitted-toggle:checked ~ .quiz-answers-list .quiz-answer-wrap.is-incorrect .quiz-checkbox:checked + .quiz-option-label .quiz-checkbox-square::after {
    background: #fff;
    transform: translate(-50%, -50%) scale(1);
}

/* Feedback panels for multiple-answer are handled in script.js */

/* ── "In This Course" stat cards ─────────────────────────────────────────── */

/* Brand-coloured border (orange) */
.border-brand {
    border-color: #fa6915 !important;
}

.dataset-card {
    border: 1px solid #dee2e6 !important;
}

/* ── "In This Course" stat cards ─────────────────────────────────────────── */
.stat-card {
    border: 0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.stat-card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.stat-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.stat-card-count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-card-label {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

/* Green card */
.stat-card-green {
    background: linear-gradient(135deg, #afeb2b 0%, #8bc220 100%);
}
.stat-card-green .stat-card-icon {
    background: rgba(0, 0, 0, 0.12);
    color: #000;
}
.stat-card-green .stat-card-count { color: #000; }
.stat-card-green .stat-card-label  { color: rgba(0, 0, 0, 0.5); }

/* Black card */
.stat-card-black {
    background: linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);
}
.stat-card-black .stat-card-icon {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.stat-card-black .stat-card-count { color: #fff; }
.stat-card-black .stat-card-label  { color: rgba(255, 255, 255, 0.5); }

/* Orange card */
.stat-card-orange {
    background: linear-gradient(135deg, #fa6915 0%, #f5933d 100%);
}
.stat-card-orange .stat-card-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.stat-card-orange .stat-card-count { color: #fff; }
.stat-card-orange .stat-card-label  { color: rgba(255, 255, 255, 0.65); }

/* White card */
.stat-card-white {
    background: #fff;
    border: 1.5px solid #000 !important;
}
.stat-card-white .stat-card-icon {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}
.stat-card-white .stat-card-count { color: #000; }
.stat-card-white .stat-card-label  { color: rgba(0, 0, 0, 0.5); }

/* Light card (white-to-grey gradient) */
.stat-card-light {
    background: linear-gradient(135deg, #ffffff 0%, #e9ecef 100%);
    border: 1px solid #dee2e6 !important;
}
.stat-card-light .stat-card-icon {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}
.stat-card-light .stat-card-count { color: #000; }
.stat-card-light .stat-card-label  { color: rgba(0, 0, 0, 0.5); }

/* ── Draft item indicator (admin-only) ───────────────────────────────────── */

/* Ribbon: clips the card corner so the ribbon doesn't bleed outside */
.draft-ribbon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
    border-radius: 0.375rem 0 0 0; /* match card top-left corner */
}
.draft-ribbon-wrap--lg {
    width: 200px;
    height: 200px;
}
.draft-badge {
    position: absolute;
    top: 30px;
    left: -36px;
    width: 150px;
    background: #dc3545;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 5px 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.draft-ribbon-wrap--lg .draft-badge {
    top: 52px;
    left: -52px;
    width: 240px;
    font-size: 1rem;
    padding: 8px 0;
}
.draft-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: #fddad8;
    color: #000;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-size: 0.9rem;
}

.draft-inline {
    display: inline-block;
    background: #dc3545;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 6px;
}

/* ── Certification card thumbnail ─────────────────────────────────────────── */
.cert-card-thumb {
    height: 180px;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cert-card-img {
    height: 120px;
    width: auto;
    object-fit: contain;
}

/* ── Pricing page check / cross icons ───────────────────────────────────── */
.pricing-check,
.pricing-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
}

.pricing-check {
    background-color: #afeb2b;
    color: #000;
}

.pricing-check--orange {
    background-color: #fa6915;
    color: #fff;
}

.pricing-cross {
    background-color: #dee2e6;
    color: #6c757d;
}

/* ── Module detail — lesson thumbnail ───────────────────────────────────── */
.lesson-thumb {
    width: 40px;
    height: 27px;
    flex-shrink: 0;
}

/* ── Module detail — visited checkmark overlay ──────────────────────────── */
.visited-check {
    width: 1rem;
    height: 1rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.visited-check .visited-check-circle {
    position: absolute;
    font-size: 1rem;
    color: #afeb2b;
}

.visited-check .visited-check-tick {
    position: absolute;
    font-size: 0.75rem;
    color: #000;
}

.module-pending-icon {
    font-size: 1rem;
    color: #fa6915;
}

.module-pending-check {
    width: 1rem;
    height: 1rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.module-pending-check .module-pending-check-circle {
    position: absolute;
    font-size: 1rem;
    color: #fa6915;
}

.module-pending-check .module-pending-check-bolt {
    position: absolute;
    font-size: 0.45rem;
    color: #fff;
}

/* ── Module detail — lesson progress section ────────────────────────────── */
.module-progress-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.module-progress-icon--complete {
    background: #afeb2b;
}

.module-progress-icon--progress {
    background: #f8f8f8;
    border: 2px solid #000;
}

.module-progress-icon i {
    color: #000;
}

.module-progress-bar-wrap {
    height: 10px;
    border-radius: 6px;
}

.module-progress-bar-fill {
    background-color: #afeb2b !important;
}

.module-progress-pct {
    color: #000;
    font-size: 1.1rem;
}