/* =========================================================
   WHATSAPP FLOATING BUTTON
   Site-wide fixed-position button, rendered by footer.php.
   Uses CSS variables from style.css only — no variables
   redefined. Transitions only — no keyframes.
========================================================= */

.whatsapp-float {
	position: fixed;
	right: var(--space-lg);
	bottom: var(--space-lg);
	z-index: var(--z-index-toast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background-color: #25d366;
	color: var(--color-text-inverse);
	box-shadow: var(--shadow-lg);
	transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--shadow-xl);
	color: var(--color-text-inverse);
}

.whatsapp-float__icon {
	width: 30px;
	height: 30px;
}


/* ---------------------------------------------------------
   Back to Top Button
   Positioned bottom-LEFT specifically to avoid colliding
   with the WhatsApp button (bottom-right). Hidden by default
   via the .is-visible toggle, controlled by JS based on
   scroll position — always present in the DOM so it works
   correctly even if JavaScript fails to load (simply stays
   hidden rather than appearing broken).
--------------------------------------------------------- */
.back-to-top {
	position: fixed;
	left: var(--space-lg);
	bottom: var(--space-lg);
	z-index: var(--z-index-toast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background-color: var(--color-background);
	color: var(--color-text-primary);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background-color var(--transition-base);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background-color: var(--color-background-alt);
	border-color: var(--color-accent);
}

.back-to-top__icon {
	width: 20px;
	height: 20px;
}


/* ---------------------------------------------------------
   Responsive — Mobile
--------------------------------------------------------- */
@media (max-width: 576px) {

	.back-to-top {
		left: var(--space-md);
		bottom: var(--space-md);
		width: 42px;
		height: 42px;
	}

	.back-to-top__icon {
		width: 18px;
		height: 18px;
	}

	.whatsapp-float {
		right: var(--space-md);
		bottom: var(--space-md);
		width: 48px;
		height: 48px;
	}

	.whatsapp-float__icon {
		width: 26px;
		height: 26px;
	}
}