/* 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;
}

/* Validatiemelding per veld */
.so-ew-gf-wrapper .validation_message {
    display: block;
}

/* Editor preview: foutmelding-placeholders */
.so-ew-gf-editor-error-preview {
    margin-top: 1.25rem;
    pointer-events: none;
}

.so-ew-gf-editor-error-preview__label {
    margin: 0 0 0.5rem;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.so-ew-gf-editor-error-preview__block + .so-ew-gf-editor-error-preview__block {
    margin-top: 0.75rem;
}

/* 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 */
}