/* =========================
   BASIC RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #111827;
    background: #ffffff;
    line-height: 1.6;
}

a {
    text-decoration: none;
}


/* =========================
   NAVBAR
========================= */

.navbar {
    width: 100%;
    height: 82px;

    padding: 0 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    position: sticky;
    top: 0;
    z-index: 1000;
}


/* Header brand acts as a home link on every main page. */
a.logo-area {
    text-decoration: none;
    cursor: pointer;
}
a.logo-area:hover,
a.logo-area:focus {
    text-decoration: none;
}
a.logo-area:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 8px;
}

/* =========================
   LOGO
========================= */

.logo-area {
    display: flex;
    align-items: center;

    gap: 12px;

    font-size: 22.26px;
    font-weight: 800;

    letter-spacing: 1px;

    color: #111827;

    white-space: nowrap;
}


.logo-area img {
    width: 50px;
    height: 50px;

    object-fit: contain;
}


/* =========================
   NAVIGATION LINKS
========================= */

.nav-links {
    display: flex;
    align-items: center;

    gap: 30px;
}


.nav-links a {
    position: relative;

    color: #374151;

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

    transition: 0.3s;
}


.nav-links a:hover {
    color: #2563eb;
}


/* Active Home */

.nav-links a.active {
    color: #2563eb;
}


/* Small line under active link */

.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 100%;
    height: 2px;

    background: #2563eb;

    border-radius: 5px;
}


/* =========================
   LOGIN BUTTON
========================= */

.login-btn {
    padding: 10px 20px;

    background: #111827;

    color: #ffffff !important;

    border-radius: 7px;
}


.login-btn:hover {
    background: #2563eb;
}


/* =========================
   MOBILE MENU BUTTON
========================= */

.menu-btn {
    display: none;

    border: none;

    background: transparent;

    font-size: 29.68px;

    cursor: pointer;

    color: #111827;
}

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

.hero {
    min-height: 680px;

    padding: 80px 8%;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 60px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8fafc,
            #eef4ff
        );

    overflow: hidden;
}


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

.hero-content {
    max-width: 680px;
}


.hero-badge {
    display: inline-block;

    padding: 8px 14px;

    margin-bottom: 22px;

    border-radius: 50px;

    background: #dbeafe;

    color: #2563eb;

    font-size: 12.72px;

    font-weight: 800;

    letter-spacing: 1px;
}


.hero h1 {
    font-size: clamp(47.7px, 5vw, 76.32px);

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 25px;

    color: #111827;
}


.hero h1 span {
    display: block;

    color: #2563eb;
}


.hero-text {
    max-width: 600px;

    color: #64748b;

    font-size: 19.08px;

    line-height: 1.7;

    margin-bottom: 32px;
}


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

.hero-buttons {
    display: flex;

    gap: 14px;

    margin-bottom: 45px;
}


.btn {
    display: inline-flex;

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

    padding: 14px 24px;

    border-radius: 8px;

    font-weight: 700;

    transition: 0.3s;
}


.primary {
    background: #111827;

    color: white;

    box-shadow:
        0 8px 20px rgba(17, 24, 39, 0.15);
}


.primary:hover {
    background: #2563eb;

    transform: translateY(-2px);
}


.secondary {
    border: 1px solid #cbd5e1;

    color: #111827;

    background: rgba(255,255,255,0.7);
}


.secondary:hover {
    border-color: #2563eb;

    color: #2563eb;
}


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

.hero-stats {
    display: flex;

    gap: 45px;
}


.hero-stats div {
    display: flex;

    flex-direction: column;
}


.hero-stats strong {
    font-size: 26.5px;

    color: #111827;
}


.hero-stats span {
    font-size: 13.78px;

    color: #64748b;
}


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

.hero-visual {
    position: relative;

    min-height: 430px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Main dashboard card */

.main-card {
    width: 390px;

    min-height: 280px;

    padding: 32px;

    border-radius: 22px;

    background: white;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.14);

    transform: rotate(2deg);
}


.card-top {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #64748b;

    font-size: 13.78px;

    font-weight: 600;

    margin-bottom: 40px;
}


.card-top span:first-child {
    font-size: 26.5px;
}


.main-card h3 {
    font-size: 31.8px;

    margin-bottom: 5px;
}


.main-card p {
    color: #64748b;

    margin-bottom: 35px;
}


/* Progress */

.progress-info {
    display: flex;

    justify-content: space-between;

    font-size: 13.78px;

    margin-bottom: 9px;
}


.progress-bar {
    height: 9px;

    background: #e5e7eb;

    border-radius: 20px;

    overflow: hidden;
}


.progress-bar div {
    width: 78%;

    height: 100%;

    background: #2563eb;

    border-radius: 20px;
}


/* =========================
   FLOATING CARDS
========================= */

.floating-card {
    position: absolute;

    padding: 13px 18px;

    border-radius: 12px;

    background: white;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.10);

    font-size: 13.78px;

    color: #374151;
}


.card-one {
    top: 35px;

    right: 5px;
}


.card-two {
    bottom: 45px;

    right: 0;
}


.card-three {
    bottom: 5px;

    left: 15px;
}

/* =========================
   SECTION
========================= */

.courses,
.why-us {
    padding: 90px 8%;
}

.section-heading {
    text-align: center;
    margin-bottom: 50px;
}

.section-heading p {
    color: #2563eb;
    font-size: 13.78px;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-heading h2 {
    font-size: 40.28px;
    margin: 8px 0;
}

.section-heading span {
    color: #64748b;
}


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

.course-container {
    display: grid;

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

    gap: 22px;
}

.course-card {
    padding: 30px;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: white;

    transition: 0.3s;
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.08);
}

.course-icon {
    font-size: 44.52px;
    margin-bottom: 18px;
}

.course-card h3 {
    margin-bottom: 10px;
}

.course-card p {
    color: #64748b;
    margin-bottom: 20px;
}

.course-card a {
    color: #2563eb;
    font-weight: 700;
}


/* =========================
   FEATURES
========================= */

.why-us {
    background: #f8fafc;
}

.features {
    display: grid;

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

    gap: 25px;
}

.feature {
    text-align: center;
    padding: 30px;
}

.feature span {
    font-size: 42.4px;
}

.feature h3 {
    margin: 15px 0 8px;
}

.feature p {
    color: #64748b;
}


/* =========================
   FOOTER
========================= */

footer {
    padding: 50px 8%;
    text-align: center;

    background: #111827;
    color: white;
}

footer p {
    color: #cbd5e1;
}

.copyright {
    margin-top: 20px;
    font-size: 13.78px;
}


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

@media (max-width: 900px) {

    .navbar {
        padding: 0 5%;
    }

    .navbar nav {
        display: none;
    }

    .hero {
        padding: 70px 6%;
    }

    .hero {
    grid-template-columns: 1fr;

    padding: 70px 6%;

    text-align: center;
}


.hero-content {
    margin: auto;
}


.hero-text {
    margin-left: auto;
    margin-right: auto;
}


.hero-buttons {
    justify-content: center;
}


.hero-stats {
    justify-content: center;
}


.hero-visual {
    min-height: 400px;

    margin-top: 20px;
}


.main-card {
    width: min(390px, 90%);
}


.card-one {
    right: 0;
}


.card-two {
    right: 0;
}


.card-three {
    left: 0;
}
}


@media (max-width: 600px) {

    .course-container,
    .features {
        grid-template-columns: 1fr;
    }

    .hero h1 {
    font-size: 42.4px;

    letter-spacing: -1px;
}


.hero-text {
    font-size: 16.96px;
}


.hero-buttons {
    flex-direction: column;
}


.hero-stats {
    gap: 25px;
}


.hero-visual {
    min-height: 350px;
}


.main-card {
    padding: 24px;

    min-height: 250px;
}


.floating-card {
    font-size: 11.66px;

    padding: 10px 12px;
}
}
/* =========================
   MOBILE NAVIGATION
========================= */

@media (max-width: 900px) {

    .navbar {
        height: 70px;
        padding: 0 5%;
    }


    .logo-area {
        font-size: 18.02px;
    }


    .logo-area img {
        width: 42px;
        height: 42px;
    }


    .nav-links {
        display: none;
    }


    .menu-btn {
        display: block;
    }

}
/* =========================
   ACADEMIC LEVEL SECTION
========================= */

.academic-level {
    padding: 90px 8%;
    background: #ffffff;
}


/* =========================
   SECTION HEADING
========================= */

.section-heading {
    text-align: center;
    margin-bottom: 55px;
}

.section-heading p {
    color: #2563eb;
    font-size: 13.78px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.section-heading h2 {
    font-size: 42.4px;
    color: #111827;
    margin-bottom: 12px;
}

.section-heading span {
    color: #64748b;
    font-size: 16.96px;
}


/* =========================
   LEVEL CONTAINER
========================= */

.level-container {
    max-width: 1050px;
    margin: auto;

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

    gap: 30px;
}


/* =========================
   LEVEL CARD
========================= */

.level-card {
    padding: 38px;

    display: flex;
    align-items: flex-start;

    gap: 25px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    transition: 0.3s;

    cursor: pointer;
}


.level-card:hover {
    transform: translateY(-6px);

    border-color: #2563eb;

    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.10);
}


/* =========================
   LEVEL ICON
========================= */

.level-icon {
    min-width: 70px;
    height: 70px;

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

    border-radius: 15px;

    background: #dbeafe;

    font-size: 33.92px;
}


/* =========================
   LEVEL CONTENT
========================= */

.level-content {
    flex: 1;
}

.level-label {
    font-size: 11.66px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #64748b;
}


.level-content h3 {
    font-size: 40.28px;

    margin: 5px 0 10px;

    color: #111827;
}


.level-content p {
    color: #64748b;

    line-height: 1.6;

    margin-bottom: 18px;
}


.level-content a {
    color: #2563eb;

    font-size: 14.84px;

    font-weight: 700;
}


.level-content a:hover {
    text-decoration: underline;
}
/* =========================
   ACADEMIC LEVEL - MOBILE
========================= */

@media (max-width: 700px) {

    .academic-level {
        padding: 70px 6%;
    }

    .section-heading h2 {
        font-size: 33.92px;
    }

    .level-container {
        grid-template-columns: 1fr;
    }

    .level-card {
        padding: 28px;
    }

    .level-content h3 {
        font-size: 33.92px;
    }

}
/* =========================
   SSC SUBJECT CARDS
========================= */

.subject-container {
    max-width: 1050px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}


.subject-card {
    padding: 35px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    transition: 0.3s;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.05);
}


.subject-card:hover {
    transform: translateY(-6px);

    border-color: #2563eb;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.10);
}


.subject-icon {
    width: 65px;
    height: 65px;

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

    margin-bottom: 22px;

    border-radius: 15px;

    background: #dbeafe;

    font-size: 31.8px;
}


.subject-card h3 {
    font-size: 26.5px;

    color: #111827;

    margin-bottom: 10px;
}


.subject-card p {
    color: #64748b;

    line-height: 1.6;

    margin-bottom: 20px;
}


.subject-card a {
    color: #2563eb;

    font-size: 14.84px;

    font-weight: 700;
}


.subject-card a:hover {
    text-decoration: underline;
}


/* =========================
   SUBJECT CARDS - MOBILE
========================= */

@media (max-width: 700px) {

    .subject-container {
        grid-template-columns: 1fr;
    }

    .subject-card {
        padding: 28px;
    }

}
/* =========================
   HSC COURSE INFORMATION
========================= */

.course-label {
    display: inline-block;

    margin-bottom: 8px;

    color: #64748b;

    font-size: 10.6px;

    font-weight: 800;

    letter-spacing: 1px;
}


.course-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #e5e7eb;
}


.course-bottom strong {
    font-size: 21.2px;

    color: #111827;
}


.course-bottom a {
    padding: 9px 14px;

    background: #111827;

    color: #ffffff;

    border-radius: 7px;

    font-size: 12.72px;

    font-weight: 700;

    transition: 0.3s;
}


.course-bottom a:hover {
    background: #1d5de7;

    color: #ffffff;
}
@media (max-width: 500px) {

    .course-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================
   COMPLETE COURSE
========================= */

.complete-course-container {
    max-width: 900px;
    margin: auto;
}


.complete-course-card {
    padding: 40px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 22px;

    box-shadow:
        0 15px 40px rgba(15, 23, 42, 0.08);

    transition: 0.3s;
}


.complete-course-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 55px rgba(15, 23, 42, 0.12);
}


/* Course Header */

.complete-course-header {
    display: flex;

    align-items: center;

    gap: 25px;

    padding-bottom: 30px;

    border-bottom: 1px solid #e5e7eb;
}


.complete-course-icon {
    min-width: 80px;
    height: 80px;

    display: flex;

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

    background: #dbeafe;

    border-radius: 18px;

    font-size: 40.28px;
}


.complete-course-header h3 {
    font-size: 33.92px;

    color: #111827;

    margin: 5px 0 8px;
}


.complete-course-header p {
    color: #64748b;

    line-height: 1.6;
}


/* Subjects */

.course-subjects {
    padding: 28px 0;
}


.course-subjects h4 {
    font-size: 19.08px;

    margin-bottom: 18px;

    color: #111827;
}


.subject-list {
    display: grid;

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

    gap: 12px;
}


.subject-list span {
    padding: 12px 15px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 9px;

    color: #374151;

    font-size: 14.84px;

    font-weight: 600;
}


/* Features */

.course-features {
    display: grid;

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

    gap: 12px;

    padding: 25px 0;

    border-top: 1px solid #e5e7eb;

    border-bottom: 1px solid #e5e7eb;
}


.course-features div {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    text-align: center;

    font-size: 25.44px;
}


.course-features span {
    font-size: 12.72px;

    color: #64748b;

    font-weight: 600;
}


/* Bottom */

.complete-course-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 30px;
}


.course-price {
    display: flex;

    flex-direction: column;
}


.course-price span {
    color: #64748b;

    font-size: 12.72px;

    margin-bottom: 3px;
}


.course-price strong {
    color: #111827;

    font-size: 33.92px;
}


.buy-course-btn {
    padding: 13px 22px;

    background: #111827;

    color: #ffffff;

    border-radius: 8px;

    font-size: 14.84px;

    font-weight: 700;

    transition: 0.3s;
}


.buy-course-btn:hover {
    background: #2563eb;

    color: #ffffff;
}


/* =========================
   COMPLETE COURSE MOBILE
========================= */

@media (max-width: 700px) {

    .complete-course-card {
        padding: 25px;
    }

    .complete-course-header {
        align-items: flex-start;
    }

    .complete-course-header h3 {
        font-size: 26.5px;
    }

    .subject-list {
        grid-template-columns: 1fr;
    }

    .course-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .complete-course-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .buy-course-btn {
        width: 100%;

        text-align: center;
    }

}
/* =========================
   COURSE HERO
========================= */

.course-hero {
    min-height: 570px;

    padding: 80px 8%;

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    align-items: center;

    gap: 70px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(37, 99, 235, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f8fafc,
            #eef4ff
        );
}


/* Hero Content */

.course-hero-content {
    max-width: 650px;
}


.course-badge {
    display: inline-block;

    padding: 8px 14px;

    margin-bottom: 18px;

    border-radius: 50px;

    background: #dbeafe;

    color: #2563eb;

    font-size: 11.66px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.course-hero h1 {
    font-size: clamp(47.7px, 5vw, 72.08px);

    line-height: 1.05;

    letter-spacing: -2px;

    color: #111827;

    margin-bottom: 20px;
}


.course-hero-content > p {
    max-width: 570px;

    color: #64748b;

    font-size: 19.08px;

    line-height: 1.7;

    margin-bottom: 28px;
}


/* Price */

.course-price-box {
    display: flex;

    flex-direction: column;

    margin-bottom: 25px;
}


.course-price-box span {
    color: #64748b;

    font-size: 13.78px;

    font-weight: 600;
}


.course-price-box strong {
    color: #111827;

    font-size: 44.52px;

    line-height: 1.2;
}


/* Buy Button */

.main-buy-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 28px;

    background: #111827;

    color: #ffffff;

    border-radius: 9px;

    font-size: 15.9px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(17, 24, 39, 0.15);

    transition: 0.3s;
}


.main-buy-btn:hover {
    background: #2563eb;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================
   HERO COURSE CARD
========================= */

.course-hero-card {
    padding: 42px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 22px;

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.10);
}


.hero-card-icon {
    width: 75px;
    height: 75px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 18px;

    background: #dbeafe;

    font-size: 38.16px;
}


.course-hero-card h3 {
    color: #111827;

    font-size: 27.56px;

    line-height: 1.3;

    margin-bottom: 12px;
}


.course-hero-card p {
    color: #64748b;

    line-height: 1.7;

    margin-bottom: 25px;
}


.locked-info {
    padding: 13px 15px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 9px;

    color: #475569;

    font-size: 13.78px;

    font-weight: 600;
}


/* =========================
   INCLUDED SUBJECTS
========================= */

.included-section {
    padding: 90px 8%;

    background: #ffffff;
}


.included-subjects {
    max-width: 1050px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}


.included-item {
    padding: 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    transition: 0.3s;
}


.included-item:hover {
    border-color: #2563eb;

    transform: translateY(-3px);
}


.included-item span {
    font-size: 27.56px;
}


.included-item strong {
    color: #374151;

    font-size: 14.84px;
}
/* =========================
   COURSE HERO - MOBILE
========================= */

@media (max-width: 800px) {

    .course-hero {
        grid-template-columns: 1fr;

        padding: 65px 6%;

        gap: 40px;

        text-align: center;
    }


    .course-hero-content {
        margin: auto;
    }


    .course-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }


    .course-price-box {
        align-items: center;
    }


    .course-hero-card {
        text-align: left;
    }


    .included-section {
        padding: 70px 6%;
    }


    .included-subjects {
        grid-template-columns: 1fr;
    }

}
/* =========================
   HSC COURSE CARDS
========================= */

.courses-section {
    padding: 90px 8%;
    background: #f8fafc;
}

.course-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.course-card {
    position: relative;
    padding: 35px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
    transition: 0.3s;
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
    border-color: #2563eb;
}

.course-badge {
    display: inline-block;
    padding: 7px 12px;
    margin-bottom: 22px;
    border-radius: 50px;
    background: #dbeafe;
    color: #2563eb;
    font-size: 10.6px;
    font-weight: 800;
    letter-spacing: 1px;
}

.featured-course {
    border: 2px solid #2563eb;
}

.featured-badge {
    background: #111827;
    color: #ffffff;
}

.course-card-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 17px;
    background: #dbeafe;
    font-size: 33.92px;
}

.course-card h3 {
    margin-bottom: 8px;
    color: #111827;
    font-size: 30.74px;
}

.course-batch {
    margin-bottom: 15px;
    color: #2563eb;
    font-size: 15.9px;
    font-weight: 800;
}

.course-card > p {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 22px;
}

.course-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 25px;
}

.course-features span {
    color: #475569;
    font-size: 13.78px;
    font-weight: 600;
}

.enrollment-count {
    margin-bottom: 25px;
    padding: 10px 13px;
    background: #f1f5f9;
    border-radius: 8px;
    color: #475569;
    font-size: 13.78px;
    font-weight: 700;
}

.course-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.course-price {
    display: flex;
    flex-direction: column;
}

.course-price small {
    color: #64748b;
    font-size: 12.72px;
}

.course-price strong {
    color: #111827;
    font-size: 36.04px;
}

.buy-course-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    background: #111827;
    color: #ffffff;
    border-radius: 8px;
    font-size: 14.84px;
    font-weight: 800;
    transition: 0.3s;
}

.buy-course-btn:hover {
    background: #2563eb;
    color: #ffffff;
}

.payment-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 12.72px;
    font-weight: 600;
}


/* MOBILE */

@media (max-width: 800px) {

    .courses-section {
        padding: 70px 6%;
    }

    .course-container {
        grid-template-columns: 1fr;
    }

    .course-card {
        padding: 28px;
    }

    .course-features {
        grid-template-columns: 1fr;
    }

}
/* =========================
   PREMIUM HSC COURSE CARDS
========================= */

.course-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.premium-course-card {
    position: relative;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    transition: 0.3s ease;
    overflow: hidden;
}

.premium-course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.14);
    border-color: #bfdbfe;
}

.academy-card {
    border: 1.5px solid #2563eb;
}

.academy-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -80px;
    right: -80px;
    background: rgba(37, 99, 235, 0.08);
    border-radius: 50%;
}

.course-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 24px;
}

.course-tag,
.course-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.course-tag {
    padding: 8px 13px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10.6px;
}

.popular-tag {
    background: #111827;
    color: #ffffff;
}

.course-status {
    padding: 7px 12px;
    background: #ecfdf5;
    color: #047857;
    font-size: 10.6px;
}

.course-main-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    border-radius: 18px;
    font-size: 36.04px;
}

.academy-icon {
    background: linear-gradient(135deg, #111827, #2563eb);
}

.course-title-area {
    margin-bottom: 24px;
}

.course-level {
    display: inline-block;
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 12.72px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.course-title-area h3 {
    margin-bottom: 12px;
    color: #111827;
    font-size: 30.74px;
    line-height: 1.2;
}

.course-title-area p {
    color: #64748b;
    font-size: 14.84px;
    line-height: 1.7;
}

.course-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.course-subjects span {
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    color: #475569;
    font-size: 12.72px;
    font-weight: 700;
}

.course-resources {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.course-resources div {
    min-height: 72px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.course-resources strong {
    font-size: 21.2px;
}

.course-resources span {
    color: #475569;
    font-size: 12.72px;
    font-weight: 700;
}

.course-enrollment {
    margin-bottom: 24px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #eff6ff;
    border-radius: 12px;
    color: #334155;
}

.course-enrollment span {
    font-size: 19.08px;
}

.course-enrollment strong {
    color: #111827;
    font-size: 15.9px;
}

.course-enrollment small {
    color: #64748b;
    font-size: 12.72px;
}

.course-card-footer {
    padding-top: 22px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.premium-price {
    display: flex;
    flex-direction: column;
}

.premium-price small {
    margin-bottom: 2px;
    color: #64748b;
    font-size: 11.66px;
    font-weight: 600;
}

.premium-price strong {
    color: #111827;
    font-size: 38.16px;
    line-height: 1;
}

.premium-buy-btn {
    min-width: 135px;
    padding: 14px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    color: #ffffff;
    border-radius: 11px;
    font-size: 13.78px;
    font-weight: 800;
    transition: 0.3s ease;
}

.premium-buy-btn:hover {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-2px);
}

.course-lock {
    margin-top: 18px;
    padding: 11px 13px;
    background: #f8fafc;
    border-radius: 10px;
    color: #64748b;
    font-size: 11.66px;
    font-weight: 600;
    text-align: center;
}


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

@media (max-width: 900px) {

    .course-container {
        grid-template-columns: 1fr;
        max-width: 650px;
    }

}

@media (max-width: 600px) {

    .premium-course-card {
        padding: 24px;
        border-radius: 20px;
    }

    .course-title-area h3 {
        font-size: 26.5px;
    }

    .course-resources {
        grid-template-columns: 1fr;
    }

    .course-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .premium-buy-btn {
        width: 100%;
    }

}
/* =====================================================
   STUDY HARBOR — PREMIUM COURSE CARD POLISH
===================================================== */

.courses-section {
    position: relative;
    padding: 105px 8%;
    background:
        radial-gradient(circle at 15% 10%, rgba(37, 99, 235, 0.07), transparent 32%),
        radial-gradient(circle at 85% 80%, rgba(99, 102, 241, 0.06), transparent 28%),
        #f8fafc;
}


/* HEADING */

.courses-section .section-heading {
    max-width: 680px;
    margin: 0 auto 55px;
}

.courses-section .section-heading p {
    margin-bottom: 10px;
    font-size: 11.66px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.courses-section .section-heading h2 {
    margin-bottom: 12px;
    font-size: clamp(36.04px, 4vw, 48.76px);
    letter-spacing: -1.5px;
}

.courses-section .section-heading span {
    color: #64748b;
    line-height: 1.7;
}


/* COURSE GRID */

.course-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    align-items: stretch;
}


/* MAIN CARD */

.premium-course-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 680px;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.96)
        );

    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 26px;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.03),
        0 18px 45px rgba(15, 23, 42, 0.07);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* SUBTLE LIGHT EFFECT */

.premium-course-card::after {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    top: -130px;
    left: -120px;

    background: rgba(37, 99, 235, 0.07);
    border-radius: 50%;

    pointer-events: none;

    transition: 0.4s ease;
}


/* PREMIUM HOVER */

.premium-course-card:hover {
    transform: translateY(-10px);

    border-color: rgba(37, 99, 235, 0.35);

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.05),
        0 30px 70px rgba(15, 23, 42, 0.13);
}

.premium-course-card:hover::after {
    transform: scale(1.25);
}


/* ACADEMY HEIST FEATURED CARD */

.academy-card {
    border: 1.5px solid rgba(37, 99, 235, 0.55);
}

.academy-card::before {
    content: "";
    position: absolute;

    width: 230px;
    height: 230px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.18),
            rgba(37, 99, 235, 0)
        );

    pointer-events: none;
}


/* TOP LABEL AREA */

.course-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;
}


/* BADGES */

.course-tag {
    padding: 8px 14px;

    border: 1px solid #dbeafe;
    border-radius: 999px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 10.6px;
    font-weight: 800;
    letter-spacing: 1px;
}

.popular-tag {
    background: #111827;
    border-color: #111827;
    color: #ffffff;

    box-shadow: 0 7px 18px rgba(17, 24, 39, 0.15);
}

.course-status {
    padding: 7px 12px;

    background: #ecfdf5;
    border: 1px solid #d1fae5;

    color: #047857;

    border-radius: 999px;

    font-size: 9.54px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* COURSE ICON */

.course-main-icon {
    position: relative;
    z-index: 2;

    width: 76px;
    height: 76px;

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

    margin-bottom: 24px;

    border-radius: 20px;

    background:
        linear-gradient(145deg, #eff6ff, #dbeafe);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 25px rgba(37, 99, 235, 0.10);

    font-size: 36.04px;

    transition: 0.35s ease;
}

.premium-course-card:hover .course-main-icon {
    transform: translateY(-3px) scale(1.04);
}

.academy-icon {
    background:
        linear-gradient(135deg, #111827, #1e3a8a, #2563eb);

    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.22);
}


/* TITLE */

.course-title-area {
    position: relative;
    z-index: 2;
    margin-bottom: 25px;
}

.course-level {
    display: inline-block;
    margin-bottom: 9px;

    color: #2563eb;

    font-size: 11.66px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.course-title-area h3 {
    margin-bottom: 12px;

    color: #0f172a;

    font-size: 31.8px;
    font-weight: 800;

    line-height: 1.18;
    letter-spacing: -0.7px;
}

.course-title-area p {
    color: #64748b;

    font-size: 13.78px;
    line-height: 1.75;
}


/* SUBJECT CHIPS */

.course-subjects {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 27px;
}

.course-subjects span {
    padding: 9px 12px;

    background: rgba(248, 250, 252, 0.95);

    border: 1px solid #e2e8f0;
    border-radius: 999px;

    color: #475569;

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

    transition: 0.25s ease;
}

.course-subjects span:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;

    transform: translateY(-2px);
}


/* RESOURCE BOXES */

.course-resources {
    display: grid;

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

    gap: 12px;

    margin-bottom: 25px;
}

.course-resources div {
    min-height: 72px;

    padding: 15px;

    display: flex;
    align-items: center;

    gap: 10px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border: 1px solid #e8edf3;
    border-radius: 15px;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.025);

    transition: 0.25s ease;
}

.course-resources div:hover {
    border-color: #bfdbfe;

    background: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.06);
}

.course-resources strong {
    font-size: 20.14px;
}

.course-resources span {
    color: #475569;

    font-size: 11.66px;
    font-weight: 700;
}


/* ENROLLMENT */

.course-enrollment {
    padding: 13px 15px;

    margin-bottom: 24px;

    display: flex;
    align-items: center;

    gap: 7px;

    background:
        linear-gradient(
            90deg,
            #eff6ff,
            #f8fafc
        );

    border: 1px solid #dbeafe;

    border-radius: 13px;
}


/* PRICE / BUTTON AREA */

.course-card-footer {
    margin-top: auto;

    padding-top: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid #e5e7eb;
}

.premium-price small {
    display: block;

    margin-bottom: 5px;

    color: #94a3b8;

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

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.premium-price strong {
    color: #0f172a;

    font-size: 40.28px;
    font-weight: 900;

    letter-spacing: -1px;
}


/* BUY BUTTON */

.premium-buy-btn {
    min-width: 145px;

    padding: 15px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #111827,
            #1f2937
        );

    color: #ffffff;

    border-radius: 12px;

    font-size: 12.72px;
    font-weight: 800;

    box-shadow:
        0 10px 24px rgba(17, 24, 39, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.premium-buy-btn:hover {
    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(37, 99, 235, 0.27);
}


/* PAYMENT LOCK */

.course-lock {
    margin-top: 18px;

    padding: 11px 13px;

    background: rgba(248, 250, 252, 0.9);

    border: 1px solid #edf1f5;
    border-radius: 11px;

    color: #94a3b8;

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

    text-align: center;
}


/* =========================================
   PREMIUM COURSE ARTWORK
========================================= */

.course-cover {
    position: relative;

    width: 100%;
    height: 225px;

    margin-bottom: 38px;
    padding: 0;

    overflow: hidden;

    border-radius: 22px;

    background: #05070b;

    border: 1px solid rgba(226, 232, 240, 0.8);

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.10),
        0 25px 55px rgba(15, 23, 42, 0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* COURSE ARTWORK IMAGE */

.course-cover img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #05070b;

    transition: transform 0.5s ease;
}


/* PREMIUM DARK OVERLAY */

.course-cover::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(15, 23, 42, 0.14)
        );

    pointer-events: none;
}


/* PREMIUM HOVER */

.premium-course-card:hover .course-cover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(15, 23, 42, 0.13),
        0 30px 65px rgba(15, 23, 42, 0.12);
}

.premium-course-card:hover .course-cover img {
    transform: scale(1.025);
}


/* =========================================
   MOBILE COURSE ARTWORK
========================================= */

@media (max-width: 600px) {

    .course-cover {
        height: 180px;
        margin-bottom: 28px;
        border-radius: 18px;
    }

}
/* =========================================
   PREMIUM COURSE CARD LOWER SECTION
========================================= */

/* KEEP BOTH CARDS SAME HEIGHT */

.premium-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* SUBJECT CHIPS */

.course-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 6px 0 24px;
}

.course-subjects span {
    padding: 8px 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 999px;

    color: #475569;

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

    transition: 0.25s ease;
}

.course-subjects span:hover {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;

    transform: translateY(-2px);
}


/* COURSE FEATURES */

.course-resources {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin-bottom: 22px;
}

.course-resources div {
    min-height: 68px;

    padding: 14px 16px;

    display: flex;
    align-items: center;

    gap: 11px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.035);

    transition: 0.25s ease;
}

.course-resources div:hover {
    transform: translateY(-3px);

    border-color: #bfdbfe;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.07);
}

.course-resources strong {
    font-size: 19.08px;
}

.course-resources span {
    color: #334155;
    font-size: 12.72px;
    font-weight: 700;
}


/* ENROLLED STUDENTS */

.course-enrollment {
    min-height: 54px;

    padding: 12px 15px;
    margin-bottom: 22px;

    display: flex;
    align-items: center;

    gap: 7px;

    background:
        linear-gradient(
            90deg,
            #eff6ff,
            #f8fafc
        );

    border: 1px solid #dbeafe;
    border-radius: 13px;
}

.course-enrollment strong {
    color: #0f172a;
    font-size: 15.9px;
    font-weight: 900;
}

.course-enrollment small {
    color: #64748b;
    font-size: 12.72px;
}


/* PRICE + BUY AREA */

.course-card-footer {
    margin-top: auto;

    padding-top: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid #e5e7eb;
}


/* PRICE */

.premium-price small {
    display: block;

    margin-bottom: 4px;

    color: #94a3b8;

    font-size: 10.6px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.premium-price strong {
    color: #0f172a;

    font-size: 40.28px;
    font-weight: 900;

    line-height: 1;
    letter-spacing: -1px;
}


/* BUY NOW BUTTON */

.premium-buy-btn {
    min-width: 150px;

    padding: 15px 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color: #ffffff;

    border-radius: 12px;

    font-size: 12.72px;
    font-weight: 800;

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.17);

    transition: 0.3s ease;
}

.premium-buy-btn:hover {
    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(37, 99, 235, 0.25);
}


/* PAYMENT NOTICE */

.course-lock {
    margin-top: 17px;

    padding: 11px 14px;

    background: #f8fafc;

    border: 1px solid #edf1f5;
    border-radius: 11px;

    color: #94a3b8;

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

    text-align: center;
}


/* MOBILE */

@media (max-width: 600px) {

    .course-resources {
        grid-template-columns: 1fr;
    }

    .course-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .premium-buy-btn {
        width: 100%;
    }

}
/* =========================================
   CHECKOUT COURSE IMAGE FIX
========================================= */

.summary-course-image {
    width: 100%;
    height: 190px;

    margin: 22px 0 24px;

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

    overflow: hidden;

    background: #05070b;

    border-radius: 18px;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.08);
}

.summary-course-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;
}


/* MOBILE */

@media (max-width: 600px) {

    .summary-course-image {
        height: 160px;
    }

}
/* =========================================
   PREMIUM CHECKOUT PAGE
========================================= */

.checkout-page {
    min-height: calc(100vh - 82px);

    padding: 70px 8%;

    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);

    gap: 42px;

    align-items: start;

    background:
        radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.07), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(99, 102, 241, 0.05), transparent 28%),
        #f8fafc;
}


/* LEFT SIDE */

.checkout-main {
    min-width: 0;
}

.checkout-heading {
    margin-bottom: 30px;
}

.checkout-heading > span {
    display: inline-block;

    margin-bottom: 10px;

    color: #2563eb;

    font-size: 11.66px;
    font-weight: 900;

    letter-spacing: 1.8px;
}

.checkout-heading h1 {
    margin-bottom: 12px;

    color: #0f172a;

    font-size: clamp(36.04px, 4vw, 50.88px);
    font-weight: 900;

    letter-spacing: -1.5px;
    line-height: 1.1;
}

.checkout-heading p {
    max-width: 650px;

    color: #64748b;

    font-size: 15.9px;
    line-height: 1.7;
}


/* FORM CARD */

.checkout-form-card {
    padding: 32px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 24px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.05),
        0 22px 55px rgba(15, 23, 42, 0.05);
}

.checkout-section-title {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 28px;
}

.checkout-section-title > span {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 13.78px;
    font-weight: 900;
}

.checkout-section-title h2 {
    margin-bottom: 4px;

    color: #0f172a;

    font-size: 21.2px;
    font-weight: 800;
}

.checkout-section-title p {
    color: #94a3b8;

    font-size: 12.72px;
}


/* FORM GRID */

.checkout-form-grid {
    display: grid;

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

    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.form-group label {
    color: #334155;

    font-size: 12.72px;
    font-weight: 700;
}

.form-group input {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid #dbe3ec;
    border-radius: 12px;

    background: #fbfdff;

    color: #0f172a;

    font-size: 14.84px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.form-group input::placeholder {
    color: #a0aec0;
}

.form-group input:focus {
    background: #ffffff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.08);
}


/* SECURITY NOTICE */

.checkout-security {
    margin-top: 22px;

    padding: 18px 20px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    background:
        linear-gradient(
            90deg,
            #eff6ff,
            #f8fafc
        );

    border: 1px solid #dbeafe;
    border-radius: 16px;
}

.checkout-security > span {
    font-size: 22.26px;
}

.checkout-security strong {
    display: block;

    margin-bottom: 4px;

    color: #0f172a;

    font-size: 13.78px;
}

.checkout-security p {
    color: #64748b;

    font-size: 12.72px;
    line-height: 1.6;
}


/* =========================================
   ORDER SUMMARY
========================================= */

.checkout-summary {
    position: sticky;
    top: 105px;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );

    border: 1px solid #dbe3ec;
    border-radius: 24px;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.07),
        0 30px 70px rgba(15, 23, 42, 0.07);
}

.summary-label {
    display: inline-flex;

    padding: 7px 11px;

    margin-bottom: 4px;

    background: #eff6ff;

    border-radius: 999px;

    color: #2563eb;

    font-size: 9.54px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


/* IMAGE */

.summary-course-image {
    width: 100%;
    height: 190px;

    margin: 20px 0 22px;

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

    overflow: hidden;

    background: #05070b;

    border-radius: 18px;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.08);
}

.summary-course-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;
}


/* COURSE INFO */

.summary-batch {
    display: inline-block;

    margin-bottom: 7px;

    color: #2563eb;

    font-size: 11.66px;
    font-weight: 900;

    letter-spacing: 1.2px;
}

.checkout-summary h2 {
    margin-bottom: 22px;

    color: #0f172a;

    font-size: 25.44px;
    font-weight: 900;

    line-height: 1.2;
}


/* SUMMARY INFO */

.summary-info {
    display: grid;

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

    gap: 12px;
}

.summary-info div {
    padding: 13px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.summary-info span {
    display: block;

    margin-bottom: 4px;

    color: #94a3b8;

    font-size: 9.54px;
    font-weight: 700;
}

.summary-info strong {
    color: #334155;

    font-size: 11.66px;
    font-weight: 800;
}


/* DIVIDER */

.summary-divider {
    height: 1px;

    margin: 22px 0;

    background: #e5e7eb;
}


/* PRICE */

.summary-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 20px;
}

.summary-price span {
    color: #64748b;

    font-size: 12.72px;
    font-weight: 700;
}

.summary-price strong {
    color: #0f172a;

    font-size: 40.28px;
    font-weight: 900;

    letter-spacing: -1px;
    line-height: 1;
}


/* PAYMENT BUTTON */

.checkout-pay-btn {
    width: 100%;

    padding: 15px 18px;

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

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color: #ffffff;

    border-radius: 12px;

    font-size: 13.78px;
    font-weight: 800;

    box-shadow:
        0 12px 26px rgba(15, 23, 42, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.checkout-pay-btn:hover {
    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 16px 32px rgba(37, 99, 235, 0.25);
}


/* BACK LINK */

.back-to-course {
    display: block;

    margin-top: 15px;

    text-align: center;

    color: #64748b;

    font-size: 11.66px;
    font-weight: 700;
}

.back-to-course:hover {
    color: #2563eb;
}


/* SMALL SECURITY MESSAGE */

.checkout-small-text {
    margin-top: 18px;

    padding-top: 17px;

    border-top: 1px solid #e5e7eb;

    color: #94a3b8;

    font-size: 10.6px;
    line-height: 1.6;

    text-align: center;
}


/* ERROR PAGE */

.checkout-error {
    grid-column: 1 / -1;

    max-width: 600px;

    margin: 80px auto;

    padding: 45px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.08);
}

.checkout-error h1 {
    color: #0f172a;

    margin-bottom: 12px;
}

.checkout-error p {
    color: #64748b;

    margin-bottom: 20px;
}

.checkout-error a {
    color: #2563eb;

    font-weight: 800;
}


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

@media (max-width: 950px) {

    .checkout-page {
        grid-template-columns: 1fr;

        padding: 60px 6%;
    }

    .checkout-summary {
        position: static;
    }

}


@media (max-width: 650px) {

    .checkout-page {
        padding: 45px 5%;
    }

    .checkout-form-card,
    .checkout-summary {
        padding: 23px;
        border-radius: 20px;
    }

    .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .summary-course-image {
        height: 165px;
    }

}
/* =========================================
   PREMIUM PAYMENT PAGE
========================================= */

.payment-page {
    min-height: calc(100vh - 82px);

    padding: 70px 8%;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);

    gap: 42px;

    align-items: start;

    background:
        radial-gradient(circle at 10% 12%, rgba(37, 99, 235, 0.07), transparent 30%),
        radial-gradient(circle at 88% 90%, rgba(99, 102, 241, 0.05), transparent 28%),
        #f8fafc;
}


/* LEFT SIDE */

.payment-main {
    min-width: 0;
}

.payment-heading {
    margin-bottom: 30px;
}

.payment-heading > span {
    display: inline-block;

    margin-bottom: 10px;

    color: #2563eb;

    font-size: 11.66px;
    font-weight: 900;

    letter-spacing: 1.8px;
}

.payment-heading h1 {
    margin-bottom: 12px;

    color: #0f172a;

    font-size: clamp(36.04px, 4vw, 50.88px);
    font-weight: 900;

    letter-spacing: -1.5px;
    line-height: 1.1;
}

.payment-heading p {
    max-width: 650px;

    color: #64748b;

    font-size: 15.9px;
    line-height: 1.7;
}


/* PAYMENT CARDS */

.payment-card {
    margin-bottom: 22px;
    padding: 30px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 24px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.05),
        0 22px 55px rgba(15, 23, 42, 0.04);
}


/* SECTION TITLE */

.payment-section-title {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 26px;
}

.payment-section-title > span {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    background: #eff6ff;

    color: #2563eb;

    border-radius: 12px;

    font-size: 13.78px;
    font-weight: 900;
}

.payment-section-title h2 {
    margin-bottom: 4px;

    color: #0f172a;

    font-size: 21.2px;
    font-weight: 800;
}

.payment-section-title p {
    color: #94a3b8;

    font-size: 12.72px;
}


/* STUDENT DETAILS */

.payment-student-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.payment-student-grid div {
    padding: 15px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.payment-student-grid span {
    display: block;

    margin-bottom: 6px;

    color: #94a3b8;

    font-size: 10.6px;
    font-weight: 700;
}

.payment-student-grid strong {
    color: #334155;

    font-size: 13.78px;
    font-weight: 800;

    word-break: break-word;
}


/* PAYMENT METHODS */

.payment-methods {
    display: grid;
    gap: 14px;
}

.payment-method {
    position: relative;

    padding: 17px;

    display: flex;
    align-items: center;

    gap: 14px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.payment-method:hover {
    transform: translateY(-2px);

    border-color: #bfdbfe;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.06);
}

.payment-method:has(input:checked) {
    background: #eff6ff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.06);
}

.payment-method input {
    accent-color: #2563eb;

    width: 17px;
    height: 17px;

    flex-shrink: 0;
}

.payment-method-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    background: #f8fafc;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    font-size: 24.38px;
}

.payment-method strong {
    display: block;

    margin-bottom: 4px;

    color: #0f172a;

    font-size: 13.78px;
    font-weight: 800;
}

.payment-method span {
    display: block;

    color: #64748b;

    font-size: 11.66px;
    line-height: 1.5;
}


/* SECURITY NOTICE */

.payment-security {
    padding: 18px 20px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    background:
        linear-gradient(
            90deg,
            #ecfdf5,
            #f8fafc
        );

    border: 1px solid #d1fae5;
    border-radius: 16px;
}

.payment-security > span {
    font-size: 22.26px;
}

.payment-security strong {
    display: block;

    margin-bottom: 4px;

    color: #0f172a;

    font-size: 13.78px;
}

.payment-security p {
    color: #64748b;

    font-size: 12.72px;
    line-height: 1.6;
}


/* =========================================
   PAYMENT SUMMARY
========================================= */

.payment-summary {
    position: sticky;
    top: 105px;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );

    border: 1px solid #dbe3ec;
    border-radius: 24px;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.07),
        0 30px 70px rgba(15, 23, 42, 0.07);
}

.payment-summary-label {
    display: inline-flex;

    padding: 7px 11px;

    margin-bottom: 4px;

    background: #eff6ff;

    border-radius: 999px;

    color: #2563eb;

    font-size: 9.54px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


/* COURSE IMAGE */

.payment-course-image {
    width: 100%;
    height: 185px;

    margin: 20px 0 22px;

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

    overflow: hidden;

    background: #05070b;

    border-radius: 18px;

    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.08);
}

.payment-course-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;
}


/* COURSE INFO */

.payment-batch {
    display: inline-block;

    margin-bottom: 7px;

    color: #2563eb;

    font-size: 11.66px;
    font-weight: 900;

    letter-spacing: 1.2px;
}

.payment-summary h2 {
    margin-bottom: 22px;

    color: #0f172a;

    font-size: 25.44px;
    font-weight: 900;

    line-height: 1.2;
}


/* SUMMARY ROW */

.payment-summary-row {
    padding: 14px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid #e5e7eb;
}

.payment-summary-row span {
    color: #64748b;

    font-size: 12.72px;
    font-weight: 700;
}

.payment-summary-row strong {
    color: #334155;

    font-size: 16.96px;
    font-weight: 800;
}


/* TOTAL */

.payment-total {
    margin-top: 4px;
    margin-bottom: 20px;

    padding: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #f8fafc
        );

    border: 1px solid #dbeafe;
    border-radius: 15px;
}

.payment-total span {
    color: #475569;

    font-size: 12.72px;
    font-weight: 800;
}

.payment-total strong {
    color: #0f172a;

    font-size: 36.04px;
    font-weight: 900;

    letter-spacing: -1px;
}


/* FINAL PAYMENT BUTTON */

.final-payment-btn {
    width: 100%;

    padding: 15px 18px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color: #ffffff;

    font-size: 13.78px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 26px rgba(15, 23, 42, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.final-payment-btn:hover {
    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );

    transform: translateY(-3px);

    box-shadow:
        0 16px 32px rgba(37, 99, 235, 0.25);
}


/* BACK LINK */

.payment-back-link {
    display: block;

    margin-top: 15px;

    text-align: center;

    color: #64748b;

    font-size: 11.66px;
    font-weight: 700;
}

.payment-back-link:hover {
    color: #2563eb;
}


/* NOTE */

.payment-note {
    margin-top: 18px;

    padding-top: 17px;

    border-top: 1px solid #e5e7eb;

    color: #94a3b8;

    font-size: 10.6px;
    line-height: 1.6;

    text-align: center;
}


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

@media (max-width: 950px) {

    .payment-page {
        grid-template-columns: 1fr;

        padding: 60px 6%;
    }

    .payment-summary {
        position: static;
    }

}


@media (max-width: 650px) {

    .payment-page {
        padding: 45px 5%;
    }

    .payment-card,
    .payment-summary {
        padding: 23px;

        border-radius: 20px;
    }

    .payment-student-grid {
        grid-template-columns: 1fr;
    }

    .payment-course-image {
        height: 160px;
    }

}
/* =========================================
   MOBILE BANKING PROVIDERS
========================================= */

.mobile-provider-panel {
    display: none;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #f8fbff,
            #ffffff
        );

    border: 1px solid #dbeafe;
    border-radius: 16px;

    animation: providerOpen 0.3s ease;
}


/* SHOW PROVIDERS */

.mobile-provider-panel.show {
    display: block;
}


/* OPEN ANIMATION */

@keyframes providerOpen {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* PROVIDER HEADING */

.provider-heading {
    margin-bottom: 15px;
}

.provider-heading > span {
    display: block;

    margin-bottom: 4px;

    color: #2563eb;

    font-size: 9.54px;
    font-weight: 900;

    letter-spacing: 1.3px;
}

.provider-heading p {
    color: #64748b;

    font-size: 11.66px;
}


/* PROVIDER GRID */

.mobile-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 11px;
}


/* PROVIDER CARD */

.mobile-provider {
    position: relative;

    min-height: 115px;

    padding: 15px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.mobile-provider:hover {
    transform: translateY(-3px);

    border-color: #bfdbfe;

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.07);
}


/* HIDE DEFAULT RADIO */

.mobile-provider input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* SELECTED PROVIDER */

.mobile-provider:has(input:checked) {
    background: #eff6ff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.07),
        0 10px 25px rgba(15, 23, 42, 0.06);
}


/* BRAND ICON */

.provider-brand {
    width: 46px;
    height: 46px;

    margin-bottom: 11px;

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

    border-radius: 12px;

    background: #ffffff;
    border: 1px solid #e5e7eb;

    overflow: hidden;

    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.08);
}

.provider-brand img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}

/* PROVIDER TEXT */

.provider-info strong {
    display: block;

    margin-bottom: 3px;

    color: #0f172a;

    font-size: 12.72px;
    font-weight: 800;
}

.provider-info span {
    color: #94a3b8;

    font-size: 9.54px;
}


/* CHECK ICON */

.provider-check {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 21px;
    height: 21px;

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

    border-radius: 50%;

    background: #2563eb;

    color: #ffffff;

    font-size: 10.6px;
    font-weight: 900;

    opacity: 0;

    transform: scale(0.7);

    transition: 0.2s ease;
}

.mobile-provider:has(input:checked)
.provider-check {

    opacity: 1;

    transform: scale(1);
}


/* MOBILE */

@media (max-width: 650px) {

    .mobile-provider-grid {
        grid-template-columns: 1fr;
    }

    .mobile-provider {
        min-height: auto;
    }

}
/* =========================================
   STUDY HARBOR AUTHENTICATION
========================================= */

.auth-page {
    min-height: calc(100vh - 82px);

    padding: 70px 8%;

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

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(37, 99, 235, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(99, 102, 241, 0.07),
            transparent 30%
        ),
        #f8fafc;
}


.auth-wrapper {
    width: 100%;
    max-width: 1180px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 60px;

    align-items: center;
}


/* LEFT SIDE */

.auth-info {
    max-width: 480px;
}

.auth-badge {
    display: inline-block;

    margin-bottom: 20px;
    padding: 8px 13px;

    background: #dbeafe;

    color: #2563eb;

    border-radius: 999px;

    font-size: 10.6px;
    font-weight: 900;

    letter-spacing: 1.5px;
}

.auth-info h1 {
    margin-bottom: 20px;

    color: #0f172a;

    font-size: clamp(44.52px, 5vw, 65.72px);
    font-weight: 900;

    line-height: 1.05;
    letter-spacing: -2px;
}

.auth-info > p {
    margin-bottom: 30px;

    color: #64748b;

    font-size: 15.9px;
    line-height: 1.8;
}


/* BENEFITS */

.auth-benefits {
    display: grid;
    gap: 14px;
}

.auth-benefits div {
    display: flex;
    align-items: center;

    gap: 11px;
}

.auth-benefits span {
    width: 27px;
    height: 27px;

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

    flex-shrink: 0;

    background: #ecfdf5;

    color: #047857;

    border-radius: 50%;

    font-size: 11.66px;
    font-weight: 900;
}

.auth-benefits p {
    color: #475569;

    font-size: 13.78px;
    font-weight: 700;
}


/* REGISTER CARD */

.auth-card {
    padding: 36px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 26px;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.07),
        0 30px 70px rgba(15, 23, 42, 0.06);
}

.auth-card-heading {
    margin-bottom: 28px;
}

.auth-card-heading > span {
    display: block;

    margin-bottom: 7px;

    color: #2563eb;

    font-size: 10.6px;
    font-weight: 900;

    letter-spacing: 1.5px;
}

.auth-card-heading h2 {
    margin-bottom: 8px;

    color: #0f172a;

    font-size: 29.68px;
    font-weight: 900;

    letter-spacing: -0.7px;
}

.auth-card-heading p {
    color: #64748b;

    font-size: 13.78px;
    line-height: 1.6;
}


/* FORM */

.auth-form-group {
    margin-bottom: 18px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.auth-form-group label {
    color: #334155;

    font-size: 12.72px;
    font-weight: 700;
}

.auth-form-group input {
    width: 100%;

    padding: 14px 15px;

    background: #fbfdff;

    border: 1px solid #dbe3ec;
    border-radius: 12px;

    color: #0f172a;

    font-size: 14.84px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.auth-form-group input:focus {
    background: #ffffff;

    border-color: #2563eb;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.08);
}

.auth-form-grid {
    display: grid;

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

    gap: 15px;
}


/* TERMS */

.auth-terms {
    margin: 3px 0 22px;

    display: flex;
    align-items: center;

    gap: 9px;
}

.auth-terms input {
    accent-color: #2563eb;
}

.auth-terms label {
    color: #64748b;

    font-size: 11.66px;
}


/* BUTTON */

.auth-submit-btn {
    width: 100%;

    padding: 15px 20px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color: #ffffff;

    font-size: 13.78px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 26px rgba(15, 23, 42, 0.18);

    transition: 0.3s ease;
}

.auth-submit-btn:hover {
    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );

    transform: translateY(-2px);

    box-shadow:
        0 16px 32px rgba(37, 99, 235, 0.24);
}


/* LOGIN LINK */

.auth-login-link {
    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid #e5e7eb;

    text-align: center;

    color: #64748b;

    font-size: 11.66px;
}

.auth-login-link a {
    margin-left: 4px;

    color: #2563eb;

    font-weight: 800;
}


/* MOBILE */

@media (max-width: 900px) {

    .auth-wrapper {
        grid-template-columns: 1fr;

        max-width: 650px;
    }

    .auth-info {
        max-width: 100%;

        text-align: center;
    }

    .auth-benefits {
        max-width: 340px;

        margin: auto;

        text-align: left;
    }

}


@media (max-width: 600px) {

    .auth-page {
        padding: 45px 5%;
    }

    .auth-card {
        padding: 25px;

        border-radius: 21px;
    }

    .auth-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

}
/* =========================================
   AUTH MESSAGE
========================================= */

.auth-message {
    margin-top: 15px;
    min-height: 20px;

    text-align: center;

    font-size: 12.72px;
    font-weight: 700;
}

.auth-message.success {
    color: #047857;
}

.auth-message.error {
    color: #dc2626;
}

.auth-message.loading {
    color: #2563eb;
}

.auth-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}
/* =========================================
   PHONE OTP VERIFICATION
========================================= */

.otp-section {
    margin-top: 25px;
    padding: 30px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );

    border: 1px solid #dbeafe;
    border-radius: 20px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.06);
}


.otp-section[hidden] {
    display: none;
}


.otp-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 16px;

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

    background: #eff6ff;

    border-radius: 17px;

    font-size: 29.68px;
}


.otp-label {
    display: block;

    margin-bottom: 8px;

    color: #2563eb;

    font-size: 9.54px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.otp-section h3 {
    margin-bottom: 8px;

    color: #0f172a;

    font-size: 23.32px;
    font-weight: 900;
}


.otp-section > p {
    margin-bottom: 20px;

    color: #64748b;

    font-size: 12.72px;
    line-height: 1.6;
}


#otpCode {
    width: 100%;

    margin-bottom: 16px;
    padding: 16px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #dbe3ec;
    border-radius: 12px;

    color: #0f172a;

    font-size: 25.44px;
    font-weight: 900;

    letter-spacing: 10px;

    outline: none;

    transition: 0.25s ease;
}


#otpCode:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.08);
}
/* =========================================
   STUDENT NAVBAR ACCOUNT
========================================= */

#authNav {
    position: relative;
}

.user-nav {
    position: relative;
}


/* USER BUTTON */

.user-nav-btn {
    padding: 9px 13px;

    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid #e2e8f0;
    border-radius: 11px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;
    font-size: 13.78px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.05);

    transition: 0.25s ease;
}

.user-nav-btn:hover {
    border-color: #bfdbfe;

    background: #f8fbff;

    transform: translateY(-1px);
}


/* AVATAR */

.user-avatar {
    width: 28px;
    height: 28px;

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

    background: #eff6ff;

    border-radius: 8px;

    font-size: 14.84px;
}


.user-arrow {
    color: #94a3b8;

    font-size: 10.6px;
}


/* DROPDOWN — PREMIUM PROFILE MENU */

.user-dropdown {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    width: 292px;
    padding: 8px;
    display: none;

    background:
        radial-gradient(circle at 92% 0%, rgba(59,130,246,0.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(248,250,252,0.975) 100%);

    border: 1px solid rgba(203, 213, 225, 0.78);
    border-radius: 20px;

    box-shadow:
        0 30px 72px rgba(15, 23, 42, 0.18),
        0 8px 24px rgba(15, 23, 42, 0.075),
        inset 0 1px 0 rgba(255,255,255,0.95);

    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);

    z-index: 2000;
}

.user-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 24px;
    width: 11px;
    height: 11px;
    background: rgba(255,255,255,0.98);
    border-top: 1px solid rgba(203, 213, 225, 0.78);
    border-left: 1px solid rgba(203, 213, 225, 0.78);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

.user-dropdown.show {
    display: block;
    animation: userDropdownOpen 0.22s cubic-bezier(.2,.78,.25,1);
}

@keyframes userDropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.975);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* PROFILE SUMMARY */

.user-dropdown-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 11px 13px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(226,232,240,0.92);
}

.user-dropdown-head::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.30), transparent);
    opacity: 0.75;
}

.user-dropdown-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    border: 2px solid rgba(255,255,255,0.98);
    border-radius: 14px;
    background: linear-gradient(145deg, #eff6ff, #ffffff);
    color: #2563eb;
    font-size: 17px;
    font-weight: 900;

    box-shadow:
        0 0 0 1px #dbeafe,
        0 8px 18px rgba(37,99,235,0.12);
}

.user-dropdown-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-dropdown-head-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.user-dropdown-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 8.8px;
    font-weight: 900;
    letter-spacing: 0.95px;
    text-transform: uppercase;
}

.user-dropdown-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}

.user-dropdown-head-copy strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 13.8px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-head-copy small {
    overflow: hidden;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-section-label {
    display: block;
    padding: 4px 10px 5px;
    color: #94a3b8;
    font-size: 8.4px;
    font-weight: 900;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

/* DROPDOWN LINKS */

.user-dropdown-item,
.logout-nav-btn {
    position: relative;
    width: 100%;
    min-height: 57px;
    padding: 8px 9px;

    display: flex;
    align-items: center;
    gap: 10px;

    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;

    color: #334155;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease,
        transform 0.22s cubic-bezier(.2,.75,.25,1);
}

.user-dropdown-item + .user-dropdown-item {
    margin-top: 3px;
}

.user-dropdown-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dbeafe;
    border-radius: 11px;
    background: linear-gradient(145deg, #eff6ff 0%, #ffffff 100%);
    color: #2563eb;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 5px 12px rgba(37,99,235,0.08);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.user-dropdown-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    stroke: currentColor;
}

.user-dropdown-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-dropdown-copy strong {
    color: #0f172a;
    font-size: 12.9px;
    font-weight: 850;
    line-height: 1.15;
}

.user-dropdown-copy small {
    color: #94a3b8;
    font-size: 10.1px;
    font-weight: 600;
    line-height: 1.15;
}

.user-dropdown-chevron {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    color: #94a3b8;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        background 0.22s ease;
}

.user-dropdown-item:hover {
    background: linear-gradient(135deg, rgba(239,246,255,0.96), rgba(248,251,255,0.96));
    border-color: #dbeafe;
    color: #2563eb;
    box-shadow:
        0 9px 20px rgba(37,99,235,0.09),
        inset 0 1px 0 rgba(255,255,255,0.9);
    transform: translateX(2px);
}

.user-dropdown-item:hover .user-dropdown-icon {
    border-color: #bfdbfe;
    background: #ffffff;
    box-shadow:
        0 7px 16px rgba(37,99,235,0.12),
        inset 0 1px 0 rgba(255,255,255,1);
    transform: translateY(-1px) scale(1.025);
}

.user-dropdown-item:hover .user-dropdown-copy strong,
.user-dropdown-item:hover .user-dropdown-chevron {
    color: #2563eb;
}

.user-dropdown-item:hover .user-dropdown-chevron {
    background: rgba(219,234,254,0.7);
    transform: translateX(2px);
}

/* LOGOUT */

.logout-nav-btn {
    margin-top: 9px;
    color: #dc2626;
}

.logout-nav-btn::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: #eef2f7;
}

.logout-nav-btn .user-dropdown-icon {
    border-color: #fee2e2;
    background: linear-gradient(145deg, #fff1f2 0%, #fffafa 100%);
    color: #dc2626;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 5px 12px rgba(220,38,38,0.055);
}

.logout-nav-btn .user-dropdown-copy strong {
    color: #b91c1c;
}

.logout-nav-btn:hover {
    background: linear-gradient(135deg, #fff7f7 0%, #fef2f2 100%);
    border-color: #fecaca;
    box-shadow:
        0 9px 20px rgba(220,38,38,0.075),
        inset 0 1px 0 rgba(255,255,255,0.92);
    transform: translateX(2px);
}

.logout-nav-btn:hover .user-dropdown-icon {
    border-color: #fecaca;
    background: #ffffff;
    box-shadow: 0 7px 16px rgba(220,38,38,0.10);
    transform: translateY(-1px) scale(1.025);
}

.logout-nav-btn:hover .user-dropdown-copy strong,
.logout-nav-btn:hover .user-dropdown-chevron {
    color: #dc2626;
}

.logout-nav-btn:hover .user-dropdown-chevron {
    background: rgba(254,226,226,0.75);
    transform: translateX(2px);
}

/* MOBILE */

@media (max-width: 900px) {

    #authNav {
        display: none;
    }

}
/* =========================================
   STUDENT DASHBOARD
========================================= */

.student-dashboard {
    min-height: calc(100vh - 82px);
    padding: 65px 8% 90px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(37, 99, 235, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(99, 102, 241, 0.05),
            transparent 27%
        ),
        #f8fafc;
}


/* =========================================
   WELCOME AREA
========================================= */

.dashboard-welcome {
    max-width: 1180px;
    margin: 0 auto 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}


.dashboard-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #2563eb;

    font-size: 10.6px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.dashboard-welcome h1 {
    margin-bottom: 10px;

    color: #0f172a;

    font-size: clamp(36.04px, 4vw, 50.88px);
    font-weight: 900;

    letter-spacing: -1.5px;
}


.dashboard-welcome h1 span {
    color: #2563eb;
}


.dashboard-welcome p {
    color: #64748b;

    font-size: 14.84px;
    line-height: 1.7;
}


/* PROFILE BADGE */

.dashboard-profile-badge {
    min-width: 245px;

    padding: 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);
}


.dashboard-avatar {
    width: 50px;
    height: 50px;

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

    background: #eff6ff;

    border-radius: 14px;

    font-size: 23.32px;
}


.dashboard-profile-badge small {
    display: block;

    margin-bottom: 3px;

    color: #94a3b8;

    font-size: 9.54px;
    font-weight: 700;
}


.dashboard-profile-badge strong {
    display: block;

    color: #0f172a;

    font-size: 13.78px;
    font-weight: 800;
}


.dashboard-profile-badge span {
    color: #64748b;

    font-size: 10.6px;
}


/* =========================================
   DASHBOARD STATS
========================================= */

.dashboard-stats {
    max-width: 1180px;
    margin: 0 auto 28px;

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

    gap: 16px;
}


.dashboard-stat-card {
    padding: 19px;

    display: flex;
    align-items: center;

    gap: 13px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.045);
}


.dashboard-stat-icon {
    width: 43px;
    height: 43px;

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

    flex-shrink: 0;

    background: #eff6ff;

    border-radius: 12px;

    font-size: 20.14px;
}


.dashboard-stat-card span {
    display: block;

    margin-bottom: 2px;

    color: #94a3b8;

    font-size: 9.54px;
    font-weight: 700;
}


.dashboard-stat-card strong {
    color: #0f172a;

    font-size: 24.38px;
    font-weight: 900;
}


/* =========================================
   DASHBOARD MAIN GRID
========================================= */

.dashboard-grid {
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(300px, 0.55fr);

    gap: 24px;

    align-items: start;
}


.dashboard-panel {
    padding: 28px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.055);
}


.dashboard-panel-heading {
    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.dashboard-panel-heading span {
    display: block;

    margin-bottom: 5px;

    color: #2563eb;

    font-size: 9.54px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


.dashboard-panel-heading h2 {
    color: #0f172a;

    font-size: 24.38px;
    font-weight: 900;
}


/* SMALL BUTTON */

.dashboard-small-btn {
    padding: 9px 13px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 9px;

    color: #475569;

    font-size: 10.6px;
    font-weight: 800;
}


.dashboard-small-btn:hover {
    color: #2563eb;

    border-color: #bfdbfe;
}


/* =========================================
   EMPTY COURSES
========================================= */

.dashboard-empty {
    min-height: 300px;

    padding: 45px 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #f8fbff,
            #ffffff
        );

    border: 1px dashed #cbd5e1;
    border-radius: 18px;
}


.dashboard-empty-icon {
    width: 65px;
    height: 65px;

    margin-bottom: 16px;

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

    background: #eff6ff;

    border-radius: 18px;

    font-size: 30.74px;
}


.dashboard-empty h3 {
    margin-bottom: 7px;

    color: #0f172a;

    font-size: 20.14px;
    font-weight: 900;
}


.dashboard-empty p {
    max-width: 430px;

    margin-bottom: 20px;

    color: #64748b;

    font-size: 12.72px;
    line-height: 1.7;
}


.dashboard-primary-btn {
    padding: 12px 18px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color: #ffffff;

    border-radius: 10px;

    font-size: 11.66px;
    font-weight: 800;

    transition: 0.25s ease;
}


.dashboard-primary-btn:hover {
    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================
   PROFILE PANEL
========================================= */

.dashboard-profile-row {
    padding: 15px 0;

    border-bottom: 1px solid #edf1f5;
}


.dashboard-profile-row span {
    display: block;

    margin-bottom: 5px;

    color: #94a3b8;

    font-size: 9.54px;
    font-weight: 700;
}


.dashboard-profile-row strong {
    color: #334155;

    font-size: 12.72px;
    font-weight: 800;

    word-break: break-word;
}


.dashboard-edit-btn {
    width: 100%;

    margin-top: 20px;
    padding: 12px;

    border: none;
    border-radius: 10px;

    background: #f1f5f9;

    color: #94a3b8;

    font-family: inherit;
    font-size: 10.6px;
    font-weight: 800;

    cursor: not-allowed;
}


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

@media (max-width: 950px) {

    .dashboard-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .student-dashboard {
        padding:
            45px 5%
            70px;
    }

    .dashboard-welcome {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-profile-badge {
        min-width: 0;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-panel {
        padding: 22px;
    }

    .dashboard-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================
   DASHBOARD ENROLLED COURSES
========================================= */

.dashboard-course-list {
    display: grid;
    gap: 18px;
}


.dashboard-course-card {
    padding: 16px;

    display: grid;
    grid-template-columns: 190px 1fr;

    gap: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 17px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.05);

    transition: 0.3s ease;
}


.dashboard-course-card:hover {
    transform: translateY(-3px);

    border-color: #bfdbfe;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.08);
}


/* COURSE ARTWORK */

.dashboard-course-image {
    height: 125px;

    overflow: hidden;

    background: #05070b;

    border-radius: 13px;
}


.dashboard-course-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* COURSE INFORMATION */

.dashboard-course-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.dashboard-course-batch {
    margin-bottom: 5px;

    color: #2563eb;

    font-size: 9.54px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.dashboard-course-content h3 {
    margin-bottom: 12px;

    color: #0f172a;

    font-size: 19.08px;
    font-weight: 900;
}


/* STATUS */

.dashboard-course-status {
    margin-bottom: 15px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.dashboard-course-status span {
    padding: 6px 9px;

    background: #ecfdf5;

    color: #047857;

    border-radius: 999px;

    font-size: 9.54px;
    font-weight: 800;
}


/* CONTINUE BUTTON */

.dashboard-continue-btn {
    align-self: flex-start;

    padding: 10px 14px;

    background: #0f172a;

    color: #ffffff;

    border-radius: 9px;

    font-size: 10.6px;
    font-weight: 800;

    transition: 0.25s ease;
}


.dashboard-continue-btn:hover {
    background: #2563eb;

    color: #ffffff;

    transform: translateY(-2px);
}


/* MOBILE */

@media (max-width: 650px) {

    .dashboard-course-card {
        grid-template-columns: 1fr;
    }

    .dashboard-course-image {
        height: 170px;
    }

}
/* =========================================================
   PROTECTED COURSE LEARNING PAGE
========================================================= */

#coursePage.learning-active {
    padding: 0 !important;
    min-height: calc(100vh - 76px) !important;
    background: #f8fafc;
}


/* MAIN LAYOUT */

.learning-shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: calc(100vh - 76px);
}


/* =========================================================
   LEFT SIDEBAR
========================================================= */

.learning-sidebar {
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    min-height: calc(100vh - 76px);
    padding: 28px 22px;
}


.learning-course-label {
    display: inline-block;
    font-size: 11.66px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #2563eb;
    margin-bottom: 10px;
}


.learning-course-title {
    font-size: 22.26px;
    line-height: 1.35;
    margin: 0;
    color: #0f172a;
}


.learning-course-batch {
    margin-top: 6px;
    color: #64748b;
    font-size: 14.84px;
}


/* PROGRESS */

.learning-progress-box {
    margin-top: 25px;
    padding: 17px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}


.learning-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
    font-size: 13.78px;
    color: #475569;
}


.learning-progress-info strong {
    color: #0f172a;
}


.learning-progress-track {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 100px;
    overflow: hidden;
}


.learning-progress-fill {
    width: 0%;
    height: 100%;
    background: #2563eb;
    border-radius: 100px;
}


/* COURSE CONTENT */

.learning-content-label {
    margin-top: 28px;
    margin-bottom: 12px;
    font-size: 12.72px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #64748b;
}


/* MODULE */

.learning-module {
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}


.learning-module-title {
    padding: 14px 15px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}


.learning-module-title span {
    display: block;
    font-size: 11.66px;
    color: #2563eb;
    font-weight: 800;
    margin-bottom: 3px;
}


.learning-module-title strong {
    color: #0f172a;
    font-size: 14.84px;
}


/* LESSON */

.learning-lesson {
    width: 100%;
    border: 0;
    background: #ffffff;
    text-align: left;
    padding: 13px 14px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: 0.2s ease;
}


.learning-lesson:last-child {
    border-bottom: 0;
}


.learning-lesson:hover {
    background: #f8fafc;
}


.learning-lesson.active {
    background: #eff6ff;
}


.learning-lesson-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14.84px;
}


.learning-lesson.active .learning-lesson-icon {
    background: #dbeafe;
}


.learning-lesson-text strong {
    display: block;
    color: #0f172a;
    font-size: 13.78px;
    line-height: 1.4;
}


.learning-lesson-text span {
    display: block;
    color: #94a3b8;
    font-size: 11.66px;
    margin-top: 3px;
}


/* =========================================================
   MAIN LEARNING AREA
========================================================= */

.learning-main {
    min-width: 0;
}


.learning-topbar {
    height: 64px;
    padding: 0 34px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;

    display: flex;
    justify-content: space-between;
    align-items: center;
}


.learning-back-btn {
    text-decoration: none;
    color: #475569;
    font-size: 14.84px;
    font-weight: 700;
}


.learning-access-badge {
    padding: 7px 12px;
    border-radius: 100px;
    background: #dcfce7;
    color: #166534;
    font-size: 12.72px;
    font-weight: 800;
}


/* CONTENT */

.learning-area {
    max-width: 1100px;
    margin: auto;
    padding: 42px;
}


.learning-breadcrumb {
    color: #2563eb;
    font-size: 12.72px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 10px;
}


.learning-lesson-heading {
    font-size: 33.92px;
    line-height: 1.25;
    color: #0f172a;
    margin: 0;
}


.learning-lesson-description {
    margin-top: 10px;
    color: #64748b;
    line-height: 1.7;
    max-width: 800px;
}


/* VIDEO AREA */

.learning-player {
    margin-top: 28px;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    color: #ffffff;
    overflow: hidden;
}


.learning-player-placeholder {
    padding: 30px;
}


.learning-player-icon {
    width: 72px;
    height: 72px;
    margin: auto auto 18px;

    border-radius: 50%;
    background: rgba(255,255,255,0.14);

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

    font-size: 29.68px;
}


.learning-player-placeholder h3 {
    font-size: 22.26px;
    margin-bottom: 7px;
}


.learning-player-placeholder p {
    color: #cbd5e1;
    font-size: 13.78px;
}


/* ACTION BUTTONS */

.learning-actions {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}


.learning-action-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 11px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    color: #334155;
}


.learning-action-btn.primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}


/* TABS */

.learning-tabs {
    margin-top: 35px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 25px;
}


.learning-tab {
    border: 0;
    background: transparent;
    padding: 12px 2px;
    cursor: pointer;
    font-weight: 700;
    color: #64748b;
    border-bottom: 2px solid transparent;
}


.learning-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}


/* LESSON INFORMATION */

.learning-information {
    margin-top: 25px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
}


.learning-information h3 {
    color: #0f172a;
    margin-bottom: 8px;
}


.learning-information p {
    color: #64748b;
    line-height: 1.7;
}
/* =========================================================
   PROTECTED COURSE VIDEO
========================================================= */

.protected-course-video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000000;
    object-fit: contain;
}
/* =========================================================
   PROTECTED COURSE PDF
========================================================= */

.protected-course-pdf {
    width: 100%;
    height: 100%;
    min-height: 650px;
    border: 0;
    background: #ffffff;
}
/* =========================================================
   PROTECTED COURSE PDF
========================================================= */

.learning-player.pdf-mode {
    aspect-ratio: auto;
    min-height: 760px;
    background: #ffffff;
    align-items: stretch;
}


.learning-player.pdf-mode
.learning-player-placeholder {
    width: 100%;
    height: 100%;
    padding: 0;
}


.protected-pdf-wrapper {
    width: 100%;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}


.protected-pdf-toolbar {
    min-height: 70px;
    padding: 14px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}


.protected-pdf-toolbar strong {
    display: block;
    color: #0f172a;
    font-size: 15.9px;
}


.protected-pdf-toolbar span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12.72px;
}


.material-download-btn {
    border: 0;
    border-radius: 10px;
    padding: 11px 17px;

    background: #2563eb;
    color: #ffffff;

    font-size: 13.78px;
    font-weight: 800;

    cursor: pointer;
}


.material-download-btn:hover {
    background: #1d4ed8;
}


.material-download-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}


.protected-course-pdf {
    width: 100%;
    flex: 1;
    min-height: 690px;

    border: 0;
    background: #ffffff;
}
/* =========================================================
   PROFESSIONAL QUIZ DESIGN
   STUDY HARBOR
========================================================= */


/* QUIZ PLAYER MODE */

.learning-player.quiz-mode {
    aspect-ratio: auto !important;

    min-height: 0 !important;

    display: block !important;

    background: #f8fafc !important;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    overflow: visible;

    color: #0f172a;

    text-align: left;
}


.learning-player.quiz-mode
.learning-player-placeholder {

    width: 100% !important;

    max-width: none !important;

    padding: 0 !important;

    margin: 0 !important;

    display: block !important;

    color: #0f172a !important;

    text-align: left !important;
}



/* =========================================================
   QUIZ CONTAINER
========================================================= */

.quiz-container {

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

    padding: 35px;

    color: #0f172a;

}



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

.quiz-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 25px;

    margin-bottom: 30px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

}


.quiz-header > div:first-child {
    flex: 1;
}


.quiz-header > div:first-child > span {

    display: inline-block;

    margin-bottom: 7px;

    color: #2563eb;

    font-size: 11.66px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.quiz-header h2 {

    margin: 0 0 7px;

    color: #0f172a;

    font-size: 26.5px;

    line-height: 1.3;

}


.quiz-header p {

    margin: 0;

    color: #64748b;

    font-size: 14.84px;

    line-height: 1.7;

}


.quiz-pass-score {

    flex-shrink: 0;

    padding: 9px 15px;

    border-radius: 100px;

    background: #dbeafe;

    color: #1d4ed8;

    font-size: 13.78px;

    font-weight: 800;

    white-space: nowrap;

}



/* =========================================================
   QUESTION CARD
========================================================= */

.quiz-question-card {

    width: 100%;

    margin-bottom: 20px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 2px 5px
        rgba(15, 23, 42, 0.03);

}


.quiz-question-number {

    margin-bottom: 8px;

    color: #2563eb;

    font-size: 11.66px;

    font-weight: 900;

    letter-spacing: 1.3px;

}


.quiz-question-card h3 {

    margin: 0 0 20px;

    color: #0f172a !important;

    font-size: 19.08px;

    font-weight: 800;

    line-height: 1.55;

}



/* =========================================================
   OPTIONS
========================================================= */

.quiz-options {

    width: 100%;

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 11px;

}


.quiz-option {

    position: relative;

    width: 100%;

    min-height: 54px;

    display: flex !important;

    align-items: center;

    gap: 13px;

    padding: 13px 16px;

    margin: 0;

    background: #ffffff;

    border: 1px solid #dbe2ea;

    border-radius: 11px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}


.quiz-option:hover {

    border-color: #93c5fd;

    background: #f8fbff;

    transform: translateY(-1px);

}


/* HIDE ORIGINAL RADIO */

.quiz-option input[type="radio"] {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


/* CUSTOM RADIO */

.quiz-option-marker {

    width: 20px;

    height: 20px;

    min-width: 20px;

    border: 2px solid #94a3b8;

    border-radius: 50%;

    background: #ffffff;

    position: relative;

}


.quiz-option input:checked
+ .quiz-option-marker {

    border-color: #2563eb;

}


.quiz-option input:checked
+ .quiz-option-marker::after {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #2563eb;

    top: 3px;

    left: 3px;

}


/* SELECTED OPTION */

.quiz-option:has(
    input:checked
) {

    border-color: #2563eb;

    background: #eff6ff;

}


.quiz-option-text {

    color: #334155 !important;

    font-size: 14.84px;

    font-weight: 600;

    line-height: 1.5;

}



/* =========================================================
   QUIZ MESSAGE
========================================================= */

.quiz-message {

    min-height: 24px;

    margin: 10px 0;

    color: #dc2626;

    font-size: 13.78px;

    font-weight: 700;

}



/* =========================================================
   SUBMIT BUTTON
========================================================= */

.quiz-submit-btn {

    width: 100%;

    min-height: 52px;

    margin-top: 5px;

    padding: 14px 22px;

    border: none;

    border-radius: 11px;

    background: #2563eb;

    color: #ffffff;

    font-size: 14.84px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.quiz-submit-btn:hover {

    background: #1d4ed8;

    transform: translateY(-1px);

}


.quiz-submit-btn:disabled {

    opacity: 0.65;

    cursor: wait;

    transform: none;

}



/* =========================================================
   QUIZ RESULT
========================================================= */

.quiz-result {

    margin-top: 22px;

}


.quiz-result-card {

    padding: 32px;

    border-radius: 16px;

    text-align: center;

}


.quiz-result-card.passed {

    background: #f0fdf4;

    border: 1px solid #86efac;

}


.quiz-result-card.failed {

    background: #fff7ed;

    border: 1px solid #fdba74;

}


.quiz-result-icon {

    margin-bottom: 8px;

    font-size: 40.28px;

}


.quiz-result-card h2 {

    margin: 0 0 8px;

    color: #0f172a;

}


.quiz-result-card strong {

    display: block;

    margin-bottom: 5px;

    font-size: 40.28px;

    font-weight: 900;

}


.quiz-result-card.passed strong {
    color: #16a34a;
}


.quiz-result-card.failed strong {
    color: #ea580c;
}


.quiz-result-card p {

    margin: 0;

    color: #475569;

}



/* =========================================================
   REMOVE VIDEO PLAYER TEXT STYLING FROM QUIZ
========================================================= */

.learning-player.quiz-mode h2,
.learning-player.quiz-mode h3,
.learning-player.quiz-mode p,
.learning-player.quiz-mode span {

    text-align: left;

}



/* =========================================================
   QUIZ FORM
========================================================= */

#quizForm {

    width: 100%;

    margin: 0;

}



/* =========================================================
   HOMEPAGE — FINAL COURSE SECTION
   Scoped styles only; hero and existing LMS pages untouched.
========================================================= */

.home-course-level {
    position: relative;
    padding: 105px 8%;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(37, 99, 235, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(99, 102, 241, 0.06),
            transparent 28%
        ),
        #ffffff;
}

.home-course-level::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -180px;
    right: -130px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.045);
    pointer-events: none;
}

.home-course-heading {
    position: relative;
    z-index: 1;
    max-width: 730px;
    margin: 0 auto 56px;
}

.home-course-heading h2 {
    font-size: clamp(36.04px, 4vw, 48.76px);
    letter-spacing: -1.4px;
}

.home-course-heading span {
    display: block;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.75;
}

.home-level-container {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.home-level-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 470px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.99),
            rgba(248,250,252,0.97)
        );
    box-shadow:
        0 7px 18px rgba(15, 23, 42, 0.035),
        0 20px 50px rgba(15, 23, 42, 0.065);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.home-level-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -110px;
    right: -90px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.055);
    pointer-events: none;
}

.home-level-card:hover {
    transform: translateY(-7px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.05),
        0 28px 65px rgba(15, 23, 42, 0.11);
}

.home-level-card-featured {
    border: 1.5px solid rgba(37, 99, 235, 0.42);
}

.home-level-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 25px;
}

.home-level-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #eff6ff;
    font-size: 32.86px;
}

.home-level-icon-hsc {
    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #eef2ff
        );
}

.home-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 9.54px;
    font-weight: 900;
    letter-spacing: 1px;
}

.home-level-badge-featured {
    background: #111827;
    color: #ffffff;
}

.home-level-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.home-level-label {
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 10.6px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

.home-level-content h3 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 32.86px;
    line-height: 1.2;
}

.home-level-content > p {
    margin: 0 0 23px;
    color: #64748b;
    font-size: 14.84px;
    line-height: 1.75;
}

.home-level-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 27px;
}

.home-level-features span {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 11.66px;
    font-weight: 700;
}

.home-level-btn {
    width: 100%;
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 0 18px;
    border-radius: 10px;
    background: #111827;
    color: #ffffff !important;
    font-size: 13.78px;
    font-weight: 800;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.home-level-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

.home-level-btn-featured {
    background: #2563eb;
}

.home-level-btn-featured:hover {
    background: #1d4ed8;
}

.home-course-note {
    max-width: 820px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 26px auto 0;
    padding: 13px 17px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.88);
    color: #64748b;
    text-align: center;
}

.home-course-note span {
    flex: 0 0 auto;
    font-size: 15.9px;
}

.home-course-note p {
    margin: 0;
    font-size: 11.66px;
    font-weight: 700;
    line-height: 1.55;
}

@media (max-width: 820px) {

    .home-course-level {
        padding: 80px 6%;
    }

    .home-level-container {
        max-width: 620px;
        grid-template-columns: 1fr;
    }

    .home-level-card {
        min-height: 0;
    }

}

@media (max-width: 520px) {

    .home-course-level {
        padding: 68px 5%;
    }

    .home-course-heading {
        margin-bottom: 38px;
    }

    .home-level-card {
        padding: 24px;
        border-radius: 20px;
    }

    .home-level-content h3 {
        font-size: 28.62px;
    }

    .home-level-features {
        grid-template-columns: 1fr;
    }

    .home-course-note {
        align-items: flex-start;
        text-align: left;
    }

}



/* =========================================================
   HOMEPAGE HERO — SINGLE COLUMN
   Right-side "Keep Learning" visual removed.
========================================================= */

.hero {
    grid-template-columns: 1fr;
}

.hero-content {
    max-width: 820px;
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   HOMEPAGE — CINEMATIC HERO
   Uses images/home-hero-study.png
========================================================= */

.cinematic-home-hero {
    position: relative;
    min-height: 690px;
    padding: 78px 8% 96px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(5, 14, 29, 0.98) 0%,
            rgba(5, 14, 29, 0.96) 36%,
            rgba(5, 14, 29, 0.78) 52%,
            rgba(5, 14, 29, 0.18) 76%,
            rgba(5, 14, 29, 0.03) 100%
        ),
        linear-gradient(
            180deg,
            rgba(7, 17, 31, 0.02),
            rgba(7, 17, 31, 0.20)
        ),
        url("../images/home-hero-study.png");

    background-size: auto, auto, 58% 100%;
    background-repeat: no-repeat;
    background-position: center, center, right center;

    overflow: hidden;
}

.cinematic-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(37, 99, 235, 0.14),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            rgba(0,0,0,0.10)
        );

    pointer-events: none;
}

.cinematic-home-hero::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -66px;
    height: 110px;

    background: #ffffff;
    border-radius: 50% 50% 0 0 / 70% 70% 0 0;

    z-index: 1;
}

.cinematic-home-hero .hero-content {
    position: relative;
    z-index: 3;

    width: min(760px, 55%);
    max-width: 760px;

    margin: 0;
}

.cinematic-home-hero .hero-badge {
    margin-bottom: 20px;

    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.10);

    color: #bfdbfe;

    backdrop-filter: blur(7px);
}

.cinematic-home-hero h1 {
    max-width: 760px;

    color: #ffffff;

    font-size: clamp(50.88px, 5vw, 76.32px);
    line-height: 1.02;

    text-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

.cinematic-home-hero h1 span {
    color: #3b82f6;
}

.cinematic-home-hero .hero-text {
    max-width: 650px;

    color: #d7e0ec;

    font-size: 18.02px;
    line-height: 1.72;
}

.cinematic-home-hero .btn.primary {
    background: #2563eb;

    box-shadow:
        0 12px 30px rgba(37, 99, 235, 0.34);
}

.cinematic-home-hero .btn.primary:hover {
    background: #1d4ed8;
}

.cinematic-home-hero .btn.secondary {
    border-color: rgba(255,255,255,0.58);

    background: rgba(255,255,255,0.94);

    color: #111827;
}

.cinematic-home-hero .btn.secondary:hover {
    border-color: #ffffff;

    background: #ffffff;

    color: #2563eb;
}

.cinematic-home-hero .hero-stats {
    position: relative;
    z-index: 3;

    gap: 0;
}

.cinematic-home-hero .hero-stats div {
    min-width: 132px;
    padding-right: 28px;
    margin-right: 28px;

    border-right: 1px solid rgba(255,255,255,0.23);
}

.cinematic-home-hero .hero-stats div:last-child {
    margin-right: 0;
    padding-right: 0;

    border-right: 0;
}

.cinematic-home-hero .hero-stats strong {
    color: #ffffff;

    font-size: 29.68px;
}

.cinematic-home-hero .hero-stats span {
    color: #cbd5e1;
}

.cinematic-study-panel {
    position: absolute;
    z-index: 3;

    top: 74px;
    right: 4%;

    display: grid;
    gap: 3px;

    color: rgba(255,255,255,0.56);

    font-size: 15.9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.6px;

    text-align: left;
}

.cinematic-study-panel::after {
    content: "";
    width: 42px;
    height: 3px;

    margin-top: 8px;

    background: #3b82f6;

    border-radius: 99px;
}

/* Make the existing program section sit naturally after the wave */
.home-course-level {
    padding-top: 92px;
}


/* =========================================================
   CINEMATIC HERO — RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .cinematic-home-hero {
        background-size:
            auto,
            auto,
            64% 100%;
    }

    .cinematic-home-hero .hero-content {
        width: 62%;
    }

    .cinematic-study-panel {
        display: none;
    }

}

@media (max-width: 900px) {

    .cinematic-home-hero {
        min-height: 720px;

        padding: 70px 6% 110px;

        text-align: left;

        background:
            linear-gradient(
                90deg,
                rgba(5, 14, 29, 0.97) 0%,
                rgba(5, 14, 29, 0.91) 53%,
                rgba(5, 14, 29, 0.54) 100%
            ),
            url("../images/home-hero-study.png");

        background-size: auto, cover;
        background-position: center, center;
    }

    .cinematic-home-hero .hero-content {
        width: min(720px, 100%);
    }

    .cinematic-home-hero .hero-buttons,
    .cinematic-home-hero .hero-stats {
        justify-content: flex-start;
    }

}

@media (max-width: 600px) {

    .cinematic-home-hero {
        min-height: 660px;

        padding: 58px 5% 100px;

        background:
            linear-gradient(
                180deg,
                rgba(5, 14, 29, 0.92) 0%,
                rgba(5, 14, 29, 0.90) 65%,
                rgba(5, 14, 29, 0.72) 100%
            ),
            url("../images/home-hero-study.png");

        background-size: auto, cover;
        background-position: center, 58% center;
    }

    .cinematic-home-hero h1 {
        font-size: clamp(41.34px, 12vw, 55.12px);
    }

    .cinematic-home-hero .hero-text {
        font-size: 15.9px;
    }

    .cinematic-home-hero .hero-buttons {
        align-items: stretch;
    }

    .cinematic-home-hero .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        gap: 8px;
    }

    .cinematic-home-hero .hero-stats div {
        min-width: 0;

        margin: 0;
        padding: 0 10px 0 0;
    }

    .cinematic-home-hero .hero-stats strong {
        font-size: 23.32px;
    }

    .cinematic-home-hero .hero-stats span {
        font-size: 10.6px;
    }

}



/* =========================================================
   PUBLIC COURSE PAGES — MOBILE RESPONSIVE FIX
   Prevents SSC/HSC cards from staying squeezed side-by-side.
========================================================= */

@media (max-width: 900px) {

    .courses-section {
        padding: 48px 5% !important;
    }

    .courses-section .section-heading {
        margin-bottom: 30px !important;
    }

    .courses-section .section-heading h2 {
        font-size: clamp(29.68px, 8vw, 40.28px) !important;
    }

    .course-container,
    .subject-container {
        width: 100% !important;
        max-width: 640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .premium-course-card,
    .course-card,
    .subject-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 24px !important;
        border-radius: 20px !important;
    }

    .course-cover,
    .ssc-course-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }

    .course-cover img,
    .ssc-course-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .course-title-area h3,
    .premium-course-card h3,
    .course-card h3 {
        font-size: clamp(25.44px, 7vw, 32.86px) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    .course-title-area p,
    .course-card > p {
        font-size: 14.84px !important;
        line-height: 1.65 !important;
    }

    .course-resources,
    .course-features {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .course-card-footer,
    .course-bottom {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .premium-buy-btn,
    .buy-course-btn,
    .main-buy-btn {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .course-card-top {
        flex-wrap: wrap !important;
    }
}


@media (max-width: 520px) {

    .courses-section {
        padding: 34px 16px !important;
    }

    .courses-section .section-heading {
        margin-bottom: 24px !important;
    }

    .courses-section .section-heading p {
        font-size: 9.54px !important;
        letter-spacing: 1.5px !important;
    }

    .courses-section .section-heading h2 {
        font-size: 28.62px !important;
        line-height: 1.15 !important;
    }

    .courses-section .section-heading span {
        display: block !important;
        font-size: 13.78px !important;
        line-height: 1.55 !important;
    }

    .premium-course-card,
    .course-card,
    .subject-card {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .course-card-top {
        margin-bottom: 16px !important;
    }

    .course-tag,
    .course-status,
    .course-badge {
        font-size: 8.48px !important;
        padding: 6px 9px !important;
    }

    .course-title-area h3,
    .premium-course-card h3,
    .course-card h3 {
        font-size: 25.44px !important;
    }

    .course-resources,
    .course-features {
        grid-template-columns: 1fr !important;
    }

    .course-resources div {
        min-height: 54px !important;
        padding: 11px 12px !important;
    }

    .course-resources span,
    .course-features span {
        font-size: 11.66px !important;
    }

    .premium-price strong,
    .course-price strong {
        font-size: 29.68px !important;
    }
}


/* Mobile navbar: keep the brand readable and prevent overflow */
@media (max-width: 900px) {

    .navbar {
        height: 66px !important;
        padding: 0 16px !important;
    }

    .logo-area {
        gap: 8px !important;
        font-size: 15.9px !important;
        letter-spacing: 0.6px !important;
    }

    .logo-area img {
        width: 38px !important;
        height: 38px !important;
    }

    .menu-btn {
        display: block !important;
    }

}



/* =========================================================
   STUDY HARBOR — MOBILE NAVIGATION DRAWER
========================================================= */

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1998;
    background: rgba(15, 23, 42, 0.46);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.mobile-nav-overlay.show {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1999;

    width: min(340px, 88vw);
    height: 100dvh;

    display: flex;
    flex-direction: column;

    padding: 20px;

    background: #ffffff;

    box-shadow:
        -18px 0 50px rgba(15, 23, 42, 0.16);

    transform: translateX(105%);

    transition: transform 0.28s ease;
}

.mobile-nav-drawer.show {
    transform: translateX(0);
}

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding-bottom: 18px;
    margin-bottom: 14px;

    border-bottom: 1px solid #e2e8f0;
}

.mobile-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.mobile-nav-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.mobile-nav-brand strong {
    color: #0f172a;
    font-size: 14.84px;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.mobile-nav-close {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #f8fafc;
    color: #0f172a;

    font-size: 21.2px;
    cursor: pointer;
}

.mobile-nav-links {
    display: grid;
    gap: 7px;
}

.mobile-nav-links a,
.mobile-nav-links button {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0 13px;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: #334155;

    font: inherit;
    font-size: 13.78px;
    font-weight: 800;

    text-align: left;
    text-decoration: none;
    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links button:hover,
.mobile-nav-links a.active {
    background: #eff6ff;
    color: #2563eb;
}

.mobile-nav-divider {
    height: 1px;
    margin: 12px 0;
    background: #e2e8f0;
}

.mobile-nav-user {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 10px;
    padding: 12px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #f8fafc;
}

.mobile-nav-avatar {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    overflow: hidden;

    border-radius: 50%;

    background: #e2e8f0;

    font-size: 20.14px;
}

.mobile-nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-nav-user div {
    min-width: 0;
}

.mobile-nav-user small {
    display: block;

    color: #64748b;

    font-size: 9.54px;
    font-weight: 700;
}

.mobile-nav-user strong {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #0f172a;

    font-size: 13.78px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-nav-logout {
    color: #b91c1c !important;
}

.mobile-nav-logout:hover {
    background: #fff1f2 !important;
    color: #b91c1c !important;
}

body.mobile-nav-open {
    overflow: hidden;
}


/* Hamburger button */

.menu-btn {
    position: relative;
    z-index: 2000;

    width: 42px;
    height: 42px;

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

    padding: 0;

    border: 1px solid #e2e8f0 !important;
    border-radius: 11px;

    background: #ffffff !important;

    color: #0f172a !important;

    font-size: 23.32px !important;
    line-height: 1;

    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.05);
}

.menu-btn:hover {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}

@media (min-width: 901px) {

    .mobile-nav-overlay,
    .mobile-nav-drawer {
        display: none !important;
    }

    .menu-btn {
        display: none !important;
    }

}

@media (max-width: 900px) {

    .navbar {
        overflow: visible;
    }

    .menu-btn {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

}

/* =========================================
   FREE CLASS SELECTION MODAL
========================================= */

.free-class-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

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

    padding: 20px;

    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;

    transition: 0.25s ease;
}


.free-class-modal.show {
    opacity: 1;
    visibility: visible;
}


.free-class-modal-box {
    position: relative;

    width: min(500px, 100%);

    padding: 38px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.25);

    transform: translateY(20px);

    transition: 0.25s ease;
}


.free-class-modal.show .free-class-modal-box {
    transform: translateY(0);
}


.free-class-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 10px;

    background: #f1f5f9;

    color: #0f172a;

    font-size: 23.32px;

    cursor: pointer;
}


.free-class-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #2563eb;

    font-size: 11.66px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.free-class-modal-box h2 {
    margin-bottom: 8px;

    color: #0f172a;

    font-size: 31.8px;
}


.free-class-modal-box > p {
    margin-bottom: 25px;

    color: #64748b;

    font-size: 14.84px;
}


.free-class-options {
    display: grid;

    gap: 14px;
}


.free-class-option {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 18px;

    border: 1px solid #e2e8f0;
    border-radius: 15px;

    background: #f8fafc;

    transition: 0.25s ease;
}


.free-class-option:hover {
    border-color: #2563eb;

    background: #eff6ff;

    transform: translateY(-2px);
}


.free-class-option > span {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 13px;

    background: #dbeafe;

    font-size: 25.44px;
}


.free-class-option div {
    flex: 1;
}


.free-class-option strong {
    display: block;

    color: #0f172a;

    font-size: 16.96px;
}


.free-class-option small {
    display: block;

    margin-top: 2px;

    color: #64748b;

    font-size: 12.72px;
}


.free-class-option b {
    color: #2563eb;

    font-size: 21.2px;
}


@media (max-width: 600px) {

    .free-class-modal-box {
        padding: 30px 20px 22px;
    }

    .free-class-modal-box h2 {
        font-size: 26.5px;
    }

}


/* =========================================================
   STUDY HARBOR — MOBILE HOMEPAGE & NAV POLISH
   Added for the final responsive pass.
========================================================= */

.mobile-nav-section-label {
    display: block;
    margin: 2px 0 8px;
    padding: 0 4px;
    color: #94a3b8;
    font-size: 9.54px;
    font-weight: 900;
    letter-spacing: 1.35px;
}

#mobileNavContent {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 2px 20px 0;
}

.mobile-nav-drawer[aria-hidden="true"] {
    pointer-events: none;
}

@media (max-width: 900px) {

    .mobile-nav-drawer {
        width: min(330px, 90vw);
        padding: 16px;
    }

    .mobile-nav-head {
        padding-bottom: 14px;
        margin-bottom: 12px;
    }

    .mobile-nav-brand img {
        width: 36px;
        height: 36px;
    }

    .mobile-nav-brand strong {
        font-size: 13.78px;
    }

    .mobile-nav-close {
        width: 36px;
        height: 36px;
    }

    .mobile-nav-links {
        gap: 5px;
    }

    .mobile-nav-links a,
    .mobile-nav-links button {
        min-height: 44px;
        padding: 0 12px;
        border-radius: 9px;
        font-size: 13.25px;
    }

    .mobile-nav-divider {
        margin: 11px 0;
    }

    .mobile-nav-user {
        margin-bottom: 8px;
        padding: 10px;
    }

}


@media (max-width: 600px) {

    /* Compact the "Why Study Harbor?" section on phones. */
    .why-us {
        padding: 54px 16px !important;
    }

    .why-us .section-heading {
        margin-bottom: 26px !important;
    }

    .why-us .section-heading p {
        font-size: 10.6px;
        letter-spacing: 1.4px;
    }

    .why-us .section-heading h2 {
        max-width: 320px;
        margin: 7px auto 0;
        font-size: 29.68px !important;
        line-height: 1.18;
    }

    .why-us .features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .why-us .feature {
        min-width: 0;
        padding: 18px 10px !important;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 7px 20px rgba(15, 23, 42, 0.035);
    }

    .why-us .feature span {
        display: block;
        font-size: 29.68px;
        line-height: 1;
    }

    .why-us .feature h3 {
        margin: 10px 0 6px;
        font-size: 14.84px;
        line-height: 1.25;
    }

    .why-us .feature p {
        font-size: 11.66px;
        line-height: 1.45;
    }

}


/* =========================================================
   TEST v5 — MOBILE COURSE MEDIA + PROMO VIDEO
========================================================= */

#academic-level,
#instructors {
    scroll-margin-top: 92px;
}

.course-cover img {
    box-sizing: border-box;
    object-position: center;
}

.course-cover-empty,
.course-promo-fallback {
    display: grid;
    place-items: center;
    min-height: 100%;
    color: #ffffff;
    font-size: 13.78px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.course-promo-cover {
    cursor: default;
}

.course-promo-cover::after {
    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 23, 0.05),
            rgba(2, 6, 23, 0.34)
        );
}

.course-promo-cover.course-promo-playing {
    background: #000000;
}

.course-promo-cover.course-promo-playing::after {
    display: none;
}

.course-promo-cover.course-promo-playing iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #000000;
}

.course-promo-trigger {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.course-promo-play-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    padding-left: 4px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
    font-size: 20.14px;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.course-promo-trigger:hover
.course-promo-play-icon {
    transform: scale(1.08);
    background: #2563eb;
}

.course-promo-trigger small {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    font-size: 10.6px;
    font-weight: 900;
    letter-spacing: 0.5px;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.course-promo-open {
    overflow: hidden;
}

.course-promo-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.course-promo-modal.show {
    display: flex;
}

.course-promo-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.course-promo-dialog {
    position: relative;
    z-index: 2;
    width: min(920px, 100%);
    overflow: hidden;
    border-radius: 24px;
    background: #071426;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

.course-promo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: #ffffff;
}

.course-promo-head small {
    color: #60a5fa;
    font-size: 10.6px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.course-promo-head h2 {
    margin: 3px 0 0;
    font-size: 21.2px;
    line-height: 1.25;
}

.course-promo-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 25.44px;
    line-height: 1;
    cursor: pointer;
}

.course-promo-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.course-promo-player video,
.course-promo-player iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: contain;
    background: #000000;
}

@media (max-width: 600px) {
    .course-cover {
        height: auto !important;
        aspect-ratio: 16 / 9;
        margin-bottom: 24px;
    }

    .course-cover img {
        width: 100%;
        height: 100%;
        padding: 8px;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    .premium-course-card:hover
    .course-cover img {
        transform: none !important;
    }

    .course-promo-play-icon {
        width: 50px;
        height: 50px;
        font-size: 18.02px;
    }

    .course-promo-modal {
        padding: 12px;
    }

    .course-promo-dialog {
        border-radius: 18px;
    }

    .course-promo-head {
        padding: 14px 15px;
    }

    .course-promo-head h2 {
        font-size: 16.96px;
    }

    .course-promo-close {
        width: 36px;
        height: 36px;
    }
}


/* ====================================================================
   STUDY HARBOR — PREMIUM MOBILE NAVIGATION (VISUAL ONLY / v6.7.47)
   Intentionally limited to the mobile drawer; no desktop or auth changes.
==================================================================== */
@media (max-width: 900px) {
    .mobile-nav-overlay {
        background: rgba(7, 18, 38, .57);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .mobile-nav-drawer {
        width: min(350px, 90vw);
        max-width: 100vw;
        padding: 0;
        background: linear-gradient(155deg, #fbfdff 0%, #f1f6ff 49%, #f8fbff 100%);
        border-left: 1px solid rgba(255,255,255,.58);
        box-shadow: -24px 0 65px rgba(7, 20, 48, .24);
        transition: transform .31s cubic-bezier(.22, 1, .36, 1);
    }

    .mobile-nav-head {
        position: relative;
        flex: 0 0 auto;
        align-items: center;
        gap: 10px;
        padding: calc(23px + env(safe-area-inset-top, 0px)) 18px 24px;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0 0 22px 22px;
        background: linear-gradient(132deg, #0b1b39 0%, #15346b 62%, #2453a8 100%);
        box-shadow: 0 13px 28px rgba(24, 63, 136, .16);
    }

    .mobile-nav-head::before {
        content: "";
        position: absolute;
        width: 168px;
        height: 168px;
        right: -72px;
        top: -94px;
        border: 1px solid rgba(255,255,255,.19);
        border-radius: 50%;
        box-shadow: 0 0 0 26px rgba(255,255,255,.045), 0 0 0 56px rgba(255,255,255,.025);
        pointer-events: none;
    }

    .mobile-nav-brand { position: relative; z-index: 1; gap: 11px; }
    .mobile-nav-brand img {
        width: 44px;
        height: 44px;
        padding: 6px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 7px 20px rgba(0,0,0,.17), inset 0 0 0 1px rgba(255,255,255,.9);
        object-fit: contain;
        flex: 0 0 auto;
    }
    .mobile-nav-brand-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .mobile-nav-brand strong {
        display: block;
        color: #fff;
        font-size: 13.9px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: .8px;
    }
    .mobile-nav-brand-copy small {
        color: #bad2ff;
        font-size: 8.2px;
        line-height: 1.2;
        letter-spacing: 1.6px;
        font-weight: 800;
        white-space: nowrap;
    }
    .mobile-nav-close {
        position: relative;
        z-index: 1;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        border: 1px solid rgba(255,255,255,.21);
        border-radius: 12px;
        background: rgba(255,255,255,.12);
        color: #fff;
        font-size: 23px;
        line-height: 1;
        transition: background .18s ease, transform .18s ease;
    }
    .mobile-nav-close:is(:hover, :focus-visible) {
        color: #fff;
        background: rgba(255,255,255,.24);
        transform: rotate(90deg);
    }

    #mobileNavContent {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 21px 15px calc(28px + env(safe-area-inset-bottom, 0px));
        scrollbar-width: thin;
        scrollbar-color: #d8e2f2 transparent;
    }
    .mobile-nav-section-label {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 3px 4px 12px;
        padding: 0 3px;
        color: #7990b0;
        font-size: 9.5px;
        font-weight: 900;
        letter-spacing: 1.8px;
        line-height: 1.4;
    }
    .mobile-nav-section-label::after {
        content: "";
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg, rgba(151,173,208,.36), transparent);
    }
    .mobile-nav-links {
        gap: 8px;
        display: grid;
    }
    .mobile-nav-links a,
    .mobile-nav-links button {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 52px;
        padding: 7px 13px 7px 9px;
        gap: 11px;
        border: 1px solid rgba(210, 223, 241, .7);
        border-radius: 15px;
        background: rgba(255,255,255,.82);
        box-shadow: 0 3px 11px rgba(26,52,95,.025);
        color: #283b58;
        font-size: 13.8px;
        font-weight: 800;
        line-height: 1.2;
        text-align: left;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background .2s ease, color .2s ease, border-color .2s ease,
                    box-shadow .2s ease, transform .2s ease;
    }
    .mobile-nav-links a::after,
    .mobile-nav-links button::after {
        content: "";
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        margin-left: auto;
        border-right: 1.6px solid #9bacbf;
        border-top: 1.6px solid #9bacbf;
        transform: rotate(45deg);
        opacity: .75;
    }
    .mobile-nav-icon {
        display: inline-grid;
        place-items: center;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        border: 1px solid #e0ebff;
        background: linear-gradient(145deg, #eef5ff, #e5efff);
        color: #2e67cf;
        font-size: 17px;
        line-height: 1;
        box-shadow: inset 0 1px 1px rgba(255,255,255,.9);
    }
    .mobile-nav-text { min-width: 0; flex: 1 1 auto; }
    .mobile-nav-links a:is(:hover, :focus-visible, :active),
    .mobile-nav-links button:is(:hover, :focus-visible, :active) {
        background: #edf4ff;
        color: #1855b5;
        border-color: #b8cfff;
        box-shadow: 0 6px 16px rgba(38,96,202,.09);
        transform: translateX(-2px);
    }
    .mobile-nav-links a.active {
        color: #fff;
        background: linear-gradient(120deg, #2466dc, #1746a3);
        border-color: #2466dc;
        box-shadow: 0 10px 20px rgba(31,92,198,.23);
    }
    .mobile-nav-links a.active .mobile-nav-icon {
        background: rgba(255,255,255,.18);
        border-color: rgba(255,255,255,.22);
        color: #fff;
    }
    .mobile-nav-links a.active::after {
        border-color: #fff;
        opacity: .95;
    }
    .mobile-nav-divider {
        height: 1px;
        margin: 20px 4px 17px;
        background: linear-gradient(90deg, transparent, #dae5f4 9%, #dae5f4 91%, transparent);
    }
    .mobile-nav-user {
        gap: 12px;
        margin: 0 0 11px;
        padding: 12px;
        border: 1px solid #d9e8ff;
        border-radius: 15px;
        background: linear-gradient(115deg, #eff6ff, #f9fbff);
        box-shadow: 0 5px 15px rgba(30,76,154,.04);
    }
    .mobile-nav-avatar {
        width: 44px;
        height: 44px;
        background: #dbeafe;
        border: 1px solid #c2d9fb;
    }
    .mobile-nav-user small { color: #687f9d; font-size: 10px; }
    .mobile-nav-user strong { color: #152a48; font-size: 14px; }
    .mobile-nav-links .mobile-nav-logout {
        color: #b33347 !important;
        background: rgba(255,247,248,.9);
        border-color: #fee1e4;
    }
    .mobile-nav-logout .mobile-nav-icon {
        color: #bb334d;
        border-color: #ffdade;
        background: #fff0f1;
    }
    .mobile-nav-logout::after { display: none; }
    .mobile-nav-links .mobile-nav-logout:is(:hover, :focus-visible) {
        background: #fff0f1 !important;
        color: #b33347 !important;
        border-color: #fecbd1;
    }
    #mobileNavContent .mobile-nav-links:last-child a[href*="register"] {
        border-color: #b9d1ff;
        background: linear-gradient(135deg, #f0f6ff, #e7f1ff);
        color: #1d58ad;
    }

    .mobile-nav-links a:focus-visible,
    .mobile-nav-links button:focus-visible,
    .mobile-nav-close:focus-visible {
        outline: 3px solid #93baff;
        outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
        .mobile-nav-drawer,
        .mobile-nav-overlay,
        .mobile-nav-links a,
        .mobile-nav-links button,
        .mobile-nav-close { transition-duration: .01ms !important; }
    }
}