/*
 * SearchPage — стили вкладок (Twitch / Все) над таблицей публичных комнат.
 * Остальные правила таблицы — в SearchTable.css.
 */

.search-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.search-tabs .search-tab {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface, rgba(255, 255, 255, 0.04));
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.search-tabs .search-tab svg { display: block; }
.search-tabs .search-tab .globe { font-size: 15px; line-height: 1; }
.search-tabs .search-tab:hover { background: var(--surface-hover, rgba(255, 255, 255, 0.08)); }
.search-tabs .search-tab.active {
  color: var(--text);
  border-color: #9146FF;
  background: rgba(145, 70, 255, 0.12);
}
/* Вкладка «Все» (глобус) в активном состоянии — синяя (как twitch фиолетовая). */
.search-tabs .search-tab[data-tab="globe"].active {
  border-color: var(--accent, #6aa8ff);
  background: rgba(106, 168, 255, 0.14);
}

/* === Поле поиска с крестиком сброса === */
.search-bar {
  position: relative;
  margin-bottom: 10px;
}
.search-bar .search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 34px 9px 12px;     /* справа место под крестик */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface, rgba(255, 255, 255, 0.04));
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.search-bar .search-input::placeholder { color: var(--muted); }
.search-bar .search-input:focus {
  border-color: var(--accent, #6aa8ff);
  background: var(--surface-strong, rgba(255, 255, 255, 0.08));
}
.search-bar .search-clear {
  position: absolute;
  /* центр по вертикали + лёгкий подъём на 1px (глиф × садится чуть ниже центра). */
  top: 50%; right: 8px; transform: translateY(calc(-50% - 1px));
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  border: none; background: none;   /* без овальной подложки */
  color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
}
/* display: inline-flex выше перебивает UA-правило [hidden]{display:none} —
   возвращаем скрытие явно (крестик виден только когда поле не пустое). */
.search-bar .search-clear[hidden] { display: none; }
.search-bar .search-clear:hover { color: var(--text); }

/* === Пагинатор === */
.search-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px;
}
.search-pager .pg-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface, rgba(255, 255, 255, 0.04));
  color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.search-pager .pg-btn:hover:not(:disabled) { background: var(--surface-hover, rgba(255, 255, 255, 0.08)); }
.search-pager .pg-btn:disabled { opacity: 0.4; cursor: default; }
.search-pager .pg-label {
  min-width: 56px; text-align: center;
  color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums;
}

/* На вкладке Twitch: колонка «Тип» скрыта (1.3), зато первым идёт узкий столбец «В»
   (детектор «идёт игра в слова») → сетка [18px | канал 1fr | игроки | слово]. */
.search-list.no-type .search-head,
.search-list.no-type .search-row {
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
}

/* Аватарка канала + ник в колонке номера для стрим-комнат. */
.srp-channel {
  display: flex; align-items: center; gap: 6px;
  /* Длинный ник переносится под аватарку (узкая колонка — это ОК). */
  flex-wrap: wrap; min-width: 0;
  color: #c9a8ff; font-weight: 600;
  overflow-wrap: anywhere;
}
.srp-channel .srp-stream-ava {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  background: var(--surface, rgba(255,255,255,0.06));
  /* Ава сидела выше центра строки — чуть опускаем на уровень. */
  transform: translateY(1px);
}
.srp-channel .emo-ava-ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-strong, rgba(255,255,255,0.12)); color: var(--muted);
}
.srp-channel .emo-ava-ph svg { width: 64%; height: 64%; display: block; }