/* menu.css */

/* Подключаем шрифт */
@font-face {
    font-family: 'SourceSans3'; /* Даем корректное имя шрифту */
    src: url('../assets/fonts/SourceSans3-Semibold.woff2') format('woff2'),
         url('../assets/fonts/SourceSans3-Semibold.woff') format('woff');
    font-weight: 600; /* Semibold обычно соответствует 600 */
    font-style: normal;
    font-display: swap; /* Используем swap для улучшения загрузки */
  }
  
  /* Добавляем стили для нижнего меню */
  .bottom-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный фон */
      display: flex;
      justify-content: space-around;
      padding: 8px 8px; /* Добавим немного паддинга сверху и снизу */
      box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
      z-index: 950; /* НОВЫЙ КОММЕНТАРИЙ: Увеличен до 2000, чтобы быть выше #headerContainer (z-index: 1000) */
      -webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапе на iOS/Android */
  }
  
  .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      outline: none; /* Убираем обводку */
      -webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапе */
  }
  
  .menu-item:focus,
  .menu-item:active {
      outline: none; /* Убираем обводку при фокусе и активном состоянии */
  }
  
  .menu-item span {
      color: #676767; /* Серый цвет текста по умолчанию */
      font-size: 14px;
      margin-top: 5px;
      font-family: 'SourceSans3', sans-serif; /* Используем подключенный шрифт */
      font-weight: 600; /* Semibold */
      transition: color 0.2s ease; /* Плавное изменение цвета текста */
  }
  
  .menu-icon {
      width: 28px;
      height: 28px;
      filter: grayscale(100%) brightness(90%); /* Иконки по умолчанию серого цвета */
      transition: filter 0.2s ease; /* Плавный переход для фильтра */
      transform: translateY(1px); /* НОВЫЙ КОММЕНТАРИЙ: Сдвигаем иконки вниз на 2 пикселя без влияния на высоту меню */
      margin-top: 2px; /* НОВЫЙ КОММЕНТАРИЙ: Сдвигаем иконки вниз на 2 пикселя, текст остаётся на месте */
  }
  
  /* Стили для активного элемента */
  .menu-item.active .menu-icon {
      filter: grayscale(0%) brightness(100%); /* Иконка становится ярче и цветной */
  }
  
  .menu-item.active span {
      color: #cfcfcf; /* Текст становится цветом #cfcfcf */
  }