/* ==========================================================
   Course detail premium polish
   Loaded after global theme layers. All rules are page-scoped
   to avoid leaking typography/card styles to other components.
   ========================================================== */

.course-detail-hero,
.course-detail-section,
.course_description_box,
.related_courses_title,
.related-courses-grid{
    direction:rtl;
}

.course-detail-hero{
    position:relative;
    isolation:isolate;
    width:100%;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 500px) !important;
    align-items:center !important;
    gap:clamp(28px, 5vw, 72px) !important;
    padding:clamp(56px, 7vw, 92px) clamp(18px, 6vw, 96px) !important;
    min-height:auto !important;
    overflow:hidden !important;
    background:
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--bg-page) 92%, var(--accent) 8%), var(--bg-page)) !important;
}

.course-detail-hero::before{
    content:"";
    position:absolute;
    inset:auto -12% -30% auto;
    width:min(52vw, 680px);
    aspect-ratio:1;
    border-radius:999px;
    background:radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%);
    filter:blur(24px);
    pointer-events:none;
    z-index:-1;
}

.course-detail-hero__content{
    width:100%;
    max-width:680px;
    justify-self:end;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    text-align:right !important;
}

.course-detail-hero .badge{
    width:auto !important;
    max-width:100% !important;
    min-height:42px;
    padding:0 16px !important;
    margin:0 !important;
    gap:8px;
    border-radius:999px !important;
    background:var(--accent-soft) !important;
    color:var(--text-primary) !important;
    border:1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
    box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 12%, transparent);
}

.course-detail-hero .badge .circle_gradient{
    width:16px !important;
    height:16px !important;
    margin:0 !important;
    flex:0 0 16px;
}

.course-detail-hero .title{
    max-width:680px !important;
    margin:18px 0 0 !important;
    font-size:clamp(36px, 4vw, 58px) !important;
    line-height:1.35 !important;
    letter-spacing:-.025em;
    font-weight:850 !important;
    color:var(--text-primary) !important;
    text-align:right !important;
    text-wrap:balance;
}

.course-detail-hero .subtitle{
    max-width:620px;
    margin-top:14px !important;
    color:var(--text-secondary) !important;
    font-size:clamp(14px, 1.05vw, 16px) !important;
    line-height:1.95 !important;
    text-align:right !important;
}

.course-detail-hero__content > .extra_info{
    width:100% !important;
    max-width:720px;
    margin:22px 0 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}

.course-detail-hero__content > .extra_info .info,
.course-detail-hero .course_features .info{
    min-height:42px;
    padding:0 14px !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    border-radius:999px !important;
    background:var(--bg-card) !important;
    border:1px solid var(--border-soft) !important;
    color:var(--text-secondary) !important;
    font-size:14px !important;
    line-height:1.4 !important;
    box-shadow:0 10px 28px color-mix(in srgb, var(--primary) 7%, transparent);
}

.course-detail-hero .Enroll_btn{
    width:100% !important;
    max-width:420px !important;
    margin-top:24px !important;
    display:grid !important;
    grid-template-columns:minmax(112px, .8fr) minmax(160px, 1.2fr) !important;
    gap:12px !important;
    align-items:center !important;
}

.course-detail-hero .Enroll_btn .price,
.course-detail-hero .Enroll_btn .Registration{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-align:center !important;
}

.course-detail-hero .Enroll_btn .price{
    color:var(--text-on-accent) !important;
    background:linear-gradient(135deg,var(--primary),var(--secondary)) !important;
    border:1px solid transparent !important;
    box-shadow:0 16px 32px color-mix(in srgb, var(--primary) 22%, transparent);
}

.course-detail-hero .Enroll_btn .Registration{
    color:var(--text-on-accent) !important;
    background:linear-gradient(135deg,var(--secondary),var(--primary)) !important;
    border:0 !important;
    box-shadow:0 18px 36px color-mix(in srgb, var(--secondary) 20%, transparent);
}

.course-detail-hero .course_features{
    width:100%;
    margin-top:28px !important;
}

.course-detail-hero .course_features .extra_info{
    width:100%;
    max-width:560px;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
}

.course-detail-hero .course_features .info{
    min-height:72px;
    flex-direction:column !important;
    border-radius:18px !important;
    font-weight:700;
    color:var(--text-primary) !important;
}

.course-detail-hero .course_features .info svg{
    width:22px !important;
    height:22px !important;
    margin:4px 0 0 !important;
    color:var(--primary) !important;
}

.course-overview-card{
    width:min(100%, 500px) !important;
    max-width:500px !important;
    justify-self:start;
    margin:0 !important;
    padding:26px !important;
    border-radius:28px !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, white 6%), var(--bg-card)) !important;
    border:1px solid var(--border-soft) !important;
    box-shadow:0 28px 80px color-mix(in srgb, var(--primary) 13%, transparent), var(--shadow-card) !important;
    overflow:hidden;
}

.course-overview-card h4{
    margin:0 0 18px !important;
    color:var(--primary) !important;
    font-size:clamp(20px, 1.8vw, 28px) !important;
    line-height:1.5 !important;
    font-weight:850 !important;
    text-align:right !important;
}

.course-overview-card .card{
    min-height:58px !important;
    margin:10px 0 !important;
    padding:0 16px !important;
    border:1px solid var(--border-soft) !important;
    border-radius:18px !important;
    background:color-mix(in srgb, var(--bg-surface) 70%, transparent) !important;
    color:var(--text-primary) !important;
    box-shadow:none !important;
}

.course-overview-card .card span{
    color:inherit !important;
    font-size:14px !important;
    font-weight:700;
}

.course-overview-card .progress{
    margin-top:16px;
    padding-top:0;
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) !important;
    gap:12px !important;
    align-items:center !important;
}

.course-overview-card .progress div.txt{
    margin:0 !important;
    white-space:nowrap;
    color:var(--text-primary) !important;
    font-weight:700;
}

.course-overview-card .progress div.bar{
    width:100% !important;
    max-width:none !important;
    height:14px !important;
    background:color-mix(in srgb, var(--bg-page) 70%, var(--bg-card)) !important;
    border-color:var(--border-soft) !important;
    overflow:hidden;
}

.course_description_box.course-detail-card{
    width:min(980px, calc(100% - 36px)) !important;
    margin:clamp(36px, 5vw, 64px) auto 0 !important;
    padding:clamp(22px, 3vw, 34px) !important;
    border-radius:26px !important;
    background:var(--bg-card) !important;
    color:var(--text-primary) !important;
    border:1px solid var(--border-soft) !important;
    box-shadow:var(--shadow-card) !important;
}

.course_description_box .title{
    margin:0 !important;
    font-size:clamp(24px, 2.4vw, 36px) !important;
    line-height:1.45 !important;
    color:var(--text-primary) !important;
}

.course_description_box .subtitle{
    margin-top:12px !important;
    color:var(--text-secondary) !important;
    font-size:15px !important;
    line-height:2 !important;
}

.course-detail-section{
    background:var(--bg-page) !important;
    padding:clamp(48px, 6vw, 84px) clamp(18px, 4vw, 72px) !important;
    overflow:hidden;
}

.course-detail-section > .title,
.course-detail-section > .section-title,
.related_courses_title .title{
    margin:0 !important;
    font-size:clamp(28px, 3vw, 44px) !important;
    line-height:1.45 !important;
    font-weight:850 !important;
    color:var(--text-primary) !important;
    text-align:center !important;
}

.curriculum .summery_badges{
    width:min(760px, 100%) !important;
    height:auto !important;
    margin:22px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
}

.curriculum .summery_badges .badge{
    width:100% !important;
    height:52px !important;
    min-height:52px !important;
    border-radius:16px !important;
    background:var(--bg-card) !important;
    color:var(--text-primary) !important;
    border-color:var(--border-soft) !important;
    font-size:14px !important;
    font-weight:800 !important;
}

.curriculum .items{
    width:min(920px, 100%);
    margin:28px auto 0 !important;
}

.curriculum .items .lesson_item .left_faq{
    width:100% !important;
}

.curriculum .items .lesson_item .left_faq .faq_item{
    width:100% !important;
    max-width:none !important;
    min-height:66px !important;
    max-height:86px !important;
    margin:12px 0 !important;
    padding:0 !important;
    border-radius:18px !important;
    background:var(--bg-card) !important;
    border:1px solid var(--border-soft) !important;
    color:var(--text-primary) !important;
    overflow:hidden !important;
    box-shadow:var(--shadow-card) !important;
}

.curriculum .items .lesson_item .left_faq .faq_item .row_1{
    min-height:66px !important;
    padding:0 18px !important;
    margin:0 !important;
    border-bottom:1px solid var(--border-soft) !important;
}

.curriculum .items .lesson_item .left_faq .faq_item .row_1 h4{
    margin:0 !important;
    font-size:15px !important;
    line-height:1.7 !important;
    color:var(--text-primary) !important;
}

.curriculum .items .lesson_item .left_faq .faq_item .row_1 .btn label{
    min-height:38px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--primary);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.curriculum .items .lesson_item .left_faq .faq_item .row_2 .L_item{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin:12px auto !important;
    padding:12px !important;
    direction:rtl !important;
    border:1px solid var(--border-soft) !important;
    border-radius:14px !important;
    background:var(--bg-surface) !important;
}

.curriculum .items .lesson_item .left_faq .faq_item .row_2 .L_item span{
    margin:0 !important;
    padding:0 !important;
    font-size:14px !important;
    line-height:1.8 !important;
    color:var(--text-secondary) !important;
}

.curriculum .items .lesson_item .left_faq .faq_item .row_2 .L_item span.item_name{
    width:auto !important;
    max-width:60%;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-align:right;
}

.course-detail-learning .card_learn{
    width:min(980px, 100%) !important;
    margin:28px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
}

.course-outcome-card,
.will_learn .card_learn .card.course-outcome-card{
    width:100% !important;
    max-width:none !important;
    min-height:124px !important;
    margin:0 !important;
    padding:20px !important;
    border-radius:22px !important;
    background:var(--bg-card) !important;
    border:1px solid var(--border-soft) !important;
    color:var(--text-primary) !important;
    box-shadow:var(--shadow-card) !important;
}

.course-outcome-card__title{
    margin:0 !important;
    color:var(--text-primary) !important;
    font-size:clamp(18px, 1.6vw, 24px) !important;
    line-height:1.55 !important;
    font-weight:850 !important;
    text-align:center !important;
}

.course-detail-instructor .teacher{
    width:min(980px, 100%) !important;
    margin:28px auto 0 !important;
    padding:0 !important;
}

.course-detail-instructor .teacher .intro_teacher{
    display:grid !important;
    grid-template-columns:minmax(0, 1.2fr) minmax(220px, .8fr) !important;
    align-items:center !important;
    gap:24px !important;
    padding:28px !important;
    border-radius:28px !important;
    background:var(--bg-card) !important;
    border:1px solid var(--border-soft) !important;
    box-shadow:var(--shadow-card) !important;
}

.course-detail-instructor .teacher .intro_teacher .resume :where(h5,h6,p){
    text-align:right !important;
}

.course-detail-instructor .teacher .intro_teacher .resume h5.name{
    font-size:clamp(24px, 2.2vw, 34px) !important;
    line-height:1.45 !important;
    margin:0 !important;
    color:var(--text-primary) !important;
}

.course-detail-instructor .teacher .intro_teacher .picture svg.prof{
    width:clamp(170px, 18vw, 240px) !important;
    height:clamp(170px, 18vw, 240px) !important;
    color:var(--primary) !important;
    background:var(--accent-soft);
    padding:22px;
    border-radius:50%;
    border:1px solid var(--border-soft);
}

.course-detail-reviews .carousel_wrapper{
    width:min(980px, 100%) !important;
}

.related_courses_title{
    padding:clamp(42px, 5vw, 70px) 18px 0 !important;
    background:var(--bg-page) !important;
}

.related-courses-grid{
    width:min(920px, calc(100% - 36px)) !important;
    margin:28px auto 0 !important;
    padding:0 0 clamp(48px, 6vw, 80px) !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 420px)) !important;
    justify-content:center !important;
    gap:24px !important;
}

@media (max-width:1180px){
    .course-detail-hero{
        grid-template-columns:1fr !important;
        justify-items:center !important;
        text-align:center;
    }

    .course-detail-hero__content,
    .course-overview-card{
        justify-self:center !important;
    }

    .course-detail-hero__content{
        align-items:center !important;
        text-align:center !important;
    }

    .course-detail-hero .title,
    .course-detail-hero .subtitle{
        text-align:center !important;
    }

    .course-detail-hero__content > .extra_info{
        justify-content:center !important;
    }
}

@media (max-width:768px){
    .course-detail-hero{
        padding:clamp(42px, 10vw, 64px) 16px !important;
        gap:28px !important;
    }

    .course-detail-hero .title{
        font-size:clamp(30px, 9vw, 42px) !important;
    }

    .course-detail-hero .Enroll_btn{
        grid-template-columns:1fr !important;
        max-width:360px !important;
    }

    .course-detail-hero .course_features .extra_info,
    .curriculum .summery_badges,
    .course-detail-learning .card_learn{
        grid-template-columns:1fr !important;
    }

    .course-overview-card{
        padding:20px !important;
        border-radius:24px !important;
    }

    .course-overview-card .progress{
        grid-template-columns:1fr !important;
    }

    .course-detail-instructor .teacher .intro_teacher{
        grid-template-columns:1fr !important;
        text-align:center !important;
        padding:22px !important;
    }

    .course-detail-instructor .teacher .intro_teacher .resume :where(h5,h6,p){
        text-align:center !important;
    }
}

@media (max-width:480px){
    .course-detail-section{
        padding-inline:14px !important;
    }

    .course_description_box.course-detail-card,
    .related-courses-grid{
        width:calc(100% - 28px) !important;
    }

    .curriculum .items .lesson_item .left_faq .faq_item .row_1{
        min-height:auto !important;
        padding:14px !important;
        gap:10px !important;
        flex-direction:column !important;
    }

    .curriculum .items .lesson_item .left_faq .faq_item{
        max-height:150px !important;
    }

    .curriculum .items .lesson_item .left_faq .faq_item .row_2 .L_item{
        flex-direction:column !important;
        gap:8px !important;
    }

    .curriculum .items .lesson_item .left_faq .faq_item .row_2 .L_item span.item_name{
        max-width:100%;
    }
}