/*
 * Badge Components
 */

.wishly-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-1);
    padding: var(--w-space-1) var(--w-space-3);
    font-size: var(--w-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--w-tracking-wide);
    border-radius: var(--w-radius-full);
    background: color-mix(in srgb, var(--badge-color, var(--w-accent)) 15%, transparent);
    color: var(--badge-color, var(--w-accent));
    border: 1px solid color-mix(in srgb, var(--badge-color, var(--w-accent)) 25%, transparent);
}

/* Rarity variants */
.wishly-badge--common    { --badge-color: var(--w-rarity-common); }
.wishly-badge--uncommon  { --badge-color: var(--w-rarity-uncommon); }
.wishly-badge--rare      { --badge-color: var(--w-rarity-rare); }
.wishly-badge--epic      { --badge-color: var(--w-rarity-epic); }
.wishly-badge--legendary {
    --badge-color: var(--w-rarity-legendary);
    animation: wishly-pulse-glow 3s ease-in-out infinite;
}

/* Status variants */
.wishly-badge--success { --badge-color: var(--w-success); }
.wishly-badge--warning { --badge-color: var(--w-warning); }
.wishly-badge--error   { --badge-color: var(--w-error); }
.wishly-badge--info    { --badge-color: var(--w-info); }

/* Achievement badge */
.wishly-achievement-badge {
    width: 80px;
    height: 80px;
    border-radius: var(--w-radius-2xl);
    background: var(--w-bg-card);
    border: 2px solid var(--w-border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: all var(--w-transition-base);
    position: relative;
}

.wishly-achievement-badge--unlocked {
    border-color: var(--w-accent);
    box-shadow: var(--w-shadow-glow-sm);
}

.wishly-achievement-badge--locked {
    opacity: 0.4;
    filter: grayscale(1);
}

/* Level badge */
.wishly-level-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: var(--w-space-2) var(--w-space-4);
    background: var(--w-gradient-primary);
    border-radius: var(--w-radius-full);
    font-size: var(--w-text-sm);
    font-weight: 700;
    color: #fff;
}

/* Notification dot */
.wishly-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--w-error);
    display: inline-block;
}

.wishly-dot--pulse {
    animation: wishly-pulse-glow 2s ease-in-out infinite;
}

/* Count badge */
.wishly-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--w-space-1);
    background: var(--w-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--w-radius-full);
}