/* ─── Кнопка-триггер ─────────────────────────────────────── */
.city-selector__trigger {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    padding:      8px 14px;
    background:   transparent;
    border:       1px solid #d0d0d0;
    border-radius: 6px;
    cursor:       pointer;
    font-size:    14px;
    color:        #333;
    transition:   border-color 0.2s, color 0.2s;
}

.city-selector__trigger:hover {
    border-color: #999;
    color:        #000;
}

.city-selector__trigger svg {
    flex-shrink: 0;
    color:       #e53935;
}

/* ─── Модальное окно ─────────────────────────────────────── */
.city-modal {
    display:  none;
    position: fixed;
    inset:    0;
    z-index:  9999;
}

.city-modal.is-open {
    display: block;
}

/* Затемнение фона */
.city-modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.5);
    animation:  overlayFadeIn 0.2s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Окно */
.city-modal__window {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         90%;
    max-width:     480px;
    max-height:    80vh;
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 8px 40px rgba(0, 0, 0, 0.18);
    display:       flex;
    flex-direction: column;
    animation:     modalSlideIn 0.25s ease;
    overflow:      hidden;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ─── Шапка ─────────────────────────────────────────────── */
.city-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 20px 14px;
    border-bottom:   1px solid #f0f0f0;
    flex-shrink:     0;
}

.city-modal__title {
    margin:    0;
    font-size: 17px;
    font-weight: 600;
    color:     #1a1a1a;
}

.city-modal__close {
    display:      flex;
    align-items:  center;
    justify-content: center;
    width:        32px;
    height:       32px;
    background:   transparent;
    border:       none;
    border-radius: 6px;
    cursor:       pointer;
    color:        #888;
    transition:   background 0.15s, color 0.15s;
}

.city-modal__close:hover {
    background: #f5f5f5;
    color:      #333;
}

/* ─── Поиск ─────────────────────────────────────────────── */
.city-modal__search {
    position: relative;
    padding:  14px 20px 10px;
    flex-shrink: 0;
}

.city-modal__search-icon {
    position: absolute;
    left:     34px;
    top:      50%;
    transform: translateY(-50%);
    color:    #aaa;
    pointer-events: none;
}

.city-modal__search-input {
    width:         100%;
    padding:       10px 36px 10px 38px;
    border:        1px solid #e0e0e0;
    border-radius: 8px;
    font-size:     14px;
    color:         #333;
    background:    #fafafa;
    box-sizing:    border-box;
    transition:    border-color 0.2s, box-shadow 0.2s;
    outline:       none;
}

.city-modal__search-input:focus {
    border-color: #1976d2;
    box-shadow:   0 0 0 3px rgba(25, 118, 210, 0.12);
    background:   #fff;
}

/* Кнопка очистки поиска */
.city-modal__search-clear {
    position:   absolute;
    right:      30px;
    top:        50%;
    transform:  translateY(-50%);
    display:    none;
    align-items: center;
    justify-content: center;
    width:      24px;
    height:     24px;
    background: #e0e0e0;
    border:     none;
    border-radius: 50%;
    cursor:     pointer;
    color:      #555;
    transition: background 0.15s;
}

.city-modal__search-clear:hover {
    background: #ccc;
}

.city-modal__search-clear.is-visible {
    display: flex;
}

/* ─── Тело (список) ──────────────────────────────────────── */
.city-modal__body {
    overflow-y: auto;
    flex:       1 1 auto;
    padding:    4px 0;
}

.city-modal__list {
    margin:     0;
    padding:    0 8px;
    list-style: none;
}

.city-modal__item {
    border-radius: 6px;
    transition:    background 0.15s;
}

.city-modal__item.is-hidden {
    display: none;
}

.city-modal__label {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 12px;
    cursor:      pointer;
    border-radius: 6px;
    transition:  background 0.15s;
}

.city-modal__label:hover {
    background: #f5f7ff;
}

.city-modal__radio {
    accent-color: #1976d2;
    width:        16px;
    height:       16px;
    flex-shrink:  0;
    cursor:       pointer;
}

.city-modal__city-name {
    font-size: 14px;
    color:     #333;
}

/* Подсветка совпадения при поиске */
.city-modal__city-name mark {
    background:    #fff3cd;
    color:         #333;
    border-radius: 2px;
    padding:       0 1px;
}

.city-modal__not-found,
.city-modal__empty {
    text-align: center;
    padding:    24px;
    color:      #999;
    font-size:  14px;
}

/* ─── Подвал ─────────────────────────────────────────────── */
.city-modal__footer {
    padding:      14px 20px;
    border-top:   1px solid #f0f0f0;
    flex-shrink:  0;
}

.city-modal__submit {
    width:         100%;
    padding:       12px;
    background:    #1976d2;
    color:         #fff;
    border:        none;
    border-radius: 8px;
    font-size:     15px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.1s;
}

.city-modal__submit:hover {
    background: #1565c0;
}

.city-modal__submit:active {
    transform: scale(0.98);
}

/* ─── Блокировка скролла страницы ────────────────────────── */
body.city-modal-open {
    overflow: hidden;
}