/*
 * Drag and drop nos uploads simples do Forminator.
 *
 * O visual segue o uploader multiplo que o formulario ja tem (borda tracejada +
 * dica de arrastar), mas COMPACTO de proposito: os tres campos ficam lado a lado
 * numa linha, e transformar cada um numa caixa grande empurraria o layout.
 * Tudo prefixado com .zx-dz para nao vazar estilo -- o site roda Elementor com
 * quatro pacotes de addon.
 */
:root {
  --zx-dz-borda: rgba(220, 174, 75, 0.45);
  --zx-dz-borda-ativa: #dcae4b;
  --zx-dz-fundo-ativo: rgba(220, 174, 75, 0.10);
  --zx-dz-texto: #8f8f8f;
  --zx-dz-erro: #e0574c;
}

/* A zona e o proprio container do Forminator; nao mexemos na estrutura.
 *
 * O container e `display: flex; flex-wrap: nowrap` e mede ~204px (os tres campos
 * ficam lado a lado). Sem o wrap abaixo, a dica entra como quarto item na MESMA
 * linha e disputa espaco com o botao (100px) e o nome do arquivo (82px) -- o
 * resultado e "or ..." truncado. O padding lateral e curto pelo mesmo motivo. */
.forminator-file-upload.zx-dz {
  position: relative;
  flex-wrap: wrap;
  border: 1px dashed var(--zx-dz-borda);
  border-radius: 6px;
  padding: 8px 6px 6px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.forminator-file-upload.zx-dz:hover {
  border-color: var(--zx-dz-borda-ativa);
}

/* Estado durante o arraste. */
.forminator-file-upload.zx-dz-ativo {
  border-color: var(--zx-dz-borda-ativa);
  border-style: solid;
  background-color: var(--zx-dz-fundo-ativo);
}

/* A dica ("or drag and drop here"), sempre numa linha propria. */
.zx-dz-dica {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--zx-dz-texto);
  pointer-events: none; /* nunca rouba o clique do botao */
}

.forminator-file-upload.zx-dz-ativo .zx-dz-dica {
  color: var(--zx-dz-borda-ativa);
}

/* Aviso de tipo invalido / mais de um arquivo. */
.zx-dz-aviso {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--zx-dz-erro);
  pointer-events: none;
  min-height: 0;
}

.forminator-file-upload.zx-dz-erro {
  border-color: var(--zx-dz-erro);
}

/* O input fica escondido atras do botao do Forminator; garantir que o clique na
   zona chegue nela, e nao no input invisivel. */
.forminator-file-upload.zx-dz > input[type="file"] {
  pointer-events: none;
}

@media (max-width: 640px) {
  /* No celular os campos empilham e ha largura sobrando. */
  .forminator-file-upload.zx-dz { padding: 9px 10px 7px; }
  .zx-dz-dica { font-size: 12px; }
}