/* ============================================================
   WhatsApp contact button
   ============================================================ */
.wab {
	position: fixed;
	/* Set inline from the settings screen. The fallback matches the default
	   there, so the button still clears the corner if the attribute is missing. */
	bottom: var(--wab-bottom, 96px);
	z-index: 340;
	display: flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	color: #fff;
}

.wab--left  { left: 24px; flex-direction: row; }
.wab--right { right: 24px; flex-direction: row-reverse; }

.wab .wab-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42);
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.2s ease;
}

.wab .wab-icon svg { width: 30px; height: 30px; display: block; }

.wab:hover .wab-icon,
.wab:focus-visible .wab-icon {
	transform: scale(1.06);
	box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55);
}

/* The label keeps its space at all times and only fades and slides into view,
 * so nothing about the hover touches layout. Animating its width instead would
 * reflow on every frame, which is exactly the cost a fixed element hovering
 * over a scrolling page should not add. */
.wab .wab-label {
	margin: 0 10px;
	padding: 10px 16px;
	border-radius: 9999px;
	background: #0b1b33;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0.24s;
}

.wab--left  .wab-label { transform: translateX(-8px); }
.wab--right .wab-label { transform: translateX(8px); }

.wab:hover .wab-label,
.wab:focus-visible .wab-label,
.wab.wab-label--always .wab-label {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* A quiet pulse the first time round, so the button is noticed once and then
 * stops asking for attention. */
.wab .wab-icon::after {
	content: "";
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid #25d366;
	animation: wab-pulse 2.6s ease-out 3;
	pointer-events: none;
}

@keyframes wab-pulse {
	0%   { transform: scale(1); opacity: 0.6; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 768px) {
	/* A phone has the fixed shop bar across the bottom as well as the
	   back-to-top control, so the button needs to clear both. */
	.wab { bottom: var(--wab-bottom-mobile, 140px); }
	.wab--left  { left: 16px; }
	.wab--right { right: 16px; }
	.wab .wab-icon { width: 50px; height: 50px; }
	.wab .wab-icon svg { width: 27px; height: 27px; }
	.wab .wab-icon::after { width: 50px; height: 50px; }

	/* Touch sends no hover, so a label set to open on hover would never open.
	   It is hidden unless the setting asks for it to stay open. */
	.wab .wab-label { display: none; }
	.wab.wab-label--always .wab-label {
		display: block;
		font-size: 12.5px;
		padding: 8px 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wab .wab-icon::after { animation: none; }
	.wab:hover .wab-icon { transform: none; }


/* The support line under the pay button. Quiet: it is an offer of help, not a
   second call to action competing with the button above it. */
.wab-checkout {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.55;
}

.wab-checkout a {
	color: #128c7e;
	text-decoration: none;
	border-bottom: 1px solid rgba(18, 140, 126, 0.35);
}

.wab-checkout a:hover,
.wab-checkout a:focus-visible {
	color: #0b1b33;
	border-bottom-color: currentColor;
}