/**
 * Rudy Forum Premium — Gebruikersbadges
 *
 * @package Rudy_Forum_Premium
 * @since   0.2.0
 */

/* ── Wrapper ────────────────────────────────────────────────────────────────── */

.rfp-badges-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
}

/* ── Basisstijl badge ───────────────────────────────────────────────────────── */

.rfp-user-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.5;
    white-space: nowrap;
}

/* ── Tier: Nieuwkomer ───────────────────────────────────────────────────────── */

.rfp-badge--newcomer {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* ── Tier: Lid ──────────────────────────────────────────────────────────────── */

.rfp-badge--member {
    background: color-mix(in srgb, var(--rfl-primary, #0073aa) 12%, #fff);
    color: var(--rfl-primary, #0073aa);
    border: 1px solid color-mix(in srgb, var(--rfl-primary, #0073aa) 30%, #fff);
}

/* ── Tier: Veteraan ─────────────────────────────────────────────────────────── */

.rfp-badge--veteran {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--rfl-primary, #0073aa) 18%, #fff),
        color-mix(in srgb, var(--rfl-primary, #0073aa) 8%, #fff)
    );
    color: var(--rfl-primary-dark, #005f8a);
    border: 1px solid color-mix(in srgb, var(--rfl-primary, #0073aa) 40%, #fff);
    font-style: italic;
}

/* ── Moderator badge ────────────────────────────────────────────────────────── */

.rfp-badge--mod {
    background: #7c3aed;
    color: #fff;
    border: 1px solid #6d28d9;
}

/* ── Mobiel: badges naast elkaar in de horizontale auteurstrook ─────────────── */

@media (max-width: 640px) {
    .rfp-badges-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 4px;
    }
}

/* ── Profielpagina: badges naast naam ───────────────────────────────────────── */

.rfp-badges-profile {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 4px;
    margin-bottom: 6px;
}