/* --- Notification Bell Styles (More Apparent!) --- */
.user-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-container {
    position: relative;
    cursor: pointer;
    font-size: 26px; 
    color: var(--gold); 
    display: flex;
    align-items: center;
    justify-content: center; /* Centers the bell inside our perfect circle */
    
    /* Smooth transitions for the color, background, and scale */
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
    
    /* Replaced the border with dimensions for a perfect hover circle */
    border-radius: 50%;
    width: 45px; 
    height: 45px; 
    background-color: transparent; /* Invisible by default */
}

.notification-container:hover {
    color: var(--gold-hover);
    transform: scale(1.1); 
    /* The Ghost Effect: A very soft, 15% opacity gold background */
    background-color: rgba(212, 175, 55, 0.15); 
}

/* Keyframes for a gentle ringing animation */
@keyframes ring {
    0% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

/* Ensure the bell is still by default */
.notification-container i {
    transition: transform 0.2s ease;
}

/* Trigger the animation ONLY when hovering over the container */
.notification-container:hover i {
    /* Rings much faster (0.8s) while the mouse is over it! */
    animation: ring 0.8s ease-in-out 1; 
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background-color: #e74c3c; 
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.6); /* Adds a red glowing shadow */
    border: 2px solid var(--bg-header); /* Adds a border matching the header background */
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-container {
    display: none;
}