/*
 * Login, Register and Lost Password pages: form styles.
 * Columns, colours and fonts come from layout.css.
 *
 * Loaded only on pages containing the "rr-auth" columns block.
 * User Registration styles its forms with very long selectors
 * (body.user-registration-page #user-registration:not(...) .ur-frontend-form ...),
 * so properties it sets are overridden with !important, scoped to .rr-auth.
 */

.rr-auth {
	/* User Registration reads these for buttons and links. */
	--ur-primary-color: var(--rr-accent);
	--ur-button-background-normal-color: var(--rr-accent);
	--ur-button-background-hover-color: var(--rr-accent-dark);
	--ur-button-text-normal-color: #ffffff;
	--ur-button-text-hover-color: #ffffff;
}

.rr-auth > .rr-auth__form {
	max-width: 530px;
}

/* ---------- Form container ---------- */

.rr-auth .user-registration,
.rr-auth .ur-frontend-form {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.rr-auth .ur-frontend-form .ur-form-row,
.rr-auth .ur-frontend-form .ur-form-grid {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rr-auth .user-registration-form-login .ur-form-grid {
	display: flex !important;
	flex-direction: column;
}

/* ---------- Heading and intro ---------- */

.rr-auth .user-registration-login-title,
.rr-auth .user-registration-registration-title,
.rr-auth .rr-auth__title {
	display: block !important;
	margin: 0 0 22px !important;
	font-family: var(--rr-font-heading) !important;
	font-size: 46px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--rr-heading) !important;
	text-align: left !important;
}

.rr-auth [data-field="login-title"] > br,
.rr-auth .user-registration-registration-title + br {
	display: none;
}

.rr-auth .user-registration-login-description,
.rr-auth .user-registration-registration-description,
.rr-auth .rr-auth__intro {
	margin: 0 0 44px !important;
	font-family: var(--rr-font-body) !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	letter-spacing: 0 !important;
	color: var(--rr-text) !important;
	text-align: left !important;
}

/* ---------- Fields ---------- */

.rr-auth .ur-frontend-form .user-registration-form-row,
.rr-auth .ur-frontend-form .ur-field-item {
	margin: 0 0 26px !important;
	padding: 0 !important;
}

.rr-auth .ur-frontend-form .ur-field-item .form-row {
	margin: 0 !important;
	padding: 0 !important;
}

.rr-auth .user-registration-form-row > label,
.rr-auth .ur-field-item label.ur-label {
	display: block !important;
	margin: 0 0 12px !important;
	font-family: var(--rr-font-body) !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var(--rr-label) !important;
}

.rr-auth .user-registration-form-row > label .required,
.rr-auth .ur-field-item label .required {
	display: none !important;
}

.rr-auth .ur-frontend-form .input-wrapper,
.rr-auth .ur-frontend-form .password-input-group {
	position: relative;
	display: block !important;
	width: 100% !important;
}

.rr-auth .ur-frontend-form .input-wrapper input.input-text,
.rr-auth .ur-frontend-form input.user-registration-Input {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 70px !important;
	min-height: 70px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	font-family: var(--rr-font-body) !important;
	font-size: 19px !important;
	line-height: normal !important;
	color: var(--rr-label) !important;
	background: #ffffff !important;
	border: 1px solid var(--rr-border) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rr-auth .ur-frontend-form .input-wrapper input.input-text::placeholder,
.rr-auth .ur-frontend-form input.user-registration-Input::placeholder {
	color: var(--rr-placeholder) !important;
	opacity: 1 !important;
}

.rr-auth .ur-frontend-form .input-wrapper input.input-text:focus,
.rr-auth .ur-frontend-form input.user-registration-Input:focus {
	outline: none !important;
	border-color: var(--rr-accent) !important;
	box-shadow: 0 0 0 3px rgba(0, 156, 255, 0.18) !important;
}

/* Show/hide password eye */

.rr-auth .hide_show_password input.input-text {
	padding-right: 64px !important;
}

.rr-auth .ur-frontend-form .password_preview {
	position: absolute !important;
	top: 50% !important;
	right: 22px !important;
	left: auto !important;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 24px !important;
	line-height: 26px !important;
	color: #333333 !important;
	text-decoration: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: translateY(-50%) !important;
}

/* Open eye while the password is hidden ("show"), crossed-out eye once it's visible ("hide"). */
.rr-auth .ur-frontend-form .password_preview.dashicons-hidden::before {
	content: "\f177";
}

.rr-auth .ur-frontend-form .password_preview.dashicons-visibility::before {
	content: "\f530";
}

.rr-auth .ur-frontend-form .password_preview:hover,
.rr-auth .ur-frontend-form .password_preview:focus {
	color: var(--rr-accent) !important;
}

/* ---------- Order on login: fields, button, forgot password, register link ---------- */

.rr-auth .user-registration-form-login [data-field="login-button"] {
	order: 10;
}

.rr-auth .user-registration-form-login .ur-form-grid > .form-row:not(.user-registration-form-row) {
	order: 11;
	margin: 0 !important;
	padding: 0 !important;
}

.rr-auth .user-registration-form-login .user-registration-register {
	order: 12;
}

/* ---------- Buttons ---------- */

.rr-auth .ur-frontend-form .ur-button-container {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

.rr-auth .ur-frontend-form button.ur-submit-button,
.rr-auth .ur-frontend-form input[type="submit"].user-registration-Button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 68px !important;
	min-height: 68px !important;
	margin: 4px 0 0 !important;
	padding: 0 24px !important;
	font-family: var(--rr-font-body) !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	background: var(--rr-accent) !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.rr-auth .ur-frontend-form button.ur-submit-button:hover,
.rr-auth .ur-frontend-form button.ur-submit-button:focus,
.rr-auth .ur-frontend-form input[type="submit"].user-registration-Button:hover,
.rr-auth .ur-frontend-form input[type="submit"].user-registration-Button:focus {
	color: #ffffff !important;
	background: var(--rr-accent-dark) !important;
}

.rr-auth .ur-frontend-form button.ur-submit-button:focus-visible,
.rr-auth .ur-frontend-form input[type="submit"].user-registration-Button:focus-visible {
	outline: 3px solid rgba(0, 156, 255, 0.35) !important;
	outline-offset: 2px;
}

/* ---------- Newsletter checkbox (sign-up form, above the button) ---------- */

.rr-auth .rr-signup-newsletter {
	margin: 4px 0 28px !important;
}

.rr-auth .rr-signup-newsletter__option {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
	margin: 0 !important;
	cursor: pointer !important;
}

.rr-auth .rr-signup-newsletter__option input[type="checkbox"] {
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	width: 24px !important;
	height: 24px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: #ffffff !important;
	border: 1.5px solid #bfc3c9 !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.rr-auth .rr-signup-newsletter__option input[type="checkbox"]:checked {
	background: var(--rr-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / 16px no-repeat !important;
	border-color: var(--rr-accent) !important;
}

.rr-auth .rr-signup-newsletter__option input[type="checkbox"]:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(0, 156, 255, 0.25) !important;
}

.rr-auth .rr-signup-newsletter__text {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
}

.rr-auth .rr-signup-newsletter__name {
	font-family: var(--rr-font-body) !important;
	font-size: 18px !important;
	line-height: 1.35 !important;
	color: var(--rr-label) !important;
}

.rr-auth .rr-signup-newsletter__description {
	font-family: var(--rr-font-body) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #6f7178 !important;
}

/* ---------- Links ---------- */

.rr-auth .user-registration-before-login-btn {
	display: block !important;
	margin: 30px 0 0 !important;
	padding: 0 !important;
}

.rr-auth .user-registration-LostPassword,
.rr-auth .user-registration-LostPassword label {
	margin: 0 !important;
	padding: 0 !important;
}

.rr-auth .user-registration-LostPassword a {
	font-family: var(--rr-font-body) !important;
	font-size: 19px !important;
	color: var(--rr-accent) !important;
	text-decoration: none !important;
	border: 0 !important;
}

.rr-auth .user-registration-register {
	display: block !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

.rr-auth .user-registration-register a,
.rr-auth .rr-auth__switch {
	font-family: var(--rr-font-body) !important;
	font-size: 16px !important;
	color: var(--rr-text) !important;
	text-decoration: none !important;
	border: 0 !important;
}

.rr-auth .rr-auth__switch {
	margin: 28px 0 0 !important;
}

.rr-auth .rr-auth__switch a {
	color: var(--rr-accent);
	text-decoration: none;
	border: 0;
}

.rr-auth .user-registration-LostPassword a:hover,
.rr-auth .user-registration-register a:hover,
.rr-auth .rr-auth__switch a:hover {
	text-decoration: underline !important;
}

/* ---------- Lost password / reset password ---------- */

/* [replyresearch_auth_heading] provides the title and intro for each step, so hide User Registration's own. */
.rr-auth .ur-lost-password-content-container,
.rr-auth .ur_lost_reset_password .ur-form-grid > p:not([class]),
.rr-auth .ur-message-container {
	display: none !important;
}

.rr-auth .rr-auth__heading .rr-auth__title {
	padding: 0 !important;
	text-transform: none !important;
}

.rr-auth .ur_lost_reset_password .ur-input-with-icon {
	position: relative;
	display: block !important;
}

.rr-auth .ur_lost_reset_password .ur-input-with-icon .input-icon {
	display: none !important;
}

.rr-auth .ur_lost_reset_password .user-registration-form-row {
	margin: 0 0 26px !important;
	padding: 0 !important;
}

/*
 * The request form wraps a <div> inside a <p>, which browsers split apart:
 * the label ends up in its own paragraph, followed by the input and an empty <p>.
 */
.rr-auth .ur_lost_reset_password .user-registration-form-row--first {
	margin-bottom: 0 !important;
}

.rr-auth .ur_lost_reset_password .ur-input-with-icon {
	margin: 0 0 30px !important;
}

.rr-auth .ur_lost_reset_password .ur-form-grid > p:empty {
	display: none !important;
}

.rr-auth .ur_lost_reset_password .user-registration-form-row:last-of-type {
	margin-bottom: 0 !important;
}

.rr-auth .user-registration-message-container:empty {
	display: none;
}

.rr-auth .rr-auth__heading + .user-registration-message-container,
.rr-auth .user-registration-message-container {
	margin: 0 0 24px;
}

/* Expired or used reset link: [replyresearch_auth_heading] explains it, so hide User Registration's one-line message. */
.rr-auth .rr-auth__heading--expired ~ .user-registration {
	display: none !important;
}

.rr-auth .rr-auth__button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 68px;
	margin: 0;
	padding: 0 24px;
	font-family: var(--rr-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff !important;
	background: var(--rr-accent);
	border: 0;
	border-radius: 4px;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.rr-auth .rr-auth__button:hover,
.rr-auth .rr-auth__button:focus {
	background: var(--rr-accent-dark);
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
	.rr-auth .user-registration-login-title,
	.rr-auth .user-registration-registration-title,
	.rr-auth .rr-auth__title {
		font-size: 38px !important;
	}
}

/* ---------- Mobile: stack, illustration above the form ---------- */

@media (max-width: 781px) {
	.rr-auth > .rr-auth__form {
		max-width: none;
	}

	.rr-auth .user-registration-login-title,
	.rr-auth .user-registration-registration-title,
	.rr-auth .rr-auth__title {
		font-size: 30px !important;
	}

	.rr-auth .user-registration-login-description,
	.rr-auth .user-registration-registration-description,
	.rr-auth .rr-auth__intro {
		margin-bottom: 28px !important;
		font-size: 17px !important;
	}

	.rr-auth .ur-frontend-form .user-registration-form-row,
	.rr-auth .ur-frontend-form .ur-field-item {
		margin-bottom: 20px !important;
	}

	.rr-auth .user-registration-form-row > label,
	.rr-auth .ur-field-item label.ur-label {
		font-size: 17px !important;
	}

	.rr-auth .ur-frontend-form .input-wrapper input.input-text,
	.rr-auth .ur-frontend-form button.ur-submit-button {
		height: 56px !important;
		min-height: 56px !important;
		font-size: 17px !important;
	}

	.rr-auth .rr-auth__button {
		height: 56px;
		font-size: 17px;
	}
}