/*
 * Пошук у хедері (inc/twins-header-search.php). Підключається лише з
 * увімкненим вимикачем. Правила поля FiboSearch обмежені батьком .ths —
 * поле в каталозі (стиль pirx, style.css:17–116) не зачіпається.
 *
 * Шари: хедер 10, #bag 10, #message 11 → затемнення 12, панель 13 (над
 * хедером і #message). Підказки FiboSearch — у body, z-index плагіна
 * 999999999 — над панеллю.
 */

/* Іконка в хедері — як кабінет і обране (main.css: .header_login). */

.header_search {
  --size: clamp(20px, 2vw, 28px);
  display: block;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  padding: 0;
  cursor: pointer;
}

.header_search svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Панель. */

.ths {
  --ths-top: 0px;
  --ths-pad: 30px;
  --ths-row: clamp(50px, 3.2vw, 61px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  padding-right: var(--scroll, 0px);
  visibility: hidden;
  pointer-events: none;
}

.ths.active {
  visibility: visible;
  pointer-events: auto;
}

.ths_veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black);
  opacity: 0;
  transition: opacity .43s;
}

.ths.active .ths_veil {
  opacity: .3;
}

/* .bone дає ті самі поля й ширину вмісту, що й у хедера; правий край панелі
   прив'язаний до краю вмісту. padding-right у .ths — та сама компенсація, що
   html.hidden (padding-right: var(--scroll)): панель не стрибає зі смугою прокрутки. */
.ths_bone {
  position: relative;
  height: 0;
}

.ths_panel {
  position: absolute;
  top: var(--ths-top);
  right: calc(var(--bone) + clamp(70px, 6.9vw, 132px));
  z-index: 1;
  width: calc(362px + 12.2vw);
  max-width: calc(100vw - var(--bone) * 2);
  padding: 0 var(--ths-pad) 20px;
  background-color: var(--bg);
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition: opacity .3s, transform .3s;
}

.ths.active .ths_panel {
  opacity: 1;
  transform: none;
}

.ths_bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.82vw, 35px);
  height: var(--ths-row);
}

/* Хрестик: видима частина ~14 px на 1200, ~18 px на 1920 і мобільному (макет). */
.ths_close {
  --size: clamp(21px, 1.4vw, 27px);
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  padding: 0;
  cursor: pointer;
}

/* Хрест у SVG займає половину поля 24×24 — збільшуємо до 2/3 */
.ths_close svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.333);
}

/* Поле FiboSearch у панелі. */

.ths .dgwt-wcas-search-wrapp {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  margin: 0;
}

.ths .dgwt-wcas-search-form,
.ths .dgwt-wcas-sf-wrapp {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
}

.ths .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(2px, .3vw, 6px) calc(var(--ths-icon) + 10px) 0 0;
  font: inherit;
  font-size: var(--body);
  line-height: 1.2;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--black);
  background: none;
  border: 0 none;
  border-bottom: 1px solid var(--gray);
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .43s;
}

.ths .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:hover,
.ths .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus {
  background: none;
  border-color: var(--black);
  box-shadow: none;
}

.ths .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
  color: var(--black);
  font-style: normal;
  font-weight: inherit;
  opacity: .6;
}

.ths .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-search-cancel-button,
.ths .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Лупа праворуч на лінії (у плагіна без кнопки submit — ліворуч усередині поля). */
.ths .dgwt-wcas-search-wrapp {
  --ths-icon: clamp(18px, 1.05vw, 20px);
}

.ths .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier {
  top: clamp(2px, .3vw, 6px);
  bottom: 0;
  left: auto;
  right: 0;
  width: var(--ths-icon);
  max-width: none;
  height: var(--ths-icon);
  max-height: none;
  margin: auto 0;
  opacity: 1;
  fill: var(--black);
  cursor: pointer;
}

/* Індикатор завантаження плагіна — на місці лупи, поверх неї; хрестик
   очищення плагіна не показуємо (є хрестик панелі й Esc). */
.ths .dgwt-wcas-search-wrapp .dgwt-wcas-preloader {
  top: clamp(2px, .3vw, 6px);
  bottom: 0;
  right: 0 !important;
  width: var(--ths-icon);
  height: var(--ths-icon);
  margin: auto 0;
  background-color: var(--bg);
  background-position: center;
  background-size: contain;
  z-index: 1;
}

.ths .dgwt-wcas-search-wrapp .dgwt-wcas-preloader:empty:not(.dgwt-wcas-inner-preloader),
.ths .dgwt-wcas-search-wrapp .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader) {
  display: none;
}

.ths .dgwt-wcas-voice-search {
  display: none;
}

/* «Популярні»: назви товарів, довгі — переносяться. */

.ths_popular {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: clamp(24px, 1.5vw, 29px) 0 6px;
  padding: 0;
  list-style: none;
}

.ths_popular a {
  display: block;
  font-size: var(--body);
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: color .3s;
}

.ths_panel.ths--typed .ths_popular {
  display: none;
}

/* Підказки FiboSearch, поки відкрита панель: від лівого до правого краю
   панелі (JS; плагін ставить left = край поля inline, тому !important),
   відступи = відступ поля від краю панелі — рядки на одній лінії з полем.
   Фон панелі, висота — до низу видимої області (JS, з урахуванням клавіатури). */

html.twins-hs-open .dgwt-wcas-suggestions-wrapp {
  box-sizing: border-box;
  left: var(--ths-sl, auto) !important;
  width: var(--ths-sw, auto) !important;
  max-height: var(--ths-sh, 70vh) !important;
  padding-left: var(--ths-sp, 0px);
  padding-right: var(--ths-sp, 0px);
  overflow-y: auto;
  background-color: var(--bg);
  border: 0 none;
}

@media (hover: hover) {
  .ths_popular a:hover {
    color: var(--gray);
  }

  .ths_close:hover {
    opacity: .6;
  }
}

@media only screen and (max-width: 1199px) {
  .ths_panel {
    width: calc(245px + 22vw);
  }
}

/* 768–839: з п'ятою іконкою пункти меню переносяться (768–783) або впритул до
   іконок. Тут — крок іконок макета 768–1199 (34 px): права група на 14 px
   вужча, ніж без пошуку. Крок на решті ширин — після відповіді дизайнера. */
@media only screen and (min-width: 768px) and (max-width: 839px) {
  .header_right {
    grid-gap: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .header_search {
    --size: 30px;
  }

  .ths {
    --ths-pad: 20px;
  }

  .ths .dgwt-wcas-search-wrapp {
    --ths-icon: 22px;
  }

  .ths_close {
    --size: 26px;
  }

  .ths_bone {
    padding: 0;
  }

  .ths_panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  /* iPhone збільшує сторінку при фокусі в поле з шрифтом < 16px (у макеті ~11–12px).
     !important — проти style.css (.dgwt-wcas-sf-wrapp input { font-size: var(--body) !important }). */
  .ths .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ths_veil,
  .ths_panel {
    transition: none;
  }
}