/*

█   ▄▀▄ ▄▀▀  ▀ █▄ █ 
█ ▄ █ █ █ ▀▌ █ █ ▀█ 
▀▀▀  ▀  ▀▀▀  ▀ ▀  ▀ - LOGIN

DESIGN BY © LO STUDIO

This stylesheet is loaded (if admin.php is setup in your functions file) on the login page. 
This way you can style the login page. It won't affect any other page, admin or front-end.

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */


body { --login-main-color: #f7bfc2; }


/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACKGROUND ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

body.login { 
	font-size: 16px; line-height: 0;
	display: flex; align-items: center; justify-content: center;
	background: url(../images/jpg/login_bkg-small.jpg) no-repeat center center; background-size: cover; 
	background-color: #efefef;
}
#login {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 95%; max-width: 520px;
	margin: auto; padding: 5%;
	box-shadow: 0 0 7.5rem rgb(30, 30, 30, .25), 
		0 0 5rem rgb(30, 30, 30, .25), 
		0 0 2.5rem rgb(30, 30, 30, .25), 
		0 0 1rem rgb(30, 30, 30, .25), 
		0 0 .5rem rgb(30, 30, 30, .25);
	border-radius: 1em;
	background: rgba(255,255,255,.5);
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
	#login { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}


.interim-login #login {
	width: 100%; padding: 5%; margin: 0;
	box-shadow: none; background: initial;
}
.interim-login.login form { padding-bottom: 0; }




/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LANG SELECTOR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

.language-switcher { position: absolute; top: 2.5em; left: 50%; transform: translateX(-50%); max-width: 90%; }
#language-switcher { display: flex; align-items: center; justify-content: center; gap: .5em; padding: 0; border-radius: 0; overflow: visible; }
#language-switcher label { font-size: .75em; color: var(--login-main-color); text-shadow: 0 0 1.25em rgb(30,30,30,.75); margin: 0; }
#language-switcher-locales {
	font-size: .75em; line-height: 1; color: #1e1e1e;
	border-color: #1e1e1e; border-radius: .25em;
	padding: .5em 1.5em .5em 1em; background-size: 1em;
	box-shadow: 0 0 1.25em rgba(30,30,30,.75);
}
#language-switcher .button {
	font-size: .75em; line-height: 1; color: #fff;
	padding: .5em .75em; border-radius: .25em;
	border-color: var(--login-main-color); background: var(--login-main-color);
	box-shadow: 0 0 1.25em rgba(30,30,30,.75);
	transition: .25s ease;
}
#language-switcher .button:hover, #language-switcher .button:focus, #language-switcher .button:active { background-color: #ffffff; color: var(--login-main-color); }
#language-switcher .button:active { transform: scale(.95); }



/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO & FORM ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

.login h1 a {
	background: url(../images/svg/logo.svg) no-repeat top center;
	width: auto; height: 4em;
	text-indent: -9999px; overflow: hidden;
	margin-bottom: 1em;
	display: block;
}


.login #login_error, .login .message, .login .success {
	font-size: 0.875em; line-height: 1;
	border-color: var(--login-main-color);
	padding: 0.5em; margin: 0;
}


.login-action-confirm_admin_email #login { margin-top: auto; }



.login form {
	overflow: visible;
	margin: 0; padding: 1.2em 0 1.8em 0;
	font-weight: normal;
	background: transparent; box-shadow: none;
	border: none; border-radius: .2em;
}

.login label {
	font-size: .75rem; font-weight: 700; line-height: 1.25; color: #3e3e3e; text-transform: uppercase;
	margin-bottom: 0.25em;
}

.login form .input, .login input[type=password], .login input[type=text] {
	font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif; font-size: 1.1em; line-height: 1.4; font-weight: 200;
	width: 100%; padding: .5rem; margin: 0 .3em 1em 0;
	min-height: 2em; max-height: none;
	border: 1px solid rgba(30,30,30,.5); outline: none; 
	background: #FBFBFB !important; box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
	transition: .25s ease;
}
.login form .input:hover, .login form .input:active, .login form .input:focus {
	border-color: var(--login-main-color); background: #ffffff !important;
}
.login .button.wp-hide-pw {
	font-size: 1.1em; line-height: 1.4; color: #1e1e1e;
	width: 2.5rem; height: 3rem; min-width: 2em; min-height: 2em;
	margin: 0; padding: .25em .4em;
}
.login form .forgetmenot { display: flex; align-items: center; justify-content: flex-start; gap: 0.5em; }
.login form input[type=checkbox] { height: 1.5rem; width: 1.5rem; min-width: 1rem; margin: 0; }
.login form input[type=checkbox]:hover, .login form input[type=checkbox]:focus { border-color: var(--login-main-color); box-shadow: 0 0 0 1px var(--login-main-color); }
input[type=checkbox]:checked::before { margin: -0.3rem 0 0 -0.4rem !important; height: 2rem !important; width: 2rem !important; filter: brightness(0); }
.login .forgetmenot label, .login .pw-weak label { margin: 0; }

#wp-submit {
	font-size: 1em; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em;
	min-height: 2em; padding: .5em 2em;
	background: var(--login-main-color); border-color: var(--login-main-color);
	transition: .25s ease;
}
#wp-submit:hover, #wp-submit:focus, #wp-submit:active { background-color: #ffffff; color: var(--login-main-color); }
#wp-submit:active { transform: scale(.95); }

.login #backtoblog, .login #nav { font-size: .7em; padding: 0; }
.login #nav { margin: 2em 0 0 0; }
#backtoblog { margin: 1em 0 0 0; }
.login #backtoblog a, .login #nav a { font-size: 85%; color: #3e3e3e; font-weight: 700; text-transform: uppercase; transition: .25s ease; }
.login #backtoblog a:hover, .login #nav a:hover,
.login #backtoblog a:focus, .login #nav a:focus,
.login #backtoblog a:active, .login #nav a:active { color: var(--login-main-color); opacity: .75; text-decoration: underline; }

.privacy-policy-page-link { display: none !important; }



/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FORM AGGIORNA MAIL ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

.login h1.admin-email__heading { line-height: 1; }
.admin-email-confirm-form a { color: var(--login-main-color); }

.admin-email-confirm-form .button { color: var(--login-main-color); border-color: var(--login-main-color); }
.admin-email-confirm-form .button-primary { background-color: var(--login-main-color); color: #fff; }
.admin-email-confirm-form .button:hover { color: var(--login-main-color); border-color: var(--login-main-color); }
.admin-email-confirm-form .button-primary:hover { background-color: var(--login-main-color); color: #fff; }




/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ WP AUTH CHECK ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

#wp-auth-check-wrap #wp-auth-check-form iframe { height: 100%; }
#wp-auth-check-wrap #wp-auth-check body.login { background-image: none; }
#wp-auth-check-wrap #wp-auth-check #login { box-shadow: none; }

#wp-auth-check-wrap #wp-auth-check {
	left: 50%; top: 50%; bottom: auto; transform: translate(-50%,-50%);
	margin: 0; padding: 30px 0 0 0;
	background: rgba(255,255,255,.75);
	box-shadow: 0 0 7.5rem rgb(30,30,30,.25), 
		0 0 5rem rgb(30,30,30,.25), 
		0 0 2.5rem rgb(30,30,30,.25), 
		0 0 1rem rgb(30,30,30,.25), 
		0 0 0.5rem rgb(30,30,30,.25);
	border-radius: 0.75em;
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
	#wp-auth-check-wrap #wp-auth-check { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}
#wp-auth-check-wrap .wp-auth-check-close:hover, 
#wp-auth-check-wrap .wp-auth-check-close:focus, 
#wp-auth-check-wrap .wp-auth-check-close:active { color: var(--login-main-color); }
#wp-auth-check-form * { box-sizing: border-box; }
#wp-auth-check-frame #login {
	backdrop-filter: unset; box-shadow: none;
	width: 100%; padding: 1.5em; margin: 0;
	background: transparent; border-radius: 0;
}
#wp-auth-check-frame .login h1 a { margin-bottom: 1.5em; }
#wp-auth-check-frame .login .message { width: 100%; margin: 0; }
#wp-auth-check-frame .login form { padding: 1.5em 0 0 0; }




/* ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ RESPONSIVE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ */

@media screen and (min-width: 480px) {
	body.login { background-image: url(../images/jpg/login_bkg-medium.jpg); }
}

@media screen and (min-width: 768px) { 
	body.login { background-image: url(../images/jpg/login_bkg-large.jpg); }
}

@media screen and (min-width: 1024px) { 
	body.login { font-size: 18px; background-image: url(../images/jpg/login_bkg.jpg); }
}

@media screen and (min-width: 1280px) { 
	#login { width: 90%; padding: 2.5%; }
	.login h1 a { height: 5em; }
}

@media screen and (min-width: 1440px) { 
	body.login { font-size: 20px; }
}

@media screen and (min-width: 1920px) { 
	#login { padding: 2em; }
}