/**
 * Listing Reviews — Modern card-based review styles.
 */

.listora-reviews {
	max-width: var(--wp--style--global--content-size, 800px);
}

/* ─── Summary Card ─── */

.listora-reviews__summary {
	display: flex;
	gap: var(--listora-space-6);
	padding: var(--listora-space-6);
	background: var(--listora-bg-elevated);
	border-radius: var(--listora-radius-xl);
	box-shadow: var(--listora-shadow-sm);
	margin-block-end: var(--listora-space-6);
	flex-wrap: wrap;
}

.listora-reviews__summary-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 120px;
}

.listora-reviews__avg {
	font-size: var(--listora-text-size-3xl);
	font-weight: var(--listora-weight-bold);
	line-height: 1;
	color: var(--listora-fg-default);
	font-family: var(--listora-card-title-font);
}

.listora-reviews__avg-stars {
	display: flex;
	gap: 2px;
	color: var(--listora-rating);
	margin: 0.3rem 0;
}

.listora-reviews__total {
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-faint);
}

.listora-reviews__distribution {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	justify-content: center;
}

.listora-reviews__bar-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.listora-reviews__bar-label {
	width: 30px;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-muted);
	text-align: end;
}

.listora-reviews__bar {
	flex: 1;
	height: 10px;
	background: var(--listora-border);
	border-radius: var(--listora-radius-full);
	overflow: hidden;
}

.listora-reviews__bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--listora-rating), color-mix(in srgb, var(--listora-rating) 80%, var(--listora-warning)));
	border-radius: var(--listora-radius-full);
	transition: width 0.3s;
}

.listora-reviews__bar-count {
	width: 24px;
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
}

/* ─── Toolbar ─── */

.listora-reviews__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: var(--listora-space-4);
	gap: var(--listora-space-2);
}

.listora-reviews__sort {
	font-size: var(--listora-card-meta-size);
	width: auto;
}

/* ─── Review Form ─── */

.listora-reviews__form-wrapper {
	padding: var(--listora-space-6);
	background: var(--listora-bg-elevated);
	border-radius: var(--listora-radius-xl);
	box-shadow: var(--listora-shadow-md);
	margin-block-end: var(--listora-space-6);
	animation: listora-slideDown 0.3s ease;
}

.listora-reviews__form h3 {
	margin: 0 0 var(--listora-space-4);
	font-size: var(--listora-text-size-lg);
	font-weight: var(--listora-weight-semibold);
}

.listora-reviews__form textarea {
	min-height: 120px;
}

.listora-reviews__char-count {
	display: block;
	text-align: end;
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
	margin-block-start: 0.25rem;
}

.listora-reviews__form-actions {
	display: flex;
	gap: 0.5rem;
	margin-block-start: var(--listora-space-2);
}

.listora-reviews__form-message {
	margin-block-start: var(--listora-space-2);
	font-size: var(--listora-card-meta-size);
}

@media (max-width: 767px) {
	.listora-reviews__form-actions {
		flex-direction: column;
	}

	.listora-reviews__form-actions .listora-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ─── Star Input with Labels ─── */

.listora-reviews__star-input-wrap {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
}

.listora-reviews__star-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.2rem;
	border: none;
	padding: 0;
	margin: 0;
}

.listora-reviews__star-label {
	cursor: pointer;
}

.listora-reviews__star-label input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.listora-reviews__star-svg {
	width: 2rem;
	height: 2rem;
	color: var(--listora-border);
	transition: color var(--listora-transition-fast), transform var(--listora-transition-fast);
}

/* Highlight stars: CSS-only with :has() and sibling selector */
.listora-reviews__star-label:hover .listora-reviews__star-svg,
.listora-reviews__star-label:hover ~ .listora-reviews__star-label .listora-reviews__star-svg,
.listora-reviews__star-label:has(input:checked) .listora-reviews__star-svg,
.listora-reviews__star-label:has(input:checked) ~ .listora-reviews__star-label .listora-reviews__star-svg {
	color: var(--listora-rating);
}

/* Pop animation on selection */
.listora-reviews__star-label:has(input:checked) .listora-reviews__star-svg {
	animation: listora-countPop 0.25s ease;
}

/* Rating label text */
.listora-reviews__rating-label {
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-faint);
	min-width: 5em;
	transition: color var(--listora-transition-fast);
}

/* ─── Review Cards ─── */

.listora-reviews__list {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

.listora-reviews__review {
	padding: var(--listora-space-4);
	background: var(--listora-bg-elevated);
	border-radius: var(--listora-radius-lg);
	box-shadow: var(--listora-shadow-sm);
}

.listora-reviews__review-header {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-block-end: 0.5rem;
}

.listora-reviews__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--listora-bg-surface);
}

.listora-reviews__reviewer {
	font-weight: var(--listora-weight-semibold);
	font-size: 0.95rem;
	color: var(--listora-fg-default);
}

.listora-reviews__reviewer--link {
	text-decoration: none;
	transition: color 0.15s ease;
}

.listora-reviews__reviewer--link:hover,
.listora-reviews__reviewer--link:focus-visible {
	color: var(--listora-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.listora-reviews__reviewer--link:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.listora-reviews__review-rating {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--listora-rating);
}

.listora-reviews__review-date {
	color: var(--listora-fg-faint);
	font-size: var(--listora-text-size-sm);
	margin-inline-start: 0.3rem;
}

.listora-reviews__review-title {
	font-size: 1rem;
	font-weight: var(--listora-weight-semibold);
	margin: 0 0 0.3rem;
	color: var(--listora-fg-default);
}

.listora-reviews__review-content {
	margin: 0;
	color: var(--listora-fg-muted);
	line-height: 1.6;
}

/* Actions */
.listora-reviews__review-actions {
	display: flex;
	gap: 0.75rem;
	margin-block-start: 0.5rem;
}

.listora-reviews__helpful-btn,
.listora-reviews__report-btn {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-faint);
	transition: color var(--listora-transition-fast);
}

.listora-reviews__helpful-btn:hover {
	color: var(--listora-primary);
}

.listora-reviews__report-btn:hover {
	color: var(--listora-danger);
}

.listora-reviews__helpful-count {
	font-weight: var(--listora-weight-medium);
}

/* Owner Reply (card-style) */
.listora-reviews__owner-reply {
	margin-block-start: 0.75rem;
	padding: var(--listora-space-2) var(--listora-space-4);
	background: var(--listora-bg-surface);
	border-radius: var(--listora-radius-md);
}

.listora-reviews__reply-label {
	font-size: var(--listora-text-size-sm);
	color: var(--listora-primary);
	font-weight: var(--listora-weight-medium);
}

.listora-reviews__owner-reply p {
	margin: 0.3rem 0 0;
	font-size: var(--listora-text-size-base);
	color: var(--listora-fg-muted);
}

.listora-reviews__reply-date {
	font-size: var(--listora-text-size-xs);
	color: var(--listora-fg-faint);
}

.listora-reviews__reply-btn {
	font-size: var(--listora-text-size-sm);
	margin-block-start: 0.5rem;
}

/* Load More */
.listora-reviews__load-more {
	width: 100%;
	margin-block-start: var(--listora-space-4);
}

/* Empty */
.listora-reviews__empty {
	text-align: center;
	padding: var(--listora-space-6);
	color: var(--listora-fg-faint);
}

.listora-reviews__login-notice {
	text-align: center;
	padding: var(--listora-space-4);
}

.listora-reviews__login-notice a {
	color: var(--listora-primary);
}

/* ─── Responsive ─── */

@media (max-width: 767px) {
	.listora-reviews__summary {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.listora-reviews__toolbar {
		flex-direction: column;
		align-items: stretch;
	}
}