viram inline-block com padding de 40px, o nome do
mes vai para position:absolute e a celula tem 41px de altura
fixa. Em tela pequena isso estourava a largura, e o
responsive.css ainda escondia o segundo mes abaixo de 1220px
e dava "width:calc(100% - 40px) !important" ao painel.
Este arquivo passa na frente dos dois sem depender da ordem de
carga: todo seletor comeca por ".daterangepicker.qs-drp.qs-drp"
(a classe .qs-drp e posta pelo JS em parts/reserva.php; repetir
a classe e so um jeito de subir a especificidade sem espalhar
!important). O !important aparece apenas onde o tema antigo
tambem usa — entre dois !important vence o mais especifico.
O painel e posicionado por JS (qsPosicionaCalendario, em
parts/reserva.php): position:fixed ancorado ACIMA da barra de
reserva, que e fixa no fundo da tela. Sem isso ele abria abaixo
do campo, fora da area visivel, e obrigava a rolar a pagina.
Carrega por ultimo no header.php.
Breakpoints do tema: 1220 / 970 / 680 (aqui tambem 720, largura
em que os dois meses deixam de caber lado a lado).
============================================================ */
/* ============================================================
1. ESTRUTURA
============================================================ */
.daterangepicker.qs-drp.qs-drp {
position: absolute;
display: none;
/* acima da barra de reserva (8000); com !important porque o responsive.css
do tema joga o calendario para 9999 abaixo de 1220px */
z-index: 8500 !important;
width: auto;
margin: 0;
padding: 0;
background: #fff;
color: var(--black, #444);
font-family: 'Montserrat', Arial, sans-serif;
font-size: 13px;
line-height: 1.2;
text-align: left;
border: 1px solid var(--border, #E2E6EA);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
/* Telas muito baixas (celular deitado): em vez de o painel subir por tras do
header, os meses rolam por dentro e o rodape (noites + Confirmar) fica
sempre a vista. O que embrulha os dois meses e criado pelo JS
(parts/reserva.php), que tambem calcula o max-height — so ele sabe a altura
da barra de reserva. */
.daterangepicker.qs-drp.qs-drp .qs-drp-scroll {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* a setinha do plugin apontava para o campo; o painel agora e ancorado
na barra inteira, nao no input, entao ela nao aponta para lugar nenhum */
.daterangepicker.qs-drp.qs-drp:before,
.daterangepicker.qs-drp.qs-drp:after { display: none; }
/* atalhos de periodo ("Ultimos 7 dias"...) e seletor de hora: nao usamos */
.daterangepicker.qs-drp.qs-drp .ranges,
.daterangepicker.qs-drp.qs-drp .calendar-time { display: none !important; }
.daterangepicker.qs-drp.qs-drp .drp-calendar {
display: none;
float: left;
width: 50%;
max-width: none !important; /* tema antigo: 360px */
padding: 16px 16px 8px !important;
}
.daterangepicker.qs-drp.qs-drp.show-calendar .drp-calendar { display: block; }
.daterangepicker.qs-drp.qs-drp .drp-calendar.right { border-left: 1px solid var(--border, #E2E6EA); }
/* o tema antigo separava os meses com .drp-calendar.left{border-right} */
.daterangepicker.qs-drp.qs-drp .drp-calendar.left { border-right: none; }
.daterangepicker.qs-drp.qs-drp .calendar-table {
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0;
}
.daterangepicker.qs-drp.qs-drp .calendar-table table {
width: 100%;
table-layout: fixed;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
}
/* desfaz o "thead/tbody como inline-block com padding de 40px" do tema antigo */
.daterangepicker.qs-drp.qs-drp .calendar-table thead {
position: static;
display: table-header-group !important;
width: auto !important;
padding: 0 !important;
background: transparent !important;
}
.daterangepicker.qs-drp.qs-drp .calendar-table tbody {
display: table-row-group !important;
width: auto !important;
padding: 0 !important;
}
.daterangepicker.qs-drp.qs-drp .calendar-table thead tr,
.daterangepicker.qs-drp.qs-drp .calendar-table tbody tr {
display: table-row !important;
margin: 0 !important;
}
.daterangepicker.qs-drp.qs-drp .calendar-table th,
.daterangepicker.qs-drp.qs-drp .calendar-table td {
width: 14.28% !important;
min-width: 0;
height: 36px !important;
padding: 0 !important;
border: none !important;
background-color: transparent;
color: inherit;
font-family: inherit;
font-size: 13px !important;
font-weight: 400;
line-height: 36px !important;
text-align: center;
vertical-align: middle;
white-space: nowrap;
cursor: default;
}
/* ---------- cabecalho de cada mes: < Julho 2026 > ---------- */
/* com "table-layout:fixed" quem define as colunas e a PRIMEIRA linha da
tabela — que e [prev][mes com colspan=5][next]. Deixar o mes com os mesmos
14,28% das outras celulas espremia as cinco colunas do meio num so espaco
de coluna: "TERQUAQUISEXSÁB" grudado e os numeros amontoados. */
.daterangepicker.qs-drp.qs-drp .calendar-table th.month {
width: 71.44% !important; /* 5 colunas de 14,28% */
position: static !important;
left: auto;
transform: none;
color: var(--darkblue, #0F416E);
font-family: inherit;
font-weight: 700;
font-size: 14px !important;
text-transform: capitalize;
}
.daterangepicker.qs-drp.qs-drp .calendar-table th.prev,
.daterangepicker.qs-drp.qs-drp .calendar-table th.next {
position: static !important;
top: auto; right: auto;
border-radius: 50%;
}
.daterangepicker.qs-drp.qs-drp .calendar-table th.prev.available,
.daterangepicker.qs-drp.qs-drp .calendar-table th.next.available { cursor: pointer; }
.daterangepicker.qs-drp.qs-drp .calendar-table th.prev.available:hover,
.daterangepicker.qs-drp.qs-drp .calendar-table th.next.available:hover { background-color: var(--surface-blue, #EEF4F9); }
.daterangepicker.qs-drp.qs-drp .calendar-table th.prev span,
.daterangepicker.qs-drp.qs-drp .calendar-table th.next span {
display: inline-block;
width: 8px; height: 8px;
padding: 0;
border: solid var(--blue, #005190);
border-width: 0 2px 2px 0;
border-radius: 0;
vertical-align: middle;
}
.daterangepicker.qs-drp.qs-drp .calendar-table th.prev span { transform: rotate(135deg); margin-left: 3px; }
.daterangepicker.qs-drp.qs-drp .calendar-table th.next span { transform: rotate(-45deg); margin-right: 3px; }
/* mes anterior bloqueado pelo minDate: o plugin tira a classe "available" */
.daterangepicker.qs-drp.qs-drp .calendar-table th.prev:not(.available) span,
.daterangepicker.qs-drp.qs-drp .calendar-table th.next:not(.available) span { border-color: #CFD6DD; }
/* ---------- linha dos dias da semana ---------- */
.daterangepicker.qs-drp.qs-drp .calendar-table thead tr:nth-of-type(2) th {
width: 14.28% !important;
height: 30px !important;
margin-top: 0 !important;
border-radius: 0 !important;
color: #8A8A8A;
font-weight: 600;
font-size: 10px !important;
line-height: 30px !important;
letter-spacing: .04em;
text-transform: uppercase;
cursor: default;
}
/* ============================================================
2. OS DIAS
============================================================ */
.daterangepicker.qs-drp.qs-drp td.available { cursor: pointer; border-radius: 8px; }
.daterangepicker.qs-drp.qs-drp td.available:hover { background-color: var(--surface-blue, #EEF4F9); color: var(--darkblue, #0F416E); }
/* dias do mes vizinho e datas passadas (minDate) */
.daterangepicker.qs-drp.qs-drp td.off {
opacity: 1;
color: #C4CBD2;
background-color: transparent !important;
}
.daterangepicker.qs-drp.qs-drp td.disabled {
color: #C4CBD2;
background-color: transparent !important;
cursor: default;
text-decoration: none;
}
/* hoje, quando nao esta selecionado: so um anel */
.daterangepicker.qs-drp.qs-drp td.today:not(.active):not(.off) {
box-shadow: inset 0 0 0 1px var(--blue, #005190);
font-weight: 700;
}
/* miolo do periodo: faixa clara continua (o tema antigo pintava tudo de azul
forte, o que deixava as pontas indistinguiveis do meio) */
.daterangepicker.qs-drp.qs-drp td.in-range {
background-color: var(--surface-blue, #EEF4F9) !important;
color: var(--darkblue, #0F416E) !important;
border-radius: 0;
}
.daterangepicker.qs-drp.qs-drp td.in-range.off {
background-color: transparent !important;
color: #C4CBD2 !important;
}
/* pontas: entrada e saida */
.daterangepicker.qs-drp.qs-drp td.active,
.daterangepicker.qs-drp.qs-drp td.active:hover {
position: relative;
z-index: 1;
background-color: var(--blue, #005190) !important;
border: none !important;
color: #fff !important;
font-weight: 700;
}
/* a mesma data aparece nos dois meses (como dia "de fora" do vizinho); pintar
as duas mostrava uma selecao fantasma no mes ao lado */
.daterangepicker.qs-drp.qs-drp td.off.active {
background-color: transparent !important;
color: #C4CBD2 !important;
font-weight: 400;
}
.daterangepicker.qs-drp.qs-drp td.active.start-date { border-radius: 8px 0 0 8px !important; }
.daterangepicker.qs-drp.qs-drp td.active.end-date { border-radius: 0 8px 8px 0 !important; }
.daterangepicker.qs-drp.qs-drp td.active.start-date.end-date { border-radius: 8px !important; }
/* o tema antigo desenhava um circulo branco por baixo do dia ativo */
.daterangepicker.qs-drp.qs-drp td.active::after { display: none !important; content: none !important; }
/* ============================================================
3. RODAPE: noites + botoes
============================================================ */
.daterangepicker.qs-drp.qs-drp .drp-buttons {
display: none;
clear: both;
padding: 10px 16px !important;
border-top: 1px solid var(--border, #E2E6EA);
background-color: var(--surface, #F6F8FA);
text-align: right;
line-height: 1;
}
.daterangepicker.qs-drp.qs-drp.show-calendar .drp-buttons { display: block; }
/* o resumo do proprio plugin ("01/07 - 05/07") repetia os chips da barra;
quem informa aqui e o contador de noites abaixo */
.daterangepicker.qs-drp.qs-drp .drp-selected { display: none !important; }
.daterangepicker.qs-drp.qs-drp .qs-drp-noites {
float: left;
max-width: 55%;
color: var(--gray, #5A5A5A);
font-size: 12px;
font-weight: 600;
line-height: 34px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.daterangepicker.qs-drp.qs-drp .drp-buttons button {
display: inline-block;
width: auto;
height: 34px;
margin: 0 0 0 8px;
padding: 0 18px;
border: 1px solid transparent;
border-radius: 5px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
line-height: 32px;
text-transform: none;
cursor: pointer;
}
.daterangepicker.qs-drp.qs-drp .drp-buttons button.cancelBtn {
background-color: #fff;
border-color: var(--border, #E2E6EA);
color: var(--gray, #5A5A5A);
}
.daterangepicker.qs-drp.qs-drp .drp-buttons button.cancelBtn:hover { border-color: #C4CBD2; }
.daterangepicker.qs-drp.qs-drp .drp-buttons button.applyBtn {
background-color: var(--blue, #005190);
border-color: var(--blue, #005190);
color: #fff;
}
.daterangepicker.qs-drp.qs-drp .drp-buttons button.applyBtn:hover {
background-color: var(--darkblue, #0F416E);
border-color: var(--darkblue, #0F416E);
}
/* ============================================================
4. LARGURA E RESPONSIVO
------------------------------------------------------------
>= 720px : dois meses lado a lado, largura fixa de 592px.
< 720px : um mes so, ocupando a largura da tela menos as
margens (o "left/right" vem do JS).
============================================================ */
@media (min-width: 720px) {
.daterangepicker.qs-drp.qs-drp { width: 592px !important; }
/* o responsive.css do tema esconde o segundo mes ja abaixo de 1220px */
.daterangepicker.qs-drp.qs-drp.show-calendar .drp-calendar.right { display: block !important; }
}
@media (max-width: 719px) {
/* abaixo de 680px o tema dava "width: calc(100% - 40px) !important" ao painel */
.daterangepicker.qs-drp.qs-drp { width: auto !important; border-radius: 14px; }
.daterangepicker.qs-drp.qs-drp .drp-calendar {
float: none;
width: 100%;
padding: 14px 12px 6px !important;
}
/* um mes so: com "linkedCalendars:false" o mes da esquerda tem as duas
setas, entao da para chegar em qualquer data por ele */
.daterangepicker.qs-drp.qs-drp.show-calendar .drp-calendar.right { display: none !important; }
/* alvo maior para o dedo */
.daterangepicker.qs-drp.qs-drp .calendar-table th,
.daterangepicker.qs-drp.qs-drp .calendar-table td {
height: 42px !important;
line-height: 42px !important;
font-size: 14px !important;
}
.daterangepicker.qs-drp.qs-drp .calendar-table thead tr:nth-of-type(2) th {
height: 28px !important;
line-height: 28px !important;
font-size: 10px !important;
}
.daterangepicker.qs-drp.qs-drp .calendar-table th.month { font-size: 15px !important; }
.daterangepicker.qs-drp.qs-drp .drp-buttons { padding: 10px 12px !important; }
.daterangepicker.qs-drp.qs-drp .drp-buttons button { height: 40px; line-height: 38px; padding: 0 16px; }
.daterangepicker.qs-drp.qs-drp .qs-drp-noites { line-height: 40px; font-size: 11px; }
}
/* ============================================================
5. OS CHIPS DA BARRA ENQUANTO O CALENDARIO ESTA ABERTO
------------------------------------------------------------
Mostra em qual das duas datas o proximo clique vai cair — sem
isso o visitante clica no chip "Saida" e o calendario comeca
esperando a entrada, sem nenhum aviso.
============================================================ */
#reserva .reserva-dates-chips { transition: box-shadow .15s ease; }
#reserva .reserva-dates.is-open .reserva-dates-chips {
box-shadow: 0 0 0 2px var(--yellow, #FBB343);
}
#reserva .reserva-date-chip.is-active { background: var(--surface-blue, #EEF4F9); }
#reserva .reserva-date-chip.is-active small { color: var(--blue, #005190); }