/* Boost Badge Styles */
.boost-badge-container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.boost-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  animation: boost-pulse 2s infinite;
}

.boost-badge i {
  font-size: 8px;
}

/* Boost Rank Colors - Neue 3-Paket-Struktur */
.boost-rank-1 {
  /* MeisterWartung Empfehlung - Lila (#66228A) */
  background: linear-gradient(135deg, #66228A 0%, #8B5CF6 100%);
  border: 1px solid rgba(102, 34, 138, 0.3);
}

.boost-rank-2, .boost-rank-3 {
  /* Lokale Empfehlung - Grün */
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.boost-rank-4, .boost-rank-5 {
  /* Erhöhte Sichtbarkeit - Gelb/Orange (kein Badge) */
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Animation */
@keyframes boost-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
}

/* Hover Effects */
.boost-badge:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .boost-badge {
    font-size: 9px;
    padding: 3px 6px;
  }
  
  .boost-badge i {
    font-size: 7px;
  }
}

/* Service Card Enhancement for Boosted Services */
.service_default:has(.boost-badge), .apple-service-card:has(.boost-badge) {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #8B5CF6, #A855F7) border-box;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

/* Service Card Enhancement - Neue 3-Paket-Struktur */
.service_default:has(.boost-rank-1), .apple-service-card:has(.boost-rank-1) {
  /* MeisterWartung Empfehlung - Lila Rahmen + Glow (#66228A) */
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #66228A, #8B5CF6) border-box;
  box-shadow: 0 8px 25px rgba(102, 34, 138, 0.3);
}

.service_default:has(.boost-rank-2), .service_default:has(.boost-rank-3), 
.apple-service-card:has(.boost-rank-2), .apple-service-card:has(.boost-rank-3) {
  /* Lokale Empfehlung - Grün Rahmen + Glow */
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #10B981, #059669) border-box;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
  border: 2px solid #10B981 !important;
}

.service_default:has(.boost-rank-4), .service_default:has(.boost-rank-5),
.apple-service-card:has(.boost-rank-4), .apple-service-card:has(.boost-rank-5) {
  /* Erhöhte Sichtbarkeit - Gelb/Orange Rahmen (kein Badge) */
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #F59E0B, #D97706) border-box;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
  border: 2px solid #F59E0B !important;
}

/* Top-Rang Special Effects */
.service_default:has(.boost-rank-1)::before, .apple-service-card:has(.boost-rank-1)::before {
  content: '👑';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 16px;
  background: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10;
}

/* Fallback für Browser ohne :has() Support */
@supports not (selector(:has(*))) {
  .service_default.boosted-service, .apple-service-card.boosted-service {
    position: relative;
    border: 2px solid #8B5CF6;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
  }
}

/* Spezifische Styles für Boost-Ränge 2 und 4 */
.boost-rank-2, .boost-rank-3 {
  background-color: #10B981 !important;
  color: white !important;
}

.apple-service-card:has(.boost-rank-2), .apple-service-card:has(.boost-rank-3) {
  border: 2px solid #10B981 !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
}

.apple-service-card:has(.boost-rank-4), .apple-service-card:has(.boost-rank-5) {
  border: 2px solid #F59E0B !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3) !important;
}