/* Shared components: keep every surface light and every blue surface readable. */
:where(h1, h2, h3, h4, h5, h6, strong, b, label, th) {
    color: var(--text-primary);
}

:where(p, small, em, .muted, .help-text, .form-hint, .eyebrow) {
    color: var(--text-secondary);
}

:where(a) {
    color: var(--primary);
}

:where(a:hover) {
    color: var(--primary-light);
}

:where(.topbar,
    .navbar,
    .panel-topbar,
    .watch-topbar,
    .dashboard-section-tabs) {
    color: var(--text-primary);
    border-color: var(--border);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-sm);
}

:where(.card,
    .course-card,
    .course-card-pro,
    .service-card,
    .learning-course-card,
    .learning-card,
    .admin-table-card,
    .admin-form-section,
    .admin-overview-card,
    .admin-report-card,
    .admin-feed-card,
    .admin-quick-panel,
    .admin-health-panel,
    .stat-card,
    .admin-metric-card,
    .customer-command-card,
    .customer-consultation-card,
    .studio-card,
    .modal-panel,
    .chatbot-panel,
    .profile-card,
    .profile-section,
    .settings-card,
    .order-summary-card,
    .empty-state) {
    color: var(--text-primary);
    border-color: var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
}

:where(.hero,
    .page-hero,
    .admin-hero,
    .cta,
    .course-final-cta,
    .value-system-section,
    .customer-command-card) {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
    background: var(--surface-gradient);
    box-shadow: var(--shadow-md);
}

:where(.hero,
    .page-hero,
    .admin-hero,
    .cta,
    .course-final-cta,
    .value-system-section,
    .customer-command-card) :where(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--primary);
}

:where(.hero,
    .page-hero,
    .admin-hero,
    .cta,
    .course-final-cta,
    .value-system-section,
    .customer-command-card).u-blue-surface :where(h1, h2, h3, h4, h5, h6, strong, b),
:where(.hero,
    .page-hero,
    .admin-hero,
    .cta,
    .course-final-cta,
    .value-system-section,
    .customer-command-card).is-blue-surface :where(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--on-primary);
}

body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) :where(h1, h2, h3, h4, h5, h6, strong, b) {
    color: #FFFFFF;
}

body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) h1 {
    font-size: clamp(42px, 6.4vw, 72px);
    line-height: 1.08;
    font-weight: 900;
    text-shadow: 0 14px 34px rgba(15, 23, 42, .28);
}

body:not(.panel-body) .page-hero h1 {
    font-size: clamp(38px, 5.4vw, 64px);
}

body:not(.panel-body) .courses-hero h1 {
    font-size: clamp(40px, 5.8vw, 68px);
}

body:not(.panel-body) .contact-panel {
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    background:
        radial-gradient(circle at 12% 10%, rgba(0, 68, 255, .10), transparent 260px),
        linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    box-shadow: var(--shadow-md);
}

body:not(.panel-body) .contact-panel .eyebrow {
    color: var(--primary);
}

body:not(.panel-body) .contact-panel h2 {
    color: var(--primary);
}

body:not(.panel-body) .contact-panel p {
    color: var(--text-secondary);
}

body:not(.panel-body) .contact-panel .check-list li {
    color: var(--text-primary);
}

body:not(.panel-body) .contact-panel .check-list li::before {
    color: #FFFFFF;
    background: var(--button-gradient, var(--primary-gradient));
    box-shadow: 0 0 0 4px rgba(0, 68, 255, .08);
}

body:not(.panel-body) .contact-info-card {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
    background:
        radial-gradient(circle at 88% 8%, rgba(0, 68, 255, .10), transparent 250px),
        linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    box-shadow: var(--shadow-md);
}

body:not(.panel-body) .contact-info-card :where(.section-title h2, .contact-channel-list strong, .contact-social-block strong, .contact-highlights p) {
    color: var(--primary);
}

body:not(.panel-body) .contact-info-card :where(.section-title p:not(.eyebrow), .contact-channel-list span) {
    color: var(--text-secondary);
}

body:not(.panel-body) .contact-info-card .eyebrow {
    color: var(--primary);
}

body:not(.panel-body) .contact-info-card .contact-channel-list li,
body:not(.panel-body) .contact-info-card .contact-highlights,
body:not(.panel-body) .contact-social-block {
    border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
    background: rgba(255, 255, 255, .78);
}

body:not(.panel-body) .contact-info-card :where(.contact-channel-list a, .contact-channel-list strong) {
    color: var(--primary);
}

body:not(.panel-body) .contact-info-card .check-list li {
    color: var(--text-primary);
}

body:not(.panel-body) .contact-info-card .check-list li::before {
    color: #FFFFFF;
    background: var(--button-gradient, var(--primary-gradient));
}

body:not(.panel-body) .contact-info-card .contact-social-link {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
    background: #FFFFFF;
}

body:not(.panel-body) .contact-info-card .contact-social-link:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: var(--primary-soft);
}

body:not(.panel-body) .contact-info-card .contact-social-icon {
    color: #FFFFFF;
    background: var(--button-gradient, var(--primary-gradient));
}

body:not(.panel-body) .contact-process-grid article > span {
    color: #FFFFFF;
    background: var(--button-gradient, var(--primary-gradient));
    box-shadow: var(--button-shadow, 0 16px 34px rgba(0, 68, 255, .20));
}

body:not(.panel-body) .trust-list.trust-list-horizontal article {
    color: #FFFFFF;
    border-color: rgba(219, 234, 254, .58);
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .22), transparent 220px),
        var(--button-gradient, var(--primary-gradient));
    box-shadow: var(--button-shadow, 0 16px 34px rgba(0, 68, 255, .20));
}

body:not(.panel-body) .trust-list.trust-list-horizontal article :where(span, strong, p) {
    color: #FFFFFF;
}

body:not(.panel-body) .trust-list.trust-list-horizontal article span {
    width: 48px;
    height: 48px;
    color: #FFFFFF;
    border: 1px solid rgba(219, 234, 254, .72);
    background: rgba(255, 255, 255, .20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 10px 24px rgba(0, 33, 122, .16);
    backdrop-filter: blur(10px);
}

:where(.hero,
    .page-hero,
    .admin-hero,
    .cta,
    .course-final-cta,
    .value-system-section,
    .customer-command-card) :where(p, small, li, em) {
    color: var(--text-secondary);
}

:where(.btn,
    .btn-primary,
    .btn-outline,
    .btn-muted,
    .nav-cta,
    button,
    input,
    select,
    textarea) {
    border-radius: var(--radius-sm);
}

:where(.btn-primary,
    .nav-cta,
    .back-to-top,
    .chatbot-toggle,
    .chatbot-form button,
    .source-player-main) {
    color: var(--on-primary);
    border-color: var(--primary);
    background: var(--button-gradient, var(--primary-gradient));
    box-shadow: var(--button-shadow, var(--shadow-primary));
}

.btn-primary,
.nav-cta,
.back-to-top,
.chatbot-toggle,
.chatbot-form button,
.watch-shell .btn-primary,
.source-player-main {
    color: var(--on-primary) !important;
    border-color: var(--primary) !important;
    background: var(--button-gradient, var(--primary-gradient)) !important;
    box-shadow: var(--button-shadow, var(--shadow-primary)) !important;
}

:where(.btn-primary,
    .nav-cta,
    .back-to-top,
    .chatbot-toggle,
    .chatbot-form button,
    .source-player-main) :where(span, strong, small, em, b, svg, path) {
    color: var(--on-primary);
    stroke: currentColor;
}

:where(.btn-primary:hover,
    .nav-cta:hover,
    .back-to-top:hover,
    .chatbot-toggle:hover,
    .chatbot-form button:hover,
    .source-player-main:hover) {
    color: var(--on-primary);
    border-color: var(--primary);
    background: var(--button-gradient-hover, var(--primary-gradient));
    box-shadow: var(--button-shadow-hover, var(--shadow-primary));
}

.btn-primary:hover,
.btn-primary:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible,
.chatbot-toggle:hover,
.chatbot-toggle:focus-visible,
.chatbot-form button:hover,
.chatbot-form button:focus-visible,
.watch-shell .btn-primary:hover,
.watch-shell .btn-primary:focus-visible,
.source-player-main:hover,
.source-player-main:focus-visible {
    color: var(--on-primary) !important;
    border-color: var(--primary) !important;
    background: var(--button-gradient-hover, var(--primary-gradient)) !important;
    box-shadow: var(--button-shadow-hover, var(--shadow-primary)) !important;
}

:where(.btn-outline,
    .btn-muted,
    .text-link,
    .nav-links a,
    .dropdown-toggle) {
    color: var(--primary);
    border-color: var(--border);
    background: var(--surface-elevated);
    box-shadow: none;
}

body:not(.panel-body) .navbar .nav-links :where(a, .dropdown-toggle, .nav-button) {
    min-height: 38px;
    height: 38px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
    appearance: none;
    white-space: nowrap;
}

body:not(.panel-body) .navbar .nav-links .dropdown-toggle::after {
    width: 6px;
    height: 6px;
    margin-inline-start: 2px;
    flex: 0 0 6px;
    border-top-color: currentColor;
}

:where(.btn-outline:hover,
    .btn-muted:hover,
    .text-link:hover,
    .nav-links a:hover,
    .dropdown-toggle:hover,
    .nav-links .active-link) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    background: var(--primary-soft);
}

body:not(.panel-body) .navbar .nav-links :where(a:hover, .dropdown-toggle:hover, .nav-button:hover, .active-link),
body:not(.panel-body) .navbar .nav-links .dropdown:focus-within > .dropdown-toggle {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    background: rgba(219, 234, 254, .76);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--surface-elevated);
    box-shadow: none;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

:where(input::placeholder, textarea::placeholder) {
    color: #9CA3AF;
}

:where(table, th, td) {
    border-color: var(--border);
}

:where(thead, .table-head) {
    color: var(--text-primary);
    background: var(--surface);
}

:where(tbody tr:hover, .dashboard-row:hover) {
    background: color-mix(in srgb, var(--primary) 4%, #FFFFFF);
}

:where(.tag,
    .badge,
    .status-pill,
    .admin-status-pill,
    .coupon-badge,
    .price-chip) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    background: var(--primary-soft);
}

:where(.status-success, .tag.status-success) {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 24%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, #FFFFFF);
}

:where(.status-warning, .tag.status-warning) {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, #FFFFFF);
}

:where(.status-danger, .tag.status-danger, .alert-error) {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
    background: color-mix(in srgb, var(--danger) 8%, #FFFFFF);
}

:where(.status-info, .tag.status-info, .alert) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    background: var(--primary-soft);
}

.site-footer {
    color: var(--text-primary);
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    box-shadow: inset 0 1px 0 #FFFFFF;
}

.site-footer :where(h1, h2, h3, h4, h5, h6, strong, b, li, span) {
    color: var(--text-primary);
}

.site-footer :where(p, small) {
    color: var(--text-secondary);
}

.site-footer a {
    color: var(--primary);
}

.site-footer :where(.social-link, .footer-social .social-link) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    background: #FFFFFF;
}

.site-footer :where(.social-link:hover, .footer-social .social-link:hover) {
    color: var(--on-primary);
    border-color: var(--primary);
    background: var(--primary);
}

body:not(.panel-body) .topbar {
    color: var(--primary);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    background:
        radial-gradient(circle at 8% 0, rgba(0, 68, 255, .08), transparent 260px),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    box-shadow: 0 8px 24px rgba(0, 68, 255, .04), inset 0 1px 0 #FFFFFF;
}

body:not(.panel-body) .topbar .topbar-inner {
    min-height: 44px;
    gap: 14px;
    padding-block: 6px;
}

body:not(.panel-body) .topbar .topbar-note {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: min(58vw, 680px);
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 999px;
    color: var(--primary);
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

body:not(.panel-body) .topbar .topbar-meta {
    gap: 10px;
}

body:not(.panel-body) .topbar .topbar-contact {
    gap: 8px;
}

body:not(.panel-body) .topbar :where(.topbar-note, .topbar-contact span, .topbar-contact a, .topbar-link) {
    color: var(--primary);
}

body:not(.panel-body) .topbar .topbar-social {
    gap: 6px;
    padding-inline-start: 10px;
    border-inline-start-color: color-mix(in srgb, var(--primary) 16%, var(--border));
}

body:not(.panel-body) .topbar :where(.topbar-icon-only, .social-link) {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border)) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 8px 18px rgba(0, 68, 255, .045), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body:not(.panel-body) .topbar :where(.topbar-icon-only:hover, .social-link:hover) {
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
    background: var(--button-gradient, var(--primary-gradient)) !important;
    box-shadow: var(--button-shadow, 0 16px 34px rgba(0, 68, 255, .20)) !important;
}

body:not(.panel-body) .topbar .topbar-icon {
    color: currentColor !important;
}

body:not(.panel-body) .navbar .brand .brand-mark {
    color: var(--primary) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
    background:
        radial-gradient(circle at 28% 18%, rgba(0, 68, 255, .10), transparent 34%),
        linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    box-shadow:
        0 10px 24px rgba(0, 68, 255, .07),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

@media (max-width: 980px) {
    body:not(.panel-body) .topbar .topbar-inner {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    body:not(.panel-body) .topbar .topbar-note {
        max-width: 100%;
    }

    body:not(.panel-body) .topbar .topbar-meta {
        width: 100%;
        justify-content: space-between;
    }
}

.navbar :where(.icon-action, .cart-link, .account-trigger),
.topbar :where(.topbar-icon-only, .social-link) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
    background: #FFFFFF;
    box-shadow: none;
}

.navbar :where(.icon-action:hover, .cart-link:hover, .account-trigger:hover),
.topbar :where(.topbar-icon-only:hover, .social-link:hover) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: var(--primary-soft);
}

.navbar .cart-link .cart-count {
    color: #FFFFFF;
    border-color: #FFFFFF;
    background: var(--primary);
}

/* Platform polish: shared cards, buttons, mobile rhythm and contrast fixes. */
body:not(.panel-body) :where(.service-card,
    .feature-card,
    .course-card,
    .course-card-pro,
    .learning-course-card,
    .proof-grid article,
    .platform-stats article,
    .portal-card,
    .empty-state) {
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 8%, rgba(0, 68, 255, .055), transparent 210px),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    box-shadow: 0 14px 34px rgba(0, 68, 255, .055), inset 0 1px 0 #FFFFFF;
}

body:not(.panel-body) :where(.service-card,
    .feature-card,
    .course-card,
    .course-card-pro,
    .learning-course-card,
    .proof-grid article,
    .platform-stats article,
    .portal-card):hover {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    box-shadow: 0 18px 44px rgba(0, 68, 255, .085), inset 0 1px 0 #FFFFFF;
}

body:not(.panel-body) :where(.service-card,
    .feature-card,
    .course-card,
    .course-card-pro,
    .learning-course-card,
    .proof-grid article,
    .platform-stats article,
    .portal-card,
    .empty-state) :where(h2, h3, h4, strong, b) {
    color: var(--text-primary);
}

body:not(.panel-body) :where(.service-card,
    .feature-card,
    .course-card,
    .course-card-pro,
    .learning-course-card,
    .proof-grid article,
    .platform-stats article,
    .portal-card,
    .empty-state) :where(p, small, span:not(.icon-box):not(.tag):not(.badge):not(.cart-count)) {
    color: var(--text-secondary);
}

body:not(.panel-body) :where(.icon-box, .empty-icon) {
    color: #FFFFFF !important;
    border-color: color-mix(in srgb, var(--primary) 32%, var(--primary-soft)) !important;
    background: var(--button-gradient, var(--primary-gradient)) !important;
    box-shadow: var(--button-shadow, 0 16px 34px rgba(0, 68, 255, .20)) !important;
}

body:not(.panel-body) :where(.btn, .btn-primary, .btn-outline, .btn-muted, .nav-cta) {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 900;
    line-height: 1.2;
}

body:not(.panel-body) :where(.btn-outline, .btn-muted) {
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(0, 68, 255, .035) !important;
}

body:not(.panel-body) :where(.btn-outline:hover, .btn-outline:focus-visible, .btn-muted:hover, .btn-muted:focus-visible) {
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important;
    background: var(--primary-soft) !important;
    box-shadow: 0 12px 24px rgba(0, 68, 255, .075) !important;
}

body:not(.panel-body) :where(.btn[disabled], .btn.disabled, button[disabled], [aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .62;
    box-shadow: none !important;
}

body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) :where(p, small, li, em, .eyebrow) {
    color: rgba(255, 255, 255, .88);
}

body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) .btn-outline,
body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) .btn-muted,
body:not(.panel-body) .btn-outline.light {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, .42) !important;
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) .btn-outline:hover,
body:not(.panel-body) .btn-outline.light:hover {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, .62) !important;
    background: rgba(255, 255, 255, .20) !important;
}

@media (max-width: 760px) {
    body:not(.panel-body) :where(.proof-grid,
        .feature-grid,
        .services-grid,
        .courses-grid,
        .trust-list-horizontal,
        .platform-stats,
        .course-insights,
        .contact-process-grid,
        .contact-wrap,
        .checkout-layout,
        .cart-layout) {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    body:not(.panel-body) :where(.section-head, .hero-actions, .section-actions, .course-card-actions) {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    body:not(.panel-body) :where(.btn, .btn-primary, .btn-outline, .btn-muted, .nav-cta) {
        width: 100%;
        min-height: 44px;
    }

    body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) h1 {
        font-size: clamp(32px, 10vw, 44px);
        line-height: 1.12;
    }

    body:not(.panel-body) :where(.hero, .page-hero, .courses-hero) p {
        font-size: 16px;
    }

    body:not(.panel-body) .topbar {
        display: none;
    }

    body:not(.panel-body) .navbar .nav-links :where(a, .dropdown-toggle, .nav-button) {
        width: 100%;
        justify-content: flex-start;
    }
}

.course-watch-body {
    background: #FFFFFF;
}

.course-watch-body .watch-shell {
    background:
        radial-gradient(circle at 88% 0, rgba(0, 68, 255, .10), transparent 330px),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 54%, #FFFFFF 100%);
}

.course-watch-body .watch-learning-bar {
    color: #FFFFFF;
}

.course-watch-body .watch-learning-bar :where(strong, span, small, em, svg, a) {
    color: #FFFFFF;
}

.course-watch-body .watch-player-card {
    border-color: var(--border);
    background: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.course-watch-body .watch-player-card::before {
    background: linear-gradient(90deg, var(--primary), var(--primary-light), transparent 70%);
}

.course-watch-body .video-player {
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
    background:
        radial-gradient(circle at center, rgba(0, 68, 255, .08), transparent 44%),
        #FFFFFF;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 8%, var(--border));
}

.course-watch-body .video-player video {
    background: #FFFFFF;
}

body:not(.panel-body) .checkout-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 22px;
}

body:not(.panel-body) .checkout-trust-grid article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

body:not(.panel-body) .checkout-trust-grid span {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: 12px;
    color: #FFFFFF;
    background: var(--primary-gradient);
    font-weight: 900;
}

body:not(.panel-body) .checkout-trust-grid strong {
    color: var(--text-primary);
    font-size: 1rem;
}

body:not(.panel-body) .checkout-trust-grid small,
body:not(.panel-body) .payment-proof-selected {
    color: var(--text-secondary);
    font-weight: 700;
    line-height: 1.7;
}

body:not(.panel-body) .payment-proof-selected {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
}

body:not(.panel-body) .payment-proof-selected.has-file {
    color: #FFFFFF;
    background: var(--primary-gradient);
}

body:not(.panel-body) .checkout-payment-box input[type="file"]::file-selector-button {
    margin-inline-end: 10px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    color: #FFFFFF;
    background: var(--primary-gradient);
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 760px) {
    body:not(.panel-body) .checkout-trust-grid {
        grid-template-columns: 1fr;
        margin-block: 12px 16px;
    }
}

/* Compact purchase flow */
body:not(.panel-body) :where(.cart-page, .checkout-page) {
    background: #F8FAFC;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .container {
    max-width: 1180px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .section-head {
    margin-bottom: 14px;
    gap: 12px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .section-title {
    max-width: 760px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .section-title h1 {
    margin-bottom: 6px;
    font-size: clamp(30px, 4vw, 44px);
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .section-title p:not(.eyebrow) {
    margin: 0;
    line-height: 1.7;
}

body:not(.panel-body) :where(.cart-layout, .checkout-layout) {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

body:not(.panel-body) :where(.cart-main, .checkout-main, .cart-items) {
    gap: 12px;
}

body:not(.panel-body) :where(.checkout-steps, .checkout-trust-grid) {
    margin-block: 10px 14px;
}

body:not(.panel-body) .checkout-trust-grid {
    gap: 8px;
}

body:not(.panel-body) .checkout-trust-grid article {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: none;
}

body:not(.panel-body) .checkout-trust-grid span {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    font-size: .76rem;
}

body:not(.panel-body) .checkout-trust-grid strong {
    align-self: center;
    font-size: .92rem;
}

body:not(.panel-body) .checkout-trust-grid small {
    grid-column: 2;
    font-size: .78rem;
    line-height: 1.55;
}

body:not(.panel-body) :where(.checkout-panel, .cart-summary, .cart-item) {
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
}

body:not(.panel-body) :where(.checkout-panel, .cart-summary) {
    padding: 16px;
}

body:not(.panel-body) .cart-summary {
    position: sticky;
    top: 96px;
    gap: 10px;
    max-height: calc(100vh - 118px);
    overflow: auto;
}

body:not(.panel-body) .cart-summary-head {
    gap: 6px;
}

body:not(.panel-body) .cart-summary-head h2 {
    margin: 0;
    font-size: 1.08rem;
}

body:not(.panel-body) .cart-summary-head p:not(.eyebrow) {
    font-size: .86rem;
    line-height: 1.55;
}

body:not(.panel-body) :where(.cart-summary-list, .cart-summary-points, .checkout-items, .program-summary) {
    gap: 8px;
}

body:not(.panel-body) .program-summary {
    padding: 10px 0;
}

body:not(.panel-body) .summary-total {
    padding: 12px;
    border-radius: 14px;
}

body:not(.panel-body) .checkout-summary .checkout-items {
    max-height: 176px;
    overflow: auto;
    padding-inline-end: 4px;
}

body:not(.panel-body) .checkout-items article {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
}

body:not(.panel-body) .checkout-items img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
}

body:not(.panel-body) .cart-summary-points span {
    padding: 7px 9px;
    border-radius: 12px;
    font-size: .84rem;
}

body:not(.panel-body) .cart-toolbar {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #FFFFFF;
}

body:not(.panel-body) .cart-item {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
}

body:not(.panel-body) .cart-item-media,
body:not(.panel-body) .cart-item img {
    min-height: 108px;
    height: 108px;
    border-radius: 14px;
}

body:not(.panel-body) .cart-item-content {
    gap: 8px;
}

body:not(.panel-body) .cart-item h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
}

body:not(.panel-body) :where(.cart-item-details, .cart-item-actions) {
    gap: 8px;
}

body:not(.panel-body) .payment-steps-list {
    gap: 8px;
    margin: 10px 0;
}

body:not(.panel-body) .payment-steps-list article {
    padding: 10px;
    border-radius: 14px;
}

body:not(.panel-body) .payment-steps-list small {
    font-size: .78rem;
    line-height: 1.55;
}

body:not(.panel-body) .checkout-payment-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 12px;
    padding: 12px;
    border-radius: 16px;
    background: #FFFFFF;
}

body:not(.panel-body) .checkout-payment-box .wide {
    grid-column: 1 / -1;
}

body:not(.panel-body) .checkout-payment-box textarea {
    min-height: 76px;
}

@media (max-width: 920px) {
    body:not(.panel-body) :where(.cart-layout, .checkout-layout) {
        grid-template-columns: 1fr;
    }

    body:not(.panel-body) .cart-summary {
        position: static;
        max-height: none;
    }
}

@media (max-width: 560px) {
    body:not(.panel-body) .cart-item {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
    }

    body:not(.panel-body) .cart-item-media,
    body:not(.panel-body) .cart-item img {
        min-height: 88px;
        height: 88px;
    }

    body:not(.panel-body) .checkout-payment-box,
    body:not(.panel-body) .payment-steps-list,
    body:not(.panel-body) .checkout-trust-grid {
        grid-template-columns: 1fr;
    }
}

/* Unified compact order summaries */
body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary {
    display: grid;
    align-content: start;
    gap: 8px !important;
    padding: 14px !important;
    border: 1px solid var(--border);
    background: #FFFFFF;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary-head {
    gap: 4px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary-head h2 {
    font-size: 1rem !important;
    line-height: 1.35;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary-head p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .8rem !important;
    line-height: 1.45 !important;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary-list,
body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-summary {
    gap: 6px !important;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .program-summary {
    min-height: 38px;
    gap: 10px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .program-summary span {
    color: var(--text-secondary) !important;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.35;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .program-summary strong {
    color: var(--text-primary) !important;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: end;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .program-summary.summary-total {
    min-height: 48px;
    margin-top: 4px;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(0, 68, 255, .08), #FFFFFF 72%);
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .program-summary.summary-total span {
    color: var(--primary) !important;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .program-summary.summary-total strong {
    color: var(--primary) !important;
    font-size: 1.12rem;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .program-summary.coupon-discount strong {
    color: var(--success) !important;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-summary .checkout-items {
    max-height: 132px;
    gap: 6px !important;
    margin-bottom: 4px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-summary .checkout-items article {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    padding: 6px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-summary .checkout-items img {
    width: 44px;
    height: 44px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-summary .checkout-items strong {
    font-size: .82rem;
    line-height: 1.35;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-summary .checkout-items small {
    font-size: .76rem;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-coupon-hints,
body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary-points {
    gap: 6px !important;
    padding-top: 2px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary-points span {
    min-height: 0;
    padding: 6px 8px !important;
    font-size: .78rem !important;
    line-height: 1.35;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary .wide-button,
body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-summary .wide-button {
    min-height: 40px;
    margin-top: 2px;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .summary-actions,
body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-auth-actions {
    display: grid;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .summary-actions .btn,
body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-auth-actions .btn,
body:not(.panel-body) :where(.cart-page, .checkout-page) .cart-summary > .btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
}

/* Cart summary contrast fix */
body:not(.panel-body) .cart-page .cart-summary,
body:not(.panel-body) .cart-page .cart-summary :where(div, p, span, small, strong, b, h2, a) {
    color: var(--text-primary) !important;
}

body:not(.panel-body) .cart-page .cart-summary {
    border-color: var(--border) !important;
    background: #FFFFFF !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
}

body:not(.panel-body) .cart-page .cart-summary :where(.eyebrow, .text-link, a:not(.btn)) {
    color: var(--primary) !important;
}

body:not(.panel-body) .cart-page .cart-summary-head p:not(.eyebrow),
body:not(.panel-body) .cart-page .cart-summary .program-summary span,
body:not(.panel-body) .cart-page .cart-summary .cart-summary-points span {
    color: var(--text-secondary) !important;
}

body:not(.panel-body) .cart-page .cart-summary .program-summary strong,
body:not(.panel-body) .cart-page .cart-summary .cart-summary-head h2 {
    color: var(--text-primary) !important;
}

body:not(.panel-body) .cart-page .cart-summary .summary-total :where(span, strong) {
    color: var(--primary) !important;
}

body:not(.panel-body) .cart-page .cart-coupon-hints {
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border)) !important;
    background: #F8FAFC !important;
}

body:not(.panel-body) .cart-page .cart-coupon-hints strong {
    color: var(--text-primary) !important;
}

body:not(.panel-body) .cart-page .cart-coupon-hints span {
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
    background: var(--primary-soft) !important;
}

body:not(.panel-body) .cart-page .cart-summary-points {
    border-color: var(--border) !important;
    background: #F8FAFC !important;
}

body:not(.panel-body) .cart-page .cart-summary-points span::before {
    background: var(--primary) !important;
}

/* Purchase flow UX refinements */
body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-secondary);
    background: #F8FAFC;
    font-size: .84rem;
    font-weight: 900;
    text-align: center;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps span.is-active {
    color: #FFFFFF !important;
    border-color: var(--primary);
    background: var(--primary-gradient);
    box-shadow: 0 10px 22px rgba(0, 68, 255, .16);
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps span.is-done {
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    background: var(--primary-soft);
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps span.is-done::before {
    content: "✓";
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    margin-inline-end: 6px;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--primary);
    font-size: .68rem;
    font-weight: 900;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps span.is-active::before {
    content: none;
}

body:not(.panel-body) .cart-item-actions form .btn-muted {
    width: 38px;
    min-width: 38px;
    height: 38px;
    overflow: hidden;
    padding: 0 !important;
    color: transparent !important;
    border-color: color-mix(in srgb, var(--danger) 22%, var(--border)) !important;
    background: color-mix(in srgb, var(--danger) 8%, #FFFFFF) !important;
    position: relative;
}

body:not(.panel-body) .cart-item-actions form .btn-muted::before {
    content: "×";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--danger);
    font-size: 1.25rem;
    font-weight: 900;
}

body:not(.panel-body) .cart-item-actions form .btn-muted:hover {
    border-color: var(--danger) !important;
    background: var(--danger) !important;
}

body:not(.panel-body) .cart-item-actions form .btn-muted:hover::before {
    color: #FFFFFF;
}

body:not(.panel-body) .checkout-review {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
    border-radius: 14px;
    background: #F8FAFC;
}

body:not(.panel-body) .checkout-review strong {
    color: var(--text-primary);
    font-size: .9rem;
}

body:not(.panel-body) .checkout-review span {
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.45;
}

body:not(.panel-body) .payment-method-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body:not(.panel-body) .payment-method-card {
    min-height: 74px;
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-primary);
    background: #FFFFFF;
    cursor: pointer;
    text-align: start;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body:not(.panel-body) .payment-method-card strong {
    color: inherit;
    font-size: .88rem;
}

body:not(.panel-body) .payment-method-card small {
    color: var(--text-secondary);
    font-size: .74rem;
    line-height: 1.4;
}

body:not(.panel-body) .payment-method-card.is-disabled,
body:not(.panel-body) .payment-method-card:disabled {
    cursor: not-allowed;
    color: var(--text-secondary);
    background: #F8FAFC;
    border-style: dashed;
    opacity: .78;
}

body:not(.panel-body) .payment-method-card.is-disabled small,
body:not(.panel-body) .payment-method-card:disabled small {
    color: var(--text-secondary);
}

body:not(.panel-body) .payment-method-card:hover,
body:not(.panel-body) .payment-method-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    background: #F8FAFC;
    outline: none;
}

body:not(.panel-body) .payment-method-card.is-disabled:hover,
body:not(.panel-body) .payment-method-card:disabled:hover,
body:not(.panel-body) .payment-method-card.is-disabled:focus-visible,
body:not(.panel-body) .payment-method-card:disabled:focus-visible {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}

body:not(.panel-body) .payment-method-card.is-active {
    color: #FFFFFF;
    border-color: var(--primary);
    background: var(--primary-gradient);
    box-shadow: 0 12px 26px rgba(0, 68, 255, .18);
}

body:not(.panel-body) .payment-method-card.is-active small {
    color: rgba(255, 255, 255, .84);
}

body:not(.panel-body) .checkout-payment-box select[name="payment_method"] {
    margin-top: 8px;
}

/* Checkout page experience polish */
body:not(.panel-body) .checkout-page {
    padding-block: 34px 48px;
    background:
        radial-gradient(circle at 82% 4%, rgba(0, 68, 255, .10), transparent 320px),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 42%, #FFFFFF 100%);
}

body:not(.panel-body) .checkout-page .section-head {
    align-items: center;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
    backdrop-filter: blur(14px);
}

body:not(.panel-body) .checkout-page .section-title h1 {
    color: var(--text-primary);
    font-size: clamp(28px, 3.8vw, 42px);
}

body:not(.panel-body) .checkout-page .section-title p:not(.eyebrow) {
    max-width: 660px;
    color: var(--text-secondary);
}

body:not(.panel-body) .checkout-page .checkout-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
}

body:not(.panel-body) .checkout-page .checkout-main {
    display: grid;
    gap: 14px;
}

body:not(.panel-body) .checkout-page .checkout-panel,
body:not(.panel-body) .checkout-page .checkout-summary {
    border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border));
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

body:not(.panel-body) .checkout-page .checkout-panel {
    padding: 18px;
}

body:not(.panel-body) .checkout-page .checkout-panel .section-title {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

body:not(.panel-body) .checkout-page .checkout-panel .section-title h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.18rem;
}

body:not(.panel-body) .checkout-page .checkout-panel .section-title p:not(.eyebrow) {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.7;
}

body:not(.panel-body) .checkout-page .checkout-steps {
    position: relative;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}

body:not(.panel-body) .checkout-page .checkout-steps span {
    min-height: 34px;
    padding-inline: 14px;
    border-radius: 999px;
}

body:not(.panel-body) .checkout-page .checkout-trust-grid {
    margin-block: 14px 16px;
}

body:not(.panel-body) .checkout-page .checkout-trust-grid article {
    min-height: 86px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
}

body:not(.panel-body) .checkout-page .payment-steps-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

body:not(.panel-body) .checkout-page .payment-steps-list article {
    border-color: color-mix(in srgb, var(--primary) 10%, var(--border));
    background: #F8FAFC;
}

body:not(.panel-body) .checkout-page .checkout-payment-box {
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    background: #F8FAFC;
}

body:not(.panel-body) .checkout-page .payment-method-field {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
}

body:not(.panel-body) .checkout-page .payment-method-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body:not(.panel-body) .checkout-page .payment-method-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
}

body:not(.panel-body) .checkout-page .payment-method-card {
    min-height: 92px;
    padding: 12px;
    border-radius: 16px;
    background: #FFFFFF;
}

body:not(.panel-body) .checkout-page .payment-method-card strong {
    font-size: .84rem;
    line-height: 1.45;
}

body:not(.panel-body) .checkout-page .payment-method-card small {
    font-size: .72rem;
}

body:not(.panel-body) .checkout-page .payment-method-card.is-active,
body:not(.panel-body) .checkout-page .payment-method-card[aria-checked="true"] {
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
    background: var(--primary-gradient) !important;
    box-shadow: 0 14px 30px rgba(0, 68, 255, .20) !important;
}

body:not(.panel-body) .checkout-page .payment-method-card.is-active :where(strong, small),
body:not(.panel-body) .checkout-page .payment-method-card[aria-checked="true"] :where(strong, small) {
    color: #FFFFFF !important;
}

body:not(.panel-body) .checkout-page .payment-method-card.is-active:hover,
body:not(.panel-body) .checkout-page .payment-method-card[aria-checked="true"]:hover,
body:not(.panel-body) .checkout-page .payment-method-card.is-active:focus-visible,
body:not(.panel-body) .checkout-page .payment-method-card[aria-checked="true"]:focus-visible {
    background: var(--primary-gradient) !important;
    transform: translateY(-1px);
}

body:not(.panel-body) .checkout-payment-form.is-online-payment .checkout-payment-box {
    grid-template-columns: 1fr;
}

body:not(.panel-body) .checkout-payment-form.is-online-payment .payment-method-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.panel-body) .checkout-page .checkout-coupon-hints {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 16px;
    background: #F8FAFC;
}

body:not(.panel-body) .checkout-page .checkout-coupon-hints > strong {
    grid-column: 1 / -1;
    color: var(--text-primary);
    font-size: .9rem;
}

body:not(.panel-body) .checkout-page .checkout-coupon-card {
    display: grid;
    gap: 4px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text-primary);
    background: #FFFFFF;
    text-align: start;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body:not(.panel-body) .checkout-page .checkout-coupon-card:hover,
body:not(.panel-body) .checkout-page .checkout-coupon-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    box-shadow: 0 12px 26px rgba(0, 68, 255, .10);
    outline: none;
}

body:not(.panel-body) .checkout-page .checkout-coupon-card span {
    color: var(--primary);
    font-weight: 900;
}

body:not(.panel-body) .checkout-page .checkout-coupon-card small {
    color: var(--text-secondary);
    font-weight: 800;
}

body:not(.panel-body) .checkout-page .checkout-coupon-card b {
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: #FFFFFF;
    background: var(--primary-gradient);
    font-size: .75rem;
}

body:not(.panel-body) .checkout-page .checkout-summary {
    top: 92px;
    padding: 16px !important;
}

body:not(.panel-body) .checkout-page .checkout-summary .cart-summary-head {
    gap: 3px !important;
}

body:not(.panel-body) .checkout-page .checkout-summary .cart-summary-head h2 {
    color: var(--text-primary);
}

body:not(.panel-body) .checkout-page .checkout-summary .checkout-items {
    max-height: 158px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #F8FAFC;
}

body:not(.panel-body) .checkout-page .checkout-summary .checkout-items article {
    background: #FFFFFF;
    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

body:not(.panel-body) .checkout-page .checkout-review {
    border-color: color-mix(in srgb, var(--primary) 15%, var(--border));
    background: linear-gradient(135deg, rgba(0, 68, 255, .07), #FFFFFF);
}

body:not(.panel-body) .checkout-page .summary-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: -16px;
    margin-bottom: -16px;
    padding: 12px 16px 16px;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), #FFFFFF 46%);
    backdrop-filter: blur(10px);
}

@media (max-width: 920px) {
    body:not(.panel-body) .checkout-page .checkout-layout,
    body:not(.panel-body) .checkout-page .payment-steps-list,
    body:not(.panel-body) .checkout-page .checkout-coupon-hints,
    body:not(.panel-body) .checkout-page .payment-method-cards,
    body:not(.panel-body) .checkout-payment-form.is-online-payment .payment-method-cards {
        grid-template-columns: 1fr;
    }

    body:not(.panel-body) .checkout-page .checkout-summary {
        top: auto;
    }
}

@media (max-width: 640px) {
    body:not(.panel-body) .checkout-page {
        padding-block: 18px 34px;
    }

    body:not(.panel-body) .checkout-page .section-head {
        padding: 14px;
        border-radius: 18px;
    }

    body:not(.panel-body) .checkout-page .checkout-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 18px;
    }

    body:not(.panel-body) .checkout-page .checkout-steps span {
        justify-content: center;
        text-align: center;
    }

    body:not(.panel-body) .checkout-page .checkout-panel,
    body:not(.panel-body) .checkout-page .checkout-summary {
        border-radius: 18px;
    }
}

.checkout-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .34);
    backdrop-filter: blur(12px);
}

.checkout-confirm-card {
    position: relative;
    width: min(520px, 100%);
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
}

.checkout-confirm-card h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.35rem;
}

.checkout-confirm-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--primary);
    background: #FFFFFF;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 900;
}

.checkout-confirm-list {
    display: grid;
    gap: 8px;
}

.checkout-confirm-list span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: #F8FAFC;
}

.checkout-confirm-list b {
    color: var(--text-secondary);
}

.checkout-confirm-list strong {
    color: var(--text-primary);
    text-align: end;
}

.checkout-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body:not(.panel-body) :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(0, 68, 255, .22);
    outline-offset: 2px;
}

.global-feedback-popup {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: clamp(18px, 4vw, 42px);
    background: rgba(15, 23, 42, .34);
    backdrop-filter: blur(5px);
}

.global-feedback-panel {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    width: min(100%, 520px);
    margin-top: clamp(16px, 7vh, 74px);
    padding: 18px 20px 18px 18px;
    border: 1px solid rgba(148, 163, 184, .36);
    border-radius: 8px;
    color: var(--text-primary, #0f172a);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.global-feedback-panel.is-error {
    border-color: rgba(220, 38, 38, .28);
}

.global-feedback-panel.is-success {
    border-color: rgba(22, 163, 74, .28);
}

.global-feedback-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 900;
    background: #0044ff;
}

.global-feedback-panel.is-error .global-feedback-icon {
    background: #dc2626;
}

.global-feedback-panel.is-success .global-feedback-icon {
    background: #16a34a;
}

.global-feedback-content {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-inline-end: 30px;
}

.global-feedback-content strong {
    color: var(--text-primary, #0f172a);
    font-size: 1rem;
}

.global-feedback-content p,
.global-feedback-content ul {
    margin: 0;
    color: var(--text-secondary, #475569);
    font-size: .93rem;
    line-height: 1.7;
}

.global-feedback-content ul {
    display: grid;
    gap: 4px;
    padding-inline-start: 18px;
}

.global-feedback-close {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .38);
    border-radius: 8px;
    color: var(--text-primary, #0f172a);
    font-size: 1.25rem;
    line-height: 1;
    background: #ffffff;
    cursor: pointer;
}

.global-feedback-close:hover,
.global-feedback-close:focus-visible {
    border-color: rgba(0, 68, 255, .34);
    color: #0044ff;
}

body:not(.panel-body) :where(.cart-empty-state, .checkout-panel, .cart-item, .cart-summary) {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body:not(.panel-body) :where(.cart-item, .checkout-panel):hover {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 18px 40px rgba(15, 23, 42, .075);
}

body:not(.panel-body) .alert {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
    border-radius: 16px !important;
    color: var(--text-primary) !important;
    background: linear-gradient(135deg, rgba(0, 68, 255, .08), #FFFFFF 70%) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06) !important;
}

body:not(.panel-body) .alert :where(span, div, strong, li) {
    color: var(--text-primary) !important;
}

body:not(.panel-body) .alert-dismissible > button,
body:not(.panel-body) .alert-dismissible button {
    color: var(--primary) !important;
    background: #FFFFFF !important;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
}

.purchase-mobile-bar {
    display: none;
}

@media (max-width: 760px) {
    body:has(.cart-page, .checkout-page, .order-detail-page) {
        padding-bottom: 86px;
    }

    body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
    }

    body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps span {
        min-height: 34px;
        padding: 6px 8px;
        font-size: .76rem;
    }

    .purchase-mobile-bar {
        position: fixed;
        inset-inline: 12px;
        inset-block-end: 12px;
        z-index: 80;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
        border-radius: 18px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
        backdrop-filter: blur(16px);
    }

    .purchase-mobile-total {
        display: grid;
        gap: 2px;
    }

    .purchase-mobile-total span {
        color: var(--text-secondary);
        font-size: .76rem;
        font-weight: 800;
    }

    .purchase-mobile-total strong {
        color: var(--primary);
        font-size: 1.05rem;
        font-weight: 900;
    }

    .purchase-mobile-action {
        min-height: 42px !important;
        width: auto !important;
        padding-inline: 14px !important;
        white-space: nowrap;
    }

    body:not(.panel-body) .payment-method-cards,
    .checkout-confirm-actions {
        grid-template-columns: 1fr;
    }
}

/* Checkout stepper final state */
body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps span {
    white-space: nowrap;
}

@media (max-width: 520px) {
    body:not(.panel-body) :where(.cart-page, .checkout-page) .checkout-steps {
        grid-template-columns: 1fr !important;
        border-radius: 18px;
    }
}

/* Button contrast contract: blue surfaces use white text, white surfaces use blue text. */
:where(.btn-primary,
    .nav-cta,
    .back-to-top,
    .chatbot-toggle,
    .chatbot-form button,
    .source-player-main,
    .watch-shell .btn-primary,
    .purchase-mobile-action,
    .checkout-confirm-submit,
    button.primary,
    button[class*="is-primary"],
    a[class*="is-primary"],
    .btn[class*="is-primary"]) {
    color: var(--on-primary, #FFFFFF) !important;
}

:where(.btn-primary,
    .nav-cta,
    .back-to-top,
    .chatbot-toggle,
    .chatbot-form button,
    .source-player-main,
    .watch-shell .btn-primary,
    .purchase-mobile-action,
    .checkout-confirm-submit,
    button.primary,
    button[class*="is-primary"],
    a[class*="is-primary"],
    .btn[class*="is-primary"]) :where(span, strong, small, em, b, i, svg, path) {
    color: var(--on-primary, #FFFFFF) !important;
    stroke: currentColor !important;
}

/* Shared official brand asset. */
.platform-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.platform-logo--header {
    width: 158px;
    max-height: 52px;
}

.platform-logo--footer {
    width: 186px;
    max-height: 72px;
}

.platform-logo--panel {
    width: 148px;
    max-height: 52px;
}

.platform-logo--admin-login {
    width: 188px;
    max-height: 76px;
}

.platform-logo--invoice {
    width: 145px;
    max-height: 64px;
}

@media (max-width: 720px) {
    .platform-logo--header {
        width: 132px;
        max-height: 44px;
    }

    .platform-logo--footer {
        width: 164px;
    }
}

:where(.btn-outline,
    .btn-muted,
    .btn-light,
    .admin-order-open-modal,
    button[class*="is-soft"],
    a[class*="is-soft"],
    .btn[class*="is-soft"]) {
    color: var(--primary, #0044FF) !important;
}

:where(.btn-outline,
    .btn-muted,
    .btn-light,
    .admin-order-open-modal,
    button[class*="is-soft"],
    a[class*="is-soft"],
    .btn[class*="is-soft"]) :where(span, strong, small, em, b, i, svg, path) {
    color: var(--primary, #0044FF) !important;
    stroke: currentColor !important;
}

/* Sticky Navigation Bar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: var(--shadow-sm) !important;
}