/* ================================================
   BYLEARNING BELL NOTIFICATION - SWING STYLE
   Unique prefix: bl-bell-notification-*
   ================================================ */

.bl-bell-notification-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

.bl-bell-notification-icon {
    font-size: 20px;
    color: #003366;
    transition: color 0.3s ease;
}

.bl-bell-notification-wrapper:hover .bl-bell-notification-icon {
    color: #336699;
}

/* Notification Badge */
.bl-bell-notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #4CAF50;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 4px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.bl-bell-notification-badge.bl-bell-show {
    opacity: 1;
    transform: scale(1);
}

/* Swing Animation */
.bl-bell-notification-wrapper.bl-bell-swing-animate {
    animation: bl-bell-swing 0.6s ease-in-out;
}

@keyframes bl-bell-swing {
    0%, 100% { 
        transform: rotate(0deg); 
        transform-origin: top center; 
    }
    20% { 
        transform: rotate(15deg); 
    }
    40% { 
        transform: rotate(-10deg); 
    }
    60% { 
        transform: rotate(5deg); 
    }
    80% { 
        transform: rotate(-5deg); 
    }
}

/* Badge Fade In Up Animation */
.bl-bell-notification-badge.bl-bell-fade-in-up {
    animation: bl-bell-fade-in-up 0.4s ease;
}

@keyframes bl-bell-fade-in-up {
    0% { 
        opacity: 0; 
        transform: translateY(10px) scale(0.8); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}



/* ================================================
   RESPONSIVE - Mobile Positioning
   ================================================ */

/* Desktop: Bell appears at end */
@media (min-width: 992px) {
    .bl-bell-notification-wrapper {
        margin-left: 8px;
    }
}

/* Mobile: Bell appears before hamburger */
@media (max-width: 991px) {
    /* Move bell before hamburger in mobile */
    .navbar-nav .nav-item:has(.bl-bell-notification-wrapper) {
        order: -1; /* Appears first in collapsed menu */
    }
    
    /* Or to position beside hamburger (outside collapse) */
    .navbar > .container {
        position: relative;
    }
    
    /* Position bell beside hamburger */
    .navbar-collapse .nav-item:has(.bl-bell-notification-wrapper) {
        position: absolute;
        top: -50px;
        right: 60px;
        z-index: 1000;
    }
    
    .bl-bell-notification-icon {
        font-size: 22px;
    }
}