/* Limelight MLS Autocomplete -- typeahead UI * * Reuses the typography overrides' green token where the theme is loaded; * otherwise falls back to a sensible deep green. */ /* Dropdown is appended to and positioned via JS using * getBoundingClientRect() of the search input. This sidesteps every * possible parent-layout quirk (input-group display:table, zero-height * wrappers, overflow:hidden ancestors, transform stacking contexts, etc.) * that would otherwise bend an absolutely-positioned dropdown out of place. */ .lmla-dropdown { position: fixed; z-index: 99999; /* above sticky headers, modals, etc. */ max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 18px 40px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.08); padding: 6px; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #1f2937; } .lmla-dropdown[hidden] { display: none; } .lmla-empty { padding: 16px 18px; color: #6b7280; font-style: italic; text-align: center; } .lmla-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; text-decoration: none !important; color: inherit !important; cursor: pointer; transition: background-color 0.12s ease, transform 0.08s ease; } .lmla-item:hover, .lmla-item.is-active, .lmla-item:focus-visible { background-color: #f0fdf4; outline: none; text-decoration: none !important; } .lmla-item + .lmla-item { margin-top: 2px; } .lmla-thumb { flex: 0 0 64px; width: 64px; height: 48px; border-radius: 6px; background-color: #f3f4f6; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid #e5e7eb; } .lmla-thumb--placeholder { background-image: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); position: relative; } .lmla-thumb--placeholder::after { content: ""; position: absolute; inset: 25%; border: 2px solid #d1d5db; border-radius: 4px; background: linear-gradient(45deg, transparent 40%, #d1d5db 40%, #d1d5db 60%, transparent 60%); } .lmla-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lmla-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .lmla-line--top { font-weight: 600; font-size: 15px; color: #0f172a; } .lmla-line--bot { font-size: 13px; color: #6b7280; font-weight: 500; letter-spacing: 0.01em; } .lmla-address, .lmla-locality { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lmla-price { flex: 0 0 auto; font-weight: 700; color: #0e7a26; font-variant-numeric: tabular-nums; white-space: nowrap; } .lmla-mls { flex: 0 0 auto; font-size: 12px; color: #6b7280; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .lmla-mark { background-color: rgba(14, 122, 38, 0.14); color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 600; } /* Mobile -- dropdown becomes a bit more compact */ @media (max-width: 640px) { .lmla-dropdown { max-height: 60vh; font-size: 14px; padding: 4px; } .lmla-thumb { flex: 0 0 52px; width: 52px; height: 40px; } .lmla-line--top { font-size: 14px; } .lmla-line--bot { font-size: 12px; } } /* Subtle scrollbar styling for webkit browsers */ .lmla-dropdown::-webkit-scrollbar { width: 8px; } .lmla-dropdown::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .lmla-item { transition: none; } }