#navbar-notif-badge,
#mobile-notif-badge {
position: absolute;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
font-size: 10px;
font-weight: 700;
border-radius: 9999px;
min-width: 18px;
height: 18px;
display: none;
align-items: center;
justify-content: center;
padding: 0 5px;
line-height: 1;
z-index: 10;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4), 0 0 0 2px rgba(239, 68, 68, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}

@keyframes pulse-badge {
0%, 100% {
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4), 0 0 0 2px rgba(239, 68, 68, 0.1);
}
50% {
box-shadow: 0 2px 12px rgba(239, 68, 68, 0.6), 0 0 0 4px rgba(239, 68, 68, 0.2);
}
}

.group\/notif:hover .bi-envelope-fill {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
transform: scale(1.05);
}

.group\/notif:hover #navbar-notif-badge,
.navbar-mobile-item:hover #mobile-notif-badge {
transform: scale(1.1);
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6), 0 0 0 3px rgba(239, 68, 68, 0.2);
animation: none;
}

#navbar-notif-badge {
top: -2px;
right: -2px;
}

#mobile-notif-badge {
top: -6px;
right: -6px;
font-size: 9px;
min-width: 16px;
height: 16px;
}