/* ############# Самые популярные запросы поиска / popular_search ################## */
.popular_search {
    font-size: 14px; /* Размер шрифта */
    /* font-weight: 400; /* Нормальная жирность текста */
    color: #001D38; /* Цвет текста */
    margin-bottom: 20px; /* Отступ снизу */
  }
  
  .popular_search_list_on_off {
    display: flex; /* Устанавливает Flexbox для горизонтального размещения */
    /* align-items: center; /* Выравнивает элементы по вертикали */
    gap: 15px; /* Расстояние между элементами */
    padding-bottom: 5px;
  }
  /* ############# toggle-container: ########################################## */
  .toggle-container {
    position: relative;
    display: inline-block;
  }
  /* ############# / toggle-container ########################################## */



  /* ############# nav: ########################################## */
  /* ############# Переключатель ################## */
.onoffswitch-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Выравниваем влево */
  gap: 10px;
  position: relative; /* Относительное позиционирование для связи с панелью */
}
.onoffswitch {
  position: relative;
  width: 59px;
  height: 26px;
}

.onoffswitch-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 26px;
  border-radius: 26px;
  background-color: #FFE3E3;
  transition: background-color 0.3s ease-in-out;
  position: relative;
  border: 1px solid #c9c9c9;
}

.onoffswitch-label .onoffswitch-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onoffswitch-label .onoffswitch-switch {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 33px;
  width: 22px;
  background: #D9D9D9;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

#toggle-nav:checked + .onoffswitch-label {
  background-color: #02BA0B;
}

#toggle-nav:checked + .onoffswitch-label .onoffswitch-switch {
  right: 2px;
}

/* Переключатель */
.onoffswitch-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 15px;
  z-index: 10; /* Устанавливаем более высокий z-index */
  position: relative;
}

/* ########## nav Панель навигации: ################## */
/* Панель навигации */
.toggle-nav {
  /* position: absolute; */
  top: 40px; /* Смещение вниз */
  left: 0;
  width: 1200px; /* Независимая ширина панели */
  background-color: #f8f9fa;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  z-index: 1000; /* Поверх переключателя */
}

#toggle-switch:checked ~ .toggle-nav {
  max-height: 500px; /* Достаточная высота для содержимого */
}

.toggle-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toggle-nav ul li {
  margin: 5px 0;
}

.toggle-nav ul li a {
  color: #0073e6;
  text-decoration: none;
  font-size: 12px;
  display: block;
  padding: 5px 10px;
  border-radius: 4px;
}

.toggle-nav ul li a:hover {
  background-color: #e9ecef;
  color: #005bb5;
}

/* ########## / nav Панель навигации ################## */


  
  .popular_search h2 {
    font-size: 20px;
    margin-right: 0px; /* Отступ справа для заголовка */
    display: inline-block; /* Устанавливаем отображение заголовка в одну линию */
    margin-bottom: 0; /* Убираем нижний отступ */
  }
  
  .popular_search ul {
    list-style: none; /* Убираем маркеры списка */
    padding: 0; /* Убираем внутренние отступы */
    margin: 0; /* Убираем внешние отступы */
    display: flex; /* Устанавливаем горизонтальное расположение */
    flex-wrap: wrap; /* Перенос элементов на новую строку при нехватке места */
    gap: 10px; /* Пространство между элементами */
  }
  
  .popular_search ul li {
    margin: 0; /* Убираем дублирующиеся отступы */
    line-height: 0.8; /* Регулируем межстрочное расстояние */
  }
  
  .popular_search ul li a {
    color: #01539b; /* Основной цвет текста ссылок */
    /* font-size: 16px; /* Размер шрифта */
    /* font-weight: 400; /* Нормальная жирность текста */
    text-decoration: underline; /* Подчёркивание текста */
    text-decoration-color: rgba(1, 83, 155, 0.4); /* Цвет линии подчёркивания (на 70% светлее) */
    transition: color 0.3s ease, text-decoration-color 0.3s ease; /* Плавные переходы */
  }
  
  .popular_search ul li a:hover {
    color: #02447a; /* Цвет текста при наведении */
    text-decoration: none; /* Убираем подчеркивание */
  }
  /* ############# / Самые популярные запросы поиска / popular_search ################## */


/* ############## modal-menu ######################################## */
.modal-container {
  position: relative;
}

.modal-checkbox {
  display: none;
}

.modal-label {
  cursor: pointer;
  background-color: #0073e6;
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  display: inline-block;
}

.modal-menu {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  max-width: 600px;
  background-color: #f8f9fa;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 20px;
  display: none; /* Скрыто по умолчанию */
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-checkbox:checked + .modal-label + .modal-menu {
  display: block;
}

.modal-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-menu ul li {
  margin: 5px 0;
}

.modal-menu ul li a {
  color: #0073e6;
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 5px 10px;
  border-radius: 4px;
}

.modal-menu ul li a:hover {
  background-color: #e9ecef;
  color: #005bb5;
}

  /* ############## / modal-menu ######################################## */