/* ============================================================================ Autocomplete dropdown — pure CSS, no image files. Icons are passed to the widget as inline SVG (see autocomplete.js) and colored via currentColor. The list is portaled to (position:absolute, page coords, positioned by JS) so no ancestor overflow:hidden / stacking context can clip it, and it stays glued to the input through scroll + the mobile keyboard. Recolor the whole widget with --ac-accent. ============================================================================ */ /* Wrapper the JS injects around the input. display:contents makes it transparent to layout — the input keeps its original sizing/flex behaviour from the surrounding (smart-search) CSS exactly as if the wrapper weren't there. Safe because the dropdown is portaled to (it doesn't need the wrapper to be a positioned box). */ .autocomplete{ display: contents; } /* Suggestions card. left/top/width/max-height are set inline by the JS positioner; everything visual lives here. */ .autocomplete-list{ box-sizing: border-box; /* JS sets width = the input's OUTER width; the list's own 6px padding + 1px border must not add to it (was content-box → dropdown rendered ~14px wider than the input). */ position: absolute; /* NOT fixed: absolute + page coords keeps the list glued to the input through scroll and the mobile keyboard, which shift the visual viewport (where fixed is anchored on iOS) not the document. */ z-index: 100000; /* above modals, landing overlays, etc. */ margin: 0; padding: 6px; list-style: none; overflow-y: auto; background: #fff; border: 1px solid var(--ac-hairline, rgba(16,24,40,.07)); border-radius: 14px; box-shadow: 0 14px 34px -14px rgba(16,24,40,.28), 0 3px 8px -3px rgba(16,24,40,.12); animation: ac-pop .16s cubic-bezier(.4,0,.2,1); -ms-overflow-style: none; scrollbar-width: thin; /* Accent comes from the dedicated template param (--autocomplete-accent, set in templateDetails.xml > Address autocomplete accent Color). Falls back to a neutral gray when used outside this template — NOT the form field color. Override --ac-accent anywhere to force a specific color. */ --ac-accent: var(--autocomplete-accent, #6b7280); /* Hover/active row tint + hovered text are derived from the accent so they always match, whatever the template colour is (color-mix: modern browsers). */ --ac-accent-soft: color-mix(in srgb, var(--ac-accent) 9%, #fff); --ac-ink: #3a4a5a; /* idle row text (neutral) */ --ac-ink-strong: #1c2733; /* hovered row text (neutral, readable on any accent) */ --ac-muted: #9aa7b2; /* idle icon */ --ac-hairline: rgba(16,24,40,.07); } .autocomplete-list::-webkit-scrollbar{ width: 6px; } .autocomplete-list::-webkit-scrollbar-thumb{ background: #e3e8ee; border-radius: 999px; } .autocomplete-list[hidden]{ display: none; } @keyframes ac-pop{ from{ opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .autocomplete-list.is-up{ animation-name: ac-pop-up; } @keyframes ac-pop-up{ from{ opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Connector tail — a small diamond bridging the input and the card. Flips to the bottom edge when the list opens above the field. */ .autocomplete-list::before{ content: ""; position: absolute; top: -5px; left: 22px; width: 10px; height: 10px; background: #fff; border-left: 1px solid var(--ac-hairline); border-top: 1px solid var(--ac-hairline); transform: rotate(45deg); border-radius: 3px 0 0 0; } .autocomplete-list.is-up::before{ top: auto; bottom: -5px; transform: rotate(225deg); } /* Each suggestion row. */ .autocomplete-item{ position: relative; display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 11px; color: var(--ac-ink); cursor: pointer; transition: background-color .14s ease, color .14s ease; } /* Inline-SVG icon sits in a soft rounded chip — the glyph carries the result type (house / street / locality / place); the chip tints with the accent on hover so the active row reads cleanly. */ .autocomplete-icon{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ac-chip, #f2f4f6); color: var(--ac-muted); transition: background-color .14s ease, color .14s ease; } .autocomplete-icon svg{ width: 19px; height: 19px; display: block; fill: currentColor; } /* Label fills remaining width, ellipsises on overflow. */ .autocomplete-label{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hover / keyboard-active row. */ .autocomplete-item:hover, .autocomplete-item.is-active{ background: var(--ac-accent-soft); color: var(--ac-ink-strong); } .autocomplete-item:hover .autocomplete-icon, .autocomplete-item.is-active .autocomplete-icon{ background: color-mix(in srgb, var(--ac-accent) 16%, #fff); color: var(--ac-accent); } /* "Use my location" (or any accent) row — accent text + an always-tinted chip. */ .autocomplete-item.is-locate{ color: var(--ac-accent); font-weight: 600; } .autocomplete-item.is-locate .autocomplete-icon{ background: color-mix(in srgb, var(--ac-accent) 16%, #fff); color: var(--ac-accent); } @media (max-width: 960px){ .autocomplete-item{ padding: .55rem .6rem; } .autocomplete-icon{ width: 38px; height: 38px; } .autocomplete-icon svg{ width: 20px; height: 20px; } }