/**
 * Building Portfolio Pro — търсачка
 * ===========================================================================
 *
 * Слой 3, продължение на viewer.css. Всички стойности идват от семантичните
 * токени; тук няма шестнайсетичен цвят.
 */

/* Ширината идва от токените: облечена в темата, търсачката заема ширината на
 * нейното съдържание, а полетата по краищата оставя на контейнера на темата. */
.bpp-search {
	width: min(100% - 2 * var(--bpp-search-gutter), var(--bpp-search-max));
	margin: 0 auto;
	padding-block: var(--bpp-space-6) var(--bpp-space-16);
	color: var(--bpp-ink);
	font-family: var(--bpp-font-sans);
}

.bpp-search *,
.bpp-search *::before,
.bpp-search *::after { box-sizing: border-box; }

/* Имот, отворен по адрес, отваря страницата при списъка — не залепен за ръба. */
.bpp-search { scroll-margin-top: var(--bpp-space-5); }

.admin-bar .bpp-search { scroll-margin-top: calc(var(--bpp-space-5) + 46px); }

.bpp-search :focus-visible {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 2px;
}

/* Докато пълният запис на имота пристига. Списъкът не изчезва, а угасва —
 * иначе бавната мрежа изглежда като счупен клик. */
.bpp-search--busy .bpp-results,
.bpp-search--busy .bpp-compare-wrap {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Продажба / наем
 * ------------------------------------------------------------------------- */

.bpp-search__modes {
	display: flex;
	gap: var(--bpp-space-1);
	margin-bottom: var(--bpp-space-6);
	border-bottom: 1px solid var(--bpp-border);
}

.bpp-search__mode {
	padding: var(--bpp-space-3) var(--bpp-space-5);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-weight-medium);
	text-decoration: none;
}

.bpp-search__mode:hover { color: var(--bpp-ink); }

.bpp-search__mode--active {
	color: var(--bpp-accent);
	border-bottom-color: var(--bpp-accent);
}

/* ---------------------------------------------------------------------------
 * Разположение
 * ------------------------------------------------------------------------- */

.bpp-search__layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--bpp-space-8);
	align-items: start;
}

@media (max-width: 900px) {
	.bpp-search__layout { grid-template-columns: 1fr; gap: var(--bpp-space-5); }
}

.bpp-search__main { min-width: 0; }

/* Броят стои вляво, а подредбата, изгледът и избраните — вдясно, заедно. На
 * тясно контролите слизат на втори ред и остават прибрани вдясно, вместо да
 * се разпилеят по ширината. */
.bpp-search__toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--bpp-space-4);
	flex-wrap: wrap;
	/* Без черта отдолу: списъкът под лентата е карта и сам казва откъде
	 * започва. */
	margin-bottom: var(--bpp-space-4);
}

.bpp-search__count {
	margin-inline-end: auto;
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-weight-medium);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Картата на избраната сграда
 *
 * Над имотите, когато от филтъра е избрана точно една сграда. Дискретна:
 * бяла карта като тези под нея, снимка вляво и няколко реда вдясно — не
 * второ заглавие на страницата.
 * ------------------------------------------------------------------------- */

.bpp-search__building { margin-bottom: var(--bpp-space-5); }

.bpp-search__building[hidden] { display: none; }

.bpp-building-card {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	background: var(--bpp-card-body-bg);
	border: 1px solid var(--bpp-card-border);
	border-radius: var(--bpp-card-radius);
	box-shadow: var(--bpp-card-shadow);
	overflow: hidden;
}

/* Без снимка текстът заема цялата карта. */
.bpp-building-card:not(:has(.bpp-building-card__media)) { grid-template-columns: minmax(0, 1fr); }

.bpp-building-card__media {
	position: relative;
	display: block;
	min-height: 190px;
	background: var(--bpp-card-media-bg);
	overflow: hidden;
}

.bpp-building-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform var(--bpp-duration-base) var(--bpp-ease);
}

.bpp-building-card:hover .bpp-building-card__media img { transform: scale(1.03); }

.bpp-building-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bpp-space-2);
	min-width: 0;
	padding: var(--bpp-space-5) var(--bpp-space-6);
}

.bpp-building-card__title {
	margin: 0;
	font-size: var(--bpp-text-xl);
	font-weight: var(--bpp-heading-weight);
	line-height: 1.2;
}

/* Цветът се повтаря: `a:hover` на темата е по-силен от един клас. */
.bpp-building-card__title a,
.bpp-building-card__title a:hover {
	color: var(--bpp-ink);
	text-decoration: none;
}

.bpp-building-card__address {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-1);
	margin: 0;
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-sm);
}

.bpp-building-card__address .bpp-icon { flex: none; }

/* Три реда стигат, за да се разбере каква е сградата; останалото е на
 * страницата ѝ. */
.bpp-building-card__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: var(--bpp-text-sm);
	line-height: var(--bpp-leading-normal);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Като „Към обекта“ в горната част на сградата: текст с черта, не бутон. */
.bpp-building-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-2);
	margin-top: auto;
	padding-top: var(--bpp-space-2);
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-medium);
	color: var(--bpp-ink);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-building-card__more:hover,
.bpp-building-card__more:focus-visible { opacity: 1; color: var(--bpp-ink); }

.bpp-building-card__more span { border-bottom: 1px solid currentcolor; }

@media (max-width: 640px) {
	.bpp-building-card { grid-template-columns: minmax(0, 1fr); }
	.bpp-building-card__media { min-height: 0; aspect-ratio: 16 / 9; }
	.bpp-building-card__body { padding: var(--bpp-space-4); }
}

@media (prefers-reduced-motion: reduce) {
	.bpp-building-card:hover .bpp-building-card__media img { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Филтри
 * ------------------------------------------------------------------------- */

/* Колоната с филтрите се превърта заедно със страницата. Залепена, с вътрешно
 * превъртане, тя режеше полетата по средата — а с плъзгачите и изложението
 * вече е по-висока от всеки екран. До нея стоят поне няколко реда карти, така
 * че място има. */
.bpp-filters {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-5);
}

/* Филтрите на телефон — меню, което се плъзга надолу под бутона. Разгънати
 * постоянно, те бяха два екрана отметки преди първия имот. Без скрипт бутонът
 * е скрит и полетата стоят отворени.
 *
 * Обвивките не участват в подредбата на широк екран: там формата нарежда
 * самите полета, както преди. */
.bpp-filters__body,
.bpp-filters__inner,
.bpp-filters__actions { display: contents; }

.bpp-filters__toggle {
	justify-content: flex-start;
	width: 100%;
}

.bpp-filters__toggle[hidden],
.bpp-filters__count[hidden] { display: none !important; }

.bpp-filters__toggle .bpp-icon { width: 1.15em; height: 1.15em; }

.bpp-filters__toggle .bpp-filters__chevron {
	margin-inline-start: auto;
	opacity: 1;
	transition: transform var(--bpp-duration-base) var(--bpp-ease);
}

.bpp-filters__toggle[aria-expanded="true"] .bpp-filters__chevron { transform: rotate(180deg); }

.bpp-filters__apply-count { font-weight: var(--bpp-weight-normal); }

.bpp-filters__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 var(--bpp-space-1);
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-accent);
	color: var(--bpp-accent-ink);
	font-size: var(--bpp-text-xs);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

@media (min-width: 901px) {
	.bpp-filters__toggle { display: none !important; }

	/* На широк екран колоната е карта като списъка до нея: двете стоят като
	 * едно цяло, а не отметки, пръснати по фона на страницата. */
	.bpp-filters {
		padding: var(--bpp-space-5);
		background: var(--bpp-card-body-bg);
		border: 1px solid var(--bpp-panel-border);
		border-radius: var(--bpp-card-radius);
		box-shadow: var(--bpp-card-shadow);
	}
}

@media (max-width: 900px) {
	.bpp-search--collapsible .bpp-filters { gap: 0; }

	/* Височината се плъзга от 0fr до 1fr: истинската височина на менюто, без
	 * да се знае предварително и без max-height, който реже или закъснява. */
	.bpp-search--collapsible .bpp-filters__body {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows var(--bpp-duration-slow, 320ms) var(--bpp-ease),
		            margin-top var(--bpp-duration-slow, 320ms) var(--bpp-ease),
		            visibility 0s linear var(--bpp-duration-slow, 320ms);
	}

	.bpp-search--collapsible .bpp-filters--open > .bpp-filters__body {
		grid-template-rows: 1fr;
		margin-top: var(--bpp-space-2);
		visibility: visible;
		transition: grid-template-rows var(--bpp-duration-slow, 320ms) var(--bpp-ease),
		            margin-top var(--bpp-duration-slow, 320ms) var(--bpp-ease),
		            visibility 0s;
	}

	/* Отвореното меню е бяла карта като колоната на широк екран, а не отметки
	 * по фона на страницата. Рамката е outline, не border: border и отстъп
	 * отгоре и отдолу биха оставили затвореното меню високо няколко пиксела.
	 * Стои извън кутията — вътре лентата с „Покажи“ би я покрила. */
	.bpp-search--collapsible .bpp-filters__inner {
		display: flex;
		flex-direction: column;
		gap: var(--bpp-space-5);
		min-height: 0;
		overflow: hidden;
		padding-inline: var(--bpp-space-5);
		background: var(--bpp-card-body-bg);
		border-radius: var(--bpp-card-radius);
		outline: 1px solid var(--bpp-panel-border);
		box-shadow: var(--bpp-card-shadow);
	}

	.bpp-search--collapsible .bpp-filters__inner > :first-child { margin-top: var(--bpp-space-5); }

	/* Отворено докрай, менюто не се реже — иначе лентата отдолу няма как да
	 * залепне за ръба на екрана. */
	.bpp-search--collapsible .bpp-filters--shown .bpp-filters__inner { overflow: visible; }

	.bpp-search--collapsible .bpp-filters__actions {
		position: sticky;
		bottom: 0;
		z-index: 3;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: var(--bpp-space-4);
		/* До ръбовете на картата, през отстъпа ѝ. */
		margin-inline: calc(-1 * var(--bpp-space-5));
		padding: var(--bpp-space-3) var(--bpp-space-5);
		background: var(--bpp-card-body-bg);
		border-radius: 0 0 var(--bpp-card-radius) var(--bpp-card-radius);
		box-shadow: 0 -1px 0 var(--bpp-border);
	}

	.bpp-search--collapsible .bpp-filters__apply {
		flex: 1 1 auto;
		width: auto;
	}
}

/* На телефон двата не се събират в ред — „Покажи 32 имота“ се пренасяше на
 * два реда до „Изчисти филтрите“, също на два. Един под друг: отгоре
 * изчистването, отдолу „Покажи“ на цялата ширина, под палеца. */
@media (max-width: 640px) {
	.bpp-search--collapsible .bpp-filters__actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: var(--bpp-space-1);
	}

	.bpp-search--collapsible .bpp-filters__apply { width: 100%; }

	.bpp-search--collapsible .bpp-filters__clear {
		align-self: center;
		justify-content: center;
		min-height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpp-search--collapsible .bpp-filters__body,
	.bpp-filters__toggle .bpp-filters__chevron { transition: none !important; }
}

.bpp-filter { border: none; margin: 0; padding: 0; min-width: 0; }

.bpp-filter__label {
	display: block;
	padding: 0;
	margin-bottom: var(--bpp-space-2);
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-bold);
	letter-spacing: var(--bpp-tracking-wide);
	text-transform: uppercase;
	/* Във фирмения цвят и по-едри, по искане на клиента, както и заглавията на
	 * колоните в таблицата; без цвета — тихо сиво. */
	color: var(--bpp-mark, var(--bpp-ink-faint));
}

.bpp-filter__options {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-1);
}

/* Заглавие на група вътре във филтъра: името на комплекса над сградите му.
 * По-тихо от легендата отгоре — то дели, а не назовава самия филтър. */
.bpp-filter__group {
	display: block;
	margin: var(--bpp-space-3) 0 var(--bpp-space-1);
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-medium);
	color: var(--bpp-ink-muted);
}

/* Първата група стои плътно под легендата. */
.bpp-filter__label + .bpp-filter__group { margin-top: 0; }

/* Сградите в група се отместват: отместването казва „те са в него“. */
.bpp-filter__group + .bpp-filter__options {
	padding-left: var(--bpp-space-3);
	border-left: 1px solid var(--bpp-border-soft);
}

/* Лупата стои в полето, а не до него: редът остава един и на телефон полето
 * пази цялата си ширина. */
.bpp-filter__search { position: relative; display: block; }

.bpp-filter__search-icon {
	position: absolute;
	top: 50%;
	inset-inline-start: var(--bpp-space-3);
	transform: translateY(-50%);
	width: 1.15em;
	height: 1.15em;
	color: var(--bpp-ink-faint);
	pointer-events: none;
}

/* Подредбата: иконка и меню като едно нещо, не две съседни. */
.bpp-search__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-2);
	color: var(--bpp-ink-muted);
}

.bpp-search__sort-icon { width: 1.15em; height: 1.15em; }

.bpp-filter__range { display: flex; gap: var(--bpp-space-2); }

/* Полетата носят корена си в селектора: `input[type=search]` на темата е
 * по-силно от един клас и сменяше полето, рамката и отстъпа — лупата лягаше
 * върху текста. */
:is(.bpp-search, .bpp-quick) .bpp-field {
	width: 100%;
	padding: var(--bpp-space-2) var(--bpp-space-3);
	border: 1px solid var(--bpp-border-strong);
	border-radius: var(--bpp-radius-md);
	background: var(--bpp-surface);
	color: var(--bpp-ink);
	font-family: inherit;
	font-size: var(--bpp-text-md);
	line-height: var(--bpp-leading-normal);
}

:is(.bpp-search, .bpp-quick) .bpp-field:focus {
	border-color: var(--bpp-accent);
	outline: 2px solid var(--bpp-accent);
	outline-offset: -1px;
}

:is(.bpp-search, .bpp-quick) .bpp-field--search { padding-inline-start: calc(var(--bpp-space-3) * 2 + 1.15em); }
:is(.bpp-search, .bpp-quick) .bpp-field--num { font-variant-numeric: tabular-nums; text-align: right; }
:is(.bpp-search, .bpp-quick) .bpp-field--auto { width: auto; }

.bpp-range {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
}

.bpp-range small { font-size: var(--bpp-text-xs); }

/* ---------------------------------------------------------------------------
 * Плъзгачът „от–до“
 *
 * Два <input type="range"> един върху друг. Самите полета са прозрачни и не
 * ловят показалеца — ловят го само дръжките; линията и запълнената част между
 * дръжките са отделни елементи отдолу. Линията е отстъпена с половин дръжка от
 * всяка страна: центърът на дръжката и краят на запълването съвпадат и в двата
 * края. Дръжката е кръгла или квадратна според ъглите на облеклото.
 * ------------------------------------------------------------------------- */

.bpp-slider {
	--bpp-thumb: 20px;
	position: relative;
	height: calc(var(--bpp-thumb) + 8px);
	margin-bottom: var(--bpp-space-2);
}

.bpp-slider[hidden] { display: none !important; }

.bpp-slider__track {
	position: absolute;
	top: 50%;
	left: calc(var(--bpp-thumb) / 2);
	right: calc(var(--bpp-thumb) / 2);
	height: 4px;
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-border);
	transform: translateY(-50%);
}

.bpp-slider__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--from, 0%);
	right: calc(100% - var(--to, 100%));
	border-radius: inherit;
	background: var(--bpp-accent);
}

/* Коренът е в селектора: темата стилизира голите полета. */
.bpp-search .bpp-slider__input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var(--bpp-thumb);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.bpp-search .bpp-slider__input::-webkit-slider-runnable-track {
	height: var(--bpp-thumb);
	border: 0;
	background: transparent;
}

.bpp-search .bpp-slider__input::-moz-range-track {
	height: var(--bpp-thumb);
	border: 0;
	background: transparent;
}

.bpp-search .bpp-slider__input::-webkit-slider-thumb {
	box-sizing: border-box;
	width: var(--bpp-thumb);
	height: var(--bpp-thumb);
	border: 2px solid var(--bpp-accent);
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-surface);
	box-shadow: var(--bpp-shadow-sm);
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.bpp-search .bpp-slider__input::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--bpp-thumb);
	height: var(--bpp-thumb);
	border: 2px solid var(--bpp-accent);
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-surface);
	box-shadow: var(--bpp-shadow-sm);
	cursor: grab;
	pointer-events: auto;
}

.bpp-search .bpp-slider__input:active::-webkit-slider-thumb { cursor: grabbing; }
.bpp-search .bpp-slider__input:active::-moz-range-thumb { cursor: grabbing; }

.bpp-search .bpp-slider__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 2px;
}

.bpp-search .bpp-slider__input:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 2px;
}

/* С пръст дръжката е по-едра — 20 px се уцелват от втория опит. */
@media (pointer: coarse) {
	.bpp-slider { --bpp-thumb: 28px; }
}

/* Междуредието се задава: `label` на темата е с line-height: 1 и два реда в
 * етикета се слепваха. */
.bpp-check {
	display: flex;
	align-items: center;
	gap: var(--bpp-space-2);
	font-size: var(--bpp-text-md);
	line-height: var(--bpp-leading-normal);
	cursor: pointer;
}

/* Отметката в цвета на акцента, не в синьото на браузъра, и в ръста на
 * етикета до нея — 13 px на браузъра стояха като точка до 17 px текст. */
.bpp-check input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--bpp-accent);
}

/* Името заема реда, а броят стои в десния му край: числата застават в колона
 * и се сравняват с един поглед, вместо да подскачат след имена с различна
 * дължина. */
.bpp-check > span { flex: 1 1 auto; min-width: 0; }

.bpp-check em {
	flex: none;
	margin-inline-start: auto;
	font-style: normal;
	color: var(--bpp-ink-faint);
	font-variant-numeric: tabular-nums;
}

/* Опция без резултати остава видима, но изключена. Изчезващите опции карат
 * човек да мисли, че нещо се е счупило. */
.bpp-check--off { opacity: 0.4; cursor: not-allowed; }

.bpp-filters__apply { width: 100%; }

.bpp-filters__clear {
	align-self: flex-start;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-muted);
}

.bpp-filters__clear:hover { color: var(--bpp-ink); }

/* ---------------------------------------------------------------------------
 * Резултати
 * ------------------------------------------------------------------------- */

.bpp-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--bpp-space-5);
	transition: opacity var(--bpp-duration-base) var(--bpp-ease);
}

.bpp-results--busy { opacity: 0.5; pointer-events: none; }

/* На телефон — по две карти на ред: списъкът се обхожда с поглед, не с палец.
 * Картата свива отстъпите си, а не шрифта под четимото. */
@media (max-width: 640px) {
	.bpp-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bpp-space-4) var(--bpp-space-3);
	}

	.bpp-results .bpp-card__body {
		gap: 3px;
		padding: var(--bpp-space-3) var(--bpp-space-3) var(--bpp-space-4);
	}

	.bpp-results .bpp-card__title {
		font-size: var(--bpp-text-md);
		line-height: var(--bpp-leading-tight);
	}

	.bpp-results .bpp-card__place,
	.bpp-results .bpp-card__specs { line-height: 1.4; }

	.bpp-results .bpp-card__specs { margin-bottom: var(--bpp-space-2); }

	.bpp-results .bpp-card__media img { padding: var(--bpp-space-2); }

	.bpp-results .bpp-card__media::after,
	.bpp-results .bpp-card__media::before { width: 32px; height: 32px; }

	.bpp-results .bpp-card__orientation { display: none; }

	.bpp-results .bpp-card__price {
		padding-top: var(--bpp-space-2);
		font-size: var(--bpp-text-md);
	}

	.bpp-results .bpp-card__status {
		top: 6px;
		left: 6px;
		padding-inline: 6px;
	}
}

/* Картата на имот живее във viewer.css — рисуват я и резултатите от
 * търсенето, и подобните имоти под отворения имот. Един вид, едно място. */

/* -- Избрани имоти -------------------------------------------------------- */

/* Обвивка около картата: бутонът стои извън връзката (иначе е невалиден HTML)
 * и се позиционира спрямо нея. */
.bpp-card-slot { position: relative; display: flex; }

.bpp-card-slot > .bpp-card { flex: 1 1 auto; }

.bpp-card__pick {
	/* Вдясно: горе вляво стои значката със статуса и двете се препокриват. */
	position: absolute;
	z-index: 2;
	top: var(--bpp-space-2);
	right: var(--bpp-space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--bpp-border);
	border-radius: var(--bpp-radius-full);
	background: var(--bpp-surface);
	color: var(--bpp-ink-muted);
	cursor: pointer;
	transition: color var(--bpp-duration-fast) var(--bpp-ease),
		border-color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-card__pick:hover { color: var(--bpp-ink); border-color: var(--bpp-ink-faint); }

/* Фокусът на темата (`[type=button]:focus`) боядисва бутона в нейния цвят;
 * без посочване фокусираният бутон остава какъвто е в покой. */
.bpp-card__pick:focus:not(:hover):not([aria-pressed="true"]) {
	background: var(--bpp-surface);
	border-color: var(--bpp-border);
	color: var(--bpp-ink-muted);
}

.bpp-card__pick[aria-pressed="true"] {
	border-color: var(--bpp-accent);
	background: var(--bpp-accent);
	color: var(--bpp-ink-inverse);
}

/* Двете иконки стоят една върху друга; натиснатото решава коя се вижда. */
.bpp-card__pick-on { display: none; }
.bpp-card__pick[aria-pressed="true"] .bpp-card__pick-off { display: none; }
.bpp-card__pick[aria-pressed="true"] .bpp-card__pick-on { display: inline-block; }

.bpp-picked-head { flex-wrap: wrap; gap: var(--bpp-space-3); }

.bpp-picked-head__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bpp-space-2);
	margin-left: auto;
}

.bpp-picked-head__note { color: var(--bpp-ink-muted); font-size: var(--bpp-text-sm); }

.bpp-picked-head__hint {
	margin: 0 0 var(--bpp-space-4);
	color: var(--bpp-ink-muted);
	font-size: var(--bpp-text-sm);
}

/* Без филтри списъкът разполага с цялата ширина. */
.bpp-search__main--wide { grid-column: 1 / -1; }

/* -- Изглед: карти или таблица ------------------------------------------- */

.bpp-view-switch {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--bpp-border-strong);
	border-radius: var(--bpp-radius-md);
	background: var(--bpp-surface);
}

/* Цветът и подчертаването се пишат изрично: връзките на темата иначе стават
 * розови и подчертани при посочване.
 *
 * Избраният изглед е запълнен в акцентния цвят, а другият стои тъмносив, не
 * блед: две малки иконки една до друга трябва да се различават от пръв поглед. */
.bpp-search .bpp-view-switch__option {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 34px;
	border-radius: max(0px, calc(var(--bpp-radius-md) - 2px));
	color: var(--bpp-ink-muted);
	text-decoration: none;
	transition: color var(--bpp-duration-fast) var(--bpp-ease),
		background-color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-search .bpp-view-switch__option:hover {
	background: var(--bpp-surface-hover);
	color: var(--bpp-ink);
}

.bpp-search .bpp-view-switch__option[aria-current="true"] {
	background: var(--bpp-accent);
	color: var(--bpp-accent-ink);
}

.bpp-view-switch__option .bpp-icon { width: 22px; height: 22px; }

@media (pointer: coarse) {
	.bpp-search .bpp-view-switch__option { width: 44px; height: 40px; }
}

/* Таблицата пита за ширината на самия списък, не на екрана: до колоната с
 * филтрите той е с близо 300 px по-тесен от прозореца.
 *
 * Облечена е като картите — една голяма карта, а не редове, пуснати върху
 * фона: сменят ли се двата изгледа, страницата не бива да сменя и почерка си. */
.bpp-results--table {
	display: block;
	container: bpp-results / inline-size;
	padding: 0 var(--bpp-space-2);
	background: var(--bpp-card-body-bg);
	border: 1px solid var(--bpp-panel-border);
	border-radius: var(--bpp-card-radius);
	box-shadow: var(--bpp-card-shadow);
}

/* Последният ред лежи на ръба на картата — чертата под него е излишна. */
.bpp-rows tbody > tr:last-child > * { border-bottom: 0; }

.bpp-rows {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: var(--bpp-text-md);
	font-variant-numeric: tabular-nums;
}

.bpp-rows th,
.bpp-rows td {
	padding: var(--bpp-space-3);
	border: 0;
	border-bottom: 1px solid var(--bpp-border-soft);
	background: transparent;
	text-align: left;
	vertical-align: middle;
	font-weight: var(--bpp-weight-normal);
	line-height: var(--bpp-leading-normal);
}

/* Таблицата на темата оцветява нечетните редове с по-силно правило — виж и
 * .bpp-compare. */
.bpp-rows tbody > tr:nth-child(n) > * { background: transparent; }

/* Темата слага черта над заглавния ред с правило, по-силно от .bpp-rows th.
 * Горе таблицата опира в ръба на картата — втора черта там не трябва. */
.bpp-rows thead:first-child tr:first-child th { border-top: 0; }

.bpp-rows thead th {
	padding-block: var(--bpp-space-2);
	border-bottom-color: var(--bpp-border);
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-bold);
	letter-spacing: var(--bpp-tracking-wide);
	text-transform: uppercase;
	color: var(--bpp-mark, var(--bpp-ink-faint)); /* като .bpp-filter__label */
	white-space: nowrap;
}

.bpp-rows__row { cursor: pointer; }

.bpp-rows tbody > .bpp-rows__row:hover > * { background: var(--bpp-surface-hover); }

.bpp-rows .bpp-rows__unit a {
	color: var(--bpp-ink);
	font-weight: var(--bpp-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.bpp-rows .bpp-rows__row:hover .bpp-rows__unit a { color: var(--bpp-accent); }

/* Къде е имотът — под името и по-тихо от него. */
.bpp-rows .bpp-rows__place {
	display: block;
	margin-top: 2px;
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-normal);
	color: var(--bpp-ink-muted);
}

/* Баджовете — под мястото, в същата клетка. */
.bpp-rows .bpp-rows__flags { margin-top: var(--bpp-space-1); }

.bpp-rows .bpp-rows__area,
.bpp-rows .bpp-rows__bedrooms,
.bpp-rows .bpp-rows__price {
	text-align: right;
	white-space: nowrap;
}

.bpp-rows td.bpp-rows__price {
	color: var(--bpp-accent);
	font-weight: var(--bpp-price-weight);
}

.bpp-rows td.bpp-rows__cell--empty { color: var(--bpp-ink-faint); }

/* Статусът — с точка в цвета си, както значката върху картата. */
.bpp-rows__status-label {
	display: inline-flex;
	align-items: center;
	gap: var(--bpp-space-2);
	white-space: nowrap;
}

.bpp-rows__status-label::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--status-color, var(--bpp-ink-faint));
}

.bpp-rows .bpp-rows__pick {
	width: 1%;
	padding-inline: var(--bpp-space-2);
	text-align: right;
}

/* Бутонът „+“ е същият като върху картата, но стои в реда, а не над снимка. */
.bpp-rows .bpp-card__pick {
	position: relative;
	top: auto;
	right: auto;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

/* Изложението е най-дългата и най-рядко сравнявана колона — излиза първа. */
@container bpp-results (max-width: 900px) {
	.bpp-rows .bpp-rows__orientation { display: none; }
}

/* Спалните се четат и от типа: „Тристаен“ вече ги казва. */
@container bpp-results (max-width: 760px) {
	.bpp-rows .bpp-rows__bedrooms { display: none; }
}

/* На тясно редът става два реда: горе името с мястото под него, цената и „+“;
 * долу какво е имотът и в какъв статус. Заглавията на колоните остават за
 * четците, но не се виждат — над два реда текст те само биха заемали място. */
@container bpp-results (max-width: 620px) {
	.bpp-rows,
	.bpp-rows tbody { display: block; }

	.bpp-rows thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Решетка, не flex: двата реда трябва да се подредят сами, без значение
	 * колко дълго е името и дали колоната с типа изобщо я има. */
	.bpp-rows tbody > .bpp-rows__row {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr) auto auto;
		grid-template-areas:
			"unit unit unit price pick"
			"type area . status status";
		align-items: center;
		row-gap: var(--bpp-space-1);
		padding: var(--bpp-space-3) 0;
		border-bottom: 1px solid var(--bpp-border-soft);
	}

	.bpp-rows tbody th,
	.bpp-rows tbody td {
		display: block;
		padding: 0;
		border: 0;
		font-size: var(--bpp-text-sm);
	}

	/* На пръст посочване няма — оцветеният ред само би залепнал. */
	.bpp-rows tbody > .bpp-rows__row:hover > * { background: transparent; }

	.bpp-rows tbody .bpp-rows__unit {
		grid-area: unit;
		min-width: 0;
		font-size: var(--bpp-text-md);
	}

	.bpp-rows tbody .bpp-rows__unit a { white-space: normal; }

	.bpp-rows tbody .bpp-rows__price {
		grid-area: price;
		align-self: start;
		padding-inline-start: var(--bpp-space-3);
		font-size: var(--bpp-text-md);
	}

	.bpp-rows tbody .bpp-rows__pick {
		grid-area: pick;
		align-self: start;
		width: auto;
		padding-inline-start: var(--bpp-space-2);
	}

	.bpp-rows tbody .bpp-rows__type { grid-area: type; }
	.bpp-rows tbody .bpp-rows__area { grid-area: area; }

	.bpp-rows tbody .bpp-rows__status {
		grid-area: status;
		justify-self: end;
		padding-inline-start: var(--bpp-space-3);
	}

	.bpp-rows tbody .bpp-rows__orientation,
	.bpp-rows tbody .bpp-rows__bedrooms,
	.bpp-rows tbody .bpp-rows__cell--empty { display: none; }

	/* „Тристаен · 98.50 m²“ — точката стои само между две налични стойности. */
	.bpp-rows tbody .bpp-rows__type:not(.bpp-rows__cell--empty) + .bpp-rows__area:not(.bpp-rows__cell--empty)::before {
		content: "·";
		margin-inline: var(--bpp-space-2);
		color: var(--bpp-ink-faint);
	}
}

/* -- Сравнение ------------------------------------------------------------ */

/* Имотите са колони, признаците — редове. При повече имоти таблицата се
 * плъзга настрани; първата колона остава на място, за да се знае кой ред кой е. */
.bpp-compare-wrap { overflow-x: auto; }

.bpp-compare {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--bpp-text-sm);
}

.bpp-compare th,
.bpp-compare td {
	padding: var(--bpp-space-3);
	border: 0;
	border-bottom: 1px solid var(--bpp-border-soft);
	text-align: left;
	vertical-align: top;
}

/* Таблицата на темата оцветява всеки нечетен ред с правило, по-силно от клас
 * — затова тук се пише по-силно. */
.bpp-compare tbody > tr:nth-child(n) > td { background: transparent; }

/* Същата черта на темата над заглавния ред — виж .bpp-rows. */
.bpp-compare thead:first-child tr:first-child th { border-top: 0; }

.bpp-compare thead th {
	position: sticky;
	top: 0;
	background: var(--bpp-surface);
	font-size: var(--bpp-text-base);
	white-space: nowrap;
}

.bpp-compare tbody th {
	position: sticky;
	left: 0;
	min-width: 12ch;
	background: var(--bpp-surface);
	color: var(--bpp-ink-muted);
	font-weight: var(--bpp-weight-normal);
	white-space: nowrap;
}

.bpp-compare__corner { background: var(--bpp-surface); }

.bpp-compare tbody tr:last-child th,
.bpp-compare tbody tr:last-child td {
	font-weight: var(--bpp-weight-semibold);
}

/* ---------------------------------------------------------------------------
 * Празно състояние и страници
 * ------------------------------------------------------------------------- */

.bpp-empty-state {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bpp-space-4);
	padding: var(--bpp-space-16) var(--bpp-space-6);
	background: var(--bpp-surface-sunk);
	border-radius: var(--bpp-radius-lg);
	text-align: center;
	color: var(--bpp-ink-muted);
}

.bpp-empty-state p { margin: 0; font-size: var(--bpp-text-lg); }

.bpp-pages {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bpp-space-3);
	margin-top: var(--bpp-space-8);
}

.bpp-pages__label {
	font-size: var(--bpp-text-md);
	color: var(--bpp-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Бърза търсачка
 *
 * Стои на чужда страница — начална, лендинг, каквото сложи темата — и затова
 * носи собствената си основа. Не разчита на .bpp-search: тя може изобщо да не
 * е на същата страница.
 * ------------------------------------------------------------------------- */

.bpp-quick {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--bpp-space-5) var(--bpp-space-6);
	background: var(--bpp-surface-raised);
	border: 1px solid var(--bpp-border);
	border-radius: var(--bpp-radius-lg);
	color: var(--bpp-ink);
	font-family: var(--bpp-font-sans);
}

.bpp-quick *,
.bpp-quick *::before,
.bpp-quick *::after { box-sizing: border-box; }

.bpp-quick :focus-visible {
	outline: 2px solid var(--bpp-accent);
	outline-offset: 2px;
}

.bpp-quick__heading {
	margin: 0 0 var(--bpp-space-4);
	font-size: var(--bpp-text-xl);
	font-weight: var(--bpp-weight-semibold);
	line-height: var(--bpp-leading-tight);
}

/* Полетата са между три и пет според настройките — auto-fit ги подрежда, без
 * броят им да е записан някъде. Бутонът е последният от тях и се изравнява по
 * долния им ръб, не по надписите. */
.bpp-quick__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--bpp-space-3);
	align-items: end;
}

.bpp-quick__field {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-1);
	min-width: 0;
}

.bpp-quick__label {
	font-size: var(--bpp-text-sm);
	font-weight: var(--bpp-weight-medium);
	color: var(--bpp-ink-muted);
}

.bpp-quick__submit { min-height: 44px; }

/* Под 640 px полетата стават едно под друго. Пет полета в две колони на
 * телефон значат пет реда с по половин дума в тях. */
@media (max-width: 640px) {
	.bpp-quick {
		padding: var(--bpp-space-4);
	}

	.bpp-quick__row { grid-template-columns: 1fr; }
}

/* С пръст полетата са малки: селектът излиза 37 px, текстовото поле 35. На
 * телефон формата е първото, което човек пипа на страницата. */
/* Пръстът не е курсор: полетата, отметките и малките връзки във филтъра се
 * уцелват от втория опит при 38 px. Правилото важеше само за бързата
 * търсачка — а пълната се ползва от телефон много повече. */
@media (pointer: coarse) {
	:is(.bpp-search, .bpp-quick) .bpp-field { min-height: 44px; }

	/* Отметката е 13 px, но целта е целият ред с етикета му. */
	.bpp-check {
		min-height: 44px;
		align-items: center;
	}

	.bpp-check input { width: 20px; height: 20px; }

	.bpp-filters__clear,
	.bpp-chip {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}
}

/* Единична отметка сред групите филтри. */
.bpp-filter__check {
	display: flex;
	align-items: flex-start;
	gap: var(--bpp-space-2);
	min-height: 32px;
	font-size: var(--bpp-text-md);
	line-height: 1.4;
	cursor: pointer;
}

.bpp-filter__check input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: none;
}

.bpp-filter__hint {
	margin: var(--bpp-space-1) 0 0;
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
}