/* ============================================================
   REGRAS DA CASA — bloco #regras da pagina de hotel
   parts/regras.php · carregado no header.php apos faq.css

   Layout do Booking: uma caixa unica com borda, uma linha por
   assunto (rotulo com icone a esquerda, conteudo a direita) e um
   filete separando as linhas. Tipografia neutra, sem cards
   coloridos — as cores do tema ficam so no cabecalho da secao.
   ============================================================ */

.block-regras { padding: 60px 0px 70px 0px; background-color: #fff; }
.block-regras .container { position: relative; }
.block-regras header.head { margin-bottom: 26px; }
.block-regras header.head strong { display: block; margin-bottom: 14px; font-size: 36px; font-weight: 900; }
.block-regras header.head p { display: block; color: #555; font-size: 15px; line-height: 1.6; }

/* ---------- a caixa e suas linhas ---------- */
.block-regras .regras-box {
  display: block; padding: 0px 16px;
  background-color: #fff; border: 1px solid #E7E7E7; border-radius: 8px;
}
.block-regras .regras-row { display: flex; align-items: flex-start; gap: 24px; padding: 20px 0px; }
.block-regras .regras-row + .regras-row { border-top: 1px solid #E7E7E7; }

/* coluna do rotulo: 250px fixos, como no Booking */
.block-regras .regras-row-label {
  display: flex; flex: 0 0 250px; align-items: flex-start; gap: 12px; padding-left: 8px;
}
/* sem font-weight aqui: o Font Awesome usa o peso para escolher o estilo
   (900 = fas, 400 = far); forcar um valor apaga metade dos icones */
.block-regras .regras-row-label i {
  flex: 0 0 20px; margin-top: 2px; font-size: 16px; line-height: 1.4;
  color: #1A1A1A; text-align: center;
}
.block-regras .regras-row-label h3 {
  display: block; margin: 0px; font-size: 15px; font-weight: 700;
  line-height: 1.4; color: #1A1A1A;
}

/* coluna do conteudo */
.block-regras .regras-row-body { display: block; min-width: 0px; padding-right: 8px; }
.block-regras .regras-row-body h4 {
  display: block; margin: 0px 0px 10px 0px; font-size: 15px; font-weight: 700;
  line-height: 1.4; color: #1A1A1A;
}
.block-regras .regras-row-body h4:not(:first-child) { margin-top: 20px; }
.block-regras .regras-row-body p { display: block; font-size: 15px; line-height: 1.55; color: #1A1A1A; }
.block-regras .regras-row-body p + p { margin-top: 10px; }
.block-regras .regras-row-body .regras-obs { color: #6B6B6B; font-size: 14px; }
.block-regras .regras-row-body a { color: var(--blue); text-decoration: underline; }

/* formas de pagamento: badges discretos, no lugar das bandeiras do Booking */
.block-regras .regras-pagamento {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0px; padding: 0px;
}
.block-regras .regras-pagamento li {
  display: inline-block; padding: 6px 12px; background-color: #fff;
  border: 1px solid #E7E7E7; border-radius: 4px;
  font-size: 14px; font-weight: 600; color: #1A1A1A;
}

/* ---------- rodape: duvidas sobre as regras ---------- */
.block-regras .regras-ajuda {
  display: block; margin-top: 18px; padding: 20px 24px;
  background-color: #fff; border: 1px solid #E7E7E7; border-radius: 8px;
}
.block-regras .regras-ajuda strong { display: block; margin-bottom: 8px; font-weight: 700; font-size: 15px; color: #1A1A1A; }
.block-regras .regras-ajuda p { display: block; font-size: 15px; line-height: 1.55; color: #1A1A1A; }
.block-regras .regras-ajuda a { color: var(--blue); font-weight: 600; text-decoration: underline; }

/* ============================================================
   RESPONSIVO — breakpoints do tema (1220 / 970 / 680)
   ============================================================ */

/* o box #reserva fica pinado a direita do container ate 1220px */
@media (min-width: 1221px) {
  .block-regras .container { padding-right: 340px; }
}

@media (max-width: 1220px) {
  .block-regras .regras-row-label { flex-basis: 220px; }
}

@media (max-width: 970px) {
  .block-regras { padding: 45px 0px 50px 0px; }
  .block-regras header.head strong { font-size: 28px; }
  .block-regras .regras-row-label { flex-basis: 190px; }
}

/* no mobile o rotulo passa a ficar acima do conteudo */
@media (max-width: 680px) {
  .block-regras { padding: 35px 0px 40px 0px; }
  .block-regras header.head { margin-bottom: 22px; }
  .block-regras header.head strong { font-size: 24px; }
  .block-regras .regras-box { padding: 0px 14px; }
  .block-regras .regras-row { display: block; padding: 16px 0px; }
  .block-regras .regras-row-label { padding-left: 0px; margin-bottom: 8px; }
  .block-regras .regras-row-body { padding-right: 0px; padding-left: 32px; }
  .block-regras .regras-row-body p,
  .block-regras .regras-row-body h4 { font-size: 14px; }
  .block-regras .regras-row-body .regras-obs { font-size: 13px; }
  .block-regras .regras-ajuda { padding: 18px 20px; }
  .block-regras .regras-ajuda p { font-size: 14px; }
}