/**
 * EDD Reviews — theme styling.
 *
 * EDD Reviews ships only generic CSS (floats, Helvetica, yellow bars) and
 * renders every star as a `dashicons` glyph. This theme strips dashicons for
 * logged-out visitors (see remove_jquery_and_dashicons() in functions.php) for
 * performance, which leaves the review *display* starless for the people who
 * see it most. So stars here are drawn from a unicode glyph in the inherited
 * font instead of the dashicons webfont — they render whether or not dashicons
 * is on the page, and the colour still tracks the empty/filled class the
 * plugin's JS toggles on the rating input.
 *
 * Everything is scoped under .edd-reviews-area so it can't leak into other EDD
 * surfaces. Tokens mirror theme.json; structural choices follow edd-login.css.
 */

/*
 * The area fills the content column so its top border reads as a full-width
 * divider; the review content itself is constrained and left-aligned below.
 */
.edd-reviews-area {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.edd-reviews-area .edd-reviews-list,
.edd-reviews-area .edd-reviews-form {
	max-width: 42rem;
	margin-inline: 0;
}

.edd-reviews-area .edd-reviews-heading,
.edd-reviews-area .edd-reviews-list > h2,
.edd-reviews-area .edd-reviews-list > h3 {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* ---- Stars: font-independent, dashicons not required ------------------- */

.edd-reviews-area .dashicons-star-empty,
.edd-reviews-area .dashicons-star-filled {
	/* Beat dashicons' own `font-family:dashicons !important`. */
	font-family: inherit !important;
	width: auto;
	height: auto;
	font-size: 1.15rem;
	line-height: 1;
	vertical-align: middle;
}

.edd-reviews-area .dashicons-star-empty::before,
.edd-reviews-area .dashicons-star-filled::before {
	content: "\2605"; /* ★ */
	font-family: inherit;
}

.edd-reviews-area .dashicons-star-empty::before {
	color: #d4d4d4;
}

.edd-reviews-area .dashicons-star-filled::before {
	color: var(--wp--preset--color--custom-warning);
}

/* ---- Review summary + breakdown --------------------------------------- */

.edd-reviews-area .edd_reviews_breakdown {
	margin-block: var(--wp--preset--spacing--40);
}

/* Compact summary line: average stars, the score, then the ratings count. */
.edd-reviews-area .edd-reviews-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}

.edd-reviews-area .edd-reviews-summary-stars {
	line-height: 1;
}

.edd-reviews-area .edd-reviews-summary-score {
	font-weight: 700;
}

.edd-reviews-area .edd-reviews-summary-count {
	color: var(--wp--preset--color--custom-contrast-2);
	font-size: var(--wp--preset--font-size--sm);
}

.edd-reviews-area .edd-reviews-summary-count::before {
	content: "·";
	margin-inline-end: 0.5rem;
}

/* Per-star distribution: one row per star value, shown only past a threshold. */
.edd-reviews-area .edd-reviews-breakdown-ratings {
	margin-block-start: var(--wp--preset--spacing--30);
	display: grid;
	gap: 0.35rem;
	max-width: 22rem;
}

.edd-reviews-area .edd-counter-container {
	display: grid;
	grid-template-columns: 3.5rem 1fr 2rem;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
}

.edd-reviews-area .edd-counter-label {
	color: var(--wp--preset--color--custom-contrast-2);
	white-space: nowrap;
}

.edd-reviews-area .edd-counter-back {
	background: #ececec;
	border-radius: 4px;
	height: 10px;
	overflow: hidden;
}

.edd-reviews-area .edd-counter-front {
	display: block;
	background: var(--wp--preset--color--custom-warning);
	border-radius: 4px;
	height: 10px;
}

.edd-reviews-area .edd-counter-container .edd-review-count {
	color: var(--wp--preset--color--custom-contrast-2);
	text-align: right;
}

/* ---- Review list ------------------------------------------------------- */

.edd-reviews-area .edd_review {
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	list-style: none;
}

.edd-reviews-area .edd_review .avatar {
	border-radius: 8px;
	margin-right: var(--wp--preset--spacing--30);
}

/* The review body holds a left-floated avatar; flow-root makes the row's
   padding and bottom border wrap the float instead of collapsing around it. */
.edd-reviews-area .edd-review-body {
	display: flow-root;
}

/* Stars get their own line beside the avatar, above the byline. */
.edd-reviews-area .edd-review-meta-rating {
	display: block;
	line-height: 1;
}

/* Byline: "By <author> on <date>  Edit" — small and quiet, name carries weight. */
.edd-reviews-area .edd-review-metadata p {
	margin: 0;
	margin-block-start: 0.15rem;
	color: var(--wp--preset--color--custom-contrast-2);
	font-size: var(--wp--preset--font-size--sm);
}

.edd-reviews-area .edd-review-metadata .author {
	font-weight: 600;
	color: var(--wp--preset--color--custom-contrast);
}

.edd-reviews-area .edd-review-metadata a {
	color: inherit;
	text-decoration: none;
}

.edd-reviews-area .edd-review-metadata a:hover {
	text-decoration: underline;
}

/* Review text starts full-width below the meta. Bodyless one-click ratings are
   filtered out of the list upstream, so a listed review always has text. */
.edd-reviews-area .edd-review-content {
	clear: both;
	margin-block-start: var(--wp--preset--spacing--20);
}

.edd-reviews-area .edd-review-vote {
	background: var(--wp--preset--color--custom-base);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30);
}

.edd-reviews-area .edd-reviews-awaiting-moderation {
	color: var(--wp--preset--color--custom-contrast-2);
	font-style: italic;
}

/* ---- Write-a-review form ----------------------------------------------- */

.edd-reviews-area .edd-reviews-form {
	overflow: visible;
}

.edd-reviews-area .logged-in-as,
.edd-reviews-area .comment-notes {
	color: var(--wp--preset--color--custom-contrast-2);
	font-size: var(--wp--preset--font-size--sm);
	margin-block-end: var(--wp--preset--spacing--40);
}

.edd-reviews-area fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.edd-reviews-area .edd-reviews-form-inner > p {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.edd-reviews-area .edd-reviews-form label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-block-end: var(--wp--preset--spacing--20);
}

.edd-reviews-area .required {
	color: var(--wp--preset--color--custom-error);
}

.edd-reviews-area input[type="text"],
.edd-reviews-area textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 11px 13px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 8px;
	background: var(--wp--preset--color--custom-base-2);
	color: var(--wp--preset--color--custom-contrast);
	font: inherit;
	line-height: 1.4;
}

.edd-reviews-area textarea {
	min-height: 120px;
	resize: vertical;
}

.edd-reviews-area input[type="text"]:focus,
.edd-reviews-area textarea:focus {
	outline: 2px solid var(--wp--preset--color--custom-accent);
	outline-offset: 2px;
	border-color: transparent;
}

/* Interactive rating: the plugin's JS swaps empty/filled classes in place. */
.edd-reviews-area .edd-reviews-star-rating-container {
	display: inline-flex;
	gap: 4px;
}

.edd-reviews-area .edd-reviews-star-rating {
	cursor: pointer;
	font-size: 1.6rem;
	width: auto;
	height: auto;
}

.edd-reviews-area input[type="submit"] {
	display: inline-block;
	cursor: pointer;
	background: var(--wp--preset--color--custom-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 12px 24px;
	font: inherit;
	font-weight: 600;
	line-height: 1;
}

.edd-reviews-area input[type="submit"]:hover {
	filter: brightness(1.08);
}

.edd-reviews-area input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-accent);
	outline-offset: 2px;
}

/* ---- Logged-out call to action ----------------------------------------- */

/*
 * The plugin drops a full wp_login_form() (username + password fields) inline
 * here for logged-out visitors — jarring on a product page. Hide it; the
 * filtered .edd-reviews-not-allowed message (see functions.php) carries
 * styled links to /login/ and /signup/ instead.
 */
.edd-reviews-area #loginform {
	display: none;
}

/* Plain text + actions, not a card — no border, background, or padding. */
.edd-reviews-area .edd-reviews-not-allowed {
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: var(--wp--preset--font-size--md);
}

.edd-reviews-area .fp-review-cta__text {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--custom-contrast);
}

.edd-reviews-area .fp-review-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/*
 * The primary action is a real site button: the wp-block-button__link and
 * wp-element-button classes give it the theme's pill shape, accent background
 * and white text from theme.json, exactly like every other button on the site.
 * The only tweak is sizing it to the review area's small scale.
 */
.edd-reviews-area .fp-review-cta__login {
	font-size: var(--wp--preset--font-size--sm);
}

/* "Create a free account" is the lighter, secondary action. */
.edd-reviews-area .fp-review-cta__signup {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--custom-accent);
	text-decoration: none;
}

.edd-reviews-area .fp-review-cta__signup:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Review photo upload (free-presets-review-images add-on) ------------ */

/*
 * The add-on injects an optional photo field into the review form and a photo
 * gallery under each review. The plugin ships no CSS of its own, so the look
 * lives here, matching the rest of the form (token-driven, scoped to the area).
 */
.edd-reviews-area .fp-review-images-field {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.edd-reviews-area .fp-review-images-label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-block-end: var(--wp--preset--spacing--20);
}

.edd-reviews-area .fp-review-images-help {
	margin-block: 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--custom-contrast-2);
	font-size: var(--wp--preset--font-size--sm);
}

.edd-reviews-area .fp-review-images-field input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 13px;
	border: 1px dashed rgba(0, 0, 0, .25);
	border-radius: 8px;
	background: var(--wp--preset--color--custom-base-2);
	color: var(--wp--preset--color--custom-contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

/* The browser's "Choose files" button, styled to match the secondary buttons. */
.edd-reviews-area .fp-review-images-field input[type="file"]::file-selector-button {
	margin-inline-end: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--custom-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 8px 16px;
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.edd-reviews-area .fp-review-images-field input[type="file"]::file-selector-button:hover {
	filter: brightness(1.08);
}

.edd-reviews-area .fp-review-images-field input[type="file"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-accent);
	outline-offset: 2px;
}

.edd-reviews-area .fp-review-images-notice {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--custom-error);
}

.edd-reviews-area .fp-review-images-notice[hidden] {
	display: none;
}

/* Fine print under the review form: a review is public and governed by the site
   terms. Mirrors the one tap bar's consent line. */
.edd-reviews-area .fp-review-consent {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--custom-contrast-2);
}

.edd-reviews-area .fp-review-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Photo gallery under a published review. */
.edd-reviews-area .fp-review-images {
	list-style: none;
	margin-block: var(--wp--preset--spacing--30) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.edd-reviews-area .fp-review-image-item {
	margin: 0;
	padding: 0;
}

.edd-reviews-area .fp-review-image-item a {
	display: block;
	line-height: 0;
}

.edd-reviews-area .fp-review-image {
	width: auto;
	max-height: 140px;
	border-radius: 8px;
	object-fit: cover;
}

/* ---- Quick rating (free-presets-quick-rating add-on) -------------------- */

/*
 * One click star rating. The same control appears above the review form on a
 * product page and in the "rate the presets you have used" list on the account
 * page. The plugin ships no CSS; the look lives here. Stars are gold when set,
 * neutral when empty, and the control is built from accessible buttons.
 */
.fp-quick-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.fp-quick-rating__label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--custom-contrast);
}

.fp-quick-rating--rated .fp-quick-rating__label {
	font-weight: 500;
	color: var(--wp--preset--color--custom-contrast-2);
}

.fp-quick-rating__stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
}

.fp-quick-rating__star {
	background: none;
	border: 0;
	margin: 0;
	padding: 2px;
	font-size: 1.5rem;
	line-height: 1;
	color: #cfd3dc;
	cursor: pointer;
	transition: color 0.12s ease, transform 0.12s ease;
}

.fp-quick-rating__star:hover {
	transform: scale(1.08);
}

.fp-quick-rating__star.is-on,
.fp-quick-rating__star.is-preview {
	color: #f5b301;
}

/*
 * Changing an existing rating means a hover has to be able to preview a lower
 * value too. While the stars are being previewed (hover or keyboard) the set
 * rating is held back, so only the stars up to the cursor light up.
 */
.fp-quick-rating__stars.is-previewing .fp-quick-rating__star {
	color: #cfd3dc;
}

.fp-quick-rating__stars.is-previewing .fp-quick-rating__star.is-preview {
	color: #f5b301;
}

.fp-quick-rating__star:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.fp-quick-rating__star[disabled] {
	cursor: default;
}

.fp-quick-rating__star[disabled]:hover {
	transform: none;
}

.fp-quick-rating__stars--static .fp-quick-rating__star {
	padding: 0;
	font-size: 1.15rem;
	cursor: default;
}

.fp-quick-rating__msg {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--custom-contrast-2);
}

/* Fine print that a rating is public and governed by the site terms. Full width
   so it sits on its own line under the stars. */
.fp-quick-rating__consent {
	flex-basis: 100%;
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--custom-contrast-2);
}

.fp-quick-rating__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Take the rating back entirely, with a small inline confirm so a stray tap
   does not throw it away. */
.fp-quick-rating__remove,
.fp-quick-rating__confirm-yes,
.fp-quick-rating__confirm-no {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.fp-quick-rating__remove {
	color: var(--wp--preset--color--custom-contrast-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fp-quick-rating__remove:hover {
	color: var(--wp--preset--color--custom-contrast);
}

.fp-quick-rating__confirm {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--custom-contrast-2);
}

.fp-quick-rating__confirm-yes {
	color: #b3261e;
	font-weight: 600;
}

.fp-quick-rating__confirm-no {
	color: var(--wp--preset--color--custom-contrast);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fp-quick-rating.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* The optional "add a few words" box that appears after a rating. */
.fp-quick-rating__note {
	flex-basis: 100%;
	margin-block-start: var(--wp--preset--spacing--10, 0.5rem);
}

.fp-quick-rating__note-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 0.4em);
	width: fit-content;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--custom-accent);
	cursor: pointer;
	list-style: none;
}

.fp-quick-rating__note-toggle::-webkit-details-marker {
	display: none;
}

.fp-quick-rating__note-toggle::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.25em;
	block-size: 1.25em;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-weight: 700;
	line-height: 1;
}

.fp-quick-rating__note[open] .fp-quick-rating__note-toggle::before {
	content: "\2212";
}

.fp-quick-rating__note-field {
	margin-block-start: var(--wp--preset--spacing--20);
}

.fp-quick-rating__note-input {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 13px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 8px;
	background: var(--wp--preset--color--custom-base-2);
	color: var(--wp--preset--color--custom-contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
}

.fp-quick-rating__note-save {
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 8px 18px;
	background: var(--wp--preset--color--custom-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.fp-quick-rating__note-save:hover {
	filter: brightness(1.08);
}

.fp-quick-rating__note-save[disabled] {
	opacity: 0.6;
	cursor: default;
}

.fp-quick-rating__note-msg,
.fp-quick-rating__note-done {
	display: block;
	margin-block-start: var(--wp--preset--spacing--10, 0.5rem);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--custom-contrast-2);
}

/* The bar sits above the review form on a product page. */
.fp-quick-rating--product {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
}

/* The link that reveals the full review form, so the one-click bar can lead. */
.fp-quick-rating-more {
	display: inline-block;
	margin-block: 0 var(--wp--preset--spacing--40);
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--custom-accent);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.fp-quick-rating-more:hover {
	text-decoration: none;
}

.fp-quick-rating-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---- Guided panel (product page one-click rating) ---------------------- */

/*
 * On a product page the one-click rating is presented as a self-contained card:
 * a heading, the stars, and a footer carrying the consent fine print and the
 * "write a full review" link. The card replaces EDD's own "Write a Review"
 * heading and "logged in as" line (hidden via #edd-reviews-respond.fp-qr-on
 * below) so the rating reads as the single, unambiguous primary action.
 * Choosing "write a full review" removes that class and EDD's chrome returns
 * with the form.
 */
.fp-quick-rating--panel {
	display: block;
	background: var(--wp--preset--color--custom-base-2);
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* Quiet "Signed in as … · Sign out", right-aligned on its own line up top. */
.fp-quick-rating__account {
	display: block;
	text-align: right;
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--custom-contrast-2);
}

.fp-quick-rating__account a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fp-quick-rating__heading {
	display: block;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--custom-contrast);
}

/* The panel turns the label into a muted sub-line beneath the heading. */
.fp-quick-rating--panel .fp-quick-rating__label {
	display: block;
	margin-block: 2px var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--custom-contrast-2);
}

.fp-quick-rating--panel .fp-quick-rating__stars {
	display: inline-flex;
	gap: 4px;
}

/* Comfortable 30px classic-gold stars — the primary action, easy to see and tap. */
.fp-quick-rating--panel .fp-quick-rating__star {
	font-size: 30px;
	padding: 2px;
}

.fp-quick-rating--panel .fp-quick-rating__msg {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Footer: the full-review link (moved in by the script) on the left, the consent
   fine print on the right, above a hairline divider. */
.fp-quick-rating__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(0, 0, 0, .06);
}

.fp-quick-rating__foot .fp-quick-rating-more {
	margin: 0;
}

.fp-quick-rating__foot .fp-quick-rating__consent {
	flex-basis: auto;
	margin: 0;
}

/* While the panel leads, hide EDD's now-redundant heading and "logged in as"
   line; they return when the full review form is revealed (.fp-qr-on removed). */
#edd-reviews-respond.fp-qr-on > #edd-reviews-heading,
#edd-reviews-respond.fp-qr-on > .logged-in-as {
	display: none;
}