/**
 * «التعليقات الصوتية» (HT_Voice_Render).
 *
 * The store's look: a cream card in a gold frame with gold branches in two
 * corners, the orange play button in a gold wreath (it turns while the voice
 * plays, and a gold flash lights up as it starts), the recording's own
 * waveform turning orange as it is heard, a speed pill, and the words written
 * by the quill. Titles in Lalezar between two gold rules, as the albums.
 *
 * .ht-voice and every card's slot are size containers: everything inside is in cqi,
 * so one set of rules fits a phone and a wide screen. voice.js adds is-js
 * (its player replaces the browser's), is-playing and is-burst.
 *
 * With less motion: no turning, dancing, flashing or writing; the words show whole.
 */

/* Cairo and Lalezar, self-hosted (SIL Open Font License, assets/fonts/OFL-*.txt). */
@font-face {
	font-family: "HT Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "HT Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Colours, shared by the rows, the button and the sheets ---------- */

.ht-voice,
.ht-voice-fab,
.ht-voice-sheet {
	--htv-gold: linear-gradient(150deg, #f6dc8f, #b98422 45%, #f3d27c 70%, #9c6c18);
	--htv-rule: linear-gradient(90deg, transparent, #d4a541 35%, #f3d27c 50%, #d4a541 65%, transparent);
	--htv-cream: #fffdf7;
	--htv-cream-2: #fbf0d6;
	--htv-line: #ecd9a6;
	--htv-ink: #3b2a14;
	--htv-brown: #6b4510;
	--htv-orange: #e2803f;
	--htv-orange-2: linear-gradient(160deg, #f6a25a, #e2803f 45%, #c85f22);
	--htv-green: #0a7d2c;
	--htv-font: "HT Cairo", system-ui, -apple-system, "Segoe UI", tahoma, sans-serif;
	--htv-display: "HT Lalezar", "HT Cairo", system-ui, sans-serif;

	font-family: var(--htv-font);
}

.ht-voice *,
.ht-voice *::before,
.ht-voice *::after,
.ht-voice-sheet *,
.ht-voice-sheet *::before,
.ht-voice-sheet *::after {
	box-sizing: border-box;
}

.ht-voice :focus-visible,
.ht-voice-fab:focus-visible,
.ht-voice-sheet :focus-visible {
	outline: 2px solid var(--htv-orange);
	outline-offset: 2px;
}

.ht-voice-icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* ---------- The row ---------- */

.ht-voice {
	container-type: inline-size;
	clear: both;
	inline-size: 100%;
	max-inline-size: 1200px;
	margin: 28px auto;
	color: var(--htv-ink);
	line-height: 1.5;
	text-align: start;
}

/* The title between two gold rules, a small gold diamond at each end. */
.ht-voice .ht-voice__title {
	display: flex;
	align-items: center;
	gap: 2cqi;
	margin: 0 0 max(10px, 2cqi);
	padding: 0;
	color: var(--htv-brown);
	font: 400 clamp(20px, 4.4cqi, 34px) / 1.35 var(--htv-display);
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
}

.ht-voice__title::before,
.ht-voice__title::after {
	flex: 1;
	block-size: 2px;
	background: var(--htv-rule);
	content: "";
}

.ht-voice__title span {
	position: relative;
	padding-inline: 1.3em;
}

.ht-voice__title span::before,
.ht-voice__title span::after {
	position: absolute;
	top: 50%;
	inline-size: 0.42em;
	aspect-ratio: 1;
	background: var(--htv-gold);
	content: "";
	transform: translateY(-50%) rotate(45deg);
}

.ht-voice__title span::before {
	inset-inline-start: 0;
}

.ht-voice__title span::after {
	inset-inline-end: 0;
}

.ht-voice__stage {
	position: relative;
}

.ht-voice .ht-voice__track {
	display: flex;
	gap: max(10px, 2.4cqi);
	overflow: auto hidden;
	margin: 0;
	padding: max(8px, 1.4cqi) max(4px, 1cqi) max(18px, 3cqi);
	list-style: none;
	overscroll-behavior-x: contain;
	scroll-padding-inline: max(4px, 1cqi);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ht-voice__track::-webkit-scrollbar {
	display: none;
}

/* One card and a glimpse of the next on a phone, two from 620px, three from 960px. */
.ht-voice .ht-voice__slot {
	container-type: inline-size;
	flex: none;
	inline-size: 86%;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.ht-voice__slot:only-child {
	inline-size: min(100%, 520px);
	margin-inline: auto;
}

.ht-voice .ht-voice__slot::before,
.ht-voice .ht-voice__slot::marker {
	content: none;
}

@container (min-width: 620px) {
	.ht-voice .ht-voice__slot {
		inline-size: calc((100% - 2.4cqi) / 2);
	}
}

@container (min-width: 960px) {
	.ht-voice .ht-voice__slot {
		inline-size: calc((100% - 4.8cqi) / 3);
	}
}

/* «أفقي»: the same cards at the same widths, one above the other; the page scrolls. */
.ht-voice--stack .ht-voice__track {
	display: grid;
	justify-items: center;
	overflow: visible;
	scroll-snap-type: none;
}

.ht-voice--stack .ht-voice__slot {
	scroll-snap-align: none;
}

/* The arrows: the product page's own, white with an orange chevron, for mouse users. */
.ht-voice .ht-voice__nav {
	position: absolute;
	top: 42%;
	z-index: 3;
	display: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 1px 8px rgb(0 0 0 / 18%);
	color: var(--htv-orange);
	cursor: pointer;
	transform: translateY(-50%);
}

.ht-voice .ht-voice__nav:hover,
.ht-voice .ht-voice__nav:focus-visible {
	background: #fff;
	color: var(--htv-orange);
}

.ht-voice__nav::before {
	inline-size: 30%;
	aspect-ratio: 1;
	border-block-start: 3px solid currentcolor;
	border-inline-end: 3px solid currentcolor;
	content: "";
	transform: translateX(-15%) rotate(45deg);
}

.ht-voice__nav--next::before {
	transform: translateX(15%) rotate(-135deg);
}

.ht-voice .ht-voice__nav--prev {
	right: -10px;
}

.ht-voice .ht-voice__nav--next {
	left: -10px;
}

.ht-voice .ht-voice__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) {
	.ht-voice.is-js .ht-voice__nav {
		display: grid;
	}
}

/* ---------- The card ---------- */

.ht-voice__card {
	position: relative;
	display: grid;
	gap: 4.4cqi;
	overflow: hidden;
	block-size: 100%;
	padding: 6cqi 6cqi 5cqi;
	border: max(2px, 0.6cqi) solid transparent;
	border-radius: max(16px, 5cqi);
	background:
		radial-gradient(120% 70% at 85% 0%, rgb(255 255 255 / 90%), transparent 60%) padding-box,
		linear-gradient(180deg, var(--htv-cream), var(--htv-cream-2)) padding-box,
		var(--htv-gold) border-box;
	box-shadow: 0 2cqi 6cqi rgb(160 110 20 / 22%);
	color: var(--htv-ink);
	text-align: start;
}

.ht-voice__card--store {
	background:
		radial-gradient(120% 70% at 85% 0%, rgb(255 255 255 / 90%), transparent 60%) padding-box,
		linear-gradient(180deg, #fff9ef, #fde6cf) padding-box,
		var(--htv-gold) border-box;
}

/* Gold branches in two corners. */
.ht-voice .ht-voice__branch {
	position: absolute;
	z-index: 0;
	inline-size: 30cqi;
	max-inline-size: none;
	block-size: auto;
	opacity: 0.55;
	pointer-events: none;
}

.ht-voice .ht-voice__branch--top {
	top: -3cqi;
	left: -4cqi;
	transform: scaleX(-1) rotate(-8deg);
}

.ht-voice .ht-voice__branch--bottom {
	right: -4cqi;
	bottom: -4cqi;
	transform: rotate(172deg);
}

.ht-voice__card > :not(.ht-voice__branch) {
	position: relative;
	z-index: 1;
}

/* The label and the badge. */
.ht-voice__head {
	display: flex;
	flex-wrap: wrap;
	gap: 2cqi 3cqi;
	align-items: center;
	justify-content: space-between;
}

.ht-voice__label {
	padding: 0.15em 0.95em;
	border: 1px solid #e6c36a;
	border-radius: 999px;
	background: linear-gradient(180deg, #fffaf0, #f7e6bd);
	box-shadow: inset 0 1px 0 #fff, 0 1cqi 2cqi rgb(160 110 20 / 18%);
	color: var(--htv-brown);
	font: 400 max(15px, 5.4cqi) / 1.5 var(--htv-display);
}

.ht-voice__card--store .ht-voice__label {
	background: var(--htv-orange-2);
	border-color: #c85f22;
	color: #fff;
}

.ht-voice__badge {
	display: inline-flex;
	gap: 1.4cqi;
	align-items: center;
	color: var(--htv-green);
	font-size: max(12px, 3.7cqi);
	font-weight: 800;
}

.ht-voice .ht-voice__check {
	inline-size: max(16px, 5cqi);
	block-size: auto;
}

.ht-voice .ht-voice__dove {
	inline-size: max(24px, 8cqi);
	block-size: auto;
	filter: drop-shadow(0 1px 1px rgb(120 80 10 / 25%));
}

/* ---------- The player ---------- */

.ht-voice__player {
	display: grid;
	grid-template-columns: 25cqi 1fr;
	gap: 4cqi;
	align-items: center;
}

/* The orange disc in the gold wreath. */
.ht-voice .ht-voice__play {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 25cqi;
	block-size: 25cqi;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
}

.ht-voice .ht-voice__play:hover,
.ht-voice .ht-voice__play:focus {
	background: none;
	color: #fff;
}

.ht-voice .ht-voice__wreath {
	position: absolute;
	inset: -2%;
	inline-size: 104%;
	max-inline-size: none;
	block-size: 104%;
	object-fit: contain;
	pointer-events: none;
}

.ht-voice__disc {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--htv-orange-2);
	box-shadow: 0 1.6cqi 4cqi rgb(200 95 34 / 45%), inset 0 0.6cqi 0 rgb(255 255 255 / 35%);
	transition: transform 0.2s ease;
}

.ht-voice__disc .ht-voice-icon {
	inline-size: 46%;
	block-size: 46%;
	filter: drop-shadow(0 1px 1px rgb(120 50 10 / 35%));
}

.ht-voice__disc .ht-voice-icon--play {
	transform: translateX(-6%);
}

.ht-voice__disc .ht-voice-icon--pause,
.ht-voice__card.is-playing .ht-voice__disc .ht-voice-icon--play {
	display: none;
}

.ht-voice__card.is-playing .ht-voice__disc .ht-voice-icon--pause {
	display: block;
}

.ht-voice__play:active .ht-voice__disc {
	transform: scale(0.94);
}

/* A slow turn of the wreath while the voice plays. */
.ht-voice__card.is-playing .ht-voice__wreath {
	animation: htv-turn 14s linear infinite;
}

@keyframes htv-turn {
	to {
		transform: rotate(360deg);
	}
}

/* The gold flash and the stars, as the voice starts. */
.ht-voice .ht-voice__flash,
.ht-voice .ht-voice__stars {
	position: absolute;
	max-inline-size: none;
	block-size: auto;
	opacity: 0;
	pointer-events: none;
}

.ht-voice .ht-voice__flash {
	top: 50%;
	left: 50%;
	inline-size: 190%;
	transform: translate(-50%, -50%) scale(0.3);
}

.ht-voice .ht-voice__stars {
	top: -18%;
	right: -16%;
	inline-size: 46%;
}

.ht-voice__card.is-burst .ht-voice__flash {
	animation: htv-flash 0.9s ease-out;
}

.ht-voice__card.is-burst .ht-voice__stars {
	animation: htv-stars 1.1s ease-out;
}

@keyframes htv-flash {
	30% {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1.25) rotate(25deg);
	}
}

@keyframes htv-stars {
	25% {
		opacity: 1;
		transform: scale(1.1) rotate(-8deg);
	}

	to {
		opacity: 0;
		transform: scale(0.7) rotate(10deg);
	}
}

/* The recording's own waveform: orange where it was heard. */
.ht-voice__body {
	display: grid;
	gap: 2.2cqi;
	min-inline-size: 0;
}

.ht-voice__wave {
	display: flex;
	gap: 0.7cqi;
	align-items: center;
	block-size: 15cqi;
	padding-block: 0.5cqi;
	border-radius: 2cqi;
	cursor: pointer;
	touch-action: pan-y;
}

.ht-voice__wave i {
	flex: 1;
	min-inline-size: 1px;
	block-size: calc(var(--h) * 1%);
	border-radius: 999px;
	background: #e7d3a0;
	transform-origin: center;
	transition: background-color 0.15s linear;
}

.ht-voice__wave i.is-on {
	background: linear-gradient(0deg, #c85f22, #f6a25a);
}

.ht-voice__card.is-playing .ht-voice__wave i {
	animation: htv-dance 0.9s ease-in-out calc(var(--i) * -73ms) infinite alternate;
}

@keyframes htv-dance {
	from {
		transform: scaleY(0.78);
	}

	to {
		transform: scaleY(1.08);
	}
}

.ht-voice__meta {
	display: flex;
	gap: 1.6cqi;
	align-items: center;
	color: var(--htv-brown);
	font-size: max(12px, 3.7cqi);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.ht-voice__clock {
	display: inline-flex;
	gap: 1.4cqi;
}

.ht-voice__total::before {
	margin-inline-end: 1.4cqi;
	opacity: 0.5;
	content: "/";
}

/* The speed pill, the card's peach. */
.ht-voice .ht-voice__speed {
	margin: 0;
	margin-inline-start: auto;
	padding: 0.1em 0.9em;
	border: 1px solid #f0b48e;
	border-radius: 999px;
	background: #ffe3d9;
	box-shadow: none;
	color: #c85f22;
	font: 800 max(12px, 3.6cqi) / 1.6 var(--htv-font);
	cursor: pointer;
}

.ht-voice .ht-voice__speed:hover,
.ht-voice .ht-voice__speed:focus {
	background: #ffd5c4;
	color: #c85f22;
}

/* Without voice.js: the browser's own player. */
.ht-voice .ht-voice__audio {
	grid-column: 1 / -1;
	inline-size: 100%;
}

.ht-voice__card:not(.is-js) .ht-voice__play,
.ht-voice__card:not(.is-js) .ht-voice__body {
	display: none;
}

.ht-voice__card.is-js .ht-voice__audio {
	display: none;
}

/* ---------- The words, written by the quill ---------- */

.ht-voice .ht-voice__text {
	position: relative;
	display: grid;
	margin: 0;
	padding: 4cqi 5cqi;
	border: 0;
	border-radius: 4cqi;
	background: rgb(255 255 255 / 72%);
	box-shadow: inset 0 0 0 1px var(--htv-line);
	quotes: none;
}

.ht-voice .ht-voice__text::before,
.ht-voice .ht-voice__text::after {
	content: none;
}

.ht-voice .ht-voice__ghost,
.ht-voice .ht-voice__ink {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	font: 600 max(14px, 4.3cqi) / 1.85 var(--htv-font);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.ht-voice .ht-voice__ghost {
	color: var(--htv-ink);
}

.ht-voice__card.is-js .ht-voice__text.is-writing .ht-voice__ghost {
	color: rgb(59 42 20 / 30%);
}

.ht-voice .ht-voice__ink {
	color: var(--htv-ink);
}

.ht-voice__ink-end {
	display: inline-block;
	inline-size: 0;
}

.ht-voice .ht-voice__quill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	inline-size: 9cqi;
	max-inline-size: none;
	block-size: auto;
	opacity: 0;
	pointer-events: none;
	transform-origin: 30% 100%;
	transition: opacity 0.3s ease;
}

.ht-voice__text.is-writing .ht-voice__quill {
	opacity: 1;
}

/* ---------- The product it speaks of ---------- */

.ht-voice .ht-voice__line {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: auto;
	margin-block-end: 2.4cqi;
	opacity: 0.85;
}

.ht-voice .ht-voice__product-link {
	display: flex;
	gap: 3cqi;
	align-items: center;
	color: var(--htv-brown);
	font-size: max(13px, 4cqi);
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
}

.ht-voice .ht-voice__product-link:hover,
.ht-voice .ht-voice__product-link:focus {
	color: var(--htv-orange);
}

.ht-voice .ht-voice__thumb {
	flex: none;
	inline-size: 13cqi;
	max-inline-size: none;
	block-size: 13cqi;
	border: 1px solid var(--htv-line);
	border-radius: 3cqi;
	background: #fff;
	object-fit: cover;
}

/* ---------- «سجّل رأيك بصوتك» ---------- */

.ht-voice__invite {
	display: flex;
	justify-content: center;
	margin-block-start: max(8px, 1.6cqi);

	/* The same side gap as the questions under it (.htfaq): a long text no longer touches the screen's edges. */
	padding-inline: 4cqi;
}

.ht-voice__invite--alone {
	padding: max(14px, 3cqi);
	border: 2px dashed #e1c27a;
	border-radius: max(14px, 2.4cqi);
	background: linear-gradient(180deg, var(--htv-cream), var(--htv-cream-2));
}

.ht-voice .ht-voice__record {
	display: inline-flex;
	gap: 0.7em;
	align-items: center;
	margin: 0;
	padding: 0.45em 0.6em 0.45em 1.3em;
	border: 1.5px solid #d9b25a;
	border-radius: 999px;
	background: #fffaf0;
	box-shadow: 0 4px 14px rgb(160 110 20 / 18%);
	color: var(--htv-brown);
	font: 800 clamp(14px, 2.4cqi, 17px) / 1.4 var(--htv-font);
	cursor: pointer;
}

.ht-voice .ht-voice__record:hover,
.ht-voice .ht-voice__record:focus {
	background: #fff3dc;
	color: var(--htv-brown);
}

/*
 * Coming into sight (voice-record.js): a light runs through the words, the microphone rings,
 * a gold halo; twice. Nothing moves or grows the button: at the screen's full width its old hop
 * (scale 1.05) and a halo 2px outside it widened the page, which shook sideways.
 */
.ht-voice .ht-voice__record.is-nudge {
	position: relative;
}

.ht-voice .ht-voice__record.is-nudge::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	content: "";
	pointer-events: none;
	animation: htv-halo 1.2s ease-out 2;
}

.ht-voice__record.is-nudge .ht-voice__record-mic {
	animation: htv-ring 1.2s ease-in-out 2;
}

/*
 * The words (the button's last span): a gold band crosses them from the right. It is laid over the
 * words and blended (overlay), so the brown letters turn gold as it passes while the cream around
 * them and an emoji keep their colours; the band only slides inside the words' own box.
 */
@media (prefers-reduced-motion: no-preference) {

	.ht-voice__record.is-nudge > span:last-child {
		position: relative;
	}

	.ht-voice__record.is-nudge > span:last-child::before {
		position: absolute;
		inset: 0;
		background: linear-gradient(100deg, transparent 40%, #f3c969 47%, #ffd98a 50%, #f3c969 53%, transparent 60%) 0 0 / 300% 100% no-repeat;
		content: "";
		mix-blend-mode: overlay;
		pointer-events: none;
		animation: htv-shine 1.2s ease-in-out 2;
	}
}

@keyframes htv-shine {

	from {
		background-position: 0 0;
	}

	to {
		background-position: 100% 0;
	}
}

@keyframes htv-ring {

	0%,
	60%,
	100% {
		transform: rotate(0);
	}

	10% {
		transform: rotate(-16deg);
	}

	20% {
		transform: rotate(14deg);
	}

	30% {
		transform: rotate(-10deg);
	}

	40% {
		transform: rotate(8deg);
	}

	50% {
		transform: rotate(-4deg);
	}
}

@keyframes htv-halo {

	0% {
		box-shadow: 0 0 0 0 rgb(226 128 63 / 55%);
	}

	100% {
		box-shadow: 0 0 0 16px rgb(226 128 63 / 0%);
	}
}

.ht-voice__record-mic {
	display: grid;
	place-items: center;
	inline-size: 2.1em;
	block-size: 2.1em;
	padding: 0.42em;
	border-radius: 50%;
	background: var(--htv-orange-2);
	color: #fff;
}

/* ---------- The floating «اسمع قبل أن تشتري» ---------- */

.ht-voice-fab {
	position: fixed;
	bottom: calc(16px + var(--htv-lift, 0px) + env(safe-area-inset-bottom, 0px));
	left: 14px;
	z-index: 9980;
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--htv-brown);
	cursor: pointer;
	transition: transform 0.35s ease, opacity 0.35s ease, bottom 0.25s ease;
}

.ht-voice-fab:hover,
.ht-voice-fab:focus {
	background: none;
	color: var(--htv-brown);
}

.ht-voice-fab[hidden] {
	display: flex;
	visibility: hidden;
	opacity: 0;
	transform: translateY(120%);
}

.ht-voice-fab__disc {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 62px;
	block-size: 62px;
	border-radius: 50%;
	background: var(--htv-orange-2);
	box-shadow: 0 6px 18px rgb(200 95 34 / 45%);
	color: #fff;
}

.ht-voice-fab__disc .ht-voice-icon {
	inline-size: 28px;
	block-size: 28px;
}

.ht-voice-fab .ht-voice-fab__wreath {
	position: absolute;
	inset: -9px;
	inline-size: calc(100% + 18px);
	max-inline-size: none;
	block-size: calc(100% + 18px);
	object-fit: contain;
	animation: htv-turn 22s linear infinite;
}

.ht-voice-fab__ring {
	position: absolute;
	bottom: 0;
	left: 0;
	inline-size: 62px;
	block-size: 62px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgb(226 128 63 / 55%);
	animation: htv-ring 2.6s ease-out infinite;
}

@keyframes htv-ring {
	70% {
		box-shadow: 0 0 0 16px rgb(226 128 63 / 0%);
	}

	to {
		box-shadow: 0 0 0 0 rgb(226 128 63 / 0%);
	}
}

.ht-voice-fab__text {
	padding: 6px 14px;
	border: 1.5px solid #e1c27a;
	border-radius: 999px;
	background: linear-gradient(180deg, #fffdf7, #fbf0d6);
	box-shadow: 0 4px 14px rgb(160 110 20 / 22%);
	font: 400 16px / 1.5 var(--htv-display);
	white-space: nowrap;
}

.ht-voice-fab.is-small .ht-voice-fab__text {
	display: none;
}

/* ---------- Sheets: the voices of the floating button, the recorder ---------- */

.ht-voice-sheet {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgb(30 20 5 / 55%);
	color: var(--htv-ink);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: htv-fade 0.25s ease;
}

.ht-voice-sheet[hidden] {
	display: none;
}

@keyframes htv-fade {
	from {
		opacity: 0;
	}
}

.ht-voice-sheet__box {
	position: relative;
	container-type: inline-size;
	inline-size: 100%;
	max-inline-size: 1000px;
	max-block-size: 90vh;
	overflow: auto;
	padding: 22px 16px calc(18px + env(safe-area-inset-bottom, 0px));
	border-radius: 24px 24px 0 0;
	background: linear-gradient(180deg, #fffdf7, #f8ead0);
	box-shadow: 0 -12px 40px rgb(0 0 0 / 30%);
	animation: htv-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	overscroll-behavior: contain;
}

.ht-voice-sheet--rec .ht-voice-sheet__box {
	max-inline-size: 520px;
}

@keyframes htv-rise {
	from {
		transform: translateY(40%);
	}
}

@media (min-width: 760px) {
	.ht-voice-sheet {
		align-items: center;
		padding: 24px;
	}

	.ht-voice-sheet__box {
		border-radius: 24px;
	}
}

.ht-voice-sheet .ht-voice-sheet__close {
	position: sticky;
	top: 0;
	z-index: 4;
	float: left;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	margin: -8px -4px 0 0;
	padding: 10px;
	border: 1px solid var(--htv-line);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
	color: var(--htv-brown);
	cursor: pointer;
}

.ht-voice-sheet .ht-voice-sheet__close:hover,
.ht-voice-sheet .ht-voice-sheet__close:focus {
	background: #fff;
	color: var(--htv-orange);
}

.ht-voice-sheet .ht-voice-sheet__title {
	margin: 0 0 12px;
	color: var(--htv-brown);
	font: 400 clamp(20px, 5cqi, 28px) / 1.4 var(--htv-display);
	text-align: center;
}

.ht-voice-sheet .ht-voice--sheet {
	margin: 0;
}

/* ---------- The recorder ---------- */

.ht-voice-rec__step {
	display: grid;
	gap: 12px;
}

.ht-voice-rec__step[hidden] {
	display: none;
}

.ht-voice-rec__lead {
	margin: 0;
	font-size: 15px;
	text-align: center;
}

.ht-voice-rec__field {
	display: grid;
	gap: 4px;
	font-size: 14px;
	font-weight: 700;
}

.ht-voice-sheet .ht-voice-rec__field input,
.ht-voice-sheet .ht-voice-rec__field textarea {
	inline-size: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1.5px solid #e1c27a;
	border-radius: 12px;
	background: #fff;
	color: var(--htv-ink);
	font: 600 16px / 1.5 var(--htv-font);
}

.ht-voice-rec__field input:focus,
.ht-voice-rec__field textarea:focus {
	border-color: var(--htv-orange);
	outline: none;
	box-shadow: 0 0 0 3px rgb(226 128 63 / 22%);
}

.ht-voice-rec__error {
	min-block-size: 0;
	margin: 0;
	color: #b3261e;
	font-size: 14px;
	font-weight: 700;
}

.ht-voice-rec__error:empty {
	display: none;
}

.ht-voice-sheet .ht-voice-rec__go {
	inline-size: 100%;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--htv-orange-2);
	box-shadow: 0 6px 16px rgb(200 95 34 / 35%);
	color: #fff;
	font: 800 17px / 1.4 var(--htv-font);
	cursor: pointer;
}

.ht-voice-sheet .ht-voice-rec__go:hover,
.ht-voice-sheet .ht-voice-rec__go:focus {
	background: var(--htv-orange-2);
	color: #fff;
	filter: brightness(1.05);
}

.ht-voice-sheet .ht-voice-rec__go[disabled] {
	opacity: 0.45;
	cursor: default;
	filter: grayscale(0.4);
}

.ht-voice-rec {
	display: grid;
	gap: 10px;
	justify-items: center;
	padding: 10px 0 4px;
}

/* The big microphone; red with a beating ring while it records. */
.ht-voice-rec .ht-voice-rec__mic,
.htv-box .ht-voice-rec__mic {
	position: relative;
	display: grid;
	gap: 6px;
	justify-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--htv-brown, #6b4510);
	font: 800 15px / 1.4 var(--htv-font, inherit);
	cursor: pointer;
}

.ht-voice-rec .ht-voice-rec__mic[hidden] {
	display: none;
}

.ht-voice-rec__mic .ht-voice-icon {
	inline-size: 88px;
	block-size: 88px;
	padding: 22px;
	border-radius: 50%;
	background: linear-gradient(160deg, #f6a25a, #e2803f 45%, #c85f22);
	box-shadow: 0 8px 22px rgb(200 95 34 / 40%);
	color: #fff;
}

.ht-voice-rec__mic .ht-voice-icon--stop,
.ht-voice-rec.is-recording .ht-voice-rec__mic .ht-voice-icon--mic {
	display: none;
}

.ht-voice-rec.is-recording .ht-voice-rec__mic .ht-voice-icon--stop {
	display: block;
	background: linear-gradient(160deg, #ef5b4f, #c62828);
	animation: htv-beat 1.2s ease-out infinite;
}

@keyframes htv-beat {
	0% {
		box-shadow: 0 0 0 0 rgb(198 40 40 / 45%);
	}

	to {
		box-shadow: 0 0 0 18px rgb(198 40 40 / 0%);
	}
}

.ht-voice-rec__level {
	display: flex;
	gap: 3px;
	align-items: center;
	inline-size: min(100%, 300px);
	block-size: 36px;
}

.ht-voice-rec__level i {
	flex: 1;
	block-size: calc(8% + var(--l, 0) * 92%);
	border-radius: 999px;
	background: #e7d3a0;
	transition: block-size 0.08s linear;
}

.ht-voice-rec.is-recording .ht-voice-rec__level i {
	background: linear-gradient(0deg, #c85f22, #f6a25a);
}

.ht-voice-rec__clock {
	margin: 0;
	color: var(--htv-brown, #6b4510);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.ht-voice-rec__note {
	margin: 0;
	font-size: 14px;
	text-align: center;
}

.ht-voice-rec__note:empty {
	display: none;
}

.ht-voice-rec__review {
	display: grid;
	gap: 8px;
	justify-items: center;
	inline-size: 100%;
}

.ht-voice-rec__review[hidden] {
	display: none;
}

.ht-voice-rec__review audio {
	inline-size: 100%;
}

.ht-voice-rec .ht-voice-rec__again {
	margin: 0;
	padding: 4px 10px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--htv-orange, #e2803f);
	font: 700 14px / 1.4 var(--htv-font, inherit);
	text-decoration: underline;
	cursor: pointer;
}

.ht-voice-rec__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	font-weight: 700;
}

.ht-voice-rec__consent input {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	margin: 2px 0 0;
	accent-color: var(--htv-orange);
}

/* When the settings hide the consent box: sending is the consent, said under the button. */
.ht-voice-rec__agree {
	margin: -4px 0 0;
	color: var(--htv-brown);
	font-size: 13px;
	text-align: center;
	opacity: 0.85;
}

/* The visitor's «اشتريت منّا؟ (اختياري)»: the phone they ordered with, for the badge. */
.ht-voice-rec__bought {
	display: grid;
	gap: 10px;
	padding: 10px 12px;
	border: 1.5px dashed #e1c27a;
	border-radius: 12px;
	background: rgb(255 255 255 / 60%);
}

.ht-voice-rec__bought summary {
	color: var(--htv-brown);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.ht-voice-rec__bought summary::marker {
	color: var(--htv-orange);
}

.ht-voice-rec__hint {
	margin: 0;
	font-size: 13px;
}

.ht-voice-rec__done {
	justify-items: center;
	padding-block: 10px;
	font-size: 17px;
	text-align: center;
}

.ht-voice-sheet .ht-voice-rec__dove {
	inline-size: 150px;
	max-inline-size: 60%;
	block-size: auto;
	animation: htv-fly 1.6s ease-out;
}

@keyframes htv-fly {
	from {
		opacity: 0;
		transform: translate(30%, 25%) rotate(-12deg) scale(0.7);
	}
}

/* ---------- Less motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.ht-voice__card.is-playing .ht-voice__wreath,
	.ht-voice__card.is-playing .ht-voice__wave i,
	.ht-voice__card.is-burst .ht-voice__flash,
	.ht-voice__card.is-burst .ht-voice__stars,
	.ht-voice-fab .ht-voice-fab__wreath,
	.ht-voice-fab__ring,
	.ht-voice-sheet,
	.ht-voice-sheet__box,
	.ht-voice-rec.is-recording .ht-voice-rec__mic .ht-voice-icon--stop,
	.ht-voice-sheet .ht-voice-rec__dove,
	.ht-voice .ht-voice__record.is-nudge,
	.ht-voice .ht-voice__record.is-nudge::after,
	.ht-voice__record.is-nudge .ht-voice__record-mic {
		animation: none;
	}

	.ht-voice-fab,
	.ht-voice__wave i,
	.ht-voice-rec__level i {
		transition: none;
	}

	.ht-voice .ht-voice__quill {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* French and English pages (v76): left to right                       */
/* ------------------------------------------------------------------ */

/* «Previous» on the left, «next» on the right. */
:root:not([dir="rtl"]) .ht-voice .ht-voice__nav--prev {
	right: auto;
	left: -10px;
}

:root:not([dir="rtl"]) .ht-voice .ht-voice__nav--next {
	right: -10px;
	left: auto;
}

/* Their chevrons turn round with them. */
:root:not([dir="rtl"]) .ht-voice__nav::before {
	scale: -1 1;
}

/* The floating button keeps to the reading end: the right. */
:root:not([dir="rtl"]) .ht-voice-fab {
	right: 14px;
	left: auto;
}

/* The invitation reads as a sentence, not in Astra's button capitals. */
:root:not([dir="rtl"]) .ht-voice .ht-voice__record {
	text-transform: none;
}

/* The sheet's ✕ in its top right corner. */
:root:not([dir="rtl"]) .ht-voice-sheet .ht-voice-sheet__close {
	float: right;
	margin: -8px 0 0 -4px;
}