html, body {
    /* Дозволяємо браузеру правильно розраховувати висоту */
    /*height: -webkit-fill-available;*/
    background-color: #ffffff; /* Робимо фон всього сайту таким же, як панель */
    margin: 0;
    padding: 0;
}

body {
    /* Додаємо відступ, щоб контент не залізав під панель */
    /*padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));*/
}
.bottom-nav {
    position: fixed;
    /* Це змушує панель триматися низу, навіть коли інтерфейс браузера змінюється */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: #e1ffda;
    z-index: 9999;
    display: flex;
    justify-content: space-around;
    
    
    /* Додаємо невеликий запас знизу для Android Chrome */
    /*padding-bottom: env(safe-area-inset-bottom, 0px);*/
    
    /* Хак для запобігання "прірви": додаємо невидиму розпорку знизу */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1), 0 50px 0 0 #e1ffda; 
}

/* ---------------- Глобальні налаштування ---------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-bottom: 80px; /* щоб navbar не перекривав контент */
}

/* ---------------- Контейнер bottom nav ---------------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;

  display: flex;
  padding: 8px; /* відступ від країв */
  background: #fff;

  gap: 8px; /* відстань між кнопками */
  overflow: hidden;
}

/* ---------------- Кнопки навігації ---------------- */
.nav-item {
  flex: 1 1 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 900;
  color: #000;
  text-decoration: none;
  text-align: center;

  background: transparent;
  border-radius: 12px;

  /* внутрішні відступи для більш “повного” блоку */
  padding: 10px 6px;      /* вертикально/горизонтально */
  min-height: 60px;        /* висота всіх кнопок однакова */
  line-height: 1.2;

  cursor: pointer;
  position: relative;

  transition:
    background-color 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
    
    border: 2px solid #939393;
    box-shadow: 0 0 0 3px color-mix(in srgb, #000000 10%, transparent);

border: 2px solid #939393;
    box-shadow: 0 0 0 3px 
 color-mix(in srgb, #000000 10%, transparent);
   transform: translateY(-6px);
}
/* ---------------- Іконки ---------------- */
.nav-item .icon {
  font-size: 25px;
  margin-bottom: 3px;
  transition: transform 0.2s ease;
}

/* ---------------- Hover ефект ---------------- */
.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* ---------------- Ефект натискання ---------------- */
.nav-item:active {
  transform: scale(0.92);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

/* ---------------- Роздільники між кнопками ---------------- */
.nav-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(0, 0, 0, 0.15);
}

/* ---------------- Активна кнопка ---------------- */
.nav-item.active {
  background-color: #0f5700;
  color: #fff;
  pointer-events: none;
  opacity: 0.95;

  /* padding більший для зеленого блоку */
  padding: 14px 8px;
  min-height: 60px; /* висота така ж, як у всіх */
}

/* активна іконка трохи більша */
.nav-item.active .icon {
  transform: scale(1.2);
}

/* відключаємо hover/active для активної кнопки */
.nav-item.active:hover,
.nav-item.active:active {
  transform: none;
  box-shadow: none;
}