/* Пошук: кнопка в шапці, накладка, сторінка результатів.
   Кольори беруться зі змінних теми, а власних не заводимо: плагін має
   виглядати частиною сайту, на який його поставили. */

.us-open{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--color-text, #2b2e33);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.us-open:hover{ background: var(--color-surface, #f4f6f8); color: var(--color-blue-dark, #14528f); }
.us-open:focus-visible{ outline: 3px solid var(--color-blue, #2f7fd0); outline-offset: 2px; }
.us-open--plain{ width: auto; padding: 0 10px; font-weight: 600; text-decoration: none; }

/* ⚠️ Накладка прикріплена до верху, а не по центру: список підказок
   росте вниз, і центрування змушувало б його стрибати на кожну літеру. */
.us-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 12, 16, .55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 16px 16px;
}
.us-overlay[hidden]{ display: none; }
.us-lock{ overflow: hidden; }

.us-panel{
  width: min(680px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(10, 12, 16, .45);
  overflow: hidden;
}
.us-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--color-border, #e3e7ec);
}
.us-bar__ico{ flex: none; color: var(--color-text-secondary, #5b6068); }
.us-input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 1.05rem;
  background: none;
  color: var(--color-text, #2b2e33);
}
.us-input::-webkit-search-cancel-button{ display: none; }
.us-close{
  flex: none;
  width: 32px; height: 32px;
  border: 0; border-radius: 8px;
  background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
  color: var(--color-text-secondary, #5b6068);
}
.us-close:hover{ background: var(--color-surface, #f4f6f8); }

/* ⚠️ КНОПКА «SEARCH» У НАКЛАДЦІ. Додана після зауваження власника:
   поле без кнопки не читається як пошук, і людина не розуміє, що
   результат уже є. Кнопка веде на повну видачу, а не дублює підказки. */
.us-go{
  flex: none;
  padding: 9px 16px;
  font-size: .94rem;
  white-space: nowrap;
}

/* Голосовий ввід. Кнопки фізично немає там, де немає SpeechRecognition
   (див. search.js), тому правило нікого не обманює порожнім місцем. */
.us-mic{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 0; border-radius: 9px;
  background: none; cursor: pointer;
  color: var(--color-text-secondary, #5b6068);
  transition: background .15s ease, color .15s ease;
}
.us-mic:hover{ background: var(--color-surface, #f4f6f8); color: var(--color-blue-dark, #14528f); }
.us-mic:focus-visible{ outline: 3px solid var(--color-blue, #2f7fd0); outline-offset: 2px; }

/* Стан «слухаю»: колір плюс пульсація. Колір сам по собі не підходить,
   бо це єдина ознака стану, а покладатись лише на колір не можна. */
.us-mic.is-live{
  background: var(--color-orange, #ef7f1a);
  color: #fff;
  animation: us-pulse 1.3s ease-in-out infinite;
}
@keyframes us-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(239,127,26,.55); }
  50%     { box-shadow: 0 0 0 7px rgba(239,127,26,0); }
}
@media (prefers-reduced-motion: reduce){
  .us-mic{ transition: none; }
  .us-mic.is-live{ animation: none; }
}

/* Рядок-пояснення: «результати з являються під час набору». Зникає,
   щойно результати справді з явились - далі він тільки забирає рядок. */
.us-hint{
  margin: 0;
  padding: 9px 16px 2px;
  font-size: .82rem;
  color: var(--color-text-secondary, #5b6068);
}
.us-hint[hidden]{ display: none; }

.us-status{
  margin: 0;
  padding: 9px 16px;
  font-size: .82rem;
  color: var(--color-text-secondary, #5b6068);
}
.us-status:empty{ display: none; }

.us-list{
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  max-height: min(56vh, 520px);
  overflow-y: auto;
}
.us-item a,
.us-all a{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
}
.us-item a:hover,
.us-item[aria-selected="true"] a{ background: var(--color-blue-light, #eaf2fb); }
.us-thumb{
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-border, #e3e7ec);
}
.us-item__body{ min-width: 0; }
.us-kind{
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-blue-dark, #14528f);
}
.us-title{
  display: block;
  font-weight: 600;
  line-height: 1.3;
  /* Довгий <title> сторінки не має розривати рядок підказки. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.us-text{
  display: block;
  font-size: .84rem;
  color: var(--color-text-secondary, #5b6068);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.us-all a{
  justify-content: center;
  font-weight: 600;
  color: var(--color-blue-dark, #14528f);
  border-top: 1px solid var(--color-border, #e3e7ec);
  margin-top: 4px;
}

/* ── сторінка /search/ ── */
.us-page-form{ display: flex; gap: 10px; margin: 0 0 22px; flex-wrap: wrap; }
.us-page-form input{
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  border: 1.5px solid var(--color-border, #e3e7ec);
  border-radius: 10px;
}
.us-page-form input:focus-visible{ outline: 3px solid var(--color-blue, #2f7fd0); outline-offset: 1px; }
.us-hint, .us-count{ color: var(--color-text-secondary, #5b6068); margin: 0 0 18px; }
.us-results{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-res a{
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--color-border, #e3e7ec);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.us-res a:hover{ border-color: var(--color-blue, #2f7fd0); }
.us-res .us-title{ white-space: normal; margin: 2px 0 4px; }
.us-res .us-text{ white-space: normal; }

@media (max-width: 560px){
  .us-overlay{ padding: 0; }
  .us-panel{ width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  .us-list{ max-height: none; flex: 1; }
}
@media (prefers-reduced-motion: reduce){
  .us-open{ transition: none; }
}

/* ⚠️ НА ТЕЛЕФОНІ РЯД КЕРУВАННЯ ПЕРЕНОСИТЬСЯ.
   Виміряно на 375px: поле, мікрофон, «Search» і хрестик в один ряд
   лишали полю 96px, тобто півтора слова. Тому поле займає весь перший
   рядок, а кнопки стають під ним. */
@media (max-width: 560px){
  .us-bar{ flex-wrap: wrap; }
  .us-input{ flex: 1 1 100%; order: 1; }
  .us-bar__ico{ order: 0; }
  .us-close{ order: 0; margin-left: auto; }
  .us-mic{ order: 2; }
  .us-go{ order: 3; margin-left: auto; }
}

/* ⚠️ ЦІ КЛАСИ ВИВОДИЛИСЬ У РОЗМІТКУ БЕЗ ЖОДНОГО СТИЛЮ.
   У 0.4.0 я додав пагінатор і блок нульового результату в PHP, але
   CSS не написав узагалі — шість класів із сімох мали 0 правил. На
   сторінці це виглядало як «Page 1 of 3Next →» одним злиплим рядком.
   Якщо додається новий клас у class-upcheg-search-ui.php — стиль сюди. */
.us-pager{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 28px 0 4px;
}
.us-pager__prev,
.us-pager__next{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-border, #e3e7ec);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.us-pager__prev:hover,
.us-pager__next:hover{
  border-color: var(--color-blue, #2f7fd0);
  color: var(--color-blue, #2f7fd0);
}
.us-pager__prev:focus-visible,
.us-pager__next:focus-visible{
  outline: 3px solid var(--color-blue, #2f7fd0);
  outline-offset: 2px;
}
.us-pager__pos{
  color: var(--color-text-secondary, #5b6068);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.us-empty-help{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 62ch;
}
.us-empty-help li{
  padding: 14px 16px;
  border: 1px solid var(--color-border, #e3e7ec);
  border-radius: 12px;
  background: #fff;
}
.us-empty-help a{ color: var(--color-blue, #2f7fd0); }