/**
 * Форма заявки и попап.
 *
 * Форма всегда стоит на светлой подложке (карточка или попап) — так поля
 * и ошибки читаются одинаково на любом фоне секции, в том числе на зелёном.
 */

.fsp-quote-form {
	display: grid;
	gap: 1rem;
}

.fsp-quote-form__fields {
	display: grid;
	gap: 0.875rem;
}

.fsp-field {
	display: grid;
	gap: 0.375rem;
}

.fsp-field__label {
	color: var(--fsp-color-text);
	font-weight: 600;
}

.fsp-field__optional {
	color: var(--fsp-color-text-muted);
	font-weight: 400;
}

.fsp-quote-form .fsp-input {
	background: var(--fsp-color-bg);
	box-shadow: inset 0 0 0 1px rgb(3 24 18 / 0.25); /* рамка поля — 3:1 к фону */
}

.fsp-quote-form .fsp-input[aria-invalid="true"] {
	box-shadow: inset 0 0 0 2px #B32D2E;
}

.fsp-field__error {
	margin: 0;
	color: #B32D2E; /* 6.5:1 на белом */
	font-size: var(--fsp-fs-small);
	font-weight: 500;
}

.fsp-field__error:empty {
	display: none;
}

.fsp-quote-form__submit {
	justify-self: start;
}

.fsp-quote-form__submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

.fsp-quote-form__note {
	margin: 0;
	color: var(--fsp-color-text-muted);
	font-size: var(--fsp-fs-small);
}

.fsp-quote-form__privacy {
	margin: -0.5rem 0 0;
	color: var(--fsp-color-text-muted);
	font-size: 0.875rem;
}

.fsp-quote-form.is-sent .fsp-quote-form__privacy {
	display: none;
}

.fsp-quote-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fsp-quote-form__status:empty {
	display: none;
}

.fsp-quote-form__status {
	padding: 1rem 1.25rem;
	border-radius: var(--fsp-radius-sm);
	font-weight: 500;
}

.fsp-quote-form__status.is-success {
	background: var(--fsp-color-sage);
	color: var(--fsp-color-deep);
}

.fsp-quote-form__status.is-error {
	background: #FBEAEA;
	color: #8A1F1F;
}

/* После отправки поля прячем — остаётся благодарность. */
.fsp-quote-form.is-sent .fsp-quote-form__fields,
.fsp-quote-form.is-sent .fsp-quote-form__submit,
.fsp-quote-form.is-sent .fsp-quote-form__note {
	display: none;
}

/* Подложка формы на странице (блок, контакты, тур) */

.fsp-quote-card {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--fsp-radius);
	background: var(--fsp-color-bg);
	color: var(--fsp-color-text);
	box-shadow: 0 20px 48px rgb(3 24 18 / 0.12);
}

.fsp-quote-card h2,
.fsp-quote-card h3 {
	color: var(--fsp-color-primary);
}

/* Попап */

.fsp-quote-dialog {
	width: min(100% - 1.5rem, 34rem);
	max-width: none;
	max-height: calc(100vh - 1.5rem);
	padding: 0;
	border: 0;
	border-radius: var(--fsp-radius);
	background: var(--fsp-color-bg);
	color: var(--fsp-color-text);
	box-shadow: 0 24px 64px rgb(3 24 18 / 0.3);
}

.fsp-quote-dialog::backdrop {
	background: rgb(3 24 18 / 0.6);
}

.fsp-quote-dialog__inner {
	position: relative;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	background: linear-gradient(180deg, var(--fsp-color-sage-light) 0, var(--fsp-color-bg) 12rem);
}

.fsp-quote-dialog__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: var(--fsp-tap);
	height: var(--fsp-tap);
}

.fsp-quote-dialog__title {
	margin: 0 3.5rem 0.5rem 0;
	font-size: var(--fsp-fs-h3);
}

.fsp-quote-dialog__text {
	margin-bottom: 1rem;
}

.fsp-quote-dialog__tour {
	display: inline-flex;
	margin: 0 0 1rem;
	padding: 0.375rem 1rem;
	border-radius: var(--fsp-radius-pill);
	background: var(--fsp-color-sage);
	color: var(--fsp-color-deep);
	font-size: var(--fsp-fs-small);
	font-weight: 600;
}

.fsp-quote-dialog__tour[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.fsp-quote-dialog[open] {
		animation: fsp-dialog-in 0.2s ease-out;
	}

	@keyframes fsp-dialog-in {
		from {
			opacity: 0;
			transform: translateY(12px);
		}
	}
}

/* Карточка формы на зелёной панели — светлая, поэтому кнопка внутри
   зелёная, как на любом светлом фоне (а не кремовая, как на самой панели). */
.fsp-block--green .fsp-quote-card .fsp-btn--primary {
	background: var(--fsp-color-primary);
	color: var(--fsp-color-on-primary);
}

.fsp-block--green .fsp-quote-card .fsp-btn--primary:hover {
	background: var(--fsp-color-primary-dark);
}

.fsp-block--green .fsp-quote-card a:not(.fsp-btn) {
	color: var(--fsp-color-primary);
}