/**
 * Bionela login screen.
 *
 * Everything is scoped to body.bnl-login so the interim-login modal and any
 * other login variant keep the stock WordPress look.
 */

body.login.bnl-login,
body.login.bnl-login *,
body.login.bnl-login *::before,
body.login.bnl-login *::after {
	box-sizing: border-box;
}

body.login.bnl-login {
	--bnl-green: #0e5551;
	--bnl-green-dark: #0c4946;
	--bnl-accent: #6cbf3f;
	--bnl-accent-soft: #a8e07c;
	--bnl-ink: #1c2624;
	--bnl-muted: #6b7975;
	--bnl-line: #e6eae9;
	--bnl-field: #dfe5e3;
	--bnl-bg: #f7faf9;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	grid-template-rows: 1fr auto;
	align-items: stretch;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: var(--bnl-bg);
	color: var(--bnl-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.login.bnl-login a {
	color: var(--bnl-green);
	text-decoration: none;
	box-shadow: none;
}

body.login.bnl-login a:hover,
body.login.bnl-login a:focus {
	color: var(--bnl-green-dark);
	text-decoration: underline;
	box-shadow: none;
}

body.login.bnl-login input,
body.login.bnl-login button,
body.login.bnl-login select,
body.login.bnl-login label {
	font-family: inherit;
}

/* ── Left panel ───────────────────────────────────────────────── */

.bnl-login .bnl-aside {
	position: relative;
	grid-column: 1;
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 44px 52px;
	background: var(--bnl-green);
	color: #fff;
	overflow: hidden;
}

.bnl-login .bnl-aside__blob {
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
}

.bnl-login .bnl-aside__blob--top {
	top: -160px;
	right: -140px;
	width: 460px;
	height: 460px;
	background: rgba(108, 191, 63, .16);
}

.bnl-login .bnl-aside__blob--bottom {
	bottom: -220px;
	left: -120px;
	width: 520px;
	height: 520px;
	background: rgba(255, 255, 255, .05);
}

.bnl-login .bnl-aside__logo {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
}

.bnl-login .bnl-aside__logo:hover {
	text-decoration: none;
}

.bnl-login .bnl-aside__logo img {
	height: 34px;
	width: auto;
	filter: brightness(0) invert(1);
}

.bnl-login .bnl-aside__body {
	position: relative;
	max-width: 460px;
}

.bnl-login .bnl-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: .02em;
	white-space: nowrap;
	color: #dff3cd;
	background: rgba(108, 191, 63, .22);
	border-radius: 999px;
}

.bnl-login .bnl-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--bnl-accent);
}

.bnl-login .bnl-aside__title {
	margin: 20px 0 0;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.025em;
	color: #fff;
	text-wrap: pretty;
}

.bnl-login .bnl-aside__lead {
	margin: 16px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .74);
	text-wrap: pretty;
}

.bnl-login .bnl-features {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 30px 0 0;
	list-style: none;
}

.bnl-login .bnl-features li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .86);
}

.bnl-login .bnl-features__check {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 700;
	color: #0a2b28;
	background: var(--bnl-accent-soft);
	border-radius: 999px;
}

.bnl-login .bnl-aside__back {
	position: relative;
	margin: 0;
	font-size: 14px;
}

body.login.bnl-login .bnl-aside__back a {
	color: rgba(255, 255, 255, .78);
}

body.login.bnl-login .bnl-aside__back a:hover,
body.login.bnl-login .bnl-aside__back a:focus {
	color: #fff;
	text-decoration: none;
}

/* ── Right column ─────────────────────────────────────────────── */

.bnl-login #login {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	width: 100%;
	max-width: none;
	padding: 48px clamp(24px, 5vw, 72px);
	margin: 0;
}

/* Stock logo heading — replaced by .bnl-head. */
.bnl-login #login h1.wp-login-logo,
.bnl-login #backtoblog {
	display: none;
}

.bnl-login .bnl-head {
	width: 100%;
	max-width: 440px;
}

.bnl-login .bnl-head__title {
	margin: 0;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--bnl-ink);
}

.bnl-login .bnl-head__subtitle {
	margin: 9px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bnl-muted);
}

/* ── Notices ──────────────────────────────────────────────────── */

.bnl-login #login .notice,
.bnl-login #login #login_error,
.bnl-login #login .message,
.bnl-login #login .success {
	width: 100%;
	max-width: 440px;
	margin: 0;
	padding: 13px 16px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid var(--bnl-line);
	border-left-width: 4px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(28, 38, 36, .04);
}

.bnl-login #login #login_error {
	border-left-color: #d63638;
}

.bnl-login #login .message,
.bnl-login #login .success {
	border-left-color: var(--bnl-accent);
}

/* ── Form card ────────────────────────────────────────────────── */

.bnl-login #login form:not(#language-switcher) {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	min-width: 0;
	max-width: 440px;
	margin: 0;
	padding: 30px 30px 26px;
	background: #fff;
	border: 1px solid var(--bnl-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(28, 38, 36, .04), 0 16px 40px rgba(28, 38, 36, .06);
	overflow: visible;
}

.bnl-login #login form:not(#language-switcher) p,
.bnl-login #login form:not(#language-switcher) .user-pass-wrap {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}

.bnl-login #login form:not(#language-switcher) label {
	font-size: 13px;
	font-weight: 650;
	color: var(--bnl-ink);
}

.bnl-login #login form:not(#language-switcher) .description,
.bnl-login #login form:not(#language-switcher) .indicator-hint {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bnl-muted);
}

.bnl-login #login input[type="text"],
.bnl-login #login input[type="email"],
.bnl-login #login input[type="password"],
.bnl-login #login input[type="tel"] {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 13px 15px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--bnl-ink);
	background: #fff;
	border: 1.5px solid var(--bnl-field);
	border-radius: 10px;
	box-shadow: none;
	outline: none;
}

.bnl-login #login input[type="text"]:focus,
.bnl-login #login input[type="email"]:focus,
.bnl-login #login input[type="password"]:focus,
.bnl-login #login input[type="tel"]:focus {
	border-color: var(--bnl-green);
	box-shadow: 0 0 0 3px rgba(14, 85, 81, .12);
	outline: none;
}

.bnl-login #login input::placeholder {
	color: #9aa8a4;
}

/* Password field + eye toggle */

.bnl-login #login .wp-pwd {
	position: relative;
	display: flex;
	align-items: center;
}

.bnl-login #login .wp-pwd input {
	padding-right: 52px;
}

.bnl-login #login .wp-hide-pw {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	padding: 0;
	color: var(--bnl-muted);
	background: transparent;
	border: 0;
	border-radius: 9px;
	box-shadow: none;
	cursor: pointer;
}

.bnl-login #login .wp-hide-pw:hover,
.bnl-login #login .wp-hide-pw:focus {
	color: var(--bnl-green);
	background: #eef5f4;
	box-shadow: none;
}

.bnl-login #login .wp-hide-pw .dashicons {
	width: 19px;
	height: 19px;
	font-size: 0;
	color: inherit;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 19px 19px;
	mask-size: 19px 19px;
}

.bnl-login #login .wp-hide-pw .dashicons-visibility {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
}

.bnl-login #login .wp-hide-pw .dashicons-hidden {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cline x1='4' y1='20' x2='20' y2='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Cline x1='4' y1='20' x2='20' y2='4'/%3E%3C/svg%3E");
}

/* Remember me + lost password row */

.bnl-login #login .bnl-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.bnl-login #login form:not(#language-switcher) .forgetmenot {
	flex-direction: row;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 14px;
}

.bnl-login #login form:not(#language-switcher) .forgetmenot input[type="checkbox"] {
	-webkit-appearance: checkbox;
	appearance: auto;
	width: 17px;
	height: 17px;
	min-width: 0;
	margin: 0;
	accent-color: var(--bnl-green);
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.bnl-login #login form:not(#language-switcher) .forgetmenot input[type="checkbox"]::before {
	content: none;
}

.bnl-login #login form:not(#language-switcher) .forgetmenot label {
	font-size: 14px;
	font-weight: 400;
	color: #4d5c59;
	cursor: pointer;
}

.bnl-login #login .bnl-actions .wp-login-lost-password {
	font-size: 14px;
	font-weight: 600;
	color: var(--bnl-green);
}

/* Submit */

.bnl-login #login form:not(#language-switcher) .submit,
.bnl-login #login form:not(#language-switcher) p.submit {
	margin: 4px 0 0;
}

.bnl-login #login .button-primary,
.bnl-login #login input[type="submit"] {
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 15px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: var(--bnl-green);
	border: 0;
	border-radius: 11px;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
}

.bnl-login #login .button-primary:hover,
.bnl-login #login .button-primary:focus,
.bnl-login #login input[type="submit"]:hover,
.bnl-login #login input[type="submit"]:focus {
	background: var(--bnl-green-dark);
	box-shadow: none;
}

/* Password strength meter (reset password screen) */

.bnl-login #login #pass-strength-result {
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	font-size: 13px;
	border-radius: 9px;
}

/* ── Below the card ───────────────────────────────────────────── */

.bnl-login #login #nav {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5px;
	width: 100%;
	max-width: 440px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--bnl-muted);
	text-align: center;
}

.bnl-login #login #nav a {
	font-weight: 600;
	color: var(--bnl-green);
}

.bnl-login #login #nav:empty {
	display: none;
}

.bnl-login #login .bnl-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 440px;
	padding-top: 18px;
	border-top: 1px solid var(--bnl-line);
}

.bnl-login .privacy-policy-page-link {
	flex: 0 1 auto;
	width: auto;
	margin: 0;
	font-size: 13px;
	text-align: left;
}

.bnl-login .privacy-policy-page-link a {
	color: var(--bnl-muted);
}

/* Language switcher — moved into .bnl-foot by login.js; the rules below also
   hold if the script never runs and it stays a sibling of #login. */

.bnl-login .language-switcher {
	grid-column: 2;
	grid-row: 2;
	margin: 0 0 32px;
	padding: 0 clamp(24px, 5vw, 72px);
	text-align: center;
}

.bnl-login .bnl-foot .language-switcher {
	margin: 0;
	padding: 0;
}

.bnl-login .language-switcher form {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.bnl-login .language-switcher label {
	display: inline-flex;
	align-items: center;
	color: var(--bnl-muted);
}

.bnl-login .language-switcher .dashicons {
	width: 16px;
	height: 16px;
	font-size: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.4 2.4 3.6 5.4 3.6 9S14.4 21.6 12 21.6 8.4 15.6 8.4 12 9.6 5.4 12 3z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.4 2.4 3.6 5.4 3.6 9S14.4 21.6 12 21.6 8.4 15.6 8.4 12 9.6 5.4 12 3z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.bnl-login #login .language-switcher select,
.bnl-login .language-switcher select {
	height: auto;
	padding: 7px 11px;
	font-size: 13px;
	color: #4d5c59;
	background-color: #fff;
	border: 1px solid var(--bnl-field);
	border-radius: 9px;
	box-shadow: none;
	cursor: pointer;
}

.bnl-login #login .language-switcher input[type="submit"],
.bnl-login .language-switcher input[type="submit"] {
	width: auto;
	padding: 7px 13px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bnl-green);
	background: #eef5f4;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
}

.bnl-login #login .language-switcher input[type="submit"]:hover,
.bnl-login #login .language-switcher input[type="submit"]:focus,
.bnl-login .language-switcher input[type="submit"]:hover,
.bnl-login .language-switcher input[type="submit"]:focus {
	color: var(--bnl-green);
	background: #dfebe9;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media screen and (max-width: 960px) {
	body.login.bnl-login {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
	}

	.bnl-login .bnl-aside {
		grid-column: 1;
		grid-row: 1;
		gap: 24px;
		padding: 28px 24px 32px;
	}

	.bnl-login .bnl-aside__title {
		font-size: 26px;
	}

	.bnl-login .bnl-aside__lead,
	.bnl-login .bnl-features,
	.bnl-login .bnl-aside__back {
		display: none;
	}

	.bnl-login #login {
		grid-column: 1;
		grid-row: 2;
		padding: 32px 20px 40px;
	}

	.bnl-login .language-switcher {
		grid-column: 1;
		grid-row: 3;
		padding: 0 20px;
	}
}

@media screen and (max-width: 480px) {
	.bnl-login #login form:not(#language-switcher) {
		padding: 22px 20px 20px;
		border-radius: 14px;
	}

	.bnl-login .bnl-foot {
		justify-content: center;
	}
}