/**
 * Floating WhatsApp button (theme DESIGN.md §13.6), Chaty-style: a round
 * brand-green button with the white WhatsApp glyph, and the short CTA in a
 * white bubble beside it.
 *
 * Fixed to the bottom-left, above iOS safe areas. Uses the theme's colour
 * presets with brand fallbacks so it still reads correctly under another theme.
 * Hidden states use visibility, so a hidden button is not focusable.
 */
.zero1-wa-float {
	box-sizing: border-box;
	position: fixed;
	z-index: 40;
	left: max(1rem, env(safe-area-inset-left));
	bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: inherit;
	text-decoration: none;
	transition: opacity 300ms ease, visibility 300ms ease, translate 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.zero1-wa-float__circle {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--green-500, #28ac18);
	color: #fff;
	box-shadow: 0 10px 28px -8px rgb(40 172 24 / 0.75), 0 2px 8px rgb(0 0 0 / 0.35);
	transition: background-color 150ms ease;
}

.zero1-wa-float__icon {
	inline-size: 30px;
	block-size: 30px;
}

/* CTA bubble: white pill with dark text, like Chaty's call-to-action. */
.zero1-wa-float__bubble {
	padding: 0.5rem 0.875rem;
	border-radius: 999px;
	background-color: #fff;
	color: var(--wp--preset--color--ink, #0b1512);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 6px 20px -6px rgb(0 0 0 / 0.45);
}

.zero1-wa-float:hover .zero1-wa-float__circle {
	background-color: var(--wp--preset--color--green-400, #3fc72e);
}

.zero1-wa-float:focus-visible {
	outline: none;
}

.zero1-wa-float:focus-visible .zero1-wa-float__circle {
	outline: 2.5px solid var(--wp--preset--color--green-400, #3fc72e);
	outline-offset: 3px;
}

.zero1-wa-float.is-hidden {
	opacity: 0;
	visibility: hidden;
	translate: 0 12px;
}

@media (max-width: 599px) {

	.zero1-wa-float__circle {
		inline-size: 52px;
		block-size: 52px;
	}

	.zero1-wa-float__icon {
		inline-size: 28px;
		block-size: 28px;
	}

	.zero1-wa-float__bubble {
		padding: 0.4rem 0.75rem;
		font-size: 0.8125rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.zero1-wa-float {
		transition: none;
	}

	.zero1-wa-float.is-hidden {
		translate: none;
	}
}