/* ==========================================================================
   PÍLULA DE RESERVA — a barra do celular (tarefa #19)

   Uma pílula de 48 px no rodapé, e uma folha inferior com calendário de
   intervalo e botões − / + de 44 px.

   Marcação: parts/reserva-pilula.php
   Script:   assets/js/reserva-pilula.js

   Carrega pelo wp_enqueue_style (inc/reserva-pilula.php), depois da lista
   de CSS do header.php — então vence reserva-horizontal.css nas regras de
   mesma especificidade, que é o que precisa acontecer para a barra
   horizontal dar lugar à pílula no celular.

   As cores vêm dos tokens do tema (style.min.css). Os fallbacks não são
   enfeite: a pílula também é impressa em páginas que não carregam a folha
   de estilo antiga.
   ========================================================================== */

.qs-rp {
  --qs-rp-azul:  var(--blue, #005190);
  --qs-rp-navy:  var(--darkblue, #00457A);
  --qs-rp-ouro:  var(--yellow, #FBB343);
  --qs-rp-linha: #E2E6EA;
  --qs-rp-cinza: #6B7885;

  font-family: 'Montserrat', Arial, sans-serif;
  box-sizing: border-box;
}
.qs-rp *, .qs-rp *::before, .qs-rp *::after { box-sizing: border-box; }


/* ==========================================================================
   A PÍLULA
   Dois controles: a informação (abre a folha) e "Ver preços" (vai ao
   motor). 48 px de altura é o teto — o alvo de toque de cada um ocupa a
   pílula inteira em altura, e não só o texto.
   ========================================================================== */

.qs-rp-pilula {
  display: flex; align-items: stretch; gap: 6px;
  height: 48px; padding: 4px;
  background: #fff; border-radius: 26px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}

.qs-rp-abrir {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0 6px 0 12px;
  background: none; border: 0; border-radius: 22px;
  font: inherit; color: var(--qs-rp-navy); text-align: left;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.qs-rp-abrir:hover { background: #F2F6FA; }

.qs-rp-parte { display: flex; align-items: center; gap: 6px; min-width: 0; }
.qs-rp-icone { flex: none; color: var(--qs-rp-azul); }

/* duas linhas dentro de 40 px: o rótulo bem pequeno em cima e o valor
   embaixo — é o que dá para ler de relance sem a pílula passar de 48 px */
.qs-rp-texto  { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.qs-rp-rotulo {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--qs-rp-cinza);
}
.qs-rp-abrir b {
  font-size: 13px; font-weight: 700; color: var(--qs-rp-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* o ponto que separa as duas partes ("Datas · 2 hóspedes") */
.qs-rp-sep { flex: none; align-self: center; width: 1px; height: 22px; background: var(--qs-rp-linha); }

.qs-rp-ver {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px;
  background: var(--qs-rp-ouro); border: 0; border-radius: 22px;
  font: 700 13px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-navy);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.qs-rp-ver:hover  { background: #F5A62B; color: var(--qs-rp-navy); }
.qs-rp-ver.is-off { opacity: .45; cursor: default; }

/* o anel de foco do teclado: o do navegador desaparece dentro da pílula
   branca, e ele é a única pista de onde o foco está */
.qs-rp button:focus-visible,
.qs-rp a:focus-visible,
.qs-rp [tabindex]:focus-visible {
  outline: 2px solid var(--qs-rp-azul); outline-offset: 2px;
}


/* ==========================================================================
   A FOLHA INFERIOR
   position:fixed, então abrir não mexe no fluxo da página: nenhum layout
   shift. A caixa entra deslizando de baixo; quem pediu menos movimento no
   sistema recebe ela pronta, sem animação.
   ========================================================================== */

/* z-index acima do header (9000), da barra de reserva (8000) e do botão
   flutuante de WhatsApp (1000000, assets/css/whatsapp-botao.css) — os três
   ficariam por cima da folha. E abaixo do banner de cookies (1000010), que
   sobe para o meio da tela no caminho do motor (assets/js/core.js). */
.qs-rp-folha { position: fixed; inset: 0; z-index: 1000005; }
.qs-rp-folha[hidden] { display: none; }

.qs-rp-fundo {
  position: absolute; inset: 0;
  background: rgba(0, 20, 40, .5);
  opacity: 0; transition: opacity .2s ease;
}
.qs-rp-folha.is-aberta .qs-rp-fundo { opacity: 1; }

.qs-rp-caixa {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  /* 92vh e não 100%: a folha nunca cobre a tela inteira, o pedaço de
     página que sobra em cima é o que diz que ela fecha */
  max-height: 92vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .25);
  transform: translateY(100%);
  transition: transform .22s ease;
}
.qs-rp-folha.is-aberta .qs-rp-caixa { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .qs-rp-caixa, .qs-rp-fundo { transition: none; }
}

/* a página atrás não rola enquanto a folha está aberta: sem isso o dedo
   passa a arrastar o fundo assim que o calendário chega ao fim */
body.qs-rp-travado { overflow: hidden; }

/* ---------- cabeçalho: alça + título + fechar ---------- */

.qs-rp-cabeca {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 52px 12px;
  border-bottom: 1px solid var(--qs-rp-linha);
  /* o arrasto é daqui: sem isso o navegador rola a página no gesto */
  touch-action: none;
}
.qs-rp-alca {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 2px; background: #D3DAE1;
}
.qs-rp-cabeca strong {
  font: 700 15px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-navy);
}
.qs-rp-fechar {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--qs-rp-cinza); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.qs-rp-fechar:hover { background: #F2F6FA; }

/* ---------- corpo: o único pedaço que rola ---------- */

.qs-rp-corpo {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* o gesto não "vaza" para a página atrás */
  padding: 12px 16px 16px;
}

/* ---------- os dois chips do período ---------- */

.qs-rp-chips {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.qs-rp-chip {
  flex: 1 1 0; min-width: 0;
  padding: 8px 12px;
  background: #F6F8FA; border: 1px solid var(--qs-rp-linha); border-radius: 10px;
}
/* o chip do que o próximo toque preenche */
.qs-rp-chip.is-ativo { border-color: var(--qs-rp-azul); box-shadow: inset 0 0 0 1px var(--qs-rp-azul); background: #fff; }
.qs-rp-chip small {
  display: block;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--qs-rp-cinza);
}
.qs-rp-chip b {
  display: block; font-size: 14px; font-weight: 700; color: var(--qs-rp-navy);
  text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- o calendário ---------- */

/* position:relative porque o JS usa offsetTop dos meses para abrir a
   folha já no mês da entrada */
.qs-rp-cal { position: relative; }

.qs-rp-mes { margin-bottom: 18px; }
.qs-rp-mes-nome {
  margin: 0 0 6px; padding: 0;
  font: 700 13px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-navy);
  text-transform: capitalize;
}

.qs-rp-grade { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qs-rp-grade th {
  padding: 0 0 4px;
  font: 700 10px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-cinza);
  text-align: center;
}

/* 44 px de alvo em cada dia: o pedido da tarefa e o mínimo para o dedo
   não errar de dia. A largura sai da tabela (7 colunas iguais). */
.qs-rp-dia {
  height: 44px; padding: 0;
  font: 600 14px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-navy);
  text-align: center; vertical-align: middle;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qs-rp-dia:hover { background: #EEF4F9; border-radius: 8px; }
.qs-rp-dia.is-passado { color: #C4CCD4; cursor: default; }
.qs-rp-dia.is-passado:hover { background: none; }
.qs-rp-vazio { height: 44px; }

.qs-rp-dia.is-meio { background: #E6F0F8; }
.qs-rp-dia.is-entrada,
.qs-rp-dia.is-saida {
  background: var(--qs-rp-azul); color: #fff; font-weight: 700;
}
/* as pontas arredondadas de um lado só desenham o intervalo como uma
   faixa contínua, e não como duas bolas soltas */
.qs-rp-dia.is-entrada { border-radius: 8px 0 0 8px; }
.qs-rp-dia.is-saida   { border-radius: 0 8px 8px 0; }
.qs-rp-dia.is-entrada.is-saida { border-radius: 8px; }
.qs-rp-dia.is-entrada:hover,
.qs-rp-dia.is-saida:hover { background: var(--qs-rp-navy); }

/* o aviso é para o leitor de tela (role=status); o texto visível do
   estado é o do rodapé */
.qs-rp-aviso {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- hóspedes ---------- */

.qs-rp-hospedes { margin-top: 4px; border-top: 1px solid var(--qs-rp-linha); }
.qs-rp-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
}
.qs-rp-linha + .qs-rp-linha { border-top: 1px solid var(--qs-rp-linha); }
.qs-rp-linha-nome { display: flex; flex-direction: column; min-width: 0; }
.qs-rp-linha-nome strong { font: 700 14px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-navy); }
.qs-rp-linha-nome small  { font-size: 11px; color: var(--qs-rp-cinza); }

.qs-rp-passo { flex: none; display: flex; align-items: center; gap: 4px; }
.qs-rp-passo button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  background: #fff; border: 1px solid var(--qs-rp-azul); border-radius: 50%;
  color: var(--qs-rp-azul); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.qs-rp-passo button:hover { background: #EEF4F9; }
.qs-rp-passo button:disabled { border-color: var(--qs-rp-linha); color: #C4CCD4; cursor: default; background: #fff; }
.qs-rp-valor {
  min-width: 34px; text-align: center;
  font: 700 15px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-navy);
}

/* ---------- rodapé da folha ---------- */

.qs-rp-rodape {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  /* o respiro da barra de gestos do iPhone; 0 onde ela não existe */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--qs-rp-linha);
  background: #fff;
}
.qs-rp-noites { font: 600 13px 'Montserrat', Arial, sans-serif; color: var(--qs-rp-cinza); }
.qs-rp-ver--folha { min-height: 46px; padding: 0 26px; font-size: 14px; }


/* ==========================================================================
   NA PÁGINA DE HOTEL
   A pílula mora dentro da faixa fixa do rodapé (.reserva-sticky-wrap), no
   lugar da barra horizontal — que segue mandando no desktop. O corte é o
   mesmo 680 px do resto do tema.
   ========================================================================== */

.qs-rp--barra { display: none; }

@media (max-width: 680px) {
  /* a barra de três linhas dá lugar à pílula */
  body.single-hotel #reserva .reserva-bar { display: none; }
  .qs-rp--barra { display: block; }

  /* a faixa azul encolhe junto: só a pílula e o respiro do iPhone.
     O --qs-reserva-h que o <script> de parts/reserva.php mede sai
     daqui, e com ele o padding do <body> e o botão de WhatsApp. */
  body.single-hotel #reserva .reserva-sticky-wrap.qs-fixed {
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* Fora da barra do rodapé (uma página de data comemorativa, um bloco no
   meio do texto) a pílula aparece em qualquer largura — e aí tem largura
   de leitura, não a da tela inteira. */
.qs-rp:not(.qs-rp--barra) .qs-rp-pilula { max-width: 560px; }

/* A folha no desktop: uma caixa centrada, e não uma folha de ponta a
   ponta. Dois meses lado a lado, que é o que a largura permite. */
@media (min-width: 681px) {
  .qs-rp-caixa {
    left: 50%; right: auto; bottom: 0;
    width: 620px; max-width: calc(100vw - 40px);
    transform: translate(-50%, 100%);
    border-radius: 18px 18px 0 0;
  }
  .qs-rp-folha.is-aberta .qs-rp-caixa { transform: translate(-50%, 0); }

  .qs-rp-cal { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .qs-rp-cabeca { touch-action: auto; }   /* no desktop não há arrasto */
}