/**
 * Property Search — Buy / Rent / Sell tabs over the IDX omnibar.
 *
 * Ported from bb-idx-search v1.2.0. The original carried its own --bb-* palette
 * with 18 hardcoded hex values; every one now resolves to a design token, so a
 * site's brand colours drive the search bar like everything else.
 *
 * Doubled-class selectors (.bbis.bbis) so theme global styles cannot win.
 * Tab colours additionally get inline !important from PHP and JS — a theme's
 * global button colour beats even a namespaced !important rule.
 */

.bbis.bbis .bbis-search__inner {
	max-width: 1020px;
	width: 100%;
	font-family: var(--bbis-font-body);
	box-sizing: border-box;
}

.bbis.bbis .bbis-search__inner *,
.bbis.bbis .bbis-search__inner *::before,
.bbis.bbis .bbis-search__inner *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- tabs */

.bbis.bbis .bbis-search__tabs {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bbis.bbis .bbis-search__tab {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	border: 0;
	margin: 0;
	padding: 20px 18px;
	background: var(--bbis-secondary);
	color: var(--bbis-secondary-fg);
	font-family: var(--bbis-font-head);
	font-size: clamp(15px, 1.55vw, 22px);
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
	border-radius: var(--bbis-radius);
	-webkit-appearance: none;
	appearance: none;
}

.bbis.bbis .bbis-search__tab:hover { background: var(--bbis-secondary-hi); }

.bbis.bbis .bbis-search__tab.is-active {
	background: var(--bbis-surface);
	color: var(--bbis-primary);
}

.bbis.bbis .bbis-search__tab--sell { background: var(--bbis-primary); }
.bbis.bbis .bbis-search__tab--sell:hover { background: var(--bbis-primary-hi); }

.bbis.bbis .bbis-search__tab:focus-visible {
	outline: 3px solid var(--bbis-accent);
	outline-offset: -3px;
}

.bbis.bbis .bbis-search__chev { font-size: 1.15em; line-height: 0; transform: translateY(1px); }

/* Sized to content rather than equal thirds. */
.bbis.bbis .bbis-search--tabs-auto .bbis-search__tab { flex: 0 0 auto; padding: 20px 42px; }

/* ---------------------------------------------------------- search bar */

.bbis.bbis .bbis-search__bar {
	display: flex;
	align-items: stretch;
	width: 100%;
	position: relative;
	background: var(--bbis-surface);
	border-radius: var(--bbis-radius);
	/* must not clip the autocomplete dropdown */
	overflow: visible;
}

.bbis.bbis .idx-omnibar-form {
	display: flex !important;
	align-items: stretch;
	flex: 1 1 auto;
	flex-wrap: nowrap !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Some accounts render the price/beds/baths fields regardless of the shortcode
   attributes. This is a single-input omnibar by design, so suppress them rather
   than let them wreck the row. */
.bbis.bbis .idx-omnibar-form select,
.bbis.bbis .idx-omnibar-form label,
.bbis.bbis .idx-omnibar-form input[type="number"],
.bbis.bbis .idx-omnibar-form .idx-omnibar-extra,
.bbis.bbis .idx-omnibar-form .idx-omnibar-extra-fields,
.bbis.bbis .idx-omnibar-form .idx-omnibar-price,
.bbis.bbis .idx-omnibar-form .idx-omnibar-beds,
.bbis.bbis .idx-omnibar-form .idx-omnibar-baths { display: none !important; }

.bbis.bbis .idx-omnibar-form .idx-omnibar-fields,
.bbis.bbis .idx-omnibar-form > div {
	display: flex !important;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.bbis.bbis .idx-omnibar-form input[type="text"] {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0;
	height: auto !important;
	margin: 0 !important;
	padding: 26px 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--bbis-surface) !important;
	color: var(--bbis-ink) !important;
	font-family: var(--bbis-font-body);
	font-size: clamp(16px, 1.7vw, 25px) !important;
	font-weight: 300;
	line-height: 1.2;
	box-shadow: none !important;
	outline: 0;
}

.bbis.bbis .idx-omnibar-form input[type="text"]::placeholder {
	color: var(--bbis-muted) !important;
	opacity: 1;
	font-weight: 300;
}

.bbis.bbis .idx-omnibar-form input[type="text"]:focus {
	box-shadow: inset 0 -3px 0 var(--bbis-accent) !important;
}

.bbis.bbis .idx-omnibar-form button[type="submit"] {
	flex: 0 0 auto;
	order: 99;
	margin: 0 0 0 auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(72px, 9vw, 116px);
	align-self: stretch;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--bbis-accent) !important;
	color: var(--bbis-accent-fg) !important;
	cursor: pointer;
	transition: background .18s ease;
	/* IDX ships a text label beside its icon; hide the text, keep the glyph */
	font-size: 0 !important;
	line-height: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}

.bbis.bbis .idx-omnibar-form button[type="submit"]:hover { background: var(--bbis-accent-hi) !important; }

.bbis.bbis .idx-omnibar-form button[type="submit"] svg,
.bbis.bbis .idx-omnibar-form button[type="submit"] i,
.bbis.bbis .idx-omnibar-form button[type="submit"] img {
	width: 34px !important;
	height: 34px !important;
	font-size: 30px !important;
	line-height: 1 !important;
	flex: 0 0 auto;
	display: block;
}

/* The input, or its Awesomplete wrapper, always takes the remaining width. */
.bbis.bbis .idx-omnibar-form > input[type="text"],
.bbis.bbis .idx-omnibar-form .awesomplete { order: 1; flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------- autocomplete --
   IDX's own stylesheet is disabled (styles="0"), and that stylesheet is what
   normally carries Awesomplete's base rules. Without them the dropdown has no
   absolute positioning and lays out inline, and the screen-reader live region
   loses its hiding rule and renders as visible text beside the input. Both sets
   of rules therefore have to come from here. */

.bbis.bbis .awesomplete {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.bbis.bbis .awesomplete > input { display: block; width: 100%; }

.bbis.bbis .awesomplete > ul {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 1000;
	min-width: 100%;
	max-height: 340px;
	overflow-y: auto;
	box-sizing: border-box;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--bbis-surface);
	border-radius: var(--bbis-radius) !important;
	border: 1px solid var(--bbis-border) !important;
	box-shadow: 0 14px 34px rgb(0 0 0 / 16%) !important;
}

.bbis.bbis .awesomplete > ul[hidden],
.bbis.bbis .awesomplete > ul:empty { display: none !important; }

.bbis.bbis .awesomplete > ul > li {
	display: block;
	list-style: none !important;
	margin: 0 !important;
	padding: 14px 24px !important;
	font-size: 16px;
	line-height: 1.35;
	color: var(--bbis-ink) !important;
	cursor: pointer;
	text-align: left;
}

.bbis.bbis .awesomplete > ul > li[aria-selected="true"],
.bbis.bbis .awesomplete > ul > li:hover {
	background: var(--bbis-primary) !important;
	color: var(--bbis-primary-fg) !important;
}

/* Awesomplete wraps the matched substring in <mark>, which defaults to a yellow
   highlight. Keep the emphasis, drop the highlighter. */
.bbis.bbis .awesomplete mark {
	background: transparent !important;
	color: inherit !important;
	font-weight: 700;
}

.bbis.bbis .awesomplete > ul > li[aria-selected="true"] mark,
.bbis.bbis .awesomplete > ul > li:hover mark { color: var(--bbis-primary-fg) !important; }

/* The aria-live announcer must never be visible. */
.bbis.bbis .awesomplete [role="status"],
.bbis.bbis .awesomplete .visually-hidden,
.bbis.bbis .idx-omnibar-form [role="status"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

/* ------------------------------------- mobile: stacked flex, never grid */

@media (max-width: 600px) {
	.bbis.bbis .bbis-search__tab { padding: 15px 8px; font-size: 14px; letter-spacing: .04em; }
	.bbis.bbis .bbis-search--tabs-auto .bbis-search__tab { flex: 1 1 0; padding: 15px 8px; }

	.bbis.bbis .idx-omnibar-form input[type="text"] { padding: 18px 16px !important; font-size: 16px !important; }
	.bbis.bbis .idx-omnibar-form button[type="submit"] { width: 64px; }

	.bbis.bbis .idx-omnibar-form button[type="submit"] svg,
	.bbis.bbis .idx-omnibar-form button[type="submit"] i,
	.bbis.bbis .idx-omnibar-form button[type="submit"] img {
		width: 24px !important; height: 24px !important; font-size: 22px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-search__inner * { transition: none !important; }
}