/*!
 * Communityline Portal - Learning Management System
 * Copyright (c) 2025-2026 Jeremiah Phillippe Sison. All rights reserved.
 * 
 * This source file is proprietary and confidential. Unauthorized copying,
 * distribution, or modification of this file, in whole or in part, via any
 * medium, is strictly prohibited without prior written permission.
 * See LICENSE.md for the full terms.
 * 
 * @package   Communityline Portal
 * @copyright 2025-2026 Jeremiah Phillippe Sison
 * @license   Proprietary - All Rights Reserved
 */
/*
 * Community Line Portal modern frontend layer.
 * Loaded after the original template CSS to polish the existing Blade views.
 */
:root {
    /* =====================================================================
       Communityline design tokens — the single source of truth for colour,
       typography, radius, spacing and elevation. Brand colours (--clp-primary
       / -dark / -accent / --clp-font) are also emitted by the branding partial
       so the admin's Appearance settings re-skin the whole product live.
       ===================================================================== */
    /* Brand */
    --clp-primary: #16307a;
    --clp-primary-dark: #0f2257;
    --clp-accent: #f4ce0a;
    --clp-success: #1ba84c;
    --clp-success-dark: #128a3d;
    /* Status */
    --clp-danger: #e0554e;
    --clp-warning: #e8a90a;
    --clp-info: #2f74d0;
    /* Text & surfaces */
    --clp-ink: #101828;
    --clp-muted: #667085;
    --clp-border: #eaecf0;
    --clp-soft: #f8f9fb;
    --clp-surface: #ffffff;
    /* Typography (overridden by the branding partial's --clp-font) */
    --clp-font: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --clp-fs-sm: 14px;
    --clp-fs-md: 16px;
    --clp-fs-lg: 20px;
    --clp-fs-xl: 28px;
    /* Radius */
    --clp-radius-sm: 8px;
    --clp-radius: 12px;
    --clp-radius-lg: 18px;
    --clp-radius-pill: 999px;
    /* Spacing scale */
    --clp-space-1: 4px;
    --clp-space-2: 8px;
    --clp-space-3: 12px;
    --clp-space-4: 16px;
    --clp-space-5: 24px;
    --clp-space-6: 32px;
    --clp-space-7: 48px;
    /* Elevation — layered (tight ambient + soft cast) for a refined, premium feel */
    --clp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 40px rgba(16, 24, 40, .09);
    --clp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06);
    --clp-shadow-lg: 0 2px 6px rgba(15, 34, 87, .08), 0 30px 70px rgba(15, 34, 87, .20);
}

body {
    background: #fff;
    color: var(--clp-ink);
    font-family: var(--clp-font, Inter, Arial, sans-serif);
}

a,
.text-color {
    color: var(--clp-primary);
}

a:hover {
    color: var(--clp-primary-dark);
}

/* Legacy-template neutralisation: the old theme's accent (red #ec5252) still
   lives in style.css. clp-modern.css + the branding partial already re-skin the
   interactive surfaces; the only remaining leak on rendered pages is the
   cart/wishlist count badge — route it through a brand token too. */
.product-count {
    background: var(--clp-primary);
    color: #fff;
}

.theme-btn,
.btn.theme-btn {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    border-radius: 10px;
    box-shadow: none;
    font-weight: 800;
    letter-spacing: -.01em;
}

.theme-btn:hover,
.btn.theme-btn:hover {
    background: var(--clp-primary-dark);
    border-color: var(--clp-primary-dark);
}

.theme-btn-white,
.btn.theme-btn-white {
    background: #fff;
    color: var(--clp-primary);
    border: 1px solid var(--clp-border);
}

.theme-btn-transparent,
.btn.theme-btn-transparent {
    background: #fff;
    color: var(--clp-primary);
    border: 1px solid rgba(22, 48, 122, .25);
}

.section--padding {
    padding: 84px 0;
}

.section-heading .section__title,
.section__title {
    color: var(--clp-ink);
    font-weight: 850;
    letter-spacing: -.04em;
}

.section-divider {
    background: var(--clp-primary);
}

.bg-gray {
    background: var(--clp-soft) !important;
}

.ribbon,
.ribbon-lg {
    background: rgba(22, 48, 122, .10);
    color: var(--clp-primary);
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .01em;
}

.header-menu-area {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .08);
}

.header-top {
    background: #f9fafb;
}

.header-menu-content {
    min-height: 74px;
}

.header-menu-content .form-control,
.clp-search-input {
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    background: #f9fafb;
    height: 46px;
}

.main-menu ul li a,
.menu-category ul li a {
    color: var(--clp-ink);
    font-weight: 750;
}

.main-menu ul li a:hover,
.menu-category ul li a:hover {
    color: var(--clp-primary);
}

.card,
.card-item,
.clp-card {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    box-shadow: var(--clp-shadow-sm);
}

.card-item {
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card-item:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 48, 122, .22);
    box-shadow: var(--clp-shadow);
}

.clp-shell {
    background:
        radial-gradient(circle at 6% 6%, rgba(244, 206, 10, .14), transparent 34%),
        radial-gradient(circle at 94% 2%, rgba(27, 168, 76, .20), transparent 42%),
        linear-gradient(140deg, #0a1836 0%, #122560 50%, #16307a 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.clp-shell:before,
.clp-shell:after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.clp-shell:before {
    width: 340px;
    height: 340px;
    right: -130px;
    top: 40px;
}

.clp-shell:after {
    width: 220px;
    height: 220px;
    left: -90px;
    bottom: -110px;
}

.clp-shell > .container {
    position: relative;
    z-index: 1;
}

.clp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-weight: 850;
    font-size: 14px;
}

.clp-hero-title {
    color: #fff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -.065em;
}

.clp-hero-copy {
    color: rgba(255, 255, 255, .84);
    font-size: 19px;
    line-height: 1.75;
}

.clp-hero-search {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .22);
    padding: 10px;
}

.clp-hero-search .form-control {
    border: 0;
    height: 58px;
    font-size: 16px;
    box-shadow: none;
}

.clp-hero-panel {
    background: rgba(255, 255, 255, .96);
    color: var(--clp-ink);
    border-radius: 26px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .26);
    padding: 28px;
}

.clp-floating-card {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    background: #fff;
    padding: 18px;
    box-shadow: var(--clp-shadow-sm);
}

.clp-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 48, 122, .10);
    color: var(--clp-primary);
    font-size: 28px;
}

.clp-metric {
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--clp-border);
    padding: 22px;
    height: 100%;
}

.clp-metric strong {
    display: block;
    color: var(--clp-ink);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em;
}

.clp-metric span,
.clp-muted {
    color: var(--clp-muted);
}

.clp-category-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--clp-border);
    background: #fff;
    color: var(--clp-ink);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.clp-category-chip:hover {
    border-color: rgba(22, 48, 122, .28);
    box-shadow: var(--clp-shadow-sm);
}

.clp-course-card {
    height: 100%;
}

.clp-course-thumb {
    height: 190px;
    object-fit: cover;
    width: 100%;
    background:
        linear-gradient(135deg, rgba(22, 48, 122, .12), rgba(27, 168, 76, .16)),
        #f2f4f7;
}

.clp-course-meta {
    color: var(--clp-muted);
    font-size: 14px;
}

.clp-price {
    color: var(--clp-ink);
    font-weight: 900;
    font-size: 21px;
}

.clp-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(22, 48, 122, .10);
    color: var(--clp-primary);
    font-weight: 850;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.clp-university-band {
    background:
        radial-gradient(circle at 90% 6%, rgba(27, 168, 76, .18), transparent 42%),
        linear-gradient(140deg, #0a1836 0%, #122560 55%, #16307a 100%);
    color: #fff;
    border-radius: 28px;
    padding: 46px;
    overflow: hidden;
    position: relative;
}

.clp-university-band:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    right: -90px;
    top: -90px;
    background: rgba(244, 206, 10, .10);
}

.clp-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.clp-step-number {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clp-primary);
    color: #fff;
    font-weight: 900;
}

/* Enrollment → completion flow cards (homepage university band).
   Vertical layout so descriptions flow full-width instead of wrapping
   one word per line beside the number. */
.clp-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.clp-flow-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 44px rgba(2, 6, 23, .30);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.clp-flow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 62px rgba(2, 6, 23, .42);
}
.clp-flow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.clp-flow-num {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--clp-primary, #16307a), #0f2257);
    box-shadow: 0 10px 20px rgba(22, 48, 122, .32);
}
.clp-flow-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--clp-accent, #1ba84c);
    background: rgba(27, 168, 76, .12);
}
.clp-flow-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f1b3d;
    margin: 0 0 6px;
}
.clp-flow-text {
    font-size: 14.5px;
    line-height: 1.65;
    color: #5b6472;
    margin: 0;
}
/* Connector chevron between cards (desktop only). */
.clp-flow-card:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-top: 3px solid rgba(255, 255, 255, .55);
    border-right: 3px solid rgba(255, 255, 255, .55);
    transform: translateY(-50%) rotate(45deg);
    z-index: 3;
}
@media (max-width: 767px) {
    .clp-flow-grid { grid-template-columns: 1fr; gap: 14px; }
    .clp-flow-card:not(:last-child)::after { display: none; }
}

.clp-cta {
    background:
        radial-gradient(circle at 12% 8%, rgba(244, 206, 10, .16), transparent 32%),
        radial-gradient(circle at 92% 96%, rgba(27, 168, 76, .20), transparent 40%),
        linear-gradient(140deg, #0a1836 0%, #122560 52%, #16307a 100%);
    color: #fff;
    border-radius: 28px;
    padding: 48px;
}

.footer-area {
    background: #f9fafb;
}

.footer-area .footer-item h3,
.footer-area .font-weight-bold {
    color: var(--clp-ink);
}

.pagination .page-link {
    color: var(--clp-primary);
    border-color: var(--clp-border);
}

.pagination .active .page-link,
.page-item.active .page-link {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
}

@media (max-width: 1199px) {
    .header-top,
    .menu-category {
        display: none;
    }

    .header-menu-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 767px) {
    .section--padding {
        padding: 58px 0;
    }

    .clp-hero-panel,
    .clp-cta,
    .clp-university-band {
        padding: 28px;
        border-radius: 22px;
    }

    .clp-hero-search {
        border-radius: 14px;
    }
}

/* =========================================================
   Redesigned header / primary navigation
   ========================================================= */
.clp-header-container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.clp-header-top {
    background: #f9fafb;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

.clp-header-top a {
    color: var(--clp-muted);
}

.clp-header-top a:hover {
    color: var(--clp-primary);
}

.clp-header-main {
    min-height: 76px;
    display: flex;
    align-items: center;
}

.clp-nav-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.clp-nav-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.clp-nav-center {
    flex: 1 1 auto;
    min-width: 0;
}

.clp-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Category dropdown trigger */
.clp-category-menu {
    position: relative;
}

.clp-category-menu > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Override the base "Edule" theme which forces padding-bottom:35px on
   .menu-category > ul > li a (higher specificity) and pushes the label
   to the top of the pill — making "Categories" look like it spills out. */
.clp-category-menu .clp-cat-trigger {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 16px !important;
    line-height: 1 !important;
    border-radius: 12px;
    background: rgba(22, 48, 122, .08);
    color: var(--clp-primary) !important;
    font-weight: 800;
    white-space: nowrap;
    text-transform: none !important;
}

.clp-category-menu .clp-cat-trigger:hover {
    background: rgba(22, 48, 122, .14);
    color: var(--clp-primary) !important;
}

.clp-category-menu .clp-cat-trigger .la-angle-down {
    margin-left: 8px;
}

/* Keep the dropdown panel anchored under the pill and never let it (or its
   fly-out sub-menus) spill outside the viewport. */
.clp-category-menu > ul > li {
    position: relative;
}

.clp-category-menu .cat-dropdown-menu {
    left: 0;
    top: calc(100% + 10px);
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: var(--clp-shadow);
    border: 1px solid var(--clp-border);
    z-index: 1002;
}

.clp-category-menu .cat-dropdown-menu > li .sub-menu {
    max-height: 60vh;
    overflow-y: auto;
}

/* Search field */
.clp-nav-search {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.clp-nav-search .form-group {
    position: relative;
}

.clp-nav-search .form--control {
    width: 100%;
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    background: #f7f8fa;
    height: 46px;
    padding-left: 44px !important;
}

.clp-nav-search .form--control:focus {
    background: #fff;
    border-color: rgba(22, 48, 122, .4);
    box-shadow: 0 0 0 3px rgba(22, 48, 122, .12);
}

.clp-nav-search .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clp-muted);
}

/* Primary menu */
.clp-main-menu ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clp-main-menu > ul > li > a {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 11px;
    border-radius: 10px;
    color: var(--clp-ink) !important;
    font-weight: 750;
    white-space: nowrap;
}

/* The full 6-item menu + icons leave no room for a usable centre search bar at
   any width — it was collapsing to a ~50px circle overlapping "Courses". So we
   drop the centre bar and surface search as an icon (opens the search panel),
   which is cleaner and matches the compact-search pattern of premium LMS UIs. */
.clp-nav-center { display: none !important; }
/* Slide-down search panel: guarantee it shows when toggled (the base .active
   rule was being out-cascaded, and `visibility` was caught in a 0.4s
   transition). Keep opacity/transform animated, flip visibility instantly. */
.mobile-search-form { transition: none !important; box-shadow: 0 10px 30px rgba(16,24,40,.14); }
.mobile-search-form.active { opacity: 1 !important; visibility: visible !important; }
.body-overlay { transition: opacity .28s ease !important; }
.body-overlay.active { opacity: 1 !important; visibility: visible !important; }
@media (min-width: 1200px) {
    .clp-nav-right .clp-mobile-toggles { display: flex !important; align-items: center; margin-left: 6px; }
    .clp-nav-right .clp-mobile-toggles .search-menu-toggle { display: inline-flex !important; }
    .clp-nav-right .clp-mobile-toggles .cat-menu-toggle,
    .clp-nav-right .clp-mobile-toggles .main-menu-toggle { display: none !important; }
}
/* Tighten the nav between the mobile breakpoint and mid-desktop so the full
   menu + icons + search toggle never exceed the viewport (was ~19px over at 1280). */
@media (min-width: 1200px) and (max-width: 1440px) {
    .clp-nav-bar { gap: 12px; }
    .clp-main-menu > ul > li > a { padding: 0 8px; }
    .clp-nav-icons { gap: 2px; }
    .clp-nav-right .clp-mobile-toggles { margin-left: 3px; }
}

.clp-main-menu > ul > li > a:hover {
    background: rgba(22, 48, 122, .07);
    color: var(--clp-primary) !important;
}

/* "More" dropdown */
.clp-has-dropdown {
    position: relative;
}

.clp-dropdown-toggle {
    cursor: pointer;
}

.clp-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    box-shadow: var(--clp-shadow);
    padding: 8px;
    margin-top: 8px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1001;
    display: block;
}

.clp-has-dropdown:hover .clp-dropdown-menu,
.clp-has-dropdown.is-open .clp-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.clp-dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--clp-ink) !important;
    font-weight: 650;
}

.clp-dropdown-menu li a:hover {
    background: rgba(22, 48, 122, .08);
    color: var(--clp-primary) !important;
}

/* Wishlist + cart icons */
.clp-nav-icons {
    gap: 4px;
    margin-left: 6px;
}

.clp-icon-link .shop-cart-btn,
.clp-icon-link .product-count {
    color: var(--clp-ink);
}

.clp-icon-link {
    position: relative;
    padding: 8px;
}

.clp-mobile-toggles {
    display: none;
}

/* Responsive: collapse to mobile toggles */
@media (max-width: 1199px) {
    .clp-header-top,
    .clp-category-menu,
    .clp-main-menu,
    .clp-nav-icons {
        display: none;
    }

    .clp-nav-bar {
        justify-content: space-between;
        gap: 12px;
    }

    .clp-nav-center {
        display: none;
    }

    .clp-mobile-toggles {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .clp-header-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Let the two ends shrink so the bar never exceeds the viewport. The logo
       side must absorb the shrink (flex:1 + min-width:0) so its title ellipsizes
       instead of shoving the toggle cluster off the right edge. */
    .clp-nav-bar { gap: 10px; min-width: 0; flex-wrap: nowrap; }
    .clp-nav-left { flex: 1 1 auto; min-width: 0; gap: 10px; overflow: hidden; }
    .clp-nav-right { flex: 0 0 auto; min-width: 0; }
    .clp-logo { min-width: 0; }
    .clp-logo-text { min-width: 0; overflow: hidden; }
    .clp-logo-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Phone widths: shrink the logo and drop the subtitle so the header
   (logo + 3 toggles) always fits without horizontal scroll. */
@media (max-width: 575px) {
    .clp-logo-img { width: 36px !important; height: 36px !important; }
    .clp-logo-title { font-size: 16px !important; }
    .clp-logo-sub { display: none !important; }
    .clp-mobile-toggles .icon-element { width: 36px; height: 36px; }
    .clp-mobile-toggles .icon-element.mr-2 { margin-right: 6px !important; }
    /* The category toggle is redundant on phones — Categories is already in the
       main drawer — so drop it to keep the header comfortably within the viewport. */
    .clp-mobile-toggles .cat-menu-toggle { display: none !important; }
}

/* =========================================================
   Dark mode (night) readability for the modern layer.
   The base theme toggles `.dark-theme` on <body>; the clp-*
   components below set their own light colors, so they need
   explicit dark overrides or text becomes invisible.
   ========================================================= */
.dark-theme {
    --clp-ink: #f3f4f6;
    --clp-muted: #a8b0bd;
    --clp-border: rgba(255, 255, 255, .10);
    --clp-soft: #1f1f24;
}

.dark-theme body,
.dark-theme {
    background-color: #161618;
}

/* Headings & body copy on dark sections */
.dark-theme .section__title,
.dark-theme .section-heading .section__title,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme .card-title,
.dark-theme .card-title a,
.dark-theme .clp-price,
.dark-theme .clp-metric strong {
    color: #f3f4f6 !important;
}

.dark-theme p,
.dark-theme .lh-30,
.dark-theme .clp-muted,
.dark-theme .clp-metric span,
.dark-theme .clp-course-meta,
.dark-theme .text-muted {
    color: #a8b0bd !important;
}

/* Card / panel surfaces */
.dark-theme .card,
.dark-theme .card-item,
.dark-theme .clp-card,
.dark-theme .clp-floating-card,
.dark-theme .clp-metric,
.dark-theme .clp-category-chip {
    background: #1f1f24 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}

.dark-theme .clp-category-chip,
.dark-theme .clp-category-chip span {
    color: #e9eaee !important;
}

.dark-theme .clp-course-thumb {
    background:
        linear-gradient(135deg, rgba(22, 48, 122, .25), rgba(27, 168, 76, .18)),
        #2a2a31;
}

.dark-theme .clp-badge,
.dark-theme .ribbon,
.dark-theme .ribbon-lg {
    background: rgba(27, 168, 76, .22);
    color: #9ee2b4;
}

/* The hero/CTA/university bands are dark-on-purpose; keep their
   white text but ensure inner cards adapt. */
.dark-theme .clp-hero-panel {
    background: #1f1f24;
    color: #f3f4f6;
}

.dark-theme .clp-hero-panel .clp-muted {
    color: #a8b0bd !important;
}

/* Feature/“dashboards for everyone” sections sit on .bg-white */
.dark-theme .bg-white,
.dark-theme .clp-header-main {
    background-color: #161618 !important;
}

.dark-theme .clp-header,
.dark-theme .header-menu-area {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.dark-theme .clp-header-top {
    background: #131315;
}

.dark-theme .clp-header-top a {
    color: #9aa1ac;
}

/* Header logo + nav text (logo uses inline colors → need !important) */
.dark-theme .logo .font-weight-bold {
    color: #f3f4f6 !important;
}

.dark-theme .clp-main-menu > ul > li > a {
    color: #e5e7eb !important;
}

.dark-theme .clp-main-menu > ul > li > a:hover,
.dark-theme .clp-dropdown-menu li a:hover {
    background: rgba(27, 168, 76, .16);
    color: #9ee2b4 !important;
}

.dark-theme .clp-dropdown-menu {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .08);
}

.dark-theme .clp-dropdown-menu li a {
    color: #e5e7eb !important;
}

.dark-theme .clp-nav-search .form--control {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .10);
    color: #f3f4f6;
}

.dark-theme .clp-cat-trigger {
    background: rgba(27, 168, 76, .18);
    color: #9ee2b4 !important;
}

.dark-theme .clp-icon-link .shop-cart-btn,
.dark-theme .clp-icon-link .product-count {
    color: #e5e7eb;
}

/* Footer */
.dark-theme .footer-area {
    background: #131315;
}

.dark-theme .footer-area .footer-item h3,
.dark-theme .footer-area .font-weight-bold {
    color: #f3f4f6 !important;
}

.dark-theme .footer-area p,
.dark-theme .footer-area .generic-list-item li a {
    color: #a8b0bd;
}

.dark-theme .footer-area .generic-list-item li a:hover {
    color: #9ee2b4;
}

/* =========================================================
   Modern lesson player (LearnWorlds-style)
   ========================================================= */
.clp-player-body {
    margin: 0;
    background: #0a1836;
}

.clp-player {
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: var(--clp-font, Inter, Arial, sans-serif);
}

/* ----- Sidebar ----- */
.clp-player-sidebar {
    width: 350px;
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 90% -6%, rgba(27, 168, 76, .16), transparent 46%),
        linear-gradient(168deg, #16307a 0%, #102456 52%, #0a1836 100%);
    color: #fff;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
    transition: margin-left .25s ease;
}

.clp-player.sidebar-collapsed .clp-player-sidebar {
    margin-left: -350px;
}

.clp-player-sidebar-head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.clp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.clp-back-link:hover {
    color: #fff !important;
}

.clp-player-course-title {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 14px 0 18px;
}

/* Circular progress ring */
.clp-progress-ring-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.clp-progress-ring { flex: 0 0 64px; }
.clp-ring-bg { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 6; }
.clp-ring-fg {
    fill: none;
    stroke: var(--clp-accent, #1ba84c);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease;
}
.clp-ring-text { fill: #fff; font-size: 15px; font-weight: 800; }
.clp-progress-ring-meta strong { display: block; color: #fff; font-size: 14px; }
.clp-progress-ring-meta span { color: rgba(255, 255, 255, .8); font-size: 13px; }

/* ----- Curriculum list ----- */
.clp-curriculum {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 40px;
}

.clp-curriculum-section {
    padding: 6px 0;
}

.clp-curriculum-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px 8px;
}

.clp-section-num {
    font-size: 13px;
    font-weight: 900;
    color: #f4ce0a;
    letter-spacing: .04em;
}

/* Scoped to .clp-player so it wins over the homepage "Who it's for"
   .clp-section-title rule (same class name, dark ink) that is defined
   later in this file — without the scope, the module titles rendered
   as dark navy text on the dark navy sidebar (unreadable). */
.clp-player .clp-section-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .92);
}

.clp-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clp-lesson-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px 11px 24px;
    color: rgba(255, 255, 255, .82) !important;
    border-left: 3px solid transparent;
    transition: background .15s ease;
    cursor: pointer;
}

a.clp-lesson-item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
}

.clp-lesson-item.is-active {
    background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    border-left-color: var(--clp-accent, #f4ce0a);
}

.clp-lesson-item.is-active .clp-lesson-name { font-weight: 750; }

.clp-lesson-item.is-locked {
    color: rgba(255, 255, 255, .45) !important;
    cursor: not-allowed;
}

.clp-lesson-status {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    font-size: 14px;
}

.clp-lesson-item.is-done .clp-lesson-status {
    background: var(--clp-success, #1ba84c);
    color: #fff;
}

.clp-lesson-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.clp-lesson-name {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
}

.clp-lesson-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
}

/* ----- Main area ----- */
.clp-player-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f6f7f9;
}

.clp-player-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--clp-border);
    flex-shrink: 0;
}

.clp-sidebar-toggle {
    border: 1px solid var(--clp-border);
    background: #fff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
    color: var(--clp-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.clp-sidebar-toggle:hover {
    background: var(--clp-soft);
}

.clp-topbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.clp-topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(22, 48, 122, .1);
    color: var(--clp-primary);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}

.clp-topbar-lesson {
    font-weight: 700;
    color: var(--clp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clp-topbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.clp-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--clp-border);
    background: #fff;
    color: var(--clp-ink) !important;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.clp-nav-btn:hover {
    border-color: rgba(22, 48, 122, .35);
    color: var(--clp-primary) !important;
}

.clp-nav-btn.is-primary {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    color: #fff !important;
}

.clp-nav-btn.is-primary:hover {
    background: var(--clp-primary-dark);
    color: #fff !important;
}

.clp-nav-btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* ----- Scrollable content ----- */
.clp-player-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px 80px;
}

.clp-player-content {
    max-width: 900px;
    margin: 0 auto;
}

.clp-content-title {
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -.03em;
    color: var(--clp-ink);
    margin-bottom: 22px;
}

.clp-media-frame {
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--clp-shadow);
    margin-bottom: 26px;
}

.clp-pdf-frame {
    width: 100%;
    height: 78vh;
    border: 0;
    display: block;
}

.clp-html5-frame {
    width: 100%;
    height: 70vh;
    border: 0;
    display: block;
    background: #fff;
}

.clp-embed-frame {
    background: #000;
}

.clp-embed-frame iframe,
.clp-embed-frame video {
    width: 100%;
    display: block;
}

.clp-audio {
    width: 100%;
    margin-top: 14px;
}

.clp-media-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(22, 48, 122, .1);
    color: var(--clp-primary);
    font-size: 30px;
}

.clp-callout {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--clp-shadow-sm);
    margin-bottom: 26px;
}

.clp-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(225, 29, 72, .12);
    color: #e11d48;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
}

.clp-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--clp-soft);
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 22px;
    font-weight: 600;
}

.clp-article {
    color: var(--clp-ink);
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 26px;
}

.clp-article > *:first-child { margin-top: 0; }

.clp-article p {
    margin: 0 0 1.15em;
}

.clp-article h1,
.clp-article h2,
.clp-article h3,
.clp-article h4,
.clp-article h5 {
    font-weight: 800;
    line-height: 1.3;
    margin: 1.8em 0 .65em;
    color: var(--clp-ink);
}

.clp-article h3 { font-size: 24px; }
.clp-article h4 { font-size: 19px; }
.clp-article h5 { font-size: 17px; }

.clp-article img { max-width: 100%; height: auto; border-radius: 12px; }
.clp-article figure { margin: 0 0 1.4em; }

.clp-article ul,
.clp-article ol {
    margin: 0 0 1.3em;
    padding-left: 1.5em;
}

.clp-article li {
    margin-bottom: .55em;
}

.clp-article li:last-child { margin-bottom: 0; }

.clp-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.4em;
    font-size: 15.5px;
}

.clp-article table th,
.clp-article table td {
    padding: 10px 12px;
    text-align: left;
}

.clp-article blockquote {
    margin: 0 0 1.4em;
}

.clp-article iframe {
    max-width: 100%;
}

.clp-article hr {
    border: 0;
    border-top: 1px solid var(--clp-border);
    margin: 1.8em 0;
}

.clp-activity-card {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    padding: 26px;
    box-shadow: var(--clp-shadow-sm);
    margin-bottom: 26px;
}

.clp-question {
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.clp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--clp-border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.clp-option:hover {
    border-color: rgba(22, 48, 122, .35);
    background: rgba(22, 48, 122, .03);
}

.clp-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(22, 48, 122, .1);
    color: var(--clp-primary);
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
}

.clp-chip-warn { background: rgba(245, 158, 11, .15); color: #b45309; }
.clp-chip-dark { background: rgba(16, 24, 40, .85); color: #fff; }

.clp-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--clp-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.clp-alert {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-weight: 600;
}

.clp-alert-info { background: rgba(37, 99, 235, .1); color: #1d4ed8; }
.clp-alert-success { background: rgba(31, 191, 117, .14); color: #047857; }
.clp-alert-danger { background: rgba(225, 29, 72, .12); color: #be123c; }

.clp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    background: var(--clp-soft);
    color: var(--clp-ink);
}

.clp-btn-sm { padding: 7px 14px; font-size: 13px; }
.clp-btn-primary { background: var(--clp-primary); color: #fff !important; }
.clp-btn-primary:hover { background: var(--clp-primary-dark); color: #fff !important; }
.clp-btn-success { background: var(--clp-success, #1ba84c); color: #fff !important; }
.clp-btn-success:hover { background: var(--clp-success-dark, #128a3d); }
.clp-btn-done { background: #e6f7ef; color: #047857 !important; }
.clp-btn-ghost { background: #fff; border-color: var(--clp-border); color: var(--clp-ink) !important; }
.clp-btn-ghost:hover { border-color: rgba(22, 48, 122, .35); color: var(--clp-primary) !important; }

.clp-complete-row { margin: 26px 0; }

.clp-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--clp-border);
    padding-top: 24px;
    margin-top: 10px;
}

/* Mobile drawer backdrop (only visible when the drawer is open on small screens) */
.clp-player-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1090;
    display: none;
}
.clp-player-backdrop.show { display: block; }

@media (max-width: 991px) {
    .clp-player-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1100;
        height: 100%;
        width: 320px;
        max-width: 86vw;
        flex-basis: 320px;
        box-shadow: 0 0 60px rgba(0, 0, 0, .4);
    }
    .clp-player.sidebar-collapsed .clp-player-sidebar { margin-left: -360px; }
    .clp-content-title { font-size: 24px; }
    .clp-player-scroll { padding: 22px 16px 70px; }
    .clp-player-topbar { padding: 10px 14px; gap: 10px; }
    .clp-topbar-nav .clp-nav-btn { padding: 9px 12px; }
}

/* Phones: keep only the essentials in the lesson top bar */
@media (max-width: 640px) {
    .clp-player-topbar { flex-wrap: wrap; }
    .clp-topbar-lesson { display: none; }            /* lesson title shown in the body heading already */
    .clp-topbar-badge { font-size: 11px; padding: 5px 9px; }
    .clp-nav-btn { font-size: 13px; padding: 8px 12px; }
    .clp-nav-btn span.clp-nav-btn-label { display: none; }  /* icon-only prev/next if labelled */
    .clp-content-title { font-size: 21px; }
    .clp-player-scroll { padding: 18px 14px 64px; }
}

/* Lesson player dark mode (main area; sidebar is already dark) */
.dark-theme .clp-player-main { background: #161618; }
.dark-theme .clp-player-topbar { background: #1f1f24; border-color: rgba(255,255,255,.08); }
.dark-theme .clp-sidebar-toggle { background: #1f1f24; color: #e5e7eb; border-color: rgba(255,255,255,.1); }
.dark-theme .clp-callout,
.dark-theme .clp-activity-card,
.dark-theme .clp-question,
.dark-theme .clp-nav-btn,
.dark-theme .clp-btn-ghost { background: #1f1f24; border-color: rgba(255,255,255,.08); color: #e5e7eb !important; }
.dark-theme .clp-content-title,
.dark-theme .clp-article { color: #f3f4f6; }
.dark-theme .clp-attachment-row { background: #1f1f24; border-color: rgba(255,255,255,.08); }

/* =========================================================
   Page Builder — public rendering of admin-built pages.
   ========================================================= */
.pb-page .pb-block { padding-top: 26px; padding-bottom: 26px; }
.pb-page--full .pb-block:first-child { padding-top: 0; }
.pb-block .pb-inner { width: 100%; }
.pb-block--spacer, .pb-block--divider { padding-top: 0; padding-bottom: 0; }
.pb-block--hero { padding-top: 8px; padding-bottom: 8px; }
.pb-heading { line-height: 1.25; }
.pb-text { font-size: 16.5px; line-height: 1.85; }
.pb-cards .card-item, .pb-testimonials .card-item { transition: transform .2s ease, box-shadow .2s ease; }
.pb-cards .card-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,.10); }
.pb-faq .card-header h5 { display: flex; justify-content: space-between; align-items: center; }
.pb-faq .card-header::after { content: '\f107'; }
@media (max-width: 767px) {
    .pb-hide-mobile { display: none !important; }
    .pb-page .pb-block { padding-top: 18px; padding-bottom: 18px; }
}

/* Dark-mode parity for builder blocks */
.dark-theme .pb-cards .card-item,
.dark-theme .pb-testimonials .card-item,
.dark-theme .pb-faq .card,
.dark-theme .pb-faq .card-header { background: #23232a !important; border-color: rgba(255,255,255,.08) !important; color: #e9eaee; }
.dark-theme .pb-quote { background: rgba(255,255,255,.04) !important; }

/* =========================================================
   Global mobile / tablet polish (activated by the viewport
   meta tag now present on every layout).
   ========================================================= */

/* Tablet */
@media (max-width: 991px) {
    .section--padding { padding: 56px 0; }
    .clp-shell { padding-top: 40px; padding-bottom: 40px; }
    .clp-university-band { padding: 32px; border-radius: 20px; }
    .clp-hero-panel { margin-top: 24px; }
    /* keep wide tables usable */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* Phones */
@media (max-width: 767px) {
    .section--padding { padding: 40px 0; }
    .clp-hero-copy { font-size: 16px; }
    .clp-metric { padding: 18px; }
    .clp-metric strong { font-size: 28px; }
    .clp-university-band { padding: 24px; border-radius: 16px; }
    .clp-eyebrow { font-size: 12px; }
    .breadcrumb-area .section__title { font-size: 26px; }
    /* primary actions go full-width so they're easy to tap */
    .clp-hero-search .theme-btn,
    .course-details-wrapper .theme-btn { width: 100%; }
    /* any raw table inside content scrolls instead of overflowing */
    .clp-article table, .pb-inner table { display: block; overflow-x: auto; white-space: nowrap; }
    /* comfortable tap targets */
    .main-menu ul li a, .generic-list-item li a { min-height: 40px; }
    h1, .clp-hero-title { line-height: 1.05; }
    .clp-university-band h2, .section__title { font-size: 24px; }
}

/* Small phones */
@media (max-width: 480px) {
    .section--padding { padding: 32px 0; }
    .clp-price { font-size: 18px; }
    .clp-course-thumb { height: 170px; }
    .btn, .theme-btn { font-size: 14px; }
}

/* "Up next" guided next-lesson button in the player footer */
.clp-next-btn { display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.clp-next-btn .clp-next-label { display: flex; flex-direction: column; line-height: 1.15; }
.clp-next-btn .clp-next-label small { font-size: 11px; opacity: .8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.clp-next-btn .clp-next-label span { font-weight: 800; }
@media (max-width: 640px) {
    .clp-next-btn .clp-next-label span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Quiz answer review (show/hide correct answers) */
.clp-quiz-review { margin: 6px 0 14px; border: 1px solid var(--clp-border); border-radius: 12px; padding: 6px 14px; background: #fff; }
.clp-quiz-review summary { cursor: pointer; font-weight: 700; color: var(--clp-primary); padding: 6px 0; }
.clp-review-q { padding: 10px 0; border-top: 1px solid var(--clp-border); }
.clp-review-q:first-of-type { border-top: 0; }
.clp-review-qtext { font-weight: 700; }
.clp-review-q.is-correct .clp-review-qtext i { color: #1ba84c; }
.clp-review-q.is-wrong .clp-review-qtext i { color: #d14343; }
.clp-review-a { font-size: 14px; margin-top: 4px; }
.clp-review-correct { color: #1ba84c; font-weight: 600; }
.dark-theme .clp-quiz-review { background: #1f1f24; border-color: rgba(255,255,255,.08); }

/* ============================================================
   MOTION & FX — animated hero, scroll reveals, hover polish
   (added in the UI-upgrade pass; respects reduced-motion)
   ============================================================ */
.clp-hero-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.clp-hero-fx::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg, rgba(10,24,56,.55), rgba(10,24,56,.15) 55%, transparent 78%)}
/* Real background video (renders only when public/frontend/videos/hero.* exists) */
.clp-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;animation:clpVideoFade 1.2s ease forwards}
@keyframes clpVideoFade{to{opacity:1}}
/* When a video is present: keep orbs as subtle accents, drop the grid,
   and strengthen the overlay so hero text stays readable over footage. */
.clp-hero-fx.has-video .clp-orb{opacity:.24;filter:blur(64px)}
.clp-hero-fx.has-video .clp-hero-grid{display:none}
.clp-hero-fx.has-video::after{
  background:linear-gradient(90deg, rgba(8,20,48,.82), rgba(8,20,48,.55) 55%, rgba(8,20,48,.32) 100%)}
.clp-orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.42;will-change:transform}
.clp-orb-1{width:440px;height:440px;left:-90px;top:-70px;
  background:radial-gradient(circle at 30% 30%, rgba(27,168,76,.9), transparent 70%);animation:clpFloat1 17s ease-in-out infinite}
.clp-orb-2{width:380px;height:380px;right:4%;top:14%;
  background:radial-gradient(circle at 60% 40%, rgba(244,206,10,.75), transparent 70%);animation:clpFloat2 21s ease-in-out infinite}
.clp-orb-3{width:320px;height:320px;left:40%;bottom:-110px;
  background:radial-gradient(circle at 50% 50%, rgba(56,120,255,.7), transparent 70%);animation:clpFloat3 19s ease-in-out infinite}
.clp-hero-grid{position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 65% 45%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse at 65% 45%,#000 10%,transparent 72%);
  animation:clpGridDrift 26s linear infinite}
@keyframes clpFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(42px,32px)}}
@keyframes clpFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-36px,28px) scale(1.08)}}
@keyframes clpFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-32px)}}
@keyframes clpGridDrift{from{background-position:0 0}to{background-position:46px 46px}}

/* Scroll reveal — JS adds .clp-reveal (hidden), then .is-visible on enter. */
.clp-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.clp-reveal.is-visible{opacity:1;transform:none}

/* Hover micro-interactions. */
.card-item,.clp-course-card{transition:transform .28s ease, box-shadow .28s ease}
.card-item:hover,.clp-course-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(16,48,122,.16)}
.theme-btn,.btn.theme-btn{transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.theme-btn:hover,.btn.theme-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(22,48,122,.28)}
.clp-hero-panel{transition:transform .4s ease, box-shadow .4s ease}
.clp-hero-panel:hover{transform:translateY(-4px)}

/* Softer header count badges (hidden when zero via JS). */
.product-count.is-zero{display:none}

@media (prefers-reduced-motion: reduce){
  .clp-orb,.clp-hero-grid{animation:none}
  .clp-reveal{transition:none;opacity:1;transform:none}
  .card-item:hover,.clp-course-card:hover,.theme-btn:hover,.clp-hero-panel:hover{transform:none}
  .clp-hero-video{animation:none;opacity:1}
}

/* ============================================================
   COURSE DETAIL + CATALOG polish
   ============================================================ */
/* Sticky enroll/price sidebar on desktop so it follows while the
   long left column scrolls (modern LMS pattern). */
@media (min-width: 992px){
  .course-details-area .sidebar{ position: sticky; top: 90px; align-self: flex-start; }
}
/* Give the enroll card a lift + hover so it reads as the primary CTA. */
.course-details-area .sidebar .card-item{ box-shadow: 0 18px 44px rgba(16,48,122,.12); }
.preview-course-video img{ transition: transform .5s ease; }
.preview-course-video:hover img{ transform: scale(1.04); }

/* Wishlist heart on course cards */
.clp-course-card { position: relative; }
.clp-card-heart { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px;
    border-radius: 50%; background: rgba(255,255,255,.94); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; color: #e8607a; font-size: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.14);
    transition: transform .18s ease, background .18s ease; }
.clp-card-heart:hover { transform: scale(1.1); background: #fff; }
.clp-card-heart .la-heart { color: #e8607a; }
.dark-theme .clp-card-heart { background: rgba(35,35,42,.92); }

/* Catalog: results summary + active-filter chips. */
.clp-catalog-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:22px; color:#596579; font-size:15px; }
.clp-catalog-summary strong{ color:var(--clp-ink,#101828); }
.clp-filter-chip{ display:inline-flex; align-items:center; gap:8px;
  background:#eef2fb; color:var(--clp-primary,#16307a); border-radius:999px;
  padding:5px 14px; font-size:13px; font-weight:600; }
.clp-filter-chip a{ color:inherit; opacity:.7; text-decoration:none; line-height:1; }
.clp-filter-chip a:hover{ opacity:1; }
.dark-theme .clp-catalog-summary{ color:#a9b0bd; }
.dark-theme .clp-catalog-summary strong{ color:#eee; }
.dark-theme .clp-filter-chip{ background:#23232a; color:#dfe6f5; }

/* ============================================================
   LEARNING TOOLS (Phase 2): resources, notes & bookmarks
   ============================================================ */
.clp-tools-card{ background:#fff; border:1px solid var(--clp-border,#e6eaf2); border-radius:16px; padding:20px 22px; margin-top:22px; }
.clp-tools-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.clp-tools-title{ font-size:18px; font-weight:800; color:var(--clp-ink,#101828); margin:0 0 14px; }
.clp-tools-head .clp-tools-title{ margin:0; }
.clp-tools-title i{ color:var(--clp-primary,#16307a); margin-right:6px; }

/* Resource list */
.clp-resource-list{ list-style:none; margin:0; padding:0; }
.clp-resource-item{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-resource-item:last-child{ border-bottom:0; }
.clp-resource-icon{ width:42px; height:42px; flex-shrink:0; border-radius:11px; background:#eef2fb; color:var(--clp-primary,#16307a); display:inline-flex; align-items:center; justify-content:center; font-size:22px; }
.clp-resource-main{ flex-grow:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.clp-resource-title{ font-weight:700; color:var(--clp-ink,#101828); }
.clp-resource-label{ align-self:flex-start; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px; }
.clp-label-required{ background:#fdeaea; color:#c0392b; }
.clp-label-optional{ background:#eef2f7; color:#5b6679; }
.clp-label-practice{ background:#e4f2fb; color:#1170a8; }
.clp-resource-locked{ color:#9aa3b2; font-size:18px; }

/* Notes & bookmarks (in-lesson) */
.clp-note-form{ margin-bottom:14px; }
.clp-note-form textarea{ border-radius:10px; }
.clp-note-form-row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.clp-ts-input{ max-width:220px; }
.clp-note-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--clp-border,#eef2f7); }
.clp-note-ts{ flex-shrink:0; font-size:12px; font-weight:800; color:var(--clp-primary,#16307a); background:#eef2fb; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.clp-note-body{ flex-grow:1; color:#33415c; font-size:14.5px; line-height:1.55; word-break:break-word; }
.clp-note-del, .clp-note-del-form button{ background:none; border:0; color:#c0392b; cursor:pointer; padding:2px 6px; font-size:16px; opacity:.6; }
.clp-note-del:hover{ opacity:1; }

/* Warn button variant (bookmarked state) */
.clp-btn-warn{ background:#fff7e6; color:#a9760f; border:1px solid #f4ce0a; }
.clp-btn-warn:hover{ background:#fdefcf; }

/* My Notes & Bookmarks dashboard page */
.clp-note-chip{ display:inline-flex; align-items:center; gap:6px; background:#eef2fb; border-radius:999px; padding:5px 10px 5px 12px; font-size:13px; font-weight:600; }
.clp-note-chip a{ color:var(--clp-primary,#16307a); text-decoration:none; }
.clp-note-chip button{ background:none; border:0; color:#8a94a6; cursor:pointer; line-height:1; padding:0; }
.clp-note-chip button:hover{ color:#c0392b; }
.clp-mynote{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-mynote:last-child{ border-bottom:0; }
.clp-mynote-lesson{ display:inline-block; font-weight:700; font-size:13px; color:var(--clp-primary,#16307a); margin-bottom:2px; }

/* Dark mode */
.dark-theme .clp-tools-card{ background:#1f1f24; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-resource-title, .dark-theme .clp-note-body{ color:#e5e7eb; }
.dark-theme .clp-resource-icon, .dark-theme .clp-note-ts, .dark-theme .clp-note-chip{ background:#2a2a33; }
.dark-theme .clp-resource-item, .dark-theme .clp-note-item, .dark-theme .clp-mynote{ border-color:rgba(255,255,255,.08); }

/* ============================================================
   NOTIFICATIONS BELL (Phase 3)
   ============================================================ */
.clp-bell{ position:relative; margin-right:4px; }
.clp-bell-btn{ position:relative; background:none; border:0; cursor:pointer; padding:8px; color:var(--clp-ink,#101828); font-size:22px; line-height:1; display:inline-flex; }
.clp-bell-btn:hover{ color:var(--clp-primary,#16307a); }
.clp-bell-badge{ position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#e8607a; color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }
.clp-bell-menu{ position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:90vw; background:#fff; border:1px solid var(--clp-border,#e6eaf2); border-radius:14px; box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.14)); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:1003; overflow:hidden; }
.clp-bell.is-open .clp-bell-menu, .clp-bell:hover .clp-bell-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.clp-bell-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-bell-head strong{ font-size:15px; }
.clp-bell-readall{ background:none; border:0; color:var(--clp-primary,#16307a); font-size:12px; font-weight:700; cursor:pointer; }
.clp-bell-list{ max-height:360px; overflow-y:auto; }
.clp-bell-item{ display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--clp-border,#f2f4f8); text-decoration:none; }
.clp-bell-item:hover{ background:#f7f9fc; }
.clp-bell-item.is-unread{ background:#f3f8ff; }
.clp-bell-dot{ width:8px; height:8px; border-radius:50%; background:transparent; flex-shrink:0; margin-top:6px; }
.clp-bell-item.is-unread .clp-bell-dot{ background:#1ba84c; }
.clp-bell-item-body{ display:flex; flex-direction:column; min-width:0; }
.clp-bell-title{ font-weight:700; color:var(--clp-ink,#101828); font-size:14px; }
.clp-bell-msg{ color:var(--clp-muted,#667085); font-size:13px; line-height:1.4; }
.clp-bell-time{ color:#9aa3b2; font-size:12px; margin-top:2px; }
.clp-bell-empty{ padding:26px 16px; text-align:center; color:var(--clp-muted,#667085); font-size:14px; }
.clp-bell-empty i{ color:#1ba84c; margin-right:4px; }
.clp-bell-all{ display:block; text-align:center; padding:12px; font-weight:700; font-size:13px; color:var(--clp-primary,#16307a); border-top:1px solid var(--clp-border,#eef2f7); text-decoration:none; }
.clp-bell-all:hover{ background:#f7f9fc; }
.dark-theme .clp-bell-btn{ color:#e5e7eb; }
.dark-theme .clp-bell-menu{ background:#1f1f24; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-bell-item{ border-color:rgba(255,255,255,.06); }
.dark-theme .clp-bell-item:hover{ background:#26262e; }
.dark-theme .clp-bell-item.is-unread{ background:#1a2740; }
.dark-theme .clp-bell-title{ color:#e5e7eb; }

/* Account security page (Phase 3) */
.clp-pw-meter{ height:6px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.clp-pw-meter span{ display:block; height:100%; width:0; border-radius:999px; transition:width .2s ease, background .2s ease; }
.clp-session-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--clp-border,#eef2f7); }
.clp-session-row:last-child{ border-bottom:0; }
.clp-session-row > i{ font-size:22px; color:var(--clp-primary,#16307a); flex-shrink:0; }
.dark-theme .clp-pw-meter{ background:#2a2a33; }
.dark-theme .clp-session-row{ border-color:rgba(255,255,255,.08); }
.clp-recovery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.clp-recovery-code{ display:block; text-align:center; padding:8px 6px; border-radius:8px; background:rgba(0,0,0,.05); font-size:15px; font-weight:700; letter-spacing:.06em; color:#101828; }
.dark-theme .clp-recovery-code{ background:rgba(255,255,255,.08); color:#f3f4f6; }

/* ---- Two-factor method chooser + authenticator (TOTP) setup ---- */
.clp-2fa-methods{ display:flex; flex-direction:column; gap:12px; }
.clp-2fa-method{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid rgba(15,34,87,.12); border-radius:12px; background:#fff; }
.clp-2fa-method.is-active{ border-color:rgba(27,168,76,.5); background:rgba(27,168,76,.06); }
.clp-2fa-method-icon{ flex:0 0 42px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(15,34,87,.08); color:#16307a; font-size:20px; }
.clp-2fa-method.is-active .clp-2fa-method-icon{ background:rgba(27,168,76,.15); color:#1ba84c; }
.dark-theme .clp-2fa-method{ background:#23232a; border-color:rgba(255,255,255,.1); }
.dark-theme .clp-2fa-method.is-active{ background:rgba(27,168,76,.12); border-color:rgba(27,168,76,.45); }
.dark-theme .clp-2fa-method-icon{ background:rgba(255,255,255,.08); color:#c7d2fe; }

.clp-totp-setup{ border:1px dashed rgba(15,34,87,.25); border-radius:12px; padding:18px; background:rgba(15,34,87,.03); }
.dark-theme .clp-totp-setup{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.03); }
.clp-totp-grid{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.clp-totp-qr{ flex:0 0 auto; width:200px; height:200px; background:#fff; border-radius:10px; padding:8px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.clp-totp-qr svg{ display:block; width:100%; height:100%; }
.clp-totp-manual{ flex:1 1 180px; min-width:180px; }
.clp-totp-key{ display:inline-block; padding:8px 12px; border-radius:8px; background:rgba(0,0,0,.06); font-size:15px; font-weight:700; letter-spacing:.12em; color:#101828; word-break:break-all; }
.dark-theme .clp-totp-key{ background:rgba(255,255,255,.09); color:#f3f4f6; }

/* =========================================================
   PHASE 6 — Site-wide UX: search autocomplete, compare,
   learning paths, help center, certificate verify.
   ========================================================= */

/* ---- Global search autocomplete ---- */
.clp-nav-search{ position:relative; }
.clp-search-suggest{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:1200;
    background:#fff; border:1px solid var(--clp-border,#eaecf0); border-radius:14px;
    box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.14)); padding:6px;
    max-height:70vh; overflow-y:auto;
}
.clp-suggest-group{
    font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
    color:var(--clp-muted,#667085); padding:8px 10px 4px;
}
.clp-suggest-item{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
    color:var(--clp-ink,#101828); text-decoration:none;
}
.clp-suggest-item:hover{ background:var(--clp-soft,#f5f7fb); color:var(--clp-primary,#16307a); }
.clp-suggest-item img{ width:44px; height:32px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.clp-suggest-item > i{ width:44px; text-align:center; font-size:20px; color:var(--clp-primary,#16307a); }
.clp-suggest-slim{ padding-top:6px; padding-bottom:6px; }
.clp-suggest-text{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.clp-suggest-text strong{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clp-suggest-text small{ color:var(--clp-muted,#667085); font-size:12px; }
.clp-suggest-empty{ padding:14px 12px; color:var(--clp-muted,#667085); font-size:13px; }
.dark-theme .clp-search-suggest{ background:#1f1f24; border-color:rgba(255,255,255,.10); }
.dark-theme .clp-suggest-item{ color:#e9eaee; }
.dark-theme .clp-suggest-item:hover{ background:#2a2a31; color:#fff; }

/* ---- Compare button on cards ---- */
.clp-compare-add-link{
    display:inline-flex; align-items:center; gap:6px; background:transparent; border:0;
    color:var(--clp-muted,#667085); font-size:13px; font-weight:600; cursor:pointer; padding:2px 0;
}
.clp-compare-add-link:hover{ color:var(--clp-primary,#16307a); }
.clp-compare-add.is-added{ color:var(--clp-primary,#16307a); }
.clp-compare-add.is-added .la-exchange::before{ content:"\f00c"; }
.dark-theme .clp-compare-add-link{ color:#a8b0bd; }
.dark-theme .clp-compare-add-link:hover, .dark-theme .clp-compare-add.is-added{ color:#9ee2b4; }

/* ---- Compare tray (fixed bottom bar) ---- */
.clp-compare-tray{
    position:fixed; left:0; right:0; bottom:0; z-index:1300;
    background:var(--clp-primary-dark,#0f2257); color:#fff;
    box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
.clp-compare-tray-inner{
    max-width:1200px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.clp-compare-tray-items{ display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
.clp-compare-chip{
    display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
    border-radius:999px; padding:6px 8px 6px 14px; font-size:13px; max-width:230px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.clp-compare-chip button{
    background:rgba(255,255,255,.2); border:0; color:#fff; width:20px; height:20px;
    border-radius:50%; line-height:1; cursor:pointer; flex-shrink:0;
}
.clp-compare-tray-actions{ display:flex; align-items:center; gap:10px; }
.clp-compare-tray-clear{ background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; }
.clp-compare-tray-clear:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ---- Compare table page ---- */
.clp-compare-wrap{ overflow-x:auto; border:1px solid var(--clp-border,#eaecf0); border-radius:16px; }
.clp-compare-table{ width:100%; min-width:640px; border-collapse:collapse; background:#fff; }
.clp-compare-table th, .clp-compare-table td{
    padding:16px; text-align:center; border-bottom:1px solid var(--clp-border,#eaecf0);
    vertical-align:middle; font-size:14px;
}
.clp-compare-table thead th{ background:var(--clp-soft,#f8f9fb); position:relative; min-width:180px; }
.clp-compare-rowlabel{ text-align:left !important; font-weight:700; color:var(--clp-ink,#101828); background:var(--clp-soft,#f8f9fb); white-space:nowrap; }
.clp-compare-thumb{ display:block; margin-bottom:8px; }
.clp-compare-thumb img{ width:100%; max-width:180px; height:96px; object-fit:cover; border-radius:10px; }
.clp-compare-name{ display:block; font-weight:700; color:var(--clp-ink,#101828); text-decoration:none; }
.clp-compare-name:hover{ color:var(--clp-primary,#16307a); }
.clp-compare-remove{
    position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
    background:#fff; border:1px solid var(--clp-border,#eaecf0); color:#98a2b3; cursor:pointer;
}
.clp-compare-remove:hover{ color:#e5484d; border-color:#e5484d; }
.clp-compare-price-row .clp-price{ font-size:20px; }
.dark-theme .clp-compare-wrap{ border-color:rgba(255,255,255,.10); }
.dark-theme .clp-compare-table{ background:#1f1f24; }
.dark-theme .clp-compare-table th, .dark-theme .clp-compare-table td{ border-color:rgba(255,255,255,.08); }
.dark-theme .clp-compare-table thead th,
.dark-theme .clp-compare-rowlabel{ background:#26262d; color:#f3f4f6; }
.dark-theme .clp-compare-remove{ background:#2a2a31; border-color:rgba(255,255,255,.12); }

/* ---- Learning paths ---- */
.clp-path-card{
    background:#fff; border:1px solid var(--clp-border,#eaecf0); border-radius:18px;
    box-shadow:var(--clp-shadow-sm,0 10px 30px rgba(16,24,40,.08)); padding:24px;
}
.clp-path-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.clp-path-index{
    width:44px; height:44px; border-radius:12px; flex-shrink:0; margin-right:14px;
    display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;
    background:linear-gradient(135deg,var(--clp-primary,#16307a),#0f2257); color:#fff;
}
.clp-path-title{ font-size:22px; font-weight:800; color:var(--clp-ink,#101828); }
.clp-path-progress{ margin:12px 0 4px; }
.clp-path-track{ height:8px; border-radius:999px; background:var(--clp-soft,#eef2f7); overflow:hidden; }
.clp-path-track span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#1ba84c,#16307a); }
.clp-path-steps{ list-style:none; margin:18px 0 0; padding:0; position:relative; }
.clp-path-steps::before{ content:""; position:absolute; left:19px; top:20px; bottom:20px; width:2px; background:var(--clp-border,#eaecf0); }
.clp-path-step{ display:flex; align-items:center; gap:14px; padding:12px 0; position:relative; }
.clp-step-node{
    width:40px; height:40px; border-radius:50%; flex-shrink:0; z-index:1;
    display:inline-flex; align-items:center; justify-content:center; font-weight:700;
    background:#fff; border:2px solid var(--clp-border,#eaecf0); color:var(--clp-muted,#667085);
}
.clp-path-step.is-enrolled .clp-step-node{ background:var(--clp-primary,#16307a); border-color:var(--clp-primary,#16307a); color:#fff; }
.clp-step-thumb{ flex-shrink:0; }
.clp-step-thumb img{ width:96px; height:60px; border-radius:10px; object-fit:cover; }
.clp-step-body{ flex:1; min-width:0; }
.clp-step-body h5{ font-size:16px; }
.clp-step-body h5 a{ color:var(--clp-ink,#101828); text-decoration:none; }
.clp-step-body h5 a:hover{ color:var(--clp-primary,#16307a); }
.clp-step-action{ flex-shrink:0; text-align:right; }
.clp-step-mini-track{ height:5px; width:160px; max-width:100%; border-radius:999px; background:var(--clp-soft,#eef2f7); overflow:hidden; }
.clp-step-mini-track span{ display:block; height:100%; background:#1ba84c; }
.clp-badge-soft{ background:rgba(22,48,122,.08); color:var(--clp-primary,#16307a); }
@media (max-width:575px){
    .clp-path-step{ flex-wrap:wrap; }
    .clp-step-action{ width:100%; text-align:left; padding-left:54px; }
    .clp-path-steps::before{ display:none; }
}
.dark-theme .clp-path-card{ background:#1f1f24; border-color:rgba(255,255,255,.10); }
.dark-theme .clp-path-track, .dark-theme .clp-step-mini-track{ background:#2a2a33; }
.dark-theme .clp-step-node{ background:#26262d; border-color:rgba(255,255,255,.14); color:#a8b0bd; }
.dark-theme .clp-path-steps::before{ background:rgba(255,255,255,.10); }
.dark-theme .clp-step-body h5 a{ color:#f3f4f6; }
.dark-theme .clp-badge-soft{ background:rgba(27, 168, 76,.20); color:#9ee2b4; }

/* ---- Help center ---- */
.clp-help-search{ position:relative; max-width:520px; }
.clp-help-search .form-control{ height:54px; border-radius:999px; padding-left:48px; border:1px solid var(--clp-border,#eaecf0); }
.clp-help-search > i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--clp-muted,#667085); }
.clp-help-icon{
    width:48px; height:48px; border-radius:12px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center; font-size:24px;
    background:rgba(22,48,122,.08); color:var(--clp-primary,#16307a);
}
.clp-faq-item{ border-top:1px solid var(--clp-border,#eaecf0); }
.clp-faq-item:first-child{ border-top:0; }
.clp-faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:transparent; border:0; padding:14px 0; text-align:left; cursor:pointer;
    font-weight:600; color:var(--clp-ink,#101828); font-size:15px;
}
.clp-faq-q > i{ transition:transform .2s ease; color:var(--clp-muted,#667085); flex-shrink:0; }
.clp-faq-item.is-open .clp-faq-q > i{ transform:rotate(180deg); }
.clp-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.clp-faq-item.is-open .clp-faq-a{ max-height:400px; }
.clp-faq-a p{ padding:0 0 14px; color:var(--clp-muted,#667085); line-height:1.6; }
.clp-help-contact{ background:linear-gradient(135deg,rgba(22,48,122,.05),rgba(27,168,76,.05)); }
.dark-theme .clp-help-icon{ background:rgba(27, 168, 76,.18); color:#9ee2b4; }
.dark-theme .clp-faq-item{ border-color:rgba(255,255,255,.08); }
.dark-theme .clp-faq-q{ color:#f3f4f6; }
.dark-theme .clp-help-contact{ background:#26262d; }

/* ---- Star ratings ---- */
.clp-stars{ display:inline-flex; align-items:center; gap:1px; color:#f4a723; font-size:15px; }
.clp-stars-sm{ font-size:13px; }
.clp-stars .la-star-o{ color:#d0d5dd; }
.clp-stars-meta{ margin-left:6px; color:var(--clp-muted,#667085); font-size:12px; font-weight:600; }
.dark-theme .clp-stars .la-star-o{ color:#4a4a55; }
.dark-theme .clp-stars-meta{ color:#a8b0bd; }

/* ---- Checkout copy-to-clipboard button ---- */
.clp-copy-btn{ background:var(--clp-soft,#f1f5fb); border:1px solid var(--clp-border,#e6eaf2); color:var(--clp-primary,#16307a); width:30px; height:30px; border-radius:8px; cursor:pointer; line-height:1; flex-shrink:0; }
.clp-copy-btn:hover{ background:#e4ecfb; }
.dark-theme .clp-copy-btn{ background:#26262d; border-color:rgba(255,255,255,.12); color:#9ee2b4; }

/* ---- Certificate verify form ---- */
.clp-verify-form{ display:flex; gap:10px; flex-wrap:wrap; }
.clp-verify-form .form-control{ flex:1; min-width:200px; height:50px; border-radius:10px; text-align:center; letter-spacing:.04em; font-weight:600; }
.clp-verify-form .btn{ height:50px; }
.clp-offcanvas-search .form-control{ height:46px; border-radius:10px; }


/* =========================================================
   APPEARANCE POLISH (2026-07): course-card chips, hero CTA
   hierarchy + trust line, calmer hero orbs.
   ========================================================= */
.clp-course-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.clp-chip{
    display:inline-flex; align-items:center; font-size:11.5px; font-weight:650;
    padding:4px 9px; border-radius:999px; white-space:nowrap;
    background:var(--clp-soft,#f1f5fb); color:var(--clp-primary,#16307a);
    border:1px solid var(--clp-border,#eaecf0);
}
.clp-chip-accent{ background:rgba(27,168,76,.10); color:#127a37; border-color:rgba(27,168,76,.25); }
/* Standardized difficulty badges */
.clp-chip.lvl-beginner{ background:rgba(27,168,76,.10); color:#127a37; border-color:rgba(27,168,76,.28); }
.clp-chip.lvl-intermediate{ background:rgba(244,206,10,.16); color:#8a6d00; border-color:rgba(244,206,10,.4); }
.clp-chip.lvl-advanced{ background:rgba(214,69,69,.10); color:#b23b3b; border-color:rgba(214,69,69,.28); }
.dark-theme .clp-chip.lvl-intermediate{ color:#f4ce0a; }
.dark-theme .clp-chip.lvl-advanced{ color:#ff9b9b; }
.dark-theme .clp-chip{ background:#26262d; color:#cdd6ea; border-color:rgba(255,255,255,.10); }
.dark-theme .clp-chip-accent{ background:rgba(27,168,76,.18); color:#9ee2b4; border-color:rgba(27,168,76,.30); }

/* Hero: dominant primary CTA, quieter secondary, trust line. */
.btn.theme-btn-lg{
    padding:14px 34px; font-size:16px; font-weight:700; border-radius:12px;
    box-shadow:0 12px 26px rgba(22,48,122,.28);
}
.btn.theme-btn-lg:hover{ box-shadow:0 16px 32px rgba(22,48,122,.34); }
.btn.theme-btn-quiet{ box-shadow:none !important; font-weight:600; }
.clp-hero-trust{ font-size:14px; font-weight:600; color:var(--clp-muted,#667085); }
.clp-hero-trust .la{ color:var(--clp-primary,#16307a); }
.dark-theme .clp-hero-trust{ color:#a8b0bd; }

/* Calm the hero decoration so it never competes with the headline. */
.clp-shell .clp-hero-fx .clp-orb{ opacity:.24; }
.clp-shell .clp-hero-fx .clp-hero-grid{ opacity:.5; }

/* =========================================================
   Hero product mockup — an app-window preview of the learner
   experience (course player + progress + certificate).
   ========================================================= */
.clp-hero-mock{
    position:relative;
    background:#ffffff;
    border:1px solid rgba(15,34,87,.10);
    border-radius:18px;
    box-shadow:0 30px 70px rgba(15,34,87,.28);
    overflow:visible;
    transition:transform .4s ease, box-shadow .4s ease;
}
.clp-hero-mock:hover{ transform:translateY(-4px); box-shadow:0 38px 82px rgba(15,34,87,.34); }
.clp-mock-bar{
    display:flex; align-items:center; gap:7px;
    padding:12px 16px; border-bottom:1px solid rgba(15,34,87,.08);
    background:linear-gradient(180deg,#f7f9fc,#eef2f8); border-radius:18px 18px 0 0;
}
.clp-mock-dot{ width:11px; height:11px; border-radius:50%; background:#d5dbe6; }
.clp-mock-dot:nth-child(1){ background:#f4655a; }
.clp-mock-dot:nth-child(2){ background:#f5bd4f; }
.clp-mock-dot:nth-child(3){ background:#5bc46b; }
.clp-mock-url{ margin-left:10px; font-size:12px; color:#7a869a; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clp-mock-url .la{ font-size:12px; margin-right:2px; }
.clp-mock-body{ padding:18px; }

.clp-mock-now{
    display:flex; align-items:center; gap:12px;
    padding:12px; border-radius:12px; margin-bottom:14px; color:#fff;
    background:linear-gradient(135deg,var(--clp-primary,#16307a),var(--clp-primary-dark,#0f2257));
}
.clp-mock-play{ flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.18); font-size:18px; }
.clp-mock-now strong{ font-size:15px; line-height:1.2; }
.clp-mock-sub{ font-size:12px; color:rgba(255,255,255,.78); }
.clp-mock-live{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 7px; border-radius:6px; background:var(--clp-accent,#f4ce0a); color:#0f2257; }

.clp-mock-lessons{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.clp-mock-lesson{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#5a6577; padding:8px 10px; border-radius:9px; background:#f6f8fb; }
.clp-mock-lesson .la{ font-size:17px; }
.clp-mock-lesson.done{ color:#2f9e57; }
.clp-mock-lesson.done .la{ color:var(--clp-success,#1ba84c); }
.clp-mock-lesson.active{ color:#16307a; background:rgba(22,48,122,.09); }
.clp-mock-lesson.active .la{ color:var(--clp-primary,#16307a); }

.clp-mock-progress{ margin-bottom:16px; }
.clp-mock-metrics{ margin:0; }

.clp-mock-cert{
    position:absolute; right:-14px; bottom:-18px;
    display:flex; align-items:center; gap:10px;
    padding:12px 16px 12px 12px; border-radius:14px;
    background:#fff; box-shadow:0 18px 38px rgba(15,34,87,.22); border:1px solid rgba(15,34,87,.08);
}
.clp-mock-cert-ribbon{ flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:20px; color:#fff; background:linear-gradient(135deg,var(--clp-success,#1ba84c),#128a3d); }
.clp-mock-cert strong{ font-size:13px; color:#101828; }
.clp-mock-cert span{ font-size:12px; color:#667085; }

/* Dark mode */
.dark-theme .clp-hero-mock{ background:#1c1c22; border-color:rgba(255,255,255,.08); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.dark-theme .clp-mock-bar{ background:linear-gradient(180deg,#24242c,#1c1c22); border-bottom-color:rgba(255,255,255,.06); }
.dark-theme .clp-mock-lesson{ background:rgba(255,255,255,.05); color:#aeb6c4; }
.dark-theme .clp-mock-lesson.active{ background:rgba(120,150,255,.14); color:#dbe3ff; }
.dark-theme .clp-mock-cert{ background:#23232a; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-mock-cert strong{ color:#f3f4f6; }
.dark-theme .clp-mock-cert span{ color:#a8b0bd; }

@media (max-width:575px){
    .clp-mock-cert{ position:static; margin:16px auto 0; right:auto; bottom:auto; width:max-content; }
    .clp-hero-mock{ overflow:hidden; }
}

/* =========================================================
   Homepage "Who it's for" audience cards
   ========================================================= */
.clp-section-title{ font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.03em; color:var(--clp-ink,#101828); }
.dark-theme .clp-section-title{ color:#f3f4f6; }
.clp-audience-card{
    display:flex; flex-direction:column; align-items:flex-start;
    padding:28px; border:1px solid var(--clp-border,#eaecf0); border-radius:var(--clp-radius-lg,18px);
    background:var(--clp-surface,#fff); box-shadow:var(--clp-shadow-sm,0 10px 30px rgba(16,24,40,.08));
    transition:transform .25s ease, box-shadow .25s ease;
}
.clp-audience-card:hover{ transform:translateY(-4px); box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.10)); }
.clp-audience-icon{
    width:56px; height:56px; display:flex; align-items:center; justify-content:center;
    border-radius:14px; font-size:28px; margin-bottom:18px;
    background:rgba(22,48,122,.09); color:var(--clp-primary,#16307a);
}
.clp-audience-title{ font-size:20px; font-weight:700; margin-bottom:10px; color:var(--clp-ink,#101828); }
.clp-audience-text{ color:var(--clp-muted,#667085); font-size:15px; line-height:1.6; margin-bottom:16px; }
.clp-audience-link{ margin-top:auto; font-weight:700; color:var(--clp-primary,#16307a); }
.clp-audience-link .la{ transition:transform .2s ease; }
.clp-audience-link:hover .la{ transform:translateX(4px); }
.dark-theme .clp-audience-card{ background:#1c1c22; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-audience-title{ color:#f3f4f6; }
.dark-theme .clp-audience-text{ color:#a8b0bd; }
.dark-theme .clp-audience-icon{ background:rgba(120,150,255,.14); color:#c7d2fe; }

/* =========================================================
   Branded auth pages (login / register) — replaces the old
   stock breadcrumb banner with a compact CLP navy hero.
   ========================================================= */
.clp-auth-hero{
    background:linear-gradient(135deg, var(--clp-primary-dark,#0f2257), var(--clp-primary,#16307a));
    color:#fff; text-align:center; padding:38px 0 34px; position:relative;
}
.clp-auth-eyebrow{
    display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
    letter-spacing:.04em; color:rgba(255,255,255,.9); background:rgba(255,255,255,.12);
    padding:6px 14px; border-radius:var(--clp-radius-pill,999px); margin-bottom:14px;
}
.clp-auth-eyebrow .la{ color:var(--clp-accent,#f4ce0a); }
.clp-auth-hero-title{ color:#fff; font-weight:800; letter-spacing:-.03em; font-size:clamp(28px,4vw,44px); margin:0 0 8px; }
.clp-auth-hero-sub{ color:rgba(255,255,255,.82); font-size:15px; margin:0; }
.clp-auth-body{ padding:30px 0 52px; margin-top:-22px; background:var(--clp-soft,#f8f9fb); }
.clp-auth-body .card-item{ max-width:480px; margin-left:auto; margin-right:auto; }

/* ===================== AUDIT POLISH (2026-07) ===================== */
/* Header "More" dropdown divider */
.clp-dropdown-menu .clp-dropdown-divider{ height:1px; margin:6px 14px; padding:0; background:rgba(15,23,42,.10); list-style:none; }
.dark-theme .clp-dropdown-menu .clp-dropdown-divider{ background:rgba(255,255,255,.14); }

/* Tighten the oversized white gaps between homepage sections (was 120px). */
.section-padding{ padding-top:84px; padding-bottom:84px; }
.section--padding{ padding-top:84px; padding-bottom:64px; }
@media (max-width:767px){
    .section-padding{ padding-top:52px; padding-bottom:52px; }
    .section--padding{ padding-top:52px; padding-bottom:44px; }
    /* Mobile hero: reclaim vertical space (page was ~10.9k px tall). */
    .clp-shell{ padding-top:30px !important; padding-bottom:30px !important; }
    .clp-hero-panel{ margin-top:20px; }
}

/* Stronger, consistent card hover. */
.card-item:hover,.clp-course-card:hover{ box-shadow:0 24px 52px rgba(16,48,122,.18); }

/* Homepage personalization strips (Continue learning + Recently viewed) */
.clp-personal-strip{ padding:44px 0 8px; }
.clp-strip-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.clp-strip-title{ font-size:22px; font-weight:800; color:var(--clp-ink,#1f2a37); margin:0; display:flex; align-items:center; }
.clp-strip-title .la{ color:var(--clp-primary,#16307a); }
.clp-strip-link{ font-size:14px; font-weight:700; color:var(--clp-primary,#16307a); text-decoration:none; white-space:nowrap; }
.clp-strip-link:hover{ text-decoration:underline; }

.clp-continue-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.clp-continue-card{ display:flex; gap:14px; background:#fff; border:1px solid var(--clp-border,#e6e8ee); border-radius:14px; padding:12px; text-decoration:none; transition:.16s; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.clp-continue-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(16,48,122,.12); border-color:var(--clp-primary,#16307a); }
.clp-continue-thumb{ width:96px; height:64px; border-radius:9px; overflow:hidden; flex:0 0 auto; background:#eef1f8; }
.clp-continue-thumb img{ width:100%; height:100%; object-fit:cover; }
.clp-continue-body{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.clp-continue-name{ font-size:14.5px; font-weight:700; color:var(--clp-ink,#1f2a37); margin:0 0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clp-continue-bar{ height:6px; border-radius:99px; background:#eaeef5; overflow:hidden; margin-bottom:6px; }
.clp-continue-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--clp-primary,#16307a),var(--clp-accent-2,#1ba84c)); }
.clp-continue-meta{ font-size:12.5px; color:var(--clp-muted,#6b7280); font-weight:600; }
.clp-continue-meta .la{ font-size:12px; }

.clp-recent-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.clp-recent-card{ display:block; background:#fff; border:1px solid var(--clp-border,#e6e8ee); border-radius:12px; overflow:hidden; text-decoration:none; transition:.16s; }
.clp-recent-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(16,48,122,.12); }
.clp-recent-thumb{ aspect-ratio:16/9; background:#eef1f8; overflow:hidden; }
.clp-recent-thumb img{ width:100%; height:100%; object-fit:cover; }
.clp-recent-body{ padding:10px 12px; }
.clp-recent-name{ font-size:13.5px; font-weight:700; color:var(--clp-ink,#1f2a37); margin:0 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clp-recent-cat{ font-size:11.5px; color:var(--clp-muted,#6b7280); }

.dark-theme .clp-continue-card,.dark-theme .clp-recent-card{ background:#182235; border-color:#26324a; }
.dark-theme .clp-strip-title,.dark-theme .clp-continue-name,.dark-theme .clp-recent-name{ color:#eef2f9; }
/* ================================================================= */
.clp-auth-body .card-item{ position:relative; z-index:2; box-shadow:var(--clp-shadow,0 18px 50px rgba(16,24,40,.10)); }
.dark-theme .clp-auth-body{ background:#15151a; }
@media (max-width:575px){
    .clp-auth-hero{ padding:32px 0 30px; }
    .clp-auth-hero-title{ font-size:25px; }
    .clp-auth-hero-sub{ font-size:13.5px; }
    .clp-auth-body{ padding:24px 0 40px; margin-top:-20px; }
}

/* =========================================================
   VISUAL QA POLISH (2026-07): card title clamp, hero dot,
   mobile hero/logo sizing, hero text contrast.
   ========================================================= */

/* Course cards: clamp long titles/descriptions so all cards align cleanly. */
.clp-course-card .card-title{ margin-bottom:8px; }
.clp-course-card .card-title a{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.3; min-height:2.6em;
}
.clp-course-card .card-body > p.text-muted{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-bottom:12px;
}

/* Compact course cards — were ~700px tall (too bulky, too few per screen). */
.clp-course-thumb{ height:158px; }
.clp-course-card .card-body{ padding:14px 16px 16px; }
.clp-course-card .card-title{ margin-bottom:6px; }
.clp-course-card .card-title a{ line-height:1.25; min-height:2.5em; font-size:16px; }
.clp-course-card .clp-course-meta{ font-size:13px; margin-bottom:6px !important; }
.clp-course-card .clp-course-chips{ margin-bottom:10px !important; }
.clp-course-card .card-body > p.text-muted{ font-size:13.5px; margin-bottom:10px; line-height:1.45; }
/* the instructor/rating row */
.clp-course-card .card-body > .d-flex.align-items-center:first-child{ margin-bottom:8px !important; }

/* Reposition the decorative hero circle out of the centre (it read as a stray
   dot on the shorter catalog hero) — now a soft corner glow. */
.clp-shell:after{ left:-90px; right:auto; bottom:-90px; top:auto; width:220px; height:220px; }

/* Guarantee hero text contrast over the gradient on every screen size. */
.clp-hero-title{ text-shadow:0 2px 14px rgba(3,10,30,.28); }
.clp-shell .clp-hero-copy{ text-shadow:0 1px 8px rgba(3,10,30,.22); }

/* ---- Mobile (≤575px) ---- */
@media (max-width:575px){
    .clp-shell{ padding-top:30px !important; padding-bottom:30px !important; }
    .clp-hero-title{ font-size:34px !important; letter-spacing:-.04em; }
    .clp-hero-copy{ font-size:16px !important; }
    /* Stronger contrast on the catalog hero: damp the light radial spots. */
    .clp-shell{ background:
        radial-gradient(circle at 4% 8%, rgba(244,206,10,.14), transparent 26%),
        radial-gradient(circle at 92% 4%, rgba(27,168,76,.20), transparent 30%),
        linear-gradient(160deg, #0a1838 0%, #12266a 55%, #16307a 100%) !important; }
    /* Logo: fit "Communityline" without truncation. */
    .clp-logo-title{ font-size:15px !important; text-overflow:clip !important; }
    .clp-logo-img{ width:34px !important; height:34px !important; }
    .clp-hero-mock{ transform:none; }
}
@media (max-width:380px){
    .clp-logo-title{ font-size:13.5px !important; }
    .clp-hero-title{ font-size:30px !important; }
}

/* Mobile header: give the brand name room (was squeezing to ~31px). */
@media (max-width:575px){
    .clp-nav-left{ flex:0 0 auto !important; min-width:0 !important; }
    .clp-logo-title{ white-space:nowrap; overflow:visible; text-overflow:clip !important; }
    .clp-nav-right{ flex:1 1 auto; justify-content:flex-end; }
    .clp-nav-icons{ gap:2px; }
    .clp-nav-icons .shop-cart-btn,
    .clp-nav-icons .clp-icon-link,
    .clp-nav-icons > *{ margin-left:2px !important; margin-right:2px !important; }
    .clp-nav-icons .fs-22{ font-size:19px !important; }
}
@media (max-width:389px){
    /* Very small phones: drop to the house icon only — cleaner than a cramped name. */
    .clp-logo-text{ display:none !important; }
}

/* =====================================================================
   APP-WIDE PREMIUM PASS (2026-07)
   Shared primitives that lift every frontend + student-dashboard page:
   refined form controls, buttons, section rhythm, links, footer, cards.
   Scoped to the frontend/student stack (clp-modern is not loaded on the
   NobleUI admin, which has its own premium pass in clp-admin.css).
   ===================================================================== */

/* Text selection uses the brand, not the browser default blue. */
::selection { background: rgba(22, 48, 122, .16); color: var(--clp-ink); }

/* ---- Form controls: consistent height, radius, and a brand focus ring ---- */
.form-control,
.form--control,
select.form-control,
textarea.form-control {
    border: 1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    background: #fff;
    color: var(--clp-ink);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control::placeholder,
.form--control::placeholder { color: #9aa3b2; }

.form-control:focus,
.form--control:focus,
.custom-select:focus,
textarea.form-control:focus {
    border-color: rgba(22, 48, 122, .5);
    box-shadow: 0 0 0 4px rgba(22, 48, 122, .12);
    background: #fff;
    outline: 0;
}

/* Labels read as quiet, confident metadata. */
.label-text,
.input-box .label-text,
.form-label {
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .005em;
    color: var(--clp-ink);
}

/* Checkboxes / radios adopt the brand accent (native control tinting). */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--clp-primary); }

/* ---- Buttons: smooth press + keyboard focus ring, consistent radius ---- */
.theme-btn,
.btn.theme-btn,
.clp-btn {
    transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.theme-btn:active,
.btn.theme-btn:active,
.clp-btn:active { transform: translateY(1px); }

.theme-btn:focus-visible,
.btn.theme-btn:focus-visible,
.clp-btn:focus-visible,
a.theme-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(22, 48, 122, .22);
}

/* ---- Links: smooth colour transition everywhere ---- */
a { transition: color .16s ease; }

/* ---- Section rhythm & headings ---- */
.section__title { line-height: 1.12; }
.section-heading .section__title { font-size: clamp(28px, 3.2vw, 40px); }

/* A quiet, premium eyebrow above section titles (opt-in class). */
.clp-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clp-primary);
    margin-bottom: 12px;
}

/* Supporting copy under a section title. */
.section-heading p,
.section__desc {
    color: var(--clp-muted);
    font-size: 16.5px;
    line-height: 1.7;
}

/* ---- Cards: unify the interactive lift across every card variant ---- */
.clp-course-card,
.clp-floating-card,
.clp-metric {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.clp-course-card:hover {
    transform: translateY(-4px);
    border-color: rgba(22, 48, 122, .2);
    box-shadow: var(--clp-shadow);
}

/* ---- Breadcrumb / page hero: refined navy so inner pages match home.
   Scoped to the .img-bg-2 marketing variant only — the course-details
   breadcrumb is intentionally .bg-white with dark text, leave it alone. ---- */
.breadcrumb-area.img-bg-2 {
    background:
        radial-gradient(circle at 92% 4%, rgba(27, 168, 76, .18), transparent 44%),
        linear-gradient(140deg, #0a1836 0%, #122560 52%, #16307a 100%) !important;
    color: #fff;
}
.breadcrumb-area.img-bg-2::before { display: none; }
.breadcrumb-area.img-bg-2 .section__title,
.breadcrumb-area.img-bg-2 .breadcrumb-title,
.breadcrumb-area.img-bg-2 h1,
.breadcrumb-area.img-bg-2 h2 { color: #fff; }
.breadcrumb-area.img-bg-2 .breadcrumb-item,
.breadcrumb-area.img-bg-2 .breadcrumb-item a,
.breadcrumb-area.img-bg-2 .breadcrumb-list li,
.breadcrumb-area.img-bg-2 .breadcrumb-list li a { color: rgba(255, 255, 255, .82); }

/* ---- Footer: crisp top divider + refined link hovers ---- */
.footer-area {
    border-top: 1px solid var(--clp-border);
}
.footer-area .generic-list-item li a,
.footer-area .footer-item ul li a {
    color: var(--clp-muted);
    transition: color .16s ease, padding-left .16s ease;
}
.footer-area .generic-list-item li a:hover,
.footer-area .footer-item ul li a:hover {
    color: var(--clp-primary);
    padding-left: 3px;
}

/* ---- Pagination: pill-style, brand-tinted ---- */
.pagination { gap: 6px; }
.pagination .page-link {
    border-radius: 10px;
    border-color: var(--clp-border);
    font-weight: 700;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pagination .page-link:hover {
    background: var(--clp-soft);
    border-color: rgba(22, 48, 122, .3);
}

/* ---- Dark-mode adaptions for the premium form/footer surfaces ---- */
.dark-theme .form-control,
.dark-theme .form--control,
.dark-theme textarea.form-control {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .1);
    color: #f3f4f6;
}
.dark-theme .form-control:focus,
.dark-theme .form--control:focus {
    border-color: rgba(158, 226, 180, .5);
    box-shadow: 0 0 0 4px rgba(27, 168, 76, .16);
}
.dark-theme .label-text,
.dark-theme .form-label { color: #e5e7eb; }
.dark-theme .footer-area { border-top-color: rgba(255, 255, 255, .08); }
.dark-theme .pagination .page-link:hover { background: #26262d; }

/* =====================================================================
   COURSE PREVIEW PAGE (course-details) PREMIUM (2026-07)
   Turns the flat white header into a navy hero with the price/enroll
   card floating over it (Udemy/Coursera-style), and refines every
   content block. Scoped to .breadcrumb-area.pattern-bg (unique to this
   page) + .course-details-area so nothing else is affected.
   ===================================================================== */

/* ---- Header → navy hero (gives the floating card a rich backdrop) ---- */
.breadcrumb-area.pattern-bg {
    background:
        radial-gradient(circle at 88% -10%, rgba(27, 168, 76, .20), transparent 44%),
        radial-gradient(circle at 4% 10%, rgba(244, 206, 10, .10), transparent 34%),
        linear-gradient(140deg, #0a1836 0%, #122560 52%, #16307a 100%) !important;
    padding-top: 58px !important;
    padding-bottom: 132px !important;   /* room for the -100px floating card */
    position: relative;
    z-index: 2;
}
.breadcrumb-area.pattern-bg .section__title { color: #fff; }
.breadcrumb-area.pattern-bg .section__desc,
.breadcrumb-area.pattern-bg p { color: rgba(255, 255, 255, .82) !important; }
.breadcrumb-area.pattern-bg a,
.breadcrumb-area.pattern-bg .text-color,
.breadcrumb-area.pattern-bg .generic-list-item li a { color: #fff !important; }
.breadcrumb-area.pattern-bg .generic-list-item li { color: rgba(255, 255, 255, .7); }
.breadcrumb-area.pattern-bg .hover-underline:hover { text-decoration: underline; }
.breadcrumb-area.pattern-bg .rating-number { color: #f4ce0a; font-weight: 800; }
.breadcrumb-area.pattern-bg .rating-total,
.breadcrumb-area.pattern-bg .student-total { color: rgba(255, 255, 255, .8); }
.breadcrumb-area.pattern-bg .review-stars .la { color: #f4ce0a; }
.breadcrumb-area.pattern-bg .svg-icon-color-gray { fill: rgba(255, 255, 255, .68); }
.breadcrumb-area.pattern-bg .ribbon,
.breadcrumb-area.pattern-bg .ribbon-lg {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}
/* Wishlist / Share / Report → ghost buttons on the dark hero */
.breadcrumb-area.pattern-bg .theme-btn-transparent,
.breadcrumb-area.pattern-bg .btn.theme-btn-transparent {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .34) !important;
    color: #fff !important;
}
.breadcrumb-area.pattern-bg .theme-btn-transparent:hover,
.breadcrumb-area.pattern-bg .btn.theme-btn-transparent:hover {
    background: rgba(255, 255, 255, .18) !important;
    border-color: #fff !important;
}

/* ---- Floating price / enrolment card ---- */
.course-details-area .sidebar .card-item {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    box-shadow: 0 26px 60px -22px rgba(10, 24, 54, .38), 0 2px 6px rgba(16, 24, 40, .06) !important;
    overflow: hidden;
}
.course-details-area .preview-course-video img { border-radius: 12px; }
.course-details-area .preview-course-video-content p { position: relative; z-index: 2; }
.course-details-area .preview-course-feature-content .fs-35 {
    font-size: 40px !important;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--clp-ink) !important;
}
.course-details-area .preview-course-feature-content .theme-btn {
    height: 52px;
    font-size: 16px;
    border-radius: 12px;
}
.course-details-area .preview-course-feature-content .generic-list-item li {
    padding: 9px 0;
    border-bottom: 1px dashed var(--clp-border);
    color: var(--clp-ink);
    margin: 0;
}
.course-details-area .preview-course-feature-content .generic-list-item li:last-child { border-bottom: 0; }
.course-details-area .preview-course-feature-content .generic-list-item li .text-color { color: var(--clp-primary) !important; }

/* ---- Content section cards ---- */
.course-overview-card {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 16px;
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--clp-shadow-sm);
}
.course-overview-card.bg-gray { background: var(--clp-soft) !important; }
.course-overview-card h3 { color: var(--clp-ink); letter-spacing: -.02em; }

/* "What you'll learn" → two-column checklist with brand-green ticks */
.overview-list-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
}
.overview-list-item li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--clp-ink);
    margin: 0;
    line-height: 1.5;
}
.overview-list-item li i {
    color: var(--clp-success) !important;
    margin-top: 2px;
    flex-shrink: 0;
}
@media (max-width: 767px) { .overview-list-item { grid-template-columns: 1fr; } }

/* Course-content accordion */
.generic-accordion .card {
    border: 1px solid var(--clp-border) !important;
    border-radius: 12px !important;
    margin-bottom: 10px;
    box-shadow: none;
    overflow: hidden;
}
.generic-accordion .card-header {
    background: var(--clp-soft);
    border-bottom: 0;
    padding: 0;
}
.generic-accordion .card-header .btn-link {
    width: 100%;
    padding: 15px 18px;
    font-weight: 700;
    color: var(--clp-ink);
    text-decoration: none;
}
.generic-accordion .card-header .btn-link:hover { color: var(--clp-primary); }
.generic-accordion .card-body { padding: 6px 18px 14px; }
.curriculum-duration { color: var(--clp-muted); }
.curriculum-duration strong { color: var(--clp-ink); }

/* ---- Dark mode ---- */
.dark-theme .course-overview-card { background: #1f1f24; border-color: rgba(255, 255, 255, .08); }
.dark-theme .course-overview-card.bg-gray { background: #26262d !important; }
.dark-theme .course-overview-card h3,
.dark-theme .overview-list-item li { color: #f3f4f6; }
.dark-theme .generic-accordion .card { background: #1f1f24; border-color: rgba(255, 255, 255, .08) !important; }
.dark-theme .generic-accordion .card-header { background: #26262d; }
.dark-theme .generic-accordion .card-header .btn-link { color: #f3f4f6; }
.dark-theme .course-details-area .preview-course-feature-content .fs-35 { color: #f3f4f6 !important; }

/* Below 992px the price card no longer floats up (sidebar-negative margin
   resets to 0), so drop the extra hero bottom padding to avoid a navy gap. */
@media (max-width: 991px) {
    .breadcrumb-area.pattern-bg { padding-bottom: 44px !important; }
}

/* =====================================================================
   PREMIUM LESSON PLAYER v2 — tabs, resume, interactive video, Q&A,
   transcript, checkpoints, shortcuts, celebration (2026-07)
   ===================================================================== */
.clp-content-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.clp-cc-form{ flex-shrink:0; }
.clp-cc-btn{ white-space:nowrap; }
.clp-resume-banner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:linear-gradient(120deg, rgba(22,48,122,.08), rgba(27,168,76,.06)); border:1px solid var(--clp-border); border-radius:14px; padding:12px 18px; margin-bottom:16px; font-weight:600; color:var(--clp-ink); }
.clp-resume-actions{ display:flex; gap:8px; }
.clp-chapters{ margin:18px 0 8px; }
.clp-chapters-title{ font-size:15px; font-weight:800; color:var(--clp-ink); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.clp-chapters-title i{ color:var(--clp-primary); }
.clp-chapters-list{ display:flex; flex-direction:column; gap:6px; }
.clp-chapter{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--clp-border); background:#fff; border-radius:10px; padding:10px 14px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.clp-chapter:hover{ border-color:rgba(22,48,122,.35); background:var(--clp-soft); }
.clp-chapter-time{ font-variant-numeric:tabular-nums; font-weight:800; font-size:13px; color:var(--clp-primary); background:rgba(22,48,122,.08); border-radius:6px; padding:3px 8px; flex-shrink:0; }
.clp-chapter-name{ font-weight:600; color:var(--clp-ink); font-size:14.5px; }
.clp-tabs{ display:flex; gap:4px; border-bottom:2px solid var(--clp-border); margin:26px 0 0; overflow-x:auto; }
.clp-tab{ display:inline-flex; align-items:center; gap:7px; border:0; background:none; padding:12px 16px; font-weight:700; font-size:14.5px; color:var(--clp-muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .15s ease, border-color .15s ease; }
.clp-tab:hover{ color:var(--clp-ink); }
.clp-tab.is-active{ color:var(--clp-primary); border-bottom-color:var(--clp-primary); }
.clp-tab-count{ background:rgba(22,48,122,.1); color:var(--clp-primary); font-size:11px; font-weight:800; border-radius:999px; padding:1px 8px; }
.clp-tab-panels{ padding-top:22px; }
.clp-tab-panel{ display:none; }
.clp-tab-panel.is-active{ display:block; animation:clpFade .2s ease; }
@keyframes clpFade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
.clp-qa-ask{ background:#fff; border:1px solid var(--clp-border); border-radius:14px; padding:14px; margin-bottom:20px; }
.clp-qa-ask textarea{ border:0; box-shadow:none; resize:vertical; }
.clp-qa-ask-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.clp-qa-list{ display:flex; flex-direction:column; gap:14px; }
.clp-qa-item{ display:flex; gap:12px; background:#fff; border:1px solid var(--clp-border); border-radius:14px; padding:16px; }
.clp-qa-item.is-resolved{ border-color:rgba(27,168,76,.4); background:rgba(27,168,76,.03); }
.clp-qa-vote{ display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
.clp-vote-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--clp-border); background:#fff; color:var(--clp-muted); cursor:pointer; transition:all .14s ease; }
.clp-vote-btn:hover:not(:disabled){ border-color:var(--clp-primary); color:var(--clp-primary); }
.clp-vote-btn.voted{ background:var(--clp-primary); border-color:var(--clp-primary); color:#fff; }
.clp-vote-btn.sm{ width:28px; height:28px; font-size:12px; }
.clp-vote-count{ font-weight:800; font-size:13px; color:var(--clp-ink); }
.clp-vote-count.sm{ font-size:12px; }
.clp-qa-body{ flex:1; min-width:0; }
.clp-qa-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.clp-qa-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.clp-qa-avatar.sm{ width:28px; height:28px; }
.clp-qa-head strong{ font-size:14px; color:var(--clp-ink); }
.clp-qa-title{ font-weight:700; color:var(--clp-ink); margin:0 0 4px; }
.clp-qa-text{ color:var(--clp-ink); margin:0 0 4px; line-height:1.6; white-space:pre-line; }
.clp-qa-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; }
.clp-qa-tag.instructor{ background:rgba(22,48,122,.1); color:var(--clp-primary); }
.clp-qa-tag.resolved, .clp-qa-tag.accepted{ background:rgba(27,168,76,.12); color:#128a3d; margin-left:auto; }
.clp-qa-answer{ display:flex; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--clp-border); }
.clp-qa-answer.is-accepted{ background:rgba(27,168,76,.05); border-radius:10px; padding:12px; border-top:0; }
.clp-qa-answer-body{ flex:1; min-width:0; }
.clp-qa-reply{ margin-top:12px; }
.clp-qa-reply summary{ cursor:pointer; font-weight:700; font-size:13px; color:var(--clp-primary); list-style:none; }
.clp-qa-reply summary::-webkit-details-marker{ display:none; }
.clp-transcript-search{ position:relative; margin-bottom:14px; }
.clp-transcript-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--clp-muted); }
.clp-transcript-search input{ width:100%; height:44px; border:1px solid var(--clp-border); border-radius:10px; padding:0 14px 0 40px; }
.clp-transcript-cues{ display:flex; flex-direction:column; max-height:520px; overflow-y:auto; }
.clp-cue{ display:flex; gap:12px; text-align:left; border:0; background:none; padding:8px 10px; border-radius:8px; cursor:pointer; }
.clp-cue:hover{ background:var(--clp-soft); }
.clp-cue-time{ font-variant-numeric:tabular-nums; font-weight:700; font-size:12.5px; color:var(--clp-primary); flex-shrink:0; }
.clp-cue-text{ color:var(--clp-ink); line-height:1.55; }
.clp-checkpoint-overlay, .clp-kbd-overlay{ position:fixed; inset:0; z-index:1200; background:rgba(10,24,54,.62); display:flex; align-items:center; justify-content:center; padding:20px; }
.clp-checkpoint-overlay[hidden], .clp-kbd-overlay[hidden]{ display:none; }
.clp-checkpoint-card, .clp-kbd-card{ background:#fff; border-radius:18px; padding:28px; max-width:520px; width:100%; box-shadow:0 30px 70px rgba(3,10,30,.4); }
.clp-checkpoint-eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#b45309; background:rgba(245,158,11,.14); padding:5px 12px; border-radius:999px; }
.clp-checkpoint-q{ font-size:20px; font-weight:800; color:var(--clp-ink); margin:14px 0 18px; line-height:1.35; }
.clp-checkpoint-options{ display:flex; flex-direction:column; gap:10px; }
.clp-checkpoint-opt{ text-align:left; border:1px solid var(--clp-border); background:#fff; border-radius:11px; padding:13px 16px; font-weight:600; color:var(--clp-ink); cursor:pointer; transition:all .14s ease; }
.clp-checkpoint-opt:hover:not(:disabled){ border-color:var(--clp-primary); background:rgba(22,48,122,.03); }
.clp-checkpoint-opt.is-correct{ border-color:#1ba84c; background:rgba(27,168,76,.1); color:#128a3d; }
.clp-checkpoint-opt.is-wrong{ border-color:#e11d48; background:rgba(225,29,72,.08); color:#be123c; }
.clp-checkpoint-feedback{ margin-top:14px; padding:12px 14px; border-radius:10px; font-weight:600; }
.clp-checkpoint-feedback.ok{ background:rgba(27,168,76,.12); color:#128a3d; }
.clp-checkpoint-feedback.no{ background:rgba(225,29,72,.08); color:#be123c; }
.clp-checkpoint-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.clp-kbd-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.clp-kbd-head h4{ font-weight:800; margin:0; }
.clp-kbd-x{ border:0; background:none; font-size:22px; color:var(--clp-muted); cursor:pointer; }
.clp-kbd-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.clp-kbd-list li{ display:flex; align-items:center; gap:12px; }
.clp-kbd-list span{ color:var(--clp-muted); }
.clp-kbd-list kbd{ min-width:30px; text-align:center; display:inline-block; background:var(--clp-soft); border:1px solid var(--clp-border); border-bottom-width:2px; border-radius:7px; padding:3px 8px; font-weight:800; font-size:12.5px; color:var(--clp-ink); font-family:inherit; }
.clp-confetti{ position:fixed; inset:0; z-index:1300; pointer-events:none; overflow:hidden; }
.clp-confetti span{ position:absolute; top:-14px; width:10px; height:14px; border-radius:2px; opacity:.95; animation:clpConfetti linear forwards; }
@keyframes clpConfetti{ to{ transform:translateY(105vh) rotate(720deg); opacity:.9; } }
.clp-celebrate-toast{ position:fixed; right:22px; bottom:22px; z-index:1310; display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--clp-border); border-radius:16px; padding:16px 20px; box-shadow:0 24px 60px rgba(3,10,30,.28); transform:translateY(120%); opacity:0; transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease; max-width:340px; }
.clp-celebrate-toast.show{ transform:none; opacity:1; }
.clp-celebrate-toast i{ font-size:34px; color:#f4ce0a; }
.clp-celebrate-toast strong{ display:block; color:var(--clp-ink); }
.clp-celebrate-toast span{ font-size:13px; color:var(--clp-muted); }
@media (max-width:640px){ .clp-content-head{ flex-direction:column; } .clp-cc-form{ width:100%; } .clp-cc-btn{ width:100%; justify-content:center; } .clp-celebrate-toast{ left:16px; right:16px; max-width:none; } }
.dark-theme .clp-qa-item, .dark-theme .clp-qa-ask, .dark-theme .clp-chapter, .dark-theme .clp-checkpoint-card, .dark-theme .clp-kbd-card, .dark-theme .clp-celebrate-toast{ background:#1f1f24; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-qa-head strong, .dark-theme .clp-qa-text, .dark-theme .clp-qa-title, .dark-theme .clp-cue-text, .dark-theme .clp-chapter-name, .dark-theme .clp-checkpoint-q, .dark-theme .clp-celebrate-toast strong, .dark-theme .clp-vote-count{ color:#f3f4f6; }
.dark-theme .clp-resume-banner{ background:linear-gradient(120deg, rgba(22,48,122,.24), rgba(27,168,76,.14)); color:#f3f4f6; }
.dark-theme .clp-tabs{ border-bottom-color:rgba(255,255,255,.1); }

/* =====================================================================
   COURSE PREVIEW EXTRAS — requirements, FAQ, sticky enroll bar (2026-07)
   ===================================================================== */
.clp-requirements{ list-style:none; margin:0; padding:0; }
.clp-requirements li{ display:flex; gap:10px; align-items:flex-start; color:var(--clp-ink); line-height:1.6; margin-bottom:10px; }
.clp-requirements li i{ color:var(--clp-success); margin-top:4px; flex-shrink:0; }

.clp-faq-item{ border:1px solid var(--clp-border); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.clp-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; background:#fff; border:0; padding:16px 18px; font-weight:700; font-size:15.5px; color:var(--clp-ink); cursor:pointer; }
.clp-faq-q i{ transition:transform .2s ease; color:var(--clp-primary); flex-shrink:0; }
.clp-faq-item.is-open .clp-faq-q i{ transform:rotate(45deg); }
.clp-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.clp-faq-item.is-open .clp-faq-a{ max-height:400px; }
.clp-faq-a p{ margin:0; padding:0 18px 16px; color:var(--clp-muted); line-height:1.7; }

.clp-sticky-enroll{ position:fixed; left:0; right:0; bottom:0; z-index:1050; background:#fff; border-top:1px solid var(--clp-border); box-shadow:0 -8px 30px rgba(16,24,40,.1); transform:translateY(110%); transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.clp-sticky-enroll.show{ transform:none; }
.clp-sticky-enroll-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 15px; }
.clp-sticky-enroll-info{ min-width:0; display:flex; flex-direction:column; }
.clp-sticky-enroll-info strong{ font-size:15px; color:var(--clp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
.clp-sticky-price{ font-size:18px; font-weight:800; color:var(--clp-primary); letter-spacing:-.02em; }
.clp-sticky-enroll .theme-btn{ flex-shrink:0; white-space:nowrap; }

.dark-theme .clp-faq-q, .dark-theme .clp-sticky-enroll{ background:#1f1f24; }
.dark-theme .clp-faq-q, .dark-theme .clp-requirements li, .dark-theme .clp-sticky-enroll-info strong{ color:#f3f4f6; }
.dark-theme .clp-faq-item, .dark-theme .clp-sticky-enroll{ border-color:rgba(255,255,255,.08); }

/* =====================================================================
   LAUNCH POLISH — premium empty states, skeletons, micro-interactions (2026-07)
   ===================================================================== */
.clp-empty{ text-align:center; padding:34px 20px; }
.clp-empty > i:first-child,
.clp-empty .clp-empty-ic{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:rgba(22,48,122,.08); color:var(--clp-primary,#16307a); font-size:32px; margin-bottom:6px; }
.clp-empty h4{ color:var(--clp-ink,#101828); }
.clp-empty p{ max-width:420px; margin-left:auto; margin-right:auto; }
.dark-theme .clp-empty > i:first-child, .dark-theme .clp-empty .clp-empty-ic{ background:rgba(255,255,255,.06); color:#9ec5ff; }

/* Skeleton shimmer (add .clp-skeleton to a block, or .clp-skel-line for text rows) */
.clp-skeleton, .clp-skel-line{ position:relative; overflow:hidden; background:#eef1f6; border-radius:8px; }
.clp-skel-line{ height:12px; margin-bottom:10px; }
.clp-skel-line.w-60{ width:60%; } .clp-skel-line.w-40{ width:40%; } .clp-skel-line.w-80{ width:80%; }
.clp-skeleton::after, .clp-skel-line::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:clpShimmer 1.3s infinite; }
@keyframes clpShimmer{ 100%{ transform:translateX(100%); } }
.dark-theme .clp-skeleton, .dark-theme .clp-skel-line{ background:#26262d; }
.dark-theme .clp-skeleton::after, .dark-theme .clp-skel-line::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }

/* Micro-interactions: gentle rise-in for course cards on first paint */
@media (prefers-reduced-motion: no-preference){
    .clp-course-card{ animation:clpRise .4s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes clpRise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* =====================================================================
   RICH LESSON CONTENT BLOCKS — for AI-generated / authored modules (2026-07)
   Rendered inside .clp-article (lesson Overview tab). DIT-module style.
   ===================================================================== */
.clp-article .clp-concept{ background:var(--clp-soft,#f8f9fb); border:1px solid var(--clp-border,#eaecf0); border-left:4px solid var(--clp-primary,#16307a); border-radius:12px; padding:16px 20px; margin:18px 0; }
.clp-article .clp-concept h4{ margin:0 0 6px; font-size:17px; color:var(--clp-primary,#16307a); }
.clp-article .clp-concept p{ margin:0; }
.clp-article .clp-keyterm{ background:rgba(244,206,10,.1); border:1px solid rgba(244,206,10,.35); border-radius:10px; padding:12px 16px; margin:14px 0; font-size:15.5px; }
.clp-article .clp-keyterm strong{ color:var(--clp-ink,#101828); }
.clp-article .clp-activity{ background:rgba(27,168,76,.07); border:1px solid rgba(27,168,76,.3); border-radius:12px; padding:16px 20px; margin:18px 0; }
.clp-article .clp-activity strong{ display:block; color:#128a3d; margin-bottom:4px; }
.clp-article .clp-activity p{ margin:0; }
.clp-article .clp-callout{ background:rgba(22,48,122,.05); border:1px solid var(--clp-border,#eaecf0); border-radius:12px; padding:16px 20px; margin:18px 0; }
.clp-article .clp-callout strong{ display:block; color:var(--clp-primary,#16307a); margin-bottom:4px; }
.clp-article .clp-callout p{ margin:0; }
.dark-theme .clp-article .clp-concept{ background:#26262d; border-color:rgba(255,255,255,.08); border-left-color:#5b8cff; }
.dark-theme .clp-article .clp-concept h4{ color:#9ec5ff; }
.dark-theme .clp-article .clp-keyterm, .dark-theme .clp-article .clp-callout{ background:#26262d; border-color:rgba(255,255,255,.08); }
.dark-theme .clp-article .clp-activity{ background:rgba(27,168,76,.12); border-color:rgba(27,168,76,.3); }

/* ============================================================
   UI/UX AUDIT ROUND 2 — a11y skip link + hero animation pause
   ============================================================ */
/* Skip-to-content link: visually hidden until keyboard-focused */
.clp-skip-link{
  position:absolute;left:12px;top:-64px;z-index:2000;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:10px 18px;border-radius:0 0 10px 10px;
  background:var(--clp-navy,#16307a);color:#fff !important;
  font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 8px 24px rgba(15,34,87,.28);
  transition:top .18s ease;
}
.clp-skip-link:focus{top:0;outline:3px solid var(--clp-yellow,#f4ce0a);outline-offset:2px;}
#main-content:focus{outline:none;}

/* Pause the ambient hero orbs/grid when the hero scrolls out of view
   (set by IntersectionObserver on the homepage). Reclaims compositor
   time + battery on mobile. */
.clp-hero-fx.clp-fx-paused .clp-orb,
.clp-hero-fx.clp-fx-paused .clp-hero-grid,
.clp-hero-fx.clp-fx-paused .clp-hero-video{
  animation-play-state:paused !important;
}

/* ============================================================
   UI/UX AUDIT — global keyboard-focus visibility (WCAG 2.4.7)
   A single, consistent focus ring for EVERY interactive element,
   shown only for keyboard users (:focus-visible), never on mouse.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.clp-chip:focus-visible,
.wishlist-icon:focus-visible,
.theme-picker-btn:focus-visible,
.search-toggle:focus-visible,
.dropdown-item:focus-visible,
#scroll-top:focus-visible {
  outline: 3px solid var(--clp-info, #3878ff) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* On dark/navy surfaces, use the yellow accent so the ring stays visible. */
.clp-shell a:focus-visible,
.clp-shell button:focus-visible,
.clp-auth-hero a:focus-visible,
.clp-cta a:focus-visible,
.clp-cta button:focus-visible,
.dark-theme a:focus-visible,
.dark-theme button:focus-visible,
.dark-theme input:focus-visible,
.dark-theme select:focus-visible,
.dark-theme textarea:focus-visible {
  outline-color: var(--clp-yellow, #f4ce0a) !important;
}
/* Remove the legacy outline:none that some resets apply on :focus,
   but keep it for mouse focus (only :focus-visible shows the ring). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }