@import url("variables.css");

#notification-container {
    position: fixed; /* Reste à la même position lors du défilement */
    top: 20px; /* À 20px du haut */
    right: 20px; /* À 20px de la droite */
    z-index: 1000; /* Assure que les notifications sont au-dessus des autres éléments */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espace entre les notifications */
}

.notification {
    background-color: var(--ecopay-dark);
    color: white;
    font-weight: bold;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 300px;
    opacity: 0; /* Commence avec une opacité de 0 */
    animation: fade-in 0.5s forwards; /* Anime l'apparition */
}

/* Styles pour les différents types de notifications */
.success {
    background-color: var(--ecopay-dark);
}

.error {
    background-color: #dc3545;
}

/* Animation pour l'apparition */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

        /* Animation pour la disparition */
@keyframes fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}