/*
  Стили страницы /map/.
  Страница использует html_tags.css + base_blocks.css, а здесь лежат только
  специфичные стили карты и изоляция внутренних элементов Яндекс.Карты.
*/

/*
  Внутренние элементы Яндекс.Карты нельзя стилизовать глобальными правилами сайта.
  Иначе searchControl растягивает input и может перекрывать карту, из-за чего карта
  выглядит неактивной. Эти правила сбрасывают только элементы внутри ymaps.
*/
.yandex-map ymaps input,
.yandex-map ymaps select,
.yandex-map ymaps textarea,
.yandex-map ymaps button{
  width:auto;
  min-width:0;
  max-width:none;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font:inherit;
  line-height:normal;
}

.yandex-map ymaps input[type="text"],
.yandex-map ymaps input[type="search"]{
  width:auto;
}

.yandex-map ymaps button{
  cursor:pointer;
}

.yandex-map ymaps [class*="searchbox"]{
  max-width:min(340px,calc(100% - 20px))!important;
}

.yandex-map ymaps [class*="searchbox"] input{
  width:auto!important;
  min-height:0!important;
  padding:0 6px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.yandex-map-status{
  pointer-events:none;
}

.yandex-map-status[hidden]{
  display:none!important;
}

.map-page{
  display:grid;
  gap:16px;
}


.map-filter-grid{
  grid-template-columns:1fr 1fr 1fr;
}

.map-layout{
  display:grid;
  gap:16px;
}

.map-panel{
  overflow:hidden;
  padding:0;
  border-radius:0;
}

.yandex-map{
  position:relative;
  display:block;
  width:100%;
  min-height:280px;
  overflow:hidden;
  border-radius:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 10%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent));
}

.yandex-map-large{
  height:520px;
}

.yandex-map-catalog{
  height:300px;
}

.yandex-map-status{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:18px;
  color:var(--app-muted);
  font-weight:900;
  text-align:center;
  background:color-mix(in srgb,var(--app-surface) 76%,transparent);
}

.yandex-map-status.error{
  color:var(--app-danger);
}

.map-results-panel{
  display:grid;
  gap:14px;
}

.map-results-header{
  align-items:center;
}

.map-results-header h2,
.map-results-panel h2{
  margin:0;
}

.map-results-header p{
  margin:4px 0 0;
}

.map-results-empty{
  grid-column:1 / -1;
  margin:0;
}

.standard-page--pwa .map-page{
  gap:12px;
}

.standard-page--pwa .map-fixed-top[data-mobile-catalog-sticky]{
  /*
    PWA-карта должна иметь компактный фиксированный заголовок: 70px.
    Внутри остаются строка заголовка и строка "Город / Фильтр",
    но они сжаты до мобильного размера и не увеличивают fixed top до 112px.
  */
  --mobile-catalog-expanded-height:70px;
  --mobile-catalog-collapsed-height:42px;
  --mobile-catalog-extra-height:30px;
  height:var(--mobile-catalog-current-height,var(--mobile-catalog-expanded-height,70px));
  padding-bottom:4px;
}

.standard-page--pwa .map-fixed-top[data-mobile-catalog-sticky] .pwa-page-header{
  min-height:30px;
  margin-bottom:2px;
}

.standard-page--pwa .map-fixed-top[data-mobile-catalog-sticky] .pwa-page-title{
  font-size:18px;
  line-height:1.1;
}

.standard-page--pwa .map-fixed-top[data-mobile-catalog-sticky] .mobile-catalog-extra{
  gap:0;
}

.standard-page--pwa .map-fixed-top[data-mobile-catalog-sticky] .pwa-header-bottom__link,
.standard-page--pwa .map-fixed-top[data-mobile-catalog-sticky] .pwa-header-bottom button.pwa-header-bottom__value{
  min-height:30px;
  font-size:13px;
}

.standard-page--pwa .map-fixed-spacer[data-mobile-catalog-spacer]{
  --mobile-catalog-expanded-height:70px;
  --mobile-catalog-collapsed-height:42px;
  height:calc(var(--mobile-catalog-current-height,var(--mobile-catalog-expanded-height,70px)) + env(safe-area-inset-top,0px));
  min-height:calc(var(--mobile-catalog-current-height,var(--mobile-catalog-expanded-height,70px)) + env(safe-area-inset-top,0px));
  flex:0 0 auto;
}

.standard-page--pwa .map-layout{
  gap:12px;
  margin-top:0;
}

.standard-page--pwa .map-panel,
.standard-page--pwa .map-results-panel{
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}

.standard-page--pwa .map-panel--pwa{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-left:0;
  margin-right:0;
  border-radius:0;
  overflow:hidden;
}

.standard-page--pwa .yandex-map-catalog{
  width:100%;
  height:300px;
  min-height:300px;
  border-radius:0;
}

.standard-page--pwa .map-panel--pwa{
  scroll-margin-top:calc(var(--mobile-catalog-current-height,70px) + env(safe-area-inset-top,0px) + 8px);
}

.standard-page--pwa .map-results-panel{
  gap:10px;
}

.standard-page--pwa .map-results-panel h2{
  color:var(--mobile-text,var(--app-text));
  font-size:18px;
  line-height:1.2;
}

.standard-page--pwa .map-results-empty{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  text-align:left;
}

.standard-page--pwa .catalog-empty{
  text-align:left;
}



/*
  PWA map overflow guard.
  На iPhone/в WebView 100vw внутри контейнера с внутренними отступами может
  создавать горизонтальный скролл и уводить страницу вправо. Поэтому PWA-карта
  не вырывается за пределы основного контейнера, а внутренние блоки получают
  безопасные ограничения ширины.
*/
.standard-page--pwa .map-page--pwa{
  box-sizing:border-box;
}

/*
  Не применяем box-sizing:border-box ко всем потомкам карты через *.
  Яндекс.Карты используют custom elements <ymaps> и рассчитывают позиции/иконки
  своих контролов исходя из собственной box model. Глобальное правило
  .map-page--pwa * { box-sizing:border-box; } смещает кнопки геолокации/zoom.
  Поэтому border-box оставляем только на наших внешних контейнерах ниже,
  а внутренности .yandex-map полностью исключаем из универсальных layout-правил.
*/
.standard-page--pwa .map-page--pwa > *,
.standard-page--pwa .map-fixed-top,
.standard-page--pwa .map-fixed-spacer,
.standard-page--pwa .map-layout,
.standard-page--pwa .map-layout > *,
.standard-page--pwa .map-panel,
.standard-page--pwa .map-results-panel,
.standard-page--pwa .map-results-list,
.standard-page--pwa .map-results-list > *,
.standard-page--pwa .map-filter-grid,
.standard-page--pwa .map-filter-grid > *{
  box-sizing:border-box;
}

.standard-page--pwa .yandex-map,
.standard-page--pwa .yandex-map > *{
  box-sizing:content-box;
}

.standard-page--pwa .yandex-map ymaps,
.standard-page--pwa .yandex-map ymaps *{
  box-sizing:content-box!important;
}

.standard-page--pwa .map-page--pwa{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}

@supports not (overflow:clip){
  .standard-page--pwa .map-page--pwa{
    overflow-x:hidden;
  }
}

.standard-page--pwa .map-fixed-top,
.standard-page--pwa .map-fixed-spacer,
.standard-page--pwa .map-layout,
.standard-page--pwa .map-panel,
.standard-page--pwa .map-results-panel,
.standard-page--pwa .map-results-list,
.standard-page--pwa .yandex-map{
  width:100%;
  max-width:100%;
  min-width:0;
}

.standard-page--pwa .map-fixed-top{
  left:0;
  right:0;
  overflow-x:hidden;
}

.standard-page--pwa .pwa-header-bottom,
.standard-page--pwa .pwa-header-bottom__left,
.standard-page--pwa .pwa-header-bottom__right,
.standard-page--pwa .pwa-header-bottom__link,
.standard-page--pwa .pwa-header-bottom__value{
  min-width:0;
  max-width:100%;
}

.standard-page--pwa .pwa-header-bottom__link,
.standard-page--pwa .pwa-header-bottom__value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.standard-page--pwa .map-results-list.catalog-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:100%;
  min-width:0;
}

.standard-page--pwa .map-results-list.catalog-card-grid > .catalog-item-card{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.standard-page--pwa .map-results-list.catalog-card-grid .catalog-card-media,
.standard-page--pwa .map-results-list.catalog-card-grid .catalog-card-photo,
.standard-page--pwa .map-results-list.catalog-card-grid .business-card-logo,
.standard-page--pwa .map-results-list.catalog-card-grid .catalog-card-placeholder{
  max-width:100%;
}

.standard-page--pwa .map-results-list.catalog-card-grid .catalog-card-title,
.standard-page--pwa .map-results-list.catalog-card-grid .catalog-card-services,
.standard-page--pwa .map-results-list.catalog-card-grid .catalog-card-address{
  min-width:0;
  overflow-wrap:anywhere;
}

.standard-page--pwa .map-results-list > *,
.standard-page--pwa .map-results-panel > *{
  min-width:0;
  max-width:100%;
}

html[data-crm-theme="dark"] .yandex-map-status{
  background:color-mix(in srgb,var(--app-bg) 78%,transparent);
}

@media(prefers-color-scheme:dark){
  html[data-crm-theme="system"] .yandex-map-status{
    background:color-mix(in srgb,var(--app-bg) 78%,transparent);
  }
}

@media(max-width:960px){
  .map-filter-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){
  .map-filter-grid{
    grid-template-columns:1fr;
  }

  .yandex-map-large{
    height:340px;
  }
}

.map-results-limited{
  grid-column:1 / -1;
  color:var(--app-muted);
  font-size:14px;
  line-height:1.35;
}

.map-page.is-loading .map-results-panel,
.map-page.is-loading .yandex-map{
  opacity:.72;
}

.standard-page--pwa .map-results-limited{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}