/* COMPONENTE — campo de formulário */

/* ===== INPUT (foco âmbar + ring) ================================== */
.input-wrapper {
  display:flex; align-items:center; gap:10px;
  background: var(--surface-sunken);
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-control);
  padding:0 16px;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input-wrapper:focus-within {
  border-color: var(--accent-deep);
  /* Halo único e translúcido em vez do --focus-ring padrão (faixa dupla
     sólida): aquele ring é para contraste de acessibilidade em alvo pequeno
     (botão, link); aqui o campo já é grande e a mudança de cor da borda
     basta, então o brilho ao redor pode ser mais discreto. */
  box-shadow: 0 0 0 3px rgba(235, 174, 52, 0.22);
  background: rgba(255,255,255,0.06);   /* +2% sobre --surface-sunken, sinaliza o campo ativo */
}
.form-error { margin-top:10px; color:var(--favo-danger-500); font-size:14px; font-weight:var(--weight-medium); line-height:1.4; }
.form-error[hidden] { display:none; }
.input-wrapper.error { border-color: var(--favo-danger-500); }

.input-prefix,.input-suffix { font-size:15px; color:var(--text-subtle); font-weight:var(--weight-medium); white-space:nowrap; }
.form-input {
  flex:1; min-width:0; width:100%; background:none; border:none; outline:none;
  color:#fff; font-family:var(--font-display); font-size:20px; font-weight:var(--weight-bold);
  padding:13px 0;
}
/* O anel de foco quem desenha é o .input-wrapper (:focus-within). Sem isto o
   :focus-visible global de 02-base.css desenha um SEGUNDO anel colado por
   dentro da borda — os dois quadros amarelos concêntricos do campo ativo. */
.input-wrapper .form-input:focus-visible { outline:none; box-shadow:none; }
.form-input::placeholder { color: var(--favo-ink-500); font-weight:var(--weight-regular); font-size:18px; }
.form-input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.form-input[type=number]::-webkit-outer-spin-button,
.form-input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }