/* =========================================
   МОДУЛЬ АНИМИРОВАННЫХ ТАБОВ (БЕЙДЖЕЙ)
========================================= */
.tag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-decoration: none;
    background-size: 200% auto;
    animation: gradientShine 3s linear infinite;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    flex-shrink: 0; /* Запрещает сжиматься, если текст слева очень длинный */
}

.tag-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.12);
    filter: brightness(1.1);
}

@keyframes gradientShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Цветовые вариации табов (Логичный градиент от холодных к теплым и элитным) */
.tag-start {
    background-image: linear-gradient(90deg, #2dd4bf 0%, #0ea5e9 50%, #2dd4bf 100%);
}
.tag-standart {
    background-image: linear-gradient(90deg, #818cf8 0%, #a78bfa 50%, #818cf8 100%);
}
.tag-komfort {
    background-image: linear-gradient(90deg, #fb923c 0%, #ec4899 50%, #fb923c 100%);
}
.tag-termo {
    background-image: linear-gradient(90deg, #f43f5e 0%, #be123c 50%, #f43f5e 100%);
}
.tag-elit {
    background-image: linear-gradient(90deg, #d4af37 0%, #fef08a 50%, #d4af37 100%);
    color: #4a3c5a; /* Темный текст для хорошей читаемости на золоте */
}
.tag-bright {
    background-image: linear-gradient(90deg, #ec4899 0%, #d946ef 33%, #8b5cf6 66%, #ec4899 100%);
    background-size: 300% auto;
}