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

/* =====================================================================
 * ЧИСЛО ОБЪЕКТОВ ВНУТРИ ОВАЛА С ЦЕНОЙ (YARMETRO_ITEM148_V2)
 * «(4) от 27 тыс» -- кружок с количеством слева от цены, в одном овале.
 * Отменяет .ym-map-dot__count выше (значок на самой точке, п.64): он
 * читался как отдельная метка. Разметку собирает ensurePinLayout() в
 * templates/metro/footer.php.
 * ===================================================================== */
/* YARMETRO_ITEM148_V3: кружок тёмный с белой цифрой.
 * Было светло-серым, а у ЖК -- белым; плашка у обоих тоже белая (у ЖК просто
 * рамка тёмная), поэтому кружок с ней сливался, а у ЖК был вовсе не виден.
 * Размер подогнан под саму плашку: у неё текст 11px и padding 3px 8px, так что
 * кружок 18px её распирал -- стало 15px. Выворачиваем кружок только тогда,
 * когда плашка САМА залита (выбранная метка), иначе тёмное на тёмном. */
.ym-map-pin__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    margin: 0 6px 0 -3px;
    padding: 0 4px;
    border-radius: 8px;
    background: #07183f;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}
.ym-map-pin__count:empty {
    display: none;
}
.ym-map-pin.is-selected .ym-map-pin__count {
    background: #fff;
    color: #07183f;
}

/* YARMETRO_ITEM151: третий вид метки -- в группе и ЖК, и обычные объявления.
 * Залитая тёмная плашка: не спутать ни с белой (объявления), ни с белой в тёмной
 * рамке (только ЖК). Кружок на ней выворачивается. */
.ym-map-pin--mixed .metro-map-marker__price {
    background: #07183f;
    border-color: #07183f;
    color: #fff;
}
.ym-map-pin--mixed .ym-map-pin__count {
    background: #fff;
    color: #07183f;
}