/* |-------------------------------------------------------------------------- | Live Search Form (includes/partials/search-form.php) |-------------------------------------------------------------------------- | | .searchResults and its descendants are deliberately NOT nested under | .search-form-live-wrap here — the form's own JS reparents .searchResults | to be a direct child of at runtime (to escape any ancestor's | overflow:hidden clipping), so these rules must stay reachable outside | the wrapper. Loaded on every page that renders a search form (all | routes except 404) — see includes/layouts/header.php. |-------------------------------------------------------------------------- */ /* * A custom flex row instead of Bootstrap's .input-group: the clear * button needs the input wrapped in its own positioning div, but * .input-group's flush-joining CSS (the border-radius reset + * negative-margin overlap between segments) only targets .form- * control/.btn as DIRECT children — with the input one level * deeper than that, .input-group never recognized it, so the * wrapper kept its default (content-sized) width instead of * filling the row. There's no search button any more (a magnifier * icon sits inside the input instead — see .search-input-icon * below), so this row now holds nothing but the input wrapper, but * it's kept as its own flex row rather than collapsed away, since * a future addition here (there was a submit button before) can * reuse it directly. */ .search-form-live-wrap .search-bar-group { display: flex; align-items: stretch; } .search-form-live-wrap .search-input-inner { position: relative; flex: 1 1 auto; min-width: 0; } .search-form-live-wrap .search-input-inner .liveSearchInput { display: block; width: 100%; /* * Taller vertical padding than .form-control's default * (.375rem .75rem) so the pill reads as a comfortable full- * width search bar on its own, now that it's not sized to * line up against an adjacent button. Left padding clears the * icon (.search-input-icon); right padding clears the clear- * button/filter-chip cluster (.search-input-actions) — both * sized generously since the actions cluster's own width * varies (a filter chip is wider than the plain × button). */ padding: .6rem 3.25rem .6rem 2.75rem; } /* * The search icon that replaces the old separate submit button — * purely decorative (Enter still submits the form; there's no * click behavior here), so it's pointer-events: none and sits * UNDER the input in tab order (not a focusable element at all). */ .search-form-live-wrap .search-input-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: #9aa0a6; pointer-events: none; font-size: 1.05rem; line-height: 1; } .search-form-live-wrap .search-input-actions { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); display: flex; align-items: center; gap: .5rem; } .search-form-live-wrap .search-clear-btn { border: none; background: transparent; color: #9aa0a6; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; } .search-form-live-wrap .search-clear-btn:hover { color: #6c757d; } /* * The active-filter chip (e.g. "Year ×") — shown in place of/next * to the clear button once a "Filter By Type" badge is selected, * mirroring the reference design's own selected-city chip inside * the search bar. */ .search-form-live-wrap .search-active-filter { display: inline-flex; align-items: center; gap: .35rem; background: rgba(247, 88, 21, .1); color: #f75815; border: 1px solid rgba(247, 88, 21, .35); border-radius: 999px; padding: .25rem .6rem; font-size: .78rem; font-weight: 600; white-space: nowrap; max-width: 9rem; } .search-form-live-wrap .search-active-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-form-live-wrap .search-active-filter-remove { border: none; background: transparent; color: inherit; padding: 0; line-height: 1; display: flex; align-items: center; flex-shrink: 0; } /* * NOT scoped under .search-form-live-wrap (unlike the rules above) * — the JS below moves .searchResults to be a direct child of * at runtime (see "Escape Ancestor Clipping" in the script), * so a descendant selector requiring the wrapper as an ancestor * would stop matching the moment that happens. These class names * (searchResults, search-result-title/subtitle/thumb, search- * highlight) are specific enough on their own not to need that * extra scoping anyway. */ .searchResults .list-group-item.active-result { background-color: rgba(247, 88, 21, .08); } .searchResults .search-result-title { font-size: 15px; color: #212529; } .searchResults .search-result-subtitle { font-size: 12px; color: #6c757d; } .searchResults mark.search-highlight { background: rgba(247, 88, 21, .18); color: #f75815; padding: 0; font-weight: 600; } .searchResults .search-result-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: .375rem; background-color: #f75815; flex-shrink: 0; } /* * "Filter By Type" panel — rendered INSIDE .searchResults (reusing * its portal/positioning/click-outside/scroll-tracking machinery * wholesale) whenever the input is focused with no query typed yet, * in place of the usual list-group result rows. Not scoped under * .search-form-live-wrap for the same reason as the rules above. */ .searchResults .search-filter-panel { padding: .9rem 1rem; } .searchResults .search-filter-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9aa0a6; margin-bottom: .65rem; } .searchResults .search-filter-badges { display: flex; flex-wrap: wrap; gap: .5rem; } .searchResults .search-filter-badge { border: 1px solid #dee2e6; background: #fff; color: #495057; border-radius: 999px; padding: .4rem .9rem; font-size: .85rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; } .searchResults .search-filter-badge:hover { border-color: #f75815; color: #f75815; } .searchResults .search-filter-badge.active { border-color: #f75815; color: #f75815; background: rgba(247, 88, 21, .08); }