/**
 * Счётчик — бейдж на кнопках навигации.
 * Эталон: красный кружок на «Мой тариф».
 */

:root {
  --shethik-bg: #ef4444;
  --shethik-bg-alert: #ef4444;
  --shethik-color: #ffffff;
  --shethik-font-family: Arial, sans-serif;
  --shethik-font-size: 11px;
  --shethik-font-weight: 700;
  --shethik-min-size: 18px;
  --shethik-pad-x: 5px;
  --shethik-ring: rgba(63, 71, 157, 0.95);
}

.shethik,
.zlata-nav-channel-badge,
.zlata-notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: var(--shethik-min-size);
  height: var(--shethik-min-size);
  padding: 0 var(--shethik-pad-x);
  border-radius: 999px;
  background: var(--shethik-bg);
  color: var(--shethik-color);
  font-family: var(--shethik-font-family);
  font-size: var(--shethik-font-size);
  font-weight: var(--shethik-font-weight);
  line-height: var(--shethik-min-size);
  text-align: center;
  display: none;
  z-index: calc(var(--zlata-topbar-z, 200010) + 1);
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--shethik-ring);
}

.zlata-nav-channel-badge {
  /* Inside the nav cell (top-right), not outside — avoids tuck under neighbor.
     Marker: nav_badge_cell_right_v1 */
  top: -4px;
  right: 2px;
  left: auto;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 10px;
  padding: 0 4px;
  z-index: 4;
}

.zlata-nav-channel-badge.is-alert,
.shethik.is-alert {
  background: var(--shethik-bg-alert);
}

.zlata-nav-link.channel-badge-host,
.zlata-nav-dropdown-button.channel-badge-host,
.zlata-nav-dropdown-link.channel-badge-host,
.zlata-notification-button {
  position: relative;
  overflow: visible;
}

/* Topbar cells: reserve right edge for badge so label does not fight the counter. */
.zlata-nav-singles > .zlata-nav-link.channel-badge-host,
.zlata-nav-groups > .zlata-nav-dropdown > .zlata-nav-dropdown-button.channel-badge-host {
  padding-right: 18px;
}

.zlata-nav-dropdown-link.channel-badge-host {
  padding-right: 28px;
}

.zlata-nav-dropdown-link .zlata-nav-channel-badge {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.zlata-notification-count {
  display: none;
}