/* ============================================================================
   content.css — дополнительные стили контента
   ============================================================================ */

/* ============================================================================
   Иконки избранного (♥) и уведомлений (🔔) — неоновый стиль
   ============================================================================ */

/* Сердечко — базовое: тусклый контур */
.fav-heart {
    color: rgba(156, 163, 175, 0.5); /* gray-400/50 */
    transition: color 0.3s, filter 0.3s, stroke-width 0.3s;
    fill: none !important;
    stroke-width: 2.5 !important; /* Делаем контур чуть толще по умолчанию */
}

/* Сердечко — активное: неоновый красный контур */
.fav-heart.active {
    color: #f43f5e; /* rose-500 */
    /* Усиливаем неоновое свечение (3 слоя разной плотности) */
    filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.9))
            drop-shadow(0 0 10px rgba(244, 63, 94, 0.7))
            drop-shadow(0 0 20px rgba(244, 63, 94, 0.4));
    fill: none !important;
    stroke-width: 2.5 !important;
}

/* Hover для неактивного сердечка */
.fav-heart:not(.active):hover,
button:hover .fav-heart:not(.active),
.group:hover .fav-heart:not(.active) {
    color: rgba(244, 63, 94, 0.8);
    filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.5));
}

/* Колокольчик — базовый: тусклый контур */
.notice-bell {
    color: rgba(156, 163, 175, 0.4); /* gray-400/40 */
    transition: color 0.3s, filter 0.3s, stroke-width 0.3s;
    stroke-width: 2.5 !important; /* Утолщаем базовый контур */
}

/* Колокольчик — активный: неоновый пурпурный контур */
.notice-bell.active {
    color: #c084fc; /* purple-400 */
    /* Экстра-яркое свечение для пурпурного цвета */
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.9))
            drop-shadow(0 0 10px rgba(192, 132, 252, 0.7))
            drop-shadow(0 0 20px rgba(192, 132, 252, 0.4));
    stroke-width: 2.5 !important;
}

/* Hover для неактивного колокольчика */
.notice-bell:not(.active):hover,
button:hover .notice-bell:not(.active),
.group:hover .notice-bell:not(.active),
.group\/bell:hover .notice-bell:not(.active) {
    color: rgba(192, 132, 252, 0.6);
}