/* ===== Зерно · модальное окно бронирования =====
Макеты: состояния формы 597:2169 (пустая, со списком, заполненная, готовая, успех).
Поля берём готовые из forms.css — здесь только само окно и раскладка формы.
Подключение:
*/
/* ===== ПОДЛОЖКА ===== */
.booking{
position:fixed; inset:0; z-index:300; /* выше информера (200) и шапки (100) */
display:grid; place-items:safe center; /* safe: у высокой карточки верх не срезается и остаётся доступен */
/* Колонка minmax(0,1fr), а не auto: иначе трек растягивается до максимальной ширины
карточки (500px), max-width:100% считается уже от него — и на экране 360 окно
вылезало за правый край вместе с крестиком */
grid-template-columns:minmax(0, 1fr);
/* Длинную форму прокручивает подложка, а не карточка. Иначе overflow карточки
срезает крестик — он стоит снаружи, у верхнего правого угла (макет 589:1840).
Поля сверху и по бокам — не меньше 48, чтобы крестику хватило места. */
padding:48px; overflow-y:auto; overscroll-behavior:contain;
background:rgba(28,26,18,.55); /* graphite-900 с прозрачностью */
opacity:0; visibility:hidden;
transition:opacity .25s ease, visibility .25s;
}
.booking.is-open{ opacity:1; visibility:visible }
/* ===== КАРТОЧКА ===== */
.booking__card{
position:relative; width:500px; max-width:100%;
background:#FFFFFF; border-radius:8px; corner-shape:squircle;
padding:43px 32px; /* макет 582:1695 */
display:flex; flex-direction:column; gap:32px;
transform:translateY(16px) scale(.98);
transition:transform .25s cubic-bezier(.22,.61,.21,1);
}
.booking.is-open .booking__card{ transform:none }
/* внутри карточки шаг между заголовком, формой и согласием — 32 (макет 582:1695) */
.booking__form-wrap{ display:flex; flex-direction:column; gap:32px }
.booking__title{
margin:0; font-family:var(--font-heading); font-weight:400; font-size:24px; line-height:1.36;
letter-spacing:.06em; text-transform:uppercase; color:var(--gold-600); text-align:center; /* Heading/H4 */
}
/* Крестик стоит снаружи карточки, у её верхнего правого угла (макет 589:1840) */
.booking__close{
position:absolute; left:100%; bottom:100%;
width:32px; height:32px; padding:0; border:0; background:transparent;
color:#FFFFFF; cursor:pointer; display:grid; place-items:center;
transition:color .2s ease;
}
.booking__close svg{ width:20px; height:20px; display:block; fill:currentColor }
.booking__close:hover{ color:var(--gold-300) }
.booking__close:focus-visible{ outline:2px solid var(--gold-400); outline-offset:3px }
/* ===== ФОРМА ===== */
.booking-form{ display:flex; flex-direction:column; gap:16px }
.booking-form__row{ display:flex; gap:8px }
.booking-form__row .field{ flex:1 1 0; min-width:0 }
/* Пустая подсказка не должна занимать место: иначе gap у .field добавляет лишние 8px
к каждому полю и шаг между ними становится 24 вместо макетных 16. */
.booking .field__hint:empty{ display:none }
.booking .btn{ width:100%; justify-content:center }
/* ===== СОГЛАСИЕ (макет consent-row 626:918) =====
Было предложение «отправляя форму, вы соглашаетесь» по центру — стало осознанное
действие: галочка и текст по левому краю. */
/* Согласие стоит внутри