/**
 * Social Share Actions -- Frontend Styles
 *
 * Reuses TheGem Social Sharing's own class names (.socials-sharing,
 * .socials-item, .socials-item-icon) unprefixed, so a single site-wide
 * CSS override targeting those bare classes restyles both widgets
 * identically. Only the outer wrapper (.ssa-container-47b423ec) and the
 * rules in this file carry the hash suffix, so this structural CSS never
 * leaks onto TheGem's own widget instances elsewhere on the site, and
 * TheGem's own site-wide .socials-sharing/.socials-item CSS never reaches
 * in here uninvited either -- see the widget class docblock.
 *
 * Icon Size below reuses TheGem's own tiny/small/medium/large/xlarge
 * modifier classes and pixel scale (16/24/48/96/144px, confirmed from
 * thegem-widgets.css) -- expressed there as font-size (icon font),
 * expressed here as width/height (icons are uploaded SVGs applied as a
 * CSS mask on .ssa-icon-47b423ec).
 */

.elementor-widget-social_share_actions_47b423ec,
.elementor-widget-social_share_actions_47b423ec > .elementor-widget-container {
	width: 100%;
}

.ssa-container-47b423ec {
	--ssa-copy-icon-47b423ec: none;
	--ssa-print-icon-47b423ec: none;
}

.ssa-container-47b423ec .socials-sharing ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssa-container-47b423ec .socials-sharing ul li {
	list-style: none;
}

.ssa-container-47b423ec .socials-item {
	position: relative; /* anchors the Copy Link tooltip */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

/* ---------- Icon mask ---------- */
.ssa-icon-47b423ec {
	position: relative;
	display: block;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.ssa-icon-47b423ec.copy-link {
	mask-image: var( --ssa-copy-icon-47b423ec );
	-webkit-mask-image: var( --ssa-copy-icon-47b423ec );
}

.ssa-icon-47b423ec.print-page {
	mask-image: var( --ssa-print-icon-47b423ec );
	-webkit-mask-image: var( --ssa-print-icon-47b423ec );
}

/* ---------- Icon Size scale -- matches TheGem Social Sharing's own tiers ---------- */
.ssa-container-47b423ec.socials-sharing--tiny .ssa-icon-47b423ec {
	width: 16px;
	height: 16px;
}

.ssa-container-47b423ec.socials-sharing--small .ssa-icon-47b423ec {
	width: 24px;
	height: 24px;
}

.ssa-container-47b423ec.socials-sharing--medium .ssa-icon-47b423ec {
	width: 48px;
	height: 48px;
}

.ssa-container-47b423ec.socials-sharing--large .ssa-icon-47b423ec {
	width: 96px;
	height: 96px;
}

.ssa-container-47b423ec.socials-sharing--xlarge .ssa-icon-47b423ec {
	width: 144px;
	height: 144px;
}

/* ---------- Copy Link tooltip ---------- */
.ssa-tooltip-47b423ec {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-bottom: 8px;
	padding: 4px 10px;
	white-space: nowrap;
	font-size: 12px;
	line-height: 1.4;
	background: #1e1e1e;
	color: #ffffff;
	border-radius: 4px;
	opacity: 0;
	transform: translate( -50%, 4px );
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.ssa-copy-link-47b423ec.ssa-tooltip-visible-47b423ec .ssa-tooltip-47b423ec {
	opacity: 1;
	transform: translate( -50%, 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ssa-tooltip-47b423ec {
		transition: none;
	}
}

/* ---------- Editor-only placeholder notice ---------- */
.ssa-editor-notice-47b423ec {
	padding: 40px 20px;
	margin-bottom: 20px;
	background: #fff4e5;
	border: 1px dashed #d9822b;
	color: #7a4a05;
	font-size: 14px;
}