/* XpertLab Form Blocks — public styles
   All colors/fonts/sizes come from CSS variables injected per-instance
   from the block's saved design, so the structural rules below never
   need to hardcode a design value. */

/* Geometry mirrors the FAQ section exactly, so the card and the FAQ block line
   up on every screen: an outer box capped at 1600px and auto-centred
   (.xfaq-section), with a 24px inner gutter (.xfaq-container). The card then
   fills that box. Previously .xfb-wrapper had no max-width of its own, so the
   card was centred against whatever column the theme happened to give it
   rather than against the same 1600px rail the FAQ uses. */
.xfb-wrapper {
	width: 100%;
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	/* side gutter so the card lines up with the other sections on <1600 screens */
	padding: 0 24px;
}
.xfb-wrapper *,
.xfb-wrapper *::before,
.xfb-wrapper *::after {
	box-sizing: border-box;
}

.xfb-card {
	width: 100%;
	max-width: var(--xfb-max-width, 1600px);
	margin: 0 auto;
	background: var(--xfb-container-bg, #fff);
	border-radius: var(--xfb-container-radius, 40px);
	box-shadow: var(--xfb-container-shadow, 0px 0px 25px 1px rgba(0,0,0,0.05));
	padding: 44px 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 56px;
}

/* Left column — badge, title, description */
.xfb-left {
	flex: 1 1 360px;
	max-width: 480px;
	display: flex;
	flex-direction: column;
}

.xfb-badge {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	min-height: 57px;
	height: auto;
	padding: 10px 30px;
	border-radius: var(--xfb-badge-radius, 160px);
	background: linear-gradient(var(--xfb-badge-grad-deg, 94.83deg), var(--xfb-badge-grad-1, #35B6FF), var(--xfb-badge-grad-2, #1877F2));
	margin-bottom: 28px;
}

.xfb-badge span {
	font-family: var(--xfb-body-font, sans-serif);
	font-weight: 600;
	font-size: var(--xfb-badge-font-size, 20px);
	line-height: 1.3;
	color: var(--xfb-badge-text, #FFFFFF);
	/* wrap a longer badge label instead of overflowing the pill / its column */
	white-space: normal;
	text-align: center;
	overflow-wrap: anywhere;
}

.xfb-title {
	font-family: var(--xfb-title-font, 'Syne', sans-serif);
	font-weight: 700;
	font-size: var(--xfb-title-size, 36px);
	line-height: 1.15;
	color: var(--xfb-title-color, #191919);
	margin: 0 0 20px 0;
}

.xfb-description {
	font-family: var(--xfb-body-font, sans-serif);
	font-weight: 400;
	font-size: var(--xfb-description-size, 22px);
	line-height: 1.3;
	color: var(--xfb-description-color, #778AA9);
	margin: 0;
}

/* Right column — the form itself */
.xfb-right {
	flex: 1 1 500px;
	max-width: 667px;
}

.xfb-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.xfb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.xfb-field-full {
	grid-column: 1 / -1;
}

/* While a dropdown is open, lift its whole grid item above sibling fields.
   Each .xfb-field forms its own stacking context (reveal transform / will-change),
   so the menu's own z-index can't escape it — the field itself must be raised. */
.xfb-field.xfb-field-dropdown-open {
	position: relative;
	z-index: 100;
}

.xfb-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.xfb-label {
	font-family: var(--xfb-body-font, sans-serif);
	font-weight: 500;
	font-size: var(--xfb-label-size, 16px);
	color: var(--xfb-label-color, #191919);
}

.xfb-required {
	color: var(--xfb-required-color, #FF4B4B);
	margin-left: 2px;
}

.xfb-input-wrap {
	position: relative;
	display: flex !important;
	align-items: center !important;
	background: var(--xfb-input-bg, #FAFAFA);
	border-radius: var(--xfb-input-radius, 52px);
	height: 58px;
	padding: 0 22px;
	gap: 14px;
}

.xfb-input-wrap.xfb-textarea-wrap {
	border-radius: var(--xfb-textarea-radius, 22px);
	height: auto;
	align-items: flex-start;
	padding: 20px 22px 18px;
}

.xfb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	color: var(--xfb-icon-color, #191919);
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	line-height: 0;
}

.xfb-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.xfb-icon-arrow {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	transition: transform 0.2s ease;
	pointer-events: none;
}

.xfb-input-wrap.xfb-dropdown-active .xfb-icon-arrow {
	transform: translateY(-50%) rotate(180deg);
}

.xfb-input-wrap input[type="text"],
.xfb-input-wrap input[type="email"],
.xfb-input-wrap input[type="tel"],
.xfb-input-wrap select,
.xfb-input-wrap textarea {
	flex: 1 !important;
	height: 100% !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-family: var(--xfb-body-font, sans-serif) !important;
	font-weight: 400 !important;
	font-size: var(--xfb-placeholder-size, 14px) !important;
	line-height: 1.4 !important;
	color: var(--xfb-input-text, #191919) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Neutralize the browser autofill background — repaint the input with the
   wrap's own background colour via a full-cover inset box-shadow so autofilled
   fields look identical to normal ones (see .xfb-input-wrap background). */
.xfb-input-wrap input:-webkit-autofill,
.xfb-input-wrap input:-webkit-autofill:hover,
.xfb-input-wrap input:-webkit-autofill:focus,
.xfb-input-wrap input:-webkit-autofill:active,
.xfb-input-wrap textarea:-webkit-autofill,
.xfb-input-wrap select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--xfb-input-bg, #FAFAFA) inset !important;
	        box-shadow: 0 0 0 1000px var(--xfb-input-bg, #FAFAFA) inset !important;
	-webkit-text-fill-color: var(--xfb-input-text, #191919) !important;
	caret-color: var(--xfb-input-text, #191919) !important;
	transition: background-color 100000s ease-in-out 0s !important;
}

.xfb-input-wrap input,
.xfb-input-wrap select,
.xfb-input-wrap textarea,
.xfb-dropdown-trigger,
.xfb-input-wrap input:hover,
.xfb-input-wrap input:focus,
.xfb-input-wrap select:hover,
.xfb-input-wrap select:focus,
.xfb-input-wrap textarea:hover,
.xfb-input-wrap textarea:focus,
.xfb-dropdown-trigger:hover,
.xfb-dropdown-trigger:focus,
.xfb-dropdown-trigger:focus-visible {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
}

.xfb-input-wrap textarea {
	height: auto !important;
	resize: none;
	min-height: 150px;
	line-height: 1.5 !important;
	padding-top: 2px !important;
}

.xfb-input-wrap select.xfb-select {
	padding-right: 24px;
	cursor: pointer;
}

.xfb-input-wrap input::placeholder,
.xfb-input-wrap textarea::placeholder {
	color: var(--xfb-placeholder-color, #778AA9);
	font-size: var(--xfb-placeholder-size, 14px);
	font-family: var(--xfb-body-font, sans-serif);
	line-height: 1.5;
	opacity: 1;
}

.xfb-input-wrap select:invalid {
	color: var(--xfb-placeholder-color, #778AA9);
}

/* Visually hide the native <select> once it's been swapped for the custom
   dropdown below — it stays in the DOM so its name/value still submits. */
select.xfb-select.xfb-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.xfb-dropdown-trigger {
	flex: 1 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	background: transparent !important;
	font-family: var(--xfb-body-font, sans-serif) !important;
	font-weight: 400 !important;
	font-size: var(--xfb-placeholder-size, 14px) !important;
	line-height: 1.4 !important;
	text-align: left !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
}

.xfb-dropdown-trigger::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.xfb-dropdown-trigger,
.xfb-dropdown-trigger:hover,
.xfb-dropdown-trigger:focus,
.xfb-dropdown-trigger:focus-visible,
.xfb-dropdown-trigger:active {
	color: var(--xfb-input-text, #191919) !important;
}

.xfb-dropdown-trigger.xfb-dropdown-placeholder,
.xfb-dropdown-trigger.xfb-dropdown-placeholder:hover,
.xfb-dropdown-trigger.xfb-dropdown-placeholder:focus,
.xfb-dropdown-trigger.xfb-dropdown-placeholder:focus-visible,
.xfb-dropdown-trigger.xfb-dropdown-placeholder:active {
	color: var(--xfb-placeholder-color, #778AA9) !important;
}

.xfb-dropdown-trigger:disabled {
	cursor: not-allowed;
}

.xfb-dropdown-label {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xfb-dropdown-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(17, 24, 39, 0.14);
	padding: 8px;
	margin: 0;
	max-height: 260px;
	overflow-y: auto;
	z-index: 100;
}

.xfb-dropdown-menu[hidden] {
	display: none;
}

.xfb-dropdown-option {
	padding: 13px 18px;
	border-radius: 14px;
	font-family: var(--xfb-body-font, sans-serif);
	font-weight: 400;
	font-size: var(--xfb-placeholder-size, 14px);
	color: var(--xfb-input-text, #191919);
	cursor: pointer;
	transition: background 0.15s ease;
}

.xfb-dropdown-option:hover,
.xfb-dropdown-option:focus-visible {
	background: #F1F2F4;
}

.xfb-dropdown-option.xfb-dropdown-option-selected {
	background: #EAEBEE;
	font-weight: 600;
}

/* ==========================
   Submit Button
========================== */

.xfb-submit-btn,
.xfb-submit-btn:link,
.xfb-submit-btn:visited {
	position: relative !important;
	overflow: hidden !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;

	align-self: center !important;
	/* min() so the pill keeps its 348px width on normal screens but can never
	   be forced wider than its container on a narrow phone (a plain min-width
	   would beat max-width:100% and spill out of the card). */
	min-width: min(348px, 100%) !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 74px !important;
	padding: 12px 32px !important;
	margin-top: 8px !important;

	border: none !important;
	outline: none !important;
	border-radius: var(--xfb-btn-radius, 60px) !important;

	background: linear-gradient(var(--xfb-btn-grad-deg, 240.87deg), var(--xfb-btn-grad-1, #EDF8FF), var(--xfb-btn-grad-2, #35B6FF)) !important;

	box-shadow: none !important;

	font-family: var(--xfb-title-font, 'Syne', sans-serif) !important;
	font-weight: 700 !important;
	font-size: var(--xfb-btn-font-size, 22px) !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;

	color: var(--xfb-btn-text, #191919) !important;
	cursor: pointer !important;

	transition: transform .25s ease, filter .25s ease !important;

	-webkit-appearance: none !important;
	appearance: none !important;
}

.xfb-submit-btn span {
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: inherit !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: var(--xfb-btn-text, #191919) !important;
	white-space: normal !important;
	text-align: center !important;
	overflow-wrap: anywhere !important;
}

.xfb-submit-btn svg {
	width: 18px !important;
	height: 14px !important;
	min-width: 18px !important;
	min-height: 14px !important;

	display: block !important;
	flex-shrink: 0 !important;

	color: var(--xfb-btn-text, #191919) !important;
	fill: var(--xfb-btn-text, #191919) !important;
}

.xfb-submit-btn svg path {
	fill: var(--xfb-btn-text, #191919) !important;
}

.xfb-submit-btn:hover,
.xfb-submit-btn:focus,
.xfb-submit-btn:focus-visible,
.xfb-submit-btn:active {
	background: linear-gradient(var(--xfb-btn-grad-deg, 240.87deg), var(--xfb-btn-grad-1, #EDF8FF), var(--xfb-btn-grad-2, #35B6FF)) !important;
	color: var(--xfb-btn-text, #191919) !important;

	border: none !important;
	outline: none !important;
	box-shadow: none !important;

	transform: translateY(-2px) !important;
	filter: brightness(1.03) !important;
	text-decoration: none !important;
}

.xfb-submit-btn:disabled {
	opacity: .6 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

.xfb-submit-btn .xfb-btn-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	transform: scale(0);
	animation: xfb-ripple-anim 0.6s ease-out;
	pointer-events: none;
}

@keyframes xfb-ripple-anim {
	to {
		transform: scale(2.5);
		opacity: 0;
	}
}

.xfb-form-message {
	font-family: var(--xfb-body-font, sans-serif);
	font-size: 15px;
	min-height: 0;
}

.xfb-form-message.xfb-success {
	color: #1AA260;
}

.xfb-form-message.xfb-error {
	color: #E0433C;
}

.xfb-field.xfb-invalid .xfb-input-wrap {
	box-shadow: 0 0 0 2px #E0433C;
}

.xfb-field-error {
	font-family: var(--xfb-body-font, sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: #E0433C;
	margin: 0;
	padding: 0 4px;
}

/* Responsive */

/* Gutters track the FAQ section's (.xfaq-container) at every breakpoint, so the
   two blocks keep the same left/right edges all the way down. */
@media (max-width: 1024px) {
	.xfb-wrapper { padding: 0 40px; }
}
@media (max-width: 768px) {
	.xfb-wrapper { padding: 0 20px; }
}
@media (max-width: 480px) {
	.xfb-wrapper { padding: 0 16px; }
}

/* Tablets (iPad Pro portrait is 1024px, plus iPad Air/Mini, Surface, etc.):
   the side-by-side columns leave the form cramped in the capped-width right
   column, so stack them and let each span the full card width. */
@media (max-width: 1024px) {
	.xfb-card {
		padding: 32px 24px;
		border-radius: 24px;
		gap: 32px;
	}
	.xfb-left {
		max-width: 100%;
		flex-basis: 100%;
	}
	.xfb-right {
		max-width: 100%;
		flex-basis: 100%;
	}
	.xfb-grid {
		grid-template-columns: 1fr;
	}
	.xfb-submit-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.xfb-card {
		padding: 24px 18px;
		border-radius: 18px;
	}
	.xfb-title {
		font-size: 26px;
	}
	.xfb-description {
		font-size: 15px;
	}
	.xfb-badge {
		height: 46px;
		padding: 0 20px;
	}
	.xfb-badge span {
		font-size: 15px;
	}
	.xfb-input-wrap {
		height: 52px;
		padding: 0 16px;
		gap: 10px;
	}
	.xfb-input-wrap.xfb-textarea-wrap {
		padding: 16px;
	}
	.xfb-submit-btn {
		height: 58px;
		font-size: 17px;
		gap: 8px;
	}
}

/* ===========================================================================
   Scroll-reveal entrance — "Field cascade"
   JS arms each wrapper with `.xfb-reveal` ASAP (footer), then adds `.xfb-in`
   once it scrolls into view. Refresh-proof: replays on every load.

   Safety: opacity + transform ONLY — no filter/blur (which would smear the
   bordered `.xfb-input-wrap` fields), no layout shift (transform/opacity do
   not reflow), and the browser-autofill box-shadow rules above are untouched.
   The intro copy fades + rises first, the form fields cascade top-to-bottom,
   and the submit button lands last.
   =========================================================================== */

/* Pre-hidden (armed) state for every animated target. */
.xfb-wrapper.xfb-reveal .xfb-badge,
.xfb-wrapper.xfb-reveal .xfb-title,
.xfb-wrapper.xfb-reveal .xfb-description,
.xfb-wrapper.xfb-reveal .xfb-field {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

/* Intro copy — fades + rises first. */
.xfb-wrapper.xfb-reveal .xfb-badge       { transition-delay: 0.05s; }
.xfb-wrapper.xfb-reveal .xfb-title       { transition-delay: 0.18s; }
.xfb-wrapper.xfb-reveal .xfb-description { transition-delay: 0.31s; }

/* Form fields — cascade top-to-bottom. */
.xfb-wrapper.xfb-reveal .xfb-grid .xfb-field:nth-child(1) { transition-delay: 0.50s; }
.xfb-wrapper.xfb-reveal .xfb-grid .xfb-field:nth-child(2) { transition-delay: 0.62s; }
.xfb-wrapper.xfb-reveal .xfb-grid .xfb-field:nth-child(3) { transition-delay: 0.74s; }
.xfb-wrapper.xfb-reveal .xfb-grid .xfb-field:nth-child(4) { transition-delay: 0.86s; }
.xfb-wrapper.xfb-reveal .xfb-grid .xfb-field:nth-child(5) { transition-delay: 0.98s; }
.xfb-wrapper.xfb-reveal .xfb-grid .xfb-field:nth-child(n+6) { transition-delay: 1.05s; }

/* Submit button — lands last. Its opacity/transform reveal is plain (no
   !important) so the existing `:hover`/`:focus`/`:active` transform lift
   (declared with !important) always wins once the form is settled. */
.xfb-wrapper.xfb-reveal .xfb-submit-btn {
	opacity: 0;
	transform: translateY(28px);
}

/* Slow, delayed reveal timing for the button — applied only while it is idle,
   so the button's own snappy `.25s` hover/focus transition is never
   overridden (its base transition is declared with !important). */
.xfb-wrapper.xfb-reveal .xfb-submit-btn:not(:hover):not(:focus):not(:active) {
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s,
	            transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s !important;
	will-change: opacity, transform;
}

/* Revealed state — everything settles into place. */
.xfb-wrapper.xfb-reveal.xfb-in .xfb-badge,
.xfb-wrapper.xfb-reveal.xfb-in .xfb-title,
.xfb-wrapper.xfb-reveal.xfb-in .xfb-description,
.xfb-wrapper.xfb-reveal.xfb-in .xfb-field,
.xfb-wrapper.xfb-reveal.xfb-in .xfb-submit-btn {
	opacity: 1;
	transform: none;
}

/* Reduced motion — never hide anything; skip the entrance entirely. JS also
   skips arming under reduced-motion, so this is a belt-and-braces fallback. */
@media (prefers-reduced-motion: reduce) {
	.xfb-wrapper.xfb-reveal .xfb-badge,
	.xfb-wrapper.xfb-reveal .xfb-title,
	.xfb-wrapper.xfb-reveal .xfb-description,
	.xfb-wrapper.xfb-reveal .xfb-field,
	.xfb-wrapper.xfb-reveal .xfb-submit-btn,
	.xfb-wrapper.xfb-reveal .xfb-submit-btn:not(:hover):not(:focus):not(:active) {
		opacity: 1;
		transform: none;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------------
   Security check (arithmetic captcha)
   Full-width row, but the control itself stays narrow — the answer is only
   ever 1–3 characters, so a full-width input would look out of place.
   ------------------------------------------------------------------------ */
.xfb-captcha-field {
	max-width: 380px;
}

/* The spare-challenge payload. Browsers already hide <script>, but .xfb-field
   is a flex container with a gap — an errant theme reset that made scripts
   visible would add a phantom row here. */
.xfb-captcha-pool {
	display: none !important;
}

.xfb-captcha-wrap {
	gap: 10px !important;
	padding-right: 10px !important;
}

.xfb-captcha-question {
	font-family: var(--xfb-body-font, "Google Sans", Arial, sans-serif);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	color: var(--xfb-input-text, #191919);
	white-space: nowrap;
	flex-shrink: 0;
	/* Selecting the digits is pointless and gets in the way on touch. */
	user-select: none;
	-webkit-user-select: none;
}

.xfb-input-wrap input.xfb-captcha-answer {
	flex: 0 1 86px !important;
	min-width: 56px !important;
	width: 86px !important;
	/* Left, not centre: a centred input puts the caret in the MIDDLE of the
	   box before anything is typed, which reads as a stray cursor floating in
	   the field. Left-aligned, it sits where every other field's does. */
	text-align: left !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: 1px !important;
}

/* Themes style every <button>, so this needs the same !important treatment
   as the submit button above. */
.xfb-captcha-refresh,
.xfb-captcha-refresh:link,
.xfb-captcha-refresh:visited,
.xfb-captcha-refresh:hover,
.xfb-captcha-refresh:focus,
.xfb-captcha-refresh:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--xfb-icon-color, #191919) !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-webkit-tap-highlight-color: transparent !important;
	line-height: 0 !important;
	/* No `transform` in the transition: the icon must only move on a real
	   click, never on hover (see .xfb-spinning below). */
	transition: background-color .2s ease !important;
}

.xfb-captcha-refresh::before,
.xfb-captcha-refresh::after {
	display: none !important;
	content: none !important;
}

/* Hover gives feedback with the background circle ONLY — the icon stays put. */
.xfb-captcha-refresh:hover {
	background-color: rgba(25, 25, 25, 0.06) !important;
}

.xfb-captcha-refresh svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}

/* Click → one full turn. The class is added on click and removed on
   animationend by public-script.js, so every click replays it. Applied to the
   SVG rather than the button so the hover circle never rotates with it. */
@keyframes xfb-captcha-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

.xfb-captcha-refresh.xfb-spinning svg {
	animation: xfb-captcha-spin .5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
	.xfb-captcha-refresh.xfb-spinning svg {
		animation: none !important;
	}
}