/**
 * ENRFO Dashboard — branded login and registration pages.
 */

.enrfo-app--auth { background: var(--enrfo-bg); }

.enrfo-auth {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	min-height: 100vh;
}

.enrfo-auth__brand {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
	padding: 42px 46px;
	background: linear-gradient(150deg, var(--enrfo-primary) 0%, var(--enrfo-secondary) 78%);
	color: #fff;
}

.enrfo-auth__brandhead { display: flex; align-items: center; gap: 12px; }
.enrfo-auth__brandname { font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.enrfo-auth__logo { max-height: 46px; width: auto; }

.enrfo-auth__pitch { position: relative; z-index: 2; max-width: 460px; }
.enrfo-auth__pitch h2 { color: #fff; font-size: 30px; line-height: 1.25; margin-bottom: 22px; }
.enrfo-auth__pitch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.enrfo-auth__pitch li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; opacity: .92; }
.enrfo-auth__pitch svg { margin-top: 2px; color: var(--enrfo-accent); }

.enrfo-auth__grid {
	position: absolute; left: 0; right: 0; bottom: 0;
	width: 100%; height: 220px; color: #fff; opacity: .6; z-index: 1;
}

.enrfo-auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.enrfo-auth__inner { width: 100%; max-width: 400px; }
.enrfo-auth__inner--wide { max-width: 620px; }

.enrfo-authform {
	padding: 30px 30px 26px;
	background: var(--enrfo-surface);
	border: 1px solid var(--enrfo-border);
	border-radius: 16px;
	box-shadow: var(--enrfo-shadow);
}
.enrfo-authform__title { margin: 0 0 4px; font-size: 23px; }
.enrfo-authform__sub { color: var(--enrfo-muted); font-size: 14px; margin-bottom: 20px; }
.enrfo-authform__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.enrfo-authform__reset { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--enrfo-border); }
.enrfo-authform__foot { margin: 18px 0 0; text-align: center; color: var(--enrfo-muted); font-size: 14px; }

/* Account type picker */

.enrfo-typepick { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.enrfo-typepick__option { position: relative; display: block; cursor: pointer; }
.enrfo-typepick__option input {
	position: absolute; opacity: 0; width: 1px; height: 1px;
}
.enrfo-typepick__body {
	display: flex; flex-direction: column; gap: 3px;
	height: 100%; padding: 12px 14px;
	border: 1px solid var(--enrfo-border-strong); border-radius: var(--enrfo-radius-sm);
	background: var(--enrfo-surface); transition: border-color .15s ease, background .15s ease;
}
.enrfo-typepick__body strong { font-size: 14px; color: var(--enrfo-primary); }
.enrfo-typepick__body small { color: var(--enrfo-muted); font-size: 12px; line-height: 1.4; }
.enrfo-typepick__option input:checked + .enrfo-typepick__body {
	border-color: var(--enrfo-accent);
	background: rgba(13, 157, 225, .07);
	box-shadow: 0 0 0 1px var(--enrfo-accent) inset;
}
.enrfo-typepick__option input:focus-visible + .enrfo-typepick__body { outline: 2px solid var(--enrfo-accent); outline-offset: 2px; }

.enrfo-typefields { margin-bottom: 6px; }

@media (max-width: 900px) {
	.enrfo-auth { grid-template-columns: minmax(0, 1fr); }
	.enrfo-auth__brand { padding: 28px 24px; gap: 20px; }
	.enrfo-auth__grid { display: none; }
	.enrfo-auth__pitch h2 { font-size: 22px; }
	.enrfo-auth__pitch ul { display: none; }
}

@media (max-width: 560px) {
	.enrfo-auth__panel { padding: 22px 14px 36px; }
	.enrfo-authform { padding: 22px 18px 20px; border-radius: 14px; }
}

/* The branding panel header is a link back to the public site. */
a.enrfo-auth__brandhead { color: #fff; text-decoration: none; }
a.enrfo-auth__brandhead:hover { text-decoration: none; opacity: .92; }

.enrfo-auth__back {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 22px; padding: 9px 15px;
	border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
	color: #fff; font-size: 13.5px; font-weight: 600;
}
.enrfo-app .enrfo-auth__back:hover { background: rgba(255, 255, 255, .12); text-decoration: none; color: #fff; }

.enrfo-authform .enrfo-field small { margin-top: 2px; font-size: 12px; line-height: 1.45; }