/*-------------------Тест боковой панели--------*/
/* 1. Базовый вид кнопки-сообщения в покое */
.wrapper .popular.section_menu .level_0 li a {
  display: inline-block;
  padding: 8px 16px 8px 20px; 
  margin: 6px;
  color: #4a4a4a;
  background-color: transparent;
  border: 1px solid #b5b5b5;
  border-radius: 20px 20px 20px 0px; /* Эффект мессенджера */
  text-decoration: none;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 500;
  
  /* Важно: transition плавно анимирует даже те цвета, которые приходят из JS */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* 2. Эффект физического сдвига при наведении (цвета сюда НЕ пишем!) */
.wrapper .popular.section_menu .level_0 li a:hover {
  transform: translateY(-2px); 
}

/* 3. Сетка и структура списка (чтобы кнопки стояли в ряд) */
.wrapper .popular.section_menu .level_0 {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.wrapper .popular.section_menu {
background-color: hsla(0, 60%, 100%, 0.1) !important;
}

/* Начальное состояние кнопок (они невидимы и чуть опущены) */
.wrapper .popular.section_menu .level_0 li {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Состояние после активации (плавный взлет и проявление) */
.wrapper .popular.section_menu .level_0 li.animated {
  opacity: 1;
  transform: translateY(0);
}