) breaks the visual symmetry of the * input within the panel. Nuking from orbit is the only way to * be sure. */ .aieo-search-modal__slot, .aieo-search-modal__slot * { margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .aieo-search-modal__slot { display: flex !important; align-items: center !important; } /* Selectively restore line-height ONLY on the input itself + its * placeholder so the typed text doesn't collapse. Everything else * stays line-height:0 (= no ghost-line-of-text contribution). */ .aieo-search-modal__slot .dgwt-wcas-search-input, .aieo-search-modal__slot .dgwt-wcas-search-input::placeholder { line-height: 1.2 !important; } .aieo-search-modal__slot .dgwt-wcas-search-input { background: var(--rx-search-mobile-input-bg, #f6f6f6) !important; color: var(--rx-search-mobile-input-color, #1f2937) !important; border: var(--rx-search-mobile-input-border, 1px solid rgba(0,0,0,0.08)) !important; border-radius: var(--rx-search-mobile-input-radius, 0) !important; padding: var(--rx-search-mobile-input-padding, 10px 14px) !important; margin: var(--rx-search-mobile-input-margin, 0) !important; text-align: var(--rx-search-mobile-input-align, left) !important; line-height: normal !important; height: auto !important; } /* Hide FiboSearch's own mobile-overlay artefacts — we own the * chrome inside the modal. Suppress the close button, voice- * search icon, preloader, and the arrow indicators that the * plugin's mobile-overlay mode tries to add. */ .aieo-search-modal__slot .dgwt-wcas-close, .aieo-search-modal__slot .dgwt-wcas-overlay-mobile-magnifier, .aieo-search-modal__slot .dgwt-wcas-preloader, .aieo-search-modal__slot .dgwt-wcas-voice-search, .aieo-search-modal__slot .dgwt-wcas-search-submit, .aieo-search-modal__slot .dgwt-wcas-arrow, .aieo-search-modal__slot .dgwt-wcas-details-arrow { display: none !important; } /* Suggestions panel — fixed at TOP so it grows away from the * keyboard. FiboSearch appends `.dgwt-wcas-suggestions-wrapp` * to rather than keeping it inside the input wrapper * (standard autocomplete pattern to escape parent * `overflow: hidden` contexts), so the selector below targets * it at body-level — not scoped to `.aieo-search-modal__slot`. * On mobile (≤720px) we always want the suggestions to float * to the top of the viewport, even though the desktop FiboSearch * suggestions use the same class — the @media gate keeps them * untouched on desktop. */ .aieo-search-modal__slot .dgwt-wcas-search-wrapp { position: relative !important; } /* Suggestions / search history wrapper. FiboSearch reuses the * same `.dgwt-wcas-suggestions-wrapp` element to show BOTH the * autocomplete suggestions list AND the search-history panel * (the "Το ιστορικό των αναζητήσεών σας" view shown when the * input is focused but empty). Both go through the same rules. * * Selector specificity is bumped via the `body` prefix and the * `[class]` attribute trick so we beat any inline style * FiboSearch's JS might set (the plugin positions its dropdown * by writing `style="..."` to the same element on focus). */ body div[class~="dgwt-wcas-suggestions-wrapp"] { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; /* Suggestions panel ends ABOVE the modal panel — strictly no * overlap (z-index ordering can't be relied on when FiboSearch * appends suggestions inside the modal slot). The 60px is * the modal panel's approximate rendered height: input ~36px * + 8px+8px panel padding + 8px breathing gap. Override * `--rx-search-mobile-panel-h` if you've increased input padding. */ bottom: calc(var(--rx-search-mobile-margin-bottom, 58px) + var(--rx-search-mobile-panel-h, 60px)) !important; max-height: none !important; height: auto !important; overflow-y: auto !important; background: var(--rx-search-mobile-results-bg, #ffffff) !important; border-radius: 0 0 var(--rx-search-mobile-results-radius, 0) var(--rx-search-mobile-results-radius, 0) !important; box-shadow: var(--rx-search-mobile-results-shadow, 0 6px 18px rgba(0,0,0,0.18)) !important; z-index: 999999 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; transform: none !important; } /* Note: previously used `flex-direction: column-reverse` on * `.dgwt-wcas-st` to put most-relevant matches closest to the * input. That broke product-result internal layout (title / * description / price ordering, image-vs-details row direction) * because the same class also wraps individual product cards. * Natural top-down order is fine — the user is already looking * up at suggestions while typing on the bottom-anchored keyboard. */ /* Z-index hierarchy: * backdrop (999998) — bottom; just the gray overlay * suggestions (999999) — middle; clickable, scrollable * panel (1000000) — top; input + × always above * The modal ROOT itself drops to z-index:auto + isolation:auto * so it doesn't create its own stacking context — without that, * the backdrop child would inherit the root's high z-index and * sit ABOVE the suggestions panel, intercepting every click and * scroll attempt on a result. * * `pointer-events: auto` on the suggestions is also asserted so * any inherited `pointer-events: none` from a wrapper can't * leak through. */ .aieo-search-modal { z-index: auto !important; isolation: auto !important; } .aieo-search-modal__backdrop { z-index: 999998 !important; } body div[class~="dgwt-wcas-suggestions-wrapp"] { pointer-events: auto !important; } .aieo-search-modal__panel { z-index: 1000000 !important; } }