/**
 * SelectRegion — child-попап выбора региона (Figma 185:41360).
 * Структура «заголовок + поиск + плоский список» собрана в child-теме
 * (popups/popup-select-region.php), поведение — js/figma/region-select.js.
 * Опирается на дизайн-токены (css/figma/tokens.css, подключены глобально).
 */

.popup-select-region {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-blackout, rgba(29, 32, 35, 0.4));
    backdrop-filter: blur(var(--blur-backdrop, 2px));
    -webkit-backdrop-filter: blur(var(--blur-backdrop, 2px));
    z-index: 999999 !important;
    font-family: var(--font-family);
    color: var(--text-primary);
    box-sizing: border-box;
}
.popup-select-region.is-open { display: flex; align-items: center; justify-content: center; padding: var(--space-16); }
.popup-select-region * { box-sizing: border-box; }

/* Карточка попапа: по макету desktop 794, pad 20/40/16 */
.popup-select-region__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
    max-width: 794px;
    max-height: calc(100vh - 32px);
    padding: var(--space-20) var(--space-40) var(--space-16);
    background-color: var(--surface-page);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevation-2);
    overflow: hidden;
}

/* Шапка: заголовок H3 + крестик 24 */
.popup-select-region__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
}
.popup-select-region__title {
    margin: 0;
    font-weight: var(--fw-medium);
    font-size: var(--font-h3-size);
    line-height: var(--font-h3-lh);
    color: var(--text-primary);
}
.popup-select-region__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color .15s ease;
}
.popup-select-region__close:hover { color: var(--text-secondary); }
.popup-select-region__close svg { width: 14px; height: 14px; }

/* Поиск города — стиль Input (surface/muted, r16, 52px) */
.popup-select-region__input {
    width: 100%;
    height: 52px;
    padding: 0 var(--space-16);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-lh);
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.popup-select-region__input::placeholder { color: var(--text-secondary); }
.popup-select-region__input:hover { background: var(--input-hover); }
.popup-select-region__input:focus { border-color: var(--focus-border); }

/* Список городов — светло-серый контейнер (DropDown), элементы r16/p8 */
.popup-select-region__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-8);
    background: var(--button-light-gray);
    border-radius: var(--radius-lg);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 320px;
    /* Scrollbar по макету: тонкая линия трека 2px по центру, ползунок 4px */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
.popup-select-region__list::-webkit-scrollbar { width: 4px; }
.popup-select-region__list::-webkit-scrollbar-track {
    background: linear-gradient(to right, transparent calc(50% - 1px), var(--scrollbar-track) calc(50% - 1px), var(--scrollbar-track) calc(50% + 1px), transparent calc(50% + 1px));
}
.popup-select-region__list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }

.popup-select-region__item {
    display: block;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-lh);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}
.popup-select-region__item:hover { color: var(--text-primary); background: var(--surface-page); }
/* фикс: display:block выше перебивает атрибут [hidden] — возвращаем скрытие при фильтре поиска */
.popup-select-region__item[hidden] { display: none; }

.popup-select-region__empty {
    padding: var(--space-8);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-lh);
    color: var(--text-tertiary);
}

/* ---- 776 ---- */
@media (max-width: 1200px) {
    .popup-select-region__wrapper { max-width: 776px; }
}

/* ---- mobile 328 (центрированная карточка, как в макете) ---- */
@media (max-width: 800px) {
    .popup-select-region__wrapper {
        max-width: 328px;
        padding: var(--space-20) var(--space-12) var(--space-16);
    }
    .popup-select-region__title { font-size: var(--font-h4-size); line-height: var(--font-h4-lh); }
    .popup-select-region__list { max-height: 60vh; }
}