.simple-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.3s ease;
}
footer {
z-index: 99 !important;
}
.simple-modal.show {
display: flex;
opacity: 1;
}
.simple-modal .simple-modal-box {
background: #fff;
border-radius: 14px;
max-width: 520px;
width: 100%;
padding: 5px 5px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
position: relative;
animation: fadeInUp 0.35s ease;
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.simple-modal .simple-modal-close {
position: absolute;
top: 12px;
right: 15px;
background: none;
border: none;
font-size: 24px;
color: #555;
cursor: pointer;
transition: color 0.2s ease;
}
.simple-modal .simple-modal-close:hover {
color: #000;
}
.simple-modal .simple-modal-box h3 {
font-size: 22px;
font-weight: 400;
text-align: center;
color: #06baf3;
margin-bottom: 0px;
}
.simple-modal h1,
.simple-modal h2,
.simple-modal h3 {
margin: 10px 0;
} .simple-modal #responsive-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.simple-modal .form-row {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.simple-modal .column-half {
flex: 1 1 48%;
}
.simple-modal .column-full {
flex: 1 1 100%;
}
.simple-modal .wpcf7-form-control {
width: 100%;
padding: 12px 14px;
border: 1px dashed #ccc;
border-radius: 8px;
font-size: 15px;
transition: all 0.2s ease;
font-family: inherit;
background-color: #d9d9d900;
}
.simple-modal .wpcf7-form-control:focus {
outline: none;
border-color: #06baf3;
box-shadow: 0 0 0 3px rgba(6, 186, 243, 0.15);
} .simple-modal .wpcf7-select {
appearance: none;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 55l35 35 35-35' stroke='%23666' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center/12px auto;
} .simple-modal .wpcf7-textarea {
resize: vertical;
min-height: 90px;
min-height: auto; height: 90px;
} .simple-modal .wpcf7-submit {
width: 100%;
background: #06baf3;
color: #fff;
border: none;
padding: 14px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s ease;
}
.simple-modal .wpcf7-submit:hover {
background: #0099d0;
} .simple-modal .recaptcha {
display: flex;
justify-content: center;
margin-top: 0px;
} .simple-modal .wpcf7-response-output {
margin-top: 10px;
text-align: center;
font-size: 14px;
color: #333;
}
.simple-modal .wpcf7-form-control.wpcf7-text {
height: 40px;
} @media (max-width: 768px) {
.simple-modal .column-half {
flex: 1 1 100%;
}
.simple-modal .simple-modal-box {
max-width: 90%;
max-height: 80vh;
padding: 10px 10px;
overflow-y: auto;
}
.simple-modal .form-row {
flex-direction: column; gap: 12px;
}
.simple-modal .wpcf7-textarea {
min-height: 90px; }
.simple-modal .wpcf7-submit {
font-size: 15px;
padding: 12px;
}
.simple-modal .wpcf7-form-control {
width: 100%;
padding: 5px 10px;
border: 1px dashed #ccc;
border-radius: 8px;
font-size: 15px;
transition: all 0.2s ease;
font-family: inherit;
}
.simple-modal select {
padding: 10px 10px !important;
}
.simple-modal .wpcf7-form-control.wpcf7-text {
height: 37px;
}
.simple-modal .simple-modal-box h3 {
font-size: 22px;
font-weight: 400;
text-align: center;
color: #06baf3;
margin-bottom: 0px;
}
.simple-modal h1,
.simple-modal h2,
.simple-modal h3 {
margin: 5px 0;
}
.simple-modal .wpcf7-recaptcha {
width: 100%;
padding: 0px 0px;
border: 0px solid #ccc;
border-radius: 8px;
font-size: 15px;
margin: 0 auto 0px auto !important
}
} .simple-modal .recaptcha,
.simple-modal .wpcf7-recaptcha {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 15px auto; } .simple-modal .wpcf7-recaptcha>div {
display: flex;
justify-content: center;
}