/* =============================================================================
   Grupo Axia — forms.css
   Primitivas de formulário compartilhadas por TODO o site.

   Estavam só no CSS da página de carreiras, que era a única com formulário.
   Com o formulário multi-step (pasta formulario/) usando exatamente os mesmos
   campos, elas subiram para cá — em vez de virarem uma segunda cópia.

   Quem usa hoje:
     • carreiras/          formulário de currículo
     • formulario/         formulário multi-step, em modal e em página

   O que é exclusivo de cada um continua no CSS de lá: o anexo de arquivo é da
   página de carreiras, as etapas e os cards de opção são do multi-step.

   Sumário
     1. Bloco do formulário e do campo
     2. Rótulo e controle (input, select, textarea)
     3. Estados: foco, erro
     4. Campo com prefixo (o +55 do telefone)
     5. Mensagem de erro
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

.field__control {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 24px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.field__control::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}

.field__control:focus {
  outline: none;
  border-color: var(--brand-700);
  box-shadow: 0 0 0 4px rgb(11 99 71 / 0.1);
}

.field__control[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgb(179 38 30 / 0.1);
}

/* O select perde a seta do sistema e recebe a mesma do resto do site */
.field__control--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6d65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px 20px;
  cursor: pointer;
}

/* Enquanto nada foi escolhido, o texto tem o tom de placeholder */
.field__control--select:invalid {
  color: var(--ink-muted);
}

/* --------------------- Menu do select em verde ---------------------------
   O azul da opção destacada é o realce do sistema operacional: enquanto o
   <select> abrir o menu nativo, a página não manda nele — nem `accent-color`
   nem `option:checked` alcançam ali.

   grupo e o input entra sem borda própria — sem isso apareceriam duas. */
.input-group {
  display: flex;
  align-items: center;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.input-group:focus-within {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 4px rgb(11 99 71 / 0.1);
}

.input-group:has(.field__control[aria-invalid="true"]) {
  border-color: var(--danger);
}

/* `align-self: stretch` é o que faz o traço ir de borda a borda: com altura
   própria (24px) ele parava no meio do campo e parecia um risco solto. */
.input-group__prefix {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-inline: 16px;
  border-right: 1px solid var(--line);
  font-size: 14px;
  line-height: 24px;
  color: var(--ink-muted);
}

.field__control--bare {
  height: 46px;
  border: 0;
  border-radius: 0;
}

.field__control--bare:focus {
  box-shadow: none;
}

.field__error {
  font-size: 12px;
  line-height: 20px;
  color: var(--danger);
}

/* Sem mensagem, o parágrafo não deve ocupar linha nenhuma */
.field__error:empty {
  display: none;
}

/* --------------------- Menu do select em verde ---------------------------
   O azul da opção destacada é o realce do sistema operacional: enquanto o
   <select> abrir o menu nativo, a página não manda nele — nem `accent-color`
   nem `option:checked` alcançam ali.

   `appearance: base-select` troca esse menu por um popover no próprio DOM.
   A partir daí o realce é CSS, e vira o verde da marca.

   Vive dentro do @supports de propósito: onde não houver suporte, o select
   continua exatamente como está — seta desenhada pelo background e realce
   azul do sistema. Nada quebra; só não fica verde.
   ------------------------------------------------------------------------ */
@supports (appearance: base-select) {
  .field__control--select {
    appearance: base-select;
    /* a seta passa a ser ::picker-icon; a do background ficaria dobrada */
    background-image: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 16px;
  }

  .field__control--select::picker-icon {
    width: 20px;
    height: 20px;
    color: var(--ink-muted);
    transition: transform 0.2s ease;
  }

  .field__control--select:open::picker-icon {
    transform: rotate(180deg);
  }

  /* O menu */
  .field__control--select::picker(select) {
    appearance: base-select;
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 12px 32px rgb(3 50 35 / 0.14);
  }

  .field__control--select option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: 14px;
    line-height: 24px;
    color: var(--ink);
    cursor: pointer;
  }

  /* Percorrendo a lista, com mouse ou teclado: verde claro */
  .field__control--select option:hover,
  .field__control--select option:focus {
    background: var(--icon-soft);
    color: var(--brand-700);
    outline: none;
  }

  /* O placeholder não é uma escolha: não recebe realce de escolhido */
  .field__control--select option:disabled {
    color: var(--ink-muted);
    cursor: default;
  }

  .field__control--select option:disabled:hover {
    background: none;
    color: var(--ink-muted);
  }

  /* A opção escolhida: verde cheio, o mesmo do botão principal */
  .field__control--select option:checked:not(:disabled) {
    background: var(--brand-700);
    color: #fff;
  }

  /* O "✓" que o navegador acrescenta sozinho duplicaria o destaque */
  .field__control--select option::checkmark {
    display: none;
  }
}