/* ============================================================
   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); }

/* ------------------------------------------------------------
   ПРИШВАРТОВАННАЯ КАРТОЧКА (выдача)
   Mapbox держит попап на координате и пишет ей transform на каждом кадре.
   Перебиваем это через !important: карточка стоит в левом нижнем углу
   карты и не двигается ни при зуме, ни при перетаскивании. Иначе на
   зуме точка уходит с экрана и уносит карточку за край карты.
   Хвостик-указатель в таком режиме врал бы — он скрыт, а связь с точкой
   держит увеличенный пин выбранного салона.
   ------------------------------------------------------------ */
.elq-map .mapboxgl-popup.elq-docked{
  position:absolute!important;
  transform:none!important;
  left:10px!important; right:auto!important;
  top:auto!important; bottom:var(--elq-dock-b,10px)!important;
  max-width:calc(100% - 20px)!important;
  will-change:auto;
}
.elq-map .mapboxgl-popup.elq-docked .mapboxgl-popup-tip{ display:none!important; }
.elq-map .mapboxgl-popup.elq-docked .mapboxgl-popup-content{
  margin:0; max-height:var(--elq-dock-max,none); overflow:auto;
}
/* На узкой карте карточка занимает её ширину: 214px посреди 352px выглядели
   случайным лоскутом, а прочитать в них нечего. */
@media (max-width:640px){
  .elq-map .mapboxgl-popup.elq-docked{ left:10px!important; right:10px!important; width:auto!important; }
  .elq-map .mapboxgl-popup.elq-docked .mapboxgl-popup-content{ width:100%!important; max-width:none!important; }
  .elq-map .mapboxgl-popup.elq-docked .elq-pop{ width:auto; }
  /* На телефоне обложка идёт не полосой во всю ширину, а квадратной
     миниатюрой слева. Полоса высотой 56px резала фотографию на тонкий
     ломоть, по которому ничего не понять (снимок владелицы 08.09.2026),
     и вдобавок карточка выходила высокой. Квадрат читается как обычная
     миниатюра, а карточка становится вдвое ниже. */
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__open{
    display:flex; align-items:flex-start; gap:10px; padding:10px 10px 0; }
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__cover{
    flex:0 0 58px; width:58px; height:58px; border-radius:13px; }
  /* логотип — маленьким значком в углу миниатюры: на фирменной заглушке
     без фото он остаётся единственным опознавательным знаком */
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__logo{
    left:auto; right:-5px; bottom:-5px; width:24px; height:24px;
    border-radius:8px; border-width:2px; box-shadow:0 2px 6px rgba(32,28,70,.22); }
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__body{ padding:0; gap:2px; min-width:0; flex:1 1 auto; }
  /* название в две строки максимум — иначе высота карточки скачет от салона
     к салону, а она пришвартована по нижней кромке */
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__name{
    font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__meta{ font-size:11.5px; }
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__foot{ padding:8px 10px 10px; }
  .elq-map .mapboxgl-popup.elq-docked .elq-pop__cta{ padding:8px 14px; font-size:12.5px; }
}
/* Компактная карточка страницы бизнеса: обложки нет, фон белый — белый ×
   на светло-сером круге сливался. Тёмный знак на бледной подложке. */
.elq-map .elq-pop-wrap--compact .mapboxgl-popup-close-button{
  color:var(--elyqo-text,#1B1830); background:rgba(27,24,48,.07);
}
.elq-map .elq-pop-wrap--compact .mapboxgl-popup-close-button:hover{ background:rgba(27,24,48,.14); }
.elq-pop{ width:240px; }
.elq-pop__cover{ position:relative; height:72px; background:linear-gradient(135deg,#5B4BE0,#241A66); }
/* Обложку рисуем отдельным слоем в своей обрезке, а не фоном самой полосы:
   кадрирование владельца задаёт transform:scale, и на самой полосе он утащил
   бы за собой логотип, который намеренно свисает вниз. Так же устроена
   карточка в выдаче (card.css · .banner > .art). */
.elq-pop__clip{ position:absolute; inset:0; overflow:hidden; display:block; border-radius:inherit; }
.elq-pop__art{ position:absolute; inset:0; display:block; }
/* логотип салона: тот же, что и на маркере */
.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; }
/* Кликабельная часть карточки: обложка, название и мета ведут на страницу
   бизнеса. Кнопка записи лежит ниже, вне ссылки — вложенные <a> недопустимы. */
.elq-pop__open{ display:block; color:inherit; text-decoration:none; }
.elq-pop__open:focus-visible{ outline:2px solid var(--elyqo-violet,#5B4CFF); outline-offset:-2px; border-radius:14px; }
.elq-pop__body{ padding:23px 12px 10px; 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; padding:0 12px 12px; }
.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 }

/* --- Компактная карточка для карты на странице бизнеса (ТЗ §12) ---
   Ориентир по высоте 120–180px: рейтинг, цена и галерея не повторяются —
   они уже на самой странице рядом с картой. Ширину ограничивает map.js
   по ширине контейнера, здесь только плотность содержимого. */
.elq-pop--compact{ width:auto; }
/* Справа оставлено место под крестик закрытия (26px + отступы): без этого
   длинное название уезжало прямо под него и читалось как «Aesthetiс×». */
.elq-pop--compact .elq-pop__row{ display:flex; align-items:center; gap:10px; padding:12px 42px 0 12px; }
.elq-pop--compact .elq-pop__logo{
  width:44px; height:44px; flex:0 0 auto; border-radius:12px;
  background-size:cover; background-position:center; box-shadow:none;
  /* position:relative нужен картинке внутри (она inset:0), но вместе с ним
     оживали left:12px / bottom:-17px от крупного варианта карточки —
     логотип уезжал вправо-вниз, вылезал за карточку и наезжал на кнопку
     маршрута. Гасим смещения явно. */
  position:relative; overflow:hidden; left:auto; right:auto; top:auto; bottom:auto; }
.elq-pop--compact .elq-pop__logo--mono{ font-size:14px; }
.elq-pop--compact .elq-pop__txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
/* Длинное название не растягивает карточку и не лезет за край: переносим по
   словам, при совсем длинном слове — по буквам. */
.elq-pop--compact .elq-pop__name{ font-size:14.5px; overflow-wrap:anywhere; }
.elq-pop--compact .elq-pop__meta{ font-size:12px; overflow-wrap:anywhere; }
.elq-pop--compact .elq-pop__cta--route,
.elq-pop--compact .elq-pop__cta--book{
  /* width:100% обязателен: кнопка — элемент формы, display:block её не
     растягивает, и она оставалась шириной по тексту, прижатой влево. */
  display:block; width:calc(100% - 24px); box-sizing:border-box;
  margin:10px 12px 12px; text-align:center; padding:10px 12px;
  min-height:44px; border:0; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
/* «Записаться» — ссылка, а не кнопка: у неё нет собственной высоты строки
   кнопки, поэтому текст центрируем сами, иначе он прилипал к верху. */
.elq-pop--compact .elq-pop__cta--book{ display:flex; align-items:center; justify-content:center;
  text-decoration:none; }
/* Шапка карточки на общей карте — ссылка на страницу бизнеса. Подчёркивания
   и цвета ссылки быть не должно: выглядит она как обычная строка. */
.elq-pop--compact .elq-pop__open{ display:block; color:inherit; text-decoration:none; }

/* Картинка логотипа поверх монограммы: если она загрузится — закроет её
   собой, если нет — обработчик в map.js уберёт её и монограмма останется. */
.elq-pop__logoimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }