@import url('variables.css');

.connexion {
	padding: 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;

	.logo {
		display: flex;
		justify-content: center;
		box-shadow: none;
		position: relative;
	}

	.title-xl {
		margin-bottom: 2rem;
		text-align: center;
	}

	.connexion-form-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
	}

	.subtitle {
		font-family: var(--font-libre-franklin);
		color: var(--color-161C2D);
		opacity: 70%;
		font-size: 20px;
		line-height: 32px;
		letter-spacing: -0.2px;
		text-align: center;
		margin-bottom: 2.5rem;
	}

	.form-section {
		border-radius: 24px;
		box-shadow: 0px 5px 20px 0px rgba(6, 28, 61, 0.12);
		background-color: rgba(255, 255, 255, 1);
		max-width: 850px;
		width: 100%;
		padding: 1.5rem 7rem;
	}

	.form-label {
		display: block;
		font-family: var(--font-libre-franklin);
		margin-bottom: 0.3rem;
	}

	fieldset {
		margin: auto;
		border: none;
		margin-bottom: 1rem;
	}

	.input {
		padding: 1rem 1.5rem;
		width: 100%;
		border: 1px solid var(--color-black);
		border-radius: 12px;
		font-size: 16px;
		margin-bottom: 0.2rem;
	}

	.form-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 2rem;
	}

	.btn {
		min-width: 40%;
		margin-top: 2rem;
		height: 52px;
		vertical-align: middle;
		background-color: var(--color-black);
	}

	.connexion-error {
		background-color: var(--color-lightred);
		border-radius: 4px;
		border: 1px solid var(--color-red);
		border-left: 4px solid var(--color-red);
		color: var(--color-red);
		padding: 0.5rem;
		margin-bottom: 1rem;
	}

	.notification {
		background-color: var(--color-white-F8F9FA);
		border-radius: 4px;
		border-left: 4px solid var(--color-darkred);
		padding: 0.5rem;
		margin-bottom: 1rem;
	}

	.success {
		background-color: var(--color-lightgreen);
		border: 1px solid var(--color-darkgreen);
		border-left: 4px solid var(--color-darkgreen);
		color: var(--color-darkgreen);
	}

	.error {
		background-color: var(--color-lightred);
		border: 1px solid var(--color-red);
		border-left: 4px solid var(--color-red);
		color: var(--color-red);
	}

	/* LOGIN PAGE */

	.pwd-label {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
	}

	.pwd-visibility-btn {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		border: none;
		background-color: transparent;
		font-size: 16px;
		color: #666666cc;
	}

	.form-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 2rem;

		a {
			font-weight: 600;
			font-size: 14px;
			letter-spacing: 0.1px;
			color: var(--color-black);
		}
	}

	.remember-me {
		display: flex;
		align-items: center;
		gap: 0.75rem;

		input[type="checkbox"] {
			width: 18px; /*Desired width*/
			height: 18px; /*Desired height*/
			cursor: pointer;
		}
	}

	.login-btn {
		margin-bottom: 1rem;
		display: flex;
		justify-content: center;
	}

}

@media (max-width: 768px) {
	.connexion {
		padding: 1rem;
	}

	.connexion .connexion-form-container h1 {
		font-size: 2rem;
	}

	.connexion .form-section {
		padding: 2rem;
	}

	.connexion .form-footer {
		flex-direction: column;
		gap: 1rem;
	}
}