/* ══════════════ 19.1 · CAMPO EMPRESA COM API (autocomplete) ══════════════
   Lista de sugestões da base de CNPJ. Herda o visual dos campos do form —
   o input continua sendo um <input> normal; o que muda é a lista que abre
   embaixo. Sem biblioteca.

   REGRA: nenhum valor deste arquivo depende de CSS custom properties
   da LP que o hospeda. Motivo: o componente é copiado 1:1 pra várias
   LPs por design (`.claude/skills/instalar-campo-empresa`), cada uma
   com paleta e nomenclatura de tokens diferentes. `var(--white)` sem
   valor cai pra `initial` → `transparent` → dropdown invisível sobre
   o conteúdo abaixo. `var(--green-vivid)` sem valor → color herdada,
   pill de confirmação sem destaque. Etc.

   Se precisar customizar a aparência pra combinar com a marca da LP,
   sobreescreva as regras `.cbox*` no CSS da LP (a origem do "cascade"
   te cobre) — não altere aqui. */

.cbox { position: relative; }

/* Pulsação em vermelho quando o lead tenta submeter sem escolher da lista
   (modo obrigatório). A mensagem de erro sozinha, na cor de texto padrão,
   passa batido pra quem acabou de rolar e clicar no botao — o olho dele
   está no botão, não no campo lá em cima. A pulsação chama o olho pra
   onde o erro está de verdade. Duração curta (2 pulsos de 700ms) pra não
   distrair o resto da correção. JS aplica a classe e remove depois de
   1.5s — animação one-shot, sem infinite. */
@keyframes cbox-error-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.55); }
  50%  { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.00); }
  100% { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.00); }
}
.cbox--error-pulse input {
  border-color: #dc2626 !important;
  animation: cbox-error-pulse .7s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .cbox--error-pulse input { animation: none; }
}

/* A lista flutua sobre o conteúdo seguinte. z-index acima do card do form
   pra não ser cortada pela etapa; overflow-y porque 10 itens não cabem em
   tela de celular. */
.cbox__list {
  position: absolute; z-index: 40;
  inset-inline: 0; top: calc(100% + 4px);
  max-height: 17rem; overflow-y: auto;
  margin: 0; padding: .25rem;
  list-style: none;
  background: #ffffff;
  border: 1.5px solid #e5e0d7;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .06);
}
.cbox__list[hidden] { display: none; }

.cbox__opt {
  padding: .55rem .7rem;
  border-radius: 4px;
  cursor: pointer;
  /* O nome da empresa é longo e não pode vazar do card. */
  overflow-wrap: anywhere;
}
/* aria-selected é a fonte da verdade do item ativo (teclado e mouse usam o
   mesmo estado), então o estilo pendura nele em vez de uma classe própria.
   Roxo #3d008c é o roxo YouRH (padrão das LPs); em 8% opacidade fica
   subtile o suficiente pra funcionar em qualquer bg. */
.cbox__opt[aria-selected="true"], .cbox__opt:hover {
  background: rgba(61, 0, 140, .08);
}
.cbox__opt-nome {
  display: block;
  font-size: .9375rem; font-weight: 600; color: #1a1a1a;
  line-height: 1.25;
}
.cbox__opt-meta {
  display: block;
  font-size: .75rem; color: #5c5c6b;
  margin-top: .15rem;
}

/* Saída de emergência: sempre o último item, pra quem não achar a empresa. */
.cbox__opt--livre .cbox__opt-nome { color: #3d008c; font-weight: 700; }

.cbox__status {
  padding: .55rem .7rem;
  font-size: .75rem; color: #5c5c6b;
}

/* Só para leitor de tela: anuncia quantas empresas apareceram. Sem isso,
   quem usa leitor não fica sabendo que a lista abriu. */
.cbox__sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Confirmação embaixo do campo quando a empresa veio da base.
   Pill verde com padding + bg 8% opacidade — precisa se destacar
   MESMO na LP que não tem CSS var pra cor de sucesso. */
.cbox__ok {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 600; color: #00c853;
  margin-top: .5rem; padding: .5rem .75rem;
  background: rgba(0, 200, 83, .08); border-radius: 6px;
  line-height: 1.35; word-break: break-word;
}
.cbox__ok[hidden] { display: none; }
.cbox__ok svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cbox__ok [data-cbox-ok-txt] { min-width: 0; }

/* Loader "Buscando…" à direita do input, ligado enquanto o debounce
   de digitação + o fetch pra /api/empresas/buscar estão em vôo. Antes
   dele, o lead digitava e ficava sem sinal por 800-1400ms + latência —
   muitos concluíam que nada acontecia e clicavam fora do campo.
   Fundo branco pra sobrepor texto muito longo que atinja a área do
   loader; pointer-events none pra não intercepta clique no input. */
.cbox__loading {
  position: absolute; top: 50%; right: .75rem;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .975rem; color: #5c5c6b;
  background: #ffffff; padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}
.cbox__loading[hidden] { display: none; }
.cbox__spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(0, 0, 0, .15);
  border-top-color: #3d008c;
  border-radius: 50%;
  animation: cbox-spin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes cbox-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cbox__spinner { animation: none; }
}
/* Mobile: campo estreito, so mostra o spinner (texto "Buscando..."
   nao cabia e estourava o pill, especialmente no popover WhatsApp
   onde o input tem so ~200px). O spinner sozinho ja comunica que a
   busca esta em curso. */
@media (max-width: 575px) {
  .cbox__loading-text { display: none; }
  .cbox__loading { right: .5rem; padding: 0; background: transparent; }
}