.sign-in__welcome-title {
	margin: 0 0 20px;
	font-size: 32px;
	line-height: 42px;
	font-weight: 400;
	color: var(--text-headings);
}

.sign-in__welcome-text {
	font-size: 14px;
	line-height: 22px;
	color: rgba(255, 255, 255, 0.92);
}

.sign-in__welcome-text > *:first-child {
	margin-top: 0;
}

.sign-in__welcome-text > *:last-child {
	margin-bottom: 0;
}

.sign-in .sign-in__side--auth {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	min-height: 100%;
	padding-top: 96px;
	padding-bottom: 76px;
}

.sign-in__login-block {
	position: relative;
	z-index: 3;
	box-sizing: border-box;
	flex-shrink: 0;
	width: 400px;
	max-width: calc(100% - 136px);
	min-width: 0;
	margin-top: auto;
	margin-bottom: auto;
	border-radius: 16px;
	background: #fff;
	border: 2px solid var(--gray-100);
	padding: 40px 40px 55px;
}

.sign-in[data-claryss-auth-view="signin"] .sign-in__panel--forgot,
.sign-in[data-claryss-auth-view="signin"] .sign-in__panel--twofactor {
	display: none;
}

.sign-in[data-claryss-auth-view="forgot"] .sign-in__panel--signin,
.sign-in[data-claryss-auth-view="forgot"] .sign-in__panel--twofactor {
	display: none;
}

.sign-in[data-claryss-auth-view="twofactor"] .sign-in__panel--signin,
.sign-in[data-claryss-auth-view="twofactor"] .sign-in__panel--forgot {
	display: none;
}

/* Set-password view (arrived via registration welcome email reset URL):
   hide every other panel, show only set-password. And in the default views,
   hide the set-password panel. */
.sign-in[data-claryss-auth-view="set-password"] .sign-in__panel--signin,
.sign-in[data-claryss-auth-view="set-password"] .sign-in__panel--twofactor,
.sign-in[data-claryss-auth-view="set-password"] .sign-in__panel--forgot {
	display: none;
}
.sign-in:not([data-claryss-auth-view="set-password"]) .sign-in__panel--set-password {
	display: none;
}

.sign-in__form--forgot .sign-in__field--email + .sign-in__submit,
.sign-in__form--2fa .sign-in__submit,
.sign-in__form--set-password .sign-in__submit {
	margin-top: 24px;
}

/* After lost-password email is sent: only show title + success message. */
.sign-in__panel--forgot-sent .sign-in__form--forgot .sign-in__field,
.sign-in__panel--forgot-sent .sign-in__form--forgot .sign-in__submit {
	display: none;
}

.sign-in__panel--forgot-sent > .sign-in__sign-in-footer {
	display: none;
}

.sign-in__panel--forgot-sent .sign-in__form--forgot .sign-in__message--success {
	margin-bottom: 0;
}

.sign-in__2fa-intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 22px;
	color: var(--secondary-700);
}

.sign-in__2fa-recovery-intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 22px;
	color: var(--secondary-700);
}

.sign-in__panel--2fa-recovery-interstitial .jvh-totp2fa-frontend {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	max-width: none;
	box-shadow: none;
	box-sizing: border-box;
}

/* Zelfde taal als .sign-in__message--success: groene tint, donkere tekst (geen admin notice-warning). */
.sign-in__panel--2fa-recovery-interstitial .jvh-totp2fa-recovery-box--codes-only {
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--primary-400) 45%, transparent);
	background: color-mix(in srgb, var(--primary-400) 12%, #fff);
	color: var(--secondary-700);
}

.sign-in__panel--2fa-recovery-interstitial .jvh-totp2fa-recovery-box--codes-only .jvh-totp2fa-recovery-codes {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 14px;
	line-height: 22px;
	color: var(--secondary-700);
}

.sign-in__panel--2fa-recovery-interstitial .jvh-totp2fa-recovery-box--codes-only .jvh-totp2fa-recovery-codes li {
	margin: 0.35em 0;
}

.sign-in__panel--2fa-recovery-interstitial .jvh-totp2fa-recovery-box--codes-only code {
	font-size: inherit;
	color: var(--secondary-700);
	background: transparent;
}

.sign-in__panel--2fa-recovery-interstitial .jvh-totp2fa-recovery-copy-wrap {
	margin: 14px 0 0;
}

.sign-in__panel--2fa-recovery-interstitial .sign-in__recovery-copy-btn {
	appearance: none;
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 18px;
	border-radius: 8px;
	border: 2px solid var(--primary-400);
	background: #fff;
	color: var(--primary-500);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.sign-in__panel--2fa-recovery-interstitial .sign-in__recovery-copy-btn:hover {
	background: color-mix(in srgb, var(--primary-400) 10%, #fff);
}

.sign-in__panel--2fa-recovery-interstitial .sign-in__recovery-copy-btn:focus-visible {
	outline: 2px solid var(--primary-500);
	outline-offset: 2px;
}

.sign-in__2fa-recovery-continue-wrap {
	margin: 20px 0 0;
}

.sign-in__panel--2fa-recovery-interstitial .sign-in__2fa-recovery-continue-wrap .sign-in__submit {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 18px;
	border: none;
	border-radius: 8px;
	background: var(--primary-400);
	color: var(--surface-page);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.sign-in__panel--2fa-recovery-interstitial .sign-in__2fa-recovery-continue-wrap .sign-in__submit:hover {
	background: var(--primary-300);
	color: var(--surface-page);
}

/* Footer onder CTA: zelfde basis als .sign-in__form + .sign-in__sign-in-footer (20px). */
.sign-in__form--2fa + .sign-in__2fa-footer {
	margin-top: 20px;
}

/* Backup-footer is tweede sibling na het formulier; zelfde 20px als .sign-in__form + .sign-in__sign-in-footer */
.sign-in__2fa-footer--backup:not([hidden]) {
	margin-top: 20px;
}

	.sign-in__2fa-footer {
		font-size: 14px;
		line-height: 22px;
		color: var(--gray-300);
	}

	.sign-in__2fa-footer button.sign-in__footer-forgot {
		display: inline;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		font-size: 14px;
		line-height: 22px;
		font-weight: 700;
		color: var(--primary-500);
		cursor: pointer;
		text-align: left;
		text-decoration: none;
	}

	.sign-in__2fa-footer button.sign-in__footer-forgot:hover {
		text-decoration: underline;
	}

	.sign-in__field--2fa-code .sign-in__input--2fa-code {
		letter-spacing: 0.08em;
	}

	.sign-in__sign-in-title {
		margin: 0 0 14px;
		font-size: 32px;
		line-height: 42px;
		font-weight: 400;
		color: var(--secondary-700);
	}

	.sign-in__message--error {
		box-sizing: border-box;
		margin: 0 0 16px;
		padding: 12px 14px;
		border-radius: 10px;
		border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
		background: color-mix(in srgb, var(--red) 12%, #fff);
		font-size: 14px;
		line-height: 22px;
		color: var(--secondary-700);
	}

	.sign-in__message--error:focus {
		outline: none;
	}

	.sign-in__message--error:focus-visible {
		outline: 2px solid var(--red);
		outline-offset: 2px;
	}

	.sign-in__message--success {
		box-sizing: border-box;
		margin: 0 0 16px;
		padding: 12px 14px;
		border-radius: 10px;
		border: 1px solid color-mix(in srgb, var(--primary-400) 45%, transparent);
		background: color-mix(in srgb, var(--primary-400) 12%, #fff);
		font-size: 14px;
		line-height: 22px;
		color: var(--secondary-700);
	}

	.sign-in__message--success:focus {
		outline: none;
	}

	.sign-in__message--success:focus-visible {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
	}

	.sign-in__field {
		display: block;
		width: 100%;
	}

	.sign-in__field + .sign-in__field {
		margin-top: 20px;
	}

	.sign-in__field--password + .sign-in__field--remember {
		margin-top: 16px;
	}

	.sign-in__remember {
		display: flex;
		align-items: center;
		gap: 7px;
		cursor: pointer;
	}

	.sign-in__checkbox {
		appearance: none;
		-webkit-appearance: none;
		position: relative;
		top: 1px;
		width: 14px;
		height: 14px;
		margin: 0;
		padding: 0;
		flex-shrink: 0;
		border: 0;
		background: transparent url("checkbox-unchecked.svg") center / contain no-repeat;
		cursor: pointer;
	}

	.sign-in__checkbox:checked {
		background-image: url("checkbox-checked.svg");
	}

	.sign-in__checkbox:focus-visible {
		outline: 2px solid var(--primary-500, currentColor);
		outline-offset: 2px;
	}

	.sign-in__remember-text {
		font-size: 14px;
		line-height: 22px;
		color: var(--secondary-700);
	}

	/* Terms-acceptance checkbox (sub-user password-set): text wraps over several
	   lines, so align the box to the first line instead of vertically centring. */
	.sign-in__terms {
		align-items: flex-start;
	}

	.sign-in__terms .sign-in__checkbox {
		top: 4px;
	}

	.sign-in__terms-text a {
		color: var(--primary-500);
		text-decoration: underline;
	}

	.sign-in__terms-text a:hover {
		text-decoration: none;
	}

	.sign-in__field--remember + .sign-in__submit {
		margin-top: 24px;
	}

	.sign-in__submit {
		box-sizing: border-box;
		display: block;
		width: 100%;
		background: var(--primary-400);
		color: var(--surface-page);
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.sign-in__submit:hover {
		background: var(--primary-300);
	}

	.sign-in__input {
		box-sizing: border-box;
		width: 100%;
		height: 48px;
		padding: 0 14px;
		border: 1px solid var(--secondary-200);
		border-radius: 10px;
		background: #fff;
		font: inherit;
	}

	.sign-in__input::placeholder {
		color: var(--secondary-200);
		opacity: 1;
	}

	/* 15px from right edge, 20×20 icon; extra right padding so text clears the icon */
	.sign-in__field--email .sign-in__input {
		padding-right: calc(15px + 20px + 10px);
		background-color: #fff;
		background-image: url("email-icon.svg");
		background-repeat: no-repeat;
		background-position: right 15px center;
		background-size: 20px 20px;
	}

	.sign-in__field--password .sign-in__input {
		padding-right: calc(15px + 20px + 10px);
		background-color: #fff;
		background-image: url("password-icon.svg");
		background-repeat: no-repeat;
		background-position: right 15px center;
		background-size: 20px 20px;
	}

	.sign-in__form + .sign-in__sign-in-footer {
		margin-top: 20px;
	}

	.sign-in__sign-in-footer {
		font-size: 14px;
		line-height: 22px;
		color: var(--gray-300);
	}

	.sign-in__footer-forgot,
	.sign-in__footer-register,
	.sign-in__footer-back {
		font-weight: 700;
		color: var(--primary-500);
		cursor: pointer;
		text-decoration: none;
	}

	.sign-in__footer-forgot:hover,
	.sign-in__footer-register:hover,
	.sign-in__footer-back:hover {
		color: var(--primary-500);
		text-decoration: underline;
	}

	/* Mandatory TOTP setup (JVH 2FA shortcode): same card as other panels, geen dubbele “doos” */
	.sign-in__panel--mandatory-2fa {
		width: 100%;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend {
		border: 0;
		background: transparent;
		padding: 0;
		margin: 0;
		max-width: none;
		box-shadow: none;
		box-sizing: border-box;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .jvh-totp2fa-profile {
		border: 0;
		padding: 0;
		margin: 0;
		max-width: none;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend h2#jvh-totp2fa {
		margin: 0 0 14px;
		font-size: 32px;
		line-height: 42px;
		font-weight: 400;
		color: var(--secondary-700);
	}

	/* QR-bevestigingsstap: compacter, meer ruimte voor instructies + codeveld */
	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend--qr-step h2#jvh-totp2fa {
		margin-bottom: 10px;
		font-size: 26px;
		line-height: 34px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend--qr-step .jvh-totp2fa-profile > p:has(> strong) {
		margin-bottom: 6px;
		line-height: 1.35;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .description {
		margin: 0 0 20px;
		font-size: 14px;
		line-height: 22px;
		color: var(--secondary-700);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .notice {
		box-sizing: border-box;
		margin: 0 0 16px;
		padding: 12px 14px;
		border-radius: 10px;
		border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
		background: color-mix(in srgb, var(--red) 10%, #fff);
		font-size: 14px;
		line-height: 22px;
		color: var(--secondary-700);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .notice.notice-success {
		border-color: color-mix(in srgb, var(--primary-400) 45%, transparent);
		background: color-mix(in srgb, var(--primary-400) 12%, #fff);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .notice p {
		margin: 0;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend p {
		margin: 0 0 16px;
		font-size: 14px;
		line-height: 22px;
		color: var(--secondary-700);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend p:last-child {
		margin-bottom: 0;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend label {
		display: block;
		font-size: 14px;
		line-height: 22px;
		color: var(--secondary-700);
		margin-bottom: 8px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .jvh-totp2fa-confirm-code {
		margin: 0 0 16px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .jvh-totp2fa-confirm-code label {
		margin-bottom: 10px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend input.regular-text {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		height: 48px;
		padding: 0 14px;
		border: 1px solid var(--secondary-200);
		border-radius: 10px;
		background: #fff;
		font: inherit;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend input.regular-text::placeholder {
		color: var(--secondary-200);
		opacity: 1;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend p.submit {
		margin-top: 24px;
		margin-bottom: 0;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .button,
	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend input[type="submit"].button {
		box-sizing: border-box;
		display: block;
		width: 100%;
		margin: 0;
		padding: 14px 18px;
		border-radius: 10px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		text-align: center;
		cursor: pointer;
		text-decoration: none;
		transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .button.button-primary,
	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend input[type="submit"].button-primary {
		border: none;
		background: var(--primary-400);
		color: var(--surface-page);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .button.button-primary:hover,
	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend input[type="submit"].button-primary:hover {
		background: var(--primary-300);
		color: var(--surface-page);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .button.button-secondary {
		border: 2px solid var(--primary-400);
		background: transparent;
		color: var(--primary-500);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .button.button-secondary:hover {
		background: color-mix(in srgb, var(--primary-400) 12%, #fff);
		color: var(--primary-500);
	}

	/* wp-admin default: <a class="button"> zonder -primary/-secondary (o.a. “Cancel setup” naast primary) */
	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend a.button:not(.button-primary):not(.button-secondary) {
		border: 2px solid var(--primary-400);
		background: transparent;
		color: var(--primary-500);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend a.button:not(.button-primary):not(.button-secondary):hover {
		background: color-mix(in srgb, var(--primary-400) 12%, #fff);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend p:has(a.button + a.button) {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend p:has(a.button + a.button) .button {
		margin-top: 0;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend a:not(.button) {
		font-weight: 700;
		color: var(--primary-500);
		text-decoration: none;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend a:not(.button):hover {
		text-decoration: underline;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .jvh-totp2fa-qr {
		margin: 12px 0 20px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend .jvh-totp2fa-qr svg {
		max-width: 220px;
		width: 100%;
		height: auto;
		display: block;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend--qr-step .jvh-totp2fa-qr {
		margin: 8px 0 14px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend--qr-step .jvh-totp2fa-qr svg {
		max-width: 148px;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-frontend code {
		font-size: 14px;
		word-break: break-all;
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-recovery-box {
		margin: 0 0 20px;
		padding: 14px 16px;
		border-radius: 10px;
		border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
		background: color-mix(in srgb, var(--red) 8%, #fff);
	}

	.sign-in__panel--mandatory-2fa .jvh-totp2fa-recovery-box .jvh-totp2fa-recovery-codes {
		margin: 10px 0 12px 1.25rem;
	}