/**

 * Lesson detail — modern theme layer (overrides lesson-detail-page.css)

 */



.eman-lesson-detail {

    background: var(--eman-bg-light, #f8f9fe);

}



.eman-lesson-detail .content-wrapper {

    background: var(--eman-bg-light, #f8f9fe);

}



/* ── Hero ─────────────────────────────────────────────── */

.eman-lesson-detail .eman-lesson-hero {

    background: linear-gradient(165deg, #faf8fc 0%, var(--eman-bg-light, #f8f9fe) 45%, #fff 100%);

    border-bottom: 1px solid var(--eman-border-light, #e0e0e0);

    position: relative;

    overflow: hidden;

}



.eman-lesson-detail .eman-lesson-hero::before {

    content: '';

    position: absolute;

    top: -120px;

    inset-inline-end: -80px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(106, 27, 154, 0.08) 0%, transparent 70%);

    pointer-events: none;

}



.eman-lesson-detail .eman-lesson-hero .row {
    align-items: flex-start;
}

.eman-lesson-detail .eman-lesson-hero .col-lg-4 {
    align-self: flex-start;
}


    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    font-size: 0.875rem;

    color: var(--eman-text-muted, #64748b);

}



.eman-lesson-detail .lesson-breadcrumbs a {

    color: var(--eman-purple);

    font-weight: 500;

}



.eman-lesson-detail .lesson-breadcrumbs a:hover {

    color: var(--eman-purple-light);

}



.eman-lesson-detail .eman-lesson-hero__badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;

}



.eman-lesson-detail .eman-lesson-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: var(--radius-pill, 999px);

    font-size: 12px;

    font-weight: 700;

    background: rgba(106, 27, 154, 0.08);

    color: var(--eman-purple);

    border: 1px solid rgba(106, 27, 154, 0.12);

}



.eman-lesson-detail .eman-lesson-badge--new {

    background: rgba(255, 152, 0, 0.12);

    color: #e65100;

    border-color: rgba(255, 152, 0, 0.25);

}



.eman-lesson-detail .eman-lesson-badge--enrolled {

    background: rgba(0, 168, 150, 0.1);

    color: #00796b;

    border-color: rgba(0, 168, 150, 0.2);

}



.eman-lesson-detail .eman-lesson-hero h1 {

    font-size: clamp(1.75rem, 4vw, 2.5rem);

    line-height: 1.25;

    color: var(--eman-purple);

    margin-top: 16px;

    font-weight: 800;

}



.eman-lesson-detail .eman-lesson-hero__subtitle {

    font-size: 1.05rem;

    line-height: 1.65;

    color: var(--eman-text-light, #555);

    margin-top: 14px;

    max-width: 640px;

}



.eman-lesson-detail .lesson-instructor-info {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    padding: 8px 14px 8px 8px;

    background: #fff;

    border: 1px solid var(--eman-border-light, #e0e0e0);

    border-radius: var(--radius-pill, 999px);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

}



.eman-lesson-detail .lesson-instructor-info img {

    width: 36px;

    height: 36px;

}



.eman-lesson-detail .lesson-instructor-info .instructor-name {

    font-size: 14px;

    font-weight: 600;

    color: var(--eman-text-dark, #333);

}



.eman-lesson-detail .eman-lesson-stats {

    margin-top: 28px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}



@media (min-width: 768px) {

    .eman-lesson-detail .eman-lesson-stats {

        grid-template-columns: repeat(4, 1fr);

    }

}



.eman-lesson-detail .eman-lesson-stats .lesson-stat-item {

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    padding: 16px;

    background: #fff;

    border: 1px solid var(--eman-border-light, #e0e0e0);

    border-radius: var(--radius-md, 12px);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.eman-lesson-detail .eman-lesson-stats .lesson-stat-item:hover {

    border-color: rgba(106, 27, 154, 0.25);

    box-shadow: 0 4px 16px rgba(106, 27, 154, 0.08);

}



.eman-lesson-detail .eman-lesson-stats .lesson-stat-item .lucide-icon {

    width: 22px;

    height: 22px;

    padding: 8px;

    box-sizing: content-box;

    background: rgba(106, 27, 154, 0.08);

    border-radius: var(--radius-sm, 8px);

    color: var(--eman-purple);

}



.eman-lesson-detail .eman-lesson-stats .lesson-stat-item-content h5 {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--eman-text-muted, #64748b);

    font-weight: 700;

}



.eman-lesson-detail .eman-lesson-stats .lesson-stat-item-content p {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--eman-text-dark, #333);

}



/* ── Enroll / purchase card ───────────────────────────── */

.eman-lesson-detail .eman-lesson-enroll {

    background: #fff;

    border: 1px solid var(--eman-border-light, #e0e0e0);

    border-radius: var(--radius-lg, 16px);

    box-shadow: 0 12px 40px rgba(106, 27, 154, 0.1);

    padding: 0;

    overflow: hidden;

    position: sticky;

    top: 96px;

    align-self: flex-start;

}



.eman-lesson-detail .eman-lesson-enroll .lesson-purchase-card-thumbnail {

    margin-bottom: 0;

    border-radius: 0;

    aspect-ratio: 16 / 9;

}



.eman-lesson-detail .eman-lesson-enroll .lesson-purchase-card-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.eman-lesson-detail .eman-lesson-enroll__body {

    padding: 20px 22px 22px;

}



.eman-lesson-detail .lesson-purchase-card-price {

    margin-bottom: 16px;

}



.eman-lesson-detail .lesson-purchase-card-price .final-price {

    font-size: 1.85rem;

}



.eman-lesson-detail .eman-lesson-enroll__features {

    list-style: none;

    margin: 0 0 18px;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.eman-lesson-detail .eman-lesson-enroll__features li {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 500;

    color: var(--eman-text-light, #555);

    margin: 0;

}



.eman-lesson-detail .eman-lesson-enroll__features .lucide-icon {

    width: 16px;

    height: 16px;

    color: var(--eman-purple);

    flex-shrink: 0;

}



.eman-lesson-detail .eman-lesson-enroll .button {

    border-radius: var(--radius-md, 12px) !important;

    font-weight: 700;

    min-height: 52px;

    box-shadow: 0 4px 14px rgba(106, 27, 154, 0.25);

}



.eman-lesson-detail .eman-lesson-enroll .button.-green-1 {

    box-shadow: 0 4px 14px rgba(0, 168, 150, 0.25);

}



.eman-lesson-detail .lesson-purchase-card-guarantee {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 12px;

    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px dashed var(--eman-border-light, #e0e0e0);

}



.eman-lesson-detail .lesson-purchase-card-guarantee .lucide-icon {

    width: 16px;

    height: 16px;

    color: var(--eman-success, #059669);

}



/* ── Content panels ───────────────────────────────────── */

.eman-lesson-detail .eman-lesson-body {

    padding: 48px 0 64px;

    background: transparent;

}



.eman-lesson-detail .eman-lesson-panel {

    background: #fff;

    border: 1px solid var(--eman-border-light, #e0e0e0);

    border-radius: var(--radius-lg, 16px);

    padding: 28px 28px 32px;

    margin-bottom: 24px;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

}



.eman-lesson-detail .eman-lesson-panel__head {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    padding-bottom: 16px;

    border-bottom: 2px solid rgba(106, 27, 154, 0.12);

}



.eman-lesson-detail .eman-lesson-panel__icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: var(--radius-sm, 8px);

    background: rgba(106, 27, 154, 0.1);

    color: var(--eman-purple);

    flex-shrink: 0;

}



.eman-lesson-detail .eman-lesson-panel__icon svg {

    width: 20px;

    height: 20px;

}



.eman-lesson-detail .eman-lesson-panel h2 {

    margin: 0;

    font-size: 1.35rem;

    font-weight: 700;

    color: var(--eman-purple);

    border: none;

    padding: 0;

    display: block;

}



.eman-lesson-detail .eman-lesson-panel .text-content {

    font-size: 1rem;

    line-height: 1.75;

}



.eman-lesson-detail .lesson-feature-list {

    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 0;

}



@media (min-width: 768px) {

    .eman-lesson-detail .lesson-feature-list {

        grid-template-columns: repeat(2, 1fr);

    }

}



.eman-lesson-detail .lesson-feature-list li {

    background: var(--eman-bg-light, #f8f9fe);

    border: 1px solid var(--eman-border-light, #e0e0e0);

    border-radius: var(--radius-md, 12px);

    padding: 14px 16px;

}



/* ── Accordion ────────────────────────────────────────── */

.eman-lesson-detail .lesson-accordion .accordion__item {

    border: 1px solid var(--eman-border-light, #e0e0e0);

    border-radius: var(--radius-md, 12px);

    margin-bottom: 10px;

    overflow: hidden;

    background: #fff;

}



.eman-lesson-detail .lesson-accordion .accordion__button {

    padding: 18px 20px;

    background: #fff;

}



.eman-lesson-detail .lesson-accordion .accordion__button.is-active,

.eman-lesson-detail .lesson-accordion .accordion__item.is-active .accordion__button {

    background: rgba(106, 27, 154, 0.04);

}



.eman-lesson-detail .lesson-accordion .content-item {

    padding: 14px 20px;

    transition: background-color 0.15s ease;

}



.eman-lesson-detail .lesson-accordion .content-item:hover {

    background: var(--eman-bg-light, #f8f9fe);

}



.eman-lesson-detail .eman-lesson-empty-notice {

    padding: 20px;

    border-radius: var(--radius-md, 12px);

    background: var(--eman-bg-light, #f8f9fe);

    border: 1px dashed var(--eman-border-light, #e0e0e0);

    color: var(--eman-text-light, #555);

    text-align: center;

}



/* ── Instructor ───────────────────────────────────────── */

.eman-lesson-detail .lesson-instructor-card {

    background: var(--eman-bg-light, #f8f9fe);

    border: 1px solid var(--eman-border-light, #e0e0e0);

    border-radius: var(--radius-md, 12px);

    padding: 28px;

    box-shadow: none;

}



.eman-lesson-detail .lesson-instructor-card img {

    border: 3px solid #fff;

    box-shadow: 0 4px 16px rgba(106, 27, 154, 0.15);

}



/* ── Related lessons ──────────────────────────────────── */

.eman-lesson-detail .eman-lesson-related {

    padding: 56px 0 72px;

    background: #fff;

    border-top: 1px solid var(--eman-border-light, #e0e0e0);

}



.eman-lesson-detail .eman-lesson-related .sectionTitle__title {

    color: var(--eman-purple) !important;

    font-size: clamp(1.5rem, 3vw, 2rem);

}



.eman-lesson-detail .eman-lesson-related .sectionTitle__text {

    color: var(--eman-text-light, #555) !important;

}



.eman-lesson-detail .eman-lesson-related .lesson-card {

    border-radius: var(--radius-lg, 16px);

    border: 1px solid var(--eman-border-light, #e0e0e0);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);

}



/* ── Error card ───────────────────────────────────────── */

.eman-lesson-detail .error-card-box {

    border-radius: var(--radius-lg, 16px);

    box-shadow: 0 12px 40px rgba(106, 27, 154, 0.08);

}



/* Lesson detail — dark mode lives in lesson-detail-dark.css */

@media (max-width: 991px) {

    .eman-lesson-detail .eman-lesson-enroll {

        position: static;

        margin-top: 8px;

    }



    .eman-lesson-detail .eman-lesson-stats {

        grid-template-columns: repeat(2, 1fr);

    }



    .eman-lesson-detail .eman-lesson-panel {

        padding: 22px 18px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .eman-lesson-detail .eman-lesson-stats .lesson-stat-item,

    .eman-lesson-detail .eman-lesson-related .lesson-card {

        transition: none;

    }

}