/* ═══════════════════════════════════════════════════════════════
   POINT BADGE — reusable <x-point-badge>
   ═══════════════════════════════════════════════════════════════ */

:root {
  --stmw-pb-primary: #6337fe;
  --stmw-pb-accent: #c4841a;
}

.stmw-point-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  color: #5a3ad1;
  background: color-mix(in srgb, var(--stmw-pb-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--stmw-pb-primary) 22%, transparent);
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.stmw-point-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.stmw-point-badge--xs {
  font-size: 10px;
  padding: 2px 7px;
  gap: 3px;
}

.stmw-point-badge--lg {
  font-size: 13px;
  padding: 5px 12px;
  gap: 5px;
}

.stmw-point-badge-icon {
  font-size: 13px;
  color: currentColor;
  opacity: 0.85;
}

.stmw-point-badge--xs .stmw-point-badge-icon { font-size: 12px; }
.stmw-point-badge--lg .stmw-point-badge-icon { font-size: 16px; }

.stmw-point-badge-value {
  font-weight: 800;
  letter-spacing: -0.2px;
}

.stmw-point-badge-unit {
  font-weight: 600;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.85em;
}

.stmw-point-badge-sep {
  opacity: 0.4;
  margin: 0 2px;
}

.stmw-point-badge-bonus {
  font-weight: 700;
  color: var(--stmw-pb-accent);
}

html[data-bs-theme="dark"] .stmw-point-badge {
  color: #c8b5ff;
  background: color-mix(in srgb, var(--stmw-pb-primary) 22%, transparent);
  border-color: color-mix(in srgb, var(--stmw-pb-primary) 40%, transparent);
}

html[data-bs-theme="dark"] .stmw-point-badge-bonus {
  color: #ffd27a;
}

/* ───────── Hero points line (trails/show) ───────── */
.stmw-tp-hero-points {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(207, 254, 90, 0.35);
  color: #fff;
  font-size: 13px;
  backdrop-filter: blur(4px);
}

.stmw-tp-hero-points i {
  font-size: 18px;
  color: #cffe5a;
}

.stmw-tp-hero-points strong {
  color: #cffe5a;
  font-weight: 800;
  letter-spacing: -0.2px;
}