/*
 * Gate visual layer — Apple-like treatment (30 Aug 2026).
 * Ships behind pep_gate_redesign_enabled, as its own file so visuals can be
 * reverted independently of the a11y/perf layer (gate-redesign.css).
 * Scope: everything under .login-layout-sec (login + registration share it).
 * Rules of the house: UR markup untouched, Google button stays white with the
 * G mark, dashicons eye toggle preserved, reduced-motion respected.
 */

/* ── Type + canvas ─────────────────────────────────────────────────── */
.login-layout-sec {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
	color: #1d1d1f;
}
.login-layout-content-col {
	background: #f5f5f7;
}
@media (max-width: 991px) {
	.login-layout-sec {
		background: #f5f5f7;
	}
}

/* ── The card ──────────────────────────────────────────────────────── */
.login-layout-sec #ur-frontend-form,
.login-layout-sec .ur-frontend-form {
	background-image: none !important;
	background-color: transparent;
	border: none;
	box-shadow: none;
}
.login-layout-sec .login-layout-page-content {
	background: #ffffff;
	background-image: none;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

/* ── Header zone above the card: quiet, small, exact ───────────────── */
.login-layout-sec .login-layout-content-wrap .login-catalog-mobile-line strong,
.login-layout-sec .login-catalog-mobile-line strong {
	font-size: 13px !important;
	font-weight: 500;
	color: #515154;
	letter-spacing: 0.01em;
}
@media (max-width: 991px) {
	/* Centered, stacked, breathing header — no icon/text collisions. */
	.login-layout-sec .login-layout-logo {
		display: block;
		text-align: center;
		margin: 0 auto 10px;
	}
	.login-layout-sec .login-layout-logo img {
		max-height: 36px;
		width: auto;
		margin: 0 auto;
	}
	.login-layout-sec .login-catalog-mobile-line {
		margin: 0 0 4px;
		text-align: center;
	}
	.login-layout-sec .login-trust-signal {
		display: block;
		margin: 0 auto 8px;
		text-align: center;
	}
	.login-layout-sec .login-trust-signal-icon {
		display: none; /* decorative beakers collided with the text rows */
	}
	.login-layout-sec .login-trust-signal-text,
	.login-layout-sec .login-trust-signal-text p {
		text-align: center;
	}
	/* Fold compression: the whole story to the Login button, sooner. */
	.login-layout-sec .login-layout-content-wrap {
		padding-top: 12px;
	}
	.login-layout-sec #ur-frontend-form h1.user-registration-login-title,
	.login-layout-sec #ur-frontend-form .user-registration-login-title,
	.login-layout-sec #ur-frontend-form h1.user-registration-registration-title,
	.login-layout-sec #ur-frontend-form .user-registration-registration-title {
		font-size: 24px;
		margin-bottom: 2px;
	}
	.login-layout-sec #ur-frontend-form .user-registration-login-description,
	.login-layout-sec #ur-frontend-form .user-registration-registration-description {
		font-size: 14px;
		margin: 2px 0 10px;
	}
	.login-layout-sec .pep-sso-ack {
		font-size: 11px;
		line-height: 1.35;
		margin: 6px auto 4px;
		max-width: 34em;
	}
	.login-layout-sec .pep-sso-divider {
		margin: 8px 0;
	}
	.login-layout-sec .user-registration-form-row {
		margin-bottom: 10px;
	}
	.login-layout-sec #ur-frontend-form .user-registration-form-row label {
		margin-bottom: 4px;
	}
	.login-layout-sec .ur-form-grid > div:first-child br {
		display: none; /* stray <br> between title and description */
	}
}
.login-layout-sec .pep-tp-gate {
	margin: 4px auto 2px;
	display: flex;
	justify-content: center;
}
.login-layout-sec .user-registration {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.login-layout-sec .login-trust-signal-text,
.login-layout-sec .login-trust-signal-text p {
	font-size: 13px;
	line-height: 1.4;
	color: #515154;
}
.login-layout-sec .login-trust-signal-text strong {
	font-weight: 600;
	color: #1d1d1f;
}

/* ── Titles ────────────────────────────────────────────────────────── */
.login-layout-sec #ur-frontend-form h1.user-registration-login-title,
.login-layout-sec #ur-frontend-form h1.user-registration-registration-title,
.login-layout-sec #ur-frontend-form .user-registration-login-title,
.login-layout-sec #ur-frontend-form .user-registration-registration-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1d1d1f;
	line-height: 1.15;
}
.login-layout-sec #ur-frontend-form .user-registration-login-description,
.login-layout-sec #ur-frontend-form .user-registration-registration-description {
	font-size: 15px;
	color: #6e6e73;
	line-height: 1.45;
}

/* ── Inputs: filled, calm, precise ─────────────────────────────────── */
.login-layout-sec #ur-frontend-form .user-registration-form-row label {
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #515154 !important;
	margin-bottom: 6px;
}
.login-layout-sec .user-registration-form-row > label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #515154;
	margin-bottom: 6px;
}
.login-layout-sec .user-registration-form-row label .required,
.login-layout-sec #ur-frontend-form label .required {
	color: #a1a1a6 !important;
}
.login-layout-sec #ur-frontend-form input.user-registration-Input,
.login-layout-sec input.user-registration-Input,
.login-layout-sec #ur-frontend-form input.input-text,
.login-layout-sec input.ur-frontend-field {
	height: 52px !important;
	font-size: 17px; /* ≥16px: no iOS focus zoom */
	color: #1d1d1f;
	background: #f5f5f7;
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 12px;
	box-shadow: none;
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.login-layout-sec input.user-registration-Input::placeholder,
.login-layout-sec input.ur-frontend-field::placeholder {
	color: #86868b;
}
.login-layout-sec input.user-registration-Input:hover,
.login-layout-sec input.ur-frontend-field:hover {
	background: #f0f0f2;
}
.login-layout-sec #ur-frontend-form input.user-registration-Input:focus,
.login-layout-sec input.user-registration-Input:focus,
.login-layout-sec input.user-registration-Input:focus-visible,
.login-layout-sec #ur-frontend-form input.input-text:focus,
.login-layout-sec input.ur-frontend-field:focus {
	background: #ffffff;
	border-color: #de0076;
	box-shadow: 0 0 0 4px rgba(222, 0, 118, 0.12);
	outline: none;
}
.login-layout-sec .input-wrapper .ur-icon {
	color: #a1a1a6;
}
.login-layout-sec a.password_preview {
	color: #86868b;
	transition: color 0.15s ease;
}
.login-layout-sec a.password_preview:hover {
	color: #1d1d1f;
}

/* ── Primary button: confident pill ────────────────────────────────── */
.login-layout-sec button.ur-submit-button,
.login-layout-sec .user-registration-Button {
	height: 52px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	background: #de0076;
	border: none;
	border-radius: 100px;
	box-shadow: 0 2px 12px rgba(222, 0, 118, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.login-layout-sec button.ur-submit-button:hover,
.login-layout-sec .user-registration-Button:hover {
	filter: brightness(1.06);
	box-shadow: 0 4px 16px rgba(222, 0, 118, 0.32);
	transform: translateY(-1px);
}
.login-layout-sec button.ur-submit-button:active,
.login-layout-sec .user-registration-Button:active {
	transform: translateY(0) scale(0.985);
	box-shadow: 0 1px 6px rgba(222, 0, 118, 0.25);
}

/* ── Google button: white, hairline, weighty ───────────────────────── */
.login-layout-sec .pep-sso-button {
	height: 52px;
	font-size: 17px;
	font-weight: 600;
	color: #1d1d1f;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.login-layout-sec .pep-sso-button:hover {
	border-color: rgba(0, 0, 0, 0.28);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}
.login-layout-sec .pep-sso-button:active {
	transform: translateY(0) scale(0.99);
}
.login-layout-sec .pep-sso-ack {
	font-size: 12px;
	color: #86868b;
	line-height: 1.45;
}
.login-layout-sec .pep-sso-divider {
	color: #86868b;
	font-size: 13px;
}
.login-layout-sec .pep-sso-divider::before,
.login-layout-sec .pep-sso-divider::after {
	border-color: rgba(0, 0, 0, 0.08);
	background: rgba(0, 0, 0, 0.08);
}

/* ── Secondary row: remember / lost password, one calm line ────────── */
.login-layout-sec .user-registration-before-login-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: nowrap;
}
.login-layout-sec .user-registration-before-login-btn > div {
	margin: 0;
}
.login-layout-sec .user-registration-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.login-layout-sec .user-registration-form__label-for-checkbox span {
	font-size: 15px;
	color: #1d1d1f;
	white-space: nowrap;
}
.login-layout-sec #ur-frontend-form input#rememberme,
.login-layout-sec input#rememberme {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	margin: 0 !important;
	accent-color: #de0076;
}
.login-layout-sec .user-registration-LostPassword a {
	white-space: nowrap;
}
.login-layout-sec .user-registration-LostPassword a,
.login-layout-sec .user-registration-passwordless-login a,
.login-layout-sec .user-registration-register a,
.login-layout-sec #ur-frontend-form .user-registration-LostPassword a,
.login-layout-sec #ur-frontend-form .user-registration-passwordless-login a,
.login-layout-sec #ur-frontend-form .user-registration-register a {
	font-size: 15px !important;
	font-weight: 500;
	color: #de0076 !important;
	text-decoration: none !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: auto !important;
	display: inline;
	transition: color 0.15s ease;
}
.login-layout-sec .user-registration-passwordless-login {
	text-align: center;
	margin: 16px 0 4px;
}
.login-layout-sec .user-registration-register {
	text-align: center;
	margin-top: 10px;
}
.login-layout-sec .user-registration-LostPassword a:hover,
.login-layout-sec .user-registration-passwordless-login a:hover,
.login-layout-sec .user-registration-register a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Register-now: out-rank the theme's black !important */
div#ur-frontend-form div.user-registration-register.register a,
.login-layout-sec #ur-frontend-form .user-registration-register a {
	color: #de0076 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}
div#ur-frontend-form div.user-registration-register.register a:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ── Legal / attestation footnotes ─────────────────────────────────── */
.login-layout-sec .entry-content > p,
.login-layout-sec .login-layout-content-wrap > p {
	font-size: 12px;
	color: #86868b;
	line-height: 1.5;
}
.login-layout-sec .entry-content > p a {
	color: #6e6e73;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Errors: Apple-plain, readable ─────────────────────────────────── */
.login-layout-sec .ur-message,
.login-layout-sec .user-registration-error,
.login-layout-sec .pep-sso-error {
	font-size: 15px;
	line-height: 1.45;
	color: #d70015;
	background: #fff5f5;
	border: 1px solid rgba(215, 0, 21, 0.15);
	border-radius: 10px;
	padding: 10px 14px;
}

/* ── Desktop slideshow: frosted caption panel ──────────────────────── */
@media (min-width: 992px) {
	.login-layout-slide-inner {
		background: rgba(255, 255, 255, 0.14);
		-webkit-backdrop-filter: blur(20px) saturate(1.5);
		backdrop-filter: blur(20px) saturate(1.5);
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 20px;
		padding: 28px 32px;
		max-width: 560px;
	}
	.login-layout-slide-headline,
	.login-layout-slide-headline * {
		letter-spacing: -0.02em;
	}
}

/* ── Calm the motion for those who ask ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.login-layout-sec button.ur-submit-button,
	.login-layout-sec .user-registration-Button,
	.login-layout-sec .pep-sso-button,
	.login-layout-sec input.user-registration-Input,
	.login-layout-sec a.password_preview {
		transition: none;
	}
	.login-layout-sec button.ur-submit-button:hover,
	.login-layout-sec .pep-sso-button:hover {
		transform: none;
	}
}

/* ── Registration inputs: out-rank UR's media-scoped grid rules ────── */
.login-layout-sec .ur-frontend-form .ur-form-row .ur-form-grid input.ur-frontend-field,
.login-layout-sec .ur-frontend-form .ur-form-row .ur-form-grid input.input-text {
	height: 52px !important;
	min-height: 52px !important;
	max-height: none !important;
	font-size: 17px !important;
	color: #1d1d1f !important;
	background: #f5f5f7 !important;
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
	box-shadow: none !important;
}
.login-layout-sec .ur-frontend-form .ur-form-row .ur-form-grid input.ur-frontend-field:focus,
.login-layout-sec .ur-frontend-form .ur-form-row .ur-form-grid input.input-text:focus {
	background: #ffffff !important;
	border-color: #de0076 !important;
	box-shadow: 0 0 0 4px rgba(222, 0, 118, 0.12) !important;
	outline: none;
}

/* Registration corner radius: match login (their per-corner rule carries
 * an extra element token; this selector adds form + the --rounded class). */
.login-layout-sec .ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid input.ur-frontend-field,
.login-layout-sec .ur-frontend-form.ur-frontend-form--rounded form .ur-form-row .ur-form-grid input.input-text {
	border-radius: 12px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

/* ── Logo centered at every width ──────────────────────────────────
 * The tap-target rule (.login-layout-sec a { display:inline-flex })
 * shrink-wraps the logo anchor to the left; this out-specifies it. */
.login-layout-sec a.login-layout-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	margin: 0 auto 18px;
}