/* ═══════════════════════════════════════════════════════════════════════
   Стили только для главной страницы с картой. Общий вид сайта — цвета,
   шрифт, шапка, кнопки — лежит в style.css в корне темы.
   ═══════════════════════════════════════════════════════════════════════ */

/* Карта занимает весь экран, поэтому страница не должна прокручиваться */
html,
body.map-page {
    height: 100%;
    overflow: hidden;
}

.map-canvas {
    position: fixed;
    inset: 0;
    top: var(--chrome-top);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Плагин рисует карту одним блоком .wpgmza_map и задаёт ему размеры прямо
   в атрибуте style. Перебить встроенный стиль можно только через !important —
   это тот редкий случай, когда он оправдан. Нам нужна именно высота 100%
   от контейнера, а не 100vh из настроек плагина: контейнер уже сдвинут вниз
   на высоту админ-панели, и 100vh вылезал бы за экран. */
.map-canvas .wpgmza_map {
    width: 100% !important;
    height: 100% !important;
    background: var(--surface);
}

/* Всё, что плагин рисует поверх карты и что нам не нужно: поиск по адресу,
   списки маркеров, подсказки про жесты, метка местоположения посетителя.
   Здесь !important нужен: плагин показывает эти блоки, выставляя display
   прямо в атрибуте style, и обычное правило он бы перебил. */
.wpgmza_sl_main_div,
.wpgmza-store-locator,
.wpgmza_marker_holder,
.wpgmza_table,
.wpgmza-modern-store-locator,
.wpgmza-directions-box,
.wpgmza_widget,
.wpgmza-gdpr-compliance,
.wpgmza-inner-header,
.wpgmza-pro-upgrade-notice,
.wpgmza-gesture-overlay,
.wpgmza-my-location,
.wpgmza_user_location,
.wpgmza-locate-me,
.ol-geolocation,
.ol-attribution,
.ol-zoom-extent,
.ol-rotate {
    display: none !important;
}

/* Подъём цвета снимков описан в style.css, рядом с остальными общими
   правилами: тот же слой с тем же классом рисует и окно «Показать
   на карте» в очереди заявок, а две копии фильтра однажды разошлись бы. */


/* ── Карта внутри окна «Показать на карте» ───────────────────────────────
   Страница та же, что и обычная карта, но показывают её в рамке поверх
   списка заявок. Шапка и меню там лишние: окно стоит на странице,
   у которой всё это и так есть, — вторая шапка внутри рамки только
   отнимала бы у карты место. */
body.map-spot .site-header,
body.map-spot .site-menu,
body.map-spot .skip-to-content {
    display: none;
}

/* Место, которое занимали шапка и админ-панель, отдаём карте. */
body.map-spot {
    --chrome-top: 0px;
    --header-height: 0px;
}


/* ── Кнопки масштаба ────────────────────────────────────────────────────
   Как они выглядят, здесь не написано ни строчки. Скрипт карты вешает на них
   класс `.button--round`, и всю внешность они берут оттуда — как любая другая
   круглая кнопка сайта. Раньше тут лежала отдельная копия стилей, которая
   однажды разошлась с оригиналом, и кнопки стали сплошными белыми.

   Остаётся только положение: плагин ставит их в левый верхний угол,
   а нам нужен левый нижний, столбиком и с зазором. */
#content .ol-zoom {
    top: auto;
    right: auto;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: calc(1.25rem + env(safe-area-inset-left, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

#content .ol-zoom button {
    margin: 0;
}


/* ── Источники данных ───────────────────────────────────────────────────
   Указание источника снимков и границ требуют лицензии Esri и geoBoundaries.
   Это обычный чип из общего набора — то же стекло, что у кнопок, только
   самой лёгкой плотности: строка не должна спорить с картой.

   Плотность задаём через background-color, а не сокращённой записью
   background: сокращённая заодно обнуляет background-image, а там лежит
   блик стекла. Именно из-за неё чип раньше был плоским. */
.map-credits {
    position: fixed;
    right: calc(.75rem + env(safe-area-inset-right, 0px));
    bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--ink-muted);
    background-color: var(--material-thin);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 480px) {
    .map-credits {
        font-size: 9px;
    }
}