/*
 * wp-login.php — Berol B2B login screen.
 *
 * Deliberately simple: WP's stock `#login` form, restyled into one clean
 * modern card centered on a subtle grid backdrop. The "BEROL B2B" wordmark
 * sits where WP's logo normally is (the `h1`). No split layout, no injected
 * markup — just CSS, so nothing can break.
 *
 * Brand tokens duplicated as raw hex — main.css's :root vars are NOT loaded
 * on wp-login.php.
 *   ink #171717 · ink-soft #2A2F3A · muted #6B7280 · rule #E6E8EC
 *   tint #F7F8FA · brand #1A47B8 · brand-hover #143A99
 */

body.login,
body.login input,
body.login button,
body.login select {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Page backdrop: soft square grid ---------- */

body.login {
	box-sizing: border-box;   /* padding counts inside 100vh — no phantom scrollbar */
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 7vh 20px 32px;
	overflow-x: hidden;
	background:
		radial-gradient(900px 500px at 12% 8%, rgba(26, 71, 184, 0.10), transparent 60%),
		radial-gradient(700px 500px at 92% 95%, rgba(26, 71, 184, 0.08), transparent 55%),
		linear-gradient(rgba(11, 15, 25, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11, 15, 25, 0.035) 1px, transparent 1px),
		#F7F8FA !important;
	background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
}

/* WP fixes #login at 320px with big top padding — recentre as a real card. */
body.login #login {
	width: 100%;
	max-width: 400px;
	padding: 0 !important;
	margin: 0;
}

/* ---------- Language dropdown (CS/VI), centered above the form ---------- */
/* Rendered by Berol_I18n via the login_message filter (cookie mode). main.css
   isn't loaded here, so these are standalone with the login palette hex. */
body.login .berol-lang { position: relative; width: max-content; margin: 0 auto 20px; }
body.login .berol-lang__current {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	background: #fff;
	border: 1px solid #E6E8EC;
	border-radius: 10px;
	cursor: pointer;
	color: #2A2F3A;
	line-height: 0;
	box-shadow: 0 1px 2px rgba(11, 15, 25, 0.05);
	transition: border-color 120ms ease, color 120ms ease;
}
body.login .berol-lang__current:hover { border-color: #1A47B8; color: #1A47B8; }
body.login .berol-lang__caret { flex: none; opacity: 0.6; transition: transform 150ms ease; }
body.login .berol-lang__current[aria-expanded="true"] .berol-lang__caret { transform: rotate(180deg); }
body.login .berol-lang__menu {
	position: absolute;
	top: calc(100% + 6px);
	/* Centered under the trigger (was right-aligned, which spilled left). */
	left: 50%;
	transform: translateX(-50%);
	min-width: 170px;
	padding: 4px;
	background: #fff;
	border: 1px solid #E6E8EC;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(11, 15, 25, 0.12);
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
body.login .berol-lang__menu[hidden] { display: none; }
body.login .berol-lang__opt {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px 9px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: #171717;
	text-align: left;
	line-height: 1.2;
	transition: background 120ms ease;
}
body.login .berol-lang__opt:hover { background: #F7F8FA; }
body.login .berol-lang__opt.is-active { color: #1A47B8; font-weight: 600; cursor: default; }
body.login .berol-lang__opt.is-active:hover { background: transparent; }
body.login .berol-lang__flag {
	flex: none;
	display: block;
	width: 24px;
	height: 16px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(11, 15, 25, 0.10);
}
body.login .berol-lang__flag svg { display: block; width: 100%; height: 100%; }

/* ---------- Wordmark (where WP's logo normally is) ---------- */

body.login h1 a {
	background-image: none !important;
	width: auto !important;
	height: auto !important;
	text-indent: 0 !important;
	overflow: visible !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	color: #171717 !important;
	text-decoration: none !important;
	pointer-events: none !important;
	cursor: default !important;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
}

/* WP's h1 wraps the anchor — make sure the whole block is centred too. */
body.login h1 { text-align: center; }

body.login .berol-b2b-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 3px 7px;
	border-radius: 4px;
	background: #1A47B8;
	color: #fff;
	position: relative;
	top: -3px;
}

body.login .berol-subtitle {
	flex-basis: 100%;
	font-size: 13px;
	font-weight: 400;
	color: #6B7280;
	letter-spacing: 0;
	margin-top: 6px;
}

/* ---------- The card ---------- */

body.login form {
	border: 0 !important; box-shadow: 0 0 0 1px rgba(17,17,17,.10) !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 30px rgba(11, 15, 25, 0.08) !important;
	padding: 32px 30px !important;
	margin: 0 !important;
	background: #FFFFFF;
}

body.login label {
	color: #2A2F3A;
	font-size: 13px;
	font-weight: 500;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	/* Form fields get a REAL visible border (not the faint card ring) —
	   inputs need clear affordance. Shadow-as-border is for passive
	   surfaces; controls you type into get an explicit edge. */
	border: 1px solid #D7DBE0 !important;
	border-radius: 8px !important;
	background: #FFFFFF !important;
	padding: 11px 12px !important;
	font-size: 14px !important;
	color: #171717 !important;
	box-shadow: none !important;
	transition: border-color 120ms cubic-bezier(0.2,0,0,1), box-shadow 120ms cubic-bezier(0.2,0,0,1);
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: #1A47B8 !important;
	box-shadow: 0 0 0 3px rgba(26, 71, 184, 0.15) !important;
	outline: none !important;
}

/* "Show password" eye toggle — borderless, no focus box. */
body.login .wp-pwd .button.wp-hide-pw,
body.login .button.wp-hide-pw:hover,
body.login .button.wp-hide-pw:focus,
body.login .button.wp-hide-pw:focus-visible {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
}

/* ---------- WP messages / errors ---------- */

body.login .message,
body.login #login_error {
	border: 0 !important; box-shadow: 0 0 0 1px rgba(17,17,17,.10) !important;
	border-left: 3px solid #1A47B8 !important;
	border-radius: 8px !important;
	background: #F7F8FA !important;
	box-shadow: none !important;
	padding: 12px 14px !important;
	margin: 0 0 20px !important;
	font-size: 13px;
	line-height: 1.5;
	color: #2A2F3A;
}
body.login #login_error { border-left-color: #C73434 !important; }

/* ---------- Primary button ---------- */

body.login .button-primary,
body.login .submit .button.button-primary {
	display: block;
	width: 100% !important;
	float: none !important;
	background: #1A47B8 !important;
	border-color: #1A47B8 !important;
	color: #FFFFFF !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	height: auto !important;
	min-height: 44px;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	line-height: 1.1 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background 120ms cubic-bezier(0.2,0,0,1), transform 80ms cubic-bezier(0.2,0,0,1);
}
body.login p.submit { margin-top: 0 !important; padding-top: 0 !important; }
body.login .button-primary:hover,
body.login .submit .button.button-primary:hover {
	background: #143A99 !important;
	border-color: #143A99 !important;
	color: #FFFFFF !important;
}
body.login .button-primary:active,
body.login .submit .button.button-primary:active { transform: translateY(1px); }
body.login .button-primary:focus-visible {
	outline: 2px solid #1A47B8 !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

/* ---------- "Remember me" + lost-password row ---------- */

body.login .forgetmenot { margin: 8px 0 18px !important; }
body.login .forgetmenot label { color: #6B7280; }

body.login #nav {
	margin: 18px 0 0 !important;
	padding: 16px 0 0 !important;
	border-top: 1px solid #F0F2F5;
	text-align: center;
}
body.login #nav a,
body.login .privacy-policy-link {
	color: #6B7280 !important;
	font-size: 13px;
	text-decoration: none !important;
	box-shadow: none !important;
}
body.login #nav a:hover,
body.login .privacy-policy-link:hover {
	color: #1A47B8 !important;
	text-decoration: none !important;
}

/* Fully login-gated + CZ-only: "Back to site" / language switcher hidden. */
body.login #backtoblog,
body.login .language-switcher { display: none !important; }