/*
 * Compact inline product rating — action row (Share / Favorite / rating).
 *
 * The aggregate summary and the «ثبت امتیاز» action reuse the same
 * `.ati-product-action` layout as Share and Favorite (icon area over caption,
 * 44px targets, 8px icon→label gap), so all four actions share one baseline and
 * one visual rhythm. The five-star selector lives in a lightweight popover that
 * only appears when requested. AtiChap design tokens only; RTL-native.
 */
.ati-product-rating {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-4);
	min-height: 44px;
	/* RTL (page direction): absorb free space on the viewer's right and push the
	   whole rating group to the left edge of the action row, clearly separated
	   from Share/Favorite which stay grouped on the right. */
	margin-inline-start: auto;
}

/* ---- Current aggregate summary (read-only) --------------------------------- */
.ati-product-action--rating .ati-product-rating__score {
	display: inline-flex;
	align-items: center;
	gap: var(--ati-space-1);
	min-height: 24px;
	line-height: 1;
	color: var(--ati-color-text-muted);
}

.ati-product-action--rating .ati-product-rating__score .ati-icon {
	width: 18px;
	height: 18px;
}

.ati-product-rating__value {
	font-size: var(--ati-text-h3);
	font-weight: 700;
	color: var(--ati-color-text);
	white-space: nowrap;
}

.ati-product-rating__value--empty {
	color: var(--ati-color-text-muted);
	font-weight: 600;
}

.ati-product-rating__count {
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-text-muted);
	white-space: nowrap;
}

.ati-product-rating.has-rating .ati-product-action--rating .ati-product-rating__score,
.ati-product-rating.has-rating .ati-product-action--rating .ati-product-rating__value {
	color: var(--ati-color-primary);
}

.ati-product-action--rating .ati-product-rating__score .ati-icon {
	/*
	 * Current-rating star («امتیاز فعلی»): gold in every state (with an
	 * aggregate or in the empty state). Scoped to the score-row icon only —
	 * the value/count text and the «ثبت امتیاز» star keep their own colors.
	 */
	color: #D4A017;
}

/* ---- «ثبت امتیاز» action ---------------------------------------------------- */
.ati-product-action--rate .ati-product-action__icon {
	color: var(--ati-color-primary);
}

/* Same legibility as the other action labels, in the established AtiChap teal. */
.ati-product-action--rate .ati-product-action__label {
	color: var(--ati-color-primary);
	font-weight: 600;
}

.ati-product-rating.has-voted .ati-product-action--rate {
	opacity: 0.7;
}

/* Captions must not wrap so all four actions share one label baseline. */
.ati-product-action--rating .ati-product-action__label,
.ati-product-action--rate .ati-product-action__label {
	white-space: nowrap;
}

/* ---- Popover (five-star selector) ------------------------------------------- */
.ati-product-rating__popover {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + var(--ati-space-2));
	display: none;
	flex-direction: column;
	width: min(250px, calc(100vw - var(--ati-space-8)));
	padding: var(--ati-space-3);
	border: 1px solid var(--ati-color-border);
	border-radius: var(--ati-radius-md);
	background: var(--ati-color-surface);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
	z-index: 40;
}

.ati-product-rating__popover.is-open {
	display: flex;
}

.ati-product-rating__close {
	position: absolute;
	inset-inline-end: var(--ati-space-1);
	top: var(--ati-space-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: 1;
	color: var(--ati-color-text-muted);
	cursor: pointer;
}

.ati-product-rating__close:hover {
	color: var(--ati-color-text);
}

.ati-product-rating__popover-form {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-2);
}

.ati-product-rating__selector {
	display: flex;
	flex-direction: column;
	gap: var(--ati-space-1);
}

.ati-product-rating__selector-label {
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-text-muted);
}

.ati-product-rating__stars-input {
	display: inline-flex;
	gap: var(--ati-space-1);
	direction: ltr;
}

.ati-product-rating__star {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	cursor: pointer;
	border-radius: var(--ati-radius-xs);
	color: var(--ati-color-border);
	transition: color 0.15s ease;
}

.ati-product-rating__star .ati-icon {
	width: 22px;
	height: 22px;
}

.ati-product-rating__star:hover {
	color: var(--ati-color-primary);
}

.ati-product-rating__star.is-selected {
	color: var(--ati-color-primary);
}

.ati-product-rating__star:focus-within {
	outline: 2px solid var(--ati-color-primary);
	outline-offset: 1px;
}

.ati-product-rating__star input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ---- Note, submit, status ---------------------------------------------------- */
.ati-product-rating__anon-note {
	margin: 0;
	font-size: var(--ati-text-spec);
	color: var(--ati-color-text-muted);
}

.ati-product-rating__submit {
	width: 100%;
	padding: var(--ati-space-2) var(--ati-space-3);
	min-height: 40px;
	font: inherit;
	font-weight: 600;
	color: var(--ati-color-on-primary);
	background: var(--ati-color-primary);
	border: 0;
	border-radius: var(--ati-radius-sm);
	cursor: pointer;
}

.ati-product-rating__submit:hover {
	background: var(--ati-color-primary-hover);
}

.ati-product-rating__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ati-product-rating__status {
	min-height: 1.2em;
	margin: 0;
	font-size: var(--ati-text-caption);
	font-weight: 600;
	color: var(--ati-color-primary);
}

.ati-product-rating__status.is-error {
	color: var(--ati-color-error);
}