/**
 * ValidaCheck icon system.
 * Keeps Elementor/Font Awesome, JetEngine and legacy VC icon wrappers aligned
 * without changing their semantic meaning or interaction.
 */
:root {
	--vc-icon-meta: 16px;
	--vc-icon-action: 18px;
	--vc-icon-nav: 20px;
	--vc-icon-state: 24px;
}

.elementor-icon,
.elementor-icon-list-icon,
.elementor-button-icon,
.jet-listing-dynamic-link__icon {
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	vertical-align: middle;
}

.elementor-icon {
	display: inline-flex;
}

.elementor-icon > i,
.elementor-icon > svg,
.elementor-icon-list-icon > i,
.elementor-icon-list-icon > svg,
.elementor-button-icon > i,
.elementor-button-icon > svg,
.jet-listing-dynamic-link__icon > i,
.jet-listing-dynamic-link__icon > svg {
	display: block;
	flex: none;
	margin: auto;
	line-height: 1 !important;
	vertical-align: middle;
}

:is([class^='vc'], [class*=' vc'])[class*='icon'] {
	align-items: center;
	justify-content: center;
	line-height: 1;
	vertical-align: middle;
}

:is([class^='vc'], [class*=' vc'])[class*='icon'] > :is(i, svg) {
	display: block;
	flex: none;
	margin: auto;
	line-height: 1;
	vertical-align: middle;
}

button > :is(i[class*='fa-'], svg),
a > :is(i[class*='fa-'], svg) {
	flex: none;
	line-height: 1;
	vertical-align: middle;
}

/* Runtime harmonization for Elementor, JetEngine, SureCart and legacy
 * ValidaCheck snippets. The glyph stays separate from the touch target. */
.vc-unified-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--vc-icon-action);
	width: var(--vc-icon-action);
	height: var(--vc-icon-action);
	margin: 0;
	font-size: calc(var(--vc-icon-action) - 2px);
	line-height: 1;
	vertical-align: middle;
}

.vc-unified-icon-box > i {
	display: block;
	width: 1em;
	margin: 0;
	line-height: 1;
	text-align: center;
}

:is(a, button).vc-icon-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

:is(nav, [class*='nav'], [class*='menu'], [class*='sidebar']) :is(a, button) > .vc-unified-icon-box {
	flex-basis: var(--vc-icon-nav);
	width: var(--vc-icon-nav);
	height: var(--vc-icon-nav);
	font-size: 18px;
}

:is([class*='meta'], [class*='detail'], [class*='breadcrumb']) .vc-unified-icon-box {
	flex-basis: var(--vc-icon-meta);
	width: var(--vc-icon-meta);
	height: var(--vc-icon-meta);
	font-size: 14px;
}

.vc-icon-aligned {
	flex: none;
	margin: 0;
	line-height: 1;
	vertical-align: middle;
}

:is(.vcf-app, .vcdb-app, .vcsa-shell, .vcw-workspace, .vcd-app, .vcma-app) :is(i.fas, i.far, i.fab) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
}

:is(.vcsa-side, .vcdb-sidebar, .vcf-sidebar, .vcd-sidebar) nav :is(i.fas, i.far, svg) {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	font-size: 18px;
}

.vcd-icon,
.vcw-icon,
.vcsa-nav-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	font-size: 16px;
}

/* React/Lucide icons in the Figma dashboard keep their approved shapes, but
 * use the same visual weight and optical centering as the Font Awesome set. */
.vcf-app svg:not([data-vc-brand-icon]) {
	stroke-width: 2.35;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

@media (max-width: 767px) {
	:root {
		--vc-icon-action: 17px;
		--vc-icon-nav: 18px;
		--vc-icon-state: 22px;
	}
}