/* ═══════════════════════════════════════════════════════════════════════════
   cds-calendario.css: o calendário de datas da Cabanas da Serra (js/cds-calendario.js).

   Dois meses lado a lado onde cabem (600 px ou mais de largura real), um mês onde não. No
   computador o painel abre logo abaixo do cartão de datas; no celular é uma folha que sobe do
   rodapé, com fundo escurecido e a rolagem da página presa. Cada dia é um botão com o número e o
   preço da noite; ocupado é riscado; a entrada e a saída são cheias em Verde Serra e o intervalo
   entre elas é uma faixa contínua em areia.

   Movimento: uma curva só (a --transition-base do cds-design.css, cubic-bezier(.4,0,.2,1)) e três
   durações, 200 / 450 / 700 ms. O painel entra "em foco" (desfoque leve que se resolve, 8 px de
   subida); a faixa entre as datas se preenche da esquerda para a direita, em fila, só no clique que
   fecha a estadia; a troca de mês desliza 16 px. Só opacity, transform e filter. Com movimento
   reduzido nada disso acontece.

   Cores só dos tokens do cds-design.css. Contraste medido no navegador (ver o PR): número do dia
   --serra-900 sobre branco, preço --stone-500 sobre branco (6,1:1) e sobre a faixa --cream-200.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cal-curva: cubic-bezier(.4, 0, .2, 1);
  --cal-t1: 200ms;
  --cal-t2: 450ms;
  --cal-t3: 700ms;
  --cal-celula: 46px;
}

/* ── o gatilho dentro do campo de data (o molde date-field continua igual por baixo) ── */
.date-field--calendario { cursor: pointer; }
.date-field__gatilho {
  position: absolute; inset: -2px; z-index: 2;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.date-field__gatilho:focus-visible { outline: 2px solid var(--ambar-600); outline-offset: 2px; }
.date-field--calendario:has(.date-field__gatilho[aria-expanded="true"]) {
  border-color: var(--ambar-500);
}

/* ── o painel (popover no computador, folha no celular) ── */
[data-cal-ancora] { position: relative; }
.cal-painel {
  position: absolute; z-index: 30; top: calc(100% + 10px); left: 0;
  /* Pode passar da largura do cartão (na reserva o cartão tem ~600 px e os dois meses pedem ~640). */
  width: min(760px, calc(100vw - 48px));
  /* Vidro claro denso (v10): o calendário é o pop-up principal do site. 92%, porque a grade tem muito número
     pequeno; o fio escuro fora da borda branca segura o contorno sobre o papel claro. */
  background: var(--vidro-claro-denso); color: var(--serra-900);
  -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur);
  border: 1px solid var(--vidro-claro-borda); border-radius: 6px;
  box-shadow: var(--luz-borda), 0 0 0 1px rgba(26, 37, 30, .08), var(--elev-4);
  padding: 18px 20px 16px;
}
.cal-painel[hidden] { display: none; }
/* Âncora no pé da tela (a barra de datas do tríptico da home): o painel abre PARA CIMA. */
[data-cal-acima] > .cal-painel:not(.cal-painel--folha) { top: auto; bottom: calc(100% + 10px); }
.cal-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cal-painel-titulo { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.15; color: var(--serra-900); }
.cal-fechar {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; color: var(--serra-800); cursor: pointer;
  transition: background-color var(--cal-t1) var(--cal-curva);
}
.cal-fechar:hover { background: var(--cream-100); }
.cal-fechar:focus-visible { outline: 2px solid var(--ambar-600); outline-offset: 2px; }
.cal-fechar svg, .cal-seta svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.cal-painel--folha {
  position: fixed; z-index: 70; top: auto; left: 0; right: 0; bottom: 0; width: auto;
  max-height: min(90svh, 760px); overflow: auto; overscroll-behavior: contain;
  border-radius: 10px 10px 0 0; border-bottom: 0;
  box-shadow: var(--luz-borda), 0 -18px 50px -12px rgba(18, 27, 22, .38);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.cal-painel--folha::before {
  content: ""; display: block; width: 44px; height: 4px; border-radius: 4px;
  background: var(--beige-dark); margin: 0 auto 10px;
}
.cal-fundo {
  position: fixed; inset: 0; z-index: 69;
  background: rgba(26, 37, 30, .42);
  -webkit-backdrop-filter: var(--vidro-blur-fundo); backdrop-filter: var(--vidro-blur-fundo);
}
.cal-fundo[hidden] { display: none; }
html.cal-trava, html.cal-trava body { overflow: hidden; }

/* ── a grade ── */
.cal { position: relative; }
.cal-topo {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 1;
  display: flex; justify-content: space-between; pointer-events: none;
}
.cal-seta {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--beige-dark); background: #fff; color: var(--serra-800); box-shadow: var(--elev-1);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--cal-t1) var(--cal-curva), border-color var(--cal-t1) var(--cal-curva), transform var(--cal-t1) var(--cal-curva);
}
.cal-seta:hover:not(:disabled) { background: var(--cream-100); border-color: var(--serra-700); }
.cal-seta:active:not(:disabled) { transform: scale(.96); }
.cal-seta:disabled { opacity: .35; cursor: default; }
.cal-seta:focus-visible { outline: 2px solid var(--ambar-600); outline-offset: 2px; }

.cal-meses { display: grid; grid-template-columns: 1fr; gap: 36px; }
.cal-meses[data-qtd="2"] { grid-template-columns: 1fr 1fr; }
.cal-mes-titulo {
  height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: .98rem; font-weight: 600; color: var(--serra-900);
  letter-spacing: .01em;
}
.cal-grade { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
.cal-grade th {
  font-size: .72rem; font-weight: 600; text-transform: lowercase; letter-spacing: .04em;
  color: var(--stone-500); padding: 6px 0 4px; text-align: center;
}
.cal-grade td { padding: 0; text-align: center; position: relative; }

.cal-dia {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--cal-celula); height: 50px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; border-radius: 4px; background: transparent; color: var(--serra-900);
  font: inherit; cursor: pointer;
  transition: background-color var(--cal-t1) var(--cal-curva), color var(--cal-t1) var(--cal-curva), transform var(--cal-t1) var(--cal-curva);
  -webkit-tap-highlight-color: transparent;
}
.cal-num { font-size: .95rem; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.cal-preco { font-size: .66rem; font-weight: 500; line-height: 1; color: var(--stone-500); font-variant-numeric: lining-nums tabular-nums; }
.cal-dia:hover:not(.is-off) { background: var(--cream-100); }
.cal-dia:active:not(.is-off) { transform: scale(.96); }
.cal-dia:focus-visible { outline: 2px solid var(--ambar-600); outline-offset: 1px; }
.cal-dia.is-off { cursor: default; color: var(--stone-300); }
.cal-dia.is-off .cal-preco { color: var(--stone-300); }
.cal-dia.is-ocupado .cal-num { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cal-dia.is-hoje .cal-num::after {
  content: ""; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ambar-500); margin: 2px auto 0;
}
.cal-dia.is-hoje .cal-num { display: flex; flex-direction: column; align-items: center; }

/* A faixa entre as datas: um fundo contínuo na LINHA (a célula toda), sob o botão. */
.cal-grade td.is-faixa::before,
.cal-grade td.is-faixa-ini::before,
.cal-grade td.is-faixa-fim::before {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;
  background: var(--cream-200);
}
.cal-grade td.is-faixa-ini::before { left: 50%; }
.cal-grade td.is-faixa-fim::before { right: 50%; }
.cal-dia.is-intervalo { color: var(--serra-900); }
.cal-dia.is-intervalo:hover { background: rgba(255, 255, 255, .55); }
.cal-dia.is-entrada, .cal-dia.is-saida,
.cal-dia.is-entrada:hover, .cal-dia.is-saida:hover {
  background: var(--serra-800); color: var(--cream-50);
}
.cal-dia.is-entrada .cal-preco, .cal-dia.is-saida .cal-preco { color: rgba(243, 237, 225, .82); }

.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .78rem; color: var(--stone-500); }
.cal-leg { display: inline-flex; align-items: center; gap: 7px; }
.cal-leg--ocupado::before {
  content: "18"; font-weight: 600; color: var(--stone-300); text-decoration: line-through;
  font-variant-numeric: lining-nums;
}
.cal-leg--preco::before {
  content: "R$"; font-size: .66rem; font-weight: 600; color: var(--stone-500);
  border: 1px solid var(--beige-dark); border-radius: 3px; padding: 1px 4px;
}
.cal-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cal-esqueleto {
  height: 330px; border-radius: 6px;
  background: linear-gradient(90deg, var(--cream-100) 0%, #fff 50%, var(--cream-100) 100%);
  background-size: 200% 100%;
  animation: cal-brilho 1.4s var(--cal-curva) infinite;
}
@keyframes cal-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cal-falha { padding: 28px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cal-falha p { color: var(--stone-700); }

/* ── o rodapé do painel ── */
.cal-pe {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--beige-dark);
}
.cal-painel--folha .cal-pe {
  position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom, 0px));
  /* Faixa de ponta a ponta: no vidro, um rodapé recuado aparecia como uma caixa clara solta dentro da folha. */
  background: var(--vidro-claro-denso); -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur);
  margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin-bottom: calc(-14px - env(safe-area-inset-bottom, 0px));
}
.cal-pe-info { flex: 1; min-width: 0; }
.cal-pe-datas { font-weight: 600; color: var(--serra-900); font-size: .95rem; }
.cal-pe-total { font-size: .84rem; color: var(--stone-500); margin-top: 2px; min-height: 1.2em; }
.cal-btn {
  min-height: 44px; padding: 0 20px; border-radius: 4px; border: 0;
  font: 700 .9rem var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background-color var(--cal-t1) var(--cal-curva), transform var(--cal-t1) var(--cal-curva), color var(--cal-t1) var(--cal-curva);
}
.cal-btn:active { transform: scale(.98); }
.cal-btn:focus-visible { outline: 2px solid var(--serra-800); outline-offset: 3px; }
.cal-btn--cheio { background: var(--acao); color: var(--acao-texto); box-shadow: var(--botao-luz), var(--elev-2); }
.cal-btn--cheio:hover { background: var(--acao-hover); }
.cal-btn--texto { background: transparent; color: var(--serra-800); text-decoration: underline; text-underline-offset: 3px; padding: 0 10px; }
.cal-btn--texto:hover { color: var(--ambar-700); }
.cal-btn[hidden] { display: none; }

@media (max-width: 420px) {
  .cal-pe { flex-wrap: wrap; }
  .cal-pe-info { flex-basis: 100%; }
  .cal-pe .cal-btn--cheio { flex: 1; }
}

/* ── movimento ── */
.cal-abre { animation: cal-em-foco var(--cal-t2) var(--cal-curva) both; }
.cal-painel--folha.cal-abre { animation: cal-sobe var(--cal-t2) var(--cal-curva) both; }
@keyframes cal-em-foco {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes cal-sobe { from { transform: translateY(100%); } to { transform: none; } }
.cal-entra-dir { animation: cal-desliza-dir var(--cal-t2) var(--cal-curva) both; }
.cal-entra-esq { animation: cal-desliza-esq var(--cal-t2) var(--cal-curva) both; }
@keyframes cal-desliza-dir { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes cal-desliza-esq { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.cal-faixa-nova td.is-faixa::before,
.cal-faixa-nova td.is-faixa-fim::before {
  transform-origin: left center;
  animation: cal-faixa var(--cal-t2) var(--cal-curva) both;
  animation-delay: calc(var(--n, 0) * 22ms);
}
.cal-faixa-nova td.is-faixa-fim::before { animation-delay: calc(var(--n, 0) * 22ms + 60ms); }
@keyframes cal-faixa { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .cal-abre, .cal-painel--folha.cal-abre, .cal-entra-dir, .cal-entra-esq,
  .cal-faixa-nova td::before, .cal-esqueleto { animation: none !important; }
  .cal-dia, .cal-seta, .cal-btn, .cal-fechar { transition: none !important; }
}