/* Содержимое попапа выбора города. Окно, затемнение, крестик и анимацию даёт тема
   (.wd-popup + contentPopup.js), здесь только начинка. */

.ari-city-popup {
	/* Ширину окна тема читает отсюда при открытии и ставит на обёртку попапа. */
	--wd-popup-width: 440px;
	--wd-popup-padding: 25px;
}

/* Раскладка содержимого. Свою flex-колонку задаём потому, что тема раскладывает
   .wd-popup-inner только внутри своего блока Popup (block-popup.css, на наших страницах
   не подключается) — там переменная --wd-row-gap мертва. Отступы держит gap, поэтому
   собственные margin'ы элементов темы гасим разом. */
.ari-city-popup .wd-popup-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ari-city-popup .wd-popup-inner > * {
	margin: 0;
}

/* Тема открывает и закрывает попап боковым слайдом (--wd-transform-translateX ±100px).
   После выбора города окно «уезжает» за экран, будто ушло не туда, — поэтому диалог
   появляется и гаснет на месте. Переменные темы те же, свою анимацию не заводим. */
.wd-popup-wrap.wd-animation-default.wd-animation-ready:has(.ari-city-popup) {
	--wd-transform-translateX: 0;
	--wd-anim-duration: .2s;
	/* Переход темы на этой обёртке нулевой длительности — задаём свой, иначе диалог
	   не гаснет, а пропадает рывком. Длительность совпадает с задержкой удаления
	   попапа (view.js). */
	transition: opacity .2s ease, transform .2s ease;
}

/* Закрытое состояние (до открытия и во время закрытия): чуть уменьшено и прозрачно —
   тема анимирует переход целиком (transition: all), своих правил перехода не нужно. */
.wd-popup-wrap.wd-animation-default.wd-animation-ready:has(.ari-city-popup):not(.wd-in) {
	--wd-transform-scaleX: .96;
	--wd-transform-scaleY: .96;
	opacity: 0;
}

.ari-city-popup__icon {
	width: 100px;
	height: auto;
	align-self: center;
}

.ari-city-popup__pin {
	fill: var(--wd-primary-color, #cd2653);
}

/* Силуэт города — тот же цвет сильно разбавленный: своей переменной у темы нет. */
.ari-city-popup__skyline {
	fill: var(--wd-primary-color, #cd2653);
	opacity: .18;
}

.ari-city-popup__title,
.ari-city-popup__text,
.ari-city-popup__empty {
	text-align: center;
}

.ari-city-popup__text {
	font-size: .93em;
}

.ari-city-popup__label {
	display: block;
	margin-bottom: 2px;
	color: var(--wd-text-color, #767676);
	font-size: .86em;
}

/* Поле поиска: кнопка очистки лежит поверх ввода в той же ячейке грида —
   позиционировать её отдельно не нужно. */
.ari-city-popup__control {
	display: grid;
	align-items: center;
}

.ari-city-popup__control > * {
	grid-area: 1 / 1;
}

.ari-city-popup__input {
	width: 100%;
	/* Место под кнопку очистки. */
	padding-inline-end: 40px;
}

.ari-city-popup__clear:not([hidden]) {
	display: flex;
	justify-self: end;
	margin-inline-end: 12px;
	color: var(--wd-text-color, #767676);
	cursor: pointer;
}

/* Список: скролл внутри окна, само окно тема уже ограничила по высоте. */
.ari-city-popup__list {
	display: flex;
	flex-direction: column;
	max-height: 40vh;
	padding: 0;
	overflow-y: auto;
	/* Докрутив список до края, страницу за собой не тянем. */
	overscroll-behavior: contain;
	list-style: none;
}

/* Тема даёт пунктам списка нижний отступ — в плотном списке он лишний. */
.ari-city-popup__list li {
	margin: 0;
}

.ari-city-popup__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--wd-brd-radius, 4px);
	color: var(--wd-link-color, inherit);
	cursor: pointer;
}

/* Переменной цвета подсветки строки у Woodmart нет — нейтральное затемнение. */
.ari-city-popup__item:hover,
.ari-city-popup__item:focus-visible {
	background: rgba(0, 0, 0, .04);
}

.ari-city-popup__item.is-current {
	color: var(--wd-text-color, #767676);
}

/* Галочка у выбранного: последний элемент строки, прижата вправо своим отступом. */
.ari-city-popup__item.is-current::after {
	content: "";
	flex: none;
	width: 14px;
	height: 8px;
	margin-block-start: -4px;
	margin-inline-start: auto;
	border-inline-start: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.ari-city-popup__empty {
	color: var(--wd-text-color, #767676);
}