/* Register block: typography and spacing inside the shared auth-split card. */

/* Lock the column row to the viewport so both sides stay fully visible.
   The form column scrolls internally if its content grows taller than the
   viewport — same pattern as the subscription-details block. The aside is
   already overflow: hidden in auth-split-layout, so its absolutely-positioned
   chrome (back button, support, copyright) stays pinned to its edges.
   Applies to both .register and .activate-subscription (both wrappers carry
   the .register class and host .register__columns inside). */
.register .register__columns {
	height: 100vh;
	height: 100dvh;
	min-height: 0;
}

body.admin-bar .register .register__columns {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

.register__information-card {
	max-height: calc(100vh - 180px);
	display: flex;
	flex-direction: column;
	/* Outer blijft overflow hidden (auth-split) zodat ::after-gradient en hoeken kloppen. */
}

body.admin-bar .register__information-card {
	max-height: calc(100vh - 212px);
}

.register__information-card-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.register .register__side--form {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	flex: 0 1 960px;
	min-height: 0;
	height: 100%;
	max-width: 960px;
	padding-top: 96px;
	padding-bottom: 76px;
	overflow: hidden;
}

/* 992px and up: the form column can grow to 960px, which near ~992px squeezes
   the aside ("sidebar") down to a sliver. Give the aside a minimum width so it
   stays a proper panel; the form column (flex-shrink:1) gives up the space. */
@media (min-width: 992px) {
	.register .register__side--aside {
		min-width: 420px;
	}
}

.register__form-wrapper {
	position: relative;
	z-index: 3;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex-shrink: 1;
	width: 100%;
	max-width: min(750px, calc(100% - 210px));
	min-width: 0;
	min-height: 0;
	max-height: 100%;
	margin-top: auto;
	margin-bottom: auto;
	padding: 35px 48px 48px;
	border-radius: 16px;
	background: #fff;
	border: 2px solid var(--gray-100);
	overflow: hidden;
}

/* <=1299px: tighter side gutters for the form card (50px each side). */
@media (max-width: 1299px) {
	.register__form-wrapper {
		max-width: min(750px, calc(100% - 100px));
	}
}

/* Inner wrapper does the scrolling so the outer card keeps its 35/48/48
   padding visible at all times — same pattern as activate-subscription. */
.register__form-wrapper-inner {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.register__form-heading {
	margin: 0 0 28px;
	font-size: 32px;
	line-height: 42px;
	font-weight: 400;
	color: var(--secondary-700);
}

.register__steps {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.register__step {
	margin: 0;
	min-width: 0;
}

.register .step_footer {
	box-sizing: border-box;
	margin-top: 51px;
	width: 100%;
	min-width: 0;
}

.register .step_footer__actions {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Previous links; save + CTA blijven samen rechts (ook stap 1: save is eerste kind → margin-left: auto). */
.register .step_footer__actions > .register__save-btn {
	margin-left: auto;
}

/* Save-knop tijdelijk uit: zorg dat de submit alleen alsnog rechts staat. */
.register .step_footer__actions > .register__submit:only-child {
	margin-left: auto;
}

.register .register__save-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px;
	border: 2px solid var(--gray-100);
	border-radius: 8px;
	background: #fff;
	color: var(--gray-100);
	cursor: pointer;
	font: inherit;
	line-height: 0;
	flex-shrink: 0;
}

.register .register__save-btn:hover {
	border-color: var(--primary-400);
	color: var(--primary-400);
	background: #fff;
}

.register .register__save-btn:active {
	border-color: var(--primary-500);
	color: var(--primary-500);
}

.register .register__save-btn:focus-visible {
	outline: 2px solid var(--primary-500);
	outline-offset: 2px;
}

.register .register__save-btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.75;
}

.register .register__save-btn-icon {
	display: inline-flex;
	line-height: 0;
}

.register .register__save-btn-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.register .register__step-back {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 22px;
	flex-shrink: 0;
	text-align: left;
	box-shadow: none;
	transition: none;
}

.register .register__step-back:hover,
.register .register__step-back:focus {
	background: transparent;
	border-color: transparent;
	color: inherit;
	box-shadow: none;
}

.register .register__step-back:focus-visible {
	outline: 2px solid var(--primary-500);
	outline-offset: 2px;
}

.register .register__step-back-icon-wrap {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 8px;
	background-color: var(--gray-50);
	color: var(--action-dark);
	line-height: 0;
}

.register .register__step-back-icon-wrap svg {
	display: block;
	width: 24px;
	height: 24px;
}

.register .register__step-back-label {
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: var(--gray-300);
	white-space: nowrap;
}

.register .register__step-back:hover .register__step-back-label,
.register .register__step-back:focus .register__step-back-label {
	color: var(--gray-300);
}

.register .register__step-back:hover .register__step-back-icon-wrap,
.register .register__step-back:focus .register__step-back-icon-wrap {
	background-color: var(--gray-50);
	color: var(--action-dark);
}

.register .register__submit.step_button {
	flex: 0 1 320px;
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

.register .register__submit {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-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.25;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.register .register__submit:hover {
	background: var(--primary-300);
	color: var(--surface-page);
}

.register .register__submit:focus-visible {
	outline: 2px solid var(--primary-500);
	outline-offset: 2px;
}

/* Submit button busy state: hide the text label, swap in the spinner. */
.register__submit-label {
	display: inline-block;
}

.register__submit-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: claryss-register-spin 0.7s linear infinite;
}

.register .register__submit[aria-busy="true"] {
	cursor: progress;
}

.register .register__submit[aria-busy="true"] .register__submit-label {
	display: none;
}

.register .register__submit[aria-busy="true"] .register__submit-spinner {
	display: inline-block;
}

.register__form[aria-busy="true"] {
	opacity: 0.85;
}

@keyframes claryss-register-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Form-level message (mirror sign-in__message). Single envelope, no per-field
   errors — server-side validation returns one message at a time. */
.register__message {
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 22px;
	color: var(--secondary-700);
}

.register__message[hidden] {
	display: none;
}

/* Footer variant — rendered inside .step_footer below the action buttons so
   save feedback appears next to the Save button instead of at the top of the
   form (which is typically scrolled out of view by the time the user saves). */
.register__message--footer {
	margin: 16px 0 0;
}

/* Confirmation panel — shown by JS after a successful submit, replacing
   the form section. The heading reuses the form-wrapper's H1 typography. */
.register__confirmation {
	margin: 0 0 16px;
	color: var(--secondary-700);
}

.register__confirmation[hidden] {
	display: none;
}

.register__confirmation:focus {
	outline: none;
}

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

.register__confirmation-heading {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--secondary-700);
}

.register__confirmation-body {
	font-size: 14px;
	line-height: 22px;
	color: var(--secondary-700);
}

.register__confirmation-body > *:first-child {
	margin-top: 0;
}

.register__confirmation-body > *:last-child {
	margin-bottom: 0;
}

.register__message--error {
	border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
	background: color-mix(in srgb, var(--red) 12%, #fff);
}

.register__message--success {
	border: 1px solid color-mix(in srgb, var(--primary-400) 45%, transparent);
	background: color-mix(in srgb, var(--primary-400) 12%, #fff);
}

.register__message:focus {
	outline: none;
}

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

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

.register__step-heading {
	margin: 0 0 2px;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--secondary-700);
}

.register__step-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.register .form_row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}

/* Row with a short .form_remark next to a field: align the remark to
   the bottom so it sits on the same baseline as the field's input. */
.register .form_row--remark {
	align-items: flex-end;
}

.register .form_col {
	box-sizing: border-box;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	/* No flex gap here on purpose: password managers (LastPass, 1Password)
	   inject a 0×0 sibling element after each input, which combined with a
	   column gap would add empty space below the field. Label-to-input
	   spacing is owned by the label's own margin-bottom below. */
}

@media (max-width: 540px) {
	.register .form_col {
		flex: 1 1 100%;
	}

	.register .form_col:empty {
		display: none;
	}
}

.register .form_remark {
	margin: 0;
	font-size: 13px;
	line-height: 22px;
	color: var(--gray-300);
}

.register__field-label {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	color: var(--secondary-700);
}

.register .form_section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.register__section-label {
	display: block;
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	color: var(--secondary-700);
	cursor: pointer;
}

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

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

.register__input:focus {
	outline: none;
	border-color: var(--primary-450);
}

/* Trailing icon system: combine .register__input--icon (sizes + reserves
   space) with one of the .register__input--icon-* modifiers (sets the icon
   image). To add a new icon, drop in another modifier with its data URI. */
.register__input--icon {
	padding-right: 43px;
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 20px 20px;
}

.register__input--icon-user {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 5.25C11.6562 5.25 13 6.59375 13 8.25C13 9.90625 11.6562 11.25 10 11.25C8.34375 11.25 7 9.90625 7 8.25C7 6.59375 8.34375 5.25 10 5.25ZM10 9.75C10.8125 9.75 11.5 9.09375 11.5 8.25C11.5 7.4375 10.8125 6.75 10 6.75C9.15625 6.75 8.5 7.4375 8.5 8.25C8.5 9.09375 9.15625 9.75 10 9.75ZM10 2.25C14.2812 2.25 17.75 5.71875 17.75 10C17.75 14.2812 14.2812 17.75 10 17.75C5.71875 17.75 2.25 14.2812 2.25 10C2.25 5.71875 5.71875 2.25 10 2.25ZM10 16.25C11.5312 16.25 12.9687 15.6875 14.0625 14.75C13.5937 14.0312 12.7812 13.5625 11.875 13.5312C11.2187 13.7187 10.5937 13.8125 10 13.8125C9.375 13.8125 8.75 13.7187 8.09375 13.5312C7.1875 13.5312 6.375 14.0312 5.90625 14.75C7 15.6875 8.4375 16.25 10 16.25ZM15.0625 13.625C15.8125 12.625 16.25 11.375 16.25 10C16.25 6.5625 13.4375 3.75 10 3.75C6.53125 3.75 3.75 6.5625 3.75 10C3.75 11.375 4.15625 12.625 4.90625 13.625C5.65625 12.6562 6.84375 12 8.1875 12C8.5 12 9 12.3125 10 12.3125C10.9687 12.3125 11.4687 12 11.7812 12C13.125 12 14.3125 12.6562 15.0625 13.625Z' fill='%23828393'/%3E%3C/svg%3E");
}

.register__input--icon-email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.0937 4.375C16.8555 4.375 17.5 5.01953 17.5 5.78125V14.2187C17.5 15.0098 16.8555 15.625 16.0937 15.625H3.90625C3.11523 15.625 2.5 15.0098 2.5 14.2187V5.78125C2.5 5.01953 3.11523 4.375 3.90625 4.375H16.0937ZM16.0937 5.78125H3.90625V6.98242C4.55078 7.53906 5.60547 8.35937 7.83203 10.1172C8.33008 10.498 9.29687 11.4355 10 11.4062C10.6738 11.4355 11.6406 10.498 12.1387 10.1172C14.3652 8.35937 15.4199 7.53906 16.0937 6.98242V5.78125ZM3.90625 14.2187H16.0937V8.79883C15.4199 9.32617 14.4531 10.0879 13.0176 11.2305C12.3437 11.7285 11.2305 12.8418 10 12.8125C8.74023 12.8418 7.59766 11.7285 6.95312 11.2305C5.51758 10.0879 4.55078 9.32617 3.90625 8.79883V14.2187Z' fill='%23828393'/%3E%3C/svg%3E");
}

.register__input--icon-phone {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.6797 12.168C17.1484 12.373 17.5 12.8711 17.5 13.4277C17.5 13.5156 17.4707 13.6035 17.4414 13.7207L16.8262 16.4746C16.6797 17.0605 16.1523 17.5 15.5078 17.5C8.33008 17.5293 2.5 11.6992 2.5 4.49219C2.5 3.84766 2.93945 3.32031 3.52539 3.17383L6.2793 2.55859C6.39648 2.5293 6.48437 2.5 6.57227 2.5C7.12891 2.5 7.62695 2.85156 7.83203 3.32031L9.0918 6.30859C9.15039 6.45508 9.20898 6.63086 9.20898 6.83594C9.20898 7.24609 9.00391 7.62695 8.71094 7.86133L7.53906 8.82812C8.38867 10.3809 9.61914 11.6113 11.1719 12.4609L12.1387 11.2891C12.373 10.9961 12.7539 10.791 13.1641 10.791C13.3691 10.791 13.5449 10.8496 13.6914 10.9082L16.6797 12.168ZM15.4492 16.123L16.0645 13.457L13.1934 12.2266L11.5527 14.2187C8.65234 12.8418 7.1582 11.3477 5.78125 8.44727L7.77344 6.80664L6.54297 3.93555L3.90625 4.55078C3.93555 10.9082 9.0918 16.0937 15.4492 16.123Z' fill='%23828393'/%3E%3C/svg%3E");
}

/* Confirmations + Newsletter checkbox sections.
   Headings reuse .register__section-label typography; only the colour and
   bottom spacing are overridden here. */
.register .register__confirm-section,
.register .register__newsletter-section {
	gap: 0;
}

.register__confirm-heading,
.register__newsletter-heading {
	margin: 0 0 8px;
	color: var(--surface-card-light);
}

/* Step-body provides a 24px flex gap between siblings; we want only 16px
   between the confirmations and newsletter section, so subtract 8px. */
.register__newsletter-section {
	margin-top: -8px;
}

.register__confirm-row,
.register__newsletter-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	cursor: pointer;
}

/* Custom checkbox visuals — 20px square, --secondary-700 outline when
   unchecked, --primary-400 fill with check glyph when checked. */
.register__confirm-input,
.register__newsletter-input {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.1562 3.4375C15.918 3.4375 16.5625 4.08203 16.5625 4.84375V15.1562C16.5625 15.9473 15.918 16.5625 15.1562 16.5625H4.84375C4.05273 16.5625 3.4375 15.9473 3.4375 15.1562V4.84375C3.4375 4.08203 4.05273 3.4375 4.84375 3.4375H15.1562ZM14.9805 15.1562C15.0684 15.1562 15.1562 15.0977 15.1562 14.9805V5.01953C15.1562 4.93164 15.0684 4.84375 14.9805 4.84375H5.01953C4.90234 4.84375 4.84375 4.93164 4.84375 5.01953V14.9805C4.84375 15.0977 4.90234 15.1562 5.01953 15.1562H14.9805Z' fill='%2305081F'/%3E%3C/svg%3E") center / contain no-repeat;
	cursor: pointer;
}

.register__confirm-input:checked,
.register__newsletter-input:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.1562 16.5625H4.84375C4.05273 16.5625 3.4375 15.9473 3.4375 15.1562V4.84375C3.4375 4.08203 4.05273 3.4375 4.84375 3.4375H15.1562C15.918 3.4375 16.5625 4.08203 16.5625 4.84375V15.1562C16.5625 15.9473 15.918 16.5625 15.1562 16.5625ZM9.15039 13.6914L14.541 8.30078C14.7168 8.125 14.7168 7.83203 14.541 7.65625L13.8672 6.98242C13.6914 6.80664 13.3984 6.80664 13.2227 6.98242L8.82812 11.377L6.74805 9.32617C6.57227 9.15039 6.2793 9.15039 6.10352 9.32617L5.42969 10C5.25391 10.1758 5.25391 10.4688 5.42969 10.6445L8.47656 13.6914C8.65234 13.8965 8.97461 13.8965 9.15039 13.6914Z' fill='%2363E3D3'/%3E%3C/svg%3E");
}

.register__confirm-input:focus-visible,
.register__newsletter-input:focus-visible {
	outline: 2px solid var(--primary-500);
	outline-offset: 2px;
}

.register__confirm-label,
.register__newsletter-label {
	font-size: 14px;
	line-height: 22px;
	color: var(--secondary-700);
}

.register__select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 48px;
	padding: 0 40px 0 14px;
	border: 1px solid var(--secondary-200);
	border-radius: 10px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235C5C6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font: inherit;
	color: var(--secondary-700);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.register__select:focus {
	outline: none;
	border-color: var(--primary-450);
}

.register__select:invalid {
	color: var(--secondary-200);
}

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

.register__tab-list {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.register__tab-list-item {
	position: relative;
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 16px;
	line-height: 28px;
	font-weight: 700;
	color: #fff;
}

.register__tab-list-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary-400);
}

.register__tab-list-item + .register__tab-list-item {
	margin-top: 8px;
}

.register__tab-contents {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

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

.register__tab-panel > *:first-child {
	margin-top: 0;
}

.register__tab-panel > *:last-child {
	margin-bottom: 0;
}

.register__tab-panel a {
	color: var(--primary-400);
	font-weight: 700;
	text-decoration: none;
}

.register__tab-panel a:hover {
	text-decoration: underline;
}

.register__tab-panel p {
	margin: 0 0 1em;
}

.register__tab-panel ul,
.register__tab-panel ol {
	margin: 0 0 1em;
	padding-left: 1.25rem;
}

/* <=991px: stack the two columns (welcome/marketing aside drops below the
   form), same as the sign-in page. Register uses a fixed-viewport-height +
   internal-scroll pattern, so we switch to natural height + normal page
   scrolling. The shared .sign-in__back / .sign-in__aside-bottom are already
   re-flowed by auth-split-layout.css. Also covers the activate-subscription
   page, which reuses the .register layout. */
@media (max-width: 991px) {
	.register .register__columns {
		flex-direction: column;
		height: auto;
		min-height: 100vh;
	}

	body.admin-bar .register .register__columns {
		height: auto;
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	}

	.register .register__columns .register__side {
		flex: none;
	}

	/* Form side: content height, full width, no internal scroll. */
	.register .register__side--form {
		height: auto;
		min-height: auto;
		max-width: 100%;
		overflow: visible;
	}

	.register .register__form-wrapper {
		max-width: calc(100% - 60px);
		max-height: none;
		margin-top: 0;
		margin-bottom: 0;
		overflow: visible;
	}

	.register .register__form-wrapper-inner {
		overflow-y: visible;
	}

	/* Aside drops below and flows its content. */
	.register .register__side--aside {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: auto;
		padding: 24px 30px 40px;
	}

	.register__information-card,
	body.admin-bar .register__information-card {
		position: static;
		transform: none;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
		min-height: auto;
		max-height: none;
		margin: 0;
	}

	.register__information-card-body {
		overflow: visible;
	}
}