/* =========================================================
   📄 /styles_core/front/catalog/search.css
   ТОПО / Каталог — блок поиска и активные чипсы
   ШАГ 1:
   - убираем отдельную внешнюю "капсулу"
   - встраиваем поиск в центральную колонку
   - делаем строку компактнее и ближе к образцу
   - счётчик и паспорт объекта пока НЕ трогаем
========================================================= */


/* =========================================================
   SEARCH PANEL
========================================================= */

.catalog-search-panel{
    display:flex;
    flex-direction:column;
    gap:10px;

    padding:0;
    margin:0 0 10px;

    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}


/* =========================================================
   SEARCH FORM
========================================================= */

.catalog-search-form{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
    align-items:center;
}


/* =========================================================
   SEARCH FIELD
========================================================= */

.catalog-search-field{
    position:relative;

    display:flex;
    align-items:center;

    min-width:0;
}

.catalog-search-icon{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;

    color:#b07b44;

    pointer-events:none;
}

.catalog-search-icon svg{
    display:block;

    width:18px;
    height:18px;

    fill:currentColor;
}


/* =========================================================
   SEARCH INPUT
========================================================= */

.catalog-search-input{
    width:100%;
    height:48px;

    padding:0 16px 0 42px;

    background:#ffffff;
    border:1px solid #ddd2c2;
    border-radius:var(--radius-md);
    color:#3f3934;
    font-size:15px;
    line-height:1;

    outline:none;

    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background-color var(--transition-base);
}

.catalog-search-input::placeholder{
    color:#8b8176;
    opacity:1;
}

.catalog-search-input:hover{
    border-color:#d2c2ad;
}

.catalog-search-input:focus{
    border-color:#c9a87a;
    box-shadow:0 0 0 3px rgba(201,168,122,.12);
}

.catalog-search-input::-webkit-search-decoration,
.catalog-search-input::-webkit-search-cancel-button,
.catalog-search-input::-webkit-search-results-button,
.catalog-search-input::-webkit-search-results-decoration{
    display:none;
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.catalog-search-button{
    height:44px;
    min-width:82px;

    padding:0 18px;

    border:1px solid #d8b36f;
    border-radius:var(--radius-md);
    background:#f3dfbb;
    color:#6a4720;

    font-size:14px;
    font-weight:700;
    line-height:1;

    cursor:pointer;

    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.catalog-search-button:hover{
    background:#efcf99;
    border-color:#c99d56;
    color:#4f3212;
    box-shadow:0 2px 8px rgba(120,82,35,.10);
}

.catalog-search-button:active{
    transform:translateY(1px);
}


/* =========================================================
   ACTIVE CHIPS
========================================================= */

.catalog-active-filters{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:0;
}

.catalog-active-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    min-height:28px;
    padding:0 10px;

    background:#f6dfb8;
    border:1px solid #e3c894;
    border-radius:var(--radius-md);

    color:#6b4d23;
    font-size:13px;
    font-weight:600;
    line-height:1;

    text-decoration:none;

    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.catalog-active-chip:hover{
    background:#efcf99;
    border-color:#d8b36f;
    color:#553916;
}

.catalog-active-chip__close{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:12px;
    height:12px;

    margin-left:2px;

    font-size:12px;
    font-weight:700;
    line-height:1;

    opacity:.7;
}

.catalog-active-chip--reset{
    background:#fffaf2;
    border-color:#dfd2bd;
    color:#8a7760;

    font-weight:500;
}

.catalog-active-chip--reset:hover{
    background:#f4ebdc;
    border-color:#cdbb9f;
    color:#6f5b43;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:760px){
    /*
     * Поле и кнопка остаются в одну строку и на мобиле — как на
     * десктопе (см. .catalog-search-form выше). Раньше кнопка
     * переносилась под поле на всю ширину, и подсказки автокомплита
     * (position:absolute, открываются под полем, в раскладке места не
     * занимают) визуально ложились прямо на неё.
     */
    .catalog-search-form{
        grid-template-columns:minmax(0, 1fr) auto;
    }

    .catalog-search-button{
        min-width:0;
        padding:0 12px;
    }

    /*
     * Правая часть поля обычно держит место под крестик очистки (см.
     * .catalog-search-clear ниже), даже когда поле пустое и он скрыт.
     * Пока показан плейсхолдер «Найти топоним» — крестика ещё нет,
     * место под него не нужно: сужаем правый отступ, чтобы плейсхолдер
     * помещался целиком на узких экранах. Как только появляется текст
     * (плейсхолдер пропадает), правило перестаёт действовать и место
     * под крестик возвращается.
     */
    .catalog-search-input:placeholder-shown{
        padding-right:16px;
    }
}

/*
 * Дубликат кнопки-переключателя фильтров (см. catalog_search/render.php) —
 * на десктопе и при развёрнутой панели не нужен: скрыт по умолчанию,
 * hidden-элемент не занимает место в гриде .catalog-search-form ниже.
 * Показывается только при .layout-sidebar.filters-collapsed на мобиле
 * (см. правило после медиа-запроса) — встаёт слева от поля поиска, в
 * тот же ряд, что и само поле с кнопкой «Найти» (без переноса на
 * отдельную строку). Значок наследует базовый паттерн .catalog-filter-panel__hide
 * (filters.css), но здесь стоит вплотную к 48px-полю поиска в одном
 * ряду — 26×26 рядом с ним выглядело мельче и не совпадало по высоте;
 * ниже увеличиваем размер именно для этого места.
 *
 * Только .catalog-v2: словарь/слова/свидетельства/источники переиспользуют
 * те же классы .catalog-search-form/__field/__button в своей собственной
 * разметке (не через renderCatalogSearch()). У словаря и апеллятивов
 * (dictionary.php/appellatives.php) поле поиска обёрнуто в
 * .dictionary-search-stack — вместе с рядом алтайских спецбукв, второй
 * строкой под полем — поэтому у них своя копия кнопки-переключателя
 * встаёт grid-area:field не самому .catalog-search-field (он там не
 * прямой потомок .catalog-search-form, grid-area на нём не сработает),
 * а всей обёртке .dictionary-search-stack (см. ниже).
 */
.catalog-search-filters-toggle{
    display:none;
}

@media (max-width:760px){
    .catalog-v2 .layout-sidebar.filters-collapsed .catalog-search-form{
        grid-template-columns:auto minmax(0, 1fr) auto;
        grid-template-areas:"toggle field button";
    }

    .catalog-v2 .layout-sidebar.filters-collapsed .catalog-search-filters-toggle{
        display:inline-flex;
        grid-area:toggle;

        /* 48px — та же высота, что у .catalog-search-input рядом. */
        width:48px;
        height:48px;

        --topo-icon-size:20px;
    }

    .catalog-v2 .layout-sidebar.filters-collapsed .catalog-search-field{
        grid-area:field;
    }

    .catalog-v2 .layout-sidebar.filters-collapsed .catalog-search-form .dictionary-search-stack{
        grid-area:field;
        min-width:0;
    }

    .catalog-v2 .layout-sidebar.filters-collapsed .catalog-search-button{
        grid-area:button;
    }
}


/* =========================================================
   ТОПО / ОБЩАЯ КОСМЕТИКА ПОИСКА
   ---------------------------------------------------------
   Используется каталогом, словарными статьями и апеллятивами.
========================================================= */

.catalog-search-input{
    padding-right:48px;
    font-size:17px;
    font-weight:500;
    letter-spacing:.025em;
}

.catalog-search-clear{
    position:absolute;
    z-index:3;
    top:50%;
    right:10px;
    transform:translateY(-50%);

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;
    padding:0;

    background:transparent;
    border:0;
    border-radius:50%;

    color:#9a8d80;
    font-family:inherit;
    font-size:22px;
    font-weight:400;
    line-height:1;

    cursor:pointer;
    user-select:none;

    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        opacity var(--transition-base);
}

.catalog-search-clear[hidden]{
    display:none;
}

.catalog-search-clear:hover{
    background:rgba(120,82,35,.08);
    color:#5f5145;
}

.catalog-search-clear:focus-visible{
    outline:2px solid #c9a87a;
    outline-offset:1px;
}

/*
 * На страницах с алтайской клавиатурой справа уже стоит её кнопка.
 * Крестик располагаем перед ней, не создавая отдельной разметки страницы.
 */
.catalog-search-field--altai .catalog-search-clear{
    right:6.7rem;
}

.catalog-search-highlight{
    padding:0 .08em;
    background:#ffe8a3;
    border-radius:3px;
    /*
     * Не color:inherit — фон подсветки светло-жёлтый одинаково в обеих
     * темах, а текст вокруг в тёмной теме белый: белые буквы на
     * светло-жёлтом почти не видны. Цвет фиксированный, тот же, что
     * --color-fg в светлой теме — подсветка не подчиняется теме.
     */
    color:#3D2903;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
}

@media (max-width:760px){
    .catalog-search-field--altai .catalog-search-clear{
        right:6.5rem;
    }
}

@media (max-width:430px){
    .catalog-search-field--altai .catalog-search-clear{
        right:3rem;
    }

    /*
     * Более высокая специфичность нужна, потому что altai_keyboard.css
     * подключается после catalog.css.
     */
    .catalog-search-field--altai .catalog-search-input.catalog-search-input{
        padding-right:5.5rem;
    }
}

/* =========================================================
   CATALOG AUTOCOMPLETE
   ---------------------------------------------------------
   Мгновенные подсказки каталога используют локальный индекс.
   Внешний вид согласован с поиском на общей карте.
========================================================= */

.catalog-search-panel{
    position:relative;
    z-index:30;
}

.catalog-search-field{
    z-index:2;
}

.catalog-search-autocomplete{
    position:absolute;
    z-index:60;
    top:calc(100% + 6px);
    right:0;
    left:0;

    max-height:min(390px, calc(100dvh - 180px));
    overflow:auto;

    border:1px solid rgba(73,66,57,.16);
    border-radius:12px;
    background:rgba(255,250,242,.99);
    box-shadow:0 10px 28px rgba(43,35,27,.18);
    backdrop-filter:blur(6px);
}

.catalog-search-autocomplete[hidden]{
    display:none;
}

.catalog-search-autocomplete__option{
    padding:10px 13px;
    border-bottom:1px solid rgba(102,91,77,.10);
    cursor:pointer;
}

.catalog-search-autocomplete__option:last-of-type{
    border-bottom:0;
}

.catalog-search-autocomplete__option:hover,
.catalog-search-autocomplete__option.is-active{
    background:#edf8f0;
}

.catalog-search-autocomplete__name{
    color:#29241f;
    font-size:15px;
    font-weight:800;
    line-height:1.25;
}

.catalog-search-autocomplete__meta,
.catalog-search-autocomplete__alias{
    margin-top:3px;
    color:#756b60;
    font-size:12px;
    font-weight:600;
    line-height:1.3;
}

.catalog-search-autocomplete__alias{
    color:#866335;
}

.catalog-search-autocomplete mark{
    padding:0 .08em;
    border-radius:3px;
    background:#ffe27a;
    /* Фон подсветки светло-жёлтый в обеих темах — не color:inherit,
       иначе в тёмной теме текст белый и почти не виден на нём. */
    color:#3D2903;
}

.catalog-search-autocomplete__more,
.catalog-search-autocomplete__empty{
    padding:10px 13px;
    color:#746a5e;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
}

.catalog-search-autocomplete__more{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0;
    border:0;
    border-top:1px solid rgba(102,91,77,.10);
    background:#f7f2ea;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.catalog-search-autocomplete__more:hover{
    background:#edf8f0;
}

@media (max-width:760px){
    .catalog-search-autocomplete{
        max-height:min(330px, calc(100dvh - 160px));
    }
}

/* =========================================================
   📄 /styles_core/front/catalog/search.css
   ТОПО / Орда — гидронимы: autocomplete в потоке документа
   ---------------------------------------------------------
   На странице привязки водных объектов подсказки не должны
   перекрывать алфавит и таблицу. Только для hydronym index
   переводим выпадающий блок из absolute в обычный поток.
========================================================= */

.hub[data-catalog-search-index-endpoint^="/site/writer_db/hydronym/"]
.topo-filter-search.catalog-search-field{
    display:block;
}

.hub[data-catalog-search-index-endpoint^="/site/writer_db/hydronym/"]
.catalog-search-autocomplete{
    position:static;
    width:100%;
    margin-top:6px;
}

.hub[data-catalog-search-index-endpoint^="/site/writer_db/hydronym/"]
.topo-filter-search__clear{
    top:17px;
}