/*
 * Wizualny styl formularza zbliżony do oryginału z Tally: zielone tło,
 * biały tekst, font Inter, zaokrąglone przezroczyste pola, czarny przycisk.
 * Kolory wyciągnięte wprost z konfiguracji motywu obu formularzy Tally
 * (background #004b1e, accent #0070D7, buttonBackground #000000).
 */

.epi-tally-theme {
	--epi-green: #004b1e;
	--epi-accent: #0070d7;
	background: var( --epi-green );
	color: #ffffff;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	padding: 40px clamp( 20px, 6vw, 48px );
	border-radius: 16px;
	/*max-width: 640px;*/
	margin: 32px auto;
	box-sizing: border-box;
}

.epi-tally-theme * {
	box-sizing: border-box;
}

.epi-tally-title {
	margin: 0 0 20px;
	font-size: clamp( 24px, 4vw, 32px );
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25;
}

.epi-tally-theme p {
	margin: 0 0 22px;
	line-height: 1.5;
}

.epi-tally-intro {
	font-size: 15px;
	color: rgba( 255, 255, 255, 0.75 );
}

.epi-tally-theme h3 {
	margin: 40px 0 18px;
	padding-top: 28px;
	border-top: 1px solid rgba( 255, 255, 255, 0.15 );
	font-size: 19px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.35;
}

.epi-tally-theme h3:first-of-type {
	margin-top: 8px;
	padding-top: 0;
	border-top: none;
}

.epi-field-label {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
}

.epi-tally-theme input[type="text"],
.epi-tally-theme input[type="email"],
.epi-tally-theme input[type="url"],
.epi-tally-theme input[type="tel"],
.epi-tally-theme input[type="number"],
.epi-tally-theme textarea,
.epi-tally-theme input[type="file"] {
	width: 100%;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	border-radius: 8px;
	padding: 9px 12px;
	min-height: 36px;
	font-size: 16px;
	font-family: inherit;
	color: #ffffff;
}

.epi-tally-theme textarea {
	min-height: 90px;
	resize: vertical;
}

.epi-tally-theme input::placeholder,
.epi-tally-theme textarea::placeholder {
	color: rgba( 255, 255, 255, 0.5 );
}

.epi-tally-theme input:focus,
.epi-tally-theme textarea:focus {
	outline: none;
	border-color: var( --epi-accent );
	box-shadow: 0 0 0 2px rgba( 0, 112, 215, 0.4 );
}

.epi-tally-theme input[type="file"] {
	padding: 8px;
	color: rgba( 255, 255, 255, 0.85 );
}

.epi-tally-submit-wrap {
	margin-top: 12px;
	margin-bottom: 0;
}

.epi-tally-theme input.wpcf7-submit {
	background: #000000;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 13px 30px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease-in-out;
}

.epi-tally-theme input.wpcf7-submit:hover {
	opacity: 0.85;
}

.epi-tally-theme .wpcf7-not-valid-tip {
	color: #ffb4b4;
	font-weight: 600;
	font-size: 13px;
	margin-top: 4px;
}

/*
 * Domyślny box CF7 z podsumowaniem wysyłki (.wpcf7-response-output) jest w
 * DOM-ie RODZEŃSTWEM .epi-tally-theme (nie jego potomkiem - CF7 wstawia go
 * poza divem z polami, bezpośrednio w <form>), więc reguła zagnieżdżona typu
 * ".epi-tally-theme .wpcf7-response-output" nigdy by go nie trafiła. Ukrywamy
 * go tutaj przez selektor rodzica (:has), bo komunikat po wysyłce pokazujemy
 * teraz jako wyśrodkowany "toast" (patrz assets/css/toast.css) - ładniejszy
 * i widoczny bez przewijania nawet przy długim formularzu (EPI Feedback).
 * Czytnik ekranu i tak dostaje komunikat z osobnego .screen-reader-response
 * (który CF7 zawsze wstawia na początku formularza), więc nic nie tracimy
 * pod kątem dostępności.
 */
.wpcf7:has( .epi-tally-theme ) .wpcf7-response-output {
	display: none;
}

.epi-tally-theme .wpcf7-spinner {
	filter: invert( 1 );
}