/**
 * Professional Popup CSS
 */

.popup {
    visibility: hidden;
    transition: visibility 0ms linear 0.3s;
}

.popup--visible {
    visibility: visible;
    transition: visibility 0ms;
}

.popup__background {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    opacity: 1;
}

.popup__content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;

    width: 420px;
    max-width: 90%;
    padding: 35px 30px;

    background: #fff;

    border: 8px solid #1e88e5;
    border-radius: 25px;

    box-shadow:
        0 0 20px rgba(0,0,0,.25),
        0 0 50px rgba(30,136,229,.25);

    text-align: center;
    animation: show-popup .35s ease;
}

.popup__content.success{
    border-color:#28a745;
}

.popup__content.error{
    border-color:#dc3545;
}

.popup__content__title{
    margin:10px 0;
    font-size:30px;
    font-weight:700;
    color:#0d47a1;
}

.popup__content img{
    width:130px;
    height:auto;
    margin-bottom:15px;
}

.popup__content p{
    font-size:18px;
    color:#555;
    margin:15px 0;
}

.popup__content h5{
    background:#dc3545;
    color:#fff;
    padding:12px;
    border-radius:8px;
    font-size:20px;
    margin-top:20px;
}

.popup-btn{
    margin-top:25px;
    padding:12px 35px;
    border:none;
    border-radius:30px;
    background:#1e88e5;
    color:#fff;
    font-size:17px;
    cursor:pointer;
    transition:.3s;
}

.popup-btn:hover{
    background:#1565c0;
    transform:scale(1.05);
}

@keyframes show-popup {
    0% {
        transform: translate(-50%, -50%) scale(.7);
        opacity:0;
    }
    70%{
        transform: translate(-50%, -50%) scale(1.05);
        opacity:1;
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
    }
}