/* Shared "live/upcoming/ended" status-badge vocabulary + pulsing dot — used by the Home "Live &
   Upcoming Auctions" widget, the Auctions Listing page, and the Category page badge (client QA
   feedback, 2026-09-08: these 3 surfaces each showed the identical live/upcoming concept under 3
   separate, differently-named class sets — .kbauc-home-badge-*, .kbauc-listing-badge-*,
   .kbauc-cat-badge-*). Each surface still keeps its own positioning/layout rules (a corner overlay
   on a card image vs. a chip row appended after an existing theme card's own button-group are
   genuinely different contexts) — only the STATE naming and the shared visual pieces (pill shape,
   dot pulse) are unified here, referenced by class name from all 3 surfaces' own templates/JS. */
.kbauc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
}

/* Falls back to the same defaults each surface used before unification; a surface that honors the
   admin-configurable Customization colors (kb_auction_color_badge_live/upcoming/ended) sets these
   same custom-property names from its own scope, same pattern as before, just a shared name now. */
.kbauc-badge-live {
    background: var(--kbauc-badge-live, #dc2626);
}

.kbauc-badge-upcoming {
    background: var(--kbauc-badge-upcoming, #4f46e5);
}

.kbauc-badge-ended {
    background: var(--kbauc-badge-ended, #64748b);
}

.kbauc-badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: kbauc-badge-pulse 1.4s ease-in-out infinite;
}

@keyframes kbauc-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .kbauc-badge-dot {
        animation: none;
    }
}