/* avaliacoes.css — avaliações na vitrine pública e nas áreas logadas. */

.estrelas { color: #C59B27; letter-spacing: 1px; font-size: 1.05em; white-space: nowrap; }
.estrelas i { color: #D9D2C8; font-style: normal; }

.perfil-avaliacoes { margin-top: 2.5rem; }
.avaliacoes-resumo { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 2rem; align-items: center; padding: 1.5rem; border: 1px solid var(--borda, #e6dcd3); border-radius: 10px; background: var(--superficie, #fff); }
.avaliacoes-media { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.avaliacoes-media strong { font-family: var(--fonte-display, serif); font-size: 3rem; line-height: 1; color: var(--p-500, #800020); }
.avaliacoes-media > span:last-child { font-size: .85rem; color: var(--texto-soft, #6b5e57); }
.avaliacoes-criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.avaliacoes-criterios li { display: grid; grid-template-columns: 140px 1fr 2.2rem; gap: .75rem; align-items: center; font-size: .88rem; }
.avaliacoes-trilho { height: 8px; border-radius: 99px; background: #F1ECE6; overflow: hidden; }
.avaliacoes-trilho i { display: block; height: 100%; border-radius: 99px; background: #C59B27; }
.avaliacoes-criterios b { text-align: right; font-variant-numeric: tabular-nums; }

.avaliacoes-lista { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.avaliacao { padding: 1.25rem 1.5rem; border: 1px solid var(--borda, #e6dcd3); border-radius: 10px; background: var(--superficie, #fff); }
.avaliacao header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: baseline; }
.avaliacao header div { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.avaliacao header span { font-size: .82rem; color: var(--texto-soft, #6b5e57); }
.avaliacao-selo { font-size: .75rem !important; font-weight: 700; color: #1B6E32 !important; background: #EAF5EA; padding: 2px 10px; border-radius: 99px; }
.avaliacao-nota { margin: .5rem 0; font-size: .9rem; }
.avaliacao-texto { margin: 0; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.avaliacao-resposta { margin-top: 1rem; padding: .85rem 1rem; border-left: 2px solid #C59B27; background: #FAF7F2; border-radius: 0 6px 6px 0; }
.avaliacao-resposta strong { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-soft, #6b5e57); }
.avaliacao-resposta p { margin: .35rem 0 0; line-height: 1.6; white-space: pre-wrap; }
.avaliacao-denunciar { margin-top: .75rem; font-size: .8rem; }
.cartao-nota { margin: .35rem 0 0; font-size: .9rem; font-weight: 700; color: #8C6A12; }
.cartao-nota span { font-weight: 400; color: var(--texto-soft, #6b5e57); }

/* Estrelas clicáveis do formulário (área do casal) */
.nota-criterio { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; }
.nota-criterio legend { float: left; font-size: var(--texto-sm, .9rem); font-weight: 600; }
.nota-estrelas { display: inline-flex; flex-direction: row-reverse; }
.nota-estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nota-estrelas label { font-size: 28px; line-height: 1; padding: 0 2px; color: #D9D2C8; cursor: pointer; }
.nota-estrelas input:checked ~ label, .nota-estrelas label:hover, .nota-estrelas label:hover ~ label { color: #C59B27; }
.nota-estrelas input:focus-visible + label { outline: 2px solid var(--p-500, #800020); outline-offset: 2px; border-radius: 4px; }

.nota-recomenda { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nota-recomenda legend { width: 100%; margin-bottom: 6px; }
.nota-recomenda label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--borda-forte, #d6c9bd); border-radius: 99px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.nota-recomenda label:has(input:checked) { border-color: var(--p-500, #800020); background: var(--p-100, #fbeef1); color: var(--p-600, #6a001a); }
.nota-recomenda input { accent-color: var(--p-500, #800020); }

@media (max-width: 640px) {
  .avaliacoes-resumo { grid-template-columns: 1fr; }
  .avaliacoes-criterios li { grid-template-columns: 110px 1fr 2rem; }
}