/**
 * WhatsApp floating button. All visuals via --bkf-wa-* tokens (CR-001 §4).
 * Offsets are exposed so it never has to overlap a cookie banner: raise
 * --bkf-wa-y (or --bkf-wa-z, default 9990 — below typical consent modals at 10000+).
 */
.bkf-wa {
	position: fixed;
	z-index: var(--bkf-wa-z, 9990);
	inset-block-end: var(--bkf-wa-y, 20px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.bkf-wa--bottom-right { inset-inline-end: var(--bkf-wa-x, 20px); }
.bkf-wa--bottom-left { inset-inline-start: var(--bkf-wa-x, 20px); align-items: flex-start; }

.bkf-wa__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-inline-size: var(--bkf-wa-size, 56px);
	block-size: var(--bkf-wa-size, 56px);
	padding-inline: calc(var(--bkf-wa-size, 56px) * 0.18);
	background: var(--bkf-wa-bg, #25d366);
	color: var(--bkf-wa-icon-color, #fff);
	border-radius: var(--bkf-wa-radius, 999px);
	box-shadow: var(--bkf-wa-shadow, 0 6px 20px rgba(0, 0, 0, .22));
	text-decoration: none;
	animation: bkf-wa-in 320ms ease;
}
.bkf-wa__btn:hover { background: var(--bkf-wa-bg-hover, #1ebe5d); color: var(--bkf-wa-icon-color, #fff); }
.bkf-wa__btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.bkf-wa__btn svg { inline-size: 55%; block-size: 55%; }
.bkf-wa__label { font-size: var(--bkf-wa-label-size, 14px); color: var(--bkf-wa-label-color, currentColor); font-weight: 600; white-space: nowrap; }

.bkf-wa__bubble {
	position: relative;
	max-inline-size: 240px;
	padding: 10px 30px 10px 14px;
	background: var(--bkf-wa-bubble-bg, #fff);
	color: var(--bkf-wa-bubble-color, #1f2937);
	border-radius: var(--bkf-wa-bubble-radius, 12px);
	box-shadow: var(--bkf-wa-bubble-shadow, 0 6px 24px rgba(0, 0, 0, .18));
	font-size: 14px;
	animation: bkf-wa-in 240ms ease;
}
.bkf-wa__bubble-close {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 6px;
	border: none;
	background: none;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	padding: 4px;
}

@keyframes bkf-wa-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
	.bkf-wa__btn, .bkf-wa__bubble { animation: none; }
}
@media (max-width: 600px) { .bkf-wa--hide-mobile { display: none; } }
@media (min-width: 601px) and (max-width: 1024px) { .bkf-wa--hide-tablet { display: none; } }
@media (min-width: 1025px) { .bkf-wa--hide-desktop { display: none; } }