/* ============================================================
#reserva: de coluna sticky de 300px na lateral direita para
barra horizontal fixa no fundo da tela — igual ao widget de
busca do Booking.com (tarefa #22/#24), so que sempre grudada
no rodape da viewport (#27), em qualquer largura de tela.
A barra (form) fica fixa desde o carregamento da pagina — nao
depende de rolagem. Os selos de confianca (.reserva-extra) e as
abas de secao NAO sao fixos: ficam no fluxo normal, logo apos a
galeria (onde a barra "nasceria" se nao fosse sempre-fixa).
Carrega por ultimo no header.php: vence style.min.css e
hero-booking.css em regras de mesma especificidade.
============================================================ */
/* ---------- reset da antiga sidebar (300px, position:absolute) ---------- */
body.single-hotel #reserva {
position: static; float: left; /* mantem float:left = resto dos .block do tema */
}
body.single-hotel #reserva section {
position: static; top: auto; right: auto; width: 100%; margin-right: 0;
border-radius: 0; box-shadow: none; background: transparent;
}
/* a faixa azul vai de ponta a ponta, como o #header — quem se limita aos
1220px do tema e o conteudo dentro dela (.reserva-bar) e os selos abaixo */
body.single-hotel #reserva section article {
display: block; width: 100%; max-width: none; margin: 0; padding: 0;
}
body.single-hotel #reserva .reserva-extra {
width: 1220px; max-width: 100%; margin: 0 auto;
}
/* o tema tinha "aside#reserva{display:none}" abaixo de 1220px (era so pro
#float-reservar antigo) — a barra agora precisa ficar visivel sempre */
aside#reserva { display: block !important; }
#float-reservar { display: none !important; } /* markup antigo, nao existe mais */
/* ---------- neutraliza a classe .mobile ----------
style.css/style.min.css ainda trazem "#reserva.mobile{position:absolute
!important; top:0; z-index:9900}", do tempo em que o #float-reservar abria a
coluna lateral por cima da pagina. Se alguem voltar a por essa classe no
#reserva, a barra sai do fluxo e cobre a galeria. Aqui a especificidade e
maior, entao o layout da barra prevalece. */
body.single-hotel #reserva.mobile { position: static !important; top: auto; z-index: auto; }
body.single-hotel #reserva.mobile section { position: static; top: auto; left: auto; width: 100%; margin: 0; }
/* a barra e alvo de ancora (CTA do pop-up de mapa e do lightbox de fotos):
para abaixo do #header fixo, como as demais secoes (polimento.css) */
body.single-hotel #reserva { scroll-margin-top: 90px; }
/* ---------- a barra: so o form (datas + hospedes + botao) ----------
Faixa azul de largura total, igual ao #header. Altura reduzida e visual
mais minimalista (tarefa #26, com novo corte a pedido do cliente em
27/07): padding menor, sombra mais discreta e rotulos compactos (ver
".reserva-bar strong" abaixo). */
body.single-hotel #reserva .reserva-sticky-wrap {
margin: 16px 0; padding: 10px; background-color: var(--blue);
box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
/* ---------- fixa no FUNDO da tela desde o carregamento da pagina (#25/#27) ----------
A barra (form) e SEMPRE fixa, colada no rodape da viewport, em qualquer
largura de tela — nao depende mais de rolagem (script no fim de
parts/reserva.php poe ".qs-fixed" direto no load). Os selos de confianca
e as abas de secao seguem no fluxo normal.
Ate 27/07 ela nascia no fluxo (logo abaixo da galeria) e so virava fixa
depois que o visitante rolava, colada no topo (abaixo do #header). Virou
sempre-fixa, no fundo, a pedido do cliente — sem tratamento especial por
tamanho de tela: o layout responsivo abaixo (1100/680px) ja cuida de
encolher/empilhar os campos, entao "sempre fixa" vale em qualquer largura.
Como a barra sai do fluxo assim que a pagina carrega (nunca mais fica
"no meio da pagina"), o ganha um padding-bottom do tamanho dela
(--qs-reserva-h, medido pelo JS) pra nao esconder o rodape do site atras
dela pra sempre. */
body.single-hotel { padding-bottom: var(--qs-reserva-h, 74px); }
body.single-hotel #reserva .reserva-sticky-wrap.qs-fixed {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 8000;
margin: 0; border-top: 1px solid rgba(255,255,255,.22);
}
/* na pagina de hotel o botao Reservar de verdade e o da barra (fixa no
fundo); o do header some sempre aqui, nao so quando a barra esta fixa —
os dois juntos, em qualquer estado, seriam redundantes. */
body.single-hotel #qs-header-reservar { display: none; }
/* dentro da faixa (fixa ou nao) o form segue a mesma coluna de 1220px do tema.
O