/* ========================================================================== BARRA DE RESERVA NO RODAPÉ, FORA DA PÁGINA DE HOTEL (tarefa #20) A faixa que leva a pílula (assets/css/reserva-pilula.css) às avaliações, aos posts e às páginas institucionais. Mesma altura, mesma cor e mesmo corte de largura da faixa da página de hotel (assets/css/reserva-horizontal.css), para as duas serem lidas como a mesma barra em páginas diferentes. Marcação: parts/reserva-barra.php Lógica: inc/reserva-barra.php Carrega depois de reserva-pilula.css (a dependência está no wp_enqueue_style), então vence nas regras de mesma especificidade. ========================================================================== */ /* Acima de 680 px não há faixa nenhuma: ali o botão Reservar do header abre o painel de hotel/datas/hóspedes (assets/css/reserva-header.css), e uma barra fixa comeria a coluna de leitura. A pílula dentro dela já se esconde sozinha (.qs-rp--barra), mas a faixa pintaria uma tira azul vazia no fundo da tela. */ .qs-rb { display: none; } @media (max-width: 680px) { .qs-rb { position: fixed; right: 0; bottom: 0; left: 0; display: block; padding: 8px 12px; /* o respiro da barra de gestos do iPhone, como na página de hotel */ padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--blue, #005190); border-top: 1px solid rgba(255, 255, 255, .22); /* a mesma altura da faixa da página de hotel: acima do conteúdo e do header (9000 é o header; a faixa de reserva sempre andou em 8000), abaixo do botão de WhatsApp (1000000) e do banner de cookies */ z-index: 8000; transition: transform .22s ease; } /* 48 px de pílula + 8 px de cada lado. O espaço é reservado desde a carga, senão o rodapé do site fica escondido atrás da faixa. */ body.qs-tem-barra-reserva { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* O painel do WhatsApp se ancora no #qs-whatsapp, que fica no canto de sempre: com a faixa em cena ele sobe, senão abre por baixo dela. É o que body.single-hotel já faz com o --qs-reserva-h medido pelo JS. */ body.qs-tem-barra-reserva .qs-wa { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } /* Teclado aberto: a faixa cobriria o campo que está sendo preenchido. Quem liga a classe no é o assets/js/barra-celular.js, que entra em toda página justamente por causa disto. */ .qs-teclado .qs-rb { transform: translateY(100%); } /* Banner de cookies ainda sem resposta: ele mora no mesmo canto, num degrau acima (1000010), e cobriria a faixa. Mesma regra da barra de ação (assets/css/barra-celular.css) — e o espaço no fica reservado mesmo assim: devolvê-lo agora e tomá-lo de volta no "aceitar" mexeria na página que a pessoa está lendo. */ .qs-consent-pendente .qs-rb, .qs-consent-pedido .qs-rb { display: none; } }