/**
 * Mainfy Sticky Cart
 *
 * Paleta wywodzi się z jednego różu marki #FFB5BC. Jasne tinty służą za tła,
 * ciemniejsze odcienie tego samego odcienia za tekst i przycisk, bo sam
 * #FFB5BC pod białym tekstem daje kontrast 1.7:1 i jest nieczytelny.
 * Wszystkie pary kolorów poniżej przechodzą WCAG AA.
 */

.mfsc {
	--roz:        #FFB5BC;   /* marka */
	--roz-50:     #FFF8F9;
	--roz-100:    #FFEFF1;
	--roz-150:    #FFE6E9;
	--roz-200:    #FFD8DD;
	--roz-600:    #E8546B;   /* ikony i akcenty */
	--roz-700:    #C9364F;   /* CTA, biały tekst 5.1:1 */
	--roz-800:    #A82A41;   /* tekst na jasnym różu, 6.3:1 */
	--atrament:   #14100F;   /* prawie czarny */
	--szary:      #6E6A67;   /* 5.3:1 na bieli */
	--kreska:     rgba(20, 16, 15, .08);

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	padding: 0 16px calc(env(safe-area-inset-bottom));
	pointer-events: none;
	transform: translateY(115%);
	opacity: 0;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}

.mfsc.jest-widoczny {
	transform: translateY(0);
	opacity: 1;
}

/* Zwinięta karta chowa się pod krawędź, a uchwyt zostaje na wierzchu. */
.mfsc.jest-zwinieta .mfsc__karta {
	transform: translateY(calc(100% + 26px));
	opacity: 0;
}

.mfsc.jest-zwinieta .mfsc__uchwyt .mfsc-ikona {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.mfsc,
	.mfsc__karta,
	.mfsc__cta,
	.mfsc-ikona {
		transition: none !important;
	}
}

/* --- reset ---------------------------------------------------------------- */

/* Komponent trafia w nieznany motyw, a Salient narzuca własną interlinię i
   marginesy akapitów. Bez tego wiersz ceny puchnie z 28 do 51 pikseli i cała
   karta rośnie o ponad połowę. Reset jest celowo wąski: dotyka tylko wnętrza
   karty i tylko tych własności, które psują wysokość. */
.mfsc *,
.mfsc *::before,
.mfsc *::after {
	box-sizing: border-box;
}

/* :where() nie podbija specyficzności, więc reset nie wygrywa z własnymi
   regułami komponentu niżej w pliku. Bez tego `.mfsc ul` (0,1,1) biło
   `.mfsc__zaufanie` (0,1,0) i kasowało jego padding. */
.mfsc :where(p, ul, li, del, ins, span, time) {
	margin: 0;
	padding: 0;
	line-height: 1.25;
}

.mfsc :where(.mfsc__cena, .mfsc__cena *, .mfsc__stara, .mfsc__stara *) {
	line-height: 1.05;
}

.mfsc :where(.mfsc__wstega, .mfsc__wstega *),
.mfsc :where(.mfsc__cta, .mfsc__cta *) {
	line-height: 1.2;
}

.mfsc :where(ins) {
	text-decoration: none;
	background: none;
}

/* --- karta ---------------------------------------------------------------- */

.mfsc__karta {
	pointer-events: auto;
	position: relative;
	max-width: 960px;
	margin: 0 auto 22px;
	background: #fff;
	border: 1px solid rgba(20, 16, 15, .05);
	border-radius: 24px;
	box-shadow:
		0 2px 6px rgba(20, 16, 15, .04),
		0 18px 48px rgba(20, 16, 15, .12);
	padding: 14px 20px 0;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}

.mfsc .mfsc-ikona {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	transition: transform .3s ease;
}

/* --- wstęga z licznikiem -------------------------------------------------- */

.mfsc__wstega {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--roz-100);
	color: var(--atrament);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.mfsc__wstega > .mfsc-ikona {
	color: var(--roz-700);
}

.mfsc__wstega-tekst {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mfsc__zegar {
	flex: 0 0 auto;
	padding: 6px 13px;
	border-radius: 999px;
	background: #fff;
	color: var(--roz-700);
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

/* Błyskawica domyka wstęgę po prawej i równoważy ikonę stopera po lewej. */
.mfsc__blysk {
	margin-left: auto;
	display: flex;
	color: var(--roz-600);
}

/* --- wiersz z ceną i przyciskiem ------------------------------------------ */

.mfsc__glowny {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 2px;
}

/* Siatka zamiast flexa, bo te same cztery elementy maja ulozyc sie inaczej
   na desktopie i na telefonie. Na szeroko: plakietka z lewej, obok stara i
   nowa cena w jednej linii, pod spodem zdanie o oszczednosci. */
.mfsc__ceny {
	display: grid;
	grid-template-areas:
		"badge stara cena"
		"badge zysk  zysk";
	grid-template-columns: auto auto auto;
	align-items: baseline;
	column-gap: 12px;
	row-gap: 3px;
	min-width: 0;
}

.mfsc__badge { grid-area: badge; align-self: center; }
.mfsc__stara { grid-area: stara; }
.mfsc__cena  { grid-area: cena; }
.mfsc__zysk  { grid-area: zysk; }

.mfsc__badge {
	flex: 0 0 auto;
	padding: 9px 13px;
	border-radius: 14px;
	background: var(--roz-100);
	color: var(--roz-800);
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
}

.mfsc__kwoty {
	min-width: 0;
}

.mfsc__stara {
	white-space: nowrap;
	color: var(--szary);
	font-size: 15px;
	font-weight: 500;
	text-decoration-thickness: 1.5px;
}

.mfsc__cena {
	white-space: nowrap;
	color: var(--atrament);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.mfsc__zysk {
	margin: 4px 0 0;
	color: var(--roz-700);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.mfsc__kreska {
	flex: 0 0 1px;
	align-self: stretch;
	max-height: 48px;
	margin: auto 0;
	background: var(--kreska);
}

.mfsc__cta {
	flex: 0 0 auto;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 6px 24px 6px 6px;
	border-radius: 999px;
	/* Dwa przystanki tego samego odcienia. Chodzi o delikatną głębię,
	   a nie o efekt sam w sobie. */
	background: linear-gradient(135deg, var(--roz-600), var(--roz-700));
	box-shadow: 0 8px 22px rgba(201, 54, 79, .28);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s ease;
}

.mfsc__cta:hover,
.mfsc__cta:focus {
	color: #fff;
	box-shadow: 0 10px 26px rgba(201, 54, 79, .36);
}

.mfsc__cta:active {
	transform: scale(.985);
}

.mfsc__cta:focus-visible {
	outline: 3px solid var(--atrament);
	outline-offset: 3px;
}

.mfsc__cta:hover .mfsc-ikona:last-child {
	transform: translateX(3px);
}

.mfsc__kolo {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	color: var(--roz-700);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- pasek zaufania ------------------------------------------------------- */

.mfsc__zaufanie {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--kreska);
	list-style: none;
}

.mfsc__punkt {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--atrament);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
}

.mfsc__punkt + .mfsc__punkt {
	border-left: 1px solid var(--kreska);
}

.mfsc__skrot,
.mfsc__cta-krotki {
	display: none;
}

.mfsc__punkt .mfsc-ikona {
	color: var(--roz-600);
	width: 17px;
	height: 17px;
}

/* --- uchwyt zwijania ------------------------------------------------------ */

.mfsc__uchwyt {
	pointer-events: auto;
	position: absolute;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 26px;
	padding: 0;
	border: 1px solid rgba(20, 16, 15, .05);
	border-top: 0;
	border-radius: 0 0 18px 18px;
	background: #fff;
	color: var(--roz-700);
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(20, 16, 15, .08);
}

.mfsc__uchwyt:focus-visible {
	outline: 3px solid var(--atrament);
	outline-offset: 2px;
}

/* --- tablet --------------------------------------------------------------- */

@media (max-width: 880px) {
	.mfsc__glowny {
		gap: 14px;
	}

	.mfsc__kreska {
		display: none;
	}

	.mfsc__cta {
		padding-right: 20px;
	}
}

/* --- telefon -------------------------------------------------------------- */

/* Na 375 px karta nie może zjadać jednej trzeciej ekranu, bo zasłania to,
   co klient właśnie czyta. Cena i przycisk zostają w JEDNYM wierszu (zawijanie
   przycisku pod cenę kosztowało ponad 70 pikseli), a pasek zaufania wraca do
   jednej linii ze skróconymi etykietami zamiast układu ikona nad tekstem. */
@media (max-width: 620px) {
	.mfsc {
		padding-left: 8px;
		padding-right: 8px;
	}

	.mfsc__karta {
		border-radius: 20px;
		padding: 10px 12px 0;
		margin-bottom: 20px;
	}

	.mfsc .mfsc-ikona {
		width: 17px;
		height: 17px;
	}

	.mfsc__wstega {
		min-height: 38px;
		gap: 8px;
		padding: 0 12px;
		font-size: 13px;
	}

	.mfsc__zegar {
		padding: 5px 10px;
		font-size: 13px;
	}

	.mfsc__blysk {
		display: none;
	}

	.mfsc__glowny {
		padding: 10px 0;
		gap: 10px;
	}

	/* Plakietka ląduje NAD ceną zamiast obok niej. Blok ceny jest niższy od
	   przycisku, więc pionowo i tak mieliśmy zapas, a poziomo odzyskujemy
	   około 55 px. Dzięki temu na przycisku mieści się pełne
	   "Dodaj do koszyka" zamiast skrótu. Wysokość karty się nie zmienia. */
	/* Plakietka i przekreslona cena w gornej linii, duza cena pod nimi.
	   Poziomo odzyskujemy okolo 55 px, a pionowo nic nie tracimy, bo blok
	   ceny i tak byl nizszy od przycisku. */
	.mfsc__ceny {
		flex: 0 0 auto;
		grid-template-areas:
			"badge stara"
			"cena  cena";
		grid-template-columns: auto auto;
		justify-items: start;
		align-items: center;
		column-gap: 8px;
		row-gap: 2px;
	}

	/* Cena nigdy się nie kurczy: to przycisk oddaje miejsce jako pierwszy.
	   Wcześniej blok ceny zwężał się poniżej swojej treści, a że linia ma
	   nowrap, tekst wychodził poza ramkę i CTA zamalowywało końcówkę. */
	.mfsc__cta {
		flex: 0 1 auto;
		min-width: 0;
	}

	/* Solidne wypełnienie zamiast delikatnego tintu: na telefonie plakietka
	   zostaje często jedynym widocznym znacznikiem obniżki, więc musi się
	   obronić sama. Biały tekst na --roz-700 daje kontrast 5.1:1. */
	.mfsc__badge {
		padding: 3px 8px;
		border-radius: 8px;
		background: var(--roz-700);
		color: #fff;
		font-size: 11.5px;
		letter-spacing: .02em;
	}

	.mfsc__cena {
		font-size: 21px;
	}

	.mfsc__stara {
		font-size: 13px;
	}

	/* Procent widnieje już w plakietce, więc pełne zdanie o oszczędności jest
	   na telefonie powtórzeniem kosztującym cały wiersz. */
	.mfsc__zysk {
		display: none;
	}

	.mfsc__cta {
		min-height: 46px;
		gap: 7px;
		padding: 4px 15px 4px 4px;
		font-size: 14px;
	}

	.mfsc__kolo {
		width: 36px;
		height: 36px;
	}

	.mfsc__zaufanie {
		padding: 8px 0;
	}

	/* Rowne kolumny (flex 1 1 0) zmuszaly "Dostawa 1-2 dni" do zawijania.
	   Naturalne szerokosci plus nowrap trzymaja kazda etykiete w jednej linii. */
	.mfsc__zaufanie {
		justify-content: space-between;
		overflow: hidden;   /* twarda gwarancja, ze nic nie wyjdzie poza karte */
	}

	.mfsc__punkt {
		flex: 0 1 auto;
		gap: 6px;
		padding: 0 8px;
		font-size: 12px;
		white-space: nowrap;
	}

	.mfsc__punkt .mfsc-ikona {
		width: 15px;
		height: 15px;
	}

	.mfsc__pelny {
		display: none;
	}

	.mfsc__skrot {
		display: inline;
	}
}

/* Najwęższe telefony. Kolejność poświęceń jest przemyślana: pierwsza znika
   stara cena, a plakietka -30% zostaje do końca, bo to najmocniejszy i
   najwęższy sygnał, że trwa promocja. Razem z licznikiem we wstędze klient
   ma dwa niezależne dowody na obniżkę nawet na 320 px. */
@media (max-width: 374px) {
	.mfsc__ceny {
		grid-template-areas:
			"badge"
			"cena";
		grid-template-columns: auto;
	}

	.mfsc__stara {
		display: none;
	}

	/* Ikony w pasku zaufania ustepuja miejsca tekstowi. Z nimi trzy etykiety
	   potrzebuja ~290 px przy 296 px dostepnych, wiec "Gwarancja" wychodzila
	   poza karte. Bez ikon schodzi to do ~230 px z zapasem. */
	.mfsc__punkt .mfsc-ikona {
		display: none;
	}

	.mfsc__cta {
		padding-right: 14px;
	}

	.mfsc__cta-tekst {
		display: none;
	}

	.mfsc__cta-krotki {
		display: inline;
	}

	.mfsc__punkt {
		padding: 0 5px;
		font-size: 11.5px;
	}
}