/*
 * Оформление контролов компонента(ов) ms.
 *
 * СГЕНЕРИРОВАНО scripts/extract-component-styles.py из системной theme.css.
 * Правки здесь переживут только до следующей перегенерации — адаптацию под
 * исходная тема держите в отдельном файле, который подключается следом.
 *
 * Витрина отключает системную тему целиком (D-0007), иначе поверх исходной темы ложится вторая дизайн-система. Но раскладку компонента даёт его
 * собственный css, а вид кнопок/полей/переключателей — тема. Поэтому берём
 * из неё ровно правила с селекторами, содержащими один из префиксов: `ms-*`.
 */

.ms-form{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--co-line,#e3e5ea);border-radius:0;padding:6px 6px 6px 14px;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.ms-form:focus-within{border-color:var(--mc-acc,var(--acc));box-shadow:0 4px 18px rgba(var(--brand-shadow-rgb),.16)}
.ms-ico{color:#9aa0ad;flex:0 0 auto}
.ms-input{flex:1 1 auto;min-width:0;min-height:44px;border:0;outline:0;font:inherit;font-size:15px;background:none;padding:10px 0}
.ms-go{flex:0 0 auto;border:0;border-radius:var(--brand-radius-ctl);background:var(--grad);color:#fff;font-weight:600;padding:9px 18px;cursor:pointer;white-space:nowrap}
.ms-panel{position:absolute;z-index:50;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:var(--brand-radius-lg);box-shadow:0 18px 50px rgba(15,18,28,.16),0 2px 8px rgba(15,18,28,.06);padding:6px;display:block;max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-6px) scale(.99);transform-origin:top;transition:opacity .18s,transform .18s,height .24s cubic-bezier(.4,0,.2,1);pointer-events:none}
.ms-panel.ms-open{opacity:1;transform:none;pointer-events:auto}
.ms-panel::-webkit-scrollbar{width:8px}
.ms-panel::-webkit-scrollbar-thumb{background:#e0e2e8;border-radius:0}
.ms-top{border-top:1px solid #f1f2f5;margin-top:4px;padding-top:4px}
.ms-top-h{font-size:11px;color:#9aa0ad;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 4px}
.ms-row{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:0;text-decoration:none;color:#1a1d27;animation:ms-in .24s ease both}
.ms-row:hover,.ms-row.on{background:color-mix(in srgb,var(--mc-acc,var(--acc)) 9%,transparent)}
.ms-row-pic{width:34px;height:34px;border-radius:0;background:#eef0f4 center/cover no-repeat;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(15,18,28,.05)}
.ms-row-pic img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.ms-row:nth-child(2){animation-delay:28ms}
.ms-row:nth-child(3){animation-delay:56ms}
.ms-row:nth-child(4){animation-delay:84ms}
.ms-row:nth-child(5){animation-delay:112ms}
.ms-row:nth-child(6){animation-delay:140ms}
.ms-row-name{flex:1;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-row-price{font-weight:700;font-size:13px;color:var(--mc-acc,var(--acc));white-space:nowrap}
.ms-empty{padding:18px;text-align:center;color:#9aa0ad;font-size:14px}
.ms-state{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 16px;color:#9aa0ad;font-size:14px}
.ms-spin{width:16px;height:16px;border-radius:50%;border:2px solid #e4e6ec;border-top-color:var(--acc);animation:ms-spin .7s linear infinite;flex:0 0 auto}
.co-items-wrap{position:relative}
@media(max-width:860px) {
.m-top-search .ms-form{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden;box-shadow:none;
    transition:max-height .3s ease,opacity .25s ease,padding .3s ease,border-width .3s ease}
.m-top.m-search-open .m-top-search .ms-form{max-height:58px;opacity:1;padding-top:6px;padding-bottom:6px;border-width:1.5px}
}

/*
 * Адаптация под исходную тему (переживёт перегенерацию хуже остального файла, но
 * тут не про вид системного компонента, а про несовпадение с источником):
 * системная тема даёт `.ms-form`/`.ms-panel` карточный вид (скругления,
 * рамка+тень на фокусе, зазор перед панелью) — на sofa-mebel.com сам
 * `.search-input`/`.title-search-result` внутри `.inline-search-block.fixed`
 * плоские (border/border-radius: 0, `.title-search-result` без зазора —
 * margin: -2px 0 0, лишь едва заметная тень `0 1px 1px rgba(0,0,0,.1)` у
 * списка результатов). Живая сверка sofa-mebel.com, ввод "стол".
 */
.ms-form{border-radius:0;border:0;box-shadow:none}
.ms-form:focus-within{border-color:transparent;box-shadow:none}
.ms-panel{top:100%;border-radius:0;box-shadow:0 1px 1px rgba(0,0,0,.1)}

/*
 * Пропорции и кнопка закрытия — тоже сверены живым DOM с sofa-mebel.com
 * (открыт оверлей, `.inline-search-block.fixed.big`):
 * 1) на источнике `.search-input{font-size:28px;height:132px;padding:0 200px
 *    0 25px}` — крупный, просторный инпут на всю высоту 132px-бара. Наш `.ms-*`
 *    был в масштабе обычного инлайн-виджета (15px/44px) — визуально мельче
 *    и теснее, чем у источника. Дотягиваем масштаб под `.big`.
 * 2) `.inline-search-hide` (крестик) наследует позиционирование оригинала
 *    (`.close-block .close-icons{left:50%;top:50%;...}`), рассчитанное на
 *    `.close-block{display:block}` — оно требует предка `.search`, которого
 *    у нашей разметки нет (`display` остаётся `inline`, коробка схлопывается
 *    в 0×0), из-за чего `left:50%/top:50%` центруется не в кнопке, а во всём
 *    `.inline-search-block` (крестик уезжал в середину бара). Задаём кнопке
 *    закрытия свою, независимую от `.search`-обёртки геометрию.
 */
.inline-search-block.fixed.big .search-wrapper{position:relative}
.inline-search-block.fixed.big .ms-form{padding:26px 76px 26px 25px}
.inline-search-block.fixed.big .ms-ico svg{width:24px;height:24px}
.inline-search-block.fixed.big .ms-input{font-size:26px;min-height:60px}
.inline-search-block.fixed.big .ms-go{font-size:16px;padding:14px 28px}
.inline-search-block.fixed.big .close-block.inline-search-hide{
  position:absolute;top:50%;right:25px;width:34px;height:34px;margin:0;
  transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.inline-search-block.fixed.big .close-block .close-icons{position:static;margin:0;width:16px;height:16px;min-width:16px;min-height:16px}
/*
 * Ховер крестика. Тема (themes/6/theme.css) уже описывает штатный —
 * `.inline-search-block.fixed.big .search .close-block:hover .close-icons
 * {background-color:#d82044}`: иконка (это маска на цветной подложке)
 * краснеет фирменным. Но селектор требует предка `.search` — обёртки
 * исходной формы поиска, которой в нашей разметке нет (там компонент ядра),
 * поэтому правило молчало. Раньше я подменил его серым кругом
 * (`border-radius:50%` + `background:rgba(0,0,0,.06)`) — на полностью
 * плоском сайте это и читалось как «странный» ховер. Возвращаем ровно
 * оригинальное поведение, своим селектором и с плавным переходом.
 */
.inline-search-block.fixed.big .close-block .close-icons{transition:background-color .16s ease}
.inline-search-block.fixed.big .close-block:hover .close-icons{background-color:#d82044}

/*
 * Плоские скругления: сайт полностью прямоугольный (--brand-radius: 0 в
 * sofa-component-tokens.css), а системная тема даёт строкам саджеста и их
 * миниатюрам карточный вид (10px/8px). Сверка с оригиналом: список результатов на
 * sofa-mebel.com — без единого скругления.
 */
.ms-row,.ms-row-pic{border-radius:0}

/*
 * Состояния саджеста (D-0055). Раньше тут были CSS-костыли (`:has()`-скрытие
 * «Популярного» и `nth-child(n+7)`-лимит) — их сняли: поведение теперь чинится
 * по-настоящему, в JS (`site/assets/muse-search.js` — проектное перекрытие
 * системного ассета, равное ветке ядра `search-suggest-ux`; см. шапку того
 * файла и CORE_FEEDBACK п.12). Здесь остаётся только ВИД: системная тема,
 * откуда обычно приезжают `.ms-*`, на витрине отключена целиком (D-0007).
 */
.ms-top{transition:opacity .15s ease}
.ms-top.ms-top-out{opacity:0;pointer-events:none}  /* гаснет, ещё занимая место */
.ms-top.ms-top-off{display:none}                   /* и только потом выпадает из потока */
/* «идёт запрос» поверх уже показанных подсказок — мягкое приглушение вместо
   схлопывания списка в спиннер (иначе панель прыгает на каждый символ) */
.ms-panel.ms-busy .ms-list{opacity:.55;transition:opacity .16s}
.ms-panel.ms-busy{cursor:progress}
/* повторные выдачи — без каскада появления строк: перепроигрывание stagger
   на каждый введённый символ читается как дёрганье */
.ms-panel.ms-live .ms-row{animation:none}
/* «Все результаты» — футер панели, путь к полной выдаче /search.
   `[hidden]` объявляем ЯВНО: авторское `display:block` сильнее UA-правила
   `[hidden]{display:none}`, и спрятанная кнопка иначе остаётся пустой полосой
   со своим border-top — это была вторая полоска-разделитель над «Популярным»
   и та же причина, по которой кнопка «не исчезала» после очистки запроса. */
.ms-all[hidden]{display:none}
.ms-all{display:block;padding:13px 10px;margin-top:4px;border-top:1px solid #f1f2f5;
  text-align:center;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;text-decoration:none;color:#bd1c3c;transition:background .16s}
.ms-all:hover,.ms-all.on{background:rgba(189,28,60,.07)}
@media (prefers-reduced-motion:reduce){
  .ms-panel{transition:opacity .01ms}
  .ms-row{animation:none}
}

/*
 * Белая подложка панели на всю ширину экрана — контент остаётся в колонке
 * инпута. Сам блок растягивать нельзя (уедут строки), псевдоэлементом внутри
 * нельзя (панель скроллится и режет 100vw-подложку по своему боксу) —
 * подложку рисует отдельный элемент-«бликер» `.sofa-suggest-bleed`,
 * который синхронизирует высоту с панелью (см. скрипт в shell.php).
 */
.inline-search-block.fixed.big .search-wrapper .sofa-suggest-bleed{
  position:absolute;z-index:49;left:50%;width:100vw;margin-left:-50vw;
  background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1);pointer-events:none;
  opacity:0;transition:opacity .18s;
}
.inline-search-block.fixed.big .search-wrapper .sofa-suggest-bleed.on{opacity:1}
/* тень несёт подложка — у панели своя дала бы вертикальные швы на белом.
   padding-bottom крупнее штатных 6px: у последней строки «Популярного» до
   нижней границы панели не хватало воздуха. */
.inline-search-block.fixed.big .ms-panel{box-shadow:none;padding:6px 6px 14px}