/* cleanmap.css — метки уборщиков и подпись места поверх карты */

.cm-pin {
  /* position не задаём: элемент метки — это и есть .maplibregl-marker, ему нужен
     absolute из maplibre-gl.css. relative здесь выключал привязку к карте: метки
     ложились стопкой в поток и не двигались вместе с картой. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cm-pin .cm-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #06D6A0;                 /* цвет = статус: свободен */
  background: #2563EB center/cover no-repeat;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95),
              0 0 0 4px rgba(69, 68, 64, .14),
              0 4px 14px rgba(69, 68, 64, .32);
  display: grid;
  place-items: center;
  font: 800 15px/1 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
  letter-spacing: .02em;
  transition: border-color .2s ease;
}

.cm-pin.cm-busy .cm-ava { border-color: #F43F5E; }
.cm-pin.cm-off  .cm-ava { border-color: #94A3B8; }

/* метка в движении — мягкое кольцо вокруг, видно, что человек едет */
.cm-pin.cm-moving .cm-ava {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95),
              0 0 0 8px rgba(37, 99, 235, .26),
              0 4px 14px rgba(69, 68, 64, .34);
}

.cm-pin .cm-tag {
  background: #fff;
  border: 1px solid rgba(11, 27, 61, .12);
  border-radius: 9px;
  padding: 2px 7px;
  font: 700 11.5px/1.35 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #15203A;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11, 27, 61, .22);
}

.cm-pin .cm-tag i { color: #F59F1C; font-style: normal; }

/* название текущего места */
.cm-place {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 5;
  pointer-events: none;
  max-width: 70%;
  font: 800 clamp(19px, 2.4vw, 27px)/1.1 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -.02em;
  color: #2C2B27;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .6),
               0 0 14px rgba(255, 255, 255, .95),
               0 0 4px #fff;
}

/* на тёмной палитре подпись должна быть светлой */
.cm-dark .cm-place {
  color: #EAF6FF;
  text-shadow: 0 0 16px rgba(6, 8, 26, .95), 0 0 5px rgba(6, 8, 26, 1);
}

/* атрибуция обязательна по лицензии OSM: при загрузке раскрыта, при первом
   перетаскивании карты MapLibre сворачивает её в кнопку «i» — так разрешают
   правила OSMF. Кнопку не прятать: после сворачивания лицензия должна находиться. */
.maplibregl-ctrl.maplibregl-ctrl-attrib {
  font: 500 10.5px/1.5 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #64748B;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 22px; border-radius: 12px; }
.maplibregl-ctrl-attrib a { color: #475569; }
.maplibregl-ctrl-attrib a:hover { color: #2563EB; text-decoration: none; }
.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button { background-color: transparent; opacity: .55; }
.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button:hover { opacity: 1; }
.cm-dark .maplibregl-ctrl.maplibregl-ctrl-attrib { background: rgba(15, 23, 42, .72); color: #94A3B8; }
.cm-dark .maplibregl-ctrl-attrib a { color: #CBD5E1; }
.cm-dark .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button { filter: invert(1); }

@media (prefers-reduced-motion: reduce) {
  .cm-pin .cm-ava { transition: none; }
}


/* ─── метка «вы здесь» ─── */
/* position не задаём: .cm-me и есть .maplibregl-marker, ему нужен absolute */
.cm-me { width: 22px; height: 22px; }

.cm-me-dot {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: #2563EB;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(21, 32, 58, .45);
}

.cm-me-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(37, 99, 235, .35);
  animation: cm-pulse 2.2s ease-out infinite;
}

@keyframes cm-pulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-me-pulse { animation: none; opacity: .4; }
}

/* ─── «скоро будем и у вас» ─── */
/* Оформление повторяет модальные окна samuborchik.ru: белая карточка
   с мягкой рамкой на затемнённой подложке, Manrope в заголовке, Inter
   в тексте, фирменная кнопка с градиентом. */

.cm-soon-ov {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(20, 22, 45, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}

.cm-soon-ov.cm-soon-on { opacity: 1; visibility: visible; }

.cm-soon {
  width: 380px;
  max-width: 94%;
  padding: 28px 30px 26px;
  border-radius: 22px;
  background: #fff;
  border: 1.5px solid #E8EAF2;
  box-shadow: 0 24px 60px rgba(15, 12, 41, .18);
  text-align: center;
  font: 400 13.5px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #4B5280;
  transform: scale(.92) translateY(10px);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.cm-soon-ov.cm-soon-on .cm-soon { transform: none; }

.cm-soon-ic {
  width: 54px;
  height: 54px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #5A5FFF;
  background: linear-gradient(135deg, rgba(90, 95, 255, .13), rgba(124, 58, 237, .13));
}

.cm-soon-ic svg { width: 26px; height: 26px; }

.cm-soon .cm-soon-t {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  color: #1F2937;
  letter-spacing: -.5px;
  margin-bottom: 7px;
}

.cm-soon .cm-soon-s { margin-bottom: 19px; }

.cm-soon-b {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #5A5FFF, #7C3AED);
  color: #fff;
  font: 700 14px 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(90, 95, 255, .4);
  transition: transform .15s ease, box-shadow .15s ease;
}

.cm-soon-b:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(90, 95, 255, .52); }
.cm-soon-b:active { transform: none; }

@media (max-width: 480px) {
  .cm-soon { padding: 24px 20px 22px; border-radius: 20px; }
  .cm-soon .cm-soon-t { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-soon { transition: none; transform: none; }
}

/* ─── подпись города под курсором ─── */
.cm-tip {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -100%) translateY(-14px);
  padding: 6px 10px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(11, 27, 61, .1);
  box-shadow: 0 6px 18px rgba(15, 12, 41, .16);
  font: 400 11.5px/1.3 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #6B7280;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease;
}

.cm-tip.cm-tip-on { opacity: 1; }

.cm-tip b {
  display: block;
  font: 800 13px/1.25 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1F2937;
  letter-spacing: -.2px;
}

.cm-tip i { font-style: normal; }

.cm-overview-dark .cm-tip {
  background: rgba(16, 22, 42, .97);
  border-color: rgba(255, 255, 255, .12);
  color: #9DB2D4;
}
.cm-overview-dark .cm-tip b { color: #EAF2FF; }

/* ─── остриё метки: к адресу крепится его кончик ─── */
.cm-pin { gap: 0; }
.cm-pin .cm-tag { margin-bottom: 5px; }
.cm-pin .cm-stem {
  width: 0;
  height: 0;
  margin-top: 1px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #06D6A0;           /* цвет = статус, как обводка аватара */
  filter: drop-shadow(0 2px 2px rgba(69, 68, 64, .28));
}
.cm-pin.cm-busy .cm-stem { border-top-color: #F43F5E; }
.cm-pin.cm-off  .cm-stem { border-top-color: #94A3B8; }

/* ─── кружок с числом уборщиков у города на обзоре страны ─── */
.cm-city-badge {
  /* position не задаём — элемент метки MapLibre (см. .cm-pin) */
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 17px;
  background: #2563EB;
  border: 3px solid #fff;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, .22), 0 4px 12px rgba(11, 27, 61, .30);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s ease;
}
.cm-city-badge b {
  font: 800 14px/1 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
  letter-spacing: .01em;
}
.cm-city-badge-wide b { font-size: 12.5px; }
.cm-city-badge:hover { box-shadow: 0 0 0 8px rgba(37, 99, 235, .26), 0 6px 16px rgba(11, 27, 61, .34); }
@media (max-width: 560px) {
  /* на телефоне Петербург и Москва на обзоре в 20 px друг от друга */
  .cm-city-badge { min-width: 26px; height: 26px; padding: 0 4px; border-width: 2px; border-radius: 13px;
                   box-shadow: 0 0 0 3px rgba(37, 99, 235, .22), 0 3px 8px rgba(11, 27, 61, .28); }
  .cm-city-badge b { font-size: 12px; }
  .cm-city-badge-wide b { font-size: 10.5px; }
}

/* ─── объединённые метки: кружок с числом, как на прежней карте ─── */
.cm-cluster {
  /* position не задаём — это элемент метки MapLibre (см. .cm-pin) */
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* transform не анимируем: им MapLibre ставит метку на карту, и с плавным
     переходом кружок отставал от карты при сдвиге и зуме */
  transition: box-shadow .15s ease;
}
.cm-cluster b {
  font: 800 19px/1 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
}
.cm-cluster-big { width: 58px; height: 58px; }
.cm-cluster-huge b { font-size: 15px; }
.cm-cluster-nofree { background: linear-gradient(135deg, #1D4ED8, #1E3A8A); }   /* свободных нет */
.cm-cluster:hover { box-shadow: 0 0 0 6px rgba(37, 99, 235, .22), 0 6px 16px rgba(0, 0, 0, .34); }
.cm-cluster:active b { transform: scale(.9); }

/* список уборщиков в одной точке (один адрес — кружок не распадается) */
.cm-cl-pop .maplibregl-popup-content {
  padding: 6px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(11, 27, 61, .22);
}
.cm-cl-list { max-height: min(340px, 55vh); overflow-y: auto; min-width: 230px; }
.cm-cl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.cm-cl-row:hover { background: #EEF3FD; }
.cm-cl-ava {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #11C98A;
  background: #2563EB center/cover no-repeat;
  color: #fff;
  font: 800 13px/1 'Manrope', system-ui, sans-serif;
  display: grid;
  place-items: center;
}
.cm-cl-ava.cm-busy { border-color: #F43F5E; }
.cm-cl-ava.cm-off  { border-color: #9BAFCC; }
.cm-cl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-cl-info b { font-size: 14px; color: #15203A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-cl-info span { font-size: 12px; color: #5A6577; }
.cm-cl-st { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
.cm-cl-st.free    { color: #0A8F62; background: #E3F8EF; }
.cm-cl-st.busy    { color: #C81E45; background: #FDE8EC; }
.cm-cl-st.offline { color: #64748B; background: #EEF1F5; }

/* ─── метка в разметке сайта (прежний вид: makeIcon) ─── */
.cm-pin-html { cursor: pointer; -webkit-tap-highlight-color: transparent;   /* position/transform не задаём */
  /* шрифт и высота строки — как у .leaflet-container прежней карты (12px/1.5):
     контейнер MapLibre даёт 20px, и таймер «25м» на метке вырастал на 2 px */
  font-size: 12px; line-height: 1.5; }

/* подсказка при наведении — оформление .ctip из style.css, как у прежней карты */
.cm-ptip {
  position: absolute;
  z-index: 7;
  /* без transform: сдвиг на полширины давал полпикселя и мягкий текст —
     место на целых пикселях считает _showTip */
  /* как tooltip Leaflet: его панель нулевой ширины, и подсказка ужималась до
     минимальной ширины содержимого (≈200 px) — текст переносился в столбик.
     Высота строки — от .leaflet-container (1.5), не 20px контейнера MapLibre. */
  width: min-content;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.cm-ptip.cm-ptip-on { opacity: 1; visibility: visible; }

/* список кружка из makeClusterPopup: у него своя карточка, обёртку MapLibre убираем */
.cm-cl-legacy .maplibregl-popup-content { padding: 0; background: transparent; box-shadow: none; border-radius: 16px;
  /* как у окна Leaflet на прежней карте: 13 px и line-height 1 (style.css, .leaflet-popup-content).
     Без этого текст наследовал line-height 20px контейнера MapLibre — строки списка
     вырастали с 67 до 81 px, и список выглядел крупнее прежнего. */
  font-size: 13px; line-height: 1; }
.cm-cl-legacy .maplibregl-popup-tip { border-top-color: #fff; }

/* ─── чёткий текст ───
   Окна списка стоят на целых пикселях (cleanmap.js, _pinPopup): transform
   MapLibre отключаем. will-change выносит элемент в отдельный слой видеокарты,
   где Windows рисует текст без ClearType — серее и мягче; у маркеров с текстом
   и у окон его снимаем. */
.cm-pop-snap.maplibregl-popup { transform: none !important; will-change: auto; }
.maplibregl-marker.cm-pin-html,
.maplibregl-marker.cm-cluster,
.maplibregl-marker.cm-city-badge,
.maplibregl-marker.cm-pin { will-change: auto; }