/* Button loading state */
.btn-login {
	position: relative;
	transition: all 0.3s ease;
}

.btn-login.loading {
	background-color: #0B610B;
	padding-left: 40px; /* Make space for the spinner */
}

.btn-login.loading span,
.btn-login.loading i {
	opacity: 0;
	visibility: hidden;
}

.btn-login.loading::before {
	content: "Signing in...";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: white;
}

.btn-login.loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: calc(50% - 10px);
	left: 15px; /* Position the spinner to the left side */
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	animation: spin 1s ease-in-out infinite;
}




.btn-recovery {
	position: relative;
	transition: all 0.3s ease;
}

.btn-recovery.loading {
	background-color: #0B610B;
	padding-left: 40px; /* Make space for the spinner */
}

.btn-recovery.loading span,
.btn-recovery.loading i {
	opacity: 0;
	visibility: hidden;
}

.btn-recovery.loading::before {
	content: "Recovering password...";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: white;
}

.btn-recovery.loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: calc(50% - 10px);
	left: 15px; /* Position the spinner to the left side */
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	animation: spin 1s ease-in-out infinite;
}




.btn-reset {
	position: relative;
	transition: all 0.3s ease;
}

.btn-reset.loading {
	background-color: #0B610B;
	padding-left: 40px; /* Make space for the spinner */
}

.btn-reset.loading span,
.btn-reset.loading i {
	opacity: 0;
	visibility: hidden;
}

.btn-reset.loading::before {
	content: "Resetting password...";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: white;
}

.btn-reset.loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: calc(50% - 10px);
	left: 15px; /* Position the spinner to the left side */
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	animation: spin 1s ease-in-out infinite;
}



@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Form animations */
.login-form-container.submitting .form-group,
.login-form-container.submitting .remember-container,
.login-form-container.submitting .forgot-password {
	opacity: 0.7;
	pointer-events: none;
}

/* Success animation */
@keyframes success-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.login-card.success {
	animation: success-pulse 0.5s ease-in-out;
	box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
}

/* Optional: add this if you want a more subtle fill animation */
.form-control {
	transition: all 0.3s ease;
}

.form-control.filled {
	background-color: #f8f9fa;
	border-color: #3a7bd5;
}