/* ── Страница и карточка (вид как попап «Вход») ── */
.location-page {
    max-width: 480px;
    margin: 0 auto;
}

.location-page__header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 14px;
    padding: 0 4px;
}
.location-page__header .title {
    font-size: 18px;
    font-weight: 700;
    color: #373635;
}
.location-page__header .util-link {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #009AE3;
    text-decoration: none;
}

/* белая карточка-контейнер формы */
.location-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    /* собственный контекст наложения: запираем z-index селектора города (вплоть до 999)
       внутри карточки, чтобы он не перекрывал меню/попапы (z-index 2) */
    position: relative;
    z-index: 1;
}

.location-change {
    margin: 0 auto;
}

.location-change .util-form-fieldset {
    margin-bottom: 18px;
}

.location-change .label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #818181;
}

/* ── Текущее местоположение: без обводки, простой текст ── */
.location-change__current {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    font-size: 20px;
    font-weight: 700;
    color: #27282b;
}

/* ── Поле выбора города: вид как inp--grey из формы логина ── */
.location-change .bx-sls,
.location-change .wrap__field,
.location-change .bx-ui-sls-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* внутренний контейнер на всю высоту поля — чтобы текст центрировался */
.location-change .bx-ui-sls-container {
    height: 48px !important;
    line-height: 48px !important;
    position: relative !important;
}

/* сам бордюр-контейнер поля */
.location-change .dropdown-block {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    padding: 0 14px !important;
    display: flex;
    align-items: center;
    border: 1px solid #d9d9d9 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* рамка не меняется при фокусе/выборе — без «обводки» */
.location-change .dropdown-block.focus,
.location-change .dropdown-block:focus-within {
    border-color: #d9d9d9 !important;
    box-shadow: none !important;
}

/* визуальные инпуты внутри — прозрачные, без рамок.
   route и fake ДОЛЖНЫ быть пиксельно идентичны, иначе текст двоится */
.location-change .dropdown-field,
.location-change .bx-ui-sls-route,
.location-change .bx-ui-sls-fake {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
            appearance: none;
}

.location-change .dropdown-field::placeholder,
.location-change .bx-ui-sls-route::placeholder {
    color: #b0b0b0;
    font-weight: 400;
}

/* служебные иконки/слои селектора не должны ломать вид */
.location-change .dropdown-icon,
.location-change .dropdown-fade2white,
.location-change .bx-ui-sls-clear,
.location-change .bx-ui-sls-loader {
    display: none !important;
}

/* выпадающий список найденных городов */
.location-change .bx-ui-sls-pane {
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    margin-top: 4px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ── Кнопка: фирменная синяя, на всю ширину ── */
.location-change .button-container {
    margin-top: 22px;
}

.location-change .util-button.primary,
.location-change .button-container .util-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #009AE3;
    border-radius: 12px;
    background: #009AE3;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.location-change .util-button.primary:hover {
    background: #0086c7;
    border-color: #0086c7;
}