/* ========================================================================== Forms — WPForms output and the custom dropdown. WPForms ships its own stylesheet and its selectors are unlayered, so these rules use !important where they compete directly. Everything else is plain specificity. ========================================================================== */ /* Shared with app.css — see the note in dropdown.css. */ /* ========================================================================== Custom dropdown — the accessible listbox that replaces every native ) ========================================================================== */ /* * The native select stays in the DOM as the source of truth — WPForms * validates and submits it. It is only hidden once JS has upgraded it, so a * failed script leaves a working native control rather than nothing. */ /* * !important throughout: WPForms styles its selects with a more specific * unlayered selector (div.wpforms-container-full .wpforms-form select), which * otherwise keeps position:static and width:100%. The clip-path alone hid it * visually but it still occupied 380x43 of layout, pushing the custom control * down and leaving a gap. */ select.ck-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; /* Keep it focusable and in the a11y tree — it is still the real control. */ opacity: 0; pointer-events: none; } /* * !important, and the child rules below are scoped through .ck-select to raise * them to two classes, because WPForms resets `div.wpforms-container-full *` * (position, width, background, border, border-radius, padding, box-shadow, * font-size) at a specificity of (0,1,2). A single-class rule loses all of it: * this wrapper fell back to position:static, which left the panel below * positioned against the page rather than the field, and stripped the panel of * its background, border, radius, shadow and padding entirely. * * Scoping through .ck-select rather than .wpforms-container keeps these working * for the dropdowns outside a form, which get no reset at all. */ .ck-select { position: relative !important; width: 100% !important; } /* * Raise the whole control while its list is open. * * THE MOBILE BUG this fixes: on the quote form the Foodconcept dropdown is * immediately followed by the Menu dropdown. Both wrappers are position:relative * with auto z-index, so the later one (Menu) painted over the lower half of the * open Foodconcept list — you saw the first option, then the Menu field cut * across the rest. Giving the open wrapper its own stacking context above its * siblings puts the full list on top of everything after it. * * !important to match the position rule above, which is itself !important to * beat WPForms. */ .ck-select.is-open { z-index: 60 !important; } /* * THE ACTUAL MOBILE BUG (the z-index above was a red herring — it was already * applying). WPForms puts `overflow: hidden` on the select field's container * (.wpforms-field-select), which CLIPS the absolutely-positioned listbox to the * ~85px field box — so only a sliver of the first option showed and the rest * was cut off, not covered. Letting the field overflow lets the popup escape. * * Any WPForms field that hosts a custom dropdown needs this, so it is scoped to * the field that wraps a .ck-select rather than to -select alone (the "Soort * evenement" select renders as tiles, not a dropdown, and does not need it — * but :has keeps this correct whatever a field turns into). */ .wpforms-container .wpforms-field:has(.ck-select) { overflow: visible !important; } /* * !important on the visual properties: WPForms' modern stylesheet resets every *