.status-badge {
    .badge {
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        padding: $spacing-unit * 1.5 $spacing-unit * 3;
        border-radius: 40px;
    }

    @each $status, $gradient in (
        'active': $gradient-success,
        'expired': $gradient-danger,
        'pending_topup': $gradient-warning
    ) {
        .status-#{$status} {
            background: $gradient;
            color: white;
            box-shadow: 0 2px 4px rgba(var(--bs-success-rgb), 0.3);
        }
    }
}