/* ==========================================================================
   ВЫДАЧА УМНОГО ПОИСКА (arturgolubev:search.title) — реstyling под общую
   дизайн-систему сайта.
   --------------------------------------------------------------------------
   Компонент подключает собственный style.css (в обоих шаблонах — template1
   в шапке и modal в попапе поиска, эпик 12) автоматически, не через наш
   header.php — трогать эти файлы не нужно и не будем. Разметку и логику
   выдачи компонент рисует сам (result_modifier.php/ajax.php), поэтому здесь
   только визуальные переопределения поверх готовых классов
   .bx_smart_searche/.bx_item_block_*, без правки шаблонов.
   ========================================================================== */

.title-search-result {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.12);
}

.bx_smart_searche,
.bx_smart_searche * {
    font-family: var(--font-body);
}

/* --- Совпадения по категориям ------------------------------------------ */

.bx_smart_searche .bx_item_block_href {
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: background var(--transition-default);
}

.bx_smart_searche .bx_item_block_href:hover {
    background: var(--color-accent-bg);
}

.bx_smart_searche .bx_item_block_href_category_title {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text-s);
}

.bx_smart_searche .bx_item_block_href_category_name {
    color: var(--color-accent);
    font-weight: 600;
    font-size: var(--font-size-text-m);
    text-transform: none;
}

.bx_smart_searche .bx_item_block_hrline {
    border-color: var(--color-border);
}

/* --- Товары -------------------------------------------------------------- */

.bx_smart_searche .bx_item_block_item_image {
    width: 48px;
    height: 48px;
}

.bx_smart_searche .bx_item_block_item_info_wrap.wpic {
    padding-left: 58px;
}

.bx_smart_searche .bx_item_block_item_name,
.bx_smart_searche .bx_item_block_item_simple_name {
    color: var(--color-text-primary);
    font-size: var(--font-size-text-s);
    line-height: 1.4;
}

.bx_smart_searche .bx_item_block_item_text,
.bx_smart_searche .bx_item_block_item_props {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.bx_smart_searche .bx_item_block_item_price .bx_price_new {
    color: var(--color-text-primary);
    font-weight: 700;
}

.bx_smart_searche .bx_item_block_item_price .bx_price_old {
    color: var(--color-placeholder);
}

/* --- Кнопка «Показать все результаты» ------------------------------------ */

.bx_smart_searche .bx_item_block.all_result .all_result_button {
    background: var(--color-accent);
    border-color: var(--color-accent);
    border-radius: var(--radius-base);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.bx_smart_searche .bx_item_block.all_result .all_result_button:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* --- История поиска ------------------------------------------------------ */

.bx-searchtitle-history a,
.bx-searchtitle-popup-history a {
    color: var(--color-accent);
}

.bx-searchtitle-popup-history-title {
    font-family: var(--font-headers);
    color: var(--color-text-primary);
}

/* --- Пусто ---------------------------------------------------------------- */

.bx_smart_no_result_find {
    padding: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

/* --- Страница «Результаты поиска» (/catalog/?q=...) ----------------------
   Заголовок и описание держались на утилитных .h2/.search__description
   из /assets — без него текст просто дефолтный. Даём странице такое же
   оформление, как у остальных заголовков раздела (26px, отступ от крошек
   24px, как у auth/catalog/company). */

.search__title {
    font-family: var(--font-headers);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

@media (max-width: 600px) {
    .search__title { font-size: 22px; }
}

.search__description {
    font-family: var(--font-body);
    font-size: var(--font-size-text-s);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Модалка поиска на телефоне
   --------------------------------------------------------------------------
   Стили стороннего компонента arturgolubev:search.title задают размер поля
   формулой от ширины экрана: calc(16 * var(--width-multiplier)), где
   множитель равен 100vw/1920. Формула рассчитана на монитор 1920 — там
   выходит 16px. На телефоне 390px она даёт 3.25px: подпись в поле поиска
   становится нечитаемой, а лупа рядом с ней кажется огромной. На ноутбуке
   1280px тот же расчёт даёт 10.6px — мелко и там.

   Поэтому задаём размер явно, без формулы, на всех ширинах.
   ========================================================================== */
.bx-searchtitle .bx-input-group .bx-form-control {
    font-size: var(--font-size-text-m);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .bx-searchtitle .bx-input-group .bx-form-control {
        /* Ровно 16px: при меньшем размере Safari на iPhone приближает
           страницу, как только клиент ставит курсор в поле. */
        font-size: 16px;
        padding: 12px 48px 12px 14px;
        height: auto;
    }

    /* Лупу ставим по центру поля: фиксированный отступ сверху был рассчитан
       на прежнюю высоту поля и после правки шрифта уезжал вниз. */
    .modal__search-wrapper .input--with-icon .input__wrapper svg {
        top: 50%;
        transform: translateY(-50%);
        right: 14px;
    }

    /* Название товара в подсказках было заперто в две строки жёсткой высотой
       34px с overflow: hidden — длинные названия вроде «Трансивер Cisco
       SFP-10G-T-X» обрезались на полуслове. Отпускаем высоту. */
    .bx_smart_searche .bx_item_block_item_name {
        height: auto;
        overflow: visible;
        display: block;
        line-height: 1.4;
    }

    .bx_smart_searche .bx_item_block_item_name,
    .bx_smart_searche .bx_item_block_item_simple_name {
        font-size: var(--font-size-text-s);
    }
}


/* Лупа в окне поиска — кнопка отправки, а не картинка. Размер площадки
   44px: меньшую на телефоне трудно попасть пальцем. Позиционируем саму
   кнопку, а лупе внутри снимаем абсолютное положение от общего правила
   .input--with-icon — иначе она уехала бы из кнопки в угол поля. */
.modal__search-wrapper .search__submit {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.modal__search-wrapper .search__submit:hover,
.modal__search-wrapper .search__submit:focus-visible {
    color: var(--color-accent);
}

.modal__search-wrapper .input--with-icon .input__wrapper .search__submit svg {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 24px;
    height: 24px;
    color: inherit;
    pointer-events: none;
}