/**
 * Карта экадаши — оформление фронтенда.
 *
 * Ключевая идея по маркерам: Leaflet получает iconSize [0,0], поэтому
 * контейнер иконки стоит ровно в координате города, а размер целиком
 * задаётся отсюда. Значит размер меняется медиазапросом и переменной,
 * без пересоздания маркеров в JavaScript.
 */

.ekmap {
  --ek-saffron: #d96a06;
  --ek-saffron-dark: #b25404;
  --ek-ink: #1d1a16;
  --ek-muted: #6b6259;
  --ek-line: #e6ded4;
  --ek-paper: #fffdf9;
  --ek-shadow: 0 6px 24px rgba(40, 26, 10, .18);

  /* Значения по умолчанию; скрипт перезапишет их из настроек компонента. */
  --ek-pin-w: 38px;
  --ek-pin-scale: 1;

  position: relative;
  min-height: 520px;
  height: clamp(520px, 78vh, 900px);
  color: var(--ek-ink);
  font-size: 15px;
  line-height: 1.45;
}

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

/* Скрытое скрытым и остаётся: у кнопок ниже свой display, и без этого
   атрибут hidden проигрывает им в каскаде. */
.ekmap [hidden] {
  display: none !important;
}

.ekmap__canvas {
  position: absolute;
  inset: 0;
  background: #eef1f3;
  border-radius: 6px;
}

/* ---------- Маркер ---------- */

.ekmap-pin {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--ek-pin-w) * var(--ek-pin-scale));
  height: calc(var(--ek-pin-w) * var(--ek-pin-scale) * 1.5);
  transform: translate(-50%, -100%);
  transition: width .18s ease, height .18s ease;
  cursor: pointer;
}

/* Невидимая зона нажатия: не меньше 48×48, как требуют мобильные гайдлайны.
   Стоит на голове булавки, а не на ножке: подпись города под ножкой
   остаётся видна, а зона нажатия её не перекрывает. */
.ekmap-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: max(48px, 100%);
  height: max(48px, 100%);
  transform: translate(-50%, -50%);
}

.ekmap-pin svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

.ekmap-pin:hover svg {
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .45));
}

.leaflet-marker-icon:focus-visible .ekmap-pin svg {
  filter: drop-shadow(0 0 0 3px var(--ek-saffron));
}

.ekmap-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb04d, #d96a06);
  color: #fff;
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}

.ekmap-cluster span {
  font-size: calc(var(--ek-pin-w) * .34);
}

.leaflet-marker-icon.ekmap-cluster-wrap {
  background: none;
  border: none;
}

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

.ekmap__panel {
  position: absolute;
  z-index: 900;
  top: 12px;
  left: 12px;
  width: 340px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  /* Без contain. С Chrome 144 (и Яндекс.Браузера на том же движке)
     contain действует и на контейнер, которому нечего прокручивать:
     свайп по «ближайшим городам» не прокручивал ни панель, ни страницу —
     блок «просто не двигался». Грабли №33. contain оставлен только листу
     поиска (.ekmap--sheet), где страница под ним и не должна ехать. */
  overscroll-behavior: auto;
  touch-action: pan-y;
  background: var(--ek-paper);
  border: 1px solid var(--ek-line);
  border-radius: 14px;
  box-shadow: var(--ek-shadow);
}

.ekmap__head {
  padding: 12px 14px 8px;
}

.ekmap__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.ekmap__search {
  position: relative;
  padding: 0 14px 12px;
}

.ekmap__input {
  width: 100%;
  height: 46px;
  padding: 0 38px;
  /* 16px обязательны: при меньшем размере iOS зумит всю страницу на фокусе. */
  font-size: 16px;
  color: var(--ek-ink);
  background: #fff;
  border: 1.5px solid var(--ek-line);
  border-radius: 10px;
}

.ekmap__input:focus {
  outline: none;
  border-color: var(--ek-saffron);
  box-shadow: 0 0 0 3px rgba(217, 106, 6, .15);
}

.ekmap__input::-webkit-search-cancel-button,
.ekmap__input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

.ekmap__search-icon {
  position: absolute;
  left: 26px;
  top: 13px;
  color: var(--ek-muted);
  pointer-events: none;
}

.ekmap__clear {
  position: absolute;
  right: 22px;
  top: 9px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ek-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ekmap__clear:hover {
  background: #f0e9e0;
}

.ekmap__scroll {
  max-height: min(52vh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--ek-line);
}

.ekmap__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid #f3ece3;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ekmap__row:hover,
.ekmap__row:focus-visible {
  background: #fff5e9;
  color: inherit;
  outline: none;
}

.ekmap__row-name {
  font-weight: 600;
}

.ekmap__row-sub {
  margin-left: auto;
  padding-left: 8px;
  font-size: 13px;
  color: var(--ek-muted);
  white-space: nowrap;
}

.ekmap__grp summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid #f3ece3;
  list-style: none;
}

.ekmap__grp summary::-webkit-details-marker {
  display: none;
}

.ekmap__grp summary::before {
  content: "›";
  font-size: 18px;
  color: var(--ek-muted);
  transition: transform .15s;
}

.ekmap__grp[open] summary::before {
  transform: rotate(90deg);
}

.ekmap__grp-n {
  margin-left: auto;
  font-weight: 500;
  font-size: 13px;
  color: var(--ek-muted);
}

.ekmap__grp .ekmap__row {
  padding-left: 34px;
  background: #fffaf4;
}

.ekmap__region {
  padding: 9px 14px 5px 24px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ek-muted);
  background: #fffaf4;
}

.ekmap__empty {
  padding: 18px 14px;
  font-size: 14px;
  color: var(--ek-muted);
}

.ekmap__request {
  display: block;
  padding: 14px;
  font-size: 13.5px;
  text-align: center;
  color: var(--ek-saffron);
}

/* ---------- Мой город ---------- */

.ekmap__me {
  padding: 0 14px 12px;
}

.ekmap__locate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--ek-saffron);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ekmap__locate:hover {
  background: var(--ek-saffron-dark);
}

.ekmap__locate:focus-visible {
  outline: 3px solid rgba(217, 106, 6, .35);
  outline-offset: 2px;
}

.ekme__msg {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ek-muted);
}

.ekme__msg--busy::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid var(--ek-line);
  border-top-color: var(--ek-saffron);
  border-radius: 50%;
  animation: ekspin .8s linear infinite;
}

@keyframes ekspin {
  to { transform: rotate(360deg); }
}

.ekme__label {
  font-size: 12.5px;
  color: var(--ek-muted);
}

.ekme__city {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.ekme__km,
.ekme__item-km {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ek-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ekme__sub {
  font-size: 13px;
  color: var(--ek-muted);
}

.ekme__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  border-radius: 10px;
  background: var(--ek-saffron);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}

.ekme__btn:hover {
  background: var(--ek-saffron-dark);
}

.ekme__also {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ek-muted);
}

.ekme__also a {
  color: var(--ek-ink);
  font-weight: 600;
}

.ekme__head {
  margin: 2px 0 6px;
  font-weight: 600;
}

.ekme__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ekme__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--ek-line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.ekme__item:hover,
.ekme__item:focus-visible {
  border-color: var(--ek-saffron);
  background: #fff8ef;
  color: inherit;
  outline: none;
}

.ekme__item-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

/* Название и серые скобки в одну строку; не влезает — многоточие. */
.ekme__item-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ekme__item-name {
  font-weight: 600;
}

.ekme__item-sub {
  font-size: 12.5px;
  color: var(--ek-muted);
}

.ekme__item-km {
  flex: none;
}

.ekme__item-fast {
  font-size: 12.5px;
  color: var(--ek-muted);
}

.ekme__item-date {
  font-weight: 600;
  color: var(--ek-saffron-dark);
}

.ekme__warn {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ek-muted);
}

.ekme__request {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ek-saffron-dark);
}

/* ---------- Поиск вместо геолокации ----------
   Посетитель набирает город — ближайшие по геолокации убираются,
   остаётся одна строка, которая возвращает их обратно. */

.ekmap--searching #ekmap-me-body,
.ekmap--searching .ekmap__locate,
.ekmap--nogeo .ekmap__me {
  display: none;
}

.ekmap__geochip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px dashed var(--ek-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ek-ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.ekmap__geochip svg {
  flex: none;
  color: var(--ek-saffron);
}

.ekmap__geochip-label {
  color: var(--ek-muted);
}

.ekmap__geochip-back {
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: var(--ek-saffron-dark);
}

.ekmap__geochip:hover {
  border-color: var(--ek-saffron);
  background: #fff8ef;
}

/* Дата ближайшего поста — общая для карточки, попапа, модуля. */

.ekfast {
  margin-top: 8px;
  font-size: 13.5px;
}

.ekfast__label {
  color: var(--ek-muted);
}

.ekfast__date {
  color: var(--ek-ink);
}

.ekfast__when {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ek-saffron);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.ekfast__maha,
.ekfast__paran,
.ekfast__then {
  font-size: 12.5px;
  color: var(--ek-muted);
}

.ekfast__maha {
  color: var(--ek-saffron-dark);
}

.leaflet-popup-content .ekfast__date {
  white-space: nowrap;
}

.leaflet-popup-content .ekfast {
  margin: -4px 0 10px;
}

/* ---------- Меню «поиск по странам и городам» ---------- */

.ekmap__browse {
  border-top: 1px solid var(--ek-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ekmap__browse-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  color: var(--ek-ink);
}

.ekmap__browse-head::-webkit-details-marker {
  display: none;
}

.ekmap__browse-head svg {
  color: var(--ek-muted);
  flex: none;
}

.ekmap__browse-n {
  margin-left: auto;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ek-muted);
}

.ekmap__browse-head::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid var(--ek-muted);
  border-bottom: 2px solid var(--ek-muted);
  transform: rotate(-135deg) translate(-2px, -2px);
  transition: transform .15s;
}

.ekmap__browse:not([open]) .ekmap__browse-head::after {
  transform: rotate(45deg) translate(-2px, -2px);
}

/* ---------- Подпись карты (OSM) ---------- */

.ekmap .ekmap-credits {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 6px 6px 0;
  font-size: 10.5px;
  line-height: 1;
}

.ekmap-credits__btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #555;
  font: italic 700 11px/18px Georgia, serif;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.ekmap-credits__text {
  display: none;
  padding: 3px 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .85);
}

.ekmap-credits.is-open .ekmap-credits__text {
  display: inline-block;
}

.ekmap-credits__text a {
  color: #333;
  text-decoration: none;
}

/* ---------- Подсказки: ближайшие города из запасного поиска ---------- */

.ekmap__note {
  margin: 0 14px 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  border-radius: 10px;
  background: linear-gradient(#fff3e3, #ffe9d2);
  border: 1px solid #f5d3a8;
}

.ekmap__note-head {
  display: block;
  margin-bottom: 6px;
  color: var(--ek-muted);
}

.ekmap__note-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ekmap__note-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .75);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.ekmap__note-item:hover {
  background: #fff;
  color: inherit;
}

.ekmap__note-date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ek-saffron-dark);
  white-space: nowrap;
}

.ekmap__note-item > span:first-child {
  margin-right: auto;
}

.ekmap__note-km {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ek-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Попап ---------- */

.leaflet-popup-content-wrapper {
  border-radius: 12px;
}

.leaflet-popup-content {
  margin: 12px 14px;
  min-width: 160px;
}

.ekmap__pop-city {
  font-weight: 700;
  font-size: 16px;
}

.ekmap__pop-sub {
  margin: 1px 0 10px;
  font-size: 13px;
  color: var(--ek-muted);
}

.ekmap__pop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--ek-saffron);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}

.ekmap__pop-btn:hover {
  background: var(--ek-saffron-dark);
}

/* ---------- Кнопка геолокации ---------- */

.ekmap__geo {
  position: absolute;
  z-index: 900;
  right: 12px;
  bottom: 44px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ek-line);
  background: var(--ek-paper);
  color: var(--ek-saffron);
  box-shadow: var(--ek-shadow);
  cursor: pointer;
}

.ekmap__geo:hover {
  background: #fff5e9;
}

.ekmap__geo[disabled] {
  opacity: .6;
  cursor: default;
}

/* ---------- Мобильная раскладка ----------
   Панель — шторка снизу высотой по содержимому. Сверху «мой город»,
   под ним одна строка меню поиска. Меню раскрыли — шторка растёт,
   список прокручивается внутри неё, карта остаётся видна сверху. */

@media (max-width: 640px) {
  .ekmap {
    height: min(86vh, 760px);
    font-size: 14.5px;
  }

  .ekmap__canvas {
    border-radius: 0;
  }

  .ekmap__panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 82%;
    border-radius: 14px 14px 0 0;
    border-width: 1px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Заголовок страницы у темы свой; здесь на телефоне он только съедает строку. */
  .ekmap__head {
    display: none;
  }

  .ekmap__me {
    padding-top: 10px;
  }

  .ekmap__browse[open] .ekmap__scroll {
    max-height: 38vh;
  }

  /* Одна строка вместо двух: счётчик на телефоне не нужен. */
  .ekmap__browse-n {
    display: none;
  }

  .ekmap__browse-head span:not(.ekmap__browse-n) {
    margin-right: auto;
  }

  /* В карточке «ваш город» на телефоне — только главное. */
  .ekmap__me .ekfast__then {
    display: none;
  }

  .ekmap__geo {
    bottom: auto;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }

  /* На телефоне масштабируют пальцами, а место на экране дороже кнопок. */
  .ekmap .leaflet-control-zoom {
    display: none;
  }

  /* Подпись карты уходит в верхний левый угол: низ закрыт шторкой. */
  .ekmap .leaflet-bottom.leaflet-right {
    top: 10px;
    bottom: auto;
    right: auto;
    left: 10px;
  }

  .ekmap .leaflet-bottom.leaflet-right .leaflet-control {
    margin: 0;
  }
}

/* ---------- Шторка поиска на телефоне ----------
   Меню поиска раскрыто — панель становится листом поверх страницы.
   top и height ставит скрипт по видимой области (над клавиатурой).
   Порядок: заголовок меню, поле, результаты на всю оставшуюся высоту. */

@media (max-width: 640px) {
  .ekmap--sheet .ekmap__panel {
    position: fixed;
    z-index: 10050;
    left: 0;
    right: 0;
    bottom: auto;
    max-height: none;
    /* Прокручивается весь лист, а заголовок и поле прилипают сверху:
       <details> не во всех браузерах честно становится flex-контейнером,
       и список «на всю оставшуюся высоту» через flex на нём ненадёжен. */
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px 14px 0 0;
    border-width: 1px 0 0;
    box-shadow: 0 -4px 24px rgba(40, 26, 10, .22);
  }

  .ekmap--sheet .ekmap__me {
    display: none;
  }

  .ekmap--sheet .ekmap__browse {
    display: block;
    border-top: 0;
  }

  .ekmap--sheet .ekmap__browse-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ek-paper);
  }

  /* Ручка шторки — видно, что это лист, который закрывается. */
  .ekmap--sheet .ekmap__browse-head::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--ek-line);
  }

  .ekmap--sheet .ekmap__search {
    position: sticky;
    top: 48px;
    z-index: 2;
    background: var(--ek-paper);
  }

  .ekmap--sheet .ekmap__browse[open] .ekmap__scroll {
    max-height: none;
    overflow: visible;
  }

  /* Кнопка геолокации поверх листа не нужна. */
  .ekmap--sheet .ekmap__geo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ekmap-pin,
  .ekmap__panel,
  .ekmap__grp summary::before,
  .ekmap__browse-head::after {
    transition: none;
  }
}

.ekfast__time {
  white-space: nowrap;
}