/* FAME Course Detail — redesign (reference: modules/fame/course-detail-full.png).
   Moved here from assets/css/. Two-column layout: main content + enroll sidebar. */

.fame-cd {
    --cd-blue: #1877F2;
    --cd-ink: #0f2033;
    --cd-muted: #7a869a;
    --cd-line: #eef1f7;
    --cd-bg: #f4f7fc;
    color: var(--cd-ink);
    position: relative;
    padding: 26px 0 48px;
}
.fame-cd:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 550px;
    /*background-color: var(--cd-bg);*/
    background: linear-gradient(262.85deg, #CAE5FF 0%, #C2E0FF 100%);
}
.fame-cd .container {
    position: relative;
}
.fame-cd *, .fame-cd *::before, .fame-cd *::after { box-sizing: border-box; }

.fame-cd-card-inner {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}

.fame-cd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 425px;
    gap: 24px;
    align-items: start;
    padding-block: 100px 50px;
}
.fame-cd-btmscmn {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 30px;
}
.fame-cd-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

/* ---- Header ---- */
.fame-cd-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: var(--cd-blue);
    padding: 5px 14px;
    border-radius: 100px;
    align-self: flex-start;
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
}
.fame-cd-crumbs a { color: inherit; text-decoration: none; }
.fame-cd-crumbs a:hover { text-decoration: underline; }
.fame-cd-crumbs span[aria-current] { color: #ffffff; }

.fame-cd-title {
    margin: 0;
    color: #121F3E;
    font-style: normal;
    font-weight: 900;
    font-size: 36px;
    line-height: 40px;
}
.fame-cd-lead {
    margin: 0;
    color: #656D7F;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}

.fame-cd-rating { display: flex; align-items: center; gap: 8px; }
.fame-cd-rating-stars { letter-spacing: 1px; }
.fame-cd-rating-stars span { color: #6D6E79; font-size: 15px; }
.fame-cd-rating-stars span.is-on { color: #f5a623; }
.fame-cd-rating strong {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    color: #121F3E;
}
.fame-cd-rating-count {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #6D6E79;
}

/* ---- Nav tabs ---- */
.fame-cd-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0;
    background: linear-gradient(262.85deg, #CAE5FF 0%, #C2E0FF 100%);
    padding: 8px;
}
.fame-cd-tab {
    background-color: #fff;
    border-bottom: 5px solid #EBF5FC;
    color: #6D6E79;
    padding: 15px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
}
.fame-cd-tab:hover,
.fame-cd-tab.is-active {
    background-color: #ffffff;
    color: var(--cd-blue);
    border-color: var(--cd-blue);
}

/* ---- Cards ---- */
.fame-cd-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
    padding: 30px;
    position: relative;
    width: 100%;
}
.fame-cd-card.fame-has-shadow::before {
    width: 99%; }
.fame-cd-anchor { scroll-margin-top: 76px; }
.fame-cd-h2 {
    margin: 0;
    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #121F3E;
}
.fame-cd-h3 { margin: 22px 0 10px; font-size: 15px; font-weight: 700; color: var(--cd-ink); }

/* ---- Overview stats ---- */
.fame-cd-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
}
.fame-cd-stat { display: flex; align-items: center; gap: 20px; }
.fame-cd-stat-ico {
    flex: 0 0 auto;
    color: var(--cd-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.fame-cd-stat-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fame-cd-stat-text strong,
.fame-cd-stat-text small {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #656D7F;
}

.fame-cd-summary {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #656D7F;
}
.fame-cd-summary :is(h1,h2,h3,h4) { color: var(--cd-ink); }
.fame-cd-summary img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---- Sections accordion ---- */
.fame-cd-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 30px;
}
.fame-cd-sec-head .fame-cd-h2 { margin: 0; }
.fame-cd-sec-total {
    color: #121F3E;
    white-space: nowrap;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
}
.fame-cd-sec-total strong {
    color: var(--cd-ink);
    font-weight: normal;
}

.fame-cd-section {
    box-shadow: 0px 0px 6px 2px rgba(8, 20, 102, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.fame-cd-section:last-child { margin-bottom: 0; }
.fame-cd-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #F5F8F9;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 20px;
    font-family: inherit;
}
.fame-cd-section-title {
    flex: 1 1 auto;
    color: #121F3E;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
}
.fame-cd-section-count { font-size: 11.5px; color: var(--cd-muted); white-space: nowrap; }
.fame-cd-section-chev {
    color: #121F3E;
    transition: transform .18s;
    flex: 0 0 auto;
}
.fame-cd-section.is-open .fame-cd-section-chev { transform: rotate(180deg); }

.fame-cd-videos { list-style: none; margin: 0; padding: 0; display: none; }
.fame-cd-section.is-open .fame-cd-videos { display: block; }
.fame-cd-video {
    border-top: 1px dashed #D9DADB;
}
.fame-cd-video:first-child {
    border-top: none;
}
.fame-cd-video-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 20px;
    font-family: inherit;
    color: var(--cd-ink);
}
.fame-cd-video.is-locked .fame-cd-video-row { cursor: default; }
.fame-cd-video-play {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ef4b60;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.fame-cd-video:not(.is-locked) .fame-cd-video-row:hover .fame-cd-video-name { color: var(--cd-blue); }
.fame-cd-video-name {
    flex: 1 1 auto;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #121F3E;
}
.fame-cd-video-watched {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #2f80ed;
    background: #eaf2fe;
    border-radius: 20px;
    padding: 3px 10px;
    margin-right: 4px;
}
.fame-cd-video-watched.is-done { color: #1f9d57; background: #e6f7ee; }
.fame-cd-video-len {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #656D7F;
}
.fame-cd-video-len i {
    margin-top: 5px;
}
.fame-cd-video-len i,
.fame-cd-video-len i:before {
    line-height: 1;
}
.fame-cd-video-lock { font-size: 14px; color: #9aa4b5; }

.fame-cd-empty { text-align: center; padding: 30px 10px; }
.fame-cd-empty h3 { margin: 0 0 6px; font-size: 15px; }
.fame-cd-empty p { margin: 0; color: var(--cd-muted); font-size: 13px; }

/* ===================== SIDEBAR ===================== */
.fame-cd-side {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.fame-cd-enroll {
    overflow: hidden;
    background: linear-gradient(201.41deg, #FFFFFF 6.54%, #F9F3FF 37.97%, #E3EEFC 98.61%), #FFFFFF;
    box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}
.fame-cd-enroll-body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.fame-cd-enroll-media {
    position: relative;
    background-color: #dce6f5;
    border-radius: 20px;
}
.fame-cd-enroll-media img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}
.fame-cd-enroll-tags {
    position: absolute;
    left: 12px;
    top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}
.fame-cd-enroll-tag {
    padding: 5px 15px;
    background-color: #EDF9FF;
    box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
    border-radius: 80px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    color: #121F3E;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.fame-cd-enroll-tag i {
    font-size: 12px;
    padding-top: 3px;
}
.fame-cd-plan-mnwrp {
    display: flex;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 4px 4px 15px;
    align-items: center;
    border-radius: 10px;
    gap: 5px;
}

/* price */
.fame-cd-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fame-cd-price-now { font-size: 24px; font-weight: 800; color: var(--cd-ink); }
.fame-cd-price-old { font-size: 14px; color: #9aa4b5; text-decoration: line-through; }
.fame-cd-price-off {
    background: #fdeef1;
    color: #e0455a;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
}
.fame-cd-price-note {
    margin: 0;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #6D6E79;
}

.fame-cd-enroll-btn {
    display: block;
    width: 100%;
    text-align: center;
    border: 0;
    cursor: pointer;
    background-color: var(--cd-blue);
    color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s, opacity .15s;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
}
.fame-cd-enroll-btn:hover { background: #1263d2; color: #fff; }
.fame-cd-enroll-btn[disabled] { opacity: .65; cursor: default; }

.fame-cd-enroll-alt {
    display: flex;
    width: 100%;
    gap: 15px;
}
.fame-cd-enroll-alt-btn {
    flex: 1 1 0;
    text-align: center;
    border: 1px solid transparent;
    background: #fff;
    padding: 17px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, color .15s;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #121F3E;
}
.fame-cd-enroll-alt-btn:hover { border-color: var(--cd-blue); color: var(--cd-blue); }
.fame-cd-enroll-product { margin: 14px 0 0; font-size: 11.5px; color: var(--cd-muted); text-align: center; }

/* enrolled state */
.fame-cd-enrolled { text-align: center; padding: 6px 4px 2px; }
.fame-cd-enrolled-ico {
    display: inline-flex;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eaf7f0;
    color: #1e9c6b;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 12px;
}
.fame-cd-enrolled-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--cd-ink); }
.fame-cd-enrolled-text { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #55627a; }
.fame-cd-enrolled-text strong { color: var(--cd-ink); }

/* ===================== Player modal ===================== */
.fame-course-player { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fame-course-player[hidden] { display: none; }
.fame-course-player-backdrop { position: absolute; inset: 0; background: rgba(9, 20, 51, .72); }
.fame-course-player-box { position: relative; width: 100%; max-width: 900px; background: #0b1220; border-radius: 14px; overflow: hidden; z-index: 1; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.fame-course-player-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: #fff; }
.fame-course-player-title { font-size: 14px; font-weight: 600; }
.fame-course-player-x { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.fame-course-player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.fame-course-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===================== Responsive ===================== */
@media (max-width: 991px) {
    .fame-cd-grid { grid-template-columns: minmax(0, 1fr); }
    .fame-cd-side { position: static; order: -1; }
    .fame-cd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .fame-cd-title { font-size: 23px; }
    .fame-cd-card { padding: 18px 16px; }
    .fame-cd-enroll-alt { flex-direction: column; }
}

/* ===================== Static placeholder sections =====================
   (Guideline Videos, Related Questions, Batches, Have-a-Question, enrolled
   avatars) — styled to match the reference; data wired in later. */

/* ---- Header: enrolled avatars + rating row ---- */
.fame-cd-social { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.fame-cd-enrolled-row { display: inline-flex; align-items: center; gap: 10px; }
.fame-cd-avatars { display: inline-flex; }
.fame-cd-avatar {
    width: 33px; height: 33px; border-radius: 50%; overflow: hidden;
    border: 2px solid #fff; margin-left: -8px; background: #dbe4f0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: default; flex: 0 0 auto;
}
.fame-cd-avatar:first-child { margin-left: 0; }
.fame-cd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fame-cd-avatar-initial { font-size: 12px; font-weight: 700; color: #3f5573; text-transform: uppercase; line-height: 1; }
.fame-cd-enrolled-label {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #6D6E79;
}

.fame-cd-viewall {
    color: var(--cd-blue);
    text-decoration: none;
    white-space: nowrap;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
}
.fame-cd-viewall:hover { text-decoration: underline; }
.fame-cd-card-title {
    margin: 0;
    color: var(--cd-ink);
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
}

/* ---- Guideline Videos ---- */
.fame-cd-guideline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: flex-start;
}
.fame-cd-related-q-ico i {
    line-height: 1;
    padding-top: 4px;
}
/* Cards follow the /videos page design (.wpt-card): white card, hover lift,
   16:9 thumb with a gradient foot, centred white play button, duration chip
   bottom-right and a 2-line clamped caption. */
.fame-cd-guideline-card {
    position: relative; display: block; width: 100%; text-align: left;
    border: 1px solid #e7e9f6; border-radius: 18px;
    overflow: hidden; background: #fff; cursor: pointer; padding: 0;
    font-family: inherit; text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .05);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s;
}
.fame-cd-guideline-card:hover,
.fame-cd-guideline-card:focus-visible {
    transform: translateY(-6px); border-color: transparent;
    box-shadow: 0 24px 44px -20px rgba(13, 27, 62, .42);
}
.fame-cd-guideline-card:focus-visible { outline: 3px solid var(--cd-blue); outline-offset: 2px; }

.fame-cd-guideline-thumb {
    position: relative; display: block; aspect-ratio: 16 / 9;
    overflow: hidden; background: #eef0ff;
}
.fame-cd-guideline-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.fame-cd-guideline-card:hover .fame-cd-guideline-thumb img { transform: scale(1.06); }
.fame-cd-guideline-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(13, 27, 62, .45));
}

.fame-cd-guideline-play {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center;
    width: auto; height: auto; margin: 0; color: inherit; font-size: 0;
}
.fame-cd-guideline-play i {
    width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .95);
    display: grid; place-items: center; color: #e11d48; font-size: 24px; line-height: 1;
    box-shadow: 0 10px 24px -8px rgba(13, 27, 62, .5); transition: transform .3s;
}
.fame-cd-guideline-card:hover .fame-cd-guideline-play i { transform: scale(1.12); }

.fame-cd-guideline-badge {
    position: absolute; left: 10px; bottom: 10px; z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(13, 27, 62, .82); color: #fff; font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 7px;
}
.fame-cd-guideline-badge i { color: #ff4d4d; font-size: 12px; }

.fame-cd-guideline-meta { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 15px; margin: 0; }
.fame-cd-guideline-meta strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13.5px; font-weight: 600; color: var(--cd-ink); line-height: 1.35;
}
.fame-cd-guideline-meta small { font-size: 11.5px; color: var(--cd-muted); }

/* A lone video gets the full row instead of half of it. */
.fame-cd-guideline-grid.is-single { grid-template-columns: minmax(0, 1fr); }

/* ---- Related Questions ---- */
.fame-cd-related-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
}
.fame-cd-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fame-cd-related-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    border-left: 3px solid transparent;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    box-shadow: 2px 2px 25px rgba(8, 20, 102, 0.08);
}
.fame-cd-related-item.is-active { border-left-color: var(--cd-blue); }
.fame-cd-related-q-ico {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(24, 119, 242, 0.3); color: var(--cd-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.fame-cd-related-item.is-active .fame-cd-related-q-chev {
    color: var(--cd-blue);
}
.fame-cd-related-q-text {
    flex: 1 1 auto;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #121F3E;
}
.fame-cd-related-q-chev {
    color: rgba(24, 119, 242, 0.3);
    font-size: 29px;
    flex: 0 0 auto;
    line-height: 0.8;
}
.fame-cd-related-answer {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}
.fame-cd-related-answer h3 {
    margin: 0;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #121F3E;
    width: 100%;
}
.fame-cd-related-answer p {
    margin: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #656D7F;
}

/* ---- Batches ---- */
.fame-cd-batches {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 15px;
}
.fame-cd-batch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.fame-cd-batch label {
    display: flex; align-items: center; gap: 10px;
    background: #f7f9fc; border: 1px solid var(--cd-line); border-radius: 10px;
    padding: 17px 20px; cursor: pointer;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #6D6E79;
}
.fame-cd-batch input {
    accent-color: #C3DDFF;
    width: 20px;
    height: 20px;
}

/* ---- Have a Question form ---- */
.fame-cd-question {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}
.fame-cd-question-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 40px;
}
.fame-cd-field { display: flex; flex-direction: column; gap: 6px; }
.fame-cd-field label { font-size: 11.5px; font-weight: 500; color: var(--cd-muted); }
.fame-cd-field input,
.fame-cd-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #656D7F;
    background: none;
    padding: 8px 0px;
    resize: vertical;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #6D6E79;
}
.fame-cd-field textarea {
    border: 1px dotted #656D7F;
    border-radius: 10px;
    padding: 10px;
    min-height: 90px;
}
.fame-cd-field input:focus,
.fame-cd-field textarea:focus { outline: none; border-color: var(--cd-blue); }
.fame-cd-question.fame-has-shadow::before {
    width: 98%;
}

@media (max-width: 767px) {
    .fame-cd-guideline-grid { grid-template-columns: minmax(0, 1fr); }
    .fame-cd-related-grid { grid-template-columns: minmax(0, 1fr); }
}

.fame-cd-muted-text { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--cd-muted); }

/* ---- Enroll: Monthly/Yearly toggle + Pricing Plan dropdown ---- */
.fame-cd-modes {
    display: flex;
    gap: 15px;
    width: 100%;
}
.fame-cd-mode {
    flex: 1 1 0;
    cursor: pointer;
    background-color: #ffffff;
    color: #656D7F;
    padding: 8px 12px;
    transition: background .15s, color .15s;
    border: 1px solid #F2F2F2;
    border-radius: 50px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
}
.fame-cd-mode.is-active { background: var(--cd-blue); color: #fff; }

.fame-cd-plan-label {
    margin: 0;
    color: var(--cd-blue);
    white-space: nowrap;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
}
.fame-cd-plan-select,
.fame-cd-duration-select {
    width: 100%;
    appearance: none;
    background: #EAF4FF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656D7F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 15px;
    border: none;
    border-radius: 10px;
    color: #656D7F;
    padding: 9px 34px 9px 19px;
    cursor: pointer;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    max-width: 180px;
    margin-left: auto;
}
.fame-cd-plan-select:focus,
.fame-cd-duration-select:focus { outline: none; border-color: var(--cd-blue); }

/* ---- PKR + live USD conversion ---- */
.fame-cd-price-usd {
    text-decoration: line-through;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #92969E;
}
.fame-cd-rate {
    margin: 0;
    color: var(--cd-blue);
    background-color: #DBEBFF;
    border-radius: 80px;
    display: inline-flex;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    padding: 4px 11px;
}
.fame-cd-price-txsc {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* Guideline video duration chip (bottom-right of thumb, matching /videos) */
.fame-cd-guideline-dur {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    background: rgba(13, 27, 62, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 7px;
    letter-spacing: .02em;
}

/* ---- Guideline popup player + playlist ---- */
.fame-cd-yt-player {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fame-cd-yt-player[hidden] { display: none; }
.fame-cd-yt-backdrop { position: absolute; inset: 0; background: rgba(9, 20, 51, .72); }
.fame-cd-yt-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1040px;
    max-height: 88vh;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.fame-cd-yt-x {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 3;
    border: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.fame-cd-yt-main { background: #0b1220; display: flex; flex-direction: column; min-width: 0; }
.fame-cd-yt-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.fame-cd-yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fame-cd-yt-title { margin: 0; padding: 14px 16px; color: #fff; font-size: 14px; font-weight: 600; }

.fame-cd-yt-playlist { background: #fff; border-left: 1px solid var(--cd-line); overflow-y: auto; }
.fame-cd-yt-playlist-head {
    margin: 0;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cd-ink);
    border-bottom: 1px solid var(--cd-line);
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.fame-cd-yt-playlist-head span { font-size: 11px; font-weight: 500; color: var(--cd-muted); }
.fame-cd-yt-playlist ul { list-style: none; margin: 0; padding: 6px; }
.fame-cd-yt-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    padding: 8px;
    border-radius: 8px;
    font-family: inherit;
}
.fame-cd-yt-item:hover { background: #f4f7fc; }
.fame-cd-yt-item.is-active { background: #eef4fc; }
.fame-cd-yt-item-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #0b1220;
}
.fame-cd-yt-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fame-cd-yt-item-play {
    position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.fame-cd-yt-item.is-active .fame-cd-yt-item-play { background: var(--cd-blue); }
.fame-cd-yt-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fame-cd-yt-item-meta strong { font-size: 12px; font-weight: 600; color: var(--cd-ink); line-height: 1.35; }
.fame-cd-yt-item-meta small { font-size: 10.5px; color: var(--cd-muted); }

@media (max-width: 767px) {
    .fame-cd-yt-box { grid-template-columns: minmax(0, 1fr); max-height: 92vh; }
    .fame-cd-yt-playlist { max-height: 34vh; border-left: 0; border-top: 1px solid var(--cd-line); }
}

/* "Have a Question?" inline submit feedback */
.fame-cd-question-msg { margin: 0 0 10px; font-size: 13px; line-height: 1.5; padding: 8px 12px; border-radius: 8px; }
.fame-cd-question-msg.is-ok { background: #eaf7f0; color: #1e7d52; }
.fame-cd-question-msg.is-error { background: #fdeef1; color: #d13b53; }

/* ===== Video popup — YouTube-style 2-pane (video + section playlist) ===== */
.fame-course-player-box { max-width: 1180px; display: flex; align-items: stretch; background: #0b1220; border-radius: 14px; overflow: hidden; }
.fame-course-player-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fame-course-player-main .fame-course-player-frame { width: 100%; aspect-ratio: 16 / 9; background: #000; }

.fame-course-player-list { flex: 0 0 320px; width: 320px; background: #111a2b; border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-self: flex-start; }
.fame-course-player-list-head { padding: 14px 16px; color: #fff; font-weight: 600; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.fame-course-player-list-head span { color: #8ea3c6; font-weight: 400; font-size: 12px; }
.fame-course-player-list-items { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1 1 auto; max-height: 78vh; }

.fame-course-pl-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: #d7e2f4; }
.fame-course-pl-item:hover { background: rgba(255,255,255,.06); }
.fame-course-pl-item.is-active { background: rgba(24,119,242,.18); }
.fame-course-pl-idx { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #8ea3c6; }
.fame-course-pl-item.is-active .fame-course-pl-idx { color: #4d9bff; }
.fame-course-pl-meta { min-width: 0; display: flex; flex-direction: column; }
.fame-course-pl-title { font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fame-course-pl-len { font-size: 11px; color: #8ea3c6; margin-top: 2px; }

@media (max-width: 900px) {
    .fame-course-player-box { flex-direction: column; max-width: 640px; }
    .fame-course-player-list { flex: 1 1 auto; width: 100%; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); max-height: 34vh; }
}

/* Course popup: the custom hls.js player (admin-video-player.css, scoped under
   .fv-player-host) fills the 16:9 frame edge-to-edge. */
.fame-course-player-frame .fv-player-host { position: absolute; inset: 0; border-radius: 0; background: #000; }
.fame-course-player-frame .fv-player-host .fv-stage,
.fame-course-player-frame .fv-player-host .fv-player { height: 100%; aspect-ratio: auto; border-radius: 0; }

/* ---- Player playlist: "Now Playing" card (first item, bigger + distinct) ---- */
.fame-course-pl-now {
    display: flex; flex-direction: column; gap: 8px; margin: 2px 2px 8px; padding: 10px;
    border-radius: 10px; background: linear-gradient(135deg, rgba(24,119,242,.28), rgba(24,119,242,.10));
    border: 1px solid rgba(77,155,255,.45); color: #fff; cursor: default;
}
.fame-course-pl-now-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7cb8ff; }
.fame-course-pl-now-label i { font-size: 15px; line-height: 1; }
.fame-course-pl-now-body { display: flex; gap: 10px; align-items: center; }
.fame-course-pl-now-thumb {
    position: relative; flex: 0 0 96px; width: 96px; height: 56px; border-radius: 8px; overflow: hidden;
    background: #0b1220 center/cover no-repeat; display: inline-flex; align-items: flex-end; justify-content: flex-start;
}
.fame-course-pl-now-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); }
.fame-course-pl-now-eq { position: relative; z-index: 1; display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; margin: 0 0 6px 6px; }
.fame-course-pl-now-eq i { display: block; width: 3px; background: #4d9bff; border-radius: 2px; animation: famePlEq 1s ease-in-out infinite; }
.fame-course-pl-now-eq i:nth-child(1) { height: 60%; animation-delay: 0s; }
.fame-course-pl-now-eq i:nth-child(2) { height: 100%; animation-delay: .2s; }
.fame-course-pl-now-eq i:nth-child(3) { height: 40%; animation-delay: .4s; }
@keyframes famePlEq { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.fame-course-pl-now-title { font-size: 14px; font-weight: 700; line-height: 1.35; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fame-course-pl-now .fame-course-pl-len { color: #b7c9e6; }

/* ---- Variable plans: variation step → pricing step ------------------------
   A variable product asks for the VARIATION first; picking one slides the
   pricing block (mode toggle + duration + price + buttons) in from the right.
   "Change Variation" slides back. Same two-step model as the plan cards. */
.fame-cd-steps { position: relative; overflow: hidden; transition: height 280ms ease; }
.fame-cd-steps > [data-cd-step] { transition: transform 280ms ease, opacity 220ms ease; }
.fame-cd-steps > [data-cd-step].is-abs { position: absolute; inset: 0 0 auto 0; }
.fame-cd-steps > [data-cd-step].is-from-right { transform: translateX(100%); opacity: 0; }
.fame-cd-steps > [data-cd-step].is-from-left { transform: translateX(-100%); opacity: 0; }
.fame-cd-steps > [data-cd-step].is-to-left { transform: translateX(-100%); opacity: 0; }
.fame-cd-steps > [data-cd-step].is-to-right { transform: translateX(100%); opacity: 0; }

.fame-cd-vars { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fame-cd-var label {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid #e0e6ef; border-radius: 10px;
    background: #fff; cursor: pointer; margin: 0;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.fame-cd-var label:hover { border-color: #b9c6de; background: #f8fbff; }
.fame-cd-var input { margin: 0; flex: 0 0 auto; }
.fame-cd-var-name { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: #22304a; }
.fame-cd-var-price { font-size: 12.5px; font-weight: 700; color: #5b6b86; white-space: nowrap; }
.fame-cd-var input:checked + .fame-cd-var-name { color: var(--cd-blue, #0566e3); }
.fame-cd-var:has(input:checked) label { border-color: var(--cd-blue, #0566e3); box-shadow: 0 0 0 3px rgba(5, 102, 227, .12); }
.fame-cd-var.is-disabled label { opacity: .55; cursor: not-allowed; background: #f6f8fb; }

.fame-cd-varback {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 10px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--cd-blue, #0566e3);
}
.fame-cd-varback:hover { text-decoration: underline; }
.fame-cd-varback svg { width: 14px; height: 14px; }
.fame-cd-varcurrent { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: #45536b; }

@media (prefers-reduced-motion: reduce) {
    .fame-cd-steps, .fame-cd-steps > [data-cd-step] { transition: none; }
}