/**
 * Floating Buttons Pro — frontend styles.
 * Positions are fixed to the viewport; adjust spacing via CSS variables.
 */
#fbp-root {
	--fbp-gap: 16px;
	--fbp-size: 56px;
}

.fbp-button {
	position: fixed;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fbp-size);
	height: var(--fbp-size);
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	font-size: 22px;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fbp-button:hover {
	transform: translateY( -2px ) scale( 1.05 );
	box-shadow: 0 10px 22px rgba( 0, 0, 0, 0.28 );
}

.fbp-button:focus-visible {
	outline: 3px solid rgba( 0, 0, 0, 0.35 );
	outline-offset: 2px;
}

.fbp-pos-bottom-right { right: var(--fbp-gap); bottom: var(--fbp-gap); }
.fbp-pos-bottom-left  { left: var(--fbp-gap);  bottom: var(--fbp-gap); }
.fbp-pos-top-right    { right: var(--fbp-gap); top: var(--fbp-gap); }
.fbp-pos-top-left     { left: var(--fbp-gap);  top: var(--fbp-gap); }

@media ( prefers-reduced-motion: reduce ) {
	.fbp-button { transition: none; }
}