/* menu.css */

/* Добавляем стили для нижнего меню */
.bottom-menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный фон */
    display: flex;
    justify-content: space-around;
    padding: 10px 10px; /* Добавим немного паддинга сверху и снизу */
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
    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: #676767; /* Серый цвет текста по умолчанию */
    font-size: 12px;
    margin-top: 5px;
    transition: color 0.2s ease; /* Плавное изменение цвета текста */
  }
  
  .menu-icon {
    width: 24px;
    height: 24px;
    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 */
  }