/* SiteOnline Gravity Form Widget
   Styling via Elementor globals (widget controls) + GF-reset. */

.so-ew-gf-wrapper {
    width: 100%;
    --so-ew-image-choice-size: auto;
    --so-ew-gf-label-gap: 0;
}

/*
 * Layout fallback (GF Foundation): grid + kolombreedtes.
 * Nodig wanneer GF-theme CSS niet geladen is; harmoniëert met Foundation wanneer wel geladen.
 */
.so-ew-gf-wrapper .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    inline-size: 100%;
    width: 100%;
    column-gap: 0;
    grid-column-gap: 0;
    row-gap: var(--gf-form-gap-y, 16px);
    grid-row-gap: var(--gf-form-gap-y, 16px);
}

.so-ew-gf-wrapper .gform_wrapper .gfield {
    grid-column: 1 / -1;
    min-width: 0;
    min-inline-size: 0;
}

@media (min-width: 640px) {
    .so-ew-gf-wrapper .gform_wrapper .gform_fields {
        column-gap: var(--gf-form-gap-x, 16px);
        grid-column-gap: var(--gf-form-gap-x, 16px);
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-full {
        grid-column: span 12;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-eleven-twelfths {
        grid-column: span 11;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-five-sixths {
        grid-column: span 10;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-three-quarter {
        grid-column: span 9;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-two-thirds {
        grid-column: span 8;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-seven-twelfths {
        grid-column: span 7;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-half {
        grid-column: span 6;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-five-twelfths {
        grid-column: span 5;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-third {
        grid-column: span 4;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-quarter {
        grid-column: span 3;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-one-sixth {
        grid-column: span 2;
    }

    .so-ew-gf-wrapper .gform_wrapper .gfield--width-one-twelfth {
        grid-column: span 1;
    }
}

.so-ew-gf-wrapper .gfield_label,
.so-ew-gf-wrapper .gfield_legend,
.so-ew-gf-wrapper .gform-field-label {
    margin-bottom: var(--so-ew-gf-label-gap);
}

/* Labels visueel verbergen (a11y: sr-only) */
.so-ew-gf-wrapper.so-ew-gf-hide-labels .gfield_label,
.so-ew-gf-wrapper.so-ew-gf-hide-labels .gfield_legend,
.so-ew-gf-wrapper.so-ew-gf-hide-labels .gform-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.so-ew-gf-wrapper .gform_wrapper {
    margin: 0;
}

/* GF Orbital visuele styles neutraliseren (schaduw e.d.) — geen eigen design */
.so-ew-gf-wrapper .gform-theme-field-control,
.so-ew-gf-wrapper input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.so-ew-gf-wrapper textarea,
.so-ew-gf-wrapper select {
    box-shadow: none;
}

.so-ew-gf-wrapper input:not([type=submit]):not([type=radio]):not([type=checkbox]),
.so-ew-gf-wrapper textarea,
.so-ew-gf-wrapper select {
    width: 100%;
    box-sizing: border-box;
}

/* Framework-styles staan uit (gform-theme__disable-framework), daardoor vervalt
   de GF-chevron terwijl appearance:none de native pijl ook verbergt. */
.so-ew-gf-wrapper select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--gf-icon-ctrl-select, url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23686E77'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 10px 6px;
}

/* Textarea: zelfde basis als inputs (GF framework zet anders border-width:0) */
.so-ew-gf-wrapper .gform_wrapper textarea,
.so-ew-gf-wrapper .gform_wrapper .ginput_container_textarea textarea {
    -webkit-appearance: none;
    appearance: none;
    border-style: solid;
    resize: vertical;
}

/* GF Orbital stelt height via --gfield-control-height op alle velden in (incl. textarea),
   waardoor de GF-configuratie 'Aantal rijen' genegeerd wordt.
   Zet height terug op auto; JS berekent min-height op basis van het rows-attribuut. */
.so-ew-gf-wrapper .gform_wrapper .ginput_container_textarea textarea {
    height: auto !important;
}

.so-ew-gf-wrapper .gform_footer,
.so-ew-gf-wrapper .gform_page_footer,
.so-ew-gf-wrapper .gform-footer {
    margin-top: 0;
    padding: 0;
}

/* Submit-knop: vaste class so-ew-gf-submit (Elementor style controls + custom class) */
/* Submit: GF Foundation resetten, styling via widget + elementor-button */
.so-ew-gf-wrapper .gform_footer .so-ew-gf-submit,
.so-ew-gf-wrapper .gform_page_footer .so-ew-gf-submit,
.so-ew-gf-wrapper .gform-footer .so-ew-gf-submit,
.so-ew-gf-wrapper .gform_wrapper input[type=submit].so-ew-gf-submit,
.so-ew-gf-wrapper .gform_wrapper button[type=submit].so-ew-gf-submit {
    inline-size: auto;
    width: auto;
    max-width: 100%;
}

.so-ew-gf-wrapper .so-ew-gf-submit {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

/* Overige GF-knoppen (next/prev) */
.so-ew-gf-wrapper .gform_wrapper .gform_button.gform_next_button,
.so-ew-gf-wrapper .gform_wrapper .gform_button.gform_previous_button,
.so-ew-gf-wrapper .gform_wrapper input.gform_button.gform_next_button,
.so-ew-gf-wrapper .gform_wrapper input.gform_button.gform_previous_button {
    cursor: pointer;
    text-decoration: none;
}

/* Validatie: zelfde opbouw als Gravity Forms gravity-theme. */
.so-ew-gf-wrapper .gform_wrapper .gform_validation_errors,
.so-ew-gf-wrapper .gform_validation_errors,
.so-ew-gf-editor-preview > .gform_validation_errors {
    background: transparent;
    background-color: transparent;
    border: 1.5px solid #c02b0a;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.11);
    margin: 8px 0;
    padding: 16px 16px 16px 48px;
    position: relative;
    width: 100%;
}

.so-ew-gf-wrapper .gform_validation_errors > .gform_submission_error {
    color: #c02b0a;
    font-size: 13.2px;
    font-weight: 500;
    line-height: 17.6px;
    margin: 0 0 12px;
}

.so-ew-gf-wrapper .gform_validation_errors > .gform_submission_error.hide_summary {
    margin: 0;
}

.so-ew-gf-wrapper .gform_validation_errors .gform-icon {
    align-items: center;
    color: #c02b0a;
    display: flex;
    font-size: 28px;
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 12px;
    position: absolute;
}

.so-ew-gf-wrapper .gform_validation_errors > ol {
    list-style: disc;
    margin: 0;
    padding-inline-start: 20px;
}

.so-ew-gf-wrapper .gform_wrapper .gform_validation_errors > ol li,
.so-ew-gf-wrapper .gform_wrapper .gform_validation_errors > ol a,
.so-ew-gf-wrapper .gform_validation_errors > ol li,
.so-ew-gf-wrapper .gform_validation_errors > ol a,
.so-ew-gf-wrapper .gform_validation_errors .gform_validation_error_link {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: inherit;
}

.so-ew-gf-wrapper .validation_message,
.so-ew-gf-wrapper .gfield_validation_message {
    background: #fff9f9;
    border: 1px solid #c02b0a;
    color: #c02b0a;
    display: block;
    font-size: 15px;
    margin-block-start: 8px;
    padding: 13px 24px;
}

/* Editor: GF verbergt wrapper/pagina's tot conditional-logic-JS. Die draait niet in de builder. */
.so-ew-gf-editor-preview .gform_wrapper,
.so-ew-gf-editor-preview .gform_page,
.so-ew-gf-editor-preview .gfield.gfield_visibility_hidden:not(.gfield--type-honeypot),
.so-ew-gf-editor-preview .gform_validation_errors,
.so-ew-gf-editor-preview .gfield_validation_message {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Checkbox & Radio: flex-layout zodat input en label netjes zijn uitgelijnd */
.so-ew-gf-wrapper .gfield_checkbox .gchoice,
.so-ew-gf-wrapper .gfield_radio .gchoice,
.so-ew-gf-wrapper .gfield_checkbox .gfield-choice,
.so-ew-gf-wrapper .gfield_radio .gfield-choice {
    display: flex;
    align-items: center;
}

.so-ew-gf-wrapper .gfield_checkbox input[type=checkbox],
.so-ew-gf-wrapper .gfield_radio input[type=radio] {
    flex-shrink: 0;
    box-sizing: border-box;
    appearance: auto;
}

.so-ew-gf-wrapper .gfield_checkbox label,
.so-ew-gf-wrapper .gfield_checkbox .gfield-choice-label,
.so-ew-gf-wrapper .gfield_radio label,
.so-ew-gf-wrapper .gfield_radio .gfield-choice-label {
    margin: 0;
}

.so-ew-gf-wrapper .so-ew-gf-choice-image--hidden {
    display: none !important;
}

.so-ew-gf-wrapper .so-ew-gf-choice-icon {
    display: inline-flex;
    width: auto;
    height: auto;
    color: var(--so-ew-choice-icon-color, currentColor);
    line-height: 0;
}

.so-ew-gf-wrapper .so-ew-gf-choice-icon svg {
    display: block;
    width: 100%;
    height: auto;
}


.so-ew-gf-wrapper .gchoice input:checked + label .so-ew-gf-choice-icon,
.so-ew-gf-wrapper .gfield-choice-input:checked + label .so-ew-gf-choice-icon,
.so-ew-gf-wrapper .gchoice.selected .so-ew-gf-choice-icon,
.so-ew-gf-wrapper .gchoice.is-selected .so-ew-gf-choice-icon {
    color: var(--so-ew-choice-icon-selected-color, var(--so-ew-choice-icon-color, currentColor));
}

/* Image/Icon choice UI:
   - verberg native radio/checkbox
   - toon icon/afbeelding met label eronder */
.so-ew-gf-wrapper.so-ew-gf-hide-choice-inputs .ginput_container_image_choice .gchoice input[type="radio"],
.so-ew-gf-wrapper.so-ew-gf-hide-choice-inputs .ginput_container_image_choice .gchoice input[type="checkbox"],
.so-ew-gf-wrapper.so-ew-gf-hide-choice-inputs .ginput_container_image_choice .gfield-choice-input,
.so-ew-gf-wrapper.so-ew-gf-hide-choice-inputs .so-ew-gf-field--image-choice .gchoice input[type="radio"],
.so-ew-gf-wrapper.so-ew-gf-hide-choice-inputs .so-ew-gf-field--image-choice .gchoice input[type="checkbox"],
.so-ew-gf-wrapper.so-ew-gf-hide-choice-inputs .so-ew-gf-field--image-choice .gfield-choice-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gchoice,
.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gfield-choice {
    position: relative;
    display: flex;
}

.so-ew-gf-wrapper .ginput_container_image_choice .gchoice,
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice {
    position: relative;
    display: flex;
}

/* GravityWiz image-choice structuur (outer/inner wrappers) */
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-image-choice-wrapper-outer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
}

.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice-image-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

.so-ew-gf-wrapper .ginput_container_image_choice .gfield-image-choice-wrapper-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gchoice label,
.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gfield-choice label {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: var(--so-ew-choice-label-align, inherit);
    gap: 8px;
    width: 100%;
    height: 100%;
}

.so-ew-gf-wrapper .ginput_container_image_choice .gchoice label,
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice label {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: var(--so-ew-choice-label-align, inherit);
    gap: 8px;
    width: 100%;
    height: 100%;
}

.so-ew-gf-wrapper .ginput_container_image_choice .gfield-image-choice-wrapper-inner label {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: var(--so-ew-choice-label-align, inherit) !important;
    width: 100%;
}

.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gchoice label img,
.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gchoice label .so-ew-gf-choice-icon,
.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gfield-choice label img,
.so-ew-gf-wrapper .so-ew-gf-field--image-choice .gfield-choice label .so-ew-gf-choice-icon,
.so-ew-gf-wrapper .ginput_container_image_choice .gchoice label img,
.so-ew-gf-wrapper .ginput_container_image_choice .gchoice label .so-ew-gf-choice-icon,
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice label img,
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice label .so-ew-gf-choice-icon,
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice-image-wrapper .gfield-choice-image,
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice-image-wrapper img {
    display: block;
    margin: 0 auto;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    align-self: center;
    width: var(--so-ew-image-choice-size) !important;
    height: auto !important;
    max-width: 100% !important;
}

.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice-image-wrapper .gfield-choice-image {
    width: var(--so-ew-image-choice-size) !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: static !important;
}

.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice-image-wrapper {
    min-height: 1px;
}

.so-ew-gf-wrapper .ginput_container_image_choice .so-ew-gf-choice-icon svg,
.so-ew-gf-wrapper .so-ew-gf-field--image-choice .so-ew-gf-choice-icon svg {
    width: 100% !important;
    height: auto !important;
}

/* Radio/checkbox in image choice echt verbergen wanneer widget-optie uit staat */
.so-ew-gf-wrapper.so-ew-gf-hide-choice-inputs .ginput_container_image_choice .gfield-image-choice-wrapper-inner .gfield-choice-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Verberg de GF-titel en -omschrijving standaard
   (widgets controls regelen dit via show_title / show_description) */
.so-ew-gf-wrapper .gform_heading {
    /* niet verbergen: GF rendert deze alleen als de GF-optie aan staat */
}