/**
 * Nias theme — animated monster rating input (review form).
 *
 * Ported from an open monster-rating demo; namespaced `nias-theme-rate`, with all
 * Codilo branding/fonts/page-resets removed. Used on every product review form
 * in place of WooCommerce's star-rating select (see modules/Reviews).
 */
.nias-theme-rate {
	--nr-bare: #F8EDFF;
	--nr-light: #e7cafa;
	--nr-core: #7E26C8;
	--nr-dark: #62457a;
	--nr-red: #e3468a;
	--nr-red-dark: #9e1852;
	--nr-gold: #faf18f;
	border: none; margin: 0 0 20px; padding: 0;
	text-align: center;
	direction: rtl;
}
.nias-theme-rate * { box-sizing: border-box; }

.nias-theme-rate__legend {
	margin: 0 0 1.5em; display: block; width: 100%;
	font-size: 1.25em; font-weight: 700; text-align: center; color: var(--nr-core);
}

.nias-theme-rate__avatar { margin: 0 auto 1em; width: 150px; }
.nias-theme-rate__avatar > div { position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.nias-theme-rate__avatar > div svg { position: absolute; width: 100%; height: 100%; overflow: visible; }

.nias-theme-rate input[type="radio"] {
	position: absolute; top: auto; z-index: 2; width: 1.5em; height: 2em; margin: 0;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	opacity: 0.0001; cursor: pointer;
	visibility: hidden; pointer-events: none; 
}

.nias-theme-rate__radio {
	position: relative; display: inline-block;
	vertical-align: top; color: #2a2a2a; line-height: 1;
}
.nias-theme-rate__radio:last-of-type { margin-right: 0; }
.nias-theme-rate__radio svg {
	display: block; width: 30px; height: 30px;;
	fill: var(--nr-bare); stroke: #000; stroke-width: 3px; stroke-linejoin: round;
	transform: scale(0.625); transition: transform 0.2s ease-in-out; overflow: visible;
}
.nias-theme-rate__radio span {
	padding: 0.4em 0.5em; position: absolute; left: 50%; top: 100%;
	background: #333; border: solid 2px var(--nr-dark); border-radius: 0.25em;
	color: #fff; font-size: 0.8em; font-weight: 600; text-align: center; white-space: nowrap;
	opacity: 0; transform: translateY(0.5em) translateX(-50%) scale(0);
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.nias-theme-rate__radio span::before {
	content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;
	border-radius: inherit; background: var(--nr-core); opacity: 0; transition: opacity 0.25s ease;
}

.nias-theme-rate__radio--none svg { width: 2.85em; height: 2.85em; fill: #fff; stroke: var(--nr-red-dark); }
.nias-theme-rate input:focus + .nias-theme-rate__radio { outline: dotted 0.25em #ccc; outline-offset: 0.5em; }

.nias-theme-rate input:hover + .nias-theme-rate__radio span,
.nias-theme-rate__radio:hover span,
.nias-theme-rate input:focus + .nias-theme-rate__radio span {
	opacity: 1; transform: translateY(0.5em) translateX(-50%) scale(1);
}
.nias-theme-rate input:checked + .nias-theme-rate__radio span {
	opacity: 1; background: #333; border: 2px solid var(--nr-dark);
	transform: translateY(0.5em) translateX(-50%) scale(1);
}
.nias-theme-rate input:checked + .nias-theme-rate__radio span::before { opacity: 1; }

/* Icons after the checked input appear unselected. */
.nias-theme-rate input:checked ~ .nias-theme-rate__radio svg { fill: var(--nr-bare); transform: scale(0.625); }
.nias-theme-rate input:not(:checked) ~ .nias-theme-rate__radio--none svg { fill: var(--nr-dark); transform: scale(0.625); }

/* The checked input and the icons before it appear selected (gold, raised). */
.nias-theme-rate__radio svg,
.nias-theme-rate input:checked + .nias-theme-rate__radio svg {
	fill: var(--nr-gold); stroke: var(--nr-dark); transform: scale(1) translateY(-0.25em);
}
/* "No rating" active colouring. */
.nias-theme-rate input:checked + .nias-theme-rate__radio--none svg { fill: var(--nr-red); stroke: var(--nr-red-dark); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	.nias-theme-rate__radio svg { transform: none; transition: transform 0.5s ease-in-out; }
	.nias-theme-rate__radio span { transform: translateY(0.5em) translateX(-50%); }
	.nias-theme-rate input:checked ~ .nias-theme-rate__radio svg,
	.nias-theme-rate input:not(:checked) ~ .nias-theme-rate__radio--none svg,
	.nias-theme-rate__radio svg,
	.nias-theme-rate input:checked + .nias-theme-rate__radio svg { transform: none; }
}
.nias-theme-parent-rate {
    display: flex;
    justify-content: center;
	align-items: center;
    gap: 5px;
}

.nias-theme-rate__avatar > div {
    display: flex;
    justify-content: center;
}