/* ==========================================================================
   COURSE DETAILS PAGE
   ========================================================================== */

.course-details-page {

    position:relative;

    min-height:calc(100vh - 74px);

    overflow:hidden;

    background:radial-gradient(
            circle at 75% 0%,
            rgba(var(--t-cyan-rgb),.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 65%,
            rgba(59, 130, 246, .05),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--t-soft) 0%,
            var(--t-bg) 75%,
            var(--t-bg) 100%
        );

    color:var(--t-text2);
}

html[lang="en"]
.course-details-page {

    font-family:ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
}

html[lang="ar"]
.course-details-page {

    font-family:Arial,
        Helvetica,
        sans-serif;
}

/* ==========================================================================
   Background Grid
   ========================================================================== */

.course-details-page::before {

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    opacity:.30;

    pointer-events:none;

    background-image:linear-gradient(
            rgba(var(--t-line-rgb),.28) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(var(--t-line-rgb),.28) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    animation:courseGridMove
        22s
        linear
        infinite;
}

@keyframes courseGridMove {

    from {
        background-position:0 0;
    }

    to {
        background-position:45px 45px;
    }
}

/* ==========================================================================
   General Shell
   ========================================================================== */

.course-shell {

    position:relative;

    z-index:2;

    width:100%;

    max-width:1320px;

    margin:0 auto;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.ct-course-hero {

    position:relative;

    z-index:2;

    padding:70px 20px
        60px;

    border-bottom:1px solid
        rgba(var(--t-line-rgb),.7);
}

.ct-course-hero-grid {

    display:grid;

    grid-template-columns:minmax(0, 1fr)
        390px;

    gap:45px;

    align-items:center;
}

/* ==========================================================================
   Hero Meta
   ========================================================================== */

.course-top-meta {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:var(--t-muted);

    font-size:11px;
}

.course-category-badge {

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 10px;

    border:1px solid
        rgba(var(--t-cyan-rgb),.20);

    border-radius:999px;

    background:rgba(var(--t-cyan-rgb),.04);

    color:var(--t-cyan);

    font-size:9px;

    font-weight:900;

    letter-spacing:.8px;
}

.course-rating {

    color:var(--t-yellow);

    font-weight:800;
}

/* ==========================================================================
   Hero Title
   ========================================================================== */

.ct-course-hero h1 {

    max-width:850px;

    margin:0;

    color:var(--t-heading);

    font-size:clamp(
            36px,
            6vw,
            62px
        );

    line-height:1.08;

    font-weight:900;

    letter-spacing:-1.5px;
}

html[dir="rtl"]
.ct-course-hero h1 {

    letter-spacing:0;
}

.course-lead {

    max-width:850px;

    margin:24px 0 0;

    color:var(--t-muted);

    font-size:15px;

    line-height:2;
}

.course-author-meta {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:23px;

    color:var(--t-muted2);

    font-size:11px;

    line-height:1.8;
}

.course-author-meta b {

    color:var(--t-text3);
}

/* ==========================================================================
   Purchase Card
   ========================================================================== */

.purchase-card {

    position:relative;

    overflow:hidden;

    border:1px solid
        rgba(var(--t-line2-rgb),.68);

    border-radius:18px;

    background:linear-gradient(
            145deg,
            rgba(var(--t-soft-rgb),.96),
            rgba(var(--t-bg-rgb),.98)
        );

    box-shadow:0 30px 75px
        rgba(var(--t-shadow-rgb),.34);

    animation:courseFadeUp
        .7s
        ease
        both;
}

.purchase-card::before {

    content:"";

    position:absolute;

    left:0;

    top:0;

    z-index:3;

    width:100%;

    height:2px;

    background:linear-gradient(
            90deg,
            transparent,
            var(--t-cyan),
            transparent
        );
}

.purchase-image {

    position:relative;

    overflow:hidden;

    aspect-ratio:16 / 9;

    background:var(--t-bg);
}

.purchase-image img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;
}

.purchase-sale {

    position:absolute;

    top:12px;

    right:12px;

    z-index:3;

    padding:6px 9px;

    border-radius:7px;

    background:rgba(239,68,68,.16);

    color:var(--t-red2);

    font-size:9px;

    font-weight:900;
}

html[dir="rtl"]
.purchase-sale {

    right:auto;

    left:12px;
}

.purchase-body {

    padding:24px;
}

.purchase-price {

    color:var(--t-heading);

    font-size:31px;

    font-weight:900;
}

.purchase-price.free {

    color:var(--t-green);
}

.old-price {

    margin-top:6px;

    color:var(--t-muted2);

    font-size:11px;

    text-decoration:line-through;
}

.saving-badge {

    display:inline-flex;

    margin-top:9px;

    padding:6px 8px;

    border:1px solid
        rgba(var(--t-green2-rgb),.22);

    border-radius:6px;

    background:rgba(var(--t-green2-rgb),.055);

    color:var(--t-green);

    font-size:9px;

    font-weight:900;
}

/* ==========================================================================
   Enrollment Button
   ========================================================================== */

.purchase-action {

    display:flex;

    width:100%;

    min-height:52px;

    align-items:center;

    justify-content:center;

    margin-top:21px;

    padding:0 18px;

    border:1px solid
        rgba(var(--t-cyan-rgb),.24);

    border-radius:9px;

    background:linear-gradient(
            135deg,
            var(--t-cyan),
            var(--t-sky)
        );

    color:var(--t-on-accent);

    text-decoration:none;

    font-size:11px;

    font-weight:900;

    transition:all .22s ease;

    box-shadow:0 10px 30px
        rgba(var(--t-cyan-rgb),.12);
}

.purchase-action:hover {

    transform:translateY(-2px);

    box-shadow:0 15px 36px
        rgba(var(--t-cyan-rgb),.21);
}

/* ==========================================================================
   Main Content
   ========================================================================== */

.ct-course-content {

    position:relative;

    z-index:2;

    padding:55px 20px
        100px;
}

.course-layout {

    display:grid;

    grid-template-columns:minmax(0, 1fr)
        300px;

    gap:28px;

    align-items:start;
}

/* ==========================================================================
   Content Card
   ========================================================================== */

.course-info-card {

    position:relative;

    overflow:hidden;

    margin-bottom:22px;

    padding:27px;

    border:1px solid
        rgba(var(--t-line2-rgb),.62);

    border-radius:15px;

    background:linear-gradient(
            145deg,
            rgba(var(--t-soft-rgb),.93),
            rgba(var(--t-bg-rgb),.97)
        );

    box-shadow:0 22px 55px
        rgba(var(--t-shadow-rgb),.19);

    animation:courseFadeUp
        .7s
        ease
        both;
}

.course-info-card::before {

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:1px;

    background:linear-gradient(
            90deg,
            transparent,
            rgba(var(--t-cyan-rgb),.55),
            transparent
        );
}

.course-info-card h2 {

    margin:0 0
        19px;

    color:var(--t-heading);

    font-size:21px;

    font-weight:900;
}

.course-info-text {

    color:var(--t-muted);

    font-size:12px;

    line-height:2;
}

/* ==========================================================================
   Preview
   ========================================================================== */

.preview-video {

    overflow:hidden;

    margin-top:15px;

    border:1px solid
        var(--t-line);

    border-radius:11px;

    background:#000;
}

.preview-video video {

    display:block;

    width:100%;

    max-height:520px;

    background:#000;
}

.preview-title {

    margin-top:17px;

    color:var(--t-text3);

    font-size:14px;
}

/* ==========================================================================
   Curriculum
   ========================================================================== */

.curriculum-item {

    overflow:hidden;

    margin-bottom:10px;

    border:1px solid
        var(--t-line);

    border-radius:10px;

    background:rgba(var(--t-bg-rgb),.50);
}

.curriculum-item summary {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:17px 18px;

    cursor:pointer;

    color:var(--t-heading);

    font-size:11px;

    list-style:none;

    transition:background .2s ease;
}

.curriculum-item summary::-webkit-details-marker {

    display:none;
}

.curriculum-item summary:hover {

    background:rgba(var(--t-cyan-rgb),.025);
}

.curriculum-count {

    color:var(--t-muted2);

    font-size:9px;

    font-weight:normal;
}

.curriculum-lessons {

    border-top:1px solid
        var(--t-line);
}

.curriculum-lesson {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:13px 18px;

    border-bottom:1px solid
        rgba(var(--t-line-rgb),.65);

    color:var(--t-muted);

    font-size:10px;
}

.curriculum-lesson:last-child {

    border-bottom:0;
}

.lesson-preview-icon {

    color:var(--t-green);
}

.lesson-locked-icon {

    color:var(--t-muted2);
}

.lesson-duration {

    flex-shrink:0;

    color:var(--t-muted2);

    font-size:9px;
}

.lesson-preview-link {

    margin-inline-start:8px;

    color:var(--t-cyan);

    text-decoration:none;

    font-weight:800;
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.review-row {

    padding:17px 0;

    border-bottom:1px solid
        var(--t-line);
}

.review-row:last-child {

    border-bottom:0;
}

.review-head {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;
}

.review-user {

    color:var(--t-heading);

    font-size:11px;

    font-weight:900;
}

.review-stars {

    color:var(--t-yellow);

    font-size:10px;
}

.review-comment {

    margin:9px 0 0;

    color:var(--t-muted);

    font-size:11px;

    line-height:1.8;
}

/* ==========================================================================
   Sidebar Info Card
   ========================================================================== */

.course-sidebar-card {

    position:sticky;

    top:100px;

    padding:23px;

    border:1px solid
        rgba(var(--t-line2-rgb),.62);

    border-radius:15px;

    background:linear-gradient(
            145deg,
            rgba(var(--t-soft-rgb),.94),
            rgba(var(--t-bg-rgb),.98)
        );

    box-shadow:0 22px 55px
        rgba(var(--t-shadow-rgb),.20);
}

.course-sidebar-card h3 {

    margin:0 0
        18px;

    color:var(--t-heading);

    font-size:15px;

    font-weight:900;
}

.course-includes {

    display:flex;

    flex-direction:column;

    gap:4px;
}

.include-item {

    display:flex;

    align-items:center;

    gap:11px;

    padding:11px 0;

    border-bottom:1px solid
        var(--t-line);

    color:var(--t-muted);

    font-size:10px;

    line-height:1.6;
}

.include-item:last-child {

    border-bottom:0;
}

.include-icon {

    width:25px;

    flex-shrink:0;

    color:var(--t-cyan);

    text-align:center;
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes courseFadeUp {

    from {

        opacity:0;

        transform:translateY(16px);
    }

    to {

        opacity:1;

        transform:translateY(0);
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1050px) {

    .ct-course-hero-grid {

        grid-template-columns:minmax(0, 1fr)
            340px;
    }

    .course-layout {

        grid-template-columns:1fr;
    }

    .course-sidebar-card {

        position:static;
    }
}

@media (max-width: 820px) {

    .ct-course-hero {

        padding:45px 15px
            40px;
    }

    .ct-course-hero-grid {

        grid-template-columns:1fr;
    }

    .purchase-card {

        max-width:520px;
    }

    .ct-course-content {

        padding:35px 15px
            70px;
    }
}

@media (max-width: 560px) {

    .ct-course-hero h1 {

        font-size:37px;
    }

    .course-info-card {

        padding:19px;
    }

    .curriculum-item summary,
    .curriculum-lesson {

        align-items:flex-start;

        flex-direction:column;

        gap:8px;
    }

    .review-head {

        align-items:flex-start;

        flex-direction:column;
    }
}