/* глобальный сброс box-sizing для более предсказуемой компоновки */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* общие стили для body, контейнера и шагов */
body {
    margin: 0;
    padding: 0;
    font-family: 'helvetica neue', system-ui, sans-serif; /* основной текст */
    background-color: #ffffff; /* белый фон */
    color: #000000; /* черный текст */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

.container {
    width: 100%;
    max-width: 480px;
    min-width: 320px;
    margin: 0 auto;
    padding: 16px; /* отступы по краям */
    position: relative;
    overflow: hidden;
    margin-top: 104px; /* отступ для основного контента, чтобы не перекрывался фиксированным заголовком (100px header + 4px progress bar) */
    background-color: #ffffff; /* белый фон для основного блока */
    color: #000000; /* черный текст для основного блока */
    border-radius: 0; /* нет скруглений */
    box-shadow: none; /* нет теней */
}

/* шаги */
.step-page {
    display: none;
    /* анимации отсутствуют (брутализм не про плавность) */
}

.step-page.active {
    display: block;
}

/* прогресс-бар (глобальный) */
.progress-bar-container-global {
    height: 4px;
    background: #d9d9d9; /* неактивные элементы, фон выбора */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-radius: 0; /* нет скруглений */
}

.progress-bar-global {
    height: 100%;
    background: #000000; /* активные элементы */
    width: 0%;
    border-radius: 0; /* нет скруглений */
}

/* заголовок */
.header-container {
    display: flex;
    align-items: center; /* выравнивание контента по центру вертикали */
    justify-content: space-between; /* распределение элементов по краям */
    background-color: #000000; /* черный фон */
    padding: 0 16px; /* отступы по бокам */
    position: fixed; /* фиксированный заголовок */
    top: 4px; /* под глобальным прогресс-баром */
    left: 0;
    width: 100%; /* на всю ширину */
    z-index: 999; /* выше основного контента, но ниже глобального прогресс-бара */
    height: 60px;
    box-sizing: border-box; /* Учитываем padding в ширине */
}

.logo-group {
    display: flex;
    align-items: center;
    height: 100%; /* Занимает всю высоту хедера */
}

.club-logo {
    height: 100%; /* Логотипы занимают всю высоту */
    width: auto; /* Автоматическая ширина для сохранения пропорций */
    cursor: pointer;
}

.header-text {
    flex-grow: 1; /* позволяем заголовку занимать доступное пространство */
    text-align: center; /* выравнивание заголовка по центру */
    color: #ffffff; /* белый текст для заголовка */
    padding: 0 10px; /* Небольшой отступ, чтобы текст не прилипал к логотипам */
}

.header-text h1 {
    font-family: 'helvetica neue condensed black', sans-serif;
    text-transform: lowercase; /* все строчные */
    font-weight: bold;
    font-size: 24px; /* заголовки: 24-28px */
    margin: 0;
    line-height: 1.2;
}

/* кнопки и блоки выбора */
.block {
    display: inline-block;
    padding: 16px;
    text-align: center;
    background-color: #d9d9d9; /* светло-серый */
    color: #000000; /* черный */
    cursor: pointer;
    border-radius: 0;
    box-shadow: none;
    margin: 0; /* удалено: margin-bottom, все плотно */
    font-size: 16px; /* основной текст */
    border: none; /* удалено: обводка */
}
.block.active {
    background-color: #000000; /* черный */
    color: #ffffff; /* белый */
}

/* Удален .block.disabled */

.button {
    display: block;
    width: 100%;
    padding: 16px;
    border: none; /* удалено: обводка */
    cursor: not-allowed;
    border-radius: 0;
    box-shadow: none;
    font-size: 18px; /* крупнее, чем основной текст */
    margin: 0; /* удалено: margin-bottom */
    background-color: #d9d9d9; /* светло-серый */
    color: #000000; /* черный */
    text-align: center;
    font-weight: bold;
    text-transform: lowercase; /* все строчные */
}
.button.active {
    background-color: #000000; /* черный */
    color: #ffffff; /* белый */
    cursor: pointer;
}
.button.back-btn {
    background-color: transparent; /* нет фона */
    color: #000000; /* черный текст */
    font-weight: normal; /* Сделаем "назад" тоньше */
    font-size: 18px; /* Увеличим размер до размера кнопки "далее" */
    padding: 16px; /* Увеличим padding для размера */
    margin-top: 16px; /* Добавим отступ сверху */
}
.button.back-btn:hover:not(:disabled) {
    background-color: #d9d9d9; /* чуть темнее серый при наведении */
}
/* Увеличиваем шрифт и жирность для кнопок "далее" */
.button.active:not(.back-btn) {
    font-size: 27px; /* 1.5 * 18px = 27px */
    font-weight: bold; /* Уже есть, но для ясности */
}

/* Стиль для кнопки "текущая бронь" */
.current-booking-btn {
    margin-top: 16px; /* Отступ от кнопки "далее" */
    background-color: #d9d9d9; /* Серый фон */
    color: #000000; /* Черный текст */
    font-size: 18px; /* Размер шрифта как у обычных кнопок */
    font-weight: bold;
}
.current-booking-btn:hover {
    background-color: #c0c0c0; /* Чуть темнее при наведении */
}


/* хлебные крошки */
.breadcrumb {
    font-size: 12px;
    text-align: right;
    color: #000000; /* черный текст на белом фоне */
    margin-bottom: 32px; /* отступ увеличен в 2 раза (было 16px) */
    text-transform: lowercase; /* все строчные */
    position: absolute; /* Открепляем от fixed */
    top: 70px; /* под заголовком (60px header + 4px progress + 6px margin) */
    right: 16px; /* отступ справа */
    z-index: 998; /* ниже заголовка, но выше основного контента */
    width: calc(100% - 32px); /* ширина с учетом padding контейнера */
    max-width: 448px; /* максимальная ширина */
    transition: opacity 0.3s ease-in-out; /* Анимация для скрытия/показа */
    line-height: 1.4; /* Увевеличиваем межстрочный интервал для многострочных крошек */
}

.breadcrumb.hidden-breadcrumb {
    opacity: 0;
    pointer-events: none; /* Делаем некликабельным, когда скрыто */
}

/* стили для заглушки */
#web-app-fallback {
    background-color: #000000; /* черный фон для заглушки */
    color: #ffffff; /* белый текст */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/intro.jpg'); /* Добавлено фоновое изображение */
    background-size: cover; /* Растянуть изображение на всю область */
    background-position: center; /* Центрировать изображение */
    background-repeat: no-repeat; /* Не повторять изображение */
    z-index: 1000;
}
#web-app-fallback .content {
    background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный фон для контента */
    border-radius: 0;
    padding: 16px;
    max-width: 400px;
    width: 100%;
    box-shadow: none;
    color: #ffffff;
}
/* Удалено: #web-app-fallback video */
#web-app-fallback h1 {
    font-family: 'helvetica neue condensed black', sans-serif;
    font-weight: bold;
    font-size: 28px;
    margin-bottom: 16px;
    color: #ffffff;
    text-transform: lowercase; /* все строчные */
}
#web-app-fallback p {
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 16px;
    margin-bottom: 8px;
    color: #ffffff;
    text-transform: lowercase; /* все строчные */
}
#web-app-fallback a {
    color: #ffffff; /* белые ссылки */
    text-decoration: underline; /* подчеркивание */
}
#web-app-fallback a:hover {
    color: #d9d9d9; /* светло-серый при наведении */
}
#web-app-fallback .address {
    font-size: 14px;
    color: #d9d9d9;
}

/* объединенный шаг: дата и симулятор */
.date-simulator-step {
    margin-bottom: 16px; /* отступ от нижних элементов */
}

.date-selection-area {
    margin-bottom: 16px; /* отступ между датой и симуляторами */
}

/* Новый стиль для заголовка "дата" */
.date-label {
    font-size: 10px; /* уменьшен в 2 раза (было 16px) */
    font-style: italic; /* курсив */
    text-transform: lowercase; /* все строчные */
    text-align: left; /* выравнивание по левому краю */
    margin-bottom: 16px; /* отступ снизу */
    color: #000000;
    display: block; /* чтобы занимал всю ширину */
}

/* НОВАЯ ЗАГЛУШКА ДЛЯ КАЛЕНДАРЯ */
.calendar-placeholder {
    background-color: #EFEFEF; /* Цвет подложки */
    height: calc(25vw - 0px); /* Высота соответствует элементам даты */
    max-height: 120px; /* Максимальная высота */
    width: calc(100% + 32px); /* Ширина с учетом отступов контейнера */
    margin-left: -16px; /* Выравнивание с каруселью */
    margin-right: -16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #BFBFBF;
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 14px;
    text-transform: lowercase;
    overflow: hidden; /* Скрываем возможное содержимое, если оно выйдет за пределы */
}

.calendar-placeholder.hidden {
    display: none;
}


/* Удалено: .date-display */
/* Удалено: .date-display .arrow-down */
/* Удалено: .date-display.expanded .arrow-down */

.date-carousel {
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* для плавного скролла на ios */
    scroll-snap-type: x mandatory;
    gap: 0; /* плотное прилегание */
    margin-left: -16px; /* вытягиваем на всю ширину, компенсируя padding контейнера */
    margin-right: -16px;
    padding-left: 16px; /* добавляем padding для первого элемента */
    padding-right: 16px; /* добавляем padding для последнего элемента */
    margin-bottom: 16px; /* отступ от симуляторов */
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none;  /* ie and edge */
}

.date-carousel::-webkit-scrollbar {
    display: none; /* chrome, safari, opera */
}

.date-carousel .date-item {
    flex: 0 0 auto; /* не сжимать и не растягивать */
    width: calc(25% - 0px); /* 4 элемента в ряд, без gap */
    height: calc(25vw - 0px); /* делаем квадратным относительно ширины viewport */
    max-width: 120px; /* максимальная ширина для больших экранов */
    max-height: 120px; /* максимальная высота для больших экранов */
    background-color: #d9d9d9;
    color: #000000;
    text-align: left; /* выравнивание текста по левому краю */
    padding: 8px; /* уменьшенный padding для размещения контента по углам */
    cursor: pointer;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* размещаем элементы вверху и внизу */
    align-items: flex-start; /* выравниваем по левому краю */
    scroll-snap-align: start;
    font-family: 'monaco', monospace; /* моноширинный шрифт для цифр */
    font-size: 20px; /* крупные цифры */
    font-weight: bold;
    text-transform: none; /* цифры остаются в верхнем регистре */
}

/* Стиль для дня недели в календаре */
.date-carousel .date-item .weekday-small {
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 10px;
    display: block;
    font-weight: normal;
    text-transform: lowercase;
    margin-top: auto; /* Прижимает к низу */
}

.date-carousel .date-item small { /* Этот стиль теперь будет использоваться для месяца */
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 10px; /* уменьшен для длинных названий месяцев */
    display: block;
    margin-top: auto; /* прижимает к низу flex-контейнера */
    font-weight: normal;
    text-transform: lowercase; /* все строчные */
}

.date-carousel .date-item.selected {
    background-color: #000000;
    color: #ffffff;
}

/* заголовки шагов */
h2 {
    font-family: 'helvetica neue condensed black', sans-serif;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin-bottom: 16px;
    color: #000000;
    text-transform: lowercase; /* все строчные */
}

/* стилизация заголовков (например, "выберите симулятор(ы)") */
.step-title { /* новый класс для заголовков шагов */
    font-size: 10px; /* уменьшен в 2 раза (было 16px) */
    font-style: italic; /* курсив */
    text-transform: lowercase; /* все строчные */
    text-align: left; /* выравнивание по левому краю */
    margin-bottom: 16px; /* отступ снизу */
    color: #000000;
}


/* выбор симуляторов */
.simulator-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 столбца на первом шаге */
    gap: 0; /* плотное прилегание */
    margin-bottom: 16px;
    margin-left: -16px; /* вытягиваем на всю ширину, компенсируя padding контейнера */
    margin-right: -16px;
}
.grid-item {
    padding: 16px;
    text-align: center;
    background-color: #d9d9d9;
    color: #000000;
    cursor: pointer;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    font-family: 'helvetica neue', system-ui, sans-serif;
    border: none; /* удалено: обводка */
    margin: 0; /* плотное прилегание */
    position: relative; /* для позиционирования крестика и текста */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1; /* делаем квадратным */
    min-width: 140px; /* минимальный размер для адаптивности */
    min-height: 140px;
}
.grid-item .simulator-number { /* стиль для цифр симуляторов */
    font-family: 'monaco', monospace;
    font-size: 60px; /* увеличено в 1.5 раза */
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: 32px; /* отступ сверху увеличен в 2 раза (было 16px) */
    left: 32px; /* отступ слева увеличен в 2 раза (было 16px) */
    text-transform: none; /* цифра остается в верхнем регистре */
}
.grid-item small {
    font-size: 16px; /* увеличил размер для "автосим" */
    display: block;
    margin-top: 4px;
    position: absolute;
    bottom: 8px; /* отступ снизу */
    left: 32px; /* выравнивание по левому краю с цифрой */
    text-transform: lowercase; /* все строчные */
}
.grid-item.selected {
    background-color: #000000;
    color: #ffffff;
}
.grid-item.disabled {
    background-color: #d9d9d9;
    color: #a0a0a0; /* серый для зачёркнутого */
    text-decoration: line-through;
    pointer-events: none;
    border: none; /* удалено: обводка */
}
.grid-item .remove-selection {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent; /* изменено: нет подложки */
    color: #000000; /* изменено: черный цвет */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 0;
    font-family: 'monaco', monospace; /* моноширинный шрифт для крестика */
}
.grid-item.selected .remove-selection {
    display: flex;
    color: #ffffff; /* изменено: белый цвет при активном симуляторе */
}

/* выбор пакета времени */
#package-grid { /* отдельный стиль для сетки пакетов */
    grid-template-columns: repeat(3, 1fr); /* 3 столбца на шаге пакетов */
    display: grid; /* применяем grid, так как он может быть переопределен */
    gap: 0;
    margin-bottom: 16px;
    margin-left: -16px; /* вытягиваем на всю ширину, компенсируя padding контейнера */
    margin-right: -16px;
}
.package {
    padding: 16px;
    text-align: center;
    background-color: #d9d9d9;
    color: #000000;
    cursor: pointer;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    font-family: 'helvetica neue', system-ui, sans-serif;
    border: none;
    margin: 0;
    position: relative; /* для позиционирования внутренних элементов */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Изменено: выравниваем содержимое по верху */
    align-items: flex-start; /* выравниваем по левому краю */
    aspect-ratio: 1 / 1; /* делаем квадратным */
    min-width: 140px; /* минимальный размер для адаптивности */
    min-height: 140px;
}
.package.selected {
    background-color: #000000; /* черный фон */
    color: #ffffff; /* белый текст */
}

/* Новый стиль для контейнера номера и единицы измерения */
.package-header-content { /* Изменено с .package-header-row */
    display: flex;
    flex-direction: column; /* Элементы в колонку */
    align-items: flex-start; /* Выравнивание по левому краю */
    gap: 0; /* Убираем отступ */
    position: absolute; /* Позиционируем контейнер внутри пакета */
    top: 16px; /* Отступ сверху */
    left: 16px; /* Отступ слева */
    width: calc(100% - 32px); /* Ширина с учетом padding */
}

.package .package-number { /* стиль для цифр пакетов */
    font-family: 'monaco', monospace;
    font-size: 32px; /* 32px */
    font-weight: bold;
    line-height: 1;
    position: static; /* Сбрасываем абсолютное позиционирование */
    text-transform: none;
    text-align: left; /* Выравнивание текста по левому краю */
    width: 100%; /* Занимает всю доступную ширину */
    letter-spacing: -8px; /* Добавлено letter-spacing */
}
.package .package-unit { /* стиль для "час/часа" */
    font-size: 10.24px; /* 12.8px * 0.8 = 10.24px */
    display: block;
    position: static; /* Сбрасываем абсолютное позиционирование */
    text-transform: lowercase;
    font-weight: normal;
    margin-top: 0; /* Убираем верхний отступ */
    text-align: left; /* Выравнивание текста по левому краю */
    width: 100%; /* Занимает всю доступную ширину */
}
.package .package-night-text { /* стиль для текста "ночь" */
    font-family: 'helvetica neue condensed black', sans-serif;
    font-size: 24px; /* 24px */
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: 26px; /* 26px */
    left: 20px; /* 20px */
    text-transform: lowercase;
}
.package .package-night-time { /* стиль для текста "(00:00 – 08:00)" */
    font-family: 'monaco', monospace;
    font-size: 9px; /* 9px */
    position: absolute;
    top: 51px; /* 51px */
    left: 27px; /* 27px */
    text-transform: none;
}
.package .package-original-price { /* перечеркнутая цена */
    font-family: 'monaco', monospace;
    font-size: 10.24px; /* 12.8px * 0.8 = 10.24px */
    position: absolute;
    bottom: 11px; /* 11px */
    left: 24px;
    text-decoration: line-through;
    color: #a0a0a0; /* серый цвет для перечеркнутой цены */
}
.package .package-price { /* актуальная цена */
    font-family: 'monaco', monospace;
    font-size: 14px; /* 14px */
    font-weight: bold;
    position: absolute;
    bottom: 10px; /* 10px */
    right: 13px; /* 13px */
}

.custom-package-trigger {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Изменено: выравниваем содержимое по верху */
    align-items: flex-start; /* выравнивание по левому краю */
    font-size: 24px; /* увеличен до 24px */
    font-weight: bold;
    text-transform: lowercase; /* все строчные */
    position: relative; /* для абсолютного позиционирования внутреннего текста */
    padding: 16px; /* Возвращаем padding, чтобы текст не прилипал к краю */
}
.custom-package-trigger .custom-package-text { /* новый класс для внутреннего текста */
    font-family: 'helvetica neue condensed black', sans-serif; /* Как у ночного */
    font-size: 24px; /* Установлен размер шрифта как у "ночной" */
    font-weight: bold; /* Как у ночного */
    line-height: 1.2;
    position: static; /* Изменено: сбрасываем абсолютное позиционирование */
    text-transform: lowercase; /* все строчные */
    letter-spacing: normal; /* Сброс letter-spacing для этого элемента */
}
.custom-package-trigger .custom-package-subtext { /* Новый стиль для подтекста */
    font-family: 'monaco', monospace; /* Как у ночного времени */
    font-size: 9px; /* Как у ночного времени */
    position: static; /* Сбрасываем абсолютное позиционирование */
    text-transform: none; /* Без изменения регистра */
    margin-top: 4px; /* Небольшой отступ сверху */
}

#package-summary {
    /* Удалено: display: none; */ /* Теперь отображается */
    font-size: 14px;
    color: #000000;
    text-transform: lowercase;
    margin-top: 16px; /* Отступ сверху */
    margin-bottom: 16px; /* Отступ снизу */
}

/* выбор времени */
#time-grid {
    display: grid; /* Убедитесь, что display: grid применяется */
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    gap: 0; /* убираем промежутки */
    margin-left: -16px; /* компенсируем padding контейнера */
    margin-right: -16px; /* компенсируем padding контейнера */
    margin-bottom: 16px;
    padding: 0; /* убираем внутренние отступы */
}

.time-slot {
    font-family: 'monaco', monospace;
    padding: 12px 4px; /* минимальные вертикальные отступы */
    font-size: 18px; /* Увеличен шрифт в 1.5 раза (12px * 1.5 = 18px) */
    min-height: 60px; /* минимальная высота */
    display: flex;
    flex-direction: column; /* Отображаем элементы в столбик */
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word; /* перенос длинных текстов */
    border: none; /* удалено: обводка */
    margin: 0; /* плотное прилегание */
    aspect-ratio: 1 / 1; /* делаем квадратным */
    text-transform: none; /* убран капслок */
    position: relative; /* Для позиционирования иконки */
}

/* Стили для различных статусов слотов */
.time-slot.available {
    background-color: #FFFFFF; /* белая подложка */
    color: #000000; /* черный шрифт цифр */
    cursor: pointer;
}

.time-slot.selected {
    background-color: #000000;
    color: #ffffff;
}

.time-slot.past {
    background-color: #EFEFEF; /* подложка EFEFEF */
    color: #BFBFBF; /* шрифт BFBFBF */
    pointer-events: none; /* Некликабельный */
}

.time-slot.booked {
    background-color: #E0E0E0; /* подложка E0E0E0 */
    color: #BFBFBF; /* шрифт BFBFBF */
    pointer-events: none; /* Некликабельный */
}

.time-slot.unavailable {
    background-color: #E0E0E0; /* подложка E0E0E0 */
    color: #BFBFBF; /* шрифт BFBFBF */
    cursor: pointer; /* Кликабельный для модального окна */
}

.time-slot small {
    font-size: 18px; /* Сделан одинаковый размер шрифта с .time-slot */
    margin-top: 0; /* Удален отступ сверху */
}

/* Добавленный стиль для жирного шрифта следующего дня */
/* Теперь этот класс делает сам тег <small> жирным, если он содержит .next-day-bold span */
.time-slot small:has(.next-day-bold) {
    font-weight: bold;
}

/* Скрываем оригинальные встроенные SVG-иконки, генерируемые JavaScript */
.slot-icon {
    display: none;
}

/* Новые стили для отображения SVG-изображений как фоновых иконок через псевдоэлементы */
.time-slot.booked::before,
.time-slot.unavailable::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(4); /* Применяем запрошенное масштабирование и центрирование */
    width: 24px; /* Базовая ширина перед масштабированием */
    height: 24px; /* Базовая высота перед масштабированием */
    background-size: contain; /* Обеспечиваем, что изображение помещается */
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* Не мешаем кликам по слоту */
    z-index: 1; /* Убеждаемся, что иконка находится поверх текста, если необходимо */
}

.time-slot.booked::before {
    background-image: url('/images/booked.svg');
}

.time-slot.unavailable::before {
    background-image: url('/images/unavailable.svg');
}

/* Скрываем текст "(след. день)" */
.time-slot small .next-day-bold {
    display: none;
}


/* форма данных */
/* Общие стили для полей ввода текста и textarea */
form input[type="text"],
form textarea {
    width: 100%;
    padding: 12px;
    border: none; /* убираем обводку */
    border-radius: 0; /* убираем скругления */
    background-color: #d9d9d9;
    color: #000000;
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 16px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Внутренняя тень */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Плавный переход */
}

/* Стили при фокусе для полей ввода текста и textarea */
form input[type="text"]:focus,
form textarea:focus {
    outline: none; /* убираем стандартную обводку фокуса */
    background-color: #000000; /* черный фон при фокусе */
    color: #ffffff; /* белый текст при фокусе */
}

form input::placeholder,
form textarea::placeholder {
    color: #a0a0a0;
    text-transform: lowercase;
}

textarea {
    resize: vertical;
    min-height: 80px;
}
.text-sm {
    font-size: 14px;
    color: #000000;
    text-transform: lowercase; /* все строчные */
}

/* Новые стили для строк формы */
.form-row {
    display: flex;
    width: calc(100% + 32px); /* Растягиваем на всю ширину, компенсируя padding контейнера */
    margin-left: -16px; /* Смещаем влево */
    margin-right: -16px; /* Смещаем вправо */
    margin-bottom: 0; /* Убираем отступы между строками */
}

/* Стили для левой части (метки), теперь это div.form-label-block */
.form-row .form-label-block {
    flex: 0 0 90px; /* Фиксированная ширина для колонки с метками */
    background-color: #d9d9d9; /* Светло-серый фон */
    color: #000000;
    /* Обновляем padding, чтобы высота соответствовала .phone-field */
    padding: 21px 16px; /* 21px (верх/низ) + 14px (font-size) = 56px общая высота */
    display: flex; /* Используем flex для вертикального выравнивания текста */
    align-items: center; /* Выравниваем текст по центру вертикали */
    justify-content: center; /* Выравниваем текст по центру горизонтали */
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 14px;
    text-transform: lowercase;
    margin-bottom: 0; /* Убираем стандартный отступ метки */
    cursor: default; /* Делаем некликабельным */
    pointer-events: none; /* Полностью отключаем события указателя */
    aspect-ratio: 1 / 1; /* Делаем квадратным */
    min-height: 48px; /* Минимальная высота, чтобы текст помещался */
}

/* Корректируем стили для input и textarea, чтобы они вписывались в новый макет */
form input[type="text"],
form textarea {
    flex-grow: 1; /* Занимают оставшееся пространство */
    width: auto; /* Переопределяем 100% ширины */
    margin-bottom: 0; /* Убираем стандартный отступ */
    border-radius: 0;
    background-color: #ffffff; /* Белый фон по умолчанию для правой части */
    color: #000000; /* Черный текст по умолчанию */
    padding: 12px 16px; /* Отступы внутри поля */
    box-shadow: none; /* Убираем внутреннюю тень */
    border: none; /* Убираем обводку */
}

/* Стили при фокусе для полей ввода текста и textarea */
form input[type="text"]:focus,
form textarea:focus {
    background-color: #000000; /* Черный фон */
    color: #ffffff; /* Белый текст */
}

/* Ensure placeholder color is correct in both states */
form input::placeholder,
form textarea::placeholder {
    color: #a0a0a0; /* Цвет плейсхолдера по умолчанию */
}

form input[type="text"]:focus::placeholder,
form textarea:focus::placeholder {
    color: #ffffff; /* Белый плейсхолдер при фокусе */
}

/* Новые стили для поля телефона */
.phone-field {
  display: flex;
  align-items: center;
  flex-grow: 1; /* Позволяем ему расти */
  width: auto; /* Автоматическая ширина */
  margin-bottom: 0; /* Убираем стандартный отступ */
  border-radius: 0;
  background-color: #000000; /* Черный фон, как в примере */
  color: #ffffff; /* Белый текст, как в примере */
  padding: 16px; /* Отступы, как в примере */
  box-shadow: none;
  border: none;
}

.phone-mask {
  font-family: 'helvetica neue', system-ui, sans-serif; /* Используем тот же шрифт */
  font-size: 24px; /* Размер шрифта, как в примере */
  color: inherit; /* Наследуем цвет от родительского контейнера */
  white-space: nowrap;
  margin-right: 8px; /* Отступ, как в примере */
  transition: color 0.2s ease-in-out; /* Сохраняем переход, если он нужен для других состояний */
}

.phone-field input {
  border: none;
  outline: none;
  background-color: transparent; /* Прозрачный фон, как в примере */
  color: white; /* Белый цвет текста, как в примере */
  font-family: 'helvetica neue', system-ui, sans-serif; /* Используем тот же шрифт */
  font-size: 24px; /* Размер шрифта, как в примере */
  width: 60px; /* Под 4 цифры */
  letter-spacing: 2px; /* Межбуквенный интервал, как в примере */
  caret-color: white; /* Цвет курсора, как в примере */
  padding: 0; /* Нет внутренних отступов, их обрабатывает контейнер */
  transition: color 0.2s ease-in-out; /* Сохраняем переход */
}

.phone-field input::placeholder {
  color: #666; /* Цвет плейсхолдера, как в примере */
  text-transform: lowercase; /* Сохраняем строчные буквы для плейсхолдера */
}


/* подтверждение */
/* Стили для заголовка и подзаголовка подтверждения */
.step-title-large {
    font-family: 'helvetica neue condensed black', sans-serif;
    font-weight: bold;
    font-size: 28px; /* Крупный размер */
    text-align: left;
    margin-bottom: 8px; /* Уменьшенный отступ */
    color: #000000;
    text-transform: lowercase;
    letter-spacing: -1px;
}

.text-center-small {
    font-size: 14px; /* Мелкий размер */
    text-align: left;
    margin-bottom: 16px; /* Отступ */
    color: #000000;
    text-transform: lowercase;
}

/* Стили для основного контента подтверждения (2/3 и 1/3) */
.confirmation-main-content {
    display: flex;
    gap: 0; /* Убираем промежутки */
    margin-bottom: 16px;
    margin-left: -16px; /* Вытягиваем на всю ширину */
    margin-right: -16px;
}

.confirmation-details-left {
    flex: 2; /* Занимает 2/3 ширины */
    background-color: #d9d9d9; /* Серый фон */
    color: #000000;
    padding: 16px;
    border-radius: 0;
    font-family: 'monaco', monospace; /* Шрифт Monaco */
    font-size: 12px;
    line-height: 1; /* Уменьшенный интервал между строк */
    text-transform: lowercase;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.confirmation-details-left p {
    margin-bottom: 4px; /* Уменьшенный отступ между параграфами */
    margin-top: 0;
}
.confirmation-details-left p:last-child {
    margin-bottom: 0;
}

.confirmation-details-left strong {
    color: #000000;
}

.confirmation-time-right {
    flex: 1; /* Занимает 1/3 ширины */
    background-color: #000000; /* Черный фон */
    color: #ffffff;
    padding: 16px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'monaco', monospace;
    font-size: 36px; /* Крупный шрифт */
    font-weight: bold;
    text-align: center;
    text-transform: none; /* Без изменения регистра */
    aspect-ratio: 1 / 1; /* Делаем квадратным */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    min-width: 120px; /* Фиксируем минимальную ширину */
    min-height: 120px; /* Фиксируем минимальную высоту */
    overflow: hidden; /* Обрезаем содержимое, если оно выходит за рамки */
}

.confirmation-time-right span { /* Применяем к span, чтобы оба были одного размера */
    font-size: 36px; /* Крупный шрифт */
    display: block; /* Каждый span на новой строке */
    line-height: 1; /* Уменьшенный интервал */
    margin-top: 4px; /* Отступ сверху */
    text-transform: lowercase; /* Все строчные */
    white-space: nowrap; /* Предотвращает перенос строки */
    overflow: hidden; /* Обрезаем текст, если он слишком длинный */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

.confirmation-time-right small { /* Этот стиль теперь не будет использоваться, но оставляем для безопасности */
    font-size: 12px; 
    display: block;
    line-height: 1;
    margin-top: 4px;
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rules-message {
    font-size: 14px;
    text-align: left;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #000000;
    text-transform: lowercase;
}

/* Стили для сетки кнопок внизу */
.confirmation-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 0; /* Убираем промежутки */
    margin-left: -16px; /* Вытягиваем на всю ширину */
    margin-right: -16px;
    margin-bottom: 16px;
}

.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: #d9d9d9; /* Серый фон по умолчанию */
    color: #000000; /* Черный текст по умолчанию */
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-transform: lowercase;
    aspect-ratio: 1 / 1; /* Делаем квадратным */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.action-button img {
    width: 48px; /* Размер иконки */
    height: 48px;
    margin-bottom: 8px;
    filter: invert(0); /* Черная иконка на светлом фоне */
    transition: filter 0.2s ease;
}

.action-button.active {
    background-color: #000000; /* Черный фон для активной кнопки */
    color: #ffffff; /* Белый текст для активной кнопки */
}

.message-box {
    background-color: #d9d9d9;
    color: #000000;
    padding: 12px;
    border-radius: 0;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    text-transform: lowercase; /* все строчные */
    border: none; /* удалено: обводка */
}
.message-box.info {
    background-color: #a0a0a0; /* серый для информационных сообщений */
    color: #ffffff;
}

/* модальные окна */
.modal {
    display: none; /* скрыто по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background-color: #d9d9d9;
    color: #000000;
    padding: 16px;
    border-radius: 0;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border: none; /* удалено: обводка */
}
.modal-content h3 {
    font-family: 'helvetica neue condensed black', sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 16px;
    text-transform: lowercase; /* все строчные */
}
.modal-content p {
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 16px;
    margin-bottom: 16px;
    text-transform: lowercase; /* все строчные */
}
.modal-buttons .button {
    margin: 0 4px;
}

/* Стили для Bottom Sheet Modal */
.bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Pushes content to the bottom */
    justify-content: flex-end; /* Pushes content to the bottom */
    z-index: 1000;
    visibility: hidden; /* Скрыто по умолчанию */
}

.bottom-sheet.visible {
    visibility: visible;
}

.bottom-sheet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.bottom-sheet.visible .bottom-sheet-overlay {
    opacity: 1;
}

.bottom-sheet-content {
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 16px;
    width: 100%;
    max-width: 480px; /* Limit width to container max-width */
    margin: 0 auto; /* Center horizontally */
    max-height: 85vh; /* Occupy 85% of screen height */
    transform: translateY(100%); /* Скрыто за пределами экрана */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto; /* Позволяет прокручивать содержимое, если оно слишком большое */
}

.bottom-sheet.visible .bottom-sheet-content {
    transform: translateY(0); /* Выезжает на экран */
}

.bottom-sheet-handle {
    width: 40px;
    height: 5px;
    background-color: #cccccc;
    border-radius: 2.5px;
    margin: 0 auto 16px;
    cursor: grab;
}

.bottom-sheet-title {
    font-family: 'helvetica neue condensed black', sans-serif;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin-bottom: 16px;
    color: #000000;
    text-transform: lowercase;
}

/* Стили для карусели внутри модального окна */
#custom-package-carousel-container-modal {
    width: calc(100% + 32px); /* компенсируем padding контейнера */
    margin-left: -16px;
    margin-right: -16px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-bottom: 16px;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none;  /* ie and edge */
}

#custom-package-carousel-container-modal::-webkit-scrollbar {
    display: none; /* chrome, safari, opera */
}

#custom-package-carousel-modal {
    display: flex;
    gap: 0;
    padding-left: 16px; /* добавляем padding для первого элемента */
    padding-right: 16px; /* добавляем padding для последнего элемента */
}

#custom-package-carousel-modal .package {
    flex: 0 0 auto;
    width: calc(33.333% - 0px); /* 3 элемента в ряд */
    height: calc(33.333vw - 0px); /* делаем квадратным относительно ширины viewport */
    max-width: 160px; /* максимальная ширина для больших экранов */
    max-height: 160px; /* максимальная высота для больших экранов */
    scroll-snap-align: start;
}

/* Убрано: #custom-package-summary-modal */

#select-custom-package-btn {
    margin-top: 16px; /* Добавлен отступ сверху для кнопки */
    margin-bottom: 16px; /* Добавлен отступ снизу для кнопки */
}

/* Стили для контента правил в модальном окне */
.rules-content {
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: left;
    margin-bottom: 16px;
    padding: 0 8px; /* Небольшой горизонтальный отступ */
}

.rules-content p {
    margin-bottom: 8px;
    line-height: 1.4;
    text-transform: lowercase;
}

.rules-content strong {
    font-weight: bold;
    color: #000000;
}

#close-rules-btn {
    margin-bottom: 16px; /* Добавлен отступ снизу для кнопки */
}

/* Стили для модального окна "Недоступно" */
.unavailable-content {
    font-family: 'helvetica neue', system-ui, sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: center;
    margin-bottom: 16px;
    padding: 0 8px;
}

.unavailable-content p {
    margin-bottom: 8px;
    line-height: 1.4;
    text-transform: lowercase;
}

/* адаптация для мобильных устройств */
@media (max-width: 480px) {
    .header-text h1 {
        font-size: 20px;
        letter-spacing: -1px;
    }
    .simulator-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 столбца */
    }
    .grid-item {
        font-size: 14px;
        padding: 12px;
        min-width: unset;
        min-height: unset;
    }
    .grid-item .simulator-number {
        font-size: 48px; /* адаптивный размер для цифр симулятора */
        top: 24px; /* адаптивный отступ */
        left: 24px; /* адаптивный отступ */
    }
    .grid-item small {
        font-size: 14px;
        left: 24px; /* адаптивное выравнивание по левому краю */
    }
    #package-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 столбца */
    }
    .package { /* адаптация для пакета */
        font-size: 14px;
        padding: 12px;
        min-width: unset;
        min-height: unset;
    }
    .package .package-number {
        font-size: 40px; /* адаптивный размер для цифр пакета */
        top: 16px; /* Адаптивный отступ */
        left: 16px; /* Адаптивный отступ */
    }
    .package .package-unit {
        font-size: 10.24px;
        top: 36px;
        left: calc(16px + 32px + 10px); /* отступ от левого края + ширина цифры + 10px */
    }
    .package .package-night-text {
        font-size: 24px; /* Адаптивный размер */
        top: 26px;
        left: 20px;
    }
    .package .package-night-time {
        font-size: 9px; /* Адаптивный размер */
        top: 51px;
        left: 27px;
    }
    .package .package-original-price {
        font-size: 10.24px;
        bottom: 11px;
        left: 24px;
    }
    .package .package-price {
        font-size: 14px;
        bottom: 10px;
        right: 13px;
    }

    #time-grid {
        grid-template-columns: repeat(4, 1fr); /* сохраняем 4 колонки */
    }
    .time-slot {
        font-size: 14px; /* еще меньше шрифт */
        padding: 8px 2px; /* меньше отступы */
    }
    .time-slot small {
        font-size: 14px; /* еще меньше шрифт */
    }
    .button {
        font-size: 16px;
        padding: 14px;
    }
    form input, form textarea {
        font-size: 14px;
        padding: 10px;
    }
    .date-carousel .date-item {
        width: calc(25% - 0px); /* 4 элемента в ряд */
        height: calc(25vw - 0px);
    }
    .date-carousel .date-item small {
        font-size: 10px; /* адаптивный размер для месяцев */
    }
    .action-button img {
        width: 36px; /* Меньше иконки на мобильных */
        height: 36px;
        filter: invert(1);
    }

    #custom-package-carousel-modal .package {
        width: calc(33.333% - 0px); /* 3 элемента в ряд */
        height: calc(33.333vw - 0px);
    }
}
@media (max-width: 380px) {
    .simulator-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 столбца */
    }
    .grid-item {
        min-width: unset;
        min-height: unset;
    }
    #package-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 столбца на очень маленьких экранах */
    }
    .package .package-number {
        font-size: 32px; /* еще меньше на очень маленьких экранах */
        top: 16px; /* Адаптивный отступ */
        left: 16px; /* Адаптивный отступ */
    }
    .package .package-unit {
        font-size: 8.19px; /* 10.24px * 0.8 = 8.192px */
        top: 30px;
        left: calc(16px + 32px + 10px);
    }
    .package .package-night-text {
        font-size: 12.8px; /* адаптивный размер для "ночь" */
        top: 20px;
        left: 20px;
    }
    .package .package-night-time {
        font-size: 6.14px; /* адаптивный размер для времени ночи */
        top: 34px;
        left: 20px;
    }
    .package .package-original-price {
        font-size: 8.19px;
        bottom: 6px;
        left: 20px;
    }
    .package .package-price {
        font-size: 12.28px;
        bottom: 6px;
        right: 20px;
    }
    #time-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на очень маленьких экранах */
    }
    .time-slot {
        font-size: 12px; /* минимальный размер шрифта */
        min-height: 50px; /* меньшая высота */
    }
    .time-slot small {
        font-size: 12px; /* минимальный размер шрифта */
    }
    .date-carousel .date-item {
        width: calc(33.333% - 0px); /* 3 элемента в ряд на очень маленьких экранах */
        height: calc(33.333vw - 0px);
    }

    #custom-package-carousel-modal .package {
        width: calc(33.333% - 0px); /* 3 элемента в ряд */
        height: calc(33.333vw - 0px);
    }
}