/* ============================================================
   Нижняя навигация-пилюля — как таб-бар приложения: стекло,
   по центру снизу, активный пункт синий.
   ============================================================ */

/* Запас под пилюлю живёт ВНУТРИ футера (footer.css) — паддинг на body
   оставлял пустое поле ПОСЛЕ футера, и страница скроллилась дальше него. */

.nav-pill {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: stretch;
  gap: 4px;
  /* Тонкий бортик: подсветка активного пункта не доходит до края всего 2px. */
  padding: 2px;
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.62);
  border: 1px solid var(--stroke);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.nav-pill a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 92px;
  padding: 10px 18px;
  border-radius: 999px;
  font: 500 11.5px/1 var(--font);
  color: var(--text-soft);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav-pill a:hover { color: var(--text); text-decoration: none; }

.nav-pill svg { width: 22px; height: 22px; }

.nav-pill a.active {
  color: var(--accent-bright);
  background: rgba(48, 112, 243, 0.14);
}

/* Языковой пункт: флаг+код, меню 28 языков раскрывается вверх */
.nav-lang { position: relative; }
.nav-lang-flag { font-size: 16px; line-height: 1; }

@media (max-width: 480px) {
  .nav-pill a { min-width: 72px; padding: 9px 10px; }
}