/* stylelint-disable custom-property-pattern -- Elementor Framework token names are canonical. */
.voxel-addon-review-section-disclosure {
	max-width: 760px;
	margin: var(--ef-space-xs) 0 0;
	font-size: var(--ef-font-small);
	line-height: 1.55;
	color: var(--ef-color-text-muted);
}

.voxel-addon-review-row .vxf-head {
	margin-bottom: 0;
}

.voxel-addon-review-row.vxf-post {
	border-color: color-mix(in srgb, var(--ef-color-text) 12%, transparent);
	border-radius: var(--ef-radius-l);
	box-shadow: var(--ef-shadow-card);
}

.voxel-addon-review-row .vxf-body {
	display: grid;
	gap: var(--ef-space-2xs);
}

.voxel-addon-review-row .rev-score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ef-space-xs);
	width: fit-content;
	margin-top: 0;
}

.voxel-addon-review-score-label {
	flex-basis: auto;
	font-size: var(--ef-font-small);
	font-weight: var(--ef-weight-strong);
	color: var(--ef-color-text_muted);
}

.voxel-addon-review-score-label::after {
	margin-left: var(--ef-space-xs);
	content: "·";
	color: var(--ef-color-text_muted);
}

.voxel-addon-review-row .rev-num-score {
	min-width: 42px;
	height: 32px;
	padding-inline: var(--ef-space-s);
	border-radius: var(--ef-radius-m);
	font-size: var(--ef-font-small);
	font-weight: var(--ef-weight-semibold);
}

/* stylelint-disable-next-line selector-class-pattern -- Voxel vendor class. */
.voxel-addon-review-row--imported .vxf-body-text {
	max-width: 70ch;
	margin-top: var(--ef-space-xs);
	line-height: 1.65;
}

.voxel-addon-review-context {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ef-space-s);
	font-size: var(--ef-font-small);
	color: var(--ef-color-text_muted);
}

.voxel-addon-review-context > span {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.voxel-addon-review-context > span:first-child {
	padding: 3px 9px;
	border: var(--ef-border-default) solid color-mix(in srgb, var(--ef-color-primary) 20%, var(--ef-color-gray_light));
	border-radius: var(--ef-radius-pill);
	font-weight: var(--ef-weight-strong);
	color: var(--ef-color-primary);
	background: color-mix(in srgb, var(--ef-color-primary) 7%, var(--ef-color-white));
}

.voxel-addon-review-context > span + span::before {
	margin-right: var(--ef-space-s);
	content: "·";
	color: color-mix(in srgb, var(--ef-color-text_muted) 55%, transparent);
}

.voxel-addon-review-disclosure {
	max-width: 62ch;
	margin: var(--ef-space-xs) 0 var(--ef-space-m);
	padding-left: var(--ef-space-m);
	border-left: var(--ef-border-strong) solid var(--ef-color-gray_light);
	font-size: var(--ef-font-small);
	line-height: 1.5;
	color: var(--ef-color-text_muted);
}

.voxel-addon-review-criteria {
	margin-top: var(--ef-space-xs);
	padding-top: var(--ef-space-s);
	border-top: var(--ef-border-default) solid var(--ef-color-gray_light);
}

.voxel-addon-review-criteria-toggle {
	width: fit-content;
	cursor: pointer;
	min-height: 36px;
	padding: var(--ef-space-s) var(--ef-space-m);
	border: var(--ef-border-default) solid var(--ef-color-gray_light);
	border-radius: var(--ef-radius-m);
	font-weight: var(--ef-weight-strong);
	color: var(--ef-color-primary);
	background: var(--ef-color-white);
	transition: var(--ef-motion-hover);
}

.voxel-addon-review-criteria-toggle::marker {
	color: var(--ef-color-primary);
}

.voxel-addon-review-criteria-toggle:hover {
	border-color: color-mix(in srgb, var(--ef-color-primary) 30%, var(--ef-color-gray_light));
	background: color-mix(in srgb, var(--ef-color-primary) 5%, var(--ef-color-white));
}

.voxel-addon-review-criteria-toggle:focus-visible,
.voxel-addon-review-definition:focus-visible,
.voxel-addon-review-original-action:focus-visible {
	outline: var(--ef-focus-ring);
	outline-offset: var(--ef-focus-ring-offset);
}

.voxel-addon-review-criteria-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ef-space-s);
	margin-top: var(--ef-space-s);
}

.voxel-addon-review-criterion {
	display: grid;
	gap: var(--ef-space-2xs);
	padding: var(--ef-space-s);
	border: var(--ef-border-default) solid var(--ef-color-gray_light);
	border-radius: var(--ef-radius-m);
	background: color-mix(in srgb, var(--ef-color-gray_light) 44%, var(--ef-color-white));
}

.voxel-addon-review-criterion-head {
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--ef-space-2xs);
}

.voxel-addon-review-criterion-head > span {
	font-weight: var(--ef-weight-strong);
	color: var(--ef-color-text);
}

.voxel-addon-review-criterion-head strong {
	font-size: var(--ef-font-small);
	color: var(--ts-accent-1, var(--ef-color-text));
}

.voxel-addon-review-definition {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font: inherit;
	color: var(--ef-color-text_muted);
	background: transparent;
	cursor: help;
}

.voxel-addon-review-definition[data-definition]::after {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	z-index: 10;
	width: max-content;
	max-width: min(280px, 80vw);
	padding: 8px 10px;
	border-radius: var(--ef-radius-m);
	content: attr(data-definition);
	font-size: var(--ef-font-small);
	font-weight: 400;
	line-height: 1.4;
	color: var(--ef-color-white);
	background: var(--ef-color-text);
	box-shadow: var(--ef-shadow-panel);
	transform: translateX(-50%);
}

.voxel-addon-review-meter {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
}

.voxel-addon-review-meter i {
	display: block;
	height: 5px;
	border-radius: var(--ef-radius-round);
	background: var(--ef-color-gray_light);
}

.voxel-addon-review-meter i.active {
	background: var(--ts-accent-1, currentColor);
}

.voxel-addon-review-precision {
	margin: var(--ef-space-xs) 0 0;
	font-size: var(--ef-font-small);
	line-height: 1.55;
	white-space: pre-wrap;
	color: var(--ef-color-text-muted);
}

.voxel-addon-review-precision-toggle {
	margin-top: var(--ef-space-xs);
	padding: 0;
	border: 0;
	font: inherit;
	font-size: var(--ef-font-small);
	font-weight: var(--ef-weight-strong);
	color: var(--ef-color-primary);
	background: transparent;
	cursor: pointer;
}

.voxel-addon-review-precision-field {
	display: grid;
	gap: var(--ef-space-2xs);
	margin-top: var(--ef-space-xs);
}

.voxel-addon-review-precision-field textarea {
	width: 100%;
	min-height: 84px;
	resize: vertical;
}

.voxel-addon-review-precision-field small {
	text-align: right;
	color: var(--ef-color-text-muted);
}

.voxel-addon-review-row .vxf-footer {
	margin-top: var(--ef-space-xs);
	padding-top: var(--ef-space-s);
	border-top: var(--ef-border-default) solid var(--ef-color-gray_light);
}

.voxel-addon-review-row .vxf-footer .vxf-icon {
	min-width: 36px;
	height: 36px;
	border-radius: var(--ef-radius-m);
}

.voxel-addon-review-row .vxf-footer .vxf-icon:hover {
	background: var(--ef-color-gray_light);
}

.voxel-addon-review-original-action {
	display: inline-flex;
	align-items: center;
	width: auto !important;
	min-height: 36px;
	padding-inline: var(--ef-space-m);
	border: var(--ef-border-default) solid var(--ef-color-gray_light) !important;
	border-radius: var(--ef-radius-m);
	color: var(--ef-color-text) !important;
	text-decoration: none;
	background: var(--ef-color-white);
	transition: var(--ef-motion-hover);
}

.voxel-addon-review-original-action:hover {
	border-color: color-mix(in srgb, var(--ef-color-primary) 28%, var(--ef-color-gray_light)) !important;
	color: var(--ef-color-primary) !important;
	background: color-mix(in srgb, var(--ef-color-primary) 5%, var(--ef-color-white));
}

.voxel-addon-review-original-action span {
	font-size: var(--ef-font-small);
	font-weight: var(--ef-weight-strong);
	white-space: nowrap;
}

@media (width <= 767px) {
	.voxel-addon-review-row.vxf-post {
		padding: var(--ef-space-m) var(--ef-space-l);
	}

	.voxel-addon-review-criteria-grid {
		grid-template-columns: 1fr;
	}

	.voxel-addon-review-context {
		align-items: flex-start;
	}

	.voxel-addon-review-context > span + span::before {
		display: none;
	}

	.voxel-addon-review-context > span:not(:first-child) {
		flex-basis: 100%;
	}
}