/*
 * EFT-3888 ? shared chrome for Cognito auth pages under plainLayout
 * (login / signup / forgot / authCallback).
 *
 * layout.css pads main 200px for the left nav. These pages have no nav, so
 * without this reset the form sits right of center. Also defeats forms.css
 * bleed (.heading fixed height + margin-left, input{height:20px},
 * input[type=submit]{height:100px}) the same way User Details scopes its UI.
 *
 * Prefer cog-* class names. Legacy page-prefix names are aliased so existing
 * markup keeps working while pages migrate.
 */

/* Full-bleed auth surface (EFT-3888): plainLayout's fixed 1280px #page-wrap
   painted a white column inside the JSPs' dark body, leaving a grey frame on
   wide monitors, with the legacy header logo floating above it. Let the
   wrapper's light gradient fill the viewport and drop the header chrome. */
#page-wrap {
	width: auto !important;
	max-width: none;
	margin: 0;
	min-height: 100vh;
}

#page-wrap > header {
	display: none;
}

#mainid {
	padding-left: 0 !important;
	padding-right: 0 !important;
	position: relative;
	box-sizing: border-box;
	min-height: calc(100vh - 70px);
}

#mainfooter {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 8px;
	padding-left: 0 !important;
	width: 100%;
	text-align: center;
	margin: 0;
}

.cog-wrap,
.login-wrap,
.signup-wrap,
.forgot-wrap,
.callback-wrap {
	max-width: 420px;
	width: 100%;
	margin: 12vh auto 72px;
	padding: 0 16px;
	font-family: 'Open Sans', Arial, sans-serif;
	color: #222;
	box-sizing: border-box;
}

/* Callback page follows the light full-bleed surface now (was white-on-dark). */
.callback-wrap {
	text-align: center;
	color: #222;
}

.cog-logo,
.login-logo,
.signup-logo,
.forgot-logo,
.callback-logo {
	display: block;
	width: 72%;
	max-width: 280px;
	margin: 0 auto 22px;
}

.callback-logo { filter: brightness(0.2); }

.cog-card,
.login-card,
.signup-card,
.forgot-card {
	background: #fff;
	border: 1px solid #b7c6d4;
	border-radius: 8px;
	padding: 28px 26px 24px;
}

/* Do NOT use global .heading ? forms.css height:40px + margin-left:30px
   stacks titles on top of the instruction line. */
.cog-title,
.sec-title,
.signup-title,
.forgot-title {
	display: block;
	margin: 0 0 8px 0;
	padding: 0 0 0 12px;
	border-left: 4px solid #229FEB;
	color: #111;
	font-weight: 600;
	font-size: 1.25em;
	line-height: 1.3;
	height: auto;
}

.cog-instr,
.sec-instr,
.signup-instr,
.forgot-instr {
	color: #555;
	font-size: 14px;
	margin: 0 0 18px 0;
	line-height: 1.45;
}

.cog-wrap input.cog-field,
.cog-wrap input[type="text"],
.cog-wrap input[type="password"],
.cog-wrap input[type="email"],
.cog-wrap input[type="tel"],
.login-wrap input.login-field,
.login-wrap input[type="text"],
.login-wrap input[type="password"],
.signup-wrap input.signup-field,
.signup-wrap input[type="text"],
.signup-wrap input[type="password"],
.signup-wrap input[type="email"],
.signup-wrap input[type="tel"],
.forgot-wrap input.forgot-field,
.forgot-wrap input[type="text"],
.forgot-wrap input[type="password"],
.forgot-wrap input[type="email"],
.forgot-wrap input[type="tel"],
.forgot-wrap input.forgot-code-field,
.signup-wrap input.signup-code-field {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0 0 12px 0;
	padding: 0.65em 0.75em;
	box-sizing: border-box;
	border: 1px solid #b7c6d4;
	border-radius: 6px;
	background: #fff;
	color: #222;
	font-size: 15px;
	line-height: 1.35;
	font-weight: normal;
}

.login-wrap input.login-field:focus,
.signup-wrap input.signup-field:focus,
.forgot-wrap input.forgot-field:focus,
.forgot-wrap input.forgot-code-field:focus,
.signup-wrap input.signup-code-field:focus {
	outline: none;
	border-color: #229FEB;
	box-shadow: 0 0 0 3px rgba(34, 159, 235, 0.18);
}

.login-wrap input.code-field,
.forgot-wrap input.forgot-code-field,
.signup-wrap input.signup-code-field {
	letter-spacing: 0.35em;
	text-align: center;
	font-size: 1.35em;
	padding: 0.7em 0.5em;
}

.login-wrap input.login-field.errorColor,
.signup-wrap input.signup-field.errorColor,
.forgot-wrap input.forgot-field.errorColor,
.forgot-wrap input.forgot-code-field.errorColor,
.signup-wrap input.signup-code-field.errorColor {
	background-color: #fbe4e4;
	border-color: #e3a1a1;
}

.login-wrap .searchprogramsbtn,
.login-wrap .submitbtns,
.login-wrap button[type="submit"],
.signup-wrap .searchprogramsbtn,
.signup-wrap .submitbtns,
.signup-wrap button[type="submit"],
.forgot-wrap .searchprogramsbtn,
.forgot-wrap .submitbtns,
.forgot-wrap button[type="submit"] {
	display: block;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 4px 0 0 0;
	padding: 0.7em 1em;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.3;
	box-sizing: border-box;
}

.login-wrap .submitbtns[disabled],
.login-wrap button[disabled],
.signup-wrap button[disabled],
.forgot-wrap button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.login-factor-btn { margin-bottom: 10px !important; }

.pw-wrap {
	position: relative;
	margin-bottom: 12px;
	clear: both;
}

.pw-wrap .login-field,
.pw-wrap .signup-field,
.pw-wrap .forgot-field {
	margin-bottom: 0 !important;
	padding-right: 4.2em !important;
}

.pw-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: #229FEB;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 8px;
	height: auto;
	width: auto;
}

.pw-toggle:hover { text-decoration: underline; }

.pw-hint,
.forgot-help {
	color: #33506b;
	font-size: 12px;
	margin: -2px 0 14px 0;
	line-height: 1.4;
}

.pw-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 14px 0;
	font-size: 12px;
	color: #555;
	line-height: 1.5;
}

.pw-checklist li {
	margin: 3px 0;
	padding-left: 1.3em;
	position: relative;
}

.pw-checklist li:before {
	content: "\25CB";
	position: absolute;
	left: 0;
	color: #aaa;
}

.pw-checklist li.pw-ok { color: #1a6b1a; }

.pw-checklist li.pw-ok:before {
	content: "\2713";
	color: #1a6b1a;
}

.field-hint {
	color: #a01212;
	font-size: 12px;
	margin: -6px 0 10px 0;
	display: none;
}

.field-hint.show { display: block; }

.login-links,
.sec-back,
.signup-back,
.forgot-back,
.signup-resend {
	margin-top: 16px;
	text-align: center;
	font-size: 13px;
	line-height: 1.7;
}

.login-links a,
.sec-back a,
.signup-back a,
.forgot-back a,
.signup-resend a {
	color: #229FEB;
	text-decoration: none;
	cursor: pointer;
}

.login-links a:hover,
.sec-back a:hover,
.signup-back a:hover,
.forgot-back a:hover,
.signup-resend a:hover { text-decoration: underline; }

/* Secondary CTA under Sign in ? claim is the parallel path for pre-created users */
a.login-claim-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 14px 0 0 0;
	padding: 0.7em 1em;
	border: 2px solid #229FEB;
	border-radius: 6px;
	background: #fff;
	color: #229FEB;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

a.login-claim-btn:hover {
	background: #eef7fd;
	text-decoration: none;
}

/* Fixed +1 country prefix; digits enter in the national field */
.tel-wrap {
	display: flex;
	align-items: stretch;
	margin: 0 0 12px 0;
	border: 1px solid #b7c6d4;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	box-sizing: border-box;
}

.tel-wrap:focus-within {
	border-color: #229FEB;
	box-shadow: 0 0 0 3px rgba(34, 159, 235, 0.18);
}

.tel-prefix {
	display: flex;
	align-items: center;
	padding: 0 0.65em 0 0.85em;
	background: #eef2f6;
	color: #33506b;
	font-size: 15px;
	font-weight: 600;
	border-right: 1px solid #b7c6d4;
	user-select: none;
}

.signup-wrap .tel-wrap input.tel-digits,
.signup-wrap input.tel-digits {
	flex: 1;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-width: 0;
}

.tel-wrap.errorColor,
.tel-wrap:has(input.errorColor) {
	background-color: #fbe4e4;
	border-color: #e3a1a1;
}

.tel-wrap:has(input.errorColor) .tel-prefix {
	background: #f7d4d4;
	border-right-color: #e3a1a1;
}

.signup-half {
	display: inline-block;
	width: 49%;
	box-sizing: border-box;
}

.signup-half.left { margin-right: 2%; }

.login-clienterror,
.login-clientok,
.signup-clienterror,
.signup-clientok,
.forgot-clienterror,
.forgot-clientok {
	display: none;
	margin: 0 0 14px 0;
	border-radius: 6px;
}

.login-wrap .oaerror,
.signup-wrap .oaerror,
.forgot-wrap .oaerror {
	border-radius: 6px;
	margin-bottom: 14px;
}

/* Login-only MFA enrollment bits */
.mfa-qr {
	text-align: center;
	margin: 10px 0 14px 0;
}

.mfa-qr img {
	border: 1px solid #b7c6d4;
	border-radius: 6px;
	padding: 8px;
	background: #fff;
}

.mfa-secret-label {
	color: #33506b;
	font-size: 12px;
	margin-bottom: 4px;
}

.mfa-secret {
	font-family: 'Courier New', monospace;
	font-size: 13px;
	word-break: break-all;
	background: #eef2f6;
	border: 1px solid #b7c6d4;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 16px;
	text-align: center;
	color: #222;
}

.mfa-consent {
	margin: 4px 0 14px 0;
	font-size: 13px;
	line-height: 1.45;
	color: #333;
}

.mfa-consent input[type="checkbox"] {
	vertical-align: top;
	margin-top: 3px;
	margin-right: 8px;
	width: auto;
	height: auto;
}

.callback-msg {
	color: #222;
	font-size: 16px;
	line-height: 1.5;
}

.callback-spinner {
	margin: 22px auto 0 auto;
	width: 36px;
	height: 36px;
	border: 4px solid rgba(34, 159, 235, 0.2);
	border-top-color: #229FEB;
	border-radius: 50%;
	-webkit-animation: callback-spin 0.9s linear infinite;
	animation: callback-spin 0.9s linear infinite;
}

@-webkit-keyframes callback-spin {
	to { -webkit-transform: rotate(360deg); }
}

@keyframes callback-spin {
	to { transform: rotate(360deg); }
}