/**
 * PractiScale Review Collection
 *
 * Every rule is scoped under .psr-root so nothing can reach the active theme.
 * The values are lifted straight from the Claude Design file, which used inline
 * styles throughout, so the rendered result is visually identical.
 */

/*
 * Blank canvas template only. This is the one rule that reaches outside
 * .psr-root, and it only applies on the plugin's own page template, which adds
 * the psr-blank body class. The active theme is never affected.
 */
body.psr-blank {
	margin: 0;
	padding: 0;
	background: #0f6fa8;
	overflow-x: hidden;
}

.psr-root {
	--psr-min-height: 100vh;
	--psr-ink: #0b3b2c;

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var( --psr-min-height );
	overflow: hidden;
	background: linear-gradient( 115deg, #0b6fb2 0%, #12a09b 52%, #1fb69c 78%, #2ec39a 100% );
	color: #ffffff;
	font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.psr-root *,
.psr-root *::before,
.psr-root *::after {
	box-sizing: border-box;
}

.psr-root a {
	color: #ffffff;
	text-decoration: none;
}

.psr-root a:hover {
	color: #bce5e7;
}

.psr-root input,
.psr-root textarea,
.psr-root button {
	font-family: inherit;
}

.psr-root input:focus,
.psr-root textarea:focus {
	outline: none;
}

.psr-root ::placeholder {
	color: rgba( 255, 255, 255, 0.4 );
	opacity: 1;
}

.psr-root :focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.psr-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Chrome */

.psr-header {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp( 20px, 3vw, 34px ) clamp( 22px, 4vw, 54px );
}

.psr-logo {
	display: block;
	width: auto;
	height: clamp( 30px, 3.4vw, 42px );
}

.psr-header__tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	color: rgba( 255, 255, 255, 0.55 );
}

.psr-main {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: clamp( 10px, 2vw, 28px ) clamp( 22px, 4vw, 54px ) clamp( 28px, 4vw, 44px );
}

.psr-footer {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 clamp( 22px, 4vw, 54px ) clamp( 22px, 3vw, 30px );
	font-size: 12px;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.65 );
}

.psr-footer__dot {
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.4 );
}

/* ---------------------------------------------------------------- Screens */

.psr-screen {
	display: none;
	width: 100%;
}

.psr-screen.is-active {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------- Select */

.psr-select {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( 24px, 3vw, 48px );
	width: 100%;
	max-width: 1560px;
}

.psr-select__intro {
	display: flex;
	flex: 1 1 340px;
	flex-direction: column;
	gap: clamp( 18px, 2vw, 30px );
	min-width: 290px;
	opacity: 1;
	transform: translateX( 0 );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.psr-kicker {
	font-size: clamp( 12px, 1.25vw, 16px );
	font-weight: 600;
	letter-spacing: 0.28em;
	color: rgba( 255, 255, 255, 0.9 );
}

.psr-title {
	margin: 0;
	font-size: clamp( 52px, 8.4vw, 132px );
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	color: #ffffff;
}

.psr-lede {
	margin: 0;
	font-size: clamp( 14px, 1.3vw, 17px );
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.8 );
}

/* ---------------------------------------------------------------- Face */

.psr-face {
	position: relative;
	display: flex;
	flex: 0 1 clamp( 260px, 34vw, 560px );
	align-items: center;
	justify-content: center;
	opacity: 1;
	transform: scale( 1 );
	transition: transform 0.9s cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 0.8s ease;
}

.psr-face__ring {
	position: absolute;
	border-radius: 999px;
}

.psr-face__ring--inner {
	width: 104%;
	padding-bottom: 104%;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	animation: psrRingPulse 6s ease-in-out infinite;
}

.psr-face__ring--outer {
	width: 124%;
	padding-bottom: 124%;
	border: 1px solid rgba( 255, 255, 255, 0.14 );
}

.psr-face__svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min( 560px, 72vw );
	height: auto;
	filter: drop-shadow( 0 40px 90px rgba( 3, 58, 52, 0.4 ) );
	animation: psrFloatY 8s ease-in-out infinite;
}

.psr-face__stop {
	transition: stop-color 0.55s ease;
}

.psr-face__eyes {
	transition: transform 0.18s ease-out;
}

.psr-face__eye {
	transition: fill 0.55s ease;
}

.psr-face__brows {
	opacity: 0;
	transition: opacity 0.45s ease, stroke 0.55s ease;
}

.psr-face__mouth {
	transition: d 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ), stroke 0.55s ease;
}

/* Hover lift, driven from the option buttons the way the design did it. */
.psr-root.is-hovering .psr-face {
	transform: scale( 1.05 );
}

/* Zoom transition after a sentiment is picked. Declared last so it wins. */
.psr-root.is-zooming .psr-select__intro {
	opacity: 0;
	transform: translateX( -70px );
}

.psr-root.is-zooming .psr-options {
	opacity: 0;
	transform: translateX( 70px );
}

.psr-root.is-zooming .psr-face {
	opacity: 0;
	transform: scale( 1.6 );
}

/* ---------------------------------------------------------------- Options */

.psr-options {
	display: flex;
	flex: 1 1 340px;
	flex-direction: column;
	gap: 6px;
	min-width: 290px;
	padding: clamp( 10px, 1.2vw, 16px );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	border-radius: clamp( 20px, 2vw, 30px );
	background: rgba( 255, 255, 255, 0.1 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	opacity: 1;
	transform: translateX( 0 );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.psr-option {
	display: flex;
	align-items: center;
	gap: clamp( 14px, 1.5vw, 22px );
	padding: clamp( 16px, 1.8vw, 24px ) clamp( 16px, 2vw, 26px );
	border: none;
	border-radius: clamp( 14px, 1.6vw, 22px );
	background: rgba( 255, 255, 255, 0 );
	color: #ffffff;
	box-shadow: none;
	text-align: left;
	cursor: pointer;
	transform: translateX( 0 );
	transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease,
		transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.psr-option:hover {
	transform: translateX( -4px );
}

.psr-option.is-active {
	background: #ffffff;
	color: #0b3b2c;
	box-shadow: 0 22px 48px -22px rgba( 3, 58, 52, 0.75 );
	transform: translateX( -10px );
}

.psr-option__num {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	opacity: 0.6;
}

.psr-option__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
}

.psr-option__title {
	font-size: clamp( 18px, 1.9vw, 25px );
	font-weight: 600;
	letter-spacing: -0.015em;
}

.psr-option__sub {
	font-size: clamp( 12px, 1.1vw, 14px );
	font-weight: 400;
	opacity: 0.7;
}

.psr-option__dot {
	width: 11px;
	height: 11px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.psr-option.is-active .psr-option__dot {
	opacity: 1;
}

.psr-option--0 .psr-option__dot {
	background: #1fb69c;
}

.psr-option--1 .psr-option__dot {
	background: #f0b93c;
}

.psr-option--2 .psr-option__dot {
	background: #e05a4b;
}

/* ---------------------------------------------------------------- Review CTA */

.psr-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 640px;
	text-align: center;
	animation: psrFadeUp 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.psr-review__face {
	width: clamp( 120px, 17vw, 190px );
	height: auto;
	filter: drop-shadow( 0 30px 70px rgba( 3, 58, 52, 0.4 ) );
}

.psr-review__title {
	margin: 0;
	font-size: clamp( 30px, 4.4vw, 54px );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	color: #ffffff;
}

.psr-review__copy {
	max-width: 40ch;
	margin: 0;
	font-size: clamp( 15px, 1.5vw, 18px );
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.85 );
}

/* ---------------------------------------------------------------- Buttons */

/*
 * These are scoped with .psr-root on purpose. The Trustpilot call to action is
 * an anchor, so the generic ".psr-root a" colour rule above outranks a bare
 * ".psr-btn--primary" and would paint the label white on a white pill, leaving
 * an apparently empty button. The extra class keeps the button colours ahead of
 * the link colours.
 */
.psr-root .psr-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 36px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.psr-root .psr-btn--primary {
	background: #ffffff;
	color: #0b463c;
	box-shadow: 0 20px 44px -18px rgba( 3, 58, 52, 0.6 );
}

.psr-root .psr-btn--primary:hover {
	background: #bce5e7;
	color: #0b463c;
	transform: translateY( -2px );
}

.psr-root .psr-btn[disabled] {
	cursor: default;
	opacity: 0.7;
	transform: none;
}

.psr-root .psr-btn[disabled]:hover {
	background: #ffffff;
	transform: none;
}

.psr-root .psr-link {
	padding: 0;
	border: none;
	background: none;
	font-size: 13px;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.7 );
	text-decoration: underline;
	cursor: pointer;
}

.psr-root .psr-link:hover {
	color: #ffffff;
}

.psr-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba( 11, 70, 60, 0.25 );
	border-top-color: #0b463c;
	border-radius: 999px;
}

.psr-btn.is-loading .psr-spinner {
	display: block;
	animation: psrSpin 0.7s linear infinite;
}

/* ---------------------------------------------------------------- Form card */

.psr-card {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1180px;
	overflow: hidden;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: clamp( 22px, 2.4vw, 34px );
	background: rgba( 255, 255, 255, 0.1 );
	backdrop-filter: blur( 16px );
	-webkit-backdrop-filter: blur( 16px );
	animation: psrFadeUp 0.8s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.psr-card__aside {
	display: flex;
	flex: 1 1 320px;
	flex-direction: column;
	justify-content: space-between;
	gap: 34px;
	min-width: 280px;
	padding: clamp( 28px, 3.6vw, 54px );
	background: linear-gradient( 165deg, rgba( 255, 255, 255, 0.16 ), rgba( 255, 255, 255, 0 ) );
}

.psr-card__asideTop {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.psr-card__face {
	width: clamp( 72px, 8vw, 110px );
	height: auto;
}

.psr-card__title {
	margin: 0;
	font-size: clamp( 26px, 3.2vw, 40px );
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: #ffffff;
}

/*
 * The email capture card has no progress dots, so its aside holds a single
 * block. Centring it keeps the panel from looking top heavy next to the form.
 */
.psr-card--single .psr-card__aside {
	justify-content: center;
}

.psr-progress {
	display: flex;
	align-items: center;
	gap: 9px;
}

.psr-progress__dot {
	width: 10px;
	height: 4px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.3 );
	transition: width 0.4s ease, background 0.4s ease;
}

.psr-progress__dot.is-reached {
	background: #ffffff;
}

.psr-progress__dot.is-current {
	width: 26px;
}

.psr-progress__label {
	margin-left: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: rgba( 255, 255, 255, 0.6 );
}

.psr-card__main {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	justify-content: center;
	min-width: 300px;
	min-height: clamp( 340px, 44vh, 470px );
	padding: clamp( 28px, 3.6vw, 54px );
	background: rgba( 4, 48, 42, 0.24 );
}

.psr-form {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
}

/* ---------------------------------------------------------------- Steps */

.psr-step {
	display: none;
	flex-direction: column;
	gap: 16px;
}

.psr-step.is-active {
	display: flex;
	animation: psrFadeUp 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.psr-label {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.psr-label__text {
	font-size: clamp( 20px, 2.3vw, 30px );
	font-weight: 600;
	letter-spacing: -0.025em;
	color: #ffffff;
}

.psr-input {
	padding: 14px 2px;
	border: none;
	border-bottom: 2px solid rgba( 255, 255, 255, 0.35 );
	background: none;
	font-size: clamp( 17px, 1.8vw, 21px );
	font-weight: 500;
	color: #ffffff;
	transition: border-color 0.3s ease;
}

.psr-input:focus {
	border-bottom-color: #ffffff;
}

.psr-textarea {
	padding: 16px;
	border: 1px solid rgba( 255, 255, 255, 0.24 );
	border-radius: 16px;
	background: rgba( 255, 255, 255, 0.1 );
	font-size: clamp( 15px, 1.5vw, 18px );
	font-weight: 400;
	line-height: 1.6;
	color: #ffffff;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.psr-textarea:focus {
	border-color: #ffffff;
}

/* ---------------------------------------------------------------- Stars */

.psr-stars {
	display: flex;
	align-items: center;
	gap: clamp( 6px, 1vw, 12px );
}

.psr-star {
	padding: 6px;
	border: none;
	background: none;
	line-height: 0;
	cursor: pointer;
	transition: transform 0.25s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.psr-star:hover {
	transform: translateY( -3px ) scale( 1.06 );
}

.psr-star__icon {
	display: block;
	width: clamp( 34px, 4.4vw, 50px );
	height: auto;
	fill: rgba( 255, 255, 255, 0.25 );
	stroke: rgba( 255, 255, 255, 0.55 );
	stroke-width: 1;
	transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}

.psr-star.is-on .psr-star__icon {
	fill: #ffffff;
	stroke: #ffffff;
	filter: drop-shadow( 0 10px 22px rgba( 3, 58, 52, 0.55 ) );
}

.psr-stars__caption {
	font-size: 13px;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.7 );
}

/* ---------------------------------------------------------------- Feedback and actions */

.psr-error {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: #ffd9d2;
	animation: psrFadeIn 0.3s ease both;
}

.psr-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.psr-actions .psr-btn {
	padding: 16px 34px;
	box-shadow: 0 18px 40px -20px rgba( 3, 58, 52, 0.7 );
}

.psr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- Thanks */

.psr-thanks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: 100%;
	max-width: 600px;
	text-align: center;
	animation: psrFadeUp 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.psr-thanks__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 22px 50px -20px rgba( 3, 58, 52, 0.7 );
}

.psr-thanks__badge svg {
	width: 40px;
	height: 40px;
}

.psr-thanks__title {
	margin: 0;
	font-size: clamp( 28px, 4vw, 48px );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	color: #ffffff;
}

.psr-thanks__copy {
	max-width: 40ch;
	margin: 0;
	font-size: clamp( 15px, 1.5vw, 18px );
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.85 );
}

/* ---------------------------------------------------------------- Keyframes */

@keyframes psrFadeUp {
	from {
		opacity: 0;
		transform: translateY( 26px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes psrFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes psrRingPulse {
	0%,
	100% {
		transform: scale( 1 );
		opacity: 0.5;
	}

	50% {
		transform: scale( 1.045 );
		opacity: 0.85;
	}
}

@keyframes psrFloatY {
	0%,
	100% {
		transform: translateY( 0 );
	}

	50% {
		transform: translateY( -14px );
	}
}

@keyframes psrSpin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.psr-root *,
	.psr-root *::before,
	.psr-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}