/* busca-negocio.css — busca do negócio (combobox APG), no escuro NAVSTEC.
   Tokens com valor de reserva: a página troca-os sem mexer no componente. Contraste medido em testes/fonte.test.mjs. */
.bn{
  --bn-fundo:#0E1E37;          /* campo (tinta-2 do site) */
  --bn-fundo-lista:#11284D;    /* lista */
  --bn-texto:#F4F7FB;
  --bn-suave:#B9C7DE;          /* categoria, ajuda, ícones */
  --bn-borda:rgba(255,255,255,.34);
  --bn-foco:#FFD447;           /* amarelo "caixa" do site */
  --bn-ativa:#1238B5;          /* cobalto do site */
  --bn-ativa-texto:#FFFFFF;
  --bn-ativa-cat:#DCE5FB;
  --bn-marca:#FFD447;
  --bn-marca-ativa:#FFE58F;
  --bn-ok:#8FE3B8;
  --bn-raio:10px;
  position:relative;
}
/* o componente não depende do [hidden] da página: sem isto, o "display:grid" do × ganhava e ele aparecia no campo vazio */
.bn [hidden]{display:none!important}
.bn-rotulo{display:block;margin:0 0 10px;font-size:1.25rem;font-weight:750;line-height:1.2;color:var(--bn-texto)}
.bn-campo{position:relative}
.bn-campo input{
  display:block;width:100%;min-height:62px;margin:0;padding:0 52px 0 52px;
  border:2px solid var(--bn-borda);border-radius:var(--bn-raio);background:var(--bn-fundo);color:var(--bn-texto);
  font:inherit;font-size:1.25rem;font-weight:600;line-height:1.2;-webkit-appearance:none;appearance:none;
}
.bn-campo input::placeholder{color:var(--bn-suave);opacity:1;font-weight:500}
.bn-campo input:focus{outline:3px solid rgba(255,212,71,.42);outline-offset:2px;border-color:var(--bn-foco)}
.bn-lupa{position:absolute;left:17px;top:50%;width:22px;height:22px;transform:translateY(-50%);fill:none;stroke:var(--bn-suave);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.bn-limpar{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--bn-suave);cursor:pointer}
.bn-limpar:hover{color:var(--bn-texto);background:rgba(255,255,255,.08)}
.bn-limpar:focus-visible{outline:3px solid var(--bn-foco);outline-offset:0}
.bn-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.bn-popup{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;
  max-height:var(--bn-max,70vh);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;border:1px solid rgba(255,255,255,.2);border-radius:var(--bn-raio);background:var(--bn-fundo-lista);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.75);
}
.bn-cab{margin:6px 10px 6px;font-size:.875rem;font-weight:650;line-height:1.3;color:var(--bn-suave)}
.bn-lista{margin:0;padding:0;list-style:none}
.bn-op{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:16px;row-gap:2px;
  min-height:46px;padding:11px 12px;border-radius:7px;color:var(--bn-texto);cursor:pointer;scroll-margin:6px;
}
.bn-nome{font-size:1.0625rem;font-weight:520;line-height:1.3}
.bn-marca{background:transparent;color:var(--bn-marca);font-weight:780}
.bn-cat{font-size:.875rem;font-weight:500;line-height:1.3;color:var(--bn-suave)}
.bn-op--mais .bn-nome{color:var(--bn-marca);font-weight:720}
.bn-op--livre .bn-nome{font-weight:640}
.bn-op--livre:not(:first-child){margin-top:4px;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 7px 7px}
.bn-op--livre:first-child{margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.12);border-radius:7px 7px 0 0}
@media (hover:hover){.bn-op:hover{background:rgba(255,255,255,.08)}}
.bn-op[aria-selected="true"]{background:var(--bn-ativa);color:var(--bn-ativa-texto)}
.bn-op[aria-selected="true"] .bn-cat{color:var(--bn-ativa-cat)}
.bn-op[aria-selected="true"] .bn-marca,.bn-op--mais[aria-selected="true"] .bn-nome{color:var(--bn-marca-ativa)}

.bn-ajuda{margin:10px 0 0;font-size:.9375rem;line-height:1.45;color:var(--bn-suave)}
.bn-ajuda--ok{color:var(--bn-ok);font-weight:650}
.bn-vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bn--aberta{z-index:40}
.bn-veu{display:none}
.bn-folga{height:0}

/* Celular: 2 linhas por opção (nome, depois categoria); com a lista aberta o fundo escurece (Baymard 2022) */
@media (max-width:760px){
  .bn-campo input{min-height:60px;font-size:1.1875rem}
  .bn-op{flex-direction:column;align-items:flex-start;justify-content:center;min-height:58px;padding:9px 12px}
  .bn--aberta .bn-veu{display:block;position:fixed;inset:0;z-index:-1;background:rgba(3,8,18,.74)}
}
@media (prefers-reduced-motion:no-preference){
  .bn-popup{animation:bn-entra .14s ease-out}
  .bn-veu{animation:bn-funde .14s ease-out}
}
@keyframes bn-entra{from{opacity:0;transform:translateY(-4px)}}
@keyframes bn-funde{from{opacity:0}}
@media (forced-colors:active){
  .bn-op[aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}
  .bn-marca{color:Highlight}
}