/* Formularze motywu. Same pola dziedzicza wyglad z main.css — tutaj jest tylko uklad. */

.kd-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-space-2);
	margin: 0;
	/* Powrot po bledzie idzie na kotwice formularza (`kd_form_back`); komunikat stoi na gorze
	   formularza i bez tego chowal sie pod przyklejonym naglowkiem. */
	scroll-margin-top: 96px;
}

.kd-form__row { flex: 1 1 100%; min-width: 0; }
.kd-form__row--40 { flex-basis: calc(40% - var(--kd-space-2)); }
.kd-form__row--50 { flex-basis: calc(50% - var(--kd-space-2)); }
.kd-form__row--60 { flex-basis: calc(60% - var(--kd-space-2)); }

.kd-form textarea { resize: vertical; min-height: 140px; }

/*
 * Strony wklejone z Elementora niosa wlasny reset w rodzaju `.kd-hurt *{padding:0}`.
 * Selektor z klasa bije `button` z main.css, wiec przycisk zapadal sie do samego tekstu.
 * Pola tekstowe sa odporne — ich regula ma wyzsza specyficznosc dzieki `:not()`.
 */
.kd-form .kd-btn { padding: 14px 28px; }

.kd-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--kd-space-1);
	min-height: 44px;
	padding-block: 6px;
	font-size: var(--kd-caption-size);
	line-height: 1.85;
	color: var(--kd-color-text-muted);
	cursor: pointer;
}
.kd-form__consent input { margin-top: .15em; }
/* Odnosnik do polityki mierzyl 19 px wysokosci — wypelnienie podnosi go do 40 px,
   a zwiekszona interlinia zdania trzyma wiersze osobno. */
.kd-form__consent a {
	display: inline-block;
	padding-block: 10px;
	color: inherit;
	text-decoration: underline;
}

.kd-form__note {
	flex: 1 1 100%;
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--kd-radius-input);
	font-size: var(--kd-body-size);
}
.kd-form__note--ok {
	background: var(--kd-color-surface);
	border-left: 3px solid var(--kd-color-success);
}
.kd-form__note--error {
	background: var(--kd-color-surface);
	border-left: 3px solid var(--kd-color-error);
	color: var(--kd-color-error);
}

/* Pole-pulapka: nie `display:none`, bo czesc botow pomija ukryte pola. */
.kd-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Newsletter w stopce stoi teraz w pasie na pol szerokosci strony, wiec imie i e-mail wracaja
   obok siebie — trzy pola jedno pod drugim czytaly sie jak rejestracja konta, a nie jak zapis. */
.kd-footer .kd-form__row--40 { flex-basis: calc(38% - var(--kd-space-2)); }
.kd-footer .kd-form__row--60 { flex-basis: calc(62% - var(--kd-space-2)); }

/*
 * Na telefonie pola wracaja jedno pod drugim. Selektory `.kd-footer .kd-form__row--40` wyzej
 * maja wieksza wage (0,2,0) niz sama klasa, wiec bez powtorzenia przedrostka stopka zostawala
 * przy dwoch kolumnach i „Imię" mialo w niej 148 px.
 */
@media (max-width: 782px) {
	.kd-form__row--40,
	.kd-form__row--50,
	.kd-form__row--60,
	.kd-footer .kd-form__row--40,
	.kd-footer .kd-form__row--60 { flex-basis: 100%; }
}

/* --- strona /kod-rabatowy-newsletter/ (22.09.2026: podwojne potwierdzenie, cztery stany) ---
   Strona ma `_kd_full_bleed`, wiec szablon nie daje ani kontenera, ani tytulu: jedno i drugie niesie
   ta sekcja. Wszystko w jednej waskiej kolumnie, zeby naglowek, kod, formularz i lista korzysci
   staly na tej samej osi (wczesniej lista pod karta zaczynala sie od lewej krawedzi kontenera). */

.kd-kod {
	max-width: calc(600px + 2 * var(--kd-gutter));
	margin: 0 auto;
	padding: var(--kd-section-py) var(--kd-gutter);
}

.kd-kod__karta {
	padding: var(--kd-space-5) var(--kd-space-4);
	text-align: center;
	background: var(--kd-color-surface);
	border-radius: var(--kd-radius-md);
}

.kd-kod__znak {
	margin: 0 0 var(--kd-space-2);
	font-size: var(--kd-label-size);
	font-weight: var(--kd-label-weight);
	letter-spacing: var(--kd-label-ls);
	text-transform: var(--kd-label-transform);
	color: var(--kd-color-accent);
}

.kd-kod__tytul {
	margin: 0 0 var(--kd-space-3);
	font-family: var(--kd-font-heading);
	font-size: var(--kd-h2-size);
	line-height: 1.2;
}

.kd-kod__tekst {
	max-width: 46ch;
	margin: 0 auto var(--kd-space-3);
}

/* Stary szablon mial tu przycisk „SKOPIUJ KOD" na wlasnym skrypcie. `user-select: all` robi
   to samo bez jednego bajta JavaScriptu: dotkniecie zaznacza caly kod, a nie pojedyncze slowo.
   Rozmiar z `clamp()`: dziesiec znakow z rozstrzelonym odstepem nie miescilo sie na 360 px. */
.kd-kod__kod {
	display: inline-block;
	max-width: 100%;
	margin: var(--kd-space-1) auto var(--kd-space-2);
	padding: 14px 22px;
	font-family: var(--kd-font-body);
	font-size: clamp(22px, 6.4vw, var(--kd-h2-size));
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--kd-color-accent);
	background: var(--kd-color-background);
	border: 1.5px dashed var(--kd-color-accent);
	border-radius: var(--kd-radius-button);
	overflow-wrap: anywhere;
	user-select: all;
	-webkit-user-select: all;
}

.kd-kod__hint {
	margin: 0 0 var(--kd-space-3);
	font-size: var(--kd-body-sm-size);
	color: var(--kd-color-text-muted);
}

.kd-kod__warunki {
	max-width: 46ch;
	margin: var(--kd-space-3) auto 0;
	font-size: var(--kd-body-sm-size);
	color: var(--kd-color-text-muted);
}

.kd-kod__akcja { margin: var(--kd-space-4) 0 0; }

.kd-kod__porady {
	max-width: 46ch;
	margin: var(--kd-space-3) auto 0;
	padding: var(--kd-space-3);
	list-style: none;
	text-align: left;
	font-size: var(--kd-body-sm-size);
	color: var(--kd-color-text-muted);
	background: var(--kd-color-background);
	border-radius: var(--kd-radius-md);
}
.kd-kod__porady li + li { margin-top: var(--kd-space-1); }
.kd-kod__porady a { color: var(--kd-color-accent); }

/* W waskiej karcie imie i e-mail jedno pod drugim, tak jak na telefonie. */
.kd-kod__formularz { margin-top: var(--kd-space-3); text-align: left; }
.kd-kod__formularz .kd-form__row--40,
.kd-kod__formularz .kd-form__row--60 { flex-basis: 100%; }
.kd-kod__formularz .kd-btn { width: 100%; }

.kd-kod__zyski { margin: var(--kd-space-5) auto 0; max-width: 46ch; }

.kd-kod__zyski-tytul {
	margin: 0 0 var(--kd-space-3);
	font-family: var(--kd-font-heading);
	font-size: var(--kd-h4-size);
	text-align: center;
}

.kd-kod__zyski ul {
	display: grid;
	gap: var(--kd-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-kod__zyski li {
	position: relative;
	padding-left: 30px;
}

/* Znacznik z obramowania, nie z czcionki ikon: zero dodatkowych plikow. */
.kd-kod__zyski li::before {
	content: "";
	position: absolute;
	top: .45em;
	left: 4px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--kd-color-accent);
	border-bottom: 2px solid var(--kd-color-accent);
	transform: rotate(-45deg);
}

@media (max-width: 782px) {
	.kd-kod__karta { padding: var(--kd-space-4) var(--kd-space-3); }
}