/*
 * STICKERLY — wygląd stylu B v2 nałożony na DZIAŁAJĄCY formularz.
 *
 * ⚠️ DLACZEGO WARSTWA STYLU, A NIE PRZEPISANY RENDER.
 * Formularz z modułu `formularze` ma logikę, która przeszła test od początku
 * do końca 07.09: pułapkę na boty, minimalny czas wypełniania, limit pięciu
 * zgłoszeń na godzinę, zapis do bazy przed wysyłką maila i powrót treści
 * po błędzie. Przepisanie renderu na komponent poglądowy oznaczałoby
 * odtworzenie tego wszystkiego od nowa — a to jest formularz kontaktowy sklepu,
 * czyli miejsce, w którym awaria kosztuje zapytania klientów.
 *
 * Dlatego markup zostaje nietknięty, a wygląd bierze się z tego arkusza.
 * Efekt jest ten sam co na `/styl-b-v2/`; różnica jest w tym, że nic nie może
 * się zepsuć po stronie działania.
 *
 * ⚠️ TEN PLIK ZAKŁADA, ŻE `styl-b2.css` JUŻ SIĘ ZAŁADOWAŁ — bierze z niego
 * wszystkie zmienne. Moduł dokłada go jako zależność, więc kolejność jest
 * pewna niezależnie od tego, co jeszcze stoi na stronie.
 */

/* ---------- panel wokół formularza ---------- */

.st-form-sekcja {
	position: relative;
	overflow: hidden;
	padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.1rem, 2.6vw, 2.2rem) clamp(1.1rem, 2.4vw, 1.8rem);
	border-radius: var(--st2-r-sekcja, 20px);
	/* Gradient wokół koloru sygnetu — nie płaskie #1F2C58 ze stopki. */
	background: var(--st2-tlo-ciemne);
	color: #fff;
	isolation: isolate;
}

.st-form-sekcja .st-hub-h2,
.st-form-sekcja h2 {
	color: #fff;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.st-form-sekcja .st-hub-lead,
.st-form-sekcja .st-hub-lead p {
	/* ⚠️ Jawnie — `.st-hub-lead p` z arkusza huba nadaje szary, co na granacie
	   daje kontrast 1,28 (ta sama mina co przy punktach nagłówka, 07.09). */
	color: rgba(255, 255, 255, 0.86);
}

/* ---------- biała karta z polami ---------- */

.st-form-sekcja .st-form {
	padding: clamp(1rem, 2.2vw, 1.5rem);
	border-radius: var(--st2-r-karta, 14px);
	background: #fff;
	box-shadow: var(--st2-cien-na-ciemnym);
}

.st-form-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.8rem; }
.st-form-blok { margin: 0 0 0.85rem; }
.st-form-blok--pelny { grid-column: 1 / -1; }

.st-form-blok > label {
	display: block;
	margin-bottom: 0.28rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--st2-grafit, #181b22);
}

.st-form-gwiazdka { color: var(--st2-blad, #c0392b); }
.st-form-opc { font-weight: 400; color: var(--st2-szary, #606775); }

/* ---------- pola ---------- */

.st-form input[type="text"],
.st-form input[type="email"],
.st-form input[type="tel"],
.st-form input[type="number"],
.st-form select,
.st-form textarea {
	display: block;
	width: 100%;
	/*
	 * ⚠️ `height: auto` + `min-height` JEST KONIECZNE.
	 * Flatsome narzuca polom stałą wysokość, której `padding` nie powiększa —
	 * bez tego pola mają 39 px, poniżej minimum dotykowego 44 px (07.09).
	 */
	height: auto;
	min-height: 46px;
	margin: 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--st2-obwodka, #dce1ea);
	border-radius: var(--st2-r-pole, 10px);
	background: #fff;
	box-shadow: none;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--st2-grafit, #181b22);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.st-form textarea { min-height: 104px; resize: vertical; }

/*
 * ⚠️ SELECT TRACI WYGLĄD SYSTEMOWY — prośba Dawida z 10.09.
 * Rozwiniętej listy `<option>` nie da się ostylować (renderuje ją system
 * operacyjny), więc stylizujemy pole zamknięte, czyli to, co widać przez
 * 99 % czasu.
 */
.st-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344a90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 16px 16px;
	cursor: pointer;
}

.st-form select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344a90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}

/*
 * ⚠️ OBWÓDKA #DCE1EA MA NA BIELI KONTRAST 1,31 — sama nie wystarcza jako
 * granica pola. Focus musi być mocny: granatowa obwódka plus poświata.
 */
.st-form input:focus,
.st-form select:focus,
.st-form textarea:focus {
	outline: none;
	border-color: var(--st2-granat, #344a90);
	box-shadow: 0 0 0 3px rgba(52, 74, 144, 0.16);
}

.st-form-podpowiedz {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.74rem;
	line-height: 1.35;
	color: var(--st2-szary, #606775);
}

/* ---------- wgrywanie pliku ---------- */

/*
 * ⚠️ SYSTEMOWY „Wybierz plik / Nie wybrano pliku" JEST SZARY NA BIAŁYM
 * i napis się zlewa (uwaga Dawida z 09.09). Prawdziwy `input[type=file]`
 * zostaje — bez niego nic się nie wyśle — tylko dostaje własną ramkę.
 */
.st-form input[type="file"] {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1.5px dashed var(--st2-obwodka, #dce1ea);
	border-radius: var(--st2-r-pole, 10px);
	background: var(--st2-blekit-mgla, #f2f5fd);
	font-size: 0.84rem;
	color: var(--st2-grafit, #181b22);
	cursor: pointer;
}

.st-form input[type="file"]::file-selector-button {
	margin-right: 0.8rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--st2-granat, #344a90);
	border-radius: var(--st2-r-znacznik, 6px);
	background: var(--st2-granat, #344a90);
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

/* ---------- zgoda i przycisk ---------- */

.st-form-zgoda {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0.2rem 0 0;
	font-size: 0.79rem;
	line-height: 1.45;
	color: var(--st2-szary, #606775);
	cursor: pointer;
}

.st-form-zgoda input {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0.12rem 0 0;
	accent-color: var(--st2-granat, #344a90);
}

.st-form-zgoda a { color: var(--st2-granat, #344a90); }

.st-form-wyslij {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	margin-top: 1rem;
	padding: 0.75rem 1.9rem;
	border: 1px solid var(--st2-granat, #344a90);
	/*
	 * ⚠️ PODWOJONA KLASA I `!important` — inaczej wygrywa reguła Tempo
	 * `button:not(.icon) { border-radius: 1px !important }`, która ma wyższą
	 * specyficzność. Przy dwóch `!important` rozstrzyga specyficzność (11.09).
	 */
	background: var(--st2-granat, #344a90);
	font-size: 0.94rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	box-shadow: var(--st2-cien-spok);
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.st-form-wyslij.st-form-wyslij { border-radius: var(--st2-r-pole, 10px) !important; }

.st-form-wyslij:hover {
	background: var(--st2-granat-hover, #2b3d78);
	box-shadow: var(--st2-cien-hover);
	transform: translateY(-1px);
}

.st-form-stopka {
	margin-top: 0.7rem;
	font-size: 0.74rem;
	color: rgba(255, 255, 255, 0.72);
}

/* ⚠️ PUŁAPKA NA BOTY ZOSTAJE UKRYTA `position: absolute`, NIE `display: none` —
   część botów pomija właśnie pola ukryte tą drugą własnością (07.09). */
.st-form-pulapka { position: absolute !important; left: -9999px !important; }

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

@media (max-width: 700px) {
	.st-form-sekcja { border-radius: var(--st2-r-karta, 14px); }

	/* ⚠️ Jedna kolumna — dwa pola po ~150 px to placeholder ucięty w połowie
	   i etykieta łamana na trzy wiersze. */
	.st-form-siatka { grid-template-columns: 1fr; }
	.st-form-wyslij { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.st-form input,
	.st-form select,
	.st-form textarea,
	.st-form-wyslij { transition: none; }

	.st-form-wyslij:hover { transform: none; }
}