/* Location autocomplete dropdown — shared by homepage + listing page search boxes. Rendered on with fixed positioning (top/left/width set inline by JS from the input's rectangle) so it is never clipped by an ancestor's overflow. */ .location-ac-list { position: fixed; z-index: 2000; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #e5e0ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 280px; overflow-y: auto; } .location-ac-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 14px; color: #2b2b2b; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .location-ac-item:hover { background: #f5f0fa; } .location-ac-type { flex-shrink: 0; font-size: 11px; text-transform: capitalize; color: #8a7fa0; background: #f0ebf6; padding: 2px 8px; border-radius: 999px; } /* Position (top/left/width) is set inline by location_autocomplete.js to match the input's rectangle, so the dropdown aligns correctly in both LTR and RTL. */ /* ── Search-input validation (warning frame + tooltip) ──────────────────────── Shown when the user tries to search without a location selected. The frame is a red border on the input; the tooltip is a body-appended bubble positioned by location_autocomplete.js (fixed, like the suggestions dropdown). */ .search-input-invalid { border: 1.5px solid #e03131 !important; box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.18) !important; outline: none !important; } .search-input-tooltip { position: fixed; z-index: 100000; max-width: 280px; padding: 7px 11px; background: #e03131; color: #fff; font-size: 13px; line-height: 1.35; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); pointer-events: none; } /* Upward-pointing arrow anchored near the start of the bubble (LTR + RTL). */ .search-input-tooltip::before { content: ""; position: absolute; top: -5px; inset-inline-start: 16px; border-inline-start: 5px solid transparent; border-inline-end: 5px solid transparent; border-bottom: 5px solid #e03131; }