/**
 * Pasek darmowej dostawy.
 *
 * Stan niesie KOLOR TŁA: różowy — brakuje do progu, miętowy — dostawa za darmo.
 * Klient rozpoznaje sytuację, zanim przeczyta zdanie.
 *
 * Kolory, kanty i typografia pochodzą ze wspólnych tokenów (`tokens.css`), więc
 * pasek, panel gratisów i drabinka wyglądają jak jedna rzecz. Tokeny nadpisuje
 * się w motywie jedną regułą `:root`.
 *
 * Selektory są KLASOWE — pasek może wystąpić na stronie więcej niż raz
 * (shortcode obok wyświetlania automatycznego).
 *
 * @package WB_Promotions
 */

:root {
	/* Stała wysokość paska — nie zmienia się z obecnością przycisku ani długością tekstu. */
	--wb-ship-height: 40px;

	/*
	 * Pasek przylega do sąsiadów bez własnego odstępu — jako pełnowymiarowa belka
	 * wygląda lepiej dosunięty niż odsunięty. Sklep, który chce go odsunąć,
	 * ustawia tu wartość; reszta sekcji wtyczki korzysta ze wspólnego `--wbp-gap`.
	 */
	--wb-ship-gap: 0;
}

.wb-ship-bar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: var(--wb-ship-height);
	max-width: var(--wbp-max, 1280px);
	margin: var(--wb-ship-gap, 0) auto;
	padding: 8px 16px;
	background: var(--wbp-state-pending, #edb5b4);
	border-radius: var(--wbp-radius, 0);
	color: var(--wbp-text, #0c0c0c);
	font-family: inherit;
	line-height: 1.35;
}

.wb-ship-bar--reached {
	background: var(--wbp-state-done, #bce2da);
}

/* Ikona idzie za kolorem tekstu — jedna zmienna zmienia oba. */
.wb-ship-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	min-width: 27px;
	color: currentColor;
}

.wb-ship-icon svg {
	display: block;
	width: 27px;
	height: 18px;
}

.wb-ship-text {
	margin: 0;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 400;
}

/*
 * Kwota. `wc_price()` daje własną strukturę `<span><bdi>…</bdi></span>`, więc
 * stylujemy kontener i nie rozbieramy jej na części — formatowanie waluty
 * zostaje po stronie WooCommerce.
 */
.wb-ship-amount {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
}

.wb-ship-amount .woocommerce-Price-amount {
	font-weight: inherit;
}

/* Tekst z wplecioną kwotą (znacznik {brakuje}) — pogrubiamy samą liczbę. */
.wb-ship-text strong {
	font-weight: 700;
}

/*
 * Przycisk jest opcjonalny: puste pole w ustawieniach go ukrywa.
 *
 * ⚠️ NIE MA paddingu pionowego — wysokość daje `line-height`. Padding rozpychałby
 * pasek ponad stałe 40/60 px, bo to on, a nie tekst, byłby najwyższym elementem
 * wiersza.
 */
.wb-ship-cta {
	flex-shrink: 0;
	padding: 0 14px;
	border: 1px solid currentColor;
	border-radius: var(--wbp-radius, 0);
	color: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.8;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s;
}

.wb-ship-cta:hover,
.wb-ship-cta:focus {
	opacity: 0.7;
	text-decoration: none;
}

.wb-ship-cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.wb-ship-bar {
		--wb-ship-height: 60px;

		padding: 12px 16px;
	}

	.wb-ship-text { font-size: 1rem; }
	.wb-ship-amount { font-size: 1.125rem; }
	.wb-ship-cta { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wb-ship-cta { transition: none; }
}