/* =============================================================================
 * RahkarTheme — the two "what people say" homepage bands.
 *
 *   .rh-voices  «دیگران راجع به ما چه می‌گویند؟» — the shop's CURATED selection
 *               of what public figures said. An Instagram-Stories-style rail
 *               of ring avatars (name + follower count under each); tapping
 *               one opens #rh-voice-modal with that person's full
 *               photo/video slideshow, Instagram handle and quote.
 *   .rh-crev    «نظرات مشتریان» — REAL approved product reviews, plus the
 *               button that opens the public submit form (a <dialog> driven by
 *               the theme's shared RHSheet, not a new modal system).
 *
 * They deliberately do NOT look alike. One is editorial and image-led; the
 * other is plain text on cards. A visitor should be able to tell at a glance
 * which of the two they are reading — that distinction is the whole reason the
 * shop keeps both.
 *
 * Both rails scroll with native scroll-snap: no JS, no library, and they behave
 * like every other rail in the theme.
 * ========================================================================== */

/* ---- Shared rail mechanics --------------------------------------------- */
.rh-voices__rail,
.rh-crev__rail {
	display: flex;
	gap: clamp(12px, 1.6vw, 20px);
	margin: clamp(18px, 2.4vw, 30px) 0 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.rh-voices__rail::-webkit-scrollbar,
.rh-crev__rail::-webkit-scrollbar { display: none; }
.rh-voices__rail > *,
.rh-crev__rail > * { scroll-snap-align: start; }

/* =============================================================================
 *  «دیگران راجع به ما چه می‌گویند؟»
 * ========================================================================== */
.rh-voices__head { max-width: 62ch; }
.rh-voices__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.2vw, 2.1rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.35;
	color: var(--wp--preset--color--foreground, #1a1d23);
}
.rh-voices__lead {
	margin: 8px 0 0;
	font-size: clamp(0.9rem, 1.05vw, 1rem);
	line-height: 1.8;
	color: var(--wp--preset--color--text, #4a4f57);
}

/* Instagram-Stories-style ring: tap opens the person's full slideshow in
   #rh-voice-modal (voices.js). A fixed small width regardless of viewport —
   unlike the old big-card rail, circles don't need to grow on mobile. */
.rh-voice {
	flex: 0 0 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.rh-voice__ring {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* The gradient ring — the same stops Instagram's own story ring uses, this
   theme's one deliberate exception to the brand palette (a recognisable
   convention beats an on-brand imitation here). */
.rh-voice__ringline {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from -45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
/* The white gap between ring and photo is a box-shadow, not a second inset —
   keeps the photo circle itself a clean 100%/100% for object-fit. */
.rh-voice__avatar {
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 3px var(--wp--preset--color--base, #fff);
	background: var(--wp--preset--color--surface, #f2f3f5);
}
.rh-voice__avatar-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rh-voice__avatar-media--blank {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--text, #9aa0a8);
}
.rh-voice__name {
	max-width: 92px;
	font-size: 0.8rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rh-voice__followers {
	font-size: 0.7rem;
	color: var(--wp--preset--color--text, #6b7078);
	white-space: nowrap;
}

/* ---- Story modal (#rh-voice-modal, built by voices.js) -----------------
   Same animation playbook as .rh-desc-modal — centered card on desktop,
   bottom sheet on mobile — plus a media stage (photo/video track + dots)
   modeled on .rh-lightbox's slide track. */
.rh-voice-modal {
	--rh-vm-fg: var(--wp--preset--color--text, #1a1d23);
	--rh-vm-muted: var(--wp--preset--color--text-muted, #6b7078);
	--rh-vm-bg: var(--wp--preset--color--base, #fff);
	--rh-vm-border: var(--wp--preset--color--border, #e2e4e9);
	--rh-vm-primary: var(--wp--preset--color--primary, #0a66c2);

	border: 0;
	padding: 0;
	border-radius: 16px;
	width: min(420px, 92vw);
	max-width: 420px;
	max-height: 90vh;
	overflow: hidden;
	color: var(--rh-vm-fg);
	background: var(--rh-vm-bg);
	box-shadow: 0 16px 40px rgba(15, 17, 21, 0.18);
	inset: 0;
	margin: auto;

	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 180ms ease-out,
		transform 220ms cubic-bezier(0.2, 0, 0, 1),
		overlay 220ms allow-discrete,
		display 220ms allow-discrete;
}
.rh-voice-modal[open] {
	opacity: 1;
	transform: translateY(0);
}
@starting-style {
	.rh-voice-modal[open] {
		opacity: 0;
		transform: translateY(8px);
	}
}
.rh-voice-modal::backdrop {
	background: rgba(15, 17, 21, 0.55);
	opacity: 0;
	transition:
		opacity 200ms ease-out,
		overlay 200ms allow-discrete,
		display 200ms allow-discrete;
}
.rh-voice-modal[open]::backdrop { opacity: 1; }
@starting-style {
	.rh-voice-modal[open]::backdrop { opacity: 0; }
}

.rh-voice-modal__inner {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}
.rh-voice-modal__handle { display: none; }
.rh-voice-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	flex: 0 0 auto;
}
.rh-voice-modal__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.rh-voice-modal__name {
	font-size: 0.88rem;
	font-weight: var(--rh-fw-strong);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rh-voice-modal__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	color: var(--rh-vm-muted);
}
.rh-voice-modal__meta a {
	color: inherit;
	text-decoration: none;
}
.rh-voice-modal__meta a:hover { color: var(--rh-vm-fg); }
.rh-voice-modal__close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--rh-vm-fg);
	cursor: pointer;
	transition: background-color 120ms linear;
}
.rh-voice-modal__close:hover,
.rh-voice-modal__close:focus-visible {
	background: var(--wp--preset--color--surface, #f7f7f8);
	outline: none;
}

.rh-voice-modal__stage {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: var(--rh-product-ratio, 0.8);
	background: #000;
}
.rh-voice-modal__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.rh-voice-modal__track::-webkit-scrollbar { display: none; }
.rh-voice-modal__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	height: 100%;
}
.rh-voice-modal__slide img,
.rh-voice-modal__slide video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}
.rh-voice-modal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 17, 21, 0.4);
	color: #fff;
	cursor: pointer;
	z-index: 1;
}
.rh-voice-modal__nav:disabled { display: none; }
.rh-voice-modal__nav--prev { inset-inline-start: 8px; }
.rh-voice-modal__nav--next { inset-inline-end: 8px; }
.rh-voice-modal__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 5px;
	z-index: 1;
}
.rh-voice-modal__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	padding: 0;
	border: 0;
	transition: width 150ms ease, background-color 150ms ease;
}
.rh-voice-modal__dot.is-active {
	width: 16px;
	border-radius: 3px;
	background: #fff;
}

.rh-voice-modal__quote {
	margin: 0;
	padding: 12px 16px 16px;
	font-size: 0.85rem;
	line-height: 1.9;
	color: var(--rh-vm-fg);
	overflow-y: auto;
}
.rh-voice-modal__quote:empty { display: none; }

@media (max-width: 900px) {
	.rh-voice-modal {
		position: fixed !important;
		width: 100%;
		max-width: none;
		inset: auto 0 0 0 !important;
		margin: 0;
		border-radius: 16px 16px 0 0;
		max-height: 92vh;

		transform: translateY(100%);
		transition:
			transform 240ms cubic-bezier(0.2, 0, 0, 1),
			opacity 200ms ease-out,
			overlay 240ms allow-discrete,
			display 240ms allow-discrete;
	}
	.rh-voice-modal[open] { transform: translateY(0); }
	@starting-style {
		.rh-voice-modal[open] { transform: translateY(100%); }
	}
	.rh-voice-modal__inner { max-height: 92vh; }
	.rh-voice-modal__close { display: none; }
	.rh-voice-modal__handle {
		display: block;
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: var(--rh-vm-border);
		margin: 8px auto 0;
		flex: 0 0 auto;
	}
	.rh-voice-modal__header { padding: 8px 14px 10px; }
	.rh-voice-modal__stage { max-height: 55vh; }
}

@media (prefers-reduced-motion: reduce) {
	.rh-voice-modal,
	.rh-voice-modal::backdrop {
		transition: none !important;
	}
}

/* =============================================================================
 *  «نظرات مشتریان»
 * ========================================================================== */
.rh-crev__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(14px, 2.5vw, 40px);
	flex-wrap: wrap;
}
.rh-crev__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.2vw, 2.1rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.35;
	color: var(--wp--preset--color--foreground, #1a1d23);
}
.rh-crev__lead {
	margin: 8px 0 0;
	font-size: clamp(0.9rem, 1.05vw, 1rem);
	line-height: 1.8;
	color: var(--wp--preset--color--text, #4a4f57);
}
/* Same outline-then-fill rule as .rh-reviews__summary-cta on the product
   page's own «ثبت دیدگاه» — this button opens the identical review form, so it
   reads as the same action wherever it appears. */
.rh-crev__cta {
	flex: none;
	padding: 12px 22px;
	border: 1px solid var(--wp--preset--color--primary, #cb6686);
	border-radius: var(--wp--custom--button--radius, 10px);
	background: transparent;
	color: var(--wp--preset--color--primary, #cb6686);
	font: inherit;
	font-weight: var(--rh-fw-strong);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.rh-crev__cta:hover,
.rh-crev__cta:focus-visible {
	background: var(--wp--preset--color--primary, #cb6686);
	color: var(--wp--preset--color--base, #fff);
}
.rh-crev__empty {
	margin: clamp(18px, 2.4vw, 30px) 0 0;
	color: var(--wp--preset--color--text, #6b7078);
}

.rh-crev__card {
	flex: 0 0 clamp(260px, 30vw, 360px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(14px, 1.6vw, 20px);
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--card, 14px);
	background: var(--wp--preset--color--base, #fff);
}
.rh-crev__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rh-crev__thumb {
	display: block;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f2f3f5);
}
.rh-crev__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rh-crev__thumb--blank {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--text, #9aa0a8);
}
.rh-crev__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rh-crev__name { font-weight: var(--rh-fw-strong); font-size: 0.92rem; }
.rh-crev__sub {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--wp--preset--color--text, #6b7078);
}
/* Two badges, two meanings: «خریدار» is proved against an order in this shop;
   «اینستاگرام» is the buyer's own word, so it is styled softer on purpose. */
.rh-crev__badge {
	padding: 1px 7px;
	border-radius: 999px;
	background: #e8f5ec;
	color: #1c7a3e;
	font-size: 0.68rem;
	font-weight: var(--rh-fw-strong);
}
.rh-crev__badge--ig { background: #fdeef6; color: #b03a7a; }

.rh-crev__stars { display: inline-flex; gap: 2px; font-size: 0.82rem; line-height: 1; }
.rh-crev__star { color: var(--wp--preset--color--border, #d9dce1); }
.rh-crev__star.is-on { color: #f5a623; }

.rh-crev__text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.95;
	color: var(--wp--preset--color--text, #4a4f57);
	/* Cards must stay the same height in a rail; the full text is on the
	   product page, which the link below goes to. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rh-crev__product {
	margin-top: auto;
	display: block;
	font-size: 0.8rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rh-crev__product:hover { opacity: 0.65; color: inherit; }

/* ---- The submit form (shared <dialog> + RHSheet) ----------------------- */
.rh-crev-modal {
	width: min(520px, calc(100vw - 32px));
	max-width: none;
	max-height: min(90vh, 820px);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--card, 14px);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--foreground, #1a1d23);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}
.rh-crev-modal::backdrop { background: rgba(0, 0, 0, 0.45); }
.rh-crev-modal__handle { display: none; }
.rh-crev-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-block-end: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rh-crev-modal__title { margin: 0; font-size: 1.05rem; font-weight: var(--rh-fw-strong); }
.rh-crev-modal__close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.rh-crev-modal__close:hover { background: var(--wp--preset--color--surface, #f2f3f5); }

.rh-crev-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	max-height: calc(min(90vh, 820px) - 68px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.rh-crev-form__row--2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.rh-crev-form__field { display: flex; flex-direction: column; gap: 6px; }
.rh-crev-form__field > span { font-size: 0.85rem; font-weight: var(--rh-fw-strong); }
.rh-crev-form__field small { font-size: 0.72rem; color: var(--wp--preset--color--text, #6b7078); }
.rh-crev-form input[type="text"],
.rh-crev-form input[type="tel"],
.rh-crev-form select,
.rh-crev-form textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 8px;
	background: var(--wp--preset--color--base, #fff);
}
.rh-crev-form textarea { resize: vertical; line-height: 1.8; }
.rh-crev-form__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border: 1px dashed var(--wp--preset--color--border, #d9dce1);
	border-radius: 8px;
	font-size: 0.82rem;
	line-height: 1.7;
}
.rh-crev-form__check input { margin-top: 4px; flex: none; }
.rh-crev-form__submit {
	min-height: var(--wp--custom--button--h--lg, 50px);
	border: 0;
	border-radius: var(--wp--custom--button--radius, 10px);
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
	font: inherit;
	font-weight: var(--rh-fw-strong);
	cursor: pointer;
}
.rh-crev-form__submit:disabled { opacity: 0.55; cursor: progress; }
.rh-crev-form__note { margin: 0; font-size: 0.75rem; color: var(--wp--preset--color--text, #6b7078); text-align: center; }
.rh-crev-form__msg {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.8;
}
.rh-crev-form__msg:empty { display: none; }
.rh-crev-form__msg.is-error { color: #c0392b; }
.rh-crev-form__msg.is-ok { color: #1c7a3e; }

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 900px) {
	.rh-crev__head { align-items: stretch; }
	.rh-crev__cta { width: 100%; }
	.rh-crev__card { flex-basis: 82vw; }

	/* Bottom sheet: RHSheet switches to show() below 901px, which leaves the
	   dialog outside the top layer — hence the explicit z-index above the
	   shared backdrop, exactly as global.css does for the theme's other sheets. */
	.rh-crev-modal[open] { z-index: 1000; }
	.rh-crev-modal {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-height: 92vh;
		margin: 0;
		border-radius: 16px 16px 0 0;
	}
	.rh-crev-modal__handle {
		display: block;
		width: 42px;
		height: 4px;
		margin: 10px auto 0;
		border-radius: 999px;
		background: var(--wp--preset--color--border, #d9dce1);
	}
	.rh-crev-form { max-height: calc(92vh - 68px); }
	.rh-crev-form__row--2 { grid-template-columns: 1fr; }
}