/* Hardset Product Ratings — shared card styling, used on both the
 * frontend product page and the admin live-preview mockup (so what you
 * tune in wp-admin is a true preview of what customers see).
 *
 * Bar colour system: every bar shares ONE fixed 0-100 red -> amber ->
 * yellow-green -> green gradient (--hpr-gradient below) painted across the
 * full-width track; a grey "mask" div then covers the unfilled portion
 * from the right. This is what makes the colour "smooth" rather than four
 * hard-cutoff traffic-light blocks — a score of 51 and a score of 49 are
 * visually almost identical, exactly either side of the yellow-green
 * boundary, rather than jumping between two flat colours.
 */
.hpr-card {
	--hpr-black: #0a0a0a;
	--hpr-grey-700: #565656;
	--hpr-grey-300: #c9c9c9;
	--hpr-grey-100: #f2f2f2;
	--hpr-accent: #f4791f;
	--hpr-accent-dark: #d9650f;
	--hpr-gradient: linear-gradient(90deg, #dc2626 0%, #f4791f 33%, #a3c92e 66%, #16a34a 100%);
	position: relative;
	/* Without this, the card's own padding/border add on top of its
	 * percentage width instead of being included in it — on the actual
	 * product page that made it ~60px wider than the 48% column it's
	 * floated into, genuinely overlapping .summary and forcing the float
	 * engine to push the whole card down below it instead of alongside it. */
	box-sizing: border-box;
	max-width: 600px;
	margin: 24px 0;
	background: #ffffff;
	border: 1px solid var(--hpr-grey-100);
	border-radius: 16px;
	padding: 28px 30px 26px;
	box-shadow: 0 2px 10px rgba(10, 10, 10, 0.06), 0 14px 32px rgba(10, 10, 10, 0.08);
	font-family: 'Jost', Arial, Helvetica, sans-serif;
	color: var(--hpr-black);
}

/* Positioning on the actual product page: WooCommerce floats .images
 * (the product image) and .summary (title/price/add-to-cart/wishlist)
 * side by side — see woocommerce-layout.css. Floating the card the same
 * way, cleared only against .images (not .summary), sits it directly
 * beneath the product image in that same left-hand column, alongside
 * whatever remains of the summary column, instead of dropping full-width
 * below both — which is what actually lines its bottom edge up with
 * content like the "Add to Wishlist" button on the right. `clear: left`
 * (not `both`) is the important part: clearing `both` would drop it below
 * .summary too, pushing it much further down the page. Scoped to this
 * exact ancestor (rather than being the card's default) so the same
 * .hpr-card markup still lays out sanely in the wp-admin live preview,
 * which has no floated siblings to align with. */
.woocommerce div.product > .hpr-card {
	float: left;
	clear: left;
	width: 48%;
	max-width: none;
	margin: 12px 0 32px;
}

.hpr-card__title {
	margin: 0 0 20px;
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hpr-black);
}

.hpr-card__rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 20px;
}

.hpr-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 3fr auto;
	align-items: center;
	gap: 14px;
}

.hpr-row__label,
.hpr-slider-row__label {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--hpr-black);
	line-height: 1.3;
}

.hpr-row__value,
.hpr-slider-value {
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 600;
	min-width: 2.6em;
	text-align: right;
	color: var(--hpr-black);
}

/* -- shared gradient bar --------------------------------------------------- */

.hpr-bar-track {
	position: relative;
	height: 10px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--hpr-gradient);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.hpr-bar-mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: var(--hpr-grey-100);
	transition: width 0.2s ease;
}

/* Small gloss highlight along the top of every track for a bit of
 * dimensionality — subtle, not the flat 2010-era "glossy web 2.0" look. */
.hpr-bar-track::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
	pointer-events: none;
}

/* -- Info toggle + panel ---------------------------------------------------- */

.hpr-info-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px auto 0;
	padding: 9px 20px;
	background: #ffffff;
	border: 1px solid var(--hpr-grey-300);
	border-radius: 999px;
	font-family: 'Jost', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--hpr-black);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.hpr-card__rows + .hpr-info-toggle,
.hpr-card > .hpr-info-toggle {
	display: flex;
}

.hpr-info-toggle:hover {
	border-color: var(--hpr-accent);
	background: #fff8f2;
}

.hpr-info-toggle:active {
	transform: translateY(1px);
}

.hpr-info-toggle[aria-expanded="true"] {
	border-color: var(--hpr-accent);
	background: var(--hpr-accent);
	color: #ffffff;
}

.hpr-info-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 11px;
	line-height: 1;
}

/* Visible by default (no-JS fallback: the Info text just always shows).
 * JS adds .is-collapsed on load and toggles it on click — see ratings.js. */
.hpr-info-panel {
	overflow: hidden;
	max-height: 320px;
	opacity: 1;
	margin-top: 16px;
	transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}

.hpr-info-panel.is-collapsed {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
}

.hpr-info-panel__body {
	padding: 14px 16px;
	background: var(--hpr-grey-100);
	border-left: 3px solid var(--hpr-accent);
	border-radius: 0 8px 8px 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hpr-grey-700);
}

.hpr-info-panel__body p:first-child {
	margin-top: 0;
}

.hpr-info-panel__body p:last-child {
	margin-bottom: 0;
}

/* Matches WooCommerce's own smallscreen breakpoint (woocommerce-smallscreen.css,
 * enqueued at max-width: 768px), where .images/.summary themselves switch
 * from floated 48%-width columns to stacked full-width blocks — the card
 * needs to switch in step with them, or it'd be left floating at 48%
 * width beside a column that's no longer there. */
@media ( max-width: 768px ) {
	.woocommerce div.product > .hpr-card {
		float: none;
		clear: both;
		width: 100%;
		margin: 24px 0;
	}
}

@media ( max-width: 600px ) {
	.hpr-card {
		padding: 22px 20px 20px;
		margin: 24px 0;
	}
	.hpr-row {
		grid-template-columns: minmax(0, 1fr) 2.4fr auto;
		gap: 10px;
	}
	.hpr-row__label,
	.hpr-slider-row__label {
		font-size: 12.5px;
	}
}