/*!
 * Copyright (c) 2024 StyloPress - CodeWS.online
 * This file is part of StyloPress.
 *
 * This file is licensed under the same terms as the main plugin (GNU GPL v2 or later).
 */

html {
	display: var(--spss-lp-display-grid);
	place-items: var(--spss-lp-place-items);
	width: var(--spss-lp-full-width);
	height: var(--spss-lp-full-height);
	padding: var(--spss-lp-padding-zero);
	margin: var(--spss-lp-margin-zero);
}

html::before {
	content: var(--spss-lp-before-content);
	position: var(--spss-lp-position-absolute);
	top: var(--spss-lp-top-zero);
	left: var(--spss-lp-left-zero);
	width: var(--spss-lp-full-width);
	height: var(--spss-lp-full-height);
	background-color: var(--spss-lp-background-overlay);
	z-index: var(--spss-lp-z-index-plus-1);
}

body > div {
	z-index: var(--spss-lp-z-index-plus-1);
}

body.login {
	font-family: var(--spss-lp-google-font-family);
	font-weight: var(--spss-lp-google-font-weight);
	position: var(--spss-lp-position-relative);
	overflow: var(--spss-lp-overflow-hidden);
	background-color: var(--spss-lp-background-color);
	background-image: var(--spss-lp-background-image);
	background-size: var(--spss-lp-background-image-size);
	background-repeat: var(--spss-lp-background-repeat);
	background-position: var(--spss-lp-background-position);
	width: var(--spss-lp-background-border-width);
	height: var(--spss-lp-background-border-height);
	display: var(--spss-lp-display-flex);
	justify-content: var(--spss-lp-justify-content-center);
	align-items: var(--spss-lp-align-items-center);
	flex-direction: var(--spss-lp-flex-direction-column);
}

@media only screen and (max-width: 768px) {
	body.login {
		background-image: var(--spss-lp-background-image-mobile);
	}
}

body.login #login .wp-login-logo a {
	background-image: var(--spss-lp-logo-image);
	background-size: var(--spss-lp-logo-background-size-cover);
	width: var(--spss-lp-logo-width);
	height: var(--spss-lp-logo-height);
	display: var(--spss-lp-logo-hidden);
	animation: var(--spss-lp-logo-rotation-enabled);
}

@media only screen and (max-width: 768px) {
	body.login #login .wp-login-logo a {
		background-size: var(--spss-lp-logo-background-size-contain);
		width: var(--spss-lp-full-width);
	}
}

@keyframes spss-animation-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

body.login #login {
	padding: var(--spss-lp-padding-zero);
	width: var(--spss-lp-form-width);
}

body.login #login #loginform,
body.login #login #registerform,
body.login #login #lostpasswordform {
	max-width: var(--spss-lp-form-width);
	background-color: var(--spss-lp-form-background-color);
	background-image: var(--spss-lp-form-background-image);
	background-size: var(--spss-lp-form-image-background-size);
	background-repeat: var(--spss-lp-form-image-background-repeat);
	background-position: var(--spss-lp-form-image-background-position);
	border-radius: var(--spss-lp-form-border-radius);
	box-shadow: var(--spss-lp-box-shadow-style);
	padding: var(--spss-lp-form-padding);
	border-width: var(--spss-lp-form-border-width);
	border-style: var(--spss-lp-form-border-style);
	border-color: var(--spss-lp-form-border-color);
	margin-top: var(--spss-lp-form-margin-top);
}

@media only screen and (max-width: 768px) {
	body.login #login {
		width: var(--spss-lp-login-form-max-width-mobile);
	}

	body.login #login #loginform {
		max-width: var(--spss-lp-login-form-max-width-mobile);
	}
}

body.login #login #loginform label,
body.login #login #registerform label,
body.login #login #registerform #reg_passmail,
body.login #login #lostpasswordform label {
	color: var(--spss-lp-input-label-color);
	font-size: var(--spss-lp-input-label-font-size);
}

body.login #login #loginform input,
body.login #login #registerform input,
body.login #login #lostpasswordform input {
	background-color: var(--spss-lp-input-background-color);
	border-radius: var(--spss-lp-input-field-border-radius);
	border-color: var(--spss-lp-input-field-border-color);
	border-width: var(--spss-lp-input-field-border-width);
	border-style: var(--spss-lp-input-field-border-style);
	color: var(--spss-lp-input-field-text-color);
}

body.login #login #loginform input#rememberme {
	border: 1px solid var(--spss-lp-input-field-border-color);
}

body.login #login #loginform input:focus,
body.login #login #registerform input:focus,
body.login #login #lostpasswordform input:focus {
	outline: var(--spss-lp-none-value);
	box-shadow: var(--spss-lp-none-value);
}

body.login #login #loginform p.forgetmenot {
	display: var(--spss-lp-remember-me-toggle-display);
	float: var(--spss-lp-float-remember-me-input);
	width: var(--spss-lp-form-remember-me-width);
	color: var(--spss-lp-input-field-text-color);
}

body.login #login #loginform .button.wp-hide-pw .dashicons {
	color: var(--spss-lp-input-field-password-eye-color);
	transition: var(--spss-lp-transition-all);
}

body.login #login #loginform .button.wp-hide-pw .dashicons:hover {
	color: var(--spss-lp-input-field-password-eye-color-hover);
}

body.login #login #loginform p.submit #wp-submit,
body.login #login #registerform p.submit #wp-submit,
body.login #login #lostpasswordform p.submit #wp-submit {
	display: var(--spss-lp-display-submit-button);
	float: var(--spss-lp-float-submit-button);
	min-width: var(--spss-lp-button-width);
	line-height: var(--spss-lp-line-height-1);
	color: var(--spss-lp-button-text-color);
	background-color: var(--spss-lp-button-color);
	font-size: var(--spss-lp-button-text-size);
	border-style: var(--spss-lp-button-border-style);
	border-width: var(--spss-lp-button-border-width);
	border-color: var(--spss-lp-button-border-color);
	border-radius: var(--spss-lp-button-border-radius);
	text-transform: var(--spss-lp-button-text-style);
	font-weight: var(--spss-lp-button-text-weight);
	margin: var(--spss-lp-button-top-margin) 0 0 0;
	transition: var(--spss-lp-transition-all);
}

body.login #login #loginform p.submit #wp-submit:hover,
body.login #login #registerform p.submit #wp-submit:hover,
body.login #login #lostpasswordform p.submit #wp-submit:hover {
	color: var(--spss-lp-button-text-color-hover);
	background-color: var(--spss-lp-button-color-hover);
}

body.login .button.wp-hide-pw:focus {
	background: var(--spss-lp-none-value);
	background-color: var(--spss-lp-transparent-value);
	border-color: var(--spss-lp-transparent-value);
	box-shadow: var(--spss-lp-none-value);
	outline: var(--spss-lp-none-value);
}

body.login #login #nav {
	display: var(--spss-lp-footer-first-label-display);
	margin: var(--spss-lp-footer-label-margin);
	padding: var(--spss-lp-padding-zero);
	color: var(--spss-lp-footer-text-color);
}

body.login #login #nav a {
	color: var(--spss-lp-footer-text-color);
	font-size: var(--spss-lp-footer-label-font-size);
	transition: var(--spss-lp-transition-all);
}

body.login #login #nav a:hover {
	color: var(--spss-lp-footer-text-color-hover);
}

body.login #login #nav a:focus {
	box-shadow: var(--spss-lp-none-value);
	outline: var(--spss-lp-none-value);
}

body.login #login #backtoblog {
	display: var(--spss-lp-footer-second-label-display);
	margin: var(--spss-lp-footer-label-margin);
	padding: var(--spss-lp-padding-zero);
}

body.login #login #backtoblog a {
	color: var(--spss-lp-footer-text-color);
	font-size: var(--spss-lp-footer-label-font-size);
	transition: var(--spss-lp-transition-all);
}

body.login #login #backtoblog a:hover {
	color: var(--spss-lp-footer-text-color-hover);
}

body.login #login .notice-info,
body.login #login .notice-error {
	background-color: var(--spss-lp-notice-background-color);
	border-left-width: var(--spss-lp-notice-border-left-width);
	border-radius: var(--spss-lp-notice-border-radius);
	box-shadow: var(--spss-lp-box-shadow-style);
	border-top-color: var(--spss-lp-notice-border-color);
	border-right-color: var(--spss-lp-notice-border-color);
	border-bottom-color: var(--spss-lp-notice-border-color);
	border-top-width: var(--spss-lp-pixel-1);
	border-bottom-width: var(--spss-lp-pixel-1);
	border-right-width: var(--spss-lp-pixel-1);
	border-top-style: var(--spss-lp-border-solid);
	border-bottom-style: var(--spss-lp-border-solid);
	border-right-style: var(--spss-lp-border-solid);
}

body.login #login .notice-info {
	border-left-color: var(--spss-lp-notice-info-left-border-color);
}

body.login #login .notice-error {
	border-left-color: var(--spss-lp-notice-error-left-border-color);
}

body.login #login .notice-info p,
body.login #login .notice-error p,
body.login #login .notice-error ul li {
	color: var(--spss-lp-notice-text-color);
	font-size: var(--spss-lp-notice-font-size);
}