/* =========================================================
   Fluxo de booking (demonstracao)
   Mesma linguagem do menu suspenso: painel escuro translucido,
   cantos de 20px, hairlines a 10% e a curva cubic-bezier(.22,1,.36,1).
   ========================================================= */

/* o dialog ocupa a viewport e centraliza o painel: assim a largura e a
   altura do painel podem ser animadas sem ele sair do centro */
.bk {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--branco);
}

.bk[open] {
  display: grid;
  place-items: center;
}

.bk::backdrop {
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.bk[open]::backdrop { animation: bk-fundo .45s ease both; }
.bk[open].is-fechando::backdrop { animation: bk-fundo-sai .44s ease both; }

@keyframes bk-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-fundo-sai { from { opacity: 1; } to { opacity: 0; } }

/* A casca. Cresce de verdade (width/height), como a pilula do menu —
   por isso nada aqui usa scale: texto e bordas ficam nitidos do
   primeiro ao ultimo quadro. */
.bk__panel {
  width: min(940px, calc(100vw - 32px));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(20, 20, 22, .96);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  overflow: hidden;
}

.bk__interno {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 780px);
}

/* o conteudo surge escalonado, como os cards do menu */
@keyframes bk-surgir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.bk[open] .bk__head   { animation: bk-surgir .5s cubic-bezier(.22, 1, .36, 1) .16s both; }
.bk[open] .bk__corpo  { animation: bk-surgir .5s cubic-bezier(.22, 1, .36, 1) .22s both; }
.bk[open] .bk__rodape { animation: bk-surgir .5s cubic-bezier(.22, 1, .36, 1) .28s both; }

/* ---------- Cabecalho ---------- */
.bk__head {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.bk__titulo {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  text-align: center;
}

.bk__icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--branco);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}

.bk__icone:hover { background: rgba(255, 255, 255, .15); }
.bk__icone[disabled] { opacity: .25; cursor: default; }

.bk__barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: rgba(255, 255, 255, .09);
}

.bk__barra-fill {
  display: block;
  height: 100%;
  width: 14%;
  background: var(--branco);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Corpo ---------- */
.bk__corpo {
  display: grid;
  grid-template-columns: 1fr 300px;
  min-height: 0;
  flex: 1;
}

.bk__passos {
  padding: clamp(20px, 2.4vw, 30px);
  overflow-y: auto;
}

.bk__passo { display: grid; gap: 18px; }
.bk__passo[hidden] { display: none; }

.bk__nota {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--texto-fraco);
}

.bk__aviso {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--texto-suave);
}

.bk__aviso strong { font-weight: 600; color: var(--branco); }

.bk__erro {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #ff8f7a;
}

/* ---------- Campos ---------- */
.bk__campos { display: grid; gap: 14px; }
.bk__campos--2 { grid-template-columns: 1fr 1fr; }
.bk__campo--full { grid-column: 1 / -1; }

.bk__campo { display: grid; gap: 7px; min-width: 0; }

.bk__campo > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.bk__campo em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; }

.bk__campo input,
.bk__campo select,
.bk__campo textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: var(--branco);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  /* faz o seletor de data nativo nascer escuro */
  color-scheme: dark;
  transition: border-color .2s ease, background .2s ease;
}

.bk__campo textarea { resize: vertical; }

.bk__campo input:focus,
.bk__campo select:focus,
.bk__campo textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08);
}

.bk__campo input::placeholder,
.bk__campo textarea::placeholder { color: rgba(255, 255, 255, .3); }

/* ---------- Contadores de hospedes ---------- */
.bk__contadores { display: grid; gap: 4px; }

.bk__contadores li,
.bk__pets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: 15px;
  letter-spacing: -.02em;
}

.bk__pets { border-bottom: 0; }

.bk__contadores li > span:first-child { display: grid; }

.bk__contadores small {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--texto-fraco);
}

.bk__stepper,
.bk__toggle { display: flex; align-items: center; gap: 4px; }

.bk__stepper button,
.bk__toggle button {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: none;
  color: var(--branco);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.bk__stepper button { padding: 0; }
.bk__stepper button:hover:not([disabled]),
.bk__toggle button:hover { background: rgba(255, 255, 255, .12); }
.bk__stepper button[disabled] { opacity: .3; cursor: default; }

.bk__stepper output {
  min-width: 34px;
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.bk__toggle button.is-on {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--preto);
}

/* ---------- Extras ---------- */
.bk__extras { display: grid; gap: 8px; }

.bk__extras label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14.5px;
  letter-spacing: -.02em;
  transition: border-color .2s ease, background .2s ease;
}

.bk__extras label:hover { background: rgba(255, 255, 255, .05); }
.bk__extras label:has(input:checked) { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.bk__extras input { accent-color: #fff; width: 17px; height: 17px; flex: none; }
.bk__extras .bk__preco { margin-left: auto; color: var(--texto-suave); font-size: 13.5px; }

/* ---------- Pagamento ---------- */
.bk__pagamentos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.bk__pagamentos button {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  background: none;
  color: var(--branco);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.bk__pagamentos button:hover { background: rgba(255, 255, 255, .06); }
.bk__pagamentos button.is-on { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .1); }

/* ---------- Revisao / confirmacao ---------- */
.bk__revisao { display: grid; gap: 2px; }

.bk__revisao div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 14.5px;
  letter-spacing: -.02em;
}

.bk__revisao dt { color: var(--texto-fraco); font-weight: 500; }
.bk__revisao dd { text-align: right; font-weight: 600; }
.bk__revisao .bk__linha-total { border-bottom: 0; padding-top: 16px; font-size: 17px; }
.bk__revisao .bk__linha-total dt { color: var(--branco); font-weight: 600; }

/* ---------- Confirmacao ---------- */
.bk__passo--fim { justify-items: center; text-align: center; }
.bk__passo--fim .bk__revisao { width: 100%; text-align: left; }

.bk__check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--preto);
  font-size: 26px;
  animation: bk-pop .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes bk-pop {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

.bk__passo--fim h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.04em; }

.bk__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.btn--vazado {
  background: none;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--branco);
}

.btn--vazado:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Resumo ---------- */
.bk__resumo {
  border-left: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
  overflow-y: auto;
}

.bk__resumo-topo {
  display: block;
  width: 100%;
  padding: clamp(20px, 2.4vw, 30px) 22px 0;
  border: 0;
  background: none;
  color: var(--branco);
  font: inherit;
  text-align: left;
  cursor: default;
}

.bk__resumo-nome {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.bk__resumo-total { display: none; }

.bk__resumo-corpo { padding: 16px 22px clamp(20px, 2.4vw, 30px); }

.bk__resumo dl { display: grid; gap: 2px; }

/* escopado ao dl: sem isso o seletor pegaria o proprio
   .bk__resumo-corpo, que tambem e uma div */
.bk__resumo dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13.5px;
  letter-spacing: -.02em;
}

.bk__resumo dt { color: var(--texto-fraco); font-weight: 500; }
.bk__resumo dd { text-align: right; font-weight: 600; }

.bk__resumo .bk__linha-sep { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 8px; padding-top: 14px; }
.bk__resumo .bk__linha-total { font-size: 16px; }
.bk__resumo .bk__linha-total dt { color: var(--branco); font-weight: 600; }

/* na confirmacao o resumo sai: a propria tela ja mostra tudo */
.bk[data-passo="7"] .bk__resumo { display: none; }
.bk[data-passo="7"] .bk__corpo { grid-template-columns: 1fr; }

/* ---------- Rodape ---------- */
.bk__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.bk__avancar { margin-left: auto; }
.bk[data-passo="7"] .bk__rodape { display: none; }


/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 760px) {
  .bk__panel { width: calc(100vw - 20px); }
  .bk__interno { max-height: 92vh; }

  /* Resumo vira card retratil acima dos campos.
     O corpo passa a ser UMA coluna que rola inteira, em vez do grid
     "auto 1fr": ali o resumo era espremido pela altura do painel e o
     0fr->1fr resolvia para uns 30px em vez da altura do conteudo. */
  .bk__corpo {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .bk__passos { overflow: visible; }

  .bk__resumo {
    order: -1;
    flex: none;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    overflow: visible;
  }

  .bk__resumo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
  }

  .bk__resumo-total { display: block; font-size: 14px; font-weight: 600; }

  .bk__resumo-topo::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(255, 255, 255, .6);
    border-bottom: 1.5px solid rgba(255, 255, 255, .6);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .3s ease;
  }

  .bk__resumo-topo[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

  /* max-height em vez do 0fr->1fr do menu: aqui o painel impoe uma
     altura definida ao container, e o 1fr resolvia contra ela (uns
     30px) em vez de crescer ate o conteudo. */
  .bk__resumo-corpo {
    max-height: 0;
    padding: 0 18px;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.22, 1, .36, 1),
                padding-bottom .4s cubic-bezier(.22, 1, .36, 1);
  }

  .bk__resumo-topo[aria-expanded="true"] + .bk__resumo-corpo {
    max-height: 60vh;
    padding-bottom: 14px;
    overflow-y: auto;
  }

  .bk__campos--2 { grid-template-columns: 1fr; }
  .bk__pagamentos { grid-template-columns: 1fr; }
  .bk__acoes .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bk__barra-fill,
  .bk__resumo-corpo { transition-duration: .01ms !important; }

  /* sem animation-name os elementos aparecem prontos, nunca invisiveis */
  .bk__check,
  .bk[open]::backdrop,
  .bk[open] .bk__head,
  .bk[open] .bk__corpo,
  .bk[open] .bk__rodape { animation: none; }
}