body {
  background: linear-gradient(to bottom right, #221F26, #403E43, #0EA5E9);
  color: white;
  font-family: 'Noto Sans Georgian', Arial, sans-serif;
  font-weight: 700; /* Жирный шрифт */
  background-attachment: fixed;
}


/* флеш сообщения */
.flash.success {
  position: fixed;
  top: 50%; /* Положение сверху - на 50% экрана */
  left: 50%; /* Положение слева - на 50% экрана */
  transform: translate(-50%, -50%); /* Центрирование по вертикали и горизонтали */
  width: auto; /* Ширина автоматически регулируется содержимым */
  max-width: 300px; /* Максимальная ширина блока */
  height: 50px; /* Высота автоматически регулируется содержимым */
  padding: 10px;
  background-color: #42a429;
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.981);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5; /* Межстрочное расстояние для лучшей читаемости */
  overflow: hidden; /* Обрезаем лишний текст, если он не помещается */
}

.flash.error {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 300px;
  padding: 10px;
  background-color: #ff0000;
  box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.981);
  z-index: 9999;
  border-radius: 5px;
  color: #fff; /* цвет текста */
  text-align: center; /* выравнивание текста по центру */
  font-family: Arial, sans-serif; /* выбранный шрифт */
}



.modal a {
  text-decoration: none;
} 


/* Стили для экрана загрузки */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #221F26, #403E43, #0EA5E9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Контейнер для анимации */
.loading-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Анимация спинеров */
.loading-spinner {
  width: 20px;
  height: 20px;
  background-color: #3498db;
  border-radius: 50%;
  margin: 0 10px; /* Расстояние между кружочками */
  opacity: 0;
  animation: bounce 0.6s ease-in-out infinite alternate;
}

/* Анимация прыжка для спинеров */
@keyframes bounce {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px);
    opacity: 0.5;
  }
}

/* Плавный переход */
.loading-screen .loading-spinner:nth-child(1) {
  animation-delay: 0s;
}
.loading-screen .loading-spinner:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-screen .loading-spinner:nth-child(3) {
  animation-delay: 0.4s;
}
.loading-screen .loading-spinner:nth-child(4) {
  animation-delay: 0.6s;
}

/* Стили для основного контента страницы */
#page-content {
  display: none;
}

/*модельное окно меню*/
    /* Стили для модального окна */

.menu_button {
    position: absolute; /* Абсолютное позиционирование */
    top: 5px; /* Располагаем кнопку вверху */
    right: 20px; /* Располагаем кнопку вправо */
    width: 75px; /* Задаем ширину кнопки */
    height: 75px; /* Задаем высоту кнопки */
}

#openModalButton {
    width: 100px; /* Заполняем всю доступную ширину */
    height: 100%; /* Заполняем всю доступную высоту */
    
}

.menu_block {
    position: fixed; /* Задаем позицию блока как фиксированную */
    top: 0; /* Закрепляем блок в верхней части окна браузера */
    right: 0; /* Закрепляем блок в правой части окна браузера */

}

#message-container {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: white;
  padding: 15px;
  border-radius: 5px;
  z-index: 9999;
}

#message-container.success {
  background-color: #4CAF50;
}

#message-container.error {
  background-color: #c72b1f;
}

li {
  margin-bottom: 8px;
}


/* Общие стили для модального окна меню */
.modal_menu {
  display: none; /* Скрыть модальное окно по умолчанию */
  position: fixed; /* Фиксированное позиционирование */
  z-index: 5; /* Поверх всех элементов */
  left: 0;
  top: 0;
  width: 100%; /* Полная ширина */
  height: 100%; /* Полная высота */
  background: linear-gradient(to bottom right, #221F26, #403E43, #0EA5E9);
}



@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}


/* ---------------------------- */

.modal_menu a {
  text-decoration: none;
}

.menu-item {
  background: rgba(51, 51, 51, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Расстояние между иконкой и текстом */
  padding: 1.2rem; /* Увеличиваем внутренний отступ */
  text-align: center;
  color: white; /* Белый цвет текста */
}

/* Мобильный стиль */
@media (max-width: 768px) {
  .menu-item {
    padding: 0.2rem; /* Уменьшаем отступы для мобильных устройств */
 
  }

}
.menu-item:hover {
  background: rgba(15, 160, 206, 0.2);
  transform: scale(1.1); /* Увеличиваем масштаб при наведении */
  box-shadow: 0 0 20px rgba(15, 160, 206, 0.1);
}
.quote-box {
  background: rgba(51, 51, 51, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.quote-box:hover {
  background: rgba(15, 160, 206, 0.2);
}



/* Анимация появления сверху вниз */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out forwards;
}

/* Задержка анимации для каждого элемента */
.menu-item, .quote-box, .footer-item, h1 {
  opacity: 0; /* Начальное состояние: невидимый */
}

.menu-item {
  animation-delay: 0.2s;
}

.quote-box {
  animation-delay: 0.4s;
}

.footer-item {
  animation-delay: 0.6s;
}

h1 {
  animation-delay: 0.1s;
}

button {
  animation-delay: 0.3s;
}

/* Анимация увеличения при наведении на элементы списка */
/* .col-md-4, .menu-item, .bi, .mt-4 {
  transition: transform 0.3s ease; 
}

.col-md-4:hover, .menu-item:hover, .bi:hover, .mt-4:hover {
  transform: scale(1.05); 
} */

/* Стили для модального окна */
.modal-reservation {
  display: none; /* Скрыто по умолчанию */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #221F26, #403E43, #0EA5E9); /* Полупрозрачный фон */
  backdrop-filter: blur(10px); /* Размытие фона */
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.menu_modal_content {
  border-radius: 10px;
  padding: 2rem;
  width: 90%;
  max-width: 1000px;
  color: white;
  position: relative;
  /* Центрирование по горизонтали и вертикали */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Убедитесь, что модальное окно поверх других элементов */
}


.modal-reservation-content {
  background: rgba(51, 51, 51, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
  color: white;
  position: relative;
  animation: fade-in-up 0.3s ease-out;
}

.modal-reservation-content h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-align: center;
}

.modal-reservation-content input,
.modal-reservation-content select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}




.modal-reservation-content input:focus,
.modal-reservation-content select:focus {
  outline: none;
}



.modal-reservation-content button:hover {
  background-color: #0d8ec7;
}


.modal-reservation-content .close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-reservation-content .close:hover {
  color: #0EA5E9;
}

.modal-reservation {
  color: white;
}

/* Новые стили для кнопки */
.modal-reservation-content button {
  background-color: #067075; /* Синий фон */
  color: white; /* Белый текст */
  border: none;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal-reservation-content button:hover {
  background-color: #0d8ec7; /* Темно-синий при наведении */
}


/* Контейнер для списка дат */
.dates_block {
display: flex;
justify-content: space-between;
gap: 20px; /* Расстояние между блоками */
margin-top: 1.2rem;
}

/* Блок для города */
.spb_dates_block, .msk_dates_block {
flex: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 15px;
overflow-y: auto; /* Включение прокрутки */
max-height: 300px; /* Максимальная высота блока */
}

.spb_dates_block label, .msk_dates_block label {
display: block;
font-size: 1rem;
font-weight: bold;
margin-bottom: 10px; /* Отступ снизу для метки */
}

/* Стили для списка */
.spb_list_block ul, .msk_list_block ul {
list-style: none;
padding: 0;
margin: 0;

}

.spb_list_block li, .msk_list_block li {
margin-bottom: 8px; /* Отступ снизу для элементов списка */
border: 1px solid rgba(255, 255, 255, 0.1);
}

.spb_list_block li a, .msk_list_block li a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
}

.spb_list_block li a:hover, .msk_list_block li a:hover {
background-color: #007bff;
color: #fff;
border-radius: 4px;
}

/* Стили для прокрутки */
.spb_list_block, .msk_list_block {
max-height: 200px; /* Максимальная высота прокручиваемого блока */
overflow-y: auto; /* Включение прокрутки */
}


/* Стилизация полосы прокрутки */
.spb_list_block::-webkit-scrollbar,
.msk_list_block::-webkit-scrollbar {
width: 4px; /* Ширина полосы прокрутки */
}

/* Стилизация трека (фона) полосы прокрутки */
.spb_list_block::-webkit-scrollbar-track,
.msk_list_block::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
border-radius: 4px; /* Закругление углов */
}

/* Стилизация бегунка (самой полосы прокрутки) */
.spb_list_block::-webkit-scrollbar-thumb,
.msk_list_block::-webkit-scrollbar-thumb {
background: #067075; /* Цвет бегунка */
border-radius: 4px; /* Закругление углов */
transition: background 0.3s ease; /* Плавное изменение цвета */
}

/* Изменение цвета бегунка при наведении */
.spb_list_block::-webkit-scrollbar-thumb:hover,
.msk_list_block::-webkit-scrollbar-thumb:hover {
background: #0d8ec7; /* Темно-синий при наведении */
}


.close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-modal:hover {
  color: #0EA5E9; /* Изменение цвета при наведении */
}