/* Course Module - Ultra Trending UI Styles */

:root {
    --course-primary: #1e2a47;
    --course-accent: #3d5afe;
    --course-accent-soft: rgba(61, 90, 254, 0.1);
    --course-bg: #ffffff;
    --ultra-glass: rgba(255, 255, 255, 0.02);
    --trending-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

/* Base UI Improvements */
.all__sidebar-item.ultra-glass {
    background: #ffffff;
    border: 1px solid #f0f3f9 !important;
    box-shadow: var(--trending-shadow);
    border-radius: 24px !important;
}

/* Sidebar Pricing */
.sidebar-pricing {
    padding: 30px 20px;
    border-bottom: 1px solid #f0f3f9;
}

.sidebar-pricing .current-price {
    font-size: 36px;
    font-weight: 800;
    color: var(--course-primary);
    margin-bottom: 5px;
}

.sidebar-pricing .old-price {
    font-size: 18px;
    color: #94a3b8;
}

/* Enroll Button */
.btn-enroll-trending {
    background: #254275;
    color: white !important;
    border: none;
    padding: 18px 30px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px rgba(37, 66, 117, 0.2);
}

.btn-enroll-trending:hover {
    transform: translateY(-3px);
    background: #1a2e55;
    box-shadow: 0 15px 30px rgba(37, 66, 117, 0.3);
}

/* Trending Info List (Vertical Layout) */
.trending-info-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.trending-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trending-info-item .icon-wrap {
    font-size: 28px;
    color: #64748b;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.trending-info-item:hover .icon-wrap {
    color: var(--course-accent);
}

.trending-info-item h6 {
    font-size: 22px;
    font-weight: 800;
    color: var(--course-primary);
    margin-bottom: 8px;
}

.trending-info-item span {
    font-size: 18px;
    color: #64748b;
    font-weight: 500;
}

/* Dark Mode Alignment */
.dark-mode .all__sidebar-item.ultra-glass {
    background: #111827;
    border-color: #1f2937 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.dark-mode .sidebar-pricing {
    border-color: #1f2937;
}

.dark-mode .sidebar-pricing .current-price {
    color: #f1f5f9;
}

.dark-mode .trending-info-item h6 {
    color: #f1f5f9;
}

/* Course Content Accordion */
.course-content-accordion h6.icon.page {
    background: white !important;
    border: 1px solid var(--course-border) !important;
    padding: 18px 22px !important;
    border-radius: 15px !important;
    font-weight: 700;
    color: var(--course-primary);
}

.faq__area-item-body {
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px dashed var(--course-border) !important;
}

.lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.lesson-item:hover {
    background: white;
    padding-left: 20px;
}

/* Typography & Buttons */
.course-full-description h3,
.course-full-description h4 {
    color: var(--course-primary);
    font-weight: 800;
    margin: 25px 0 15px;
}

.btn-one {
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* Dark Mode Support */
.dark-mode .course-card,
.dark-mode .all__sidebar-item,
.dark-mode .faq__area-item {
    background: rgba(20, 30, 48, 0.7);
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .info-list .info-item {
    background: rgba(255, 255, 255, 0.03);
}

.dark-mode .info-list .icon-box {
    background: #1e293b;
    color: #7eb3f5;
}

/* Modern course details experience */
.course-detail-modern {
    --course-ink: #10172a;
    --course-copy: #667085;
    --course-line: #e4e9f1;
    --course-surface: #f5f7fb;
    background: var(--course-surface);
}
.course-detail-modern .course-detail-hero {
    min-height: 390px !important;
    height: 390px;
}
.course-detail-modern .course-detail-hero .page__banner-image { opacity: .48; filter: saturate(.7) contrast(1.12); }
.course-detail-modern .course-detail-hero .page__banner-content { max-width: 970px; }
.course-detail-modern .course-detail-hero .page__banner-content:before { content: "Course details"; }
.course-detail-modern .course-detail-hero .page__banner-content h1 { max-width: 950px; font-size: clamp(42px,5vw,66px); }
.course-detail-modern .course-detail-body { padding: 82px 0 96px !important; background: var(--course-surface); }
.course-detail-modern .course-detail-layout { align-items: flex-start; }
.course-detail-modern .course-detail-content {
    padding: 42px;
    border: 1px solid var(--course-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(15,23,42,.07);
}
.course-detail-modern .course-detail-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 7px 11px;
    border: 1px solid #dce5ff;
    border-radius: 999px;
    color: #315fe7;
    background: #eff4ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.course-detail-modern .project__single-area-content > h2 {
    max-width: 760px;
    margin: 0 0 17px;
    color: var(--course-ink);
    font-size: clamp(30px,3.5vw,46px);
    line-height: 1.08;
    letter-spacing: -.045em;
}
.course-detail-modern .course-detail-rating { display: flex; align-items: center; margin-bottom: 21px !important; }
.course-detail-modern .course-detail-rating h6 { margin: 0 10px 0 0; color: #39445a; font-size: 11px; }
.course-detail-modern .course-detail-rating ul { display: flex; gap: 3px; }
.course-detail-modern .course-detail-rating li i { color: #ffb020; font-size: 11px; }
.course-detail-modern .project__single-area-content > p,
.course-detail-modern .course-full-description { color: var(--course-copy); font-size: 14px; line-height: 1.8; }
.course-detail-modern .course-full-description { margin-top: 24px; }
.course-detail-modern .course-full-description h2,
.course-detail-modern .course-full-description h3,
.course-detail-modern .course-full-description h4 { color: var(--course-ink); letter-spacing: -.025em; }
.course-detail-modern .course-detail-benefit-card {
    height: 100%;
    padding: 25px;
    border: 1px solid var(--course-line);
    border-radius: 17px;
    background: #f9fafc;
}
.course-detail-modern .course-detail-benefit-card h3 { margin-bottom: 18px !important; color: var(--course-ink); font-size: 19px; }
.course-detail-modern .course-detail-benefit-card p { position: relative; margin: 0 0 12px; padding-left: 30px; color: #59657a; font-size: 12px; line-height: 1.6; }
.course-detail-modern .course-detail-benefit-card p:last-child { margin-bottom: 0; }
.course-detail-modern .course-detail-benefit-card p > i {
    position: absolute; left: 0; top: 1px; width: 20px; height: 20px; display: grid; place-items: center;
    border-radius: 50%; color: #25875a; background: #e5f7ee; font-size: 8px;
}
.course-detail-modern .course-content-accordion { margin-top: 46px; }
.course-detail-modern .course-content-accordion > h3 { margin-bottom: 20px; color: var(--course-ink); font-size: 25px; letter-spacing: -.035em; }
.course-detail-modern .course-content-accordion .faq__area { display: grid; gap: 10px; margin-top: 0 !important; }
.course-detail-modern .course-content-accordion .faq__area-item { overflow: hidden; margin: 0 !important; border: 1px solid var(--course-line); border-radius: 14px; background: #fff; }
.course-detail-modern .course-content-accordion h6.icon.page {
    min-height: 62px;
    margin: 0;
    padding: 15px 55px 15px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--course-ink);
    background: #f8faff !important;
    font-size: 13px;
}
.course-detail-modern .course-content-accordion h6.icon.page small { margin-left: auto; padding-left: 15px; color: #7b879a !important; font-size: 9px; white-space: nowrap; }
.course-detail-modern .course-content-accordion .faq__area-item-body { border: 0 !important; background: #fff; }
.course-detail-modern .lesson-item { min-height: 44px; margin: 0 !important; padding: 10px 12px; color: #586478; font-size: 11px; }
.course-detail-modern .lesson-item + .lesson-item { border-top: 1px solid #edf0f5; }
.course-detail-modern .lesson-item:hover { padding-left: 16px; background: #f7f9fd; }

.course-detail-modern .course-detail-sidebar { top: 96px !important; z-index: 10; }
.course-detail-modern .course-detail-sidebar .all__sidebar-item {
    overflow: hidden;
    border: 1px solid var(--course-line) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 22px 65px rgba(15,23,42,.08);
}
.course-detail-modern .sidebar-pricing { padding: 30px 28px 25px; border-bottom: 1px solid var(--course-line); background: linear-gradient(145deg,#0b1530,#15244a); }
.course-detail-modern .sidebar-pricing .current-price { margin: 0 0 6px; color: #fff; font-size: 34px; letter-spacing: -.04em; }
.course-detail-modern .sidebar-pricing .old-price { color: rgba(255,255,255,.55); font-size: 12px; }
.course-detail-modern .sidebar-pricing .badge { padding: 6px 8px; border-radius: 7px; font-size: 8px; }
.course-detail-modern .btn-enroll-trending {
    min-height: 52px;
    margin-bottom: 27px !important;
    border-radius: 12px;
    background: linear-gradient(135deg,#ff6432,#ff8054);
    box-shadow: 0 14px 28px rgba(255,100,50,.23);
    font-size: 12px;
}
.course-detail-modern .btn-enroll-trending:hover { background: linear-gradient(135deg,#ed5426,#ff7041); box-shadow: 0 18px 34px rgba(255,100,50,.3); }
.course-detail-modern .sidebar-section-title { margin-bottom: 18px !important; color: var(--course-ink); font-size: 18px; text-align: left !important; }
.course-detail-modern .trending-info-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.course-detail-modern .trending-info-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    align-items: center;
    column-gap: 10px;
    padding: 12px;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    background: #fafbfe;
    text-align: left;
}
.course-detail-modern .trending-info-item .icon-wrap {
    grid-row: 1/3; width: 34px; height: 34px; display: grid; place-items: center; margin: 0;
    border-radius: 10px; color: #315fe7; background: #edf2ff; font-size: 13px;
}
.course-detail-modern .trending-info-item h6 { margin: 0; color: #667085; font-size: 9px; font-weight: 700; }
.course-detail-modern .trending-info-item span { overflow-wrap: anywhere; color: var(--course-ink); font-size: 10px; font-weight: 750; }
.course-detail-modern .course-related-card { padding: 23px !important; }
.course-detail-modern .course-related-card > h4 { margin-bottom: 17px; color: var(--course-ink); font-size: 18px; }
.course-detail-modern .course-related-card .related-list > a { gap: 12px; margin-bottom: 0 !important; padding: 11px 0; border-top: 1px solid #edf0f5; }
.course-detail-modern .course-related-card .related-list > a:first-child { border-top: 0; }
.course-detail-modern .course-related-card img { flex: 0 0 72px; width: 72px; height: 54px; margin: 0 !important; object-fit: cover; border-radius: 10px !important; }
.course-detail-modern .course-related-card h6 { display: -webkit-box; overflow: hidden; color: var(--course-ink) !important; font-size: 11px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.course-detail-modern .course-related-card span { display: block; margin-top: 5px; color: #315fe7 !important; font-size: 9px; }

.dark-mode .course-detail-modern { --course-ink: #f4f7ff; --course-copy: #a6b0c3; --course-line: rgba(255,255,255,.1); --course-surface: #080f21; }
.dark-mode .course-detail-modern .course-detail-body { background: var(--course-surface); }
.dark-mode .course-detail-modern .course-detail-content,
.dark-mode .course-detail-modern .course-detail-sidebar .all__sidebar-item,
.dark-mode .course-detail-modern .course-content-accordion .faq__area-item-body { background: #10192e !important; }
.dark-mode .course-detail-modern .course-detail-benefit-card,
.dark-mode .course-detail-modern .course-content-accordion h6.icon.page,
.dark-mode .course-detail-modern .trending-info-item { background: #0c1529 !important; }
.dark-mode .course-detail-modern .course-detail-benefit-card p,
.dark-mode .course-detail-modern .lesson-item { color: #a6b0c3; }

@media (max-width: 1199px) {
    .course-detail-modern .course-detail-content { padding: 32px; }
    .course-detail-modern .trending-info-list { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    .course-detail-modern .course-detail-sidebar { position: static !important; }
    .course-detail-modern .trending-info-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .course-detail-modern .course-detail-hero { min-height: 300px !important; height: 300px; }
    .course-detail-modern .course-detail-hero .page__banner-content h1 { font-size: 36px; }
    .course-detail-modern .course-detail-body { padding: 56px 0 68px !important; }
    .course-detail-modern .course-detail-content { padding: 22px 18px; border-radius: 18px; }
    .course-detail-modern .project__single-area-content > h2 { font-size: 31px; }
    .course-detail-modern .course-content-accordion h6.icon.page { align-items: flex-start !important; min-height: 68px; }
}
@media (max-width: 480px) {
    .course-detail-modern .trending-info-list { grid-template-columns: 1fr; }
}