/**
 * Review Request Demo - front end.
 * Colour tokens are printed inline by PHP from the plugin settings; the values
 * below are only fallbacks so the demo still looks right if that fails.
 */

.ro-demo {
	--ro-accent: #d6f84c;
	--ro-accent-rgb: 214, 248, 76;
	--ro-surface: #1c3129;
	--ro-border: #2e463c;
	--ro-avatar: #12523c;
	--ro-hand: #1b2740;
	--ro-label: #ffffff;
	--ro-muted: #9fb3a8;
	--ro-screen: #ffffff;
	--ro-ink: #12201a;
	--ro-ink-soft: #56645c;
	--ro-bubble: #e8ede9;
	--ro-hairline: #dde4de;
	--ro-max: 320px;

	--ro-gap: 20px;
	--ro-side: 190px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ro-gap);
	font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ro-demo * {
	box-sizing: border-box;
}

/* Stage: picker beside the phone on wide screens, stacked when narrow.
   The DOM order already matches each variant, so no flex `order` is used and
   tab order always follows what is on screen. */

.ro-demo__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ro-gap);
	width: 100%;
}

/* Left and right are the only arrangements that need a row. Top and bottom
   stay a column, so they need no rule of their own. */
.ro-demo--d-left .ro-demo__stage,
.ro-demo--d-right .ro-demo__stage {
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.ro-demo__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ro-gap);
	width: 100%;
	max-width: var(--ro-max);
	flex: none;
}

/* The narrow-screen rules live in the stylesheet PHP generates, because the
   switch width is an admin setting and a media query cannot read a variable. */

/* Input ------------------------------------------------------------------ */

.ro-demo__field {
	width: 100%;
	max-width: var(--ro-max);
}

.ro-demo__field label {
	display: block;
	margin: 0 0 8px;
	color: var(--ro-label);
	font-weight: 600;
	font-size: 15px;
}

.ro-demo__field input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1.5px solid var(--ro-border);
	background: var(--ro-surface);
	color: #fff;
	font: 500 17px/1 "Figtree", ui-sans-serif, system-ui, sans-serif;
	box-shadow: none;
	margin: 0;
}

.ro-demo__field input::placeholder {
	color: var(--ro-muted);
	opacity: 1;
}

.ro-demo__field input:focus {
	border-color: var(--ro-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--ro-accent-rgb), 0.35);
}

.ro-demo__box {
	position: relative;
}

.ro-demo__box input {
	padding-right: 48px;
}

.ro-demo__clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--ro-muted);
	font: 400 20px/1 "Figtree", ui-sans-serif, system-ui, sans-serif;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.ro-demo__clear.is-shown {
	opacity: 1;
	pointer-events: auto;
}

.ro-demo__clear:hover {
	color: #fff;
}

.ro-demo__clear:focus-visible {
	outline: 2px solid var(--ro-accent);
	outline-offset: 2px;
	opacity: 1;
	pointer-events: auto;
}

/* Phone ------------------------------------------------------------------ */

.ro-phone {
	width: 100%;
	max-width: var(--ro-max);
	padding: 9px;
	border-radius: 28px;
	background: var(--ro-surface);
	border: 1px solid var(--ro-border);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}

.ro-phone__screen {
	border-radius: 20px;
	overflow: hidden;
	background: var(--ro-screen);
	color: var(--ro-ink);
}

.ro-phone__top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 14px 12px;
	border-bottom: 1px solid var(--ro-hairline);
}

.ro-phone__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: none;
	background: var(--ro-avatar);
	color: #fff;
	font: 600 12px/1 "Figtree", ui-sans-serif, system-ui, sans-serif;
}

.ro-phone__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.ro-phone__name {
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ro-phone__sub {
	font-size: 12px;
	color: var(--ro-ink-soft);
}

/* Thread ----------------------------------------------------------------- */

.ro-thread {
	padding: 12px 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ro-thread__time {
	align-self: center;
	font-size: 11px;
	color: var(--ro-ink-soft);
}

.ro-bubble {
	max-width: 90%;
	margin: 0;
	border-radius: 18px;
	border-bottom-left-radius: 6px;
	background: var(--ro-bubble);
}

.ro-bubble--media {
	overflow: hidden;
}

.ro-bubble--text {
	padding: 10px 13px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ro-ink);
}

.ro-bubble__link {
	display: block;
	margin-top: 6px;
	color: var(--ro-avatar);
	text-decoration: underline;
	word-break: break-all;
}

/* Scene ------------------------------------------------------------------ */

.ro-scene {
	position: relative;
	overflow: hidden;
	background: var(--ro-hairline);
	transition: opacity 0.18s ease;
}

/* Brief fade while the next scene's photo is swapped in. The overlay name
   fades with it, because the name is meant to read as part of the photo. */
.ro-scene.is-swapping {
	opacity: 0;
}

.ro-scene img,
.ro-scene svg {
	display: block;
	width: 100%;
	height: auto;
}

.ro-scene__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ro-scene__name {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--ro-hand);
	mix-blend-mode: multiply;
}

.ro-scene__name span {
	display: inline-block;
	max-width: 88%;
	font-family: "Caveat", "Segoe Script", cursive;
	font-weight: 600;
	line-height: 0.95;
	word-break: keep-all;
	opacity: 0.92;
}

/* Picker ----------------------------------------------------------------- */

.ro-picker {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ro-picker li {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ro-thumb {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	min-height: 44px;
	background: transparent;
	border: 1.5px solid transparent;
	border-radius: 14px;
	color: var(--ro-muted);
	font: 500 13px/1.25 "Figtree", ui-sans-serif, system-ui, sans-serif;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ro-thumb__img {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 12px;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--ro-surface);
	border: 2px solid var(--ro-border);
	font: 700 15px/1 "Bricolage Grotesque", "Figtree", sans-serif;
	color: var(--ro-muted);
	transition: border-color 0.18s ease;
}

.ro-thumb__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ro-thumb__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ro-thumb:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
}

.ro-thumb[aria-pressed="true"] {
	color: #fff;
	background: rgba(var(--ro-accent-rgb), 0.08);
	border-color: rgba(var(--ro-accent-rgb), 0.45);
	font-weight: 600;
}

.ro-thumb[aria-pressed="true"] .ro-thumb__img {
	border-color: var(--ro-accent);
}

.ro-thumb:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ro-ink), 0 0 0 5px var(--ro-accent);
}

/* Side column: a vertical list of cards ---------------------------------- */

.ro-demo--d-left .ro-demo__stage > .ro-picker,
.ro-demo--d-right .ro-demo__stage > .ro-picker {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: var(--ro-side);
	flex: none;
	align-self: center;
}

/* Row above or below the phone: the compact horizontal grid --------------- */

.ro-demo--d-top .ro-demo__stage > .ro-picker,
.ro-demo--d-bottom .ro-demo__stage > .ro-picker {
	display: grid;
	grid-template-columns: repeat(var(--ro-cols, 4), minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	max-width: 340px;
}

.ro-demo--d-top .ro-demo__stage > .ro-picker .ro-thumb,
.ro-demo--d-bottom .ro-demo__stage > .ro-picker .ro-thumb {
	flex-direction: column;
	gap: 6px;
	padding: 4px;
	text-align: center;
	font-size: 12px;
	border-color: transparent;
	background: none;
}

.ro-demo--d-top .ro-demo__stage > .ro-picker .ro-thumb[aria-pressed="true"],
.ro-demo--d-bottom .ro-demo__stage > .ro-picker .ro-thumb[aria-pressed="true"] {
	background: none;
	border-color: transparent;
}

.ro-demo--d-top .ro-demo__stage > .ro-picker .ro-thumb__img,
.ro-demo--d-bottom .ro-demo__stage > .ro-picker .ro-thumb__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

/* Utility ---------------------------------------------------------------- */

.ro-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
	padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.ro-phone {
		animation: ro-fade 0.4s ease-out both;
	}

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

		to {
			opacity: 1;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ro-demo *,
	.ro-demo *::before,
	.ro-demo *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.ro-scene.is-swapping {
		opacity: 1;
	}
}