.contact-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
    background: #ffffff;
    border-radius: 25px;
    overflow: hidden;
}

.contact-form-image {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.contact-form-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-form-content {
    padding: 60px;
}

/* Form styling */
.bronk-contact-form {
    margin-top: 30px;
}

.bronk-contact-form .frm_forms {
    margin: 0;
}

.bronk-contact-form .frm_form_field {
    margin-bottom: 15px;
}

.bronk-contact-form .frm_primary_label {
    color: #000;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
    display: block !important;
}

/* Basis input styling zonder border */
.bronk-contact-form input[type="text"],
.bronk-contact-form input[type="email"],
.bronk-contact-form input[type="tel"],
.bronk-contact-form textarea {
    width: 100% !important;
    padding: 11px 15px !important;
    border: none !important;
    border-radius: 25px !important;
    background-color: #F8F7F7 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    transition: box-shadow 0.3s ease !important;
}

/* Focus state met box-shadow */
.bronk-contact-form input[type="text"]:focus,
.bronk-contact-form input[type="email"]:focus,
.bronk-contact-form input[type="tel"]:focus,
.bronk-contact-form textarea:focus,
.with_frm_style input[type="text"]:focus,
.with_frm_style input[type="email"]:focus,
.with_frm_style input[type="tel"]:focus,
.with_frm_style textarea:focus {
    background-color: #F8F7F7 !important;
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 2px rgba(9, 43, 30, 0.2) !important; /* Donkerdere schaduw in de primaire kleur */
}

/* Textarea specifieke styling */
.bronk-contact-form textarea {
    min-height: 150px !important;
    height: 150px !important;
    max-height: 150px !important;
    padding: 15px !important;
    resize: none !important;
}

/* Checkbox styling */
.bronk-contact-form .frm_checkbox {
    margin: 15px 0;
}

.bronk-contact-form .frm_checkbox label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #666666 !important;
    cursor: pointer !important;
}

.bronk-contact-form .frm_checkbox input[type="checkbox"],
.with_frm_style .frm_checkbox input[type="checkbox"] {
    margin-top: 3px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #000000 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

/* Checked state */
.bronk-contact-form .frm_checkbox input[type="checkbox"]:checked,
.with_frm_style .frm_checkbox input[type="checkbox"]:checked {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
}

.bronk-contact-form .frm_checkbox input[type="checkbox"]:checked::after,
.with_frm_style .frm_checkbox input[type="checkbox"]:checked::after {
    content: '\f00c' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    color: #000000 !important;
    font-size: 12px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Focus state */
.bronk-contact-form .frm_checkbox input[type="checkbox"]:focus,
.with_frm_style .frm_checkbox input[type="checkbox"]:focus {
    box-shadow: none !important;
    border-color: #000000 !important;
}

/* Submit button basis styling */
.bronk-contact-form .frm_submit {
    display: none !important;
}

.bronk-contact-form .frm_button_submit {
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 30px !important;
    background-color: #092B1E !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 25px !important;
    margin-top: 15px !important;
    transition: all 0.3s ease !important;
    width: fit-content !important;
    z-index: 1 !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

/* Pijl icoon */
.bronk-contact-form .frm_button_submit::after {
    content: '\f054' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-left: 10px !important;
    transition: transform 0.3s ease !important;
}
.with_frm_style .frm_checkbox label input[type=checkbox], .with_frm_style .frm_radio label input[type=radio]{
    margin-top:1px !important;
}

/* Groene overlay */
.bronk-contact-form .frm_button_submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;  /* Start vanaf links */
    width: 100%;
    height: 100%;
    background-color: #099747;
    transition: left 0.3s ease;
    z-index: -1;
}

/* Hover states */
.bronk-contact-form .frm_button_submit:hover::before,
.bronk-contact-form .frm_button_submit:active::before {
    left: 0;  /* Schuif naar rechts */
}

.bronk-contact-form .frm_button_submit:hover::after,
.bronk-contact-form .frm_button_submit:active::after {
    transform: translateX(3px) !important;
}

/* Links */
.bronk-contact-form a {
    color: #000;
    text-decoration: none;
}

.bronk-contact-form a:hover {
    color: #099747;
}

.with_frm_style .vertical_radio .frm_checkbox label, .with_frm_style .vertical_radio .frm_radio label{
    color: #000 !important;
}

.bronk-contact-form input[type="text"], .bronk-contact-form input[type="email"], .bronk-contact-form input[type="tel"], .bronk-contact-form textarea{
    width: 100% !important;
    padding: 11px 15px !important;
}
.bronk-contact-form .frm_form_field:first-of-type {
    width: 100% !important;
}

.frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type=checkbox]:not([disabled]):checked{
    margin-top: 1px !important;
}
@media screen and (max-width: 768px) {
    .contact-form-wrapper {
        grid-template-columns: 1fr;
        border-radius: 0;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }

    .contact-form-image {
        min-height: 300px;
    }

    .contact-form-image img {
        border-radius: 0;
    }

    .contact-form-content {
        padding: 20px 40px;
    }

    /* Specifiekere selector die alleen de container van het contactformulier aanpast */
    .bronk-contact-form .bronk-container-marge {
        padding-left: 0;
        padding-right: 0;
    }
} 

/* Spinner styling */
.bronk-contact-form .frm_button_submit.frm_loading_prev {
    position: relative !important; /* Behoud relative positioning */
    color: transparent !important; /* Verberg tekst tijdens laden */
}

.bronk-contact-form .frm_button_submit.frm_loading_prev::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important; /* Centreer horizontaal */
    transform: translate(-50%, -50%) !important; /* Centreer perfect */
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    border-top-color: transparent !important;
    animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg); /* Behoud centrering tijdens rotatie */
    }
}

/* Verberg pijltje tijdens laden */
.bronk-contact-form .frm_button_submit.frm_loading_prev i {
    display: none !important;
}