/* =============================================================================
   pages/forms.css — секция с формой заявки («две колонки на цветной панели»)
   и страница «Заявка принята». Базовый вид полей, ошибок и чекбокса живёт
   в components.css (раздел 6), здесь — только композиция.
   ============================================================================= */

/* --- Секция с формой ------------------------------------------------------ */

.form-section {
    position: relative;
    overflow: hidden;
    background-color: var(--c-sky);
    color: var(--c-ink);
}

/* Тонкая сетка-миллиметровка по всей панели */
.form-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-decor);
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: var(--grid-paper-step) var(--grid-paper-step);
}

.form-section > .container {
    position: relative;
    z-index: var(--z-content);
}

.form-section__inner {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: start;
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.form-section__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--c-ink);
}

.form-section__intro .eyebrow {
    color: var(--c-blue-deep);
}

.form-section__title {
    font-size: var(--fs-3xl);
    color: var(--c-blue-deep);
}

.form-section__text {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--c-ink);
    max-width: 30rem;
}

/* Список того, что будет после отправки заявки */
.form-section__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    counter-reset: step;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-section__steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    margin: 0;
}

.form-section__steps li::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    color: var(--c-blue-deep);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.form-section__mascot {
    display: none;
    margin-block-start: var(--space-2);
}

/* --- Карточка с формой ---------------------------------------------------- */

.lead-form {
    padding: var(--space-5) var(--space-4);
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-blue-deep);
    border-radius: var(--radius-lg);
}

.form__row--full {
    grid-column: 1 / -1;
}

.form__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.form__submit {
    width: 100%;
}

.form__note {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--c-muted);
}

/* Пока форма отправляется, поля недоступны для правки */
.lead-form.is-sending .form__grid {
    opacity: 0.65;
    pointer-events: none;
}

@media (min-width: 515px) {
    .lead-form {
        padding: var(--space-6);
    }

    .form__actions {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
    }

    .form__submit {
        width: auto;
        flex: 0 0 auto;
    }

    .form-section__mascot {
        display: block;
    }
}

@media (min-width: 915px) {
    .form-section__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: var(--space-8);
    }

    .form-section__intro {
        position: sticky;
        inset-block-start: calc(var(--header-height) + var(--space-5));
    }

    .lead-form {
        padding: var(--space-7);
    }
}

/* --- Страница «Заявка принята» -------------------------------------------- */

.thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-width: 42rem;
    margin-inline: auto;
    padding-block: var(--section-y);
    text-align: center;
}

.thanks__icon {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--c-sky-soft);
    border: var(--border-width) solid var(--c-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none' stroke='%232E7D5B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21l7 7 15-16'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.thanks__title {
    font-size: var(--fs-3xl);
}

.thanks__text {
    font-size: var(--fs-lg);
    color: var(--c-muted);
}

.thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}