/* * FSL Smart Search — styles * * The results panel is moved to by JavaScript and positioned with * position:fixed + inline top/left/width set per-instance. That is what * makes it immune to ancestor overflow:hidden and low stacking contexts * inside Elementor sections — the CSS below only needs to handle its own * appearance, not fight for space inside a parent container. * * v1.2.0 — Purple & white theme, Oxanium product-name typography, larger * thumbnails, and a dedicated "Recent Searches" panel shown on focus. */ @import url( 'https://fonts.googleapis.com/css2?family=Oxanium:wght@500;600;700&display=swap' ); /* * Defined on :root (not .fsl-search-container) because search.js moves * .fsl-search-results out to a direct child of so it can escape * ancestor overflow:hidden / low stacking contexts (see file header). * Once reparented it's no longer a descendant of .fsl-search-container, * so custom properties scoped there would stop resolving for it and * fall back to their initial values — e.g. background-color: transparent * instead of white. Defining them on :root keeps them available to the * panel wherever it lives in the DOM. */ :root { --fsl-purple: #7a5cff; --fsl-purple-dark: #5f3fe0; --fsl-purple-tint: #f5f2ff; --fsl-purple-border: #e4dcff; --fsl-white: #ffffff; } .fsl-search-container { position: relative; width: 100%; max-width: 500px; } .fsl-search-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; /* 16px minimum prevents iOS Safari auto-zoom on focus */ line-height: 1.4; background: var( --fsl-white ); color: #2a2140; border: 1px solid var( --fsl-purple-border ); border-radius: 8px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .fsl-search-input::placeholder { color: #9b8fc2; } .fsl-search-input:focus { border-color: var( --fsl-purple ); box-shadow: 0 0 0 3px rgba( 122, 92, 255, 0.18 ); } /* Remove the default WebKit "x" clear button so our own styling is consistent */ .fsl-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* Results / recent-searches panel: hidden by default, JS toggles .is-open * and sets position/top/left/width inline once ported to . */ .fsl-search-results { display: none; background: var( --fsl-white ); border: 1px solid var( --fsl-purple-border ); border-radius: 10px; box-shadow: 0 12px 32px rgba( 122, 92, 255, 0.18 ); max-height: min( 420px, 70vh ); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 999999; /* Production-safe: sits above virtually any theme/Elementor UI once ported to . */ } .fsl-search-results.is-open { display: block; } /* Scrollbar styling (WebKit + Firefox) */ .fsl-search-results::-webkit-scrollbar { width: 8px; } .fsl-search-results::-webkit-scrollbar-track { background: transparent; } .fsl-search-results::-webkit-scrollbar-thumb { background-color: rgba( 122, 92, 255, 0.3 ); border-radius: 8px; } .fsl-search-results { scrollbar-width: thin; scrollbar-color: rgba( 122, 92, 255, 0.3 ) transparent; } /* --------------------------------------------------------------- * Recent Searches panel (shown on input focus, before any query) * ------------------------------------------------------------- */ .fsl-recent-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var( --fsl-purple-tint ); border-bottom: 1px solid var( --fsl-purple-border ); font-size: 11.5px; font-weight: 700; color: var( --fsl-purple-dark ); text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; } .fsl-recent-clear { background: none; border: none; padding: 2px 4px; font-size: 11.5px; font-weight: 600; color: var( --fsl-purple ); text-transform: none; letter-spacing: normal; cursor: pointer; } .fsl-recent-clear:hover, .fsl-recent-clear:focus-visible { text-decoration: underline; } .fsl-recent-list { background: var( --fsl-white ); } .fsl-item-recent { padding-right: 40px; } .fsl-recent-dismiss { position: absolute; right: 8px; top: 50%; transform: translateY( -50% ); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: #a79bd1; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .fsl-recent-dismiss:hover, .fsl-recent-dismiss:focus-visible { background: var( --fsl-purple-tint ); color: var( --fsl-purple-dark ); } /* --------------------------------------------------------------- * Result / recent rows * ------------------------------------------------------------- */ .fsl-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 44px; /* Apple/Google recommended minimum touch target */ text-decoration: none; color: #2a2140; border-bottom: 1px solid #f1edff; transition: background-color 0.12s ease; } .fsl-item:last-child { border-bottom: none; } .fsl-item:hover, .fsl-item:focus-visible, .fsl-item.is-active { background-color: var( --fsl-purple-tint ); } .fsl-item img { width: 64px; height: 64px; flex: 0 0 auto; object-fit: contain; border-radius: 8px; background: var( --fsl-purple-tint ); border: 1px solid var( --fsl-purple-border ); } .fsl-item strong { display: block; font-family: 'Oxanium', 'Segoe UI', sans-serif; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var( --fsl-purple ); } .fsl-item div div { font-size: 12.5px; color: #6b6285; margin-top: 2px; } .fsl-empty, .fsl-loading { padding: 16px 14px; font-size: 14px; color: #6b6285; text-align: center; } .fsl-loading { position: relative; padding-left: 34px; } .fsl-loading::before { content: ''; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var( --fsl-purple-border ); border-top-color: var( --fsl-purple ); border-radius: 50%; animation: fsl-spin 0.7s linear infinite; } @keyframes fsl-spin { to { transform: rotate( 360deg ); } } /* --------------------------------------------------------------- * Live search results (query matches, not the Recent Searches * panel) — white row background, purple dividers between results, * purple product-name text, and black RAM/memory/price text. * Scoped to :not(.fsl-item-recent) so the Recent Searches panel * (which reuses .fsl-item) is left untouched. * ------------------------------------------------------------- */ .fsl-item:not( .fsl-item-recent ) { background-color: var( --fsl-white ); border-bottom: 1px solid var( --fsl-purple ); } .fsl-item:not( .fsl-item-recent ):last-child { border-bottom: none; } .fsl-item:not( .fsl-item-recent ) strong { color: var( --fsl-purple ); } .fsl-item:not( .fsl-item-recent ) div div { color: #000000; } /* Tablet and up: slightly roomier rows */ @media ( min-width: 768px ) { .fsl-item { padding: 10px 14px; } .fsl-item strong { font-size: 15px; } } /* Respect reduced-motion preference */ @media ( prefers-reduced-motion: reduce ) { .fsl-search-input, .fsl-item { transition: none; } .fsl-loading::before { animation: none; } }