body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
}

*{
  box-sizing: border-box;
}

/* Общий стиль для списков ul, если они используются для навигации или похожих блоков */
ul {
  /* justify-content: center; // Это может быть не нужно для всех списков */
  /* align-items: center; // Это может быть не нужно для всех списков */
  /* margin: 0 auto; // Это может быть не нужно для всех списков */
  list-style: none;
  padding-left: 0;
}

/* Стилизация основного компонента Navbar */
/* Убираем стили Bootstrap по умолчанию для bg-dark и variant-dark */
/* ============================================================== */
/* --- СТИЛИ ДЛЯ NAV BAR (НАВБАР) --- */
/* --- ОБНОВЛЕНЫ СТИЛИ ТЕКСТА "РОДНИК" (.navbar-brand-qwe) --- */
/* --- НОВЫЙ ШРИФТ И ЦВЕТ --- */
/* ============================================================== */

.my-navbar {
  background-color: #343A40; /* Темно-серый цвет по образцу */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 1.15); /* Скорректируем тень навбара */
  padding: 0; /* Убрали вертикальный паддинг */
  position: relative;
  z-index: 100;
  min-height: 60px; /* Зададим минимальную высоту навбару для выравнивания */
  display: flex; /* Делаем навбар flex-контейнером */
  align-items: center; /* Выравниваем содержимое по центру по вертикали */
}

/* Стилизация контейнера внутри Navbar (Bootstrap Container) */
.my-navbar > .container {
  display: flex;
  align-items: center; /* Выравниваем содержимое контейнера по центру */
  width: 100%;
  /* Bootstrap сам управляет max-width и padding по бокам */
}


/* Стилизация логотипа/названия санатория */
.navbar-brand-qwe {
  text-decoration: none;
  padding: 0 15px; /* Отступы от края */
  display: flex;
  flex-direction: column; /* <-- ДОБАВЛЕНО: Элементы внутри (Санаторий, Родник) идут вертикально */
  align-items: flex-start; /* <-- ИЗМЕНЕНО: Выравнивание текста слева */
  transition: color 0.3s ease;

  font-family: 'PT Sans', sans-serif;
  color: #ffffff;
  font-style: italic;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.1; /* Межстрочный интервал */
}

/* Стиль при наведении на логотип */
.navbar-brand-qwe:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* <-- ДОБАВЛЕНО: Стиль для текста "Родник" внутри логотипа */
.navbar-brand-qwe span {
  margin-left: 35px;
  font-size: 2.5em;/* <-- Отступ слева для "Родник" */
  /* display: inline-block; */ /* span уже inline-block */
}


/* Стилизация контейнера меню и кнопки "Забронировать" */
.my-navbar-nav-container {
  width: 100%;
  display: flex;
  justify-content: flex-end; /* Выравниваем все к правому краю */
  align-items: center; /* Выравнивание по центру по вертикали */
}

/* Контейнер для самого меню (ul) и кнопки */
.navbar-menu-and-button {
  display: flex;
  align-items: center; /* Выравнивание по центру по вертикали */
  gap: 30px; /* Расстояние между меню и кнопкой */
}


/* ===== Стилизация основного меню (ul.menu) ===== */
.menu {
  list-style: none;
  padding: 0;
  margin: 0; /* Убираем внешние отступы ul */
  display: flex; /* Пункты меню горизонтальные */
  align-items: center; /* Выравнивание пунктов по центру по вертикали */
}

/* Стилизация отдельных пунктов верхнего уровня (li.menu-item) */
.menu-item {
  position: relative; /* Важно для позиционирования подменю */
  margin: 0 10px; /* Расстояние между пунктами верхнего уровня */
  display: flex; /* Используем flexbox для выравнивания внутри li */
  align-items: center; /* Выравнивание содержимого (ссылки) по центру li */
}

/* Стилизация ссылок верхнего уровня (a.nav-link) */
/* --- УВЕЛИЧИВАЕМ СПЕЦИФИЧНОСТЬ ДЛЯ ЦВЕТА И ПАДДИНГОВ --- */
.my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link {
  text-decoration: none;
  font-size: 18px;
  color: #ffffff; /* --- ТЕКСТ ГЛАВНОГО МЕНЮ БЕЛЫЙ --- */
  padding: 20px 0; /* Вертикальный паддинг для выравнивания */
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  user-select: none;
  line-height: normal;
}

/* Стиль при наведении на пункт меню */
.my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Стиль для активного пункта меню */
.my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link.active {
  /* border-bottom: 2px solid #28A745; <-- УДАЛЕНО для предотвращения двойной границы */
  padding: 20px 10px;
}

/* Анимация подчеркивания */
/* Используется для подчеркивания при наведении И для активного пункта */
.my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #28A745;
  transition: width 0.3s ease;
}

/* Анимация подчеркивания при наведении и для активного пункта */
.my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link:hover::after,
.my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link.active::after {
  width: 100%; /* <-- Теперь ::after отвечает за подчеркивание в активном состоянии */
}


/* ===== Стилизация выпадающих подменю (ul.submenu, ul.submenu2) ===== */
/* Эти стили для ДЕСКТОПНОГО отображения по наведению */

.submenu, .submenu2 {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  background-color: #ffffff; /* Белый фон подменю */
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  z-index: 200;
  display: none; /* Скрыто по умолчанию, показывается по :hover */
}

/* Показываем подменю при наведении на родительский li (ДЕСКТОП) */
.menu-item:hover > .submenu {
  display: block;
  top: 100%;
}

/* Позиционирование подподменю (2 уровень) (ДЕСКТОП) */
.submenu2 {
  top: -11px;
  left: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Показываем подподменю при наведении на родительский li в подменю (ДЕСКТОП) */
.submenu li:hover > .submenu2 {
  display: block;
}

/* Стилизация пунктов подменю (li внутри submenu/submenu2) */
.submenu li, .submenu2 li {
  position: relative;
}

/* Стилизация ссылок подменю (a.submenu-link, a.submenu2-link) */
.submenu-link, .submenu2-link {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  padding: 8px 15px;
  display: block;
  transition: background-color 0.2s ease, color 0.2s ease;
  user-select: none;
  line-height: 1.2;
}

.submenu-link:hover, .submenu2-link:hover {
  background-color: #f0f0f0;
  color: #28A745;
  text-decoration: none;
}

/* Стили для активных ссылок подменю (первый и второй уровень) */
.submenu-link.active:hover, .submenu2-link.active:hover {
  background-color: #e0e0e0;
  color: #333;
  text-decoration: none;
}


/* Стили для кнопки "Забронировать" (используем класс .btn из Bootstrap) */
.my-navbar-nav-container .btn {
  background-color: #28A745;
  color: white;
  padding: 8px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.1s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.my-navbar-nav-container .btn:hover {
  background-color: #218838;
}

.my-navbar-nav-container .btn:active {
  transform: scale(0.98);
}


/* Адаптивность навбара (пример для Bootstrap) */
@media (max-width: 991px) {
  .my-navbar {
    padding: 10px 15px;
    min-height: auto;
  }

  /* Класс для иконки гамбургера */
  .navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
  }
  .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  /* Если навбар темный, может потребоваться светлая иконка */
  .my-navbar .navbar-toggler-icon {
    filter: invert(1); /* Инвертируем цвет SVG, если он был темным */
  }


  /* Контейнер collapse в Bootstrap */
  .navbar-collapse {
    flex-grow: 1; /* Позволяем ему расти */
    align-items: center;
  }


  .my-navbar-nav-container {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10px;
  }

  .navbar-menu-and-button {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 5px;
  }

  .navbar-menu-and-button button{
    width: 100%;
  }


  /* Основное меню на мобильных - делаем вертикальным */
  .menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px;
    height: auto;
  }

  /* Пункты меню на мобильных */
  /* Скрываем ВСЕ пункты верхнего уровня по умолчанию */
  .menu-item {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #eee; /* <-- Базовая серая граница для видимых пунктов */
    height: auto;
    display: none; /* <-- Скрываем по умолчанию */
    transition: border-bottom-color 0.3s ease; /* <-- ДОБАВЛЕНО: Плавное изменение цвета границы */
  }

  /* Центрируем текст внутри ссылок на мобильных */
  .menu a{
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  /* Убираем нижнюю границу у ПОСЛЕДНЕГО элемента в ИСХОДНОМ списке HTML */
  /* Если нужно, чтобы у последнего элемента БЫЛА граница, удали border-bottom: none; отсюда */
  .menu-item:last-child {
    /* border-bottom: none; <-- Строка удалена */
  }

  /* Явно показываем пункты ВЕРХНЕГО УРОВНЯ с классом mobile-visible */
  /* Только эти пункты будут отображаться */
  .menu-item.mobile-visible {
    display: flex; /* <-- Показываем только их (Главная, Программы, СПА) */
  }

  /* ===== ДОБАВЛЕНО: Убираем серую границу у пункта меню, когда его ссылка активна ===== */
  .menu-item:has(> .nav-link.active) { /* <-- Выбираем .menu-item, который содержит активную ссылку */
    border-bottom: none; /* <-- Убираем серую границу */
  }

  /* ===== ДОБАВЛЕНО: Изменяем цвет серой границы при наведении на НЕАКТИВНЫЙ пункт меню ===== */
  /* Выбираем .menu-item, который содержит ссылку в состоянии hover И НЕ активен */
  .menu-item:has(> .nav-link:hover:not(.active)) { /* <-- ДОБАВЛЕНО */
    border-bottom-color: #28A745; /* <-- ДОБАВЛЕНО: Меняем цвет границы на зеленый */
  }


  /* Стилизация ссылок на мобильных */
  /* Применяются к видимым пунктам верхнего уровня */
  .menu-item > .nav-link {
    padding: 12px 15px;
    width: 100%;
    color: #333; /* Темный цвет */
    line-height: normal;
    text-decoration: none;
    font-size: 18px;
    align-items: center;
    transition: color 0.2s ease;
    user-select: none;
  }
  /* Стили для ::after псевдоэлемента на мобильных */
  /* Включен для активного состояния, анимация убрана, скрыт при наведении */
  .my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Изначальная ширина (скрыто) */
    height: 2px;
    background-color: #28A745;
    transition: none; /* <-- Анимация убрана на мобильных */
  }

  /* Скрываем зеленое подчеркивание при наведении на МОБИЛЬНЫХ (для неактивных) */
  /* Это правило срабатывает на :hover, но правило .active:hover перебивает его для активных */
  .my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link:hover::after {
    width: 0; /* Скрыто при наведении */
  }

  /* Показываем зеленое подчеркивание у АКТИВНОГО элемента на МОБИЛЬНЫХ */
  /* Это правило обеспечивает статический вид у активного пункта */
  .my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link.active::after {
    width: 100%; /* Видимо у активного */
  }

  /* Показываем зеленое подчеркивание у АКТИВНОГО элемента ПРИ НАВЕДЕНИИ на МОБИЛЬНЫХ */
  /* Это правило перебивает width: 0; из правила для :hover::after */
  .my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link.active:hover::after {
    width: 100%; /* Явно указываем, что у активного при наведении тоже 100% */
  }


  /* ===== Стилизация выпадающих подменю (ul.submenu, ul.submenu2) на МОБИЛЬНЫХ (< 991px) ===== */
  /* Полностью скрываем ВСЕ содержимое подменю */

  .submenu,
  .submenu2 {
    display: none !important; /* <-- Усилено: скрываем контейнер подменю */
    position: static; /* Убираем абсолютное позиционирование */
    width: auto; /* Убираем фиксированную ширину */
    box-shadow: none; /* Убираем тень */
    border: none; /* Убираем границы */
    padding: 0; /* Убираем внутренние отступы */
    background-color: transparent; /* Убираем фон */
    opacity: 1;
    max-height: none;
    overflow: visible;
    transition: none;
    transform: none;
    visibility: visible;
  }

  /* Десктопные правила :hover для подменю здесь неактивны */
  .menu-item:hover > .submenu { display: block; }
  .submenu li:hover > .submenu2 { display: block; }


  /* Дополнительно скрываем пункты списка внутри подменю, если контейнер не скрылся */
  .submenu li,
  .submenu2 li {
    display: none !important; /* <-- Усилено: Скрываем каждый пункт списка в подменю */
  }

  /* Стилизация ссылок подменю на мобильных - Скрыты вместе с родительскими li */
  .submenu-link,
  .submenu2-link {
    display: none !important; /* <-- Усилено: Скрываем сами ссылки подменю */
  }


  /* Кнопка на мобильных */
  .my-navbar-nav-container .btn {
    width: 100%;
  }
}
/************ MAIN PAGE HERO SECTION ************/

/* ============================================================== */
/* --- СТИЛИ ДЛЯ MAIN PAGE (ГЛАВНАЯ СТРАНИЦА) --- */
/* --- ИСПРАВЛЕНА ВЫСОТА СЕКЦИИ, УВЕЛИЧЕНЫ РАЗМЕРЫ, ДОБАВЛЕНА СНОСКА --- */
/* ============================================================== */

/* Контейнер с фоновой картинкой */
.main-page-hero-section {
  background-size: cover; /* Фон на всю область, сохраняя пропорции */
  background-position: center; /* Центрируем фон */
  background-repeat: no-repeat; /* Не повторяем фон */
  width: 100%; /* Ширина на всю область */
  min-height: calc(100vh - 60px); /* Минимальная высота = высота вьюпорта минус примерная высота навбара */
  position: relative; /* <-- ОЧЕНЬ ВАЖНО: Нужно для абсолютного позиционирования сноски */
  display: flex; /* Используем Flexbox для центрирования содержимого */
  flex-direction: column; /* Элементы внутри идут вертикально */
  justify-content: center; /* Центрируем содержимое по вертикали */
  align-items: center; /* Центрируем содержимое по горизонтали */
  text-align: center; /* Выравниваем текст по центру */
  color: white; /* Цвет текста по умолчанию белый */
  overflow: hidden; /* Обрезаем содержимое, если оно выходит за границы (оставлено как в оригинале) */
}

/* Псевдоэлемент для темного оверлея поверх фоновой картинки */
.main-page-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1; /* Находится над фоновой картинкой, но под содержимым */
}

/* Стили для тега <f> (звездочка) внутри заголовка приветствия */
.welcome-title f { /* <-- ДОБАВЛЕНО: Стили для звездочки */
  font-size: 0.4em; /* <-- Размер звездочки (например, половина размера заголовка) */
  vertical-align: super; /* <-- Поднимаем звездочку вверх (как надстрочный символ) */
  line-height: 0; /* <-- Может помочь с вертикальным выравниванием */
}


/* Контейнер для всего содержимого поверх фона (текст, кнопка, контакты) */
.hero-content-container {
  position: relative;
  z-index: 10;
  max-width: 900px;
  width: 95%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}


/* Блок приветствия и кнопки */
.welcome-block {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

/* Заголовок приветствия */
.welcome-title {
  font-size: 3.5em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  margin: 0;
  line-height: 1.2;
}

/* Кнопка бронирования */
.booking-button {
  font-size: 1.6em;
  padding: 14px 28px;
  border-radius: 5px;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.booking-button:hover {
  opacity: 0.9;
}


/* Блок контактной информации */
.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  align-items: center;
}

.documents{
  font-size: 22px;
  font-weight: bold;
}

/* Обычный текст в блоке контактов */
.contact-text {
  font-size: 1.5em;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
}

/* Номера телефонов */
.phone-number, .whatsapp-number {
  font-size: 2.6em;
  font-weight: bold;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
}

/* ===== Стили для сноски в правом нижнем углу ===== */
.main-page-hero-section .footnote { /* <-- ДОБАВЛЕНО: Стили для сноски */
  position: absolute; /* <-- Позиционируем абсолютно */
  bottom: 20px; /* <-- Отступ от нижнего края */
  right: 20px; /* <-- Отступ от правого края */
  color: rgba(255, 255, 255, 0.8); /* <-- Цвет текста (полупрозрачный белый) */
  font-size: 0.7em; /* <-- Размер шрифта */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* <-- Небольшая тень для читаемости */
  z-index: 10; /* <-- Убедимся, что сноска над оверлеем */
  margin: 0; /* <-- Убираем стандартные margin у <p> */
}


/* Медиа-запросы для адаптивности главной страницы */
@media (max-width: 768px) {
  .main-page-hero-section {
    min-height: calc(100vh - 50px);
  }

  .hero-content-container {
    max-width: 95%;
    gap: 30px;
  }

  .welcome-block {
    gap: 25px;
  }

  .welcome-title {
    font-size: 2.5em;
  }

  .booking-button {
    font-size: 1.4em;
    padding: 12px 24px;
  }

  .contact-info-block {
    gap: 8px;
  }

  .contact-text {
    font-size: 1.3em;
  }

  .phone-number, .whatsapp-number {
    font-size: 2em;
  }
  /* Адаптивность сноски */
  .main-page-hero-section .footnote { /* <-- ДОБАВЛЕНО */
    bottom: 10px;
    right: 10px;
    font-size: 0.8em;
  }
}

@media (max-width: 480px) {
  .main-page-hero-section {
    min-height: calc(100vh - 40px);
  }

  .hero-content-container {
    gap: 25px;
  }
  .welcome-block {
    gap: 20px;
  }
  .contact-info-block {
    gap: 6px;
  }

  .welcome-title {
    font-size: 1.8em;
  }
  .booking-button {
    font-size: 1.2em;
    padding: 10px 20px;
  }
  .contact-text {
    font-size: 1.1em;
  }
  .phone-number, .whatsapp-number {
    font-size: 1.8em;
  }
  /* Адаптивность сноски */
  .main-page-hero-section .footnote { /* <-- ДОБАВЛЕНО */
    bottom: 5px;
    right: 5px;
    font-size: 0.7em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* Чуть меньше тень на мелких экранах */
  }
}


/* FOOD PAGE */
/* Общий контейнер страницы */
.food-page-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0;
  font-family: 'Arial', sans-serif; /* Пример другого шрифта */
  line-height: 1.6;
  color: #333;
}

/* Заголовок страницы */
.page-header {
  text-align: center;
  margin-bottom: 0; /* Увеличим немного отступ */
  padding: 0 20px 25px 20px; /* Увеличим нижний паддинг */
  border-bottom: 0; /* Более выраженная, но нейтральная граница */
}

.page-header h1 {
  color: #2c3e50; /* Темно-синий или серый цвет */
  font-size: 2.4em; /* Размер побольше */
  margin: 0;
  text-transform: uppercase; /* Сделаем заглавными */
  letter-spacing: 1px; /* Добавим межбуквенный интервал */
}

/* Секции */
.section {
  margin-bottom: 50px; /* Увеличим отступ */
  padding: 0;
  background-color: #ecf0f1; /* Очень светлый серый/голубой фон */
  border-radius: 12px; /* Более заметное скругление */
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Средняя тень */
}

.section-title {
  color: #34495e; /* Темный заголовок секции */
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 30px; /* Увеличим отступ */
  padding: 25px 30px 15px 30px; /* Увеличим паддинг */
  border-bottom: 2px solid #28A745; /* Яркая синяя линия */
}

.section-description {
  margin-bottom: 30px; /* Увеличим отступ */
  padding: 0 30px; /* Увеличим паддинг по бокам */
  font-size: 1.2em; /* Размер побольше */
  color: #555;
  font-style: italic; /* Сделаем курсивом */
}
.section-description p {
  margin: 0;
}


/* ===== Стили для карточек (Полностью переделаны) ===== */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Минимальная ширина карточки 300px */
  gap: 30px; /* Увеличим расстояние между карточками */
  padding: 0 30px 30px 30px; /* Отступы вокруг грида */
}

.info-card {
  background-color: #fff; /* Белый фон карточки */
  border-radius: 8px; /* Скругление */
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1); /* Более мягкая тень */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  height: 100%;
  border: none; /* Убираем тонкую границу */
}

.info-card:hover {
  transform: translateY(-5px); /* Поднимаем чуть меньше */
  box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* Усиление тени */
}

/* ===== Стили для баннера сверху карточки (Переделаны) ===== */
.card-banner {
  /* Простая полоса сверху */
  /* Цвет будет задаваться через классы banner-free/banner-paid */
  color: white; /* Белый текст */
  padding: 5px 15px; /* Отступы */
  font-weight: bold;
  font-size: 0.8em;
  text-transform: uppercase;
  text-align: center; /* Текст по центру */
  position: relative; /* Если захочешь добавить какой-то элемент */
  z-index: 1;
  /* Убираем уголок, если он был */
}

/* Стили для платного/бесплатного баннера */
.card-banner.banner-free {
  font-size: 20px;
  background-color: #28A745; /* Зеленый для "БЕСПЛАТНО" */
}
.card-banner.banner-paid {
  font-size: 20px;
  background-color: #e74c3c; /* Красный для "ПЛАТНО" */
}


/* Стили для изображения в карточке */
.card-image {
  width: 100%;
  height: 300px; /* Высота изображения */
  object-fit: cover;
  display: block;
  /* Убираем скругление у фото, оно будет у карточки */
}

/* Контентная часть карточки */
.card-content {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff; /* Убедимся, что фон контента белый */
}

.card-title {
  color: #28A745;
  font-size: 1.3em;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1.3; /* Увеличим межстрочный интервал заголовка */
}

.card-description {
  font-size: 1em;
  color: #555;
  margin-bottom: 15px; /* Увеличим отступ */
  flex-grow: 1;
  white-space: pre-wrap;
  /*font-weight: normal; */ /* Убедимся, что не жирный */
}

.card-meta {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 0;
  /* font-weight: normal; */
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
  .food-page-container {
    padding: 0 15px;
  }
  .section-title, .section-description {
    padding: 0 15px 10px 15px;
  }
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    padding: 0 15px 15px 15px;
  }
  .card-image {
    height: 160px;
  }
  .card-content {
    padding: 10px;
  }
  .card-title {
    font-size: 1.2em;
  }
  .card-description {
    font-size: 0.95em;
  }
  .card-banner {
    padding: 4px 8px;
    font-size: 0.7em;
  }
}

@media (max-width: 480px) {
  .food-page-container {
    padding: 0 10px;
  }
  .section-title, .section-description {
    padding: 0 10px 10px 10px;
  }
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 0 10px 10px 10px;
  }
  .card-image {
    height: 180px;
  }
  .card-banner {
    padding: 4px 8px;
    font-size: 0.7em;
  }
}

/* ============================================================== */
/* --- СТИЛИ ДЛЯ TREATMENT PAGE (СТРАНИЦА ПРОГРАММ / ПРОЦЕДУР) --- */
/* --- УЛУЧШЕННЫЙ ДИЗАЙН КАРТОЧЕК И РАЗДЕЛЕНИЕ СЕКЦИЙ --- */
/* --- ОБНОВЛЕННЫЕ СТИЛИ ЗАГОЛОВКОВ И ЦВЕТА --- */
/* ============================================================== */

/* Общий контейнер страницы TreatmentPage */
.treatment-page-container {
  max-width: 1200px;
  margin: 20px auto;
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 0 20px 50px;
}

/* Заголовок страницы */
.treatment-page-container .page-header {
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 25px;
  /* --- Сделаем границу легче и цвет нейтральнее --- */
  border-bottom: 0; /* Очень светлая нейтральная граница */
}

.treatment-page-container .page-header h1 {
  color: #555; /* Сделаем цвет темнее, но не черный */
  font-size: 2.2em; /* Чуть уменьшим размер */
  /* --- Сделаем шрифт легче --- */
  font-weight: 600; /* Менее жирный */
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Обертка для секций (Процедуры, Основные программы) */
.sections-wrapper {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Секция (например, "Процедуры" или "Основные программы") */
.treatment-section {
  padding: 30px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* Уберем верхний паддинг и тень у первой секции, если нужно */
.treatment-section.first-section {
  padding-top: 0;
  box-shadow: none;
  background-color: transparent;
  border-radius: 0;
}

/* Заголовок секции */
.treatment-section-title {
  color: #555; /* Сделаем цвет темнее, но не черный */
  font-size: 2em; /* Чуть уменьшим размер */
  /* --- Сделаем шрифт легче --- */
  font-weight: 600; /* Менее жирный */
  margin-bottom: 30px; /* Чуть уменьшим отступ */
  /* --- Сделаем границу легче и цвет нейтральнее --- */
  border-bottom: 2px solid #dcdcdc; /* Более светлая граница */
  padding-bottom: 10px; /* Чуть уменьшим паддинг */
}

/* Контейнер для списка карточек внутри секции */
.treatment-cards-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ===== Стили для ОТДЕЛЬНОЙ ГОРИЗОНТАЛЬНОЙ КАРТОЧКИ Программы/Процедуры ===== */
.treatment-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
  border: none;
  flex-direction: row;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.treatment-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Контентная часть карточки */
.treatment-card-content {
  flex-grow: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  /* --- ДОБАВЛЯЕМ ВИЗУАЛЬНОЕ РАЗБАВЛЕНИЕ --- */
  /* --- МЕНЯЕМ ЦВЕТ НА ЗЕЛЕНЫЙ (#28A745) --- */
  border-left: 5px solid #28A745; /* Зеленая полоса слева */
  background-color: #ecf0f1; /* Очень светлый серый фон контентной части */

  @media (max-width: 768px) {
    border-left: none;
    /* --- МЕНЯЕМ ЦВЕТ НА ЗЕЛЕНЫЙ (#28A745) --- */
    border-top: 5px solid #28A745; /* Зеленая верхняя полоса на мобильных */
    background-color: #ecf0f1;
  }
}

/* Контейнер для картинки */
.treatment-card-image-container {
  flex-shrink: 0;
  width: 40%;
  overflow: hidden;

  @media (max-width: 768px) {
    width: 100%;
    max-height: 200px;
  }
}

/* Сама картинка */
.treatment-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Эффект при наведении на карточку - зум картинки */
.treatment-card:hover .treatment-card-image {
  transform: scale(1.05);
}


/* ===== Стили для Баннера внутри карточки (Меняем цвет) ===== */
.treatment-card-banner {
  /* --- МЕНЯЕМ ЦВЕТ БАННЕРА НА ЗЕЛЕНЫЙ (#28A745) --- */
  background-color: #28A745; /* Зеленый цвет */
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  text-transform: uppercase;
  padding: 6px 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  text-align: left;
}


/* Название Процедуры/Программы */
.treatment-item-title {
  font-size: 1.8em;
  color: #333;
  margin-top: 40px;
  margin-bottom: 0;
  font-weight: bold;
}

/* Описание Процедуры/Программы */
.treatment-item-description {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 15px;
  flex-grow: 1;
  white-space: pre-wrap;
}


/* Медиа-запросы для TREATMENT PAGE */
@media (max-width: 991px) {
  .treatment-page-container {
    padding: 0 15px;
  }
  .treatment-page-container .page-header h1 {
    font-size: 2.2em;
  }
  .treatment-section-title {
    font-size: 1.8em;
    margin-bottom: 20px;
  }
  .treatment-cards-list {
    gap: 30px;
  }
  .treatment-card-content {
    padding: 20px;
    gap: 10px;
  }
  .treatment-item-title {
    font-size: 1.5em;
    margin-top: 30px;
  }
  .treatment-item-description {
    font-size: 1em;
  }
  .treatment-card-image-container {
    max-height: 220px;
  }
  .treatment-card-banner {
    padding: 5px 10px;
    font-size: 0.8em;
  }
}

@media (max-width: 768px) {
  .treatment-page-container {
    padding: 0 10px;
  }
  .treatment-page-container .page-header h1 {
    font-size: 2em;
  }
  .treatment-section-title {
    font-size: 1.6em;
  }
  .treatment-card {
    flex-direction: column;
  }
  .treatment-card-image-container {
    width: 100%;
    max-height: 200px;
  }
  .treatment-card-content {
    padding: 15px;
    gap: 10px;
    border-left: none;
    border-top: 5px solid #28A745; /* Зеленая верхняя полоса на мобильных */
    background-color: #ecf0f1;
  }
  .treatment-card-banner {
    width: 100%;
    text-align: center;
  }
  .treatment-item-title {
    font-size: 1.4em;
    margin-top: 30px;
  }
  .treatment-item-description {
    font-size: 1em;
  }
  .treatment-card-image-container {
    max-height: 200px;
  }
}

@media (max-width: 480px) {
  .treatment-page-container {
    padding: 0 10px;
  }
  .treatment-page-container .page-header h1 {
    font-size: 1.8em;
  }
  .treatment-section-title {
    font-size: 1.4em;
  }
  .treatment-card-content {
    padding: 10px;
    gap: 8px;
  }
  .treatment-item-title {
    font-size: 1.2em;
    margin-top: 25px;
  }
  .treatment-item-description {
    font-size: 0.9em;
  }
  .treatment-card-image-container {
    max-height: 180px;
  }
}

/* ============================================================== */
/* --- СТИЛИ ДЛЯ SPA PAGE (СТРАНИЦА СПА-ПРОЦЕДУР) --- */
/* --- АДАПТИРОВАНО ПОД ПЛОСКУЮ СТРУКТУРУ ДАННЫХ --- */
/* ============================================================== */

/* Общий контейнер страницы SPA */
.spa-page-container {
  max-width: 1200px; /* Максимальная ширина */
  margin: 20px auto; /* Выравниваем по центру */
  /* Горизонтальные отступы */
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
  /* Отступ снизу */
  padding: 0 20px 50px;
}

/* Заголовок страницы для SPA (переиспользуем стили page-header) */
.spa-page-container .page-header {
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 25px;
  border-bottom: 0;
}

/* Обертка для списка карточек (переиспользуем, чтобы сохранить отступы) */
.spa-page-container .sections-wrapper {
  display: flex;
  flex-direction: column;
  /* Убираем gap, если нет секций, или оставляем для отступа снизу */
  gap: 40px; /* Расстояние между карточками (можно настроить) */
  /* Это будет отступ перед первым списком карточек */
  margin-top: 0;
}


/* Стили для секции SPA - УДАЛЕНЫ, т.к. нет секций в JSX */
/* .treatment-section { ... } */
/* .treatment-section.first-section { ... } */

/* Стили заголовка секции SPA - УДАЛЕНЫ, т.к. нет заголовков секций в JSX */
/* .treatment-section-title { ... } */

/* Контейнер для списка карточек внутри секции (переиспользуем) */
.spa-page-container .treatment-cards-list {
  display: flex;
  flex-direction: column;
  /* Gap между карточками теперь контролируется в .sections-wrapper */
  gap: 40px; /* Убедимся, что здесь тоже есть отступ между карточками */
}

/* ===== Стили для ОТДЕЛЬНОЙ ГОРИЗОНТАЛЬНОЙ КАРТОЧКИ SPA ===== */
/* Переиспользуем класс treatment-card и его дочерние */
.spa-page-container .treatment-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
  border: none;
  flex-direction: row;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.spa-page-container .treatment-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Контентная часть карточки */
.spa-page-container .treatment-card-content {
  flex-grow: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  /* Используем зеленые акценты как на TreatmentPage */
  border-left: 5px solid #28A745;
  background-color: #ecf0f1;

  @media (max-width: 768px) {
    border-left: none;
    border-top: 5px solid #28A745;
    background-color: #ecf0f1;
  }
}

/* Контейнер для картинки */
.spa-page-container .treatment-card-image-container {
  flex-shrink: 0;
  width: 40%;
  overflow: hidden;

  @media (max-width: 768px) {
    width: 100%;
    max-height: 200px;
  }
}

/* Сама картинка */
.spa-page-container .treatment-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Эффект при наведении на карточку - зум картинки */
.spa-page-container .treatment-card:hover .treatment-card-image {
  transform: scale(1.05);
}


/* ===== Стили для Баннера внутри карточки ===== */
/* Переиспользуем класс banner */
.spa-page-container .treatment-card-banner {
  /* Используем зеленый цвет как на TreatmentPage */
  background-color: #28A745;
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  text-transform: uppercase;
  padding: 6px 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  text-align: left;
}


/* Название Процедуры/Программы (переиспользуем) */
.spa-page-container .treatment-item-title {
  font-size: 1.8em;
  color: #333;
  margin-top: 40px; /* Отступ сверху, чтобы не перекрывался баннером */
  margin-bottom: 0;
  font-weight: bold;
}

/* Описание Процедуры/Программы (переиспользуем) */
.spa-page-container .treatment-item-description {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 15px;
  flex-grow: 1;
}


/* Медиа-запросы для SPA PAGE (переиспользуем и переопределяем при необходимости) */
@media (max-width: 991px) {
  .spa-page-container {
    padding: 0 15px;
  }
  .spa-page-container .page-header h1 {
    font-size: 2.2em;
  }
  /* Стили заголовка секции удалены из медиа-запроса */
  /* .spa-page-container .treatment-section-title { ... } */
  .spa-page-container .treatment-cards-list {
    gap: 30px;
  }
  .spa-page-container .treatment-card-content {
    padding: 20px;
    gap: 10px;
  }
  .spa-page-container .treatment-item-title {
    font-size: 1.5em;
    margin-top: 30px;
  }
  .spa-page-container .treatment-item-description {
    font-size: 1em;
  }
  .spa-page-container .treatment-card-image-container {
    max-height: 220px;
  }
  .spa-page-container .treatment-card-banner {
    padding: 5px 10px;
    font-size: 0.8em;
  }
}

@media (max-width: 768px) {
  .spa-page-container {
    padding: 0 10px;
  }
  .spa-page-container .page-header h1 {
    font-size: 2em;
  }
  /* Стили заголовка секции удалены из медиа-запроса */
  /* .spa-page-container .treatment-section-title { ... } */
  .spa-page-container .treatment-card {
    flex-direction: column;
  }
  .spa-page-container .treatment-card-image-container {
    width: 100%;
    max-height: 200px;
  }
  .spa-page-container .treatment-card-content {
    padding: 15px;
    gap: 10px;
    border-left: none;
    border-top: 5px solid #28A745;
    background-color: #ecf0f1;
  }
  .spa-page-container .treatment-card-banner {
    width: 100%;
    text-align: center;
  }
  .spa-page-container .treatment-item-title {
    font-size: 1.4em;
    margin-top: 30px;
  }
  .spa-page-container .treatment-item-description {
    font-size: 1em;
  }
  .spa-page-container .treatment-card-image-container {
    max-height: 200px;
  }
}

@media (max-width: 480px) {
  .spa-page-container {
    padding: 0 10px;
  }
  .spa-page-container .page-header h1 {
    font-size: 1.8em;
  }
  /* Стили заголовка секции удалены из медиа-запроса */
  /* .spa-page-container .treatment-section-title { ... } */
  .spa-page-container .treatment-card-content {
    padding: 10px;
    gap: 8px;
  }
  .spa-page-container .treatment-item-title {
    font-size: 1.2em;
    margin-top: 25px;
  }
  .spa-page-container .treatment-item-description {
    font-size: 0.9em;
  }
  .spa-page-container .treatment-card-image-container {
    max-height: 180px;
  }
}

/* ============================================================== */
/* --- ФИНАЛЬНЫЕ СТИЛИ ДЛЯ ROOMS PAGE (СТРАНИЦА НОМЕРОВ - Альтернативный макет) --- */
/* --- ПОПЫТКА ВЫРОВНЯТЬ БЛОКИ КАРТИНКИ И ИНФОРМАЦИИ ПО ВЫСОТЕ --- */
/* --- ИСПРАВЛЕНА ПРОПАЖА ФОТОК НА ТЕЛЕФОНЕ (Добавлена min-height в медиа-запросах) --- */ /* <-- ОБНОВЛЕННЫЙ КОММЕНТАРИЙ */
/* ============================================================== */

/* Общий контейнер страницы Номеров */
.rooms-page-container {
  max-width: 1200px;
  margin: 20px auto;
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 0 20px 50px;
}

/* Заголовок страницы Номеров (переиспользуем стили page-header) */
.rooms-page-container .page-header {
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 25px;
  border-bottom: 0;
}

.rooms-page-container .page-header h1 {
  color: #555;
  font-size: 2.2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;

  @media (max-width: 660px) {
    font-size: 1.8em;
  }

  @media (max-width: 410px) {
    font-size: 1.4em;
  }

}

/* Обертка для категорий номеров (переиспользуем sections-wrapper) */
.rooms-page-container .sections-wrapper {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 0;
}

/* Секция категории номеров (например, "НОМЕРА КЛУБНОГО ЭТАЖА") */
.room-category-section {
  padding: 30px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Заголовок категории номеров */
.room-category-title {
  color: #555;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 40px;
  border-bottom: 2px solid #dcdcdc;
  padding-bottom: 10px;

  @media (max-width: 660px){
    font-size: 1.6em;
    padding-bottom: 0;
  }
  @media (max-width: 450px){
    font-size: 1.3em;
    padding-bottom: 0;
  }

}

/* Контейнер для списка номеров внутри категории (Альтернативный макет) */
.room-list-alternating {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 0;
}

/* ===== Стили для ОТДЕЛЬНОЙ КАРТОЧКИ НОМЕРА (Альтернативный макет) ===== */
.room-card-alternating {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: none;
  flex-direction: row;
  transition: transform 0.3s ease, box-shadow 0.3s ease;


  @media (max-width: 991px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.room-card-alternating:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Стили для чередования: Меняем порядок для каждой второй карточки */
.room-card-alternating.reverse {
  flex-direction: row-reverse;
}

/* Убираем чередование на маленьких экранах */
@media (max-width: 991px) {
  .room-card-alternating.reverse {
    flex-direction: column;
  }
}


/* Контейнер для слайдера изображений номера ВНУТРИ карточки (Альтернативный макет) */
.room-image-slider-container-alt {
  flex-shrink: 0;
  width: 55%;
  /* max-height убран в основном правиле */
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;

  /* --- max-height и ДОБАВЛЕН min-height в медиа-запросах --- */
  @media (max-width: 991px) {
    width: 100%;
    max-height: 630px; /* На планшетах */
    min-height: 630px; /* Минимальная высота */
    height: 630px; /* <-- ДОБАВЛЕНО: Явная высота */
  }
  @media (max-width: 768px) {
    width: 100%;
    max-height: 450px; /* На планшетах */
    min-height: 450px; /* Минимальная высота */
    height: 450px; /* <-- ДОБАВЛЕНО: Явная высота */
  }
  @media (max-width: 480px) {
    width: 100%;
    max-height: 350px; /* На планшетах */
    min-height: 350px; /* Минимальная высота */
    height: 350px; /* <-- ДОБАВЛЕНО: Явная высота */
  }
}

/* Placeholder, если нет картинок в альтернативном макете */
.no-images-placeholder-alt {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #cccccc;
  color: #555;
  font-size: 1.2em;
  text-align: center;
}


/* Блок информации о номере в альтернативном макете */
.room-info-block-alt {
  flex-grow: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: #ecf0f1;

  @media (max-width: 991px) {
    border-left: none;
    border-right: none;
    background-color: #ecf0f1;
    padding: 20px;
    gap: 10px;
  }
  @media (max-width: 768px) {
    padding: 15px;
    gap: 8px;
  }
  @media (max-width: 480px) {
    padding: 10px;
    gap: 6px;
  }
}

/* Граница справа, когда макет реверсирован */
.room-card-alternating.reverse .room-info-block-alt {
  border-left: none;

  @media (max-width: 991px) {
    border-right: none;
  }
}


/* Заголовок номера (название) в альтернативном макете */
.room-title-alt {
  font-size: 1.8em;
  color: #333;
  margin-bottom: 5px;
  font-weight: bold;
  @media (max-width: 991px) { font-size: 1.5em; }
  @media (max-width: 768px) { font-size: 1.4em; }
  @media (max-width: 480px) { font-size: 1.2em; }
}

/* Описание номера в альтернативном макете */
.room-description-alt {
  font-size: 1em;
  color: #555;
  margin-bottom: 10px;
  flex-grow: 1;
  @media (max-width: 991px) { font-size: 1em; }
  @media (max-width: 768px) { font-size: 0.9em; }
  @media (max-width: 480px) { font-size: 0.8em; }
}

/* Обертка для списка особенностей в альтернативном макете */
.room-features-block-alt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

/* Заголовок списка особенностей в альтернативном макете */
.features-title-alt {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 8px;
  font-weight: bold;
  text-transform: uppercase;
  @media (max-width: 991px) { font-size: 0.85em; }
  @media (max-width: 768px) { font-size: 0.8em; }
  @media (max-width: 480px) { font-size: 0.75em; }
}

/* Список особенностей номера в альтернативном макете */
.room-features-list-alt {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.9em;
  color: #666;
  @media (max-width: 991px) { font-size: 0.8em; }
  @media (max-width: 768px) { font-size: 0.8em; }
  @media (max-width: 480px) { font-size: 0.75em; padding-left: 15px;}
}
.room-features-list-alt li {
  margin-bottom: 4px;
}

/* Цена номера в альтернативном макете */
.room-price-alt {
  font-size: 1.2em;
  color: #28A745;
  font-weight: bold;
  margin-top: auto;
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  @media (max-width: 991px) { font-size: 1.1em; }
  @media (max-width: 768px) { font-size: 1em; }
  @media (max-width: 480px) { font-size: 0.9em; }
}

/* Стили для кнопки бронирования, если она появится */
/*
.room-booking-button-alt {
    display: block;
    width: 100%; // Или auto
    text-align: center; // Или left/right
    background-color: #28A745;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    margin-top: 15px; // Или auto
    transition: background-color 0.3s ease;
    align-self: flex-start; // Или flex-end в зависимости от выравнивания
}
.room-booking-button-alt:hover {
    background-color: #218838;
}
*/


/* ============================================================== */
/* --- СТИЛИ ДЛЯ КОМПОНЕНТА СЛАЙДЕРА RoomImagesSlider (ВНУТРИ КАРТОЧКИ) --- */
/* Применяются к каждому слайдеру внутри .room-image-slider-container-alt */

.slider-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 0;
  padding: 0;
}


.slider-main-area {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}


/* Контейнер для тега <img> */
.slide-image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  z-index: 10;
  position: relative;
  margin: 0;
  padding: 0;
}


/* Сам тег <img> */
.slide-image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  transform: none;
}


/* Стрелки навигации слайдера */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  z-index: 20;
  user-select: none;
  padding: 0 10px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.arrow:hover {
  background-color: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 1);
}

.arrow.left {
  left: 15px;
}

.arrow.right {
  right: 15px;
}


/* Точки-индикаторы слайдов */
.dots-container {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}

/* Стиль для каждой точки */
.dot {
  margin: 0 6px;
  cursor: pointer;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease, transform 0.2s ease;
}

/* Стиль для активной точки */
.dot.active {
  color: #fff;
  transform: scale(1.2);
}

.dot:hover {
  color: #ffffff;
}


/* Медиа-запросы для СЛАЙДЕРА ВНУТРИ КАРТОЧКИ (ВНУТРИ ROOMS PAGE) */
/* Эти стили применяются ТОЛЬКО к слайдеру, когда Rooms Page отображается на мобильных */

/* Стили для стрелок, точек и размеров текста слайдера на разных мобильных разрешениях */

@media (max-width: 768px) {
  .rooms-page-container .arrow {
    font-size: 1.5em;
    padding: 0 5px;
  }
  .rooms-page-container .arrow.left {
    left: 10px;
  }
  .rooms-page-container .arrow.right {
    right: 10px;
  }
  .rooms-page-container .dots-container {
    bottom: 5px;
  }
  .rooms-page-container .dot {
    font-size: 0.8em;
    margin: 0 3px;
  }
}

@media (max-width: 480px) {
  .rooms-page-container .arrow {
    font-size: 1.2em;
  }
  .rooms-page-container .arrow.left {
    left: 5px; /* Еще уменьшим отступ на самых маленьких экранах */
  }
  .rooms-page-container .arrow.right {
    right: 5px; /* Еще уменьшим отступ на самых маленьких экранах */
  }
  .rooms-page-container .dot {
    font-size: 0.7em;
    margin: 0 2px;
  }
}

/* ============================================================== */
/* --- СТИЛИ ДЛЯ INFO PAGE (СТРАНИЦА ИНФОРМАЦИИ И ДОКУМЕНТОВ) --- */
/* --- ЗЕЛЕНОЕ ОКОШКО ТЕЛЕФОНОВ (СПЛОШНОЙ ФОН) И КОНТЕЙНЕР КАРТЫ --- */
/* --- УВЕЛИЧЕНЫ РАЗМЕРЫ ОКОШКА/ТЕКСТА, УМЕНЬШЕН ВЕРХНИЙ ОТСТУП, УБРАНЫ ТЕНИ ТЕКСТА, СИЛЬНЕЕ ЗАКРУГЛЕНЫ УГЛЫ --- */
/* ============================================================== */

/* Основной контейнер содержимого страницы */
.info-page-content {
  padding-top: 30px; /* Отступ сверху, чтобы контент не прилипал к навбару */
  padding-bottom: 30px; /* Отступ снизу перед футером */
  /* Bootstrap Container уже дает горизонтальные отступы и ограничивает ширину */
}

/* Стили для заголовков H1 и H2 на этой странице */
.info-page-content h1 {
  color: #333;
  margin-bottom: 30px;
  font-size: 2.5em;
  font-weight: bold;
}

.info-page-content h2 {
  color: #555;
  margin-bottom: 20px;
  font-size: 1.8em;
  font-weight: bold;
}

/* Стили для параграфов (общий текст, не в зеленом окошке) */
.info-page-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* ===== Стили для ЗЕЛЕНОГО ОКОШКА телефонов (СПЛОШНОЙ ФОН) ===== */
.info-page-content .phone-box.green-background {
  background-color: #28A745; /* Сплошной зеленый фон */
  padding: 10px; /* <-- ИЗМЕНЕНО: Уменьшен верхний отступ, увеличены боковые и нижний */
  border-radius: 20px; /* <-- ИЗМЕНЕНО: Сильнее закругляем углы */
  max-width: 400px; /* <-- ИЗМЕНЕНО: Увеличиваем максимальную ширину окошка */
  color: white; /* Цвет текста по умолчанию внутри - белый */
  margin: 0 auto 20px;
  display: flex; /* <-- ДОБАВЛЕНО: Используем flexbox для содержимого внутри окошка */
  flex-direction: column; /* <-- ДОБАВЛЕНО: Содержимое идет вертикально */
  gap: 10px; /* <-- ДОБАВЛЕНО: Отступ между строками */
  justify-content: center;
  align-items: center;
  text-align: center; /* Центрируем текст внутри окошка */
}

/* Убираем стандартные margin у <p> внутри зеленого окошка, так как используем gap */
.info-page-content .phone-box.green-background p {
  margin: 0;
  line-height: 1.4;
}


/* Стили текста и номеров телефонов внутри ЗЕЛЕНОГО окошка */
.info-page-content .phone-box.green-background .contact-text,
.info-page-content .phone-box.green-background .phone-number-text,
.info-page-content .phone-box.green-background .whatsapp-number-text {
  color: white; /* Текст белый */
  font-weight: normal; /* Обычный вес шрифта (для "Телефон:" и "WhatsApp:") */
  text-shadow: none; /* <-- ИЗМЕНЕНО: Убираем тени с текста внутри окошка */
}

/* Стили конкретно для номеров телефонов в зеленом окошке */
.info-page-content .phone-box.green-background .phone-number-text,
.info-page-content .phone-box.green-background .whatsapp-number-text {
  font-size: 1.5em; /* <-- ИЗМЕНЕНО: Увеличиваем размер шрифта номера */
  font-weight: bold; /* Оставим номера жирными */
}

/* Стили для текста-лейбла "Телефон - Бесплатная линия:" и "WhatsApp:" в зеленом окошке */
.info-page-content .phone-box.green-background .contact-text {
  font-size: 1.3em; /* <-- ИЗМЕНЕНО: Увеличиваем размер шрифта лейблов */
}


/* ===== Стили для блока КАРТЫ ===== */
.info-page-content .map-container {
  width: 100%;
  max-width: 800px; /* Ограничиваем максимальную ширину */
  margin: 20px auto; /* Отступ сверху/снизу и центрирование */
  overflow: hidden;
  border-radius: 8px;
  height: 400px; /* Высота контейнера карты */
  /* Стили для placeholder'а */
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  color: #666;
}


/* Стили для списка документов (ul) */
.info-page-content ul {
  margin-top: 20px;
}

/* Стили для пунктов списка документов (li) */
.info-page-content li {
  margin-bottom: 10px;
}

/* Стили для ссылок в списке документов */
.info-page-content ul a {
  color: #28A745;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.info-page-content ul a:hover {
  color: #218838;
  text-decoration: underline;
}

/* Медиа-запросы для адаптивности страницы информации */
@media (max-width: 768px) {
  .info-page-content h1 {
    font-size: 2em;
  }
  .info-page-content h2 {
    font-size: 1.5em;
  }
  .info-page-content p {
    font-size: 0.95em;
  }
  .info-page-content ul a {
    font-size: 0.95em;
  }
  .info-page-content .phone-box.green-background {
    padding: 8px 15px 15px 15px; /* <-- АДАПТИРОВАНО: Уменьшаем отступы на планшетах */
    max-width: 300px; /* <-- АДАПТИРОВАНО: Уменьшаем ширину */
  }
  .info-page-content .phone-box.green-background .contact-text {
    font-size: 1.2em; /* <-- АДАПТИРОВАНО: Размер текста в окошке */
  }
  .info-page-content .phone-box.green-background .phone-number-text,
  .info-page-content .phone-box.green-background .whatsapp-number-text {
    font-size: 1.3em; /* <-- АДАПТИРОВАНО: Размер номера в окошке */
  }
  .info-page-content .map-container {
    height: 300px;
    margin: 15px auto;
  }
}

@media (max-width: 480px) {
  .info-page-content h1 {
    font-size: 1.8em;
    margin-bottom: 20px;
  }
  .info-page-content h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
  }
  .info-page-content p {
    font-size: 0.9em;
    margin-bottom: 10px;
  }
  .info-page-content ul a {
    font-size: 0.9em;
  }
  .info-page-content .phone-box.green-background {
    padding: 5px 10px 10px 10px; /* <-- АДАПТИРОВАНО: Уменьшаем отступы на мобильных */
    max-width: 250px; /* <-- АДАПТИРОВАНО: Уменьшаем ширину */
  }
  .info-page-content .phone-box.green-background .contact-text {
    font-size: 1em; /* <-- АДАПТИРОВАНО: Размер текста в окошке */
  }
  .info-page-content .phone-box.green-background .phone-number-text,
  .info-page-content .phone-box.green-background .whatsapp-number-text {
    font-size: 1.1em; /* <-- АДАПТИРОВАНО: Размер номера в окошке */
  }
  .info-page-content .map-container {
    height: 250px;
    margin: 10px auto;
  }
}


@media (max-width: 1200px){
  .my-navbar .navbar-collapse .my-navbar-nav-container .menu .menu-item > .nav-link {
    font-size: 15px;
  }

  .menu-item {
    margin: 0 6px;
  }
}

@media (max-width: 767px){
  .rooms-page-container {
    margin: 10px auto;
    padding: 0 8px 50px;
  }
}

@media (max-width: 440px){
  .navbar-brand-qwe {
    font-size: 0.6em;
    padding: 0;
  }

  .navbar-brand-qwe:hover {
    text-decoration: none;
  }

  .navbar-brand-qwe span {
    font-size: 2em;
    margin-left: 25px;
  }
}