/* Ported from bitrix/templates/aspro-lite/components/arturgolubev/search.title/corp_catalog/style.css
 * so the bp:meilisearch.search corp_catalog template renders 1-to-1 with the
 * legacy dropdown even when that component isn't loaded on the page.
 * Some rules were adjusted to anchor on this template's dropdown and to respect
 * the `hidden` attribute our JS toggles. Keep in sync if the Aspro upstream
 * styles are updated. */

#title-search-catlog .search-wrapper {
  position: relative;
}

/* Form row layout — the aspro-lite theme defines these inside the
   arturgolubev/search.title stylesheet, which only loads when that component
   is on the page. Port the rules here so our form row is not stacked. */
#title-search-catlog .search-button-div {
  display: flex;
  align-items: center;
}

#title-search-catlog .btn-clear-search {
  background: var(--darkgrey_bg_black);
  padding: 9px;
  width: 30px;
  height: 30px;
  line-height: 0;
  border-width: 0;
  margin-right: 20px;
  flex-shrink: 0;
}

#title-search-catlog .btn-clear-search svg {
  width: 12px;
  height: 12px;
}

#title-search-catlog .btn-clear-search[hidden] {
  display: none;
}

/* Price cell matches the reference markup
   (.price.color_222 > .line-block > .line-block__item > .price__new > .price__new-val). */
#title-search-catlog .title-search-price .price {
  font-weight: 500;
}
#title-search-catlog .title-search-price .price__new-val {
  font-weight: 700;
  color: #222;
}

#title-search-catlog .search-wrapper .bx_item_block {
  position: relative;
}

/* Orange search button when the input is focused — reference behaviour from
   arturgolubev/search.title/corp_catalog/style.css (.search:focus-within). */
#title-search-catlog .search:focus-within .btn-search {
  background-color: var(--theme-base-color);
}
#title-search-catlog .search:focus-within .btn-search svg {
  color: #fff;
  stroke: #fff;
}
#title-search-catlog .search:focus-within .btn-search:hover {
  opacity: 1;
}

#title-search-catlog .inline-search-block {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 100%;
  z-index: 1000;
  background: #fff;
  background: var(--black_bg_black);
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
}

#title-search-catlog .inline-search-block[hidden] {
  display: none !important;
}

#title-search-catlog .searche-result__all {
  padding: 12px 8px;
  background-color: var(--dark_grey_bg);
}

#title-search-catlog .searche-result__item-text {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

#title-search-catlog .searche-result__item-text .title-search-name {
  flex: 1;
}

#title-search-catlog .searche-result__item-text .title-search-brand {
  text-align: center;
}

#title-search-catlog .searche-result__item-text .title-search-brand,
#title-search-catlog .searche-result__item-text .title-search-sku,
#title-search-catlog .searche-result__item-text .title-search-price,
#title-search-catlog .searche-result__item-text .searche-result__item-image,
#title-search-catlog .searche-result__item-text .title-search-city {
  width: 120px;
}

#title-search-catlog .searche-result__item-text .title-search-brand,
#title-search-catlog .searche-result__item-text .title-search-sku,
#title-search-catlog .searche-result__item-text .title-search-city {
  color: var(--light_text);
}

#title-search-catlog .title-search-city-wrap {
  border: 1px solid;
  padding: 4px;
  border-radius: var(--border-radius);
  text-align: center;
  line-height: 100%;
}

#title-search-catlog .bx_item_block.searche-result__item.dark_link {
  background-color: #ffffff;
}

#title-search-catlog .bx_item_block.searche-result__item.dark_link:nth-child(n+2) {
  margin-top: 4px;
}

#title-search-catlog .title-search-price {
  transform: none !important;
}

#title-search-catlog .searche-result__item-image {
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: transparent;
}

#title-search-catlog .searche-result {
  background-color: #ffffff;
  background-color: var(--dark_grey_bg);
  max-height: 350px;
  overflow: auto;
  padding: 12px 8px 0px;
}

#title-search-catlog .searche-result__item {
  display: block;
  padding: 9px 12px;
}

#title-search-catlog .searche-result__item:hover {
  background: #F4F4F4;
  background: var(--darkgrey_bg_black);
}

#title-search-catlog .searche-result__item-image img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

#title-search-catlog .searche-result__inner {
  align-items: center;
}

#title-search-catlog .bp-meili .searche-result__empty,
#title-search-catlog .bp-meili .searche-result__error {
  padding: 12px 16px;
  color: var(--light_text, #999);
  font-size: 14px;
}

#title-search-catlog .bp-meili .searche-result__error {
  color: #c00;
}

#title-search-catlog .bp-meili .btn-clear-search[hidden] {
  display: none;
}

#title-search-catlog .all_result_title {
  font-weight: 600;
}

/* Captcha host — give the Yandex SmartCaptcha widget breathing room so its
 * rounded corners and "?" hint button don't sit flush against the dropdown
 * edges. */
#title-search-catlog .bp-meili-captcha {
  padding: 0 14px 12px;
  height: 116px;
  box-sizing: border-box;
  background-color: var(--dark_grey_bg);
}

/* Виджет Yandex SmartCaptcha имеет min-width: 300px и не влезает в дропдаун
 * на узких экранах (<360px). Убираем боковые паддинги и слегка сжимаем
 * виджет через transform:scale, корректируя высоту контейнера. */
@media (max-width: 359px) {
  #title-search-catlog .bp-meili-captcha {
    padding: 0 0 4px;
    height: 96px;
    display: flex;
    justify-content: center;
  }
  #title-search-catlog .bp-meili-captcha > div {
    transform: scale(0.90);
    transform-origin: top center;
  }
}

@media (max-width: 991px) {
  #title-search-catlog .searche-result__item-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  #title-search-catlog .searche-result__item-text .title-search-name {
    flex: none;
    width: 100%;
  }
  #title-search-catlog .searche-result__item-text .title-search-sku,
  #title-search-catlog .searche-result__item-text .title-search-price,
  #title-search-catlog .searche-result__item-text .searche-result__item-image,
  #title-search-catlog .searche-result__item-text .title-search-city {
    width: auto;
  }
  #title-search-catlog .searche-result__item-text .searche-result__item-image {
    display: none;
  }
  #title-search-catlog .searche-result__item-text .title-search-city-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  #title-search-catlog .searche-result__item-text .title-search-name {
    order: 1;
    line-height: 120%;
  }
  #title-search-catlog .searche-result__item-text .title-search-sku,
  #title-search-catlog .searche-result__item-text .title-search-price {
    order: 2;
  }
  #title-search-catlog .searche-result__item-text .searche-result__item-image,
  #title-search-catlog .searche-result__item-text .title-search-city {
    order: 3;
    width: 100%;
  }
  #title-search-catlog .searche-result__item-text .title-search-city-wrap {
    justify-content: center;
  }
  #title-search-catlog .searche-result__item-text .title-search-brand {
    width: 100%;
    text-align: right;
    padding-right: 4px;
  }
}