.webart-floating-social {
	--webart-button-height: 52px;
	--webart-button-width: 52px;
	--webart-icon-size: 22px;
	--webart-desktop-top-offset: 120px;
	--webart-desktop-side-offset: 22px;
	--webart-mobile-side-offset: 14px;
	--webart-mobile-bottom-offset: 18px;
	--webart-label-gap: 12px;
	--webart-custom-color: #1f2937;
	position: fixed;
	top: var(--webart-desktop-top-offset);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: visible;
}

.webart-floating-social--right {
	right: var(--webart-desktop-side-offset);
}

.webart-floating-social--left {
	left: var(--webart-desktop-side-offset);
}

.webart-floating-social--small {
	--webart-button-height: 44px;
	--webart-button-width: 44px;
	--webart-icon-size: 18px;
}

.webart-floating-social--medium {
	--webart-button-height: 52px;
	--webart-button-width: 52px;
	--webart-icon-size: 22px;
}

.webart-floating-social--large {
	--webart-button-height: 60px;
	--webart-button-width: 60px;
	--webart-icon-size: 25px;
}

.webart-social-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--webart-button-width);
	height: var(--webart-button-height);
	padding: 0;
	overflow: visible;
	border-radius: 999px;
	background: var(--webart-brand-color);
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
	will-change: transform;
	z-index: 1;
}

.webart-floating-social--custom .webart-social-button {
	background: var(--webart-custom-color);
}

.webart-floating-social--right .webart-social-button:hover,
.webart-floating-social--right .webart-social-button:focus-visible {
	transform: translateX(-4px);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.webart-floating-social--left .webart-social-button:hover,
.webart-floating-social--left .webart-social-button:focus-visible {
	transform: translateX(4px);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.webart-social-button:hover,
.webart-social-button:focus-visible {
	color: #ffffff;
	text-decoration: none;
	z-index: 2;
}

.webart-social-button__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.webart-social-button__icon svg {
	display: block;
	width: var(--webart-icon-size);
	height: var(--webart-icon-size);
	fill: currentColor;
}

.webart-social-button__label {
	position: absolute;
	top: 50%;
	opacity: 0;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.94);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: opacity 0.2s ease, transform 0.24s ease;
}

.webart-floating-social--right .webart-social-button__label {
	right: calc(100% + var(--webart-label-gap));
	transform: translateY(-50%) translateX(8px);
}

.webart-floating-social--left .webart-social-button__label {
	left: calc(100% + var(--webart-label-gap));
	transform: translateY(-50%) translateX(-8px);
}

.webart-social-button:hover .webart-social-button__label,
.webart-social-button:focus-visible .webart-social-button__label {
	opacity: 1;
}

.webart-floating-social--right .webart-social-button:hover .webart-social-button__label,
.webart-floating-social--right .webart-social-button:focus-visible .webart-social-button__label,
.webart-floating-social--left .webart-social-button:hover .webart-social-button__label,
.webart-floating-social--left .webart-social-button:focus-visible .webart-social-button__label {
	transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
	.webart-floating-social {
		top: auto;
		bottom: var(--webart-mobile-bottom-offset);
	}

	.webart-floating-social--right {
		right: var(--webart-mobile-side-offset);
	}

	.webart-floating-social--left {
		left: var(--webart-mobile-side-offset);
	}
}

@media (hover: none), (pointer: coarse) {
	.webart-social-button,
	.webart-floating-social--right .webart-social-button:hover,
	.webart-floating-social--right .webart-social-button:focus-visible,
	.webart-floating-social--left .webart-social-button:hover,
	.webart-floating-social--left .webart-social-button:focus-visible {
		transform: none;
		box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
	}

	.webart-social-button__label,
	.webart-social-button:hover .webart-social-button__label,
	.webart-social-button:focus-visible .webart-social-button__label {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.webart-social-button,
	.webart-social-button__label {
		transition: none;
	}
}