/*
 * Product voice introduction — «معرفی صوتی محصول».
 *
 * This stylesheet dresses ONLY the voice card. Everything about the player
 * control itself — the round play/pause button, the seek bar, the clock — comes
 * from assets/css/audio-reviews.css, which is enqueued alongside this file
 * under its own shared handle, because the voice card emits exactly the same
 * transport markup as the audio-review rows. There is deliberately no second
 * copy of those rules here: one transport, one stylesheet, two features.
 *
 * DESIGN LAW — Ahmad's final ruling of 2026-08-29, restated here because it has
 * been violated twice: NO box-shadow and NO backdrop-filter on any surface
 * outside the FrontDialog popups. This card is therefore FLAT: a tint derived
 * from the accent, one hairline border, a generous radius, and nothing else.
 * The glass/iOS language lives only in assets/css/front-dialog.css. Pinned by
 * tools/run-product-voice-player-red.php check V10 — do not "evolve" this back
 * toward shadows.
 *
 * PILL SHAPE — owner's design ruling of 2026-08-31, from a Digikala product page
 * he supplied as the reference. Collapsed, the strip is FULLY round (999px), so
 * it reads as one control rather than a panel; once it expands to hold the seek
 * bar it becomes a card and settles to the law's 28px. Both states stay flat:
 * a tint, one hairline, and never a shadow.
 *
 * The earlier 18px matched the audio-review banner. That reasoning still holds
 * for the banner, which is unchanged — but the voice strip is now a single-row
 * control and a control is round, not slightly rounded.
 *
 * Direction is never hardcoded: the section carries dir="rtl" and every
 * direction-dependent property is logical, so one stylesheet is correct in both
 * directions (account-foundation.css idiom).
 *
 * --asrtools-audio-accent and --asrtools-audio-on-accent are set per instance by
 * ProductVoiceRenderer, which resolves the block attribute, then this module's
 * own accent_color override, then whatever the «بررسی صوتی» accent currently
 * resolves to. The literals after each var() are only the last resort if the
 * inline properties are ever missing, and they are the same AI-signifier violet
 * (see AudioReviewsModule::DEFAULT_ACCENT for the owner's ruling behind it).
 */

/*
 * WIDTH, HELD EXPLICITLY. Measured on the live theme the strip collapsed to a
 * 26px-wide, 296px-tall splinter: the theme's product column lays its children
 * out as flex items, so a block-level section with only `max-width` shrinks to
 * min-content and the two lines of text wrap one character at a time.
 *
 * `width` alone is not enough inside a flex parent — the basis and the shrink
 * behaviour have to be stated too, and `min-width: 0` is what lets the row's
 * text actually use the space instead of being held at min-content.
 */
.asrtools-product-voice {
	--asrtools-audio-accent: #7c3aed;
	--asrtools-audio-on-accent: #ffffff;
	color: #27241f;
	flex: 1 1 100%;
	font-family: inherit;
	margin: 18px 0;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.asrtools-product-voice__card {
	/* Flat tint derived from the accent; the plain colour before it is the
	   fallback for engines without color-mix(). DESIGN LAW: a TINT, never a
	   glass panel — no box-shadow and no backdrop-filter on this surface. */
	background: #f5f1fe;
	background: color-mix(in srgb, var(--asrtools-audio-accent) 10%, #fff);
	border: 1px solid #ddd7ca;
	border-color: color-mix(in srgb, var(--asrtools-audio-accent) 30%, #ddd7ca);
	/* Always fully round: it is a control, and it never becomes a panel. */
	border-radius: 999px;
	display: block;
	min-height: 68px;
	padding: 11px 14px;
	position: relative;
	width: 100%;
}

.asrtools-product-voice__row {
	align-items: center;
	display: flex;
	gap: 12px;
}

/*
 * The shared transport moves its play button in here. Reserved at the control's
 * own size so the row does not jump when the script lands — and so the pill has
 * the right height even with JavaScript disabled.
 */
/* Holds the transport's button plus the two 5-second jumps the reference has. */
.asrtools-product-voice__controls {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 4px;
	justify-content: center;
	min-height: 44px;
}

/*
 * The jumps are quiet on purpose: play is the one primary action in the strip, and
 * three filled circles would give it three. Sized to a 40px target — under the
 * usual 44 because they sit inside a 68px row beside a 44px control, and pushing
 * them larger is what makes the row feel crowded.
 */
.asrtools-product-voice__card .asrtools-audio-reviews__skip {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--asrtools-audio-accent, #7c3aed);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	transform: scale(0.6);
	transition: width 240ms ease, opacity 200ms ease, transform 240ms ease, margin 240ms ease;
	width: 0;
}

/*
 * REVEALED, NOT SNAPPED. The jumps and the speed chip used to flip from
 * display:none, which cannot animate — the owner compared it with the
 * reference's easing and called ours abrupt, correctly. They now live in the
 * row at zero width and grow into place, so the pill's own geometry does the
 * animation. display is never touched, because display kills transitions.
 */
.asrtools-product-voice__card.is-open:not(.is-ended) .asrtools-audio-reviews__skip {
	margin: 0 3px;
	opacity: 1;
	transform: scale(1);
	width: 44px;
}


/*
 * The glyph is a real drawn arrow now — a circular arc with an arrowhead — after
 * the CSS-only attempt (a border ring with a transparent quarter) rendered as
 * shapeless blobs on the live site. The owner asked for arrows; these are arrows.
 * One drawing serves both directions: forward is the mirror, and the «۵» is HTML
 * so the mirror never flips the digit.
 */
.asrtools-audio-reviews__skip svg {
	height: 26px;
	inset: 0;
	margin: auto;
	position: absolute;
	width: 26px;
}

.asrtools-audio-reviews__skip[data-dir="fwd"] svg {
	transform: scaleX(-1);
}

/*
 * The numeral sits inside the ring, and the ring's own centre is a shade below
 * the glyph box centre (the gap and barb live at the top), so the digit is
 * nudged down to sit optically centred rather than mathematically centred.
 */
.asrtools-audio-reviews__skip b {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	position: relative;
	transform: translateY(0.5px);
}

.asrtools-audio-reviews__skip:focus-visible {
	outline: 2px solid var(--asrtools-audio-accent, #7c3aed);
	outline-offset: 2px;
}

/*
 * The speed chip sits at the opposite end of the row from the transport, with an
 * inline-end margin so it is never read as a fourth transport button. It changes a
 * preference; the buttons beside the play control move the playhead.
 */
.asrtools-product-voice__rateslot {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	margin-inline-end: 10px;
}

/*
 * SHIELDED like the play control, and for the same reason: on the live theme the
 * chip rendered as a grey square — the theme's own button rules matched and won,
 * and the owner rightly called it ugly and foreign. The chip's identity (shape,
 * ground, frame, ink) is restated here scoped to our section and marked
 * important; it is a ghost pill in the accent, quiet on purpose, because it sets
 * a preference rather than moving the playhead.
 */
.asrtools-product-voice__card .asrtools-audio-reviews__rate {
	background: transparent !important;
	border: 1px solid color-mix(in srgb, var(--asrtools-audio-accent, #7c3aed) 45%, transparent) !important;
	border-radius: 999px !important;
	color: var(--asrtools-audio-accent, #7c3aed) !important;
	min-height: 30px;
	min-width: 46px;
	padding: 2px 10px !important;
}

/*
 * Visible only WHILE PLAYING. Pause and ended both collapse the strip back to
 * its idle shape (owner's ruling), so the chip and the jumps ease away together
 * and the corner mark morphs back — the reveal transitions below simply run in
 * reverse.
 */
.asrtools-product-voice__card .asrtools-product-voice__rateslot {
	display: inline-flex;
	/* max-width, because width:auto cannot be transitioned from zero. */
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transform: scale(0.8);
	transition: opacity 200ms ease, transform 240ms ease, max-width 240ms ease;
}

.asrtools-product-voice__card.is-open .asrtools-product-voice__rateslot {
	max-width: 90px;
	opacity: 1;
	transform: scale(1);
}/*
 * FIXED HEIGHT, ALWAYS. Progress is drawn on the card's own outline, so pressing
 * play changes nothing about the strip's size and nothing below it moves. The
 * previous version expanded a panel to hold a linear seek bar; it worked, and the
 * owner correctly called the result messy — a control that grows under the cursor
 * at the moment you press it is worse than one that stays put.
 */
.asrtools-product-voice__ring {
	color: var(--asrtools-audio-accent, #7c3aed);
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.asrtools-product-voice__ring svg {
	display: block;
	height: 100%;
	width: 100%;
}

/*
 * VISUALLY hidden, never display:none. The media element and the real seek slider
 * stay reachable by keyboard and screen readers — the outline is decorative, and
 * removing the only scrubbing control an assistive user has would be a regression
 * dressed as a redesign. <noscript> restores it to the flow.
 */
.asrtools-product-voice__offscreen {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.asrtools-product-voice__caption {
	color: #7a746a;
	display: block;
	font-size: 11.5px;
	line-height: 1.6;
	padding: 6px 14px 0;
}

.asrtools-product-voice__controls {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}/*
 * NO FLASH. The panel starts collapsed and the native player starts hidden — full
 * stop. The previous approach kept both OPEN until the script set a flag, which
 * meant every visitor saw the browser's own grey player and a stray clock for as
 * long as the script took to arrive, then watched them vanish. The owner reported
 * exactly that: "when it opens, the old player shows for a moment".
 *
 * The no-JavaScript baseline is preserved by <noscript> instead, emitted next to
 * the pill: with scripting off the browser applies those rules and the recording
 * stays playable. With scripting on, <noscript> never applies, so there is no
 * window in which the raw player is visible.
 */

/*
 * A bare glyph, not a boxed tile. In the reference the mark sits directly on the
 * tint; boxing it added a second border inside a strip that already has one, and
 * two nested hairlines is the visual noise the flat law exists to prevent.
 */
/*
 * MORPHS INTO THE SPEED CHIP. The mark and the chip share the pill's right
 * corner: while idle the mark shows; once playing it shrinks away as the chip
 * grows into its place — one soft trade in one spot (owner's ruling), instead of
 * a new control popping in beside a mark that stays.
 */
.asrtools-product-voice__icon {
	align-items: center;
	color: var(--asrtools-audio-accent, #7c3aed);
	display: inline-flex;
	flex: 0 0 auto;
	height: 34px;
	justify-content: center;
	overflow: hidden;
	transition: width 240ms ease, opacity 200ms ease, transform 240ms ease;
	width: 34px;
}

.asrtools-product-voice__card.is-open .asrtools-product-voice__icon {
	opacity: 0;
	transform: scale(0.5);
	width: 0;
}

.asrtools-product-voice__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

/*
 * THE CONTROL MUST SURVIVE THE THEME. Measured live, the play button rendered
 * 40x42 with square corners and the theme's grey — i.e. the theme's own button
 * rules beat ours. Our base rule is a single class (0,1,0), which any
 * `.woocommerce button`-shaped selector matches or outranks, and load order
 * decided the rest.
 *
 * So the identity of the control — its size, its shape, its colour — is restated
 * here scoped to our own section and marked important. `!important` is used
 * deliberately and only for these four properties: this is a widget living
 * inside somebody else's stylesheet, the theme demonstrably won, and a play
 * button that renders as a blank grey rectangle is not a cosmetic defect but a
 * control the visitor cannot recognise. Everything else stays themeable.
 */
/*
 * WHITE ground, accent glyph — the reference's arrangement, on the owner's
 * explicit ruling («توش سفید باشه نه این بنفش جیغ»). The filled-accent circle
 * read as shouting on the tinted card; the white circle reads as a control
 * sitting ON it. Still shielded with !important for the same reason as ever:
 * the theme's button rules demonstrably win otherwise.
 */
.asrtools-product-voice .asrtools-audio-reviews__pp {
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: var(--asrtools-audio-accent, #7c3aed) !important;
	height: 48px !important;
	min-height: 44px;
	min-width: 44px;
	padding: 0 !important;
	width: 48px !important;
}

/*
 * ONE LINE, ALWAYS. When the jumps and the speed chip grow into the row on a
 * phone, the text column narrows; a wrapping title would change the pill's
 * height mid-animation — the exact jolt this whole design exists to avoid. An
 * ellipsis on a control strip's label is the correct trade.
 */
.asrtools-product-voice__title {
	color: #17130c;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.asrtools-product-voice__subtitle {
	color: #5f5a51;
	font-size: 12px;
	line-height: 1.75;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The native player is the no-JavaScript baseline and must stay usable on its
 * own; assets/js/audio-reviews.js removes `controls` only once its own control
 * is built and attached, at which point this element becomes the invisible
 * media source behind that control.
 */
.asrtools-product-voice__player {
	display: block;
	margin-top: 10px;
	max-width: 100%;
	width: 100%;
}

/* Hidden from the first paint; <noscript> brings it back when there is no script
   to replace it. See the NO FLASH note above. */
.asrtools-product-voice__player {
	display: none;
}.asrtools-product-voice__caption {
	color: #7a746a;
	display: block;
	font-size: 11.5px;
	line-height: 1.6;
	padding-top: 8px;
}

/* Editor preview only: the empty state reads as inert guidance, never as a
   real player the owner might think is broken. */
.asrtools-product-voice--preview .asrtools-product-voice__card {
	border-style: dashed;
}

/*
 * The explanation sits BELOW the pill, not inside it. The pill's second line is
 * a fixed label on the front end, so putting a paragraph there would misreport
 * the very shape this preview exists to show.
 */
.asrtools-product-voice__note {
	color: #7a746a;
	font-size: 12px;
	line-height: 1.9;
	margin: 8px 4px 0;
}

/* An inert control must LOOK inert: a play button that looks pressable with
   nothing behind it is the same lie as a missing one. */
.asrtools-product-voice--empty .asrtools-audio-reviews__pp[disabled] {
	cursor: default;
	opacity: 0.45;
}

.asrtools-product-voice--empty .asrtools-product-voice__subtitle {
	color: #5f5a51;
}

@media (prefers-reduced-motion: reduce) {
	.asrtools-product-voice__card,
	.asrtools-product-voice__icon,
	.asrtools-product-voice__ring svg,
	.asrtools-audio-reviews__skip,
	.asrtools-product-voice__rateslot {
		transition: none;
	}
}

@media (max-width: 480px) {
	.asrtools-product-voice__card {
		padding: 10px 12px;
	}

	.asrtools-product-voice__row {
		gap: 10px;
	}

	.asrtools-product-voice__icon {
		height: 30px;
		width: 30px;
	}
}