/* ============================================================
   TEACHIFY LMS — EDUGATOR THEME
   Modern Redesign | Indigo + Violet Brand
   ============================================================ */

@import url(../../../../assets/css/font-face.css);

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand */
    --primary:          #4F46E5;
    --primary-hover:    #4338CA;
    --primary-dark:     #3730A3;
    --primary-light:    #EEF2FF;
    --primary-ring:     rgba(79, 70, 229, 0.28);
    --accent:           #8B5CF6;
    --accent-light:     #EDE9FE;

    /* Semantic */
    --success:          #10B981;
    --success-light:    #D1FAE5;
    --warning:          #F59E0B;
    --warning-light:    #FEF3C7;
    --danger:           #EF4444;
    --danger-light:     #FEE2E2;
    --info:             #0EA5E9;
    --info-light:       #E0F2FE;

    /* Surface */
    --bg:               #F8FAFC;
    --surface:          #FFFFFF;
    --surface-2:        #F1F5F9;

    /* Text */
    --text:             #0F172A;
    --text-secondary:   #475569;
    --text-muted:       #94A3B8;

    /* Border */
    --border:           #E2E8F0;
    --border-strong:    #CBD5E1;

    /* Shadows */
    --shadow-sm:        0 1px 2px 0 rgba(0,0,0,.05);
    --shadow:           0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
    --shadow-md:        0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --shadow-lg:        0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

    /* Radius */
    --radius-sm:        6px;
    --radius:           10px;
    --radius-md:        12px;
    --radius-lg:        16px;
    --radius-pill:      9999px;

    /* Transitions */
    --transition:       150ms ease;
    --transition-md:    200ms ease;
    --transition-slow:  300ms ease;

    /* Legacy mappings */
    --nav-item-color:   #0F172A;
    --a-color:          var(--primary);
    --a-hover-color:    var(--primary-hover);
    --btn-theme-primary-bg:       var(--primary);
    --btn-theme-primary-hover-bg: var(--primary-hover);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.rtl { direction: rtl; text-align: right; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin-top: 0;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

a { color: var(--primary); text-decoration: none; -webkit-transition: color var(--transition); transition: color var(--transition); }
a:hover { color: var(--primary-hover); text-decoration: none; }
a.disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; }
a.nav-btn.disabled:hover { background-color: #CCCCCC; }

ul { margin: 0; list-style: none; padding: 0; }
img { max-width: 100%; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn, .form-control {
    border-radius: var(--radius-sm);
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-weight: 500;
}

.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    -webkit-transition: all var(--transition-md);
            transition: all var(--transition-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.btn:focus, .btn:focus-visible {
    outline: 3px solid var(--primary-ring);
    outline-offset: 2px;
}

.btn-theme-primary, .btn-primary {
    color: #fff !important;
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-theme-primary:hover, .btn-primary:hover {
    color: #fff !important;
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-theme-primary:active, .btn-primary:active {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    background-color: var(--primary-dark);
}

.btn-login-outline {
    color: var(--text-secondary);
    border-color: var(--border-strong);
    background: var(--surface);
}
.btn-login-outline:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light);
}

.btn-round { border-radius: var(--radius-pill); }
.btn-pill { border-radius: var(--radius-pill); padding-left: 20px; padding-right: 20px; }

.btn-dark-blue { background-color: var(--info); color: #FFF; font-size: 16px; }
.btn-dark-blue:hover { color: #ffffff; background-color: #0284C7; }

.btn-outline-danger.text-danger:hover { color: #ffffff !important; }

.btn-purple { color: #fff; background-color: var(--accent); border-color: var(--accent); }
.btn-purple:hover { color: #fff; background-color: #7C3AED; }

.btn-wide { min-width: 140px; cursor: pointer; -webkit-transition: box-shadow var(--transition-md); transition: box-shadow var(--transition-md); box-shadow: var(--shadow-sm); }

/* ============================================================
   FORMS
   ============================================================ */
.form-control {
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    -webkit-transition: border-color var(--transition), box-shadow var(--transition);
            transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
    outline: none;
    background: var(--surface);
    color: var(--text);
}
textarea.form-control { height: auto; padding: 10px 14px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; display: block; }

.has-error .invalid-feedback { display: block; }
.form-group.has-error { color: var(--danger); }
.form-group.has-error .form-control { border-color: var(--danger); }

/* ============================================================
   NAVBAR / HEADER
   ============================================================ */
.main-navbar-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.navbar { padding: 0 !important; min-height: 64px; }

.navbar-light .navbar-nav .nav-link {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
}
.navbar-light .navbar-nav .nav-link:hover:not(.btn) {
    color: var(--primary);
    background: var(--primary-light);
}
.navbar-light .navbar-nav .btn-theme-primary { color: #fff !important; }

.site-main-logo img { height: 34px; max-height: 34px; width: auto; }

/* Categories browse button */
.categories-nav-item-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
}
.nav-categories-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 64px;
}
.browse-categories-nav-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--primary-light);
    border: 1.5px solid #C7D2FE;
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
}
.browse-categories-nav-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.categories-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1005;
    margin: 0;
    padding: 0;
}
.categories-menu ul {
    position: relative;
    background-color: var(--surface);
    width: 280px;
    min-height: 380px;
    padding: 8px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--primary);
    box-shadow: var(--shadow-lg);
    color: var(--text-secondary);
    margin: 0;
    list-style: none;
    display: none;
}
.categories-menu ul.categories-ul-first {
    position: relative;
}
/* Invisible hover bridge to eliminate gap */
.categories-menu::before,
.categories-menu ul.categories-ul-first::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}

.nav-categories-item:hover .categories-ul-first {
    display: block;
    -webkit-animation: fadeInDown 150ms ease;
            animation: fadeInDown 150ms ease;
}
/* li is intentionally NOT positioned: the flyout's containing block is the
   parent panel (.categories-ul-first), so the flyout top always aligns with
   the panel top regardless of which category item is hovered */
.categories-menu ul.level-sub {
    position: absolute;
    left: 100%;
    top: -3px; /* align with the panel's outer top edge (3px accent border) */
    min-height: 100%; /* stretch to parent panel height so bottom items stay reachable */
    z-index: 1006;
}
/* Submenu hover bridge to eliminate gap */
.categories-menu ul.level-sub::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}
.categories-ul-first > li:hover > ul.level-sub {
    display: block;
    -webkit-animation: fadeInDown 150ms ease;
            animation: fadeInDown 150ms ease;
}
.categories-menu ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 9px 16px;
    color: var(--text);
    font-size: 14px;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
}
.categories-menu ul li a:hover { background: var(--primary-light); color: var(--primary); }
.categories-ul-first a .la-angle-right { margin-left: auto; color: var(--text-muted); font-size: 12px; }

/* Header search */
.header-search-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-width: 420px;
    min-width: 180px;
    position: relative;
    margin: 0 16px;
}
.header-search-wrap input.form-control {
    background-color: var(--surface-2);
    border-color: var(--border);
    width: 100%;
    padding-right: 44px;
    height: 40px;
    border-radius: var(--radius-pill);
}
.header-search-wrap input.form-control:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.header-search-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    line-height: 1;
    cursor: pointer;
}
.header-search-btn:hover { color: var(--primary); }

#mainNavbarContent .main-nav-right-menu { text-align: right; position: relative; }
#mainNavbarContent .main-nav-right-menu .dropdown-menu { right: 0; left: auto; min-width: 265px; }
#mainNavbarContent .main-nav-right-menu .dropdown-menu .dashboard-menu li a { font-size: 13px; }

.main-nav-auth-profile-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
}
.mini-cart-item,
.nav-item-user-profile {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 64px;
}

a#miniCartDropDown::after, a.profile-dropdown-toogle::after { content: none; }
.main-nav-auth-profile-wrap a#miniCartDropDown,
.main-nav-auth-profile-wrap a.profile-dropdown-toogle,
a#miniCartDropDown,
a.profile-dropdown-toogle {
    border: 1.5px solid transparent;
    height: 40px;
    min-width: 40px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 20px;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
    color: var(--text-secondary);
    position: relative;
    padding: 3px 6px;
    background: transparent;
}

.main-nav-auth-profile-wrap a#miniCartDropDown,
a#miniCartDropDown {
    width: 40px;
    padding: 0;
}

.main-nav-auth-profile-wrap a#miniCartDropDown:hover,
.main-nav-auth-profile-wrap a.profile-dropdown-toogle:hover,
.main-nav-auth-profile-wrap .mini-cart-item:hover a#miniCartDropDown,
.main-nav-auth-profile-wrap .nav-item-user-profile:hover a.profile-dropdown-toogle,
a#miniCartDropDown:hover,
a.profile-dropdown-toogle:hover {
    border-color: var(--border) !important;
    background: var(--surface-2) !important;
    color: var(--primary);
    border-radius: var(--radius-sm) !important;
}

#miniCartDropDown .badge {
    font-size: 10px;
    padding: 2px 5px;
    position: absolute;
    right: 2px;
    top: 2px;
    border-radius: var(--radius-pill);
    background: var(--danger) !important;
    color: #fff;
    line-height: 1;
    font-weight: 700;
}

.top-nav-user-name {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    line-height: 1;
}

.profile-dropdown-toogle { padding: 3px 6px; }
.profile-dropdown-toogle img,
.profile-dropdown-toogle .profile-photo,
.top-nav-user-name img {
    height: 32px !important;
    width: auto !important;
    max-height: 32px !important;
    border-radius: 4px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    border: none !important;
}

.nav-link.profile-dropdown-toogle .profile-text-photo,
.top-nav-user-name .profile-text-photo {
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* Profile Dropdown Menu */
.profile-dropdown-menu {
    position: absolute;
    display: none;
    z-index: 1005;
    right: 0;
    top: 100%;
    background-color: var(--surface);
    width: 260px;
    text-align: left;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
/* Invisible hover bridge to eliminate gap */
.profile-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}
.nav-item-user-profile:hover .profile-dropdown-menu {
    display: block;
    -webkit-animation: fadeInDown 150ms ease;
            animation: fadeInDown 150ms ease;
}
.profile-dropdown-userinfo {
    padding: 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.profile-dropdown-userinfo p {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    margin: 0 0 1px;
    line-height: 1.2;
}
.profile-dropdown-userinfo small {
    color: var(--text-muted);
    font-size: 11.5px;
    display: block;
    word-break: break-all;
}

.profile-dropdown-menu .dashboard-menu {
    list-style: none;
    padding: 4px 0;
    margin: 0;
}
.profile-dropdown-menu .dashboard-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.profile-dropdown-menu .dashboard-menu li a {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
    text-decoration: none;
    border-radius: 0;
    border-left: 3px solid transparent;
    margin: 0;
}
.profile-dropdown-menu .dashboard-menu li a:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-left-color: var(--primary);
}
.profile-dropdown-menu .dashboard-menu li.active a {
    background: var(--primary-light);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}
.profile-dropdown-menu .dashboard-menu li.sidebar-menu-logout {
    border-top: 1px solid var(--border);
    margin-top: 3px;
    padding-top: 3px;
}
.profile-dropdown-menu .dashboard-menu li a.menu-logout-link {
    color: var(--danger);
}
.profile-dropdown-menu .dashboard-menu li a.menu-logout-link:hover {
    background: var(--danger-light);
    color: var(--danger);
    border-left-color: var(--danger);
}

/* Mini Cart Dropdown */
.mini-cart-item .mini-cart-body-wrap {
    width: 320px;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 1005;
    right: 0;
    top: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
/* Invisible hover bridge to eliminate gap */
.mini-cart-item .mini-cart-body-wrap::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}
.mini-cart-item:hover .mini-cart-body-wrap {
    display: block;
    -webkit-animation: fadeInDown 150ms ease;
            animation: fadeInDown 150ms ease;
}
.mini-cart-total-wrap { background-color: var(--surface-2); padding: 16px; border-top: 1px solid var(--border); }
.mini-cart-course-item a:hover { background-color: var(--primary-light); }
.minicart-course-thumbnail { -webkit-box-flex: 0; -ms-flex: 0 0 72px; flex: 0 0 72px; }
.mini-cart-course-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.minicart-course-info .current-price { color: var(--primary); font-weight: 600; font-size: 14px; }
.minicart-course-info .old-price { font-size: 12px; color: var(--text-muted); text-decoration: line-through; }
.mini-cart-course-item { position: relative; border-bottom: 1px solid var(--border); }
.mini-cart-course-item .remove-cart-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 20px;
    background-color: var(--danger-light);
    color: var(--danger);
    border: none;
    font-size: 14px;
    cursor: pointer;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.mini-cart-course-item .remove-cart-btn:hover { background-color: var(--danger); color: #fff; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header-wrap { margin-bottom: 32px; }
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
}
.section-title .btn-link { font-size: 14px; font-weight: 500; color: var(--primary); padding: 0; }
.section-subtitle { color: var(--text-muted); font-size: 15px; margin: 0; }

/* ============================================================
   HOME PAGE — HERO (bold poster style: indigo + amber flats)
   ============================================================ */
.hero-banner {
    padding: 88px 0 100px;
    background: #4F46E5;
    position: relative;
    overflow: hidden;
}
.hero-banner::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    -webkit-clip-path: ellipse(55% 100% at 50% 100%);
            clip-path: ellipse(55% 100% at 50% 100%);
    pointer-events: none;
}
/* flat two-tone decorations */
.hero-deco-circle {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: #4338CA;
    top: -240px;
    left: -180px;
    pointer-events: none;
}
.hero-banner-accent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    background: #FBBF24;
    border-radius: 48px 0 0 48px;
    pointer-events: none;
}
.hero-container { position: relative; z-index: 1; }

.hero-left-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-title {
    font-size: 3.3rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.08;
    margin-bottom: 18px;
    letter-spacing: -0.03em;
}
.hero-subtitle {
    font-size: 1.1rem;
    color: #DDD6FE;
    margin-bottom: 30px;
    max-width: 520px;
    line-height: 1.6;
}
.hero-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
}
.btn-hero-primary {
    background: #FBBF24;
    color: #1E1B4B !important;
    border: 2.5px solid #1E1B4B;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 14px;
    box-shadow: 5px 5px 0 #1E1B4B;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    -webkit-transition: all 0.15s ease;
            transition: all 0.15s ease;
}
.btn-hero-primary:hover {
    -webkit-transform: translate(-2px, -2px);
        -ms-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #1E1B4B;
    color: #1E1B4B !important;
}
.btn-hero-primary:active { -webkit-transform: translate(2px, 2px); -ms-transform: translate(2px, 2px); transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1E1B4B; }
.btn-hero-secondary {
    background: transparent;
    color: #FFFFFF !important;
    border: 2.5px solid #FFFFFF;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 14px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    -webkit-transition: all 0.15s ease;
            transition: all 0.15s ease;
}
.btn-hero-secondary:hover {
    background: #FFFFFF;
    color: #4338CA !important;
    -webkit-transform: translate(-2px, -2px);
        -ms-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(30, 27, 75, 0.55);
}
.hero-features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 22px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 2px solid rgba(255, 255, 255, 0.22);
}
.hero-feature-item {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
}
.hero-feature-item i {
    font-size: 17px;
    color: #FBBF24;
}

/* Right column: poster course card */
.hero-right-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-poster-card {
    display: block;
    position: relative;
    background: #FFFFFF;
    border: 3px solid #1E1B4B;
    border-radius: 20px;
    box-shadow: 12px 12px 0 #1E1B4B;
    -webkit-transform: rotate(-1.5deg);
        -ms-transform: rotate(-1.5deg);
            transform: rotate(-1.5deg);
    overflow: visible;
    max-width: 380px;
    margin-left: auto;
    text-decoration: none;
    -webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-poster-card:hover {
    -webkit-transform: rotate(0deg) translate(-3px, -3px);
        -ms-transform: rotate(0deg) translate(-3px, -3px);
            transform: rotate(0deg) translate(-3px, -3px);
    box-shadow: 16px 16px 0 #1E1B4B;
    text-decoration: none;
}
.hero-poster-sticker {
    position: absolute;
    top: -15px;
    right: -12px;
    z-index: 2;
    background: #FBBF24;
    color: #1E1B4B;
    border: 2.5px solid #1E1B4B;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
            transform: rotate(4deg);
    box-shadow: 3px 3px 0 #1E1B4B;
}
.hero-poster-cover {
    display: block;
    border-bottom: 3px solid #1E1B4B;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.hero-poster-cover img {
    display: block;
    width: 100%;
    height: 175px;
    object-fit: cover;
    -webkit-transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;
}
.hero-poster-card:hover .hero-poster-cover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }
.hero-poster-body { display: block; padding: 15px 17px 17px; }
.hero-poster-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
    margin-bottom: 7px;
}
.hero-poster-rating b { color: #1E1B4B; font-size: 13.5px; }
.hero-poster-rating small { color: var(--text-muted); font-size: 12px; }
.hero-poster-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    font-weight: 800;
    color: #1E1B4B;
    line-height: 1.35;
    margin-bottom: 13px;
    letter-spacing: -0.01em;
}
.hero-poster-foot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 10px;
}
.hero-poster-price { font-weight: 800; color: #1E1B4B; }
.hero-poster-cta {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    background: #FBBF24;
    color: #1E1B4B;
    border: 2px solid #1E1B4B;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 800;
    -webkit-transition: all 0.15s ease;
            transition: all 0.15s ease;
}
.hero-poster-card:hover .hero-poster-cta {
    -webkit-transform: translate(-1px, -1px);
        -ms-transform: translate(-1px, -1px);
            transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #1E1B4B;
}

@media (max-width: 1199.98px) {
    .hero-title { font-size: 2.9rem; }
    .hero-banner-accent { width: 40%; }
}

@media (max-width: 991.98px) {
    .hero-banner-accent { display: none; }
    .hero-poster-card { margin: 42px auto 10px; -webkit-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg); }
}

/* ============================================================
   HOME PAGE — INFO BOXES
   ============================================================ */
.home-section-wrap { padding: 64px 0; }
.home-section-wrap:nth-of-type(even) { background-color: var(--surface-2); }
.home-info-box-wrapper { background: var(--surface) !important; }

.home-info-box {
    text-align: center;
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    background: var(--surface);
    -webkit-transition: all var(--transition-slow);
            transition: all var(--transition-slow);
    height: 100%;
}
.home-info-box:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-ring), var(--shadow-md);
    -webkit-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
            transform: translateY(-4px);
}
.home-info-box img { max-width: 64px; height: auto; margin-bottom: 20px; }
.home-info-box h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.home-info-box p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ============================================================
   COURSE CARDS
   ============================================================ */
.course-card {
    background-color: var(--surface);
    font-size: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    -webkit-transition: all var(--transition-slow);
            transition: all var(--transition-slow);
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.course-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    -webkit-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
            transform: translateY(-4px);
}
.course-card-grid-wrap { margin-bottom: 24px; }
.course-card .course-card-img-wrap { position: relative; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0; }
.course-card .course-card-img-wrap a { display: block; aspect-ratio: 16/9; overflow: hidden; }
.course-card .course-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: -webkit-transform var(--transition-slow);
            transition: transform var(--transition-slow);
}
.course-card:hover .course-card-img-wrap img { -webkit-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); }

.course-card-add-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1.5px solid var(--border) !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 16px;
    color: var(--danger) !important;
    -webkit-transition: all var(--transition-md);
            transition: all var(--transition-md);
    padding: 0;
    margin: 0;
}
.course-card-add-wish:hover {
    background: var(--danger);
    color: #fff !important;
    border-color: var(--danger) !important;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.course-card .course-card-contents { padding: 16px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.course-card a { color: var(--text); }
.course-card a:hover { color: var(--primary); }
.course-card .course-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 10px;
    color: var(--text);
}
.course-card-short-info { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.course-card-author { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.course-card-author a { color: var(--primary); font-weight: 500; }
.course-card-info-wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.course-card-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }

.star-ratings-group i { color: #F59E0B; font-size: 13px; }
.star-ratings-point { font-size: 13px; font-weight: 600; color: var(--text); }
.star-ratings-count { font-size: 12px; color: var(--text-muted); }

.price-html-wrap { color: var(--text); }
.price-html-wrap span { vertical-align: middle; font-weight: 700; }
.price-html-wrap .current-price { color: var(--text); font-size: 15px; font-weight: 700; }
.price-html-wrap .old-price { font-size: 12px; color: var(--text-muted); font-weight: 400; text-decoration: line-through; }
.add-to-cart-btn.btn-sm { font-size: 12px; padding: 5px 12px; }

/* ============================================================
   MID CALL TO ACTION (FULL WIDTH)
   ============================================================ */
.mid-callto-action-wrap {
    position: relative;
    width: 100%;
    background: #4F46E5;
    padding: 80px 0;
    overflow: hidden;
    color: #FFFFFF;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mid-cta-bg-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: -webkit-radial-gradient(circle, rgba(139, 92, 246, 0.28) 0%, transparent 70%);
    background: radial-gradient(circle, rgba(139, 92, 246, 0.28) 0%, transparent 70%);
    -webkit-filter: blur(60px);
            filter: blur(60px);
    pointer-events: none;
}

.mid-callto-action-wrap::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: -webkit-radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    -webkit-filter: blur(60px);
            filter: blur(60px);
    pointer-events: none;
}

.mid-cta-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
}

.mid-cta-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: #F8FAFC;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
}

.mid-cta-badge i {
    color: #FDE047;
    font-size: 15px;
}

.mid-cta-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.mid-cta-subtitle {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 auto 34px;
    max-width: 660px;
    font-weight: 400;
}

.mid-cta-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 16px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 0;
}

.btn-mid-cta-primary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 14px 30px;
    background: #FFFFFF;
    color: var(--primary-dark) !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1.5px solid #FFFFFF;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
    text-decoration: none;
}

.btn-mid-cta-primary:hover {
    background: #F8FAFC;
    color: var(--primary) !important;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    text-decoration: none;
}

.btn-mid-cta-secondary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
    text-decoration: none;
}

.btn-mid-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    color: #FFFFFF !important;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    text-decoration: none;
}

@media (max-width: 767.5px) {
    .mid-callto-action-wrap {
        padding: 56px 0;
    }
    .mid-cta-title {
        font-size: 1.85rem;
    }
    .mid-cta-subtitle {
        font-size: 1rem;
    }
    .mid-cta-actions {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .mid-cta-actions .btn {
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

/* ============================================================
   BLOG CARDS
   ============================================================ */
.home-blog-card, .blog-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    -webkit-transition: all var(--transition-slow);
            transition: all var(--transition-slow);
    height: 100%;
}
.home-blog-card:hover, .blog-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
}
.home-blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 0; display: block; }
.home-blog-card .excerpt { padding: 20px; }
.home-blog-card h2, .blog-card h2 { font-size: 1.05rem; margin-bottom: 12px; font-weight: 600; }
.home-blog-card h2 a { color: var(--text); }
.home-blog-card h2 a:hover { color: var(--primary); }
.home-blog-card a:hover { color: var(--primary); }
.home-blog-card .post-meta { color: var(--text-muted); font-size: 13px; width: 100%; display: block; margin-bottom: 12px; }
.home-blog-card .post-meta a { color: var(--text-muted); }
.home-blog-card .post-meta a:hover { color: var(--primary); }
.btn-see-all-posts-wrapper { border-top: 1px solid var(--border) !important; padding-top: 24px; }
.post-content { color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.blog-regular-post .blog-card-thumbnail-wrapper { margin-bottom: 24px; }
.blog-feature-post .blog-card { display: -webkit-box; display: -ms-flexbox; display: flex; }
.blog-feature-post .blog-card-thumbnail-wrapper { margin-right: 24px; }
.blog-card .excerpt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.blog-feature-post .blog-card { margin-bottom: 24px; }

/* ============================================================
   HOME STATS & CTA
   ============================================================ */
.home-partners-logo-section { border-bottom: 1px solid var(--border); padding-bottom: 40px; margin-bottom: 40px; }
.home-partners-logo-wrap { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0 40px; }
.home-partners-logo-wrap .logo-item img { height: 36px; width: auto; opacity: 0.5; -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: all var(--transition-md); transition: all var(--transition-md); }
.home-partners-logo-wrap .logo-item img:hover { opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); }
.home-partners-logo-wrap .logo-item { margin: 0 16px; }
.home-partners-title { font-weight: 400; color: var(--text-muted); font-size: 14px; }
.home-course-stats-wrap { padding: 48px 0; margin-bottom: 0; }
.home-course-stats-wrap h5 { font-weight: 300; color: var(--text-muted); }

/* Home Dual CTA Section */
.home-cta-section {
    background: #ffffff;
    border-top: 1px solid var(--border);
    padding: 64px 0;
    margin-bottom: 0;
}
.home-cta-row {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.home-cta-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.home-cta-left-col {
    border-right: 1px solid var(--border);
}
.home-cta-text-wrapper {
    padding: 0 40px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
}
.home-cta-icon {
    width: 56px;
    height: 56px;
    background: var(--primary-light);
    border-radius: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0 auto 18px;
    font-size: 28px;
    color: var(--primary);
    -webkit-transition: -webkit-transform var(--transition), box-shadow var(--transition);
            transition: transform var(--transition), box-shadow var(--transition);
}
.home-cta-col:hover .home-cta-icon {
    -webkit-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
            transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2);
}
.home-cta-text-wrapper h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.home-cta-text-wrapper p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 22px;
    max-width: 440px;
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.checkout-page-wrap { background-color: var(--bg); }
.order-summery-course-thumbnail { -webkit-box-flex: 0; -ms-flex: 0 0 64px; flex: 0 0 64px; }
.checkout-section {
    background-color: var(--surface);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    padding: 24px;
}
.order-summery-course-item a { color: var(--text); font-weight: 600; }
.order-summery-course-item a:hover { color: var(--primary); }
.enroll-course-btn-price { color: rgba(255,255,255,0.8); font-size: 90%; }
.agreement-text { line-height: 2; font-size: 13px; color: var(--text-muted); }
.stripe-credit-card-form-wrap { max-width: 420px; }

/* ============================================================
   DASHBOARD
   ============================================================ */
#ChartArea { width: 100%; height: 400px; }
.dashboard-wrap { background-color: var(--bg); min-height: 100vh; }
.dashboard-menu-col { background: transparent; }
.dashboard-menu li a {
    padding: 9px 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 0;
    margin: 0;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
    border-left: 3px solid transparent;
}
.dashboard-menu li a:hover { background-color: var(--primary-light); color: var(--primary); border-left-color: var(--primary); }
.dashboard-menu li.active a { color: var(--primary); background-color: var(--primary-light); border-left-color: var(--primary); font-weight: 600; }
.dashboard-menu li.active a:hover { color: var(--primary-hover); }
.dashboard-menu li.sidebar-menu-logout { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.dashboard-menu li a.menu-logout-link { color: var(--danger); }
.dashboard-menu li a.menu-logout-link:hover { background-color: var(--danger-light); color: var(--danger); border-left-color: var(--danger); }

.dashboard-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    -webkit-transition: all var(--transition-slow);
            transition: all var(--transition-slow);
}
.dashboard-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.dashboard-card .card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 24px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.dashboard-card .card-icon i { font-size: 24px; }
.dashboard-card .text-value h4 { font-size: 1.75rem; font-weight: 800; margin: 0; color: var(--text); }
.dashboard-section-header { background-color: var(--surface-2); border-bottom: 1px solid var(--border); padding: 16px 20px; }
.dashboard-section-header i { line-height: 1; }

.course-edit-nav a { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.course-edit-nav a i { font-size: 18px; color: var(--text-muted); }
.course-edit-nav a.active { color: var(--primary); }
.course-edit-nav a.active i { color: var(--primary); }

.section-add-item-wrap { font-weight: 600; font-size: 15px; }
.section-add-item-wrap.bg-dark a { color: #fbbf24; }
.section-item-btn-tool { line-height: 1; color: var(--text-muted); -webkit-transition: color var(--transition); transition: color var(--transition); }
.section-item-btn-tool:hover { color: var(--text); }
.btn-outline-danger.text-danger:hover { color: #ffffff !important; }

.loader:before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    margin-right: 5px;
    content: "\f110";
    -webkit-animation: la-spin 2s infinite linear;
            animation: la-spin 2s infinite linear;
    display: inline-block;
}
.la.loader:before { content: "\f110"; }

.edit-curriculum-item .section-item-top:hover { cursor: move; }
.edit-curriculum-item .section-item-title { max-width: 420px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.ellipsis { white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.course-edit-header .header-course-title { max-width: 440px; }
.section-item-top .section-item-btn-tool { display: none; }
.section-item-top:hover .section-item-btn-tool { display: block; }
.single-attachment-form { width: 48%; }
.dashboard-section-item-attachments .downloadable-materials { font-size: 15px; font-weight: 600; }
.dashboard-section-item-attachments .dashboard-item-attachment .attachment-title.flex-grow-1 { font-size: 13px; }
textarea#benefits, textarea#requirements { font-size: 14px; }

.dashboard-inline-submenu-wrap a {
    color: var(--text-secondary);
    display: inline-block;
    padding: 8px 20px 12px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
}
.dashboard-inline-submenu-wrap a.active, .dashboard-inline-submenu-wrap a:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.report-top-sub-menu a { text-align: center; font-size: 14px; padding: 7px 12px; font-weight: 500; }
.report-top-sub-menu a.active { background-color: var(--primary); color: #ffffff; border: 1px solid var(--primary); }
.report-filter-date-range-wrap input, .report-filter-date-range-wrap .btn, .report-filter-date-range-wrap .input-group-text { border-radius: 0; }

/* ============================================================
   QUIZ BUILDER
   ============================================================ */
.question-options-wrap .question-opt { border: 1.5px solid var(--border); background-color: var(--surface-2); border-radius: var(--radius-sm); }
.question-options-wrap .question-opt.newly { background-color: #ECFDF5; border-color: #A7F3D0; }
.question-basic-info .question-title { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.question-basic-info .question-score { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; }
.question-basic-info .question-image-wrap { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; }
.option-type-selection-wrapper { font-size: 13px; }
.option-type-selection-wrapper label { background-color: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); -webkit-transition: all var(--transition); transition: all var(--transition); }
.option-type-selection-wrapper label:hover, .option-type-selection-wrapper input:checked+label {
    background-color: var(--primary);
    border: 1.5px solid var(--primary-dark);
    color: #ffffff;
    cursor: pointer;
}
.question-opt-display { font-size: 12px; color: var(--text-muted); }
.la-question-radio:before { content: "\f192"; }
.la-question-checkbox:before { content: "\f14a"; }
.la-question-text:before { content: "\f14b"; }
.la-question-textarea:before { content: "\f15c"; }

label.checkbox span, label.radio span {
    font-family: 'Line Awesome Free';
    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-size: 135%;
    color: var(--primary);
}
label.checkbox input[type=checkbox], label.radio input[type=radio] { display: none; }
label.checkbox input[type=checkbox]:checked+span, label.radio input[type=radio]:checked+span { font-weight: 900; font-size: 135%; }
label.checkbox span:before { content: "\f0c8"; }
label.checkbox input[type=checkbox]:checked+span:before { content: "\f14a"; }
label.radio span:before { content: "\f111"; }
label.radio input[type=radio]:checked+span:before { content: "\f192"; }
.quiz-question-item .quiz-question-item-image { height: 38px; width: auto; }
.quiz-question-item-title { -webkit-box-flex: 13; -ms-flex: 13; flex: 13; }

/* ============================================================
   DASHBOARD CURRICULUM
   ============================================================ */
.section-item-form-html { background-color: var(--primary-light); border: 1px solid #C7D2FE; }
.curriculum-item-edit-tab a { border-radius: 0 !important; }
.curriculum-item-edit-tab .list-group-item { padding: .40rem 1.25rem; }
.video_source_wrap_html5 i { font-size: 50px; color: var(--text-muted); }
.ui-sortable-placeholder { background-color: var(--primary-light) !important; border: 2px dashed var(--primary) !important; }
.lecture_video_source { width: 200px; }

/* ============================================================
   SWITCH TOGGLE
   ============================================================ */
label.switch { position: relative; cursor: pointer; margin: 0; }
label.switch span { display: block; }
label.switch span:before {
    content: "";
    display: block;
    height: 20px;
    width: 36px;
    border: 2px solid var(--border-strong);
    background: var(--border-strong);
    border-radius: 13em;
    box-sizing: content-box;
    -webkit-transition: all var(--transition-slow);
            transition: all var(--transition-slow);
    position: absolute;
    top: 4px;
    left: 0;
}
label.switch span:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: #fff;
    position: absolute;
    top: 7px;
    left: 3px;
    border-radius: 50%;
    -webkit-transition: all var(--transition-slow);
            transition: all var(--transition-slow);
    box-shadow: var(--shadow-sm);
}
label.switch input[type=checkbox] { display: none; }
label.switch input[type=checkbox]:checked+span:after { left: 19px; }
label.switch input[type=checkbox]:checked+span:before { border-color: var(--primary); background: var(--primary); }

/* ============================================================
   INSTRUCTOR ADD
   ============================================================ */
.course-default-author-wrap { background-color: #FFFBEB; border: 1px solid var(--warning-light); border-radius: var(--radius-sm); }
label .instructor-details { font-size: 12px; color: var(--text-muted); }
label.add-instructor-result-item { background-color: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; position: relative; -webkit-transition: all var(--transition); transition: all var(--transition); }
label.add-instructor-result-item:hover, .instructor-search-results input:checked+label { background-color: var(--primary-light); border: 1.5px solid #A5B4FC; }

/* ============================================================
   PRICING
   ============================================================ */
.course-price-type-wrap label { text-align: center; cursor: pointer; height: 100px; width: 100px; }
.course-price-type-wrap label img { max-height: 60px; width: auto; display: block; margin: 0 auto; }
.course-price-type-wrap label input { display: none; }
.course-price-type-wrap label span { text-align: center; display: block; border: 1.5px solid transparent; border-radius: var(--radius-sm); padding: 10px 20px; -webkit-transition: all var(--transition); transition: all var(--transition); }
.course-price-type-wrap label input[type=radio]:checked+span { border-color: var(--primary); background: var(--primary-light); }
.course-price-type-wrap label:hover strong, .course-price-type-wrap label input[type=radio]:checked+span strong { color: var(--primary); }
.course-publish-icon { font-size: 50px; color: var(--success); }

/* ============================================================
   WITHDRAW PREFERENCE
   ============================================================ */
.select-withdraw-method-name label { cursor: pointer; }
.select-withdraw-method-name input[type=radio]:checked+label { border-color: #c1eec5 !important; background: var(--success-light); }

.quiz-attempt-stats .list-group-item { width: 100%; text-align: center; border-radius: 0 !important; }

/* ============================================================
   MEDIA MANAGER
   ============================================================ */
.media-manager-grid-wrap { display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: repeat(auto-fit, minmax(120px, 120px)); gap: 1rem; }
.adminMediaModalInfoSide { font-size: 12px; }
img#mediaManagerPreviewScreen { border: 1px solid var(--border); padding: 5px; border-radius: var(--radius-sm); }
#filemanager { max-width: 90%; }
.media-modal-info-wrap { -webkit-box-flex: 0; -ms-flex: 0 0 250px; flex: 0 0 250px; }
.media-modal-thumbnail { display: block; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; }
.media-modal-thumbnail img { width: 100%; height: auto; }
.media-modal-thumbnail.selected { border: 2px solid var(--primary); padding: 2px; }
.allowed_file_text { font-size: 12px; color: var(--text-muted); }
#modal-filemanager { z-index: 10050; }
#modal-filemanager .pagination { margin: 0; }
#modal-filemanager label { word-wrap: break-word; }
.image-wrap .img-thumbnail { max-width: 80px; }
#modal-filemanager .card { height: 147px; overflow: hidden; margin-bottom: 2rem; }
#modal-filemanager .card .card-body { padding: 5px; font-size: 12px; }
#modal-filemanager .card .card-body label { white-space: nowrap; }

/* ============================================================
   COURSE SINGLE PAGE
   ============================================================ */
.course-section-header { cursor: pointer; padding: 12px 16px; border-radius: var(--radius-sm); -webkit-transition: background var(--transition); transition: background var(--transition); }
.course-section-header:hover { background: var(--surface-2); }
.course-section-header .course-section-name { color: var(--text-secondary); font-weight: 600; }

.page-header-jumborton {
    min-height: 240px;
    background: #4F46E5;
    padding: 48px 0;
}
.page-header-jumborton .page-header-left { color: #ffffff; }
.page-header-jumborton h1 { font-weight: 700; font-size: 1.875rem; line-height: 1.3; color: #fff; }
.page-header-subtitle { font-size: 1rem; font-weight: 400; color: #C7D2FE; margin-top: 10px; }

/* Course Header Enroll Box */
.page-header-right-enroll-box {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    -webkit-transition: box-shadow var(--transition);
            transition: box-shadow var(--transition);
}

.page-header-right-enroll-box .course-card-preview-media {
    background: #000;
    position: relative;
    overflow: hidden;
}

.page-header-right-enroll-box .course-card-preview-media img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    display: block;
}

.page-header-right-enroll-box .enroll-box-body {
    padding: 24px;
}

.course-landing-page-price-wrap {
    margin-bottom: 16px;
}

.course-landing-page-price-wrap .price-html-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
}

.course-landing-page-price-wrap .price-html-wrap .current-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.5px;
}

.course-landing-page-price-wrap .price-html-wrap .old-price {
    font-size: 1.05rem;
    color: var(--text-muted);
    font-weight: 500;
}

.course-landing-page-price-wrap .price-html-wrap .discount-text {
    font-size: 12px;
    font-weight: 700;
    color: #DC2626;
    background: #FEF2F2;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(220, 38, 38, 0.18);
}

.course-landing-page-price-wrap .price-html-wrap .free-text {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--success);
    line-height: 1;
}

/* Side by side enroll buttons */
.enroll-box-btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: 100%;
}

.enroll-box-btn-group .btn,
.enroll-box-btn-group button {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
    width: 50%;
    min-width: 0;
    margin: 0 !important;
    padding: 12px 8px;
    font-size: 14.5px;
    font-weight: 700;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    line-height: 1.3;
}

.enroll-box-btn-group .btn-outline-dark {
    border: 1.5px solid var(--text);
    color: var(--text);
    background: transparent;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
}

.enroll-box-btn-group .btn-outline-dark:hover {
    background: var(--text);
    color: #FFFFFF;
    border-color: var(--text);
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.enroll-box-btn-group .btn-theme-primary:hover {
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.enroll-box-btn-group .btn:disabled,
.enroll-box-btn-group .btn[disabled] {
    opacity: 0.75;
    cursor: not-allowed;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    box-shadow: none !important;
}

.enroll-guarantee {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 14px;
}

.enroll-guarantee i {
    font-size: 16px;
    color: #10B981;
}

/* ============================================================
   STICKY ENROLL BAR ON SCROLL (.enroll-box-body)
   ============================================================ */
.course-sticky-enroll-bar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 995;
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    -webkit-transform: translateY(-120%);
        -ms-transform: translateY(-120%);
            transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    padding: 10px 0;
}

.course-sticky-enroll-bar.is-visible {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-bar-course-title {
    font-size: 15px;
    color: var(--text);
    max-width: 480px;
    line-height: 1.3;
}

.sticky-enroll-box-body {
    padding: 0 !important;
    gap: 16px;
}

.sticky-enroll-box-body .course-landing-page-price-wrap {
    margin-bottom: 0 !important;
}

.sticky-enroll-box-body .course-landing-page-price-wrap .current-price {
    font-size: 1.5rem;
}

.sticky-enroll-box-body .course-landing-page-price-wrap .old-price {
    font-size: 0.95rem;
}

.sticky-btn-group {
    min-width: 260px;
    gap: 8px;
    margin-bottom: 0 !important;
}

.sticky-btn-group .btn {
    padding: 9px 14px !important;
    font-size: 13.5px !important;
}

@media (max-width: 767.98px) {
    .course-sticky-enroll-bar {
        top: auto;
        bottom: 0;
        -webkit-transform: translateY(120%);
            -ms-transform: translateY(120%);
                transform: translateY(120%);
        border-top: 1px solid var(--border);
        border-bottom: none;
        box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.12);
        padding: 10px 12px;
    }

    .course-sticky-enroll-bar.is-visible {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }

    .sticky-enroll-box-body {
        width: 100%;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .sticky-btn-group {
        min-width: 180px;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }
}

.course-curriculum-item { padding: 10px 16px; border-radius: var(--radius-sm); -webkit-transition: background var(--transition); transition: background var(--transition); }
.course-curriculum-item:hover { background: var(--surface-2); }
.course-section-item-details { -webkit-box-flex: 0; -ms-flex: 0 0 190px; flex: 0 0 190px; }
.section-item-duration { -webkit-box-flex: 0; -ms-flex: 0 0 64px; flex: 0 0 64px; text-align: right; font-size: 12px; color: var(--text-muted); }
.course-curriculum-title { color: var(--text-secondary); font-size: 14px; }

.course-widget { background-color: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); overflow: hidden; }
.course-widget .la:before { line-height: 1.6; }

.content-expand-wrap { max-height: 300px; overflow: hidden; position: relative; }
.expand-more-btn-wrap {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(rgba(255,255,255,0.95)), to(#FFF));
    background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.95), #FFF);
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.95), #FFF);
    bottom: 0;
    display: block;
    padding-top: 30px;
    position: absolute;
    width: 100%;
}
.course-widget .expand-more-btn-wrap {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(241,245,249,0)), color-stop(rgba(241,245,249,0.95)), to(#F1F5F9));
    background: -webkit-linear-gradient(rgba(241,245,249,0), rgba(241,245,249,0.95), #F1F5F9);
    background: linear-gradient(rgba(241,245,249,0), rgba(241,245,249,0.95), #F1F5F9);
}
.expand-more-btn.btn-link { color: var(--primary); font-weight: 500; }

.course-whats-included-box ul li { display: -webkit-box; display: -ms-flexbox; display: flex; vertical-align: top; line-height: 18px; margin-bottom: 10px; font-size: 14px; }
.course-whats-included-box ul li i { width: 20px; color: var(--success); }
.course-whats-included-box.course-widget { height: 100%; }

/* ============================================================
   COURSE SIDEBAR & WHAT'S INCLUDED WIDGET
   ============================================================ */
.course-sidebar {
    position: relative;
}

.course-sidebar-widget {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.course-sidebar-widget-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.course-includes-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
}

.course-includes-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.course-includes-list .include-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    margin-right: 12px;
    font-size: 17px;
}

.course-includes-list .include-text {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.course-single-instructor-wrap .instructor-stats { -webkit-box-flex: 0; -ms-flex: 0 0 220px; flex: 0 0 220px; }
.instructor-stats .profile-image img { border-radius: 50%; width: 100px; height: 100px; object-fit: cover; border: 4px solid var(--surface); box-shadow: var(--shadow-md); }
.instructor-details .instructor-name { font-weight: 700; font-size: 1rem; }

/* ============================================================
   STAR RATINGS & COURSE RATINGS OVERVIEW
   ============================================================ */
.generated-star-rating-wrap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    vertical-align: middle;
    white-space: nowrap;
    gap: 2.5px;
    line-height: 1;
}

.generated-star-rating-wrap i {
    color: #F59E0B;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    cursor: default;
}

/* Course Hero Rating Badge */
.course-hero-rating-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    gap: 8px;
}

.course-hero-rating-badge .rating-value {
    font-weight: 800;
    color: #FBBF24;
    font-size: 14px;
    line-height: 1;
}

.course-hero-rating-badge .generated-star-rating-wrap i {
    font-size: 13px;
}

.course-hero-rating-badge .rating-count {
    color: #E2E8F0;
    font-size: 12px;
    line-height: 1;
}

/* In Write Review modal */
.review-write-star-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
}
.review-write-star-wrap i {
    color: #F59E0B;
    font-size: 24px;
    cursor: pointer;
    -webkit-transition: -webkit-transform var(--transition);
            transition: transform var(--transition);
}
.review-write-star-wrap i:hover {
    -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
            transform: scale(1.15);
}

/* Rating Overview Card */
.course-ratings-wrap {
    margin-top: 24px;
}

.course-ratings-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    margin: 0 0 20px;
    line-height: 1.3;
}

.rating-overview-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
}

.rating-overview-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-right: 1px solid var(--border);
    padding-right: 28px;
}

.rating-big-score {
    font-size: 54px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.rating-avg-stars .generated-star-rating-wrap {
    gap: 4px;
}

.rating-avg-stars .generated-star-rating-wrap i {
    font-size: 20px;
}

.rating-overview-label {
    font-size: 13.5px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Breakdown List & Small Bars */
.rating-overview-right {
    padding-left: 28px;
}

.rating-breakdown-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
    width: 100%;
}

.rating-breakdown-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    width: 100%;
}

.rating-bar-stars {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 78px;
}

.rating-bar-stars .generated-star-rating-wrap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    white-space: nowrap;
    gap: 2px;
}

.rating-bar-stars .generated-star-rating-wrap i {
    font-size: 12px;
    line-height: 1;
}

.star-rating-bar-bg {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: 7px;
    background: #E2E8F0;
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
    margin: 0;
}

.star-rating-bar-fill {
    display: block;
    height: 100%;
    background: -webkit-linear-gradient(0deg, #F59E0B 0%, #FBBF24 100%);
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
    border-radius: var(--radius-pill);
    -webkit-transition: width 0.4s ease;
            transition: width 0.4s ease;
}

.rating-bar-percent {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    min-width: 44px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Individual Review Cards */
.reviews-list-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
}

.review-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    -webkit-transition: border-color var(--transition);
            transition: border-color var(--transition);
}

.review-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

.review-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
}

.reviewed-user-photo {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
}

.reviewed-user-photo img,
.reviewed-user-photo .profile-text-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.reviewed-user-info {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.reviewed-user-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.reviewed-user-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.reviewed-user-name:hover {
    color: var(--primary);
    text-decoration: none;
}

.review-date {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.review-card-stars .generated-star-rating-wrap i {
    font-size: 13.5px;
    gap: 2px;
}

.review-comment {
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-top: 8px;
}

@media (max-width: 767.5px) {
    .rating-overview-card {
        padding: 24px 18px;
    }
    .rating-overview-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    .rating-overview-right {
        padding-left: 0;
    }
    .rating-bar-stars {
        width: 70px;
    }
    .rating-bar-stars .generated-star-rating-wrap i {
        font-size: 11px;
    }
    .review-card {
        padding: 16px;
    }
    .review-card-header {
        gap: 12px;
    }
    .reviewed-user-photo {
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   LECTURE SINGLE PAGE
   ============================================================ */
.section-header { background-color: var(--surface-2); border-bottom: 1px solid var(--border); padding: 10px 16px; }
.lecture-header-left { -webkit-box-flex: 0; -ms-flex: 0 0 349px; flex: 0 0 349px; border-right: 1px solid rgba(255,255,255,0.1); }
.lecture-header-right { width: 100%; }
button.nav-icon-complete-course { height: 100%; }
.lecture-header-right .nav-btn { width: 50%; text-align: center; font-size: 15px; color: #ffffff; display: inline-table; -webkit-transition: background var(--transition); transition: background var(--transition); }
.lecture-header-right .nav-btn span { height: 50px; display: table-cell; vertical-align: middle; }
.lecture-header-right .nav-btn:hover { background-color: var(--primary-hover); }
.lecture-page-course-progress .write-review-text { font-size: 14px; }
.review-modal-footer { border-top: 1px solid var(--border); padding: 1rem; }
.review-modal-footer .review-modal-nofity-text { font-size: 13px; color: var(--text-muted); }

.lecture-header {
    background-color: #1E1B4B;
    height: 52px;
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 999;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.lecture-container-wrap { margin-top: 52px; }
.lecture-sidebar {
    width: 360px;
    background-color: var(--surface);
    border-right: 1px solid var(--border);
    position: fixed;
    height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: 120px;
    z-index: 9;
}
.lecture-sidebar-course-title { font-size: 15px; font-weight: 600; color: var(--text); padding: 16px; border-bottom: 1px solid var(--border); }
.lecture-sidebar-curriculum-wrap .section-item-title a { background-color: var(--surface-2); font-size: 14px; color: var(--text-secondary); padding: 10px 16px; display: block; -webkit-transition: all var(--transition); transition: all var(--transition); }
.lecture-sidebar-curriculum-wrap .section-item-title a:hover { background: var(--primary-light); color: var(--primary); }
.sidebar-section-item.completed .section-item-title a { color: var(--text-muted); }
.sidebar-section-item.active .section-item-title a { background-color: var(--primary-light); color: var(--primary); font-weight: 600; border-left: 3px solid var(--primary); }
.lecture-container { margin-left: 360px; background: var(--surface); padding: 40px; height: auto; width: 100%; min-height: -webkit-calc(100vh - 52px); min-height: calc(100vh - 52px); }
.back-to-curriculum {
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: 16px;
    color: #ffffff;
    font-weight: bold;
    -webkit-transition: background var(--transition);
            transition: background var(--transition);
}
.back-to-curriculum:hover { background: rgba(255,255,255,0.2); color: #fff; }
a.nav-icon-list { line-height: 52px; color: #fff; font-size: 28px; padding: 0 12px; opacity: 0.8; -webkit-transition: opacity var(--transition); transition: opacity var(--transition); }
a.nav-icon-list:hover { opacity: 1; color: #fff; }
.section-item-title .lecture-name small { color: var(--text-muted); font-size: 11px; }
.lecture-title { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.lecture-lock-icon i { font-size: 56px; color: var(--text-muted); }
.lecture-lock-title { font-weight: 300; color: var(--text-secondary); }
.lecture-attachments-title { font-size: 15px; font-weight: 600; color: var(--text); }
.lecture-attachments .lecture-attachment { font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; padding: 8px 0; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.lecture-content-article h4 { font-size: 1.2rem; }
.lecture-content-article ul { list-style: inside; color: var(--text-secondary); }

/* ============================================================
   ASSIGNMENT PAGE
   ============================================================ */
.assignment-header-info { background-color: var(--info-light); border: 1px solid #BAE6FD; border-radius: var(--radius-sm); }
#assignment-submission-form h4 { font-size: 1.1rem; font-weight: 600; }

/* ============================================================
   QUIZ SINGLE / ATTEMPT
   ============================================================ */
.quiz-wrap { margin-bottom: 100px; }
.quiz-wrap h1, .quiz-wrap h2 { font-weight: 700; line-height: 1.4; }
.quiz-wrap h1 { font-size: 2rem; }
.quiz-wrap h2 { font-size: 1.5rem; }
.question-wrap .quiz-image img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.attempt-options-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-line-pack: justify; align-content: space-between; margin: 1% -1% -1% -1%; }
.question-option { -webkit-box-flex: 0; -ms-flex: 0 auto; flex: 0 auto; padding: 1%; width: 50%; }
.question-option label {
    background-color: var(--surface-2);
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    cursor: pointer;
    font-size: 14px;
    display: block;
    line-height: 1.5;
    padding: 14px 12px;
    clear: both;
    overflow: hidden;
    -webkit-transition: all var(--transition-md);
            transition: all var(--transition-md);
    border-radius: var(--radius-sm);
}
.question-option label:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.question-option input:checked + label { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

#quiz-progress { position: fixed; bottom: 0; width: 100%; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 12px; z-index: 99; box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
span.quiz-progress-number { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 6px 10px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); min-width: 36px; cursor: pointer; -webkit-transition: all var(--transition); transition: all var(--transition); }
span.quiz-progress-number.active { background: var(--primary); border-color: var(--primary-dark); color: #fff; font-weight: 600; }
.quiz-submitted-alert h1 { font-size: 3.5em; }
.quiz-result-gretings .greetings-icon { font-size: 5em; }

/* ============================================================
   CATEGORIES PAGE
   ============================================================ */
.page-header-wrapper {
    min-height: 160px;
    background: -webkit-linear-gradient(315deg, var(--primary) 0%, var(--accent) 100%);
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.page-header-wrapper::before {
    content: "";
    background: url("../../images/page-header-bg.svg") 50%/cover;
    height: 100%;
    left: 0;
    opacity: 0.08;
    position: absolute;
    top: 0;
    width: 100%;
}
.page-header-wrapper h1 { font-weight: 700; color: #fff; }
.page-header-wrapper a:not(.btn) { color: rgba(255,255,255,0.85); }
.page-header-wrapper .breadcrumb { background-color: transparent; padding-left: 0; margin: 0; }
.page-header-wrapper .breadcrumb-item { color: rgba(255,255,255,0.8); font-size: 14px; }
.page-header-wrapper .breadcrumb-item.active { color: rgba(255,255,255,0.6); }

.category-item-name a {
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 24px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    text-align: center;
    -webkit-transition: all var(--transition-slow);
            transition: all var(--transition-slow);
    color: var(--text);
    height: 100%;
}
.category-item-name a:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-item-name a i { display: block; font-size: 40px; margin-bottom: 12px; color: var(--primary); }

/* ============================================================
   NO DATA / EMPTY STATE
   ============================================================ */
.no-data-screen-wrap { color: var(--text-muted); text-align: center; padding: 64px 24px; }
.no-data-screen-wrap i { font-size: 72px; margin-bottom: 16px; display: block; opacity: 0.4; }
.no-data-screen-wrap h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; color: var(--text-secondary); }
.no-data-screen-wrap h5 { font-size: 1rem; font-weight: 400; color: var(--text-muted); }

/* ============================================================
   PLUGINS — STUDENT PROGRESS
   ============================================================ */
.progress-report-loop-detail .progress { height: 6px; border-radius: var(--radius-pill); }
.lecture-status-icon { font-size: 20px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { font-size: 14px; position: relative; color: #CBD5E1; background: #1E1B4B; border-top: 1px solid rgba(255,255,255,0.06); }
footer::before { display: none; }
footer .footer-top { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 56px 0 40px; }
footer a { color: #94A3B8; -webkit-transition: color var(--transition); transition: color var(--transition); }
footer a:hover { color: #fff; }
footer h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #FFFFFF; margin-bottom: 20px; }
footer .footer-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
footer .footer-links li { -webkit-box-flex: 50%; -ms-flex: 50%; flex: 50%; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
footer .footer-links li a { line-height: 36px; font-size: 14px; color: #94A3B8; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; }
footer .footer-links li a:hover { color: #fff; }
.footer-social-icon-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; margin-top: 16px; }
.footer-social-icon-wrap a { width: 36px; height: 36px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.07); color: #94A3B8; font-size: 18px; -webkit-transition: all var(--transition-md); transition: all var(--transition-md); }
.footer-social-icon-wrap a:hover { background: var(--primary); color: #fff; }
.footer-social-icon-wrap i { font-size: 20px; }
footer .footer-top { border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-bottom-right-links li { display: inline-block; }
.footer-bottom-right-links li a { display: block; padding-left: 12px; font-size: 13px; color: #475569; }
.footer-bottom-right-links li a:hover { color: #fff; }

/* ============================================================
   CIRCLE PROGRESS BAR
   ============================================================ */
.progress.circle { width: 120px; height: 120px; background: none; position: relative; }
.progress.circle::after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 10px solid var(--border); position: absolute; top: 0; left: 0; }
.progress.circle > span { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; }
.progress.circle .progress-left { left: 0; }
.progress.circle .progress-bar { width: 100%; height: 100%; background: none; border-width: 10px; border-style: solid; position: absolute; top: 0; }
.progress.circle .progress-left .progress-bar { left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; }
.progress.circle .progress-right { right: 0; }
.progress.circle .progress-right .progress-bar { left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; }
.progress.circle .progress-value { position: absolute; top: 0; left: 0; }

/* ============================================================
   PAYMENT / STRIPE
   ============================================================ */
.thankyou-payment-text-details { font-size: 1.1rem; line-height: 2; }
.StripeElement { box-sizing: border-box; height: 44px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background-color: var(--surface); box-shadow: var(--shadow-sm); -webkit-transition: box-shadow var(--transition); transition: box-shadow var(--transition); }
.StripeElement--focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.StripeElement--invalid { border-color: var(--danger); }
.StripeElement--webkit-autofill { background-color: #fefde5 !important; }

/* ============================================================
   USER PROFILE PAGE
   ============================================================ */
.profile-page-sidebar { width: 240px; }
.profile-page-sidebar .profile-image img { border-radius: 50%; width: 140px; height: 140px; object-fit: cover; border: 5px solid var(--surface); box-shadow: var(--shadow-lg); }
.profile-page-wrap .profile-designation { font-weight: 400; font-size: 1.125rem; color: var(--text-secondary); }
.profile-social-icon-wrap a:hover { background-color: var(--surface-2); }
.profile-stat-title { color: var(--text-muted); font-size: 13px; }
.profile-stat-value { font-weight: 800; font-size: 1.375rem; color: var(--text); }

/* ============================================================
   VIDEO PLAYER
   ============================================================ */
.video-js .vjs-big-play-button { left: 40%; top: -webkit-calc(50% - 40px); top: calc(50% - 40px); width: 80px; height: 80px; line-height: 80px; border: none; border-radius: 50%; background: rgba(99,102,241,0.9); }
.video-js .vjs-big-play-button .vjs-icon-placeholder:before { font-size: 48px; }
.video-player-wrapper { position: relative; }
.videoPlayerCaption { position: absolute; bottom: 10%; text-align: center; width: 100%; }
.videoPlayerCaption .captionText { background-color: rgba(15,23,42,.75); color: #ffffff; display: inline-block; padding: 5px 12px; border-radius: var(--radius-sm); font-size: 14px; }

/* ============================================================
   SOCIAL LOGIN
   ============================================================ */
.social-login-item { padding: 10px 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #ffffff; border-radius: var(--radius-sm); -webkit-transition: all var(--transition-md); transition: all var(--transition-md); }
.social-login-item:hover { color: #ffffff; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.social-login-item.btn-facebook { background-color: #1877F2; }
.social-login-item.btn-facebook:hover { background-color: #166FE5; }
.social-login-item.btn-google { background-color: #EA4335; }
.social-login-item.btn-google:hover { background-color: #D93025; }
.social-login-item.btn-twitter { background-color: #1DA1F2; }
.social-login-item.btn-twitter:hover { background-color: #1A91DA; }
.social-login-item.btn-linkedin { background-color: #0A66C2; }
.social-login-item.btn-linkedin:hover { background-color: #004182; }

/* Nav text photo */
.nav-link.profile-dropdown-toogle .profile-text-photo { width: 34px; height: 34px; line-height: 34px; font-size: 12px; }
.profile-page-sidebar .profile-image .profile-text-photo { border-radius: 50%; width: 140px; height: 140px; line-height: 125px; font-size: 40px; border: 5px solid var(--surface); margin: 0 auto; box-shadow: var(--shadow-lg); }

/* ============================================================
   COOKIE NOTICE
   ============================================================ */
.cookie_notice_popup { position: fixed; z-index: 999; bottom: 20px; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); color: var(--text-secondary); width: 320px; right: 20px; }
.cookie_notice_msg { padding: 20px; font-size: 14px; line-height: 1.6; }
.cookie_notice_popup .cookie-dismiss { color: #fff; background-color: var(--primary); padding: .6em 1em; text-align: center; display: block; border-radius: 0 0 var(--radius-md) var(--radius-md); font-weight: 500; font-size: 14px; -webkit-transition: background var(--transition); transition: background var(--transition); }
.cookie_notice_popup .cookie-dismiss:hover { background-color: var(--primary-hover); }

/* ============================================================
   MISC
   ============================================================ */
.bg-light-sky { background-color: var(--primary-light) !important; }
.bg-light-success { background-color: var(--success-light) !important; }
.bg-dark-blue { background-color: #1E3A5F !important; }
.box-shadow { box-shadow: var(--shadow); }
.filter-form-by-rating-field-wrap { line-height: 1; }
.filter-form-by-rating-field-wrap i.la { line-height: .5; }
.course-filter-form-group label { display: block; }

/* Cards */
.card { border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: none; }
.card-header { background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text); padding: 14px 20px; }

/* Tables */
.table thead th { background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border); padding: 12px 16px; }
.table td { padding: 12px 16px; vertical-align: middle; border-color: var(--border); font-size: 14px; }

/* Badges */
.badge { font-weight: 600; font-size: 11px; border-radius: var(--radius-pill); padding: 4px 10px; }

/* Progress */
.progress { background: var(--border); border-radius: var(--radius-pill); }
.progress-bar { background: var(--primary); border-radius: var(--radius-pill); }

/* Modals */
.modal-content { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-footer { border-top: 1px solid var(--border); padding: 12px 20px; }
.modal-title { font-weight: 700; font-size: 16px; }

/* ============================================================
   PAGINATION UI
   ============================================================ */
.pagination-nav,
.pagination-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 40px 0 24px;
}

.pagination-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.pagination-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.pagination-info-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.pagination-info-text span.font-weight-bold {
    color: var(--text) !important;
    font-weight: 700;
}

.pagination-page-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 3px 10px;
    background: var(--primary-light);
    color: var(--primary) !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin-left: 8px;
    letter-spacing: 0.01em;
}

.pagination-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.pagination {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.pagination .page-item {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0;
}

.pagination .page-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background-color: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
    line-height: 1;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.pagination .page-link i {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* Hover state */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    color: var(--primary);
    border-color: var(--primary);
    background-color: var(--primary-light);
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.15);
}

/* Active state */
.pagination .page-item.active .page-link {
    color: #FFFFFF !important;
    background: -webkit-linear-gradient(315deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}

/* Disabled state */
.pagination .page-item.disabled .page-link {
    color: var(--text-muted);
    background-color: var(--surface-2);
    border-color: var(--border);
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

/* Separator / Ellipsis */
.pagination .page-item.separator .page-link {
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    min-width: 28px;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 767.5px) {
    .pagination-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center;
        padding: 16px 14px;
        gap: 14px;
    }
    .pagination-info {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .pagination-controls {
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
    }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@-webkit-keyframes fadeInDown {
    from { opacity: 0; -webkit-transform: translateY(-8px); transform: translateY(-8px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; -webkit-transform: translateY(-8px); transform: translateY(-8px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes la-spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes la-spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 992px) {
    .main-nav-auth-profile-wrap { margin-left: auto; }
}

@media(max-width:991.5px) {
    #mainNavbarContent .main-nav-right-menu .dropdown-menu { max-width: 100%; }
    .hero-right-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 36px; }
    .hero-left-wrap { text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-actions { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .hero-features { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .hero-title { font-size: 2.15rem; }
    .hero-right-wrap img, .hero-image { max-height: 220px !important; }
    .main-nav-auth-profile-wrap { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; vertical-align: top; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
    .main-nav-auth-profile-wrap > li { display: inline-block; }
    .main-nav-auth-profile-wrap .nav-link { padding-right: 1rem; padding-left: 1rem; }
    a#miniCartDropDown { display: block; position: relative; min-width: 56px; }
}

@media(min-width:768px) {
    .lecture-sidebar { display: block; }
    .navbar-collapse.show#mainNavbarContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}

@media(max-width:767.5px) {
    #mainNavbarContent { margin-top: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
    a.nav-link.browse-categories-nav-link { width: 100%; display: block; max-width: 100%; }
    .header-search-wrap { width: 100%; max-width: 100%; margin: 8px 0 !important; min-width: unset; }
    .main-nav-auth-profile-wrap { width: 100%; max-width: 100%; }
    .lecture-header-left { -webkit-box-flex: 0; -ms-flex: 0 0 149px; flex: 0 0 149px; }
    .lecture-container { margin-left: 0; padding: 20px !important; }
    .lecture-sidebar { display: none; width: 100%; }
    .cookie_notice_popup { bottom: 0; width: 100%; right: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .hero-title { font-size: 1.85rem; }
    .hero-left-wrap { min-height: auto; padding-bottom: 10px; }
    .home-cta-section { padding: 48px 0; }
    .home-cta-left-col { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 40px; margin-bottom: 40px; }
    .home-cta-text-wrapper { padding: 0 16px; }
    .hero-banner { padding: 48px 0 44px; }
    .hero-right-wrap img, .hero-image { max-height: 180px !important; }
    .hero-features { gap: 14px; }
    .page-header-jumborton { padding: 32px 0; }
    .page-header-jumborton h1 { font-size: 1.5rem; }
}

@media(max-width:574px) {
    .lecture-header-left { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; }
    .back-to-curriculum { margin-left: 8px; }
    .lecture-header-right .nav-btn { font-size: 12px; }
    .home-cta-left-col { margin-bottom: 0; }
    .main-nav-auth-profile-wrap { display: table; }
    .main-nav-auth-profile-wrap > li { display: table-cell; }
    .question-option { width: 100%; }
    .hero-title { font-size: 1.55rem; }
    .hero-actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .hero-features { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; }
    .hero-floating-stat { display: none; }
}

@media(max-width:413.5px) {
    a#miniCartDropDown { width: 36px; height: 36px; }
    a.profile-dropdown-toogle { min-width: 36px; height: 36px; width: auto; }
    .mini-cart-body-wrap.d-block { right: -40px; }
}

@media (min-width: 576px) {
    .modal-alert { max-width: 420px; }
}

/* RTL */
body.rtl .dashboard-menu li a { border-left: none; border-right: 3px solid transparent; }
body.rtl .dashboard-menu li a:hover, body.rtl .dashboard-menu li.active a { border-left: none; border-right-color: var(--primary); }

/* ==========================================================================
   Topics page — per-category section header
   ========================================================================== */

.topic-section-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.topic-header-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    min-width: 0;
}

.topic-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 22px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.topic-header-titles { min-width: 0; }

.topic-header-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.topic-header-count {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
            transform: translateY(1px);
}

.topic-header-sub {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.topic-view-all-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    -webkit-transition: all var(--transition);
            transition: all var(--transition);
}

.topic-view-all-btn i {
    font-size: 15px;
    -webkit-transition: -webkit-transform var(--transition);
            transition: transform var(--transition);
}

.topic-view-all-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    text-decoration: none;
}

.topic-view-all-btn:hover i { -webkit-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); }

body.rtl .topic-view-all-btn:hover i { -webkit-transform: translateX(-3px); -ms-transform: translateX(-3px); transform: translateX(-3px); }

@media (max-width: 767.98px) {
    .topic-section-header { padding-bottom: 14px; margin-bottom: 18px; }
    .topic-header-icon { width: 40px; height: 40px; font-size: 19px; }
    .topic-header-title { font-size: 1.05rem; }
}

/* ==========================================================================
   HOME POLISH — info box icon chips, section accents, premium stats
   ========================================================================== */

/* Info boxes: tinted illustration chip + lift */
.home-info-box {
    text-align: center;
}
.home-info-box .info-box-img {
    width: 92px;
    height: 92px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: var(--primary-light);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: -webkit-transform var(--transition-md), box-shadow var(--transition-md), background var(--transition-md);
            transition: transform var(--transition-md), box-shadow var(--transition-md), background var(--transition-md);
}
.home-info-box .info-box-img img { max-width: 56px; height: auto; margin: 0; }
.home-info-box:hover .info-box-img {
    background: #E0E7FF;
    -webkit-transform: translateY(-4px) scale(1.03);
        -ms-transform: translateY(-4px) scale(1.03);
            transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 24px rgba(99, 102, 241, 0.18);
}

/* Section titles: short gradient accent bar attached to the title text */
.section-title-text {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}
.section-title-text::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: #4F46E5;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

/* Stats strip: gradient numerals, dividers */
.home-course-stats-wrap .stat-number {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #4F46E5;
    line-height: 1.2;
}
.home-course-stats-wrap .stat-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 4px;
}
@media (min-width: 768px) {
    .home-course-stats-wrap .col-md-3:not(:first-child) {
        border-left: 1px solid var(--border);
    }
}

/* Partner logos: slightly larger, softer */
.home-partners-logo-wrap .logo-item img { height: 40px; }