.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF; /* Непрозрачный белый, как у хедера */
  border-top: 1px solid var(--color-border); /* Добавляем верхнюю границу как у хедера */
  z-index: 100;
  padding-bottom: var(--safe-area-inset-bottom); /* Учитываем безопасную область снизу */
  /* Удалены эффекты размытия и прозрачности */
}

.container {
  max-width: 28rem;
  margin: 0 auto;
  padding: 4px var(--spacing-medium); /* Уменьшенный верхний и нижний отступ */
  width: 100%;
  box-sizing: border-box;
}

.list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 0; /* Уменьшенный верхний и нижний отступ */
}

.item {
  width: 70px; /* Фиксированная ширина */
  height: 70px; /* Фиксированная высота */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border: none; /* Убираем обводку */
  outline: none;
  box-shadow: none;
  border-radius: var(--border-radius);
  background: linear-gradient(135deg, #ffffff, #e0e0e0); /* Более контрастный градиент */
  color: var(--color-text);
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.2s;
}

.item:hover {
  opacity: 1;
}

.active {
  background: linear-gradient(135deg, var(--color-primary), #1976D2); /* Более яркий градиент */
  color: white;
  box-shadow: 0 2px 8px rgba(43, 156, 255, 0.3);
  opacity: 1;
}

.active:hover {
  opacity: 1;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px; /* Увеличенная высота */
  margin-bottom: 4px;
}

.icon svg {
  width: 24px;
  height: 24px;
  /* Убедимся, что все иконки имеют одинаковый размер */
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
}

.label {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap; /* Предотвращаем перенос текста */
}
