/* ==========================================
   MODAL
========================================== */

.modal{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(5px);

    z-index:999999;

    opacity:0;

    visibility:hidden;

    transition:.25s;

}

.modal.ativo{

    opacity:1;

    visibility:visible;

}

/*
   Mensagens transitórias precisam permanecer acima do backdrop do modal.
   As cores semânticas são compartilhadas por todas as telas que usam modal.css.
*/
.toast{
    z-index:1000000;
}

.toast.sucesso{
    background:#16a34a;
}

.toast.erro{
    background:#dc2626;
}

.toast.info{
    background:#2563eb;
}

.modal-box{

    width:420px;

    max-width:90%;

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    font-family:'Poppins',sans-serif;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

    animation:modalZoom .25s;

}

.modal-header h2{

    margin:0 0 20px;

    color:#1e293b;

    font-size:30px;

}

.modal-body{

    color:#64748b;

    line-height:1.8;

    margin-bottom:25px;

}

.modal-footer{

    display:flex;

    justify-content:center;

    gap:12px;

}

@keyframes modalZoom{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}