/* Ecoben Smart Checkout Login
 *
 * Cała kolorystyka wisi na jednej zmiennej: --ecb-scl-brand. PHP ustawia ją
 * z filtra ecb_scl_brand_color, a JS nadpisuje kolorem odczytanym z realnego
 * przycisku na checkoucie — dzięki temu element dopasowuje się do ustawień
 * CheckoutWC i motywu, zamiast mieć wpisany na sztywno kolor jednego sklepu.
 *
 * Każda reguła koloru ma zwykłą wartość zapasową PRZED wersją z color-mix,
 * więc starsza przeglądarka po prostu zignoruje tę drugą i nic się nie rozjedzie.
 *
 * Motywy WooCommerce agresywnie stylują `button` i `a` wewnątrz formularza
 * zamówienia, dlatego kluczowe właściwości są wymuszone.
 */

:root {
	--ecb-scl-brand: #2e7d32;
	--ecb-scl-brand-rgb: 46, 125, 50;
	--ecb-scl-ink: #1f2b28;
	--ecb-scl-muted: #5b6b66;
	--ecb-scl-line: #dfe5e1;

	/* Metryka przycisku. Wszystkie te wartości nadpisuje JS tym, co faktycznie
	 * ma przycisk logowania sklepu — promień, wysokość, krój, wielkość liter.
	 * Poniższe liczby są wyłącznie awaryjne, na wypadek gdyby na stronie nie
	 * było żadnego przycisku do zmierzenia. */
	--ecb-scl-radius: 8px;
	--ecb-scl-btn-h: 52px;
	--ecb-scl-btn-fs: 15px;
	--ecb-scl-btn-fw: 600;
	--ecb-scl-btn-tt: none;
	--ecb-scl-btn-ls: normal;
	--ecb-scl-btn-ff: inherit;
}

.ecb-scl-hidden,
.ecb-scl-is-hidden {
	display: none !important;
}

.ecb-scl-slot:empty {
	display: none;
}

/* ---------------------------------------------------------------
 * Podpowiedź przy polu e-mail
 * --------------------------------------------------------------- */

/* `contain: inline-size` zostaje z poprzedniej wersji i nie należy go usuwać.
 *
 * Gdy checkout stoi na floatach (a tak robi większość starszych motywów),
 * szerokość kolumny z danymi to shrink-to-fit, czyli max-content — najdłuższe
 * zdanie rozłożone w jednej linii. Wystarczy, że pojawi się tu dłuższy
 * komunikat, i kolumna rośnie na tyle, że podsumowanie zamówienia spada pod
 * formularz. `min-width: 0` tego nie załatwia, bo liczy się max-content,
 * nie min-content. `contain: inline-size` odcina zawartość od wyliczania
 * szerokości i problem znika u źródła. */
.ecb-scl-hint {
	display: block;
	box-sizing: border-box;
	contain: inline-size;
	width: 100%;
	min-width: 0 !important;
	max-width: 100% !important;
	float: none !important;
	overflow-wrap: break-word;
	margin: 10px 0 0 !important;
	padding: 12px 14px !important;
	border: 1px solid #dfe5e1 !important;
	border: 1px solid color-mix( in srgb, var( --ecb-scl-brand ) 22%, #fff ) !important;
	border-radius: var( --ecb-scl-radius ) !important;
	background: #f5f8f5 !important;
	background: color-mix( in srgb, var( --ecb-scl-brand ) 6%, #fff ) !important;
	font-family: inherit;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-transform: none !important;
	color: var( --ecb-scl-muted ) !important;
}

.ecb-scl-hint * {
	box-sizing: border-box;
}

.ecb-scl-hint__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	min-width: 0 !important;
	max-width: 100%;
}

.ecb-scl-hint__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var( --ecb-scl-brand );
}

.ecb-scl-hint__text {
	display: block;
	flex: 1 1 auto;
	min-width: 0 !important;
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var( --ecb-scl-ink ) !important;
}

.ecb-scl-hint__acts {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0 !important;
	max-width: 100%;
}

/* przyciski — pełny reset, motyw nie ma czego przejąć */
.ecb-scl-hint__act,
.ecb-scl-hint__act:visited {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 8px 13px !important;
	border: 1px solid transparent !important;
	border-radius: var( --ecb-scl-radius ) !important;
	box-shadow: none !important;
	background-image: none !important;
	font-family: var( --ecb-scl-btn-ff ) !important;
	font-size: 12.5px !important;
	font-weight: var( --ecb-scl-btn-fw ) !important;
	line-height: 1.25 !important;
	letter-spacing: var( --ecb-scl-btn-ls ) !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: normal !important;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.ecb-scl-hint__act--primary {
	background-color: var( --ecb-scl-brand ) !important;
	color: #fff !important;
}

.ecb-scl-hint__act--primary:hover:not( [disabled] ),
.ecb-scl-hint__act--primary:focus:not( [disabled] ) {
	filter: brightness( 0.9 );
	color: #fff !important;
}

.ecb-scl-hint__act--ghost {
	background-color: transparent !important;
	border-color: #cddbd0 !important;
	border-color: color-mix( in srgb, var( --ecb-scl-brand ) 35%, #fff ) !important;
	color: var( --ecb-scl-brand ) !important;
}

.ecb-scl-hint__act--ghost:hover:not( [disabled] ),
.ecb-scl-hint__act--ghost:focus:not( [disabled] ) {
	background-color: #eef4ee !important;
	background-color: color-mix( in srgb, var( --ecb-scl-brand ) 10%, #fff ) !important;
}

.ecb-scl-hint__act[disabled] {
	opacity: 0.55;
	cursor: default;
}

.ecb-scl-hint__msg {
	display: block;
	min-width: 0 !important;
	max-width: 100%;
	margin: 9px 0 0 !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var( --ecb-scl-muted ) !important;
}

.ecb-scl-hint__msg:empty {
	display: none;
}

.ecb-scl-hint__msg[data-type="ok"] {
	color: #14713d !important;
}

.ecb-scl-hint__msg[data-type="error"] {
	color: #c31f33 !important;
}

@media ( max-width: 560px ) {
	.ecb-scl-hint__acts {
		width: 100%;
	}

	/* Większe pole dotyku — na telefonie 34 px to za mało, celujemy w ~44 px. */
	.ecb-scl-hint__act {
		flex: 1 1 auto;
		padding: 13px 14px !important;
		font-size: 13px !important;
	}
}

/* Awaryjnie dla przeglądarek bez `contain: inline-size` (starsze niż 2023):
 * tekst i przyciski na własnych liniach, żeby maksymalnie zmniejszyć
 * szerokość, jaką element narzuca kolumnie. */
@supports not ( contain: inline-size ) {
	.ecb-scl-hint__text,
	.ecb-scl-hint__acts {
		flex: 1 1 100% !important;
	}
}

/* ---------------------------------------------------------------
 * Blokada przycisku zamówienia (tylko klasyczny checkout)
 * --------------------------------------------------------------- */

.ecb-scl-blocked {
	margin: 0 0 8px !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var( --ecb-scl-muted ) !important;
	text-align: center;
}

#place_order.ecb-scl-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
 * Panel przy formularzu logowania
 * (Moje konto oraz modal logowania CheckoutWC)
 * --------------------------------------------------------------- */

.ecb-scl-magic {
	box-sizing: border-box;
	max-width: 100%;
	margin: 18px 0 0;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --ecb-scl-muted );
	text-align: left;
}

.ecb-scl-magic * {
	box-sizing: border-box;
}

/* Separator „albo" — dwie równorzędne drogi, nie dopisek pod formularzem */
.ecb-scl-magic__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	text-transform: var( --ecb-scl-btn-tt );
	letter-spacing: var( --ecb-scl-btn-ls );
	color: #7a857f;
}

.ecb-scl-magic__or::before,
.ecb-scl-magic__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var( --ecb-scl-line );
}

/* Drugi sposób zalogowania, więc nie może wyglądać na przypis.
 *
 * Sam obrys na białym tle był zbyt cichy obok solidnego przycisku logowania —
 * dlatego jest wypełnienie kolorem marki w niskiej mocy, obrys 2 px i te same
 * proporcje, wielkość liter i promień co przycisk sklepu (JS zdejmuje je
 * z prawdziwego przycisku). Ma być widać drugie wyjście, nie ozdobnik. */
.ecb-scl-magic__toggle {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	width: 100% !important;
	min-height: var( --ecb-scl-btn-h ) !important;
	height: auto !important;
	margin: 0 !important;
	padding: 13px 18px !important;
	border: 2px solid var( --ecb-scl-brand ) !important;
	border-radius: var( --ecb-scl-radius ) !important;
	background: #eaf2ea !important;
	background: rgba( var( --ecb-scl-brand-rgb ), 0.1 ) !important;
	/* Ostatnia wygrywa tam, gdzie jest obsługiwana. color-mix jest wiązany
	 * z samą zmienną --ecb-scl-brand, więc działa też wtedy, gdy kolor przyszedł
	 * z filtra PHP jako hex i nie ma odpowiednika w --ecb-scl-brand-rgb. */
	background: color-mix( in srgb, var( --ecb-scl-brand ) 12%, #fff ) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-family: var( --ecb-scl-btn-ff ) !important;
	font-size: var( --ecb-scl-btn-fs ) !important;
	font-weight: var( --ecb-scl-btn-fw ) !important;
	line-height: 1.2 !important;
	letter-spacing: var( --ecb-scl-btn-ls ) !important;
	text-transform: var( --ecb-scl-btn-tt ) !important;
	text-decoration: none !important;
	color: var( --ecb-scl-brand ) !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ecb-scl-magic__toggle:hover,
.ecb-scl-magic__toggle:focus {
	background: #dcebdd !important;
	background: rgba( var( --ecb-scl-brand-rgb ), 0.18 ) !important;
	background: color-mix( in srgb, var( --ecb-scl-brand ) 20%, #fff ) !important;
}

.ecb-scl-magic__toggle svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Konieczne: `display: flex !important` powyżej ma tę samą specyficzność co
   klasa ukrywająca i stoi wyżej w pliku, więc bez tej reguły przycisk nie
   znikałby po otwarciu panelu. */
.ecb-scl-magic__toggle.ecb-scl-is-hidden {
	display: none !important;
}

.ecb-scl-magic__panel {
	padding: 18px;
	border: 1px solid var( --ecb-scl-line );
	border-radius: var( --ecb-scl-radius );
	background: #f7faf8;
}

.ecb-scl-magic__hint {
	margin: 0 0 12px !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var( --ecb-scl-muted ) !important;
}

.ecb-scl-magic__label {
	display: block !important;
	margin: 0 0 12px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	color: var( --ecb-scl-ink ) !important;
}

/* 16 px celowo — poniżej tej wartości iOS Safari przybliża stronę
 * po kliknięciu w pole i zoom zostaje po zamknięciu klawiatury. */
.ecb-scl-magic__email {
	display: block !important;
	width: 100% !important;
	height: 52px !important;
	margin: 6px 0 0 !important;
	padding: 0 16px !important;
	border: 1px solid var( --ecb-scl-line ) !important;
	border-radius: var( --ecb-scl-radius ) !important;
	background: #fff !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	color: var( --ecb-scl-ink ) !important;
}

.ecb-scl-magic__email:focus {
	border-color: var( --ecb-scl-brand ) !important;
	outline: 3px solid #dbe7dc !important;
	outline: 3px solid color-mix( in srgb, var( --ecb-scl-brand ) 25%, #fff ) !important;
	outline-offset: 0 !important;
}

.ecb-scl-magic__send.button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;
	height: var( --ecb-scl-btn-h ) !important;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: var( --ecb-scl-radius ) !important;
	background-color: var( --ecb-scl-brand ) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-family: var( --ecb-scl-btn-ff ) !important;
	font-size: var( --ecb-scl-btn-fs ) !important;
	font-weight: var( --ecb-scl-btn-fw ) !important;
	line-height: 1.25 !important;
	letter-spacing: var( --ecb-scl-btn-ls ) !important;
	text-transform: var( --ecb-scl-btn-tt ) !important;
	color: #fff !important;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.ecb-scl-magic__send.button:hover:not( [disabled] ) {
	filter: brightness( 0.9 );
}

.ecb-scl-magic__send[disabled] {
	opacity: 0.6;
	cursor: default;
}

.ecb-scl-magic__msg {
	margin: 12px 0 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var( --ecb-scl-muted ) !important;
}

.ecb-scl-magic__msg:empty {
	display: none;
}

.ecb-scl-magic__msg[data-type="ok"] {
	color: #14713d !important;
}

.ecb-scl-magic__msg[data-type="error"] {
	color: #c31f33 !important;
}

/* ---------------------------------------------------------------
 * Modal logowania (tylko klasyczny checkout)
 * --------------------------------------------------------------- */

.ecb-scl-modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999999;
	box-sizing: border-box;
	padding: 16px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Flex zamiast marginesu w vh: gdy na telefonie wyskoczy klawiatura,
 * karta zostaje w widocznym obszarze i może się przewinąć zamiast
 * schować pod klawiaturą. */
.ecb-scl-modal.is-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.ecb-scl-noscroll {
	overflow: hidden;
}

.ecb-scl-modal * {
	box-sizing: border-box;
}

.ecb-scl-modal__backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba( 18, 26, 22, 0.55 );
}

.ecb-scl-modal__card {
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 6vh 0 16px;
	padding: 30px 28px 24px !important;
	background: #fff !important;
	border-radius: 14px !important;
	box-shadow: 0 20px 55px rgba( 0, 0, 0, 0.3 );
	font-family: inherit;
	text-align: left !important;
}

.ecb-scl-modal__x {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px !important;
	min-width: 0 !important;
	height: 32px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #93a09a !important;
	cursor: pointer;
}

.ecb-scl-modal__x:hover {
	background: #f1f5f2 !important;
	color: var( --ecb-scl-ink ) !important;
}

.ecb-scl-modal__title {
	margin: 0 0 5px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	color: var( --ecb-scl-ink ) !important;
}

.ecb-scl-modal__sub {
	margin: 0 0 20px !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var( --ecb-scl-muted ) !important;
}

.ecb-scl-modal__label {
	display: block !important;
	margin: 0 0 14px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	color: var( --ecb-scl-ink ) !important;
}

.ecb-scl-modal__label input {
	display: block !important;
	width: 100% !important;
	margin: 6px 0 0 !important;
	padding: 12px 13px !important;
	border: 1px solid var( --ecb-scl-line ) !important;
	border-radius: var( --ecb-scl-radius ) !important;
	background: #fff !important;
	box-shadow: none !important;
	font-family: inherit !important;
	/* Nie schodzić poniżej 16 px: iOS Safari przy mniejszej czcionce
	 * automatycznie przybliża stronę po kliknięciu w pole, a po zamknięciu
	 * klawiatury zoom zostaje i checkout wygląda na zepsuty. */
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var( --ecb-scl-ink ) !important;
}

.ecb-scl-modal__label input:focus {
	border-color: var( --ecb-scl-brand ) !important;
	outline: 3px solid #dbe7dc !important;
	outline: 3px solid color-mix( in srgb, var( --ecb-scl-brand ) 25%, #fff ) !important;
	outline-offset: 0 !important;
}

.ecb-scl-modal__submit {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 18px 0 0 !important;
	padding: 13px 18px !important;
	border: 0 !important;
	border-radius: var( --ecb-scl-radius ) !important;
	background-color: var( --ecb-scl-brand ) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #fff !important;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.ecb-scl-modal__submit:hover:not( [disabled] ) {
	filter: brightness( 0.9 );
}

.ecb-scl-modal__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.ecb-scl-modal__msg {
	margin: 13px 0 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var( --ecb-scl-muted ) !important;
}

.ecb-scl-modal__msg:empty {
	display: none;
}

.ecb-scl-modal__msg[data-type="ok"] {
	color: #14713d !important;
}

.ecb-scl-modal__msg[data-type="error"] {
	color: #c31f33 !important;
}

.ecb-scl-modal__alt {
	margin: 16px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	text-align: center !important;
}

.ecb-scl-modal__alt--small {
	margin-top: 9px !important;
	font-size: 12px !important;
}

.ecb-scl-modal__alt--small a {
	color: #93a09a !important;
	text-decoration: underline !important;
}

.ecb-scl-modal__link {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	color: var( --ecb-scl-brand ) !important;
	cursor: pointer;
}

.ecb-scl-modal__link[disabled] {
	opacity: 0.55;
	cursor: default;
}

@media ( max-width: 480px ) {
	.ecb-scl-modal__card {
		margin-top: 3vh;
		padding: 26px 20px 20px !important;
	}
}