/**
 * Модалка "Выберите город" (#select-city-modal, common/footer.twig).
 *
 * РАЗМЕР самой модалки (.modal-dialog) НЕ трогаем нигде — ни на десктопе,
 * ни отдельным мобильным фиксом. Десктоп остаётся с тем размером, что уже
 * есть (легаси, width:700px из add.css). Только мобильный узкий экран
 * получает свой отдельный размер (иначе модалка растягивается на весь
 * экран из-за отсутствия отступов/ограничения высоты у контента).
 *
 * Вся ОСТАЛЬНАЯ стилизация — крестик закрытия, SVG вместо иконочного
 * шрифта, компактные пилюли городов, поле поиска, подпись "Нет вашего
 * города?...", кнопка геолокации, выпадающий список автокомплита —
 * одинаковая на любой ширине (десктоп и мобильный выглядят стилистически
 * идентично).
 *
 * Разметка в footer.twig общая для обеих версий — крестик в HTML есть
 * всегда, иконки задублированы (svg + оригинальный icon-font); тут SVG
 * показан всегда, icon-font всегда скрыт (легаси-разметка оставлена в
 * HTML про запас, на случай если понадобится откатить обратно).
 *
 * add.css (легаси, тот же компонент) грузится ПОЗЖЕ этого файла
 * (common_styles_head_post, после common_styles_head_pre) — используем
 * !important там, где специфичность его правил может совпасть или
 * оказаться выше.
 */

/* Размер модалки — только у мобильной ширины свой отдельный фикс,
   десктопный width:700px (add.css) этим не затрагивается вообще. */
@media (max-width: 767px) {
    #select-city-modal .modal-dialog {
        width: calc(100% - 32px) !important;
        max-width: 420px !important;
        margin: 48px auto !important;
    }

    /* Пилюли городов — компактный размер только на мобильном (было 24px
       высотой, тесный тап-таргет). На десктопе размер легаси (44px) не
       трогаем. */
    #select-city-modal a.city-link {
        height: 34px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 12.5px !important;
    }

    #select-city-modal div#popular-cities {
        row-gap: 6px;
        column-gap: 6px;
    }
}

#select-city-modal .modal-content {
    position: relative;
    border-radius: 20px !important;
}

/* Только скругление — размер/паддинг пилюль не трогаем (десктоп остаётся
   легаси-размера), просто те же углы, что и у поля поиска (10px). */
#select-city-modal a.city-link {
    border-radius: 10px !important;
}

#select-city-modal .modal-title {
    font-size: 18px !important;
    margin-bottom: 16px !important;
    padding-right: 28px;
}

/* Иконки — везде SVG вместо иконочного шрифта. */
#select-city-modal .select-city-icon-svg {
    display: block;
}

#select-city-modal .select-city-icon-legacy {
    display: none;
}

/* Крестик закрытия — раньше модалку можно было закрыть только кликом по
   фону (не всем очевидно), теперь явная круглая кнопка в углу — везде. */
#select-city-modal .select-city-close {
    display: flex;
    position: absolute;
    top: 16px;
    right: 16px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-500, #64748b);
    cursor: pointer;
}

#select-city-modal .select-city-close:hover,
#select-city-modal .select-city-close:active {
    background: var(--gray-200, #e2e8f0);
}

#select-city-modal .select-city-close svg {
    display: block;
}

/* Блок поиска — было по 2rem паддинга+отступа сверху/снизу (много
   пустого места), сжимаем пропорционально. */
#select-city-modal .search-city {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Подпись "Нет вашего города?..." — была впритык к полю поиска под ней
   (0 отступа) и невыразительным текстом того же веса, что и остальной
   контент. Приглушаем и отделяем от инпута. */
#select-city-modal .search-city-title {
    font-size: 13px !important;
    color: var(--gray-500, #64748b) !important;
    margin-bottom: 12px !important;
}

#select-city-modal .search-city .input-group {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-radius: 10px !important;
}

#select-city-modal .search-city .input-group svg {
    width: 18px;
    height: 18px;
    display: block;
}

#select-city-modal button.btn.btn-define-location {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

#select-city-modal button.btn.btn-define-location svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

/* Выпадающий список автокомплита — легаси-версия завязана на конкретный
   паддинг .input-group (margin-left:-2rem/max-width:calc(100% + 2px)
   компенсировали именно 2rem) — при любом изменении паддинга съезжает и
   становится шире контейнера. left:0 + right:0 вместо этого расчёта —
   надёжно растягивает список ровно между краями .input-group (у которого
   position:relative), независимо от паддингов.

   max-height+overflow-y — сам список не был ничем ограничен по высоте и
   не скроллился, просто рос вниз до бесконечности за пределы экрана. */
#select-city-modal input#search-city + ul.dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    margin-top: 10px !important;
    border-radius: 10px !important;
    border-color: var(--gray-200, #e2e8f0) !important;
    max-height: 260px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

#select-city-modal input#search-city + ul.dropdown-menu li {
    padding-left: 14px !important;
    padding-right: 14px !important;
}