/* =====================================================================
   BUSCA DE PASSAGENS — aparência

   O widget é o da Busbud (Shadow DOM: o estilo dele não sai e o nosso
   não entra). Aqui fica só a caixa em volta e o lugar dela na home.

   Tudo fica sob .vsg-busca, para não afetar o resto do site.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Onde a busca fica

   Ela é a seção logo depois do banner. No computador sobe por cima da
   base dele (parte sobre a foto, parte na faixa de baixo); no celular
   fica inteira embaixo do banner, que vira um quadrado.
   --------------------------------------------------------------------- */

/* O banner ocupa quase toda a tela: sobram 62px da faixa marrom, que é
   onde a busca se apoia. O texto da seção seguinte começa 100px depois
   do banner, então fica fora da tela quando o site abre.

   O max() é a trava: em janela muito baixa o banner para de encolher,
   senão a busca subiria por cima do menu. O svh é a altura real da tela
   no celular; o vh acima fica de reserva para navegadores antigos. */
body .elementor-element-458df486,
body .elementor-element-458df486 .elementor-background-slideshow,
body .elementor-element-458df486 .elementor-background-slideshow__slide__image {
    min-height: max(540px, calc(100vh - 62px)) !important;
    min-height: max(540px, calc(100svh - 62px)) !important;
}

/* espaço no topo para o título não encostar no menu, que fica
   sobreposto ao banner */
body .elementor-element-458df486 > .e-con-inner {
    padding-top: 110px !important;
    padding-bottom: 26px !important;
    row-gap: 16px !important;
}

.vsg-busca {
    position: relative;
    z-index: 5;
    /* a caixa tem 138px de altura: subindo 106, sobram 32 dela sobre a
       faixa marrom — o resto fica sobre a foto */
    margin: -106px 0 0;
    padding: 0 20px;
}

/* ------------------------------------------------------------------
   Celular: o slide vira quadrado e a busca fica embaixo dele
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    body .elementor-element-458df486,
    body .elementor-element-458df486 .elementor-background-slideshow,
    body .elementor-element-458df486 .elementor-background-slideshow__slide__image {
        min-height: 0 !important;
    }

    body .elementor-element-458df486 {
        aspect-ratio: 1 / 1;
    }

    body .elementor-element-458df486 > .e-con-inner {
        /* o de baixo maior que o de cima sobe o conjunto dentro do
           quadrado, sem tirar o título do meio */
        padding-top: 56px !important;
        padding-bottom: 96px !important;
        align-content: center !important;
    }

    /* título maior no celular */
    body .elementor-element-458df486 h2 {
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    /* o bloco do ícone de rolagem reserva 275px de banner vazio, que
       no quadrado não cabem */
    body .elementor-element-458df486 .elementor-element-b20303f {
        min-height: 80px !important;
        padding-bottom: 0 !important;
    }

    .vsg-busca {
        /* o topo da caixa encosta um pouco na foto, como no computador */
        margin: -40px 0 0;
        padding: 0 14px;
    }
}

.vsg-busca__caixa {
    /* mesma largura do cabeçalho, para ficar alinhado com o menu */
    max-width: 1300px;
    margin: 0 auto;
    padding: 16px 18px 18px;

    /* branco translúcido, deixando o banner aparecer por trás */
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .3);
}

.vsg-busca__chamada {
    margin: 0 0 13px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #463A30;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

/* ------------------------------------------------------------------
   O widget da Busbud
   Ele se desenha num Shadow DOM, com as próprias cores (atributo
   "theme"); daqui só dá para mexer na caixa dele. A altura mínima
   segura o espaço enquanto ele carrega, para a página não pular.
   ------------------------------------------------------------------ */
.vsg-busca busbud-search-form {
    display: block;
    min-height: 64px;
}

@media (max-width: 900px) {
    .vsg-busca__caixa { padding: 16px 14px; }
    .vsg-busca__chamada { text-align: center; font-size: 14px; }
}

@media print {
    .vsg-busca { display: none !important; }
}