/*!
 * Ananda Reviews widget
 *
 * Moved here from assets/css/plugins/elementor.css, where it rode along with
 * every other Elementor override and was therefore suppressible by the
 * `ananda_x_enqueue_plugin_assets` filter that strips a plugin's assets from
 * pages judged irrelevant to it. The widget now owns its stylesheet.
 *
 * The design canvas's palette lives here as `--adr-*` custom properties holding
 * its literal values, scoped to the widget so nothing else on the page inherits
 * them (D-003). Type is the theme's own — Open Sans body, Barkentina display,
 * never the canvas's Avenir (D-003, D-015).
 *
 * @package Ananda X
 * @since   0.17.0
 */

.ananda-reviews {
	/* Core blues */
	--adr-twilight: #073763;
	--adr-ocean: #2981c8;
	--adr-cyan: #2c9ae5;
	--adr-slate: #5a7ea3;
	--adr-frost: #cfe4f7;
	--adr-mist: #dbeefa;
	--adr-white: #ffffff;

	/* Warm accent */
	--adr-gold: #eec03f;
	--adr-gold-deep: #e6b12a;
	--adr-gold-deeper: #d9a521;
	--adr-star-empty: rgba( 7, 55, 99, 0.16 );
	--adr-star-outline: rgba( 7, 55, 99, 0.3 );
	--adr-cream: #fffaeb;
	--adr-sand-shade: #f0e6c8;

	/* Type — the theme's, not the canvas's */
	--adr-font-sans: "open-sans", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--adr-font-display: "Barkentina", "barkentina-test", serif;

	/* Geometry */
	--adr-card-radius: 12px;
	--adr-card-gap: 20px;
	--adr-card-min: 400px;
	--adr-band-radius: 16px;
	--adr-btn-radius: 8px;

	/* Effects */
	--adr-shadow-button: 0 3px 10px rgba( 7, 55, 99, 0.15 );
	--adr-shadow-panel: 0 12px 30px rgba( 7, 55, 99, 0.1 );
	--adr-focus-ring: 0 0 0 3px rgba( 41, 129, 200, 0.16 );
}


/***************************
 * The section head
 *
 * The canvas's tracked eyebrow over a display-face headline. The eyebrow's
 * 13px / 0.2em / Ocean treatment is the design system's own `.eyebrow`, and the
 * headline is its H2: `clamp()` between 32px and 48px so it never needs a
 * breakpoint. Selectors carry the element name so they outweigh the theme's own
 * `h2` and `p` rules without `!important`.
 ***************************/

.ananda-reviews .ananda-reviews__section-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 28px;
}

.ananda-reviews p.ananda-reviews__eyebrow {
	margin: 0;
	font-family: var( --adr-font-sans );
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.2em;
	color: var( --adr-ocean );
	text-transform: uppercase;
}

.ananda-reviews h2.ananda-reviews__headline {
	margin: 0;
	padding: 0;
	font-family: var( --adr-font-display );
	font-size: clamp( 2rem, 4vw, 3rem );
	font-weight: 400;
	line-height: 1.08;
	color: var( --adr-twilight );
	text-transform: none;
	text-wrap: pretty;
}


/***************************
 * The review grid
 ***************************/

/* `auto-fit` with a 400px floor: two columns wherever there is room for two,
   one column below that, with no breakpoint to maintain. `min(100%, …)` keeps
   the floor from overflowing a narrow phone. Cards stretch to the tallest card
   in their own row and no further — there is no fixed height, so a row holding
   one short review is exactly as tall as that review (D-014). */
.ananda-reviews__body {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, var( --adr-card-min ) ), 1fr ) );
	gap: var( --adr-card-gap );
	transition: opacity 120ms ease-out;
}

/* Choosing a rating chip or a sort replaces the whole grid, and until this the
   only sign of it was a 20px spinner beside the sort control — too small and
   too far from the cards to read as "these are being replaced" (Vayu, staging
   review 2026-09-11). The cards go quiet instead, which is where the change is
   about to happen. The grid keeps every card it has until the new set lands, so
   it holds its height throughout and the page does not jump. `is-reviews-
   replacing` is set only for a replacing load: "Show more" appends, leaves
   every card in place, and must not dim them.

   The dim is STEADY, and deliberately so. It first shipped with a breathing
   animation cycling 0.4 → 0.24 → 0.4, whose midpoint is the darkest frame and
   whose endpoints are the lightest: on any fetch longer than about a second the
   grid visibly travelled back toward normal partway through and then darkened
   again, which reads as a blink rather than as waiting ("they go back to
   normal, then they blur again" — Vayu, staging review 2026-09-11). Any motion
   added here later must never travel back toward full opacity; a highlight
   moving across a grid held at one opacity reads as progress, a pulse in
   brightness reads as a fault. */
.ananda-reviews.is-reviews-replacing .ananda-reviews__body {
	opacity: 0.4;
	pointer-events: none;
	cursor: progress;
}

@media ( prefers-reduced-motion: reduce ) {
	.ananda-reviews .ananda-reviews__body {
		transition: none;
	}
}


/***************************
 * A review card
 ***************************/

.ananda-reviews .ananda-review {
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var( --adr-frost );
	border-radius: var( --adr-card-radius );
	background-color: var( --adr-white );
	font-family: var( --adr-font-sans );
}

.ananda-reviews .ananda-review__stars {
	display: flex;
	align-items: center;
	gap: 2px;
}

.ananda-reviews .ananda-review__stars svg {
	display: block;
	flex: 0 0 auto;
}

.ananda-reviews .ananda-review__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ananda-reviews .ananda-review__author {
	font-family: var( --adr-font-sans );
	font-weight: 500;
	font-size: 17px;
	line-height: 1.2;
	color: var( --adr-twilight );
}

.ananda-reviews .ananda-review__date {
	font-weight: 400;
	font-size: 13px;
	line-height: 1.2;
	color: var( --adr-slate );
	white-space: nowrap;
}

.ananda-reviews .ananda-review__body {
	position: relative;
}

/* Clamped in CSS rather than split in PHP: the full review is always in the
   markup, so expanding it needs no second copy in a data attribute and no
   paragraph-splitting pass that reflows the author's own line breaks. */
.ananda-reviews .ananda-review__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	margin: 0;
	font-family: var( --adr-font-sans );
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	color: var( --adr-twilight );
	text-wrap: pretty;
}

.ananda-reviews .ananda-review__text p {
	margin: 0 0 0.75em;
}

.ananda-reviews .ananda-review__text p:last-child {
	margin-bottom: 0;
}

.ananda-reviews .ananda-review__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 44px;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), var( --adr-white ) );
	pointer-events: none;
}

/* `margin-top: auto` pins the button to the bottom of a card that has been
   stretched by a taller sibling, so a row of cards agrees on where it sits. */
.ananda-reviews .ananda-review__expand {
	align-self: flex-start;
	margin-top: auto;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var( --adr-font-sans );
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: var( --adr-ocean );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ananda-reviews .ananda-review__expand:hover,
.ananda-reviews .ananda-review__expand:focus {
	color: var( --adr-cyan );
}

.ananda-reviews .ananda-review.is-expanded .ananda-review__text {
	display: block;
	-webkit-line-clamp: none;
}

.ananda-reviews .ananda-review.is-expanded .ananda-review__fade {
	display: none;
}

/***************************
 * Buttons
 *
 * The canvas's primary button (`.ananda-btn` in its design system), renamed and
 * scoped so it cannot collide with the site's own button classes. Selectors are
 * written against the element so they outweigh WooCommerce's `button` styling
 * without needing `!important`.
 ***************************/

.ananda-reviews button.ananda-reviews__btn,
.ananda-reviews a.ananda-reviews__btn,
.ananda-reviews input.ananda-reviews__btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.95em 1.9em;
	border: 0;
	border-radius: var( --adr-btn-radius );
	background-color: var( --adr-gold );
	color: var( --adr-twilight );
	font-family: var( --adr-font-sans );
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	/* The canvas sizes all three of its buttons `auto,48px`, and the form's
	   submit already carries that height; padding alone leaves these a few
	   pixels short of it. */
	min-height: 48px;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ananda-reviews button.ananda-reviews__btn:hover,
.ananda-reviews button.ananda-reviews__btn:focus,
.ananda-reviews a.ananda-reviews__btn:hover,
.ananda-reviews a.ananda-reviews__btn:focus,
.ananda-reviews input.ananda-reviews__btn:hover,
.ananda-reviews input.ananda-reviews__btn:focus {
	background-color: var( --adr-gold-deep );
	box-shadow: var( --adr-shadow-button );
	color: var( --adr-twilight );
	transform: translateY( -1px );
}

.ananda-reviews button.ananda-reviews__btn:active,
.ananda-reviews a.ananda-reviews__btn:active,
.ananda-reviews input.ananda-reviews__btn:active {
	background-color: var( --adr-gold-deeper );
	box-shadow: none;
	transform: none;
}

/* The canvas's secondary button: a twilight hairline over nothing, used where a
   gold button would compete with the grid it sits under — the way back out of
   an empty filter, and (from item 6's second slice) "Show more reviews". The
   padding is the primary's less the border, so both buttons are the same
   height. */
.ananda-reviews button.ananda-reviews__btn--outline,
.ananda-reviews a.ananda-reviews__btn--outline {
	padding: calc( 0.95em - 1.5px ) calc( 1.9em - 1.5px );
	border: 1.5px solid var( --adr-twilight );
	/* border-box, so the border eats into the padding rather than the height. */
	background-color: transparent;
	color: var( --adr-twilight );
}

.ananda-reviews button.ananda-reviews__btn--outline:hover,
.ananda-reviews button.ananda-reviews__btn--outline:focus,
.ananda-reviews a.ananda-reviews__btn--outline:hover,
.ananda-reviews a.ananda-reviews__btn--outline:focus {
	border-color: var( --adr-twilight );
	background-color: var( --adr-mist );
	box-shadow: none;
	color: var( --adr-twilight );
	transform: none;
}


/***************************
 * The summary band
 *
 * The canvas's mist panel: the average at display size on the left with its
 * star row and counts, the prompt and its button on the right. It wraps rather
 * than breaking at a width, so there is no breakpoint to maintain — the two
 * halves sit side by side while both fit and stack when they do not.
 ***************************/

.ananda-reviews .ananda-reviews__band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	box-sizing: border-box;
	margin-bottom: 30px;
	padding: 30px 34px;
	border-radius: var( --adr-band-radius );
	background-color: var( --adr-mist );
	font-family: var( --adr-font-sans );
}

.ananda-reviews .ananda-reviews__band-score {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ananda-reviews .ananda-reviews__band-average {
	font-family: var( --adr-font-display );
	font-size: 56px;
	font-weight: 400;
	line-height: 0.85;
	color: var( --adr-twilight );
}

.ananda-reviews .ananda-reviews__band-detail {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ananda-reviews .ananda-reviews__band-counts {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var( --adr-twilight );
}

.ananda-reviews .ananda-reviews__band-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
}

/* The prompt is off unless a page fills the control (D-053's shape, applied to
   this line on 2026-09-11), so most bands never draw this rule at all. */
.ananda-reviews .ananda-reviews__band-prompt {
	margin: 0;
	max-width: 24ch;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	color: var( --adr-twilight );
	text-wrap: pretty;
}

/* The band's call to action, a size up from the shared button (Vayu,
   2026-09-11). With the prompt line gone it stands alone at the far end of the
   band, opposite a 56px average, and the shared 15px/48px reads as small
   against that. It also carries its shadow AT REST rather than only on hover —
   on a mist panel a flat gold rectangle sits in the surface, and the shadow is
   what lifts it off. */
.ananda-reviews button.ananda-reviews__band-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 1em 2.1em;
	font-size: 17px;
	min-height: 56px;
	box-shadow: var( --adr-shadow-button );
}

/* Hover has to go somewhere from a resting shadow, so it lifts further rather
   than merely appearing. `:active` still flattens it: that rule is two classes
   and a pseudo-class deep and outranks this one. */
.ananda-reviews button.ananda-reviews__band-button:hover,
.ananda-reviews button.ananda-reviews__band-button:focus {
	box-shadow: 0 6px 18px rgba( 7, 55, 99, 0.22 );
}

/* The pencil takes the button's own colour through `currentColor`, so a site
   that recolours this CTA gets an icon that follows it instead of one that has
   to be found and changed on its own. */
.ananda-reviews .ananda-reviews__band-button .ananda-reviews__btn-icon {
	display: block;
	flex: 0 0 auto;
}

/* On a phone the band's halves stack, and a button sized to its own words
   leaves the invitation looking incidental under the score it follows. Full
   width is the one place it can be unmissable without growing the type
   further. */
@media ( max-width: 480px ) {
	.ananda-reviews .ananda-reviews__band-cta {
		width: 100%;
	}

	.ananda-reviews button.ananda-reviews__band-button {
		width: 100%;
		justify-content: center;
	}
}

/* Once the form is open the invitation has been accepted, and the form takes
   the band's place exactly as in the canvas (`bandOpen: !formOpen`) — so the
   whole band goes, not just its prompt and button. The score is not thrown
   away: Close puts the band back (D-038). */
.ananda-reviews.is-form-open .ananda-reviews__band {
	display: none;
}


/***************************
 * The write-a-review form
 *
 * The canvas's `ReviewForm` panel, standing where the summary band stands so
 * the section does not grow a second column of chrome at its foot. Built on
 * WordPress's own comment_form(), so a handful of these selectors name markup
 * WordPress emits (`#respond`, `.form-submit`) rather than markup this widget
 * writes; they are scoped under `.ananda-reviews__form` so nothing else on the
 * page is touched.
 ***************************/

/* The panel is drawn on the widget's own wrapper, not on WordPress's
   `#respond`: where this widget sits inside a WooCommerce reviews tab the page
   carries `#reviews #respond { padding: 0; border: 0 }`, two IDs deep, and no
   sane class selector outweighs that. Found on /inner-renewal-retreat/ on
   2026-09-11, where the panel rendered edge to edge with no border. `#respond`
   is flattened below so the two cannot both draw a box. */
.ananda-reviews .ananda-reviews__form {
	box-sizing: border-box;
	margin-bottom: 30px;
	padding: 32px;
	border: 1px solid var( --adr-frost );
	border-radius: var( --adr-card-radius );
	background-color: var( --adr-white );
	box-shadow: var( --adr-shadow-panel );
	font-family: var( --adr-font-sans );
}

/* At rest in `optional` mode the form is not there at all; the band's CTA
   brings it in. In `always` mode there is no CTA and no hidden state. */
.ananda-reviews .ananda-reviews__form.ananda-reviews__form-optional {
	display: none;
}

/* The header and the rule are printed by `comment_form()` OUTSIDE the <form>,
   as siblings of it inside #respond — so #respond, not the form, is what has
   to space them. Both carry the canvas's 26px rhythm. */
.ananda-reviews .ananda-reviews__form #respond {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.ananda-reviews .ananda-reviews__form form {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
}

/* --- the panel header --- */

.ananda-reviews .ananda-reviews__form-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.ananda-reviews .ananda-reviews__form-head-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* `comment_form()` gives this heading `id="reply-title"` and the submit
   `id="submit"`, and the theme's own comment styles reach both by ID — which
   outweighs any number of classes. These two selectors name the same IDs so
   the widget's own type and button win without `!important`. */
.ananda-reviews h3#reply-title.ananda-reviews__form-title,
.ananda-reviews h3.ananda-reviews__form-title {
	margin: 0;
	padding: 0;
	font-family: var( --adr-font-sans );
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	color: var( --adr-twilight );
	text-transform: none;
	letter-spacing: normal;
}


.ananda-reviews button.ananda-reviews__form-close {
	flex: 0 0 auto;
	margin: 0;
	padding: 4px 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: var( --adr-font-sans );
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var( --adr-ocean );
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ananda-reviews button.ananda-reviews__form-close:hover,
.ananda-reviews button.ananda-reviews__form-close:focus {
	background: none;
	color: var( --adr-cyan );
}

.ananda-reviews .ananda-reviews__form-rule {
	height: 1px;
	background-color: var( --adr-frost );
}

/* --- a field --- */

.ananda-reviews .ananda-reviews__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ananda-reviews .ananda-reviews__field--rating {
	gap: 12px;
}

/* The "Your review" label and its sentence-count hint. The canvas sits them on
   one line at either width, but it is set in Avenir and this ships Open Sans
   (D-003), which is wider: measured on a 390px viewport the pair wants 288px of
   a 277px row, so without `wrap` BOTH halves broke into two ragged lines. With
   it, each half stays whole and the hint simply drops below the label when the
   row is too narrow to hold them side by side. The row gap is deliberately
   smaller than the column gap so that second line reads as part of the label,
   not as another field. */
.ananda-reviews .ananda-reviews__field-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 16px;
	row-gap: 4px;
}

.ananda-reviews .ananda-reviews__field-row > .ananda-reviews__field-label {
	white-space: nowrap;
}

.ananda-reviews .ananda-reviews__field-label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var( --adr-twilight );
	text-transform: none;
	letter-spacing: normal;
}

.ananda-reviews .ananda-reviews__field-hint,
.ananda-reviews .ananda-reviews__field-note {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var( --adr-slate );
}

.ananda-reviews .ananda-reviews__field-hint {
	line-height: 1;
}

/* Two columns wherever 200px fits twice, one below that — `auto-fit` again, so
   there is no breakpoint here either. */
.ananda-reviews .ananda-reviews__field-pair {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 200px ), 1fr ) );
	gap: 20px;
}

.ananda-reviews .ananda-reviews__form input.ananda-reviews__input,
.ananda-reviews .ananda-reviews__form textarea.ananda-reviews__textarea {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	border: 1px solid var( --adr-frost );
	border-radius: var( --adr-btn-radius );
	background-color: var( --adr-white );
	box-shadow: none;
	font-family: var( --adr-font-sans );
	font-weight: 400;
	color: var( --adr-twilight );
}

.ananda-reviews .ananda-reviews__form input.ananda-reviews__input {
	padding: 13px 16px;
	font-size: 17px;
	line-height: 1.5;
}

/* WooCommerce paints `.woocommerce #reviews #comment { height: 75px }`, two IDs
   deep, and this textarea is `#comment` — so on any page that also carries
   WooCommerce's own reviews markup it collapsed to 75px, while the identical
   form stood 170px elsewhere (measured on staging 2026-09-11:
   /inner-renewal-retreat/ 75px vs /online-courses/know-your-chakras/ 170px).
   Naming `#respond` and `#comment` outweighs it without `!important`, and
   `height: auto` hands the size back to the element's own `rows="5"` — which is
   what the correct case was already doing. */
.ananda-reviews .ananda-reviews__form #respond textarea#comment.ananda-reviews__textarea,
.ananda-reviews .ananda-reviews__form textarea.ananda-reviews__textarea {
	height: auto;
	padding: 14px 16px;
	font-size: 17px;
	line-height: 1.65;
	resize: vertical;
}

.ananda-reviews .ananda-reviews__form input.ananda-reviews__input:focus,
.ananda-reviews .ananda-reviews__form textarea.ananda-reviews__textarea:focus {
	border-color: var( --adr-ocean );
	box-shadow: var( --adr-focus-ring );
	outline: none;
}

/* --- the star rating control --- */

.ananda-reviews .ananda-reviews__rating-input {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.ananda-reviews .ananda-reviews__rating-stars {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: -4px;
}

.ananda-reviews button.ananda-reviews__star-btn {
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: var( --adr-btn-radius );
	background: none;
	box-shadow: none;
	line-height: 0;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.ananda-reviews button.ananda-reviews__star-btn:hover,
.ananda-reviews button.ananda-reviews__star-btn:focus {
	background: none;
	transform: scale( 1.12 );
}

.ananda-reviews .ananda-reviews__star-btn svg {
	display: block;
}

/* Empty by default, gold once lit. `is-on` is set on every star up to the one
   hovered or chosen, so the row fills from the left. */
.ananda-reviews .ananda-reviews__star-btn svg path {
	fill: var( --adr-white );
	stroke: var( --adr-star-outline );
	stroke-width: 1.4;
}

.ananda-reviews .ananda-reviews__star-btn.is-on svg path {
	fill: var( --adr-gold );
	stroke: var( --adr-gold-deep );
	stroke-width: 0.75;
}

.ananda-reviews .ananda-reviews__rating-word {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var( --adr-twilight );
}

/* --- the submit row --- */

.ananda-reviews .ananda-reviews__form p.form-submit,
.ananda-reviews .ananda-reviews__form .ananda-reviews__form-actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0;
	padding-top: 4px;
}

/* WooCommerce paints this button through `#respond input#submit` (its
   `:where()` wrapper adds no weight), which is two IDs — so the widget's own
   rule has to name `#respond` as well to outweigh it. Measured on staging
   2026-09-11: without it the submit renders WooCommerce grey. */
.ananda-reviews .ananda-reviews__form #respond input#submit.ananda-reviews__form-submit,
.ananda-reviews .ananda-reviews__form input.ananda-reviews__form-submit {
	min-height: 48px;
	padding: 0.95em 1.9em;
	border: 0;
	border-radius: var( --adr-btn-radius );
	background-color: var( --adr-gold );
	color: var( --adr-twilight );
	font-family: var( --adr-font-sans );
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: none;
	box-shadow: none;
}

.ananda-reviews .ananda-reviews__form #respond input#submit.ananda-reviews__form-submit:hover,
.ananda-reviews .ananda-reviews__form #respond input#submit.ananda-reviews__form-submit:focus {
	background-color: var( --adr-gold-deep );
	box-shadow: var( --adr-shadow-button );
	color: var( --adr-twilight );
}


.ananda-reviews .ananda-reviews__form .form-submit .spinner {
	margin: 0;
}

/* --- the receipt --- */

.ananda-reviews .ananda-reviews__thanks {
	box-sizing: border-box;
	margin-bottom: 24px;
	padding: 18px 20px;
	border: 1px solid var( --adr-sand-shade );
	border-radius: var( --adr-card-radius );
	background-color: var( --adr-cream );
	font-family: var( --adr-font-sans );
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var( --adr-twilight );
}


/***************************
 * The controls row
 *
 * Below the band: the rating filter chips on the left and the sort control on
 * the right, exactly as the canvas has it — `space-between` alone, so that when
 * the row wraps on a phone the sort control starts the second line at the left
 * margin rather than hanging off the right edge. An earlier `margin-left: auto`
 * on the sort half looked equivalent on one line but was not: on the wrapped
 * line it pushed the control 168px in, where the canvas puts it at 0.
 *
 * The one case `space-between` alone does not cover is a product with no chips
 * to show (D-043), where the sort control is the row's only occupant and
 * `space-between` would park it at the left. `:only-child` restores the end
 * position for exactly that case and no other.
 ***************************/

.ananda-reviews .ananda-reviews__rating-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.ananda-reviews .ananda-reviews__filter {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ananda-reviews .ananda-reviews__rating-filter > .ananda-reviews__filter:only-child {
	margin-left: auto;
}

/* The rating chips. Selectors are written against `button` so they outweigh
   WooCommerce's and the theme's own element-level button styling without
   needing `!important` — the same guard the other buttons here take (D-040). */
.ananda-reviews .ananda-reviews__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ananda-reviews button.ananda-reviews__chip {
	box-sizing: border-box;
	margin: 0;
	padding: 9px 17px;
	border: 1px solid var( --adr-frost );
	border-radius: 999px;
	background-color: var( --adr-white );
	box-shadow: none;
	color: var( --adr-twilight );
	font-family: var( --adr-font-sans );
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.ananda-reviews button.ananda-reviews__chip:hover,
.ananda-reviews button.ananda-reviews__chip:focus {
	border-color: var( --adr-twilight );
	background-color: var( --adr-white );
	color: var( --adr-twilight );
}

/* The chosen chip is the canvas's filled twilight pill. */
.ananda-reviews button.ananda-reviews__chip.is-on,
.ananda-reviews button.ananda-reviews__chip.is-on:hover,
.ananda-reviews button.ananda-reviews__chip.is-on:focus {
	border-color: var( --adr-twilight );
	background-color: var( --adr-twilight );
	color: var( --adr-white );
}

.ananda-reviews button.ananda-reviews__chip:focus-visible {
	outline: none;
	box-shadow: var( --adr-focus-ring );
}

/* While a fetch is in flight neither control answers, so a second change
   cannot land a stale grid on top of a fresh one. The sort is dimmed through
   its own label rather than through `.ananda-reviews__filter`, which also
   holds the spinner — dimming that would fade the one thing meant to be
   showing. */
.ananda-reviews.is-reviews-loading .ananda-reviews__chips,
.ananda-reviews.is-reviews-loading .ananda-reviews__sort {
	opacity: 0.6;
	pointer-events: none;
}


/***************************
 * No reviews at this rating
 *
 * A chip is only drawn for a bucket that had reviews in it when the page was
 * built, so this is a race rather than a normal state. The message and the way
 * back are the whole of it (D-011).
 ***************************/

.ananda-reviews .ananda-reviews__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	padding: 40px;
	border: 1px solid var( --adr-frost );
	border-radius: var( --adr-card-radius );
	text-align: center;
}

.ananda-reviews .ananda-reviews__empty[hidden] {
	display: none;
}

.ananda-reviews p.ananda-reviews__empty-message {
	max-width: 44ch;
	margin: 0;
	font-family: var( --adr-font-sans );
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var( --adr-twilight );
}


/***************************
 * Show more reviews
 *
 * The canvas's foot of the section: an outline button centred under the grid
 * with its count beneath it, the pair set apart from the last row of cards
 * (D-004). Both go away together once there is nothing left to fetch — the
 * count is the button's caption, not the grid's.
 ***************************/

.ananda-reviews .ananda-reviews__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-top: 26px;
}

.ananda-reviews .ananda-reviews__more[hidden] {
	display: none;
}

/* Pressed and waiting. The grid below is untouched while the next page is
   fetched (D-061), so this button is the only thing that can say the press
   landed, and the whole of what the reader has to go on. It used to dim itself
   to 0.6, which faded the one element meant to be read; it now keeps its full
   contrast and trades its label for a spinner turning in the label's place.

   The swap is scoped to an APPENDING fetch. A rating chip or a sort change
   replaces the grid without this button being pressed at all, and a spinner
   turning on an untouched button would claim a press that never happened;
   there the button only goes inert and the cards carry the wait instead. */
.ananda-reviews.is-reviews-loading .ananda-reviews__more-btn {
	pointer-events: none;
}

.ananda-reviews .ananda-reviews__more-btn {
	position: relative;
}

.ananda-reviews .ananda-reviews__more-label {
	transition: opacity 120ms ease-out;
}

.ananda-reviews.is-reviews-loading:not( .is-reviews-replacing ) .ananda-reviews__more-label {
	opacity: 0;
}

/* The spinner is taken out of the button's flow and centred over it, so the
   button's width stays the label's width whether the label is showing or not
   — the button does not resize under the pointer that just pressed it, and the
   caption beneath it does not move. */
.ananda-reviews .ananda-reviews__more-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid var( --adr-star-empty );
	border-top-color: var( --adr-twilight );
	border-radius: 50%;
	opacity: 0;
	animation: ananda-reviews-spin 0.7s linear infinite;
}

.ananda-reviews.is-reviews-loading:not( .is-reviews-replacing ) .ananda-reviews__more-spinner {
	opacity: 1;
}

@keyframes ananda-reviews-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Reduced motion keeps the spinner rather than dropping it — it is the only
   feedback this button has — but ticks it round in eight steps instead of
   sweeping it, which still reads as waiting without continuous movement.
   D-065's rule is about the GRID's opacity and is untouched here: this turns at
   one constant opacity and never travels back toward its resting state. */
@media ( prefers-reduced-motion: reduce ) {
	.ananda-reviews .ananda-reviews__more-spinner {
		animation-duration: 1.2s;
		animation-timing-function: steps( 8 );
	}

	.ananda-reviews .ananda-reviews__more-label {
		transition: none;
	}
}

.ananda-reviews p.ananda-reviews__more-count {
	margin: 0;
	font-family: var( --adr-font-sans );
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var( --adr-slate );
}

.ananda-reviews .ananda-reviews__filter form {
	margin: 0;
}

/* The canvas's control-row treatment: the word "Sort" in caption grey beside a
   white, frost-outlined select. `appearance` is left alone so the browser keeps
   drawing its own disclosure arrow, as the canvas does. */
.ananda-reviews label.ananda-reviews__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var( --adr-font-sans );
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var( --adr-slate );
	text-transform: none;
}

.ananda-reviews select.ananda-reviews__sort-select {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var( --adr-frost );
	border-radius: var( --adr-btn-radius );
	background-color: var( --adr-white );
	box-shadow: none;
	font-family: var( --adr-font-sans );
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: var( --adr-twilight );
}

.ananda-reviews select.ananda-reviews__sort-select:focus {
	border-color: var( --adr-ocean );
	outline: none;
}


/***************************
 * Carried over from assets/css/plugins/elementor.css
 *
 * The numbered pagination that used to live here is gone with the markup it
 * styled (D-004). What is left is the shared spinner and the
 * `.ananda-reviews-sum` rules, which style the separate
 * `ananda-reviews-summary` widget: that one still renders the histogram and
 * still uses the WooCommerce font-icon stars, and stays whatever happens to
 * this widget (D-010).
 ***************************/

.ananda-reviews{
    margin-bottom: 20px;
}


.ananda-reviews-sum .star-rating{
    display: block;
    overflow: hidden;
    position: relative;
    float: none;
    width: 125px !important;
    height: 1em;
    margin: 0 0 5px;
    font-size: 1em;
    font-style: normal !important;
    font-weight: normal !important;
    font-family: "star";
    line-height: 1em;
}

.ananda-reviews-sum .star-rating:before {
    content: "\73\73\73\73\73";
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    color: #ffbf00 !important;
    letter-spacing: 5px;
}

.ananda-reviews-sum .star-rating span{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    padding-top: 1.5em;
}

.ananda-reviews-sum .star-rating span:before{
    content: "\53\53\53\53\53";
    position: absolute;
    top: 0;
    left: 0;
    color: #ffbf00 !important;
    letter-spacing: 5px;
}


/* Spinner */
.spinner {
    display: none;
    visibility: visible;
    width: 20px;
    height: 20px;
    margin: 0;
    background: url('/../wp-admin/images/spinner.gif') no-repeat;
    opacity: .7;
    filter: alpha(opacity=70);
}

.spinner.is-active{
    display: inline-block;
}

.ananda-reviews-sum{
    border: solid 1px #bec2c2;
    border-radius: 10px;
    padding: 20px;
    font-family: 'circular';
    font-size: 16px;
    max-width: 340px;
    background-color: white;
}

.ananda-reviews-sum__average-value{
    display: flex;
    align-items: baseline;
}
.ananda-reviews-sum__average-value .star-rating {
    max-width: 90px;
    font-size: 15px;
}
.ananda-reviews-sum__average-value .star-rating:before, 
.ananda-reviews-sum__average-value .star-rating span:before {
    color: #ffbf00;
    letter-spacing: 0.5px;
}

.ananda-reviews-sum__average-value strong{
    font-size: 19px;
    color: black;
}

.ananda-reviews-sum__total-rating {
    color: #6e7171;
    padding: 5px 0px;
}

.ananda-reviews-sum__total-rating-by-star {
    padding: 10px 0px 5px;
}

.ananda-reviews-sum__star-rating{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.5px;
    padding-bottom: 10px;
}
.ananda-reviews-sum__star-rating .star-label{
    color: #4f94a3;
    min-width: 45px;
}
.ananda-reviews-sum__star-rating .star-bar {
    width: 207.5px;
    height: 20px;
    background-color: #f0f2f2;
    border: 1px solid #cbcfcf;
    border-radius: 5px;
    overflow: hidden;
}

.ananda-reviews-sum__star-rating .star-fill {
    background-color: #ffbf00;
    height: 100%;
    width: 0%;
}

.ananda-reviews-sum__star-rating .star-percentage {
    min-width: 40px;
    text-align: right;
    color: #4f94a3;
}

/* WooCommerce's single-product script turns any `#rating` into its own star
   widget and inserts it here. The widget's rating input is named, not id'd,
   `rating` for exactly that reason; this is the belt to that braces. */
.ananda-reviews .ananda-reviews__form p.stars {
	display: none;
}