/**
 * WhatsApp click-to-chat CTAs.
 *
 * A site-wide floating button plus the Contact page's secondary CTA. Uses the
 * theme's design tokens (colours, radius, shadow, motion, focus ring) so it reads
 * as part of the same system. No external assets; the icon is inline SVG.
 *
 * Stacking: the floating button sits BELOW the mobile-nav overlay (which is
 * z-index calc(--z-header - 1) and opaque, so it covers the button when open —
 * the button never interferes with mobile navigation) and BELOW the consent bar
 * (z-index 1000), while staying above ordinary page content.
 */

/* ---- Site-wide floating button ------------------------------------------- */
.tz-wa-float {
	position: fixed;
	right: clamp(0.85rem, 2vw, 1.5rem);
	/* Respect the iOS home-indicator safe area on small screens. */
	bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(0.85rem, 2vw, 1.5rem));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill, 999px);
	background: var(--emerald, #109F66);
	color: var(--white, #fff);
	box-shadow: var(--shadow-md, 0 12px 30px -12px rgba(7, 30, 63, .18));
	transition:
		background-color var(--dur, 280ms) var(--ease, ease),
		transform var(--dur, 280ms) var(--ease, ease),
		box-shadow var(--dur, 280ms) var(--ease, ease);
}

.tz-wa-float:hover {
	background: var(--emerald-deep, #0C7E51);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg, 0 30px 60px -24px rgba(7, 30, 63, .28));
}

.tz-wa-float:active {
	transform: translateY(0);
}

.tz-wa-float:focus-visible {
	outline: 3px solid var(--focus-ring, #2E6BD6);
	outline-offset: 3px;
}

.tz-wa-float .tz-wa-icon {
	display: block;
	width: 30px;
	height: 30px;
}

/* ---- Contact page secondary CTA ------------------------------------------ */
.tz-wa-contact {
	margin-top: var(--space-xl, 3rem);
	padding-top: var(--space-md, 1.5rem);
	border-top: 1px solid var(--line, #E4E8EF);
}

.tz-wa-contact .eyebrow {
	margin-bottom: var(--space-3xs, 0.25rem);
}

.tz-wa-contact__btn {
	margin-top: var(--space-sm, 1rem);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs, 0.5rem);
}

.tz-wa-contact__btn .tz-wa-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* ---- Reduced motion: keep it static (no transform/lift animations) ------- */
@media (prefers-reduced-motion: reduce) {
	.tz-wa-float {
		transition: background-color var(--dur, 280ms) linear;
	}
	.tz-wa-float:hover,
	.tz-wa-float:active {
		transform: none;
	}
}