/* 
 * FORÇA MÁXIMA: Arquivo CSS dedicado exclusivamente para FORÇAR a exibição dos badges
 * Este arquivo deve ser carregado APÓS todos os outros CSSs
 */

/* Container principal dos badges - FORÇA MÁXIMA */
.user-badges-modern,
div.user-badges-modern,
.user-badges-modern.forced-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    min-height: 30px !important;
    width: auto !important;
    overflow: visible !important;
    clear: both !important;
    float: none !important;
}

/* Badges individuais - FORÇA MÁXIMA */
.badge,
span.badge,
.badge.forced-display,
.user-badges-modern .badge,
.user-badges-modern span.badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    margin: 2px 4px 2px 0 !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    text-align: center !important;
    min-width: 60px !important;
    width: auto !important;
    height: auto !important;
    min-height: 25px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    cursor: default !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    clip: auto !important;
    clip-path: none !important;
}

/* Badge específicos - FORÇA MÁXIMA */
.badge-crown,
span.badge-crown,
.badge.badge-crown {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffc107 100%) !important;
    color: #b45309 !important;
    border-color: #ffc107 !important;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.badge-mod,
span.badge-mod,
.badge.badge-mod {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: #667eea !important;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.badge-veteran,
span.badge-veteran,
.badge.badge-veteran {
    background: linear-gradient(135deg, #8B5A2B 0%, #CD853F 100%) !important;
    color: white !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 3px 10px rgba(139, 90, 43, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.badge-expert,
span.badge-expert,
.badge.badge-expert {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
    color: white !important;
    border-color: #4A90E2 !important;
    box-shadow: 0 3px 10px rgba(74, 144, 226, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.badge-advanced,
span.badge-advanced,
.badge.badge-advanced {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%) !important;
    color: white !important;
    border-color: #FF6B6B !important;
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.badge-active,
span.badge-active,
.badge.badge-active {
    background: linear-gradient(135deg, #FF9500 0%, #FFB74D 100%) !important;
    color: white !important;
    border-color: #FF9500 !important;
    box-shadow: 0 3px 10px rgba(255, 149, 0, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.badge-newbie,
span.badge-newbie,
.badge.badge-newbie {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%) !important;
    color: white !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.badge-starter,
span.badge-starter,
.badge.badge-starter {
    background: linear-gradient(135deg, #9C27B0 0%, #E1BEE7 100%) !important;
    color: white !important;
    border-color: #9C27B0 !important;
    box-shadow: 0 3px 10px rgba(156, 39, 176, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

.badge-loyal,
span.badge-loyal,
.badge.badge-loyal {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #8B4513 !important;
    border-color: #FFD700 !important;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.6) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Hover effects - FORÇA MÁXIMA */
.badge:hover,
span.badge:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    filter: brightness(1.1) !important;
}

/* Responsivo - FORÇA MÁXIMA */
@media (max-width: 768px) {
    .user-badges-modern,
    div.user-badges-modern {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }
    
    .badge,
    span.badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
        min-width: 50px !important;
    }
}

/* Garantir que nada pode sobrescrever estas regras */
body .user-badges-modern,
html body .user-badges-modern,
* .user-badges-modern {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .badge,
html body .badge,
* .badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Anti-hide: Previne ocultação dos badges */
.user-badges-modern[style*="display: none"],
.user-badges-modern[style*="visibility: hidden"],
.user-badges-modern[style*="opacity: 0"],
.badge[style*="display: none"],
.badge[style*="visibility: hidden"],
.badge[style*="opacity: 0"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}