/* ============================================================================
   City Selection Popup — редизайн под Figma node 234:2289
   "Выберите город" — попап выбора города из шапки.
   Структура (рендерит Aspro regionality.list.max):
     .popup.city_chooser_frame              (внешняя обертка JQM, шаблон popup_regions)
     .popup.city_chooser_small_frame        (та же сетка, шаблон popup_regions_small)
       .form
         .form_head > h2                    "Выберите город"
         .popup_regions.only_search
           .h-search.autocomplete-block#title-search-city
             .wrapper
               input#search.autocomplete.text
               .search_btn (svg)
               ul.ui-menu.ui-autocomplete
           .items.only_city
             .block.cities
               .items_block.scrollblock
                 .item[.current] > a.name
   Все правила scope-нуты на оба wrapper-класса city_chooser*_frame,
   чтобы перебить Aspro CSS из template_styles.css независимо от того,
   какой шаблон popup_regions использует триггер (data-name=city_chooser
   или data-name=city_chooser_small).
   ============================================================================ */

/* ---------- Внешняя обертка попапа ---------- */
.popup.city_chooser_frame,
.popup.city_chooser_small_frame {
  width: 664px;
  max-width: 664px;
  background: var(--rm-bg, #ffffff);
  border-radius: var(--rm-radius, 8px);
  box-shadow: 0 4px 58.1px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: "Google Sans", var(--rm-font-main), -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--rm-text, #1C1B1F);
}

/* ---------- Заголовок "Выберите город" ---------- */
.popup.city_chooser_frame .form .form_head,
.popup.city_chooser_small_frame .form .form_head {
  padding: 28px 24px 0 !important;
  border: none !important;
}

.popup.city_chooser_frame .form .form_head h2,
.popup.city_chooser_small_frame .form .form_head h2 {
  margin: 0 !important;
  font-family: "Google Sans", var(--rm-font-main), sans-serif !important;
  font-weight: var(--rm-font-weight-medium, 500) !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  color: var(--rm-text, #1C1B1F) !important;
  letter-spacing: 0 !important;
}

/* ---------- Контейнер контента ---------- */
.popup.city_chooser_frame .popup_regions,
.popup.city_chooser_small_frame .popup_regions {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- Поле поиска ---------- */
.popup.city_chooser_frame .popup_regions .h-search,
.popup.city_chooser_frame .popup_regions.only_search .h-search,
.popup.city_chooser_small_frame .popup_regions .h-search,
.popup.city_chooser_small_frame .popup_regions.only_search .h-search {
  padding: 0;
  margin: 0;
  width: 100%;
}

.popup.city_chooser_frame .popup_regions .h-search .wrapper,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper {
  position: relative;
  width: 100%;
}

.popup.city_chooser_frame .popup_regions .h-search #search,
.popup.city_chooser_small_frame .popup_regions .h-search #search {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 20px;
  border: 1px solid #BFBFBF;
  border-radius: 32px;
  background: var(--rm-bg, #ffffff);
  color: var(--rm-text, #1C1B1F);
  font-family: "Google Sans", var(--rm-font-main), sans-serif;
  font-size: var(--rm-font-size-base, 16px);
  font-weight: var(--rm-font-weight-normal, 400);
  line-height: 1.4;
  outline: none;
  transition: border-color var(--rm-transition, 0.2s ease);
  box-sizing: border-box;
}

.popup.city_chooser_frame .popup_regions .h-search #search::placeholder,
.popup.city_chooser_small_frame .popup_regions .h-search #search::placeholder {
  color: #818181;
  opacity: 1;
}

.popup.city_chooser_frame .popup_regions .h-search #search:focus,
.popup.city_chooser_frame .popup_regions .h-search #search:hover,
.popup.city_chooser_small_frame .popup_regions .h-search #search:focus,
.popup.city_chooser_small_frame .popup_regions .h-search #search:hover {
  border-color: var(--rm-text, #1C1B1F);
}

/* Кнопка-иконка поиска (справа) */
.popup.city_chooser_frame .popup_regions .h-search .wrapper .search_btn,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper .search_btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: transparent;
  pointer-events: none;
}

.popup.city_chooser_frame .popup_regions .h-search .wrapper .search_btn svg,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper .search_btn svg {
  position: static;
  display: block;
  width: 17px;
  height: 17px;
  margin: 3.5px auto;
  opacity: 1;
  cursor: pointer;
}

.popup.city_chooser_frame .popup_regions .h-search .wrapper .search_btn svg path,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper .search_btn svg path {
  fill: var(--rm-text, #1C1B1F);
}

/* Автокомплит-выпадашка */
.popup.city_chooser_frame #title-search-city .ui-autocomplete,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: var(--rm-bg, #ffffff);
  border: 1px solid #BFBFBF;
  border-radius: var(--rm-radius, 8px);
  box-shadow: var(--rm-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  padding: 8px 0;
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
  font-family: "Google Sans", var(--rm-font-main), sans-serif;
}

.popup.city_chooser_frame #title-search-city .ui-autocomplete li,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete li {
  margin: 0;
  padding: 0;
}

.popup.city_chooser_frame #title-search-city .ui-autocomplete li:before,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete li:before {
  display: none;
}

.popup.city_chooser_frame #title-search-city .ui-autocomplete a,
.popup.city_chooser_frame #title-search-city .ui-autocomplete .ui-menu-item-wrapper,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete a,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete .ui-menu-item-wrapper {
  display: block;
  padding: 10px 20px;
  font-size: var(--rm-font-size-base, 16px);
  color: var(--rm-text, #1C1B1F);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--rm-transition, 0.2s ease);
}

.popup.city_chooser_frame #title-search-city .ui-autocomplete a:hover,
.popup.city_chooser_frame #title-search-city .ui-autocomplete .ui-state-active,
.popup.city_chooser_frame #title-search-city .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete a:hover,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete .ui-state-active,
.popup.city_chooser_small_frame #title-search-city .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: #F2F2F2;
  color: var(--rm-text, #1C1B1F);
  border: none;
  margin: 0;
}

.popup.city_chooser_frame #title-search-city .city-path,
.popup.city_chooser_small_frame #title-search-city .city-path {
  font-size: var(--rm-font-size-sm, 14px);
  color: var(--rm-text-secondary, #767676);
}

/* ---------- Список городов ---------- */
.popup.city_chooser_frame .popup_regions .items.only_city,
.popup.city_chooser_small_frame .popup_regions .items.only_city {
  padding: 0;
  margin: 0;
}

.popup.city_chooser_frame .popup_regions .items.only_city .block.cities,
.popup.city_chooser_small_frame .popup_regions .items.only_city .block.cities {
  background: transparent;
  padding: 0;
  border: none;
}

.popup.city_chooser_frame .popup_regions .items.only_city .cities .items_block,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .items_block {
  max-height: 392px;
  overflow-y: auto;
  padding-right: 16px;
  margin-right: -4px;
  font-size: 0; /* убрать пробел inline-блоков из Aspro */
}

/* Кастомный скроллбар (как на макете — серая дорожка) */
.popup.city_chooser_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar {
  width: 6px;
}
.popup.city_chooser_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar-track,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar-track {
  background: transparent;
}
.popup.city_chooser_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar-thumb,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar-thumb {
  background: #B5B5B5;
  border-radius: 6px;
}
.popup.city_chooser_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar-thumb:hover,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .items_block::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

/* Строка-город — в 1 колонку, full-width, с разделителем снизу.
   Перебиваем Aspro `.item { width: 25%; display: inline-block }`. */
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item,
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item.shown,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item.shown {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid #F2F2F2 !important;
  font-size: var(--rm-font-size-base, 16px) !important; /* вернуть размер */
  vertical-align: top;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.popup.city_chooser_frame .popup_regions .items.only_city .cities .item:last-child,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item:last-child {
  border-bottom: none !important;
}

/* Ссылка-город */
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item a,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item a {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 20px !important;
  border-radius: var(--rm-radius-sm, 4px);
  font-family: "Google Sans", var(--rm-font-main), sans-serif !important;
  font-size: 20px !important;
  font-weight: var(--rm-font-weight-medium, 500) !important;
  line-height: 1.2;
  color: var(--rm-text, #1C1B1F) !important;
  text-decoration: none !important;
  background: transparent;
  transition: background-color var(--rm-transition, 0.2s ease);
  box-sizing: border-box;
}

/* Шеврон-стрелка справа */
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item a::after,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item a::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M9 6l6 6-6 6' stroke='%231C1B1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.popup.city_chooser_frame .popup_regions .items.only_city .cities .item a:hover,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item a:hover {
  background: #F7F7F7 !important;
  color: var(--rm-text, #1C1B1F) !important;
  text-decoration: none !important;
}

/* Активный город — серый фон */
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item.current a,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item.current a {
  background: #F2F2F2 !important;
  cursor: default;
}

.popup.city_chooser_frame .popup_regions .items.only_city .cities .item.current a:hover,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item.current a:hover {
  background: #F2F2F2 !important;
}

.popup.city_chooser_frame .popup_regions .items.only_city .cities .item.current span,
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item.current a span,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item.current span,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item.current a span {
  color: var(--rm-text, #1C1B1F) !important;
  font-weight: var(--rm-font-weight-medium, 500) !important;
}

/* Aspro иногда вставляет .name внутрь .item как span — выровнять под flex */
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item a .name,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item a .name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Показать еще" — на всякий случай скрываем (на макете нет) */
.popup.city_chooser_frame .popup_regions .items.only_city .cities .item.more_cities a,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item.more_cities a {
  font-size: var(--rm-font-size-sm, 14px) !important;
  font-weight: var(--rm-font-weight-normal, 400) !important;
  color: var(--rm-text-secondary, #767676) !important;
  justify-content: flex-start;
}

.popup.city_chooser_frame .popup_regions .items.only_city .cities .item.more_cities a::after,
.popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item.more_cities a::after {
  display: none;
}

/* ---------- Кнопка закрытия (jqmClose) — выставляем явно ---------- */
.popup.city_chooser_frame .close_popup,
.popup.city_chooser_frame .jqmClose,
.popup.city_chooser_small_frame .close_popup,
.popup.city_chooser_small_frame .jqmClose {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--rm-bg, #ffffff);
  border: 1px solid #BFBFBF;
  border-radius: var(--rm-radius, 8px);
  cursor: pointer;
  transition: background-color var(--rm-transition, 0.2s ease);
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* Скрыть встроенную Aspro-иконку (svg/i внутри) */
.popup.city_chooser_frame .close_popup > svg,
.popup.city_chooser_frame .close_popup > i,
.popup.city_chooser_frame .jqmClose > svg,
.popup.city_chooser_frame .jqmClose > i,
.popup.city_chooser_small_frame .close_popup > svg,
.popup.city_chooser_small_frame .close_popup > i,
.popup.city_chooser_small_frame .jqmClose > svg,
.popup.city_chooser_small_frame .jqmClose > i {
  display: none !important;
}

/* Инжектим нашу иконку креста через ::before */
.popup.city_chooser_frame .close_popup::before,
.popup.city_chooser_frame .jqmClose::before,
.popup.city_chooser_small_frame .close_popup::before,
.popup.city_chooser_small_frame .jqmClose::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.9996 14.1221L17.3026 19.4251C17.584 19.7065 17.9657 19.8646 18.3636 19.8646C18.7616 19.8646 19.1432 19.7065 19.4246 19.4251C19.706 19.1437 19.8641 18.7621 19.8641 18.3641C19.8641 17.9662 19.706 17.5845 19.4246 17.3031L14.1196 12.0001L19.4236 6.69711C19.5629 6.55778 19.6733 6.39238 19.7487 6.21036C19.824 6.02834 19.8628 5.83326 19.8627 5.63626C19.8627 5.43926 19.8238 5.2442 19.7484 5.06221C19.673 4.88022 19.5624 4.71488 19.4231 4.57561C19.2838 4.43634 19.1184 4.32588 18.9364 4.25054C18.7543 4.17519 18.5592 4.13644 18.3623 4.13648C18.1653 4.13653 17.9702 4.17538 17.7882 4.25081C17.6062 4.32624 17.4409 4.43678 17.3016 4.57611L11.9996 9.87911L6.6966 4.57611C6.5583 4.43278 6.39284 4.31843 6.20987 4.23973C6.0269 4.16103 5.83009 4.11956 5.63092 4.11774C5.43176 4.11591 5.23422 4.15377 5.04984 4.22911C4.86546 4.30444 4.69793 4.41574 4.55703 4.55652C4.41612 4.69729 4.30466 4.86471 4.22916 5.04902C4.15365 5.23333 4.1156 5.43083 4.11724 5.63C4.11887 5.82917 4.16016 6.02602 4.23869 6.20906C4.31721 6.3921 4.43141 6.55767 4.5746 6.69611L9.8796 12.0001L4.5756 17.3041C4.43241 17.4425 4.31821 17.6081 4.23969 17.7912C4.16116 17.9742 4.11987 18.1711 4.11824 18.3702C4.1166 18.5694 4.15465 18.7669 4.23016 18.9512C4.30566 19.1355 4.41712 19.3029 4.55803 19.4437C4.69893 19.5845 4.86646 19.6958 5.05084 19.7711C5.23522 19.8464 5.43276 19.8843 5.63192 19.8825C5.83109 19.8807 6.0279 19.8392 6.21087 19.7605C6.39384 19.6818 6.5593 19.5674 6.6976 19.4241L11.9996 14.1221Z' fill='%231C1B1F'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.popup.city_chooser_frame .close_popup:hover,
.popup.city_chooser_frame .jqmClose:hover,
.popup.city_chooser_small_frame .close_popup:hover,
.popup.city_chooser_small_frame .jqmClose:hover {
  background: #F7F7F7;
}

/* ---------- Иконка поиска (лупа) — заменяем на нашу ---------- */
/* Скрыть встроенную Aspro-иконку (svg-inline-search2 / svg / i) */
.popup.city_chooser_frame .popup_regions .h-search .wrapper .search_btn > i,
.popup.city_chooser_frame .popup_regions .h-search .wrapper .search_btn > svg,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper .search_btn > i,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper .search_btn > svg {
  display: none !important;
}

/* Инжектим нашу иконку лупы через ::before, центрируем по box 24×24 */
.popup.city_chooser_frame .popup_regions .h-search .wrapper .search_btn,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper .search_btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup.city_chooser_frame .popup_regions .h-search .wrapper .search_btn::before,
.popup.city_chooser_small_frame .popup_regions .h-search .wrapper .search_btn::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20 19.4961L15.404 14.8999C16.5493 13.6349 17.2541 11.9636 17.2541 10.127C17.2534 6.19717 14.0563 3 10.1267 3C6.19703 3 3 6.19717 3 10.127C3 14.0568 6.19703 17.254 10.1267 17.254C11.9632 17.254 13.6344 16.5498 14.8994 15.4038L19.4954 20L20 19.4961ZM10.1267 16.5413C6.59043 16.5413 3.71267 13.6634 3.71267 10.127C3.71267 6.59058 6.59043 3.7127 10.1267 3.7127C13.6629 3.7127 16.5407 6.59058 16.5407 10.127C16.5407 13.6634 13.6637 16.5413 10.1267 16.5413Z' fill='%23818181'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .popup.city_chooser_frame,
  .popup.city_chooser_small_frame {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .popup.city_chooser_frame .form .form_head,
  .popup.city_chooser_small_frame .form .form_head {
    padding: 20px 20px 0 !important;
  }

  .popup.city_chooser_frame .form .form_head h2,
  .popup.city_chooser_small_frame .form .form_head h2 {
    font-size: 24px !important;
  }

  .popup.city_chooser_frame .popup_regions,
  .popup.city_chooser_small_frame .popup_regions {
    padding: 16px 20px 20px;
    gap: 16px;
  }

  .popup.city_chooser_frame .popup_regions .items.only_city .cities .item a,
  .popup.city_chooser_small_frame .popup_regions .items.only_city .cities .item a {
    font-size: 18px !important;
    height: 44px;
    padding: 0 16px !important;
  }
}

/* ─────────── Фильтр поиска по списку городов ───────────
   Aspro вешает jQuery UI autocomplete с выпадашкой .ui-autocomplete —
   по нашему дизайну не нужна. Поиск фильтрует сразу основной список
   (см. js/redesign/city-popup.js). */
.popup.city_chooser_frame .ui-autocomplete,
.popup.city_chooser_small_frame .ui-autocomplete,
.popup_regions .ui-autocomplete {
    display: none !important;
}

/* Нейтрализация Aspro-классов .fade / .no_scroll, которые навешивает
   open/close-коллбек autocomplete. Без этого при первом keystroke
   весь список городов грейаутится (opacity: 0.3) поверх нашего фильтра. */
.popup.city_chooser_frame .popup_regions .items.fade,
.popup.city_chooser_small_frame .popup_regions .items.fade,
.popup_regions .items.fade {
    opacity: 1 !important;
}
.popup.city_chooser_frame.no_scroll,
.popup.city_chooser_small_frame.no_scroll {
    overflow: visible !important;
}

/* ─────────── Фильтр поиска — плавное скрытие + lock высоты ───────────
   - .items_block получает min-height чтобы попап не схлопывался когда
     часть городов скрыта (5 городов × ~48px = ~240px).
   - .item получает transition на opacity + max-height — плавное
     исчезновение/появление вместо резкого display:none. */

.popup.city_chooser_frame .popup_regions .items.only_city .block.cities .items_block,
.popup.city_chooser_small_frame .popup_regions .items.only_city .block.cities .items_block {
    min-height: 240px;
}

.popup.city_chooser_frame .popup_regions .items.only_city .block.cities .items_block .item,
.popup.city_chooser_small_frame .popup_regions .items.only_city .block.cities .items_block .item {
    transition: opacity var(--rm-transition), max-height var(--rm-transition);
    opacity: 1;
    max-height: 80px;
    overflow: hidden;
}

.popup.city_chooser_frame .popup_regions .items.only_city .block.cities .items_block .item.rm-filtered-out,
.popup.city_chooser_small_frame .popup_regions .items.only_city .block.cities .items_block .item.rm-filtered-out {
    opacity: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none;
}