/* =====================================================================
 * YARMETRO UI KIT -- МЕТКИ НА КАРТЕ
 * Файл: local/templates/metro/ui/map-markers-kit.css
 * Подключается в header.php ПОСЛЕ mobile-redesign.css.
 * Правила словами -- ui/README.md, раздел «Метки на карте».
 *
 * ГЛАВНОЕ ПРАВИЛО
 *   Метка на любой карте сайта -- это ОДНА И ТА ЖЕ разметка:
 *     <div class="ym-map-pin [ym-map-pin--nb]">
 *         <span class="metro-map-marker__price">12,4 млн</span>
 *         <div class="metro-map-dot [metro-map-dot--nb]">[иконка]</div>
 *     </div>
 *   Точка задаёт положение (14x14, центр = координата), плашка с ценой
 *   всплывает над ней, состояния (--tapped, .is-selected) общие.
 *   Жилой комплекс отличается от квартиры ТОЛЬКО модификаторами --nb:
 *   форма, цвет и значок. Своих меток и своих presetов Яндекса
 *   ('islands#redIcon' и подобных) не заводить -- именно так на карточке
 *   ЖК появилась чужая красная капля.
 *
 * ГДЕ ИСПОЛЬЗУЕТСЯ
 *   - карта каталога: rebuildMarks() в templates/metro/footer.php;
 *   - карта на карточке ЖК: detailMap() в local/new-buildings/app.js.
 *   Базовые правила точки и плашки цены пока лежат в mobile-redesign.css
 *   (блок YARMETRO_ITEM34_36_PIN_PRICE_SELECTED_V1); ВСЁ НОВОЕ по меткам
 *   пишем сюда, а не туда.
 * ===================================================================== */

/* Метка жилого комплекса: тёмно-синий скруглённый квадрат с силуэтом дома.
 * Красный кружок остаётся за квартирами -- два типа недвижимости не должны
 * читаться одинаково. Центр значка совпадает с центром точки 14x14,
 * поэтому отрицательные отступы обязательны: иначе метка «съедет» от дома. */
/* значок лежит в разметке КАЖДОЙ метки (шаблон один на все типы), но виден
 * только у жилого комплекса -- у квартиры точка остаётся чистым кружком */
.metro-map-dot .ym-map-dot-ico { display: none; }
.metro-map-dot--nb .ym-map-dot-ico { display: block; }

.ym-map-pin--nb .metro-map-dot {
    width: 24px;
    height: 24px;
    margin: -5px 0 0 -5px;
    border-radius: 9px;
    border: 2px solid #fff;
    background: #07183f;
    box-shadow: 0 2px 7px rgba(7, 24, 63, .45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ym-map-pin--nb .metro-map-dot svg {
    display: block;
    width: 14px;
    height: 14px;
    color: #fff;
}

/* плашка с ценой у ЖК -- та же, но в своём цвете, чтобы пара
 * «значок + цена» читалась как один объект */
.ym-map-pin--nb .metro-map-marker__price {
    border-color: #07183f;
}
.ym-map-pin--nb.is-selected .metro-map-marker__price {
    background: #07183f;
    border-color: #07183f;
    box-shadow: 0 2px 8px rgba(7, 24, 63, .4);
}

/* одиночная метка на карте карточки ЖК: цены над ней нет, показываем
 * только значок -- он и так говорит, что это жилой комплекс */
.ym-map-pin--nb.ym-map-pin--solo .metro-map-marker__price {
    display: none !important;
}

/* =====================================================================
 * НЕСКОЛЬКО ОБЪЕКТОВ В ОДНОЙ ТОЧКЕ (YARMETRO_ITEM64)
 * Метки с одинаковыми координатами перекрывают друг друга, и нижнюю не
 * открыть -- приближением это не лечится. Такие объекты объединяются в одну
 * метку со счётчиком, а превью получает листалку «1 из 3».
 * Группировку делает rebuildMarks() в templates/metro/footer.php.
 * ===================================================================== */

.metro-map-dot {
    position: relative;
}

/* счётчик объектов в точке; пустой -- значит объект один, значка нет */
.ym-map-dot__count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    border: 1.5px solid #07183f;
    background: #fff;
    color: #07183f;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(7, 24, 63, .35);
}
.ym-map-dot__count:empty {
    display: none;
}

/* листалка объектов в превью */
.ym-map-preview-card__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef0f2;
    color: #454a4f;
    font-size: 13px;
}
.ym-map-preview-card__pager button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #fff;
    color: #07183f;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.ym-map-preview-card__pager button:active {
    background: #f1f4f8;
}

/* YARMETRO_ITEM68: у жилого комплекса цена на карте видна ВСЕГДА.
 * У обычных объектов плашка появляется выборочно (иначе на обзорном виде
 * карта превращается в стену ценников), но комплексов на экране немного,
 * и цена -- главное, ради чего в них тыкают. Текст «от N млн» собирает
 * rebuildMarks в footer.php. */
.ym-map-pin--nb .metro-map-marker__price {
    display: block;
}