/* =========================================================
   QUEST DROP — PACK-INPUT.CSS
   Estilos reaproveitados pelos modais de configuração da tela
   1: editor de "Minhas Próprias Perguntas" e editor de "Lista
   de Prêmios". Vivem em modal (mesmo padrão de overlay que a
   pergunta/resultado do jogo já usam) em vez de inline na tela
   de configuração — a primeira versão do editor de perguntas
   ficava espremida dentro da coluna "Conteúdo", estreita demais
   pra um editor confortável.

   O nome do arquivo ficou um pouco impreciso depois que o
   segundo modal (prêmios) entrou aqui também — decidimos não
   renomear de novo pra não gerar mais um "delete isso, aplique
   aquilo" toda vez que você for aplicar o pacote.
   ========================================================= */

.pack-modal-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-soft);
  text-align: left;
  transform: scale(0.94);
  transition: transform 0.3s ease;
}

.overlay.is-active .pack-modal-card {
  transform: scale(1);
}

.pack-custom-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-bg-alt, var(--color-surface));
  border: 1px dashed var(--color-surface-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin: -4px 0 16px;
}

/* display:flex acima empata em especificidade com a regra padrão do
   navegador pro atributo hidden, e como é regra de autor, ela vence —
   ou seja, sem isso aqui, hidden="" nunca escondia o elemento de
   verdade. [id][hidden] tem mais peso que a classe sozinha, então
   essa regra sempre ganha quando hidden está presente. */
.pack-custom-summary[hidden] {
  display: none;
}

.pack-custom-status {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.pack-custom-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

#bulk-textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--color-text);
  min-height: 220px;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
}

.pack-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0 20px;
}

.pack-toolbar .file-label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.pack-parse-errors {
  background: rgba(224, 106, 95, 0.12);
  border: 1px solid rgba(224, 106, 95, 0.35);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: #e06a5f;
}

.pack-parse-errors ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.preview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
}

.preview-item__tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold);
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   Modal "Lista de Prêmios"
   --------------------------------------------------------- */

.prize-tier {
  margin-bottom: 24px;
}

.prize-tier__title {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 6px;
}

.prize-tier__hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

.prize-tier__errors {
  background: rgba(224, 106, 95, 0.12);
  border: 1px solid rgba(224, 106, 95, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: #e06a5f;
}

.prize-bulk-textarea {
  width: 100%;
  min-height: 80px;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--color-text);
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 10px;
}

.prize-item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prize-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
}

.prize-item__remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.prize-item__remove:hover {
  color: var(--color-text);
}

.prize-total {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: right;
  margin: 4px 0 20px;
}