/**
 * Карта экадаши — оформление фронтенда.
 *
 * Ключевая идея по маркерам: 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;
}

.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.3);
  transform: translate(-50%, -100%);
  transition: width .18s ease, height .18s ease;
  cursor: pointer;
}

/* Невидимая зона нажатия: не меньше 48×48, как требуют мобильные гайдлайны.
   Старая иконка была 33×33 вместе с зоной попадания. */
.ekmap-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  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: hidden;
  background: var(--ek-paper);
  border: 1px solid var(--ek-line);
  border-radius: 14px;
  box-shadow: var(--ek-shadow);
}

.ekmap__grab {
  display: none;
}

.ekmap__head {
  padding: 12px 14px 0;
  cursor: default;
}

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

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

.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 {
  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__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-km {
  margin-left: auto;
  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: 40px;
  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(88vh, 760px);
  }

  .ekmap__panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: min(78%, 560px);
    border-radius: 16px 16px 0 0;
    border-width: 1px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .25s ease;
  }

  .ekmap__panel.is-collapsed {
    transform: translateY(calc(100% - 118px));
  }

  .ekmap__grab {
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: #ddd2c4;
  }

  .ekmap__head {
    padding-top: 16px;
    cursor: pointer;
  }

  .ekmap__geo {
    bottom: auto;
    top: 12px;
    right: 12px;
  }

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

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