/**
 * Estilos do componente de avaliação de loja (auto-contido, sem depender do
 * purge do Tailwind). Mantém dimensões fixas para não gerar CLS.
 */

.pd-rating-stars {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin: 0;
}

.pd-rating-meta,
.pd-rating-status {
	text-align: center;
}

.pd-rating-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 1px;
	margin: 0;
	border: 0;
	background: none;
	color: #cbd5e1; /* slate-300 */
	cursor: pointer;
	line-height: 1;
	transition: color .12s ease, transform .12s ease;
	-webkit-tap-highlight-color: transparent;
}

.pd-rating-star svg {
	display: block;
	width: 1.75rem;  /* 28px - dimensão fixa: evita layout shift */
	height: 1.75rem;
	fill: currentColor;
	pointer-events: none;
}

.pd-rating-star.is-on {
	color: #f59e0b; /* amber-500 */
}

.pd-rating-star:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
	border-radius: 4px;
}

@media (hover: hover) {
	.pd-rating:not(.is-voted) .pd-rating-star:hover {
		transform: scale(1.08);
	}
}

/* Reserva de espaço para a mensagem de status (evita CLS ao votar). */
.pd-rating-status {
	min-height: 1.25rem;
	margin-bottom: 0;
}

.pd-rating.is-voted .pd-rating-star {
	cursor: default;
}

.pd-rating.is-voted .pd-rating-stars {
	opacity: .9;
}