/*
 * TheSporeScore.com for WooCommerce: front-end styles.
 *
 * Deliberately low-specificity and colour-neutral: everything inherits the
 * theme's font and text colour and only spacing, borders and layout are set,
 * so the blocks sit inside any theme without a fight. Override by copying the
 * templates or by targeting the BEM class names below.
 */

.thesporescore-reviews,
.thesporescore-qna {
	margin: 0 0 2em;
}

.thesporescore-reviews__heading,
.thesporescore-qna__heading {
	margin: 0 0 1em;
}

/* ---- Buttons: text only, one primary and one secondary style ---- */

.thesporescore-button {
	display: inline-block;
	padding: 0.55em 1.1em;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.thesporescore-button:hover,
.thesporescore-button:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	text-decoration: none;
}

.thesporescore-button--secondary {
	border-color: rgba(0, 0, 0, 0.25);
}

.thesporescore-button[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---- Summary and histogram ---- */

.thesporescore-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em 3em;
	align-items: flex-start;
	padding: 1.25em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	margin-bottom: 1.25em;
}

.thesporescore-summary__average {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	min-width: 9em;
}

.thesporescore-summary__number {
	font-size: 2.4em;
	font-weight: 600;
	line-height: 1;
}

.thesporescore-summary__count {
	font-size: 0.9em;
	opacity: 0.8;
}

.thesporescore-histogram {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 16em;
	max-width: 28em;
}

.thesporescore-histogram__row {
	margin: 0 0 0.35em;
}

.thesporescore-histogram__link {
	display: grid;
	grid-template-columns: 4.5em 1fr 3em;
	gap: 0.6em;
	align-items: center;
	color: inherit;
	text-decoration: none;
	font-size: 0.9em;
}

.thesporescore-histogram__link:hover .thesporescore-histogram__label,
.thesporescore-histogram__row.is-active .thesporescore-histogram__label {
	text-decoration: underline;
}

.thesporescore-histogram__bar {
	display: block;
	height: 0.7em;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	overflow: hidden;
}

.thesporescore-histogram__fill {
	display: block;
	height: 100%;
	background: currentColor;
	opacity: 0.7;
}

.thesporescore-histogram__row.is-active .thesporescore-histogram__fill {
	opacity: 1;
}

.thesporescore-histogram__count {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---- Controls ---- */

.thesporescore-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1.5em;
	align-items: center;
	margin: 0 0 1.25em;
	font-size: 0.9em;
}

.thesporescore-controls__sort {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
}

.thesporescore-controls__clear {
	text-decoration: underline;
}

/* ---- Reviews ---- */

.thesporescore-review {
	padding: 1.25em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.thesporescore-review__header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	margin-bottom: 0.6em;
}

.thesporescore-review__header img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.thesporescore-review__who {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	line-height: 1.35;
}

.thesporescore-review__author {
	font-weight: 600;
}

.thesporescore-review__invited {
	font-size: 0.8em;
	opacity: 0.8;
}

.thesporescore-review__date {
	font-size: 0.85em;
	opacity: 0.7;
}

.thesporescore-review__product {
	font-size: 0.9em;
	margin: 0 0 0.5em;
}

.thesporescore-review__title {
	font-size: 1.05em;
	margin: 0 0 0.4em;
}

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

.thesporescore-review__media {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0.75em 0 0;
	padding: 0;
}

.thesporescore-review__media img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 3px;
}

.thesporescore-review__origin {
	font-size: 0.85em;
	margin: 0.6em 0 0;
}

.thesporescore-review__reply {
	margin: 0.9em 0 0 1.5em;
	padding: 0.75em 1em;
	border-left: 3px solid rgba(0, 0, 0, 0.15);
	background: rgba(0, 0, 0, 0.03);
}

.thesporescore-review__reply-meta {
	font-size: 0.85em;
	margin: 0 0 0.3em;
}

.thesporescore-review__reply-label {
	font-weight: 600;
}

.thesporescore-review__reply-text p:last-child {
	margin-bottom: 0;
}

/* ---- Votes ---- */

.thesporescore-votes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
	margin-top: 0.75em;
	font-size: 0.85em;
}

.thesporescore-votes__button {
	padding: 0.25em 0.7em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.thesporescore-votes__button.is-active {
	border-color: currentColor;
	font-weight: 600;
}

.thesporescore-votes__message:empty {
	display: none;
}

/* ---- Q&A ---- */

.thesporescore-qna__ask {
	margin: 0 0 1.25em;
}

.thesporescore-qna__form-wrap {
	margin-top: 1em;
}

.thesporescore-question {
	padding: 1.1em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.thesporescore-question__text {
	font-weight: 600;
}

.thesporescore-question__text p:last-child,
.thesporescore-answer__text p:last-child {
	margin-bottom: 0;
}

.thesporescore-question__meta,
.thesporescore-answer__meta {
	font-size: 0.85em;
	opacity: 0.8;
	margin: 0.3em 0 0;
}

.thesporescore-answer {
	margin: 0.9em 0 0 1.5em;
	padding-left: 1em;
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.thesporescore-answer.is-staff {
	border-left-color: currentColor;
}

.thesporescore-answer__staff {
	margin-left: 0.5em;
	padding: 0.1em 0.5em;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 0.85em;
}

.thesporescore-question__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1.5em;
	align-items: center;
	margin-top: 0.5em;
}

.thesporescore-question__actions .thesporescore-qna__form-wrap {
	flex-basis: 100%;
}

/* ---- Forms ---- */

.thesporescore-qna-form {
	max-width: 40em;
	padding: 1em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 3px;
}

.thesporescore-field {
	margin: 0 0 0.9em;
}

.thesporescore-field label {
	display: block;
	margin-bottom: 0.25em;
}

.thesporescore-field textarea,
.thesporescore-field input[type="text"],
.thesporescore-field input[type="email"] {
	width: 100%;
	box-sizing: border-box;
}

.thesporescore-field__note {
	display: block;
	font-size: 0.8em;
	opacity: 0.7;
	margin-top: 0.25em;
}

.thesporescore-field--consent label {
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
}

.thesporescore-field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.thesporescore-qna-form__actions {
	display: flex;
	gap: 0.5em;
	margin: 0;
}

.thesporescore-qna-form__message {
	margin: 0.75em 0 0;
	font-size: 0.9em;
}

.thesporescore-qna-form__message.is-error {
	font-weight: 600;
}

.thesporescore-empty {
	opacity: 0.8;
}

.thesporescore-more {
	margin: 1.25em 0 0;
	text-align: center;
}

.thesporescore-origin {
	margin-left: 0.5em;
	font-size: 0.85em;
}

@media (max-width: 600px) {
	.thesporescore-histogram__link {
		grid-template-columns: 4em 1fr 2.5em;
	}
}

/* ---- CusRev-era details on a review: country, WooCommerce's own verified mark ---- */
.thesporescore-review__country{margin:0 .35em;font-size:1em;line-height:1}
.thesporescore-review__verified{font-size:.8em;opacity:.75;margin-left:.35em}
.thesporescore-review__reply.is-customer{border-left-style:dotted}

/* ---- Trust badge ---- */
.thesporescore-trust-badge{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:inherit;font-size:.95em;line-height:1.2}
.thesporescore-trust-badge .star-rating{margin:0}
.thesporescore-trust-badge__number{font-weight:700;font-size:1.25em}
.thesporescore-trust-badge__count{opacity:.8}

/* ---------------------------------------------------------------------------
   Block presentation.

   Driven entirely by custom properties so a shortcode can restyle one block
   without a stylesheet: the shortcode writes --tss-* onto the wrapper and these
   rules read them. Everything is also defensive about what it inherits - a
   theme that centres all its text, or sets a line-height on every element, must
   not be able to pull a review card apart.
   --------------------------------------------------------------------------- */

.thesporescore-reviews {
	--tss-bg: transparent;
	--tss-text: inherit;
	--tss-muted: #55607a;
	--tss-accent: #6a4cf2;
	--tss-card-bg: #fff;
	--tss-card-border: #e3e8f0;
	--tss-radius: 14px;
	--tss-pad: 22px;
	--tss-gap: 18px;
	background: var(--tss-bg);
	color: var(--tss-text);
	text-align: left;
}

.thesporescore-reviews *,
.thesporescore-reviews *::before,
.thesporescore-reviews *::after { box-sizing: border-box; }

.thesporescore-reviews__list { display: block; }

.thesporescore-review {
	padding: var(--tss-pad);
	border: 1px solid var(--tss-card-border);
	border-radius: var(--tss-radius);
	background: var(--tss-card-bg);
	text-align: left;
}

.thesporescore-review > * { margin: 0; }
.thesporescore-review > * + * { margin-top: 12px; }

/* --- header: avatar, who, rating ------------------------------------------ */

.thesporescore-review__header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 12px;
	text-align: left;
}

.thesporescore-review__header img,
.thesporescore-review__header .avatar {
	grid-column: 1;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
	flex: none;
}

.thesporescore-review__who {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
	text-align: left;
}

.thesporescore-review__rating { grid-column: 3; justify-self: end; white-space: nowrap; }

.thesporescore-review__author { font-weight: 700; line-height: 1.3; }
.thesporescore-review__country { font-size: 13px; line-height: 1; }
.thesporescore-review__date { color: var(--tss-muted); font-size: 12.5px; line-height: 1.4; }

.thesporescore-review__verified,
.thesporescore-review__unsolicited,
.thesporescore-review__invited {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tss-accent);
	line-height: 1.4;
}

/* --- body ------------------------------------------------------------------ */

.thesporescore-review__title { font-size: 1.02em; font-weight: 700; line-height: 1.3; }

.thesporescore-review__text { line-height: 1.55; }

/* A fixed number of lines, so every card in a row is the same height and none
   of them carries a block of empty space under a short review. */
.thesporescore-reviews--clamped .thesporescore-review__text {
	display: -webkit-box;
	-webkit-line-clamp: var(--tss-lines, 3);
	line-clamp: var(--tss-lines, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--tss-lines, 3) * 1.55em);
}

/* The product a review is about is a label, not the review: one line, so a long
   product name cannot make one card taller than the rest of the row. */
.thesporescore-reviews--clamped .thesporescore-review__product {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.thesporescore-review__text p { margin: 0; }
.thesporescore-review__text p + p { margin-top: 8px; }

.thesporescore-review__product { font-size: 12.5px; line-height: 1.4; }
.thesporescore-review__product a { color: var(--tss-muted); text-decoration: none; border-bottom: 1px solid currentColor; }
.thesporescore-review__product a:hover { color: var(--tss-accent); }

.thesporescore-stars { color: var(--tss-accent); font-size: 14px; letter-spacing: 1px; white-space: nowrap; line-height: 1; }
.thesporescore-stars__empty { opacity: .25; }
.thesporescore-review__score { font-weight: 800; color: var(--tss-accent); }

.thesporescore-review__reply {
	padding: 12px 14px;
	border-radius: calc(var(--tss-radius) * .6);
	background: rgba(11, 18, 32, .05);
}

.thesporescore-review__reply-label { font-weight: 700; }
.thesporescore-review__reply-meta { font-size: 12px; color: var(--tss-muted); margin: 0 0 4px; }
.thesporescore-review__reply-text { font-size: .94em; line-height: 1.5; }
.thesporescore-review__reply-text p { margin: 0; }

/* --- layouts --------------------------------------------------------------- */

.thesporescore-reviews--grid .thesporescore-reviews__list,
.thesporescore-reviews--carousel .thesporescore-reviews__list {
	display: flex;
	gap: var(--tss-gap);
	/* Each card is its own height. Stretching them to match the tallest is what
	   produced a column of empty space under every short review, and it only
	   takes one long one to do it. Use lines="n" to make them match instead. */
	align-items: flex-start;
}

.thesporescore-reviews--grid .thesporescore-reviews__list { flex-wrap: wrap; justify-content: center; }
.thesporescore-reviews--grid .thesporescore-review { flex: 0 0 100%; }

.thesporescore-reviews--carousel .thesporescore-reviews__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
	justify-content: flex-start;

	/* bleed="24px" lets the strip run past its container to the edge of the
	   screen, so a card cut off at the right runs off the edge instead of
	   stopping short with a band of empty page beside it. The padding puts the
	   first and last card back on the page's own margin, and scroll-padding
	   keeps snapping honest. */
	margin-inline: calc(var(--tss-bleed, 0px) * -1);
	padding-inline: var(--tss-bleed, 0px);
	scroll-padding-inline: var(--tss-bleed, 0px);
}

.thesporescore-reviews--carousel .thesporescore-reviews__list::-webkit-scrollbar { display: none; }

.thesporescore-reviews--carousel .thesporescore-review {
	/* Enough of the next card to read as "there is more", rather than the sliver
	   84% left once the gap is taken out - which looked like a rendering fault. */
	flex: 0 0 78%;
	scroll-snap-align: start;
}

/* The load-more floats over the end of the strip rather than sitting in it.
   In the flow it took a card's worth of width and pushed every card left, so a
   row under a centred heading was no longer centred - visible as a lean of about
   30px at desktop. Out of the flow, the cards use the full width and centre. */
.thesporescore-reviews--carousel { position: relative; }

.thesporescore-more--inline {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.thesporescore-more__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	max-width: 100%;
	padding: 0 14px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--tss-accent);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.thesporescore-more__link:hover { background: var(--tss-accent); color: #fff; }

.thesporescore-reviews--shadow .thesporescore-review {
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 10px 28px rgba(11, 18, 32, .08);
}

/* --- alignment modifiers ---------------------------------------------------- */

.thesporescore-reviews--center .thesporescore-review,
.thesporescore-reviews--center .thesporescore-review__header,
.thesporescore-reviews--center .thesporescore-review__who { text-align: center; }

.thesporescore-reviews--center .thesporescore-review__header {
	grid-template-columns: 1fr;
	justify-items: center;
}

.thesporescore-reviews--center .thesporescore-review__header img,
.thesporescore-reviews--center .thesporescore-review__header .avatar,
.thesporescore-reviews--center .thesporescore-review__who,
.thesporescore-reviews--center .thesporescore-review__rating { grid-column: 1; justify-self: center; }

.thesporescore-reviews--center .thesporescore-review__who { align-items: center; }

.thesporescore-reviews--right .thesporescore-review { text-align: right; }

.thesporescore-more { margin-top: 20px; }

@media (min-width: 40em) {
	.thesporescore-reviews--grid .thesporescore-review,
	.thesporescore-reviews--carousel .thesporescore-review { flex-basis: calc((100% - var(--tss-gap)) / 2); }
}

@media (min-width: 56.25em) {
	.thesporescore-reviews--grid .thesporescore-review,
	.thesporescore-reviews--carousel .thesporescore-review { flex-basis: calc((100% - var(--tss-gap) * 2) / 3); }

	.thesporescore-reviews--cols-1 .thesporescore-review { flex-basis: 100%; }
	.thesporescore-reviews--cols-2 .thesporescore-review { flex-basis: calc((100% - var(--tss-gap)) / 2); }
	.thesporescore-reviews--cols-3 .thesporescore-review { flex-basis: calc((100% - var(--tss-gap) * 2) / 3); }
	.thesporescore-reviews--cols-4 .thesporescore-review { flex-basis: calc((100% - var(--tss-gap) * 3) / 4); }
	.thesporescore-reviews--cols-5 .thesporescore-review { flex-basis: calc((100% - var(--tss-gap) * 4) / 5); }
	.thesporescore-reviews--cols-6 .thesporescore-review { flex-basis: calc((100% - var(--tss-gap) * 5) / 6); }
}

/* --- stats ------------------------------------------------------------------ */

.thesporescore-stats {
	--tss-muted: #55607a;
	--tss-accent: #6a4cf2;
	--tss-gap: 10px;
	--tss-size: 1rem;
	display: flex;
	align-items: center;
	gap: var(--tss-gap);
	flex-wrap: wrap;
	background: var(--tss-bg, transparent);
	color: var(--tss-text, inherit);
	font-size: var(--tss-size);
}

.thesporescore-stats__headline { display: inline-flex; align-items: center; gap: 8px; }

/* block (the default) and stacked both put the count under the score; inline is
   the opt-in one-liner for a footer or a header bar. */
.thesporescore-stats--block,
.thesporescore-stats--stacked { flex-direction: column; align-items: center; gap: 4px; }
.thesporescore-stats--stacked { align-items: flex-start; }
.thesporescore-stats--inline { flex-direction: row; }
.thesporescore-stats[style*="--tss-pad"] { padding: var(--tss-pad); border-radius: var(--tss-radius, 12px); }
.thesporescore-stats__average { font-weight: 800; font-size: 1.7em; line-height: 1; }
.thesporescore-stats__count,
.thesporescore-stats__label { color: var(--tss-muted); }
.thesporescore-stats__star { font-weight: 700; color: var(--tss-accent); }
.thesporescore-stats__bars { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; }
.thesporescore-stats__bars li { display: grid; grid-template-columns: 1.2em 1fr auto; align-items: center; gap: 8px; }
.thesporescore-stats__bar { display: block; height: 8px; border-radius: 999px; background: rgba(11, 18, 32, .1); overflow: hidden; }
.thesporescore-stats__bar > span { display: block; height: 100%; background: var(--tss-accent); }
.thesporescore-stats__bar-count { color: var(--tss-muted); font-size: .85em; font-variant-numeric: tabular-nums; }

/* Expanding a clamped review. The clamp is lifted by removing the line limit
   rather than animating a height, so the card grows to whatever the review
   actually needs and nothing is left half-shown. */
.thesporescore-review.is-expanded .thesporescore-review__text {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	display: block;
	overflow: visible;
	min-height: 0;
}

.thesporescore-review__expand {
	align-self: flex-start;
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tss-accent);
	font: inherit;
	font-size: .9em;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.thesporescore-reviews--center .thesporescore-review__expand { align-self: center; }
.thesporescore-reviews--right .thesporescore-review__expand { align-self: flex-end; }
.thesporescore-review__expand:hover { opacity: .78; }

/* A card that has been opened is allowed to be taller than its neighbours. */
.thesporescore-reviews--carousel .thesporescore-review.is-expanded { align-self: flex-start; }

/* more_style="icon": a round control the width of a thumb, so the cards keep the
   width a worded button would have taken and the row stays balanced. */
.thesporescore-reviews--more-icon { --tss-more-w: 3.25rem; }

.thesporescore-reviews--more-icon .thesporescore-more--inline { padding: 0; }

.thesporescore-reviews--more-icon .thesporescore-more__link {
	width: 46px;
	min-width: 46px;
	height: 46px;
	min-height: 46px;
	padding: 0;
	border-radius: 999px;
}

.thesporescore-reviews--more-icon .thesporescore-more__link svg { display: block; }

.thesporescore-review__note{margin:.9rem 0 0;padding:.75rem .9rem;border-left:3px solid var(--thesporescore-muted,#5d5669);background:rgba(0,0,0,.035);border-radius:6px}
.thesporescore-review__note p{margin:0 0 .5rem;font-size:.92em;line-height:1.5;color:var(--thesporescore-muted,#5d5669)}
.thesporescore-review__note p:last-child{margin-bottom:0}