/* Overlay */

.custom-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:99999;
}

/* Show */

.custom-modal-overlay.active{
    opacity:1;
    visibility:visible;
}

/* Popup */

.custom-modal{

    width:90%;
    max-width:480px;

    background:#fff;
    border-radius:16px;

    padding:35px;

    position:relative;

    transform:translateY(-30px);
    transition:.35s ease;

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

.custom-modal-overlay.active .custom-modal{
    transform:translateY(0);
}

/* Heading */

.custom-modal h2{
    text-align:center;
    margin-bottom:25px;
    color:#222;
    font-size:30px;
}

/* Close */

.close-modal{
    position:absolute;
    top:15px;
    right:20px;
    font-size:30px;
    cursor:pointer;
    color:#888;
}

.close-modal:hover{
    color:#000;
}

/* Form */

.custom-modal .form-group{
    margin-bottom:18px;
}

.custom-modal input{

    width:100%;
    height:50px;

    padding:0 18px;

    border:1px solid #ddd;
    border-radius:8px;

    font-size:15px;
    outline:none;
}

.custom-modal input:focus{
    border-color:#d4a13b;
}

/* Button */

.popup-btn{

    width:100%;
    height:52px;

    border:none;

    background:#d4a13b;
    color:#fff;

    font-size:16px;
    font-weight:600;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;
}

.popup-btn:hover{
    background:#b98722;
}

/* Validation */

.error-validation{
    color:red;
    font-size:13px;
}