/* =====================================================================
   Course Detail · Modern 2026 redesign
   Self-contained, conflict-free namespace: .cdx-*
   Loads after global.css. Scoped under body.page-course-detail .cdx-page
   ===================================================================== */

body.page-course-detail .cdx-page {
    --cdx-brand: #7c3aed;
    --cdx-brand-2: #6d28d9;
    --cdx-accent: #ec4899;
    --cdx-ink: #191627;
    --cdx-ink-soft: #4a4661;
    --cdx-muted: #857f97;
    --cdx-page: #f6f6fb;
    --cdx-surface: #ffffff;
    --cdx-surface-2: #faf9fe;
    --cdx-line: rgba(23, 21, 39, .08);
    --cdx-line-2: rgba(23, 21, 39, .05);
    --cdx-ok: #16a34a;

    --cdx-r: 20px;
    --cdx-r-sm: 14px;
    --cdx-r-xs: 10px;
    --cdx-shadow: 0 1px 2px rgba(23, 21, 39, .04), 0 14px 34px -20px rgba(60, 40, 120, .22);
    --cdx-shadow-lg: 0 30px 70px -34px rgba(60, 40, 120, .40);
    --cdx-grad: linear-gradient(135deg, #7c3aed 0%, #9333ea 52%, #ec4899 100%);
    --cdx-ease: cubic-bezier(.22, .61, .36, 1);

    font-family: 'Vazirmatn', sans-serif;
    color: var(--cdx-ink);
    background: var(--cdx-page);
}

body.page-course-detail .cdx-page *,
body.page-course-detail .cdx-page *::before,
body.page-course-detail .cdx-page *::after { box-sizing: border-box; }

body.page-course-detail .cdx-container {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

/* ============================ HERO ============================ */
body.page-course-detail .cdx-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.6rem, 3.4vw, 2.6rem);
    background:
        radial-gradient(58% 90% at 90% -20%, rgba(124, 58, 237, .08), transparent 60%),
        radial-gradient(50% 80% at 2% 120%, rgba(236, 72, 153, .06), transparent 60%),
        var(--cdx-surface);
    border-bottom: 1px solid var(--cdx-line-2);
}

body.page-course-detail .cdx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cdx-muted);
    margin-bottom: 1.5rem;
}
body.page-course-detail .cdx-breadcrumb a { color: var(--cdx-ink-soft); text-decoration: none; transition: color .18s; }
body.page-course-detail .cdx-breadcrumb a:hover { color: var(--cdx-brand); }
body.page-course-detail .cdx-breadcrumb i { font-size: .82rem; opacity: .6; }
body.page-course-detail .cdx-breadcrumb .cdx-current {
    color: var(--cdx-muted);
    max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.page-course-detail .cdx-hero-inner { max-width: 780px; }

/* ---- Two-column hero with showcase image ---- */
body.page-course-detail .cdx-hero-inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: center;
    gap: clamp(1.8rem, 4vw, 3.6rem);
}
body.page-course-detail .cdx-hero-text { min-width: 0; }

body.page-course-detail .cdx-hero-media {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}
body.page-course-detail .cdx-hero-figure {
    position: relative;
    width: 100%;
    margin: 0;
    isolation: isolate;
    animation: cdxFloat 7s ease-in-out infinite;
}
@keyframes cdxFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Glowing gradient blob behind the image */
body.page-course-detail .cdx-hero-blob {
    position: absolute;
    inset: -14% -10% -18% -10%;
    z-index: -2;
    background:
        radial-gradient(45% 55% at 78% 22%, rgba(124, 58, 237, .55), transparent 70%),
        radial-gradient(48% 58% at 20% 82%, rgba(236, 72, 153, .48), transparent 72%),
        radial-gradient(40% 50% at 60% 60%, rgba(59, 130, 246, .38), transparent 70%);
    filter: blur(46px);
    opacity: .9;
    animation: cdxBlob 9s ease-in-out infinite alternate;
}
@keyframes cdxBlob {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.12) rotate(8deg); }
}

/* Rotating ring removed per request */
body.page-course-detail .cdx-hero-ring { display: none; }

/* Image frame */
body.page-course-detail .cdx-hero-frame {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 26px;
    overflow: hidden;
    background: var(--cdx-surface-2);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
        0 40px 80px -30px rgba(76, 29, 149, .55),
        0 12px 30px -18px rgba(236, 72, 153, .4),
        inset 0 1px 0 rgba(255, 255, 255, .5);
}
body.page-course-detail .cdx-hero-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--cdx-ease);
}
body.page-course-detail .cdx-hero-figure:hover .cdx-hero-frame img { transform: scale(1.06); }

/* Sweeping shine over the image */
body.page-course-detail .cdx-hero-shine {
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 47%, rgba(255,255,255,.05) 54%, transparent 66%);
    transform: translateX(-120%);
    animation: cdxShine 5.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cdxShine {
    0%, 62% { transform: translateX(-120%); }
    82%, 100% { transform: translateX(120%); }
}

/* Floating glass badges */
body.page-course-detail .cdx-hero-badge {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .85rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 18px 40px -18px rgba(60, 40, 120, .5);
}
body.page-course-detail .cdx-hero-badge i {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; flex-shrink: 0;
    border-radius: 11px; font-size: 1.05rem; color: #fff;
    background: var(--cdx-grad);
}
body.page-course-detail .cdx-hero-badge span { display: flex; flex-direction: column; line-height: 1.15; }
body.page-course-detail .cdx-hero-badge b { font-size: 1rem; font-weight: 800; color: var(--cdx-ink); }
body.page-course-detail .cdx-hero-badge small { font-size: .68rem; font-weight: 600; color: var(--cdx-muted); }
body.page-course-detail .cdx-hero-badge--rate {
    top: 8%; inset-inline-start: -6%;
    animation: cdxFloat 6s ease-in-out infinite reverse;
}
body.page-course-detail .cdx-hero-badge--rate i { background: linear-gradient(135deg, #f59e0b, #f97316); }
body.page-course-detail .cdx-hero-badge--lessons {
    bottom: 9%; inset-inline-end: -5%;
    animation: cdxFloat 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.page-course-detail .cdx-hero-figure,
    body.page-course-detail .cdx-hero-blob,
    body.page-course-detail .cdx-hero-ring,
    body.page-course-detail .cdx-hero-shine,
    body.page-course-detail .cdx-hero-badge { animation: none; }
}

body.page-course-detail .cdx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--cdx-brand-2);
    background: rgba(124, 58, 237, .08);
    padding: .4rem .85rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}
body.page-course-detail .cdx-eyebrow i { font-size: .95rem; }

body.page-course-detail .cdx-title {
    font-size: clamp(1.7rem, 3.6vw, 2.65rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.01em;
    margin: 0 0 .9rem;
    color: var(--cdx-ink);
}
body.page-course-detail .cdx-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.9;
    color: var(--cdx-ink-soft);
    margin: 0 0 1.5rem;
    max-width: 62ch;
}

body.page-course-detail .cdx-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem .7rem;
}
body.page-course-detail .cdx-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cdx-ink-soft);
    background: var(--cdx-surface-2);
    border: 1px solid var(--cdx-line);
    padding: .48rem .85rem;
    border-radius: 999px;
}
body.page-course-detail .cdx-chip i { font-size: 1rem; color: var(--cdx-brand); }
body.page-course-detail .cdx-chip b { color: var(--cdx-ink); font-weight: 800; }
body.page-course-detail .cdx-chip small { color: var(--cdx-muted); font-weight: 600; }
body.page-course-detail .cdx-chip--star { background: #fff8ec; border-color: #f6e2b8; }
body.page-course-detail .cdx-chip--star i { color: #f59e0b; }
body.page-course-detail .cdx-chip--level i { color: var(--cdx-accent); }

/* ============================ LAYOUT ============================ */
body.page-course-detail .cdx-body { padding: clamp(1.6rem, 3.5vw, 2.6rem) 0 3rem; }
body.page-course-detail .cdx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(1.4rem, 2.5vw, 2.2rem);
    align-items: start;
}
/* گرید آیتم‌ها باید min-width:0 داشته باشند تا محتوای عریض از کادر بیرون نزند */
body.page-course-detail .cdx-main,
body.page-course-detail .cdx-aside { min-width: 0; }

/* ============================ TABS ============================ */
body.page-course-detail .cdx-tabs {
    position: sticky;
    top: 4.8rem;
    z-index: 15;
    display: flex;
    gap: .3rem;
    padding: .35rem;
    margin-bottom: 1.4rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--cdx-line);
    border-radius: 999px;
    box-shadow: var(--cdx-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}
body.page-course-detail .cdx-tabs::-webkit-scrollbar { display: none; }
body.page-course-detail .cdx-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1.1rem;
    border: none;
    background: transparent;
    color: var(--cdx-ink-soft);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 999px;
    cursor: pointer;
    transition: color .2s, background .2s;
}
body.page-course-detail .cdx-tab i { font-size: 1.05rem; }
body.page-course-detail .cdx-tab:hover { color: var(--cdx-brand-2); }
body.page-course-detail .cdx-tab.is-active {
    color: #fff;
    background: var(--cdx-grad);
    box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .6);
}

body.page-course-detail .cdx-panel { display: none; animation: cdxFade .35s var(--cdx-ease); }
body.page-course-detail .cdx-panel.is-active { display: block; }
@keyframes cdxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================ CARDS / SECTIONS ============================ */
body.page-course-detail .cdx-card {
    background: var(--cdx-surface);
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r);
    padding: clamp(1.3rem, 2.2vw, 1.9rem);
    box-shadow: var(--cdx-shadow);
    margin-bottom: 1.2rem;
}
body.page-course-detail .cdx-card:last-child { margin-bottom: 0; }

body.page-course-detail .cdx-h {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cdx-ink);
    margin: 0 0 1.1rem;
}
body.page-course-detail .cdx-h i {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.15rem;
    color: var(--cdx-brand);
    background: rgba(124, 58, 237, .09);
    border-radius: 10px;
}

/* rich description */
body.page-course-detail .cdx-rich { color: var(--cdx-ink-soft); line-height: 2; font-size: 1rem; }
body.page-course-detail .cdx-rich p { margin: 0 0 1rem; }
body.page-course-detail .cdx-rich h2,
body.page-course-detail .cdx-rich h3,
body.page-course-detail .cdx-rich h4 { color: var(--cdx-ink); font-weight: 800; margin: 1.4rem 0 .7rem; line-height: 1.5; }
body.page-course-detail .cdx-rich h2 { font-size: 1.2rem; }
body.page-course-detail .cdx-rich h3 { font-size: 1.08rem; }
body.page-course-detail .cdx-rich ul,
body.page-course-detail .cdx-rich ol { margin: 0 0 1rem; padding-inline-start: 1.4rem; }
body.page-course-detail .cdx-rich li { margin-bottom: .5rem; }
body.page-course-detail .cdx-rich img { max-width: 100%; border-radius: var(--cdx-r-sm); }
body.page-course-detail .cdx-rich a { color: var(--cdx-brand-2); }

/* checklist */
body.page-course-detail .cdx-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.page-course-detail .cdx-checklist li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--cdx-ink-soft);
}
body.page-course-detail .cdx-checklist i {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--cdx-ok);
    margin-top: .12rem;
}
body.page-course-detail .cdx-checklist--muted i { color: var(--cdx-brand); }
body.page-course-detail .cdx-checklist--single { grid-template-columns: 1fr; }

/* FAQ */
body.page-course-detail .cdx-faq { display: flex; flex-direction: column; gap: .7rem; }
body.page-course-detail .cdx-faq details {
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r-sm);
    background: var(--cdx-surface-2);
    overflow: hidden;
    transition: border-color .2s;
}
body.page-course-detail .cdx-faq details[open],
body.page-course-detail .cdx-faq details.is-open { border-color: rgba(124, 58, 237, .3); }
body.page-course-detail .cdx-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1.15rem;
    font-weight: 700;
    font-size: .96rem;
    color: var(--cdx-ink);
    cursor: pointer;
    list-style: none;
}
body.page-course-detail .cdx-faq summary::-webkit-details-marker { display: none; }
body.page-course-detail .cdx-faq summary::after {
    content: "\ea5f";
    font-family: "tabler-icons" !important;
    font-size: 1.15rem;
    color: var(--cdx-brand);
    transition: transform .25s var(--cdx-ease);
    flex-shrink: 0;
}
body.page-course-detail .cdx-faq details[open] summary::after,
body.page-course-detail .cdx-faq details.is-open summary::after { transform: rotate(180deg); }
/* Answer wrapper is always rendered (override native details hiding) so it can animate smoothly */
body.page-course-detail .cdx-faq details > .cdx-faq-a { display: block; }
body.page-course-detail .cdx-faq .cdx-faq-a {
    padding: 0 1.15rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color: var(--cdx-ink-soft);
    line-height: 1.95;
    font-size: .92rem;
    transition: max-height .38s var(--cdx-ease), opacity .28s ease, padding-bottom .38s var(--cdx-ease);
}
body.page-course-detail .cdx-faq details.is-open .cdx-faq-a {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 1.1rem;
}

/* ============================ CURRICULUM ============================ */
body.page-course-detail .cdx-syllabus { display: flex; flex-direction: column; gap: .8rem; }
body.page-course-detail .cdx-sec {
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r-sm);
    background: var(--cdx-surface);
    overflow: hidden;
}
body.page-course-detail .cdx-sec.is-open { border-color: rgba(124, 58, 237, .28); box-shadow: var(--cdx-shadow); }
body.page-course-detail .cdx-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
    cursor: pointer;
    background: var(--cdx-surface-2);
    transition: background .2s;
}
body.page-course-detail .cdx-sec-head:hover { background: rgba(124, 58, 237, .04); }
body.page-course-detail .cdx-sec-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--cdx-ink);
}
body.page-course-detail .cdx-sec-title i { color: var(--cdx-brand); font-size: 1.2rem; }
body.page-course-detail .cdx-sec-right { display: flex; align-items: center; gap: 1rem; }
body.page-course-detail .cdx-sec-meta { display: flex; gap: .9rem; font-size: .8rem; color: var(--cdx-muted); font-weight: 600; }
body.page-course-detail .cdx-sec-meta span { display: inline-flex; align-items: center; gap: .3rem; }
body.page-course-detail .cdx-sec-toggle {
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: 8px;
    color: var(--cdx-brand);
    background: rgba(124, 58, 237, .08);
    transition: transform .25s var(--cdx-ease);
}
body.page-course-detail .cdx-sec.is-open .cdx-sec-toggle { transform: rotate(180deg); }
body.page-course-detail .cdx-sec-body {
    overflow: hidden;
    max-height: 0;
    padding: 0 1.2rem;
    border-top: 1px solid transparent;
    opacity: 0;
    transition: max-height .45s var(--cdx-ease), padding .45s var(--cdx-ease), opacity .3s var(--cdx-ease), border-color .45s var(--cdx-ease);
}
body.page-course-detail .cdx-sec.is-open .cdx-sec-body {
    max-height: 3000px;
    padding: .4rem 1.2rem 1rem;
    border-top-color: var(--cdx-line-2);
    opacity: 1;
}
body.page-course-detail .cdx-sec-desc { color: var(--cdx-muted); font-size: .82rem; line-height: 1.8; padding: .8rem 0; }

body.page-course-detail .cdx-lesson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .2rem;
    border-bottom: 1px solid var(--cdx-line-2);
}
body.page-course-detail .cdx-lesson:last-child { border-bottom: none; }
body.page-course-detail .cdx-lesson-info { display: flex; align-items: center; gap: .6rem; min-width: 0; }
body.page-course-detail .cdx-lesson-ic {
    display: grid; place-items: center;
    width: 1.65rem; height: 1.65rem; flex-shrink: 0;
    border-radius: 8px;
    color: var(--cdx-brand);
    background: rgba(124, 58, 237, .07);
    font-size: .92rem;
}
body.page-course-detail .cdx-lesson-title { font-size: .82rem; color: var(--cdx-ink); font-weight: 600; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
body.page-course-detail .cdx-free {
    font-size: .64rem; font-weight: 700; color: var(--cdx-ok);
    background: rgba(22, 163, 74, .1); padding: .16rem .45rem; border-radius: 999px; flex-shrink: 0;
}
body.page-course-detail .cdx-lesson-time { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--cdx-muted); font-weight: 600; flex-shrink: 0; }

body.page-course-detail .cdx-empty { text-align: center; color: var(--cdx-muted); padding: 2rem 1rem; font-size: .95rem; }

/* ============================ REVIEWS ============================ */
body.page-course-detail .cdx-rev-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    align-items: center;
    padding: 1.3rem;
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r-sm);
    background: var(--cdx-surface-2);
    margin-bottom: 1.6rem;
}
body.page-course-detail .cdx-rev-score { text-align: center; padding-inline-end: 1.6rem; border-inline-end: 1px solid var(--cdx-line); }
body.page-course-detail .cdx-rev-score .n { font-size: 2.8rem; font-weight: 800; line-height: 1; color: var(--cdx-ink); }
body.page-course-detail .cdx-rev-score .stars { color: #f59e0b; font-size: 1.05rem; letter-spacing: 2px; margin: .4rem 0 .3rem; }
body.page-course-detail .cdx-rev-score .cnt { font-size: .78rem; color: var(--cdx-muted); }
body.page-course-detail .cdx-rev-bars { display: flex; flex-direction: column; gap: .45rem; }
body.page-course-detail .cdx-bar-row { display: flex; align-items: center; gap: .7rem; }
body.page-course-detail .cdx-bar-row .lbl { font-size: .78rem; color: #f59e0b; width: 4.5rem; letter-spacing: 1px; flex-shrink: 0; }
body.page-course-detail .cdx-bar { flex: 1; height: 8px; background: rgba(23, 21, 39, .07); border-radius: 999px; overflow: hidden; }
body.page-course-detail .cdx-bar span { display: block; height: 100%; background: linear-gradient(90deg, #fbbf24, #f59e0b); border-radius: 999px; }
body.page-course-detail .cdx-bar-row .pct { font-size: .75rem; color: var(--cdx-muted); width: 2.6rem; text-align: end; flex-shrink: 0; }

/* review form */
body.page-course-detail .cdx-revform {
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r-sm);
    background: var(--cdx-surface-2);
    padding: 1.3rem;
    margin-bottom: 1.6rem;
}
body.page-course-detail .cdx-revform h4 { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; font-weight: 800; margin: 0 0 1rem; color: var(--cdx-ink); }
body.page-course-detail .cdx-revform h4 i { color: var(--cdx-brand); }
body.page-course-detail .cdx-field { margin-bottom: 1rem; }
body.page-course-detail .cdx-field > label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--cdx-ink-soft); margin-bottom: .5rem; }
body.page-course-detail .cdx-field > label i { color: var(--cdx-brand); }
body.page-course-detail .cdx-textarea {
    width: 100%;
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r-xs);
    background: var(--cdx-surface);
    padding: .9rem 1rem;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.8;
    color: var(--cdx-ink);
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}
body.page-course-detail .cdx-textarea:focus { outline: none; border-color: var(--cdx-brand); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); }
body.page-course-detail .cdx-hint { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--cdx-muted); margin-top: .5rem; }

/* star input (RTL, source order 5..1) */
body.page-course-detail .cdx-stars-in { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
body.page-course-detail .cdx-stars-in input { display: none; }
body.page-course-detail .cdx-stars-in label { font-size: 1.7rem; color: #d7d3e2; cursor: pointer; transition: color .15s, transform .15s; line-height: 1; }
body.page-course-detail .cdx-stars-in label:hover,
body.page-course-detail .cdx-stars-in label:hover ~ label,
body.page-course-detail .cdx-stars-in input:checked ~ label { color: #f59e0b; }
body.page-course-detail .cdx-stars-in label:hover { transform: scale(1.15); }

body.page-course-detail .cdx-btn-submit {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.6rem;
    border: none; border-radius: 999px;
    background: var(--cdx-grad);
    color: #fff; font-family: inherit; font-size: .95rem; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 30px -14px rgba(124, 58, 237, .65);
    transition: transform .18s, box-shadow .18s;
}
body.page-course-detail .cdx-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(124, 58, 237, .7); }
body.page-course-detail .cdx-btn-submit:disabled { opacity: .7; cursor: default; transform: none; }

/* review list */
body.page-course-detail .cdx-rev-count { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 800; margin: 0 0 1rem; color: var(--cdx-ink); }
body.page-course-detail .cdx-rev-count i { color: var(--cdx-brand); }
body.page-course-detail .cdx-review {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--cdx-line-2);
}
body.page-course-detail .cdx-review:last-child { border-bottom: none; }
body.page-course-detail .cdx-avatar { width: 2.9rem; height: 2.9rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--cdx-surface-2); }
body.page-course-detail .cdx-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.page-course-detail .cdx-review-main { min-width: 0; flex: 1; }
body.page-course-detail .cdx-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .4rem; }
body.page-course-detail .cdx-review-name { font-weight: 800; font-size: .95rem; color: var(--cdx-ink); }
body.page-course-detail .cdx-review-stars { color: #f59e0b; font-size: .85rem; letter-spacing: 1px; }
body.page-course-detail .cdx-review-date { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--cdx-muted); }
body.page-course-detail .cdx-review-text { color: var(--cdx-ink-soft); line-height: 1.95; font-size: .93rem; margin: 0; }

/* alerts */
body.page-course-detail .cdx-alert {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .95rem 1.1rem;
    border-radius: var(--cdx-r-xs);
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}
body.page-course-detail .cdx-alert i { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
body.page-course-detail .cdx-alert a { color: inherit; font-weight: 800; text-decoration: underline; }
body.page-course-detail .cdx-alert--info { background: rgba(79, 110, 247, .08); color: #3a4bb3; }
body.page-course-detail .cdx-alert--warn { background: rgba(245, 158, 11, .1); color: #b45309; }
body.page-course-detail .cdx-alert--ok { background: rgba(22, 163, 74, .1); color: #15803d; }

/* ============================ ASIDE / ENROLL CARD ============================ */
/* overflow-x:hidden on html/body (global.css) turns the root into a scroll
   container and breaks position:sticky. Use `clip` on this page instead:
   it still prevents horizontal scroll but keeps sticky working. */
html:has(body.page-course-detail),
body.page-course-detail { overflow-x: clip; }

body.page-course-detail .cdx-aside { position: sticky; top: 4.8rem; align-self: start; }
/* Hide the redundant thumbnail on desktop so the sticky card stays compact and actually sticks */
body.page-course-detail .cdx-buy-media { display: none; }
body.page-course-detail .cdx-buy {
    background: var(--cdx-surface);
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r);
    box-shadow: var(--cdx-shadow-lg);
    overflow: hidden;
}
body.page-course-detail .cdx-buy-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cdx-surface-2); }
body.page-course-detail .cdx-buy-media img { width: 100%; height: 100%; object-fit: cover; }
body.page-course-detail .cdx-buy-body { padding: 1.15rem 1.2rem; }

/* Price block — centered & compact */
body.page-course-detail .price-section { margin-bottom: 1rem !important; padding: .9rem 1rem; }
body.page-course-detail .cdx-price-label { font-size: .8rem; color: var(--cdx-muted); font-weight: 600; margin-bottom: .3rem; text-align: center; }
body.page-course-detail .cdx-price-row { display: flex; align-items: baseline; justify-content: center; gap: .55rem; flex-wrap: wrap; }
body.page-course-detail .cdx-price { font-size: 1.85rem; font-weight: 800; color: var(--cdx-ink); }
body.page-course-detail .cdx-price .u { font-size: .95rem; font-weight: 600; color: var(--cdx-muted); }
body.page-course-detail .cdx-price--free { color: var(--cdx-ok); }
body.page-course-detail .cdx-price-old { font-size: 1rem; color: var(--cdx-muted); text-decoration: line-through; text-align: center; margin-top: .2rem; }
body.page-course-detail .cdx-off {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 700; color: #fff;
    background: var(--cdx-accent);
    padding: .28rem .6rem; border-radius: 999px;
}
body.page-course-detail .cdx-save { font-size: .82rem; color: var(--cdx-ok); font-weight: 600; margin-top: .45rem; text-align: center; }
body.page-course-detail .cdx-price-note { font-size: .8rem; color: var(--cdx-muted); margin-top: .4rem; text-align: center; }

body.page-course-detail .cdx-enroll {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%;
    margin: 1rem 0 0;
    padding: .9rem 1.2rem;
    border: none; border-radius: 999px;
    background: var(--cdx-grad);
    color: #fff; font-family: inherit; font-size: 1rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 16px 34px -14px rgba(124, 58, 237, .65);
    transition: transform .18s, box-shadow .18s;
}
body.page-course-detail .cdx-enroll:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(124, 58, 237, .72); }
body.page-course-detail .cdx-enroll i { font-size: 1.2rem; }
body.page-course-detail .cdx-enroll--done {
    background: rgba(22, 163, 74, .1);
    color: var(--cdx-ok);
    box-shadow: none;
    cursor: default;
}
body.page-course-detail .cdx-enroll--done:hover { transform: none; box-shadow: none; }
body.page-course-detail .cdx-buy-form { margin: 0; }

body.page-course-detail .cdx-includes { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--cdx-line-2); display: flex; flex-direction: column; gap: .6rem; }
body.page-course-detail .cdx-includes li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: var(--cdx-ink-soft); }
body.page-course-detail .cdx-includes i {
    display: grid; place-items: center;
    width: 1.85rem; height: 1.85rem; flex-shrink: 0;
    border-radius: 9px;
    color: var(--cdx-brand);
    background: rgba(124, 58, 237, .08);
    font-size: 1rem;
}

/* ============================ RELATED ============================ */
body.page-course-detail .cdx-related { padding: clamp(2rem, 4vw, 3.2rem) 0; border-top: 1px solid var(--cdx-line-2); background: var(--cdx-surface); }
body.page-course-detail .cdx-related-title { text-align: center; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 800; margin: 0 0 1.8rem; color: var(--cdx-ink); }
body.page-course-detail .cdx-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
body.page-course-detail .cdx-rc {
    display: flex; flex-direction: column;
    border: 1px solid var(--cdx-line);
    border-radius: var(--cdx-r);
    background: var(--cdx-surface);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--cdx-shadow);
    transition: transform .22s var(--cdx-ease), box-shadow .22s, border-color .22s;
}
body.page-course-detail .cdx-rc:hover { transform: translateY(-5px); box-shadow: var(--cdx-shadow-lg); border-color: rgba(124, 58, 237, .25); }
body.page-course-detail .cdx-rc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cdx-surface-2); }
body.page-course-detail .cdx-rc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--cdx-ease); }
body.page-course-detail .cdx-rc:hover .cdx-rc-media img { transform: scale(1.06); }
body.page-course-detail .cdx-rc-badge { position: absolute; top: .7rem; inset-inline-start: .7rem; font-size: .7rem; font-weight: 700; color: #fff; background: var(--cdx-accent); padding: .25rem .6rem; border-radius: 999px; }
body.page-course-detail .cdx-rc-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
body.page-course-detail .cdx-rc-title { font-size: 1rem; font-weight: 800; color: var(--cdx-ink); line-height: 1.6; margin: 0 0 .7rem; }
body.page-course-detail .cdx-rc-meta { display: flex; gap: .9rem; font-size: .78rem; color: var(--cdx-muted); margin-bottom: 1rem; }
body.page-course-detail .cdx-rc-meta span { display: inline-flex; align-items: center; gap: .3rem; }
body.page-course-detail .cdx-rc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
body.page-course-detail .cdx-rc-price { font-weight: 800; color: var(--cdx-ink); font-size: .95rem; }
body.page-course-detail .cdx-rc-cta { font-size: .82rem; font-weight: 700; color: var(--cdx-brand); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 960px) {
    body.page-course-detail .cdx-hero-inner { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.4rem); }
    body.page-course-detail .cdx-hero-media { order: -1; max-width: 360px; width: 100%; }
    body.page-course-detail .cdx-grid { grid-template-columns: 1fr; }
    body.page-course-detail .cdx-aside { position: static; order: -1; max-height: none; overflow: visible; }
    body.page-course-detail .cdx-buy { display: grid; grid-template-columns: 200px 1fr; }
    body.page-course-detail .cdx-buy-media { display: block; aspect-ratio: auto; }
    body.page-course-detail .cdx-related-grid { grid-template-columns: repeat(2, 1fr); }
    /* جلوگیری از سرریز افقی هدر سرفصل‌ها وقتی چیدمان تک‌ستونه می‌شود */
    body.page-course-detail .cdx-sec-head { flex-wrap: wrap; gap: .55rem; padding: .95rem 1.1rem; }
    body.page-course-detail .cdx-sec-title { min-width: 0; flex: 1 1 100%; }
    body.page-course-detail .cdx-sec-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.page-course-detail .cdx-sec-right { width: 100%; justify-content: space-between; gap: .6rem; }
    body.page-course-detail .cdx-sec-meta { font-size: .78rem; gap: .8rem; }
}
@media (max-width: 680px) {
    body.page-course-detail .cdx-hero-media { display: none !important; }
    body.page-course-detail .cdx-hero-badge { padding: .5rem .7rem; }
    body.page-course-detail .cdx-hero-badge--rate { inset-inline-start: 2%; }
    body.page-course-detail .cdx-hero-badge--lessons { inset-inline-end: 2%; }
    body.page-course-detail .cdx-checklist { grid-template-columns: 1fr; }
    body.page-course-detail .cdx-buy { grid-template-columns: 1fr; }
    body.page-course-detail .cdx-buy-media { aspect-ratio: 16 / 10; }
    body.page-course-detail .cdx-rev-summary { grid-template-columns: 1fr; gap: 1.1rem; }
    body.page-course-detail .cdx-rev-score { padding-inline-end: 0; border-inline-end: none; padding-bottom: 1.1rem; border-bottom: 1px solid var(--cdx-line); }
    body.page-course-detail .cdx-related-grid { grid-template-columns: 1fr; }
    body.page-course-detail .cdx-tabs { top: 4.4rem; }
    body.page-course-detail .cdx-aside { top: 0; }
    body.page-course-detail .cdx-sec-meta { font-size: .74rem; gap: .7rem; }
}

/* ============================ FOOTER ============================ */
/* Match the home page footer look:
   - hide the quick-access nav icons (on the home page Font Awesome is
     overridden by the body font, so those icons render empty)
   - use the full-bleed container like the home footer */
body.page-course-detail .footer-galaxy .footer-col ul a i { display: none; }
body.page-course-detail .footer-galaxy .container {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
    padding-inline: clamp(1rem, 4vw, 3.5rem);
}

/* ============================ DARK THEME ============================ */
/* The global toggle sets [data-theme="dark"] on <html>. Redefine the
   scoped .cdx-* variables so the whole course-detail page follows the
   dark palette, plus targeted fixes for the few hard-coded light colors. */
html[data-theme="dark"] body.page-course-detail .cdx-page {
    --cdx-ink: #ece9f6;
    --cdx-ink-soft: #b9b4cc;
    --cdx-muted: #8a85a0;
    --cdx-page: #0e0c16;
    --cdx-surface: #171426;
    --cdx-surface-2: #201c32;
    --cdx-line: rgba(255, 255, 255, .10);
    --cdx-line-2: rgba(255, 255, 255, .06);
    --cdx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -20px rgba(0, 0, 0, .6);
    --cdx-shadow-lg: 0 30px 70px -34px rgba(0, 0, 0, .75);
}

/* Hero surface + tint blobs on a dark base */
html[data-theme="dark"] body.page-course-detail .cdx-hero {
    background:
        radial-gradient(58% 90% at 90% -20%, rgba(124, 58, 237, .18), transparent 60%),
        radial-gradient(50% 80% at 2% 120%, rgba(236, 72, 153, .14), transparent 60%),
        var(--cdx-surface);
}

/* Image frame + shine — soften the white edges */
html[data-theme="dark"] body.page-course-detail .cdx-hero-frame {
    border-color: rgba(255, 255, 255, .12);
    box-shadow:
        0 40px 80px -30px rgba(0, 0, 0, .7),
        0 12px 30px -18px rgba(236, 72, 153, .3),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Floating glass badges → dark glass */
html[data-theme="dark"] body.page-course-detail .cdx-hero-badge {
    background: rgba(30, 27, 46, .78);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
}

/* Sticky tabs bar glass */
html[data-theme="dark"] body.page-course-detail .cdx-tabs {
    background: rgba(23, 20, 38, .82);
}

/* Star chip cream → dark amber tint */
html[data-theme="dark"] body.page-course-detail .cdx-chip--star {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .3);
}

/* Progress bar track */
html[data-theme="dark"] body.page-course-detail .cdx-bar {
    background: rgba(255, 255, 255, .1);
}

/* Alerts — lift the text to readable tones on dark */
html[data-theme="dark"] body.page-course-detail .cdx-alert--info {
    background: rgba(79, 110, 247, .16);
    color: #a9b6ff;
}
html[data-theme="dark"] body.page-course-detail .cdx-alert--warn {
    background: rgba(245, 158, 11, .16);
    color: #fbc06b;
}
html[data-theme="dark"] body.page-course-detail .cdx-alert--ok {
    background: rgba(22, 163, 74, .16);
    color: #6ee7a0;
}

/* Enrolled / done state */
html[data-theme="dark"] body.page-course-detail .cdx-enroll--done {
    background: rgba(22, 163, 74, .16);
}