/* ==========================================================================
   MODAL DE COMPRA — calendário permanente
   --------------------------------------------------------------------------
   Carrega DEPOIS de stylesheet.css e substitui o comportamento de sanfona por
   duas seções sempre abertas.

   O padrão antigo trocava o calendário por "12/09/2026 [Editar]" assim que a
   data era escolhida. Comparar o preço de dois dias — que é o que a pessoa
   faz antes de comprar — custava três cliques e duas esperas. Aqui custa um
   clique, e a lista de ingressos se atualiza no lugar.
   ========================================================================== */

/* ── Seção ─────────────────────────────────────────────────────────────── */

.booking-step {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.booking-step:last-of-type {
    border-bottom: 0;
}

.booking-step__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.booking-step__body {
    padding-top: 14px;
}

/* A data escolhida: informação ao lado do título, não um estado que
   substitui o calendário. */
.booking-step__pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    background: #eef3fb;
    color: #2E59A5;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.booking-step__pick.hide {
    display: none;
}

/* Estado inicial da lista: diz o que fazer. Área vazia sem explicação
   parece erro de carregamento. */
.booking-hint {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f8fa;
    color: #6b7280;
    font-size: .85rem;
    line-height: 1.4;
}

/* Troca de data: esmaece a lista anterior em vez de apagá-la. Piscar em
   branco entre duas respostas dá a impressão de que algo quebrou. */
#loaderDataVisitors.is-carregando {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* ── Dia selecionado no calendário ─────────────────────────────────────
   O destaque é o que sustenta o novo fluxo: o calendário fica, então a
   marcação precisa ser inequívoca à distância de um olhar. */

#calendar-inline .fnv-day.selecionado {
    background: #2E59A5 !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(46, 89, 165, .38);
    position: relative;
}

/* O preço do dia precisa continuar legível sobre o azul. */
#calendar-inline .fnv-day.selecionado .fnv-day-preco,
#calendar-inline .fnv-day.selecionado .fnv-day-num {
    color: #fff !important;
}

/* Só o dia clicável reage ao ponteiro — dia fechado ou passado dando
   feedback de clique promete o que não acontece. */
#calendar-inline .fnv-day.aberto:hover,
#calendar-inline .fnv-day.feriado:hover,
#calendar-inline .fnv-day.alta_temporada:hover {
    background: #eef3fb;
    cursor: pointer;
}

#calendar-inline .fnv-day.selecionado:hover {
    background: #2E59A5 !important;
}

/* ── Desktop ───────────────────────────────────────────────────────────
   A coluna do widget rola sozinha; as duas seções cabem juntas. */

@media (min-width: 992px) {
    .booking-widget {
        display: flex;
        flex-direction: column;
    }

    /* O total gruda no rodapé da coluna: com o calendário sempre aberto a
       coluna ficou mais alta, e o botão de comprar não pode depender de
       rolar até o fim para aparecer.

       Fundo SÓLIDO, não gradiente: com gradiente os ingressos rolavam por
       trás e apareciam através do bloco, encavalados no total e no botão. A
       borda no topo separa sem depender de transparência. */
    .booking-widget .total-box {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        margin-left: -25px;
        margin-right: -25px;
        padding: 16px 25px 4px;
        background: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 -8px 20px rgba(255, 255, 255, .9);
    }
}

/* ── Celular ───────────────────────────────────────────────────────────
   Calendário e ingressos na MESMA tela, em coluna, com rolagem vertical.
   Sem sanfona: nada colapsa, nada precisa ser reaberto. */

@media (max-width: 991px) {
    .booking-step {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .booking-step__head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 0;
        background: #fff;
    }

    #calendar-inline {
        max-width: 360px;
        margin: 0 auto;
    }

    /* O total acompanha a rolagem: a lista de ingressos pode ser longa e o
       botão de comprar não pode ficar só lá no fim. */
    .booking-widget .total-box {
        position: sticky;
        bottom: 0;
        margin: 0 -20px -60px;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 -8px 20px rgba(0, 0, 0, .08);
        z-index: 5;
    }
}

/* ── Nome do ingresso ──────────────────────────────────────────────────
   Sem o "Passaporte" repetido em toda linha, sobra largura para o nome que
   de fato distingue as opções. */

.visitor-name {
    font-weight: 600;
    line-height: 1.25;
}