/**
 * Fluo InPost Checkout.
 *
 * Celowo neutralne kolory - wszystko sciaga z --fluo-* , wiec motyw moze
 * nadpisac paletę jednym blokiem :root bez grzebania w tej wtyczce.
 */

:root {
	--fluo-accent: #1a1a1a;
	--fluo-accent-soft: rgba(26, 26, 26, .06);
	--fluo-border: #dcdcdc;
	--fluo-muted: #6b6b6b;
	--fluo-error: #b3261e;
	--fluo-error-soft: rgba(179, 38, 30, .06);
	--fluo-error-tint: rgba(179, 38, 30, .035);
	--fluo-error-line: rgba(179, 38, 30, .3);
	--fluo-error-ring: rgba(179, 38, 30, .13);
	--fluo-radius: 10px;

	/* Kolko z wykrzyknikiem - uzywane jako maska, wiec barwi sie currentColor. */
	--fluo-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");
}

/* Kroki chowamy klasa nakladana na istniejace elementy WooCommerce, bez
   przenoszenia ich w DOM - dzieki temu selektory motywu oparte na rodzicu
   dalej dzialaja. Bez JS-a nic nie dostaje tej klasy i checkout wyglada
   po staremu. */
.fluo-step-hidden {
	display: none !important;
}

/* Motywy z ukladem col2-set trzymaja dane klienta i podsumowanie w dwoch
   kolumnach obok siebie. My pokazujemy je w osobnych krokach, wiec kazda
   musi zajac cala szerokosc - inaczej krok 3 wisi przy lewej krawedzi,
   a krok 4 przy prawej. Klase nadaje JS tylko tym dwom elementom. */
.fluo-fullwidth {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.fluo-checkout {
	margin: 0 0 2em;
}

.fluo-step__title {
	margin: 0 0 .8em;
}

/* --- pasek postepu -------------------------------------------------- */

.fluo-progress {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fluo-progress__item {
	display: flex;
	align-items: center;
	gap: .5em;
	flex: 1 1 0;
	min-width: 120px;
	margin: 0;
	padding: .6em .8em;
	border-bottom: 3px solid var(--fluo-border);
	color: var(--fluo-muted);
	font-size: .95em;
	line-height: 1.2;
}

.fluo-progress__item .fluo-progress__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: var(--fluo-border);
	color: #fff;
	font-size: .85em;
	font-weight: 700;
}

.fluo-progress__item.is-current,
.fluo-progress__item.is-done {
	color: var(--fluo-accent);
	border-bottom-color: var(--fluo-accent);
}

.fluo-progress__item.is-current .fluo-progress__num,
.fluo-progress__item.is-done .fluo-progress__num {
	background: var(--fluo-accent);
}

.fluo-progress__item.is-done {
	cursor: pointer;
}

/* --- kafelki dostawy ------------------------------------------------ */

.fluo-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1em;
}

.fluo-tile {
	display: flex;
	align-items: flex-start;
	gap: .9em;
	padding: 1.1em 1.2em;
	border: 2px solid var(--fluo-border);
	border-radius: var(--fluo-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.fluo-tile:hover,
.fluo-tile:focus {
	border-color: var(--fluo-accent);
	outline: none;
}

.fluo-tile.is-selected {
	border-color: var(--fluo-accent);
	background: var(--fluo-accent-soft);
	box-shadow: 0 0 0 1px var(--fluo-accent) inset;
}

.fluo-tile__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--fluo-accent-soft) center / 20px 20px no-repeat;
}

.fluo-tile__icon--locker {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.8'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M12 3v18M8 8h1M16 8h1M8 15h1M16 15h1'/%3E%3C/svg%3E");
}

.fluo-tile__icon--courier {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.8'%3E%3Cpath d='M2 7h11v9H2zM13 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
}

.fluo-tile__body {
	display: block;
}

.fluo-tile__label {
	display: block;
	font-weight: 600;
	font-size: 1.05em;
}

.fluo-tile__note {
	display: block;
	margin-top: .25em;
	color: var(--fluo-muted);
	font-size: .9em;
	line-height: 1.4;
}

.fluo-tile__price {
	display: block;
	margin-top: .5em;
	font-weight: 600;
}

.fluo-tile__variants {
	margin-top: .7em;
	max-width: 100%;
}

/* --- panel paczkomatu ----------------------------------------------- */

.fluo-locker {
	margin: 0 0 2em;
}

.fluo-point {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 1em;
	padding: .9em 1em;
	border: 1px dashed var(--fluo-border);
	border-radius: var(--fluo-radius);
	color: var(--fluo-muted);
}

.fluo-point__set {
	display: none;
}

.fluo-point.is-set {
	border-style: solid;
	border-color: var(--fluo-accent);
	background: var(--fluo-accent-soft);
	color: inherit;
}

.fluo-point.is-set .fluo-point__empty {
	display: none;
}

.fluo-point.is-set .fluo-point__set {
	display: block;
}

.fluo-point__name {
	display: block;
	font-size: 1.1em;
}

.fluo-point__desc {
	display: block;
	color: var(--fluo-muted);
	font-size: .92em;
}

/* Ukryte wiersze formularza przy dostawie do paczkomatu. Klasa, a nie inline
   style - po powrocie do kuriera wiersz odzyskuje swoj naturalny uklad
   (WooCommerce uzywa tam form-row-first / form-row-last). */
.fluo-row-hidden {
	display: none !important;
}

.fluo-locker__lead {
	margin: -.3em 0 1.2em;
	color: var(--fluo-muted);
}

/*
 * Panel przeniesiony z innej wtyczki.
 *
 * Nie znamy jej klas ani identyfikatorow, wiec stylujemy po wlasnych znacznikach
 * nadawanych przy adopcji: __info to informacja o punkcie, __action to przycisk
 * otwierajacy mape. Selektory zaczepiamy o #fluo-external-point - nasz wlasny
 * identyfikator - zeby wygrac z regulami motywu bez uzycia !important.
 */
.fluo-external {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.1em;
	margin: 0;
	padding: 1.4em 1.5em;
	border: 1px solid var(--fluo-border);
	border-radius: var(--fluo-radius);
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -20px rgba(0, 0, 0, .55);
}

/* --- informacja o wybranym punkcie --- */

#fluo-external-point .fluo-external__info {
	order: 1;
	position: relative;
	margin: 0;
	min-height: 2.6em;
	padding: .1em 0 .1em 3.4em;
	color: var(--fluo-accent);
	font-size: 1.02em;
	line-height: 1.6;
}

/* Zanim klient cokolwiek wybierze, blok bywa pusty - wtedy niech go nie widac. */
#fluo-external-point .fluo-external__info:empty {
	display: none;
}

#fluo-external-point .fluo-external__info::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2.6em;
	height: 2.6em;
	border-radius: 10px;
	background: var(--fluo-accent-soft) center / 1.4em 1.4em no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.8'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M12 3v18M8 8h1M16 8h1M8 15h1M16 15h1'/%3E%3C/svg%3E");
}

/* --- przycisk otwierajacy mape --- */

#fluo-external-point .fluo-external__action {
	order: 2;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: auto;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 1.4em;
	border: 1px solid var(--fluo-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--fluo-accent);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Ikona przez maske, a nie tlo - barwi sie razem z tekstem, wiec nie trzeba
   trzymac drugiej wersji kolorystycznej na hover. */
#fluo-external-point .fluo-external__action::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

#fluo-external-point .fluo-external__action:hover,
#fluo-external-point .fluo-external__action:focus {
	background: var(--fluo-accent);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 8px 18px -10px rgba(0, 0, 0, .5);
}

#fluo-external-point .fluo-external__action:focus-visible {
	outline: 2px solid var(--fluo-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	#fluo-external-point .fluo-external__action {
		transition: none;
	}
}

/* Podpowiedz pod polem telefonu w kroku z danymi. */
.fluo-field-note {
	display: block;
	margin-top: .35em;
	color: var(--fluo-muted);
	font-size: .9em;
	line-height: 1.4;
}

.fluo-external__empty {
	margin: 0;
	color: var(--fluo-muted);
	font-size: .93em;
}

.fluo-geowidget {
	position: relative;
	width: 100%;
	min-height: 320px;
	overflow: hidden;
	border: 1px solid var(--fluo-border);
	border-radius: var(--fluo-radius);
}

.fluo-geowidget inpost-geowidget {
	display: block;
	width: 100%;
	height: 100%;
}

.fluo-locker__fallback,
.fluo-locker__admin-hint {
	font-size: .93em;
	color: var(--fluo-muted);
}

.fluo-locker__admin-hint {
	padding: .7em .9em;
	border-left: 3px solid var(--fluo-error);
	background: rgba(179, 38, 30, .05);
}

/* --- nawigacja ------------------------------------------------------- */

.fluo-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75em;
	margin: 2em 0 0;
	padding-top: 1.5em;
	border-top: 1px solid var(--fluo-border);
}

.fluo-nav .fluo-btn--next {
	margin-left: auto;
}

/* Pasek kroku 4 stoi nad naglowkiem podsumowania, wiec kreska nad nim
   wygladalaby jak przypadkowa linia na szczycie kolumny. */
.fluo-nav--4 {
	margin-top: 0;
	margin-bottom: 1.5em;
	padding-top: 0;
	border-top: 0;
}

/*
 * Przyciski krokow.
 *
 * Celowo NIE uzywamy klasy .button motywu - dzieki temu nic nie trzeba
 * przebijac !importantem. Selektor .fluo-nav .fluo-btn ma specyficznosc 0,2,0,
 * wiec wygrywa z regulami motywu pisanymi na sam element `button`.
 */
.fluo-nav .fluo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 3rem;
	margin: 0;
	padding: 0 1.6em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease,
		box-shadow .18s ease, transform .18s ease;
}

.fluo-nav .fluo-btn__icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .18s ease;
}

/* --- akcja glowna --- */

.fluo-nav .fluo-btn--next {
	background: var(--fluo-accent);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 8px 18px -8px rgba(0, 0, 0, .45);
}

.fluo-nav .fluo-btn--next:hover,
.fluo-nav .fluo-btn--next:focus {
	background: #000;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 14px 26px -10px rgba(0, 0, 0, .5);
}

.fluo-nav .fluo-btn--next:hover .fluo-btn__icon {
	transform: translateX(3px);
}

.fluo-nav .fluo-btn--next:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/* --- akcja drugorzedna --- */

.fluo-nav .fluo-btn--back {
	background: transparent;
	color: var(--fluo-muted);
	border-color: var(--fluo-border);
	font-weight: 500;
	padding: 0 1.3em;
}

.fluo-nav .fluo-btn--back:hover,
.fluo-nav .fluo-btn--back:focus {
	background: var(--fluo-accent-soft);
	border-color: var(--fluo-accent);
	color: var(--fluo-accent);
}

.fluo-nav .fluo-btn--back:hover .fluo-btn__icon {
	transform: translateX(-3px);
}

.fluo-nav .fluo-btn:focus-visible {
	outline: 2px solid var(--fluo-accent);
	outline-offset: 3px;
}

/* Kto prosil o mniej ruchu, dostaje mniej ruchu. */
@media (prefers-reduced-motion: reduce) {
	.fluo-nav .fluo-btn,
	.fluo-nav .fluo-btn__icon {
		transition: none;
	}

	.fluo-nav .fluo-btn:hover,
	.fluo-nav .fluo-btn:focus {
		transform: none;
	}

	.fluo-nav .fluo-btn:hover .fluo-btn__icon {
		transform: none;
	}
}

/* --- krok podsumowania ----------------------------------------------- */

.fluo-summary {
	margin: 1.4em 0;
	padding: 1.2em 1.4em;
	border: 1px solid var(--fluo-border);
	border-radius: var(--fluo-radius);
	background: #fff;
}

.fluo-summary__title {
	margin: 0 0 .8em;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--fluo-muted);
}

.fluo-summary__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .45em 1.4em;
	margin: 0;
}

.fluo-summary__list dt {
	margin: 0;
	color: var(--fluo-muted);
	font-size: .93em;
	white-space: nowrap;
}

.fluo-summary__list dd {
	margin: 0;
	font-weight: 500;
	line-height: 1.5;
}

/*
 * Blok potwierdzenia. Selektory sa zaczepione o #place_order, bo to przycisk
 * WooCommerce - id wygrywa z regulami motywu bez uzycia !important.
 */
.fluo-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75em;
	margin-top: 1.6em;
	padding-top: 1.5em;
	border-top: 1px solid var(--fluo-border);
}

.fluo-confirm__question {
	flex: 1 1 100%;
	margin: 0 0 .2em;
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.3;
}

#place_order.fluo-btn--confirm {
	order: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	margin: 0;
	padding: 0 2.2em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--fluo-accent);
	color: #fff;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: none;
	text-shadow: none;
	width: auto;
	float: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 10px 22px -10px rgba(0, 0, 0, .5);
	transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#place_order.fluo-btn--confirm:hover,
#place_order.fluo-btn--confirm:focus {
	background: #000;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 16px 30px -12px rgba(0, 0, 0, .55);
}

#place_order.fluo-btn--confirm:active {
	transform: translateY(0);
}

.fluo-confirm .fluo-confirm__no {
	order: 2;
}

@media (prefers-reduced-motion: reduce) {
	#place_order.fluo-btn--confirm {
		transition: none;
	}

	#place_order.fluo-btn--confirm:hover,
	#place_order.fluo-btn--confirm:focus {
		transform: none;
	}
}

/* Przycisk "Nie" jest poza .fluo-nav, wiec potrzebuje wlasnej deklaracji
   tego samego stylu drugorzednego. */
.fluo-confirm__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	margin: 0;
	padding: 0 1.6em;
	border: 1px solid var(--fluo-border);
	border-radius: 999px;
	background: transparent;
	color: var(--fluo-muted);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.fluo-confirm__no:hover,
.fluo-confirm__no:focus {
	background: var(--fluo-accent-soft);
	border-color: var(--fluo-accent);
	color: var(--fluo-accent);
}

@media (max-width: 600px) {
	#place_order.fluo-btn--confirm,
	.fluo-confirm__no {
		flex: 1 1 100%;
	}
}

/* --- walidacja ------------------------------------------------------- */

/* Zbiorczy komunikat nad przyciskami kroku. */
.fluo-error {
	display: none;
	flex: 1 1 100%;
	align-items: center;
	gap: .6em;
	margin: 0 0 .3em;
	padding: .85em 1.1em;
	border: 1px solid var(--fluo-error-line);
	border-radius: 10px;
	background: var(--fluo-error-soft);
	color: var(--fluo-error);
	font-size: .95em;
	font-weight: 500;
	line-height: 1.45;
}

.fluo-error.is-visible {
	display: flex;
	animation: fluo-appear .18s ease-out;
}

.fluo-error::before {
	content: "";
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--fluo-icon-alert) center / contain no-repeat;
	mask: var(--fluo-icon-alert) center / contain no-repeat;
}

/*
 * Oznaczenie bledu przy konkretnym polu.
 *
 * Selektory zaczepione o #customer_details daja specyficznosc 1,2,1 - dosc,
 * zeby przebic style pol motywu bez siegania po !important.
 */
#customer_details .fluo-invalid > label,
#customer_details .fluo-invalid > label.required_field {
	color: var(--fluo-error);
}

#customer_details .fluo-invalid input.input-text,
#customer_details .fluo-invalid input[type="text"],
#customer_details .fluo-invalid input[type="tel"],
#customer_details .fluo-invalid input[type="email"],
#customer_details .fluo-invalid select,
#customer_details .fluo-invalid textarea {
	border-color: var(--fluo-error);
	background-color: var(--fluo-error-tint);
	box-shadow: 0 0 0 3px var(--fluo-error-ring);
}

#customer_details .fluo-invalid input.input-text:focus,
#customer_details .fluo-invalid input[type="text"]:focus,
#customer_details .fluo-invalid input[type="tel"]:focus,
#customer_details .fluo-invalid input[type="email"]:focus,
#customer_details .fluo-invalid select:focus,
#customer_details .fluo-invalid textarea:focus {
	border-color: var(--fluo-error);
	box-shadow: 0 0 0 4px var(--fluo-error-ring);
}

.fluo-field-error {
	display: flex;
	align-items: flex-start;
	gap: .4em;
	margin-top: .45em;
	color: var(--fluo-error);
	font-size: .88em;
	font-weight: 500;
	line-height: 1.45;
	animation: fluo-appear .18s ease-out;
}

.fluo-field-error::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	margin-top: .12em;
	background-color: currentColor;
	-webkit-mask: var(--fluo-icon-alert) center / contain no-repeat;
	mask: var(--fluo-icon-alert) center / contain no-repeat;
}

/* Przy bledzie podpowiedz ustepuje miejsca komunikatowi - dwie linie pod
   polem naraz to szum, a nie pomoc. */
.fluo-invalid .fluo-field-note {
	display: none;
}

@keyframes fluo-appear {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fluo-error.is-visible,
	.fluo-field-error {
		animation: none;
	}
}

/* Metody wysylki wybieramy w kroku 1, wiec w podsumowaniu zostaje sama
   nazwa z cena - bez radiobuttonow, ktore rozjechalyby wybor. */
body.fluo-ic-on #shipping_method input[type="radio"] {
	display: none;
}

body.fluo-ic-on #shipping_method label {
	cursor: default;
}

@media (max-width: 600px) {
	.fluo-progress__item {
		min-width: 0;
		padding: .5em .4em;
		font-size: .85em;
	}

	.fluo-progress__item .fluo-progress__num {
		width: 1.5em;
		height: 1.5em;
	}

	.fluo-nav {
		padding-top: 1.2em;
	}

	/* Na waskim ekranie oba przyciski na cala szerokosc - kciukiem trudno
	   trafic w wasny cel przy krawedzi. */
	.fluo-nav .fluo-btn {
		flex: 1 1 auto;
		padding: 0 1em;
	}

	.fluo-nav .fluo-btn--next {
		margin-left: 0;
	}
}

/* --- wyszukiwanie adresu nad mapa ------------------------------------ */

.fluo-geosearch {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	margin: 0 0 1em;
}

.fluo-geosearch input {
	flex: 1 1 260px;
	min-height: 2.75rem;
	padding: 0 1em;
	border: 1px solid var(--fluo-border);
	border-radius: 999px;
	font: inherit;
}

.fluo-geosearch input:focus {
	border-color: var(--fluo-accent);
	outline: none;
}

.fluo-geosearch .fluo-btn--back {
	flex: 0 0 auto;
	min-height: 2.75rem;
}

.fluo-geosearch__msg {
	flex: 1 1 100%;
	margin: 0;
	color: var(--fluo-muted);
	font-size: .9em;
	min-height: 1.2em;
}

/* --- uklad pol rozliczeniowych --------------------------------------- */

/*
 * WooCommerce uklada pary pol na float: form-row-first w lewo, form-row-last
 * w prawo. Gdy pod jednym polem pojawi sie komunikat bledu, kolumna rosnie,
 * a kolejne pole nie przechodzi do nowego wiersza tylko oblewa wyzszy element
 * i caly formularz sie rozjezdza.
 *
 * Siatka nie ma tego problemu: wiersz zawsze jest wysokosci najwyzszego pola,
 * a nastepna para zaczyna sie od nowa. Wlaczamy ja tylko przy dzialajacych
 * krokach, wiec bez JS-a formularz zostaje przy oryginalnym ukladzie motywu.
 */
body.fluo-ic-on .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.5em;
	align-items: start;
}

body.fluo-ic-on .woocommerce-billing-fields__field-wrapper > .form-row {
	width: auto;
	max-width: none;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

body.fluo-ic-on .woocommerce-billing-fields__field-wrapper > .form-row-wide,
body.fluo-ic-on .woocommerce-billing-fields__field-wrapper > .notes {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	body.fluo-ic-on .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}