/*
 * Footer structure and footer content blocks for the FusionCommerce redesign.
 */

footer .social-links a,
footer .btn,
footer img+a,
footer .footer-badges a,
footer a:has(img) {
	border-bottom: 0;
	text-decoration: none;
}

footer .social-links a,
footer .footer-badges a {
	border-bottom: 0 !important;
	text-decoration: none !important;
}

.social-links {
	display: flex;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.social-links {
		gap: 0.75rem;
	}
}

.social-links .social-link {
	--icon: 18px;
	--pad: 10px;
	--bg: var(--color-surface-soft);
	--bg-hover: var(--color-surface-soft-hover);
	--radius: 999px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--icon) + var(--pad) * 2);
	height: calc(var(--icon) + var(--pad) * 2);
	padding: var(--pad);
	border: 1px solid var(--border-primary-soft-08);
	border-radius: var(--radius);
	background: var(--bg);
	text-decoration: none;
	opacity: 0.96;
	transition:
		background-color 0.15s ease,
		transform 0.15s ease,
		opacity 0.15s ease,
		box-shadow 0.15s ease;
}

.social-links .social-link:hover {
	background: var(--bg-hover);
	transform: translateY(-1px);
	opacity: 1;
}

.social-links .social-link:focus-visible {
	outline: var(--focus-outline-primary);
	outline-offset: var(--focus-outline-offset);
}

.social-links .social-link i {
	display: block;
	font-size: var(--icon);
	line-height: 1;
}

.social-links .facebook,
.social-links .facebook:visited,
.social-links .facebook:hover,
.social-links .facebook:active,
.social-links .facebook:focus {
	color: var(--color-facebook);
}

.social-links .youtube,
.social-links .youtube:visited,
.social-links .youtube:hover,
.social-links .youtube:active,
.social-links .youtube:focus {
	color: var(--color-youtube);
}

.social-links .instagram {
	color: var(--color-instagram);
}

.social-links .instagram i {
	background: linear-gradient(45deg, var(--color-instagram-1), var(--color-instagram-2), var(--color-instagram-3), var(--color-instagram-4), var(--color-instagram-5));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.social-links .tiktok,
.social-links .tiktok:visited,
.social-links .tiktok:hover,
.social-links .tiktok:active,
.social-links .tiktok:focus {
	color: var(--color-black);
}

.social-links .tiktok:hover i {
	text-shadow: 1px 0 0 var(--color-tiktok-cyan), -1px 0 0 var(--color-tiktok-magenta);
}

.social-links--sm .social-link {
	--icon: 16px;
	--pad: 8px;
}

.social-links--lg .social-link {
	--icon: 22px;
	--pad: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.social-links .social-link {
		transition: none;
	}

	.social-links .social-link:hover {
		transform: none;
	}
}

@media screen and (max-width: 490px) {
	footer {
		padding-bottom: 30px;
	}
}