/* SiteOnline Gravity Form Widget – base reset & defaults
   Elementor selectors in de widget-controls leveren dynamische CSS.
   Dit bestand zorgt alleen voor een nette startbasis. */

.so-ew-gf-wrapper {
    width: 100%;
    --so-ew-image-choice-size: auto;
    --so-ew-choice-icon-color: #1d2327;
    --so-ew-choice-icon-selected-color: var(--so-ew-choice-icon-color);
}


/* Verwijder standaard GF margin-bottom op de form zelf */
.so-ew-gf-wrapper .gform_wrapper {
    margin: 0;
}

/* Volledige breedte voor alle invoervelden */
.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;
}

/* Textarea minimale hoogte */
.so-ew-gf-wrapper textarea {
    min-height: 120px;
    resize: vertical;
}

/* Voorkom dat GF-standaard stijlen de widget-styling overschrijven */
.so-ew-gf-wrapper .gform_footer,
.so-ew-gf-wrapper .gform_page_footer {
    margin-top: 0;
    padding: 0;
}

/* Submit-knop: reset browser-default + cursor */
.so-ew-gf-wrapper input[type=submit],
.so-ew-gf-wrapper button[type=submit] {
    cursor: pointer;
    display: inline-block;
    border: none;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease;
}

/* Validatiemelding per veld */
.so-ew-gf-wrapper .validation_message {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
}

/* Validatiefout-blok bovenaan het formulier */
.so-ew-gf-wrapper .gform_validation_errors {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

/* 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;
    gap: 8px;
}

.so-ew-gf-wrapper .gfield_checkbox input[type=checkbox],
.so-ew-gf-wrapper .gfield_radio input[type=radio] {
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
    /* Standaard border zodat border-color control zichtbaar is */
    border: 1px solid currentColor;
    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 {
    cursor: pointer;
    margin: 0;
}

/* Image choice assets: vloeiende visuele overgang bij style-controls */
.so-ew-gf-wrapper .gchoice img,
.so-ew-gf-wrapper .gchoice_image img,
.so-ew-gf-wrapper .gfield-choice-image {
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.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) !important;
    line-height: 0;
}

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

.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice-image,
.so-ew-gf-wrapper .ginput_container_image_choice .gfield-choice-image-wrapper img {
    filter: none !important;
}

/* Kleur-mapping wordt server-side al in de SVG gedaan (fill="currentColor" waar gepast,
   fill="none" blijft behouden). Geen universele !important-override op *, anders wordt
   een background <rect fill="none"> alsnog volledig ingekleurd. */

.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) !important;
}

/* 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, center);
    gap: 8px;
    cursor: pointer;
    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, center);
    gap: 8px;
    cursor: pointer;
    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, center) !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 */
}