/**
 * Reviews: the review page form, and the rating summary and empty state in a
 * guide's Reviews tab. The review cards themselves and the rating on guide cards
 * use the theme's existing styles.
 *
 * Written once for both directions with logical properties, and coloured with
 * the --lg-* tokens from style.css so light and dark mode need no extra rules.
 *
 * @package legacy
 */

/* -------------------------------------------------------------------------
 * 1. Review page (inside the booking card it shares with the payment page)
 * ---------------------------------------------------------------------- */

.legacy-review-form {
	margin-block-start: 2rem;
	text-align: start;
}

.legacy-review-error {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--lg-danger-border);
	border-radius: 8px;
	background-color: var(--lg-danger-surface);
	color: var(--lg-danger);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.legacy-review-stars {
	min-width: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

.legacy-review-stars legend,
.legacy-review-field label {
	display: block;
	margin-block-end: 0.6rem;
	padding: 0;
	color: var(--lg-brand);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.legacy-review-stars legend span,
.legacy-review-field label span {
	color: var(--lg-danger);
}

/* Without the script this is a plain list of five labelled choices. */
.legacy-review-stars-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.legacy-review-star {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--lg-text);
	font-size: 15px;
	cursor: pointer;
}

.legacy-review-star i {
	color: var(--lg-accent);
	font-size: 18px;
}

.legacy-review-stars-value {
	display: block;
	min-height: 1.4em;
	margin-block-start: 0.5rem;
	color: var(--lg-muted);
	font-size: 14px;
	line-height: 1.4;
}

/* With the script: five stars to pick from. The radio buttons stay in place,
 * invisible, so the keyboard and screen readers use them as before. */
.legacy-review-stars.is-enhanced .legacy-review-stars-row {
	gap: 0.25rem;
}

.legacy-review-stars.is-enhanced .legacy-review-star {
	padding: 0.25rem;
	border-radius: 8px;
}

.legacy-review-stars.is-enhanced .legacy-review-star input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.legacy-review-stars.is-enhanced .legacy-review-star i {
	color: var(--lg-surface-inset);
	font-size: 34px;
	transition: color 0.15s ease, transform 0.15s ease;
}

.legacy-review-stars.is-enhanced .legacy-review-star.is-on i {
	color: var(--lg-accent);
}

.legacy-review-stars.is-enhanced .legacy-review-star:hover i {
	transform: scale(1.08);
}

.legacy-review-stars.is-enhanced .legacy-review-star:focus-within {
	outline: 2px solid var(--lg-brand);
	outline-offset: 2px;
}

.legacy-review-stars.is-enhanced .legacy-review-star-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.legacy-review-field textarea {
	display: block;
	width: 100%;
	min-height: 140px;
	padding: 0.85rem 1rem;
	border: 1px solid var(--lg-accent-border);
	border-radius: 8px;
	background-color: var(--lg-surface);
	color: var(--lg-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
	resize: vertical;
}

.legacy-review-field textarea:focus {
	outline: none;
	border-color: var(--lg-accent-hover);
	box-shadow: 0 0 0 3px var(--lg-accent-a22);
}

.legacy-review-form .legacy-booking-actions {
	display: flex;
	justify-content: center;
	margin-block-start: 1.5rem;
}

.legacy-review-form .main-btn {
	justify-content: center;
	border: 0;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 2. Guide profile: Reviews tab
 * ---------------------------------------------------------------------- */

.guide-reviews-summary {
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block-end: 1rem;
	padding: 1rem 1.5rem;
	border: 2px solid var(--lg-accent-border);
	border-radius: 8px;
	background-color: var(--lg-surface);
}

.guide-reviews-average {
	color: var(--lg-brand);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
}

.guide-reviews-summary .review-rate {
	gap: 0.2rem;
}

.guide-reviews-summary .review-rate i {
	color: var(--lg-accent);
	font-size: 18px;
}

.guide-reviews-count {
	color: var(--lg-muted);
	font-size: 16px;
	line-height: 1.2;
}

.guide-reviews-empty {
	margin: 0;
	padding: 1.5rem;
	border: 2px solid var(--lg-accent-border);
	border-radius: 8px;
	background-color: var(--lg-surface);
	color: var(--lg-muted);
	text-align: center;
}

/* A customer's words can be one long unbroken string. */
/* A comment reads in its own language's direction (dir="auto") and stays aligned with its card. */
.guide-reviews-card-wrap .review-card .description {
	overflow-wrap: anywhere;
	text-align: -webkit-match-parent; /* Chrome and Edge only know the prefixed name. */
	text-align: match-parent;
}

@media (max-width: 520px) {

	.legacy-review-stars.is-enhanced .legacy-review-star i {
		font-size: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.legacy-review-stars.is-enhanced .legacy-review-star i {
		transition: none;
	}
}