<nav class="radikalwp-nav-bottombar"><a class="radikalwp-nav-bottombar-item" href="#"><span class="radikalwp-nav-bottombar-icon">⌂<//span>خانه<//a><a class="radikalwp-nav-bottombar-item is-active" href="#"><span class="radikalwp-nav-bottombar-icon">▦<//span>دسته‌ها<//a><a class="radikalwp-nav-bottombar-item" href="#"><span class="radikalwp-nav-bottombar-icon">♡<//span>علاقه‌مندی<//a><a class="radikalwp-nav-bottombar-item" href="#"><span class="radikalwp-nav-bottombar-icon">👤<//span>حساب<//a><//nav>

.radikalwp-nav-bottombar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 50;
  display: flex;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.radikalwp-nav-bottombar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-decoration: none;
  position: relative;
  transition: color .25s ease;
}
.radikalwp-nav-bottombar-icon { font-size: 20px; line-height: 1; }
.radikalwp-nav-bottombar-item.is-active { color: #4f46e5; }
.radikalwp-nav-bottombar-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 22px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: #4f46e5;
}
@media (min-width: 768px) {
  .radikalwp-nav-bottombar { display: none; }
}