/* ============================================================
   Страницы «Авторизация», «Регистрация», «Вспомнить пароль»
   (/account/?login=yes | register=yes | forgot_password=yes)

   Общая вёрстка трёх system.auth.*-форм в стиле сайта: узкий белый
   лист .wxxx-sheet с тёмной фирменной головой (серый + красная
   линия сверху, как у футера). Подключается из шаблонов flat
   компонентов system.auth.authorize / system.auth.forgotpasswd /
   system.auth.registration — тот же паттерн, что у wxxx-feed.css.
   ============================================================ */

.wxxx-auth {
	max-width: 460px;
	margin: 0 auto;
}

/* у листа полей нет: голова и подвал сами растягиваются до краёв */
.wxxx-auth .wxxx-sheet {
	padding: 0;
	overflow: hidden;
}

/* голова карточки */
.wxxx-auth__head {
	background: var(--wxxx-grey);
	border-top: 2px solid var(--wxxx-red);
	padding: 18px 24px 16px;
}

.wxxx-auth__title {
	margin: 0;
	color: #fff;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
}

.wxxx-auth__subtitle {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13.5px;
	line-height: 1.4;
}

.wxxx-auth__body {
	padding: 22px 24px 24px;
}

/* системные сообщения */
.wxxx-auth__alert {
	margin-bottom: 18px;
	padding: 11px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.45;
}

.wxxx-auth__alert--error {
	background: #fbeceb;
	border-left: 3px solid var(--wxxx-red);
	color: #7d1a15;
}

.wxxx-auth__alert--ok {
	background: #ecf6ee;
	border-left: 3px solid #3f9c51;
	color: #2c6e3c;
}

.wxxx-auth__alert--info {
	background: #f4f6f8;
	border-left: 3px solid #7d8b99;
	color: #46525e;
}

/* соцсети (иконки и попапы — из шаблона socserv.auth.form/flat) */
.wxxx-auth__social {
	margin: -4px 0 2px;
}

.wxxx-auth .bx-authform-social ul {
	margin: 0;
	padding: 0;
}

.wxxx-auth__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 20px;
	color: rgba(0, 0, 0, 0.4);
	font-size: 12.5px;
}

.wxxx-auth__divider::before,
.wxxx-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e4e7ea;
}

/* поля */
.wxxx-auth__field {
	margin-bottom: 16px;
}

.wxxx-auth__label {
	display: block;
	margin-bottom: 6px;
	color: rgba(0, 0, 0, 0.6);
	font-size: 13px;
	font-weight: 700;
}

.wxxx-auth__star {
	color: var(--wxxx-red);
}

/* ============================================================
   Профиль (main.profile) и смена пароля (system.auth.changepasswd)
   — те же карточки .wxxx-auth, дополнительные элементы форм
   ============================================================ */

.wxxx-auth__input,
.wxxx-auth__select,
.wxxx-auth__textarea,
.wxxx-auth__calendar input[type="text"] {
	display: block;
	width: 100%;
	padding: 0 14px;
	border: 1px solid #cfd6dc;
	border-radius: 6px;
	background: #fff;
	color: rgba(0, 0, 0, 0.87);
	font-size: 16px; /* не даёт iOS зумить поле при фокусе */
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}

.wxxx-auth__input,
.wxxx-auth__select,
.wxxx-auth__calendar input[type="text"] {
	height: 42px;
}

.wxxx-auth__textarea {
	min-height: 96px;
	padding: 10px 14px;
	resize: vertical;
	line-height: 1.45;
}

.wxxx-auth__input:focus,
.wxxx-auth__select:focus,
.wxxx-auth__textarea:focus,
.wxxx-auth__calendar input[type="text"]:focus {
	outline: none;
	border-color: var(--wxxx-red);
	box-shadow: 0 0 0 3px rgba(144, 9, 9, 0.1);
}

/* дата рождения: инпут + иконка битрикс-календаря */
.wxxx-auth__calendar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wxxx-auth__calendar input[type="text"] {
	flex: 1;
}

.wxxx-auth__calendar .calendar-icon {
	flex: none;
	cursor: pointer;
}

/* фотография профиля: превью + удаление + загрузка */
.wxxx-auth__photo {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.wxxx-auth__photo img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 1px solid #e4e7ea;
	border-radius: 8px;
}

.wxxx-auth__file {
	display: block;
	width: 100%;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.7);
}

/* привязанные соцсети (socserv.auth.split) */
.wxxx-auth__socserv {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid #eef0f2;
}

.wxxx-auth__socserv .bx-authform-social ul {
	margin: 0 0 10px;
}

/* ============================================================
   Модальное окно авторизации в шапке (system.auth.authorize/world-xxx):
   та же голова и те же поля .wxxx-auth__*, поверхность даёт модалка
   ============================================================ */

.wxxx-auth-modal,
.ui.modal.wxxx-auth-modal {
	width: 460px;
}

.wxxx-auth-modal__head {
	background: var(--wxxx-grey);
	border-top: 2px solid var(--wxxx-red);
	padding: 16px 22px 14px;
}

.wxxx-auth-modal__title {
	color: #fff;
	font-size: 19px;
	line-height: 1.2;
	font-weight: 700;
}

.wxxx-auth-modal__subtitle {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12.5px;
	line-height: 1.4;
}

.wxxx-auth-modal__body {
	padding: 20px 22px 10px;
}

.wxxx-auth-modal__footer {
	padding: 12px 22px 14px;
	border-top: 1px solid #eef0f2;
	background: #fafbfc;
	border-radius: 0 0 6px 6px;
	color: rgba(0, 0, 0, 0.55);
	font-size: 14px;
	text-align: center;
}

.wxxx-auth-modal__footer a {
	margin-left: 6px;
	color: var(--wxxx-red);
	font-weight: 700;
	text-decoration: none;
}

.wxxx-auth-modal__footer a:hover {
	text-decoration: underline;
}

/* крестик поверх тёмной головы */
.wxxx-auth-modal > .close.icon {
	top: .55em;
	right: .55em;
	color: rgba(255, 255, 255, 0.65);
}

.wxxx-auth-modal > .close.icon:hover {
	color: #fff;
}

@media only screen and (max-width: 767px) {
	.wxxx-auth-modal {
		width: calc(100vw - 2rem) !important;
		margin: 0 auto !important;
	}

	.wxxx-auth-modal__head {
		padding: 14px 16px 12px;
	}

	.wxxx-auth-modal__body {
		padding: 16px 14px 4px;
	}

	.wxxx-auth-modal__footer {
		padding: 10px 14px 12px;
	}
}



.wxxx-auth__note {
	margin-top: 6px;
	color: rgba(0, 0, 0, 0.45);
	font-size: 12.5px;
	line-height: 1.4;
}

.wxxx-auth__captcha {
	display: block;
	margin-bottom: 10px;
	border: 1px solid #e4e7ea;
	border-radius: 6px;
}

/* строка «запомнить меня» + «забыли пароль?» */
.wxxx-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.wxxx-auth__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(0, 0, 0, 0.7);
	font-size: 14px;
	cursor: pointer;
}

.wxxx-auth__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wxxx-red);
}

.wxxx-auth__link {
	color: var(--wxxx-red);
	font-size: 14px;
	text-decoration: none;
}

.wxxx-auth__link:hover {
	text-decoration: underline;
}

/* главная кнопка */
.wxxx-auth__submit {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 13px 20px;
	border: 0;
	border-radius: 6px;
	background: var(--wxxx-red);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s;
}

.wxxx-auth__submit:hover {
	background: #ab0b0b;
}

.wxxx-auth__submit:active {
	background: #780707;
}

/* подвал карточки: перекрёстные ссылки между формами */
.wxxx-auth__footer {
	padding: 14px 24px 16px;
	border-top: 1px solid #eef0f2;
	background: #fafbfc;
	color: rgba(0, 0, 0, 0.55);
	font-size: 14px;
	text-align: center;
}

.wxxx-auth__footer a {
	margin-left: 6px;
	color: var(--wxxx-red);
	font-weight: 700;
	text-decoration: none;
}

.wxxx-auth__footer a:hover {
	text-decoration: underline;
}

/* согласие на обработку персональных данных (main.userconsent.request) */
.wxxx-auth__consent {
	margin: 4px 0 8px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
}

@media only screen and (max-width: 767px) {
	.wxxx-auth {
		max-width: none;
	}

	.wxxx-auth__head {
		padding: 14px 14px 12px;
	}

	.wxxx-auth__body {
		padding: 16px 14px 18px;
	}

	.wxxx-auth__footer {
		padding: 12px 14px 14px;
	}
}