/*
 * Строка фильтров: геометрия одной строки + выбор города.
 *
 * ОДИН файл на все поверхности со строкой фильтров (каталожная выдача и
 * страница карты). Здесь только то, что общее: контракт классов pk-fr-*,
 * которым управляет assets/js/filter-row.js, и скин контрола города
 * (эталон components/forms/CityFilterSelect.jsx). Внешний вид чипов, фона и
 * прилипания остаётся в файлах своих зон (catalog.css, map-section.css).
 *
 * Токены --pk-* не переопределяются: файл пользуется существующими.
 */

/* ================================================================
   1. Контракт одной строки
   ================================================================ */

.pk-fr__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
}

.pk-fr__lane {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.pk-fr__side {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Со скриптом строка не переносится НИ КАДРА: класс pk-fr-js ставится в head
 * (inc/city-filter.php), то есть до первой отрисовки. Переполнение до расчёта
 * скрыто, высота задана заранее - мигания в две строки не бывает.
 * Без скрипта правило не действует: строка спокойно переносится, все группы
 * видны, ссылки и формы работают - допустимая деградация.
 */
html.pk-fr-js .pk-fr__lane {
	flex-wrap: nowrap;
	overflow: hidden;
}

/* Открытая выпадашка живёт внутри ленты - на время её показа обрезку снимаем.
   Только в широкой строке: в ленте выпадашки раскрываются нижней шторкой
   (position: fixed), обрезка ей не мешает, а снятие overflow там отдаёт
   содержимое ленты документу и рождает горизонтальную прокрутку страницы. */
html.pk-fr-js .pk-fr:not(.is-rail) .pk-fr__lane:has(details[open], .is-open) { overflow: visible; }

[data-pk-fr-item][hidden] { display: none !important; }

/* ---- Правый блок: сброс, «Ещё фильтры», кнопка ленты ---- */

[data-pk-fr-reset] .pk-fr-reset__full,
[data-pk-fr-reset] .pk-fr-reset__count { display: none; }
[data-pk-fr-reset].is-full .pk-fr-reset__full { display: inline; }
[data-pk-fr-reset].is-count .pk-fr-reset__count { display: inline; }

[data-pk-fr-rail-btn] { display: none; }

/* ---- Лента (уже railAt): прокрутка и закреплённая кнопка «Фильтры · N» ---- */

.pk-fr.is-rail .pk-fr__row { min-height: 44px; }
.pk-fr.is-rail .pk-fr__lane {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	padding-bottom: 2px;
}
.pk-fr.is-rail .pk-fr__lane::-webkit-scrollbar { display: none; }
.pk-fr.is-rail .pk-fr__lane > * { flex: none; scroll-snap-align: start; }
.pk-fr.is-rail [data-pk-fr-reset],
.pk-fr.is-rail [data-pk-fr-more] { display: none !important; }
.pk-fr.is-rail [data-pk-fr-rail-btn] { display: inline-flex; }

/* ================================================================
   2. Выбор города (CityFilterSelect)
   ================================================================ */

.pk-cf { position: relative; display: inline-flex; flex: none; }
.pk-cf__wrap { position: relative; display: inline-flex; }

.pk-cf__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 13px 0 14px;
	box-sizing: border-box;
	border-radius: var(--pk-radius-pill);
	border: 1px solid var(--pk-border);
	background: #fff;
	color: var(--pk-text);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: border-color var(--dur-base), background var(--dur-base);
}
.pk-cf__btn::-webkit-details-marker { display: none; }
.pk-cf__btn:hover { border-color: var(--pk-green); }
.pk-cf__pin { display: inline-flex; color: var(--pk-green); }
.pk-cf__btntext { overflow: hidden; text-overflow: ellipsis; }
.pk-cf__chev { display: inline-flex; color: var(--pk-green); transition: transform var(--dur-mid); }
.pk-cf__wrap[open] .pk-cf__btn { border-color: var(--pk-green); }
.pk-cf__wrap[open] .pk-cf__chev { transform: rotate(180deg); }

.pk-cf.is-picked .pk-cf__btn {
	border-color: var(--pk-green);
	background: var(--pk-green-soft);
	color: var(--pk-green-dark);
}
.pk-cf.is-picked .pk-cf__pin,
.pk-cf.is-picked .pk-cf__chev { color: var(--pk-green-dark); }

/* ---- Панель ---- */

.pk-cf__scrim { display: none; }

.pk-cf__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 45;
	width: 400px;
	max-width: min(92vw, 460px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius-lg);
	box-shadow: var(--e4);
	overflow: hidden;
}
.pk-cf__arrow {
	position: absolute;
	top: -7px;
	left: 22px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid var(--pk-border);
	border-top: 1px solid var(--pk-border);
	transform: rotate(45deg);
}

/* Поле поиска и «Вся Россия» при прокрутке остаются на месте: скроллится
   только список (правило эталона). */
.pk-cf__head {
	flex: none;
	position: relative;
	z-index: 2;
	padding: 10px 10px 8px;
	background: #fff;
}
.pk-cf__grab { display: none; }

.pk-cf__search { position: relative; display: flex; align-items: center; }
.pk-cf__search-ico {
	position: absolute;
	left: 13px;
	color: var(--pk-muted);
	pointer-events: none;
}
.pk-cf__input {
	width: 100%;
	height: 40px;
	padding: 0 14px 0 36px;
	box-sizing: border-box;
	border-radius: var(--pk-radius-pill);
	border: 1px solid var(--pk-border);
	background: #fff;
	font-family: inherit;
	font-size: var(--fs-body);
	color: var(--pk-text);
	outline: none;
	transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.pk-cf__input:focus { border-color: var(--pk-green); box-shadow: var(--focus-ring); }
.pk-cf__input:focus + .pk-cf__search-ico,
.pk-cf__search:focus-within .pk-cf__search-ico { color: var(--pk-green); }

.pk-cf__all {
	margin-top: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pk-border);
}
.pk-cf__allrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 38px;
	padding: 8px 10px;
	box-sizing: border-box;
	border-radius: var(--pk-radius-sm);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--pk-text);
	text-decoration: none;
}
.pk-cf__allrow.is-current,
.pk-cf__allrow.is-current:visited { background: var(--pk-green-soft); color: var(--pk-green-dark); }
.pk-cf__allrow:hover { background: var(--pk-green-soft); color: var(--pk-green-dark); }
.pk-cf__alltext { display: inline-flex; align-items: center; gap: 8px; }
.pk-cf__alltext .pk-h-ico { color: var(--pk-green); }

.pk-cf__list {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 10px 10px;
}
.pk-cf__group[hidden] { display: none; }
.pk-cf__gname {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 10px 2px 6px;
	background: #fff;
	font-size: var(--fs-ui-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--pk-muted);
}
.pk-cf__cities { list-style: none; margin: 0; padding: 2px 0 6px; display: grid; gap: 1px; }
.pk-cf__row[hidden] { display: none; }

.pk-cf__city {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 36px;
	padding: 7px 10px;
	box-sizing: border-box;
	border-radius: var(--pk-radius-sm);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	line-height: 1.3;
	color: var(--pk-text);
	text-decoration: none;
	transition: background var(--dur-base), color var(--dur-base);
}
.pk-cf__city:hover,
.pk-cf__city.is-active {
	background: var(--pk-green-soft);
	color: var(--pk-green-dark);
}
.pk-cf__city.is-current,
.pk-cf__city.is-current:visited { font-weight: var(--fw-bold); color: var(--pk-green-dark); }
.pk-cf__cname { min-width: 0; overflow-wrap: anywhere; }
.pk-cf__cname mark {
	background: var(--pk-green-soft);
	color: var(--pk-green-dark);
	border-radius: 3px;
	padding: 0 1px;
}
.pk-cf__count {
	flex: none;
	font-size: var(--fs-ui-xs);
	font-weight: var(--fw-semibold);
	color: var(--pk-muted);
}
.pk-cf__city:hover .pk-cf__count,
.pk-cf__city.is-active .pk-cf__count,
.pk-cf__city.is-current .pk-cf__count { color: var(--pk-green-dark); }

.pk-cf__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 18px 10px 22px;
}
.pk-cf__empty span { font-size: var(--fs-body); line-height: 1.5; color: var(--pk-text); }
.pk-cf__allcities {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--fs-ui-sm);
	color: var(--pk-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Лента: панель становится нижней шторкой, тап-цели 48 ---- */

.pk-fr.is-rail .pk-cf__btn { min-height: 44px; }

.pk-fr.is-rail .pk-cf__wrap[open] .pk-cf__scrim {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(29, 37, 48, 0.45);
}
.pk-fr.is-rail .pk-cf__panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	z-index: 71;
	width: auto;
	max-width: none;
	max-height: 78vh;
	border: 0;
	border-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;
	box-shadow: 0 -12px 34px rgba(16, 24, 40, 0.18);
}
.pk-fr.is-rail .pk-cf__arrow { display: none; }
.pk-fr.is-rail .pk-cf__head { padding: 8px 12px 10px; }
.pk-fr.is-rail .pk-cf__grab {
	display: block;
	width: 40px;
	height: 4px;
	margin: 0 auto 10px;
	border-radius: 2px;
	background: var(--pk-border);
}
.pk-fr.is-rail .pk-cf__input { height: 48px; font-size: 16px; }
.pk-fr.is-rail .pk-cf__list {
	max-height: none;
	padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.pk-fr.is-rail .pk-cf__allrow,
.pk-fr.is-rail .pk-cf__city { min-height: 48px; padding: 10px 12px; font-size: 15px; }