/**
 * Help Centre glass — site-wide (load last on frontend).
 * Matches .hc-glass on /help-centre FAQ cards.
 */

body.frontend-page {
    background-color: #eef2f7 !important;
    --lms-hc-radius: 22px;
    --lms-glass-border: rgba(15, 23, 42, 0.09);
    --lms-glass-border-hover: rgba(15, 23, 42, 0.16);
    --lms-glass-inset: rgba(15, 23, 42, 0.04);
    --lms-hc-heading: #0f172a;
    --lms-hc-icon: #0f172a;
    --lms-hc-text: #1e293b;
    --lms-hc-muted: rgba(45, 38, 64, 0.58);
    --lms-hc-accent: #6c4dff;
    --lms-hc-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
    --lms-hc-tile: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(15, 23, 42, 0.04));
    --lms-hc-shadow:
        0 8px 28px rgba(15, 17, 24, 0.06),
        0 2px 8px rgba(15, 17, 24, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 var(--lms-glass-inset);
    --lms-hc-shadow-hover:
        0 12px 32px rgba(15, 17, 24, 0.1),
        0 3px 10px rgba(15, 17, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(15, 17, 24, 0.1);
}

/* ---- Section heading color (typography: portal-typography.css — Calibri italic) ---- */
body.frontend-page main.main-content h2:not(.home-trust-title):not(.tutor-title):not(.learn-current-lesson-title),
body.frontend-page main.main-content .section-title,
body.frontend-page .hc-shell .hc-page h2.hc-section-title {
    color: var(--lms-hc-heading) !important;
    text-shadow: none !important;
}

body.frontend-page .section-badge,
body.frontend-page .hc-section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--lms-hc-heading) !important;
    border: 1px solid var(--lms-glass-border) !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 999px !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 0.4rem !important;
}

/* ---- Core glass surface (FAQ card = this block) ---- */
body.frontend-page .lms-hc-glass,
body.frontend-page .hc-glass,
body.frontend-page nav.lms-chrome-navbar.lms-storefront-glass,
body.frontend-page footer.professional-footer.dynamic-footer .footer-newsletter-card.lms-storefront-glass,
body.frontend-page main.main-content :is(
    .feature-card,
    .course-card,
    .category-card,
    .newsletter-card,
    .step-card,
    .tutor-cta-content.lms-hc-glass,
    .tl-card,
    .ac-card,
    .ac-filter-card,
    .wb-card,
    .bc-card,
    .ct-channel-card,
    .ct-form-panel,
    .hc-policy-card,
    .hc-action-card,
    .hc-accordion-item.hc-glass
) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)) !important;
    border: 1px solid var(--lms-glass-border) !important;
    border-radius: var(--lms-hc-radius) !important;
    box-shadow:
        0 8px 28px rgba(15, 17, 24, 0.06),
        0 2px 8px rgba(15, 17, 24, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 var(--lms-glass-inset) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
    backdrop-filter: blur(10px) saturate(1.2) !important;
}

body.frontend-page nav.lms-chrome-navbar.lms-storefront-glass,
body.frontend-page footer.professional-footer.dynamic-footer .footer-newsletter-card.lms-storefront-glass {
    border-radius: var(--lms-chrome-radius, 16px) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.frontend-page .lms-hc-glass,
    body.frontend-page .hc-glass,
    body.frontend-page main.main-content :is(.feature-card, .course-card, .category-card) {
        background: rgba(255, 255, 255, 0.96) !important;
    }
}

/* Hover — Help Centre action card */
body.frontend-page main.main-content :is(
    a.category-card,
    a.hc-policy-card,
    a.hc-action-card,
    .feature-card,
    .course-card,
    .category-card,
    .newsletter-card,
    .step-card,
    .tl-card,
    .ac-card,
    .wb-card,
    .bc-card,
    .hc-policy-card
):hover {
    border-color: var(--lms-glass-border-hover) !important;
    box-shadow:
        0 12px 32px rgba(15, 17, 24, 0.1),
        0 3px 10px rgba(15, 17, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(15, 17, 24, 0.1) !important;
}

/* Remove homepage decorative layers that hide glass */
body.frontend-page main.main-content .feature-card::before,
body.frontend-page main.main-content .feature-background,
body.frontend-page main.main-content .feature-pattern {
    display: none !important;
}

/* Icon tiles — FAQ .hc-acc-icon style */
body.frontend-page main.main-content :is(
    .feature-icon,
    .step-icon,
    .category-icon,
    .hc-action-icon,
    .hc-acc-icon,
    .hc-policy-card-icon,
    .ct-channel-icon,
    .ct-form-head-icon
),
body.frontend-page main.main-content [class*="feature-card-"] .feature-icon {
    color: var(--lms-hc-heading) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(15, 23, 42, 0.04)) !important;
    border: 1px solid var(--lms-glass-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.frontend-page main.main-content .hc-acc-icon,
body.frontend-page main.main-content .feature-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
}

body.frontend-page main.main-content :is(
    .feature-title,
    .course-card .course-title,
    .course-card .course-title a,
    .category-card .category-title,
    .newsletter-card .newsletter-title,
    .newsletter-card .newsletter-title a,
    .step-title,
    .tl-card-name,
    .tl-card-name a,
    .ac-card-title,
    .ac-card-title a,
    .hc-acc-title
) {
    color: var(--lms-hc-heading) !important;
    font-weight: 700 !important;
}

body.frontend-page main.main-content :is(
    .feature-description,
    .course-card .course-description,
    .category-card .category-description,
    .newsletter-card .newsletter-excerpt,
    .step-description,
    .tl-card-bio,
    .ac-card-desc,
    .hc-section-desc,
    .hc-action-card .small,
    .section-description
) {
    color: var(--lms-hc-muted) !important;
}

/* Nav links */
body.frontend-page nav.lms-chrome-navbar .navbar-collapse > .navbar-nav:first-of-type .nav-link {
    color: var(--lms-hc-heading) !important;
    font-weight: 600 !important;
}

body.frontend-page nav.lms-chrome-navbar .navbar-collapse > .navbar-nav:first-of-type .nav-link:hover,
body.frontend-page nav.lms-chrome-navbar .navbar-collapse > .navbar-nav:first-of-type .nav-link:focus {
    color: var(--lms-hc-heading) !important;
    background: rgba(15, 23, 42, 0.06) !important;
}

/* Sections on #eef2f7 */
body.frontend-page main.main-content section:is(
    .features-section,
    .featured-courses-section,
    .categories-section,
    .newsletter-posts-section,
    .newsletter-section,
    .newsletter-featured,
    .newsletter-main,
    .how-it-works-section,
    .tutor-cta-section,
    .home-trust-section,
    .blog-section,
    .course-content,
    .related-courses,
    .page-cbc,
    .filters-section
) {
    background: transparent !important;
}

body.frontend-page .tutor-cta-content.lms-hc-glass {
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem) !important;
}

/* Footer shell */
body.frontend-page footer.professional-footer.dynamic-footer {
    background: #eef2f7 !important;
}

body.frontend-page footer.professional-footer.dynamic-footer::before {
    display: none !important;
}

body.frontend-page footer.professional-footer.dynamic-footer .footer-newsletter {
    background: transparent !important;
    border-bottom: none !important;
}

body.frontend-page footer.professional-footer.dynamic-footer .footer-dark-panel-inner.lms-storefront-glass {
    border: 1px solid var(--lms-glass-border) !important;
    box-shadow:
        0 8px 28px rgba(15, 17, 24, 0.08),
        0 2px 8px rgba(15, 17, 24, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

body.frontend-page footer.professional-footer.dynamic-footer .footer-newsletter-form .footer-newsletter-email.lms-storefront-glass-control {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65)) !important;
    border: 1px solid var(--lms-glass-border) !important;
    box-shadow:
        0 2px 8px rgba(15, 17, 24, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 var(--lms-glass-inset) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
    backdrop-filter: blur(10px) saturate(1.2) !important;
}

body.frontend-page footer.professional-footer.dynamic-footer .footer-newsletter-form .footer-newsletter-submit.lms-storefront-glass-control {
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    box-shadow:
        0 8px 22px rgba(15, 17, 24, 0.1),
        0 2px 8px rgba(15, 17, 24, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(15, 23, 42, 0.15) !important;
}

/* ================================================================
   SITE-WIDE COVERAGE
   Every remaining storefront page (legal, blog, checkout, course
   detail, tutor profile, discussions, quizzes, wishlist, company
   storefront…) gets the same Help Centre surface, border, radius,
   shadow, dark icon tile and text colours as /help-centre.
   ================================================================ */

/* ---- Page canvases: drop per-page washes, keep the shared #eef2f7 ---- */
body.frontend-page main.main-content :is(
    .legal-wrap,
    .blog-section,
    .blog-article,
    .blog-sidebar,
    .about-section,
    .faq-section,
    .content-section,
    .achievements-section,
    .categories-section,
    .checkout-page,
    .checkout-success-body,
    .discussions-page,
    .discussion-show-page,
    .create-discussion-page,
    .tutor-profile-page,
    .tutor-registration-page,
    .affiliate-page,
    .verification-page,
    .wbx-page,
    .bc-show-page,
    .page-cbc,
    .quiz-container,
    .newsletter-posts-section,
    .newsletter-featured,
    .newsletter-main,
    .related-courses,
    .course-content,
    .filters-section
) {
    background: transparent !important;
}

body.frontend-page main.main-content .filters-section {
    border-bottom: none !important;
}

/* ---- Glass surfaces ---- */
body.frontend-page main.main-content :is(
    .card,
    .about-card,
    .about-highlight-card,
    .about-principle-card,
    .actions-card,
    .answer-card,
    .attempt-card,
    .benefit-card,
    .blog-card,
    .cbc-card,
    .cbc-empty-card,
    .cbc-other-card,
    .certificate-card,
    .checkout-billing-card,
    .checkout-purchase-info-card,
    .checkout-success-card,
    .checkout-success-panel,
    .content-card,
    .course-purchase-info__card,
    .course-purchase-info__panel,
    .dashboard-card,
    .detail-card,
    .discussion-card,
    .filter-card,
    .floating-card,
    .form-card,
    .info-card,
    .instructor-card,
    .learn-completion-card,
    .legal-card,
    .legal-info-card,
    .legal-toc,
    .lesson-summary-card,
    .newsletter-featured-card,
    .newsletter-post-card,
    .newsletter-subscription-card,
    .payout-card,
    .paypal-card,
    .question-card,
    .quiz-info-card,
    .recent-posts-card,
    .referral-link-card,
    .related-card,
    .reply-card,
    .section-card,
    .sidebar-card,
    .stat-card,
    .stats-card,
    .status-card,
    .summary-card,
    .tags-card,
    .tl-filter-card,
    .toc-card,
    .tp-main-card,
    .tp-mode-card,
    .tp-sidebar-card,
    .ts-help-card,
    .ts-panel,
    .wb-empty-panel,
    .wbx-panel,
    .wl-card,
    .empty-state,
    .accordion-item
):not(.dl-assistant-card):not([class*="bg-"]):not([class*="text-white"]) {
    /* No backdrop-filter here: the canvas is flat, and blurring every card on
       long pages (course detail, legal) stalls compositing. */
    background: var(--lms-hc-surface) !important;
    border: 1px solid var(--lms-glass-border) !important;
    border-radius: var(--lms-hc-radius) !important;
    box-shadow: var(--lms-hc-shadow) !important;
}

/* Cards with edge-to-edge media need the radius clipped */
body.frontend-page main.main-content :is(
    .blog-card,
    .cbc-card,
    .certificate-card,
    .newsletter-featured-card,
    .newsletter-post-card,
    .related-card,
    .wl-card
) {
    overflow: hidden;
}

/* Standalone breadcrumb bars float on the canvas, like the Help Centre hero */
body.frontend-page main.main-content :is(nav.seo-breadcrumb-bar, .seo-breadcrumb-light) {
    background: transparent !important;
    border-bottom: none !important;
}

/* Bootstrap cards: keep inner corners (images, headers) on the new radius */
body.frontend-page main.main-content .card {
    --bs-card-bg: transparent;
    --bs-card-border-color: var(--lms-glass-border);
    --bs-card-border-radius: var(--lms-hc-radius);
    --bs-card-inner-border-radius: calc(var(--lms-hc-radius) - 1px);
}

body.frontend-page main.main-content :is(.card-header, .card-footer):not([class*="bg-"]) {
    background: rgba(15, 23, 42, 0.03) !important;
    border-color: var(--lms-glass-border) !important;
    color: var(--lms-hc-heading) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.frontend-page main.main-content :is(.card, .legal-card, .sidebar-card, .blog-card, .stat-card, .info-card) {
        background: rgba(255, 255, 255, 0.96) !important;
    }
}

/* ---- Hover lift ---- */
body.frontend-page main.main-content :is(
    a.blog-card,
    a.cbc-card,
    a.cbc-other-card,
    a.related-card,
    a.wl-card,
    .blog-card,
    .cbc-card,
    .cbc-other-card,
    .benefit-card,
    .about-card,
    .about-principle-card,
    .info-card,
    .stat-card,
    .discussion-card,
    .newsletter-post-card,
    .related-card,
    .wl-card,
    .tp-mode-card,
    .certificate-card
):hover {
    border-color: var(--lms-glass-border-hover) !important;
    box-shadow: var(--lms-hc-shadow-hover) !important;
}

/* ---- Shadow utilities used outside the card list ---- */
body.frontend-page main.main-content :is(.shadow-sm, .shadow, .shadow-lg) {
    box-shadow: var(--lms-hc-shadow) !important;
}

/* ---- Icon tiles — dark glyph on the Help Centre tile ---- */
body.frontend-page main.main-content :is(
    .about-card-icon,
    .about-highlight-icon,
    .benefit-icon,
    .cbc-empty-icon,
    .cbc-other-icon,
    .checkout-success-step-icon,
    .empty-icon,
    .empty-state-icon,
    .faq-icon,
    .info-icon,
    .learn-completion-card__icon,
    .legal-info-icon,
    .newsletter-empty-icon,
    .quiz-icon,
    .section-icon,
    .stat-icon,
    .status-icon,
    .tl-empty-icon,
    .tp-age-icon,
    .tp-mode-icon,
    .visual-newsletter-icon,
    .wb-empty-icon,
    .wl-empty-icon
) {
    color: var(--lms-hc-icon) !important;
    -webkit-text-fill-color: var(--lms-hc-icon) !important;
    background: var(--lms-hc-tile) !important;
    border: 1px solid var(--lms-glass-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* The glyph inside a tile inherits the tile colour */
body.frontend-page main.main-content :is(
    .about-card-icon,
    .about-highlight-icon,
    .benefit-icon,
    .category-icon,
    .cbc-empty-icon,
    .cbc-other-icon,
    .checkout-success-step-icon,
    .ct-channel-icon,
    .ct-form-head-icon,
    .empty-icon,
    .empty-state-icon,
    .faq-icon,
    .feature-icon,
    .hc-acc-icon,
    .hc-action-icon,
    .hc-policy-card-icon,
    .info-icon,
    .learn-completion-card__icon,
    .legal-info-icon,
    .newsletter-empty-icon,
    .quiz-icon,
    .section-icon,
    .stat-icon,
    .status-icon,
    .step-icon,
    .tl-empty-icon,
    .tp-age-icon,
    .tp-mode-icon,
    .visual-newsletter-icon,
    .wb-empty-icon,
    .wl-empty-icon
) :is(i, svg),
body.frontend-page main.main-content :is(
    .about-card-icon,
    .about-highlight-icon,
    .benefit-icon,
    .category-icon,
    .cbc-empty-icon,
    .cbc-other-icon,
    .checkout-success-step-icon,
    .ct-channel-icon,
    .ct-form-head-icon,
    .empty-icon,
    .empty-state-icon,
    .faq-icon,
    .feature-icon,
    .hc-acc-icon,
    .hc-action-icon,
    .hc-policy-card-icon,
    .info-icon,
    .learn-completion-card__icon,
    .legal-info-icon,
    .newsletter-empty-icon,
    .quiz-icon,
    .section-icon,
    .stat-icon,
    .status-icon,
    .step-icon,
    .tl-empty-icon,
    .tp-age-icon,
    .tp-mode-icon,
    .visual-newsletter-icon,
    .wb-empty-icon,
    .wl-empty-icon
) i::before {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

/* Icons that live on a dark hero stay light */
body.frontend-page main.main-content :is(
    .page-header,
    .article-header,
    .discussions-header,
    .checkout-success-hero,
    .hero-section,
    .tp-hero,
    .wbx-hero,
    .bc-show-hero,
    .ct-hero,
    .bc-hero,
    .wb-hero,
    .ac-hero,
    .tl-hero,
    .hc-hero,
    .ab-hero,
    .ts-page-hero,
    .compact-dashboard-header
) :is(
    .about-card-icon,
    .about-highlight-icon,
    .benefit-icon,
    .cbc-hero-icon,
    .cbc-other-icon,
    .category-icon,
    .empty-icon,
    .faq-icon,
    .feature-icon,
    .info-icon,
    .section-icon,
    .stat-icon,
    .status-icon,
    .step-icon,
    .tp-mode-icon
) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

/* ---- Text colours inside the glass ---- */
body.frontend-page main.main-content :is(
    .legal-card,
    .legal-info-card,
    .legal-toc,
    .sidebar-card,
    .info-card,
    .benefit-card,
    .stat-card,
    .section-card,
    .content-card,
    .dashboard-card,
    .summary-card,
    .blog-card,
    .discussion-card,
    .quiz-info-card,
    .wbx-content-card,
    .tp-main-card,
    .tp-sidebar-card,
    .about-card,
    .about-principle-card
) :is(h1, h2, h3, h4, h5, h6, strong, .card-title) {
    color: var(--lms-hc-heading) !important;
    text-shadow: none !important;
}

body.frontend-page main.main-content :is(
    .legal-card,
    .legal-info-card,
    .sidebar-card,
    .info-card,
    .benefit-card,
    .section-card,
    .content-card,
    .blog-card,
    .discussion-card,
    .quiz-info-card,
    .about-card,
    .about-principle-card
) :is(p, li, .card-text, .text-muted, small) {
    color: var(--lms-hc-muted) !important;
}

body.frontend-page main.main-content :is(.legal-card, .legal-toc) a:not(.btn) {
    color: var(--lms-hc-accent) !important;
}

/* ---- Form controls — glass, same border/shadow language ---- */
body.frontend-page main.main-content :is(.form-control, .form-select, .input-group-text) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)) !important;
    border: 1px solid var(--lms-glass-border) !important;
    border-radius: 12px !important;
    color: var(--lms-hc-text) !important;
    box-shadow:
        0 2px 8px rgba(15, 17, 24, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 var(--lms-glass-inset) !important;
}

body.frontend-page main.main-content :is(.form-control, .form-select):focus {
    border-color: var(--lms-glass-border-hover) !important;
    box-shadow:
        0 0 0 3px rgba(108, 77, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

body.frontend-page main.main-content .input-group > :is(.form-control, .form-select):not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.frontend-page main.main-content .input-group > :is(.form-control, .form-select, .input-group-text, .btn):not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ---- Accordions (FAQ blocks outside Help Centre) ---- */
body.frontend-page main.main-content .accordion-item {
    overflow: hidden;
}

body.frontend-page main.main-content .accordion-button {
    background: transparent !important;
    color: var(--lms-hc-text) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

body.frontend-page main.main-content .accordion-button:not(.collapsed) {
    background: rgba(15, 23, 42, 0.04) !important;
}

body.frontend-page main.main-content .accordion-body {
    color: var(--lms-hc-muted) !important;
}

/* ---- Tables inside glass panels ---- */
body.frontend-page main.main-content .table {
    --bs-table-bg: transparent;
    color: var(--lms-hc-text);
}

body.frontend-page main.main-content .table > :not(caption) > * > * {
    border-color: var(--lms-glass-border) !important;
}

body.frontend-page main.main-content .table > thead th {
    color: var(--lms-hc-heading) !important;
    background: rgba(15, 23, 42, 0.03) !important;
}

/* ================================================================
   FINISH LAYER — beats premium-redesign + per-page @push styles
   (loaded last in layout; higher specificity where needed)
   ================================================================ */

/* Shared glass surface (Help Centre FAQ card) */
body.frontend-page main.main-content :is(
    .feature-card,
    .features-carousel-track .feature-card,
    .course-card,
    .category-card,
    .categories-carousel-track .category-card,
    .categories-explore-page .category-card,
    .step-card,
    .newsletter-card,
    .newsletter-featured-card,
    .newsletter-post-card,
    .floating-card,
    .course-purchase-info,
    .course-purchase-info__card,
    .course-purchase-info__panel,
    .sidebar-card,
    .tags-card,
    .recent-posts-card,
    .stats-card,
    .instructor-card,
    .blog-card,
    .cbc-card,
    .wl-card,
    .tp-main-card,
    .tp-sidebar-card,
    .discussion-card,
    .filter-card,
    .form-card,
    .dashboard-card,
    .content-card,
    .detail-card,
    .stat-card,
    .info-card,
    .benefit-card,
    .legal-card,
    .legal-toc,
    .card:not([class*="bg-"]):not(.dl-assistant-card)
) {
    background: var(--lms-hc-surface) !important;
    border: 1px solid var(--lms-glass-border) !important;
    border-radius: var(--lms-hc-radius) !important;
    box-shadow: var(--lms-hc-shadow) !important;
}

body.frontend-page main.main-content :is(
    a.category-card,
    a.blog-card,
    a.cbc-card,
    a.wl-card,
    .feature-card,
    .features-carousel-track .feature-card,
    .course-card,
    .category-card,
    .categories-carousel-track .category-card,
    .step-card,
    .newsletter-card,
    .newsletter-featured-card,
    .newsletter-post-card,
    .floating-card,
    .instructor-card,
    .cbc-card,
    .blog-card,
    .wl-card
):hover {
    border-color: var(--lms-glass-border-hover) !important;
    box-shadow: var(--lms-hc-shadow-hover) !important;
}

/* Course detail — inline white cards in @push styles */
body.frontend-page main.main-content .course-content .main-content .content-section,
body.frontend-page .course-content .main-content .content-section {
    background: var(--lms-hc-surface) !important;
    border: 1px solid var(--lms-glass-border) !important;
    border-radius: var(--lms-hc-radius) !important;
    box-shadow: var(--lms-hc-shadow) !important;
}

body.frontend-page main.main-content .course-content .main-content .instructor-card,
body.frontend-page .course-content .main-content .instructor-card {
    background: var(--lms-hc-surface) !important;
    border: 1px solid var(--lms-glass-border) !important;
    border-radius: var(--lms-hc-radius) !important;
    box-shadow: var(--lms-hc-shadow) !important;
}

body.frontend-page main.main-content .course-content .main-content .curriculum-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.45)) !important;
    border: 1px solid var(--lms-glass-border) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* Icons on light cards — dark tile (not purple gradient) */
body.frontend-page main.main-content :is(
    .category-card .category-icon,
    .categories-carousel-track .category-icon,
    .categories-explore-page .category-icon,
    .step-card .step-icon,
    .feature-card .feature-icon
) {
    background: var(--lms-hc-tile) !important;
    border: 1px solid var(--lms-glass-border) !important;
    color: var(--lms-hc-icon) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.frontend-page main.main-content :is(
    .category-card .category-icon,
    .categories-carousel-track .category-icon,
    .categories-explore-page .category-icon,
    .step-card .step-icon,
    .feature-card .feature-icon
) :is(i, svg),
body.frontend-page main.main-content :is(
    .category-card .category-icon,
    .categories-carousel-track .category-icon,
    .categories-explore-page .category-icon,
    .step-card .step-icon,
    .feature-card .feature-icon
) i::before {
    color: var(--lms-hc-icon) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Premium section-badge → Help Centre pill */
body.frontend-page main.main-content .section-badge {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--lms-hc-heading) !important;
    border: 1px solid var(--lms-glass-border) !important;
}

body.frontend-page main.main-content .section-badge :is(i, svg) {
    color: var(--lms-hc-icon) !important;
}