/* ============================================================
   SAHOST — Página /reservas/ do EcoMAPP — acabamento completo
   Corrige: número 01/02 esmagado, cards chapados, lista de quartos
   sem hierarquia, mapa desbalanceado, CTA fraca.
   Paleta do hotel: verde profundo + dourado (mantém a identidade).
   ============================================================ */

/* ---------- 1. respiro geral ---------- */
.rz-body { padding: 34px 0 10px !important; }
.rz-body .rz-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr) !important;
  gap: 26px !important;
  align-items: start !important;
}
@media (max-width: 980px) {
  .rz-body .rz-grid { grid-template-columns: 1fr !important; }
}

/* ---------- 2. card principal ---------- */
.rz-card {
  background: #fff !important;
  border: 1px solid #e6e9ec !important;
  border-radius: 20px !important;
  padding: 30px 32px 26px !important;
  box-shadow: 0 1px 2px rgba(16,32,24,.04), 0 14px 38px rgba(16,32,24,.07) !important;
}

/* ---------- 3. passo (01 / 02) ---------- */
.rz-card .rz-step {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  position: static !important;
}
.rz-card .rz-step .rz-num {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #14532d, #2f7d32) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  box-shadow: 0 3px 10px rgba(20,83,45,.28) !important;
}
.rz-card .rz-step h2,
.rz-card .rz-step h3 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #14361c !important;
  white-space: normal !important;
  overflow: visible !important;
}
.rz-card .rz-step > div { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; }
.rz-card .rz-step small {
  position: static !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: #eef5ee !important;
  color: #3d6b42 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* ---------- 4. campos ---------- */
.rz-f > span {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: #6b7b70 !important;
  margin-bottom: 7px !important;
}
.rz-f input, .rz-f select {
  width: 100% !important;
  height: 50px !important;
  padding: 0 14px !important;
  border: 1.5px solid #dde3de !important;
  border-radius: 12px !important;
  background: #fbfcfb !important;
  color: #14361c !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
}
.rz-f input:hover, .rz-f select:hover { border-color: #b9c9bd !important; background: #fff !important; }
.rz-f input:focus, .rz-f select:focus {
  outline: none !important;
  border-color: #2f7d32 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(47,125,50,.13) !important;
}

/* ---------- 5. separador ---------- */
.rz-card .rz-div {
  height: 1px !important;
  margin: 28px 0 24px !important;
  background: linear-gradient(90deg, #e6e9ec, #e6e9ec 60%, transparent) !important;
  border: 0 !important;
}

/* ---------- 6. LISTA DE QUARTOS ---------- */
.rz-rooms {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}
.rz-room {
  display: grid !important;
  grid-template-columns: 22px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 16px 18px !important;
  border: 1.5px solid #e6e9ec !important;
  border-radius: 14px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s !important;
}
.rz-room:hover {
  border-color: #9dc4a1 !important;
  background: #f7fbf7 !important;
  box-shadow: 0 6px 18px rgba(20,83,45,.08) !important;
  transform: translateY(-1px) !important;
}
.rz-room.sel {
  border-color: #2f7d32 !important;
  background: #f1f9f2 !important;
  box-shadow: 0 0 0 3px rgba(47,125,50,.12) !important;
}
.rz-room input[type="radio"] {
  width: 19px !important; height: 19px !important;
  accent-color: #2f7d32 !important;
  cursor: pointer !important;
  margin: 0 !important;
}
.rz-room-l { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
.rz-room-l strong { font-size: 16px !important; font-weight: 700 !important; color: #14361c !important; }
.rz-room-l small { font-size: 13px !important; color: #6b7b70 !important; line-height: 1.35 !important; }
.rz-room-l .rz-disp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  align-self: flex-start !important;
  margin-top: 3px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  background: #e8f5e9 !important;
  color: #1f6b28 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
.rz-room-l .rz-disp::before {
  content: '' !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #34a853 !important;
}
.rz-room-r {
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #2f7d32 !important;
  letter-spacing: -.02em !important;
}
.rz-room-r strong { font-weight: 800 !important; }
.rz-room.esgotado { opacity: .55 !important; background: #fafafa !important; }
.rz-room.esgotado .rz-room-r { color: #9aa4b2 !important; text-decoration: line-through !important; }

/* ---------- 7. CTA ---------- */
.rz-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  height: 54px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #14532d, #2f7d32) !important;
  color: #fff !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(20,83,45,.28) !important;
  transition: transform .15s, box-shadow .15s, filter .15s !important;
}
.rz-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(20,83,45,.34) !important;
  filter: brightness(1.06) !important;
}
.rz-note { text-align: center !important; font-size: 12.5px !important; color: #7a877f !important; margin: 11px 0 0 !important; }

/* ---------- 8. card lateral (mapa) ---------- */
.rz-side {
  position: sticky !important;
  top: 22px !important;
  background: #fff !important;
  border: 1px solid #e6e9ec !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 1px 2px rgba(16,32,24,.04), 0 14px 38px rgba(16,32,24,.07) !important;
}
.rz-side-top {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}
.rz-pin {
  flex: 0 0 auto !important;
  width: 38px !important; height: 38px !important;
  display: grid !important; place-items: center !important;
  border-radius: 11px !important;
  background: #eef5ee !important;
  color: #2f7d32 !important;
  font-size: 17px !important;
}
.rz-side-top h2 { font-size: 19px !important; font-weight: 700 !important; color: #14361c !important; margin: 0 0 3px !important; }
.rz-side-top p { font-size: 13px !important; color: #6b7b70 !important; line-height: 1.45 !important; margin: 0 !important; }
.rz-map {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #e6e9ec !important;
  height: 238px !important;
}
.rz-map iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; }

/* ---------- 9. alerta / loading ---------- */
.rz-load {
  padding: 18px !important;
  text-align: center !important;
  color: #6b7b70 !important;
  font-size: 14px !important;
  background: #fafbfa !important;
  border: 1px dashed #dde3de !important;
  border-radius: 12px !important;
}
.rz-alert {
  padding: 16px 18px !important;
  border-radius: 12px !important;
  background: #fff8ec !important;
  border: 1px solid #f3d9a4 !important;
  color: #7a5200 !important;
  font-size: 14px !important;
}

/* ---------- 10. mobile ---------- */
@media (max-width: 620px) {
  .rz-card { padding: 22px 18px 20px !important; border-radius: 16px !important; }
  .rz-card .rz-step h2, .rz-card .rz-step h3 { font-size: 17.5px !important; }
  .rz-card .rz-step { align-items: flex-start !important; }
  .rz-room { grid-template-columns: 20px minmax(0,1fr) !important; row-gap: 8px !important; padding: 14px !important; }
  .rz-room-r { grid-column: 2 !important; text-align: left !important; font-size: 19px !important; }
  .rz-side { position: static !important; padding: 18px !important; }
}
/* ===== AJUSTES FINOS — alinhamento do passo 02 e nota dentro do card ===== */

/* o passo 02 tem um <div> interno; faz ele ocupar a linha toda começando na esquerda */
.rz-card .rz-step { justify-content: flex-start !important; }
.rz-card .rz-step > div {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 9px !important;
  min-width: 0 !important;
}
.rz-card .rz-step > div > h3,
.rz-card .rz-step > div > h2 { margin: 0 !important; text-align: left !important; }

/* a nota "Como funciona" fica logo abaixo do card, com respiro correto */
.rz-body .wrap > .rz-note,
.rz-body > .rz-note { display: none !important; }

/* garante que o texto explicativo nao vaze para fora do grid */
.rz-body .rz-grid { row-gap: 18px !important; }

@media (max-width: 620px) {
  .rz-card .rz-step > div { flex-wrap: wrap !important; }
}
/* ===== nota "Como funciona" entra para dentro do card, em faixa suave ===== */
.rz-body .wrap > p,
.rz-body .rz-grid > p {
  background: #f6f8f6 !important;
  border: 1px solid #e6e9ec !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin: 20px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #5f6d64 !important;
}
.rz-body .wrap > p strong,
.rz-body .rz-grid > p strong { color: #14361c !important; }

/* respiro final da secao */
.rz-body { padding-bottom: 46px !important; }
/* ============================================================
   SAHOST — /reservas/ EcoMAPP: seção do clima + rodapé
   Bugs:
     a) sobravam 54px de fundo BRANCO embaixo do rodapé verde
     b) widget do clima pequeno e perdido em espaço vazio
   ============================================================ */

/* ---------- A) FIM DO RODAPÉ: mata o branco sobrando ---------- */
html, body { background: #0f2f18 !important; }
body { margin: 0 !important; padding-bottom: 0 !important; }
footer.ftr, footer {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}
/* qualquer espacador depois do footer */
footer ~ *:not(.wa):not(.wa-float):not(.lia-wrap):not(script):not(style) {
  display: none !important;
}
/* o main da pagina de reservas nao deixa sobra */
main { padding-bottom: 0 !important; margin-bottom: 0 !important; }
section.sec:last-of-type { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* ---------- B) SEÇÃO DO CLIMA ---------- */
.clima-radar {
  padding: 64px 0 68px !important;
  background: linear-gradient(180deg, #f3efdf 0%, #efe9d6 100%) !important;
}
.clima-radar .wrap { max-width: 1180px !important; margin: 0 auto !important; padding: 0 24px !important; }

.cr-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 460px !important;
  gap: 48px !important;
  align-items: center !important;
}
@media (max-width: 900px) {
  .cr-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* texto */
.cr-txt .cr-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #2f7d32 !important;
  margin-bottom: 14px !important;
}
.cr-txt .cr-kicker i {
  width: 26px !important; height: 2px !important;
  background: #2f7d32 !important;
  display: inline-block !important;
}
.cr-txt h2 {
  font-family: var(--font-h, inherit) !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
  color: #14361c !important;
  margin: 0 0 16px !important;
  font-weight: 700 !important;
}
.cr-txt p {
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  color: #4a5a50 !important;
  margin: 0 0 22px !important;
  max-width: 54ch !important;
}
.cr-txt p strong { color: #2f7d32 !important; font-weight: 700 !important; }
.cr-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
}
.cr-pills span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #ddd6bd !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #3d5145 !important;
  box-shadow: 0 1px 2px rgba(20,54,28,.04) !important;
}
.cr-pills span::before {
  content: '' !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #34a853 !important;
  flex: 0 0 auto !important;
}

/* widget */
.clima-radar .cr-widget {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #ddd6bd !important;
  box-shadow: 0 2px 4px rgba(20,54,28,.05), 0 22px 48px rgba(20,54,28,.13) !important;
  padding: 10px !important;
  line-height: 0 !important;
}
.clima-radar .cr-widget iframe {
  width: 100% !important;
  height: 340px !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: block !important;
}

@media (max-width: 900px) {
  .clima-radar { padding: 44px 0 48px !important; }
  .clima-radar .cr-widget iframe { height: 290px !important; }
}
/* ===== mobile: passo 02 nao estoura a borda ===== */
@media (max-width: 620px) {
  .rz-card .rz-step { gap: 10px !important; flex-wrap: nowrap !important; }
  .rz-card .rz-step > div {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    column-gap: 8px !important;
  }
  .rz-card .rz-step h2, .rz-card .rz-step h3 { flex: 0 1 auto !important; }
  .rz-card .rz-step small {
    font-size: 9.5px !important;
    padding: 3px 8px !important;
    margin-left: 0 !important;
  }
  .rz-card .rz-step .rz-num {
    width: 30px !important; height: 30px !important; min-width: 30px !important;
    font-size: 11px !important;
  }
}