/* Inter — самый близкий к SF Pro свободный шрифт (SIL OFL, тот же нейтральный
   гротеск с крупным очком и почти теми же метриками), и у него есть кириллица.
   Держим у себя, а не тянем с fonts.gstatic.com: без обращения к Google
   (и без вопросов по GDPR), плюс на один сторонний домен меньше в загрузке.
   Файл вариативный: один ресурс на весь диапазон 100–900. */
@font-face {
    font-family: "Inter var";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter var";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter var";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter var";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Токены сняты с apple.com (сентябрь 2026) — это система, а не их айдентика:
   акцент #0071e3, чернила #1d1d1f (не чистый чёрный), нейтральная плоскость #f5f5f7,
   «материал» плавающей панели rgba(255,255,255,.8) + saturate(1.8) blur(20px),
   таблетка radius 980px, цель касания 44px, отрицательный трекинг, заливка без теней.
   Шрифт — системный стек: на технике Apple он сам подставит SF, файлы SF Pro
   лицензированы и здесь не используются. */
:root {
    --rbmm-accent: #0071e3;
    --rbmm-ink: #1d1d1f;
    --rbmm-ink-soft: rgba(0, 0, 0, .56);
    --rbmm-surface: #f5f5f7;

    --rbmm-material: rgba(255, 255, 255, .8);
    --rbmm-material-hover: rgba(255, 255, 255, .93);
    --rbmm-vibrancy: saturate(1.8) blur(20px);
    --rbmm-hairline: rgba(0, 0, 0, .06);

    --rbmm-pill: 980px;
    --rbmm-tap: 44px;
    --rbmm-gap: 8px;
    --rbmm-ease: cubic-bezier(.25, .1, .25, 1);

    --rbmm-font: "Inter var", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
                 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --rbmm-header-h: 52px;
}

html,
body.rbmm-body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--rbmm-surface);
    font-family: var(--rbmm-font);
    -webkit-font-smoothing: antialiased;
}

#rbmm-map-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контейнеры, которые WP Go Maps оборачивает вокруг карты */
#rbmm-map-wrap .wpgmza_map_wrapper,
#rbmm-map-wrap .wpgmza-map-container,
#rbmm-map-wrap > div {
    width: 100%;
    height: 100%;
}

#rbmm-map-wrap .wpgmza_map {
    width: 100% !important;
    height: 100% !important;
    background: var(--rbmm-surface);
}

/* Всё лишнее из плагина: поиск, списки маркеров, подсказки, метка посетителя */
.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;
}

/* ── Шапка ────────────────────────────────────────────────────────────
   Тот же приём, что у globalnav на apple.com: полоса не рисует фон, а
   пропускает карту сквозь себя — белый материал 80% плюс размытие
   с подъёмом насыщенности. Карта уходит под шапку, а не отступает от неё. */
#rbmm-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: calc(var(--rbmm-header-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--rbmm-material);
    -webkit-backdrop-filter: var(--rbmm-vibrancy);
    backdrop-filter: var(--rbmm-vibrancy);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.rbmm-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--rbmm-header-h);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 max(20px, env(safe-area-inset-left, 0px));
}

.rbmm-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--rbmm-ink);
    text-decoration: none;
    transition: opacity 180ms var(--rbmm-ease);
}

.rbmm-brand:hover {
    opacity: .62;
}

.rbmm-brand:focus-visible {
    outline: 3px solid var(--rbmm-accent);
    outline-offset: 4px;
    border-radius: 6px;
}

.rbmm-brand-mark {
    flex: 0 0 auto;
    color: var(--rbmm-accent);
}

.rbmm-brand-name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.022em;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#rbmm-nav .rbmm-nav-list {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#rbmm-nav a {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -.01em;
    color: rgba(0, 0, 0, .72);
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms var(--rbmm-ease);
}

#rbmm-nav a:hover {
    color: var(--rbmm-ink);
}

#rbmm-nav a:focus-visible {
    outline: 3px solid var(--rbmm-accent);
    outline-offset: 4px;
    border-radius: 6px;
}

/* На узком экране название сокращается, а меню прячется под свою же ширину */
@media (max-width: 560px) {
    :root {
        --rbmm-header-h: 48px;
    }

    .rbmm-header-inner {
        padding: 0 max(14px, env(safe-area-inset-left, 0px));
    }

    .rbmm-brand-name {
        font-size: 14px;
    }

    #rbmm-nav .rbmm-nav-list {
        gap: 14px;
    }

    #rbmm-nav a {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rbmm-brand,
    #rbmm-nav a {
        transition: none;
    }
}

/* Снимки Esri сняты «как есть» и рядом с белым фоном смотрятся тускло.
   Лёгкий подъём насыщенности и яркости — карта становится сочной, но цвета
   остаются правдоподобными (не постеризованный HDR). */
#rbmm-map-wrap .rbmm-satellite {
    filter: saturate(1.22) brightness(1.07) contrast(1.03);
}

/* ── Зум: два «материальных» круга ────────────────────────────────────
   Светлая подложка вместо тёмной: белое стекло 80% поверх любого снимка
   даёт фон яркостью не ниже 0.8, так что чернильный глиф держит 12:1
   даже над чёрным лесом. У Apple кнопки без теней, но здесь панель висит
   над фотографией — мягкая тень нужна, чтобы она читалась отдельным слоем.
   Селекторы начинаются с #rbmm-map-wrap: иначе их перебивает
   `.wpgmza_map .ol-viewport .ol-control button` из open-layers.css. */
#rbmm-map-wrap .ol-zoom {
    top: auto !important;
    right: auto !important;
    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: var(--rbmm-gap);
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

#rbmm-map-wrap .ol-zoom button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rbmm-tap);
    height: var(--rbmm-tap);
    margin: 0 !important;
    padding: 0;
    font: 400 21px/1 var(--rbmm-font);
    letter-spacing: -.2px;
    color: var(--rbmm-ink);
    background: var(--rbmm-material);
    border: 1px solid var(--rbmm-hairline);
    border-radius: var(--rbmm-pill);
    -webkit-backdrop-filter: var(--rbmm-vibrancy);
    backdrop-filter: var(--rbmm-vibrancy);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition:
        background-color 180ms var(--rbmm-ease),
        transform 180ms var(--rbmm-ease),
        box-shadow 180ms var(--rbmm-ease);
}

#rbmm-map-wrap .ol-zoom button:hover {
    background: var(--rbmm-material-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

#rbmm-map-wrap .ol-zoom button:active {
    transform: scale(.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Синее кольцо фокуса — ровно тот акцент, что Apple ставит на кнопках */
#rbmm-map-wrap .ol-zoom button:focus-visible {
    outline: 3px solid var(--rbmm-accent);
    outline-offset: 2px;
}

@supports not selector(:focus-visible) {
    #rbmm-map-wrap .ol-zoom button:focus {
        outline: 3px solid var(--rbmm-accent);
        outline-offset: 2px;
    }
}

#rbmm-map-wrap .ol-zoom button:disabled {
    opacity: .4;
    cursor: default;
    transform: none;
}

/* Мышь точнее пальца — на десктопе круг можно сделать компактнее */
@media (pointer: fine) {
    #rbmm-map-wrap .ol-zoom button {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }
}

/* Без поддержки размытия материал вырождается в плотную заливку */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #rbmm-map-wrap .ol-zoom button {
        background: rgba(255, 255, 255, .95);
    }
}

@media (prefers-reduced-motion: reduce) {
    #rbmm-map-wrap .ol-zoom button {
        transition: none;
    }

    #rbmm-map-wrap .ol-zoom button:hover,
    #rbmm-map-wrap .ol-zoom button:active {
        transform: none;
    }
}

/* Обязательный по лицензии Esri кредит за снимки — минимально заметный.
   Светлая обводка держит его читаемым и над снимком, и над бледным полем. */
#rbmm-credit {
    position: fixed;
    right: calc(.75rem + env(safe-area-inset-right, 0px));
    bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    font: 400 10px/1.2 var(--rbmm-font);
    letter-spacing: -.05px;
    color: var(--rbmm-ink-soft);
    text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
    pointer-events: none;
    user-select: none;
}