/* ==========================================================
   Premium Courses Listing — scoped under .courses-premium
   Mirrors the About-Us premium palette + rhythm.
     #193D7F (primary)   #2F508B (accent blue)
     #FECA16 (yellow)    #0F1B33 / #192335 (ink)
     #F3F5F8 (soft bg)   #6B7385 (muted)
   The global `.ap-eyebrow` pill comes from custom_style.css.
   ========================================================== */
.courses-premium {
    --cp-primary:#193D7F;
    --cp-accent:#2F508B;
    --cp-yellow:#FECA16;
    --cp-ink:#0F1B33;
    --cp-ink-2:#192335;
    --cp-soft:#F3F5F8;
    --cp-soft-2:#F6F9FE;
    --cp-muted:#6B7385;
    --cp-line:rgba(25,61,127,.10);
    --cp-shadow-sm:0 10px 30px rgba(25,61,127,.06);
    --cp-shadow-md:0 18px 40px rgba(25,61,127,.10);
    --cp-shadow-lg:0 30px 60px rgba(25,61,127,.18);
    position:relative;
    overflow:hidden;
}
.courses-premium > section,
.courses-premium > div { position:relative; z-index:1; }
.courses-premium .row.py-5 { padding-top:0!important; padding-bottom:0!important; }
.courses-premium .cp-section { padding:80px 0; }

/* Decorative blobs (subtle, behind everything) */
.courses-premium::before,
.courses-premium::after{
    content:'';position:absolute;width:520px;height:520px;border-radius:50%;
    filter:blur(90px);opacity:.30;pointer-events:none;z-index:0;
}
.courses-premium::before{top:160px;left:-260px;background:radial-gradient(circle,rgba(25,61,127,.20),transparent 70%);}
.courses-premium::after{top:900px;right:-260px;background:radial-gradient(circle,rgba(254,202,22,.16),transparent 70%);}

/* Yellow accent bar under headings */
.courses-premium .cp-bar{
    display:block;width:48px;height:4px;background:var(--cp-yellow);
    border-radius:2px;margin:18px 0 22px;
}

/* Section title scale */
.courses-premium .lets-start h2.g-title,
.courses-premium .cp-title{
    font-size:40px;line-height:1.18;font-weight:800;
    letter-spacing:-0.02em;color:var(--cp-ink)!important;
}
.courses-premium .lets-start .content,
.courses-premium .cp-copy{
    color:var(--cp-muted);font-size:15.5px;line-height:1.85;
}

/* ============ Intro band ============ */
.courses-premium .cp-intro{ padding:40px 0 10px; }
.courses-premium .cp-intro__copy{
    color:var(--cp-muted);font-size:16px;line-height:1.85;
    padding-left:22px;border-left:3px solid var(--cp-yellow);
}

/* ============ Filter sidebar (premium) ============ */
.courses-premium .sidebar{
    background:#fff;
    border:1px solid var(--cp-line);
    border-radius:20px;
    padding:22px 20px;
    box-shadow:var(--cp-shadow-sm);
}
.courses-premium .sidebar .row.mb-4 > .col-6 > span{
    font-size:14px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--cp-ink);
    display:inline-flex;align-items:center;gap:8px;
}
.courses-premium .sidebar .row.mb-4 > .col-6 > span::before{
    content:'';width:6px;height:6px;border-radius:50%;
    background:var(--cp-yellow);
    box-shadow:0 0 0 4px rgba(254,202,22,.18);
}
.courses-premium .sidebar .row.mb-4 .btn{
    border-radius:999px!important;border:1px solid var(--cp-line)!important;
    padding:6px 12px!important;font-weight:700;font-size:12px;color:var(--cp-primary);
    background:#fff;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.courses-premium .sidebar .row.mb-4 .btn:hover{
    background:var(--cp-yellow);border-color:var(--cp-yellow)!important;color:var(--cp-ink);
}
.courses-premium .sidebar .widget{ margin-bottom:22px; }
.courses-premium .sidebar .widget .search{
    position:relative;
}
.courses-premium .sidebar .widget .search .form-control{
    border:1px solid var(--cp-line);border-radius:12px;
    padding:11px 44px 11px 16px;font-size:14px;background:var(--cp-soft-2);
    height:auto;box-shadow:none;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.courses-premium .sidebar .widget .search .form-control:focus{
    border-color:var(--cp-primary);background:#fff;
    box-shadow:0 0 0 4px rgba(25,61,127,.10);
}
.courses-premium .sidebar .widget .search .submit{
    position:absolute;top:50%;right:6px;transform:translateY(-50%);
    width:32px;height:32px;border-radius:10px;border:none;
    background:linear-gradient(135deg,var(--cp-ink) 0%,var(--cp-primary) 100%);
    color:#fff;display:inline-flex;align-items:center;justify-content:center;
    transition:transform .2s ease;
}
.courses-premium .sidebar .widget .search .submit:hover{ transform:translateY(-50%) scale(1.06); }
.courses-premium .sidebar .widget-title{
    font-size:15px!important;font-weight:800!important;color:var(--cp-ink)!important;
    margin:0 0 12px!important;padding-bottom:10px;
    border-bottom:1px dashed var(--cp-line)!important;
    position:relative;
}
.courses-premium .sidebar .widget-title::after{
    content:'';position:absolute;left:0;bottom:-1px;
    width:34px;height:2px;background:var(--cp-yellow);border-radius:2px;
}
.courses-premium .sidebar .entry-widget{ padding:0;margin:0;list-style:none; }
.courses-premium .sidebar .entry-widget li.category{
    border-radius:10px;margin-bottom:4px;
    transition:background .2s ease;
}
.courses-premium .sidebar .entry-widget li.category > div{ padding:8px 12px; }
.courses-premium .sidebar .entry-widget li.category > div > a,
.courses-premium .sidebar .entry-widget li.category > a{
    color:var(--cp-ink);font-weight:600;font-size:13.5px;text-decoration:none;
    transition:color .2s ease;
}
.courses-premium .sidebar .entry-widget li.category:hover{ background:var(--cp-soft); }
.courses-premium .sidebar .entry-widget li.category.active > div{
    background:linear-gradient(135deg,rgba(25,61,127,.08),rgba(254,202,22,.08));
    border-radius:10px;
}
.courses-premium .sidebar .entry-widget li.category.active > div > a,
.courses-premium .sidebar .entry-widget li.category.active > a{
    color:var(--cp-primary);
}
.courses-premium .sidebar .entry-widget .toggle-icon{
    width:22px;height:22px;border-radius:50%;
    background:var(--cp-soft);color:var(--cp-primary);
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:800;font-size:14px;line-height:1;
    transition:background .2s ease,color .2s ease;
}
.courses-premium .sidebar .entry-widget .toggle-icon:hover{
    background:var(--cp-yellow);color:var(--cp-ink);
}
.courses-premium .sidebar .entry-widget ul.collapse,
.courses-premium .sidebar .entry-widget ul.collapsing,
.courses-premium .sidebar .entry-widget ul.show{
    list-style:none;padding-left:14px;margin-top:6px;
    border-left:2px solid var(--cp-line);
}
.courses-premium .sidebar .entry-widget ul li.category{ margin-bottom:2px; }
.courses-premium .sidebar .entry-widget ul li.category > a{
    display:block;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:500;
}
.courses-premium .sidebar .entry-widget ul li.category.active > a{
    background:rgba(25,61,127,.08);color:var(--cp-primary);font-weight:700;
}
.courses-premium .sidebar .filter-item .form-check{
    padding:6px 10px;border-radius:10px;margin:0;
    transition:background .2s ease;
}
.courses-premium .sidebar .filter-item .form-check:hover{ background:var(--cp-soft); }
.courses-premium .sidebar .filter-item .form-check-input{
    margin-right:8px;border:2px solid var(--cp-line);
    width:16px;height:16px;
}
.courses-premium .sidebar .filter-item .form-check-input:checked{
    background-color:var(--cp-primary);border-color:var(--cp-primary);
}
.courses-premium .sidebar .filter-item .form-check-label{
    color:var(--cp-ink);font-weight:600;font-size:13.5px;cursor:pointer;
}
.courses-premium .sidebar .select2-container .select2-selection--single,
.courses-premium .sidebar .form-select{
    border:1px solid var(--cp-line)!important;border-radius:12px!important;
    background:var(--cp-soft-2)!important;height:44px!important;
    color:var(--cp-ink)!important;font-size:14px!important;font-weight:600!important;
    padding:8px 14px!important;
    box-shadow:none!important;
}
.courses-premium .sidebar .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:42px;
}

/* "Filter" toggle button on mobile */
.courses-premium .left-ls{ z-index:5; }
.courses-premium .left-ls .buttonset{
    background:linear-gradient(135deg,var(--cp-ink) 0%,var(--cp-primary) 100%)!important;
    color:#fff!important;border:none!important;
    border-radius:14px!important;padding:10px 18px!important;
    box-shadow:var(--cp-shadow-md);font-weight:700;
}
.courses-premium .left-ls .buttonset img{ filter:brightness(0) invert(1); opacity:.9; }

/* ============ Cards (grid) ============ */
.courses-premium .single-feature{
    background:#fff;
    border:1px solid var(--cp-line);
    border-radius:20px;
    box-shadow:var(--cp-shadow-sm);
    overflow:hidden;
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
    height:100%;
    text-decoration:none;
    position:relative;
    display:flex;flex-direction:column;
    padding:0;
}
.courses-premium .single-feature::before{
    content:'';position:absolute;top:0;left:0;width:5px;height:0;
    background:var(--cp-yellow);
    transition:height .45s ease;z-index:2;
}
.courses-premium .single-feature:hover{
    transform:translateY(-6px);
    box-shadow:var(--cp-shadow-lg);
    border-color:rgba(254,202,22,.45);
}
.courses-premium .single-feature:hover::before{ height:100%; }

.courses-premium .single-feature .courses-img{
    position:relative;overflow:hidden;
    border-radius:20px 20px 0 0;
    background:var(--cp-soft);
}
.courses-premium .single-feature .courses-img img{
    width:100%;height:220px;object-fit:cover;border-radius:0;
    transition:transform .6s ease;transform:scale(1);
}
.courses-premium .single-feature:hover .courses-img img{ transform:scale(1.05); }
/* Override the global .courses-img::after which loads a decorative bg image */
.courses-premium .single-feature .courses-img::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(15,27,51,0) 50%,rgba(15,27,51,.18) 100%)!important;
    border-radius:0!important;
}

.courses-premium .single-feature .entry-details{
    padding:20px 22px 22px;flex:1;display:flex;flex-direction:column;
}
.courses-premium .single-feature .entry-details > ul{
    display:flex;list-style:none;padding:0;gap:10px;flex-wrap:wrap;
    margin:0 0 14px;
}
.courses-premium .single-feature .entry-details > ul li{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--cp-soft);
    border:1px solid var(--cp-line);
    color:var(--cp-muted);
    font-size:12px;font-weight:700;
    padding:5px 12px;border-radius:999px;
}
.courses-premium .single-feature .entry-details > ul li:empty{ display:none; }
.courses-premium .single-feature .entry-details > ul li svg{ width:14px;height:14px; }
.courses-premium .single-feature .entry-details > ul li svg path{ fill:var(--cp-primary); }

.courses-premium .single-feature .entry-title{ display:block; }
.courses-premium .single-feature .entry-title h3{
    color:var(--cp-ink);font-weight:800;font-size:18px;line-height:1.35;
    margin:0 0 10px;letter-spacing:-0.01em;
    height:auto;min-height:0;
    transition:color .25s ease;
}
.courses-premium .single-feature .entry-title h3 span{
    display:inline-block;background:rgba(254,202,22,.18);
    color:#a37200;font-size:10px;font-weight:800;padding:2px 8px;
    border-radius:999px;margin-right:8px;vertical-align:middle;
    letter-spacing:.08em;
}
.courses-premium .single-feature:hover .entry-title h3{ color:var(--cp-primary); }
.courses-premium .single-feature .content{
    color:var(--cp-muted);font-size:14px;line-height:1.65;flex:1;
}

/* Bottom row: price + button */
.courses-premium .single-feature .entry-details .d-flex.justify-content-between{
    align-items:center;
    border-top:1px dashed var(--cp-line);
    padding-top:16px;margin-top:16px!important;
}
.courses-premium .single-feature .price{
    font-size:20px;font-weight:800;color:var(--cp-ink);
    margin:0!important;line-height:1;letter-spacing:-0.01em;
}
.courses-premium .single-feature .price .offer-price{
    color:var(--cp-muted);font-size:13px;font-weight:600;text-decoration:line-through;
    margin-left:6px;
}
.courses-premium .single-feature .enroll-now{
    background:linear-gradient(135deg,var(--cp-ink) 0%,var(--cp-primary) 100%)!important;
    color:#fff!important;
    border:none!important;border-radius:12px;
    padding:9px 18px;font-weight:700;font-size:13px;
    display:inline-flex;align-items:center;gap:6px;
    box-shadow:0 10px 22px rgba(25,61,127,.20);
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.courses-premium .single-feature .enroll-now::after{
    content:'→';transition:transform .25s ease;font-weight:800;
}
.courses-premium .single-feature:hover .enroll-now{
    background:var(--cp-yellow)!important;color:var(--cp-ink)!important;
    box-shadow:0 14px 30px rgba(254,202,22,.32);
}
.courses-premium .single-feature:hover .enroll-now::after{ transform:translateX(4px); }

/* ============ Cards (list layout) ============ */
.courses-premium .col-lg-12 > a.single-feature{
    display:block;padding:14px;
}
.courses-premium .col-lg-12 > a.single-feature .courses-img{
    border-radius:14px;
}
.courses-premium .col-lg-12 > a.single-feature .courses-img img{ height:200px; }
.courses-premium .col-lg-12 > a.single-feature .entry-details{ padding:6px 6px 6px 18px; }
.courses-premium .col-lg-12 > a.single-feature .en-title h3{
    font-size:20px;
}
.courses-premium .col-lg-12 > a.single-feature .description{
    color:var(--cp-muted);font-size:14px;line-height:1.6;margin:6px 0 0;
}

/* Distinguish "Recorded" / "X Month" pills inside list cards */
.courses-premium .col-lg-12 > a.single-feature .entry-details .d-flex.justify-content-between.mb-3 > div{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--cp-soft);
    border:1px solid var(--cp-line);
    color:var(--cp-muted);
    font-size:12px;font-weight:700;
    padding:5px 12px;border-radius:999px;
}
.courses-premium .col-lg-12 > a.single-feature .entry-details .d-flex.justify-content-between.mb-3 > div svg path{
    fill:var(--cp-primary);
}

/* ============ Empty state ============ */
.courses-premium .bg-white.radius-10{
    background:#fff!important;
    border:1px solid var(--cp-line);
    border-radius:20px!important;
    box-shadow:var(--cp-shadow-sm);
}

/* ============ Pagination ============ */
.courses-premium .entry-pagination{ margin-top:30px; }
.courses-premium .entry-pagination .pagination{
    gap:6px;flex-wrap:wrap;justify-content:center;
}
.courses-premium .entry-pagination .pagination .page-link,
.courses-premium .entry-pagination .pagination .page-item span{
    border:1px solid var(--cp-line);
    background:#fff;color:var(--cp-ink);
    border-radius:10px;min-width:40px;height:40px;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;
    box-shadow:var(--cp-shadow-sm);
    transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.courses-premium .entry-pagination .pagination .page-link:hover{
    background:var(--cp-yellow);border-color:var(--cp-yellow);color:var(--cp-ink);
    transform:translateY(-2px);
}
.courses-premium .entry-pagination .pagination .page-item.active .page-link{
    background:linear-gradient(135deg,var(--cp-ink) 0%,var(--cp-primary) 100%);
    border-color:transparent;color:#fff;
}
.courses-premium .entry-pagination .pagination .page-item.disabled .page-link{
    opacity:.45;background:var(--cp-soft);
}

/* ============ Responsive ============ */
@media (max-width: 991.98px){
    .courses-premium .cp-section{ padding:56px 0; }
    .courses-premium .lets-start h2.g-title,
    .courses-premium .cp-title{ font-size:32px; }
    .courses-premium .sidebar{ border-radius:16px; }
    .courses-premium .single-feature .courses-img img{ height:200px; }
}
@media (max-width: 575.98px){
    .courses-premium .lets-start h2.g-title,
    .courses-premium .cp-title{ font-size:26px; }
    .courses-premium .cp-intro__copy{ padding-left:14px; }
    .courses-premium .cp-toolbar{ padding:12px 14px; }
    .courses-premium .single-feature{ border-radius:16px; }
    .courses-premium .single-feature .courses-img{ border-radius:16px 16px 0 0; }
    .courses-premium .single-feature .entry-details{ padding:16px 16px 18px; }
    .courses-premium .single-feature .entry-title h3{ font-size:16px; }
    .courses-premium .single-feature .price{ font-size:18px; }
    .courses-premium .col-lg-12 > a.single-feature .courses-img img{ height:180px; }
    .courses-premium .col-lg-12 > a.single-feature .entry-details{ padding:14px 6px 0; }
}
/* List card on phones — stack image above text so it doesn't squish */
@media (max-width: 575.98px){
    .courses-premium .col-lg-12 > a.single-feature .row{ row-gap:14px; }
    .courses-premium .col-lg-12 > a.single-feature .row > .col-lg-4,
    .courses-premium .col-lg-12 > a.single-feature .row > .col-md-4,
    .courses-premium .col-lg-12 > a.single-feature .row > .col-lg-8,
    .courses-premium .col-lg-12 > a.single-feature .row > .col-md-8{
        flex:0 0 100%; max-width:100%;
    }
    .courses-premium .col-lg-12 > a.single-feature .en-title h3{ font-size:17px; }
    /* Showing-of bar wraps on phones */
    .courses-premium .col-lg-9 > .d-flex.justify-content-between{
        flex-wrap:wrap; gap:8px;
    }
}

/* ============================================================
   Mobile filter — proper fixed slide-in drawer with backdrop
   (scoped to courses page; only applies below the lg breakpoint)
   ============================================================ */
@media (max-width: 991.98px){

    /* Inline "Filters" trigger, sits in the results toolbar */
    .courses-premium .cp-toolbar{ gap:10px; }
    .courses-premium .cp-filter-trigger{
        display:inline-flex;align-items:center;gap:8px;
        padding:10px 18px;
        border:0;border-radius:12px;
        font-size:14px;font-weight:700;color:#fff;
        background:linear-gradient(135deg,var(--cp-ink) 0%,var(--cp-primary) 100%);
        box-shadow:0 6px 16px rgba(15,27,51,.18);
        white-space:nowrap;
        transition:transform .15s ease, box-shadow .15s ease;
    }
    .courses-premium .cp-filter-trigger svg{ width:16px;height:16px; }
    .courses-premium .cp-filter-trigger:active{ transform:translateY(1px); }

    /* Backdrop */
    .cp-filter-backdrop{
        position:fixed;
        inset:0;
        background:rgba(15,27,51,.5);
        backdrop-filter:blur(2px);
        opacity:0;
        visibility:hidden;
        transition:opacity .3s ease, visibility .3s ease;
        z-index:1040;
    }
    body.cp-filter-lock{ overflow:hidden; }
    body.cp-filter-lock .cp-filter-backdrop{ opacity:1; visibility:visible; }

    /* The drawer itself */
    .courses-premium .pushmenu-left{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        height:100%;
        width:88vw;
        max-width:360px;
        padding:0;
        background:#fff;
        box-shadow:0 0 40px rgba(15,27,51,.25);
        transform:translateX(-100%);
        transition:transform .35s ease;
        z-index:1050;
        overflow:hidden;
    }
    .courses-premium .pushmenu-left.pushmenu-open{
        transform:translateX(0);
        left:0;
    }
    /* Don't shove the page sideways anymore */
    .courses-premium .pushmenu-push-toright{ left:0!important; }

    /* Sidebar fills the drawer and scrolls internally */
    .courses-premium .pushmenu-left .sidebar{
        position:static!important;
        top:auto!important;
        height:100%;
        margin:0;
        border:0;
        border-radius:0;
        box-shadow:none;
        padding:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    .courses-premium .pushmenu-left .sidebar > form,
    .courses-premium .pushmenu-left .sidebar > .widget{
        padding-left:20px;
        padding-right:20px;
    }
    .courses-premium .pushmenu-left .sidebar > form:last-of-type{
        padding-bottom:20px;
    }

    /* Sticky drawer header */
    .courses-premium .pushmenu-left .sidebar > .row.mb-4{
        position:sticky;
        top:0;
        z-index:2;
        margin:0;
        padding:16px 20px;
        background:#fff;
        border-bottom:1px solid var(--cp-line);
        align-items:center;
    }
    .courses-premium .pushmenu-left .sidebar > .row.mb-4 > .col-6 > span{
        font-size:15px;
    }
    .courses-premium .pushmenu-left .sidebar .cp-filter-close{
        width:34px;height:34px;
        display:inline-flex;align-items:center;justify-content:center;
        border:1px solid var(--cp-line);
        border-radius:50%;
        color:var(--cp-ink);
        background:#fff;
        margin:0;
        transition:all .15s ease;
    }
    .courses-premium .pushmenu-left .sidebar .cp-filter-close:hover{
        background:var(--cp-ink);color:#fff;border-color:var(--cp-ink);
    }
    .courses-premium .pushmenu-left .sidebar .widget:first-of-type{ margin-top:18px; }

    /* Sticky footer "Show results" */
    .courses-premium .pushmenu-left .cp-filter-foot{
        position:sticky;
        bottom:0;
        padding:14px 20px;
        border-top:1px solid var(--cp-line);
        background:#fff;
    }
    .courses-premium .pushmenu-left .cp-filter-foot .cp-filter-done{
        display:block;width:100%;text-align:center;
        padding:12px 16px;border-radius:12px;border:0;
        font-weight:700;font-size:15px;color:#fff;
        background:linear-gradient(135deg,var(--cp-ink) 0%,var(--cp-primary) 100%);
    }
}