/**
 * Login Branding – Login-Screen-CSS.
 *
 * Greift auf wp-login.php in allen Screen-Varianten:
 *   - Standard-Login (user + pass)
 *   - 2FA-Code-Eingabe (Two Factor Plugin)
 *   - "Passwort vergessen?" und "Passwort zurücksetzen"
 *   - Login-Fehler / Bestätigungs-Meldungen
 *
 * Selektoren sind feldagnostisch:
 *   - .login form .input deckt alle WordPress-Input-Felder ab
 *   - Type-Attribute-Selektoren fangen 2FA-Code-Inputs (tel/number)
 *   - .button-primary deckt alle Submit-Buttons ab (Standard, 2FA, Reset)
 *
 * CSS-Custom-Properties werden via Inline-CSS aus den Settings befüllt:
 *   --lb-primary       Primärfarbe (Button, Akzente, Headline)
 *   --lb-bg-fallback   Hintergrund-Solid-Color (wenn kein Bild)
 *   --lb-blur          Blur-Pixel-Wert für Hintergrundbild
 *   --lb-bg-image      url("...") für Hintergrundbild (optional)
 *   --lb-logo-image    url("...") für Logo (optional)
 */

/* =====================================================================
 * Body – Hintergrund + zentrales Layout
 * ================================================================== */

body.login {
	margin: 0;
	padding: 40px 16px;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: var(--lb-bg-fallback, #2a2a8a);
	background-image: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	position: relative;
	overflow-x: hidden;
	/* Wichtig: erzeugt einen lokalen Stacking-Context, damit backdrop-filter
	   auf der Login-Box das body::before-Hintergrundbild "sieht".
	   Ohne dieses Property wandert body::before mit z-index:-1 in den
	   Root-Stacking-Context und ist für backdrop-filter unsichtbar. */
	isolation: isolate;
}

/* Hintergrundbild mit Blur – Pseudo-Element, damit die Login-Box scharf bleibt */
body.login::before {
	content: '';
	position: fixed;
	inset: -40px;
	background-image: var(--lb-bg-image, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: blur(var(--lb-blur, 0px));
	z-index: -1;
	pointer-events: none;
}

/* =====================================================================
 * Branding-Header (vor dem #login-Container)
 * ================================================================== */

.lb-brand-header {
	width: 100%;
	max-width: 380px;
	text-align: center;
	margin: 0;
	color: #ffffff;
}

.lb-brand-logo {
	margin-bottom: 12px;
}

.lb-brand-logo img {
	display: inline-block;
	max-width: 100%;
	max-height: var(--lb-logo-height, 90px);
	width: auto;
	height: auto;
}

.lb-brand-headline {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 4px;
	color: var(--lb-headline-color, #ffffff);
}

.lb-brand-subline {
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	color: var(--lb-subline-color, #d4d4d4);
}

/* =====================================================================
 * #login-Container und Form
 * ================================================================== */

.login #login {
	width: 100%;
	max-width: 380px;
	padding: 0;
	margin: 0;
}

.login form {
	background: var(--lb-form-bg, rgba(255, 255, 255, 0.92));
	backdrop-filter: var(--lb-glass-filter, none);
	-webkit-backdrop-filter: var(--lb-glass-filter, none);
	border: 1px solid var(--lb-glass-border-color, transparent);
	border-radius: 12px;
	padding: 28px 28px;
	box-shadow: var(--lb-box-shadow, 0 8px 32px rgba(0, 0, 0, 0.18));
	margin-top: 0;
	margin-left: 0;
	overflow: hidden;
	box-sizing: border-box;
}

/* Fallback für Browser ohne backdrop-filter-Support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.login form {
		background: rgba(255, 255, 255, 0.92);
	}
}

/* Mehr Abstand zwischen den Form-Elementen für angenehme Lesbarkeit */
.login form p,
.login form .user-pass-wrap {
	margin: 0 0 16px;
}

.login form .submit {
	margin: 4px 0 0;
}

/* Labels */
.login form label {
	display: block;
	color: var(--lb-form-text-color, #2c2c3a);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 4px;
}

/* =====================================================================
 * Input-Felder – feldagnostisch
 * Greift auf user_login, user_pass, 2FA-Code, Lost-PW-Email, Reset-PW etc.
 * ================================================================== */

.login form .input,
.login form input[type="text"],
.login form input[type="email"],
.login form input[type="password"],
.login form input[type="number"],
.login form input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	padding: 10px 12px;
	margin: 0;
	background: #f4f4ff;
	border: 1px solid #d6d6e8;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.4;
	color: #1a1a2a;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.login form .input:focus,
.login form input[type="text"]:focus,
.login form input[type="email"]:focus,
.login form input[type="password"]:focus,
.login form input[type="number"]:focus,
.login form input[type="tel"]:focus {
	border-color: var(--lb-primary, #646cff);
	outline: 2px solid var(--lb-primary, #646cff);
	outline-offset: -1px;
	box-shadow: none;
	background: #ffffff;
}

/* Password-Eye-Button (Show/Hide) — robuste absolute Positionierung
   damit der Button immer rechtsbündig im Input sitzt, auch auf Mobile */
.login form .wp-pwd {
	position: relative;
}

.login form .wp-pwd input.password-input,
.login form .wp-pwd input[type="password"],
.login form .wp-pwd input[type="text"] {
	padding-right: 48px;
}

.login form .wp-pwd .button.wp-hide-pw {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 44px;
	min-width: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0 6px 6px 0;
	box-shadow: none;
	color: var(--lb-primary, #646cff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.login form .wp-pwd .button.wp-hide-pw:hover,
.login form .wp-pwd .button.wp-hide-pw:focus {
	background: transparent;
	color: var(--lb-primary, #646cff);
	box-shadow: none;
	filter: brightness(0.9);
	outline: none;
}

.login form .wp-pwd .button.wp-hide-pw .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
	color: inherit;
}

/* =====================================================================
 * "Angemeldet bleiben" Checkbox
 * ================================================================== */

.login form .forgetmenot {
	float: none;
	margin: 0 0 8px;
}

.login form .forgetmenot label {
	display: inline-block;
	color: var(--lb-form-text-color, #4a4a5a);
	font-size: 13px;
	font-weight: 400;
	margin: 0;
}

/* =====================================================================
 * Submit-Button (Standard, 2FA, Lost-PW, Reset)
 * ================================================================== */

.login form .submit {
	margin: 0;
	padding: 0;
}

.login form .button-primary,
.login form input[type="submit"].button-primary,
.login form input[type="submit"] {
	width: auto;
	float: right;
	background: var(--lb-primary, #646cff);
	border: none;
	border-radius: 6px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 22px;
	height: auto;
	min-height: 0;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.login form .button-primary:hover,
.login form .button-primary:focus,
.login form .button-primary:active,
.login form input[type="submit"]:hover,
.login form input[type="submit"]:focus,
.login form input[type="submit"]:active {
	background: var(--lb-primary, #646cff);
	color: #ffffff;
	border: none;
	box-shadow: none;
	filter: brightness(1.1);
	outline: none;
}

/* "Generate Password"-Button auf dem Reset-Screen */
.login form .button.wp-generate-pw {
	background: transparent;
	border: 1px solid var(--lb-primary, #646cff);
	color: var(--lb-primary, #646cff);
	border-radius: 6px;
	box-shadow: none;
}

.login form .button.wp-generate-pw:hover,
.login form .button.wp-generate-pw:focus {
	background: var(--lb-primary, #646cff);
	color: #ffffff;
	border-color: var(--lb-primary, #646cff);
	box-shadow: none;
}

/* =====================================================================
 * Links unter der Box: #nav (Passwort vergessen) und #backtoblog
 * ================================================================== */

.login #nav,
.login #backtoblog {
	width: 100%;
	max-width: 380px;
	text-align: center;
	padding: 0;
	margin: 0;
	font-size: 13px;
}

.login #nav a,
.login #backtoblog a {
	color: var(--lb-footer-link-color, #ffffff);
	text-decoration: none;
	border-bottom: 1px dotted var(--lb-footer-link-border, rgba(255, 255, 255, 0.5));
	padding-bottom: 1px;
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus {
	color: var(--lb-footer-link-color, #ffffff);
	border-bottom-color: var(--lb-footer-link-color, #ffffff);
	box-shadow: none;
	outline: none;
}

/* =====================================================================
 * Language-Switcher
 * ================================================================== */

.login .language-switcher {
	width: 100%;
	max-width: 380px;
	margin: 0;
	text-align: center;
}

.login .language-switcher select {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	padding: 6px 10px;
	color: #1a1a2a;
}

.login .language-switcher input[type="submit"] {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #ffffff;
	border-radius: 6px;
	padding: 6px 14px;
	box-shadow: none;
	float: none;
}

.login .language-switcher input[type="submit"]:hover,
.login .language-switcher input[type="submit"]:focus {
	background: rgba(255, 255, 255, 0.15);
	border-color: #ffffff;
	color: #ffffff;
	filter: none;
}

/* =====================================================================
 * Meldungen: Errors, Success, Info
 * ================================================================== */

.login #login_error,
.login .message,
.login .notice {
	width: 100%;
	max-width: 380px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.95);
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: var(--lb-primary, #646cff);
	border-radius: 6px;
	padding: 12px 16px;
	margin: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	color: #1a1a2a;
}

.login #login_error a,
.login .message a,
.login .notice a {
	color: var(--lb-primary, #646cff);
}

/* =====================================================================
 * Reset-PW "Strength Indicator" und Hinweise
 * ================================================================== */

.login form .indicator-hint {
	color: #4a4a5a;
}

.login form #pass-strength-result {
	border-radius: 4px;
	margin-top: 8px;
}

/* =====================================================================
 * "Privacy Policy"-Link am Fuß der Seite (Reset-Screen)
 * ================================================================== */

.login .privacy-policy-page-link {
	width: 100%;
	max-width: 380px;
	text-align: center;
}

.login .privacy-policy-page-link a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}

.login .privacy-policy-page-link a:hover {
	color: #ffffff;
}

/* =====================================================================
 * Mobile – Anpassungen unter 480px
 * ================================================================== */

@media (max-width: 480px) {

	body.login {
		padding: 20px 12px;
		gap: 14px;
	}

	.lb-brand-headline {
		font-size: 22px;
	}

	.lb-brand-subline {
		font-size: 13px;
	}

	.lb-brand-logo img {
		max-width: 100%;
		max-height: calc(var(--lb-logo-height, 90px) * 0.78);
	}

	.login form {
		padding: 26px 22px;
	}

	.login form p,
	.login form .user-pass-wrap {
		margin-bottom: 18px;
	}

	.login form .input,
	.login form input[type="text"],
	.login form input[type="email"],
	.login form input[type="password"],
	.login form input[type="number"],
	.login form input[type="tel"] {
		padding: 12px 14px;
		font-size: 16px; /* verhindert iOS-Zoom beim Fokussieren */
	}

	.login form .wp-pwd input.password-input,
	.login form .wp-pwd input[type="password"],
	.login form .wp-pwd input[type="text"] {
		padding-right: 52px;
	}

	.login form .wp-pwd .button.wp-hide-pw {
		width: 48px;
	}

	.login form .button-primary,
	.login form input[type="submit"] {
		width: 100%;
		float: none;
		padding: 12px 22px;
		font-size: 15px;
	}

	.login form .forgetmenot {
		display: block;
		margin-bottom: 18px;
	}
}

/* =====================================================================
 * Sehr niedrige Viewports (Querformat-Handy)
 * ================================================================== */

@media (max-height: 600px) {

	body.login {
		justify-content: flex-start;
		padding-top: 20px;
	}
}