:root {
	/* Layout */
	--content-width: 850px;
	--spacing-between-elements: 20px;
	--modal-padding: 30px;
	--border-radius: 8px;
	--input-height: 37px;

	/* Shadows */
	--shadow-sm: 0 2px 5px 0 rgba(0, 0, 0, .1);
	--shadow-focus: 0 0 0 2px rgba(7, 144, 232, .2);

	/* Transitions */
	--transition-default: all 150ms ease-in-out;

	/* Typography */
	--font-size-normal: 16px;
	--font-size-title: 25px;

	/* Colors */
	--main-color: #0790e8;
	--main-color-hover: #067fcd;
	--font-color: #343434;
	--font-color-secondary: #747474;
	--border-color: #cdcdcd;
	--border-color-hover: #b9b9b9;

	/* States */
	--success-color: #4CAF50;
	--success-color-text: #338d22;
	--success-bg: rgba(76, 175, 80, 0.1);
	--disabled-bg: rgba(116, 116, 116, 0.1);

	/* Notices */
	--notice-padding: 15px;
	--notice-color-error: #f9e2e2;
	--notice-color-warning: #fff3cf;
	--notice-color-info: #d2eaff;
	--notice-color-success: #ecf7ed;

	/* Input Base Properties */
	--input-padding: 8px 12px;

	/* Button Base Properties */
	--button-line-height: 1.5;
	--button-font-weight: 500;
}

/* Common Input Styles */
.registration__input {
	width: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-sm);
	height: var(--input-height);
	padding: var(--input-padding);
	transition: var(--transition-default);
}

/* Common Button Styles */
.registration__button {
	border-radius: var(--border-radius);
	font-size: var(--font-size-normal);
	font-weight: var(--button-font-weight);
	line-height: var(--button-line-height);
	cursor: pointer;
	transition: var(--transition-default);
	color: var(--main-color);
	border: 1px solid var(--main-color);
	background-color: transparent;
	padding: 5px 15px;
	display: inline-flex;
	align-items: center;
	box-shadow: var(--shadow-sm);
	margin-top: var(--spacing-between-elements);
}

/* Base Form Styles */
.registration {
	max-width: var(--content-width);
	width: 100%;
	margin: 0 auto;
	line-height: 1.5;
	color: var(--font-color);
	font-size: var(--font-size-normal);
}

/* Header */
.registration__header {
	padding: var(--modal-padding);
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.registration__header-left {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.registration__header-right a.registration__back-link{
	background-color: #f0f0f2;
	color: var(--font-color-secondary);
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 14px;
}

.registration__header-right a.registration__back-link:hover{
	color: var(--wpex-hover-link-color, var(--wpex-link-color, var(--wpex-accent)));
	text-decoration: none;
}

.registration__title {
	font-size: var(--font-size-title);
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	line-height: 1.4;
}

.registration__website-domain {
	color: var( --font-color-secondary );
}

.registration__website {
	display: flex;
	gap: 5px;
	align-items: center;
	font-weight: 600;
}
.registration__website-icon {
	width: 14px;
	height: 14px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%23747474' d='M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm-32 50.8v11.3c0 11.9-12.5 19.6-23.2 14.3l-24-12c14.9-6.4 30.7-10.9 47.2-13.6zm32 369.8V456c-110.3 0-200-89.7-200-200 0-29.1 6.4-56.7 17.6-81.7 9.9 14.7 25.2 37.4 34.6 51.1 5.2 7.6 11.2 14.6 18.1 20.7l.8.7c9.5 8.6 20.2 16 31.6 21.8 14 7 34.4 18.2 48.8 26.1 10.2 5.6 16.5 16.3 16.5 28v32c0 8.5 3.4 16.6 9.4 22.6 15 15.1 24.3 38.7 22.6 51.3zm42.7 22.7l17.4-46.9c2-5.5 3.3-11.2 4.8-16.9 1.1-4 3.2-7.7 6.2-10.7l11.3-11.3c8.8-8.7 13.7-20.6 13.7-33 0-8.1-3.2-15.9-8.9-21.6l-13.7-13.7c-6-6-14.1-9.4-22.6-9.4H232c-9.4-4.7-21.5-32-32-32s-20.9-2.5-30.3-7.2l-11.1-5.5c-4-2-6.6-6.2-6.6-10.7 0-5.1 3.3-9.7 8.2-11.3l31.2-10.4c5.4-1.8 11.3-.6 15.5 3.1l9.3 8.1c1.5 1.3 3.3 2 5.2 2h5.6c6 0 9.8-6.3 7.2-11.6l-15.6-31.2c-1.6-3.1-.9-6.9 1.6-9.3l9.9-9.6c1.5-1.5 3.5-2.3 5.6-2.3h9c2.1 0 4.2-.8 5.7-2.3l8-8c3.1-3.1 3.1-8.2 0-11.3l-4.7-4.7c-3.1-3.1-3.1-8.2 0-11.3L264 112l4.7-4.7c6.2-6.2 6.2-16.4 0-22.6l-28.3-28.3c2.5-.1 5-.4 7.6-.4 78.2 0 145.8 45.2 178.7 110.7l-13 6.5c-3.7 1.9-6.9 4.7-9.2 8.1l-19.6 29.4c-5.4 8.1-5.4 18.6 0 26.6l18 27c3.3 5 8.4 8.5 14.1 10l29.2 7.3c-10.8 84-73.9 151.9-155.5 169.7z'%3E%3C/path%3E%3C/svg%3E" );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Content Area */
.registration__content {
	padding: 0 var(--modal-padding);
	width: 100%;
}

/* Form Fields */
.registration__fields {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-between-elements);
}

.registration__field {
	flex: 1 1 auto;
	position: relative;
	min-width: 200px;
}

.registration__field:nth-child(3) {
	width: 100%;
	flex-basis: 100%;
	margin-bottom: 0;
}

.registration__label {
	display: block;
	font-weight: 600;
	margin-bottom: 5px;
	width: 100%;
}

/* Input States */
.registration__input:hover {
	border-color: var(--border-color-hover);
}

.registration__input:focus {
	border-color: var(--main-color);
	box-shadow: var(--shadow-focus);
}

.registration__input[readonly] {
	box-shadow: none;
	cursor: not-allowed;
}

.registration__input[readonly]:hover,
.registration__input[readonly]:focus {
	box-shadow: none;
}

.registration__input:disabled {
	background-color: var(--disabled-bg);
	border-color: var(--border-color);
	color: var(--font-color-secondary);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.75;
}

/* Messages */
.registration__message {
	color: #212121;
	margin: 10px 10px var(--spacing-between-elements) 0;
}

.registration__error {
	padding: var(--notice-padding);
	border-radius: var(--border-radius);
	background: var(--notice-color-error);
	margin: 0 0 var(--spacing-between-elements) 0;
	color: #cc0000;
}

/* Verification */
.registration__verification {
	padding-top: 20px;
}

.registration__verification-message {
	padding: var(--notice-padding);
	border-radius: var(--border-radius);
	background: #e5fee0;
	color: #338d22;
	margin-bottom: var(--spacing-between-elements);
}

.registration__actions {
	display: flex;
	gap: var(--spacing-between-elements);
	margin-top: var(--spacing-between-elements);
}

/* Password Section */
.registration__password {
	width: 100%;
	margin-top: var(--spacing-between-elements);
}

.registration__password-strength {
	display: flex;
	align-items: center;
}

.registration__password-meter {
	flex: 1;
}

.registration__password-meter span {
	display: block;
	margin: 8px 0 10px 0;
	padding: 4px 12px;
	font-size: 14px;
	text-align: center;
	border-radius: var(--border-radius);
	transition: all 0.3s ease;
}

.registration__password-meter span.weak {
	background-color: #ff4d4d;
	color: #fff;
}

.registration__password-meter span.fair {
	background-color: #ffa64d;
	color: #000;
}

.registration__password-meter span.good,
.registration__password-meter span.strong {
	background-color: var(--success-color);
	color: #fff;
}

/* Buttons */
.registration__button#verify-email-button {
	margin-top: 0;
}

.registration__button:hover {
	color: #fff;
	background-color: var(--main-color);
}

.registration__button--secondary {
	padding: 5px 0;
	border-color: transparent;
	box-shadow: none;
}

.registration__button--secondary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	color: var(--font-color-secondary);
}

.registration__button--secondary:disabled:hover {
	background: transparent;
	color: var(--font-color-secondary);
}

.registration__button--secondary:hover {
	background: transparent;
	color: var(--main-color-hover);
}

.registration__button--loading {
	color: transparent;
	pointer-events: none;
	position: relative;
}

.registration__button--loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--main-color);
	border-radius: 50%;
	border-right-color: transparent;
	animation: button-loading-spinner 0.75s linear infinite;
}

/* Button Variants */
.registration__button--text#sign-up-log-in-instead {
	margin: 0 0 10px 0;
}

.registration__button--text {
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	color: var(--main-color);
	font-weight: 500;
	text-decoration: none;
	transition: color 150ms ease-in-out;
}

.registration__button--text:hover {
	color: var(--main-color-hover);
	background: none;
	text-decoration: underline;
}

.registration__button--text:focus {
	outline: none;
	box-shadow: none;
}

.registration__button--text:active {
	transform: translateY(1px);
}

.registration__button--text:disabled {
	color: var(--font-color-secondary);
	opacity: 0.7;
	text-decoration: none;
}

/* Footer */
.registration__footer {
	padding: var(--modal-padding);
	margin-top: var(--spacing-between-elements);
	border-top: 1px solid #ebecef;
	display: grid;
	justify-content: center;
	align-content: space-evenly;
	text-align: center;
}

/* Icons */
.registration__icon {
	width: 17px;
	margin-left: 8px;
}

/* Animations */
@keyframes button-loading-spinner {
	to {
		transform: rotate(360deg);
	}
}

/* Verified Badge */
.registration__badge--verified {
	align-items: center;
	position: absolute;
	color: var(--success-color-text);
	font-size: 14px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: var(--border-radius);
	background-color: var(--success-bg);
	border: 1px solid rgba(76, 175, 80, 0.2);
	top: 34px;
	right: 4px;
}

.registration__badge--verified::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23338d22'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 2px;
}

/* Login Form Overrides */
.registration #ult-login .ult-box {
	box-shadow: none;
	border: 0 none;
	padding: 0;
}

.registration .ult-form__container form p {
	margin: 0 0 15px 0;
}

.registration .ult-form__footer {
	padding: 0;
	border: 0 none;
	margin-top: 0;
}

.registration .ult-form-password-wrapper {
	padding: 0 15px 0 0 !important;
}

.registration .ult-form__description,
.registration .ult-form__title {
	display: none;
}

.registration .ult-form__description~.ult-form__container,
.registration .ult-form__title~.ult-form__container {
	margin-top: 0;
	border: 0 none;
}

/**
 * Design adjustments for toolkit.
 */

.uo-connect-form-content .ult-box {
	border: 0 none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 30px
}
.ult-form__title,
.ult-form__description {
	display: none;
}

.ult-form__description~.ult-form__container,
.ult-form__title~.ult-form__container {
	border: 0 none;
	margin-top: 0;
}

.ult-form__container form p {
	margin: 0 0 15px 0;
}

.ult-form-password-wrapper {
	padding: 0 10px 0 0;
}

form#ult-login-form label {
	font-weight: 600;
	margin-bottom: 5px;
	width: 100%;
}

.ult-form__footer {
	border-top: 0 none;
}

a#log-in-sign-up-instead {
	display: flex;
	width: 135px;
	margin: 15px auto;
}

#log-in-sign-up-instead > svg {
	width: 17px;
	margin-right: 5px;
}

.uo-connect-form-footer {
	border-top: 1px solid #ebecef;
	margin-top: 20px;
}

#log-in-form__wrapper #ult-login-form input#ult-login-submit {
	width: auto;
	margin: 0 auto;
	border: 1px solid var(--main-color);
	border-radius: var(--border-radius);
	background-color: transparent;
	padding: 5px 15px;
	font-size: var(--font-size-normal);
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	display: block;
	align-items: center;
	transition: all 150ms ease-in-out;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
	margin-top: var(--spacing-between-elements);
	color: var(--main-color);
}

/* Instead of */
.registration .ult-form__container form p {
	margin: 0 0 15px 0;
}

/* Use */
.registration__form-container p {
	margin: 0 0 15px;
}

.uo-connect-form-content p.login-submit.ult-form__submit-btn--loading {
	background: #0690e8;
	display: block;
	margin: 0 auto;
	max-width: 77px;
	border-radius: 8px;
}

#uap-registration-form-logged-in {
	padding: 30px;
}