@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

body {
	font-family: 'Poppins', sans-serif;
	height: 100vh;
	overflow-x: hidden;
}

.gradient-bg {
	background: linear-gradient( 135deg, rgba(13, 110, 253, 0.7), rgba(255, 255, 255, 0.3) ), url('/img/login.png') no-repeat center center;
	background-size: cover;
	position: relative;
}

.tagline {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	color: white;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.login-card {
	max-width: 450px;
	animation: fadeIn 0.8s ease-out;
}

.input-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #6c757d;
	font-size: 1.1rem;
}

.form-control {
	padding-left: 2.75rem; /* increase icon spacing */
	border-radius: 0.5rem;
}


.btn-primary {
	transition: opacity 0.3s;
}

	.btn-primary:hover {
		opacity: 0.9;
	}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767.98px) {
	.gradient-bg {
		height: 200px;
	}
}
/* === Password Toggle === */
.toggle-password {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #6c757d;
	cursor: pointer;
	font-size: 1.1rem;
	transition: color 0.2s;
}

	.toggle-password:hover {
		color: #0d6efd;
	}

/* === Error Toast Animation === */
#errorToast {
	opacity: 0;
	animation: fadeInDown 0.5s ease forwards;
	z-index: 1055;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate(-50%, -20px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}