/*
 * Wyglad podstawowy. Celowo oszczedny i neutralny:
 * ma pasowac do kazdego motywu, a redaktor doklada swoj CSS w panelu.
 * Kolory i zaokraglenia siedza w zmiennych, wiec nadpisuje sie je jedna linia.
 */

.formulator {
	--formulator-odstep: 18px;
	--formulator-ramka: #d4d4d8;
	--formulator-ramka-aktywna: #2563eb;
	--formulator-blad: #c62828;
	--formulator-tlo: #fff;
	--formulator-tekst: inherit;
	--formulator-promien: 8px;
	--formulator-przycisk-tlo: #111827;
	--formulator-przycisk-tekst: #fff;
}

.formulator-siatka {
	display: flex;
	flex-wrap: wrap;
	gap: var(--formulator-odstep);
}

.formulator-pole,
.formulator-naglowek,
.formulator-opis {
	flex: 1 1 100%;
	min-width: 0;
}

/* szerokosc ustawiana per pole w edytorze */
.formulator-pole[style*="--kol:50"],
.formulator-naglowek[style*="--kol:50"],
.formulator-opis[style*="--kol:50"] { flex-basis: calc(50% - var(--formulator-odstep)); }

.formulator-pole[style*="--kol:33"],
.formulator-naglowek[style*="--kol:33"],
.formulator-opis[style*="--kol:33"] { flex-basis: calc(33.333% - var(--formulator-odstep)); }

@media (max-width: 640px) {
	.formulator-pole,
	.formulator-naglowek,
	.formulator-opis { flex-basis: 100% !important; }
}

.formulator-etykieta {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	line-height: 1.3;
}

.formulator-gwiazdka { color: var(--formulator-blad); }

.formulator-input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid var(--formulator-ramka);
	border-radius: var(--formulator-promien);
	background: var(--formulator-tlo);
	color: var(--formulator-tekst);
	font: inherit;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.formulator-input:focus {
	outline: none;
	border-color: var(--formulator-ramka-aktywna);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

textarea.formulator-input { resize: vertical; min-height: 110px; }

.formulator-opcje { display: flex; flex-direction: column; gap: 8px; }

.formulator-opcja,
.formulator-zgoda {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	line-height: 1.45;
}

.formulator-opcja input,
.formulator-zgoda input { margin-top: 3px; flex: 0 0 auto; }

.formulator-zgoda span { font-size: .92em; }

.formulator-podpowiedz {
	margin: 6px 0 0;
	font-size: .85em;
	opacity: .7;
}

.formulator-naglowek h3 { margin: 12px 0 0; }

/* Bledy pokazujemy przy polu, ktorego dotycza. Puste nie zajmuja miejsca. */
.formulator-blad {
	margin: 6px 0 0;
	color: var(--formulator-blad);
	font-size: .85em;
}
.formulator-blad:empty { display: none; }

.formulator-pole--zle .formulator-input { border-color: var(--formulator-blad); }

/* Pulapka na roboty musi byc niewidoczna, ale nie przez display:none,
   bo czesc botow taki zabieg wykrywa. */
.formulator-pulapka {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.formulator-stopka {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
}

.formulator-przycisk {
	padding: 12px 26px;
	border: 0;
	border-radius: var(--formulator-promien);
	background: var(--formulator-przycisk-tlo);
	color: var(--formulator-przycisk-tekst);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s ease, transform .05s ease;
}

.formulator-przycisk:hover { opacity: .9; }
.formulator-przycisk:active { transform: translateY(1px); }
.formulator-przycisk[disabled] { opacity: .55; cursor: default; }

.formulator-czekaj { font-size: .9em; opacity: .7; }

.formulator-odpowiedz {
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: var(--formulator-promien);
	border: 1px solid var(--formulator-ramka);
}

.formulator-odpowiedz--ok { border-color: #1a7f37; background: rgba(26, 127, 55, .08); }
.formulator-odpowiedz--zle { border-color: var(--formulator-blad); background: rgba(198, 40, 40, .07); }

.formulator-komunikat-admin {
	padding: 10px 14px;
	border-left: 3px solid #f0b429;
	background: rgba(240, 180, 41, .12);
	font-size: .9em;
}

/* Po wyslaniu chowamy pola, zeby nie kusilo do ponownego klikania. */
.formulator--wyslany .formulator-siatka,
.formulator--wyslany .formulator-stopka { display: none; }