/* ══════════════════════════════════════════════════════════════════
   RESETAR ATRIBUTOS — botão no rodapé do cartão e o diálogo de confirmação.

   O botão herda `pcard__details` do jogo (o mesmo do "Ver Detalhes"), então
   aqui só entra o que o distingue: a folga que o separa do irmão de cima, o
   tom de alerta e o custo alinhado à direita.
   ══════════════════════════════════════════════════════════════════ */

/*
 * 🚨 Lado a lado com o "Ver Detalhes", não embaixo dele.
 *
 * Empilhado, este botão custava 38px de altura — e eram exatamente os 38px que
 * sobravam para o Mini Player caber abaixo do "Ver Inventário" (medido no #58:
 * o inventário terminava em 649 e a barra Perfil/Pets começa em 689). Com o
 * reset empilhado o inventário passou a terminar em 687 e o Mini Player sumiu
 * da coluna. Em duas colunas o custo vertical é zero e os dois pedidos cabem.
 */
.pcard__rodape:has(#atributos-reset) {
  display: flex;
  gap: 6px;
}

.pcard__rodape:has(#atributos-reset) > * {
  flex: 1 1 0;
  min-width: 0;
}

.reset-attr__btn {
  gap: 5px;
  color: #e7b7ba;
  border-color: #3a1a1e;
  background: linear-gradient(180deg, #1a0e12, #0b0507);
}

.reset-attr__btn:hover:not(:disabled) {
  filter: brightness(1.35);
}

.reset-attr__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

/* O custo mora à direita, longe do rótulo, para ler como preço e não como
   parte do nome do botão. */
.reset-attr__custo {
  margin-left: auto;
  font-size: 10px;
  font-style: normal;
  color: var(--gold-300, #f0c44a);
  letter-spacing: 0.02em;
}

.reset-attr__btn[data-sem-ouro='1'] .reset-attr__custo {
  color: #ff9a9d;
}

.reset-attr__icone {
  flex: 0 0 auto;
}

/* ── diálogo ────────────────────────────────────────────────────── */

.reset-attr .dialog__content {
  max-width: 380px;
}

.reset-attr__corpo {
  display: grid;
  gap: 4px;
  margin: 2px 0 4px;
}

.reset-attr__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid rgb(255 255 255 / 0.06);
  border-radius: var(--r-sm, 6px);
  background: rgb(0 0 0 / 0.28);
  font-size: var(--fs-300, 12px);
}

.reset-attr__linha span {
  color: var(--text-muted, #9fb0c4);
}

.reset-attr__linha strong {
  font-size: var(--fs-400, 14px);
  color: var(--text, #e8eef6);
}

.reset-attr__linha--fraca {
  border-color: transparent;
  background: none;
  padding-block: 2px;
}

.reset-attr__ouro {
  color: var(--gold-300, #f0c44a);
}

/* ── aviso de erro ──────────────────────────────────────────────── */

.reset-attr__aviso {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 60;
  translate: -50% 0;
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  border: 1px solid #4a1013;
  border-radius: var(--r-md, 8px);
  background: linear-gradient(180deg, #2a1013, #160709);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.5);
  color: #ffd9da;
  font-size: var(--fs-300, 12px);
  text-align: center;
}