/* =============================================================================
   XGUIA S18: Badges de perfil — Premium, Online, Novo, Verificado
   Arquivo: framework/xg-badges.css
   Enqueued em: xguia-utils.php via wp_enqueue_scripts
   ============================================================================= */

/* Garantir position:relative no card para o absolute dos badges */
.xguia-card {
    position: relative;
}

/* Container de badges — posição absoluta sobre a imagem do card */
.xg-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Sem height fixa — evita CLS (Cumulative Layout Shift) */
    pointer-events: none;
}

/* Badge base — padrão visual compartilhado */
.xg-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    /* Sem box-shadow para não adicionar CLS */
}

/* ── Variantes de cor ── */

/* Premium: fundo escuro, dourado */
.xg-badge--premium {
    background-color: #1a1a1a;
    color: #f0c040;
}

/* Online: verde escuro, menta */
.xg-badge--online {
    background-color: #1a7a3c;
    color: #d4f5e2;
}

/* Novo: azul médio, azul claro */
.xg-badge--new {
    background-color: #1a5fa8;
    color: #d6eaff;
}

/* Verificado (unificado foto+vídeo): roxo, lavanda */
.xg-badge--verified {
    background-color: #5c2d91;
    color: #ead6ff;
}

/* Vídeo verificado: vermelho escuro, rosa claro */
.xg-badge--video {
    background-color: #7a2020;
    color: #ffd6d6;
}

/* Foto verificada: âmbar escuro, amarelo claro */
.xg-badge--photo {
    background-color: #5a3a00;
    color: #ffe8b0;
}

/* ── Responsivo ── */
@media (max-width: 480px) {
    .xg-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
    .xg-badges {
        gap: 3px;
    }
}

/* ── Acessibilidade: respeitar preferência de movimento reduzido ── */
@media (prefers-reduced-motion: reduce) {
    .xg-badge {
        transition: none;
    }
}