/* menu.css */

/* Подключаем шрифт */
@font-face {
  font-family: 'SmoothRelief';
  src: url('../assets/fonts/SmoothRelief-Regular.woff2') format('woff2'),
       url('../assets/fonts/SmoothRelief-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Используем swap для улучшения загрузки */
}


/* Добавляем стили для нижнего меню */
.bottom-menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(1, 49, 29, 0.4); /* Полупрозрачный черный фон */
    display: flex;
    justify-content: space-around;
    padding: 8px 8px; /* Добавим немного паддинга сверху и снизу */
    box-shadow: 0 -1px 10px rgba(0, 167, 22, 0.281);
    z-index: 900; /* Обеспечиваем, чтобы меню было над другими элементами */
    -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: #36a134; /* Зелёный цвет текста по умолчанию */
    color: #5d7c55; /* Серый цвет текста по умолчанию */
    font-size: 12px;
    margin-top: 5px;
    font-family: 'SmoothRelief', sans-serif; /* Используем подключенный шрифт */
    transition: color 0.2s ease; /* Плавное изменение цвета текста */
  }
  
  .menu-icon {
    width: 30px;
    height: 30px;
    /*filter: grayscale(100%) brightness(90%); /* Иконки по умолчанию серого цвета */
    /*transition: filter 0.2s ease; /* Плавный переход для фильтра */
  }
  
  /* Стили для активного элемента */
  .menu-item.active .menu-icon {
    filter: grayscale(0%) brightness(100%); /* Иконка становится ярче и цветной */
  }
  
  .menu-item.active span {
    color: #cfcfcf; /* Текст становится цветом #cfcfcf */
  }