/* ===================== SCOPED VARIABLES + BASE ===================== */
#courseDetailOverlay {
    --orange: #EE6C1F;
    --orange-dark: #D8560E;
    --orange-bg: #FFF3EA;
    --orange-border: #F5B98A;
    --navy: #152268;
    --navy-bg: #EEF0FB;
    --navy-border: #C7CCF0;
    --green: #2E7D32;
    --green-dark: #1E5B22;
    --green-bg: #EAF7EC;
    --green-border: #AEDDB2;
    --blue-bg: #EAF3FE;
    --blue-icon: #2F6FE0;
    --purple-icon: #6C4FD1;
    --purple-bg: #F1EDFC;
    --text-dark: #2A2E3A;
    --text-muted: #6B7280;
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    font-family: 'Inter','Segoe UI',sans-serif;
    color: var(--text-dark);
    font-size: 1.12rem;
    line-height: 1.5;
}

    #courseDetailOverlay * {
        box-sizing: border-box;
    }

    #courseDetailOverlay h1,
    #courseDetailOverlay h2,
    #courseDetailOverlay h3,
    #courseDetailOverlay h4,
    #courseDetailOverlay h5 {
        font-family: 'Poppins','Inter',sans-serif;
        margin: 0;
    }

    #courseDetailOverlay .text-orange {
        color: var(--orange) !important;
    }

    #courseDetailOverlay .text-navy {
        color: var(--navy) !important;
    }

    #courseDetailOverlay .text-green {
        color: var(--green) !important;
    }

    #courseDetailOverlay .text-success-dark {
        color: var(--green-dark) !important;
    }

    /* ===================== LAYOUT (simplified: overlay card handles scroll/centering) ===================== */
    #courseDetailOverlay .portal-body {
        display: block;
        min-height: 0;
    }

    #courseDetailOverlay .main-content {
        flex: none;
        padding: 1.5rem;
        max-width: none;
        margin: 0;
    }

    /* ===================== COURSE SECTION WRAPPERS ===================== */
    #courseDetailOverlay .course-wrapper {
        border-radius: 28px;
        padding: 1.75rem 1.75rem 2rem;
        margin-bottom: 2.25rem;
        box-shadow: 0 10px 30px rgba(20,20,40,.06);
        border: 1px solid rgba(0,0,0,.04);
    }

        #courseDetailOverlay .course-wrapper:last-child {
            margin-bottom: 0;
        }

    #courseDetailOverlay .wrapper-orange {
        background: linear-gradient(180deg,#FFF8F2 0%, #FBFAFA 55%);
    }

    #courseDetailOverlay .wrapper-navy {
        background: linear-gradient(180deg,#F3F4FC 0%, #FBFAFA 55%);
    }

    #courseDetailOverlay .wrapper-green {
        background: linear-gradient(180deg,#F1FAF2 0%, #FBFAFA 55%);
    }

    #courseDetailOverlay .wrapper-label {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: .35rem .85rem;
        border-radius: 20px;
        margin-bottom: 1.1rem;
    }

    #courseDetailOverlay .label-orange {
        background: var(--orange-bg);
        color: var(--orange-dark);
        border: 1px solid var(--orange-border);
    }

    #courseDetailOverlay .label-navy {
        background: var(--navy-bg);
        color: var(--navy);
        border: 1px solid var(--navy-border);
    }

    #courseDetailOverlay .label-green {
        background: var(--green-bg);
        color: var(--green-dark);
        border: 1px solid var(--green-border);
    }

    #courseDetailOverlay .course-wrapper > section,
    #courseDetailOverlay .course-wrapper > .row {
        margin-top: 1.1rem;
    }

        #courseDetailOverlay .course-wrapper > section:first-of-type,
        #courseDetailOverlay .course-wrapper > .wrapper-label + section {
            margin-top: 0;
        }

    /* ===================== HERO ===================== */
    #courseDetailOverlay .hero-card {
        background: #fff;
        border-radius: var(--radius-lg);
        padding: 1.4rem;
        box-shadow: 0 4px 18px rgba(20,20,40,.05);
        position: relative;
        overflow: hidden;
        border-top: 4px solid transparent;
        transition: box-shadow .25s ease;
    }

    #courseDetailOverlay .wrapper-orange .hero-card {
        border-top-color: var(--orange);
    }

    #courseDetailOverlay .wrapper-navy .hero-card {
        border-top-color: var(--navy);
    }

    #courseDetailOverlay .wrapper-green .hero-card {
        border-top-color: var(--green);
    }

    #courseDetailOverlay .hero-card:hover {
        box-shadow: 0 10px 26px rgba(20,20,40,.09);
    }

    #courseDetailOverlay .hero-img-wrap {
        border-radius: var(--radius-lg);
        overflow: hidden;
        position: relative;
        aspect-ratio: 4/3;
        max-height: 230px;
        margin: 0 auto;
    }

    #courseDetailOverlay .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    #courseDetailOverlay .orange-curve::after,
    #courseDetailOverlay .navy-curve::after,
    #courseDetailOverlay .green-curve::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--radius-lg);
        pointer-events: none;
    }

    #courseDetailOverlay .orange-curve::after {
        box-shadow: inset 0 0 0 6px rgba(238,108,31,.12);
    }

    #courseDetailOverlay .navy-curve::after {
        box-shadow: inset 0 0 0 6px rgba(21,34,104,.10);
    }

    #courseDetailOverlay .green-curve::after {
        box-shadow: inset 0 0 0 6px rgba(46,125,50,.10);
    }

    #courseDetailOverlay .know-more-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: .45rem 1.1rem;
        border-radius: 8px;
        font-size: .88rem;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        box-shadow: 0 4px 10px rgba(0,0,0,.12);
        transition: transform .2s ease, box-shadow .2s ease, gap .2s ease;
    }

        #courseDetailOverlay .know-more-btn:hover {
            color: #fff;
            transform: translateY(-2px);
            gap: .6rem;
            box-shadow: 0 6px 14px rgba(0,0,0,.18);
        }

    #courseDetailOverlay .btn-orange-solid {
        background: var(--orange);
    }

    #courseDetailOverlay .btn-navy-solid {
        background: var(--navy);
    }

    #courseDetailOverlay .btn-green-solid {
        background: var(--green);
    }

    #courseDetailOverlay .course-title {
        font-size: 2.3rem;
        font-weight: 800;
        margin-top: 1.6rem;
        line-height: 1;
    }

    #courseDetailOverlay .course-subtitle {
        font-size: 1.12rem;
        font-weight: 700;
        color: var(--text-dark);
        margin: .35rem 0 .5rem;
    }

    #courseDetailOverlay .course-desc {
        font-size: .9rem;
        color: var(--text-muted);
        margin-bottom: .85rem;
    }

    #courseDetailOverlay .badge-row {
        margin-top: .5rem;
    }

    #courseDetailOverlay .feature-badge {
        border-radius: 10px;
        padding: .6rem .65rem;
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: .82rem;
        font-weight: 600;
        height: 100%;
        transition: transform .18s ease, box-shadow .18s ease;
    }

        #courseDetailOverlay .feature-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,.08);
        }

        #courseDetailOverlay .feature-badge i {
            font-size: 1.25rem;
        }

        #courseDetailOverlay .feature-badge small {
            font-weight: 500;
            color: var(--text-muted);
            font-size: .74rem;
        }

    #courseDetailOverlay .orange-badge {
        background: var(--orange-bg);
        color: var(--orange-dark);
        border: 1px solid var(--orange-border);
    }

    #courseDetailOverlay .navy-badge {
        background: var(--navy-bg);
        color: var(--navy);
        border: 1px solid var(--navy-border);
    }

    #courseDetailOverlay .green-badge {
        background: var(--green-bg);
        color: var(--green-dark);
        border: 1px solid var(--green-border);
    }

    /* ===================== COURSE AT A GLANCE ===================== */
    #courseDetailOverlay .glance-card {
        border-radius: var(--radius-lg);
        padding: 1.1rem 1.25rem;
        margin-top: 1rem;
        box-shadow: 0 4px 14px rgba(20,20,40,.04);
    }

    #courseDetailOverlay .blue-glance {
        background: var(--blue-bg);
    }

    #courseDetailOverlay .purple-glance {
        background: var(--purple-bg);
    }

    #courseDetailOverlay .glance-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }

    #courseDetailOverlay .blue-icon {
        background: #D6E7FE;
        color: var(--blue-icon);
    }

    #courseDetailOverlay .purple-icon {
        background: #E1D9FA;
        color: var(--purple-icon);
    }

    #courseDetailOverlay .glance-title {
        font-size: 1.02rem;
        font-weight: 700;
        margin-bottom: .2rem;
    }

    #courseDetailOverlay .glance-desc {
        font-size: .82rem;
        color: var(--text-muted);
        margin: 0;
    }

    #courseDetailOverlay .glance-stats .stat-label {
        font-size: .78rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .03em;
        border-bottom: 2px solid #d8dbe6;
        display: inline-block;
        padding-bottom: .15rem;
        margin-bottom: .35rem;
    }

    #courseDetailOverlay .glance-stats .stat-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text-dark);
    }

        #courseDetailOverlay .glance-stats .stat-value small {
            font-size: .78rem;
            font-weight: 600;
            color: var(--text-muted);
        }

    #courseDetailOverlay .glance-stats .stat-note {
        font-size: .78rem;
        color: var(--text-muted);
        margin-top: .15rem;
    }

    /* ===================== INFO PANELS ===================== */
    #courseDetailOverlay .exam-info-row {
        margin-top: 1rem;
    }

    #courseDetailOverlay .info-panel {
        border-radius: var(--radius-md);
        padding: 1rem;
        font-size: .88rem;
    }

    #courseDetailOverlay .white-panel {
        background: #fff;
        box-shadow: 0 4px 14px rgba(20,20,40,.05);
        transition: box-shadow .2s ease, transform .2s ease;
    }

        #courseDetailOverlay .white-panel:hover {
            box-shadow: 0 10px 22px rgba(20,20,40,.09);
            transform: translateY(-2px);
        }

    #courseDetailOverlay .green-panel {
        background: var(--green-bg);
    }

    #courseDetailOverlay .orange-panel {
        background: var(--orange-bg);
    }

    #courseDetailOverlay .panel-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
        margin-bottom: .5rem;
    }

    #courseDetailOverlay .green-icon {
        background: #D3F0D8;
        color: var(--green-dark);
    }

    #courseDetailOverlay .orange-icon-sm {
        background: #FBDCC2;
        color: var(--orange-dark);
    }

    #courseDetailOverlay .panel-title {
        font-size: .98rem;
        font-weight: 700;
        margin-bottom: .35rem;
    }

    #courseDetailOverlay .panel-desc {
        font-size: .82rem;
        color: var(--text-muted);
        margin: 0;
    }

    #courseDetailOverlay .col-heading {
        font-size: .94rem;
        font-weight: 700;
        margin-bottom: .65rem;
    }

    #courseDetailOverlay .tick-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: .82rem;
    }

        #courseDetailOverlay .tick-list li {
            padding-left: 1.1rem;
            position: relative;
            margin-bottom: .5rem;
            color: var(--text-dark);
        }

            #courseDetailOverlay .tick-list li::before {
                content: "\2022";
                position: absolute;
                left: 0;
                color: var(--green-dark);
                font-weight: 900;
            }

    #courseDetailOverlay .dot-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: .82rem;
    }

        #courseDetailOverlay .dot-list li {
            padding-left: 1rem;
            position: relative;
            margin-bottom: .5rem;
            color: var(--text-dark);
        }

            #courseDetailOverlay .dot-list li::before {
                content: "\2022";
                position: absolute;
                left: 0;
                color: var(--orange);
                font-weight: 900;
            }

        #courseDetailOverlay .dot-list.icon-list li {
            padding-left: 1.4rem;
        }

            #courseDetailOverlay .dot-list.icon-list li::before {
                display: none;
            }

            #courseDetailOverlay .dot-list.icon-list li i {
                position: absolute;
                left: 0;
                top: .05rem;
                color: var(--green-dark);
                font-size: .94rem;
            }

    #courseDetailOverlay .check-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: .82rem;
    }

        #courseDetailOverlay .check-list li {
            padding-left: 1.35rem;
            position: relative;
            margin-bottom: .55rem;
            color: var(--text-dark);
        }

            #courseDetailOverlay .check-list li i {
                position: absolute;
                left: 0;
                top: .08rem;
                color: var(--green-dark);
                font-size: .98rem;
            }

    #courseDetailOverlay .criteria-row {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: .55rem;
        font-size: .82rem;
    }

        #courseDetailOverlay .criteria-row i {
            font-size: 1.15rem;
            color: var(--green-dark);
            width: 20px;
            text-align: center;
        }

        #courseDetailOverlay .criteria-row strong {
            font-size: .98rem;
            margin-right: .15rem;
        }

    /* ===================== CRORE STRIP ===================== */
    #courseDetailOverlay .crore-strip {
        margin-top: 1rem;
        background: linear-gradient(135deg,#E9F7ED,#DCF3E2);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 2px 10px rgba(0,0,0,.03);
    }

    #courseDetailOverlay .crore-icon {
        font-size: 1.75rem;
        color: var(--green-dark);
    }

    #courseDetailOverlay .crore-number {
        font-size: 2.05rem;
        font-weight: 800;
        color: var(--green-dark);
        white-space: nowrap;
    }

        #courseDetailOverlay .crore-number span {
            font-size: 1.15rem;
            font-weight: 700;
        }

    #courseDetailOverlay .crore-caption {
        font-size: .85rem;
        color: var(--text-muted);
    }

    /* ===================== PATTERN GRID (MS-ACIT) ===================== */
    #courseDetailOverlay .pattern-grid {
        margin-top: .25rem;
    }

    #courseDetailOverlay .pattern-num {
        font-size: 14px;
        font-weight: 800;
        color: var(--navy);
    }

    #courseDetailOverlay .pattern-num2 {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--navy);
        margin-top: .2rem;
    }

    #courseDetailOverlay .pattern-label {
        font-size: .72rem;
        color: var(--text-muted);
        margin-top: .1rem;
    }

    #courseDetailOverlay .pattern-grid i {
        font-size: 1.15rem;
        color: var(--green-dark);
    }

    #courseDetailOverlay .footnote-bar {
        margin-top: .75rem;
        background: #F3F5FB;
        border-radius: 8px;
        padding: .45rem .6rem;
        font-size: .78rem;
        color: var(--text-muted);
    }

        #courseDetailOverlay .footnote-bar i {
            color: var(--navy);
            margin-right: .3rem;
        }

    #courseDetailOverlay .joint-cert-label {
        font-size: .82rem;
        font-weight: 700;
        margin: .75rem 0 .4rem;
    }

    #courseDetailOverlay .cert-logos {
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;
    }

        #courseDetailOverlay .cert-logos span {
            background: #fff;
            border: 1px solid var(--orange-border);
            border-radius: 8px;
            padding: .3rem .6rem;
            font-size: .82rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            color: var(--text-dark);
        }

        #courseDetailOverlay .cert-logos i {
            color: var(--orange);
        }

    #courseDetailOverlay .shield-watermark {
        position: absolute;
        right: .75rem;
        bottom: .75rem;
        font-size: 3rem;
        color: #EAF7EC;
        z-index: 0;
    }

    /* ===================== CCTP COLUMNS ===================== */
    #courseDetailOverlay .sessions-num {
        font-size: 2.15rem;
        font-weight: 800;
        color: var(--green-dark);
        line-height: 1;
    }

    #courseDetailOverlay .sessions-label {
        font-size: .82rem;
        color: var(--text-muted);
    }

    #courseDetailOverlay .eligibility-note,
    #courseDetailOverlay .speed-note {
        font-size: .76rem;
        border-radius: 8px;
        padding: .5rem .6rem;
        margin-top: .55rem;
        text-align: left;
    }

    #courseDetailOverlay .eligibility-note {
        background: var(--orange-bg);
        color: var(--orange-dark);
    }

    #courseDetailOverlay .speed-note {
        background: var(--blue-bg);
        color: #1d4b8f;
    }

        #courseDetailOverlay .eligibility-note i,
        #courseDetailOverlay .speed-note i {
            margin-right: .3rem;
        }

    /* ===================== BOTTOM STRIP ===================== */
    #courseDetailOverlay .bottom-strip {
        margin-top: 1rem;
        background: #fff;
        border-radius: var(--radius-md);
        padding: .7rem 1rem;
        text-align: center;
        font-size: .82rem;
        color: var(--text-dark);
        box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }

        #courseDetailOverlay .bottom-strip .divider {
            margin: 0 .6rem;
            color: #ccc;
        }

        #courseDetailOverlay .bottom-strip i {
            margin-right: .25rem;
        }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px) {
    #courseDetailOverlay .course-title {
        font-size: 1.85rem;
        margin-top: 2.4rem;
    }

    #courseDetailOverlay .know-more-btn {
        position: static;
        display: inline-flex;
        margin-bottom: .5rem;
    }

    #courseDetailOverlay .glance-card .col-lg-3 {
        margin-bottom: .75rem;
    }

    #courseDetailOverlay .course-wrapper {
        padding: 1.25rem 1.25rem 1.5rem;
        border-radius: 22px;
    }
}

@media (max-width: 575.98px) {
    #courseDetailOverlay .main-content {
        padding: .85rem;
    }

    #courseDetailOverlay .course-title {
        font-size: 1.4rem;
    }

    #courseDetailOverlay .course-subtitle {
        font-size: 1rem;
    }

    #courseDetailOverlay .crore-strip {
        flex-direction: column;
        text-align: center;
    }

    #courseDetailOverlay .glance-stats .col-6 {
        margin-bottom: .75rem;
    }

    #courseDetailOverlay .course-wrapper {
        padding: 1rem 1rem 1.25rem;
        border-radius: 18px;
        margin-bottom: 1.5rem;
    }

    #courseDetailOverlay .wrapper-label {
        font-size: .68rem;
    }
}

/* ===================== OVERLAY SHELL ===================== */
.course-detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1080;
}

    .course-detail-overlay.show {
        display: block;
    }

.course-detail-card {
    position: relative;
    max-width: 1280px;
    height: 94vh;
    margin: 3vh auto;
    background: #f5f7fb;
    border-radius: 12px;
    overflow-y: auto;
}

.course-detail-close {
    position: sticky;
    top: 10px;
    float: right;
    margin: 10px 14px 0 0;
    z-index: 5;
    border: 0;
    background: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}