/* ============================================================
   LEGION ICONS PRO — визуальные пилюли вокруг иконок в навигации
   ============================================================ */

/* ----- Cabinet nav: иконка в красной/золотой пилюле ----- */
.cabinet-nav-btn .cabinet-nav-ico {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  margin-right: .15rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  color: rgba(245, 245, 245, 0.65);
  flex-shrink: 0;
}
.cabinet-nav-btn:hover .cabinet-nav-ico {
  background: rgba(255, 3, 8, 0.08);
  border-color: rgba(255, 3, 8, 0.25);
  color: #fff;
  transform: translateY(-1px);
}
.cabinet-nav-btn.is-active .cabinet-nav-ico {
  background: linear-gradient(135deg, var(--brand, #ff0308) 0%, var(--brand-hover, #d90206) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 18px rgba(255, 3, 8, 0.32);
}
.cabinet-nav-btn--promo:hover .cabinet-nav-ico,
.cabinet-nav-btn--promo.is-active .cabinet-nav-ico {
  background: linear-gradient(135deg, #f3c34a 0%, #c9a227 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #1a1208;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 18px rgba(243, 195, 74, 0.32);
}

/* ----- Header nav: маленькие dot-pill вокруг иконки ----- */
.header-nav a .nav-ico {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  margin-right: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  transition: all .15s;
}
.header-nav a:hover .nav-ico {
  background: rgba(255, 3, 8, 0.12);
  color: #fff;
}
.header-nav a.nav-active .nav-ico {
  background: var(--brand, #ff0308);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 14px rgba(255, 3, 8, 0.35);
}

/* ----- Иконки внутри SVG: чуть мягче duotone overlay ----- */
.icon--duo {
  vertical-align: -2px;
}

/* ----- Иконка категории магазина: больше воздуха ----- */
.shop-cat-icon {
  margin-bottom: .25rem;
}
.shop-cat-icon .icon {
  transition: transform .2s ease;
}
.shop-cat:hover .shop-cat-icon .icon,
.shop-cat.is-active .shop-cat-icon .icon {
  transform: scale(1.08);
}

/* ----- В админке: вернуть простые иконки (без пилюль) ----- */
.admin-nav-btn .admin-nav-ico {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
}

/* ----- Профиль аватар: тоньше рамка + лёгкое свечение ----- */
.cabinet-profile-avatar {
  box-shadow:
    0 0 0 2px rgba(255, 3, 8, 0.4),
    0 0 24px rgba(255, 3, 8, 0.18);
  border-radius: 12px;
}

@media (max-width: 859px) {
  .cabinet-nav-btn .cabinet-nav-ico {
    width: 28px;
    height: 28px;
  }
}