/* AutoCheckView - booking.css (Полная версия с комментариями) */

/* ============================================================================
   1. ЦВЕТОВАЯ ПАЛИТРА И ПЕРЕМЕННЫЕ
   ============================================================================ */
:root {
  /* Основные цвета бренда */
  --primary-color: #007bff;   /* Синий - основной акцент */
  --secondary-color: #28a745; /* Зеленый - успех, подтверждение */
  --accent-color: #ffc107;    /* Желтый - предупреждения, внимание */
  --dark-color: #212529;      /* Темный - заголовки, текст */
  --light-color: #f8f9fa;     /* Светлый - фон */
  
  /* Дополнительные цвета */
  --danger-color: #dc3545;    /* Красный - ошибки, опасность */
  --warning-color: #ffc107;   /* Желтый - предупреждения */
  --info-color: #17a2b8;      /* Голубой - информация */
  --success-color: #28a745;   /* Зеленый - успех */
  
  /* Серые оттенки */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  
  /* Категорийный цвет - инжектится из booking.php */
  /* --category-color: #007bff; */
  
  /* Тени */
  --shadow-sm: 0 2px 4px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,.15);
  
  /* Скругления */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 50px;
  
  /* Анимации */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ============================================================================
   2. ОСНОВНЫЕ СТИЛИ ТЕЛА
   ============================================================================ */
body {
  font-family: 'Poppins', sans-serif;  /* Основной шрифт для текста */
  background: var(--gray-100);         /* Светлый фон всей страницы */
  padding-top: 20px;                   /* Отступ сверху */
  line-height: 1.6;                    /* Межстрочный интервал */
  color: var(--gray-800);              /* Цвет текста по умолчанию */
}

/* Заголовки - отдельный шрифт для акцента */
h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif;  /* Жирный акцентный шрифт */
  font-weight: 700;                       /* Полужирное начертание */
  color: var(--dark-color);               /* Темный цвет для заголовков */
  margin-bottom: 1rem;                    /* Отступ снизу */
}

/* ============================================================================
   3. ХЕДЕР (ШАПКА) БРОНИРОВАНИЯ
   ============================================================================ */
.booking-header {
  text-align: center;                   /* Центрирование контента */
  margin-bottom: 30px;                  /* Отступ снизу */
}

.booking-header h1 {
  color: var(--dark-color);             /* Темный цвет заголовка */
  margin-bottom: 10px;                  /* Отступ под заголовком */
  font-size: 2rem;                      /* Крупный размер шрифта */
}

.booking-header p {
  color: var(--gray-600);               /* Серый цвет подзаголовка */
  font-size: 1.1rem;                    /* Увеличенный размер шрифта */
  max-width: 600px;                     /* Ограничение ширины */
  margin: 0 auto;                       /* Центрирование */
}

/* ============================================================================
   4. СТАТУС ПОЛЬЗОВАТЕЛЯ (LOGGED IN / GUEST)
   ============================================================================ */
.user-status {
  display: inline-flex;                 /* Гибкое inline-отображение */
  align-items: center;                  /* Вертикальное выравнивание */
  padding: 8px 15px;                    /* Внутренние отступы */
  border-radius: var(--radius-pill);    /* Скругленные углы */
  font-size: .9rem;                     /* Уменьшенный шрифт */
  margin-top: 10px;                     /* Отступ сверху */
  transition: var(--transition-base);   /* Плавный переход */
}

/* Стиль для авторизованного пользователя */
.user-status.logged-in {
  background: rgba(40, 167, 69, .1);   /* Светло-зеленый фон */
  color: var(--success-color);         /* Зеленый текст */
  border: 1px solid rgba(40, 167, 69, .2); /* Зеленая рамка */
}

/* Стиль для гостя */
.user-status.guest {
  background: rgba(0, 123, 255, .1);   /* Светло-синий фон */
  color: var(--primary-color);         /* Синий текст */
  border: 1px solid rgba(0, 123, 255, .2); /* Синяя рамка */
}

/* ============================================================================
   5. ВЫБОР ПАКЕТА (CATEGORY SELECTOR)
   ============================================================================ */
.category-selector {
  background: #fff;                     /* Белый фон */
  border-radius: var(--radius-lg);      /* Скругленные углы */
  padding: 20px;                        /* Внутренние отступы */
  margin-bottom: 30px;                  /* Отступ снизу */
  box-shadow: var(--shadow-lg);         /* Тень для "поднятия" */
  border: 2px solid #eaeaea;            /* Светлая рамка */
  transition: var(--transition-base);   /* Плавные переходы */
}

/* Контейнер текущего выбранного пакета */
.category-current {
  display: flex;                        /* Flex-контейнер */
  align-items: center;                  /* Вертикальное выравнивание */
  gap: 15px;                            /* Расстояние между элементами */
  margin-bottom: 15px;                  /* Отступ снизу */
}

/* Иконка пакета */
.category-icon {
  width: 60px;                          /* Фиксированная ширина */
  height: 60px;                         /* Фиксированная высота */
  background: var(--category-color);    /* Цвет из инжекта PHP */
  border-radius: 50%;                   /* Круглая форма */
  display: flex;                        /* Flex для центрирования */
  align-items: center;                  /* Вертикальное центрирование */
  justify-content: center;              /* Горизонтальное центрирование */
  color: #fff;                          /* Белый цвет иконки */
  font-size: 1.5rem;                    /* Размер иконки */
}

/* Информация о пакете */
.category-info h4 {
  margin: 0;                            /* Убираем отступы */
  color: var(--dark-color);             /* Темный цвет названия */
}

.category-examples {
  color: var(--gray-600);               /* Серый цвет описания */
  font-size: .9rem;                     /* Уменьшенный шрифт */
  margin: 5px 0 0;                      /* Отступы */
}

/* Цена пакета */
.category-price {
  background: var(--secondary-color);   /* Зеленый фон */
  color: #fff;                          /* Белый текст */
  padding: 6px 20px;                    /* Внутренние отступы */
  border-radius: var(--radius-pill);    /* Скругленные углы */
  font-weight: 600;                     /* Жирный шрифт */
  margin-left: auto;                    /* Выравнивание вправо */
}

/* Кнопка смены пакета */
.change-category-btn {
  background: var(--gray-100);          /* Светлый фон */
  border: 2px solid var(--gray-300);    /* Серая рамка */
  color: var(--primary-color);          /* Синий текст */
  padding: 10px 20px;                   /* Внутренние отступы */
  border-radius: var(--radius-md);      /* Скругленные углы */
  font-weight: 600;                     /* Жирный шрифт */
  width: 100%;                          /* Полная ширина */
  transition: var(--transition-base);   /* Плавный переход */
  cursor: pointer;                      /* Курсор указатель */
}

.change-category-btn:hover {
  background: var(--gray-200);          /* Темнее при наведении */
  border-color: var(--primary-color);   /* Синяя рамка при наведении */
}

/* ============================================================================
   6. КОНТЕЙНЕР ФОРМЫ БРОНИРОВАНИЯ
   ============================================================================ */
.booking-form-container {
  background: #fff;                     /* Белый фон формы */
  border-radius: var(--radius-xl);      /* Большие скругления */
  box-shadow: var(--shadow-xl);         /* Выраженная тень */
  padding: 40px;                        /* Внутренние отступы */
  margin-bottom: 40px;                  /* Отступ снизу */
}

/* ============================================================================
   7. СЕКЦИИ ФОРМЫ
   ============================================================================ */
.form-section {
  margin-bottom: 30px;                  /* Отступ между секциями */
  padding-bottom: 25px;                 /* Отступ снизу внутри секции */
  border-bottom: 2px solid var(--gray-200); /* Разделительная линия */
}

.form-section:last-child {
  border-bottom: none;                  /* Убираем линию у последней секции */
  margin-bottom: 0;                     /* Убираем отступ */
  padding-bottom: 0;                    /* Убираем внутренний отступ */
}

/* Заголовок секции */
.section-title {
  font-size: 1.3rem;                    /* Размер шрифта заголовка */
  color: var(--primary-color);          /* Синий цвет */
  margin-bottom: 25px;                  /* Отступ снизу */
  display: flex;                        /* Flex для иконки и текста */
  align-items: center;                  /* Вертикальное выравнивание */
  gap: 10px;                            /* Расстояние между иконкой и текстом */
}

.section-title i {
  color: var(--category-color);         /* Цвет иконки как у категории */
}

/* ============================================================================
   8. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ ФОРМЫ
   ============================================================================ */
/* Метки полей */
.form-label {
  font-weight: 600;                     /* Жирный текст */
  color: var(--gray-700);               /* Темно-серый цвет */
  margin-bottom: 8px;                   /* Отступ снизу */
  display: block;                       /* Блочное отображение */
}

/* Поля ввода и выпадающие списки */
.form-control, .form-select {
  padding: 12px 15px;                   /* Внутренние отступы */
  border: 2px solid var(--gray-300);    /* Серая рамка */
  border-radius: var(--radius-md);      /* Скругленные углы */
  font-size: 1rem;                      /* Размер шрифта */
  width: 100%;                          /* Полная ширина */
  transition: var(--transition-base);   /* Плавный переход */
}

/* Состояние фокуса */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);   /* Синяя рамка при фокусе */
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, .15); /* Синее свечение */
  outline: none;                        /* Убираем стандартный outline */
}

/* Состояния валидации */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--success-color);   /* Зеленая рамка для валидных */
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger-color);    /* Красная рамка для невалидных */
}

/* Сообщения валидации */
.invalid-feedback {
  display: none;                        /* Скрыто по умолчанию */
  color: var(--danger-color);           /* Красный текст */
  font-size: .875rem;                   /* Уменьшенный шрифт */
  margin-top: 5px;                      /* Отступ сверху */
}

.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
  display: block;                       /* Показываем при ошибке */
}

/* ============================================================================
   9. ОПЦИОНАЛЬНЫЕ УСЛУГИ (ADDONS)
   ============================================================================ */
/* Сетка карточек доп. услуг */
.addons-grid {
  display: grid;                         /* CSS Grid для карточек */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Адаптивные колонки */
  gap: 15px;                             /* Расстояние между карточками */
  margin-top: 15px;                      /* Отступ сверху */
}

/* Карточка доп. услуги */
.addon-card {
  background: #fff;                      /* Белый фон карточки */
  border: 2px solid #eaeaea;             /* Светлая рамка */
  border-radius: var(--radius-md);       /* Скругленные углы */
  padding: 14px;                         /* Внутренние отступы */
  transition: var(--transition-base);    /* Плавный переход */
  position: relative;                    /* Для позиционирования элементов */
  text-align: left;                      /* Выравнивание текста слева */
  user-select: none;                     /* Запрет выделения текста */
  
  /* Flexbox для внутренней структуры */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Эффект при наведении */
.addon-card:hover {
  transform: translateY(-3px);           /* Поднимаем карточку */
  box-shadow: var(--shadow-md);          /* Добавляем тень */
  border-color: var(--primary-color);    /* Синяя рамка при наведении */
}

/* Выбранная карточка */
.addon-card.selected {
  border-color: var(--primary-color);    /* Синяя рамка */
  background: rgba(0, 123, 255, .05);    /* Светло-синий фон */
}

/* Скрытый чекбокс (source of truth) */
.addon-card .addon-input {
  position: absolute;                    /* Абсолютное позиционирование */
  opacity: 0;                           /* Полная прозрачность */
  width: 1px;                           /* Минимальные размеры */
  height: 1px;                          /* Минимальные размеры */
  z-index: -1;                          /* Под всем контентом */
}

/* Кликабельная метка карточки */
.addon-card .addon-label {
  display: flex;                         /* Flex для содержимого */
  gap: 12px;                             /* Расстояние между элементами */
  cursor: pointer;                       /* Курсор указатель */
  color: inherit;                        /* Наследование цвета текста */
  text-decoration: none;                 /* Без подчеркивания */
  margin: 0;                             /* Без отступов */
  pointer-events: auto;                  /* Кликабельный элемент */
}

/* Иконка чекбокса в правом верхнем углу */
.addon-checkbox {
  position: absolute;                    /* Абсолютное позиционирование */
  top: 10px;                             /* Отступ сверху */
  right: 10px;                           /* Отступ справа */
  width: 20px;                           /* Ширина */
  height: 20px;                          /* Высота */
  border: 2px solid #ddd;                /* Серая рамка */
  border-radius: 4px;                    /* Скругленные углы */
  display: flex;                         /* Flex для центрирования */
  align-items: center;                   /* Вертикальное центрирование */
  justify-content: center;               /* Горизонтальное центрирование */
  transition: var(--transition-base);    /* Плавный переход */
}

/* Состояние выбранного чекбокса */
.addon-card.selected .addon-checkbox {
  background: var(--primary-color);      /* Синий фон */
  border-color: var(--primary-color);    /* Синяя рамка */
}

/* Иконка галочки внутри чекбокса */
.addon-checkbox i {
  color: #fff;                           /* Белая иконка */
  font-size: .7rem;                      /* Размер иконки */
  opacity: 0;                            /* Скрыта по умолчанию */
  transition: var(--transition-base);    /* Плавное появление */
}

.addon-card.selected .addon-checkbox i {
  opacity: 1;                            /* Показываем при выборе */
}

/* Основной контент карточки */
.addon-main {
  width: 100%;                           /* Полная ширина */
  padding-right: 28px;                   /* Отступ справа для чекбокса */
}

.addon-name {
  font-weight: 600;                      /* Жирный текст названия */
  margin-bottom: 4px;                    /* Отступ снизу */
  font-size: .95rem;                     /* Размер шрифта */
  color: var(--gray-800);                /* Цвет текста */
}

.addon-subtitle {
  margin-top: 2px;                       /* Небольшой отступ сверху */
  font-size: 12px;                       /* Маленький шрифт */
  color: var(--gray-600);                /* Серый текст */
}

.addon-price {
  margin-top: 6px;                       /* Отступ сверху */
  color: var(--secondary-color);         /* Зеленый цвет цены */
  font-weight: 700;                      /* Жирный шрифт */
  font-size: .9rem;                      /* Размер шрифта */
}

/* Нижняя строка с кнопками */
.addon-actions {
  display: flex;                         /* Flex для выравнивания */
  justify-content: flex-end;             /* Выравнивание вправо */
  align-items: center;                   /* Вертикальное выравнивание */
  gap: 10px;                             /* Расстояние между элементами */
}

/* Кнопка "Info" */
.addon-info-btn {
  border: 0;                             /* Без рамки */
  background: transparent;               /* Прозрачный фон */
  color: var(--primary-color);           /* Синий текст */
  font-weight: 700;                      /* Жирный шрифт */
  font-size: 13px;                       /* Размер шрифта */
  padding: 0;                            /* Без внутренних отступов */
  cursor: pointer;                       /* Курсор указатель */
  text-decoration: underline;            /* Подчеркнутый текст */
  transition: var(--transition-fast);    /* Быстрый переход */
}

.addon-info-btn:hover {
  opacity: 0.9;                          /* Небольшое затемнение */
}

.addon-info-btn:focus {
  outline: none;                         /* Убираем стандартный outline */
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .25); /* Синее свечение */
  border-radius: 6px;                    /* Скругленные углы */
}

/* Раскрывающийся текст с деталями */
.addon-details {
  margin-top: 0;                         /* Без отступа сверху */
  padding: 10px 12px;                    /* Внутренние отступы */
  border-radius: var(--radius-md);       /* Скругленные углы */
  background: var(--gray-100);           /* Светло-серый фон */
  border: 1px solid var(--gray-300);     /* Серая рамка */
  font-size: 13px;                       /* Уменьшенный шрифт */
  color: var(--gray-700);                /* Цвет текста */
  line-height: 1.35;                     /* Межстрочный интервал */
  animation: fadeIn 0.3s ease-in;        /* Плавное появление */
}

/* ============================================================================
   10. СУММАРНЫЙ БЛОК ЦЕН (PRICE SUMMARY)
   ============================================================================ */
/* Блок с итоговой стоимостью */
.price-summary {
  background: var(--gray-100);           /* Светлый фон */
  border-radius: var(--radius-lg);       /* Скругленные углы */
  padding: 25px;                         /* Внутренние отступы */
  margin-top: 20px;                      /* Отступ сверху */
  border: 2px solid var(--gray-300);     /* Серая рамка */
}

.price-summary h4 {
  color: var(--primary-color);           /* Синий цвет заголовка */
  margin-bottom: 20px;                   /* Отступ снизу */
  font-size: 1.2rem;                     /* Размер шрифта */
}

/* Строки с ценами */
.price-row {
  display: flex;                         /* Flex для выравнивания */
  justify-content: space-between;        /* Распределение по краям */
  padding: 8px 0;                        /* Вертикальные отступы */
  border-bottom: 1px solid var(--gray-300); /* Разделительная линия */
}

.price-row:last-child {
  border-bottom: none;                   /* Убираем линию у последней */
}

.price-label {
  color: var(--gray-600);                /* Серый текст метки */
  font-size: 0.95rem;                    /* Размер шрифта */
}

.price-value {
  font-weight: 600;                      /* Жирный шрифт значения */
  color: var(--gray-800);                /* Темный текст */
}

/* Итоговая строка */
.price-total {
  font-weight: 700;                      /* Очень жирный шрифт */
  font-size: 1.1rem;                     /* Увеличенный размер */
  color: var(--success-color);           /* Зеленый цвет итога */
}

/* ============================================================================
   11. КНОПКИ ФОРМЫ
   ============================================================================ */
/* Основная кнопка отправки */
.btn-primary, .btn-success {
  padding: 12px 30px;                    /* Внутренние отступы */
  border-radius: var(--radius-md);       /* Скругленные углы */
  font-weight: 600;                      /* Жирный шрифт */
  transition: var(--transition-base);    /* Плавный переход */
  border: none;                          /* Без рамки */
  cursor: pointer;                       /* Курсор указатель */
  display: inline-flex;                  /* Flex для иконки и текста */
  align-items: center;                   /* Вертикальное выравнивание */
  gap: 8px;                              /* Расстояние между иконкой и текстом */
}

.btn-primary {
  background: var(--primary-color);      /* Синий фон */
  color: #fff;                           /* Белый текст */
}

.btn-success {
  background: var(--success-color);      /* Зеленый фон */
  color: #fff;                           /* Белый текст */
}

.btn-primary:hover {
  background: #0056b3;                   /* Темно-синий при наведении */
  transform: translateY(-2px);           /* Легкий подъем */
  box-shadow: var(--shadow-md);          /* Тень при наведении */
}

.btn-success:hover {
  background: #218838;                   /* Темно-зеленый при наведении */
  transform: translateY(-2px);           /* Легкий подъем */
  box-shadow: var(--shadow-md);          /* Тень при наведении */
}

/* Вторичные кнопки */
.btn-outline-secondary {
  padding: 12px 30px;                    /* Такие же отступы */
  border-radius: var(--radius-md);       /* Такие же скругления */
  border: 2px solid var(--gray-400);     /* Серая рамка */
  background: transparent;               /* Прозрачный фон */
  color: var(--gray-700);                /* Серый текст */
  font-weight: 600;                      /* Жирный шрифт */
  transition: var(--transition-base);    /* Плавный переход */
}

.btn-outline-secondary:hover {
  background: var(--gray-200);           /* Светло-серый фон при наведении */
  border-color: var(--gray-600);         /* Темно-серая рамка */
  color: var(--gray-900);                /* Темный текст */
}

/* ============================================================================
   12. ДИСПЛЕЙ РАССТОЯНИЯ
   ============================================================================ */
.distance-display {
  margin-top: 15px;                      /* Отступ сверху */
  padding: 15px;                         /* Внутренние отступы */
  background: var(--gray-100);           /* Светлый фон */
  border-radius: var(--radius-md);       /* Скругленные углы */
  border: 2px solid var(--gray-300);     /* Серая рамка */
}

.distance-value {
  font-weight: 700;                      /* Жирный шрифт */
  color: var(--primary-color);           /* Синий цвет */
  font-size: 1.1rem;                     /* Увеличенный размер */
}

.distance-loading {
  color: var(--info-color);              /* Голубой цвет загрузки */
  font-style: italic;                    /* Курсивный текст */
}

.distance-error {
  color: var(--danger-color);            /* Красный цвет ошибки */
  font-weight: 600;                      /* Жирный шрифт */
}

/* ============================================================================
   13. ПРЕДУПРЕЖДЕНИЯ И СООБЩЕНИЯ
   ============================================================================ */
/* Базовый стиль для всех alert'ов */
.alert {
  padding: 15px;                         /* Внутренние отступы */
  border-radius: var(--radius-md);       /* Скругленные углы */
  margin-bottom: 20px;                   /* Отступ снизу */
  border: 1px solid transparent;         /* Прозрачная рамка */
}

.alert-warning {
  background: rgba(255, 193, 7, .1);     /* Светло-желтый фон */
  border-color: rgba(255, 193, 7, .2);   /* Желтая рамка */
  color: #856404;                        /* Темно-желтый текст */
}

.alert-danger {
  background: rgba(220, 53, 69, .1);     /* Светло-красный фон */
  border-color: rgba(220, 53, 69, .2);   /* Красная рамка */
  color: #721c24;                        /* Темно-красный текст */
}

.alert-success {
  background: rgba(40, 167, 69, .1);     /* Светло-зеленый фон */
  border-color: rgba(40, 167, 69, .2);   /* Зеленая рамка */
  color: #155724;                        /* Темно-зеленый текст */
}

.alert-info {
  background: rgba(23, 162, 184, .1);    /* Светло-голубой фон */
  border-color: rgba(23, 162, 184, .2);  /* Голубая рамка */
  color: #0c5460;                        /* Темно-голубой текст */
}

/* Предупреждение о 26 часах */
#dateWarning {
  animation: fadeIn 0.3s ease-in;        /* Плавное появление */
  margin-top: 8px;                       /* Отступ сверху */
  padding: 10px 15px;                    /* Внутренние отступы */
  border-radius: var(--radius-md);       /* Скругленные углы */
}

/* Мета-информация о временных слотах */
#timeSlotMeta {
  color: var(--gray-600);                /* Серый текст */
  font-size: 0.85em;                     /* Уменьшенный шрифт */
  padding: 3px 0;                        /* Вертикальные отступы */
  line-height: 1.4;                      /* Межстрочный интервал */
}

/* ============================================================================
   14. АНИМАЦИИ
   ============================================================================ */
@keyframes fadeIn {
  from {
    opacity: 0;                          /* Начало: полностью прозрачно */
    transform: translateY(-5px);         /* Сдвинуто вверх на 5px */
  }
  to {
    opacity: 1;                          /* Конец: полностью непрозрачно */
    transform: translateY(0);            /* Возврат на место */
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);  /* Начало свечения */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); /* Расширение свечения */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);    /* Исчезновение */
  }
}

/* Анимация загрузки */
.spinner {
  animation: spin 1s linear infinite;    /* Бесконечное вращение */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);             /* Начальное положение */
  }
  100% {
    transform: rotate(360deg);           /* Полный оборот */
  }
}

/* ============================================================================
   15. АДАПТИВНОСТЬ (RESPONSIVE)
   ============================================================================ */
@media (max-width: 768px) {
  /* На мобильных устройствах */
  
  .booking-form-container {
    padding: 25px;                       /* Уменьшаем отступы формы */
  }
  
  .category-current {
    flex-direction: column;              /* Вертикальное расположение */
    align-items: flex-start;             /* Выравнивание по левому краю */
    gap: 10px;                           /* Уменьшаем расстояние */
  }
  
  .category-price {
    margin-left: 0;                      /* Сбрасываем выравнивание */
    align-self: flex-start;              /* Выравнивание по левому краю */
  }
  
  .addons-grid {
    grid-template-columns: 1fr;          /* Одна колонка на мобильных */
  }
  
  .section-title {
    font-size: 1.1rem;                   /* Уменьшаем заголовки */
  }
  
  .btn-primary, .btn-success, .btn-outline-secondary {
    width: 100%;                         /* Полная ширина кнопок */
    justify-content: center;             /* Центрирование содержимого */
    margin-bottom: 10px;                 /* Отступ между кнопками */
  }
}

@media (max-width: 576px) {
  /* На очень маленьких экранах */
  
  .booking-header h1 {
    font-size: 1.5rem;                   /* Еще меньше заголовок */
  }
  
  .booking-header p {
    font-size: 1rem;                     /* Стандартный размер текста */
  }
  
  .category-icon {
    width: 50px;                         /* Уменьшаем иконку */
    height: 50px;                        /* Уменьшаем иконку */
    font-size: 1.2rem;                   /* Уменьшаем иконку */
  }
}

/* ============================================================================
   16. УТИЛИТЫ (UTILITY CLASSES)
   ============================================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.rounded { border-radius: var(--radius-md); }
.rounded-circle { border-radius: 50%; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ============================================================================
   17. КАСТОМНЫЕ СТИЛИ ДЛЯ КАЛЕНДАРЯ
   ============================================================================ */
/* Стили для Flatpickr календаря */
.flatpickr-calendar {
  font-family: 'Poppins', sans-serif !important;  /* Наш шрифт */
  border-radius: var(--radius-lg) !important;     /* Наши скругления */
  box-shadow: var(--shadow-xl) !important;        /* Наша тень */
}

.flatpickr-day.selected {
  background: var(--primary-color) !important;    /* Синий цвет выбранной даты */
  border-color: var(--primary-color) !important;  /* Синяя рамка */
}

.flatpickr-day.today {
  border-color: var(--accent-color) !important;   /* Желтая рамка сегодня */
}

/* Стили для заблокированных дат в календаре */
.flatpickr-day.disabled {
  color: var(--gray-400) !important;              /* Светло-серый текст */
  cursor: not-allowed !important;                 /* Курсор "недоступно" */
}

/* ============================================================================
   18. ДОПОЛНИТЕЛЬНЫЕ КОМПОНЕНТЫ
   ============================================================================ */
/* Индикатор загрузки */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--gray-300);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Прогресс-бар бронирования */
.booking-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  position: relative;
}

.booking-progress::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gray-300);
  z-index: 1;
}

.progress-step {
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
}

.progress-dot {
  width: 30px;
  height: 30px;
  background: var(--gray-300);
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  transition: var(--transition-base);
}

.progress-step.active .progress-dot {
  background: var(--primary-color);
}

.progress-label {
  font-size: 0.85rem;
  color: var(--gray-600);
}

.progress-step.active .progress-label {
  color: var(--primary-color);
  font-weight: 600;
}

/* Информационные иконки с тултипами */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--info-color);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  margin-left: 5px;
  cursor: help;
  position: relative;
}

/* ============================================================================
   19. МОДАЛЬНЫЕ ОКНА
   ============================================================================ */
/* Фон модального окна */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);       /* Полупрозрачный черный фон */
}

/* Контент модального окна */
.modal-content {
  border-radius: var(--radius-lg);      /* Скругленные углы */
  border: none;                         /* Без рамки */
  box-shadow: var(--shadow-xl);         /* Выраженная тень */
}

.modal-header {
  background: var(--gray-100);          /* Светлый фон заголовка */
  border-bottom: 2px solid var(--gray-300); /* Разделительная линия */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Скругления сверху */
}

.modal-title {
  color: var(--primary-color);          /* Синий цвет заголовка */
  font-weight: 700;                     /* Жирный шрифт */
}

.modal-body {
  padding: 25px;                        /* Внутренние отступы */
}

/* ============================================================================
   20. ПРАВИЛА ДЛЯ СОСТОЯНИЙ ФОРМЫ
   ============================================================================ */
/* Форма с валидацией */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--danger-color);    /* Красная рамка при ошибке */
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--success-color);   /* Зеленая рамка при успехе */
}

/* Отключенные элементы */
.form-control:disabled,
.form-select:disabled,
.btn:disabled {
  opacity: 0.6;                         /* Полупрозрачность */
  cursor: not-allowed;                  /* Курсор "недоступно" */
}

/* Состояние фокуса для доступности */
:focus-visible {
  outline: 2px solid var(--primary-color); /* Синий outline для фокуса */
  outline-offset: 2px;                   /* Отступ от элемента */
}

/* ============================================================================
   21. ФУТЕР И ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
   ============================================================================ */
/* Футер формы */
.booking-footer {
  margin-top: 30px;                     /* Отступ сверху */
  padding-top: 20px;                    /* Внутренний отступ сверху */
  border-top: 2px solid var(--gray-200); /* Разделительная линия */
  font-size: 0.9rem;                    /* Уменьшенный шрифт */
  color: var(--gray-600);               /* Серый текст */
  text-align: center;                   /* Центрирование текста */
}

/* Ссылки в футере */
.booking-footer a {
  color: var(--primary-color);          /* Синий цвет ссылок */
  text-decoration: none;                /* Без подчеркивания */
  font-weight: 600;                     /* Жирный шрифт */
}

.booking-footer a:hover {
  text-decoration: underline;           /* Подчеркивание при наведении */
}

/* Информация о безопасности */
.security-info {
  display: flex;                        /* Flex для иконки и текста */
  align-items: center;                  /* Вертикальное выравнивание */
  justify-content: center;              /* Горизонтальное центрирование */
  gap: 10px;                            /* Расстояние между элементами */
  margin-top: 15px;                     /* Отступ сверху */
  color: var(--success-color);          /* Зеленый текст */
}

/* ============================================================================
   22. КОНЕЦ ФАЙЛА СТИЛЕЙ
   ============================================================================ */