/* Painel de reservas: quadro sobre a pagina, com o fundo desfocado.
   Vale para o painel de cotacao de Mykonos e para o de reserva direta de Ipanema.
   Carregado depois de booking.css, entao redefine o que era tela cheia. */

/* as duas classes sao precisas: a secao tambem carrega .lx-section.is-beige, que pinta o fundo */
.vvb-panel.lx-section{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 5vh, 56px) clamp(12px, 4vw, 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(44, 34, 26, .42);                       /* Safari sem color-mix */
  background: color-mix(in srgb, var(--ink, #3A2E23) 42%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  animation: vvb-fundo .28s var(--ease, ease) both;
}
.vvb-panel.lx-section[hidden], .vvb-panel[hidden]{ display: none !important; }

/* o miolo vira o quadro */
.vvb-panel.lx-section > .container{
  position: relative;
  width: min(980px, 100%);
  margin: auto;
  background: var(--cream, #F7F2ED);
  border: 1px solid var(--hairline, rgba(58,46,35,.16));
  box-shadow: 0 30px 80px rgba(44, 34, 26, .28);
  padding: clamp(26px, 4vw, 52px) clamp(20px, 4vw, 52px) clamp(30px, 4vw, 52px);
  animation: vvb-quadro .32s var(--ease, cubic-bezier(.2,.7,.3,1)) both;
}

/* o fechar deixa de flutuar na tela e passa a morar no canto do quadro */
.vvb-panel .vvb-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
html[dir="rtl"] .vvb-panel .vvb-close{ right: auto; left: 14px; }

@keyframes vvb-fundo{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes vvb-quadro{ from{ opacity: 0; transform: translateY(14px) } to{ opacity: 1; transform: none } }

/* celular: sem flex, sem animacao no quadro e sem altura em porcentagem.
   O Safari calcula errado a altura de netos com aspect-ratio dentro de item flex, e era isso
   que deixava a grade do calendario sem altura no iPhone. */
@media (max-width: 720px){
  .vvb-panel.lx-section{
    display: block;
    padding: 0;
    background: rgba(44, 34, 26, .5);
    background: color-mix(in srgb, var(--ink, #3A2E23) 50%, transparent);
  }
  .vvb-panel.lx-section > .container{
    width: auto;
    margin: 0;
    min-height: 100vh;
    border: 0;
    box-shadow: none;
    padding-top: clamp(56px, 9vh, 76px);
    animation: none;
  }
  .vvb-panel .vvb-close{ position: fixed; top: 12px; right: 12px; }
  html[dir="rtl"] .vvb-panel .vvb-close{ right: auto; left: 12px; }
}
@media (prefers-reduced-motion: reduce){
  .vvb-panel, .vvb-panel.lx-section > .container{ animation: none }
}
/* navegador sem suporte a desfoque: escurece mais, para o texto do quadro nao competir */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .vvb-panel.lx-section{ background: rgba(44, 34, 26, .72) }
}

/* o botao de fechar: a aparencia vinha do booking.css, que so o Mykonos carrega */
.vvb-panel .vvb-close{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream, #F7F2ED);
  border: 1px solid var(--ink, #3A2E23);
  color: var(--ink, #3A2E23);
  padding: 8px 14px 8px 10px;
  cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.vvb-panel .vvb-close span{ font-family: var(--sans); font-size: 22px; line-height: 1 }
.vvb-panel .vvb-close:hover{ background: var(--ink, #3A2E23); color: var(--cream, #F7F2ED) }
.vvb-panel .vvb-close:focus-visible{ outline: 2px solid var(--terra, #C66522); outline-offset: 2px }

/* dentro do quadro nada espera a rolagem para aparecer: o observador de entrada nao ve
   elementos que nascem escondidos aqui, e o texto ficava invisivel */
.vvb-panel [data-reveal],
.vvb-panel [data-curtain]{ opacity: 1 !important; transform: none !important; visibility: visible !important }

/* o botao de reserva no alto da pagina: mesmo tamanho em qualquer casa.
   A regra vivia no booking.css, que so o Mykonos carrega, e em Ipanema o botao
   saia com o corpo cheio do .btn (17px 42px) e colado no texto de cima. */
.hero-cta{ margin: 26px 0 4px }
.hero-cta .btn{ padding: 11px 18px; font-size: 10px; letter-spacing: .18em }
.hero-cta .btn-ghost{ color: var(--cream, #F7F2ED) }