@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

:root {
	--bg-basil-50: #f4f5f0;
	--bg-basil-100: #e4e9de;
	--bg-basil-200: #cdd6c0;
	--bg-basil-300: #adbb9b;
	--bg-basil-400: #899c71;
	--bg-basil-500: #72865c;
	--bg-basil-600: #596947;
	--bg-basil-700: #455239;
	--bg-basil-800: #3a4331;
	--bg-basil-900: #333b2c;
	--bg-basil-950: #191e15;
	--bg-sunburn-50: #fef3ee;
	--bg-sunburn-100: #fde3d7;
	--bg-sunburn-200: #f9c4af;
	--bg-sunburn-300: #f59b7c;
	--bg-sunburn-400: #f16e4e;
	--bg-sunburn-500: #ec4223;
	--bg-sunburn-600: #de2a18;
	--bg-sunburn-700: #b81c16;
	--bg-sunburn-800: #921a1a;
	--bg-sunburn-900: #761818;
	--bg-sunburn-950: #400a0c;
}

* {
	font-family: 'Raleway', sans-serif;
}

p, a {
	user-select: none;
}

a:focus {
	outline: none;
	box-shadow: none !important;
}

body.login {
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Bloc principal */
#login {
	width: 25%;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	backdrop-filter: blur(10px);
	border: 1px solid white;
	border-radius: 20px;
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Logo Eliophot */
.login h1 {
	margin: 2rem 0 3rem 0 !important;
}

.login h1 a {
	height: 3rem;
	width: auto;
	margin: 0 !important;
	/*default background set to avoid wordpress logo*/
	background: var(--header-image, url("https://medias.eliophot.com/spark/logo.svg")) center center / contain no-repeat !important;
}

.login .wp-login-logo {
	text-align: center;
	display: flex;
	justify-content: center;
}

.login .wp-login-logo a {
	width: 35%;
}

/* Message de déconnexion */
.login #login-message {
	background-color: var(--bg-basil-200);
	border-left-color: var(--bg-basil-600);
}

/* Formulaire de connexion */
.login #loginform, .login #lostpasswordform {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background-color: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	color: white;
}

.login #lostpasswordform {
	align-items: center;
}


/* Inputs connexion et mot de passe */
.login #loginform #user_login,
.login #loginform #user_pass {
	padding: 8px 12px;
	font-size: 16px;
	background-color: white;
	border: 1px solid var(--bg-basil-800);
	border-radius: 0.25rem;
	margin: 0 !important;
}

.login #loginform #user_login,
.login #loginform #user_pass {
	transition: all 0.3s;
}

.login #loginform #user_login:focus,
.login #loginform #user_pass:focus {
	border-color: var(--bg-basil-900);
}

.login #loginform p:nth-of-type(1) label,
.login #loginform .user-pass-wrap label {
	margin-bottom: 0.5rem;
	font-size: 1rem;
	color: white;
	user-select: none;
}

.login #loginform .user-pass-wrap .dashicons {
	color: var(--bg-basil-600);
}

/* Check in Remember me */
.forgetmenot label {
	color: white;
	font-size: 1rem;
}

/* Bouton Connexion Texte */
.login #loginform .submit #wp-submit, .login #lostpasswordform .submit #wp-submit {
	color: white;
	font-size: 1rem;
	background-color: var(--bg-basil-600);
	width: 100%;
	padding: 4px 8px;
	border: var(--bg-basil-300) solid 1px;
	border-radius: 0.25rem;
	transition: all 0.5s;
}

.login #loginform .submit #wp-submit:hover, .login #lostpasswordform .submit #wp-submit:hover {
	background-color: var(--bg-basil-500);
}

/* Forget password */
.login #nav {
	text-align: center;
	margin-top: 1rem;
}

.login #nav a {
	color: white;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.login #nav,
.login #nav a {
	transition: all 1s;
}

.login #nav:hover a, .login #nav a:focus, .login #nav:hover a {
	color: var(--bg-basil-100);
	text-decoration: none;
}

.login .notice-error {
	background-color: var(--bg-sunburn-100);
	border-radius: .25rem;
	border: var(--bg-sunburn-300) 1px solid;
}

.login .notice-info {
	background-color: var(--bg-basil-100);
	border-radius: .25rem;
	border: var(--bg-basil-300) 1px solid;
}

.user-pass-wrap button,
.user-pass-wrap button:focus,
.user-pass-wrap .dashicons,
.user-pass-wrap .dashicons:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

@media screen and (max-width: 1200px) {
	#login {
		width: 70%;
	}
}

#wp-submit,
#wp-submit:focus,
label:focus,
label:focus-visible {
	outline: none;
	box-shadow: none;
	border: none;
}

input[type=checkbox] {
	border: 1px solid var(--bg-basil-800);
	color: var(--bg-basil-800);
}

.forgetmenot label {
	font-size: 1rem;
	user-select: none;
}