/* ========================================
   PREMIUM BADGE SYSTEM
   Replace Emojis with Color-Coded Text Badges
   ======================================== */

/* ========================================
   BASE BADGE STYLES
   ======================================== */

.muscle-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--premium-radius-full, 9999px);
  font-size: var(--premium-text-xs, 0.75rem);
  font-weight: var(--premium-font-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: var(--premium-transition, all 0.3s ease);
  cursor: default;
  white-space: nowrap;
  line-height: 1;
}

/* ========================================
   MUSCLE GROUP BADGES
   ======================================== */

/* Chest - Orange */
.badge-chest,
.muscle-badge[data-muscle="chest"] {
  background: rgba(255, 107, 53, 0.1);
  color: var(--premium-accent-chest, #FF6B35);
  border: 1px solid rgba(255, 107, 53, 0.3);
}

.badge-chest:hover,
.muscle-badge[data-muscle="chest"]:hover {
  background: rgba(255, 107, 53, 0.2);
  border-color: rgba(255, 107, 53, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.4);
}

/* Back - Blue */
.badge-back,
.muscle-badge[data-muscle="back"] {
  background: rgba(102, 126, 234, 0.1);
  color: var(--premium-accent-back, #667EEA);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.badge-back:hover,
.muscle-badge[data-muscle="back"]:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(102, 126, 234, 0.4);
}

/* Legs - Green */
.badge-legs,
.muscle-badge[data-muscle="legs"] {
  background: rgba(16, 185, 129, 0.1);
  color: var(--premium-accent-legs, #10B981);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-legs:hover,
.muscle-badge[data-muscle="legs"]:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Shoulders - Amber */
.badge-shoulders,
.muscle-badge[data-muscle="shoulders"] {
  background: rgba(245, 158, 11, 0.1);
  color: var(--premium-accent-shoulders, #F59E0B);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-shoulders:hover,
.muscle-badge[data-muscle="shoulders"]:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

/* Arms - Purple */
.badge-arms,
.muscle-badge[data-muscle="arms"] {
  background: rgba(139, 92, 246, 0.1);
  color: var(--premium-accent-arms, #8B5CF6);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge-arms:hover,
.muscle-badge[data-muscle="arms"]:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

/* Core - Pink */
.badge-core,
.muscle-badge[data-muscle="core"] {
  background: rgba(236, 72, 153, 0.1);
  color: var(--premium-accent-core, #EC4899);
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.badge-core:hover,
.muscle-badge[data-muscle="core"]:hover {
  background: rgba(236, 72, 153, 0.2);
  border-color: rgba(236, 72, 153, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}

/* Cardio - Cyan */
.badge-cardio,
.muscle-badge[data-muscle="cardio"] {
  background: rgba(6, 182, 212, 0.1);
  color: var(--premium-accent-cardio, #06B6D4);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-cardio:hover,
.muscle-badge[data-muscle="cardio"]:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

/* ========================================
   BADGE CONTAINER
   ======================================== */

.badge-container,
.muscle-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--premium-space-1, 8px);
  margin: var(--premium-space-2, 16px) 0;
}

/* ========================================
   BADGE SIZES
   ======================================== */

.badge-sm {
  padding: 2px 8px;
  font-size: 0.65rem;
}

.badge-md {
  padding: 4px 12px;
  font-size: 0.75rem;
}

.badge-lg {
  padding: 6px 16px;
  font-size: 0.875rem;
}

/* ========================================
   BADGE VARIANTS
   ======================================== */

/* Outline variant */
.badge-outline {
  background: transparent;
  border-width: 2px;
}

/* Solid variant */
.badge-solid.badge-chest { background: var(--premium-accent-chest); color: #000; border: none; }
.badge-solid.badge-back { background: var(--premium-accent-back); color: #fff; border: none; }
.badge-solid.badge-legs { background: var(--premium-accent-legs); color: #000; border: none; }
.badge-solid.badge-shoulders { background: var(--premium-accent-shoulders); color: #000; border: none; }
.badge-solid.badge-arms { background: var(--premium-accent-arms); color: #fff; border: none; }
.badge-solid.badge-core { background: var(--premium-accent-core); color: #fff; border: none; }
.badge-solid.badge-cardio { background: var(--premium-accent-cardio); color: #000; border: none; }

/* ========================================
   BADGE WITH ICON (Optional)
   ======================================== */

.badge-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
}

/* SVG icon styling */
.badge-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
}

/* ========================================
   DIFFICULTY BADGES
   ======================================== */

.badge-difficulty {
  font-weight: var(--premium-font-black, 900);
}

.badge-beginner {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-intermediate {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-advanced {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ========================================
   STATUS BADGES
   ======================================== */

.badge-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-in-progress {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-locked {
  background: rgba(107, 114, 128, 0.1);
  color: #6B7280;
  border: 1px solid rgba(107, 114, 128, 0.3);
  opacity: 0.6;
}

/* ========================================
   ANIMATED BADGES
   ======================================== */

.badge-pulse {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 4px transparent;
  }
}

.badge-glow {
  animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% {
    box-shadow: 0 0 8px currentColor;
  }
  50% {
    box-shadow: 0 0 16px currentColor;
  }
}

/* ========================================
   BADGE GROUP (Multiple badges together)
   ======================================== */

.badge-group {
  display: inline-flex;
  gap: 4px;
}

.badge-group .badge:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.badge-group .badge:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.badge-group .badge:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* ========================================
   RESPONSIVE BADGES
   ======================================== */

@media (max-width: 768px) {
  .muscle-badge,
  .badge {
    font-size: 0.65rem;
    padding: 3px 10px;
  }
  
  .badge-lg {
    font-size: 0.75rem;
    padding: 4px 12px;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .muscle-badge,
  .badge {
    transition: none !important;
  }
  
  .badge-pulse,
  .badge-glow {
    animation: none !important;
  }
}

/* Focus state for keyboard navigation */
.muscle-badge:focus,
.badge:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}