/**
 * WP Leads Press — formularz leadów.
 *
 * 🔴 ZASADA: ten arkusz odpowiada za UKŁAD, nie za wygląd.
 *
 * Witryny mają własny CSS dla formularzy, pisany pod selektory typów pól —
 * na czasnawellu.pl w Customizerze Divi siedzi komplet: `input[type="submit"]`
 * (biały, czarna ramka 3 px, pigułka) i `input[type="text"|"email"|"tel"]`
 * (szare tło, 20 px, promień 6 px). Pierwsza wersja tego pliku ustawiała własne
 * ramki, tła i paddingi, ładowała się PO arkuszu motywu i po prostu go zabijała
 * — formularz przestawał wyglądać jak reszta strony (23.09.2026).
 *
 * Dlatego wygląd pól i przycisku opisujemy wyłącznie wewnątrz `:where()`, które
 * ma zerową specyficzność: taki styl działa, gdy motyw nie mówi nic, i ustępuje
 * każdej regule motywu bez walki i bez `!important`. Reguły układu (flex,
 * marginesy, szerokości kolumn) zostają normalne, bo z wyglądem nie kolidują.
 *
 * ⚠️ Uwaga na pułapkę: `:where()` zeruje specyficzność WYŁĄCZNIE tego, co stoi
 * w jego nawiasie. Zapis `:where(.wplp-lead-form) input[type="text"]` zostawia
 * `input[type="text"]` z pełną wagą, czyli tyle samo, ile ma reguła motywu —
 * a przy remisie wygrywa arkusz wczytany później, więc nasz. Cały selektor musi
 * trafić do środka nawiasu.
 */

.wplp-lead-form-wrap {
	margin: 1.8em 0;
	max-width: var(--wplp-max-width, none);
}

.wplp-lead-form-wrap--align-center {
	margin-left: auto;
	margin-right: auto;
}

.wplp-lead-form-wrap--align-right {
	margin-left: auto;
}

.wplp-lead-form__title {
	margin: 0 0 0.4em;
}

.wplp-lead-form__description {
	margin: 0 0 1em;
}

/* ---------------------------------------------------------------------------
 * Układ całości — gdzie stoi blok tekstu, a gdzie blok formularza.
 * Warstwa NAD ustawieniami pól: tamte decydują, jak wygląda wnętrze formularza.
 * ------------------------------------------------------------------------ */

/* Dwie kolumny: tekst obok formularza. */
.wplp-lead-form-wrap--comp-split-left,
.wplp-lead-form-wrap--comp-split-right {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4em;
	/* Obie kolumny od góry. Wyśrodkowanie w pionie spychało tekst na środek
	   wysokości formularza i przy dłuższym opisie wyglądało jak przypadek. */
	align-items: start;
}

.wplp-lead-form-wrap--comp-split-left .wplp-lead-form__intro,
.wplp-lead-form-wrap--comp-split-right .wplp-lead-form__intro {
	margin: 0;
}

.wplp-lead-form-wrap--comp-split-left .wplp-lead-form__description,
.wplp-lead-form-wrap--comp-split-right .wplp-lead-form__description {
	margin-bottom: 0;
}

/* Odwrócenie kolejności zamiast zmiany znacznika — czytnik ekranu dostaje
   tekst przed formularzem w obu wariantach. */
.wplp-lead-form-wrap--comp-split-right .wplp-lead-form__intro {
	order: 2;
}

/* Wyśrodkowany — wąska kolumna na środku. */
.wplp-lead-form-wrap--comp-centered {
	max-width: var(--wplp-max-width, 560px);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.wplp-lead-form-wrap--comp-centered .wplp-lead-form__field label {
	text-align: left;
}

.wplp-lead-form-wrap--comp-centered .wplp-lead-form__submit {
	text-align: center;
}

/* Na wąskim ekranie każdy układ dwukolumnowy schodzi do jednej kolumny. */
@media (max-width: 782px) {
	.wplp-lead-form-wrap--comp-split-left,
	.wplp-lead-form-wrap--comp-split-right {
		grid-template-columns: 1fr;
		gap: 1.2em;
	}

	.wplp-lead-form-wrap--comp-split-right .wplp-lead-form__intro {
		order: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Układ — nasza odpowiedzialność
 * ------------------------------------------------------------------------ */

.wplp-lead-form__field {
	margin-bottom: 0.9em;
}

/* Selektor celowo mocniejszy: motywy ustawiają `label{display:inline-block}`
   i bez tego etykieta wchodziła obok pola zamiast nad nim. To układ, nie wygląd,
   więc tu ustępować nie możemy. */
.wplp-lead-form .wplp-lead-form__field label {
	display: block;
	margin-bottom: 0.3em;
}

/* Pola mają wypełniać szerokość kolumny — inaczej `min-width` z motywu
   zostawia je w przypadkowych rozmiarach obok siebie. */
.wplp-lead-form .wplp-lead-form__field input,
.wplp-lead-form .wplp-lead-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
}

.wplp-lead-form__required {
	color: #b32d2e;
	margin-left: 0.15em;
}

/* Etykieta obok pola */
.wplp-lead-form--labels-left .wplp-lead-form__field,
.wplp-lead-form--labels-right .wplp-lead-form__field {
	display: flex;
	align-items: center;
	gap: 0.8em;
}

.wplp-lead-form.wplp-lead-form--labels-left .wplp-lead-form__field label,
.wplp-lead-form.wplp-lead-form--labels-right .wplp-lead-form__field label {
	flex: 0 0 var(--wplp-label-width, 30%);
	margin-bottom: 0;
}

.wplp-lead-form--labels-left .wplp-lead-form__field input,
.wplp-lead-form--labels-right .wplp-lead-form__field input {
	flex: 1 1 auto;
	min-width: 0;
}

.wplp-lead-form--labels-right .wplp-lead-form__field {
	flex-direction: row-reverse;
}

/* Pola w jednej linii */
.wplp-lead-form--horizontal .wplp-lead-form__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
	align-items: flex-end;
}

.wplp-lead-form--horizontal .wplp-lead-form__field {
	flex: 1 1 12em;
	margin-bottom: 0;
	min-width: 0;
}

.wplp-lead-form--horizontal .wplp-lead-form__submit {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.wplp-lead-form--horizontal .wplp-lead-form__fields {
		display: block;
	}

	.wplp-lead-form--horizontal .wplp-lead-form__field {
		margin-bottom: 0.9em;
	}
}

/* ---------------------------------------------------------------------------
 * Wygląd — tylko jako podkład, gdy motyw nic nie narzuca.
 * `:where()` daje zerową specyficzność, więc KAŻDA reguła motywu to przebija.
 * ------------------------------------------------------------------------ */

:where(.wplp-lead-form input[type="text"],
        .wplp-lead-form input[type="email"],
        .wplp-lead-form input[type="tel"]) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75em 0.9em;
	border: 1px solid var(--wplp-field-border, rgba(0, 0, 0, 0.18));
	border-radius: var(--wplp-field-radius, 4px);
	background: var(--wplp-field-bg, #fff);
	font-family: inherit;
	/* 16px to próg, poniżej którego Safari na telefonie przybliża stronę przy
	   kliknięciu w pole. */
	font-size: max(1em, 16px);
	color: inherit;
}

:where(.wplp-lead-form input[type="submit"]) {
	cursor: pointer;
	padding: 0.7em 1.8em;
	background: var(--wplp-button-bg, #2271b1);
	color: var(--wplp-button-text, #fff);
	border: 2px solid var(--wplp-button-border, transparent);
	border-radius: var(--wplp-button-radius, 4px);
	font-family: inherit;
	font-weight: 600;
}

/* Pułapka na boty. Musi zostać niewidoczna dla człowieka i obecna w kodzie
   strony dla automatu — dlatego odsunięcie, a nie display:none. */
.wplp-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}