/**
 * Comparix Pro — Cross-ecosystem UI consistency (Light / Dark)
 * Loaded last on all Comparix views. Design-only — no layout/logic changes.
 */

/* ── Product single root — token-based shell ── */
#cx-product-root {
	background: var(--cx-bg, #f8fafc);
	color: var(--cx-text, #0f172a);
}

#cx-product-root .cx-section {
	background: var(--cx-card, #fff);
	color: var(--cx-text, #0f172a);
}

#cx-product-root .cx-spec-row:nth-child(odd) {
	background: var(--cx-bg, #f8fafc);
}

/* ── Compare bar thumbnails ── */
.cx-bar-item img {
	background: var(--cx-card, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 Premium pages — Light mode token overrides
   ═══════════════════════════════════════════════════════════════════════════ */

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-archive-wrap.cx-archive-v4,
:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .post-type-archive-comparix_product .cx-archive-wrap {
	--cx-ar-bg: #f8fafc;
	--cx-ar-surface: #ffffff;
	--cx-ar-surface-2: #f1f5f9;
	--cx-ar-border: rgba(15, 23, 42, 0.08);
	--cx-ar-border-strong: rgba(15, 23, 42, 0.14);
	--cx-ar-text: #0f172a;
	--cx-ar-muted: #64748b;
	--cx-ar-soft: #94a3b8;
	--cx-ar-glass: rgba(255, 255, 255, 0.92);
	--cx-ar-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
	--cx-bg: var(--cx-ar-bg);
	--cx-card: var(--cx-ar-surface);
	--cx-border: var(--cx-ar-border);
	--cx-text: var(--cx-ar-text);
	--cx-g50: #f8fafc;
	--cx-g100: #f1f5f9;
	--cx-g400: #94a3b8;
	--cx-g500: #64748b;
	--cx-g700: #334155;
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-home {
	--cx-bd-bg: #f8fafc;
	--cx-bd-bg-elevated: #ffffff;
	--cx-bd-surface: #ffffff;
	--cx-bd-surface-hover: #f1f5f9;
	--cx-bd-border: rgba(15, 23, 42, 0.08);
	--cx-bd-border-strong: rgba(15, 23, 42, 0.14);
	--cx-bd-text: #0f172a;
	--cx-bd-text-muted: #64748b;
	--cx-bd-text-soft: #94a3b8;
	--cx-bd-glass: rgba(255, 255, 255, 0.92);
	--cx-bd-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
	--cx-bd-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.1);
	--cx-bg: var(--cx-bd-bg);
	--cx-card: var(--cx-bd-surface);
	--cx-border: var(--cx-bd-border);
	--cx-text: var(--cx-bd-text);
	--cx-g50: #f8fafc;
	--cx-g100: #f1f5f9;
	--cx-g400: #94a3b8;
	--cx-g500: #64748b;
	--cx-g600: #475569;
	--cx-g700: #334155;
	background: var(--cx-bd-bg);
	color: var(--cx-bd-text);
}

/* Homepage hero — light mode (hero gradient + text must match tokens) */
:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-hero {
	background:
		radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99, 102, 241, 0.16), transparent 55%),
		radial-gradient(ellipse 50% 40% at 100% 0%, rgba(139, 92, 246, 0.1), transparent 50%),
		linear-gradient(180deg, #eef2ff 0%, var(--cx-bd-bg, #f8fafc) 72%);
	border-bottom-color: var(--cx-bd-border);
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-hero-glow {
	background: radial-gradient(circle at 70% 30%, rgba(99, 102, 241, 0.1), transparent 45%);
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-hero h1 {
	color: var(--cx-bd-text, #0f172a);
	max-width: none;
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-hero p {
	color: var(--cx-g700, #334155);
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-hero-badge {
	color: #4338ca;
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.24);
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-hero .cx-bd-hero-compare {
	background: #fff;
	color: var(--cx-bd-text, #0f172a);
	border-color: var(--cx-bd-border-strong);
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-trending__label {
	color: var(--cx-g600, #475569);
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-trending__tag {
	color: var(--cx-g700, #334155);
	background: #fff;
	border-color: var(--cx-bd-border-strong);
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-bd-trending__tag:hover {
	color: var(--cx-bd-text, #0f172a);
	border-color: rgba(99, 102, 241, 0.35);
	background: rgba(99, 102, 241, 0.08);
}

/* Homepage hero — dark mode subtitle/trending contrast (mobile readability) */
:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-bd-hero p {
	color: #cbd5e1;
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-bd-trending__label {
	color: #94a3b8;
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-bd-trending__tag {
	color: #e2e8f0;
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(148, 163, 184, 0.32);
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-bd-hero-search__icon {
	color: #94a3b8;
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-bd-hero-search input::placeholder {
	color: #94a3b8;
}

:is([data-theme="light"], html.cx-theme-scheme-light, body.cx-theme-scheme-light) .cx-cmp-page {
	--cx-cmp-bg: #f8fafc;
	--cx-cmp-surface: #fff;
	--cx-cmp-surface-2: #f1f5f9;
	--cx-cmp-border: rgba(15, 23, 42, 0.08);
	--cx-cmp-border-strong: rgba(15, 23, 42, 0.14);
	--cx-cmp-text: #0f172a;
	--cx-cmp-muted: #64748b;
	--cx-cmp-soft: #94a3b8;
	--cx-cmp-glass: rgba(255, 255, 255, 0.92);
	--cx-cmp-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
	--cx-bg: var(--cx-cmp-bg);
	--cx-card: var(--cx-cmp-surface);
	--cx-border: var(--cx-cmp-border);
	--cx-text: var(--cx-cmp-text);
	background: var(--cx-cmp-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Search / Finder — dark mode hardcoded accent fixes
   ═══════════════════════════════════════════════════════════════════════════ */

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-filter-chip,
html.cx-theme-scheme-dark .cx-filter-chip {
	background: color-mix(in srgb, var(--cx-primary, #6366f1) 14%, var(--cx-card, #111827));
	color: var(--cx-primary, #818cf8);
	border-color: color-mix(in srgb, var(--cx-primary, #6366f1) 28%, var(--cx-border, #1e293b));
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-search-skeleton,
html.cx-theme-scheme-dark .cx-search-skeleton {
	background: linear-gradient(90deg, var(--cx-g100, #1a2438) 25%, var(--cx-card, #141c2e) 50%, var(--cx-g100, #1a2438) 75%);
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-search-card__type,
:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-finder-comp-card__badge,
html.cx-theme-scheme-dark .cx-search-card__type,
html.cx-theme-scheme-dark .cx-finder-comp-card__badge {
	background: color-mix(in srgb, #f59e0b 18%, var(--cx-card, #141c2e));
	color: #fbbf24;
	border-color: color-mix(in srgb, #f59e0b 28%, transparent);
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-search-card .cx-card-compare,
html.cx-theme-scheme-dark .cx-search-card .cx-card-compare {
	border-color: var(--cx-border, #334155);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page sections — token-based surfaces (all contexts)
   ═══════════════════════════════════════════════════════════════════════════ */

.cx-finder-section,
.cx-ar-section {
	background: var(--cx-card, #fff);
	border-color: var(--cx-border, #e2e8f0);
	color: var(--cx-text, #0f172a);
}

.cx-finder-section__title,
.cx-ar-section__title {
	color: var(--cx-text, #0f172a);
}

.cx-finder-section__sub,
.cx-ar-section__sub {
	color: var(--cx-g500, #64748b);
}

.cx-finder-brand-card,
.cx-finder-comp-card {
	background: var(--cx-card, #fff);
	border-color: var(--cx-border, #e2e8f0);
	color: var(--cx-text, #0f172a);
}

.cx-finder-comp-card__badge {
	background: color-mix(in srgb, #f59e0b 16%, var(--cx-card, #fff));
	color: #b45309;
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-finder-comp-card__badge,
html.cx-theme-scheme-dark .cx-finder-comp-card__badge {
	background: color-mix(in srgb, #f59e0b 18%, var(--cx-card, #141c2e));
	color: #fbbf24;
}

#cx-product-root .cx-finder-section,
#cx-product-root .cx-ar-section,
#cx-product-root .cx-finder-comp-card {
	background: var(--cx-card, #fff) !important;
	border-color: var(--cx-border, #e2e8f0) !important;
	color: var(--cx-text, #0f172a) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Platform / brand / rankings / compare-archive shells
   ═══════════════════════════════════════════════════════════════════════════ */

.cx-platform-page,
.cx-brand-index,
.cx-compare-archive,
.cx-rank-hero {
	background: var(--cx-bg, #f8fafc);
	color: var(--cx-text, #0f172a);
}

.cx-platform-inner,
.cx-brand-index-card,
.cx-compare-archive-card,
.cx-rank-card {
	background: var(--cx-card, #fff);
	border-color: var(--cx-border, #e2e8f0);
	color: var(--cx-text, #0f172a);
}

.cx-compare-winner-badge {
	color: var(--cx-text, #0f172a);
}

:is([data-theme="dark"], html.cx-theme-scheme-dark, body.cx-theme-scheme-dark) .cx-compare-winner-badge,
html.cx-theme-scheme-dark .cx-compare-winner-badge {
	color: #6ee7b7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navigation — theme scheme dark parity (plugin nav)
   ═══════════════════════════════════════════════════════════════════════════ */

html.cx-theme-scheme-dark .cx-nav-header,
html.cx-theme-scheme-dark .cx-nav-bottom,
html.cx-theme-scheme-dark .cx-nav-mega-panel,
html.cx-theme-scheme-dark .cx-nav-search-panel,
html.cx-theme-scheme-dark .cx-nav-qa-panel,
body.cx-theme-scheme-dark .cx-nav-header,
body.cx-theme-scheme-dark .cx-nav-bottom,
body.cx-theme-scheme-dark .cx-nav-mega-panel,
body.cx-theme-scheme-dark .cx-nav-search-panel,
body.cx-theme-scheme-dark .cx-nav-qa-panel {
	--cx-nav-bg: var(--cx-dm-card, #1e293b);
	--cx-nav-text: var(--cx-dm-text, #e2e8f0);
	--cx-nav-icon-color: #e2e8f0;
	--cx-nav-icon-border: #334155;
	--cx-nav-icon-bg: #1e293b;
	--cx-nav-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	border-color: var(--cx-dm-border, #334155);
}

@media (prefers-color-scheme: dark) {
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark) .cx-nav-header,
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark) .cx-nav-bottom {
		--cx-nav-bg: #1e293b;
		--cx-nav-text: #e2e8f0;
		--cx-nav-icon-color: #e2e8f0;
		--cx-nav-icon-border: #334155;
		--cx-nav-icon-bg: #1e293b;
		border-color: #334155;
	}
}

/* Premium search overlay — scheme dark */
html.cx-theme-scheme-dark .cx-ps__panel,
html.cx-theme-scheme-dark .cx-ps__backdrop,
body.cx-theme-scheme-dark .cx-ps__panel,
body.cx-theme-scheme-dark .cx-ps__backdrop {
	background: var(--cx-theme-surface, #111827);
	border-color: var(--cx-theme-border, #1e293b);
}

/* Auto dark — search accents */
@media (prefers-color-scheme: dark) {
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark) .cx-filter-chip {
		background: color-mix(in srgb, var(--cx-primary, #6366f1) 14%, var(--cx-card, #111827));
		color: var(--cx-primary, #818cf8);
	}

	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark) .cx-finder-comp-card__badge,
	html:not(.cx-theme-scheme-light):not(.cx-theme-scheme-dark) .cx-search-card__type {
		background: color-mix(in srgb, #f59e0b 18%, var(--cx-card, #141c2e));
		color: #fbbf24;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cx-theme-header__icon-btn,
	.cx-nav-theme-btn,
	.cx-finder-brand-card,
	.cx-finder-comp-card {
		transition: none;
	}
}