/* ==========================================================================
   Barra de busca — paineis ricos
   Portado do site BR (.sb-datepanel e .sb-vpanel). Medidas extraidas dos
   valores computados do site em producao, nao estimadas.

   Aprimoramento PROGRESSIVO: sem JavaScript os <select> nativos continuam
   visiveis e o form GET funciona igual. O JS so troca a aparencia.

   Carregado DEPOIS de site.css — e por isso que as correcoes de .searchbar
   moram aqui.
   ========================================================================== */

/* CORRECAO IMPORTANTE (24/08/2026):
   site.css da `overflow:hidden` na .searchbar para que o botao coral respeite
   os cantos arredondados da barra. Só que os paineis sao posicionados ABAIXO
   da barra — e eram recortados por esse overflow, ficando invisiveis apesar de
   existirem no DOM e estarem na posicao certa. Aqui liberamos o overflow e
   arredondamos o proprio botao, que era a unica razao do recorte. */
form.searchbar{overflow:visible}
.sb-go{border-radius:0 15px 15px 0}

/* gatilho que substitui o select quando o JS assume */
.sb-trigger{
  display:none;width:100%;text-align:left;border:0;background:transparent;padding:2px 0;
  font-family:var(--font-body);font-size:14px;font-weight:400;color:var(--navy);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-on .sb-trigger{display:block}
.sb-on .sb-field select{display:none}
.sb-trigger .ph{color:#8A97A6}
.sb-field.open .sb-label{color:var(--coral-text)}

/* base comum dos dois paineis.
   opacity:1 explicito + fill-mode forwards: a animacao roda enquanto o painel
   ainda esta [hidden], e sem isso ele terminava preso em opacity 0. */
.sb-panel{
  position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
  opacity:1;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 50px rgba(26,43,66,.16);
  animation:sbIn .18s var(--ease-out) forwards;
}
.sb-panel[hidden]{display:none}
@keyframes sbIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── painel de DATAS ──────────────────────────────────────────── */
.sb-datepanel{padding:24px 30px 28px}
.sb-dp-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;
  font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--navy);
}
.sb-dp-clear{
  border:0;background:none;color:var(--turquoise);font-family:var(--font-body);
  font-size:13px;font-weight:600;cursor:pointer;padding:4px;
}
.sb-dp-clear:hover{text-decoration:underline}
.sb-dp-years{display:flex;gap:56px;flex-wrap:wrap}
.sb-dp-ylabel{
  font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy);
  text-align:center;margin:0 0 12px;
}
.sb-dp-grid{display:grid;grid-template-columns:repeat(4,66px);gap:9px}
.sb-dp-month{
  border:0;border-radius:10px;background:var(--cream);color:var(--navy);
  font-family:var(--font-body);font-size:13.5px;font-weight:500;
  padding:15px 0;text-align:center;cursor:pointer;transition:.15s var(--ease);
}
.sb-dp-month:hover{background:#EFE9DF}
.sb-dp-month.sel{background:var(--coral);color:#fff}
.sb-dp-month.sel:hover{background:var(--coral-deep)}
.sb-apply{
  margin-top:22px;background:var(--coral);color:#fff;border:0;border-radius:60px;
  padding:11px 26px;font-family:var(--font-body);font-size:13.5px;font-weight:600;
  letter-spacing:.3px;cursor:pointer;transition:.2s var(--ease);
}
.sb-apply:hover{background:var(--coral-deep)}

/* ── painel VISUAL (destino, porto, companhia, duracao) ────────────────── */
.sb-vpanel{padding:20px 22px}
.sb-vsearch{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;margin:0 0 14px;font-family:var(--font-body);font-size:14px;color:var(--navy);
}
.sb-vsearch:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:var(--coral)}
.sb-vgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-height:340px;overflow-y:auto}
.sb-vcard{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:96px;padding:6px;border:2px solid transparent;border-radius:12px;
  background:var(--cream);color:var(--muted);
  font-family:var(--font-body);font-size:13px;font-weight:600;text-align:center;
  cursor:pointer;overflow:hidden;transition:.2s var(--ease);
}
.sb-vcard:hover{border-color:var(--coral);transform:translateY(-2px)}
.sb-vcard.sel{border-color:var(--coral);box-shadow:0 0 0 3px rgba(232,115,74,.16)}
.sb-vcard img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:8px}
.sb-vcard .cap{
  position:relative;z-index:2;width:100%;padding:16px 9px 7px;
  font-size:12.5px;font-weight:600;line-height:1.25;
}
.sb-vcard.has-img .cap{
  color:#fff;text-shadow:0 1px 6px rgba(10,25,42,.7);
  background:linear-gradient(transparent,rgba(10,25,42,.72));
  border-radius:0 0 8px 8px;
}
.sb-vcard .n{display:block;font-weight:400;font-size:11px;opacity:.85;margin-top:1px}
.sb-vempty{padding:26px 4px;color:var(--muted);font-size:14px}

@media(max-width:1000px){
  .sb-panel{left:8px;right:8px}
  .sb-vgrid{grid-template-columns:repeat(3,1fr)}
  .sb-dp-years{gap:28px}
  .sb-go{border-radius:0 0 15px 15px}
}
@media(max-width:760px){
  .sb-vgrid{grid-template-columns:repeat(2,1fr)}
  .sb-datepanel{padding:20px 18px 22px}
  .sb-dp-grid{grid-template-columns:repeat(4,1fr)}
  .sb-dp-years{gap:20px;flex-direction:column}
}