.header-test__city-button, .header-city-modal {
    display: none
}

@media (max-width: 959.98px) {
    .header-test__city-button {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--gray-200);
        border-radius: 9px;
        background: var(--white);
        color: var(--black-light)
    }

    .header-city-modal {
        position: fixed;
        inset: 0;
        z-index: 100
    }

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

    .header-city-modal__backdrop {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--black-light) 45%, transparent)
    }

    .header-city-modal__dialog {
        position: relative;
        display: flex;
        flex-direction: column;
        width: calc(100% - 32px);
        max-width: 360px;
        max-height: calc(100vh - 48px);
        margin: 24px auto;
        padding: 32px 16px 14px;
        overflow: visible;
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 12px 32px color-mix(in srgb, var(--black-light) 20%, transparent)
    }

    .header-city-modal__dialog h2 {
        margin: 0;
        color: var(--black-light);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.15;
        text-align: center
    }

    .header-city-modal__dialog p {
        margin: 12px 0;
        color: var(--gray-dark);
        font-size: 13px;
        text-align: center
    }

    .header-city-modal__close {
        position: absolute;
        top: -24px;
        right: -24px;
        display: grid;
        place-items: center;
        width: 60px;
        height: 60px;
        padding: 0;
        border: 1px solid var(--gray-200);
        border-radius: 14px;
        background: var(--white);
        color: var(--black-light);
        box-shadow: 0 2px 5px color-mix(in srgb, var(--black-light) 8%, transparent)
    }

    .header-city-modal__search {
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        height: 48px !important;
        padding: 0 16px !important;
        border: 1px solid var(--gray-200) !important;
        border-radius: 10px !important;
        background: var(--white) !important;
        outline: 0 !important;
        color: var(--black-light);
        font-size: 15px
    }

    .header-city-modal__search:focus {
        border-color: var(--blue-middle) !important
    }

    .header-city-modal__list {
        flex: 1;
        min-height: 140px;
        margin: 6px 0 14px;
        padding: 4px;
        overflow-y: auto;
        list-style: none;
        border: 1px solid var(--gray-200);
        border-radius: 8px
    }

    .header-city-modal__list button {
        width: 100%;
        padding: 9px 8px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--black-light);
        font-size: 13px;
        text-align: left;
        cursor: pointer
    }

    .header-city-modal__list button.is-selected, .header-city-modal__list button:hover {
        background: var(--gray-300)
    }

    .header-city-modal__list li.is-hidden {
        display: none
    }

    .header-city-modal__submit {
        width: 100%;
        min-height: 44px
    }

    .header-city-modal__submit:disabled {
        opacity: .45;
        cursor: default
    }

    body.header-city-modal-open {
        overflow: hidden
    }
}