/*
 * Seletor de perk do modal de desafio (seletor-perk.js). Usa as variáveis
 * de cor de fila.css (--ouro, --fog-*), então carrega depois dele.
 */

.perk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 0; }
.perk-slot {
  aspect-ratio: 1; min-width: 0; padding: 8px 6px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: inherit; color: var(--ash); background: var(--fog-950);
  border: 1px dashed var(--fog-700); border-radius: 10px;
  transition: border-color 120ms ease, background 120ms ease;
}
.perk-slot:hover { border-color: var(--ouro-escuro); color: var(--bone); }
.perk-slot:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.perk-slot.is-preenchido { border-style: solid; border-color: rgba(226, 104, 60, 0.35); color: var(--bone); }
.perk-slot.is-ativo { border: 2px solid var(--ouro); background: rgba(226, 104, 60, 0.08); }
.perk-slot img { width: 62%; aspect-ratio: 1; object-fit: contain; display: block; }
.perk-slot-mais { font-size: 26px; line-height: 1; color: var(--ouro); }
.perk-slot-nome {
  max-width: 100%; font-size: 11.5px; line-height: 1.2; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Painel no fluxo do modal: empurra o conteúdo, nunca cobre. */
.perk-painel {
  margin-top: 10px; padding: 12px; border-radius: 12px;
  background: var(--fog-950); border: 1px solid var(--ouro-escuro);
}
.perk-painel[hidden] { display: none; }
.perk-painel-topo { display: flex; gap: 6px; align-items: center; }
.perk-busca {
  flex: 1 1 auto; min-width: 80px; height: 36px; padding: 0 12px; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--bone);
  background: var(--fog-900); border: 1px solid var(--fog-700);
}
.perk-busca:focus-visible { outline: 2px solid var(--ouro); border-color: transparent; }
.perk-chip {
  height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ash);
  background: transparent; border: 1px solid var(--fog-700);
}
.perk-chip:hover { color: var(--bone); }
.perk-chip.is-ativo { color: #23140f; background: var(--ouro); border-color: var(--ouro); }
.perk-painel .perk-acao { height: 32px; font-size: 13px; padding: 0 10px; flex: 0 0 auto; }
.perk-painel .perk-acao.b-icone { width: 32px; padding: 0; }
.perk-chip { flex: 0 0 auto; }

.perk-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px;
  margin-top: 12px; max-height: 300px; overflow-y: auto; padding: 2px;
}
.perk-opcao-a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px; border-radius: 8px; cursor: pointer; min-width: 0;
  font: inherit; font-size: 11px; line-height: 1.2; color: var(--ash); text-align: center;
  background: transparent; border: 1px solid transparent;
}
.perk-opcao-a img { width: 48px; height: 48px; object-fit: contain; display: block; }
.perk-opcao-a span:last-child {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
}
.perk-opcao-a:hover, .perk-opcao-a:focus-visible { background: var(--fog-850); color: var(--bone); outline: none; border-color: var(--fog-700); }
.perk-opcao-a.is-atual { border-color: var(--ouro); color: var(--bone); }
.perk-enviar .perk-slot-mais {
  width: 48px; height: 48px; display: grid; place-items: center; font-size: 22px;
  border: 1px dashed var(--fog-700); border-radius: 8px;
}
.perk-vazio-a { grid-column: 1 / -1; padding: 10px 4px; font-size: 13px; color: var(--ash); }
.perk-rodape { margin-top: 8px; font-size: 12px; color: var(--ash); min-height: 0; }
.perk-rodape:empty { display: none; }

@media (max-width: 620px) {
  .perk-painel-topo { flex-wrap: wrap; }
  .perk-busca { flex-basis: calc(100% - 38px); }
  .perk-slots { gap: 6px; }
  .perk-slot-nome { font-size: 10px; }
  .perk-grade { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); max-height: 45vh; }
  .perk-opcao-a img { width: 40px; height: 40px; }
}