/* Blue Demos — branded wp-login.php (served at /login/). Built on
   blue-brand.css (light default; amber accent; ink type on light surfaces). */

body.login {
	background: var(--bg);
	background-image: var(--wash);
	font-family: var(--font);
	padding: 0;
}

#login { width: 380px; padding-top: 8vh; }

/* Logo (image set inline via wp_add_inline_style) */
#login h1 a { margin: 0 auto 28px; }

/* Notices + intro -------------------------------------------------------- */
.bd-login-intro { margin-bottom: 0; }
.bd-login-notice {
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
	line-height: 1.45;
	margin: 0 0 16px;
}
.bd-login-notice--ok { background: rgba(0, 192, 116, .1); color: #056b43; border: 1px solid rgba(0, 192, 116, .35); }
.bd-login-notice--err { background: rgba(230, 75, 98, .08); color: #a72438; border: 1px solid rgba(230, 75, 98, .35); }

/* Core login form -------------------------------------------------------- */
.login form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow);
	padding: 26px 24px;
	margin-top: 16px;
}
.login form label { color: var(--ink); font-weight: 500; font-size: 13px; }
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	font-size: 15px;
	padding: 10px 12px;
}
.login form .input:focus,
.login input:focus {
	border-color: var(--blue-amber);
	box-shadow: 0 0 0 2px rgba(249, 156, 36, .25);
	outline: none;
}

/* WP core notices inside the card get the light treatment too. */
.login #login_error,
.login .message,
.login .success {
	border-radius: 10px;
	border-left-width: 3px;
	box-shadow: var(--shadow);
}

/* Auth actions — three visually-consistent buttons: email link, password,
   passkey. Identical geometry + typography; color alone distinguishes the
   primary (amber, ink type — the highlighter pairing) from the secondary
   (ghost) actions. Flex centering keeps each icon on the label's centerline. */
.bd-auth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 12px 0 0;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.bd-auth-btn__icon { flex: 0 0 auto; display: block; }
.bd-auth-btn__label { line-height: 1; }

/* Primary — email me a sign-in link (amber ground, ink type). */
.bd-auth-btn--primary {
	background: var(--blue-amber);
	border-color: var(--blue-amber);
	color: var(--blue-ink);
}
.bd-auth-btn--primary:hover { background: #ffae45; border-color: #ffae45; color: var(--blue-ink); }

/* Secondary — password + passkey (ghost/outline). */
.bd-auth-btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}
.bd-auth-btn--ghost:hover {
	border-color: var(--accent-edge);
	color: var(--accent-ink);
	background: var(--accent-wash);
}

/* RSS Pro injects its own icon (svg/img) inside the passkey button — normalize
   its size; flex centering (from .bd-auth-btn) fixes the low-baseline icon. */
#rsssl-passkey-button svg,
#rsssl-passkey-button img {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
	vertical-align: middle;
}

/* RSS Pro 9.5.x passkey markup: an .or-divider plus #passkey-login-button
   (WP .button-primary blue) inside #rsssl-passkey-button-container. Its own
   stylesheet targets it via `#login:has(...)` rules, so match that specificity
   to pull the button back into the ghost-action look. */
body.login #login .or-divider { color: var(--muted); font-size: 13px; margin: 16px 0 6px; }
body.login #login:has(#passkey-login-button) .or-divider::before,
body.login #login:has(#passkey-login-button) .or-divider::after { border-bottom: 1px solid var(--line); }
#login:has(#passkey-login-button) #rsssl-passkey-button-container { margin-top: 6px; }
#login:has(#passkey-login-button) #passkey-login-button.button-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 12px 16px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-shadow: none;
	box-shadow: none;
}
#login:has(#passkey-login-button) #passkey-login-button.button-primary:hover {
	border-color: var(--accent-edge);
	color: var(--accent-ink);
	background: var(--accent-wash);
}
#passkey-login-button .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
	margin: 0 !important;
}

/* Password submit (revealed with the password field). Matches the button
   geometry; it's an <input>, so it stays block-level with no icon. */
#wp-submit {
	display: block;
	float: none;
	width: 100%;
	margin: 12px 0 0;
	padding: 12px 16px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
#wp-submit:hover {
	border-color: var(--accent-edge);
	color: var(--accent-ink);
	background: var(--accent-wash);
}

/* Collapse the password field + its submit until "Use a password" is clicked. */
#loginform.bd-pw-collapsed .user-pass-wrap,
#loginform.bd-pw-collapsed .submit { display: none; }

/* Magic-link status message inside #loginform. */
.bd-magic-inline { margin: 0; }
.bd-magic-inline__msg {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}

/* Hide the Remember Me row. */
.login .forgetmenot { display: none; }

/* Footer links ----------------------------------------------------------- */
.login #nav { text-align: center; }
.login #nav a { color: var(--muted) !important; }
.login #nav a:hover { color: var(--accent-ink) !important; }
.login #backtoblog { display: none; }
.login .privacy-policy-page-link { display: none; }
.login .language-switcher { display: none; }