/* Shared action/CTA button design language — Calculator + Quiz (2026-08-10).
   One definition so a future change to this language happens once, not
   per-widget. Loaded after pr-motion.css (needs --pr-ease/--pr-duration-mid)
   and relies on each widget's own scoped tokens (--pr-accent, --pr-surface,
   --pr-accent-border) via normal inheritance — .pr-btn only ever appears
   nested inside .pr-quiz or .pr-calc, so no tokens are redeclared here.

   Scope: one-shot action buttons only (nav Back/Skip/Finish, gate/card CTAs,
   Consult Advisor). Deliberately NOT applied to persistent selection/toggle
   controls with their own active-state — the quiz's Q1-Q4 choice cards, the
   Calculator's intent-picker cards, and the payment-plan pill selector all
   keep their existing styling untouched, same family as each other. */

.pr-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 1rem 2rem;
	border: none;
	border-radius: 0;
	background: var(--pr-accent);
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--pr-duration-mid) var(--pr-ease), transform var(--pr-duration-micro) var(--pr-ease);
}

/* The sweep. z-index:-1 keeps it behind the button's own text content
   (including plain unwrapped text nodes — no markup changes needed) while
   .pr-btn's own isolation:isolate contains that negative stacking so it
   never bleeds through to page content behind the button. Animated via
   transform only (never width/background-position), so it never triggers
   layout or causes jank. */
.pr-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #fff;
	transform: translateX(-100%);
	transition: transform var(--pr-duration-mid) var(--pr-ease);
}

.pr-btn:hover,
.pr-btn:focus-visible {
	color: var(--pr-accent);
}
.pr-btn:hover::before,
.pr-btn:focus-visible::before {
	transform: translateX(0);
}

.pr-btn:focus-visible {
	outline: 2px solid var(--pr-accent);
	outline-offset: 3px;
}

.pr-btn:active {
	transform: scale(0.98);
}

/* Secondary (outline) variant — e.g. "View Property" sitting next to a
   primary .pr-btn. Same shape language (boxy, roomy) but inverted colors
   at rest, so it still reads as the lesser of two actions; sweeps to a
   filled red state on hover, mirroring the primary's white sweep. */
.pr-btn--secondary {
	background: var(--pr-surface);
	color: var(--pr-accent);
	border: 1px solid var(--pr-accent-border);
}
.pr-btn--secondary::before {
	background: var(--pr-accent);
}
.pr-btn--secondary:hover,
.pr-btn--secondary:focus-visible {
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.pr-btn,
	.pr-btn::before {
		transition: none;
	}
	.pr-btn:active {
		transform: none;
	}
}