/* Pola formularzy: komentarze, newsletter, powiadomienia. */

.input {
	min-width: 0;
	min-height: var(--size-button);
	padding: 0 var(--space-12);
	border-radius: var(--radius-lg);
	border: var(--border-width) solid var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-ink);
	font: inherit;
}

.input:focus {
	outline: var(--border-width-thick) solid var(--color-brand);
	outline-offset: 0;
	border-color: var(--color-brand);
}

.textarea {
	padding: var(--space-12) var(--space-14);
	font-size: var(--text-base-sm);
	resize: vertical;
}

/* Pole na ciemnym tle (panel boczny). */
.input-dark {
	padding-inline: var(--space-14);
	border-color: var(--color-ended-hero-badge);
	background: var(--color-dim);
	color: var(--color-on-dark);
}

.input-dark::placeholder {
	color: var(--color-on-dark-faint);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
}

.form-label {
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
}

.form-label-lg {
	font-size: var(--text-base);
	font-weight: var(--weight-extrabold);
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.form-row > .form-field {
	flex: 1 1 var(--basis-form-field);
	min-width: 0;
}

.check-field {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	min-height: var(--size-touch);
	font-size: var(--text-md);
	color: var(--color-text-body);
	cursor: pointer;
}

.check-field input,
.step-check {
	flex: none;
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	margin: 0;
	accent-color: var(--color-brand);
}