/* Course Show UI upgrade: load after the existing page styles. */
:root {
    --course-green: #176b49;
    --course-green-dark: #0d3d2a;
    --course-orange: #ef7d32;
    --course-surface: #f5f8f6;
    --course-text: #16251e;
    --course-muted: #68766f;
    --course-border: #dce7e0;
}

.recorded-hero {
    position: relative;
    padding: clamp(64px, 8vw, 108px) 0 clamp(72px, 9vw, 120px) !important;
    overflow: hidden;
    background: linear-gradient(120deg, var(--course-green-dark), var(--course-green)) !important;
}

.recorded-hero::after {
    position: absolute;
    top: -190px;
    right: -80px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(255, 255, 255, .04), 0 0 0 145px rgba(255, 255, 255, .025);
    content: "";
    pointer-events: none;
}

.recorded-hero .container { position: relative; z-index: 1; }
.hero-badge {
    width: fit-content;
    margin-bottom: 18px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700;
}
.hero-title { max-width: 760px; color: #fff !important; font-size: clamp(34px, 4.3vw, 58px) !important; line-height: 1.13 !important; letter-spacing: -.025em; }
.hero-description { max-width: 650px; color: rgba(255, 255, 255, .82) !important; font-size: clamp(16px, 1.6vw, 19px) !important; line-height: 1.75 !important; }
.hero-stats { gap: 12px !important; margin-top: 30px !important; }
.hero-stat { min-width: 150px; padding: 12px 14px !important; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(7, 38, 25, .22); }
.hero-stat i { color: #ffb17b !important; }.hero-stat-value { color: #fff !important; font-size: 14px !important; }

.video-preview-section { padding: 72px 0 !important; background: #fff; }
.video-preview-section h2 { color: var(--course-text) !important; font-size: clamp(26px, 3vw, 38px); }
.video-container { overflow: hidden; border: 1px solid var(--course-border); border-radius: 18px !important; box-shadow: 0 22px 50px rgba(13, 61, 42, .14); }
.main-content { padding: 76px 0 !important; background: var(--course-surface) !important; }
.content-section, .instructor-section, .certificate-section {
    margin-bottom: 24px !important;
    padding: clamp(20px, 3vw, 34px) !important;
    border: 1px solid var(--course-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 9px 24px rgba(13, 61, 42, .04);
}
.section-title { color: var(--course-text) !important; font-size: clamp(22px, 2.4vw, 29px) !important; font-weight: 800 !important; line-height: 1.25; }.section-title i { color: var(--course-orange) !important; }
.learn-grid { gap: 12px !important; }.learn-item { padding: 13px 14px !important; border: 1px solid #e2eee7; border-radius: 10px; background: #f9fcfa; }.learn-item i, .mobile-highlight-item i { color: var(--course-green) !important; }
.curriculum-accordion .accordion-item, .faq-accordion .accordion-item { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--course-border) !important; border-radius: 10px !important; }.curriculum-accordion .accordion-button, .faq-accordion .accordion-button { color: var(--course-text) !important; font-weight: 700; box-shadow: none !important; }.curriculum-accordion .accordion-button:not(.collapsed), .faq-accordion .accordion-button:not(.collapsed) { background: #edf7f1 !important; color: var(--course-green-dark) !important; }.lecture-item { border-color: #ecf1ee !important; }.badge-free { background: #e4f6eb !important; color: var(--course-green) !important; }

.sidebar-sticky-wrapper { top: 24px !important; }.floating-card { overflow: hidden; border: 1px solid var(--course-border) !important; border-radius: 18px !important; box-shadow: 0 18px 42px rgba(13, 61, 42, .13) !important; }.card-image { aspect-ratio: 16 / 9; }.card-image img { width: 100%; height: 100%; object-fit: cover; }.card-body-custom { padding: 22px !important; }.price-current { color: var(--course-orange) !important; font-size: 34px !important; }.price-currency { color: var(--course-muted) !important; font-weight: 700; }.discount-badge { background: #fff0e7 !important; color: #c95e1f !important; }.btn-enroll-main { min-height: 50px; border-radius: 9px !important; background: var(--course-green) !important; font-weight: 800 !important; }.btn-enroll-main:hover { background: var(--course-green-dark) !important; transform: translateY(-1px); }.btn-preview-main { border-color: var(--course-green) !important; border-radius: 9px !important; color: var(--course-green) !important; font-weight: 800 !important; }.card-features { border-top-color: var(--course-border) !important; }.feature-item i { color: var(--course-green) !important; }

/* Protect desktop conversion layout from general theme styles. */
@media (min-width: 768px) {
    .main-content .learn-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .floating-card .btn-enroll-main,
    .floating-card .btn-preview-main {
        width: 100% !important;
        justify-content: center !important;
    }

    .floating-card .btn-preview-main {
        margin-top: 12px !important;
    }
}

.cta-bottom { padding: 82px 0 !important; background: linear-gradient(135deg, var(--course-green-dark), var(--course-green)) !important; }.cta-bottom h3 { color: #fff !important; font-size: clamp(29px, 3vw, 42px) !important; }.cta-bottom p { color: rgba(255, 255, 255, .83) !important; }.btn-cta-primary { background: var(--course-orange) !important; border-color: var(--course-orange) !important; }.btn-cta-outline { border-color: rgba(255, 255, 255, .75) !important; color: #fff !important; }

@media (max-width: 991px) {
    .recorded-hero { padding-bottom: 78px !important; }.main-content { padding: 50px 0 96px !important; }.content-section, .instructor-section, .certificate-section { margin-bottom: 16px !important; }
    /* The sticky purchase bar is the only purchase CTA on mobile. */
    .cta-bottom { display: none !important; }
    .mobile-cta-bar { z-index: 1000; padding: 11px 15px calc(11px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--course-border); background: rgba(255, 255, 255, .96) !important; box-shadow: 0 -8px 24px rgba(13, 61, 42, .09); backdrop-filter: blur(9px); }
    .mobile-cta-bar .d-flex { gap: 12px !important; }.mobile-cta-bar .d-flex > div:first-child { min-width: 88px; line-height: 1.2; }.mobile-cta-bar .fw-bold { display: block; color: var(--course-green-dark) !important; }.mobile-cta-bar .default-btn { min-height: 46px; border-radius: 8px !important; background: var(--course-green) !important; }.mobile-cta-bar .default-btn.active { background: var(--course-green) !important; }
}

@media (max-width: 767px) {
    .recorded-hero { padding: 52px 0 58px !important; }.recorded-hero::after { width: 330px; height: 330px; top: -155px; right: -165px; }.hero-title { font-size: 32px !important; }.hero-description { font-size: 16px !important; }.hero-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px !important; }.hero-stat { min-width: 0; padding: 10px !important; }.hero-stat:last-child { grid-column: span 2; }.hero-stat-value { font-size: 12px !important; }.video-preview-section { padding: 48px 0 !important; }.video-container { border-radius: 13px !important; }.main-content { padding: 38px 0 104px !important; }.content-section, .instructor-section, .certificate-section { padding: 19px 16px !important; border-radius: 13px !important; }.section-title { font-size: 22px !important; }.learn-grid { grid-template-columns: 1fr !important; }.learn-item { padding: 12px !important; font-size: 14px; }.curriculum-header { gap: 9px; align-items: flex-start !important; flex-direction: column; }.accordion-button { padding: 14px !important; font-size: 14px !important; }.lecture-item { padding: 13px 12px !important; }.cta-bottom { padding: 55px 0 80px !important; }.cta-bottom p { font-size: 16px !important; }.cta-buttons { gap: 10px !important; }.btn-cta { width: 100%; }.mobile-cta-bar .fw-bold { font-size: 15px !important; }
}

/* Keep the desktop closing CTA readable even when theme rules load after this file. */
section.cta-bottom > .container > h3,
section.cta-bottom > .container > h3 * {
    color: #ffffff !important;
}

section.cta-bottom > .container > p,
section.cta-bottom > .container > p * {
    color: rgba(255, 255, 255, .86) !important;
}

section.cta-bottom .btn-cta-outline,
section.cta-bottom .btn-cta-outline i {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .82) !important;
}

section.cta-bottom .btn-cta-outline:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: #ffffff !important;
}