/*
 * JFMX frontend theme bridge.
 *
 * This layer deliberately targets only JFMX component roots. It lets the
 * active theme provide typography and a shared palette without changing the
 * layout or the business-specific states owned by each module.
 */

body.jfmx-ecosystem-frontend :is(
	.jfmx-ce-shell,
	.jfpc-frontend-wrap,
	.jfgb-active-board,
	.jfgb-builder-shell,
	.jf-import-catalog,
	.jfqt-wrap,
	.jfqt-price-checker,
	.jf-pro-slider,
	.jf-pro-game,
	.jf-pro-header,
	.jf-ps-wrap,
	.jfmx-zone-chat
) {
	color: var(--jfmx-theme-text);
	font-family: inherit;
}

body.jfmx-ecosystem-frontend :is(
	.jfmx-ce-shell,
	.jfpc-frontend-wrap,
	.jfgb-active-board,
	.jfgb-builder-shell,
	.jf-import-catalog,
	.jfqt-wrap,
	.jfqt-price-checker,
	.jf-pro-slider,
	.jf-pro-game,
	.jf-pro-header,
	.jf-ps-wrap,
	.jfmx-zone-chat
) :is(button, input, select, textarea) {
	font-family: inherit;
}

body.jfmx-ecosystem-frontend :is(
	.jfmx-ce-shell,
	.jfpc-frontend-wrap,
	.jfgb-active-board,
	.jfgb-builder-shell,
	.jf-import-catalog,
	.jfqt-wrap,
	.jfqt-price-checker
) :is(a, button, input, select, textarea):focus-visible {
	outline-color: var(--jfmx-theme-primary);
	outline-offset: 2px;
}

/* Customer Experience already exposes variables; map them to the theme. */
body.jfmx-ecosystem-frontend .jfmx-ce-shell {
	--jfmx-ce-primary: var(--jfmx-theme-primary);
	--jfmx-ce-secondary: var(--jfmx-theme-secondary);
	--jfmx-ce-surface: var(--jfmx-theme-surface);
	--jfmx-ce-muted: var(--jfmx-theme-muted);
	--jfmx-ce-border: var(--jfmx-theme-border);
}

body.jfmx-ecosystem-frontend .jfmx-ce-shell .jfmx-ce-button:not(.jfmx-ce-button--ghost, .jfmx-ce-button--secondary, .jfmx-ce-button--link, .jfmx-ce-button--whatsapp),
body.jfmx-ecosystem-frontend .jfmx-ce-shell .jfmx-ce-favorite-button.is-saved {
	background: var(--jfmx-theme-primary);
	border-color: var(--jfmx-theme-primary);
	color: #fff;
}

body.jfmx-ecosystem-frontend :is(.jfmx-ce-header-account-link, .jfmx-ce-favorite-button) {
	background: var(--jfmx-theme-primary);
	border-color: var(--jfmx-theme-primary);
	color: #fff;
	font-family: inherit;
}

body.jfmx-ecosystem-frontend :is(.jfmx-ce-header-account-link, .jfmx-ce-favorite-button):hover {
	background: var(--jfmx-theme-primary-dark);
	color: #fff;
}

body.jfmx-ecosystem-frontend .jfmx-ce-shell .jfmx-ce-button:not(.jfmx-ce-button--whatsapp):hover {
	border-color: var(--jfmx-theme-primary-dark);
}

/* Commercial Participation: preserve its grids while sharing brand chrome. */
body.jfmx-ecosystem-frontend .jfpc-frontend-wrap :is(h1, h2, h3, .jfpc-brand-text strong) {
	color: var(--jfmx-theme-secondary);
	font-family: inherit;
}

body.jfmx-ecosystem-frontend .jfpc-frontend-wrap :is(.jfpc-eyebrow, .jfpc-page-header p, .jfpc-brand-text span) {
	color: var(--jfmx-theme-muted);
}

body.jfmx-ecosystem-frontend .jfpc-frontend-wrap :is(.jfpc-card, .jfpc-empty-box) {
	background: var(--jfmx-theme-surface);
	border-color: var(--jfmx-theme-border);
}

body.jfmx-ecosystem-frontend .jfpc-frontend-wrap .jfpc-btn-primary {
	background: var(--jfmx-theme-secondary);
	color: #fff;
}

body.jfmx-ecosystem-frontend .jfpc-frontend-wrap .jfpc-btn-primary:hover {
	background: var(--jfmx-theme-primary);
	color: #fff;
}

body.jfmx-ecosystem-frontend .jfpc-frontend-wrap .jfpc-btn-secondary {
	background: var(--jfmx-theme-surface);
	border-color: var(--jfmx-theme-border);
	color: var(--jfmx-theme-secondary);
}

/* Gift Builder public surfaces. */
body.jfmx-ecosystem-frontend :is(.jfgb-active-board, .jfgb-builder-shell) :is(h1, h2, h3) {
	color: var(--jfmx-theme-secondary);
	font-family: inherit;
}

body.jfmx-ecosystem-frontend :is(.jfgb-active-board, .jfgb-builder-shell) :is(
	.jfgb-board-card,
	.jfgb-board-empty,
	.jfgb-summary,
	.jfgb-step-nav,
	.jfgb-component-card,
	.jfgb-selected-card
) {
	background: var(--jfmx-theme-surface);
	border-color: var(--jfmx-theme-border);
}

body.jfmx-ecosystem-frontend :is(.jfgb-board-action, .jfgb-board-detail),
body.jfmx-ecosystem-frontend .jfgb-builder-shell .jfgb-section-title > span {
	background: var(--jfmx-theme-primary);
	border-color: var(--jfmx-theme-primary);
	color: #fff;
}

body.jfmx-ecosystem-frontend .jfgb-builder-shell :is(.jfgb-step-nav a, .jfgb-category-nav a) {
	background: var(--jfmx-theme-surface-soft);
	border-color: var(--jfmx-theme-border);
	color: var(--jfmx-theme-secondary);
}

body.jfmx-ecosystem-frontend .jfgb-builder-shell :is(.jfgb-step-nav a, .jfgb-category-nav a):hover {
	background: var(--jfmx-theme-surface);
	border-color: var(--jfmx-theme-primary);
	color: var(--jfmx-theme-primary-dark);
}

/* Import catalog cards use the theme's neutral surfaces and link color. */
body.jfmx-ecosystem-frontend .jf-import-catalog .jf-import-card {
	background: var(--jfmx-theme-surface);
	border-color: var(--jfmx-theme-border);
}

body.jfmx-ecosystem-frontend .jf-import-catalog :is(.jf-import-title, .jf-import-price) {
	color: var(--jfmx-theme-secondary);
	font-family: inherit;
}

body.jfmx-ecosystem-frontend .jf-import-catalog :is(.jf-import-detail, .jf-import-pagination a) {
	color: var(--jfmx-theme-primary-dark);
}

body.jfmx-ecosystem-frontend .jf-import-catalog .jf-import-thumb-button:focus-visible {
	outline-color: var(--jfmx-theme-primary);
}

/* Quick Tickets retains its operational layout but no longer looks alien. */
body.jfmx-ecosystem-frontend .jfqt-price-checker,
body.jfmx-ecosystem-frontend .jfqt-wrap :is(.jfqt-card, .jfqt-global-discount) {
	background: var(--jfmx-theme-surface);
	border-color: var(--jfmx-theme-border);
}

body.jfmx-ecosystem-frontend .jfqt-wrap .jfqt-tab.is-active {
	background: var(--jfmx-theme-secondary);
	color: #fff;
}

body.jfmx-ecosystem-frontend .jfqt-wrap :is(.button-primary, .jfqt-submit, .jfqt-save) {
	background: var(--jfmx-theme-primary);
	border-color: var(--jfmx-theme-primary);
	color: #fff;
}

body.jfmx-ecosystem-frontend :is(.jfqt-wrap, .jfqt-price-checker) :is(input, select, textarea) {
	border-color: var(--jfmx-theme-border);
	color: var(--jfmx-theme-text);
}

/* Theme-aware variants keep their layouts and consume the shared palette. */
body.jfmx-ecosystem-frontend :is(.jf-pro-slider-theme-site, .jf-pro-slider-theme-tema-sitio) {
	--jf-accent: var(--jfmx-theme-primary);
	--jf-text: var(--jfmx-theme-secondary);
	--jf-muted: var(--jfmx-theme-muted);
	font-family: inherit;
}

body.jfmx-ecosystem-frontend .jf-pro-header :is(.jf-pro-header__title, .jf-pro-header__subtitle, .jf-pro-header__button) {
	font-family: inherit;
}

body.jfmx-ecosystem-frontend .jf-pro-header .jf-pro-header__button--primary {
	background: var(--jfmx-theme-primary);
}

body.jfmx-ecosystem-frontend .jf-ps-wrap.jf-theme-brand {
	--jf-accent: var(--jfmx-theme-primary);
	--jf-heading: var(--jfmx-theme-secondary);
	--jf-text: var(--jfmx-theme-text);
	--jf-muted: var(--jfmx-theme-muted);
	--jf-border: var(--jfmx-theme-border);
	font-family: inherit;
}

/* Ads remain layout-neutral; only interactive preference controls are themed. */
body.jfmx-ecosystem-frontend .jfmx-zone-chat__panel {
	color: var(--jfmx-theme-text);
	font-family: inherit;
}

body.jfmx-ecosystem-frontend .jfmx-zone-chat__panel select {
	border-color: var(--jfmx-theme-border);
	color: var(--jfmx-theme-text);
}

body.jfmx-ecosystem-frontend .jfmx-zone-chat__save {
	background: var(--jfmx-theme-primary);
	color: #fff;
}

body.jfmx-ecosystem-frontend .jfmx-zone-chat__launcher {
	background: var(--jfmx-theme-secondary);
	color: #fff;
}

body.jfmx-ecosystem-frontend .jfmx-zone-chat__launcher:hover,
body.jfmx-ecosystem-frontend .jfmx-zone-chat__launcher:focus {
	background: var(--jfmx-theme-primary);
}

@media (prefers-reduced-motion: reduce) {
	body.jfmx-ecosystem-frontend :is(
		.jfmx-ce-shell,
		.jfpc-frontend-wrap,
		.jfgb-active-board,
		.jfgb-builder-shell,
		.jf-import-catalog,
		.jfqt-wrap,
		.jfqt-price-checker
	) *,
	body.jfmx-ecosystem-frontend :is(
		.jfmx-ce-shell,
		.jfpc-frontend-wrap,
		.jfgb-active-board,
		.jfgb-builder-shell,
		.jf-import-catalog,
		.jfqt-wrap,
		.jfqt-price-checker
	) *::before,
	body.jfmx-ecosystem-frontend :is(
		.jfmx-ce-shell,
		.jfpc-frontend-wrap,
		.jfgb-active-board,
		.jfgb-builder-shell,
		.jf-import-catalog,
		.jfqt-wrap,
		.jfqt-price-checker
	) *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}