/* ─── Cadastro de Prêmio — override do grid de envio_atividade.css ──── */
.premio-grid {
  grid-template-areas:
    "nome      imagem"
    "cidade    estado"
    "posicoes  resgate"
    "vouchers  vouchers"
    "descricao descricao"
    "detalhes  detalhes"
    "cadastrar voltar";
}

.env-area-nome      { grid-area: nome; }
.env-area-imagem    { grid-area: imagem; }
.env-area-posicoes  { grid-area: posicoes; }
.env-area-resgate   { grid-area: resgate; }
.env-area-vouchers  { grid-area: vouchers; }
.env-area-cidade    { grid-area: cidade; }
.env-area-estado    { grid-area: estado; }
.env-area-descricao { grid-area: descricao; }
.env-area-detalhes  { grid-area: detalhes; }
.env-area-cadastrar { grid-area: cadastrar; align-self: start; }
.env-area-voltar    { grid-area: voltar; align-self: start; }

/* ── Posição elegível — chips clicáveis (sem checkbox cru) ─────── */
.posicoes-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 54px;
  align-items: center;
}
.posicao-check {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 20px;
  background: rgba(0,0,0,0.3);
  font-family: var(--font-montserrat);
  font-size: 13px;
  letter-spacing: 0.28px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background .2s, color .2s;
  user-select: none;
}
.posicao-check input { display: none; }
.posicao-check:has(input:checked) {
  background: linear-gradient(180deg, #fd7222 0%, #c30400 100%);
  color: var(--white);
}

/* ── Período de resgate — De/Até dentro de uma única caixa ─────── */
.resgate-datas {
  display: flex;
  gap: 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 20px;
  padding: 14px 16px;
}
.resgate-datas > div { flex: 1; }
.resgate-sublabel {
  display: block;
  font-family: var(--font-montserrat);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.resgate-datas .env-input {
  width: 100%;
  background: transparent;
  padding: 3px 0;
}
.env-input[type="date"] { color-scheme: dark; }

.env-area-imagem .env-file-preview img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}

.env-input,
.env-select {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: none;
  border-radius: 20px;
  padding: 17px 16px;
  font-family: var(--font-montserrat);
  font-size: 14px;
  letter-spacing: 0.28px;
  color: var(--white);
}
.env-input::placeholder { color: #c0c0c0; }
.env-select { appearance: none; padding-right: 40px; }
.env-select option { background: #1a1a1a; color: var(--white); }
.env-select[multiple] { min-height: 160px; }

/* Seta customizada — mesmo padrão de cadastro_admin.php, sempre a
   14px da borda direita (não fica "perdida" longe do texto). */
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.4);
  pointer-events: none;
  font-size: 12px;
}

.env-area-vouchers .select-wrap { max-width: 140px; }
.env-area-vouchers .env-select { max-width: 140px; }

.premio-grid .env-textarea { height: 140px; }

.env-hint {
  font-family: var(--font-montserrat);
  font-size: 10px;
  color: rgba(255,255,255,0.6);
}

.btn-voltar {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
}
.btn-voltar:hover { opacity: .75; }

@media (max-width: 900px) {
  .premio-grid {
    grid-template-areas:
      "nome"
      "imagem"
      "posicoes"
      "resgate"
      "vouchers"
      "cidade"
      "estado"
      "descricao"
      "detalhes"
      "cadastrar"
      "voltar";
  }
}