/* ===== Traventia UI — Avaliações (Módulo 7) =====
   Reaproveita .tv-card/.tv-card-body (cards.css), .tv-field/.tv-input/
   .tv-textarea (inputs.css/forms.css), .tv-alert (alerts.css) e
   .tv-empty-state (empty-states.css) já existentes — só o que é
   genuinamente novo entra aqui: estrelas, barras de distribuição e o
   input de nota em estrelas do formulário. */

.tv-reviews { display: flex; flex-direction: column; gap: var(--tv-space-10); }

.tv-estrela { width: 18px; height: 18px; color: var(--tv-border-strong); }
.tv-estrela-cheia { color: var(--tv-primary); }

/* ===== Resumo (média + distribuição) ===== */

.tv-reviews-resumo {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--tv-space-10);
	align-items: center;
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius-lg);
	padding: var(--tv-space-8);
}

.tv-reviews-media { display: flex; flex-direction: column; align-items: center; gap: var(--tv-space-2); text-align: center; }

.tv-reviews-media-numero { font-size: var(--tv-text-4xl); font-weight: var(--tv-font-bold); color: var(--tv-text-heading); line-height: 1; }

.tv-reviews-media-estrelas { display: flex; gap: 2px; }
.tv-reviews-media-estrelas .tv-estrela { width: 20px; height: 20px; }

.tv-reviews-media-total { font-size: var(--tv-text-sm); color: var(--tv-text-muted); white-space: nowrap; }

.tv-reviews-distribuicao { display: flex; flex-direction: column; gap: var(--tv-space-2); }

.tv-reviews-distribuicao-linha { display: grid; grid-template-columns: 44px 1fr 28px; align-items: center; gap: var(--tv-space-3); }

.tv-reviews-distribuicao-nota { font-size: var(--tv-text-sm); color: var(--tv-text-muted); }

.tv-rating-bar {
	display: block;
	height: 8px;
	border-radius: var(--tv-radius-full);
	background: var(--tv-surface-alt);
	overflow: hidden;
}

.tv-rating-bar-fill { display: block; height: 100%; background: var(--tv-primary); border-radius: var(--tv-radius-full); }

.tv-reviews-distribuicao-contagem { font-size: var(--tv-text-sm); color: var(--tv-text-muted); text-align: right; }

@media (max-width: 599px) {
	.tv-reviews-resumo { grid-template-columns: 1fr; }
}

/* ===== Lista de avaliações ===== */

.tv-reviews-lista { display: flex; flex-direction: column; gap: var(--tv-space-4); }

.tv-review-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tv-space-3); margin-bottom: var(--tv-space-2); }

.tv-review-card-nome { color: var(--tv-text-heading); }

.tv-review-card-data { font-size: var(--tv-text-xs); color: var(--tv-text-muted); white-space: nowrap; }

.tv-review-card-estrelas { display: flex; gap: 2px; margin-bottom: var(--tv-space-3); }

.tv-review-card-comentario { color: var(--tv-text); margin: 0; line-height: var(--tv-leading-relaxed); }

/* ===== Formulário de envio ===== */

.tv-reviews-form-wrap {
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius-lg);
	padding: var(--tv-space-8);
}

.tv-reviews-form-titulo { margin: 0 0 var(--tv-space-5); }

/* Honeypot — nunca visível para humanos, só bots preencherão. */
.tv-field-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Input de nota em estrelas — 5 radios ocultos + labels em SVG, ordem
   invertida no DOM (5→1) exibida da esquerda pra direita via row-reverse,
   pra :checked ~ label (irmãos seguintes) acender a nota clicada e todas
   as anteriores, sem nenhuma linha de JS. */
.tv-rating-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: var(--tv-space-1);
	width: fit-content;
}

.tv-rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.tv-rating-input label {
	cursor: pointer;
	color: var(--tv-border-strong);
	transition: color var(--tv-transition-fast);
}

.tv-rating-input label svg { width: 28px; height: 28px; }

.tv-rating-input input:checked ~ label,
.tv-rating-input label:hover,
.tv-rating-input label:hover ~ label {
	color: var(--tv-primary);
}

.tv-rating-input input:focus-visible ~ label { outline: 2px solid var(--tv-primary); outline-offset: 2px; border-radius: var(--tv-radius-sm); }

/* ===== Sprint Redesign Premium (perfil do terapeuta) =====
   Reforço visual do resumo/formulário só onde as classes *-premium são
   aplicadas (Templates/single-therapist.php via reviews-section.php) —
   o componente genérico acima continua igual pra qualquer outro uso
   futuro que não peça este tratamento. */

.tv-reviews-resumo-premium {
	background: linear-gradient(160deg, var(--tv-surface) 0%, var(--tv-surface-alt) 100%);
	border-color: var(--tv-border-gold);
	box-shadow: var(--tv-shadow-md);
}

.tv-reviews-resumo-premium .tv-reviews-media-numero { font-size: var(--tv-text-5xl); }

.tv-reviews-media-estrelas-lg .tv-estrela { width: 26px; height: 26px; }

.tv-reviews-form-wrap-premium {
	border-color: var(--tv-border-gold);
	box-shadow: var(--tv-shadow-sm);
}

.tv-reviews-form-wrap-premium .tv-input,
.tv-reviews-form-wrap-premium .tv-textarea {
	padding-top: 14px;
	padding-bottom: 14px;
}

.tv-reviews-form-wrap-premium .tv-input:focus,
.tv-reviews-form-wrap-premium .tv-textarea:focus {
	border-color: var(--tv-primary);
	box-shadow: 0 0 0 3px var(--tv-primary-light);
}

.tv-reviews-form-wrap-premium .tv-rating-input label svg { width: 34px; height: 34px; }

.tv-reviews-form-wrap-premium .tv-btn-primary { margin-top: var(--tv-space-2); }