/**
 * Hero search bar.
 *
 * One continuous bar with hairline dividers between the fields, rather than a
 * row of separate boxed inputs. Four bordered controls side by side read as a
 * form; a single divided bar reads as a search, and it is what the portals
 * settled on for the same reason.
 *
 * Two looks from one structure: a frosted dark bar for sitting over a hero
 * photograph, and a white one for a solid background.
 *
 * SELECTOR NOTE — the theme modifier is on the SAME element as .bbis, not a
 * child of it. BBIS_Module::open() emits
 *
 *     <div class="bbis bbis bbis-hero-search bbis-hs bbis-hs--dark">
 *
 * so these must be written .bbis.bbis.bbis-hs--dark, compounded. Writing them
 * as a descendant (.bbis.bbis .bbis-hs--dark) matches nothing at all, and the
 * failure is silent: the layout still applies and only the colours vanish.
 *
 * Flex throughout, never grid — grid placement breaks inside Elementor.
 */

/* ------------------------------------------------------------------ shell */

.bbis.bbis .bbis-hs__form {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 58rem;
	border-radius: var(--bbis-radius);
	text-align: left;
}

.bbis.bbis.bbis-hs--dark .bbis-hs__form {
	background: rgb(10 10 10 / 58%);
	border: 1px solid rgb(255 255 255 / 16%);
	box-shadow: 0 10px 34px rgb(0 0 0 / 30%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
}

.bbis.bbis.bbis-hs--light .bbis-hs__form {
	background: var(--bbis-surface);
	border: 1px solid var(--bbis-border);
	box-shadow: 0 10px 30px rgb(0 0 0 / 9%);
}

/* -------------------------------------------------------------------- row */

.bbis.bbis .bbis-hs__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	padding: 0.32rem;
	gap: 0;
}

.bbis.bbis .bbis-hs__field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.1rem;
	flex: 1 1 0;
	min-width: 0;
	padding: 0.5rem 0.95rem;
}

.bbis.bbis .bbis-hs__field--where { flex: 2.2 1 0; }

/* The hairline between fields. A border on the element itself would also draw
   against the outer edge; a pseudo-element inset from the padding keeps the
   rule short and centred, which is the detail that makes it read as one bar. */
.bbis.bbis .bbis-hs__field + .bbis-hs__field::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 1px;
}

.bbis.bbis.bbis-hs--dark .bbis-hs__field + .bbis-hs__field::before { background: rgb(255 255 255 / 15%); }
.bbis.bbis.bbis-hs--light .bbis-hs__field + .bbis-hs__field::before { background: var(--bbis-border); }

.bbis.bbis .bbis-hs__field label {
	margin: 0;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bbis.bbis.bbis-hs--dark .bbis-hs__field label { color: rgb(255 255 255 / 55%) !important; }
.bbis.bbis.bbis-hs--light .bbis-hs__field label { color: var(--bbis-muted) !important; }

.bbis.bbis.bbis-hs--nolabels .bbis-hs__field label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* With the label gone the placeholder is the only thing in the field, so it
   carries the whole instruction and can afford to be read at a glance. The
   cell also has to take back the vertical space the label was using, or the
   bar collapses to a thin strip.

   Kept off the visually-hidden rule above rather than folded into it: the
   label still exists for screen readers, and only its *visual* absence is a
   reason to resize anything. */

.bbis.bbis.bbis-hs--nolabels .bbis-hs__field {
	justify-content: center;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

.bbis.bbis.bbis-hs--nolabels .bbis-hs__field :is(input[type="search"],input[type="text"]),
.bbis.bbis.bbis-hs--nolabels .bbis-hs__field select {
	font-size: 1.08rem;
}

/* 16px minimum on iOS, which zooms the viewport for anything smaller the
   moment the field is focused. */
@media (max-width: 860px) {
	.bbis.bbis.bbis-hs--nolabels .bbis-hs__field :is(input[type="search"],input[type="text"]),
	.bbis.bbis.bbis-hs--nolabels .bbis-hs__field select {
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------------- inputs */

/* Bare controls — the bar is the container, so these carry no chrome of their
   own beyond the text. */
.bbis.bbis .bbis-hs__field :is(input[type="search"],input[type="text"]),
.bbis.bbis .bbis-hs__field select {
	width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 0.97rem;
	font-weight: 500;
	line-height: 1.45;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

.bbis.bbis .bbis-hs__field input[type="search"]::-webkit-search-decoration,
.bbis.bbis .bbis-hs__field input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.bbis.bbis.bbis-hs--dark .bbis-hs__field :is(input[type="search"],input[type="text"]),
.bbis.bbis.bbis-hs--dark .bbis-hs__field select { color: #fff !important; }

.bbis.bbis.bbis-hs--dark .bbis-hs__field :is(input[type="search"],input[type="text"])::placeholder {
	color: rgb(255 255 255 / 42%);
	opacity: 1;
}

.bbis.bbis.bbis-hs--light .bbis-hs__field :is(input[type="search"],input[type="text"]),
.bbis.bbis.bbis-hs--light .bbis-hs__field select { color: var(--bbis-ink) !important; }

.bbis.bbis.bbis-hs--light .bbis-hs__field :is(input[type="search"],input[type="text"])::placeholder {
	color: var(--bbis-muted);
	opacity: 1;
}

/* Focus lights the whole cell rather than ringing the bare input, which would
   draw a box the design has just removed. */
.bbis.bbis .bbis-hs__field:focus-within::after {
	content: "";
	position: absolute;
	inset: 0.15rem;
	border-radius: var(--bbis-radius);
	pointer-events: none;
	box-shadow: inset 0 0 0 1px var(--bbis-accent);
}

/* --------------------------------------------------------------- selects */

.bbis.bbis .bbis-hs__select {
	position: relative;
	display: flex;
	align-items: center;
}

.bbis.bbis .bbis-hs__select select {
	padding-right: 1.25rem;
	cursor: pointer;
	text-overflow: ellipsis;
}

.bbis.bbis .bbis-hs__chev {
	position: absolute;
	right: 0;
	width: 0.85rem;
	height: 0.85rem;
	pointer-events: none;
	opacity: 0.75;
}

.bbis.bbis.bbis-hs--dark .bbis-hs__chev { color: rgb(255 255 255 / 70%); }
.bbis.bbis.bbis-hs--light .bbis-hs__chev { color: var(--bbis-muted); }

/* Native option menus inherit the dark bar on some platforms and come out
   white on white. Force a readable pair. */
.bbis.bbis .bbis-hs__field select option {
	background: #fff;
	color: #111;
	font-weight: 400;
}

/* --------------------------------------------------------------- button */

.bbis.bbis .bbis-hs__submit {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	padding: 0.32rem 0.32rem 0.32rem 0.55rem;
}

.bbis.bbis .bbis-hs__submit button {
	margin: 0;
	padding: 0 2.1rem;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	border-radius: var(--bbis-radius);
	background: var(--bbis-accent);
	color: var(--bbis-accent-fg) !important;
	transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.bbis.bbis .bbis-hs__submit button:hover,
.bbis.bbis .bbis-hs__submit button:focus-visible {
	background: var(--bbis-accent-hi);
	box-shadow: 0 0 0 1px var(--bbis-accent), 0 6px 20px rgb(0 0 0 / 22%);
}

.bbis.bbis .bbis-hs__submit button:focus-visible {
	outline: 2px solid var(--bbis-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------- more filters */

.bbis.bbis .bbis-hs__more { margin: 0; }

.bbis.bbis .bbis-hs__more summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0.32rem 0.32rem;
	padding: 0.3rem 0.63rem 0.45rem;
	list-style: none;
	cursor: pointer;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bbis.bbis .bbis-hs__more summary::-webkit-details-marker { display: none; }

/* Caret drawn in CSS so it inherits the text colour and turns with state. */
.bbis.bbis .bbis-hs__more summary::after {
	content: "";
	width: 0.36rem;
	height: 0.36rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.16s ease;
}

.bbis.bbis .bbis-hs__more[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }

.bbis.bbis.bbis-hs--dark .bbis-hs__more summary { color: var(--bbis-accent) !important; }
.bbis.bbis.bbis-hs--light .bbis-hs__more summary { color: var(--bbis-ink) !important; }

.bbis.bbis .bbis-hs__row--more {
	padding-top: 0.4rem;
	padding-bottom: 0.45rem;
}

.bbis.bbis.bbis-hs--dark .bbis-hs__row--more { border-top: 1px solid rgb(255 255 255 / 12%); }
.bbis.bbis.bbis-hs--light .bbis-hs__row--more { border-top: 1px solid var(--bbis-border); }

/* Two fields in a row sized for five would each stretch to half the bar. */
.bbis.bbis .bbis-hs__row--more .bbis-hs__field { flex: 0 1 12rem; }

/* --------------------------------------------------------------- mobile */

/* Below this the five cells stop fitting on one line legibly, so the bar
   becomes a stack and the dividers turn horizontal. */
@media (max-width: 860px) {

	.bbis.bbis .bbis-hs__row {
		flex-wrap: wrap;
		padding: 0.2rem;
	}

	.bbis.bbis .bbis-hs__field,
	.bbis.bbis .bbis-hs__field--where,
	.bbis.bbis .bbis-hs__row--more .bbis-hs__field {
		flex: 1 1 100%;
		padding: 0.62rem 0.85rem;
	}

	.bbis.bbis .bbis-hs__field + .bbis-hs__field::before {
		left: 0.85rem;
		right: 0.85rem;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.bbis.bbis .bbis-hs__submit {
		flex: 1 1 100%;
		padding: 0.45rem 0.2rem 0.2rem;
	}

	.bbis.bbis .bbis-hs__submit button {
		width: 100%;
		padding-top: 0.95rem;
		padding-bottom: 0.95rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbis.bbis .bbis-hs__form,
	.bbis.bbis .bbis-hs__field,
	.bbis.bbis .bbis-hs__submit button,
	.bbis.bbis .bbis-hs__more summary::after {
		transition: none;
	}

	.bbis.bbis .bbis-hs__submit button:hover,
	.bbis.bbis .bbis-hs__submit button:focus-visible {
		transform: none;
	}
}

/* Area suggestions are styled in places.css — the list is shared with the
   search page's filter bar and rendered outside this bar entirely. */

/* Nothing between the bar and the input may clip the field itself. */
.bbis.bbis .bbis-hs__form,
.bbis.bbis .bbis-hs__row,
.bbis.bbis .bbis-hs__field { overflow: visible; }

/* With one field and a button there is no divider to draw and no reason for
   the field to be narrower than the bar. */
.bbis.bbis .bbis-hs__row > .bbis-hs__field--where:only-of-type { flex: 1 1 auto; }

/* ------------------------------------------------- phones: location only

   Opt-in via the module's "Just the location box on phones" setting.

   Five stacked controls fill most of a phone screen before a single home is
   visible, and every one of them is repeated on the results page where there
   is room to use them properly. So the bar reduces to the one field that
   actually starts a search. */

@media (max-width: 860px) {

	.bbis.bbis.bbis-hs--msimple .bbis-hs__row > .bbis-hs__field:not(.bbis-hs__field--where),
	.bbis.bbis.bbis-hs--msimple .bbis-hs__more {
		display: none;
	}

	/* With one field left there is nothing to divide. */
	.bbis.bbis.bbis-hs--msimple .bbis-hs__field + .bbis-hs__field::before { content: none; }

	/* Field and button sit side by side again — stacking a lone input above a
	   full-width button wastes the vertical space the reduction just saved. */
	.bbis.bbis.bbis-hs--msimple .bbis-hs__row { flex-wrap: nowrap; }

	.bbis.bbis.bbis-hs--msimple .bbis-hs__field--where { flex: 1 1 auto; }

	.bbis.bbis.bbis-hs--msimple .bbis-hs__submit {
		flex: 0 0 auto;
		padding: 0.32rem;
	}

	.bbis.bbis.bbis-hs--msimple .bbis-hs__submit button {
		width: auto;
		padding: 0 1.35rem;
	}
}


/* ------------------------------------------------------- hover & focus

   The bar reacts as one object: the whole panel lifts, rather than each cell
   lighting up on its own, which is what made the earlier version feel like a
   row of inputs again the moment the cursor crossed it.

   The lift is drawn with shadow and border only — deliberately no transform.
   The suggestions list is position:fixed on <body> and anchored to the input's
   bounding rect (see places.js), so translating this bar on hover would slide
   the field out from under an open dropdown while someone is typing in it. */

.bbis.bbis .bbis-hs__form {
	transition:
		box-shadow 0.3s cubic-bezier(0.22, 0.7, 0.3, 1),
		border-color 0.3s cubic-bezier(0.22, 0.7, 0.3, 1),
		background-color 0.3s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.bbis.bbis.bbis-hs--light .bbis-hs__form:hover {
	border-color: color-mix(in srgb, var(--bbis-accent) 30%, var(--bbis-border));
	box-shadow: 0 16px 40px rgb(0 0 0 / 13%);
}

/* Focus is the stronger state of the same idea: the brand edge goes solid and
   a soft ring picks it up, so tabbing to the bar reads as clearly as hovering. */
.bbis.bbis.bbis-hs--light .bbis-hs__form:focus-within {
	border-color: var(--bbis-accent);
	box-shadow:
		0 16px 40px rgb(0 0 0 / 13%),
		0 0 0 3px color-mix(in srgb, var(--bbis-accent) 16%, transparent);
}

.bbis.bbis.bbis-hs--dark .bbis-hs__form:hover {
	border-color: rgb(255 255 255 / 28%);
	box-shadow: 0 16px 44px rgb(0 0 0 / 38%);
}

.bbis.bbis.bbis-hs--dark .bbis-hs__form:focus-within {
	border-color: var(--bbis-accent);
	box-shadow:
		0 16px 44px rgb(0 0 0 / 38%),
		0 0 0 3px color-mix(in srgb, var(--bbis-accent) 22%, transparent);
}

/* A cell warms very slightly under the pointer so it is obvious which field a
   click will land in. Kept far below the focus treatment: this is a hint, not
   a state. The inset matches :focus-within::after so the two never disagree
   about where the cell's edge is. */
.bbis.bbis .bbis-hs__field {
	transition: background-color 0.2s ease;
	border-radius: var(--bbis-radius);
}

.bbis.bbis.bbis-hs--light .bbis-hs__field:hover { background: rgb(0 0 0 / 2.5%); }
.bbis.bbis.bbis-hs--dark .bbis-hs__field:hover { background: rgb(255 255 255 / 5%); }

/* A focused cell already has the accent ring; the pointer tint on top of it
   muddies the edge. Scoped to hover+focus together and matched to the theme
   selectors' specificity so it wins on weight rather than on !important. */
.bbis.bbis.bbis-hs--light .bbis-hs__field:hover:focus-within,
.bbis.bbis.bbis-hs--dark .bbis-hs__field:hover:focus-within { background: none; }

/* --------------------------------------------------------------- button

   Lifts a hair and takes a brand-coloured glow instead of the flat black
   shadow, which on a white bar read as grime rather than elevation. */

.bbis.bbis .bbis-hs__submit button {
	transition:
		background-color 0.22s cubic-bezier(0.22, 0.7, 0.3, 1),
		box-shadow 0.22s cubic-bezier(0.22, 0.7, 0.3, 1),
		transform 0.22s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.bbis.bbis .bbis-hs__submit button:hover,
.bbis.bbis .bbis-hs__submit button:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		0 6px 18px color-mix(in srgb, var(--bbis-accent) 38%, transparent),
		0 1px 2px rgb(0 0 0 / 12%);
}

/* Pressing puts it straight back down — without this the lift stays under the
   finger on touch and the button looks stuck. */
.bbis.bbis .bbis-hs__submit button:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px color-mix(in srgb, var(--bbis-accent) 30%, transparent);
}


/* ------------------------------------------------------------- rounding

   The bar and its button round together, so the button reads as sitting
   inside the bar rather than as a square tile dropped into a rounded one.

   A pill only makes sense while the bar is one line. The moment it grows —
   the filters row opening, or the fields stacking on a phone — a 999px radius
   bows the long edges and stops matching the button, so those cases step down
   to a soft radius instead. */

.bbis.bbis .bbis-hs__form,
.bbis.bbis .bbis-hs__submit button,
.bbis.bbis .bbis-hs__field,
.bbis.bbis .bbis-hs__field:focus-within::after {
	border-radius: 999px;
}

/* Filters row present: the form is two rows tall. */
.bbis.bbis .bbis-hs__form:has(.bbis-hs__more) {
	border-radius: 1.5rem;
}

@media (max-width: 860px) {

	/* Fields stack, so the bar is tall — soft corners, not a pill. */
	.bbis.bbis .bbis-hs__form {
		border-radius: 1.25rem;
	}

	/* Reduced to one field and a button, still a single line, still a pill. */
	.bbis.bbis.bbis-hs--msimple .bbis-hs__form {
		border-radius: 999px;
	}
}


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

   Buy / Rent / Sell, switched with no JavaScript at all.

   The radios, their labels and the panel wrapper are siblings, so a checked
   radio shows its panel through a general-sibling selector keyed on [value].
   Keyed on the attribute rather than an id because the ids carry a
   per-instance uid — a stylesheet cannot know them.

   Doing it this way means the tabs work before scripts load, and arrow-key
   navigation between them comes free from the radio group rather than being
   hand-rolled with keydown handlers. */

.bbis.bbis .bbis-hs__tabs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Column only. The panels are a wrapped flex item in this same container,
	   so a plain `gap` applied between the rows as well and opened a 4px strip
	   of photograph between the open tab and the bar it is supposed to be
	   attached to — which undoes the whole folder-tab idea. */
	column-gap: 0.25rem;
	row-gap: 0;
	width: 100%;
	max-width: 58rem;
	text-align: left;
}

/* Kept in the document rather than display:none — a hidden input is not
   focusable, and losing focus would take the whole keyboard story with it. */
.bbis.bbis .bbis-hs__tabin {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* The tabs attach to the bar rather than float above it.
 *
 * As separated pills they read as three unrelated buttons, and nothing said
 * that pressing one changed the bar underneath — which is the entire point of
 * the control. So the selected tab takes the bar's own surface, squares off
 * its bottom corners and overlaps the bar's top border by a pixel. That is the
 * folder-tab metaphor, and it explains itself without a caption.
 *
 * The unselected ones stay recessed, so the selected tab is the only thing
 * that looks continuous with what it controls. */
.bbis.bbis .bbis-hs__tab {
	display: inline-flex;
	align-items: center;
	position: relative;
	margin: 0 0 -1px;
	padding: 0.6rem 1.35rem 0.68rem;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	font-family: var(--bbis-font-head);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

/* Dark: the tabs are cut from the same frosted glass as the bar below them, so
   the whole assembly reads as one object sitting on the photograph. */
.bbis.bbis.bbis-hs--dark .bbis-hs__tab {
	background: rgb(10 10 10 / 30%);
	border-color: rgb(255 255 255 / 14%);
	color: rgb(255 255 255 / 72%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
}

.bbis.bbis.bbis-hs--dark .bbis-hs__tab:hover {
	background: rgb(10 10 10 / 62%);
	border-color: rgb(255 255 255 / 26%);
	color: rgb(255 255 255 / 92%) !important;
}

/* Unselected: a tinted surface, not the surface itself.
 *
 * They were both var(--bbis-surface), so selected and unselected came out the
 * same white and only the label colour separated them — three tabs that all
 * looked open. Mixing ink into the surface greys them by a definite amount in
 * whatever palette the site uses, and works on a photograph and on a plain
 * background alike, which a flat rgba() white would not. */
.bbis.bbis.bbis-hs--light .bbis-hs__tab {
	background: color-mix(in srgb, var(--bbis-ink) 16%, var(--bbis-surface));
	border-color: color-mix(in srgb, var(--bbis-ink) 10%, var(--bbis-border));
	color: var(--bbis-muted) !important;
}

.bbis.bbis.bbis-hs--light .bbis-hs__tab:hover {
	background: color-mix(in srgb, var(--bbis-ink) 7%, var(--bbis-surface));
	color: var(--bbis-ink) !important;
}

/* Selected: the bar's own surface, lifted over its border. The label goes to
   the brand colour, which is where the accent still earns its keep — filling
   the whole tab with it made the tab look like a button to press rather than a
   panel already open. */
.bbis.bbis .bbis-hs__tab { transform: translateY(2px); }

.bbis.bbis .bbis-hs__tabin:checked + .bbis-hs__tab {
	z-index: 2;
	font-weight: 700;
	transform: translateY(0);
}

.bbis.bbis.bbis-hs--light .bbis-hs__tabin:checked + .bbis-hs__tab {
	background: var(--bbis-surface);
	border-color: var(--bbis-border);
	color: var(--bbis-accent) !important;
}

.bbis.bbis.bbis-hs--dark .bbis-hs__tabin:checked + .bbis-hs__tab {
	background: rgb(10 10 10 / 58%);
	border-color: rgb(255 255 255 / 16%);
	color: #fff !important;
}

/* The selected tab's own colour bar. Reads as the current position in a strip
   the way an underline does, without needing a second fill colour. */
.bbis.bbis .bbis-hs__tabin:checked + .bbis-hs__tab::after {
	content: "";
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	top: 0;
	height: 3px;
	background: var(--bbis-accent);
	border-radius: 0 0 3px 3px;
}

/* Focus lands on the invisible radio, so the ring has to be drawn on its
   label. Without this, tabbing to the strip shows nothing at all. */
.bbis.bbis .bbis-hs__tabin:focus-visible + .bbis-hs__tab {
	outline: 2px solid var(--bbis-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------- panels */

.bbis.bbis .bbis-hs__panels {
	flex: 0 0 100%;
	min-width: 0;
}

.bbis.bbis .bbis-hs__panel { display: none; }

.bbis.bbis .bbis-hs__tabin[value="buy"]:checked ~ .bbis-hs__panels .bbis-hs__panel--buy,
.bbis.bbis .bbis-hs__tabin[value="rent"]:checked ~ .bbis-hs__panels .bbis-hs__panel--rent,
.bbis.bbis .bbis-hs__tabin[value="sell"]:checked ~ .bbis-hs__panels .bbis-hs__panel--sell {
	display: block;
}

/* The bar's top corners square off under the tab strip, so the tab and the bar
   read as one piece of paper rather than two rounded objects touching. */
.bbis.bbis.bbis-hs--tabbed .bbis-hs__form { border-top-left-radius: 0; border-top-right-radius: 0; }

/* The Sell panel is one field and a button, so it stays a pill at every width
   — the stacking rules below exist for the four-field search bar and would
   otherwise round the corners of a bar that never stacked. */
.bbis.bbis .bbis-hs__form--sell { border-radius: 999px; }

@media (max-width: 860px) {
	.bbis.bbis .bbis-hs__form--sell { border-radius: 999px; }

	/* Three tabs still fit one line on a phone; shrink the padding rather than
	   let them wrap into a second row above the bar. */
	.bbis.bbis .bbis-hs__tab {
		padding: 0.48rem 0.9rem;
		font-size: 0.68rem;
		letter-spacing: 0.08em;
	}
}


/* ----------------------------------------------------------------- glass

   A light frosted panel, for a bar sitting on a photograph that is worth
   seeing. The dark variant above solves the same problem by covering the
   photograph; this one lets it through.

   Two things make it read as glass rather than as a flat translucent box: a
   real blur doing the work at low opacity, and saturate(), which keeps colour
   in whatever shows through instead of going milky grey. The inset top rim is
   the classic glass edge catching the light.

   It emits .bbis-hs--light as well, so everything about the light look — ink
   labels, muted placeholders, chevrons, option menus — already applies and is
   not repeated here. Only the material changes. */

.bbis.bbis.bbis-hs--glass .bbis-hs__form {
	background: rgb(255 255 255 / 52%);
	border-color: rgb(255 255 255 / 65%);
	box-shadow:
		0 18px 44px rgb(8 16 24 / 28%),
		inset 0 1px 0 rgb(255 255 255 / 55%);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
}

/* The fields become solid white controls.
 *
 * This is the part that makes the panel work rather than the blur. On a 52%
 * panel an equally translucent field disappears into it and the typed text
 * sits on whatever the photograph happens to be doing underneath — which is
 * different for every visitor's viewport width. Solid white boxes keep the
 * contrast fixed, and they are also what says "you type here".
 *
 * The hairline dividers go, because they were what held a single continuous
 * bar together; separate boxes do not need them and read as a smudge between
 * two white controls. */
.bbis.bbis.bbis-hs--glass .bbis-hs__field + .bbis-hs__field::before { display: none; }

.bbis.bbis.bbis-hs--glass .bbis-hs__row { gap: 0.5rem; padding: 0.55rem; }

.bbis.bbis.bbis-hs--glass .bbis-hs__field {
	padding: 0;
	background: none;
	gap: 0.3rem;
}

.bbis.bbis.bbis-hs--glass .bbis-hs__field label {
	padding-left: 0.1rem;
	color: color-mix(in srgb, var(--bbis-ink) 78%, transparent) !important;
}

.bbis.bbis.bbis-hs--glass .bbis-hs__field :is(input[type="search"],input[type="text"]),
.bbis.bbis.bbis-hs--glass .bbis-hs__select {
	padding: 0.62rem 0.75rem;
	background: #fff;
	border: 1px solid rgb(16 39 58 / 14%);
	border-radius: 6px;
}

.bbis.bbis.bbis-hs--glass .bbis-hs__select select { background: none; }
.bbis.bbis.bbis-hs--glass .bbis-hs__chev { right: 0.7rem; }

/* The cell tint and the inset focus ring both assumed a bare control inside a
   padded cell. With real boxes the ring belongs on the box. */
.bbis.bbis.bbis-hs--glass .bbis-hs__field:hover { background: none; }
.bbis.bbis.bbis-hs--glass .bbis-hs__field:focus-within::after { content: none; }

.bbis.bbis.bbis-hs--glass .bbis-hs__field:focus-within :is(input[type="search"],input[type="text"]),
.bbis.bbis.bbis-hs--glass .bbis-hs__field:focus-within .bbis-hs__select {
	border-color: var(--bbis-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbis-accent) 20%, transparent);
}

/* The button sits on the same baseline as the field boxes, which are pushed
   down by the labels above them — so the cell aligns to the bottom rather than
   stretching. Stretch is what gave the button its height in the other looks, so
   losing it means the padding has to state the height itself; matched to the
   inputs' own padding and line box so the two come out the same height. */
.bbis.bbis.bbis-hs--glass .bbis-hs__submit { padding: 0; align-items: flex-end; }

/* Same box as a field, stated the same way rather than as a number that
   happens to land close: identical padding, line box and border means the
   button cannot come out shorter than the inputs beside it. It was ~4px short
   before, which read as a shrunken button sitting in a gap. */
.bbis.bbis.bbis-hs--glass .bbis-hs__submit button {
	padding: 0.62rem 1.9rem;
	font-size: 0.97rem;
	line-height: 1.45;
	border: 1px solid transparent;
	border-radius: 6px;
}

/* The disclosure sits on the panel itself, so it takes the panel's ink. */
.bbis.bbis.bbis-hs--glass .bbis-hs__more summary { color: rgb(31 31 30 / 72%) !important; }

/* Tabs: solid, not glass.
 *
 * They were frosted like the panel — translucent dark for the closed ones, a
 * 52%-white blur for the open one. Over a photograph that made every tab a
 * different murky colour depending on what happened to be behind it, and the
 * open tab came out grey rather than reading as open at all.
 *
 * So the glass stops at the panel. The tabs take the solid treatment the
 * --light look already defines (this module emits --light alongside --glass),
 * which is a definite grey when closed and the surface colour — white — when
 * open. Nothing to override here; the rules further up do it. The one thing
 * glass still needs is a border that stands up over a photograph, since
 * --light's hairline was drawn for a page background. */
.bbis.bbis.bbis-hs--glass .bbis-hs__tab {
	border-color: rgb(16 39 58 / 16%);
}

.bbis.bbis.bbis-hs--glass .bbis-hs__tabin:checked + .bbis-hs__tab {
	border-color: rgb(255 255 255 / 70%);
}

/* A browser without backdrop-filter would render a 52%-white box with no blur:
   legible, but flat, with the photograph fighting the type. Give those a more
   opaque panel instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bbis.bbis.bbis-hs--glass .bbis-hs__form {
		background: rgb(255 255 255 / 90%);
	}
}

/* Mobile: the reduced bar is one field and a button, and the button has to
   match the field box's height there too.
 *
 * Stated inside the media query rather than relying on the rule above, because
 * the --msimple block sets this button's padding and sits in its own @media —
 * matching it context for context is what makes the override predictable
 * instead of a source-order coincidence. Narrower horizontally as well: 1.9rem
 * of padding either side is a lot of a 360px screen. */
@media (max-width: 860px) {
	/* Both classes named, so this outranks the --msimple rule on specificity
	   rather than on being further down the file. Source order is a fragile
	   thing to depend on in a stylesheet that gets appended to. */
	.bbis.bbis.bbis-hs--glass.bbis-hs--msimple .bbis-hs__submit button,
	.bbis.bbis.bbis-hs--glass .bbis-hs__submit button {
		padding: 0.62rem 1.3rem;
		height: auto;
	}
}