/* Contact Form 7 Styles */
.wpcf7-form-control-wrap {
    position: relative;
    display: block;
}

.wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 12px;
    color: #dc3232;
    margin-top: 2px;
}

.wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
}

.wpcf7-display-none {
    display: none;
}

.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: relative;
}

form.submitting .wpcf7-spinner {
    visibility: visible;
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
    content: " ";
}

/* Custom Checkbox Styles for CF7 */
.wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
    display: block;
}

.wpcf7-checkbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
}

.wpcf7-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.wpcf7-checkbox .wpcf7-list-item-label {
    position: relative;
    padding-left: 35px;
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: -.07em;
}

.wpcf7-checkbox .wpcf7-list-item-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color: #fff;
}

.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
    background-color: #3898ec;
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-color: #3898ec;
}

.wpcf7-checkbox input[type="checkbox"]:focus + .wpcf7-list-item-label:before {
    box-shadow: 0 0 3px 1px #3898ec;
}

/* Adjustments for CF7 structure */
.contact_wrapper1 .wpcf7-form-control-wrap {
    width: 100%;
}

.contact_form.w-input {
    margin-bottom: 0; /* Remove default margin as wrapper handles it */
}

.div_button_contact .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 1.5rem;
}

.div_button1_contact input[type="submit"] {
    cursor: pointer;
}

/* Validation Error Styling - Popup Style */
.wpcf7-not-valid-tip {
    background-color: #dc3232;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-family: Inter, sans-serif;
}

.wpcf7-not-valid-tip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 10px;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #dc3232;
}

/* Success/Error Response Output */
.wpcf7-response-output {
    border-radius: 5px;
    font-family: Inter, sans-serif;
    text-align: center;
}

.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-validation-errors {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Fix for layout breakage */
.contact_form_grand {
    display: block;
    width: 100%;
}

.contact_wrapper.name,
.contact_wrapper.mail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media screen and (max-width: 767px) {
    .contact_wrapper.name,
    .contact_wrapper.mail {
        grid-template-columns: 1fr;
    }
}

.div_button_contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    grid-template-areas: 
        "Area Area-2"
        ". .";
}

.div_button_contact > label:nth-child(1) {
    grid-area: Area;
}

.div_button_contact > label:nth-child(2) {
    grid-area: Area-2;
}

.div_button1_contact {
    grid-column: 1 / -1;
    margin-top: 1rem;
}

@media screen and (max-width: 479px) {
    .div_button_contact {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "Area"
            "Area-2";
    }
}

/* Restore main grid layout */
.form-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 6rem;
    margin-bottom: 12rem;
}

@media screen and (max-width: 991px) {
    .form-block {
        grid-template-columns: 1fr;
    }
}

.contact-form-container {
    width: 100%;
}

/* Hide default CF7 checkbox artifacts if any */
.wpcf7-list-item {
    margin: 0;
}

/* Ensure custom checkbox styling works correctly */
.w-checkbox-input--inputType-custom.checkbox {
    position: relative; /* Ensure it's visible */
    display: inline-block;
    margin-right: 10px;
    float: none; /* Override Webflow float */
    vertical-align: middle;
}

.checkbox_contact.w-form-label {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 40px); /* Adjust width to fit next to checkbox */
}

/* Hide the actual input inside the label more robustly if needed, 
   but CF7 puts it inside .wpcf7-list-item usually. 
   The template has [acceptance ... class:w-checkbox-input ...] 
   which might be rendering an extra input. 
   Let's target the CF7 generated span wrapper for checkboxes to be inline */
.wpcf7-form-control-wrap.acceptance-marketing,
.wpcf7-form-control-wrap.acceptance-personal-data {
    display: inline-block;
    width: auto;
    margin-right: 10px;
}

/* Hide the default checkbox input rendered by CF7 acceptance tag if we are using custom div */
.wpcf7-acceptance input[type="checkbox"] {
    /* We need the input to be clickable or at least present for the label to work.
       If we use the custom div as visual, we hide the real input but keep it clickable?
       Actually, Webflow structure uses a div for visual and an input for logic.
       CF7 acceptance tag renders an input.
       We should probably hide the CF7 input visually but keep it functional, 
       OR style the CF7 input to look like the custom one.
       
       Given the template:
       <div class="w-checkbox-input ..."></div>
       [acceptance ... class:w-checkbox-input ...]
       
       The [acceptance] shortcode renders <span ...><input type="checkbox" ...></span>.
       This means we have a DIV (visual) AND an INPUT (CF7).
       The "two squares" are likely the DIV and the INPUT showing up together.
       
       We should hide the DIV provided by HTML and style the CF7 input, 
       OR hide the CF7 input and make it trigger the DIV state (harder without JS).
       
       Best approach: Hide the HTML div `.w-checkbox-input` that is NOT the CF7 one,
       and style the CF7 input to look like it.
       
       BUT, the CF7 shortcode has `class:w-checkbox-input`. 
       So the input itself gets the class.
    */
}

/* Hide the extra div from the HTML template if it's redundant */
label.w-checkbox > div.w-checkbox-input:not(input),
label.w-checkbox .w-checkbox-input:not(input) {
    display: none !important;
}

/* Style the CF7 input which now has the class .w-checkbox-input */
input.w-checkbox-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    margin-top: 0; /* Reset margins */
    float: none;
    display: inline-block !important;
    vertical-align: middle;
    position: relative;
    opacity: 1;
    z-index: 1;
}

/* Ensure the CF7 wrapper doesn't hide the input */
.wpcf7-checkbox input[type="checkbox"] {
    opacity: 1;
    position: relative;
    z-index: 1;
}

/* Hide the default CF7 span wrapper if it interferes, but usually we need it */
.wpcf7-list-item {
    margin: 0;
    display: inline-block; /* Keep it inline with label text */
}

/* Specific fix for the "two squares" issue:
   If the user has both the div.w-checkbox-input AND the CF7 input,
   we need to make sure only one is visible.
   The rule above `label.w-checkbox > div.w-checkbox-input:not(input)` should hide the div.
   Now we ensure the input is styled correctly.
*/

input.w-checkbox-input[type="checkbox"]:checked {
    background-color: #3898ec;
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-color: #3898ec;
}

input.w-checkbox-input[type="checkbox"]:focus {
    box-shadow: 0 0 3px 1px #3898ec;
}

/* Yandex SmartCaptcha Styles */
.captcha_wrapper {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.captcha_wrapper iframe {
    max-width: 100%;
}