/**
 * WooCommerce Live Views - Styles
 * Ajustado para reduzir layout shift mantendo o comportamento.
 */

.wclv-viewers {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  line-height: 1.2;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  color: inherit;
}

/* Número com largura fixa para evitar "pulo" quando muda a quantidade de dígitos */
.wclv-viewers .wclv-count {
  font-weight: 700;
  display: inline-block;
  min-width: 3ch;     /* suporta até 3 dígitos sem mudar largura */
  text-align: right;
}

/* Mantém o texto numa linha só dentro do chip (evita repintar toda a linha) */
.wclv-viewers .wclv-label {
  white-space: nowrap;
}

/* Pontinho verde de status */
.wclv-viewers .wclv-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: #22c55e; /* green-500 */
  position: relative;
  opacity: .9;
  flex: 0 0 auto;
}

.wclv-viewers.wclv-on .wclv-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(34, 197, 94, .45);
  animation: wclv-pulse 2s ease-out infinite;
}

/* Animação só visual, não deve afetar o layout do texto */
@keyframes wclv-pulse {
  0% {
    transform: scale(.7);
    opacity: .9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}