/* ==========================================================================
   Course page (Views/Learner/_CourseDetailsPartial.cshtml)

   The pieces of the old top section that are still used (the carousel, the pricing card's
   insides, the enrolled state, the notes) keep their .cvh-* rules here. The page's layout - the
   dark band, the main column, the card that stays in view, the bar and the dock - is the .cvx
   section at the end of this file.
   ========================================================================== */

.cvh,
.cvx-bar,
.cvx-dock {
    --cvh-v: #6d4aff;
    --cvh-v-ink: #4f30e0;
    --cvh-v-soft: #f1edff;
    --cvh-ink: #14121f;
    --cvh-ink-2: #3d3a4d;
    --cvh-muted: #6c6980;
    --cvh-line: #e8e6f0;
    --cvh-wash: #f7f6fb;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--cvh-ink-2);
}


/* ---------------- media ---------------- */


.cvh-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--cvh-wash);
    box-shadow: 0 24px 48px -28px rgba(40, 20, 120, .45), 0 0 0 1px rgba(20, 18, 31, .04);
    outline: none;
}

    .cvh-hero #co-course-img-main {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* the intro-video component's overlays, which assumed a 5px image margin */
    .cvh-hero #co-civ-hero-blank,
    .cvh-hero #co-civ-hero-busy { inset: 0 !important; border-radius: 0 !important; }

    /* Hidden until the video component turns it on (it sets display:flex inline). Without a
       video on the course the component's own CSS never loads, and this used to fall through
       as a stray "play" glyph under the banner. */
    .cvh-hero #co-civ-hero-play { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2; cursor: pointer; }

/* ---- carousel (more than one item) ----
   One fixed square stage so the page does not jump as slides of different shapes come and go;
   each slide is contained in it rather than cropped. */
.cvh-hero:not(.single) { aspect-ratio: 1 / 1; max-height: 560px; }

    .cvh-hero:not(.single) #co-course-img-main { width: 100%; height: 100%; object-fit: contain; }

/* the shadow behind each arrow, so a white arrow reads on a white or a busy banner */
.cvh-hero:not(.single)::before,
.cvh-hero:not(.single)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 96px;
    z-index: 3;
    pointer-events: none;
}

.cvh-hero:not(.single)::before { left: 0; background: linear-gradient(90deg, rgba(10, 8, 30, .38), rgba(10, 8, 30, 0)); }
.cvh-hero:not(.single)::after { right: 0; background: linear-gradient(270deg, rgba(10, 8, 30, .38), rgba(10, 8, 30, 0)); }

.cvh-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #14121f;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(10, 8, 30, .35);
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

    .cvh-nav.prev { left: 14px; }
    .cvh-nav.next { right: 14px; }

    /* thick chevrons, drawn rather than taken from the icon font so the weight is ours */
    .cvh-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

    .cvh-nav:hover { background: var(--cvh-v); color: #fff; transform: scale(1.06); }
    .cvh-nav:focus-visible { outline: 3px solid rgba(109, 74, 255, .55); outline-offset: 2px; }

.cvh-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(10, 8, 30, .38);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.cvh-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

    .cvh-dot.on { width: 22px; background: #fff; }

/* the one-item case: just the banner */
.cvh-hero.single .cvh-nav,
.cvh-hero.single .cvh-dots { display: none; }

/* a new slide arrives from the side it came from */
@keyframes cvh-in-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cvh-in-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.cvh-hero #co-course-img-main.cvh-in-next { animation: cvh-in-next .32s ease both; }
.cvh-hero #co-course-img-main.cvh-in-prev { animation: cvh-in-prev .32s ease both; }

@media (prefers-reduced-motion: reduce) {
    .cvh-hero #co-course-img-main.cvh-in-next,
    .cvh-hero #co-course-img-main.cvh-in-prev { animation: none; }
}

@media (max-width: 767.98px) {
    .cvh-hero:not(.single) { max-height: 380px; }
    .cvh-nav { width: 40px; height: 40px; margin-top: -20px; }
    .cvh-nav.prev { left: 10px; }
    .cvh-nav.next { right: 10px; }
    .cvh-nav svg { width: 20px; height: 20px; }
    .cvh-hero:not(.single)::before, .cvh-hero:not(.single)::after { width: 70px; }
}

/* The tiles are the carousel's slides and are no longer shown. Only the tiles are hidden, not
   the container: the intro-video player's modal is rendered inside it. */
.cvh-thumbs { margin: 0; }
    .cvh-thumbs .co-course-img { display: none !important; }


/* ---------------- info ---------------- */

.cvh-info { min-width: 0; padding-right: 10px !important;}

.cvh-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cvh-muted);
    margin: 2px 0 10px;
}

    .cvh-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: #c9c5d8; }

.cvh-title {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--cvh-ink);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

/* the rating row and "Taught in" line sit flush with the title */
.cvh-info .co-rating-row { margin: 0 0 10px; }
.cvh-info .co-taught-in { margin: 0 0 16px; }

.cvh-facts {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

    .cvh-facts li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--cvh-line);
        border-radius: 14px;
        background: #fff;
        min-width: 0;
    }

    .cvh-facts .bi {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--cvh-v-soft);
        color: var(--cvh-v);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }

    .cvh-facts span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 700; color: var(--cvh-ink); line-height: 1.25; }
    .cvh-facts small { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--cvh-muted); margin-bottom: 2px; }


/* ---------------- the buy card ---------------- */

.cvh-buy {
    border: 1px solid var(--cvh-line);
    border-radius: 20px;
    background: #fff;
    padding: 18px 20px 16px;
    box-shadow: 0 18px 40px -30px rgba(40, 20, 120, .5);
    margin-right: 15px !important;
}

    /* the pricing partial is shared with the instructor overview, so it is restyled here
       rather than rewritten */
    .cvh-buy .co-course-price,
    .cvh-buy .co-course-validity,
    .cvh-buy .co-course-buy {
        margin: 0;
        line-height: 1.4;
    }

    .cvh-buy .co-cp-discount { margin: 0 0 14px !important; border-radius: 12px !important; }

    .cvh-buy .co-course-price { font-size: 15px; color: var(--cvh-muted); }
    .cvh-buy .co-course-price .co-text-strike { font-size: 15px; color: #9b98ad !important; font-weight: 500; }
    .cvh-buy .co-cp-label { display: block; font-size: 11.5px !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cvh-muted); margin-bottom: 2px; }
    .cvh-buy .co-cp-amount { font-family: "Sora", "Inter", system-ui, sans-serif; font-size: 30px !important; font-weight: 800 !important; color: var(--cvh-ink); letter-spacing: -.02em; }
    .cvh-buy .co-cp-tax { display: block; font-style: normal !important; font-size: 12px !important; color: #9b98ad !important; margin-top: 2px; }

    .cvh-buy .co-course-validity { font-size: 13.5px; color: var(--cvh-ink-2); margin: 6px 0 4px; }
    .cvh-buy .co-course-validity b { color: #c9c5d8; padding: 0 4px; }

    /* the subscription option: was a yellow highlighter strip, now a quiet alternative row */
    .cvh-buy .co-subscription-price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        width: auto;
        margin: 12px 0 0;
        padding: 10px 14px;
        border-radius: 12px;
        background: var(--cvh-v-soft);
        color: var(--cvh-v-ink);
        line-height: 1.35;
    }

        .cvh-buy .co-subscription-price .co-cp-label { display: inline; margin: 0 4px 0 0; color: var(--cvh-v-ink); }
        .cvh-buy .co-subscription-price .co-bold { font-size: 15px !important; color: var(--cvh-v-ink); }

.cvh-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.cvh-cta,
.cvh-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.cvh-cta {
    border: 0;
    background: var(--cvh-v);
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(109, 74, 255, .7);
}

    .cvh-cta:hover:not(:disabled) { background: var(--cvh-v-ink); transform: translateY(-1px); }
    .cvh-cta:focus-visible { outline: 3px solid rgba(109, 74, 255, .35); outline-offset: 2px; }
    .cvh-cta:disabled { background: #ece9f6; color: var(--cvh-muted); box-shadow: none; cursor: not-allowed; }

.cvh-ghost {
    border: 1.5px solid var(--cvh-line);
    background: #fff;
    color: var(--cvh-ink);
    height: 46px;
    font-size: 14.5px;
}

    .cvh-ghost:hover { border-color: #cfc6f5; background: var(--cvh-wash); }
    .cvh-ghost .bi { color: var(--cvh-v); }

.cvh-trust {
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px dashed var(--cvh-line);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: var(--cvh-muted);
}

    .cvh-trust li { display: inline-flex; align-items: center; gap: 6px; }
    .cvh-trust .bi { color: #13a37e; margin-top: -10px;}

.cvh-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--cvh-wash);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cvh-ink-2);
}

    .cvh-note > .bi { color: var(--cvh-v); margin-top: 1px; }
    .cvh-note .co-course-intro-desc { margin: 0; text-decoration: none; }

/* delivered through a partner institution */
.cvh-partner {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #f1e3b8;
    background: linear-gradient(120deg, #fffaf0, #fff);
}

.cvh-partner-logo {
    flex: 0 0 auto;
    width: 76px;
    height: 56px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f0ece2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .cvh-partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
    .cvh-partner-logo .bi { font-size: 24px; color: #a67c00; }

.cvh-partner-body { min-width: 0; }
.cvh-partner-text { font-size: 13.5px; line-height: 1.5; color: var(--cvh-ink-2); }
    .cvh-partner-text b { color: var(--cvh-ink); }
.cvh-partner-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a67c00; margin-bottom: 2px; }

/* ---------------- enrolled ---------------- */

.cvh-enrolled-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e3f6ef;
    color: #0e7a5c;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

.cvh-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 6px !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cvh-muted);
}

    .cvh-dates .bi { color: var(--cvh-v); margin-right: 4px; }
    .cvh-dates > span > span { font-weight: 600; color: var(--cvh-ink-2); }

.cvh-progress { margin: 14px 0 16px; }

.cvh-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--cvh-muted);
    margin-bottom: 6px;
}

    .cvh-progress-head b { font-size: 15px; color: var(--cvh-ink); }

.cvh-progress-track {
    height: 10px;
    border-radius: 999px;
    background: #eeecf5;
    overflow: hidden;
}

    .cvh-progress-track span {
        display: block;
        height: 100%;
        min-width: 6px;
        border-radius: inherit;
        background: linear-gradient(90deg, #8b6bff, var(--cvh-v));
    }

/* the certificate actions keep their old classes; they just take the card's shape here */
.cvh-buy .co-course-buy .btn {
    height: 46px;
    border-radius: 14px !important;
    padding: 0 20px !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cvh-buy .co-course-buy p { line-height: 1.45 !important; }

/* notes under the hero (enrolment paused, LIVE batches) */
.cvh-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 18px 22px 0 14px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #f1e3b8;
    background: #fffaf0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cvh-ink-2, #3d3a4d);
    font-weight: 600;
}

    .cvh-alert .bi { color: #a67c00; font-size: 18px; flex: none; margin-top: 1px; }
    .cvh-alert.info { border-color: #dcd3ff; background: #f6f3ff; }
    .cvh-alert.info .bi { color: #6d4aff; }

/* ---------------- the intro-video player's backdrop ----------------
   Every other modal keeps the app's violet backdrop (co-modal.css). Behind a video, a light grey
   reads better, so this one is re-tinted while the player is open - and its title and close
   button, which were white for a dark backdrop, turn ink to stay visible on the grey. */
body:has(#co-civ-modal.show) .modal-backdrop,
body:has(#co-civ-modal[aria-modal="true"]) .modal-backdrop {
    --bs-backdrop-bg: #e5e7eb;
    --bs-backdrop-opacity: .92;
}

#co-civ-modal #co-civ-title { color: #14121f !important; font-weight: 600; }
#co-civ-modal .btn-close-white { filter: none; }

/* ==========================================================================
   .cvx - the page's layout

   A dark band across the top with everything that identifies the course; the long read in the
   main column under it; one card on the right that starts inside the band and stays in view;
   a slim bar at the top once the band has gone; a price-and-button dock on a phone.

   Two columns while this page's own area is 860px or wider. Narrower (.cvx-wrap.is-narrow, set
   by the partial's script from the area's real width - the chapter list takes part of a desktop
   screen) it is one column: media, band, price and button, the reading.
   ========================================================================== */

/* the wrappers this partial sits in pad, size and colour it for an older layout */
#co-course-view-details .co-course-header {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#co-course-view-details > .row,
#co-course-view-details-row { margin: 0 !important; }
    #co-course-view-details-row > .cvx-wrap { padding: 0 !important; }

.cvx {
    --side: 344px;
    --gap: 40px;
    --pad: 32px;
    --main: 800px;
    --band-1: #120e2b;
    --band-2: #1d1652;
    --band-3: #2c1f7a;
    --gold: #f5b301;
    /* [gutter] [main] [gap] [card] [gutter]: on a wide screen the reading and the card stay
       together in the middle, the way the marketplaces centre theirs, instead of drifting apart */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--main)) var(--gap) var(--side) minmax(0, 1fr);
    align-items: start;
    padding: 0 var(--pad) 72px;
    position: relative;
}

/* ---------------- the band ---------------- */

.cvx-band {
    grid-column: 1 / -1;
    grid-row: 1;
    /* full width, with its text lined up on the main column: 100% here is the whole grid's width,
       so the second term is one gutter */
    --gutter: max(0px, calc((100% - var(--main) - var(--gap) - var(--side)) / 2));
    margin: 0 calc(var(--pad) * -1);
    padding: 34px calc(var(--pad) + var(--gutter) + var(--side) + var(--gap)) 36px calc(var(--pad) + var(--gutter));
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(900px 340px at 78% -30%, rgba(139, 107, 255, .55), transparent 62%),
        radial-gradient(620px 260px at -4% 120%, rgba(45, 212, 191, .16), transparent 60%),
        linear-gradient(128deg, var(--band-1) 0%, var(--band-2) 52%, var(--band-3) 100%);
    isolation: isolate;
}

    /* a faint dot grid, fading out to the right - texture rather than decoration */
    .cvx-band::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.2px);
        background-size: 18px 18px;
        -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 70%);
        mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 70%);
        pointer-events: none;
    }

.cvx-band-in { max-width: 780px; }

.cvx-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #c9c2ff;
    margin: 0 0 14px;
}

    .cvx-crumbs .bi { font-size: 10px; color: rgba(255, 255, 255, .45); }

.cvx .cvx-title {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
}

.cvx-sub {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
    margin: 0 0 16px;
    max-width: 720px;
}

.cvx-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }

    .cvx-badges .badge {
        font-size: 11.5px !important;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
        border-radius: 6px;
        padding: 5px 9px;
        line-height: 1.2;
    }

.cvx-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #e6e1ff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
}

    .cvx-pill.gold { background: #fde68a; color: #4a3500; border-color: transparent; }
    .cvx-pill.new { background: #a7f3d0; color: #064e3b; border-color: transparent; }
    .cvx-pill .bi { font-size: 12px; }

/* the rating row, on the dark band */
.cvx-band .co-rating-row { margin: 0 0 12px !important; gap: 10px; }
.cvx-band .co-rating-num { color: #fde68a; font-size: 15px; }
.cvx-band .co-rating-num .co-grey,
.cvx-band .co-reviews-link { color: #cfc8ff !important; }
    .cvx-band .co-reviews-link:hover { color: #fff !important; }
.cvx-band .co-stars-display .bi-star { color: rgba(255, 255, 255, .3); }
.cvx-band .co-rate-btn { background: rgba(253, 230, 138, .14); border-color: rgba(253, 230, 138, .5); color: #fde68a; }
    .cvx-band .co-rate-btn:hover { background: rgba(253, 230, 138, .24); color: #fff3c4; }

.cvx-by { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; font-size: 14px; color: rgba(255, 255, 255, .78); }
    .cvx-by a { color: #c9b8ff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    .cvx-by a:hover { color: #fff; }
    .cvx-by b { color: #fff; }

.cvx-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
    .cvx-meta .bi { margin-right: 4px; color: #a998ff; }

.cvx-band .co-taught-in { margin: 6px 0 0 !important; color: rgba(255, 255, 255, .78); }
.cvx-band .co-taught-in > .bi { color: #a998ff; }
.cvx-band .co-taught-in .lang { background: rgba(255, 255, 255, .12); color: #fff; }
.cvx-band .co-taught-in .lang small { color: #cfc8ff; }

/* ---------------- the card ---------------- */

.cvx-side {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--cvx-top, 0px) + 12px);
    margin-top: 28px;
    z-index: 5;
    min-width: 0;
}

.cvx-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px -24px rgba(18, 14, 43, .45), 0 0 0 1px rgba(18, 14, 43, .06);
}

/* the media sits flush at the top of the card */
.cvx-media { position: relative; max-height: 700px; transition: max-height .35s ease, opacity .25s ease; }
.cvx-card .cvh-hero { border-radius: 0; box-shadow: none; background: #0e0b22; }
.cvx-card .cvh-hero:not(.single) { aspect-ratio: 1 / 1; max-height: 344px; }
.cvx-card .cvh-nav { width: 40px; height: 40px; margin-top: -20px; }
    .cvx-card .cvh-nav svg { width: 20px; height: 20px; }
    .cvx-card .cvh-nav.prev { left: 10px; }
    .cvx-card .cvh-nav.next { right: 10px; }
.cvx-card .cvh-hero:not(.single)::before,
.cvx-card .cvh-hero:not(.single)::after { width: 64px; }

/* past the band: the media folds away so the price and the button always fit */
.cvx.is-past .cvx-media { max-height: 0; opacity: 0; overflow: hidden; }
.cvx.is-past .cvx-side { top: calc(var(--cvx-top, 0px) + 76px); }
.cvx.is-past .cvx-card { max-height: calc(100vh - var(--cvx-top, 0px) - 96px); overflow-y: auto; scrollbar-width: thin; }

/* co-bootstrap.css nudges these two ids for the old two-column top on small screens */
.cvx #co-course-view-img,
.cvx #co-course-view-desc { margin: 0 !important; width: auto !important; max-width: none !important; }

/* the buy area inside the card: no box of its own any more */
.cvx .cvx-buy { padding: 20px 22px 18px !important; }
.cvx .cvh-buy { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 !important; background: transparent; }
.cvx .cvh-buy .co-course-price.co-margin-top-lg { margin-top: 0 !important; }
.cvx .cvh-buy .co-cp-amount { font-size: 32px !important; }
.cvx .cvh-buy .co-course-validity { font-weight: 600; color: #0e7a5c; }
.cvx .cvh-ctas { margin-top: 14px; }
.cvx .cvh-trust { justify-content: center; }
    .cvx .cvh-trust .bi { margin-top: 0; }

.cvx-incl { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cvh-line); }
.cvx-incl-h { font-size: 14px; font-weight: 800; color: var(--cvh-ink); margin: 0 0 8px; }
.cvx-incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cvx-incl li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--cvh-ink-2); line-height: 1.35; }
    .cvx-incl li .bi { flex: none; width: 18px; color: var(--cvh-v); font-size: 15px; text-align: center; }

.cvx-share { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cvh-line); }

.cvx-link-btn {
    border: 0;
    background: none;
    padding: 4px 2px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cvh-v-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    text-decoration-color: rgba(79, 48, 224, .3);
    text-underline-offset: 4px;
}

    .cvx-link-btn:hover { color: var(--cvh-v); text-decoration-color: currentColor; }

/* enrolled: the card holds progress and the certificate */
.cvx .co-course-buy { margin: 0 !important; line-height: 1.4; }
.cvx .co-course-buy .btn { width: 100%; justify-content: center; }

/* ---------------- the long read ---------------- */

.cvx-main { grid-column: 2; grid-row: 2; min-width: 0; padding-top: 6px; }

.cvx-sec { margin-top: 36px; }
    .cvx-sec:first-child { margin-top: 28px; }

.cvx-h2 {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cvh-ink);
    margin: 0 0 16px;
}

/* every reading section is a card, the same shape as "Module certificates" (.lmc in
   co-program-modules.css): hairline border, 16px corners, white, padded. The certificates wrapper
   (.lmc-wide) is left out - .lmc draws its own card, and the wrapper renders empty for a program
   with no certified modules. */
.cvx-sec:not(.lmc-wide) {
    margin-top: 24px;
    padding: 22px 24px;
    border: 1px solid #e4e2ee;
    border-radius: 16px;
    background: #fff;
    min-width: 0;
}
    .cvx-sec:not(.lmc-wide):first-child { margin-top: 28px; }

    /* a section nested in another, and boxes that drew their own card inside one, don't double up */
    .cvx-sec .cvx-sec { margin-top: 24px; padding: 0; border: 0; border-radius: 0; background: none; }
    .cvx-sec .cvx-instructor { border: 0; border-radius: 0; padding: 0; }

.cvx-main .cvh-alert { margin: 24px 0 0 !important; }

/* what you'll learn: the boxed two-column checklist */
.cvx-learn {
    border: 1px solid var(--cvh-line);
    border-radius: 16px;
    padding: 22px 24px 20px;
    background: linear-gradient(180deg, #faf9ff, #fff 70%);
}

.cvx-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
    .cvx-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--cvh-ink-2); }
    .cvx-check .bi {
        flex: none;
        width: 22px;
        height: 22px;
        margin-top: 1px;
        border-radius: 50%;
        background: var(--cvh-v-soft);
        color: var(--cvh-v);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        -webkit-text-stroke: .4px currentColor;
    }

/* related topics */
.cvx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cvx-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #d9d4f0;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--cvh-ink);
}

    .cvx-chip.strong { background: var(--cvh-ink); border-color: var(--cvh-ink); color: #fff; }

/* tools: a lettered tile per tool */
.cvx-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cvx-tool {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--cvh-line);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cvh-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.cvx-tool-mark {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #8b6bff, #4f30e0);
}

.cvx-tool:nth-child(4n+2) .cvx-tool-mark { background: linear-gradient(135deg, #2dd4bf, #0e7490); }
.cvx-tool:nth-child(4n+3) .cvx-tool-mark { background: linear-gradient(135deg, #fb923c, #c2410c); }
.cvx-tool:nth-child(4n+4) .cvx-tool-mark { background: linear-gradient(135deg, #f472b6, #be185d); }

/* the course content accordion */
.cvx-content-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--cvh-muted); margin: -6px 0 12px; }

.cvx-acc { border: 1px solid #d9d6e4; border-radius: 14px; overflow: hidden; }
.cvx-acc.is-clipped .cvx-acc-item:nth-child(n+7) { display: none; }

.cvx-acc-item + .cvx-acc-item { border-top: 1px solid #d9d6e4; }

.cvx-acc-item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f7f6fb;
    cursor: pointer;
    user-select: none;
}

    .cvx-acc-item > summary::-webkit-details-marker { display: none; }
    .cvx-acc-item > summary:hover { background: #f1effa; }
    .cvx-acc-item > summary:focus-visible { outline: 2px solid var(--cvh-v); outline-offset: -2px; }

.cvx-acc-caret { flex: none; font-size: 13px; color: var(--cvh-ink); transition: transform .2s ease; transform: rotate(-90deg); }
.cvx-acc-item[open] .cvx-acc-caret { transform: none; }
.cvx-acc-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--cvh-ink); }
.cvx-acc-meta { flex: none; font-size: 13px; color: var(--cvh-muted); white-space: nowrap; }

.cvx-acc-list { list-style: none; margin: 0; padding: 6px 0; background: #fff; }
    .cvx-acc-list li { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 44px; font-size: 14px; color: var(--cvh-ink-2); }
    .cvx-acc-ico { flex: none; color: #8a85a3; font-size: 15px; }
    .cvx-acc-topic { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: none; padding: 0; font: inherit; color: inherit; overflow-wrap: anywhere; }
    .cvx-acc-list li.can-open .cvx-acc-topic { color: var(--cvh-v-ink); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(79, 48, 224, .25); text-underline-offset: 3px; }
        .cvx-acc-list li.can-open .cvx-acc-topic:hover { text-decoration-color: currentColor; }
    .cvx-acc-right { flex: none; display: inline-flex; align-items: center; gap: 14px; }
    .cvx-acc-dur { font-size: 13px; color: var(--cvh-muted); font-variant-numeric: tabular-nums; }
    .cvx-acc-lock { color: #b9b5c9; font-size: 13px; }
    .cvx-acc-empty { color: var(--cvh-muted); font-style: italic; }

.cvx-preview { border: 0; background: var(--cvh-v-soft); color: var(--cvh-v-ink); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
    .cvx-preview:hover { background: var(--cvh-v); color: #fff; }

.cvx-more-btn {
    width: 100%;
    margin-top: 12px;
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid var(--cvh-ink);
    background: #fff;
    font-weight: 800;
    font-size: 14.5px;
    color: var(--cvh-ink);
    cursor: pointer;
}

    .cvx-more-btn:hover { background: var(--cvh-wash); }

/* ---- the chapter lists, docked into "Course content" (coDockChapterList, co-learner.js) ----
   The page's own chapter lists - progress, and tabs for chapters or modules, calendar and
   recordings - are moved here: the desktop column from the right, and the phone sheet's copy
   from #courseContentModal. Each still shows only at its own sizes. While they are here the
   accordion steps aside; it is the fallback for a page without them. */
.cvx-list-slot:empty { display: none; }

#co-course-chapter-list.is-docked,
#co-course-chapter-list-m.is-docked {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    top: auto !important;
    right: auto !important;
    border: 1px solid #d9d6e4 !important;
    border-radius: 16px;
    padding: 12px 16px 16px;
    background: #fff;
    overflow: hidden;
}

body.co-list-docked .cvx-acc-block { display: none; }

/* ==== one design at every size ====
   Both lists hold the same things (progress, chapters or modules, calendar, recordings), but only
   the phone copy has been redesigned - the desktop column still had the old blue progress strip
   and underlined tabs. Docked in the page, the phone copy is the one shown, at every width; the
   desktop column stays in the page (hidden) for its topic links and the ?hash= restore, and is
   what goes back beside a topic when one is opened. */
#co-course-chapter-list.is-docked { display: none !important; }
#co-course-chapter-list-m.is-docked { display: block !important; }

/* ==== the phone copy, docked: redesigned for reading in the page ====
   It was laid out as a full-height sheet: absolutely positioned tab panels at 100% width (which
   is what pushed the page sideways), a 100vh tab set, and a strip of three underlined labels
   with bitmap icons. In the page it becomes:
   - the progress card, rounded all round;
   - a segmented control - three equal pills, icon over label, the chosen one filled violet -
     that sticks to the top of the screen while its list scrolls, so switching between chapters,
     calendar and recordings is always one tap away (a lone "Chapters" tab is hidden: the
     section's heading already says it);
   - the panels in the normal flow underneath. */
#co-course-chapter-list-m.is-docked {
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    background: transparent;
    overflow: visible;   /* not hidden: the tabs are sticky */
}

#co-course-chapter-list-m.is-docked .co-mprog { border-radius: 18px; padding-right: 16px; margin: 0 0 6px; }

#co-course-chapter-list-m.is-docked > .tabset {
    display: grid !important;   /* also between 768 and 991px, where it was d-md-none */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0 !important;
    width: auto !important;
    max-width: none;
    padding: 0 !important;
    background: transparent !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

    #co-course-chapter-list-m.is-docked > .tabset:has(> label:nth-of-type(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #co-course-chapter-list-m.is-docked > .tabset:has(> label:nth-of-type(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #co-course-chapter-list-m.is-docked > .tabset > .tab-panels { grid-column: 1 / -1; min-width: 0; }

    #co-course-chapter-list-m.is-docked > .tabset > label {
        position: sticky;
        top: var(--cvx-top, 0px);
        z-index: 4;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        padding: 14px 4px 12px !important;
        border: 0 !important;
        background: #fff;
        font-size: 12.5px !important;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .01em;
        color: #5d5a70 !important;   /* site.css colours every label black, !important */
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        /* the pill behind each label */
        #co-course-chapter-list-m.is-docked > .tabset > label::before {
            content: "";
            position: absolute;
            inset: 6px 3px;
            z-index: -1;
            border-radius: 14px;
            background: #f4f2fb;
            transition: background-color .2s ease, box-shadow .2s ease;
        }

        /* the icon, drawn from the icon font instead of the old bitmaps */
        #co-course-chapter-list-m.is-docked > .tabset > label::after {
            position: static !important;
            order: -1;
            content: "\f2cb";
            width: auto !important;
            height: auto !important;
            transform: none !important;
            background: none !important;
            font-family: "bootstrap-icons" !important;
            font-size: 19px;
            font-weight: 400;
            line-height: 1;
            color: #6d4aff;
            transition: color .2s ease;
        }

        #co-course-chapter-list-m.is-docked > .tabset.co-mtabs--top > label[for="tab1-m"]::after { content: "\f2cc"; }
        #co-course-chapter-list-m.is-docked > .tabset > label[for="tab2-m"]::after { content: "\f1f3"; }
        #co-course-chapter-list-m.is-docked > .tabset > label[for="tab3-m"]::after { content: "\f21f"; }

        #co-course-chapter-list-m.is-docked > .tabset > label > img,
        #co-course-chapter-list-m.is-docked > .tabset > label > i { display: none !important; }

    #co-course-chapter-list-m.is-docked > .tabset > input:checked + label { color: #fff !important; }
        #co-course-chapter-list-m.is-docked > .tabset > input:checked + label::before {
            background: linear-gradient(135deg, #7b5cff, #4f30e0);
            box-shadow: 0 10px 20px -12px rgba(79, 48, 224, .8);
        }
        #co-course-chapter-list-m.is-docked > .tabset > input:checked + label::after { color: #fff; }

    #co-course-chapter-list-m.is-docked > .tabset > input:focus-visible + label { outline: none; }
        #co-course-chapter-list-m.is-docked > .tabset > input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(109, 74, 255, .35); }

    /* one tab only: the heading above already names it */
    #co-course-chapter-list-m.is-docked > .tabset:not(:has(> label:nth-of-type(2))) > label { display: none; }

    /* the chapter accordion inside (accordian.css), made a card list: it was pulled 10px past
       both edges and made a screen tall for the sheet, with the summary line floated over the
       title by absolute positioning */
    #co-course-chapter-list-m.is-docked .co-accordion,
    #co-course-chapter-list.is-docked .co-accordion {
        margin: 0 !important;
        min-height: 0 !important;
        border: 1px solid #e3e0ee;
        border-radius: 16px;
        overflow: hidden;
        background: #fff !important;
    }

    #co-course-chapter-list-m.is-docked .co-accordion .tab + .tab { border-top: 1px solid #ece9f6; }

    #co-course-chapter-list-m.is-docked .co-accordion .tab__label {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 14px;
        padding: 18px 22px !important;
        background: #f8f7fc;
        transition: background-color .15s ease;
    }

        #co-course-chapter-list-m.is-docked .co-accordion .tab__label:hover { background: #f1effa; }

        #co-course-chapter-list-m.is-docked .co-accordion .tab__label > p:first-child {
            grid-column: 1;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 16px !important;
            line-height: 1.35 !important;
            color: #14121f;
            overflow: visible !important;
        }

        #co-course-chapter-list-m.is-docked .co-accordion .tab__label .co-section-desc {
            position: static !important;
            grid-column: 1;
            min-height: 0 !important;
            max-height: none !important;
            margin: 4px 0 0 !important;
            padding: 0 !important;
            font-size: 13.5px !important;
            line-height: 1.4;
            color: #6c6980;
        }

        #co-course-chapter-list-m.is-docked .co-accordion .tab__label::after {
            grid-column: 2;
            grid-row: 1 / span 2;
            color: #6d4aff;
            font-weight: 700;
        }

    #co-course-chapter-list-m.is-docked .co-accordion .co-section-chapter-accordian { border: 0 !important; border-radius: 0 !important; margin: 0 !important; }   /* it had -20px below, clipping the last topic */
    #co-course-chapter-list-m.is-docked .co-accordion .co-section-chapter-accordian .card-body { padding: 6px 0 !important; }

    /* ---- a topic row ----
       Was: a raw checkbox jammed against the left edge (green/grey via inline styles), an
       underlined navy title in a fixed 36px box, and the meta on its own indented line with a
       stray "|". Now: a status disc (a tick once done), the title in ink, and one quiet meta line
       under it - type and length, and an eye when it can be opened. Rows that open get a hover. */
    #co-course-chapter-list-m.is-docked .co-accordion .co-chapter-info-preview {
        margin: 0 !important;   /* the old list pulled each row 15px to the left */
        height: auto !important;   /* and fixed its height, cutting off a title that wraps */
        min-height: 0 !important;
        padding: 15px 22px !important;
        border-bottom: 1px solid #f1eff7 !important;
        background: #fff !important;
        transition: background-color .15s ease;
    }

        #co-course-chapter-list-m.is-docked .co-accordion .co-chapter-info-preview:last-child { border-bottom: 0 !important; }
        #co-course-chapter-list-m.is-docked .co-accordion .co-chapter-info-preview:has(.co-chapter-preview-available):hover { background: #faf9ff !important; }

        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .list-item { margin: 0 !important; height: auto !important; }
        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .flex { display: block !important; }
        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .co-chapter-view-name { padding: 0 !important; }

        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .form-check {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin: 0 !important;
            padding: 0 !important;
            min-height: 0;
        }

            /* the checkbox itself is styled inline, so it steps aside for a drawn disc */
            #co-course-chapter-list-m.is-docked .co-chapter-info-preview .co-chapter-check { display: none !important; }

            #co-course-chapter-list-m.is-docked .co-chapter-info-preview .form-check::before {
                content: "";
                flex: none;
                width: 20px;
                height: 20px;
                margin-top: 1px;
                border-radius: 50%;
                border: 2px solid #d4d0e3;
                background: #fff;
                display: grid;
                place-items: center;
                font-family: "bootstrap-icons" !important;
                font-size: 12px;
                line-height: 1;
                color: #fff;
            }

            #co-course-chapter-list-m.is-docked .co-chapter-info-preview .form-check:has(.co-chapter-check:checked)::before {
                content: "\f633";
                border-color: #12b886;
                background: #12b886;
            }

        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .co-chapter-title-cx {
            height: auto !important;
            overflow: visible !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
            text-transform: none !important;
            text-decoration: none !important;
            color: #14121f !important;
        }

        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .co-chapter-preview-available { cursor: pointer; }
            #co-course-chapter-list-m.is-docked .co-chapter-info-preview .co-chapter-preview-available:hover { color: #4f30e0 !important; }
        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .co-chapter-preview-not-available { color: #6c6980 !important; }

        #co-course-chapter-list-m.is-docked .co-chapter-info-preview .co-chapter-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px 12px;
            margin: 6px 0 0 34px !important;
            font-size: 13.5px !important;
            line-height: 1.3;
            color: #6c6980 !important;
        }

            #co-course-chapter-list-m.is-docked .co-chapter-meta .co-chapter-duration { padding: 0 !important; display: inline-flex; align-items: center; gap: 5px; }
            #co-course-chapter-list-m.is-docked .co-chapter-meta .co-icon-meta { font-size: 14px; color: #8a85a3; }
            /* the "|" before the eye goes; the eye stays */
            #co-course-chapter-list-m.is-docked .co-chapter-meta > span:last-child { font-size: 0 !important; }
                #co-course-chapter-list-m.is-docked .co-chapter-meta > span:last-child .bi { font-size: 14px !important; }
                #co-course-chapter-list-m.is-docked .co-chapter-meta > span:last-child .bi-eye-fill { color: #6d4aff !important; }
                #co-course-chapter-list-m.is-docked .co-chapter-meta > span:last-child .bi-eye-slash-fill { color: #c3bfd3 !important; }

    /* the panels: in the flow, full width of the section */
    #co-course-chapter-list-m.is-docked .tab-panel {
        position: static !important;
        width: auto !important;
        margin-top: 0 !important;
        padding: 10px 0 0 !important;
        border-top: 0 !important;
    }

/* ---- phones: the course-content tabs, copied to the very top of the page (#cvx-qtabs) ----
   Same pills as the real ones; a tap scrolls down to "Course content" and opens that tab
   (cvxBuildQuickTabs in the partial). Only in the one-column layout. */
.cvx-qtabs { display: none; }

.cvx-wrap.is-narrow .cvx-qtabs:not([hidden]) {
    order: -1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #ece9f6;
}

.cvx-qtab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 4px 7px;
    border: 0;
    border-radius: 14px;
    background: #f4f2fb;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #5d5a70;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

    .cvx-qtab::before {
        content: "\f2cb";
        font-family: "bootstrap-icons" !important;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        color: #6d4aff;
    }

    .cvx-qtabs.is-program .cvx-qtab[data-for="tab1-m"]::before { content: "\f2cc"; }
    .cvx-qtab[data-for="tab2-m"]::before { content: "\f1f3"; }
    .cvx-qtab[data-for="tab3-m"]::before { content: "\f21f"; }

    .cvx-qtab.on {
        background: linear-gradient(135deg, #7b5cff, #4f30e0);
        color: #fff;
        box-shadow: 0 10px 20px -12px rgba(79, 48, 224, .8);
    }

        .cvx-qtab.on::before { color: #fff; }

    .cvx-qtab:focus-visible { outline: 3px solid rgba(109, 74, 255, .4); outline-offset: 1px; }

/* phones: "Course content" comes first in the reading - straight after the price and the
   button - so the way into the course is never a long scroll away; the jump button goes */
.cvx-wrap.is-narrow .cvx-main { display: flex; flex-direction: column; }
.cvx-wrap.is-narrow #cvx-content { order: -1; margin-top: 26px; }
body.co-list-docked .cvx-mobile-nav { display: none !important; }

/* nothing in the page may push it sideways */
.cvx-wrap.is-narrow { overflow-x: clip; }
.cvx-wrap.is-narrow .cvx-main > * { min-width: 0; max-width: 100%; }
#cvx-content.no-acc:not(:has(.is-docked)) { display: none; }

/* ---- the skeleton the page opens with (Views/Shared/_CourseViewOverviewSkeleton.cshtml) ---- */
.cvx-sk.cosk { padding-top: 0; }
.cvx-sk .cvx-band .cosk-b { --cosk-bg: rgba(255, 255, 255, .11); --cosk-shine: rgba(255, 255, 255, .14); }
.cvx-sk-l { height: 14px; border-radius: 7px; margin-bottom: 12px; }
.cvx-sk-l.is-t { height: 30px; border-radius: 10px; }
.cvx-sk-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.cvx-sk-pill { width: 96px; height: 24px; border-radius: 6px; }
.cvx-sk-media { aspect-ratio: 1 / 1; border-radius: 0 !important; --cosk-bg: #dedbea; }
.cvx-sk-btn { height: 50px; border-radius: 14px !important; margin-top: 14px; --cosk-bg: #e3dcff; }
    .cvx-sk-btn.is-ghost { height: 46px; margin-top: 10px; --cosk-bg: #efeef5; }
.cvx-sk-box { height: 210px; border-radius: 16px !important; }
    .cvx-sk-box.is-tall { height: 320px; }
.cvx-wrap.is-narrow .cvx-sk-media { aspect-ratio: auto; height: min(100vw, 420px); }

/* projects: numbered tiles */
.cvx-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cvx-project {
    position: relative;
    padding: 16px 16px 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--cvh-line);
    background: #fff;
    overflow: hidden;
}

    .cvx-project::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #8b6bff, #2dd4bf); }
.cvx-project-no { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cvh-v); margin-bottom: 6px; }
.cvx-project-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--cvh-ink); line-height: 1.4; overflow-wrap: anywhere; }

/* requirements */
.cvx-bullets { margin: 0; padding-left: 22px; display: grid; gap: 8px; list-style: disc; }
    .cvx-bullets li { font-size: 14.5px; line-height: 1.55; color: var(--cvh-ink-2); }
        .cvx-bullets li::marker { color: var(--cvh-v); }

/* description: taller before "Show more", and no ceiling once open */
.cvx .description-content { max-height: 240px; font-size: 15px; line-height: 1.65; color: var(--cvh-ink-2); }
    .cvx .description-content.expanded { max-height: none; }
    .cvx .description-content .co-course-intro-desc-2 { font-size: 15px !important; }
.cvx .show-more-btn { color: var(--cvh-v-ink); font-weight: 800; }

/* highlights */
.cvx-highs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cvx-high { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--cvh-wash); font-size: 14px; line-height: 1.5; color: var(--cvh-ink-2); }
    .cvx-high .bi { color: #d97706; flex: none; margin-top: 1px; }

/* who it is for: the fact tiles */
.cvx .cvh-facts { margin: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* the instructor block (loaded by ajax) */
.cvx-instructor { border: 1px solid var(--cvh-line); border-radius: 16px; padding: 18px 20px; }

/* reviews */
.cvx-score { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(120deg, #fffbeb, #fff 60%); border: 1px solid #f6e7b0; }
.cvx-score-big { font-family: "Sora", "Inter", sans-serif; font-size: 52px; font-weight: 800; line-height: 1; color: #a16207; letter-spacing: -.03em; }
.cvx-score-side { display: flex; flex-direction: column; gap: 4px; }
.cvx-score-stars .bi { font-size: 18px; color: var(--gold); }
    .cvx-score-stars .bi-star { color: #e5d9a8; }
.cvx-score-count { font-size: 14px; color: var(--cvh-muted); font-weight: 600; }
.cvx-score-acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.cvx .cvx-score-btn { width: auto; height: 44px; padding: 0 18px; font-size: 14px; }

/* the "Course contents" button on phones and tablets (the chapter list lives in a sheet there) */
.cvx-mobile-nav { margin: 18px 0 0; }
.cvx-mobile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid var(--cvh-ink);
    background: #fff;
    color: var(--cvh-ink);
    font-weight: 800;
    font-size: 14px;
}

/* ---------------- the bar at the top, once the band has gone ---------------- */

.cvx-bar {
    position: fixed;
    top: var(--cvx-top, 0px);
    left: 0;
    z-index: 1025;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 24px;
    min-height: 64px;
    color: #fff;
    background: linear-gradient(110deg, #120e2b, #241a63);
    box-shadow: 0 10px 24px -12px rgba(18, 14, 43, .6);
    transform: translateY(-110%);
    transition: transform .25s ease;
    font-family: "Inter", system-ui, sans-serif;
}

    .cvx-bar.on { transform: none; }

.cvx-bar-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cvx-bar-txt > b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvx-bar-rate { font-size: 12.5px; color: rgba(255, 255, 255, .75); }
    .cvx-bar-rate b { color: #fde68a; }
    .cvx-bar-rate .bi { color: #f5b301; font-size: 11px; }

.cvx-bar-price { flex: none; display: inline-flex; align-items: baseline; gap: 8px; }
    .cvx-bar-price b { font-family: "Sora", "Inter", sans-serif; font-size: 20px; }
    .cvx-bar-price s { font-size: 13px; color: rgba(255, 255, 255, .55); }

.cvx-bar .cvx-bar-cta { flex: none; width: auto; height: 44px; padding: 0 22px; font-size: 14.5px; box-shadow: none; }
.cvx-bar-enrolled { flex: none; font-size: 13.5px; font-weight: 700; color: #a7f3d0; }

/* ---------------- the dock on a phone ---------------- */

.cvx-dock { display: none; }

/* ---------------- one column ---------------- */

.cvx-wrap.is-narrow .cvx { display: flex; flex-direction: column; align-items: stretch; padding: 0 0 96px; }
.cvx-wrap.is-narrow .cvx-side,
.cvx-wrap.is-narrow .cvx-card { display: contents; }

.cvx-wrap.is-narrow .cvx-media { order: 0; background: var(--band-1); max-height: none !important; opacity: 1 !important; overflow: visible !important; }
.cvx-wrap.is-narrow .cvx-band { order: 1; margin: 0; padding: 22px 20px 26px; }
.cvx-wrap.is-narrow .cvx-buy { order: 2; padding: 20px 20px 4px !important; background: #fff; }
.cvx-wrap.is-narrow .cvx-main { order: 3; padding: 0 20px; max-width: none; }

/* the carousel's stage: the full width, letterboxed on the band's colour, rather than a square */
.cvx-wrap.is-narrow .cvx-card .cvh-hero:not(.single) { aspect-ratio: auto; width: 100%; height: min(100vw, 420px); max-height: none; background: var(--band-1); }
.cvx-wrap.is-narrow .cvx-card .cvh-hero.single { max-width: 720px; margin: 0 auto; }
.cvx-wrap.is-narrow #cvh-hero:not(.single) #co-course-img-main { height: 100%; object-fit: contain; }
.cvx-wrap.is-narrow .cvx-title { font-size: 24px; }
.cvx-wrap.is-narrow .cvx-sub { font-size: 15.5px; }
.cvx-wrap.is-narrow .cvx-bar { display: none; }

.cvx-wrap.is-narrow .cvx-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1025;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 -10px 26px -14px rgba(18, 14, 43, .45);
    transform: translateY(110%);
    transition: transform .25s ease;
}

    .cvx-wrap.is-narrow .cvx-dock.on { transform: none; }
    .cvx-dock .cvx-dock-price { flex: none; display: flex; flex-direction: column; line-height: 1.15; }
    .cvx-dock .cvx-dock-price b { font-family: "Sora", "Inter", sans-serif; font-size: 19px; color: #14121f; }
    .cvx-dock .cvx-dock-price s { font-size: 12px; color: #9b98ad; }
    .cvx-dock .cvh-cta { flex: 1 1 auto; height: 48px; }

@media (max-width: 575.98px) {
    .cvx-check,
    .cvx-highs { grid-template-columns: minmax(0, 1fr); }
    .cvx-learn,
    .cvx-sec:not(.lmc-wide) { padding: 18px 16px; }
    .cvx-sec .cvx-sec { padding: 0; }
    .cvx-acc-item > summary { padding: 13px 14px; }
    .cvx-acc-list li { padding-left: 38px; padding-right: 14px; }
    .cvx-acc-meta { display: none; }
    .cvx-score-acts { margin-left: 0; width: 100%; }
    .cvx .cvx-score-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .cvx-bar, .cvx-dock, .cvx-media, .cvx-acc-caret { transition: none !important; }
}


/* ==========================================================================
   .cpl - the lesson page (Views/Learner/_CourseChapterDetailsPartial.cshtml)

   Laid out like a course player: a dark top bar (back to the course, previous / next), a dark
   stage the video fills, the lesson's own header and content, and previous / next cards at the
   foot. While a lesson is open (body.co-learning) the chapter list beside it becomes a full-height
   "Course content" panel holding the redesigned list, with the lesson being watched marked.
   ========================================================================== */

.cpl {
    --cpl-v: #6d4aff;
    --cpl-ink: #14121f;
    --cpl-muted: #6c6980;
    --cpl-line: #e8e6f0;
    margin: 0 -12px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #3d3a4d;
    background: #fff;
    min-height: calc(100vh - var(--cvx-top, 0px));
}

.cpl #co-course-view-section { margin: 0 !important; padding: 0 !important; }

/* ---- the top bar ---- */
.cpl-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 18px;
    background: #000;
    border-bottom: 1px solid #1c1c1f;
    color: #fff;
}

.cpl-back {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

    .cpl-back > .bi {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .1);
        font-size: 16px;
        transition: background-color .15s ease;
    }

    .cpl-back:hover > .bi { background: rgba(255, 255, 255, .2); }

.cpl-course {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
}

.cpl-nav { flex: none; display: flex; align-items: center; gap: 8px; }

.cpl-icon-btn {
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .cpl-icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
    .cpl-icon-btn:disabled { opacity: .35; cursor: default; }

.cpl-next-btn {
    flex: none;
    height: 38px;
    padding: 0 14px 0 16px;
    border: 0;
    border-radius: 11px;
    background: var(--cpl-v);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 8px 18px -10px rgba(109, 74, 255, .9);
    transition: background-color .15s ease;
}

    .cpl-next-btn:hover:not(:disabled) { background: #5a37e8; }
    .cpl-next-btn:disabled { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); box-shadow: none; cursor: default; }

/* ---- the stage ---- */
.cpl-stage { background: #000; display: flex; justify-content: center; }
    .cpl-stage #co-chapter-video-area { width: 100%; max-width: calc((100vh - 190px) * 16 / 9); margin: 0 !important; padding: 0 !important; }
    .cpl-stage .video-js { background: #000; }
    .cpl-stage #fallback-img { max-height: calc(100vh - 190px); object-fit: contain; }

/* ---- the lesson ---- */
.cpl-head, .cpl-body, .cpl-pager { max-width: 960px; padding-left: 28px; padding-right: 28px; }

.cpl-head { padding-top: 24px; padding-bottom: 6px; }

.cpl-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin: 0 0 6px !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cpl-v);
}

    .cpl-eyebrow .bi { color: #b8acff; }

.cpl-title {
    margin: 0 0 10px;
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--cpl-ink);
    overflow-wrap: anywhere;
}

.cpl-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px !important; }

    .cpl-meta > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 11px;
        border-radius: 999px;
        background: #f3f1fa;
        font-size: 13px;
        font-weight: 600;
        color: #4b4760;
    }

    .cpl-meta .bi { color: var(--cpl-v); }

.cpl-body { padding-top: 4px; padding-bottom: 8px; }
    .cpl-body > .col-lg-12, .cpl-body .row > .col-12 > div > .col-lg-12 { padding-left: 0; padding-right: 0; }
    .cpl-body .row { margin-left: 0; margin-right: 0; }
    .cpl-body .row > .col-12 { padding-left: 0; padding-right: 0; }

/* ---- previous / next at the foot ---- */
.cpl-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 48px;
}

.cpl-page {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--cpl-line);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .cpl-page:hover { border-color: #cfc6f5; box-shadow: 0 10px 24px -16px rgba(40, 20, 120, .5); transform: translateY(-1px); }
    .cpl-page.next { grid-column: 2; justify-content: flex-end; text-align: right; }
    .cpl-page > .bi { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f1edff; color: var(--cpl-v); font-size: 16px; }
    .cpl-page.next > .bi { background: var(--cpl-v); color: #fff; }
    .cpl-page > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; font-weight: 700; color: var(--cpl-ink); line-height: 1.35; overflow-wrap: anywhere; }
    .cpl-page small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cpl-muted); }

@media (max-width: 991.98px) {
    .cpl { margin: 0; min-height: 0; }
    .cpl-top { padding: 8px 12px; gap: 8px; min-height: 54px; }
    .cpl-back > .bi { display: none; }
    .cpl-course { font-size: 14.5px; }
    .cpl-next-btn span { display: none; }
    .cpl-next-btn { width: 38px; padding: 0; justify-content: center; }
    .cpl-stage #co-chapter-video-area { max-width: none; }
    .cpl-head, .cpl-body, .cpl-pager { padding-left: 16px; padding-right: 16px; }
    .cpl-head { padding-top: 18px; }
    .cpl-pager { grid-template-columns: minmax(0, 1fr); }
    .cpl-page.next { grid-column: 1; }
}

/* ---- the "Course content" panel beside a lesson (desktop) ---- */
@media (min-width: 992px) {
    body.co-learning #co-course-chapter-list {
        position: fixed !important;
        top: var(--cvx-top, 0px) !important;
        right: 0 !important;
        bottom: 0;
        width: 475px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 30;
        padding: 0 0 28px;
        border-left: 1px solid #e5e3ee !important;
        background: #fff;
        scrollbar-width: thin;
    }

        body.co-learning #co-course-chapter-list::before {
            content: "Course content";
            position: sticky;
            top: 0;
            z-index: 6;
            display: block;
            padding: 17px 20px 15px;
            background: #fff;
            border-bottom: 1px solid #efedf5;
            font-family: "Sora", "Inter", sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #14121f;
        }

        /* its own older markup steps aside for the redesigned list (coSeatChapterListBesideLesson) */
        body.co-learning #co-course-chapter-list:has(> #co-course-chapter-list-m.in-side) > :not(#co-course-chapter-list-m) { display: none !important; }

    #co-course-chapter-list-m.in-side { padding: 14px 16px 0 !important; }
        #co-course-chapter-list-m.in-side > .tabset > label { top: 54px !important; }
        #co-course-chapter-list-m.in-side .co-mprog { padding: 14px 14px 14px 12px; }
        #co-course-chapter-list-m.in-side .co-mprog-title { font-size: 16px; }
}

/* the lesson being watched, in the list */
#co-course-chapter-list-m.is-docked .co-accordion .co-chapter-info-preview.is-current {
    background: #f1edff !important;
    box-shadow: inset 3px 0 0 #6d4aff;
}

    #co-course-chapter-list-m.is-docked .co-chapter-info-preview.is-current .co-chapter-title-cx { color: #4f30e0 !important; }

/* ---- "Continue to course" on the enrolled card (_CourseDetailsPartial.cshtml) ---- */
.cvh-continue { margin: 4px 0 18px; }
    .cvh-continue .cvh-cta .bi { font-size: 18px; }
.cvh-continue-note {
    margin: 8px 2px 0 !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cvh-muted, #6c6980);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    .cvh-continue-note b { color: var(--cvh-ink, #14121f); font-weight: 600; }

/* no bar when there is nothing to buy (enrolled): the card keeps its place under the site's bar */
.cvx-bar.is-off { display: none !important; }
body:has(.cvx-bar.is-off) .cvx.is-past .cvx-side { top: calc(var(--cvx-top, 0px) + 12px); }
body:has(.cvx-bar.is-off) .cvx.is-past .cvx-card { max-height: calc(100vh - var(--cvx-top, 0px) - 32px); }

/* the course page (overview, and its skeleton) runs edge to edge: the Bootstrap gutter on
   #co-course-preview-chapter (a .row child) left a white strip down the band's left side */
body.co-list-docked #co-course-preview-chapter,
body.co-list-boot #co-course-preview-chapter { padding-left: 0 !important; padding-right: 0 !important; }