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

.modal-overlay{

    position:fixed;
    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:99999;

}

.modal-overlay.show{

    opacity:1;

    visibility:visible;

}

.modal-box{

    width:420px;

    max-width:92%;

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    animation:modalShow .25s;

}

@keyframes modalShow{

    from{

        transform:translateY(20px) scale(.96);

        opacity:0;

    }

    to{

        transform:none;

        opacity:1;

    }

}

.modal-icon{

    width:75px;

    height:75px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

}

.modal-icon span{

    font-size:42px;

    color:#fff;

}

.modal-error{

    background:#e53935;

}

.modal-success{

    background:#43a047;

}

.modal-warning{

    background:#fb8c00;

}

.modal-info{

    background:#1976d2;

}

.modal-box h3{

    margin-bottom:10px;

    color:#222;

}

.modal-box p{

    color:#666;

    line-height:1.5;

    margin-bottom:25px;

}

.modal-btn{

    width:100%;

    border:none;

    padding:14px;

    border-radius:10px;

    cursor:pointer;

    background:#2F5D7E;

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.2s;

}

.modal-btn:hover{

    background:#244b67;

}