/**
 * Font Awesome Pro 6 - Duotone Style
 * 
 * Duotone icons MUST use Font Awesome's native classes to work properly.
 * This loads the Font Awesome CSS with icon definitions.
 */

/* Load Font Awesome complete CSS with icon mappings and duotone styles */
@import url('../fontawesome_pro/css/all.min.css');

/* Additional styling for SiteOrigin compatibility */
.sow-icon-fontawesome_pro_duotone {
	display: inline-block;
	width: 1.25em;
	text-align: center;
}

/* Fix for icon alignment in widgets */
.siteorigin-widget-field .sow-icon-fontawesome_pro_duotone,
.siteorigin-widget-field .fa-duotone {
	width: 1.25em;
	text-align: center;
	display: inline-block;
}

/* Admin icon selector specific fixes ONLY */
.siteorigin-widget-icon-icons-icon .fa-duotone {
	font-family: "Font Awesome 6 Duotone" !important;
	font-weight: 900 !important;
	font-size: 35px !important;
	width: 1.25em;
	height: 1.25em;
	line-height: 1.25;
	text-align: center;
	display: inline-block !important;
	position: relative !important;
}

/* Force the duotone pseudo-elements to work in admin */
.siteorigin-widget-icon-icons-icon .fa-duotone::before {
	content: var(--fa) !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	font-family: "Font Awesome 6 Duotone" !important;
	font-weight: 900 !important;
	opacity: 1 !important;
	z-index: 2 !important;
}

.siteorigin-widget-icon-icons-icon .fa-duotone::after {
	content: var(--fa--fa) !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	font-family: "Font Awesome 6 Duotone" !important;
	font-weight: 900 !important;
	opacity: 0.4 !important;
	z-index: 1 !important;
}

/* Ensure proper styling in the icon selector grid */
.siteorigin-widget-icon-icons-icon {
	position: relative;
}