/*
 * Caixa de sugestões da busca (spec 001, RF-15) — Figma "Busca — Autocomplete":
 * componentes Search/Autocomplete (Dropdown) e Search/Result Item.
 */

.qs-sugestoes {
  /* top/left/width definidos pelo JS a partir do campo (8px abaixo dele). */
  --qs-laranja: var(--quimatic-orange, #ff4e00);
  --qs-laranja-claro: #ffede5;
  --qs-texto: var(--quimatic-text, #0a0203);
  --qs-borda: #cecccc;
  position: absolute;
  z-index: 10000;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--qs-borda);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(10, 2, 3, 0.12);
  font-family: "Myriad Pro", "Helvetica Neue", Arial, sans-serif;
  color: var(--qs-texto);
  text-align: left;
}

.qs-sugestoes[hidden],
.qs-sugestoes [hidden] {
  display: none;
}

.qs-sugestoes__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Item (Search/Result Item): padding 8/16, espaço 16 entre título e etiqueta. */
.qs-sugestoes__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

/* Hover (mouse) */
.qs-sugestoes__item:hover {
  background: var(--qs-laranja-claro);
}

/* Foco (navegação pelo teclado ↑↓): borda de 2px por dentro, sem mexer no layout. */
.qs-sugestoes__item.is-active {
  background: var(--qs-laranja-claro);
  box-shadow: inset 0 0 0 2px var(--qs-laranja);
}

.qs-sugestoes__titulo {
  min-width: 0;
}

.qs-sugestoes__titulo strong {
  font-weight: 700;
}

/* Etiqueta (Tag): padding 2/8, raio 4, Myriad Pro 600 12px. */
.qs-sugestoes__tag {
  --qs-tag-fundo: #fef9db;
  --qs-tag-cor: #e59d00;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--qs-tag-fundo);
  color: var(--qs-tag-cor);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Cores por tipo: as mesmas das abas da página de resultados e de Recursos. */
.qs-sugestoes__tag--publicacao,
.qs-sugestoes__tag--artigo,
.qs-sugestoes__tag--dica-tecnica {
  --qs-tag-fundo: #dbeafe;
  --qs-tag-cor: #1447e6;
}

.qs-sugestoes__tag--faq {
  --qs-tag-fundo: #dcfce7;
  --qs-tag-cor: #008236;
}

.qs-sugestoes__tag--ficha-tecnica,
.qs-sugestoes__tag--ficha-seguranca,
.qs-sugestoes__tag--ficha-emergencia,
.qs-sugestoes__tag--catalogo,
.qs-sugestoes__tag--necessidade {
  --qs-tag-fundo: #fff1ea;
  --qs-tag-cor: #ff4e00;
}

.qs-sugestoes__tag--video {
  --qs-tag-fundo: #f3e8ff;
  --qs-tag-cor: #8200db;
}

.qs-sugestoes__tag--pagina {
  --qs-tag-fundo: #ffe1f7;
  --qs-tag-cor: #e500c8;
}

/* Rodapé "Ver todos": padding 12/16, borda superior 1px, 600 14px laranja. */
.qs-sugestoes__todos {
  padding: 12px 16px;
  border-top: 1px solid var(--qs-borda);
  background: #fff;
  color: var(--qs-laranja);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.qs-sugestoes__todos:hover,
.qs-sugestoes__todos.is-active {
  background: var(--qs-laranja-claro);
}

.qs-sugestoes__todos.is-active {
  box-shadow: inset 0 0 0 2px var(--qs-laranja);
}

/* Faixa de correção: fundo laranja-claro, padding 10/16, espaço 2. */
.qs-sugestoes__correcao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  background: var(--qs-laranja-claro);
}

.qs-sugestoes__correcao-texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.qs-sugestoes__correcao-texto strong {
  color: var(--qs-laranja);
  font-weight: 700;
}

.qs-sugestoes__correcao-link {
  padding: 0;
  border: 0;
  background: none;
  color: #4c4c4c;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: underline;
  cursor: pointer;
}

.qs-sugestoes__correcao-link:hover,
.qs-sugestoes__correcao-link:focus-visible {
  color: var(--qs-laranja);
}

/* Sem resultados */
.qs-sugestoes__vazio {
  margin: 0;
  padding: 12px 16px;
  color: #667085;
  font-size: 14px;
  line-height: 1.35;
}

/* Carregando (esqueleto): linhas de 40px, padding 10/16, texto e etiqueta. */
.qs-sugestoes__esqueleto-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px 16px;
}

.qs-sugestoes__esqueleto-texto,
.qs-sugestoes__esqueleto-tag {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: #ededed;
  animation: qs-sugestoes-pulso 1.2s ease-in-out infinite;
}

.qs-sugestoes__esqueleto-tag {
  flex-shrink: 0;
  width: 44px;
  height: 16px;
}

.qs-sugestoes__esqueleto-linha:nth-child(1) .qs-sugestoes__esqueleto-texto { width: 54%; }
.qs-sugestoes__esqueleto-linha:nth-child(2) .qs-sugestoes__esqueleto-texto { width: 42%; }
.qs-sugestoes__esqueleto-linha:nth-child(3) .qs-sugestoes__esqueleto-texto { width: 64%; }
.qs-sugestoes__esqueleto-linha:nth-child(4) .qs-sugestoes__esqueleto-texto { width: 36%; }

@keyframes qs-sugestoes-pulso {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .qs-sugestoes__esqueleto-texto,
  .qs-sugestoes__esqueleto-tag {
    animation: none;
  }
}

/* Celular: mesmo desenho, um pouco mais compacto. */
@media (max-width: 767px) {
  .qs-sugestoes__item {
    gap: 12px;
    padding: 10px 12px;
    font-size: 15px;
  }

  .qs-sugestoes__correcao,
  .qs-sugestoes__todos,
  .qs-sugestoes__vazio {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/*
 * Páginas de resultado (busca geral e Recursos): faixa de correção e chip
 * "Indicados para …" ao lado do título da seção Produtos.
 */

.qs-faixa-correcao {
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 0;
  padding: 14px 20px;
  background: #ffede5;
  color: var(--quimatic-text, #0a0203);
}

.qs-faixa-correcao p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.qs-faixa-correcao strong,
.qs-faixa-correcao a {
  color: var(--quimatic-orange, #ff4e00);
  font-weight: 700;
}

.qs-com-indicados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.qs-indicados-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid #e3dfdf;
  border-radius: 999px;
  background: #fff;
  color: #4c4c4c;
  font-size: 14px;
  line-height: 1.3;
}

.qs-indicados-chip strong {
  margin-left: 4px;
  color: var(--quimatic-text, #0a0203);
  font-weight: 600;
}

@media (max-width: 767px) {
  .qs-faixa-correcao {
    margin-top: 16px;
    padding: 12px 16px;
  }

  .qs-faixa-correcao p {
    font-size: 14px;
  }

  .qs-com-indicados {
    padding-bottom: 12px;
  }

  .qs-indicados-chip {
    font-size: 13px;
  }
}