/* Spotlight кнопки */
.concert-spotlight-buttons {
    display: flex;
    gap: 10px;
    margin: 20px auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
}

.spotlight-btn {
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

/* Hover только для неактивных кнопок */
.spotlight-btn.inactive:hover:not(.active) {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
    filter: saturate(0.2);
}

/* Неактивные кнопки */
.spotlight-btn.inactive {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    animation: none !important;
    filter: saturate(0.2);
}



/* Активные кнопки с анимациями - максимальная специфичность */
.spotlight-btn.spotlight-top10.active {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.8) 0%, rgba(255, 120, 130, 0.6) 100%) !important;
    border-color: rgba(255, 71, 87, 0.8) !important;
    animation: pulse-glow-red 2s ease-in-out infinite alternate !important;
    transition: transform 0.2s ease !important;
}



.spotlight-btn.spotlight-new.active {
    background: linear-gradient(135deg, rgba(55, 66, 250, 0.8) 0%, rgba(120, 130, 255, 0.6) 100%) !important;
    border-color: rgba(55, 66, 250, 0.8) !important;
    animation: pulse-glow-blue 2s ease-in-out infinite alternate !important;
    transition: transform 0.2s ease !important;
}

.spotlight-btn.spotlight-discount.active {
    background: linear-gradient(135deg, rgba(22, 160, 133, 0.8) 0%, rgba(80, 200, 180, 0.6) 100%) !important;
    border-color: rgba(22, 160, 133, 0.8) !important;
    animation: pulse-glow-green 2s ease-in-out infinite alternate !important;
    transition: transform 0.2s ease !important;
}

.spotlight-btn.spotlight-4u.active {
    background: linear-gradient(135deg, rgba(165, 94, 234, 0.8) 0%, rgba(200, 150, 255, 0.6) 100%) !important;
    border-color: rgba(165, 94, 234, 0.8) !important;
    animation: pulse-glow-purple 2s ease-in-out infinite alternate !important;
    transition: transform 0.2s ease !important;
}

/* Hover для активных кнопок - сохраняем все свойства с максимальной специфичностью */
.spotlight-btn.spotlight-top10.active:hover:not(.inactive) {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.8) 0%, rgba(255, 120, 130, 0.6) 100%) !important;
    border-color: rgba(255, 71, 87, 0.8) !important;
    animation: pulse-glow-red 2s ease-in-out infinite alternate !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.spotlight-btn.spotlight-new.active:hover:not(.inactive) {
    background: linear-gradient(135deg, rgba(55, 66, 250, 0.8) 0%, rgba(120, 130, 255, 0.6) 100%) !important;
    border-color: rgba(55, 66, 250, 0.8) !important;
    animation: pulse-glow-blue 2s ease-in-out infinite alternate !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.spotlight-btn.spotlight-discount.active:hover:not(.inactive) {
    background: linear-gradient(135deg, rgba(22, 160, 133, 0.8) 0%, rgba(80, 200, 180, 0.6) 100%) !important;
    border-color: rgba(22, 160, 133, 0.8) !important;
    animation: pulse-glow-green 2s ease-in-out infinite alternate !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.spotlight-btn.spotlight-4u.active:hover:not(.inactive) {
    background: linear-gradient(135deg, rgba(165, 94, 234, 0.8) 0%, rgba(200, 150, 255, 0.6) 100%) !important;
    border-color: rgba(165, 94, 234, 0.8) !important;
    animation: pulse-glow-purple 2s ease-in-out infinite alternate !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* Анимации свечения */
@keyframes pulse-glow-red {
    0% { 
        box-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 0 40px rgba(255, 71, 87, 0.8);
    }
    100% { 
        box-shadow: 
            0 6px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 60px rgba(255, 71, 87, 1.0);
    }
}

@keyframes pulse-glow-blue {
    0% { 
        box-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 0 40px rgba(55, 66, 250, 0.8);
    }
    100% { 
        box-shadow: 
            0 6px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 60px rgba(55, 66, 250, 1.0);
    }
}

@keyframes pulse-glow-green {
    0% { 
        box-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 0 40px rgba(22, 160, 133, 0.8);
    }
    100% { 
        box-shadow: 
            0 6px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 60px rgba(22, 160, 133, 1.0);
    }
}

@keyframes pulse-glow-purple {
    0% { 
        box-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 0 40px rgba(165, 94, 234, 0.8);
    }
    100% { 
        box-shadow: 
            0 6px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 60px rgba(165, 94, 234, 1.0);
    }
}