.ffn3-social {
	--ffn3-surface: #f7edf6;
	--ffn3-gray: #8f9caf;
	--ffn3-size: 70px;
	--ffn3-gap: 20px;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: max-content !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 10px 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: visible !important;
	direction: rtl !important;
	line-height: 0 !important;
}

.ffn3-social,
.ffn3-social * {
	box-sizing: border-box !important;
}

.ffn3-list {
	display: flex !important;
	flex-flow: row nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: var(--ffn3-gap) !important;
	width: max-content !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

.ffn3-item {
	flex: 0 0 var(--ffn3-size) !important;
	width: var(--ffn3-size) !important;
	height: var(--ffn3-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ffn3-link {
	--ffn3-brand: #229ed9;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--ffn3-surface) !important;
	color: var(--ffn3-gray) !important;
	text-decoration: none !important;
	box-shadow:
		-4px -4px 9px rgba(255,255,255,.78),
		 4px  4px 10px rgba(0,85,131,.13) !important;
	outline: 0 !important;
	-webkit-tap-highlight-color: transparent !important;
}

.ffn3-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	transition:
		width .16s ease,
		height .16s ease,
		box-shadow .16s ease,
		color .16s ease !important;
}

.ffn3-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 27px !important;
	height: 27px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	pointer-events: none !important;
}

.ffn3-icon svg,
.ffn3-icon img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	object-fit: contain !important;
	object-position: center !important;
}

.ffn3-icon svg {
	overflow: visible !important;
	fill: currentColor !important;
}

.ffn3-brand-image {
	filter: grayscale(1) saturate(0) opacity(.56) !important;
	transition: filter .16s ease !important;
}

.ffn3-link:hover,
.ffn3-link:focus-visible,
.ffn3-link:active {
	color: var(--ffn3-brand) !important;
}

.ffn3-link:hover .ffn3-inner,
.ffn3-link:focus-visible .ffn3-inner,
.ffn3-link:active .ffn3-inner {
	width: 55px !important;
	height: 55px !important;
	background: var(--ffn3-surface) !important;
	box-shadow:
		inset -3px -3px 7px rgba(255,255,255,.70),
		inset  3px  3px 7px rgba(0,85,131,.15) !important;
}

.ffn3-link:hover .ffn3-icon,
.ffn3-link:focus-visible .ffn3-icon,
.ffn3-link:active .ffn3-icon {
	width: 24px !important;
	height: 24px !important;
}

.ffn3-link:hover .ffn3-brand-image,
.ffn3-link:focus-visible .ffn3-brand-image,
.ffn3-link:active .ffn3-brand-image {
	filter: none !important;
}

.ffn3-link:focus-visible {
	outline: 2px solid #005583 !important;
	outline-offset: 4px !important;
}

.ffn3-telegram { --ffn3-brand: #229ed9; }
.ffn3-instagram { --ffn3-brand: #e1306c; }
.ffn3-whatsapp { --ffn3-brand: #25d366; }
.ffn3-facebook { --ffn3-brand: #4267b2; }
.ffn3-bale { --ffn3-brand: #21b8a6; }
.ffn3-aparat { --ffn3-brand: #f6125d; }

@media (max-width: 767px) {
	.ffn3-social {
		--ffn3-size: clamp(38px, 11.2vw, 44px) !important;
		--ffn3-gap: clamp(3px, 1.2vw, 5px) !important;
		width: max-content !important;
		max-width: min(100%, calc(100vw - 20px)) !important;
		padding: 7px 0 !important;
		background: transparent !important;
		border-radius: 0 !important;
	}

	.ffn3-list {
		flex-wrap: nowrap !important;
	}

	.ffn3-link:hover .ffn3-inner,
	.ffn3-link:focus-visible .ffn3-inner,
	.ffn3-link:active .ffn3-inner {
		width: 79% !important;
		height: 79% !important;
	}

	.ffn3-icon {
		width: 39% !important;
		height: 39% !important;
	}

	.ffn3-link:hover .ffn3-icon,
	.ffn3-link:focus-visible .ffn3-icon,
	.ffn3-link:active .ffn3-icon {
		width: 35% !important;
		height: 35% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ffn3-inner,
	.ffn3-brand-image {
		transition: none !important;
	}
}