============================================================================
01. ROOT VARIABLES
============================================================================
.course-catalogue-section{

    --primary:#1d4ed8;
    --primary-dark:#1e3a8a;

    --secondary:#6d28d9;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --text:#1f2937;
    --text-light:#6b7280;

    --background:#f8fafc;
    --card:#ffffff;

    --border:#e5e7eb;

    --shadow-sm:
        0 1px 3px rgba(0,0,0,.08);

    --shadow:
        0 6px 24px rgba(15,23,42,.08);

    --shadow-lg:
        0 12px 40px rgba(15,23,42,.12);

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:20px;

    --transition:.25s ease;

    color:var(--text);

    font-family:
        Inter,
        system-ui,
        sans-serif;

}
============================================================================
02. GLOBAL RESET
============================================================================
.course-catalogue-section *,
.course-catalogue-section *::before,
.course-catalogue-section *::after{

    box-sizing:border-box;

}

.course-catalogue-section img{

    display:block;
    width:100%;

}

.course-catalogue-section a{

    color:inherit;
    text-decoration:none;

}

.course-catalogue-section button{

    font:inherit;
    cursor:pointer;

}

.course-catalogue-section input,
.course-catalogue-section select{

    font:inherit;

}
============================================================================
03. MARKETPLACE SECTION
============================================================================
.course-catalogue-section .marketplace{

    padding:40px 20px 70px;

    background:#fff;

}
============================================================================
04. CONTAINER
============================================================================
.course-catalogue-section .container{

    width:100%;
    max-width:1600px;

    margin:auto;

}
============================================================================
05. SECTION HEADER
============================================================================
.course-catalogue-section .section-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

    margin-bottom:40px;

}

.course-catalogue-section .section-heading h2{

    margin:0;

    font-size:2.6rem;

    line-height:1.1;

    font-weight:700;

    color:#1b2358;

}

.course-catalogue-section .section-heading p{

    margin-top:10px;

    color:var(--text-light);

    font-size:1rem;

}

.course-catalogue-section .text-link{

    color:#4f46e5;

    font-weight:600;

    transition:var(--transition);

}

.course-catalogue-section .text-link:hover{

    color:#312e81;

}
============================================================================
06. MAIN GRID LAYOUT
============================================================================
.course-catalogue-section .catalogue-layout{

    display:grid;

    grid-template-columns:

        300px

        minmax(0,1fr);

    gap:40px;

    align-items:start;

}





















/* =========================
   MAYOBA MARKETPLACE PREMIUM UI
========================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');


:root{

    --navy:#11194d;
    --purple:#6337e8;
    --purple-dark:#4d26c9;

    --purple-soft:#f1ebff;

    --bg:#faf8fc;
    --white:#ffffff;

    --text:#17182d;
    --muted:#6d7188;

    --border:#ebe6f3;

    --shadow:
    0 15px 40px rgba(17,25,77,.08);

    --shadow-hover:
    0 25px 60px rgba(17,25,77,.15);

    --radius:20px;

}



*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    margin:0;

    background:
    radial-gradient(circle at top left,#f5efff,transparent 35%),
    var(--bg);

    color:var(--text);

    font-family:
    Inter,
    Arial,
    sans-serif;

}



/* CONTAINER */

.container{

    width:min(1240px,92%);

    margin:auto;

}



/* =========================
 HEADER
========================= */


header{

    position:sticky;

    top:0;

    z-index:20;

    background:
    rgba(255,255,255,.85);

    backdrop-filter:blur(14px);

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

}



header nav{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo{

    font-size:26px;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--navy);

}



.logo span{

    color:var(--purple);

}



/* =========================
 TYPOGRAPHY
========================= */


h1,
h2,
h3{

    font-family:
    "Playfair Display",
    serif;

    color:var(--navy);

    letter-spacing:-.5px;

}



h1{

    font-size:clamp(42px,6vw,68px);

    line-height:1;

}



h2{

    font-size:38px;

}



p{

    color:var(--muted);

    line-height:1.7;

}



/* =========================
 BUTTONS
========================= */


.primary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
    135deg,
    var(--purple),
    var(--purple-dark)
    );

    color:white;

    padding:14px 26px;

    border-radius:12px;

    font-weight:700;

    text-decoration:none;

    border:none;

    box-shadow:
    0 12px 25px rgba(99,55,232,.25);

    transition:.25s;

}



.primary-button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 20px 35px rgba(99,55,232,.35);

}



.text-link{

    color:var(--purple);

    font-weight:700;

}



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


.hero{

    padding:
    90px 0 70px;

}



.hero-grid{

    display:grid;

    grid-template-columns:
    1.2fr .8fr;

    gap:60px;

    align-items:center;

}



.eyebrow{

    background:
    var(--purple-soft);

    color:
    var(--purple);

    padding:
    8px 16px;

    border-radius:
    50px;

    font-size:12px;

    font-weight:800;

}



.hero p{

    font-size:18px;

    max-width:650px;

}



/* SEARCH */


.search-panel{

    margin-top:40px;

    background:white;

    padding:8px;

    display:flex;

    border-radius:18px;

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

    box-shadow:var(--shadow);

}



.search-panel input{

    flex:1;

    border:none;

    outline:none;

    padding:16px;

    font-size:15px;

}



/* HERO CARD */


.hero-note{

    background:
    linear-gradient(
    145deg,
    #11194d,
    #20296d
    );

    color:white;

    padding:35px;

    border-radius:25px;

    box-shadow:
    0 25px 60px rgba(17,25,77,.25);

}



.hero-note strong{

    font-family:
    "Playfair Display";

    font-size:26px;

    display:block;

}



.hero-note span{

    color:#d7daf0;

}



/* =========================
 CATEGORY
========================= */


.category-strip{

    padding:50px 0;

}



.category-grid{

    display:grid;

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

    gap:18px;

}



.category-card{

    background:white;

    padding:25px;

    height:130px;

    border-radius:20px;

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

    box-shadow:
    0 8px 25px rgba(0,0,0,.04);

    transition:.25s;

}



.category-card:hover{

    transform:
    translateY(-6px);

    box-shadow:
    var(--shadow-hover);

}



.category-card h3{

    font-family:Inter;

    font-size:15px;

}



.category-card p{

    font-size:13px;

}



/* =========================
 MARKETPLACE
========================= */


.marketplace{

    padding:70px 0;

}



.catalogue-layout{

    display:grid;

    grid-template-columns:
    260px 1fr;

    gap:35px;

}



/* FILTER */


.filter-panel{

    background:white;

    padding:25px;

    border-radius:22px;

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

    box-shadow:var(--shadow);

}



.filter-group{

    margin:25px 0;

}



.filter-group label{

    font-size:13px;

    font-weight:700;

}



.filter-group input,
.filter-group select,
.catalogue-toolbar select{

    width:100%;

    padding:13px;

    border-radius:12px;

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

    background:white;

}



/* =========================
 COURSE CARDS
========================= */


.course-grid{

    display:grid;

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

    gap:25px;

}



.course-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

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

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    transition:.3s;

}



.course-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    var(--shadow-hover);

}



.course-card img{

    height:190px;

    width:100%;

    object-fit:cover;

}



.course-content{

    padding:22px;

}



.course-content h3{

    font-family:Inter;

    font-weight:700;

    font-size:17px;

}



.course-content p{

    font-size:14px;

}



.price{

    font-size:20px;

    font-weight:800;

    color:var(--navy);

}



/* =========================
 PAGINATION
========================= */


.pagination button{

    width:42px;

    height:42px;

    border-radius:12px;

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

    background:white;

    font-weight:600;

    transition:.2s;

}



.pagination button:hover{

    background:var(--purple);

    color:white;

}



/* =========================
 BANNER
========================= */


.editorial-banner{

    margin-top:60px;

    padding:45px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #11194d,
    #30208a
    );

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:
    0 25px 60px rgba(17,25,77,.25);

}



.editorial-banner h2{

    color:white;

}



.editorial-banner p{

    color:#ddd;

}



/* =========================
 RESPONSIVE
========================= */


@media(max-width:1000px){

.hero-grid,
.catalogue-layout{

grid-template-columns:1fr;

}


.category-grid{

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

}


.course-grid{

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

}

}



@media(max-width:600px){


h1{

font-size:42px;

}


.category-grid,
.course-grid{

grid-template-columns:1fr;

}


.editorial-banner{

flex-direction:column;

gap:25px;

text-align:center;

}


}




/* ==========================================================================
07. FILTER SIDEBAR
========================================================================== */

.course-catalogue-section .filter-panel{

    background:#fff;

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

    border-radius:var(--radius);

    padding:24px;

    position:sticky;

    top:100px;

    box-shadow:var(--shadow-sm);

}


.course-catalogue-section .filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:15px;

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

}


.course-catalogue-section .filter-header h3{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#11194d;

}


.course-catalogue-section .filter-reset{

    border:none;

    background:none;

    color:#6337e8;

    font-size:13px;

    font-weight:700;

}





/* ==========================================================================
08. FILTER GROUPS
========================================================================== */


.course-catalogue-section .filter-group{

    padding:18px 0;

    border-bottom:1px solid #f0edf5;

}


.course-catalogue-section .filter-group:last-child{

    border-bottom:none;

}


.course-catalogue-section .filter-group label{

    display:block;

    margin-bottom:10px;

    font-size:13px;

    font-weight:700;

    color:#11194d;

}


.course-catalogue-section .filter-group input,
.course-catalogue-section .filter-group select{


    width:100%;

    height:42px;

    padding:0 12px;

    border-radius:10px;

    border:1px solid #ddd9e8;

    background:white;

    color:#444;

    outline:none;

    transition:.2s ease;

}


.course-catalogue-section .filter-group input:focus,
.course-catalogue-section .filter-group select:focus{

    border-color:#6337e8;

    box-shadow:0 0 0 3px rgba(99,55,232,.12);

}





/* ==========================================================================
09. CATALOGUE CONTENT HEADER
========================================================================== */


.course-catalogue-section .catalogue-content{

    min-width:0;

}


.course-catalogue-section .catalogue-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}


.course-catalogue-section .course-count{

    font-size:14px;

    font-weight:600;

    color:#343858;

}


.course-catalogue-section .catalogue-toolbar select{

    width:160px;

    height:40px;

    border-radius:10px;

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

    background:white;

    padding:0 12px;

}





/* ==========================================================================
10. COURSE GRID
========================================================================== */


.course-catalogue-section .course-grid{

    display:grid;

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

    gap:18px;

}





/* ==========================================================================
11. COURSE CARD
========================================================================== */


.course-catalogue-section .course-card{

    background:#fff;

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

    border-radius:14px;

    overflow:hidden;

    transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.course-catalogue-section .course-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(17,25,77,.12);

}





/* ==========================================================================
12. COURSE IMAGE
========================================================================== */


.course-catalogue-section .course-image{

    position:relative;

    height:150px;

    overflow:hidden;

}


.course-catalogue-section .course-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.course-catalogue-section .availability-badge{

    position:absolute;

    top:10px;

    left:10px;

    background:white;

    color:#16a34a;

    font-size:11px;

    font-weight:700;

    padding:5px 8px;

    border-radius:8px;

}



.course-catalogue-section .wishlist-button{

    position:absolute;

    right:10px;

    top:10px;

    width:30px;

    height:30px;

    border-radius:50%;

    border:1px solid #eee;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

}





/* ==========================================================================
13. COURSE BODY
========================================================================== */


.course-catalogue-section .course-content{

    padding:16px;

}


.course-catalogue-section .course-category{

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    color:#6337e8;

    letter-spacing:.5px;

    margin-bottom:8px;

}



.course-catalogue-section .course-content h3{

    margin:0 0 10px;

    font-family:Inter,sans-serif;

    font-size:15px;

    line-height:1.35;

    font-weight:700;

    color:#11194d;

}



.course-catalogue-section .course-description{

    font-size:12px;

    color:#72768b;

    line-height:1.5;

    height:38px;

    overflow:hidden;

}





/* ==========================================================================
14. COURSE META
========================================================================== */


.course-catalogue-section .course-meta{

    display:flex;

    gap:6px;

    flex-wrap:wrap;

    margin:15px 0;

}


.course-catalogue-section .course-meta span{

    background:#f5f4f9;

    padding:5px 8px;

    border-radius:6px;

    font-size:11px;

    color:#555;

}




/* ==========================================================================
15. COURSE FOOTER
========================================================================== */


.course-catalogue-section .course-footer{

    border-top:1px solid #eee;

    padding-top:12px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.course-catalogue-section .course-price{

    font-size:18px;

    font-weight:800;

    color:#11194d;

}



.course-catalogue-section .course-price.free{

    color:#16a34a;

}


.course-catalogue-section .course-rating{

    font-size:12px;

    color:#73768a;

}



/* ==========================================================================
16. PAGINATION
========================================================================== */

.course-catalogue-section .pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:40px;

    width:100%;

    flex-wrap:wrap;

}


/* ==========================================================================
   ALL PAGINATION BUTTONS
========================================================================== */

.course-catalogue-section .pagination button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:38px;

    min-width:38px;

    height:38px;

    padding:0 10px;

    border-radius:10px;

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

    background:#fff;

    color:#343858;

    font-size:14px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;

}


/* ==========================================================================
   PREVIOUS / NEXT
   Give navigation buttons their own width and breathing room.
========================================================================== */

.course-catalogue-section .pagination button:first-child{

    width:auto;

    min-width:92px;

    padding:0 18px;

    margin-right:12px;

}


.course-catalogue-section .pagination button:last-child{

    width:auto;

    min-width:72px;

    padding:0 18px;

    margin-left:12px;

}


/* ==========================================================================
   HOVER
========================================================================== */

.course-catalogue-section .pagination button:hover:not(:disabled){

    border-color:#6337e8;

    color:#6337e8;

    background:#fff;

}


/* ==========================================================================
   DISABLED PREVIOUS / NEXT
========================================================================== */

.course-catalogue-section .pagination button:disabled{

    opacity:.45;

    cursor:not-allowed;

    background:#f8f7fb;

    color:#777;

}


/* ==========================================================================
   ACTIVE PAGE
========================================================================== */

.course-catalogue-section .pagination button.active{

    background:#11194d;

    color:#fff;

    border-color:#11194d;

}


/* ==========================================================================
   ELLIPSIS
========================================================================== */

.course-catalogue-section .pagination .pagination-ellipsis{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:38px;

    color:#777;

    font-size:16px;

    font-weight:600;

}


/* ==========================================================================
   MOBILE
========================================================================== */

@media(max-width:480px){

    .course-catalogue-section .pagination{

        gap:5px;

        margin-top:30px;

    }


    .course-catalogue-section .pagination button{

        width:34px;

        min-width:34px;

        height:34px;

        padding:0 8px;

        font-size:12px;

    }


    .course-catalogue-section .pagination button:first-child{

        min-width:78px;

        padding:0 12px;

        margin-right:5px;

    }


    .course-catalogue-section .pagination button:last-child{

        min-width:62px;

        padding:0 12px;

        margin-left:5px;

    }


    .course-catalogue-section .pagination .pagination-ellipsis{

        width:24px;

        height:34px;

        font-size:14px;

    }

}



/* ==========================================================================
17. EMPTY STATE
========================================================================== */


.course-catalogue-section .empty-state{

    background:white;

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

    border-radius:var(--radius);

    padding:50px 25px;

    text-align:center;

}


.course-catalogue-section .empty-state h3{

    margin:0 0 10px;

    font-size:20px;

    color:#11194d;

}


.course-catalogue-section .empty-state p{

    color:var(--text-light);

    font-size:14px;

}





/* ==========================================================================
18. LOADING STATE
========================================================================== */


.course-catalogue-section .course-card.loading{

    overflow:hidden;

}



.course-catalogue-section .skeleton{

    background:

    linear-gradient(

        90deg,

        #f3f3f6,

        #ffffff,

        #f3f3f6

    );

    background-size:200% 100%;

    animation:

    skeleton 1.5s infinite;

}



@keyframes skeleton{

    from{

        background-position:200% 0;

    }

    to{

        background-position:-200% 0;

    }

}


.course-catalogue-section .skeleton-image{

    height:150px;

}


.course-catalogue-section .skeleton-line{

    height:12px;

    border-radius:6px;

    margin-bottom:10px;

}





/* ==========================================================================
19. BOTTOM FIXED NAVIGATION COMPATIBILITY
========================================================================== */


.course-catalogue-section{

    padding-bottom:90px;

}



.course-catalogue-section + nav.fixed-bottom,
.course-catalogue-section .mobile-bottom-nav{

    z-index:100;

}





/* ==========================================================================
20. TABLET RESPONSIVE
========================================================================== */


@media(max-width:1200px){


    .course-catalogue-section .catalogue-layout{

        grid-template-columns:

        260px

        minmax(0,1fr);

        gap:25px;

    }



    .course-catalogue-section .course-grid{

        grid-template-columns:

        repeat(2,minmax(0,1fr));

    }



}





@media(max-width:900px){



    .course-catalogue-section .section-heading{

        flex-direction:column;

        align-items:flex-start;

        margin-bottom:30px;

    }



    .course-catalogue-section .section-heading h2{

        font-size:2rem;

    }



    .course-catalogue-section .catalogue-layout{

        grid-template-columns:1fr;

    }



    .course-catalogue-section .filter-panel{

        position:relative;

        top:auto;

    }



    .course-catalogue-section .course-grid{

        grid-template-columns:

        repeat(2,minmax(0,1fr));

    }



}






/* ==========================================================================
21. MOBILE FILTER BUTTON
========================================================================== */


.course-catalogue-section .mobile-filter-button{

    display:none;

    width:100%;

    height:44px;

    margin-bottom:20px;

    border:none;

    background:#11194d;

    color:white;

    border-radius:12px;

    font-weight:700;

}





@media(max-width:768px){


    .course-catalogue-section .marketplace{

        padding:

        25px 15px 70px;

    }



    .course-catalogue-section .section-heading{

        gap:15px;

    }



    .course-catalogue-section .section-heading h2{

        font-size:28px;

    }



    .course-catalogue-section .section-heading p{

        font-size:14px;

    }



    .course-catalogue-section .mobile-filter-button{

        display:block;

    }



    .course-catalogue-section .filter-panel{

        display:none;

    }



    .course-catalogue-section .filter-panel.active{

        display:block;

        margin-bottom:25px;

    }



    .course-catalogue-section .catalogue-toolbar{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }



    .course-catalogue-section .catalogue-toolbar select{

        width:100%;

    }



    .course-catalogue-section .course-grid{

        grid-template-columns:1fr;

        gap:20px;

    }



    .course-catalogue-section .course-image{

        height:180px;

    }



}






/* ==========================================================================
22. SMALL MOBILE
========================================================================== */


@media(max-width:480px){


    .course-catalogue-section .container{

        width:94%;

    }



    .course-catalogue-section .section-heading h2{

        font-size:24px;

    }



    .course-catalogue-section .course-content{

        padding:14px;

    }



    .course-catalogue-section .course-content h3{

        font-size:14px;

    }



    .course-catalogue-section .course-description{

        font-size:12px;

    }



    .course-catalogue-section .pagination{

        gap:5px;

    }



    .course-catalogue-section .pagination button{

        width:34px;

        height:34px;

        font-size:12px;

    }


}





/* ==========================================================================
23. ACCESSIBILITY STATES
========================================================================== */


.course-catalogue-section button:focus-visible,
.course-catalogue-section input:focus-visible,
.course-catalogue-section select:focus-visible{


    outline:

    3px solid rgba(99,55,232,.25);

    outline-offset:2px;


}





/* ==========================================================================
24. SMOOTH ANIMATION CONTROL
========================================================================== */


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


    .course-catalogue-section *,
    .course-catalogue-section *::before,
    .course-catalogue-section *::after{


        animation:none!important;

        transition:none!important;


    }


}






/* ==========================================================================
25. FINAL SECTION ISOLATION SAFETY
========================================================================== */


.course-catalogue-section h1,
.course-catalogue-section h2,
.course-catalogue-section h3,
.course-catalogue-section h4{


    margin-top:0;

}



.course-catalogue-section ul,
.course-catalogue-section ol{


    margin:0;

    padding:0;

    list-style:none;

}



.course-catalogue-section table{

    border-collapse:collapse;

}



.course-catalogue-section svg{

    width:18px;

    height:18px;

}



.course-catalogue-section{

    isolation:isolate;

    overflow:hidden;

}

/* ==========================================================
   COURSE CATALOGUE CARD ACTION BUTTONS
   MATCHES THE EXISTING JS EXACTLY
   ========================================================== */

.course-catalogue-section .course-catalogue-card-actions {

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;

    margin-top: 18px !important;
    padding: 0 !important;

}


/* ==========================================================
   BASE BUTTON
   ========================================================== */

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-view,

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-enroll {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 1 1 0 !important;

    min-width: 0 !important;
    min-height: 42px !important;

    padding: 11px 18px !important;

    margin: 0 !important;

    border-radius: 7px !important;

    border: 1px solid transparent !important;

    font-family: inherit !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    text-align: center !important;

    text-decoration: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;

}


/* ==========================================================
   VIEW
   DEEP ORANGE
   ========================================================== */

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-view,

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-view:link,

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-view:visited {

    background-color: #c2410c !important;

    border-color: #c2410c !important;

    color: #ffffff !important;

}


/* VIEW HOVER */

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-view:hover {

    background-color: #9a3412 !important;

    border-color: #9a3412 !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 12px rgba(194, 65, 12, .25) !important;

}


/* ==========================================================
   ENROLL
   NAVY GREEN
   ========================================================== */

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-enroll,

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-enroll:link,

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-enroll:visited {

    background-color: #064e3b !important;

    border-color: #064e3b !important;

    color: #ffffff !important;

}


/* ENROLL HOVER */

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-enroll:hover {

    background-color: #047857 !important;

    border-color: #047857 !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 12px rgba(6, 78, 59, .25) !important;

}


/* ==========================================================
   ACTIVE
   ========================================================== */

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-view:active,

.course-catalogue-section .course-catalogue-card-actions
.course-catalogue-card-enroll:active {

    transform: translateY(0) !important;

    box-shadow: none !important;

}


/* ==========================================================
   FOCUS
   ========================================================== */

.course-catalogue-section .course-catalogue-card-actions
a:focus-visible {

    outline: 3px solid rgba(99, 55, 232, .25) !important;

    outline-offset: 2px !important;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .course-catalogue-section .course-catalogue-card-actions {

        gap: 8px !important;

    }


    .course-catalogue-section .course-catalogue-card-actions
    .course-catalogue-card-view,

    .course-catalogue-section .course-catalogue-card-actions
    .course-catalogue-card-enroll {

        min-height: 40px !important;

        padding: 10px 12px !important;

        font-size: 13px !important;

    }

}



/* ==========================================================
   COURSE IMAGE
   ========================================================== */

.course-image {
    position: relative;
    overflow: hidden;
}


/* ==========================================================
   ENROLLED FLAG
   ========================================================== */

.course-image .course-image-enrolled-flag {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border-radius: 6px;

    background: #198754;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

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

    pointer-events: none;
}


/* ==========================================================
   COURSE IMAGE
   ========================================================== */

.course-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   WISHLIST BUTTON
   ========================================================== */

.course-image .wishlist {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 6;
}


/* ==========================================================
   COURSE PROGRESS
   ========================================================== */

.course-progress {
    width: 100%;

    margin-top: 14px;
}


/* ==========================================================
   PROGRESS LABEL
   ========================================================== */

.course-progress-label {
    margin-bottom: 6px;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;

    color: #555555;
}


/* ==========================================================
   PROGRESS BAR
   ========================================================== */

.course-progress-bar {
    position: relative;

    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #e9ecef;
}


/* ==========================================================
   PROGRESS FILL
   ========================================================== */

.course-progress-fill {
    height: 100%;

    min-width: 0;

    border-radius: inherit;

    background: #198754;

    transition:
        width 0.3s ease;
}


/* ==========================================================
   PROGRESS PERCENTAGE
   ========================================================== */

.course-progress > span {
    display: block;

    margin-top: 5px;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.3;

    color: #666666;

    text-align: right;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .course-image .course-image-enrolled-flag {
        top: 9px;
        left: 9px;

        padding: 6px 9px;

        font-size: 11px;
    }


    .course-progress {
        margin-top: 12px;
    }


    .course-progress-label {
        font-size: 11px;
    }


    .course-progress-bar {
        height: 6px;
    }


    .course-progress > span {
        font-size: 10px;
    }

}