/* =============================================================================
   SoulCore Billing - Status Badges
   TASK-004: Status Badge Component
   =============================================================================

   Статусы: pending, completed, failed, cancelled, refunded
   Размеры: sm, md (default), lg
   Опции: animated (для pending), icon
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base Badge Styles
   ----------------------------------------------------------------------------- */
.billing-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

/* -----------------------------------------------------------------------------
   Size Variants
   ----------------------------------------------------------------------------- */
.billing-badge--sm {
  padding: 0.125rem var(--space-xs);
  font-size: 0.625rem;
  gap: 0.125rem;
}

.billing-badge--sm .billing-badge__icon {
  width: 0.625rem;
  height: 0.625rem;
}

.billing-badge--md {
  /* Default size - uses base styles */
}

.billing-badge--md .billing-badge__icon {
  width: 0.75rem;
  height: 0.75rem;
}

.billing-badge--lg {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-size-sm);
  gap: var(--space-xs);
}

.billing-badge--lg .billing-badge__icon {
  width: 1rem;
  height: 1rem;
}

/* -----------------------------------------------------------------------------
   Status Variants
   ----------------------------------------------------------------------------- */
.billing-badge--pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.billing-badge--completed {
  background: var(--success-bg);
  color: var(--success);
}

.billing-badge--failed {
  background: var(--error-bg);
  color: var(--error);
}

.billing-badge--cancelled {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

.billing-badge--refunded {
  background: var(--info-bg);
  color: var(--info);
}

/* -----------------------------------------------------------------------------
   Icon Styles
   ----------------------------------------------------------------------------- */
.billing-badge__icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

/* -----------------------------------------------------------------------------
   Pulse Animation for Pending Status
   ----------------------------------------------------------------------------- */
.billing-badge--animated {
  animation: billing-badge-pulse 2s ease-in-out infinite;
}

@keyframes billing-badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .billing-badge--animated {
    animation: none;
  }
}