.popup2{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-200px) rotate(-8deg);
    transform-origin: top center;
    min-width: 320px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    overflow: hidden;
    opacity: 0;
    z-index: 99999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);

    background:#333; /* ← adicione isso */
}

/* animação entrada */

.popup2.show{
    animation: popupEntrada 0.7s ease forwards;
}

/* animação saída */

.popup2.hide{
    animation: popupSaida 0.4s ease forwards;
}

/* animação cair e balançar */

@keyframes popupEntrada{

    0%{
        transform: translateX(-50%) translateY(-200px) rotate(-8deg);
        opacity:0;
    }

    60%{
        transform: translateX(-50%) translateY(10px) rotate(5deg);
        opacity:1;
    }

    80%{
        transform: translateX(-50%) translateY(-5px) rotate(-3deg);
    }

    100%{
        transform: translateX(-50%) translateY(0) rotate(0deg);
        opacity:1;
    }

}

/* animação sair */

@keyframes popupSaida{

    0%{
        transform: translateX(-50%) translateY(0);
        opacity:1;
    }

    100%{
        transform: translateX(-50%) translateY(-120px);
        opacity:0;
    }

}

/* conteúdo */

.popup2-content{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 22px;
}

/* icone */

.popup2-icon{
    font-size:22px;
}

/* texto */

.popup2-text{
    font-size:14px;
    color:white;
}

/* cores */

.popup2.success{
    background:#2ecc71;
}

.popup2.warning{
    background:#f39c12;
}

.popup2.info2{
    background:#3b82f6;
}

.popup2.error{
    background:#e74c3c;
}

/* barra */

.popup2-bar{
    width:100%;
    height:4px;
    background:rgba(0,0,0,0.2);
}

.popup2-progress{
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.35);
    animation:diminuir2 4s linear forwards;
}

@keyframes diminuir2{
    from{
        width:100%;
    }
    to{
        width:0%;
    }
}