/**
 * Floating WhatsApp + back-to-top buttons. Loaded on every page (see
 * SPB_Site_Chrome), so this file stays deliberately small and scopes
 * everything under .spb-fab — it must never reach into a theme's own markup.
 *
 * Three independent visibility states stack as separate classes rather than
 * one "visible" flag, because they come and go independently:
 *   is-blocked   — a hero or the footer is on screen, buttons must not show
 *   is-scrolling — the page is moving; they step aside until it settles
 *   is-idle      — settled and untouched for a while; they ease back but stay
 */
.spb-fab {
	position: fixed;
	right: var(--spb-fab-offset-x, 20px);
	bottom: var(--spb-fab-offset-y, 24px);
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spb-fab-gap, 12px);
	/* The wrapper only ever fades/slides as a whole. */
	opacity: 1;
	transform: none;
	transition: opacity .32s cubic-bezier(.4, 0, .2, 1), transform .32s cubic-bezier(.4, 0, .2, 1);
	pointer-events: auto;
}
/* Hidden states. translateY keeps the motion coming from the bottom edge, so
 * the buttons read as tucking away rather than blinking out. */
.spb-fab.is-scrolling,
.spb-fab.is-blocked {
	opacity: 0;
	transform: translateY(14px) scale(.94);
	pointer-events: none;
}
/* Blocked is a harder state than scrolling: no transition back in while a hero
 * or the footer is still on screen. */
.spb-fab.is-blocked {
	transition-duration: .2s;
}
/* Settled and untouched: ease back to the configured strength instead of
 * sitting at full contrast over the page indefinitely. Slow on the way down
 * so it reads as receding, quick on the way back. */
.spb-fab.is-idle {
	opacity: var(--spb-fab-idle-opacity, .35);
	transition-duration: 1.1s;
}
.spb-fab.is-idle:hover,
.spb-fab.is-idle:focus-within {
	opacity: 1;
	transition-duration: .18s;
}

.spb-fab-btn {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--spb-fab-size, 54px);
	height: var(--spb-fab-size, 54px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(11, 23, 54, .22), 0 2px 6px rgba(11, 23, 54, .14);
	transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), box-shadow .2s ease, background-color .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.spb-fab-btn:hover {
	transform: translateY(-2px) scale(1.06);
	box-shadow: 0 10px 26px rgba(11, 23, 54, .28), 0 3px 8px rgba(11, 23, 54, .16);
}
.spb-fab-btn:active {
	transform: translateY(0) scale(.96);
}
.spb-fab-btn:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .9);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(11, 23, 54, .35);
}
.spb-fab-btn svg {
	width: 56%;
	height: 56%;
	display: block;
}
.spb-fab-wa {
	background: var(--spb-color-fab-whatsapp-bg, #25d366);
}
.spb-fab-wa svg {
	fill: var(--spb-color-fab-whatsapp-icon, #fff);
}
/* A slow breathing ring on the WhatsApp button only — one quiet cue that it's
 * a live channel, not an animation competing with the page. It stops while the
 * buttons are idle or hidden so it never pulses at nothing. */
.spb-fab-wa::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	opacity: .55;
	z-index: -1;
	animation: spb-fab-pulse 2.6s cubic-bezier(.4, 0, .6, 1) infinite;
}
.spb-fab-wa {
	position: relative;
	isolation: isolate;
}
.spb-fab.is-idle .spb-fab-wa::before,
.spb-fab.is-scrolling .spb-fab-wa::before,
.spb-fab.is-blocked .spb-fab-wa::before {
	animation-play-state: paused;
	opacity: 0;
}
@keyframes spb-fab-pulse {
	0%   { transform: scale(1);    opacity: .5; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}
.spb-fab-top {
	background: var(--spb-color-fab-top-bg, #0147ca);
}
.spb-fab-top svg {
	fill: none;
	stroke: var(--spb-color-fab-top-icon, #fff);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* The top button only exists once there's something to scroll back up to. */
.spb-fab-top[hidden] {
	display: none;
}

@media ( max-width: 600px ) {
	.spb-fab {
		right: calc( var(--spb-fab-offset-x, 20px) * .7 );
		bottom: calc( var(--spb-fab-offset-y, 24px) * .7 );
	}
	.spb-fab-btn {
		width: calc( var(--spb-fab-size, 54px) * .88 );
		height: calc( var(--spb-fab-size, 54px) * .88 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.spb-fab,
	.spb-fab-btn {
		transition-duration: .01ms !important;
	}
	.spb-fab.is-scrolling,
	.spb-fab.is-blocked {
		transform: none;
	}
	.spb-fab-wa::before {
		animation: none !important;
	}
}

/**
 * Copyright + build stamp at the foot of the theme's navigation drawer.
 *
 * It sits inside markup this plugin does not own, so it claims no layout:
 * full width, auto top margin to settle at the bottom of a flex/grid panel
 * and a plain top margin otherwise, and colours of its own rather than
 * inheriting whatever the menu happens to use. Muted by design — a build
 * stamp should be findable, not read.
 */
.spb-menu-badge {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: auto;
	padding: 14px 16px calc( 14px + env( safe-area-inset-bottom, 0px ) );
	border-top: 1px solid var(--spb-color-menu-badge-rule, #d9e2ec);
	font: 500 var(--spb-menu-badge-size, 11px) / 1.5 var(--spb-font-body, inherit);
	letter-spacing: .02em;
	color: var(--spb-color-menu-badge-text, #8a97a8);
	text-align: center;
	/* Never a tap target, and never in the way of one above it. */
	pointer-events: none;
	user-select: none;
}
.spb-menu-badge-copy,
.spb-menu-badge-version {
	display: block;
}
/* The build string is the quieter of the two and reads as data, not prose. */
.spb-menu-badge-version {
	margin-top: 3px;
	font-size: .88em;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	opacity: .72;
}
