/* ============================================================================
 * CHATBOTX DUAL-THEME DESIGN SYSTEM (AUTO OS/BROWSER LIGHT & DARK MODE)
 * ============================================================================
 * @agent-index
 *   File        : assets/css/theme-system.css
 *   Loaded      : Enqueued LAST in functions.php (after chatbotx-features)
 *   Detector    : Inline zero-FOUC script #cbx-theme-detector in header.php
 *   Scope       : Pages carrying body.cbx-theme-auto (front-page, /vi, /id, /br)
 *   Override URL: Append ?theme=light or ?theme=dark to force-preview either mode
 *
 * @sections (grep for "@section:<name>" to jump directly)
 *   - @section:tokens             CSS Custom Properties (--cbx-*) for Dark & Light
 *   - @section:surfaces           Semantic surface helper classes (.cbx-surface-*)
 *   - @section:typography         Overrides legacy !important headings & utility text
 *   - @section:protected-dark     Zones that MUST stay dark/white-text in Light Mode
 *   - @section:header             Site Header, Logo SVG, Mega Menu, Mobile Nav, Lang Switcher
 *   - @section:hero               Hero headline, glows, CTA, pills, ChatGPT/iPhone, tabs
 *   - @section:video-showcase     Agentic vs Manual toggle + Vietnamese YouTube Slider
 *   - @section:partners           Partners strip & badges
 *   - @section:how-it-works       3-step cards, channel icon tiles, flowchart cards
 *   - @section:channels           Omnichannel live pill & 8-channel tiles
 *   - @section:agentic-workspace  Copilot Dashboard & 3 Autonomous Agent cards
 *   - @section:agent-automation   8 Bento gradient cards & terminal frames
 *   - @section:work-with-agents   Video frame & section typography
 *   - @section:dev-experience     Dark macOS terminal preservation & button styling
 *   - @section:industries-roi     Industry cards, ROI icon boxes & flow card
 *   - @section:case-studies       Photo overlay cards & carousel pagination dots
 *   - @section:pricing            Free / Lite / Pro / Whitelabel cards & sliders
 *   - @section:community-faq      Community CTA, FAQ accordion cards & Newsletter
 *   - @section:footer             Footer columns, links, logo & floating scroll button
 * ============================================================================ */


/* ============================================================================
 * @section:tokens — Single Source of Truth (CSS Custom Properties)
 * ============================================================================ */
:root,
html[data-theme="dark"] {
    --cbx-bg-page: #111827;
    --cbx-bg-section-alt: #0b0f19;
    --cbx-bg-header: rgba(17, 24, 39, 0.85);
    --cbx-bg-header-dropdown: rgba(45, 55, 72, 0.98);
    --cbx-surface-card: #2d3748;
    --cbx-surface-card-hover: #374151;
    --cbx-surface-inner: #263040;
    --cbx-surface-deep: #1a202c;
    --cbx-surface-glass: rgba(255, 255, 255, 0.05);
    --cbx-surface-pill: rgba(30, 41, 59, 0.85);
    --cbx-border-subtle: rgba(255, 255, 255, 0.08);
    --cbx-border-base: #374151;
    --cbx-border-strong: #4a5568;
    --cbx-text-primary: #ffffff;
    --cbx-text-secondary: #d1d5db;
    --cbx-text-muted: #9ca3af;
    --cbx-text-accent: #60a5fa;
    --cbx-shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
    --cbx-shadow-elevated: 0 20px 50px rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] body.cbx-theme-auto {
    --cbx-bg-page: #f8fafc;
    --cbx-bg-section-alt: #f1f5f9;
    --cbx-bg-header: rgba(255, 255, 255, 0.9);
    --cbx-bg-header-dropdown: rgba(255, 255, 255, 0.98);
    --cbx-surface-card: #ffffff;
    --cbx-surface-card-hover: #f8fafc;
    --cbx-surface-inner: #f1f5f9;
    --cbx-surface-deep: #e2e8f0;
    --cbx-surface-glass: rgba(255, 255, 255, 0.92);
    --cbx-surface-pill: rgba(255, 255, 255, 0.95);
    --cbx-border-subtle: rgba(15, 23, 42, 0.08);
    --cbx-border-base: #e2e8f0;
    --cbx-border-strong: #cbd5e1;
    --cbx-text-primary: #0f172a;
    --cbx-text-secondary: #334155;
    --cbx-text-muted: #64748b;
    --cbx-text-accent: #2563eb;
    --cbx-shadow-card: 0 10px 30px -10px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --cbx-shadow-elevated: 0 20px 45px -12px rgba(15, 23, 42, 0.14);
    --cbx-brand-gradient: linear-gradient(135deg, #9333ea 0%, #3b82f6 52%, #818cf8 100%);
    --cbx-brand-shadow: none;

    /* Warm light-yellow code/terminal palette (inspired by Classmoji Light Mode) */
    --cbx-code-bg: #fefce8;
    --cbx-code-frame: #faf6e6;
    --cbx-code-header: #f4eed6;
    --cbx-code-border: #e5dec2;
    --cbx-code-border-strong: #dfd7b8;

    /* Bridge legacy CSS variables (used in SVGs / ui-framework.css) */
    --border: #cbd5e1;
    --muted-foreground: #475569;
}

/* Smooth page background & base text transition */
html[data-theme="light"] body.cbx-theme-auto {
    background-color: var(--cbx-bg-page) !important;
    color: var(--cbx-text-secondary) !important;
}

html[data-theme="light"] body.cbx-theme-auto .bg-gray-900 {
    background-color: var(--cbx-bg-page) !important;
}

html[data-theme="light"] body.cbx-theme-auto .bg-gray-900\/50 {
    background-color: rgba(241, 245, 249, 0.78) !important;
}


/* ============================================================================
 * @section:surfaces — Semantic Surface Classes (Used Across Templates)
 * ============================================================================ */
.cbx-surface-card {
    background-color: var(--cbx-surface-card);
}

.cbx-surface-inner {
    background-color: var(--cbx-surface-inner);
}

.cbx-surface-deep {
    background-color: var(--cbx-surface-deep);
}

html[data-theme="light"] body.cbx-theme-auto .cbx-surface-card,
html[data-theme="light"] body.cbx-theme-auto [style*="background-color: #2d3748"],
html[data-theme="light"] body.cbx-theme-auto .bg-\[\#2d3748\] {
    background-color: var(--cbx-surface-card) !important;
    border-color: var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-card);
}

html[data-theme="light"] body.cbx-theme-auto .cbx-surface-card:hover,
html[data-theme="light"] body.cbx-theme-auto .bg-\[\#2d3748\]:hover {
    background-color: var(--cbx-surface-card-hover) !important;
    border-color: var(--cbx-border-strong) !important;
}

html[data-theme="light"] body.cbx-theme-auto .cbx-surface-inner,
html[data-theme="light"] body.cbx-theme-auto [style*="background-color: #263040"],
html[data-theme="light"] body.cbx-theme-auto .bg-\[\#263040\] {
    background-color: var(--cbx-surface-inner) !important;
    border-color: var(--cbx-border-base) !important;
}

html[data-theme="light"] body.cbx-theme-auto .cbx-surface-deep,
html[data-theme="light"] body.cbx-theme-auto [style*="background-color: #1a202c"],
html[data-theme="light"] body.cbx-theme-auto .bg-\[\#1a202c\] {
    background-color: var(--cbx-surface-deep) !important;
    border-color: var(--cbx-border-strong) !important;
}

/* Legacy Tailwind dark utility surfaces inside auto-themed homepage */
html[data-theme="light"] body.cbx-theme-auto .bg-gray-800\/50,
html[data-theme="light"] body.cbx-theme-auto .bg-gray-800\/60,
html[data-theme="light"] body.cbx-theme-auto .bg-gray-800\/80 {
    background-color: var(--cbx-surface-inner) !important;
    border-color: var(--cbx-border-base) !important;
}

html[data-theme="light"] body.cbx-theme-auto .border-gray-700,
html[data-theme="light"] body.cbx-theme-auto .border-gray-800,
html[data-theme="light"] body.cbx-theme-auto .border-\[\#33363a\] {
    border-color: var(--cbx-border-base) !important;
}


/* ============================================================================
 * @section:typography — Counteract legacy gradient_fixes.css / repaired_utilities.css
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto h1,
html[data-theme="light"] body.cbx-theme-auto .h1,
html[data-theme="light"] body.cbx-theme-auto h2,
html[data-theme="light"] body.cbx-theme-auto .h2,
html[data-theme="light"] body.cbx-theme-auto h3,
html[data-theme="light"] body.cbx-theme-auto .h3,
html[data-theme="light"] body.cbx-theme-auto h4,
html[data-theme="light"] body.cbx-theme-auto .h4,
html[data-theme="light"] body.cbx-theme-auto h5,
html[data-theme="light"] body.cbx-theme-auto h6 {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto li {
    color: var(--cbx-text-secondary) !important;
}

html[data-theme="light"] body.cbx-theme-auto .text-white {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto .text-gray-200,
html[data-theme="light"] body.cbx-theme-auto .text-gray-300,
html[data-theme="light"] body.cbx-theme-auto .text-slate-200,
html[data-theme="light"] body.cbx-theme-auto .text-slate-300 {
    color: var(--cbx-text-secondary) !important;
}

html[data-theme="light"] body.cbx-theme-auto .text-gray-400,
html[data-theme="light"] body.cbx-theme-auto .text-gray-500,
html[data-theme="light"] body.cbx-theme-auto .text-slate-400 {
    color: var(--cbx-text-muted) !important;
}

/* Readable light-mode contrast for colored accent text */
html[data-theme="light"] body.cbx-theme-auto .text-blue-300,
html[data-theme="light"] body.cbx-theme-auto .text-blue-400 {
    color: #2563eb !important;
}

html[data-theme="light"] body.cbx-theme-auto .text-purple-300,
html[data-theme="light"] body.cbx-theme-auto .text-purple-400 {
    color: #7c3aed !important;
}

html[data-theme="light"] body.cbx-theme-auto .text-emerald-300,
html[data-theme="light"] body.cbx-theme-auto .text-emerald-400 {
    color: #059669 !important;
}


/* ============================================================================
 * @section:protected-dark — Elements That MUST Keep Dark/Gradient Backgrounds & White Text
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient *,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient h1,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient h2,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient h3,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient p,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient span,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient li,
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card,
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card h3,
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card p,
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card li,
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card span:not([style]),
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card .text-white,
html[data-theme="light"] body.cbx-theme-auto .case-study-card,
html[data-theme="light"] body.cbx-theme-auto .case-study-card *,
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame),
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame) h3,
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame) h4,
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame) p,
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame) .text-white,
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame) .text-gray-200,
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame) .text-gray-300,
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide > *:not(.agent-terminal-frame) .text-gray-400,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame),
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame) h3,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame) h4,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame) p,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame) .text-white,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame) .text-gray-200,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame) .text-gray-300,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow > *:not(.agent-terminal-frame) .text-gray-400,
html[data-theme="light"] body.cbx-theme-auto .dmw-iphone-window,
html[data-theme="light"] body.cbx-theme-auto .dmw-iphone-window .text-white,
html[data-theme="light"] body.cbx-theme-auto .dmw-highlight,
html[data-theme="light"] body.cbx-theme-auto .dmw-highlight *,
html[data-theme="light"] body.cbx-theme-auto #cbx-offer-announcement,
html[data-theme="light"] body.cbx-theme-auto #cbx-offer-announcement *,
html[data-theme="light"] body.cbx-theme-auto .cbx-keep-dark,
html[data-theme="light"] body.cbx-theme-auto .cbx-keep-dark * {
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto a.bg-brand-gradient,
html[data-theme="light"] body.cbx-theme-auto button.bg-brand-gradient:not(#hero-mode-toggle),
html[data-theme="light"] body.cbx-theme-auto .btn.bg-brand-gradient,
html[data-theme="light"] body.cbx-theme-auto #hero .dmw-channel-tab.is-active,
html[data-theme="light"] body.cbx-theme-auto #copilot-inbox button.bg-blue-600,
html[data-theme="light"] body.cbx-theme-auto #pricing a.bg-gray-700,
html[data-theme="light"] body.cbx-theme-auto a[href*="discord.chatbotx.io"].bg-gray-700,
html[data-theme="light"] body.cbx-theme-auto footer a.bg-gray-800:hover,
html[data-theme="light"] body.cbx-theme-auto .discord-support-floating,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-chat-floating,
html[data-theme="light"] body.cbx-theme-auto #channel-connectivity .channels-live-pill__btn,
html[data-theme="light"] body.cbx-theme-auto #cbx-popup-card .cbx-popup-cta {
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Featured Pricing CTA white button inside gradient card must stay dark text */
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card a.bg-white,
html[data-theme="light"] body.cbx-theme-auto .pricing-featured-card a.bg-white * {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Solid colored buttons/badges should always keep crisp white text */
html[data-theme="light"] body.cbx-theme-auto .bg-blue-600,
html[data-theme="light"] body.cbx-theme-auto .bg-blue-600 *,
html[data-theme="light"] body.cbx-theme-auto .vi-yt-playing-badge,
html[data-theme="light"] body.cbx-theme-auto .popular-bubble,
html[data-theme="light"] body.cbx-theme-auto .soon-badge {
    color: #ffffff !important;
}


/* ============================================================================
 * @section:header — Header, Logo SVG, Mega Menu, Mobile Nav, Lang Switcher
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #site-header {
    background-color: transparent;
}

/* Brand Logo & Icon Theme Switching (assets/images/brand/)
 * - Dark theme (default): show logo_white.svg (.cbx-brand-logo-dark) & icon_white.svg (.cbx-brand-icon-dark)
 * - Light theme: show logo_black.svg (.cbx-brand-logo-light) & icon_black.svg (.cbx-brand-icon-light)
 */
.cbx-brand-logo-light,
.cbx-brand-icon-light {
    display: none !important;
}

.cbx-brand-logo-dark,
.cbx-brand-icon-dark {
    display: block !important;
}

html[data-theme="light"] body.cbx-theme-auto .cbx-brand-logo-dark,
html[data-theme="light"] body.cbx-theme-auto .cbx-brand-icon-dark {
    display: none !important;
}

html[data-theme="light"] body.cbx-theme-auto .cbx-brand-logo-light,
html[data-theme="light"] body.cbx-theme-auto .cbx-brand-icon-light {
    display: block !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header nav > ul > li > a {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header nav > ul > li > a:hover {
    color: var(--cbx-text-accent) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .mega-menu {
    background: var(--cbx-bg-header-dropdown) !important;
    border: 1px solid var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-elevated) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .mega-menu-section-title {
    color: var(--cbx-text-muted) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .mega-menu-section-divider {
    border-left-color: var(--cbx-border-base) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .channel-menu-item {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .channel-menu-item:hover {
    background: rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .channel-menu-item .menu-icon-symbol {
    color: var(--cbx-text-muted) !important;
}

/* Language switcher */
html[data-theme="light"] body.cbx-theme-auto .lang-switcher--desktop .lang-switcher-btn {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto .lang-switcher--desktop .lang-switcher-btn:hover {
    background: rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto .lang-switcher-menu {
    background: #ffffff !important;
    border-color: var(--cbx-border-strong) !important;
    box-shadow: var(--cbx-shadow-elevated) !important;
}

/* Mobile hamburger & drawer */
html[data-theme="light"] body.cbx-theme-auto #site-header .hamburger .icon-menu-fixed rect,
html[data-theme="light"] body.cbx-theme-auto #site-header .hamburger .icon-close-fixed rect {
    fill: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #mobile-nav > div {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-elevated) !important;
}

html[data-theme="light"] body.cbx-theme-auto #mobile-nav button:not(.bg-brand-gradient),
html[data-theme="light"] body.cbx-theme-auto #mobile-nav a:not([href*="app.chatbotx"]) {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #mobile-nav .mobile-channel-item span {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #mobile-nav .lang-switcher--mobile .lang-switcher-btn {
    background: var(--cbx-surface-inner) !important;
    color: var(--cbx-text-primary) !important;
    border: 1px solid var(--cbx-border-base) !important;
}

/* Header GitHub Star Widget (Light Mode) */
html[data-theme="light"] body.cbx-theme-auto #site-header .github-widget {
    background: #ffffff !important;
    border-color: var(--cbx-border-strong) !important;
    color: var(--cbx-text-primary) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .github-widget .btn {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 90%) !important;
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .github-widget:hover .btn {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 90%) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .github-widget .btn svg {
    fill: var(--cbx-text-primary) !important;
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #site-header .github-widget .social-count {
    background: #f8fafc !important;
    border-left-color: var(--cbx-border-strong) !important;
    color: var(--cbx-text-primary) !important;
}

/* Lifetime Offer Popup Modal (Light Mode) */
html[data-theme="light"] body.cbx-theme-auto #cbx-lifetime-popup {
    background-color: rgba(15, 23, 42, 0.35) !important;
}

html[data-theme="light"] body.cbx-theme-auto #cbx-popup-card {
    background-color: #ffffff !important;
    border: 1px solid var(--cbx-border-base) !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.22), 0 0 35px rgba(59, 130, 246, 0.12) !important;
}

html[data-theme="light"] body.cbx-theme-auto #cbx-popup-close {
    background: #f1f5f9 !important;
    border: 1px solid var(--cbx-border-strong) !important;
    color: #475569 !important;
}

html[data-theme="light"] body.cbx-theme-auto #cbx-popup-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.cbx-theme-auto #cbx-popup-card .cbx-popup-timer-box {
    background-color: #f8fafc !important;
    border: 1px solid var(--cbx-border-base) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #cbx-popup-card .cbx-popup-cta,
html[data-theme="light"] body.cbx-theme-auto #cbx-popup-card .cbx-popup-cta * {
    color: #ffffff !important;
}


/* ============================================================================
 * @section:hero — Hero Section, Glows, Capability Pills, Channel Tabs, Dual Devices
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto .dmw-hero-glow-left,
html[data-theme="light"] body.cbx-theme-auto .dmw-hero-glow-right {
    opacity: 0.45;
}

html[data-theme="light"] body.cbx-theme-auto #hero .cbx-capabilities-card {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: var(--cbx-border-base) !important;
    box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #hero .cbx-agents-row > span {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-strong) !important;
    color: var(--cbx-text-primary) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #hero .cbx-agents-row > span:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] body.cbx-theme-auto #hero .cbx-capabilities-row > span {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-base) !important;
    color: var(--cbx-text-secondary) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] body.cbx-theme-auto #hero .cbx-cta-row a[href="#video-showcase"] {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-strong) !important;
    color: var(--cbx-text-primary) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #hero .cbx-cta-row a[href="#video-showcase"]:hover {
    background-color: var(--cbx-surface-inner) !important;
}

html[data-theme="light"] body.cbx-theme-auto #hero .dmw-channel-tab {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-strong) !important;
    color: var(--cbx-text-secondary) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] body.cbx-theme-auto #hero .dmw-channel-tab.is-active,
html[data-theme="light"] body.cbx-theme-auto #hero .dmw-channel-tab.is-active:hover,
html[data-theme="light"] body.cbx-theme-auto #hero .dmw-channel-tab.is-active:focus {
    background: var(--cbx-brand-gradient) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto #hero .dmw-channel-tab.is-active .dmw-tab-label {
    color: #ffffff !important;
}

/* Hero ChatGPT window sits nicely on light canvas with soft shadow */
html[data-theme="light"] body.cbx-theme-auto .dmw-chatgpt-window {
    box-shadow:
        6px 8px 0px #cbd5e1,
        0 24px 48px -12px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] body.cbx-theme-auto .dmw-iphone-window {
    box-shadow:
        6px 8px 0px #cbd5e1,
        0 24px 48px -12px rgba(15, 23, 42, 0.18) !important;
}

/* Hero Status Pill (Live MCP Bridge) */
html[data-theme="light"] body.cbx-theme-auto .cbx-status-pill {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-card) !important;
}


/* ============================================================================
 * @section:video-showcase — Video Compare Toggle & Vietnamese YouTube Slider
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #video-showcase #hero-label-agentic {
    color: #7c3aed !important;
}

html[data-theme="light"] body.cbx-theme-auto #video-showcase #hero-label-normal {
    color: var(--cbx-text-muted) !important;
}

html[data-theme="light"] body.cbx-theme-auto #video-showcase #hero-video-frame,
html[data-theme="light"] body.cbx-theme-auto #video-showcase #vi-yt-player-frame {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-elevated) !important;
}

html[data-theme="light"] body.cbx-theme-auto #vi-youtube-tutorials .vi-yt-thumb-card {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-base) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] body.cbx-theme-auto #vi-youtube-tutorials .vi-yt-thumb-card:hover {
    border-color: var(--cbx-border-strong) !important;
    background-color: #f8fafc !important;
}

html[data-theme="light"] body.cbx-theme-auto #vi-youtube-tutorials .vi-yt-thumb-card.is-active {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
}

html[data-theme="light"] body.cbx-theme-auto #vi-youtube-tutorials .vi-yt-thumb-card p {
    color: var(--cbx-text-primary) !important;
}


/* ============================================================================
 * @section:partners — Partners Section & Badges (Keep Dark Mode Palette)
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #partners {
    background-color: #111827 !important;
    border-top: none !important;
    border-bottom: none !important;
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto #partners h2,
html[data-theme="light"] body.cbx-theme-auto #partners .h2 {
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto #partners span.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}


/* ============================================================================
 * @section:how-it-works — How ChatbotX Works
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #how-it-works > div {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #how-it-works > .border-border {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto #how-it-works .rounded-2xl.border-border {
    border-color: var(--cbx-border-base) !important;
    background-color: rgba(255, 255, 255, 0.72);
    box-shadow: var(--cbx-shadow-card);
}


/* ============================================================================
 * @section:channels — Omnichannel Connectivity Pill & Channel Tiles
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #channel-connectivity .channels-live-pill {
    background: var(--cbx-surface-pill) !important;
    border: 1px solid var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-card);
}

html[data-theme="light"] body.cbx-theme-auto #channel-connectivity .channels-live-pill__text {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #channel-connectivity .channels-live-pill__btn {
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto #channel-connectivity .hub-cell h3,
html[data-theme="light"] body.cbx-theme-auto #channel-connectivity .hub-cell p,
html[data-theme="light"] body.cbx-theme-auto #channel-connectivity .hub-cell * {
    color: #ffffff !important;
}


/* ============================================================================
 * @section:agentic-workspace — Copilot Inbox & Autonomous AI Workforce
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #copilot-inbox button.bg-blue-600 {
    background: var(--cbx-brand-gradient) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    color: #ffffff !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto #copilot-inbox button.bg-blue-600:hover {
    opacity: 0.93 !important;
    transform: translateY(-1px);
}

html[data-theme="light"] body.cbx-theme-auto #copilot-inbox button.bg-gray-700,
html[data-theme="light"] body.cbx-theme-auto #copilot-inbox .bg-gray-700,
html[data-theme="light"] body.cbx-theme-auto #agentic-workforce .bg-gray-700 {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid var(--cbx-border-strong) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #copilot-inbox button.bg-gray-700:hover,
html[data-theme="light"] body.cbx-theme-auto #copilot-inbox .bg-gray-700:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

html[data-theme="light"] body.cbx-theme-auto #copilot-inbox .font-mono,
html[data-theme="light"] body.cbx-theme-auto #agentic-workforce .cbx-surface-inner.font-mono {
    background-color: var(--cbx-code-bg) !important;
    border-color: var(--cbx-code-border) !important;
    color: #1e293b !important;
}


/* ============================================================================
 * @section:agent-automation — Agent Automation Bento Cards & Warm Code Boxes
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto .agent-card-wide,
html[data-theme="light"] body.cbx-theme-auto .agent-card-narrow {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: var(--cbx-shadow-card) !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-icon-badge {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame {
    background-color: var(--cbx-code-frame) !important;
    border: 1px solid var(--cbx-code-border) !important;
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .agent-code-box {
    background-color: var(--cbx-code-bg) !important;
    border: 1px solid var(--cbx-code-border) !important;
    color: #1e293b !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .agent-code-box::before {
    background: linear-gradient(to bottom, rgba(254, 252, 232, 0.9) 0%, rgba(254, 252, 232, 0) 100%) !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .copy-agent-cmd {
    background-color: #ffffff !important;
    border: 1px solid var(--cbx-code-border-strong) !important;
    color: #334155 !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .copy-agent-cmd:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-gray-300,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-gray-400,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-gray-500,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-white\/80 {
    color: #57534e !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-purple-200,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-purple-300,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-purple-400,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-indigo-200,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-indigo-400 {
    color: #6d28d9 !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-pink-200,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-pink-300,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-pink-400 {
    color: #be185d !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-blue-300,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-blue-400,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-cyan-200,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-cyan-400 {
    color: #1d4ed8 !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-emerald-300,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-emerald-400,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-teal-300,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-teal-400 {
    color: #047857 !important;
}

html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-amber-300,
html[data-theme="light"] body.cbx-theme-auto .agent-terminal-frame .text-amber-400 {
    color: #b45309 !important;
}


/* ============================================================================
 * @section:work-with-agents — Showcase Frame
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #work-with-ai-agents #work-ai-video-frame {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-elevated) !important;
}


/* ============================================================================
 * @section:dev-experience — Warm Light-Yellow Code Terminal (Classmoji Ref) & Buttons
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #developer-experience .max-w-4xl > div.rounded-2xl {
    background: var(--cbx-code-border-strong) !important;
    box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget {
    background-color: var(--cbx-code-bg) !important;
    border: 1px solid var(--cbx-code-border) !important;
    box-shadow: none !important;
    color: #1e293b !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget > div:first-child {
    background-color: var(--cbx-code-header) !important;
    border-bottom: 1px solid var(--cbx-code-border) !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .dev-tab-btn {
    color: #57534e !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .dev-tab-btn:hover {
    color: #0f172a !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .dev-tab-btn.active {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--cbx-code-border-strong) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget #dev-copy-btn {
    background-color: #ffffff !important;
    border-color: var(--cbx-code-border-strong) !important;
    color: #334155 !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget #dev-copy-btn:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-white,
html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-gray-300 {
    color: #1e293b !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-gray-400 {
    color: #475569 !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-gray-500 {
    color: #78716c !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-blue-400 {
    color: #1d4ed8 !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-purple-400 {
    color: #7e22ce !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-pink-400 {
    color: #be185d !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-emerald-400 {
    color: #047857 !important;
}

html[data-theme="light"] body.cbx-theme-auto #dev-terminal-widget .text-amber-400 {
    color: #b45309 !important;
}

html[data-theme="light"] body.cbx-theme-auto #developer-experience a.bg-gray-700 {
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto #developer-experience a.bg-gray-700:hover {
    background: #1e293b !important;
    transform: translateY(-1px);
}

html[data-theme="light"] body.cbx-theme-auto #developer-experience a.bg-gray-700 *,
html[data-theme="light"] body.cbx-theme-auto #developer-experience a.bg-gray-700 svg {
    color: #ffffff !important;
}


/* ============================================================================
 * @section:industries-roi — Industries & Maximize ROI
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #marketing-auto svg.w-6.h-6 {
    color: var(--cbx-text-accent) !important;
}

html[data-theme="light"] body.cbx-theme-auto #marketing-auto .bg-gray-800\/50 {
    background-color: var(--cbx-code-bg) !important;
    border-color: var(--cbx-code-border) !important;
}

html[data-theme="light"] body.cbx-theme-auto #marketing-auto .bg-gray-800\/50 p {
    color: #1e293b !important;
}

html[data-theme="light"] body.cbx-theme-auto #marketing-auto .bg-white\/10 {
    background-color: rgba(124, 58, 237, 0.12) !important;
    color: #6d28d9 !important;
}


/* ============================================================================
 * @section:case-studies — Case Studies Pagination Dots
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto .case-study-card {
    border-color: var(--cbx-border-strong) !important;
    box-shadow: var(--cbx-shadow-elevated) !important;
}

html[data-theme="light"] body.cbx-theme-auto .case-study-slider .carousel-dot {
    background-color: rgba(15, 23, 42, 0.25) !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] body.cbx-theme-auto .case-study-slider .carousel-dot:hover:not(.active) {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

html[data-theme="light"] body.cbx-theme-auto .case-study-slider .carousel-dot.active {
    background-color: #2563eb !important;
    border-color: #ffffff !important;
}


/* ============================================================================
 * @section:pricing — Pricing Grid, Sliders & Plan Cards
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto #pricing .chatbotx-pricing-range {
    background: #cbd5e1 !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing a.bg-gray-700,
html[data-theme="light"] body.cbx-theme-auto #pricing a.bg-gray-700 * {
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing a.bg-gray-700 {
    background: var(--cbx-brand-gradient) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing a.bg-gray-700:hover {
    opacity: 0.93 !important;
    transform: translateY(-1px);
}

html[data-theme="light"] body.cbx-theme-auto #pricing .cbx-surface-card .text-gray-200 {
    color: var(--cbx-text-muted) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing a.border-blue-500\/30 {
    background-color: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
    color: #2563eb !important;
}

/* Dedicated /pricing page Light Mode styling */
html[data-theme="light"] body.cbx-theme-auto #pricing .bg-blue-500\/10 {
    background-color: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.22) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing .text-blue-100 {
    color: #1d4ed8 !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing :not(.pricing-featured-card) > .popular-badge-container .popular-bubble {
    background: rgba(15, 23, 42, 0.07) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #334155 !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-previous],
html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-next] {
    background-color: #ffffff !important;
    border-color: var(--cbx-border-strong) !important;
    color: var(--cbx-text-primary) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-previous]:hover:not(:disabled),
html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-next]:hover:not(:disabled) {
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing .cbx-comparison-header-cell {
    background-color: var(--cbx-surface-card) !important;
    border: 1px solid var(--cbx-border-base) !important;
    color: var(--cbx-text-primary) !important;
    box-shadow: var(--cbx-shadow-card) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing .cbx-comparison-header-featured {
    background: var(--cbx-brand-gradient) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-container] tbody th[scope="row"] > div {
    color: var(--cbx-text-secondary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-container] tbody tr.group:hover th[scope="row"] > div {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-container] tbody td > div {
    background-color: var(--cbx-surface-card) !important;
    border: 1px solid var(--cbx-border-base) !important;
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-container] tbody td > div:hover {
    background-color: var(--cbx-surface-card-hover) !important;
    border-color: var(--cbx-border-strong) !important;
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-container] img[src$="infinity.svg"] {
    filter: brightness(0) opacity(0.8);
}

html[data-theme="light"] body.cbx-theme-auto #pricing [data-comparison-scroll-container] img[src$="tick.svg"] {
    filter: brightness(0.68) saturate(1.3);
}


/* ============================================================================
 * @section:community-faq — Community, FAQ Accordions & Newsletter
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto a[href*="discord.chatbotx.io"].bg-gray-700,
html[data-theme="light"] body.cbx-theme-auto a[href*="discord.chatbotx.io"].bg-gray-700 * {
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto a[href*="discord.chatbotx.io"].bg-gray-700 {
    background: var(--cbx-brand-gradient) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto a[href*="discord.chatbotx.io"].bg-gray-700:hover {
    opacity: 0.93 !important;
    transform: translateY(-1px);
}

html[data-theme="light"] body.cbx-theme-auto #faq .faq-item {
    background-color: var(--cbx-surface-card) !important;
    border-color: var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-card) !important;
}

html[data-theme="light"] body.cbx-theme-auto #faq .faq-item:hover {
    background-color: var(--cbx-surface-card-hover) !important;
    border-color: var(--cbx-border-strong) !important;
}

html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient #newsletter-email {
    color: #0f172a !important;
}

html[data-theme="light"] body.cbx-theme-auto #newsletter-submit,
html[data-theme="light"] body.cbx-theme-auto #newsletter-submit:disabled,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient #newsletter-submit,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient #newsletter-submit:disabled {
    background: #e2e8f0 !important;
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html[data-theme="light"] body.cbx-theme-auto #newsletter-submit:hover,
html[data-theme="light"] body.cbx-theme-auto .bg-brand-gradient #newsletter-submit:hover {
    background: #cbd5e1 !important;
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
    border: 0 !important;
    transform: translateY(-1px);
}


/* ============================================================================
 * @section:footer — Footer Surface, Columns, Social Icons & Scroll-To-Top Button
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto footer {
    background-color: var(--cbx-bg-page) !important;
    border-top: none !important;
}

html[data-theme="light"] body.cbx-theme-auto footer a.bg-gray-800 {
    background-color: #ffffff !important;
    border: 1px solid var(--cbx-border-base);
    color: var(--cbx-text-muted) !important;
}

html[data-theme="light"] body.cbx-theme-auto footer a.bg-gray-800:hover {
    background: var(--cbx-brand-gradient) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto footer a:hover,
html[data-theme="light"] body.cbx-theme-auto footer a.hover\:text-white:hover {
    color: var(--cbx-text-accent) !important;
}

html[data-theme="light"] body.cbx-theme-auto #scrollTopBtn {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--cbx-border-strong) !important;
    color: var(--cbx-text-primary) !important;
    box-shadow: var(--cbx-shadow-card);
}

/* Keep floating chat & discord pills styled with brand gradient & white icons in Light Mode */
html[data-theme="light"] body.cbx-theme-auto .discord-support-floating,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-chat-floating {
    background: var(--cbx-brand-gradient) !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    color: #ffffff !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.cbx-theme-auto .discord-support-floating::before,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-chat-floating::before {
    display: none !important;
}

html[data-theme="light"] body.cbx-theme-auto .discord-support-floating span,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-chat-floating span {
    color: #ffffff !important;
}

html[data-theme="light"] body.cbx-theme-auto .discord-support-floating img,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-chat-floating img {
    filter: brightness(0) invert(1) !important;
}


/* ============================================================================
 * @section:legal — Legal Pages (/terms, /privacy, /cookie-policy, /google-api-disclosure)
 * ============================================================================ */
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose {
    color: var(--cbx-text-secondary) !important;
    --tw-prose-body: var(--cbx-text-secondary);
    --tw-prose-headings: var(--cbx-text-primary);
    --tw-prose-bold: var(--cbx-text-primary);
    --tw-prose-links: var(--cbx-text-accent);
    --tw-prose-counters: var(--cbx-text-muted);
    --tw-prose-bullets: var(--cbx-text-muted);
    --tw-prose-invert-body: var(--cbx-text-secondary);
    --tw-prose-invert-headings: var(--cbx-text-primary);
    --tw-prose-invert-bold: var(--cbx-text-primary);
    --tw-prose-invert-links: var(--cbx-text-accent);
    --tw-prose-invert-counters: var(--cbx-text-muted);
    --tw-prose-invert-bullets: var(--cbx-text-muted);
}

html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose p,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose ul,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose ol,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose li,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose details div {
    color: var(--cbx-text-secondary) !important;
}

html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose ol > li::marker,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose ul > li::marker {
    color: var(--cbx-text-muted) !important;
}

html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose h1,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose h2,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose h3,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose h4,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose h5,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose h6,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose strong,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose b,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose summary,
html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose summary span {
    color: var(--cbx-text-primary) !important;
}

html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose a {
    color: var(--cbx-text-accent) !important;
}

html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose a:hover {
    color: #1d4ed8 !important;
}

html[data-theme="light"] body.cbx-theme-auto .chatbotx-legal-prose details {
    background-color: var(--cbx-surface-card) !important;
    border: 1px solid var(--cbx-border-base) !important;
    box-shadow: var(--cbx-shadow-card) !important;
}