/*!
 * PetMap Directory — the reviews block (auto-appended to a place page, or
 * placed by hand with [petmap_reviews]).
 *
 * Loaded only on a page that actually renders the block (see Assets::
 * enqueue_reviews_style()). Every value here reads a --pmd-* token emitted
 * by Front\DesignSystem, the same discipline directory.css follows. The one
 * exception is the fixed eight-colour avatar palette below, literal for the
 * same reason directory.css's six thumbnail gradients are literal: a
 * reviewer with no profile photo still has to read as a person, and eight
 * identical grey circles would not.
 *
 * The look is the account panel's (assets/css/account.css): raised cards on
 * the page surface, pill buttons at least 44px tall, 16px form text so a
 * phone never zooms into a field, and status colours blended toward the
 * text colour with color-mix() so every notice reads at AA in light and
 * dark palettes. Its rules are repeated here rather than shared: this block
 * renders on pages that never load account.css.
 *
 * Layout is mobile-first, one column, matching the design's narrow-width
 * reading order.
 *
 * @package PetMapDirectory
 */

.pmd-reviews {
	--pmd-rev-card: var(--pmd-color-surface-raised, var(--pmd-color-surface));
	--pmd-rev-ink: color-mix(in srgb, var(--pmd-color-primary) 60%, var(--pmd-color-text));
	--pmd-rev-ring: var(--pmd-color-primary);

	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-5);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	text-align: left;
}

/*
 * Every heading, label and legend below sets its colour from a token rather
 * than inheriting `.pmd-reviews`'s: themes paint those tags directly, which
 * beats inheritance. tests/unit/Front/InheritedColorGuardTest enforces it.
 */
.pmd-reviews .pmd-rev-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-2xl);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
}

.pmd-reviews .pmd-ico {
	display: block;
	flex: none;
}

/*
 * Screen-reader-only text (the exact rule directory.css also defines).
 * Duplicated rather than shared: this block can render on a page that never
 * loads directory.css — the reviews block is appended to a place page's
 * content on its own, with no dependency on [petmap_directory] being on the
 * same page — and without this rule the "N out of 5 stars" text next to
 * each decorative star row would be visible instead of hidden.
 */
.pmd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

/*
 * The aggregate, each review, the form and the empty state are cards on
 * the page surface: raised, softly bordered, rounded like the account
 * panel's.
 */
.pmd-rev-summary,
.pmd-rev-item,
.pmd-rev-form {
	color: var(--pmd-color-text);
	background: var(--pmd-rev-card);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-xl);
	box-shadow: var(--pmd-shadow-sm);
}

/* ── Star row (aggregate and per-review) ─────────────────────── */

/*
 * Two identical five-star rows stacked: a muted background row always shows
 * all five, and an amber foreground row is clipped to a percentage width —
 * the standard "proportional star rating" technique, done with the same
 * inline SVG icon the rest of the plugin already uses rather than a
 * font-dependent glyph.
 */
.pmd-star-row {
	position: relative;
	display: inline-flex;
}

.pmd-star-row-bg {
	display: flex;
	color: var(--pmd-color-border-strong);
}

.pmd-star-row-fg {
	position: absolute;
	inset: 0;
	display: flex;
	overflow: hidden;
	color: var(--pmd-color-warning);
	white-space: nowrap;
}

.pmd-star-row-sm {
	flex: none;
}

/* ── Aggregate summary ───────────────────────────────────────── */

.pmd-rev-summary {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-5);
	padding: var(--pmd-space-5) var(--pmd-space-4);
}

.pmd-rev-avg-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pmd-space-1);
}

.pmd-rev-avg {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-4xl);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
	font-variant-numeric: tabular-nums;
}

.pmd-rev-count {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
}

.pmd-rev-dist {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-2);
}

.pmd-rev-dist-row {
	display: grid;
	grid-template-columns: 14px 1fr 32px;
	align-items: center;
	gap: var(--pmd-space-2);
}

.pmd-rev-dist-label {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
	text-align: right;
}

.pmd-rev-dist-bar {
	position: relative;
	height: 8px;
	overflow: hidden;
	background: var(--pmd-color-surface-alt);
	border-radius: var(--pmd-radius-pill);
}

.pmd-rev-dist-bar span {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	height: 100%;
	background: var(--pmd-color-warning);
	border-radius: var(--pmd-radius-pill);
}

.pmd-rev-dist-count {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* ── Empty state ─────────────────────────────────────────────── */

/* An icon, one line, and a sentence: the account panel's empty state. */
.pmd-rev-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pmd-space-2);
	padding: var(--pmd-space-6) var(--pmd-space-5);
	color: var(--pmd-color-text-muted);
	text-align: center;
	background: var(--pmd-rev-card);
	border: 1px dashed var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-xl);
}

.pmd-reviews .pmd-rev-empty > .pmd-ico {
	box-sizing: content-box;
	margin-bottom: var(--pmd-space-1);
	padding: 14px;
	color: var(--pmd-rev-ink);
	background: var(--pmd-color-primary-soft);
	border-radius: var(--pmd-radius-full);
}

.pmd-reviews .pmd-rev-empty h3 {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-lg);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
}

.pmd-rev-empty p {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-normal);
	text-wrap: pretty;
}

/* ── Review list ─────────────────────────────────────────────── */

.pmd-rev-list {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
}

.pmd-rev-item {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
	padding: var(--pmd-space-4);
}

.pmd-rev-head {
	display: flex;
	align-items: center;
	gap: var(--pmd-space-3);
}

.pmd-rev-avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #ffffff;
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	border-radius: var(--pmd-radius-full);
}

/*
 * Eight literal background colours, picked deterministically from the
 * reviewer's user id (Reviews::avatar_variant()) so the same person keeps
 * the same avatar colour across reloads — the same idea as directory.css's
 * six .pmd-thumb-N gradients, one variant per reviewer instead of per place.
 */
.pmd-avatar-1 { background: #f59e0b; }
.pmd-avatar-2 { background: #10b981; }
.pmd-avatar-3 { background: #ec4899; }
.pmd-avatar-4 { background: #3b82f6; }
.pmd-avatar-5 { background: #7c3aed; }
.pmd-avatar-6 { background: #ea580c; }
.pmd-avatar-7 { background: #0ea5e9; }
.pmd-avatar-8 { background: #64748b; }

.pmd-rev-who {
	flex: 1;
	min-width: 0;
}

.pmd-rev-name {
	margin: 0;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-semibold);
	line-height: var(--pmd-leading-snug);
	overflow-wrap: anywhere;
}

.pmd-rev-date {
	margin: 2px 0 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

.pmd-rev-comment {
	margin: 0;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-md);
	line-height: var(--pmd-leading-normal);
	white-space: pre-line;
	overflow-wrap: break-word;
}

/* ── Owner reply ─────────────────────────────────────────────── */

.pmd-rev-reply {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin-inline-start: var(--pmd-space-4);
	padding: var(--pmd-space-3) var(--pmd-space-4);
	background: var(--pmd-color-primary-soft);
	border-inline-start: 3px solid var(--pmd-color-primary);
	border-radius: var(--pmd-radius-lg);
}

.pmd-rev-reply-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pmd-space-2);
}

.pmd-rev-reply-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--pmd-space-2);
	color: var(--pmd-color-on-primary);
	font-size: var(--pmd-text-xs);
	font-weight: var(--pmd-weight-semibold);
	letter-spacing: 0.02em;
	background: var(--pmd-color-primary);
	border-radius: var(--pmd-radius-pill);
}

.pmd-rev-reply-date {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

.pmd-rev-reply-text {
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-normal);
}

.pmd-rev-reply-text p {
	margin: 0;
}

.pmd-rev-reply-text p + p {
	margin-top: var(--pmd-space-2);
}

@media (min-width: 640px) {

	.pmd-rev-summary {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--pmd-space-6);
		padding: var(--pmd-space-5);
	}

	.pmd-rev-dist {
		flex: 1;
		max-width: 320px;
	}

	.pmd-rev-item {
		padding: var(--pmd-space-5);
	}

	.pmd-rev-reply {
		margin-inline-start: calc(44px + var(--pmd-space-3));
	}
}

/* ── Write-a-review form / login prompt ──────────────────────── */

.pmd-rev-form {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	padding: var(--pmd-space-5) var(--pmd-space-4);
}

@media (min-width: 640px) {
	.pmd-rev-form {
		padding: var(--pmd-space-5);
	}
}

.pmd-reviews .pmd-rev-form-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-lg);
	font-weight: var(--pmd-weight-bold);
	line-height: var(--pmd-leading-tight);
}

.pmd-rev-login-text {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-md);
	text-wrap: pretty;
}

/* "Log in", and "Create an account" while registration is open. */
.pmd-rev-login-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-3);
}

/*
 * The notice both forms render on the way back — success or one of
 * Review\Submit's / Review\OwnerResponse's refusals, translated by
 * ReviewForm::review_outcome()/reply_outcome() into a sentence that says
 * what to do next. The text is the status colour leaned toward the text
 * colour, over the same colour faintly tinted into the card: AA in light
 * and dark palettes, where the raw status colour on its own tint is not.
 */
.pmd-rev-notice {
	padding: var(--pmd-space-3) var(--pmd-space-4);
	color: var(--pmd-color-text);
	background: var(--pmd-rev-card);
	border: 1px solid var(--pmd-color-border);
	border-inline-start-width: 4px;
	border-radius: var(--pmd-radius-lg);
}

.pmd-rev-notice p {
	margin: 0;
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-snug);
}

.pmd-rev-notice-success {
	color: color-mix(in srgb, var(--pmd-color-success) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-success) 12%, var(--pmd-rev-card));
	border-color: color-mix(in srgb, var(--pmd-color-success) 35%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-success);
}

.pmd-rev-notice-error {
	color: color-mix(in srgb, var(--pmd-color-danger) 45%, var(--pmd-color-text));
	background: color-mix(in srgb, var(--pmd-color-danger) 12%, var(--pmd-rev-card));
	border-color: color-mix(in srgb, var(--pmd-color-danger) 35%, var(--pmd-color-border));
	border-inline-start-color: var(--pmd-color-danger);
}

.pmd-rev-form form {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-4);
	margin: 0;
}

.pmd-rev-rating-field {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

.pmd-reviews .pmd-rev-rating-field legend {
	padding: 0;
	margin: 0 0 var(--pmd-space-1);
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

/*
 * Five real radio inputs, not a div with click handlers — see
 * templates/reviews/write-form.php for why. Each radio is clipped out of
 * sight with the same declarations as .pmd-visually-hidden above, never
 * display:none or visibility:hidden, which would also drop it from the tab
 * order and the accessibility tree: the group stays keyboard-operable and
 * screen-reader announced while only its star labels paint. The focused
 * radio cannot be seen, so its label carries the focus ring.
 * tests/unit/Front/StarInputVisuallyHiddenTest enforces both.
 *
 * DOM order is 5..1 and the row is reversed so the 1-star label reads
 * first, left to right — the layout a visitor expects. That order is also
 * what makes the sibling selectors below work: every label for a LOWER
 * rating sits AFTER a given star in DOM order, exactly the set `~` needs to
 * select when that star is checked or hovered.
 */
.pmd-rev-star-input {
	position: relative;
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.pmd-rev-star-input input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A 40×44 target per star; the width also beats a theme's `label { width: 100% }`. */
.pmd-reviews .pmd-rev-star-input label {
	display: grid;
	place-items: center;
	width: 40px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--pmd-color-border-strong);
	cursor: pointer;
	border-radius: var(--pmd-radius-sm);
}

.pmd-reviews .pmd-rev-star-input .pmd-ico {
	width: 28px;
	height: 28px;
}

.pmd-reviews .pmd-rev-star-input input:checked ~ label,
.pmd-reviews .pmd-rev-star-input label:hover,
.pmd-reviews .pmd-rev-star-input label:hover ~ label {
	color: color-mix(in srgb, var(--pmd-color-warning) 85%, var(--pmd-color-text));
}

.pmd-rev-star-input input:focus-visible + label {
	outline: 2px solid var(--pmd-rev-ring);
	outline-offset: -2px;
}

.pmd-rev-comment-field {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: 0;
}

.pmd-reviews .pmd-rev-comment-field label {
	width: auto;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

/*
 * Both forms' text areas: 16px text (no zoom on iOS), token colours on the
 * card surface, and a visible focus ring.
 */
.pmd-rev-comment-field textarea,
.pmd-rev-reply-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 112px;
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-3);
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-md);
	line-height: var(--pmd-leading-normal);
	background: var(--pmd-rev-card);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-md);
	box-shadow: none;
	resize: vertical;
	transition-property: border-color;
	transition-duration: var(--pmd-duration-fast);
	transition-timing-function: var(--pmd-ease-out);
}

.pmd-rev-comment-field textarea:focus-visible,
.pmd-rev-reply-form textarea:focus-visible {
	border-color: var(--pmd-color-primary);
	outline: 2px solid var(--pmd-rev-ring);
	outline-offset: 1px;
}

.pmd-rev-charcount {
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
}

/* Pill buttons, 44px tall; on a phone the form's own button fills the row. */
.pmd-rev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pmd-space-2);
	min-height: 44px;
	margin: 0;
	padding: var(--pmd-space-2) var(--pmd-space-5);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	line-height: var(--pmd-leading-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--pmd-radius-pill);
	align-self: flex-start;
	-webkit-tap-highlight-color: transparent;
	transition-property: background-color, border-color, color, scale;
	transition-duration: var(--pmd-duration-fast);
	transition-timing-function: var(--pmd-ease-out);
}

.pmd-rev-btn:active {
	scale: 0.97;
}

.pmd-rev-btn-primary,
a.pmd-rev-btn-primary:link,
a.pmd-rev-btn-primary:visited {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary);
}

.pmd-rev-btn-primary:hover,
.pmd-rev-btn-primary:focus-visible,
a.pmd-rev-btn-primary:hover,
a.pmd-rev-btn-primary:focus-visible {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary-hover);
}

.pmd-rev-btn-secondary,
a.pmd-rev-btn-secondary:link,
a.pmd-rev-btn-secondary:visited {
	color: var(--pmd-color-text);
	background: var(--pmd-rev-card);
	border-color: var(--pmd-color-border-strong);
}

.pmd-rev-btn-secondary:hover,
.pmd-rev-btn-secondary:focus-visible,
a.pmd-rev-btn-secondary:hover,
a.pmd-rev-btn-secondary:focus-visible {
	color: var(--pmd-rev-ink);
	background: var(--pmd-rev-card);
	border-color: var(--pmd-color-primary);
}

.pmd-rev-btn:focus-visible {
	outline: 2px solid var(--pmd-rev-ring);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.pmd-rev-form form > .pmd-rev-btn,
	.pmd-rev-login-actions .pmd-rev-btn {
		flex: 1 1 100%;
		align-self: stretch;
	}
}

/* ── Owner-reply composer ────────────────────────────────────── */

.pmd-rev-reply-form {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
	margin-inline-start: var(--pmd-space-4);
	padding: var(--pmd-space-4);
	background: var(--pmd-color-surface-alt);
	border: 1px dashed var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-lg);
}

@media (min-width: 640px) {
	.pmd-rev-reply-form {
		margin-inline-start: calc(44px + var(--pmd-space-3));
	}
}

.pmd-reviews .pmd-rev-reply-form-title {
	margin: 0;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-rev-reply-form form {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3);
	margin: 0;
}

.pmd-rev-reply-form form p {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-1);
	margin: 0;
}

.pmd-reviews .pmd-rev-reply-form label {
	width: auto;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
	.pmd-rev-btn,
	.pmd-rev-comment-field textarea,
	.pmd-rev-reply-form textarea {
		transition: none;
	}

	.pmd-rev-btn:active {
		scale: none;
	}
}