/* =====================================================================
   FORMULARZE - standard Brand Perspective

   Obowiązuje wszystkie pola na stronie: okno „Zapytaj o ofertę”, sekcję
   kontaktową i pola wtyczki formularzy, jeśli na stronie stoi.

   ZAŁOŻENIE, KTÓRE DECYDUJE O CAŁYM UKŁADZIE

   Nazwa pola stoi domyślnie w środku pola, a po kliknięciu albo
   rozpoczęciu pisania przesuwa się do góry i siada NA konturze,
   przecinając go - bo ma tło i wyściółkę po bokach.

   Zrobione czystym CSS-em, bez JavaScriptu:
     - pole ma `placeholder=" "` (spacja), więc `:placeholder-shown`
       mówi „użytkownik jeszcze nic nie wpisał”,
     - w kodzie pole stoi PRZED etykietą, dzięki czemu działa selektor
       sąsiada `+`; to pewniejsze niż `:has()`,
     - `for`/`id` zostają, więc kliknięcie w etykietę nadal ustawia
       kursor w polu, a czytnik ekranu czyta ją normalnie.

   Zamiana kolejności `input` i `label` w szablonie psuje ten efekt
   bez żadnego komunikatu - to jest pierwsze miejsce do sprawdzenia,
   gdy etykiety przestaną się podnosić.

   SZEŚĆ ZASAD, KTÓRYCH NIE ŁAMIEMY

   1. Stan „pole aktywne” to WYŁĄCZNIE zmiana koloru ramki. Cień albo
      obwódka przy polu wygląda na usterkę przeglądarki, nie na zamiar.
   2. Gwiazdka przy polach wymaganych zostaje. To konwencja, którą
      wszyscy rozumieją - przy konwencjach interfejsu rozstrzyga
      przyzwyczajenie użytkownika, a nie czystość rozumowania.
   3. Odstęp między polami nie schodzi poniżej 1.8rem. Etykieta w stanie
      podniesionym wychodzi ponad krawędź pola i przy mniejszym odstępie
      zaczyna dotykać pola wyżej.
   4. Dopisek „(nieobowiązkowe)” znika, gdy etykieta wjeżdża w kontur -
      nie ma tam na niego miejsca i rozpycha ramkę.
   5. `rows` bije `min-height`. Chcesz niższe pole wiadomości - ustaw
      `height` obok `min-height`; samo `min-height` nic nie da.
   6. Pułapkę na roboty robimy przez wyprowadzenie poza ekran,
      nie `display: none` - to drugie bywa przez automaty rozpoznawane.
   ===================================================================== */

/* KOLOR GLOWNY W TEKSCIE (od 1.23.2): gwiazdka, „czytaj wiecej", numer
   pod przyciskiem, etykieta z kursorem, ikony danych kontaktowych,
   odnosnik w oknie zgody. Biora `--bp-akcent-tekst`, a gdy strona go nie
   ustawia - zwykly kolor glowny (wyglad bez zmian). Strona z jasnym
   kolorem glownym (zolty, turkus, pomarancz), ktory na bialej karcie
   formularza nie ma 4,5:1, ustawia tu ciemniejszy odcien tej samej barwy. */

.bp-pole {
	position: relative;
	margin: 0 0 1.8rem;
}

.bp-pole input[type="text"],
.bp-pole input[type="email"],
.bp-pole input[type="tel"],
.bp-pole input[type="number"],
.bp-pole textarea,
.bp-pole select {
	display: block;
	width: 100%;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--bp-ramka);
	border-radius: var(--bp-pole-promien);
	background: var(--bp-biel);
	color: var(--bp-tekst);
	font-family: inherit;
	font-size: 1.7rem;
	line-height: 2.4rem;
	transition: border-color .18s ease;
}

.bp-pole input:focus,
.bp-pole textarea:focus,
.bp-pole select:focus {
	border-color: var(--bp-akcent-tekst, var(--bp-akcent));
	outline: none;
}

.bp-pole textarea {
	resize: vertical;
	min-height: 10rem;
}

.bp-pole label {
	position: absolute;
	left: 1rem;
	top: 1.4rem;
	margin: 0;
	padding: 0 0.6rem;
	background: var(--bp-biel);
	color: var(--bp-tekst-slabszy);
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 400;
	pointer-events: none;
	transform-origin: left center;
	transition: transform .16s ease, color .16s ease;
}

/*
   ETYKIETA WJEŻDŻA W KONTUR, ZMNIEJSZA SIĘ DO 80% I ZOSTAWIA SWÓJ KOLOR.

   Decyzja właściciela z 23 września 2026 (specyfikacja 1, zasada F8),
   uchyla ustalenie z 8 sierpnia „wielkość czcionki ma się nie zmieniać".
   Wzorzec formularza jest plikiem i on rozstrzyga: przesunięcie o 2.3rem
   plus skala 0.8, żeby środek etykiety siadał na linii konturu.

   KOLOR: etykieta pola WYPEŁNIONEGO zostaje w kolorze pobocznym - nie
   ciemnieje. Kolor główny dostaje wyłącznie pole, w którym stoi kursor.
   Dwie klasy nadawane skryptem (`jest-aktywne`, `jest-wypelnione`) są
   dla pól wtyczki formularzy, gdzie selektor sąsiada `+` nie sięga.
*/
.bp-pole input:focus + label,
.bp-pole textarea:focus + label,
.bp-pole input:not(:placeholder-shown) + label,
.bp-pole textarea:not(:placeholder-shown) + label,
.bp-pole.jest-aktywne label,
.bp-pole.jest-wypelnione label {
	transform: translateY(-2.3rem) scale(.8);
}

.bp-pole input:focus + label,
.bp-pole textarea:focus + label,
.bp-pole.jest-aktywne label {
	color: var(--bp-akcent-tekst, var(--bp-akcent));
}

/* Gwiazdka pola wymaganego - zawsze w kolorze głównym (F8). */
.bp-pole label > span[aria-hidden="true"] {
	color: var(--bp-akcent-tekst, var(--bp-akcent));
}

/*
   ETYKIETA BEZ `for` - I DLACZEGO TO WYSTARCZA

   Formularz wtyczki potrafi stanąć na jednej podstronie DWA RAZY: raz
   w oknie „Zapytaj o ofertę", raz w treści zakładki kontakt. Gdyby pola
   miały identyfikatory, obie kopie dostałyby te same, a przeglądarka
   wiązałaby etykietę z pierwszą znalezioną - klikasz w etykietę widocznego
   pola, kursor ląduje w polu ukrytym w oknie.

   Rozwiązanie nie wymaga niczego nowego: etykieta ma `pointer-events: none`,
   więc kliknięcie w nią PRZECHODZI na pole leżące pod spodem. Powiązanie
   przez `for` nie jest do tego potrzebne, a bez identyfikatorów obie kopie
   formularza są sobie obojętne.

   Dlatego w treści formularza pola NIE dostają `id:`.
*/

/*
   ETYKIETA ZAWSZE W JEDNYM WIERSZU (F8).

   Waskie pole w parze (e-mail | telefon) nie miesci „Telefon
   (nieobowiazkowe)" - bez tego dopisek spadal do drugiego wiersza
   i wystawal poza ramke. Kolejnosc ratunku: najpierw dopisek sie
   zmniejsza (pole wezsze niz 30rem - do 0.8, niz 22rem - do 0.7), a gdy i to nie wystarczy,
   koniec etykiety ucina wielokropek. Etykieta nigdy nie lamie sie.
*/
.bp-pole:not(.bp-pole--zgoda) {
	container-type: inline-size;
}

/* Tylko etykieta plywajaca (bezposrednie dziecko pola); zdanie zgody
   siedzi glebiej i ma sie lamac normalnie. */
.bp-pole:not(.bp-pole--zgoda) > label {
	white-space: nowrap;
	max-width: calc(100% - 2rem);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dopisek „(nieobowiązkowe)” ma kolor i krój etykiety - ten sam
   napis, nie drugi. Znika razem z podniesieniem etykiety. */
.bp-pole__dodatek {
	/* inline-block + dol: mniejsze pismo nie podnosi wiersza etykiety
	   (bez tego etykieta rosla o 1-2 px ponad swoja wysokosc). */
	display: inline-block;
	vertical-align: bottom;
	color: inherit;
	font-weight: inherit;
}

@container (max-width: 30rem) {
	.bp-pole__dodatek {
		font-size: .8em;
	}
}

@container (max-width: 22rem) {
	.bp-pole__dodatek {
		font-size: .7em;
	}
}

.bp-pole input:focus + label .bp-pole__dodatek,
.bp-pole textarea:focus + label .bp-pole__dodatek,
.bp-pole input:not(:placeholder-shown) + label .bp-pole__dodatek,
.bp-pole textarea:not(:placeholder-shown) + label .bp-pole__dodatek,
.bp-pole.jest-aktywne .bp-pole__dodatek,
.bp-pole.jest-wypelnione .bp-pole__dodatek {
	display: none;
}

/*
   ODSTĘP POD PARĄ PÓL - łatwo go zgubić i długo nikt tego nie widzi.

   Pojedyncze pole niesie odstęp w sobie (`.bp-pole { margin-bottom }`),
   ale polom W PARZE ten odstęp jest zabierany regułą niżej - inaczej
   drugie pole pary spadałoby o wiersz. Skutek: para nie miała pod sobą
   NICZEGO i następne pole podchodziło jej pod ramkę.

   Dlatego odstęp przejmuje sam pojemnik pary. Ta sama wartość co przy
   pojedynczym polu, żeby rytm formularza się nie łamał.
*/
.bp-pole-para {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6rem;
	align-items: start;
	margin: 0 0 1.8rem;
}

/*
   POLA W PARZE STOJĄ W JEDNEJ LINII.

   Drugie pole pary jest w kodzie SĄSIADEM pierwszego, więc łapało regułę
   odstępu między kolejnymi polami (`.bp-pole + .bp-pole`) i spadało
   o półtora centymetra niżej. W siatce nie ma sąsiedztwa w pionie -
   odstęp między kolumnami robi `gap`.
*/
.bp-pole-para .bp-pole,
.bp-pole-para .bp-pole + .bp-pole {
	margin: 0;
}

/* Pole zgody nie ma etykiety w konturze - jest zwykłym polem wyboru.
   Odstęp od pola wyżej to 1.8rem + .6rem (wzorzec formularza). Stoi
   w `padding-top`, bo górny margines zlewał się z dolnym marginesem
   pola nad nim i zostawało samo 1.8rem. */
.bp-pole--zgoda {
	margin-top: 0;
	padding-top: .6rem;
}

.bp-pole--zgoda label {
	position: static;
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: 0;
	background: none;
	pointer-events: auto;
	font-size: 1.4rem;
	line-height: 2rem;
	color: var(--bp-tekst-slabszy);
	transform: none;
}

.bp-pole--zgoda input {
	flex: 0 0 auto;
	width: 1.8rem;
	height: 1.8rem;
	margin: .2rem 0 0;
	accent-color: var(--bp-akcent-tekst, var(--bp-akcent));
}

.bp-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =====================================================================
   POLA WTYCZKI FORMULARZY

   Wtyczka renderuje własny markup i nie da się jej kazać renderować
   naszego. Opakowuje każde pole w dodatkowy element, dokłada swoje klasy
   i wstawia komunikaty walidacji w miejscach, których nie wybieramy.

   Zamiast walczyć z jej strukturą, podłączamy ją pod te same klasy
   co pola własne: układ formularza opisujemy w treści formularza
   (`bp-pole`, `bp-pole-para`), a tutaj neutralizujemy to, co wtyczka
   dokłada od siebie.
   ===================================================================== */

/* Opakowanie pola nie ma zajmować miejsca ani łamać układu. */
.bp-pole .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/*
   `:not([type=…])` nie wystarcza. Pole zgody renderuje się jako `<span>`
   opakowujący pole wyboru - a `<span>` nie ma atrybutu `type`, więc
   przechodził przez wykluczenie i dostawał ramkę pola tekstowego.
   Objaw: prostokąt obrysowany dookoła treści zgody.
*/
.bp-pole .wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
	display: block;
	width: 100%;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--bp-ramka);
	border-radius: var(--bp-pole-promien);
	background: var(--bp-biel);
	color: var(--bp-tekst);
	font-family: inherit;
	font-size: 1.7rem;
	line-height: 2.4rem;
	transition: border-color .18s ease;
}

/* Ta sama waga co reguła ramki wyżej - krótszy selektor przegrywał
   i ramka po kliknięciu nie zmieniała koloru. */
.bp-pole .wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio):focus {
	border-color: var(--bp-akcent-tekst, var(--bp-akcent));
	outline: none;
}

.bp-pole textarea.wpcf7-form-control {
	resize: vertical;
	min-height: 10rem;
}

/*
   Komunikat walidacji. Wtyczka wstawia go pod polem - bez własnej reguły
   dziedziczy rozmiar pisma z akapitu i rozpycha odstęp między polami.
*/
.bp-pole .wpcf7-not-valid-tip {
	margin-top: .6rem;
	font-size: 1.4rem;
	line-height: 2rem;
	color: var(--bp-blad);
}

.bp-pole .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--bp-blad);
}

/* Zgoda: wtyczka zawija pole wyboru i tekst we własne elementy listy. */
.bp-pole--zgoda .wpcf7-list-item {
	margin: 0;
}

.bp-pole--zgoda .wpcf7-list-item label {
	position: static;
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: 0;
	background: none;
	pointer-events: auto;
	font-size: 1.4rem;
	line-height: 2rem;
	color: var(--bp-tekst-slabszy);
	transform: none;
}

.bp-pole--zgoda input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.8rem;
	height: 1.8rem;
	margin: .2rem 0 0;
	accent-color: var(--bp-akcent-tekst, var(--bp-akcent));
}

/* Przycisk wysyłki wtyczki jest zwykłym przyciskiem motywu (M4, F7):
   wyściółka, pismo i obwódka te same co `.bp-btn`. Własne ma tylko
   szerokość na cały formularz (F5). Stałe 1.7rem 3.2rem sprzed 1.24.2
   robiły z niego jedyny przycisk innej wysokości na stronie. */
.bp-formularz input[type="submit"],
.bp-pole input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--bp-btn-wysciolka);
	border: 1px solid transparent;
	border-radius: var(--bp-btn-promien);
	background: var(--bp-btn-tlo);
	background-image: var(--bp-btn-gradient);
	color: var(--bp-btn-napis);
	font-family: var(--bp-btn-pismo);
	font-size: var(--bp-btn-rozmiar, 1.7rem);
	line-height: 1.15;
	font-weight: var(--bp-btn-grubosc, 600);
	letter-spacing: var(--bp-btn-odstep-liter, normal);
	text-transform: var(--bp-btn-litery, none);
	cursor: pointer;
}

@media (min-width: 60em) {
	.bp-formularz input[type="submit"],
	.bp-pole input[type="submit"] { font-size: var(--bp-btn-rozmiar, 1.6rem); }
}

.bp-formularz input[type="submit"]:hover,
.bp-formularz input[type="submit"]:focus,
.bp-pole input[type="submit"]:hover,
.bp-pole input[type="submit"]:focus {
	background: var(--bp-btn-tlo-hover) !important;
	color: var(--bp-btn-napis-hover) !important;
}

/*
   Kręciołek „wysyłam”. Domyślnie wskakuje obok przycisku i przesuwa go
   w bok o swoją szerokość - przy przycisku na całą szerokość nie mieści się
   już w jego wierszu, spada do własnego i dokłada pod przyciskiem około
   trzydziestu pikseli pustki. Odstęp nad wierszem telefonicznym robi się
   wtedy dwa razy większy, niż mówi wzorzec. Wyprowadzamy go poza tok.

   SELEKTOR CELOWO NIE JEST ZAWĘŻONY DO NASZEJ KLASY.

   Reguła stała wcześniej pod `.bp-formularz` i nie dotyczyła formularzy
   zbudowanych na klasach własnych strony - a to właśnie tam przycisk na
   pełną szerokość obnaża ten błąd. Kręciołek jest elementem wtyczki
   formularzy i wszędzie wygląda tak samo, więc i reguła ma obowiązywać
   wszędzie. Bez przesunięć `top`/`left` element zostaje dokładnie tam,
   gdzie stałby w toku - przestaje tylko zajmować miejsce.
*/
.wpcf7-form .wpcf7-spinner {
	position: absolute;
	margin: 1.6rem 0 0 1.6rem;
}

/* Kręciołek i ukryte pole antyspamu stoją poza torem i potrafiły wystawać
   za prawą krawędź - na telefonie strona przewijała się w bok. `clip`
   przycina tylko poziomo i nie robi z formularza okna z suwakiem. */
.wpcf7-form {
	overflow-x: clip;
}

/*
   Odnośnik do polityki prywatności w zgodzie pod polami.

   Sam odnośnik wstawia migracja do szablonu formularza - ale odnośnik,
   który nie różni się niczym od sąsiedniego tekstu, dla odwiedzającego
   nie istnieje. Zgoda stoi drobnym pismem w kolorze stłumionym, więc
   sam kolor akcentu bywa tam ledwo widoczny - podkreślenie widac zawsze.
*/
.wpcf7-acceptance a {
	text-decoration: underline;
}

/* Układ formularza: te same klasy co w oknie, plus para pól w rzędzie. */
.bp-formularz {
	position: relative;
}

.bp-formularz .wpcf7-response-output {
	margin: 2rem 0 0;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--bp-ramka);
	border-radius: 1rem;
	font-size: 1.5rem;
	line-height: 2.2rem;
}

/* =====================================================================
   OKNO Z FORMULARZEM
   ===================================================================== */

/*
   OKNO STOI NA ŚRODKU EKRANU I MIEŚCI SIĘ BEZ PRZEWIJANIA.

   Zgłoszenie z 8 sierpnia 2026: „wyskakuje za nisko, ma być na środku;
   całe okno ma się mieścić bez przewijania suwakiem”.

   Było `align-items: flex-start` z wyściółką 12rem od góry, czyli okno
   przyklejone do góry i zepchnięte w dół sztywną wartością. Przy niskim
   ekranie ta wartość zjadała jedną czwartą wysokości, a reszta okna
   wychodziła poza kadr i pojawiał się suwak.

   Jest `center` i wyściółka równa ze wszystkich stron. Okno stoi
   na środku niezależnie od wysokości ekranu, a wyściółka jest tylko
   zabezpieczeniem, żeby nie dotykało krawędzi.
*/
.bp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.4rem;
	opacity: 0;
	transition: opacity .26s ease;
}

.bp-modal--otwarty { opacity: 1; }

.bp-modal__tlo {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--bp-czern) 78%, transparent);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.bp-modal__okno {
	position: relative;
	width: 100%;
	max-width: 56rem;
	/*
	   `dvh`, nie `vh`. Na telefonie `100vh` to wysokość okna z UKRYTYMI
	   paskami przeglądarki, czyli więcej, niż widać naprawdę. Okno
	   liczone w `vh` wystaje wtedy poza kadr dokładnie o wysokość paska
	   i pojawia się suwak. `dvh` śledzi to, co widać.

	   Odjęte 4.8rem to wyściółka nakładki z góry i z dołu.
	*/
	max-height: calc(100dvh - 4.8rem);
	overflow-y: auto;
	padding: 3.2rem;
	background: var(--bp-biel);
	border-radius: 1rem;
	box-shadow: 0 32px 80px color-mix(in srgb, var(--bp-czern) 35%, transparent);
	transform: translateY(1.2rem);
	transition: transform .26s ease;
}

/* Starsza przeglądarka bez `dvh` dostaje wariant zachowawczy. */
@supports not (height: 100dvh) {
	.bp-modal__okno { max-height: calc(100vh - 4.8rem); }
}

/*
   OKNO MA SIĘ MIEŚCIĆ, A NIE PRZEWIJAĆ.

   Suwak brał się nie tylko z pozycji okna, ale i z tego, że pola
   w środku miały te same wymiary co na pełnej stronie. W oknie modalnym
   liczy się co innego: cały formularz ma być widoczny naraz, bo to
   pierwsze wrażenie decyduje, czy ktoś go wypełni.

   Ściągamy więc odstępy i wysokości - ale tylko WEWNĄTRZ okna.
   Formularz na stronie kontaktowej zostaje bez zmian.
*/
.bp-modal .bp-pole + .bp-pole,
.bp-modal .bp-pole + .bp-pole-para,
.bp-modal .bp-pole-para + .bp-pole { margin-top: 1.8rem; }

/* W parze odstęp robi `gap` siatki, nie margines sąsiada. */
.bp-modal .bp-pole-para .bp-pole + .bp-pole { margin-top: 0; }

/* Pole wiadomości ma co najmniej 10rem także w oknie (F5) - wcześniej
   stało tu 8rem i okno było jedynym miejscem niezgodnym ze wzorcem. */
.bp-modal .bp-pole textarea {
	min-height: 10rem;
	height: 10rem;
}

/*
   „Czym jesteś zainteresowany?” to lista wyboru. Ma być NIŻSZA
   od pozostałych pól.

   `height` obok `padding`, bo sama wyściółka nie wystarcza: przeglądarka
   dolicza do listy wyboru własną wysokość wiersza i przy samym
   `padding` pole zostaje wyższe, niż wynikałoby z liczb.
*/
.bp-modal .bp-pole select {
	height: 4.6rem;
	padding-block: 0;
	line-height: 4.6rem;
}

.bp-modal--otwarty .bp-modal__okno { transform: translateY(0); }

/* Na niskich ekranach zbijamy wyściółkę okna, zamiast pozwolić
   formularzowi wyjechać poza kadr. */
@media (max-height: 44em) {
	.bp-modal__okno { padding: 2.4rem; }
	.bp-modal .bp-pole + .bp-pole { margin-top: 1.4rem; }
	.bp-modal .bp-pole-para .bp-pole + .bp-pole { margin-top: 0; }
}

/* Strona pod oknem nie ma się przewijać razem z nim. */
body.bp-modal-otwarty { overflow: hidden; }

.bp-modal__zamknij {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bp-tekst-2);
}

.bp-modal__zamknij:hover,
.bp-modal__zamknij:focus {
	background: var(--bp-tlo-jasne);
	color: var(--bp-czern);
}

/*
   Wyciszenie obwódki przy oddawaniu ogniska po zamknięciu okna.
   Klasę nadaje i zdejmuje skrypt, i tylko wtedy, gdy okno otwarto myszą.
   To nie jest kasowanie obwódki dla klawiatury - ta zostaje.
*/
.bp-bez-obwodki:focus,
.bp-bez-obwodki:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.bp-modal__tytul {
	margin: 0 0 .8rem;
	font-size: 2.8rem;
	line-height: 3.4rem;
	font-weight: 600;
}

.bp-modal__opis {
	margin: 0 0 2.4rem;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bp-tekst-2);
}

.bp-modal__stopka { margin: 2.4rem 0 0; }

.bp-modal__wyslij {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1.7rem 3.2rem;
	border: 0;
	border-radius: var(--bp-btn-promien);
	background: var(--bp-akcent);
	color: var(--bp-biel);
	font-family: inherit;
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 600;
	text-transform: none;
}

.bp-modal__wyslij:hover,
.bp-modal__wyslij:focus {
	background: var(--bp-akcent-ciemny);
	color: var(--bp-biel);
}

.bp-modal__wyslij[disabled] { opacity: .6; cursor: default; }

.bp-modal__komunikat {
	margin: 1.2rem 0 0;
	font-size: 1.5rem;
	line-height: 2.1rem;
	color: var(--bp-tekst-2);
}

.bp-modal__komunikat.jest-bledem { color: var(--bp-blad); }

.bp-modal__dziekujemy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	padding: 3.2rem 0;
	text-align: center;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bp-czern);
}

.bp-modal__ptaszek {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: var(--bp-tlo-jasne);
	color: var(--bp-akcent-tekst, var(--bp-akcent));
}

@media (max-width: 48em) {
	.bp-modal { padding: 8rem 1.6rem 1.6rem; }

	.bp-modal__okno {
		padding: 2.4rem;
		max-height: calc(100vh - 11rem);
	}

	.bp-modal__tytul { font-size: 2.4rem; line-height: 3rem; }

}

/* Dwa pola obok siebie nie mieszczą się czytelnie na telefonie.
   Próg jak we wzorcu formularza: poniżej 40em, nie 48em. */
@media (max-width: 40em) {
	.bp-pole-para { grid-template-columns: 1fr; }
}

/* =====================================================================
   ZGODA: „CZYTAJ WIĘCEJ" I OKNO Z PEŁNĄ KLAUZULĄ

   Odnośnik jest PRZEDŁUŻENIEM zdania przy polu wyboru, nie osobnym
   wierszem pod nim. W osobnym wierszu czytał się jak druga zgoda
   do zaznaczenia i ludzie klikali w niego zamiast w kwadracik.

   `button` udający odnośnik: element nie prowadzi pod żaden adres,
   więc nie może być `a`. Zerujemy więc wszystko, co przeglądarka
   daje przyciskowi z urzędu.
   ===================================================================== */

.bp-zgoda__wiecej {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--bp-akcent-tekst, var(--bp-akcent));
	text-decoration: underline;
	text-underline-offset: .2rem;
	cursor: pointer;
}

.bp-zgoda__wiecej:hover,
.bp-zgoda__wiecej:focus-visible {
	text-decoration-thickness: 2px;
}

/* Obwódki skupienia NIE kasujemy - bez niej osoba na klawiaturze nie wie,
   gdzie jest. Przemalowujemy ją na kolor marki. */
.bp-zgoda__wiecej:focus-visible {
	outline: 2px solid var(--bp-akcent);
	outline-offset: 2px;
	border-radius: 2px;
}

.bp-zgoda-okno {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.4rem;
	opacity: 0;
	transition: opacity .2s ease;
}

/* Okno zgody stoi NAD oknem „Zapytaj o ofertę" - otwiera się z formularza,
   który w nim siedzi. Niższa warstwa schowałaby je za tamtym. */
.bp-zgoda-okno--otwarte { opacity: 1; }

.bp-zgoda-okno[hidden] { display: none; }

.bp-zgoda-okno__tlo {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--bp-czern) 78%, transparent);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.bp-zgoda-okno__panel {
	position: relative;
	width: 100%;
	max-width: 62rem;
	max-height: calc(100dvh - 4.8rem);
	overflow-y: auto;
	padding: 3.2rem;
	background: var(--bp-biel);
	border-radius: 1rem;
	box-shadow: 0 32px 80px color-mix(in srgb, var(--bp-czern) 35%, transparent);
}

@supports not (height: 100dvh) {
	.bp-zgoda-okno__panel { max-height: calc(100vh - 4.8rem); }
}

.bp-zgoda-okno__zamknij {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(4rem, 40px);
	height: max(4rem, 40px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bp-tlo-jasne);
	color: var(--bp-tekst-2);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bp-zgoda-okno__zamknij:hover,
.bp-zgoda-okno__zamknij:focus-visible {
	color: var(--bp-tekst);
}

.bp-zgoda-okno__tytul {
	margin: 0 5rem 1.6rem 0;
	font-size: 2.2rem;
	line-height: 1.3;
}

.bp-zgoda-okno__tresc {
	font-size: max(1.5rem, 15px);
	line-height: 1.65;
	color: var(--bp-tekst-2);
}

.bp-zgoda-okno__tresc p { margin: 0 0 1.4rem; }
.bp-zgoda-okno__tresc p:last-child { margin-bottom: 0; }
.bp-zgoda-okno__tresc a { color: var(--bp-akcent-tekst, var(--bp-akcent)); text-decoration: underline; }

@media (max-width: 47.99em) {
	.bp-zgoda-okno { padding: 1.6rem; }
	.bp-zgoda-okno__panel { padding: 2.4rem 2rem; }
	.bp-zgoda-okno__tytul { margin-right: 4rem; font-size: 2rem; }
}

/* =====================================================================
   STRONA KONTAKT

   Dwie kolumny: treść z danymi po lewej, boks z formularzem po prawej.
   Proporcja 1 : 1.05 - prawa kolumna jest odrobinę szersza, bo formularz
   ma w środku parę pól obok siebie i przy równym podziale łamały się
   na dwie linie.
   ===================================================================== */

.bp-kontakt-strona__siatka {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 7.2rem;
	align-items: start;
}

.bp-kontakt-strona__naglowek {
	margin: 0;
}

.bp-kontakt-strona__wstep {
	margin-top: 2rem;
	color: var(--bp-tekst-2);
}

.bp-kontakt-strona__wstep > *:last-child { margin-bottom: 0; }

.bp-kontakt-dane {
	margin: 3.6rem 0 0;
	padding: 0;
	list-style: none;
}

.bp-kontakt-dane__wiersz {
	border-top: 1px solid var(--bp-ramka-lekka);
}

.bp-kontakt-dane__pozycja {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding-block: 1.6rem;
	color: var(--bp-tekst);
	text-decoration: none;
	transition: color .2s ease;
	-webkit-tap-highlight-color: transparent;
}

a.bp-kontakt-dane__pozycja:hover,
a.bp-kontakt-dane__pozycja:focus-visible {
	color: var(--bp-akcent-tekst, var(--bp-akcent));
}

.bp-kontakt-dane__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: max(4.2rem, 42px);
	height: max(4.2rem, 42px);
	border-radius: 12px;
	background: var(--bp-tlo-jasne);
	color: var(--bp-akcent-tekst, var(--bp-akcent));
}

/* Bez pogrubienia. Obok ikony w kwadracie robiło z wiersza drugi nagłówek
   i przeciągało uwagę z tekstu obok. */
.bp-kontakt-dane__wartosc {
	font-size: max(1.7rem, 17px);
	font-weight: 500;
}

.bp-kontakt-strona__boks {
	padding: 3.8rem;
	border: 1px solid var(--bp-ramka-lekka);
	border-radius: 1.6rem;
	background: var(--bp-biel);
}

.bp-kontakt-strona__boks-tytul {
	margin: 0 0 2.4rem;
	font-size: 2.4rem;
	line-height: 1.3;
}

@media (max-width: 61.99em) {
	.bp-kontakt-strona__siatka {
		grid-template-columns: 1fr;
		gap: 4rem;
	}

	.bp-kontakt-strona__boks { padding: 2.4rem 2rem; }
}

/* ============================================================ *
 *  „LUB ZADZWOŃ" POD PRZYCISKIEM WYSYŁKI
 *
 *  Wiersz dokleja `includes/formularz-telefon.php` na końcu każdego
 *  formularza. Numer pochodzi z zakładki „Dane firmowe" - w treści
 *  formularza nie ma go wcale.
 *
 *  Wyśrodkowany pod przyciskiem, wyraźnie mniejszy od niego: to jest
 *  druga droga, nie konkurent dla głównego działania.
 * ============================================================ */

.bp-formularz-telefon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	margin: 1.6rem 0 0;
	font-size: 1.6rem;
	line-height: 2.2rem;
	color: var(--bp-tekst-slabszy);
}

.bp-formularz-telefon__ikona {
	width: 1.8rem;
	height: 1.8rem;
	flex: 0 0 auto;
}

/* Sam numer mocniejszy niz podpis obok i OD RAZU w kolorze glownym
   strony - to jest odnosnik, ma wygladac na klikalny bez najezdzania.
   Po najechaniu dochodzi tylko podkreslenie. */
/* Podwojony selektor: waga wyzsza niz `a[href^="tel"]` potomnego, bez !important. */
.bp-formularz-telefon a.bp-formularz-telefon__numer,
.bp-formularz-telefon a {
	color: var(--bp-akcent-tekst, var(--bp-akcent));
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.bp-formularz-telefon a.bp-formularz-telefon__numer:hover,
.bp-formularz-telefon a:hover {
	color: var(--bp-akcent-tekst, var(--bp-akcent));
}

.bp-formularz-telefon a:hover,
.bp-formularz-telefon a:focus-visible {
	text-decoration: underline;
}

/* Tekst zgody - ten sam słabszy szary co etykiety pól.
   Reguła celuje w AKAPIT pola zgody, a nie w `label`: Contact Form 7
   wypisuje treść zgody w `<span class="wpcf7-acceptance">` wewnątrz
   akapitu, więc reguła pisana na `label` nie miała czego złapać. */
.bp-pole--zgoda,
.bp-pole--zgoda .wpcf7-acceptance,
.bp-pole--zgoda .acceptance__label-content {
	color: var(--bp-tekst-slabszy);
}