.toast {
    position: fixed;
    top: 25px;
    right: 25px;

    min-width: 320px;
    max-width: 420px;

    padding: 16px 20px;

    border-radius: 14px;

    color: white;
    font-size: 15px;
    font-weight: 600;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);

    z-index: 999999;

    transform: translateX(500px);

    opacity: 0;

    transition: all .4s ease;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.success {
    background: #22c55e;
}

.toast.error {
    background: #ef4444;
}

.toast.warning {
    background: #f59e0b;
}

.toast.info {
    background: #3b82f6;
}