/*
 * 1.7.4 part 3: the floating WhatsApp button (inc/whatsapp-float.php). Every front-end page, so nothing here may
 * rely on store.css (its tokens live under body.cb-store): the brand green is this file's own.
 *
 * Right edge (physical right, as the mockup: the reCAPTCHA badge is bottom-right, the cookie button bottom-left).
 * Desktop (>= 783px): a 50px circle at right 24 / bottom 96, above the 60px badge at bottom 14; on hover (a real
 * pointer only) and on :focus-visible it becomes a 50px pill, the label beside the icon. It is fixed and anchored
 * right, so it grows leftwards over the page and nothing in the page moves.
 * Phone (<= 782px, Woo's sticky-bar breakpoint): a 47px icon at right 12 / bottom 88, never expanded.
 * js/whatsapp-float.js raises it (inline bottom) above bottom bars in its column and hides it while a modal or the
 * menu drawer is open. z-index 990: above page content, below the 999 header (and so below its drawer), below
 * every modal.
 */
.cb-wa {
	--cb-wa-brand: #088800;
	position: fixed;
	z-index: 990;
	right: 24px;
	left: auto;
	bottom: 96px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 50px;
	min-width: 50px;
	padding: 0 12.5px;
	border-radius: 25px;
	background: var( --cb-wa-brand );
	color: #fff;
	font-family: Assistant, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .3 );
	-webkit-tap-highlight-color: transparent;
	transition: padding .2s ease;
}
.cb-wa[hidden] {
	display: none;
}
.cb-wa:hover,
.cb-wa:focus,
.cb-wa:visited {
	color: #fff;
	text-decoration: none;
}
.cb-wa__icon {
	flex: none;
	width: 25px;
	height: 25px;
}
.cb-wa__label {
	display: block;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	transition: max-width .2s ease, margin .2s ease, opacity .2s ease;
}

/* The part 1 brand ring; keyboard focus opens the pill on desktop like hover (label never hover-only).
   !important because style.css has `a:focus { outline: none !important }` site-wide (measured). */
.cb-wa:focus {
	outline: none;
}
.cb-wa:focus-visible {
	outline: 2px solid var( --cb-wa-brand ) !important;
	outline-offset: 2px;
}
@media ( min-width: 783px ) {
	.cb-wa:focus-visible {
		padding: 0 12.5px 0 18px;
	}
	.cb-wa:focus-visible .cb-wa__label {
		max-width: 240px;
		margin-inline-start: 10px;
		opacity: 1;
	}
}

/* Hover: a real pointer only, so a touch tap never leaves the pill open. */
@media ( min-width: 783px ) and ( hover: hover ) and ( pointer: fine ) {
	.cb-wa:hover {
		padding: 0 12.5px 0 18px;
	}
	.cb-wa:hover .cb-wa__label {
		max-width: 240px;
		margin-inline-start: 10px;
		opacity: 1;
	}
}

@media ( max-width: 782px ) {
	.cb-wa {
		right: 12px;
		bottom: 88px;
		height: 47px;
		min-width: 47px;
		padding: 0 11px;
		border-radius: 23.5px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cb-wa,
	.cb-wa__label {
		transition: none;
	}
}

@media print {
	.cb-wa {
		display: none;
	}
}