/*
 * Licznik promocji — CIENKI PASEK W JEDNEJ LINII.
 *
 * ⚠️ PIERWSZA WERSJA BYŁA BLOKIEM NA TRZY POZIOMY (nagłówek, kafelki zegara,
 * zdanie o dacie) i zajmowała ~110 px wysokości na karcie produktu.
 * Dawid 07.09: „to powinien być taki cieniutki paseczek, tylko odliczanie
 * i w jednej linijce, żeby nie rozpychać tego na wysokość, bo tu będziemy
 * tracić miejsce na wersji mobilnej".
 * Teraz jedna linia: etykieta · zegar · oszczędność. Wysokość ~38 px.
 *
 * ⚠️ WARIANTY RÓŻNIĄ SIĘ WIĘCEJ NIŻ KOLOREM. Poprzednie „stylizacje sezonowe"
 * podmieniały trzy zmienne i nic poza tym — Dawid: „myślałem, że będzie jakaś
 * emotka, a nic się nie zmienia oprócz kolorków, to po chuju". Sezonowe mają
 * teraz znak (choinka, fajerwerki, serce), własny połysk i własny akcent.
 *
 * ⚠️ POŁYSK JEST TAKI SAM JAK NA PRZYCISKU „DODAJ DO KOSZYKA" — jasna warstwa
 * w górnej połowie i cienka linia światła przy górnej krawędzi. To ten sam
 * język, którym mówi reszta karty produktu, a nie osobny pomysł.
 */

.st-promo {
	--p-tlo: #344a90;
	--p-tekst: #fff;
	--p-cyfra: #fff;
	--p-akcent: rgba(255, 255, 255, 0.16);
	--p-obwodka: transparent;
	--p-polysk: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 52%, rgba(0, 0, 0, 0.06) 100%);

	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.55rem;
	margin: 0 0 0.9rem;
	padding: 0.42rem 0.75rem;
	border: 1px solid var(--p-obwodka);
	border-radius: 8px;
	background-color: var(--p-tlo);
	background-image: var(--p-polysk);
	overflow: hidden;
}

.st-promo[hidden] { display: none !important; }

/* Znak sezonowy — tylko tam, gdzie wariant go definiuje. */
.st-promo-znak {
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1;
}

.st-promo .st-promo-tytul {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--p-tekst);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- zegar ---------- */

.st-promo-zegar {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 0.12rem;
	padding: 0.14rem 0.42rem;
	border-radius: 5px;
	background: var(--p-akcent);
}

.st-promo .st-promo-liczba {
	/* ⚠️ `tabular-nums` jest tu obowiązkowe. Bez niego cyfry mają różne
	   szerokości i pasek „drga" przy każdej zmianie sekundy. */
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	color: var(--p-cyfra);
}

.st-promo .st-promo-jedn {
	margin-right: 0.16rem;
	font-size: 0.62rem;
	font-style: normal;
	font-weight: 700;
	text-transform: lowercase;
	color: var(--p-cyfra);
	opacity: 0.7;
}

.st-promo .st-promo-dwukropek {
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--p-cyfra);
	opacity: 0.55;
}

.st-promo-pole[hidden] { display: none; }

/* ---------- oszczędność ---------- */

.st-promo .st-promo-oszcz {
	flex: 0 0 auto;
	padding: 0.16rem 0.45rem;
	border-radius: 5px;
	background: var(--p-akcent);
	font-size: 0.74rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--p-cyfra);
}

/* ---------- telefon ----------
   ⚠️ Na 375 px etykieta, zegar i oszczędność nie mieszczą się w jednej linii.
   Ucina się ETYKIETĘ, nie zegar — zegar jest jedyną informacją, której nie da
   się odgadnąć z reszty karty. */
@media (max-width: 480px) {
	.st-promo { gap: 0.4rem; padding: 0.4rem 0.6rem; }
	.st-promo .st-promo-tytul { font-size: 0.66rem; letter-spacing: 0.03em; }
	.st-promo .st-promo-oszcz { display: none; }
}

@media (max-width: 360px) {
	.st-promo .st-promo-tytul { display: none; }
}

/* ============================================================
   WARIANTY — MUSZĄ ZOSTAĆ NA KOŃCU PLIKU.
   Przy równej specyficzności wygrywa reguła późniejsza; blok wariantu
   postawiony wyżej przegrywa z regułami bazowymi stojącymi po nim.
   Ta mina kosztowała dzień przy nagłówku huba (07.09).
   ============================================================ */

/* 1. Granat płaski — podstawowy kolor marki, bez połysku. */
.st-promo--granat {
	--p-tlo: #344a90;
	--p-polysk: none;
}

/* 2. Granat glossy — ten sam połysk co przycisk „Dodaj do koszyka". */
.st-promo--granat-glossy {
	--p-tlo: #344a90;
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(0, 0, 0, 0.10) 100%),
		linear-gradient(90deg, #2b3d78 0%, #3d55a4 55%, #2b3d78 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* 3. Granat głęboki, nocny — spokojniejszy, pod ciemne sekcje. */
.st-promo--granat-nocny {
	--p-tlo: #1f2c58;
	--p-akcent: rgba(255, 255, 255, 0.13);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 46%, rgba(0, 0, 0, 0.14) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 4. Grafit glossy — neutralny, nie konkuruje z granatem CTA. */
.st-promo--grafit {
	--p-tlo: #181b22;
	--p-akcent: rgba(255, 255, 255, 0.12);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 46%, rgba(0, 0, 0, 0.18) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 5. Kontur — biały pasek, granatowa obwódka i tekst.
      ⚠️ Najlżejszy wizualnie: nie dokłada plamy koloru na karcie, która ma
      już granatowy przycisk i kolorowe kafelki folii. */
.st-promo--kontur {
	--p-tlo: #fff;
	--p-tekst: #344a90;
	--p-cyfra: #181b22;
	--p-akcent: #e8ecf8;
	--p-obwodka: #c3cbda;
	--p-polysk: none;
}

/* 6. Błękit jasny — subtelny, bez odwracania kontrastu. */
.st-promo--blekit {
	--p-tlo: #e8ecf8;
	--p-tekst: #344a90;
	--p-cyfra: #1f2c58;
	--p-akcent: #fff;
	--p-obwodka: #cfd7ee;
	--p-polysk: none;
}

/* 7. Czerwony glossy — klasyczna wyprzedaż. Kolor funkcjonalny #C0392B. */
.st-promo--czerwony {
	--p-tlo: #c0392b;
	--p-akcent: rgba(255, 255, 255, 0.18);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(0, 0, 0, 0.12) 100%),
		linear-gradient(90deg, #a52f23 0%, #cf4234 55%, #a52f23 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 8. Zielony glossy — „oszczędzasz", nie „kończy się". Inny komunikat. */
.st-promo--zielony {
	/* ⚠️ #1E8E5A daje na bieli 4,14 — to za mało dla drobnego tekstu (AA
	   wymaga 4,5). Kolor funkcjonalny „sukces" z palety nadaje się na ikony
	   i badge, nie na pasek z 11-pikselową etykietą. Stąd ciemniejszy odcień. */
	--p-tlo: #17784b;
	--p-akcent: rgba(255, 255, 255, 0.18);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(0, 0, 0, 0.12) 100%),
		linear-gradient(90deg, #12603c 0%, #1c8d58 55%, #12603c 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---------- sezonowe: znak + własny połysk ---------- */

/* 9. Boże Narodzenie — 🎄, głęboka czerwień, złota cyfra. */
.st-promo--swieta {
	--p-tlo: #9c2626;
	--p-cyfra: #ffdf9e;
	--p-akcent: rgba(0, 0, 0, 0.22);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(0, 0, 0, 0.16) 100%),
		linear-gradient(90deg, #7d1d1d 0%, #ad2c2c 55%, #7d1d1d 100%);
	box-shadow: inset 0 1px 0 rgba(255, 223, 158, 0.35);
}

/* 10. Nowy Rok — 🎆, noc i złoto. */
.st-promo--nowy-rok {
	--p-tlo: #16204a;
	--p-cyfra: #f5d271;
	--p-akcent: rgba(245, 210, 113, 0.16);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 46%, rgba(0, 0, 0, 0.18) 100%),
		linear-gradient(90deg, #10193c 0%, #23306b 55%, #10193c 100%);
	box-shadow: inset 0 1px 0 rgba(245, 210, 113, 0.3);
}

/* 11. Walentynki — 💗, ciepła czerwień. */
.st-promo--walentynki {
	--p-tlo: #b03060;
	--p-akcent: rgba(255, 255, 255, 0.2);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(0, 0, 0, 0.12) 100%),
		linear-gradient(90deg, #94284f 0%, #c33a6f 55%, #94284f 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 12. Black Friday — ⚡, czerń i złoto. */
.st-promo--black-friday {
	--p-tlo: #0d0d10;
	--p-cyfra: #f5d271;
	--p-akcent: rgba(245, 210, 113, 0.14);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(0, 0, 0, 0.2) 100%);
	box-shadow: inset 0 1px 0 rgba(245, 210, 113, 0.28);
}

/* 13. Wiosna / komunie — 🌿, stonowana zieleń. */
.st-promo--wiosna {
	--p-tlo: #2f7a52;
	--p-akcent: rgba(255, 255, 255, 0.18);
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(0, 0, 0, 0.12) 100%),
		linear-gradient(90deg, #266542 0%, #368f60 55%, #266542 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* ============================================================
   STRONA PORÓWNAWCZA — wyłącznie na stronie testowej.
   ============================================================ */

.st-promo-demo {
	max-width: 720px;
	margin: 0 auto;
}

.st-promo-demo-poz {
	margin: 0 0 1.6rem;
	padding: 0 0 1.2rem;
	border-bottom: 1px solid #dce1ea;
}

.st-promo-demo .st-promo-demo-nazwa {
	margin: 0 0 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #606775;
}

.st-promo-demo .st-promo-demo-nazwa code {
	margin-left: 0.4rem;
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	background: #f6f8fc;
	font-size: 0.74rem;
	font-weight: 400;
	color: #344a90;
}

/* Podgląd na tle karty produktu — pasek trzeba oceniać w kontekście,
   a nie na gołej bieli. */
.st-promo-demo-karta {
	padding: 1rem 1.1rem;
	border: 1px solid #dce1ea;
	border-radius: 12px;
	background: #fff;
}

.st-promo-demo .st-promo-demo-cena {
	margin: 0 0 0.55rem;
	font-size: 1.3rem;
	font-weight: 700;
	color: #181b22;
}

.st-promo-demo .st-promo-demo-cena s {
	margin-right: 0.5rem;
	font-size: 0.95rem;
	font-weight: 400;
	color: #909aad;
}

.st-promo-demo .st-promo-demo-cta {
	margin-top: 0.7rem;
	padding: 0.6rem;
	border-radius: 6px;
	background: #344a90;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.08) 100%);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

.st-promo-demo .st-promo-demo-wys {
	margin: 0.4rem 0 0;
	font-size: 0.76rem;
	color: #909aad;
}

@media (prefers-reduced-motion: reduce) {
	.st-promo { transition: none; }
}

/* ============================================================
   WARIANT „PRZERZUCANA KARTKA" — propozycja Dawida (08.09), wzorowana
   na licznikach obserwujących typu Smiirl.

   ⚠️ ANIMUJEMY WYŁĄCZNIE `transform`, czyli własność liczoną na GPU bez
   przeliczania układu strony. Przerzut trwa 0,3 s i odpala się WYŁĄCZNIE
   przy zmianie cyfry — przy sekundniku to jedna animacja na sekundę na
   jednym elemencie. To odpowiedź na pytanie „czy to nie będzie za ciężkie
   dla strony": nie, bo nie ma tu ani jednej klatki liczonej przez procesor.

   ⚠️ Wariant jest NAKŁADKĄ na kolor, nie osobnym kolorem — `--flip` można
   złożyć z granatem, zielonym albo świątecznym.
   ============================================================ */

.st-promo--flip .st-promo-zegar,
.st-promo--flip-zielony .st-promo-zegar {
	gap: 0.16rem;
	padding: 0.1rem 0.3rem;
}

.st-promo--flip .st-promo-liczba,
.st-promo--flip-zielony .st-promo-liczba {
	position: relative;
	display: inline-block;
	min-width: 1.25em;
	padding: 0.16rem 0.22rem;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.3);
	text-align: center;
	/* Kreska w połowie wysokości — to ona sprawia, że pole czyta się jak
	   przerzucana karta, a nie jak prostokąt z cyfrą. */
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 calc(50% - 1px), rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.08) calc(50% + 1px) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.st-promo--flip .st-promo-dwukropek,
.st-promo--flip-zielony .st-promo-dwukropek { opacity: 0.4; }

.st-promo--flip .st-promo-liczba.st-tik,
.st-promo--flip-zielony .st-promo-liczba.st-tik {
	animation: st-promo-przerzut 0.3s ease-in;
}

@keyframes st-promo-przerzut {
	0%   { transform: perspective(140px) rotateX(0deg); }
	48%  { transform: perspective(140px) rotateX(-86deg); }
	52%  { transform: perspective(140px) rotateX(86deg); }
	100% { transform: perspective(140px) rotateX(0deg); }
}

/* Kolory obu wariantow z kartka. */
.st-promo--flip {
	--p-tlo: #344a90;
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(0, 0, 0, 0.10) 100%),
		linear-gradient(90deg, #2b3d78 0%, #3d55a4 55%, #2b3d78 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.st-promo--flip-zielony {
	--p-tlo: #17784b;
	--p-polysk:
		linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 48%, rgba(0, 0, 0, 0.12) 100%),
		linear-gradient(90deg, #12603c 0%, #1c8d58 55%, #12603c 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.st-promo--flip .st-promo-liczba.st-tik,
	.st-promo--flip-zielony .st-promo-liczba.st-tik { animation: none; }
}