/* Страница формы записи.

   Оформление повторяет то, к которому люди привыкли на abitu: белый лист,
   тёмно-синяя обводка, поля-таблетки. Свой файл, а не стили лендинга школ:
   там синий фон и другая типографика, и форма рядом с ним читалась бы как
   чужая страница. */

:root {
    --ink: #1d2d57;
    --ink-40: rgba(29, 45, 87, 0.4);
    --link: #4b79b2;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 48px 20px 64px;
    background: #fff;
    color: var(--ink);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

.form-page-card { width: 100%; max-width: 560px; margin: 0 auto; }

.form-page-card h1 {
    margin: 0 0 32px;
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.form-page-subtitle {
    margin: -16px 0 32px;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}

.consult-fields { display: flex; flex-direction: column; gap: 20px; }

.consult-fields input[type='text'],
.consult-fields input[type='tel'],
.consult-fields input[type='email'],
.consult-fields input[type='number'],
.consult-fields input[type='date'],
.consult-fields select,
.consult-fields textarea {
    width: 100%;
    height: 60px;
    padding: 0 24px;
    border: 3px solid var(--ink);
    border-radius: 50px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    appearance: none;
}

.consult-fields textarea { height: auto; min-height: 120px; padding: 18px 24px; border-radius: 24px; }
.consult-fields ::placeholder { color: var(--ink-40); }

/* Стрелка рисуется рамкой: родную снимает appearance: none, а фоновой
   картинкой она разъезжается между браузерами. */
.field-select { position: relative; }

.field-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 26px;
    width: 10px;
    height: 10px;
    margin-top: -8px;
    border-right: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    transform: rotate(45deg);
    pointer-events: none;
}

.field-select select { padding-right: 52px; }
.consult-fields select:invalid { color: var(--ink-40); }

.consult-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.consult-consent input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 2px solid var(--ink);
    border-radius: 4px;
    accent-color: var(--ink);
}

.consult-consent a { color: var(--link); }

fieldset { margin: 0; padding: 0; border: 0; }
fieldset legend { margin-bottom: 10px; padding: 0; color: var(--ink-40); font-size: 15px; }
fieldset label { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }

.btn {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 32px;
    border: 0;
    border-radius: 50px;
    background: var(--ink);
    color: #fff;
    font: 600 16px/1 'Montserrat', 'Segoe UI', Arial, sans-serif;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.55; cursor: default; }

.consult-error { display: none; margin: 16px 0 0; color: #c8402f; text-align: center; }

/* Отправленная заявка занимает место формы: человек должен увидеть ответ там,
   куда смотрел, а не искать его на перерисованной странице. */
.consult-done { display: none; padding: 40px 0; text-align: center; }
.form-page-card.is-done form { display: none; }
.form-page-card.is-done .consult-done { display: block; }

@media (max-width: 600px) {
    body { padding: 32px 16px 48px; font-size: 16px; }
    .consult-fields { gap: 14px; }
    .consult-fields input, .consult-fields select { height: 54px; padding: 0 20px; }
    .btn { height: 54px; }
}