:root{
    --teal:#159a9c;
    --teal2:#087f81;
    --green:#4fae7b;
    --orange:#e87524;
    --dark:#102b35;
    --text:#40545b;
    --muted:#71838a;
    --bg:#f7faf9;
    --white:#fff;
    --border:#e3ece9;
    --shadow:0 18px 50px rgba(16,43,53,.08);
}

.container{width:min(1180px,calc(100% - 40px));margin:auto}

.hero{
    padding:70px 0 45px;
    background:
        radial-gradient(circle at 85% 20%,rgba(21,154,156,.12),transparent 30%),
        radial-gradient(circle at 10% 80%,rgba(232,117,36,.08),transparent 28%);
}
.hero-content{text-align:center;max-width:780px;margin:auto}
.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#e9f7f5;
    color:var(--teal2);
    border:1px solid #d5efeb;
    padding:7px 13px;
    border-radius:30px;
    font-size:12px;
    font-weight:800;
    margin-bottom:18px;
}
.hero h1{
    font-size:clamp(34px,5vw,58px);
    line-height:1.08;
    letter-spacing:-2px;
    margin-bottom:18px;
}
.hero h1 span{color:var(--teal)}
.hero p{color:var(--muted);max-width:650px;margin:auto;font-size:16px}

.search-area{
    margin-top:35px;
    background:white;
    border:1px solid var(--border);
    border-radius:18px;
    padding:14px;
    box-shadow:var(--shadow);
}
.search-box{display:flex;align-items:center;gap:12px;padding:3px 7px}
.search-box i{color:var(--teal);font-size:18px}
.search-box input{
    border:0;
    outline:0;
    flex:1;
    font-size:15px;
    color:var(--dark);
    background:transparent;
}
.search-box button{
    border:0;
    background:var(--teal);
    color:white;
    padding:12px 22px;
    border-radius:10px;
    font-weight:700;
}

.filters{padding:30px 0 15px}
.filter-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}
.categories{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{
    border:1px solid var(--border);
    background:white;
    color:var(--text);
    padding:9px 15px;
    border-radius:9px;
    font-size:12px;
    font-weight:700;
}
.filter-btn.active,.filter-btn:hover{
    background:var(--teal);
    border-color:var(--teal);
    color:white;
}
.sort{display:flex;align-items:center;gap:8px}
.sort select{
    border:1px solid var(--border);
    background:white;
    padding:10px 13px;
    border-radius:9px;
    outline:none;
    color:var(--text);
}

.courses{padding:20px 0 80px}
.course-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.course-card{
    background:white;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    transition:.25s ease;
    position:relative;
}
.course-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}
.course-image{
    height:185px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.course-image:before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.13);
    top:-80px;
    right:-45px;
}
.course-image i{position:relative;font-size:58px;color:white}
.english{background:linear-gradient(135deg,#159a9c,#087f81)}
.french{background:linear-gradient(135deg,#4fae7b,#238d5a)}
.german{background:linear-gradient(135deg,#e87524,#c4530c)}
.spanish{background:linear-gradient(135deg,#d69b22,#b97900)}
.japanese{background:linear-gradient(135deg,#e65f62,#b9343a)}
.business{background:linear-gradient(135deg,#304d5b,#102b35)}

.course-level{
    position:absolute;
    top:14px;
    left:14px;
    background:rgba(255,255,255,.95);
    padding:6px 10px;
    border-radius:8px;
    font-size:11px;
    font-weight:800;
    color:var(--dark);
}
.course-content{padding:20px}
.course-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
.course-language{
    color:var(--teal);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}
.rating{font-size:12px;font-weight:700;color:#8b6a18}
.rating i{color:#e7ad24}
.course-title{font-size:18px;line-height:1.3;margin-bottom:9px}
.course-desc{color:var(--muted);font-size:12px;min-height:40px}
.course-meta{
    display:flex;
    gap:15px;
    margin:17px 0;
    padding-top:14px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:11px;
}
.course-meta span{display:flex;gap:5px;align-items:center}
.course-meta i{color:var(--teal)}
.course-footer{display:flex;justify-content:space-between;align-items:center}
.price{font-size:19px;font-weight:800}
.price small{color:var(--muted);font-size:10px;font-weight:500}
.view-btn{
    border:0;
    background:#edf8f7;
    color:var(--teal2);
    padding:9px 13px;
    border-radius:9px;
    font-size:11px;
    font-weight:800;
}
.view-btn:hover{background:var(--teal);color:white}

.empty{display:none;text-align:center;padding:60px 20px;color:var(--muted)}
.empty i{font-size:42px;margin-bottom:15px;color:#cbd8d5}

.modal{
    position:fixed;
    inset:0;
    background:rgba(16,43,53,.65);
    z-index:3000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.modal.show{display:flex}
.modal-box{
    background:white;
    width:min(700px,100%);
    max-height:90vh;
    overflow:auto;
    border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.2);
}
.modal-head{
    padding:28px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    border-bottom:1px solid var(--border);
}
.modal-icon{
    width:58px;
    height:58px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:white;
    background:var(--teal);
    font-size:25px;
}
.close{
    border:0;
    background:#f1f5f4;
    width:38px;
    height:38px;
    border-radius:50%;
    color:var(--text);
}
.modal-body{padding:28px}
.modal-body h2{margin-bottom:10px}
.modal-body p{color:var(--muted);font-size:14px}
.modal-details{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:22px 0;
}
.detail{padding:15px;background:var(--bg);border-radius:12px}
.detail strong{display:block;font-size:14px}
.detail small{color:var(--muted)}
.modal-actions{display:flex;gap:10px}
.modal-actions button{flex:1}

@media(max-width:900px){
    .course-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
    .container{width:min(100% - 24px,1180px)}
    .hero{padding:48px 0 30px}
    .hero h1{letter-spacing:-1px}
    .search-box button{display:none}
    .filter-row{align-items:flex-start;flex-direction:column}
    .sort{width:100%}
    .sort select{width:100%}
    .course-grid{grid-template-columns:1fr}
    .modal-details{grid-template-columns:1fr}
    .modal-actions{flex-direction:column}
}



/* =========================================================
   COURSE GRID — FINAL
   ========================================================= */

.course-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:22px !important;
    align-items:stretch !important;
}

.course-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
}

.course-card > *{
    max-width:100%;
}

@media(max-width:900px){
    .course-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:620px){
    .course-grid{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   DESKTOP COURSE CARDS - OVERRIDE
   ========================================================= */

main .course-grid,
section .course-grid,
#courseGrid {
    display: grid !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

main .course-card,
section .course-card,
#courseGrid .course-card {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    flex-direction: column !important;
}

#courseGrid .course-card .course-body,
#courseGrid .course-card .course-content,
#courseGrid .course-card .card-body {
    width: 100% !important;
}

@media (max-width: 900px) {
    main .course-grid,
    section .course-grid,
    #courseGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    main .course-grid,
    section .course-grid,
    #courseGrid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   FINAL DESKTOP FIX
   The .courses section must NOT be a grid.
   Only #courseGrid is the grid.
   ========================================================= */

main .courses{
    display:block !important;
    width:100% !important;
    padding:55px 0 80px !important;
    margin:0 !important;
}

main .courses > .container{
    display:block !important;
    width:min(1180px,calc(100% - 40px)) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

main #courseGrid{
    display:grid !important;
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:24px !important;
    align-items:stretch !important;
}

main #courseGrid .course-card{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    flex-direction:column !important;
}

main #courseGrid .course-content{
    width:100% !important;
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
}

main #courseGrid .course-footer{
    margin-top:auto !important;
}

@media(max-width:1000px){
    main #courseGrid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:620px){
    main .courses{
        padding:40px 0 60px !important;
    }

    main .courses > .container{
        width:min(100% - 24px,1180px) !important;
    }

    main #courseGrid{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   VIEW COURSE — REAL LINK
   ========================================================= */

.course-card .view-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

.course-card .view-btn i{
    font-size:11px !important;
}

.course-card .view-btn:hover{
    text-decoration:none !important;
}

.header-account{
    position:relative !important;
}

.header-account-trigger{
    height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:9px !important;
    padding:0 12px 0 6px !important;
    border:1px solid #e3ece9 !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#40545b !important;
    cursor:pointer !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:800 !important;
}

.header-account-avatar{
    width:31px !important;
    height:31px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#159a9c,#4fae7b) !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:900 !important;
}

.header-account-name{
    max-width:135px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.header-account-menu{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    right:0 !important;
    z-index:99999 !important;
    width:245px !important;
    padding:9px !important;
    display:none !important;
    background:#fff !important;
    border:1px solid #e3ece9 !important;
    border-radius:16px !important;
    box-shadow:0 18px 45px rgba(16,43,53,.15) !important;
}

.header-account.open .header-account-menu{
    display:block !important;
}

.header-account-user{
    padding:11px 12px !important;
}

.header-account-user strong{
    display:block !important;
    color:#102b35 !important;
    font-size:13px !important;
}

.header-account-user span{
    display:block !important;
    margin-top:3px !important;
    color:#71838a !important;
    font-size:10px !important;
}

.header-account-divider{
    height:1px !important;
    margin:6px 0 !important;
    background:#edf2f0 !important;
}

.header-account-menu a{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    min-height:40px !important;
    padding:0 11px !important;
    border-radius:9px !important;
    color:#40545b !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:700 !important;
}

.header-account-menu a:hover{
    background:#eef8f6 !important;
    color:#087f81 !important;
}

.header-account-menu .header-account-logout{
    color:#c45c2d !important;
}

@media(max-width:850px){
    .header-account-name{
        display:none !important;
    }

    .header-account-trigger{
        width:42px !important;
        padding:0 !important;
        justify-content:center !important;
    }
}


.course-real-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.course-real-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}