/* =========================================================
   NEXTGEN COURSES - AI FUTURISTIC DESIGN
   ========================================================= */

:root{
    --ng-ink:#0d0d0e;
    --ng-deep:#151515;
    --ng-panel:#202020;
    --ng-panel-2:#292929;
    --ng-gold:#ffb515;
    --ng-gold-soft:#ffd66b;
    --ng-line:rgba(255,181,21,.18);
    --ng-text:#f4f0e7;
    --ng-muted:#aaa59b;
}

.ng-course-hero,.ng-detail-hero{
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 82% 20%,rgba(255,181,21,.13),transparent 26%),linear-gradient(135deg,#0b0b0c 0%,#171717 54%,#101010 100%);
    color:var(--ng-text);
    padding:150px 0 95px;
    isolation:isolate;
}

.ng-detail-hero{padding:135px 0 70px;}
.ng-grid-lines{
    position:absolute; inset:0; opacity:.55; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,181,21,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,181,21,.08) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,black,transparent 95%);
}
.ng-grid-lines:after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent 0 15%,rgba(255,181,21,.22) 15.1% 15.25%,transparent 15.35% 39%,rgba(255,181,21,.14) 39.1% 39.25%,transparent 39.35%);
}
.ng-orb{position:absolute;border-radius:50%;filter:blur(3px);z-index:-1;}
.ng-orb-one{width:360px;height:360px;right:-100px;top:-90px;background:radial-gradient(circle,rgba(255,181,21,.22),rgba(255,181,21,0));}
.ng-orb-two{width:250px;height:250px;left:40%;bottom:-160px;background:radial-gradient(circle,rgba(255,181,21,.12),rgba(255,181,21,0));}

.ng-kicker{
    display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
    letter-spacing:2.1px;color:var(--ng-gold);margin-bottom:18px;
}
.ng-kicker.dark{color:#a86f00;}
.ng-pulse{width:8px;height:8px;border-radius:50%;background:var(--ng-gold);box-shadow:0 0 0 0 rgba(255,181,21,.6);animation:ngPulse 1.8s infinite;}
@keyframes ngPulse{70%{box-shadow:0 0 0 9px rgba(255,181,21,0)}100%{box-shadow:0 0 0 0 rgba(255,181,21,0)}}

.ng-course-hero h1,.ng-detail-title{
    max-width:780px;margin:0;font-family:Urbanist,Manrope,sans-serif;
    font-weight:900;font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:-2.6px;
}
.ng-course-hero h1 span,.ng-detail-title span,.ng-section-heading h2 span,.ng-path-copy h2 span,.ng-detail-cta h2 span{color:var(--ng-gold);}
.ng-hero-copy{max-width:720px;margin:26px 0 32px;color:#c5c0b7;font-size:17px;line-height:1.8;}
.ng-hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
.ng-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 23px;
    border-radius:9px;text-decoration:none;font-size:14px;font-weight:800;transition:.25s ease;border:1px solid transparent;
}
.ng-btn-primary{background:var(--ng-gold);color:#17120a;box-shadow:0 12px 30px rgba(255,181,21,.16);}
.ng-btn-primary:hover{background:#ffc545;color:#17120a;transform:translateY(-2px);}
.ng-btn-outline{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.03);}
.ng-btn-outline:hover{border-color:var(--ng-gold);color:var(--ng-gold);}

.ng-hero-panel{
    border:1px solid rgba(255,181,21,.28);border-radius:18px;padding:22px;
    background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
    box-shadow:0 30px 70px rgba(0,0,0,.28);backdrop-filter:blur(14px);
}
.ng-panel-top,.ng-progress-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px;color:#b7b0a4;font-weight:800;}
.ng-live-dot{color:var(--ng-gold);font-size:9px;}
.ng-live-dot:before{content:"";display:inline-block;width:6px;height:6px;background:var(--ng-gold);border-radius:50%;margin-right:5px;}
.ng-stat-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.09);border-left:1px solid rgba(255,255,255,.09);margin:18px 0 22px;}
.ng-stat-grid>div{padding:17px 13px;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);}
.ng-stat-grid strong{display:block;color:var(--ng-gold);font-size:28px;line-height:1;}
.ng-stat-grid span{display:block;color:#aaa59b;font-size:10px;text-transform:uppercase;letter-spacing:.8px;margin-top:6px;}
.ng-progress-label strong{color:var(--ng-gold);}
.ng-progress{height:5px;border-radius:20px;background:rgba(255,255,255,.1);margin-top:9px;overflow:hidden;}
.ng-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--ng-gold),var(--ng-gold-soft));}

.ng-course-section{padding:100px 0;background:#f6f3ec;}
.ng-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:32px;}
.ng-section-heading h2,.ng-path-copy h2,.ng-detail-cta h2{margin:0;font-size:clamp(32px,4vw,52px);font-weight:900;letter-spacing:-1.5px;color:#171717;}
.ng-section-heading p{margin:10px 0 0;color:#68635b;}
.ng-result-count{background:#fff;border:1px solid #e6dfd2;border-radius:100px;padding:10px 16px;font-size:12px;color:#736d63;white-space:nowrap;}
.ng-result-count strong{color:#b87900;font-size:16px;}

.ng-controls{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:30px;}
.ng-search{flex:1;max-width:510px;position:relative;}
.ng-search i:first-child{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:#8d857a;}
.ng-search input{width:100%;height:54px;border:1px solid #ded7ca;background:#fff;border-radius:10px;padding:0 48px;font-size:14px;outline:none;}
.ng-search input:focus{border-color:var(--ng-gold);box-shadow:0 0 0 4px rgba(255,181,21,.12);}
.ng-search button{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#9d968b;display:none;}
.ng-filters{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
.ng-filters button{border:1px solid #ddd6ca;background:#fff;color:#655f56;border-radius:100px;padding:10px 14px;font-size:11px;font-weight:800;transition:.2s;}
.ng-filters button:hover,.ng-filters button.active{background:#191919;border-color:#191919;color:var(--ng-gold);}

.ng-course-card{height:100%;position:relative;display:flex;flex-direction:column;background:linear-gradient(145deg,#202020,#161616);border:1px solid rgba(255,181,21,.12);border-radius:17px;padding:23px;overflow:hidden;transition:.3s ease;box-shadow:0 16px 35px rgba(0,0,0,.08);}
.ng-course-card:before{content:"";position:absolute;width:130px;height:130px;right:-65px;top:-65px;border:1px solid rgba(255,181,21,.17);border-radius:50%;transition:.35s;}
.ng-course-card:after{content:"";position:absolute;width:70px;height:1px;background:var(--ng-gold);left:0;top:0;opacity:.9;}
.ng-course-card:hover{transform:translateY(-7px);border-color:rgba(255,181,21,.5);box-shadow:0 25px 45px rgba(0,0,0,.18);}
.ng-course-card:hover:before{transform:scale(1.25);}
.ng-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:22px;}
.ng-module-number{font-size:11px;letter-spacing:1.6px;color:var(--ng-gold);font-weight:900;}
.ng-level{font-size:9px;letter-spacing:.8px;color:#c4beb4;border:1px solid rgba(255,255,255,.13);padding:7px 9px;border-radius:100px;text-transform:uppercase;text-align:center;}
.ng-course-card h3{font-size:24px;line-height:1.12;color:#fff;margin:0 0 12px;font-weight:800;}
.ng-course-card p{color:#a8a39a;font-size:13px;line-height:1.7;margin:0 0 18px;}
.ng-card-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding:15px 0;border-top:1px solid rgba(255,255,255,.08);}
.ng-card-meta span{font-size:11px;color:#d4cec2;display:inline-flex;gap:6px;align-items:center;}
.ng-card-meta i{color:var(--ng-gold);}
.ng-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;}
.ng-syllabus-count{font-size:10px;color:#8f8a82;text-transform:uppercase;letter-spacing:.8px;}
.ng-course-link{color:var(--ng-gold);font-size:12px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.ng-course-link i{transition:.2s;}
.ng-course-link:hover{color:#ffd268;}
.ng-course-link:hover i{transform:translateX(4px);}
.ng-empty-state{text-align:center;padding:70px 20px;color:#5e584f;}
.ng-empty-state i{font-size:42px;color:#c58913;margin-bottom:15px;}

.ng-path-section{background:#111;padding:90px 0;color:#fff;}
.ng-path-shell{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;align-items:center;}
.ng-path-copy h2{color:#fff;line-height:1.1;}
.ng-path-copy p{color:#aaa59b;line-height:1.8;margin:18px 0 0;max-width:550px;}
.ng-path-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;}
.ng-path-steps>div{border:1px solid rgba(255,255,255,.11);padding:20px;background:rgba(255,255,255,.025);border-radius:12px;}
.ng-path-steps span{display:block;color:var(--ng-gold);font-weight:900;font-size:12px;margin-bottom:18px;}
.ng-path-steps strong{display:block;font-size:16px;}
.ng-path-steps small{display:block;color:#918c84;margin-top:5px;}

.ng-back-link{display:inline-flex;align-items:center;gap:9px;color:#d7d0c4;text-decoration:none;font-size:13px;font-weight:700;margin-bottom:38px;}
.ng-back-link:hover{color:var(--ng-gold);}
.ng-detail-hero-content{max-width:950px;}
.ng-detail-summary{font-size:18px;color:#c8c1b5;line-height:1.8;max-width:780px;margin:23px 0 28px;}
.ng-detail-meta{display:flex;gap:12px;flex-wrap:wrap;}
.ng-detail-meta span{border:1px solid rgba(255,255,255,.13);padding:10px 14px;border-radius:9px;color:#ddd6ca;font-size:12px;background:rgba(255,255,255,.04);}
.ng-detail-meta i{color:var(--ng-gold);margin-right:7px;}
.ng-detail-section{padding:75px 0 100px;background:#f6f3ec;}
.ng-detail-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:30px;}
.ng-detail-panel{background:#fff;border:1px solid #e4ddd0;border-radius:16px;padding:28px;margin-bottom:22px;}
.ng-detail-panel h2{font-size:24px;color:#181716;margin:0 0 18px;font-weight:900;}
.ng-detail-panel h2 i{color:#b97800;margin-right:9px;font-size:20px;}
.ng-prereq{margin:0;color:#625d55;line-height:1.8;font-size:14px;}
.ng-syllabus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.ng-syllabus-item{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border:1px solid #eee8dc;border-radius:8px;color:#4f4a43;font-size:13px;line-height:1.45;}
.ng-syllabus-item i{color:var(--ng-gold);margin-top:3px;font-size:10px;}
.ng-sidebar-panel{background:#1a1a1a;color:#fff;border-radius:16px;padding:25px;margin-bottom:18px;position:sticky;top:105px;}
.ng-sidebar-panel h3{font-size:18px;margin:0 0 17px;color:#fff;font-weight:800;}
.ng-tag-list{display:flex;gap:8px;flex-wrap:wrap;}
.ng-tag-list span{background:rgba(255,181,21,.09);border:1px solid rgba(255,181,21,.2);color:#e8c875;padding:8px 10px;border-radius:7px;font-size:11px;}
.ng-list-clean{list-style:none;margin:0;padding:0;}
.ng-list-clean li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;color:#c6c0b5;}
.ng-list-clean li:last-child{border-bottom:0;}
.ng-list-clean i{color:var(--ng-gold);margin-top:4px;}
.ng-detail-cta{margin-top:28px;background:linear-gradient(135deg,#171717,#262626);border-radius:18px;padding:38px;display:flex;justify-content:space-between;align-items:center;gap:25px;}
.ng-detail-cta h2{color:#fff;max-width:650px;}
.ng-loading{color:#fff;font-size:15px;}
.ng-loading span:after{content:"...";animation:ngDots 1.2s steps(4,end) infinite;}
@keyframes ngDots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,100%{content:"..."}}

@media(max-width:991px){
    .ng-course-hero{padding-top:125px;}
    .ng-section-heading,.ng-controls,.ng-detail-cta{align-items:flex-start;flex-direction:column;}
    .ng-path-shell,.ng-detail-grid{grid-template-columns:1fr;}
    .ng-sidebar-panel{position:static;}
}
@media(max-width:767px){
    .ng-course-hero,.ng-detail-hero{padding:110px 0 65px;}
    .ng-course-hero h1,.ng-detail-title{letter-spacing:-1.5px;}
    .ng-course-section,.ng-detail-section,.ng-path-section{padding:65px 0;}
    .ng-controls{gap:12px;}
    .ng-search{width:100%;max-width:none;}
    .ng-filters{justify-content:flex-start;}
    .ng-syllabus-grid,.ng-path-steps{grid-template-columns:1fr;}
    .ng-detail-panel{padding:20px;}
    .ng-detail-cta{padding:27px 22px;}
}
/* =========================================================
   NEXTGEN COURSE PAGE - TEXT VISIBILITY FIX
   ADD THIS AT THE VERY END OF courses.css
   ========================================================= */

/* Prevent existing theme styles from overriding text colors */
.ng-course-hero,
.ng-detail-hero {
    color: #f4f0e7 !important;
}

    /* Main hero heading */
    .ng-course-hero h1,
    .ng-course-hero h1 *,
    .ng-course-hero .ng-course-hero h1,
    .ng-detail-hero .ng-detail-title,
    .ng-detail-hero .ng-detail-title * {
        color: #f4f0e7 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        /* Yellow highlighted text */
        .ng-course-hero h1 span,
        .ng-detail-hero .ng-detail-title span {
            color: #ffb515 !important;
        }

    /* Specific fix for the dark/invisible text in your screenshot */
    .ng-course-hero h1 {
        color: #f4f0e7 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #f4f0e7 !important;
    }

        .ng-course-hero h1 span {
            color: #ffb515 !important;
            -webkit-text-fill-color: #ffb515 !important;
        }

/* Course detail page main title */
.ng-detail-title {
    color: #f4f0e7 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #f4f0e7 !important;
}

    .ng-detail-title span {
        color: #ffb515 !important;
        -webkit-text-fill-color: #ffb515 !important;
    }

/* Hero descriptions */
.ng-course-hero .ng-hero-copy,
.ng-detail-hero .ng-detail-summary {
    color: #d2ccc1 !important;
    opacity: 1 !important;
}

/* Kicker / module label */
.ng-course-hero .ng-kicker,
.ng-detail-hero .ng-kicker {
    color: #ffbd32 !important;
    opacity: 1 !important;
}

    .ng-course-hero .ng-kicker *,
    .ng-detail-hero .ng-kicker * {
        color: inherit !important;
    }

/* Detail hero meta text */
.ng-detail-hero .ng-detail-meta span {
    color: #e5ded3 !important;
}

    .ng-detail-hero .ng-detail-meta span i {
        color: #ffb515 !important;
    }

/* Back link */
.ng-detail-hero .ng-back-link {
    color: #e0d9cf !important;
}

    .ng-detail-hero .ng-back-link i {
        color: #ffb515 !important;
    }

    .ng-detail-hero .ng-back-link:hover {
        color: #ffb515 !important;
    }

/* =========================================================
   COURSE CARDS - FORCE PROPER DARK THEME TEXT
   ========================================================= */

.ng-course-card h3,
.ng-course-card h3 a,
.ng-course-card h3 span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.ng-course-card p {
    color: #bdb7ad !important;
}

.ng-course-card .ng-module-number {
    color: #ffb515 !important;
}

.ng-course-card .ng-level {
    color: #d7d0c5 !important;
}

.ng-course-card .ng-card-meta span {
    color: #d7d0c5 !important;
}

.ng-course-card .ng-card-meta i {
    color: #ffb515 !important;
}

.ng-course-card .ng-syllabus-count {
    color: #a9a298 !important;
}

.ng-course-card .ng-course-link {
    color: #ffbd32 !important;
}

    .ng-course-card .ng-course-link:hover {
        color: #ffd66b !important;
    }

/* =========================================================
   LEARNING SYSTEM PANEL
   ========================================================= */

.ng-hero-panel {
    color: #ffffff !important;
}

    .ng-hero-panel .ng-panel-top,
    .ng-hero-panel .ng-progress-label {
        color: #c6bfb4 !important;
    }

    .ng-hero-panel .ng-stat-grid strong {
        color: #ffb515 !important;
    }

    .ng-hero-panel .ng-stat-grid span {
        color: #aaa59b !important;
    }

    .ng-hero-panel .ng-progress-label strong {
        color: #ffb515 !important;
    }

    .ng-hero-panel .ng-live-dot {
        color: #ffbd32 !important;
    }

/* =========================================================
   LIGHT COURSE EXPLORER SECTION
   ========================================================= */

.ng-course-section .ng-section-heading h2 {
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
}

    .ng-course-section .ng-section-heading h2 span {
        color: #b87900 !important;
        -webkit-text-fill-color: #b87900 !important;
    }

.ng-course-section .ng-section-heading p {
    color: #68635b !important;
}

.ng-course-section .ng-kicker.dark {
    color: #a86f00 !important;
}

/* Search input */
.ng-search input {
    color: #1c1c1c !important;
    -webkit-text-fill-color: #1c1c1c !important;
}

    .ng-search input::placeholder {
        color: #8d857a !important;
        opacity: 1 !important;
    }

/* =========================================================
   COURSE DETAIL PAGE - WHITE PANELS
   ========================================================= */

.ng-detail-section {
    color: #1d1b18 !important;
}

.ng-detail-panel h2,
.ng-detail-panel h2 * {
    color: #181716 !important;
    -webkit-text-fill-color: #181716 !important;
}

    .ng-detail-panel h2 i {
        color: #b97800 !important;
    }

.ng-detail-panel .ng-prereq {
    color: #625d55 !important;
}

.ng-syllabus-item {
    color: #4f4a43 !important;
}

    .ng-syllabus-item span {
        color: #4f4a43 !important;
    }

    .ng-syllabus-item i {
        color: #ffb515 !important;
    }

/* =========================================================
   SIDEBAR DARK PANELS
   ========================================================= */

.ng-sidebar-panel {
    color: #ffffff !important;
}

    .ng-sidebar-panel h3,
    .ng-sidebar-panel h3 * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .ng-sidebar-panel .ng-list-clean li,
    .ng-sidebar-panel .ng-list-clean li span {
        color: #cfc8bd !important;
    }

    .ng-sidebar-panel .ng-list-clean i {
        color: #ffb515 !important;
    }

    .ng-sidebar-panel .ng-tag-list span {
        color: #f0cf80 !important;
    }

/* =========================================================
   BOTTOM DARK SECTIONS
   ========================================================= */

.ng-path-section,
.ng-path-section * {
    color: inherit;
}

    .ng-path-section .ng-path-copy h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

        .ng-path-section .ng-path-copy h2 span {
            color: #ffb515 !important;
            -webkit-text-fill-color: #ffb515 !important;
        }

    .ng-path-section .ng-path-copy p {
        color: #aaa59b !important;
    }

.ng-path-steps strong {
    color: #ffffff !important;
}

.ng-path-steps span {
    color: #ffb515 !important;
}

.ng-path-steps small {
    color: #aaa59b !important;
}

/* Bottom CTA */
.ng-detail-cta h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

    .ng-detail-cta h2 span {
        color: #ffb515 !important;
        -webkit-text-fill-color: #ffb515 !important;
    }

/* =========================================================
   BUTTON TEXT FIX
   ========================================================= */

.ng-btn,
.ng-btn span {
    opacity: 1 !important;
}

.ng-btn-primary,
.ng-btn-primary span,
.ng-btn-primary i {
    color: #17120a !important;
    -webkit-text-fill-color: #17120a !important;
}

.ng-btn-outline,
.ng-btn-outline span,
.ng-btn-outline i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

    .ng-btn-outline:hover,
    .ng-btn-outline:hover span,
    .ng-btn-outline:hover i {
        color: #ffb515 !important;
        -webkit-text-fill-color: #ffb515 !important;
    }

/* =========================================================
   EXTRA PROTECTION AGAINST THEME HEADING OVERRIDES
   ========================================================= */

.ng-course-hero h1,
.ng-course-hero h2,
.ng-course-hero h3,
.ng-detail-hero h1,
.ng-detail-hero h2,
.ng-detail-hero h3,
.ng-course-card h1,
.ng-course-card h2,
.ng-course-card h3 {
    text-transform: none !important;
}

/* Ensure no global opacity/filter is inherited */
.ng-course-hero h1,
.ng-detail-title,
.ng-course-card h3 {
    filter: none !important;
    mix-blend-mode: normal !important;
}