.spectre-icon--rendered {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	color: inherit;
}

.spectre-icon--rendered svg {
	width: 100%;
	height: 100%;
	display: block;
	/* Ensure Elementor color controls propagate to the inline SVG */
	color: inherit;
	fill: currentColor;
	stroke: currentColor;
}

/* Extra specificity for Elementor icon list items */
.elementor-icon-list-icon .spectre-icon--rendered,
.elementor-icon-list-icon .spectre-icon--rendered svg {
	color: inherit;
	fill: currentColor;
	stroke: currentColor;
}

/* Elementor social icons (respect icon + background colors) */
.elementor-social-icon .spectre-icon--rendered {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: 1;
	vertical-align: middle;
}

.elementor-social-icon .spectre-icon--rendered svg {
	/* Inherit color from parent .elementor-social-icon which has the color set */
	color: inherit !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

/* Force white icon when using Official Color branding (not custom colors) */
.elementor-social-icons-wrapper:not([class*="elementor-social-icon-style-custom"]) .elementor-view-stacked .spectre-icon--rendered svg,
.elementor-social-icons-wrapper:not([class*="elementor-social-icon-style-custom"]) .elementor-view-framed .spectre-icon--rendered svg {
	color: #fff !important;
	fill: #fff !important;
	stroke: #fff !important;
}

/* When custom color is set via inline style, let it inherit */
.elementor-social-icon[style*="color"] .spectre-icon--rendered svg {
	color: inherit !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

/* Override for outline icons in social widget */
.elementor-social-icon .spectre-icon--style-outline svg {
	fill: none !important;
	stroke: currentColor !important;
}

/* Override for filled icons in social widget */
.elementor-social-icon .spectre-icon--style-filled svg {
	fill: currentColor !important;
	stroke: none !important;
}

/* Outline style icons (Lucide) */
.spectre-icon--style-outline svg,
.spectre-icon--style-outline svg * {
	/* Elementor core forces .elementor-icon svg { fill: currentColor } so override aggressively */
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Filled style icons (Font Awesome) */
.spectre-icon--style-filled svg {
	fill: currentColor;
	stroke: none;
}

/* Ensure proper sizing in Elementor */
.elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.elementor-icon .spectre-icon--rendered {
	width: 100%;
	height: 100%;
}

/* Sidebar control (icon picker) sizing for social icons */
.elementor-control-social_icon .spectre-icon--rendered {
	width: 1.5em;
	height: 1.5em;
}

/* Prevent repeater list icon margin from shrinking SVG */
.elementor-control-type-repeater .elementor-repeater-row-tools .elementor-repeater-row-item-title .spectre-icon--rendered svg {
	margin-inline-end: 5px;
	width: 1em;
	height: 1em;
}