/* =============================================================
   WBA BACK-TO-TOP — floating button, appears after one viewport
   of scroll. Dark disc, red on hover (single accent rule safe:
   it's only red while hovered).
   ============================================================= */
.wba-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 150;                  /* under mobile drawer (200) + search (300) */
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--wba-dark);
	color: var(--wba-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgba(26, 26, 26, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s, visibility 0s linear 0.25s;
}
.wba-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s, visibility 0s;
}
.wba-top svg { width: 18px; height: 18px; display: block; }

.wba-top:hover,
.wba-top:focus-visible {
	background: var(--wba-red);
	transform: translateY(-3px);
}
.wba-top:focus-visible {
	outline: 2px solid var(--wba-red);
	outline-offset: 3px;
}

@media (max-width: 700px) {
	.wba-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.wba-top { transition: none; transform: none; }
	.wba-top.is-visible { transform: none; }
	.wba-top:hover { transform: none; }
}

@media print {
	.wba-top { display: none; }
}