/**
 * NeoGrow product-page styles: review photos and their lightbox, the photo
 * upload field, the incentive disclosure, the "Earn X points" message, and
 * the review list itself — helpful votes, the Report control and its dialog,
 * and the enhanced list layout.
 *
 * The earn message is loyalty rather than reviews, but it only ever renders on
 * a product page, so it lives here rather than costing that page a second
 * stylesheet.
 *
 * Loaded on product pages, and by whatever renders this markup anywhere else —
 * never on a page that shows none of it.
 *
 * The --neo-* custom properties come from the merchant's Design settings and
 * are emitted at runtime on the neogrow-design handle; see
 * NeoGrow\Frontend\Assets.
 */

/* Lightbox */
#neoplugin-lightbox {
	display: none;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba( 0, 0, 0, 0.9 );
	backdrop-filter: blur( 5px );
}

#neoplugin-lightbox.is-open {
	display: block;
}

.neoplugin-modal-content {
	margin: 5% auto;
	display: block;
	width: 80%;
	max-width: 800px;
	max-height: 85vh;
	object-fit: contain;
	animation-name: neoplugin-zoom;
	animation-duration: 0.3s;
	border-radius: 4px;
	box-shadow: 0 0 20px rgba( 0, 0, 0, 0.5 );
}

@keyframes neoplugin-zoom {
	from {
		transform: scale( 0 );
	}

	to {
		transform: scale( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.neoplugin-modal-content {
		animation: none;
	}
}

.neoplugin-close {
	position: absolute;
	top: 20px;
	right: 35px;
	color: #898989;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

.neoplugin-close:hover,
.neoplugin-close:focus-visible {
	color: #fff;
}

#neoplugin-caption {
	color: #fff;
	text-align: center;
	padding: 10px 20px;
}

@media only screen and ( max-width: 700px ) {
	.neoplugin-modal-content {
		width: 95%;
		margin-top: 15%;
	}
}

/* Review upload */
.neoplugin-review-upload {
	margin: 15px 0;
}

.neoplugin-upload-label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

#neoplugin_review_image {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

#neoplugin_review_image:focus-visible + .neoplugin-upload-label {
	outline: 2px solid var( --neo-primary );
	outline-offset: 2px;
}

.neoplugin-review-earnings {
	margin: 0 0 15px;
	font-size: 0.875em;
}

#neoplugin-preview {
	margin-top: 10px;
}

.neoplugin-review-preview-img {
	max-width: 100px;
	border-radius: var( --neo-border-radius );
}

/* The chosen photo, its file name and a way to take it back (1.2.7). */
.neoplugin-upload-chosen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.neoplugin-upload-name {
	font-size: 0.9em;
	word-break: break-all;
}

.neoplugin-upload-remove {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	text-decoration: underline;
	cursor: pointer;
}

/* A file refused before the review is sent, with the reason (1.2.7). */
.neoplugin-upload-error {
	margin: 6px 0 0;
	font-size: 0.9em;
	color: #b32d2e;
}

.neoplugin-review-image-wrapper {
	margin-top: 10px;
	width: 100%;
}

.neoplugin-review-image {
	max-width: 150px;
	border-radius: var( --neo-border-radius );
	border: 1px solid #ddd;
}

.neoplugin-product-message {
	margin-bottom: 15px;
	color: var( --neo-success );
	font-weight: bold;
}

/*
 * Incentive disclosure (1.2.5) — shown just above the review form. Same
 * icon-free rule as the notice above; the tint follows the merchant's brand
 * colour.
 */
.neoplugin-review-disclosure {
	padding: 10px;
	margin: 0 0 15px;
	font-size: 0.875em;
	color: var( --neo-text );
	border-left: 3px solid var( --neo-primary );
	border-radius: var( --neo-border-radius );
	/* Flat fallback first, as for .neoplugin-notice-success. */
	background: #f4f6f8;
	background: color-mix( in srgb, var( --neo-primary ), transparent 94% );
}

/* Maximum upload size, shown under the review photo button */
.neoplugin-upload-limit {
	margin: 6px 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Helpful votes
 *
 * Colours come from the Design settings via the --neo-* custom properties, so
 * the control follows the merchant's branding rather than adding appearance
 * options of its own.
 */
.neogrow-helpful {
	/* Space below as well as above, so the actions bar does not sit on the
	 * divider the theme draws between reviews. */
	margin: 12px 0 16px;
}

/* The count sits on its own line above the controls, and is absent rather
 * than empty until somebody votes — a review with no votes has nothing to
 * say, and :empty is what keeps the markup identical either way. */
.neogrow-helpful__tally {
	font-size: 0.85em;
	margin: 0 0 6px;
	opacity: 0.75;
}

.neogrow-helpful__tally:empty {
	display: none;
}

.neogrow-helpful__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.neogrow-helpful__form {
	margin: 0;
}

/* An outline button. The guest variant is the same control wearing the same
 * clothes — it reads "Helpful" too, and only its tooltip and destination
 * differ, so it must not look like a different kind of thing. */
.neogrow-helpful__button {
	background: none;
	border: 1px solid var( --neo-primary );
	border-radius: 999px;
	color: var( --neo-primary );
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: 0.82em;
	line-height: 1.4;
	/* 32px tall at the default font size, and comfortably past the 24px
	 * minimum target size WCAG 2.2 asks for. */
	padding: 6px 16px;
	text-decoration: none;
}

.neogrow-helpful__button:hover,
.neogrow-helpful__button:focus-visible {
	/* Fills rather than changing the border colour: the border is already the
	 * primary colour at rest, so there is nothing left for hover to say with
	 * it. color-mix keeps it in step with a merchant's own brand colour, with
	 * a flat fallback first for browsers without it. */
	background: #f2f6fa;
	background: color-mix( in srgb, var( --neo-primary ), transparent 92% );
	color: var( --neo-primary );
}

/* The pressed state is carried by aria-pressed as well as the class, so it is
 * announced and not only seen. */
.neogrow-helpful__button.is-voted {
	background: var( --neo-primary );
	border-color: var( --neo-primary );
	color: #fff;
}

.neogrow-helpful__button[disabled] {
	cursor: default;
	opacity: 0.6;
}

.neogrow-helpful__error {
	color: #b32d2e;
	font-size: 0.82em;
	margin: 0;
}


.neogrow-helpful__notice {
	font-size: 0.82em;
	margin: 0;
	opacity: 0.85;
}

/* Themes underline links inside a comment, and a control styled as a button is
 * still an anchor. Astra's rule is
 * `.ast-comment-content a:not(.ast-comment-edit-reply-wrap a)`, which carries
 * specificity 0-2-2 because :not() takes the weight of its argument — so a
 * single class here loses, and the line is drawn straight through the button.
 *
 * The depth below is the whole point of these selectors and their only reason
 * to exist: 0-3-1 outranks it without !important, which would then have to be
 * beaten by every theme that legitimately wants a say.
 */
.neogrow-helpful .neogrow-helpful__actions a.neogrow-helpful__button,
.neogrow-helpful .neogrow-helpful__actions a.neogrow-helpful__button:hover,
.neogrow-helpful .neogrow-helpful__actions a.neogrow-helpful__button:focus {
	text-decoration: none;
}

/* Report is a plain link rather than a button, so it keeps a link's manners —
 * but underlined only on hover, matching the <summary> it stands in for when a
 * customer is signed in. Permanently underlined beside a button reads as two
 * unrelated things. */
.neogrow-helpful .neogrow-helpful__actions a.neogrow-report__login {
	text-decoration: none;
}

.neogrow-helpful .neogrow-helpful__actions a.neogrow-report__login:hover,
.neogrow-helpful .neogrow-helpful__actions a.neogrow-report__login:focus {
	text-decoration: underline;
}

/* Report modal
 *
 * Opened by :target, which is the only way to open *and dismiss* a panel with
 * no JavaScript: the trigger, the Cancel button and the backdrop are all plain
 * links, so every one of them works with scripting off.
 */
.neogrow-report__toggle,
.neogrow-report__login,
.neogrow-report__done {
	color: inherit;
	font-size: 0.82em;
	opacity: 0.75;
}

.neogrow-report__toggle:hover,
.neogrow-report__toggle:focus-visible {
	opacity: 1;
}

.neogrow-report {
	display: none;
}

.neogrow-report:target,
.neogrow-report.is-open {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 999998;
}

/* An anchor rather than a div, so clicking away dismisses without script.
 * tabindex="-1" keeps it out of the tab order — Cancel is the reachable way
 * out, and a full-viewport link between the panel's fields would be noise. */
.neogrow-report__backdrop {
	background: rgba( 0, 0, 0, 0.6 );
	display: block;
	inset: 0;
	position: fixed;
}

.neogrow-report__panel:focus {
	/* Focused programmatically on open so the question is announced before the
	 * options; it is not a tab stop, so it needs no visible ring of its own. */
	outline: none;
}

.neogrow-report__panel {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	color: var( --neo-text );
	max-height: calc( 100vh - 40px );
	max-width: 420px;
	overflow-y: auto;
	padding: 24px;
	position: relative;
	/* Explicit, because the backdrop is position:fixed and would otherwise
	 * cover the panel and swallow every click inside it — including Cancel. */
	z-index: 1;
	width: 100%;
}

.neogrow-report__title {
	font-size: 1.15em;
	margin: 0 0 8px;
}

.neogrow-report__intro {
	font-size: 0.9em;
	margin: 0 0 16px;
	opacity: 0.85;
}

.neogrow-report__form {
	margin: 0;
}

.neogrow-report__reasons {
	border: 0;
	margin: 0 0 14px;
	padding: 0;
}

.neogrow-report__reasons legend {
	font-size: 0.9em;
	font-weight: 600;
	margin: 0 0 8px;
	padding: 0;
}

.neogrow-report__reason {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 0.9em;
	gap: 8px;
	margin: 0 0 6px;
}

/* The honest note, and the reason this modal is not a copy of Amazon's:
 * nothing here removes anything. */
.neogrow-report__note {
	border-left: 3px solid var( --neo-border );
	font-size: 0.82em;
	margin: 0 0 18px;
	opacity: 0.8;
	padding-left: 10px;
}

.neogrow-report__buttons {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.neogrow-report__cancel,
.neogrow-report__submit {
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 0.85em;
	line-height: 1.4;
	padding: 8px 18px;
	text-decoration: none;
}

.neogrow-report__cancel {
	background: none;
	border: 1px solid var( --neo-border );
	color: inherit;
}

.neogrow-report__submit {
	background: var( --neo-primary );
	border: 1px solid var( --neo-primary );
	color: #fff;
}

.neogrow-report__cancel:hover,
.neogrow-report__cancel:focus-visible {
	border-color: var( --neo-text );
}

.neogrow-report__submit:hover,
.neogrow-report__submit:focus-visible {
	opacity: 0.9;
}

/* Same theme-underline problem the vote button has: these are anchors inside a
 * comment, and Astra's 0-2-2 rule would draw a line through both. */
.neogrow-report__panel .neogrow-report__buttons a.neogrow-report__cancel,
.neogrow-helpful .neogrow-helpful__actions a.neogrow-report__toggle {
	text-decoration: none;
}

@media ( max-width: 480px ) {
	.neogrow-report__buttons {
		flex-direction: column-reverse;
	}

	.neogrow-report__cancel,
	.neogrow-report__submit {
		text-align: center;
	}
}

/* Review list — the enhanced list layout
 *
 * WooCommerce renders each review as an avatar plus a .comment-text block, and
 * leaves the order of what is inside it to the theme. Several themes make that
 * block a flex container and assign `order` to their own three pieces —
 * Astra sets p.meta:1, .star-rating:2, .description:3 — while everything a
 * plugin adds keeps the initial `order: 0` and is therefore pushed *above* all
 * of them. On Astra that put the review title above the author's name and the
 * Helpful button above the text it belongs to.
 *
 * So the order is stated here for every part, including the theme's — and the
 * container is made flex here rather than relying on the theme having done it,
 * because the layout needs the rating and the badges on one row. Note what that
 * means: this applies on **every** theme, not only the ones that reorder. It is
 * a deliberate imposition, and the reason the theme-compatibility programme has
 * to look at review *placement* and not only at whether the parts rendered.
 *
  * Selectors mirror WooCommerce's own shape rather than adding a wrapper: its
 * base rules are 2-3-2 and a theme's are heavier still, so anything shorter
 * loses. There is no wrapper to hang a shorter selector on either — the add-on
 * owns the only one, and a second would nest.
 *
 * `.comment-text.comment-text` is not a typo. Matching Astra exactly gives 2-4-3
 * against its 2-4-3, and a tie is broken by whichever stylesheet loads second —
 * which happens to be this one today, and would silently flip the moment a
 * caching or optimisation plugin reordered them. Repeating the class buys one
 * more class of weight without inventing markup to hang it on.
 */
.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text {
	display: flex;
	flex-wrap: wrap;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .review-rating,
.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .star-rating {
	margin: 0 12px 6px 0;
	order: 1;
}

/* Only the theme wrapper (Astra's .review-rating) may shrink to its content.
 * WooCommerce's own .star-rating draws its stars with an absolutely positioned
 * span and ::before, so as a flex item with `width: auto` it measures 0px and
 * the stars vanish on every theme that keeps stock review markup (Storefront,
 * Twenty Twenty-Five). It keeps WooCommerce's 5.4em instead. */
.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .review-rating {
	width: auto;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .star-rating {
	width: 5.4em;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .neogrow-pro-badges {
	margin-bottom: 6px;
	order: 2;
	width: auto;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .neoplugin-review-title {
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 4px;
	order: 3;
	width: 100%;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > p.meta {
	font-size: 0.85em;
	margin: 0 0 10px;
	opacity: 0.75;
	order: 4;
	width: 100%;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .description {
	order: 5;
	width: 100%;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .neoplugin-review-image-wrapper {
	order: 6;
	width: 100%;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text.comment-text > .neogrow-helpful {
	order: 7;
	width: 100%;
}

/* Customer photos are whatever shape the customer's camera produced, so they
 * are given a common square tile rather than being left to set the row's
 * height. A ragged row of raw uploads reads as broken rather than as variety. */
.woocommerce #reviews #comments ol.commentlist li .neoplugin-review-image-wrapper {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat( auto-fill, minmax( 78px, 1fr ) );
	margin: 4px 0 0;
	max-width: 340px;
}

.woocommerce #reviews #comments ol.commentlist li .neoplugin-review-image {
	aspect-ratio: 1;
	border-radius: var( --neo-border-radius );
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}