/* ============================================================
   Экран входа — скин нативного wp-login.php (Центрметиз).
   Подключается через login_enqueue_scripts в functions.php
   вместе с design-tokens.css (отсюда токены + шрифт Inter).
   Брендируем штатную форму WP, не трогая саму авторизацию.
============================================================ */

/* --- Фон страницы --------------------------------------- */
body.login {
	font-family: var(--font-sans);
	background: linear-gradient(135deg, #fefefe 0%, var(--surface-2) 70%);
	color: var(--brand-dark);
	min-height: 100vh;
}

/* WP по умолчанию задаёт #login { padding: 8% 0 0; width: 320px }.
   Расширяем колонку и центрируем по вертикали на больших экранах. */
#login {
	width: 100%;
	max-width: 400px;
	padding: var(--sp-12) var(--sp-5) var(--sp-8);
	margin: 0 auto;
	box-sizing: border-box;
}

/* --- Логотип ------------------------------------------- */
#login h1 {
	margin-bottom: var(--sp-2);
}
#login h1 a {
	background-image: url('../img/logo-tsm.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 180px;
	height: 86px;        /* 180 * 162/341 ≈ 85.5 — сохраняем пропорции лого */
	margin: 0 auto var(--sp-2);
	font-size: 0;        /* прячем текстовый fallback «Центрметиз» */
}

/* --- Заголовок-эйброу над формой (инжектится через login_message) --- */
.tsm-login__intro {
	text-align: center;
	margin: 0 0 var(--sp-6);
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}
.tsm-login__eyebrow {
	display: block;
	font: 600 11px/1 var(--font-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brand-green-aa);
	margin-bottom: 6px;
}
.tsm-login__title {
	display: block;
	font: 800 var(--fs-title-l)/var(--lh-title-l) var(--font-sans);
	letter-spacing: -.01em;
	color: var(--brand-dark);
}

/* --- Карточка формы ------------------------------------ */
#loginform,
#lostpasswordform,
#registerform {
	background: var(--surface);
	border: 1px solid var(--outline-soft);
	border-radius: var(--r-lg);
	box-shadow: var(--el-2);
	padding: var(--sp-8) var(--sp-6);
	margin-top: 0;
	overflow: hidden;
}

/* --- Поля ввода ---------------------------------------- */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
#loginform label {
	font-family: var(--font-sans);
}
.login label {
	display: block;
	font: 500 var(--fs-label-l)/1.2 var(--font-sans);
	color: var(--on-surface-muted);
	margin-bottom: 6px;
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 var(--sp-4);
	margin: 0 0 var(--sp-5);
	background: var(--surface-1);
	border: 1px solid var(--outline);
	border-radius: var(--r-md);
	font: 500 var(--fs-body-l)/1 var(--font-sans);
	color: var(--brand-dark);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	outline: none;
	background: var(--surface);
	border-color: var(--brand-green-aa);
	box-shadow: 0 0 0 3px rgba(79, 129, 49, .15);
}
.login form p label { line-height: 1.4; }

/* Глазик «показать пароль» внутри поля */
.login .wp-pwd { position: relative; }
.login .wp-pwd .button.wp-hide-pw {
	position: absolute;
	right: 4px;
	top: 0;
	height: 48px;
	width: 44px;
	border: none;
	background: none;
	box-shadow: none;
	color: var(--on-surface-faded);
}
.login .wp-pwd .button.wp-hide-pw:hover { color: var(--brand-green-aa); }
.login .wp-pwd input[type="text"],
.login .wp-pwd input[type="password"] { padding-right: 48px; }

/* --- «Запомнить меня» ---------------------------------- */
.login .forgetmenot {
	margin-bottom: var(--sp-5);
	font: 500 var(--fs-body-m)/1.4 var(--font-sans);
}
.login .forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--on-surface-muted);
	font-weight: 500;
}
.login input[type="checkbox"] {
	width: 18px;
	height: 18px;
	border: 1px solid var(--outline);
	border-radius: var(--r-xs);
	accent-color: var(--brand-green-aa);
}
.login input[type="checkbox"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(79, 129, 49, .15);
	border-color: var(--brand-green-aa);
}

/* --- Кнопка «Войти» ------------------------------------ */
.login .submit { margin: 0; }
.login form .button-primary,
.login #wp-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	float: none;
	height: 50px;
	margin: var(--sp-2) 0 0;
	padding: 0 var(--sp-6);
	border: none;
	border-radius: var(--r-pill);
	background: var(--brand-green-aa);
	color: #fff;
	font: 600 15px/1 var(--font-sans);
	letter-spacing: .005em;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .12s ease, transform .08s ease;
}
.login form .button-primary:hover,
.login #wp-submit:hover { background: var(--brand-green-deep); color: #fff; }
.login form .button-primary:active,
.login #wp-submit:active { transform: translateY(1px); }
.login form .button-primary:focus,
.login #wp-submit:focus {
	box-shadow: 0 0 0 3px rgba(79, 129, 49, .25);
	outline: none;
}

/* --- Ссылки под формой: «Забыли пароль?» / «На сайт» --- */
.login #nav,
.login #backtoblog {
	text-align: center;
	margin: var(--sp-5) 0 0;
	padding: 0 var(--sp-2);
	font: 500 var(--fs-body-m)/1.5 var(--font-sans);
}
.login #backtoblog { margin-top: var(--sp-3); }
.login #nav a,
.login #backtoblog a {
	color: var(--on-surface-muted);
	text-decoration: none;
	border-bottom: 1px dashed transparent;
	transition: color .15s, border-color .15s;
}
.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--brand-green-aa);
	border-bottom-color: var(--brand-green-aa);
}

/* --- Сообщения и ошибки -------------------------------- */
.login .notice,
.login #login_error,
.login .message,
.login .success {
	border-radius: var(--r-md);
	border-left-width: 4px;
	box-shadow: var(--el-1);
	font: 500 var(--fs-body-m)/1.5 var(--font-sans);
	padding: var(--sp-4) var(--sp-4);
	margin: 0 0 var(--sp-5);
	background: var(--surface);
}
.login #login_error {
	border-left-color: var(--danger);
	background: var(--danger-soft);
	color: #7a2630;
}
.login .message,
.login .notice-info {
	border-left-color: var(--info);
	background: var(--info-soft);
	color: var(--brand-dark);
}
.login .success {
	border-left-color: var(--success);
	background: var(--success-soft);
	color: var(--brand-dark);
}
.login #login_error a,
.login .message a { color: var(--brand-green-aa); }

/* Переключатель языка WP-ядра — на одноязычном B2B-сайте лишний, прячем. */
.login .language-switcher { display: none; }

/* --- Адаптив ------------------------------------------- */
@media (max-width: 480px) {
	#login {
		padding-top: var(--sp-8);
	}
	#loginform,
	#lostpasswordform,
	#registerform {
		padding: var(--sp-6) var(--sp-5);
	}
}