/* Вход через Яндекс ID и Passkey в карточке /login/ и /register/ (ss-login); в конце — форма пароля из письма на /password-reset/.
 * Кнопка Яндекса — по правилам Яндекс ID: чёрная тема, их логотип 24 px, высота 44 px (размер M); цвет и содержимое кнопки не меняем.
 * Как на прежнем сайте: кнопки во всю ширину карточки, скругление 16 px, друг под другом. */

.ss-login-alt {
	display: flex;
	flex-direction: column;
	gap: var(--ss-space-12);
}

.ss-login-alt__title {
	margin: 0;
	font-size: var(--ss-size-12);
	line-height: 1;
	color: var(--ss-color-gray-light);
	text-align: center;
}

.ss-login-alt .ss-login-alt__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ss-space-12);
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ss-space-44);
	margin: 0;
	padding: 0 var(--ss-space-24);
	border: 0;
	border-radius: var(--ss-radius-16);
	background: var(--ss-color-text); /* #000: чёрная тема Яндекс ID */
	color: var(--ss-color-white);
	font-family: var(--ss-font-text);
	font-size: var(--ss-size-16);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s ease;
}

.ss-login-alt .ss-login-alt__btn:hover,
.ss-login-alt .ss-login-alt__btn:focus-visible {
	color: var(--ss-color-white);
	opacity: .85;
}

.ss-login-alt .ss-login-alt__btn--passkey {
	background: var(--ss-color-ink);
}

.ss-login-alt .ss-login-alt__btn:disabled {
	cursor: progress;
	opacity: .6;
}

.ss-login-alt__icon {
	flex: none;
	width: var(--ss-space-24);
	height: var(--ss-space-24);
}

.ss-login-alt__msg {
	margin: 0;
	font-size: var(--ss-size-12);
	line-height: 1.4;
	color: var(--ss-color-gray);
	text-align: center;
}

.ss-login-alt__msg[hidden] {
	display: none;
}

/* Пароль по ссылке из письма на /password-reset/ (форма — sticker-inc/shortcodes.php в теме).
 * Карточка та же, что у входа; поле, заголовок, ошибка и кнопка — как в форме входа: там их задают стили темы и блок <style> формы.
 * Отступы те же: от логотипа до заголовка 40 px, от заголовка до поля 16 px, кнопка на 30 px ниже поля. */

.ss-auth-form,
.ss-auth-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--ss-space-12);
}

.ss-auth-form .ss-auth-form__title {
	margin: var(--ss-space-28) 0 var(--ss-space-4);
	font-family: var(--ss-font-heading);
	font-size: var(--ss-size-26);
	font-weight: 500;
	line-height: var(--ss-space-30);
	color: var(--ss-color-text);
}

/* Тема снимает у полей рамку (input[type=password] { border: none }), форма входа возвращает её своими стилями */
.ss-auth-form .ss-auth-form__input {
	border: var(--ss-space-1) solid var(--ss-color-line);
	border-radius: var(--ss-radius-12);
	font-size: var(--ss-size-16);
}

.ss-auth-form__error {
	margin: 0;
	font-size: var(--ss-size-12);
	line-height: 1;
	color: var(--ss-color-accent); /* как «Неверная почта, логин или пароль» на /login/ */
}

.ss-auth-form__text {
	margin: var(--ss-space-6) 0 var(--ss-space-18);
	font-size: var(--ss-size-16);
	line-height: 1.375;
}

.ss-auth-form .ss-auth-form__btn {
	width: 100%;
	text-align: center;
}

.ss-auth-form__form .ss-auth-form__btn {
	margin-top: var(--ss-space-18);
}

/* Вторая кнопка — светлая; при наведении, как у всех кнопок .more-btn, оранжевая */
.ss-auth-form .ss-auth-form__btn--light {
	background: var(--ss-color-panel);
	color: var(--ss-color-ink);
}