html, body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh
}

.page-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.login-badges {
	text-align: center;
	margin-top: 2.2rem; 
	margin-bottom: 1.3rem; 
}


h2 {
	text-align: center;
	margin: 2rem 0 2.5rem 0; /* adds space above/below */
	width: 100%;
	color: #00215b; /* optional: keeps ATC color scheme */
	font-size: 1.9rem;
	font-weight: bold;
	letter-spacing: 0.5px;
}

p {
	text-align: center;
}


.login-register-container {
	display: flex;
	gap: 2.5rem;
	justify-content: center;
	align-items: flex-start;
	margin: 2rem 0;
	flex-wrap: wrap;
}

.auth-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 1px 1px 5px 1px#ee4924;
	padding: 2rem 2rem 2rem 2rem;
	min-width: 290px;
	max-width: 350px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 1.4rem;
	gap: 2px;
}

.tab-btn {
	flex: 1;
	background: #f4f7fa;
	border: none;
	padding: 0.8rem;
	font-weight: bold;
	color: #003366;
	border-radius: 6px 6px 0 0;
	cursor: pointer;
	font-size: 1.04rem;
	transition: background 0.18s;
	border-bottom: 2px solid transparent;
}

	.tab-btn.active {
		background: #fff;
		border-bottom: 2px solid #003366;
		color: #003366;
		z-index: 1;
	}

.tab-content {
	display: none;
	flex-direction: column;
	gap: 1rem;
}

.auth-card form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.auth-card input[type="email"],
.auth-card input[type="password"] {
	padding: 0.8em 1em;
	margin-bottom: 15px;
	border: 1px solid #b7bfd5;
	border-radius: 5px;
	font-size: 1em;
	background: #f9fbfd;
}

.auth-card button[type="submit"] {
	padding: 0.7em 3em;
	background: #003366;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 0.7rem;
	transition: background 0.18s;
}

	.auth-card button[type="submit"]:hover,
	.auth-card button[type="submit"]:focus {
		background: #0052a2;
	}

@media (max-width: 900px) {
	.login-register-container {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}
}