/**
 * ABPL authentication screens.
 */

.abpl-auth {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88vh;
	padding: 34px var(--abpl-space-8);
	background:
		radial-gradient(circle at 14% 20%, rgba(15, 118, 110, .16), transparent 42%),
		radial-gradient(circle at 86% 15%, rgba(212, 160, 23, .10), transparent 38%),
		radial-gradient(circle at 88% 82%, rgba(37, 99, 235, .16), transparent 42%),
		linear-gradient(160deg, #f4f7fb 0%, var(--abpl-bg) 55%, #eef2f9 100%);
	background-attachment: fixed;
}

.abpl-auth__card {
	position: relative;
	width: min(440px, 100%);
	padding: var(--abpl-space-14) var(--abpl-space-13);
	border: 1px solid rgba(15, 23, 42, .06);
	border-radius: 22px;
	background: #fff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, .04),
		0 24px 32px -16px rgba(15, 23, 42, .12),
		0 48px 64px -24px rgba(15, 23, 42, .10);
	animation: abpl-auth-rise 480ms cubic-bezier(.22, .8, .3, 1);
}/* A thin brand-gradient cap on the card, evoking a premium/trust financial
   product rather than a plain generic card. */
.abpl-auth__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--abpl-space-13);
	right: var(--abpl-space-13);
	height: 3px;
	border-radius: 0 0 999px 999px;
	background: linear-gradient(90deg, var(--abpl-primary), var(--abpl-blue));
}

@keyframes abpl-auth-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.abpl-auth__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--abpl-space-7);
	margin-bottom: 28px;
	text-align: center;
}

.abpl-auth__logo { max-width: 168px; height: auto; }

.abpl-auth__mark {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 17px;
	background: linear-gradient(135deg, var(--abpl-primary), var(--abpl-blue));
	color: #fff;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.02em;
	box-shadow:
		0 0 0 6px rgba(15, 118, 110, .07),
		0 10px 20px -8px rgba(15, 118, 110, .45);
}

.abpl-auth__title { margin: 0; font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; color: #0b1220; }
.abpl-auth__subtitle { margin: var(--abpl-space-3) 0 0; font-size: .875rem; color: var(--abpl-muted); }

.abpl-auth__message {
	margin: 0 0 var(--abpl-space-8);
	padding: var(--abpl-space-6) var(--abpl-space-7);
	border-radius: var(--abpl-radius-sm);
	font-size: .875rem;
	background: #fee2e2;
	color: #991b1b;
	border-left: 3px solid var(--abpl-danger);
}

.abpl-auth__message--success { background: #dcfce7; color: #166534; border-left-color: var(--abpl-success); }
.abpl-auth__message[hidden] { display: none; }

.abpl-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abpl-space-6);
	margin-bottom: var(--abpl-space-10);
	font-size: .8125rem;
}

.abpl-auth__row label { display: flex; align-items: center; gap: var(--abpl-space-4); cursor: pointer; color: #475569; }
.abpl-auth__link { color: var(--abpl-primary); font-weight: 600; text-decoration: none; transition: color var(--abpl-speed) ease; }
.abpl-auth__link:hover { color: var(--abpl-primary-dark); text-decoration: none; }

.abpl-auth__foot {
	margin-top: var(--abpl-space-11);
	padding-top: var(--abpl-space-9);
	border-top: 1px solid var(--abpl-border);
	text-align: center;
	font-size: .78rem;
	color: var(--abpl-muted);
}/* Premium input/button/checkbox treatment -- scoped to .abpl-auth so the
   shared .abpl-input/.abpl-btn used across the rest of the app are
   untouched. */

.abpl-auth .abpl-input {
	background: #f8fafc;
	border-color: rgba(15, 23, 42, .08);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
	transition: border-color var(--abpl-speed) ease, box-shadow var(--abpl-speed) ease, background var(--abpl-speed) ease;
}

.abpl-auth .abpl-input:focus {
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03), 0 0 0 4px rgba(15, 118, 110, .12);
}

.abpl-auth .abpl-auth__row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--abpl-primary);
}

.abpl-auth .abpl-btn {
	background: linear-gradient(135deg, var(--abpl-primary), #0d6b63 60%, var(--abpl-primary-dark));
	box-shadow: 0 12px 24px -8px rgba(15, 118, 110, .5);
	letter-spacing: .01em;
	transition: transform var(--abpl-speed) ease, box-shadow var(--abpl-speed) ease, background var(--abpl-speed) ease;
}

.abpl-auth .abpl-btn:hover {
	background: linear-gradient(135deg, var(--abpl-primary-dark), #0d6b63 60%, var(--abpl-primary-dark));
	box-shadow: 0 16px 28px -8px rgba(15, 118, 110, .55);
	transform: translateY(-1px);
}

.abpl-auth .abpl-btn:active { transform: translateY(0); }/* OTP entry */

.abpl-otp {
	letter-spacing: .58em;
	text-align: center;
	font-size: 1.3rem;
	font-weight: 600;
	padding-right: 0;
}

.abpl-otp::placeholder { letter-spacing: .2em; font-size: .95rem; font-weight: 400; }/* Step indicator */

.abpl-steps { display: flex; gap: var(--abpl-space-3); margin-bottom: var(--abpl-space-11); }

.abpl-steps__dot {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--abpl-border);
	transition: background var(--abpl-speed) ease;
}

.abpl-steps__dot.is-active { background: var(--abpl-primary); }

.abpl-auth__success {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto var(--abpl-space-8);
	border-radius: 50%;
	background: #dcfce7;
	color: #166534;
	font-size: 1.7rem;
}

@media (max-width: 480px) {
	.abpl-auth { padding: var(--abpl-space-9) var(--abpl-space-6); min-height: 82vh; }
	.abpl-auth__card { padding: var(--abpl-space-12) var(--abpl-space-10); border-radius: 15px; }
	.abpl-auth__title { font-size: 1.2rem; }
}