/**
 * public/css/login.css
 *
 * Estilo da tela pública de login (wp-login.php). Totalmente
 * independente do FSP Admin Core — carregado apenas nesta tela,
 * sem dependências externas (item 27 do escopo: performance).
 *
 * As variáveis --lp-* são geradas dinamicamente pelo PHP
 * (LP_Login::inline_css_vars) a partir das configurações salvas.
 */

/* ── Reset leve da página nativa ─────────────────────────────── */
html.login,
body.login,
body.login * {
	box-sizing: border-box;
}

body.login {
	background-color: var( --lp-page-bg, #f5f5f7 );
	min-height: 100vh;
	display: flex;
	align-items: stretch;
	overflow-x: hidden;
}
/*
body.login.lp-login #login {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}
*/
body.login.lp-login #login {
    width: 420px;
    max-width: none;
    padding: 0;
    margin: 0;
    padding: 40px 35px;
	    border-radius: 20px;
}

/* Oculta o h1/logo nativo — substituído pelo bloco .lp-header */
body.login.lp-login #login h1 {
	display: none;
}

/* ── Shell: grade de duas colunas (banner + login) ───────────── */
.lp-shell {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	min-height: 100vh;
	position: relative;
}

body.login.lp-no-banner .lp-shell {
	justify-content: center;
	align-items: center;
}

/* Coluna do login = o próprio #login nativo do WordPress */
/*
.lp-shell #login {
	flex: 1 1 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px 24px;
	order: 2;
	background: var( --lp-login-bg, #fff );
}
*/
.lp-shell #login {
    /* flex: 1 1 390px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
    order: 2;
    background: var(--lp-login-bg, #fff);
}

.lp-shell #login > * {
	width: 100%;
	max-width: var( --lp-login-maxwidth, 420px );
}

/*
 * Seletor de idioma nativo do WordPress (desde a 5.9). Já é removido
 * via o filtro oficial 'login_display_language_dropdown' (ver
 * LP_Login::__construct). Esta regra é só uma rede de segurança caso
 * outro plugin volte a exibi-lo por outro caminho.
 */
.lp-shell > .language-switcher {
	display: none;
}

#loginform {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: var( --lp-login-padding, 40px ) 0 0;
}

.login form {overflow: inherit !important;}

/* ── Cabeçalho: logo, título, descrição ──────────────────────── */
.lp-header {
	width: 100%;
	max-width: var( --lp-login-maxwidth, 420px );
	margin: 0 auto;
	text-align: left;
}
.lp-logo {
	display: inline-block;
	margin-bottom: 24px;
	text-decoration: none;
}
.lp-logo img {
	display: block;
	width: var( --lp-logo-width, 160px );
	max-width: 100%;
	height: auto;
}
.lp-logo-text {
	font-size: 20px;
	font-weight: 700;
	color: var( --lp-field-text, #111827 );
}
.lp-title {
	font-size: 24px;
	font-weight: 700;
	color: var( --lp-field-text, #111827 );
	margin: 0 0 8px;
}
.lp-description {
	font-size: 14px;
	color: #6b7280;
	margin: 0 0 24px;
}

/* ── Campos ───────────────────────────────────────────────────── */
.login label {
	color: var( --lp-field-text, #111827 );
	font-size: 13px;
	font-weight: 600;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: var( --lp-field-bg, #fff );
	border: 1px solid var( --lp-field-border, #d1d5db );
	border-radius: var( --lp-field-radius, 8px );
	color: var( --lp-field-text, #111827 );
	padding: 12px 14px;
	font-size: 14px;
	box-shadow: none;
	width: 100%;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var( --lp-btn-bg, #4f46e5 );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --lp-btn-bg, #4f46e5 ) 20%, transparent );
	outline: none;
}

/* Campo de senha com botão de mostrar/ocultar */
.lp-password-wrap {
	position: relative;
}
.lp-password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: #6b7280;
	line-height: 0;
}
.lp-password-toggle svg {
	width: 18px;
	height: 18px;
}

/* ── Botão de login ───────────────────────────────────────────── */
.login #wp-submit,
.login .wp-core-ui .button-primary {
	background: var( --lp-btn-bg, #4f46e5 );
	border-color: var( --lp-btn-bg, #4f46e5 );
	color: var( --lp-btn-text, #fff );
	border-radius: var( --lp-btn-radius, 8px );
	height: var( --lp-btn-height, 46px );
	line-height: var( --lp-btn-height, 46px );
	padding: 0 20px;
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	text-shadow: none;
	box-shadow: none;
	transition: background-color .15s ease;
	    margin-top: 20px;
}
.login #wp-submit:hover,
.login #wp-submit:focus {
	background: var( --lp-btn-hover, #4338ca );
	border-color: var( --lp-btn-hover, #4338ca );
	color: var( --lp-btn-text, #fff );
}

/* ── Remember me / links ──────────────────────────────────────── */
body.login.lp-remember-me-off .login form p.forgetmenot {
	display: none;
}

.login #nav,
.login #backtoblog {
	text-align: center;
	max-width: var( --lp-login-maxwidth, 420px );
	margin-left: auto;
	margin-right: auto;
}
.login #nav a,
.login #backtoblog a {
	color: var( --lp-btn-bg, #4f46e5 );
}

.login #backtoblog {
	display: none !important;
}

/* ── Rodapé customizado ───────────────────────────────────────── */
.lp-footer {
	width: 100%;
	max-width: var( --lp-login-maxwidth, 420px );
	margin: 24px auto 0;
	text-align: center;
	font-size: 12px;
	color: #9ca3af;
}

/* ── Banner lateral ───────────────────────────────────────────── */
.lp-banner {
	flex: 1 1 50%;
	order: 1;
	position: relative;
	display: flex;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background-color: #111827;
	background-image: var( --lp-banner-img, none );
	background-size: cover;
	background-position: center;
	min-height: 100vh;
}

.lp-banner-overlay {
	position: absolute;
	inset: 0;
	background: var( --lp-overlay-color, #000 );
	opacity: var( --lp-overlay-opacity, 0.4 );
}

.lp-banner-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	max-width: 480px;
	padding: 56px;
	margin: 0 auto;
}

/* Posição vertical */
.lp-banner-pos-top     { align-items: flex-start; justify-content: flex-start; }
.lp-banner-pos-center  { align-items: center;     justify-content: center; }
.lp-banner-pos-bottom  { align-items: flex-end;   justify-content: flex-end; }

/* Alinhamento horizontal do texto */
.lp-banner-align-left   .lp-banner-content { text-align: left;   align-items: flex-start; margin-left: 0; }
.lp-banner-align-center .lp-banner-content { text-align: center; align-items: center; }
.lp-banner-align-right  .lp-banner-content { text-align: right;  align-items: flex-end; margin-right: 0; }

.lp-banner-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .8;
	margin-bottom: 16px;
}
.lp-banner-title {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 16px;
}
.lp-banner-highlight {
	display: block;
	opacity: .75;
}
.lp-banner-description {
	font-size: 15px;
	line-height: 1.6;
	opacity: .85;
	margin: 0 0 28px;
	max-width: 380px;
}
.lp-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	width: fit-content;
}

/* ── Responsividade ───────────────────────────────────────────── */
@media ( max-width: 960px ) {
	.lp-banner-content { padding: 40px; }
	.lp-banner-title { font-size: 28px; }
}

@media ( max-width: 782px ) {
	.lp-shell { flex-direction: column; }

	.lp-shell #login {
		order: 2;
		min-height: auto;
		padding: 32px 20px;
	}

	.lp-banner {
		display: none;
		min-height: 240px;
		flex: 0 0 auto;
		background-image: var( --lp-banner-img-mobile, var( --lp-banner-img, none ) );
	}

	body.login.lp-mobile-banner-above .lp-banner {
		display: flex;
		order: 1;
	}
	body.login.lp-mobile-banner-below .lp-banner {
		display: flex;
		order: 3;
	}

	.lp-header,
	#loginform,
	.lp-footer,
	.login #nav,
	.login #backtoblog {
		max-width: 480px;
	}
	
	
}

@media ( max-width: 420px ) {
	body.login.lp-login #login {
		width: 310px;
		padding: 30px 22px;
	}
}