/* ============================================================ PAINEL DO BOTAO RESERVAR DO HEADER (tarefa #55) Marcacao: parts/reserva-header.php · Script: assets/js/reserva-header.js ------------------------------------------------------------ Abre por cima da pagina, colado abaixo do header fixo — nada do conteudo se move. O header continua visivel e clicavel: o painel comeca onde ele termina (--qs-header-h, medido pelo JS). Z-INDEX: 8900, abaixo do #header (9000). O calendario nasce no com "z-index: 8500 !important" (calendario.css) e ficaria ATRAS do painel — por isso a regra do fim deste arquivo o sobe enquanto o painel esta aberto, com especificidade maior. Carrega por wp_enqueue_style (inc/reserva.php), depois do style.min.css do tema. Breakpoints do tema: 1220 / 970 / 680. ============================================================ */ .qs-rh { position: fixed; z-index: 8900; top: var(--qs-header-h, 56px); right: 0; bottom: 0; left: 0; display: none; font: normal 16px 'Montserrat', sans-serif; color: var(--black, #444); } .qs-rh.is-open { display: block; } .qs-rh[hidden] { display: none; } body.qs-rh-aberto { overflow: hidden; } /* o botao flutuante de WhatsApp usa z-index 1000000 e ficaria por cima (#qs-whatsapp e o do tema; #arcontactus, o do plugin que ele substituiu) */ body.qs-rh-aberto #qs-whatsapp, body.qs-rh-aberto #arcontactus { display: none !important; } .qs-rh-fundo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s ease; } .qs-rh.is-open .qs-rh-fundo { opacity: 1; } .qs-rh-painel { position: relative; width: 100%; max-width: 620px; max-height: 100%; margin: 0 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 22px 24px; background: #fff; border-radius: 0 0 14px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(-10px); transition: opacity .18s ease, transform .18s ease; } .qs-rh.is-open .qs-rh-painel { opacity: 1; transform: none; } .qs-rh-fechar { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: transparent; color: #4a4a4a; cursor: pointer; transition: background .2s ease; } .qs-rh-fechar:hover { background: #f0f2f5; } .qs-rh-head { margin: 0 34px 16px 0; } .qs-rh-head strong { display: block; margin-bottom: 4px; font: 700 20px/1.25 'Montserrat', sans-serif; color: var(--darkblue, #0F416E); } .qs-rh-head p { font-size: 13.5px; line-height: 1.5; color: #4a4a4a; } /* ---------- rotulo dos campos ---------- */ .qs-rh-campo { margin-bottom: 14px; } /* o rotulo cabe sempre em UMA linha: "Criança(s) até 12 anos" em duas empurrava so aquele campo para baixo, e os tres inputs de hospedes terminavam em alturas diferentes */ .qs-rh-campo > strong, .qs-rh-campo label > strong { display: block; margin-bottom: 5px; font: 700 10px/1.2 'Montserrat', sans-serif; color: #7b8697; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qs-rh-campo label > strong small { margin-left: 3px; font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #9aa3ae; } /* ---------- hotel ---------- */ .qs-rh-hoteis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .qs-rh-hotel { display: block; width: 100%; padding: 10px 12px; text-align: left; background: #fff; border: 1px solid var(--border, #E2E6EA); border-radius: 8px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .qs-rh-hotel span { display: block; font: 700 13px/1.3 'Montserrat', sans-serif; color: var(--darkblue, #0F416E); } .qs-rh-hotel small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3; color: #7b8697; } .qs-rh-hotel:hover { border-color: #C4CBD2; } .qs-rh-hotel.on { border-color: var(--blue, #005190); background: var(--surface-blue, #EEF4F9); box-shadow: inset 0 0 0 1px var(--blue, #005190); } /* ---------- datas: os mesmos chips da barra da pagina de hotel ---------- */ .qs-rh .reserva-dates { position: relative; display: block; } /* o input real fica invisivel POR CIMA dos dois chips: clique em qualquer um deles abre o calendario, como na barra (reserva-horizontal.css) */ .qs-rh .reserva-dates input[name="qs-rh-dates"] { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; padding: 0; background: none; opacity: 0; cursor: pointer; } .qs-rh .reserva-dates-chips { display: flex; height: 46px; background: #fff; border: 1px solid var(--border, #E2E6EA); border-radius: 8px; overflow: hidden; transition: box-shadow .15s ease; } .qs-rh .reserva-dates.is-open .reserva-dates-chips { box-shadow: 0 0 0 2px var(--yellow, #FBB343); } .qs-rh .reserva-date-chip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; } .qs-rh .reserva-date-chip + .reserva-date-chip { border-left: 1px solid var(--border, #E2E6EA); } .qs-rh .reserva-date-chip small { display: block; font: 600 9px/1.4 'Montserrat', sans-serif; color: #8a8a8a; text-transform: uppercase; letter-spacing: .02em; } .qs-rh .reserva-date-chip b { display: block; font: 700 14px/1.3 'Montserrat', sans-serif; color: var(--darkblue, #0F416E); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qs-rh .reserva-date-chip.is-active { background: var(--surface-blue, #EEF4F9); } .qs-rh .reserva-date-chip.is-active small { color: var(--blue, #005190); } /* ---------- hospedes ---------- */ .qs-rh-campo--hospedes { display: flex; align-items: flex-end; gap: 8px; } .qs-rh-campo--hospedes label { flex: 1 1 0; min-width: 0; } .qs-rh .qtd { position: relative; display: block; height: 46px; } .qs-rh .qtd input[type=text] { width: 100%; height: 46px; padding: 0 58px 0 12px; background: #fff; border: 1px solid var(--border, #E2E6EA); border-radius: 8px; /* 16px: abaixo disso o iOS da zoom ao focar o campo */ font: 700 16px/46px 'Montserrat', sans-serif; color: var(--darkblue, #0F416E); cursor: default; } .qs-rh .qtd b { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; transform: translateY(-50%); cursor: pointer; } .qs-rh .qtd b.menos { right: 32px; } /* "rel" invertido no markup: menos = somar */ .qs-rh .qtd b.mais { right: 4px; } .qs-rh .qtd b img { width: 10px; height: auto; } .qs-rh .qtd b:hover { background: rgba(0, 0, 0, .06); } .qs-rh .qtd b.qs-limite { opacity: .35; cursor: default; } .qs-rh .qtd b.qs-limite:hover { background: none; } /* ---------- botao ---------- */ .qs-rh-submit { display: block; width: 100%; height: 48px; margin-top: 4px; background: var(--yellow, #FBB343); color: var(--darkblue, #0F416E); border-radius: 8px; cursor: pointer; font: 700 15px/48px 'Montserrat', sans-serif; transition: background .2s ease; } .qs-rh-submit:hover { background: #ffc46a; } /* ---------- telas pequenas ---------- */ @media (max-width: 680px) { .qs-rh-painel { padding: 16px 16px 20px; border-radius: 0 0 12px 12px; } .qs-rh-head strong { font-size: 18px; } .qs-rh-hoteis { grid-template-columns: 1fr; } .qs-rh-campo--hospedes { gap: 6px; } .qs-rh .qtd input[type=text] { padding: 0 52px 0 8px; } .qs-rh .qtd b.menos { right: 28px; } .qs-rh .reserva-date-chip { padding: 0 10px; } } /* ---------- o calendario por cima do painel ---------- calendario.css fixa "z-index: 8500 !important" (numero escolhido para o painel ficar acima da barra de reserva da pagina de hotel, que e 8000). Aqui o painel esta em 8900, entao o calendario precisa subir — com um seletor mais especifico que o de la, ja que os dois usam !important. */ body.qs-rh-aberto .daterangepicker.qs-drp.qs-drp { z-index: 8950 !important; }