/* Floating WhatsApp button (all pages).
 * Dark glass pill + WhatsApp-green disc. Rises in after load, "peeks" its label once per
 * visit (header.js adds .wa-fab--quiet on later pages), soft pulse ring, label opens on hover. */
.wa-fab {
	--wa: #25d366;
	--wa-deep: #128c7e;
	position: fixed; z-index: 80; /* below header (100) and mobile menu (90) */
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	display: flex; align-items: center;
	padding: 5px;
	border-radius: 999px;
	background: rgba(12, 16, 31, .72);
	border: 1px solid rgba(238, 241, 248, .14);
	-webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .06);
	color: var(--paper);
	transition: translate .5s var(--ease), box-shadow .5s var(--ease), border-color .4s, opacity .4s, visibility .4s;
	animation: wa-in .9s var(--ease) 1.2s both;
}
.wa-fab:hover, .wa-fab:focus-visible {
	translate: 0 -3px;
	border-color: rgba(37, 211, 102, .45);
	box-shadow: 0 22px 46px -14px rgba(0, 0, 0, .85), 0 0 34px -6px rgba(37, 211, 102, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.wa-fab:focus-visible { outline: 2px solid var(--wa); outline-offset: 4px; }

/* green disc with the glyph */
.wa-fab__icon {
	position: relative; flex: none;
	display: grid; place-items: center;
	width: 50px; height: 50px; border-radius: 50%;
	color: #fff;
	background: radial-gradient(120% 120% at 30% 20%, #5ee98f 0%, var(--wa) 45%, var(--wa-deep) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .18), 0 6px 16px -6px rgba(37, 211, 102, .7);
	transition: transform .5s var(--ease);
}
.wa-fab:hover .wa-fab__icon { transform: rotate(-8deg) scale(1.04); }
.wa-fab__icon svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.wa-fab__icon::before, .wa-fab__icon::after { /* soft pulse rings */
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1.5px solid var(--wa); opacity: 0;
	animation: wa-ping 4.2s var(--ease) 3s infinite;
}
.wa-fab__icon::after { animation-delay: 3.6s; }

/* label: collapsed by default; opens on hover/focus and peeks once after load */
.wa-fab__label {
	display: grid; overflow: hidden; white-space: nowrap;
	max-width: 0; opacity: 0;
	padding-left: 0;
	transition: max-width .6s var(--ease), opacity .4s var(--ease), padding .6s var(--ease);
	animation: wa-peek 5.2s var(--ease) 2.8s;
}
.wa-fab__label strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.wa-fab__label span { font-size: 12px; color: var(--paper-faint); line-height: 1.2; }
.wa-fab:hover .wa-fab__label, .wa-fab:focus-visible .wa-fab__label { max-width: 200px; opacity: 1; padding: 0 14px 0 14px; }
.wa-fab--quiet .wa-fab__label { animation: none; }

/* stays out of the way */
html.menu-open .wa-fab { opacity: 0; visibility: hidden; }

@keyframes wa-in {
	from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.86); }
	to   { opacity: 1; transform: none; }
}
@keyframes wa-ping {
	0%   { transform: scale(1); opacity: .55; }
	60%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes wa-peek { /* no fill-mode: hover keeps working after the peek */
	0%       { max-width: 0; opacity: 0; padding: 0; }
	14%, 82% { max-width: 200px; opacity: 1; padding: 0 14px; }
	100%     { max-width: 0; opacity: 0; padding: 0; }
}

@media (max-width: 559px) {
	.wa-fab { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 4px; }
	.wa-fab__icon { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-fab, .wa-fab__label, .wa-fab__icon::before, .wa-fab__icon::after { animation: none; }
	.wa-fab, .wa-fab__icon, .wa-fab__label { transition: none; }
	.wa-fab:hover { translate: none; }
}