/* ============================================================
   AVALIACOES
   1) .av-page  — pagina dedicada (single-hotel-avaliacoes.php)
   2) .block-review — resumo dentro de single-hotel.php

   Carregado no header.php logo apos hero-booking.css.
   O arquivo NAO pode se chamar "avaliacoes.css": ha um redirect
   legado no servidor que devolve 301 para qualquer caminho com
   "avaliacoes" — inclusive assets (ver inc/avaliacoes.php).
   ============================================================ */

/* ------------------------------------------------------------
   1) PAGINA DEDICADA
   Nao usa as classes .block-* do tema de proposito: elas trazem
   o padding-right:330px reservado para o box #reserva, que nao
   existe nesta pagina.
   ------------------------------------------------------------ */

.av-page { padding: 40px 0 80px; }

/* ---------- cabecalho: titulo + botao voltar ---------- */
.av-page .av-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid #e0e0e0;
}
.av-page .av-head h1 {
  display: block; margin: 0; font-weight: 900; font-size: 34px; line-height: 1.15;
  text-transform: uppercase; color: var(--black);
}
.av-page .av-estrelas { display: inline-block; margin-top: 10px; color: var(--yellow); font-size: 16px; letter-spacing: 2px; }

/* botao "Ver hotel" */
.av-page .av-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 24px; border: 2px solid var(--blue); border-radius: 100px;
  color: var(--blue); font-weight: 700; font-size: 14px; text-transform: uppercase; white-space: nowrap;
}
.av-page .av-btn:hover { background-color: var(--blue); color: #fff; }
.av-page .av-btn i { font-size: 12px; }
.av-page .av-btn.av-btn-solid { background-color: var(--blue); color: #fff; }
.av-page .av-btn.av-btn-solid:hover { background-color: var(--darkblue); border-color: var(--darkblue); }

/* ---------- nota geral ---------- */
.av-page .av-resumo { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.av-page .av-nota {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 104px; height: 104px; background-color: var(--blue); border-radius: 10px; text-align: center;
}
.av-page .av-nota b { display: block; font-weight: 900; font-size: 40px; line-height: 1; color: #fff; }
.av-page .av-nota em { display: block; margin-top: 6px; font-style: normal; font-weight: 600; font-size: 12px; color: rgba(255,255,255,.85); text-transform: uppercase; }
.av-page .av-resumo-txt strong { display: block; font-weight: 900; font-size: 26px; color: var(--black); }
.av-page .av-resumo-txt span { display: block; margin-top: 4px; font-size: 14px; color: var(--gray); }
.av-page .av-total {
  margin-left: auto; padding-left: 24px; border-left: 1px solid #e0e0e0; text-align: right;
}
.av-page .av-total b { display: block; font-weight: 900; font-size: 26px; color: var(--blue); }
.av-page .av-total span { display: block; margin-top: 4px; font-size: 13px; color: var(--gray); text-transform: uppercase; }

/* ---------- banner "Avaliacoes 100% reais" ---------- */
.av-banner {
  display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 10px;
  background-color: #eef4f9; border: 1px solid #d5e3ef;
}
.av-banner i { flex: 0 0 auto; font-size: 30px; color: var(--blue); }
.av-banner strong { display: block; font-weight: 900; font-size: 17px; color: var(--blue); text-transform: uppercase; }
.av-banner p { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--gray); }
.av-page .av-banner { margin-bottom: 46px; }

/* ---------- notas por categoria ---------- */
.av-page h2 {
  display: block; margin-bottom: 26px; font-weight: 900; font-size: 24px;
  text-transform: uppercase; color: var(--black);
}
.av-categorias ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 56px; }
.av-categorias li {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 42px; align-items: center; gap: 14px;
  list-style: none;
}
.av-categorias .av-cat-nome { font-weight: 600; font-size: 15px; color: var(--black); }
.av-categorias .av-cat-barra { display: block; height: 8px; background-color: #e4e4e4; border-radius: 100px; overflow: hidden; }
.av-categorias .av-cat-barra i { display: block; height: 100%; background-color: var(--blue); border-radius: 100px; }
.av-categorias .av-cat-nota { font-weight: 900; font-size: 16px; color: var(--blue); text-align: right; }
.av-page .av-categorias { margin-bottom: 56px; }

/* ---------- depoimentos ---------- */
.av-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.av-item { padding: 24px 26px; border: 1px solid #e0e0e0; border-radius: 10px; background-color: #fff; }
.av-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.av-item-stars { flex: 0 0 auto; color: var(--yellow); font-size: 13px; letter-spacing: 1px; }
.av-item-head small { font-size: 12px; color: var(--gray); text-align: right; }
.av-item h3, .av-item h4.av-item-titulo { display: block; margin-bottom: 8px; font-weight: 700; font-style: italic; font-size: 16px; color: var(--black); }
.av-item-texto { display: block; font-style: italic; font-size: 15px; line-height: 1.6; color: var(--black); }
.av-item-autor { display: block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--blue); text-align: right; }
.av-item.av-extra { display: none; }
.av-vazio { display: block; padding: 30px 0; color: var(--gray); }

.av-mais { display: block; margin-top: 28px; text-align: center; }
.av-mais a { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--blue); text-transform: uppercase; font-size: 14px; }
.av-mais a i { font-size: 12px; }

.av-page .av-rodape { display: block; margin-top: 50px; text-align: center; }

/* ------------------------------------------------------------
   2) RESUMO DENTRO DA PAGINA DO HOTEL (#avaliacoes)
   Reaproveita os componentes acima em escala menor. O container
   dessa secao mantem o gutter de 330px do box #reserva.
   ------------------------------------------------------------ */

.block-review .av-resumo { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.block-review .av-nota {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 92px; background-color: var(--blue); border-radius: 10px; text-align: center;
}
.block-review .av-nota b { display: block; margin: 0; font-weight: 900; font-size: 34px; line-height: 1; color: #fff; }
.block-review .av-nota em { display: block; margin-top: 5px; font-style: normal; font-weight: 600; font-size: 11px; color: rgba(255,255,255,.85); text-transform: uppercase; }
.block-review .av-resumo-txt strong { display: block; font-weight: 900; font-size: 22px; color: var(--black); }
.block-review .av-resumo-txt span { display: block; margin-top: 4px; font-size: 14px; color: var(--gray); }
.block-review .av-resumo-txt span a { color: var(--blue); font-weight: 700; text-decoration: underline; }

.block-review .av-banner { margin-bottom: 34px; background-color: #fff; }
.block-review .av-categorias { margin-bottom: 40px; }
.block-review .av-categorias ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 30px; }
.block-review .av-categorias li { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "nome nota" "barra barra"; gap: 6px 10px; }
.block-review .av-categorias .av-cat-nome { grid-area: nome; }
.block-review .av-categorias .av-cat-nota { grid-area: nota; }
.block-review .av-categorias .av-cat-barra { grid-area: barra; }

.block-review .av-depoimentos h3.av-sub {
  display: block; margin-bottom: 24px; font-weight: 700; font-size: 16px;
  text-transform: uppercase; color: var(--black);
}
.block-review .av-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-review .av-rodape { display: block; margin-top: 34px; padding-bottom: 60px; text-align: center; }
.block-review .av-rodape a {
  display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 30px;
  background-color: var(--blue); border-radius: 100px; color: #fff; font-weight: 700;
  font-size: 14px; text-transform: uppercase;
}
.block-review .av-rodape a:hover { background-color: var(--darkblue); }
.block-review .av-rodape a i { font-size: 12px; }

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

@media (max-width: 1220px) {
  .av-page .av-head h1 { font-size: 30px; }
}

@media (max-width: 970px) {
  .av-page { padding: 30px 0 60px; }
  .av-page .av-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .av-page .av-head h1 { font-size: 26px; }
  .av-categorias ul { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .block-review .av-categorias ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av-lista, .block-review .av-lista { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .av-page { padding: 24px 0 45px; }
  .av-page .av-head { padding-bottom: 20px; margin-bottom: 26px; }
  .av-page .av-head h1 { font-size: 21px; }
  .av-page .av-btn { height: 44px; padding: 0 20px; font-size: 12px; }

  .av-page .av-resumo { flex-wrap: wrap; gap: 14px; }
  .av-page .av-nota, .block-review .av-nota { width: 78px; height: 78px; }
  .av-page .av-nota b, .block-review .av-nota b { font-size: 28px; }
  .av-page .av-nota em, .block-review .av-nota em { font-size: 10px; }
  .av-page .av-resumo-txt strong, .block-review .av-resumo-txt strong { font-size: 18px; }
  .av-page .av-resumo-txt span, .block-review .av-resumo-txt span { font-size: 12px; }
  .av-page .av-total { width: 100%; margin-left: 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid #e0e0e0; text-align: left; }
  .av-page .av-total b { font-size: 20px; }

  .av-banner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
  .av-banner i { font-size: 24px; }
  .av-banner strong { font-size: 14px; }
  .av-banner p { font-size: 12px; }

  .av-page h2 { margin-bottom: 20px; font-size: 19px; }
  .av-categorias li { grid-template-columns: 100px minmax(0, 1fr) 36px; gap: 10px; }
  .av-categorias .av-cat-nome { font-size: 12px; }
  .av-categorias .av-cat-nota { font-size: 13px; }
  .block-review .av-categorias ul { grid-template-columns: minmax(0, 1fr); }
  .block-review .av-categorias li { grid-template-columns: 100px minmax(0, 1fr) 36px; grid-template-areas: none; }
  .block-review .av-categorias .av-cat-nome,
  .block-review .av-categorias .av-cat-nota,
  .block-review .av-categorias .av-cat-barra { grid-area: auto; }

  .av-item { padding: 18px 18px; }
  .av-item-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .av-item-head small { text-align: left; }
  .av-item h3, .av-item h4.av-item-titulo, .av-item-texto { font-size: 13px; }
  .av-item-autor { font-size: 12px; }

  /* espaco para o botao flutuante "Reservar" do tema nao cobrir o link */
  .block-review .av-rodape { padding-bottom: 90px; }
}