/*
  search-result-list.css
  Estilos do CONTEÚDO do componente search_result_list.html.
  O card em volta (fundo, borda, sombra, padding externo) continua
  vindo da sua classe .card-panel — aqui só estilizamos as linhas
  da lista por dentro.
*/

:root {
  --srl-accent: #d9a441;
  --srl-divider: rgba(255, 255, 255, 0.08);
  --srl-hover-bg: rgba(255, 255, 255, 0.15);
  --srl-text-secondary: #9aa3b2;
  --srl-media-size: 32px;
}

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* sem max-height/scroll: a lista cresce e encolhe com o conteúdo,
     o teto de itens é controlado no servidor via max_items */
}

.search-results-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--srl-divider);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.search-results-item:last-child {
  border-bottom: none;
}

.search-results-item:hover,
.search-results-item:focus-visible {
  background-color: var(--srl-hover-bg);
  border-radius: 8px;
}

.search-results-item__media {
  flex: 0 0 auto;
  width: var(--srl-media-size);
  height: var(--srl-media-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-results-item__img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

.search-results-item__emoji {
  font-size: 22px;
  line-height: 1;
}

.search-results-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* item "somente texto": sem coluna de mídia, nome centralizado
   verticalmente na altura da linha */
.search-results-item--text .search-results-item__body {
  justify-content: center;
}

.search-results-item__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary, #eef1f6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-results-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--srl-text-secondary);
}

.search-results-item__level {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(217, 164, 65, 0.16);
  color: var(--srl-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.search-results-more {
  margin: 6px 4px 0;
  font-size: 12px;
  color: var(--srl-text-secondary);
  text-align: center;
}