/*  SECTION FORM
////////////////////////////////////// */
#form {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* overflow: hidden; */
    z-index: 500;
}


.form-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 5%;
width: min(100%, 800px);
}

.orange-wave-top {
    position: absolute;
    display: block;
    top: -17vw;
    left: 0;
    width: 100%;
    height: 350px;
    /* background-color: red; */

    & img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

.form-finn {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 30%;
    max-width: 300px;
    height: auto;

    & img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

.form-flamingo {
    position: absolute;
    top: 60%;
    left: 10%;
    width: 30%;
    max-width: 250px;
    height: auto;

    & img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    
}


.wpcf7-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin: auto;
padding-inline: min(8%, 20px);
}

.form-row {
width: 100%;
}

.form-row label {
font-weight: 900;
color: #fff;
text-align: center;
}

.wpcf7-form-control-wrap {
width: 100%;
display: block;
}

.form-row p {
margin-bottom: 0;
max-width: 460px;
margin: auto;
text-align: center;
}

.form-row input {
height: 45px;
border: none;
border-radius: 10px;
padding: 0 10px;
background: #fff;
color: var(--blue);
font-weight: 700;
transition: 0.3s ease-in-out;
max-width: 100%;
box-shadow: 0px 5px 0 #10B4E7;
}

.form-row select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
height: 45px;
border: none;
border-radius: 10px;
padding: 0 15px;
background: #fff;
color: var(--blue);
transition: 0.3s ease-in-out;
max-width: 100%;
box-shadow: 0px 5px 0 #10B4E7;
width: 100%;
}

.form-row input[type="date"] {
width: 100%;
}

.form-row input:focus-visible {
outline: none;
background: #ade6f7;
background-size: 400%;
transform: translateY(-3px) scale(1.02);
box-shadow: 0px 8px 0 #10B4E7;
}

.form-row textarea {
border: none;
padding: 10px;
border-radius: 10px;
background: #fff;
color: var(--blue);
font-weight: 700;
transition: 0.3s ease-in-out;
max-width: 100%;
box-shadow: 0px 5px 0 #10B4E7;
transition: 0.3s ease-in-out;
}

.form-row textarea:focus-visible {
outline: none;
background: #ade6f7;
background-size: 400%;
transform: translateY(-3px) scale(1.02);
box-shadow: 0px 8px 0 #10B4E7;
}

/* ACCEPTANCES */

.form-acceptances {
margin-top: 20px;
max-width: 470px;
color: #fff;
font-weight: 700;
}

.form-acceptances p {
font-size: 0.8rem;
line-height: 0.9rem;
text-align: justify;
position: relative;
padding-left: 25px;
}

.form-acceptances input[type="checkbox"] {
position: absolute;
left: -30px;
top: 0px;
width: 15px;
height: 15px;
border-radius: 3px;  
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: 0.3s ease-in-out;
background-color: #fff;
color: var(--blue);
box-shadow: 0px 2px 0 #10B4E7;
}


.form-acceptances input[type="checkbox"]:checked {
background-color: var(--blue);
color: #fff;

}
.form-acceptances input[type="checkbox"]:checked::before {
content: "✔︎";
font-size: 1.2rem;
font-weight: 900;
color: #fff;
position: absolute;
}

.form-acceptances .wpcf7-list-item {
position: relative;
top: 0;
}

button.cta {
border: none;
max-width: 300px;
width: 100%;
margin: 0 auto;
}

.submit-wrapper p {
text-align: center;
}

.submit-wrapper button:disabled {
filter: grayscale(50%);
cursor: not-allowed;
}

/* CF7 RESPONSES */
/* Yellow error */
.wpcf7-not-valid-tip {
background: rgb(177, 11, 11);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
text-align: center;
margin-top: 7px;
border-radius: 5px;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
background-color: #ffb900;
border-radius: 10px;
}
/* Red error */
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
background-color: #dc3232;
border-radius: 10px;
color: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
background-color: #46b450;
border-radius: 10px;
color: #fff;
}

.asterisk {
font-size: 0.9rem;
font-weight: 700;
text-align: center;
margin-top: 10px;
}

@media (max-width: 1366px) {
    .form-finn, .form-flamingo {
        display: none;
    }
}