/* Ekspert na godziny: contact form (template-parts/contact-form.php). Base field styles live in main.css. */

.en-form { max-width: 46rem; }
.en-form__row {
	display: grid; gap: 0 var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	align-items: end; /* side-by-side inputs line up even when labels or hints wrap differently */
}
/* Better: each field shares the row's tracks (label / hint / input / error), so inputs align
   and an error under one field does not push its neighbour out of line. */
@supports (grid-template-rows: subgrid) {
	.en-form__row { align-items: stretch; }
	.en-form__row > .en-field { grid-row: span 4; grid-template-rows: subgrid; row-gap: .4rem; align-content: start; }
	.en-form__row > .en-field > .en-hint { align-self: start; }
	.en-form__row > .en-field > input { align-self: end; }
}
.en-opt { font-weight: 400; color: var(--ink-2); }

/* Errors: icon + text, never colour alone (also for errors injected by main.js). */
.en-form .en-error { align-items: flex-start; line-height: 1.45; }
.en-form .en-error::before {
	content: "!"; flex: none;
	display: inline-grid; place-items: center;
	width: 1.25em; height: 1.25em; border-radius: 50%;
	background: var(--alert); color: var(--paper);
	font-size: .85em; font-weight: 800; line-height: 1; margin-top: .1em;
}
.en-check .en-error { grid-column: 1 / -1; }
.en-check label { line-height: 1.5; }
.en-check a { color: inherit; }

/* Category choice: segmented tiles (pills are reserved for the call button). */
.en-choices-field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.en-choices-field legend { padding: 0; margin-bottom: .4rem; }
.en-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.en-choice { position: relative; display: block; }
.en-choice input {
	position: absolute; inset: 0; width: 100%; height: 100%;
	margin: 0; opacity: 0; cursor: pointer;
}
.en-choice span {
	display: inline-flex; align-items: center; gap: .45em;
	min-height: 52px; padding: .6rem 1.15rem;
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--ink-2); border-radius: var(--r-1);
	font-weight: 600; font-stretch: 106%;
	transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.en-choice__tick { width: 1.1em; height: 1.1em; display: none; }
.en-choice input:hover + span { border-color: var(--ink); background: var(--paper-2); }
.en-choice input:checked + span { background: var(--loden); border-color: var(--loden); color: var(--loden-ink); }
.en-choice input:checked + span .en-choice__tick { display: block; }
.en-choice input:focus-visible + span { outline: 3px solid var(--loden); outline-offset: 2px; }
.en-choices:has([aria-invalid="true"]) .en-choice span { border-color: var(--alert); border-width: 2px; }

.en-form__actions { margin-top: var(--s-6); }
.en-form__actions .en-btn { min-width: 14rem; }
.en-form button[disabled] { opacity: .7; cursor: progress; }

/* Status (AJAX) and notice (no-JS fallback). */
.en-form__status:empty { display: none; }
.en-form__status, .en-form__notice {
	max-width: var(--measure);
	margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5);
	border: 2px solid var(--line); border-radius: var(--r-1);
	background: var(--paper);
	font-weight: 600; line-height: 1.5;
}
.en-form__notice { margin: 0 0 var(--s-5); }
.en-form__status.is-ok, .en-form__notice.is-ok { border-color: var(--loden); background: var(--paper-2); color: var(--ink); }
.en-form__status.is-error, .en-form__notice.is-error { border-color: var(--alert); color: var(--alert); }
.en-form__status a, .en-form__notice a { color: inherit; }

/* After a successful send only the confirmation stays. */
.en-form.is-sent .en-form__fields { display: none; }
.en-form.is-sent .en-form__status { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.en-choice span { transition: none; }
}