/*
 * Форми сайту.
 *
 * Один набір стилів на контактну форму, підписку й коментарі — щоб поля скрізь
 * виглядали однаково. На чинному сайті кожна форма зверстана окремо.
 */

.kit-form {
	display: grid;
	gap: 1.25rem;
	max-width: 42rem;
}

.kit-form__row--split { display: grid; gap: 1.25rem; }

@media (min-width: 600px) {
	.kit-form__row--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kit-form__field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
}

.kit-form__field > label,
.kit-form__label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--kit-ink);
}

.kit-form__optional { font-weight: 400; color: var(--kit-text-muted); }

.kit-form__field input[type="text"],
.kit-form__field input[type="email"],
.kit-form__field input[type="tel"],
.kit-form__field select,
.kit-form__field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--kit-border-control);
	border-radius: var(--wp--custom--radius--control);
	background: var(--kit-surface);
	color: var(--kit-ink);
	font-size: var(--wp--preset--font-size--base);
	transition: border-color var(--kit-transition);
}

.kit-form__field input::placeholder,
.kit-form__field textarea::placeholder { color: var(--kit-text-muted); opacity: 1; }

.kit-form__field select { cursor: pointer; }
.kit-form__field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.55; }

.kit-form__field input:hover,
.kit-form__field select:hover,
.kit-form__field textarea:hover { border-color: var(--kit-ink); }

.kit-form__field input[aria-invalid="true"],
.kit-form__field select[aria-invalid="true"],
.kit-form__field textarea[aria-invalid="true"] { border-color: var(--kit-error-border); }

/* Фокус поля — одна рамка кольору дії 2 px, як в оформленні замовлення (рішення 05.10.2026). */
.kit-form__field input:focus-visible,
.kit-form__field select:focus-visible,
.kit-form__field textarea:focus-visible {
	border-color: var(--kit-brand);
	outline: none;
	box-shadow: 0 0 0 1px var(--kit-brand);
}

/* Поле з помилкою й у фокусі лишається червоним: скрипт ставить фокус саме на нього. */
.kit-form__field :is(input, select, textarea)[aria-invalid="true"]:focus-visible {
	border-color: var(--kit-error-border);
	box-shadow: 0 0 0 1px var(--kit-error-border);
}

/* ---------- Поле файлів: підкладка, а не голий системний контрол ---------- */

.kit-drop {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 64px;
	padding: 0.9rem 1rem;
	border: 1px dashed var(--kit-border-control);
	border-radius: var(--wp--custom--radius--control);
	background: var(--kit-brand-pale);
	cursor: pointer;
	transition: background-color var(--kit-transition);
	-webkit-tap-highlight-color: transparent;
}

/* Поле лежить поверх усієї підкладки: клік і перетягування файлів — штатні. */
.kit-drop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.kit-drop:hover,
.kit-drop.is-over { background: var(--kit-brand-soft); }
.kit-drop:active { background: var(--kit-brand-soft-hover); }

.kit-drop:focus-within {
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

.kit-drop__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--kit-surface);
	color: var(--kit-brand);
}

.kit-drop__text { display: grid; gap: 2px; line-height: 1.35; }
.kit-drop__title { font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: var(--kit-brand); }
.kit-drop__hint { font-size: var(--wp--preset--font-size--xs); color: var(--kit-text-muted); }

.kit-files {
	display: grid;
	gap: 0.4rem;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
}

.kit-files li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--kit-border-subtle);
	border-radius: var(--wp--custom--radius--control);
	background: var(--kit-surface);
	font-size: var(--wp--preset--font-size--sm);
}

.kit-files li::before { content: "✓"; font-weight: 600; color: var(--kit-success-text); }
.kit-files li.is-too-big { border-color: var(--kit-error-border); background: var(--kit-error-soft); color: var(--kit-error-text); }
.kit-files li.is-too-big::before { content: "×"; color: var(--kit-error-text); }
.kit-files li.is-too-big .kit-files__size { color: var(--kit-error-text); }
.kit-files__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-files__size { margin-left: auto; white-space: nowrap; color: var(--kit-text-muted); }

/* Кнопка «Прибрати» — 44 × 44 для пальця, тож рядок із нею тримає менший правий відступ. */
.kit-files li:has(.kit-files__remove) { padding-block: 0; padding-right: 0; }

.kit-files__remove {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: -0.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	background: transparent;
	color: var(--kit-text-muted);
	cursor: pointer;
	transition: background-color var(--kit-transition), color var(--kit-transition), transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.kit-files__remove:hover { background: var(--kit-error-soft); color: var(--kit-error-text); }
.kit-files__remove:active { background: var(--kit-error-soft); color: var(--kit-error-text); transform: scale(0.94); }

.kit-files__remove:focus-visible {
	outline: 3px solid var(--kit-focus);
	outline-offset: -3px;
}

/* ---------- Відправка ---------- */

.kit-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 0.25rem 0 0;
}

.kit-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--wp--custom--button--padding--y) var(--wp--custom--button--padding--x);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--kit-brand);
	color: var(--kit-on-brand);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--kit-transition), transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.kit-form__submit:hover { background: var(--kit-brand-hover); }
.kit-form__submit:active { background: var(--kit-brand-active); transform: scale(0.97); }

.kit-form__submit:focus-visible {
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

.kit-form__submit:disabled {
	background: var(--kit-disabled-bg);
	color: var(--kit-disabled-text);
	cursor: wait;
	transform: none;
}

.kit-form__consent { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--kit-text-muted); }
.kit-form__consent a { color: inherit; }
.kit-form__consent a:hover { color: var(--kit-link-hover); }

/* Поле файлів із помилкою (завеликий файл) — підсвічуємо всю підкладку. */
.kit-drop:has(input[aria-invalid="true"]) { border-style: solid; border-color: var(--kit-error-border); background: var(--kit-error-soft); }

@media (prefers-reduced-motion: reduce) {
	.kit-drop,
	.kit-form__submit { transition: none; }
}