/* Shared by the patient portal sign-in and OTP pages
   (Views/PatientPortal/LoginPortal.cshtml, OtpVerification.cshtml). */

.akij-login {
	--akij-teal: #55989b;
	--akij-deep: #0e6068;
	--akij-ink: #10444a;
	position: relative;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--akij-teal);
	padding: 16px;
}

/* Decorative arcs and streaks. Sized in vw so they hold their proportions
   from a phone up to a wide monitor without needing media queries. */
.akij-shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.akij-arc-tr {
	top: -22vw;
	right: -14vw;
	width: 36vw;
	height: 36vw;
	border: 3.2vw solid rgba(255,255,255,.12);
}

.akij-arc-tr-2 {
	top: -8vw;
	right: -6vw;
	width: 26vw;
	height: 26vw;
	border: 1px solid rgba(255,255,255,.35);
}

.akij-arc-bl {
	bottom: -20vw;
	left: -16vw;
	width: 44vw;
	height: 44vw;
	border: 3.2vw solid rgba(255,255,255,.12);
}

.akij-arc-bl-2 {
	bottom: -7vw;
	left: -5vw;
	width: 24vw;
	height: 24vw;
	border: 1px solid rgba(255,255,255,.30);
}

.akij-streak {
	position: absolute;
	height: 2px;
	background: rgba(255,255,255,.55);
	transform: rotate(-45deg);
	pointer-events: none;
}

.akij-streak-1 { top: 4vw;  left: -3vw;  width: 14vw; }
.akij-streak-2 { top: 8vw;  left: -5vw;  width: 9vw; }
.akij-streak-3 { bottom: 6vw; right: -3vw; width: 14vw; }
.akij-streak-4 { bottom: 2vw; right: -2vw; width: 9vw; }

.akij-card {
	position: relative;
	z-index: 2;
	width:500px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 22px 50px rgba(0,0,0,.20);
	overflow: hidden;
}

.akij-card-body {
	padding: 30px;
}

.akij-logo {
	display: block;
	margin: 0 auto;
	width: 150px;
	height: auto;
}

.akij-title {
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	color: var(--akij-ink);
	letter-spacing: -.01em;
	margin-top:10px;
}

.akij-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

	.akij-divider span {
		display: block;
		height: 1px;
		width: clamp(58px, 8vw, 96px);
		background: #b9d6d8;
	}

	.akij-divider i {
		color: #2f8d93;
		font-size: 15px;
	}

.akij-label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #234b50;
}

.akij-field {
	position: relative;
}

	.akij-field i {
		position: absolute;
		top: 50%;
		left: 18px;
		transform: translateY(-50%);
		color: #93a9ab;
		font-size: 15px;
		pointer-events: none;
	}

.akij-input {
	width: 100%;
	padding: 15px 16px 15px 48px;
	font-size: 15px;
	color: #1f3b3d;
	background: #fdfefe;
	border: 1px solid #e3eaeb;
	border-radius: 10px;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

	.akij-input::placeholder {
		color: #9aa9ab;
	}

	.akij-input:focus {
		border-color: #46999f;
		box-shadow: 0 0 0 3px rgba(70,153,159,.16);
	}

.akij-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 18px;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--akij-deep);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

	.akij-submit:hover {
		background: #0b4d54;
	}

	.akij-submit:active {
		transform: translateY(1px);
	}

/* Sits flush against the card's bottom edge; the card clips its corners. */
.akij-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: clamp(64px, 8vw, 84px);
	display: block;
}

.akij-error {
	margin: 0 0 18px;
	padding: 11px 14px;
	font-size: 14px;
	border-radius: 8px;
	background: #f8d7da;
	color: #721c24;
}