/* ============================================
   CLICKABLE BADGES
   ============================================ */

.badge--clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.badge--clickable:hover {
    opacity: 0.85;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
    transform: translateY(-1px);
}

.badge--clickable:active {
    transform: scale(0.98) translateY(0);
}

.badge__text-desktop {
    display: inline;
}

.badge__text-mobile {
    display: none;
}

@media (max-width: 768px) {
    .badge__text-desktop {
        display: none;
    }
    .badge__text-mobile {
        display: inline;
    }
}

.badge--error {
    background: rgba(248, 113, 113, 0.15);
    border-color: var(--error);
    color: var(--error);
}