/* ==========================================================================
   Nitro Simracing - Badge Components
   ========================================================================== */

.sn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sn-space-1);
  
  font: 600 var(--sn-font-size-sm)/1 var(--sn-font-sans);
  padding: 6px 12px;
  border-radius: var(--sn-radius-pill);
  
  background: rgba(255, 255, 255, 0.08);
  color: var(--sn-color-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sn-badge--xs {
  padding: 4px 8px;
  font-size: var(--sn-font-size-xs);
}

.sn-badge--lg {
  padding: 8px 16px;
  font-size: var(--sn-font-size);
}

/* Badge Variants */
.sn-badge--primary {
  background: rgba(255, 59, 48, 0.15);
  border-color: rgba(255, 59, 48, 0.3);
  color: #ff5247;
  text-shadow: 0 0 8px rgba(255, 59, 48, 0.4);
}

.sn-badge--success {
  background: rgba(52, 199, 89, 0.15);
  border-color: rgba(52, 199, 89, 0.3);
  color: #34c759;
}

.sn-badge--warning {
  background: rgba(255, 159, 10, 0.15);
  border-color: rgba(255, 159, 10, 0.3);
  color: #ff9f0a;
}

.sn-badge--danger {
  background: rgba(255, 69, 58, 0.15);
  border-color: rgba(255, 69, 58, 0.3);
  color: #ff453a;
}

.sn-badge--info {
  background: rgba(50, 173, 230, 0.15);
  border-color: rgba(50, 173, 230, 0.3);
  color: #32ade6;
}

/* Rank Badges */
.badge-principiante { background: rgba(108, 117, 125, 0.2); border-color: #6c757d; color: #ced4da; }
.badge-cobre { background: rgba(184, 115, 51, 0.2); border-color: #b87333; color: #ffc48c; }
.badge-bronce { background: rgba(205, 127, 50, 0.2); border-color: #cd7f32; color: #ffd1a3; }
.badge-plata { background: rgba(192, 192, 192, 0.2); border-color: #c0c0c0; color: #f8f9fa; }
.badge-oro { 
  background: rgba(255, 215, 0, 0.15); 
  border-color: rgba(255, 215, 0, 0.5); 
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
.badge-platino { 
  background: rgba(229, 228, 226, 0.15); 
  border-color: rgba(229, 228, 226, 0.5); 
  color: #e5e4e2;
  text-shadow: 0 0 10px rgba(229, 228, 226, 0.4);
}
.badge-diamante { 
  background: rgba(185, 242, 255, 0.15); 
  border-color: rgba(185, 242, 255, 0.5); 
  color: #b9f2ff;
  text-shadow: 0 0 10px rgba(185, 242, 255, 0.5);
}
.badge-elite { 
  background: rgba(75, 0, 130, 0.3); 
  border-color: #9d00ff; 
  color: #d896ff;
  text-shadow: 0 0 12px rgba(157, 0, 255, 0.6);
}