/* ==========================================================
   ФОРМИ — order-form зараз, легко перевикористати для інших
   форм у майбутньому (наприклад, форма зворотного дзвінка)
   ========================================================== */

.order-form {
	background-color: var(--color-white);
	color: var(--color-gray-700);
	border-radius: var(--radius-md);
	padding: var(--space-8);
}

.order-form__title {
	font-size: 1.4rem;
	margin-bottom: var(--space-6);
}

.form-field {
	margin-bottom: var(--space-4);
}

.form-field label {
	display: block;
	font-size: var(--fs-small);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-sm);
	background-color: var(--color-gray-100);
	transition: border-color var(--transition-base);
}
.form-field input:focus,
.form-field select:focus {
	border-color: var(--color-accent-dark);
	outline: none;
}

/* Стан помилки валідації — JS додає клас is-invalid на .form-field */
.form-field.is-invalid input,
.form-field.is-invalid select {
	border-color: #D64545;
}
.form-field__error {
	display: none;
	color: #D64545;
	font-size: var(--fs-small);
	margin-top: var(--space-1);
}
.form-field.is-invalid .form-field__error {
	display: block;
}

.form-field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}
.form-field--checkbox label {
	font-weight: 400;
	margin-bottom: 0;
}
.form-field--checkbox a { text-decoration: underline; }

.order-form__submit {
	width: 100%;
	margin-top: var(--space-2);
}

/* Стан успішної відправки (JS перемикає видимість) */
.order-form__success {
	display: none;
	text-align: center;
	padding: var(--space-8) 0;
}
.order-form.is-submitted .order-form__fields { display: none; }
.order-form.is-submitted .order-form__success { display: block; }