/**
 * mod_tb_hostme_reservation — стили формы
 *
 * Поддерживает два CSS-фреймворка: UIkit 3 (YooTheme Pro) и Bootstrap 5.
 * Цветовые токены подхватываются автоматически из активного фреймворка,
 * при необходимости переопределяются через CSS-переменные ниже.
 *
 * --tb-accent       акцентный цвет (CTA, выделение)
 * --tb-radius       радиус скругления
 * --tb-error        цвет ошибок
 * --tb-success      цвет успеха
 * --tb-row-gap      вертикальный отступ между блоками
 * --tb-icon-pad     отступ слева у полей с иконкой
 */

.tb-reservation {
    --tb-accent: var(--uk-primary, var(--bs-primary, #1e87f0));
    --tb-radius: 4px;
    --tb-error: var(--bs-danger, #f0506e);
    --tb-success: var(--bs-success, #32d296);
    --tb-row-gap: 1rem;
    --tb-icon-pad: 2.25rem;
}

/* ====================================================================
 * Общая структура
 * ==================================================================== */

.tb-reservation__form {
    display: flex;
    flex-direction: column;
    gap: var(--tb-row-gap);
}

.tb-reservation__row {
    display: block;
}

/* Главная строка: Дата | Зона | Время | Гости.
 * Flex с переносом — скрытая «Зона» (display:none через [hidden])
 * не оставляет дыру, остальные ячейки сами распределяются.
 * На узких экранах (≤ 640px) — стек. */
.tb-reservation__row--main {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.tb-reservation__row--main > .tb-reservation__cell {
    flex: 1 1 calc(25% - 0.75rem);
    min-width: 0;
}
.tb-reservation__row--main > .tb-reservation__cell[hidden] {
    display: none !important;
}
@media (max-width: 640px) {
    .tb-reservation__row--main > .tb-reservation__cell {
        flex: 1 1 100%;
    }
}

/* Honeypot — невидим для людей, виден ботам */
.tb-reservation__hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Разделитель «контакты ниже» */
.tb-reservation__divider {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0.5rem 0 0;
}

/* ====================================================================
 * Чекбоксы (детский стул / коляска / цветы)
 * ==================================================================== */

/* Контейнер опций: горизонтальный ряд с переносом.
 * row-gap/column-gap явно (не shorthand) — некоторые YooTheme-обёртки
 * у нас в проде игнорировали `gap: a b`-форму. */
.tb-reservation__checks {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.75rem;
    column-gap: 1.1rem;
}

/* Builtins и customs живут в двух разных <span>-контейнерах
 * (так нужно для JS), но визуально должны быть единым flex-потоком —
 * иначе на мобиле customs уезжают на отдельную строку, а на ПК
 * между ними образуется лишний отступ. display: contents делает
 * эти <span> «прозрачными»: их дети становятся прямыми детьми
 * .tb-reservation__checks и подчиняются общему column-gap. */
.tb-reservation__checks > [data-tb-builtins],
.tb-reservation__checks > [data-tb-customs] {
    display: contents;
}

/* Сама опция: чекбокс + подпись в одной линии. Отступ до соседней опции
 * даёт column-gap у .tb-reservation__checks, отдельный padding не нужен —
 * лишний padding-right копился и выкидывал последнюю опцию на новую строку. */
.tb-reservation__check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.95em;
    user-select: none;
}

.tb-reservation__check input {
    margin: 0;
    flex: 0 0 auto;
}

/* ====================================================================
 * Stepper для количества гостей
 * ==================================================================== */

.tb-reservation__stepper {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 0.25rem;
}

.tb-reservation__stepper > button {
    flex: 0 0 auto;
    width: 2.5rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.tb-reservation__stepper > input {
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
}

/* ====================================================================
 * UIkit 3 — фикс иконок в полях
 * ==================================================================== */

/* UIkit изначально даёт padding-left только для <input>, а для <select>
 * и для <input type="date"/time> первый символ часто залазит на иконку.
 * Принудительно добавляем отступ у любых полей с .tb-reservation__icon-field. */
.tb-reservation--uikit .tb-reservation__icon-field > .uk-input,
.tb-reservation--uikit .tb-reservation__icon-field > .uk-select,
.tb-reservation--uikit .tb-reservation__icon-field > .uk-textarea {
    padding-left: var(--tb-icon-pad);
}

/* Иконка не должна перехватывать клики по полю */
.tb-reservation--uikit .tb-reservation__icon-field > .uk-form-icon {
    pointer-events: none;
    z-index: 1;
}

/* Числовое поле в степпере — иконку не используем, отступ убираем */
.tb-reservation__stepper > input.uk-input {
    padding-left: 0.5rem;
}

/* ====================================================================
 * Bootstrap 5 — небольшая подстройка spacing
 * ==================================================================== */

.tb-reservation--bootstrap5 .tb-reservation__stepper .form-control {
    border-radius: 0;
}
.tb-reservation--bootstrap5 .tb-reservation__stepper > button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tb-reservation--bootstrap5 .tb-reservation__stepper > button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ====================================================================
 * Action row
 * ==================================================================== */

.tb-reservation__actions {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tb-reservation__spinner {
    margin-left: 0.5rem;
    display: inline-block;
}

.tb-reservation__terms {
    margin: 0;
}

/* Согласие на обработку ПД — стоит над кнопкой бронирования
 * (как на tuttobene.moscow/banquet). Текст наследует цвет темы,
 * чтобы на контрастных тёмных блоках читался белым. */
.tb-reservation__consent {
    align-items: flex-start;
    font-size: 0.9em;
    color: inherit;
    opacity: 0.85;
    padding-right: 0;
    line-height: 1.4;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}
.tb-reservation__consent input {
    margin-top: 0.2em;
}
.tb-reservation__consent a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}
.tb-reservation__consent a:hover {
    opacity: 0.85;
}

/* ====================================================================
 * Невалидное поле — красная рамка + лёгкий glow.
 * Снимается из JS при первом изменении (flagInvalid → handler `off`).
 * ==================================================================== */
.tb-reservation__invalid {
    border-color: var(--tb-error) !important;
    box-shadow: 0 0 0 2px rgba(240, 80, 110, 0.18) !important;
}
/* Для чекбоксов рамка слабо видна — даём явный outline. */
input.tb-reservation__invalid[type='checkbox'] {
    outline: 2px solid var(--tb-error);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ====================================================================
 * Алёрт ошибки — даём переносы строк и моноширинный шрифт для JSON
 * ==================================================================== */

.tb-reservation__alert {
    margin: 0;
}
.tb-reservation__alert [data-tb-alert-text] {
    margin: 0;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    word-break: break-word;
}

/* ====================================================================
 * Success card — наследует фон и цвет темы (работает и на светлых,
 * и на тёмных страницах). Pop-in анимация + анимированный чекмарк.
 * ==================================================================== */

.tb-reservation__success {
    margin-top: 1.5rem;
    padding: 1.5rem 1rem 1rem;
    text-align: center;
    color: inherit;
    background: transparent;
    animation: tb-success-pop 0.5s cubic-bezier(0.4, 1.6, 0.6, 1) both;
}

@keyframes tb-success-pop {
    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* --- SVG checkmark, рисуется штрихом --- */
.tb-success-check {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    overflow: visible;
}
.tb-success-check__circle {
    stroke: var(--tb-success);
    stroke-width: 2.5;
    stroke-dasharray: 154;
    stroke-dashoffset: 154;
    animation: tb-success-draw-circle 0.6s 0.05s ease-out forwards;
    transform-origin: center;
}
.tb-success-check__mark {
    stroke: var(--tb-success);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: tb-success-draw-mark 0.35s 0.6s ease-out forwards;
}
@keyframes tb-success-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes tb-success-draw-mark   { to { stroke-dashoffset: 0; } }

.tb-reservation__success-title {
    margin: 0 0 0.5rem;
    color: inherit;
    font-weight: 600;
}

.tb-reservation__success-text {
    margin: 0 auto;
    max-width: 32rem;
    color: inherit;
    opacity: 0.9;
    line-height: 1.45;
}

/* --- Список «Дата / Гостей / Номер брони» --- */
.tb-reservation__success-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 1.25rem;
    margin: 1.5rem auto;
    max-width: 32rem;
    text-align: left;
}
.tb-reservation__success-list dt {
    font-weight: 600;
    color: inherit;
    opacity: 0.75;
}
/* Двоеточие после каждой метки. */
.tb-reservation__success-list dt::after {
    content: ':';
}
.tb-reservation__success-list dd {
    margin: 0;
    color: inherit;
}
.tb-reservation__success-list dd code {
    color: inherit;
    background: rgba(127, 127, 127, 0.15);
    padding: 0 0.35em;
    border-radius: var(--tb-radius);
    font-size: 0.95em;
}

.tb-reservation__success-actions {
    margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .tb-reservation__success,
    .tb-success-check__circle,
    .tb-success-check__mark { animation: none; }
    .tb-success-check__circle,
    .tb-success-check__mark { stroke-dashoffset: 0; }
}

/* ====================================================================
 * Skeleton-loaders (iOS-style shimmer)
 * Используется для:
 *   - .tb-reservation__select--loading  → select зон и времени (пока тянем)
 *   - .tb-skeleton                       → чип-плейсхолдер для доп.опций
 *
 * Цвет фона задан в средне-сером с альфой — одинаково ОК на светлой
 * и тёмной темах. Анимация — мягкий шиммер вместо резкой пульсации.
 * ==================================================================== */

@keyframes tb-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Базовая «дышащая» полоска. Для чипов в доп. опциях. */
.tb-skeleton {
    background-image: linear-gradient(
        90deg,
        rgba(127, 127, 127, 0.12) 0%,
        rgba(127, 127, 127, 0.32) 50%,
        rgba(127, 127, 127, 0.12) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: tb-skeleton-shimmer 1.4s linear infinite;
}

/* Селект во время загрузки.
 * Перебиваем UIkit (.uk-select имеет свой background-image со стрелкой,
 * background-size: 16px и background-position: 100% 50% — у него
 * выше специфичность, поэтому без !important мой шиммер показывался
 * только в 16px-окошке справа и выглядел как «летающая стрелочка»). */
.tb-reservation__select--loading {
    background-image:
        linear-gradient(
            90deg,
            rgba(127, 127, 127, 0.12) 0%,
            rgba(127, 127, 127, 0.40) 50%,
            rgba(127, 127, 127, 0.12) 100%
        ) !important;
    background-size: 200% 100% !important;
    background-position: 0 50% !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    pointer-events: none;
    animation: tb-skeleton-shimmer 1.4s linear infinite;
}
/* Тот же селект внутри .tb-reservation__icon-field — UIkit добавляет
 * `.uk-form-icon` (иконку календаря/часов/гео-метки). На время загрузки
 * её прячем, чтобы плашка скелетона была чистой. */
.tb-reservation__icon-field > .uk-form-icon:has(+ .tb-reservation__select--loading) {
    opacity: 0;
}

/* Чип-плейсхолдер для доп. опций — выглядит как чекбокс + подпись. */
.tb-skeleton {
    display: inline-block;
    height: 1.25rem;
    border-radius: var(--tb-radius);
    color: transparent;
    user-select: none;
    vertical-align: middle;
    margin-right: 0.75rem;
}
.tb-skeleton--check-sm { width: 6rem; }
.tb-skeleton--check-md { width: 9rem; }
.tb-skeleton--check-lg { width: 12rem; }

/* Уважаем prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .tb-skeleton,
    .tb-reservation__select--loading,
    .tb-reservation__input--loading {
        animation: none;
        opacity: 0.7;
    }
}

/* ====================================================================
 * Состояние «отправляем» — пригасить форму
 * ==================================================================== */

.tb-reservation[aria-busy='true'] .tb-reservation__form {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 200ms ease;
}

/* ====================================================================
 * Адаптив
 * ==================================================================== */

/* На очень узких экранах stepper не должен переполнять */
@media (max-width: 480px) {
    .tb-reservation__stepper > button {
        width: 2.25rem;
    }
}

/* На мобиле каждое поле формы занимает 100% ширины (стек).
 * Без явного центрирования native-контролы выглядят несогласованно:
 *   - <select> и <input type=text> жмут текст влево,
 *   - stepper (число гостей) выглядит центрированным из-за плюс/минус,
 *   - <input type=date> центрируется по-разному в разных браузерах.
 * Унифицируем: центрируем визуально все формовые контролы.
 * Textarea (пожелания) намеренно оставляем left-aligned — длинный текст
 * по центру плохо читается. */
@media (max-width: 640px) {
    .tb-reservation__form input:not([type='checkbox']),
    .tb-reservation__form select {
        text-align: center;
        text-align-last: center;
    }
}

/* На мобиле строки чекбоксов аккуратнее ставятся вертикально, если узко */
@media (max-width: 380px) {
    .tb-reservation__checks {
        flex-direction: column;
        gap: 0.5rem;
    }
}