/* Style pour la cloche de notification */
.xbell-icon {
    position: relative;
    color: #fff !important; /* Forcer la couleur blanche */
    font-size: 1rem; /* Petite cloche, comme dans l'image */
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Style pour le badge de notification */
.xbell-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #dc3545; /* Rouge Bootstrap */
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 12px; /* Taille pour nombres de 1 à 99 */
    display: none; /* Caché par défaut, affiché via .show */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    line-height: 1; /* Supprime line-height pour flex */
    text-align: center;
    box-sizing: border-box;
}

.xbell-badge.show {
    display: flex; /* Afficher le badge quand il y a des notifications */
}

/* Style pour le cas "99+" */
.xbell-badge.plus {
    font-size: 11px; /* Taille pour "99" */
    display: flex;
    align-items: center; /* Centrage vertical du "99" */
    justify-content: center;
    position: relative; /* Pour positionner le "+" */
}

.xbell-badge.plus::after {
    content: '+';
    font-size: 8px; /* Taille pour le "+" */
    position: absolute;
    top: 3px; /* Exposant subtil */
    right: 1px; /* Ajusté pour plus d'espacement */
    margin-left: 1px; /* Ajoute un espacement à gauche du "+" */
    line-height: 1; /* Évite décalage */
}

/* Style pour le menu déroulant des notifications */
.xbell-menu {
    width: 400px;
    max-height: 400px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

/* Style pour chaque élément de notification */
.xbell-item {
    white-space: normal;
    padding: 0; /* Padding supprimé pour éviter la déformation */
    color: #212529;
    text-decoration: none;
    display: block;
}

.xbell-item.unread {
    background-color: #f8f9fa;
    font-weight: bold;
}

/* Style pour le texte de "Aucune notification" */
.xbell-no-notif {
    white-space: normal;
    padding: 0; /* Padding supprimé pour correspondre à .xbell-item */
    color: #212529;
    text-decoration: none;
    display: block;
}

/* Style pour l'heure de la notification */
.xbell-item .xbell-time {
    font-size: 0.8em;
    color: #6c757d;
    display: block;
}

/* Style pour le bouton "Tout marquer comme lu" */
.xbell-mark-all {
    font-size: 0.9rem;
    color: #007bff;
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 0; /* Padding supprimé pour correspondre à .xbell-item */
    background-color: transparent;
    border: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.xbell-mark-all:hover {
    color: #0056b3;
    background-color: #f8f9fa;
}

.xbell-bell {
    display: inline-block; /* Permet d'appliquer transform */
}

.xbell-bell.has-new {
    animation: rotateShake 0.7s ease-in-out;
    -webkit-animation: rotateShake 0.7s ease-in-out;
}

@keyframes rotateShake {
    0%, 100% { 
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    20% { 
        transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
    }
    40% { 
        transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
    }
    60% { 
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
    }
    80% { 
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
    }
}

@-webkit-keyframes rotateShake {
    0%, 100% { 
        -webkit-transform: rotate(0deg);
    }
    20% { 
        -webkit-transform: rotate(-15deg);
    }
    40% { 
        -webkit-transform: rotate(15deg);
    }
    60% { 
        -webkit-transform: rotate(-10deg);
    }
    80% { 
        -webkit-transform: rotate(10deg);
    }
}