/* ============================================================
   ELYQO Map — стили компонента карты
   ------------------------------------------------------------
   Все классы с префиксом .elq-map — глобальные стили сайта не
   затрагиваются. Брендовые переменные берутся из :root страницы
   (index.html / salon.html), но у каждой есть фолбэк, поэтому
   файл самодостаточен и работает на любой странице.
   ============================================================ */

/* --- контейнер: всегда 100% доступного места, свои размеры не навязывает --- */
.elq-map{
  position:relative; width:100%; height:100%; min-height:0;
  border-radius:var(--r-card,20px); overflow:hidden;
  background:var(--map-land,#EFEDFB);
  font-family:var(--font,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  isolation:isolate;                     /* попапы не всплывают над шапкой сайта */
}
.elq-map--bordered{ border:1px solid var(--elyqo-border,#E4E1F2); }
/* Холсту Mapbox вешает свой класс .mapboxgl-map с position:relative. Когда
   mapbox-gl.css подгружается лениво, он оказывается в каскаде ПОЗЖЕ map.css и
   перебивает правило одного класса: холст схлопывается в нулевую высоту, а карта
   уходит на запасные 400×300 и не рисуется. Селектор из двух классов выигрывает
   независимо от порядка подключения стилей. */
.elq-map__canvas{ position:absolute; inset:0; }
.elq-map > .elq-map__canvas{ position:absolute; inset:0; width:auto; height:auto; }
.elq-map canvas{ outline:none; }

/* --- состояние «карта ещё не готова» / ошибка: слой поверх, layout не рвётся --- */
.elq-map__state{
  position:absolute; inset:0; z-index:3; display:none;
  place-items:center; text-align:center; padding:24px;
  background:linear-gradient(180deg,#F7F5FF 0%,#EFEDFB 100%);
}
.elq-map.is-loading .elq-map__state--loading,
.elq-map.is-blocked .elq-map__state--blocked{ display:grid; }
.elq-map__state > div{
  max-width:340px; background:#FFFFFF;
  border:1px solid var(--elyqo-border,#E4E1F2); border-radius:14px;
  padding:18px 20px; box-shadow:var(--sh-md,0 8px 28px rgba(32,28,70,.07));
  font-size:13px; line-height:1.55; color:var(--elyqo-text-secondary,#4A4568);
}
.elq-map__state b{ display:block; margin-bottom:6px; font-size:14px; color:var(--elyqo-text,#1B1830); }
.elq-map__state code{
  display:inline-block; margin-top:8px; padding:3px 7px; border-radius:6px;
  background:#F4F2FF; color:#4636C4; font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;
}
.elq-map__spinner{
  width:26px; height:26px; margin:0 auto 10px; border-radius:50%;
  border:2.5px solid #E4E1F2; border-top-color:var(--elyqo-violet,#5B4CFF);
  animation:elq-map-spin .7s linear infinite;
}
@keyframes elq-map-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .elq-map__spinner{ animation-duration:2.4s; } }

/* --- маркер клиента («я здесь») --- */
.elq-map__me{
  width:16px; height:16px; border-radius:50%;
  background:var(--elyqo-violet,#5B4CFF); border:3px solid #FFFFFF;
  box-shadow:0 0 0 1px rgba(91,76,255,.35), 0 4px 12px rgba(32,28,70,.28);
}

/* --- попап салона: повторяет .map-pop главной, чтобы переход был бесшовным --- */
.elq-map .mapboxgl-popup-content{
  padding:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--elyqo-border,#E4E1F2);
  box-shadow:var(--sh-hover,0 18px 44px rgba(32,28,70,.16));
}
.elq-map .mapboxgl-popup-close-button{
  width:26px; height:26px; font-size:17px; line-height:1; color:#FFFFFF;
  border-radius:50%; right:6px; top:6px; background:rgba(0,0,0,.28);
}
.elq-map .mapboxgl-popup-close-button:hover{ background:rgba(0,0,0,.45); }
.elq-pop{ width:240px; }
.elq-pop__cover{ position:relative; height:72px; background:linear-gradient(135deg,#5B4BE0,#241A66); }
/* логотип салона: тот же, что и на маркере */
.elq-pop__logo{
  position:absolute; left:12px; bottom:-17px; width:44px; height:44px; border-radius:14px;
  background:#FFFFFF center/cover no-repeat; border:2px solid #FFFFFF;
  box-shadow:0 4px 14px rgba(32,28,70,.22);
}
.elq-pop__logo--mono{ display:grid; place-items:center; background:#F4F2FF; color:#4636C4; font-weight:800; font-size:15px; }
.elq-pop__body{ padding:23px 12px 12px; display:flex; flex-direction:column; gap:5px; }
.elq-pop__name{ font-size:14px; font-weight:700; letter-spacing:-.01em; line-height:1.25; color:var(--elyqo-text,#1B1830); }
.elq-pop__meta{ font-size:12px; color:var(--elyqo-muted,#7B7694); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.elq-pop__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px; }
.elq-pop__price{ font-size:12.5px; color:var(--elyqo-text-secondary,#4A4568); }
.elq-pop__cta{
  padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:600;
  text-decoration:none; color:#FFFFFF; white-space:nowrap;
  background:var(--elyqo-grad,linear-gradient(135deg,#5B4CFF,#8B5CF6));
}

/* --- нативные контролы Mapbox под сетку ELYQO --- */
.elq-map .mapboxgl-ctrl-group{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--elyqo-border,#E4E1F2);
  box-shadow:var(--sh-md,0 8px 28px rgba(32,28,70,.07));
}
.elq-map .mapboxgl-ctrl-attrib{ font-size:10.5px; }

/* --- на узких экранах контролы компактнее, чтобы не съедать карту --- */
@media (max-width:640px){
  .elq-map .mapboxgl-ctrl-bottom-left{ display:none; }   /* масштабная линейка */
  .elq-pop{ width:212px; }
}

/* ============================================================
   МЕТКА ВХОДА
   ------------------------------------------------------------
   Клиенту важно не «где дом», а «в какую дверь». Метка входа —
   подписанная стрелка, которая мягко подпрыгивает: на плотной
   карте её видно сразу, а подпись снимает вопрос «это вход или
   сам салон». Одинаково выглядит в кабинете владельца и на
   публичной карточке.
   ============================================================ */
/* Сам элемент маркера — только позиция от Mapbox: никакого transform,
   иначе метка перестаёт следовать за точкой и не перетаскивается.
   Точка входа — начало координат (anchor center), подпись со стрелкой
   отодвинуты «на вылет», поэтому не наезжают ни на точку, ни на пин
   салона рядом. */
/* Mapbox раскладывает маркеры по широте: метка севернее пина салона
   оказывалась под ним, и подпись обрезалась. Вход всегда сверху — это
   подсказка, ради которой человек и смотрит на карту. */
.elq-ent{ width:0; height:0; cursor:grab; user-select:none; line-height:1; z-index:6 !important }
.elq-ent:active{ cursor:grabbing }
.elq-ent__in{
  position:absolute; left:0; top:0;
  animation:elq-ent-bob 1.6s ease-in-out infinite;
}
.elq-ent__rot{ position:absolute; left:0; top:0; transform-origin:0 0; transition:transform .12s ease }
.elq-ent__arm{
  position:absolute; left:0; top:0;
  /* Вылет подписи от точки входа. На картах, которые только смотрят, его
     задаёт map.js · entranceAutoFit по расстоянию до пина в пикселях —
     ближе точки, меньше вылет, и наоборот. Умолчание для редакторов. */
  transform:translate(-50%,-100%) translateY(calc(-1 * var(--elq-ent-arm, 14px)));
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.elq-ent__lbl{
  font:700 11.5px/1.15 var(--elyqo-font,inherit); color:#FFFFFF; white-space:nowrap;
  padding:5px 9px; border-radius:999px;
  /* Доворот подписи анимируем ровно так же, как поворот стрелки: он задаётся
     мгновенно, и без этого во время анимации родителя текст успевал
     провернуться и встать наискось. А вот отступ до стрелки (его считает
     map.js · entranceGap) меняется без плавности намеренно: если он будет
     догонять поворот, подпись наедет на стрелку прямо во время вращения. */
  transition:transform .18s ease;
  background:linear-gradient(135deg,#17B26A,#0E8F52);
  /* светлая кромка: подпись читается, даже когда попадает на тёмный пин */
  box-shadow:0 6px 16px rgba(14,143,82,.42), 0 0 0 2px rgba(255,255,255,.9);
}
.elq-ent__arrow{ display:block; filter:drop-shadow(0 4px 8px rgba(14,143,82,.45)) }

/* ручка поворота — только когда метку «взяли» нажатием */
.elq-ent__grip{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%; display:none; place-items:center;
  background:#FFFFFF; border:2px solid #17B26A; cursor:grab;
  box-shadow:0 6px 16px rgba(14,143,82,.35);
}
.elq-ent__grip:active{ cursor:grabbing }
.elq-ent.is-rot .elq-ent__grip{ display:grid }
.elq-ent.is-rot .elq-ent__in{ animation:none }      /* при повороте метка стоит смирно */

@keyframes elq-ent-bob{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-6px) }
}
/* Тем, кто просил не анимировать интерфейс, — статичная метка */
@media (prefers-reduced-motion:reduce){
  .elq-ent__in{ animation:none }
}

/* стрелка поворачивается, подпись — нет: её должно быть удобно читать */
.elq-ent__rot{ display:block; transform-origin:50% 50%; transition:transform .18s ease }