/* =====================================================================
   KATERING BAZYLIA
   Pływający licznik miejsc. Ładowany globalnie.

   Na desktopie karta przy prawej krawędzi, wyśrodkowana w pionie.
   Na telefonie pasek przyklejony do dołu, bo boczna kolumna zjadałaby
   połowę wąskiego ekranu.
   ===================================================================== */

.bz-float {
	position: fixed;
	right: clamp(0.75rem, 2vw, 1.5rem);
	top: 50%;
	z-index: 90;
	width: 190px;
	padding: 1.25rem;
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow-lg);
	/* Stan startowy: schowany za krawędzią. JS pokazuje go po zjechaniu
	   poniżej hero, żeby nie konkurował z głównym CTA na pierwszym ekranie. */
	transform: translate(calc(100% + 2rem), -50%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.45s var(--ease),
	            opacity 0.35s var(--ease),
	            visibility 0.35s;
}

.bz-float.is-visible {
	transform: translate(0, -50%);
	opacity: 1;
	visibility: visible;
}

/* Bez JS licznik po prostu stoi widoczny: lepiej to, niż element,
   który nigdy się nie pojawi. */
html:not(.bz-js) .bz-float {
	transform: translate(0, -50%);
	opacity: 1;
	visibility: visible;
}

.bz-float__count {
	display: flex;
	align-items: baseline;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	/* Cyfry stałej szerokości, żeby zmiana stanu nie przesuwała układu. */
	font-variant-numeric: tabular-nums;
}

.bz-float__num { font-size: 2.5rem; color: var(--accent-ink); }
.bz-float__den { font-size: 1.25rem; color: var(--ink-mute); }

.bz-float__label {
	margin-top: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ink-soft);
}

.bz-float__label span { color: var(--ink-mute); }

.bz-float__track {
	position: relative;
	height: 3px;
	margin-top: 1rem;
	border-radius: 3px;
	overflow: hidden;
	background-color: var(--hairline);
}

.bz-float__fill {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	background-color: var(--accent);
}

.bz-float__cta {
	width: 100%;
	margin-top: 1rem;
}

@media (max-width: 900px) {

	.bz-float {
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		width: auto;
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem);
		border-radius: var(--radius) var(--radius) 0 0;
		transform: translateY(100%);
	}

	.bz-float.is-visible,
	html:not(.bz-js) .bz-float { transform: translateY(0); }

	.bz-float__body { display: flex; align-items: baseline; gap: 0.6rem; }
	.bz-float__num { font-size: 1.75rem; }
	.bz-float__label { margin-top: 0; font-size: 0.625rem; }
	.bz-float__label br { display: none; }

	/* Pasek postępu na wąskim ekranie tylko dublowałby liczbę. */
	.bz-float__track { display: none; }

	.bz-float__cta { width: auto; margin-top: 0; margin-left: auto; flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bz-float { transition: opacity 0.01ms, visibility 0.01ms; }
}