/* ==========================================================================
   COURSES PAGE
   ========================================================================== */

.courses-page {

    position:relative;

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

    overflow:hidden;

    padding:55px 20px 95px;

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

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


html[lang="en"]
.courses-page {

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


html[lang="ar"]
.courses-page {

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


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

.courses-page::before {

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    opacity:.30;

    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:coursesGridMove
        22s
        linear
        infinite;
}


@keyframes coursesGridMove {

    from {

        background-position:0 0;
    }

    to {

        background-position:45px 45px;
    }
}


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

.courses-shell {

    position:relative;

    z-index:2;

    width:100%;

    max-width:1320px;

    margin:0 auto;
}


/* ==========================================================================
   Header
   ========================================================================== */

.courses-head {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:25px;

    margin-bottom:30px;

    animation:coursesFadeUp
        .65s
        ease
        both;
}


.courses-kicker {

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:var(--t-cyan);

    font-size:10px;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.courses-kicker-dot {

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--t-cyan);

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


.courses-head h1 {

    margin:0;

    max-width:850px;

    color:var(--t-heading);

    font-size:clamp(
            32px,
            5vw,
            48px
        );

    font-weight:900;

    letter-spacing:-1px;

    line-height:1.15;
}


html[dir="rtl"]
.courses-head h1 {

    letter-spacing:0;
}


.courses-head p {

    max-width:760px;

    margin:12px 0 0;

    color:var(--t-muted2);

    font-size:13px;

    line-height:1.9;
}


/* ==========================================================================
   Results Badge
   ========================================================================== */

.courses-count {

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 13px;

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

    border-radius:999px;

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

    color:var(--t-cyan);

    font-size:10px;

    font-weight:900;
}


/* ==========================================================================
   Filters
   ========================================================================== */

.courses-filters {

    position:relative;

    overflow:hidden;

    padding:20px;

    margin-bottom:30px;

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

    border-radius:15px;

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

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

    animation:coursesFadeUp
        .7s
        .05s
        ease
        both;
}


.courses-filters::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

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


.filter-grid {

    display:grid;

    grid-template-columns:1.5fr
        repeat(
            4,
            minmax(130px, 1fr)
        )
        auto;

    gap:11px;

    align-items:center;
}


/* ==========================================================================
   Filter Inputs
   ========================================================================== */

.filter-grid input,
.filter-grid select {

    width:100%;

    height:46px;

    padding:0 13px;

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

    border-radius:9px;

    outline:0;

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

    color:var(--t-heading);

    font:inherit;

    font-size:10px;

    transition:border-color .2s ease,
        box-shadow .2s ease;
}


.filter-grid input::placeholder {

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


.filter-grid input:focus,
.filter-grid select:focus {

    border-color:var(--t-cyan);

    box-shadow:0 0 0 4px
        rgba(var(--t-cyan-rgb),.055);
}


.filter-submit {

    height:46px;

    padding:0 20px;

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

    border-radius:9px;

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

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

    cursor:pointer;

    font:inherit;

    font-size:10px;

    font-weight:900;

    transition:all .2s ease;
}


.filter-submit:hover {

    transform:translateY(-2px);

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


/* ==========================================================================
   Course Grid
   ========================================================================== */

.cyber-course-grid {

    display:grid;

    grid-template-columns:repeat(
            3,
            minmax(0, 1fr)
        );

    gap:22px;
}


/* ==========================================================================
   Course Card
   ========================================================================== */

.cyber-course-card {

    position:relative;

    overflow:hidden;

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

    border-radius:16px;

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

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

    transition:transform .27s ease,
        border-color .27s ease,
        box-shadow .27s ease;

    animation:coursesFadeUp
        .7s
        ease
        both;
}


.cyber-course-card:hover {

    transform:translateY(-7px);

    border-color:rgba(var(--t-cyan-rgb),.30);

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


.cyber-course-card::before {

    content:"";

    position:absolute;

    left:0;

    top:0;

    z-index:4;

    width:100%;

    height:2px;

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

    opacity:0;

    transition:opacity .25s ease;
}


.cyber-course-card:hover::before {

    opacity:1;
}


/* ==========================================================================
   Thumbnail
   ========================================================================== */

.course-thumb {

    position:relative;

    display:block;

    overflow:hidden;

    aspect-ratio:16 / 9;

    background:var(--t-bg);

    text-decoration:none;
}


.course-thumb img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .4s ease,
        filter .4s ease;
}


.cyber-course-card:hover
.course-thumb img {

    transform:scale(1.045);

    filter:brightness(.87);
}


.course-thumb::after {

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
            to top,
            rgba(var(--t-bg-rgb),.55),
            transparent 50%
        );

    pointer-events:none;
}


/* ==========================================================================
   Placeholder
   ========================================================================== */

.thumb-placeholder {

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:radial-gradient(
            circle,
            var(--t-soft),
            var(--t-bg)
        );

    color:var(--t-cyan);

    font-size:35px;

    font-weight:900;

    letter-spacing:4px;
}


/* ==========================================================================
   Sale Badge
   ========================================================================== */

.sale-badge {

    position:absolute;

    top:12px;

    right:12px;

    z-index:3;

    padding:6px 9px;

    border:1px solid
        rgba(239, 68, 68, .30);

    border-radius:7px;

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

    color:var(--t-red2);

    font-size:9px;

    font-weight:900;
}


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

    right:auto;

    left:12px;
}


/* ==========================================================================
   Card Body
   ========================================================================== */

.course-card-content {

    padding:20px;
}


.course-category-row {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:13px;
}


.course-category {

    display:inline-flex;

    padding:5px 8px;

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

    border-radius:999px;

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

    color:var(--t-cyan);

    font-size:8px;

    font-weight:900;

    letter-spacing:.7px;

    text-transform:uppercase;
}


.course-level {

    color:var(--t-muted2);

    font-size:9px;
}


.course-title {

    min-height:52px;

    margin:0;

    font-size:17px;

    font-weight:900;

    line-height:1.45;
}


.course-title a {

    color:var(--t-heading);

    text-decoration:none;

    transition:color .2s ease;
}


.course-title a:hover {

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


/* ==========================================================================
   Instructor + Rating
   ========================================================================== */

.course-submeta {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:12px;

    color:var(--t-muted2);

    font-size:9px;

    line-height:1.6;
}


.course-rating {

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


/* ==========================================================================
   Footer
   ========================================================================== */

.course-foot {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:15px;

    margin-top:20px;

    padding-top:17px;

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


.course-price {

    color:var(--t-heading);

    font-size:18px;

    font-weight:900;
}


.course-price-block {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:4px;
}


.course-price-label {

    color:var(--t-muted);

    font-size:8px;

    font-weight:800;
}


.course-price-row {

    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:7px;
}


.course-price.free {

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


.strike-price {

    margin-top:0;

    color:var(--t-muted2);

    font-size:11px;

    text-decoration:line-through;
}


.course-old-price {

    display:inline-flex;

    align-items:baseline;

    gap:4px;

    color:var(--t-muted2);

    font-size:8px;

    font-weight:800;
}


.course-saving {

    display:inline-flex;

    align-items:center;

    width:fit-content;

    margin-top:2px;

    padding:4px 7px;

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

    border-radius:6px;

    background:rgba(var(--t-green-rgb),.08);

    color:var(--t-green);

    font-size:9px;

    font-weight:900;
}


.course-stats {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:5px;

    max-width:55%;

    color:var(--t-muted2);

    text-align:right;

    font-size:9px;

    line-height:1.6;
}


.course-duration {

    color:var(--t-muted);

    font-weight:700;
}


.course-duration-icon {

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


html[dir="rtl"]
.course-stats {

    text-align:left;

    justify-content:flex-start;
}


/* ==========================================================================
   Empty
   ========================================================================== */

.courses-empty {

    padding:60px 25px;

    border:1px dashed
        var(--t-line2);

    border-radius:15px;

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

    text-align:center;

    color:var(--t-muted2);

    font-size:12px;
}


.courses-empty-icon {

    margin-bottom:12px;

    color:var(--t-cyan);

    font-size:30px;
}


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

@keyframes coursesFadeUp {

    from {

        opacity:0;

        transform:translateY(16px);
    }

    to {

        opacity:1;

        transform:translateY(0);
    }
}


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

@media (max-width: 1150px) {

    .filter-grid {

        grid-template-columns:repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .cyber-course-grid {

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


@media (max-width: 760px) {

    .courses-page {

        padding:38px 14px
            70px;
    }


    .courses-head {

        align-items:flex-start;

        flex-direction:column;
    }


    .filter-grid {

        grid-template-columns:1fr;
    }


    .cyber-course-grid {

        grid-template-columns:1fr;
    }


    .course-title {

        min-height:auto;
    }


    .course-foot {

        align-items:flex-start;

        flex-direction:column;
    }


    .course-stats {

        max-width:none;

        text-align:inherit;

        justify-content:flex-start;
    }
}