/* ZIP-level territories on a real map */

.bbi-zs-card .bbi-card__head { padding: 14px 14px 0 18px; }
.bbi-zs-status { margin-left: 4px; }
.bbi-zs-go { margin-left: auto; height: 38px; padding: 0 16px; font-size: 14px; }
.bbi-zs-go svg { width: 15px; height: 15px; }

.bbi-zs-svg { position: absolute; }
.bbi-zs-canvas .bbi-map__area { stroke-width: 0.5; }
.bbi-zs-dots circle { fill: rgba(30, 42, 74, 0.55); }

.bbi-zs-river,
.bbi-zs-place {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(30, 42, 74, 0.45);
  pointer-events: none;
}

.bbi-zs-river { left: 286px; top: 404px; letter-spacing: 0.04em; font-style: italic; color: #5b8ac9; }
.bbi-zs-place--pa { left: 18px; top: 14px; }
.bbi-zs-place--nj { right: 18px; top: 14px; }

.bbi-zs-side {
  position: absolute;
  left: 500px;
  top: 62px;
  width: 204px;
}

.bbi-zs-side__title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bbi-muted);
}

.bbi-zs-metro,
.bbi-zs-terr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--bbi-line);
  background: #fff;
}

.bbi-zs-metro { transition: opacity 0.3s ease; }
.bbi-zs-metro.is-off { display: none; }
.bbi-zs-metro i { width: 28px; height: 28px; border-radius: 9px; background: #9aa6c4; flex: none; }
.bbi-zs-terr .bbi-avatar { width: 30px; height: 30px; }

.bbi-zs-metro b,
.bbi-zs-terr b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--bbi-ink);
  white-space: nowrap;
}

.bbi-zs-terr b i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bbi-zs-metro small,
.bbi-zs-terr small { display: block; font-size: 11px; font-weight: 600; color: var(--bbi-muted); }

.bbi-zs-metro em,
.bbi-zs-terr em {
  margin-left: auto;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  color: var(--bbi-ink);
  font-variant-numeric: tabular-nums;
}

.bbi-zs-metro em { color: var(--bbi-bad); }

.bbi-zs-result {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--bbi-good-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--bbi-good);
}

.bbi-zs-result svg { width: 13px; height: 13px; flex: none; }

.bbi-zs-tip { width: 210px; padding: 12px 14px; }

.bbi-zs-tip__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bbi-zs-tip__head i { width: 12px; height: 12px; border-radius: 4px; background: #5e72e4; }
.bbi-zs-tip__head b { font-size: 15px; font-weight: 800; color: var(--bbi-ink); }
.bbi-zs-tip__head .bbi-tag { margin-left: auto; }

.bbi-zs-tip__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: 13px;
}

.bbi-zs-tip__grid span { color: var(--bbi-muted); font-weight: 600; }
.bbi-zs-tip__grid b { text-align: right; color: var(--bbi-ink); font-weight: 800; }