/* ============================================================
   PddPro — модалка входа, регистрации и восстановления. Этап 6.

   Источник вида — design2/assets/css/auth.css (карточка, вариант v1
   от 13.08.2026) и parts.html, якорь part-auth. Разметка — своя:
   templates/wp/template-parts/oauth-form.php, там же перечислено,
   что в ней нельзя трогать и почему.

   Правило, определившее всю раскладку ниже: frontend.js родительской
   темы переключает формы через jQuery .show()/.hide(), а это ИНЛАЙНОВЫЙ
   display: block — он сильнее любого нашего правила без !important.
   Поэтому display не задаётся ни на .oauth-form, ни на
   .oauth-social-buttons: раскладка живёт на внутренних обёртках
   .pdd-auth__body и .pdd-auth__social-row, которые движок не трогает.

   Селекторы — от body.pdd. Ни одного !important: единственный на всю
   тему по-прежнему фон body в main.css.
   ============================================================ */

/* ------------------------------------------------------------
   Каркас модалки
   ------------------------------------------------------------ */
body.pdd .modal-content.pdd-auth {
	position: relative;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
}

body.pdd .pdd-auth .pdd-auth__body-wrap {
	padding: 28px;
}

/* крестик: чужие обработчики на .close_login, трогаем только вид */
body.pdd .pdd-auth .pdd-auth__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--color-icon);
	background: none;
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
}

body.pdd .pdd-auth .pdd-auth__close:hover {
	color: var(--color-text);
	background: var(--color-surface-muted);
}

/* .oauth-wrapper: движок в него дописывает блок «успешная регистрация»,
   поэтому это и есть карточка — отдельной обёртки заводить нельзя */
body.pdd .pdd-auth .pdd-auth__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	width: 100%;
	text-align: left;
}

/* ------------------------------------------------------------
   Переключатель «Вход · Регистрация»

   Лежит снаружи форм: внутри он показывался бы дважды и пропадал
   вместе со своей формой. Клик обрабатывает frontend.js по классам
   .btn_login_form_show / .btn_reg_form_show, подсветку — pdd-auth.js.
   ------------------------------------------------------------ */
body.pdd .pdd-auth .pdd-auth__switch {
	display: flex;
	gap: var(--space-1);
	padding: var(--space-2);
	background: var(--color-surface-muted);
	border-radius: var(--radius-lg);
}

body.pdd .pdd-auth .pdd-auth__switch-item {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	font-size: var(--font-size-control);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
}

body.pdd .pdd-auth .pdd-auth__switch-item.is-active {
	color: var(--color-primary);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------
   Тело формы

   .oauth-form остаётся блоком — display у него занят движком.
   Колонку держит .pdd-auth__body внутри.
   ------------------------------------------------------------ */
body.pdd .pdd-auth .oauth-form {
	margin: 0;
}

body.pdd .pdd-auth .pdd-auth__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	/* frontend.css задаёт .page-template-newlisting .buttons-new { order: 10 },
	   и любой новый flex-контейнер обязан сбрасывать order явно */
	order: 0;
}

body.pdd .pdd-auth .pdd-auth__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

body.pdd .pdd-auth .pdd-auth__title {
	font-size: 24px;
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-title);
	color: var(--color-text);
	text-align: left;
}

body.pdd .pdd-auth .pdd-auth__subtitle {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   Поля
   ------------------------------------------------------------ */
body.pdd .pdd-auth .pdd-auth__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	order: 0;
}

body.pdd .pdd-auth .pdd-auth__label {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
}

body.pdd .pdd-auth input.pdd-auth__input {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 var(--space-6);
	font: inherit;
	font-size: var(--font-size-input);
	color: var(--color-text);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	box-shadow: none;
	outline: none;
}

body.pdd .pdd-auth input.pdd-auth__input::placeholder {
	color: var(--color-text-muted);
}

body.pdd .pdd-auth input.pdd-auth__input:focus {
	border-color: var(--color-primary);
}

/* глазок у пароля. .password-eye и .button-show-password — движковые:
   обработчик привязан НЕ делегированно (frontend.js, стр. 1376) и ищет
   поле через me.parents("form"), поэтому кнопка обязана остаться в форме */
body.pdd .pdd-auth .pdd-auth__peek {
	position: relative;
}

body.pdd .pdd-auth .pdd-auth__peek input.pdd-auth__input {
	padding-right: 44px;
}

body.pdd .pdd-auth .pdd-auth__eye {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 46px;
	padding: 0;
	color: var(--color-icon);
	background: none;
	border: 0;
	cursor: pointer;
}

body.pdd .pdd-auth .pdd-auth__eye:hover,
body.pdd .pdd-auth .pdd-auth__eye.active {
	color: var(--color-primary);
}

body.pdd .pdd-auth .pdd-auth__eye .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}

/* ------------------------------------------------------------
   «Запомнить меня» и «Забыли пароль»
   ------------------------------------------------------------ */
body.pdd .pdd-auth .pdd-auth__extra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	font-size: var(--font-size-caption);
	order: 0;
}

body.pdd .pdd-auth label.pdd-auth__check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
	color: var(--color-text-secondary);
	cursor: pointer;
}

body.pdd .pdd-auth .pdd-auth__check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--color-primary);
}

body.pdd .pdd-auth .pdd-auth__forgot {
	margin: 0;
}

body.pdd .pdd-auth a.pdd-auth__link {
	color: var(--color-primary);
	text-decoration: none;
}

body.pdd .pdd-auth a.pdd-auth__link:hover {
	text-decoration: underline;
}

/* согласие с офертой у регистрации: чекбокс сверху, текст в две строки */
body.pdd .pdd-auth label.pdd-auth__agree {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	margin: 0;
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	cursor: pointer;
}

body.pdd .pdd-auth .pdd-auth__agree input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--color-primary);
}

body.pdd .pdd-auth .pdd-auth__agree a {
	color: var(--color-text-secondary);
	text-decoration: underline;
}

/* ------------------------------------------------------------
   Кнопка отправки

   .btn_blue красит движок; здесь только геометрия прототипа,
   цвет приходит из базового слоя main.css.
   ------------------------------------------------------------ */
body.pdd .pdd-auth button.pdd-auth__submit {
	width: 100%;
	height: 48px;
	margin: 0;
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	border-radius: var(--radius-md);
	order: 0;
	cursor: pointer;
}

body.pdd .pdd-auth button.pdd-auth__submit[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

body.pdd .pdd-auth .pdd-auth__foot {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
	text-align: center;
	order: 0;
}

/* ------------------------------------------------------------
   Вход через сервисы

   .oauth-social-buttons движок показывает и прячет .show()/.hide() —
   display на нём не задаём. Ряд кнопок держит .pdd-auth__social-row.
   ------------------------------------------------------------ */
body.pdd .pdd-auth .pdd-auth__socials {
	margin: 0;
}

/* .title_soc_login_form движок переписывает через .text(): дети внутри
   были бы стёрты, поэтому черта слева и справа — псевдоэлементы */
body.pdd .pdd-auth .pdd-auth__or {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
	font-size: var(--font-size-micro);
	color: var(--color-text-muted);
	text-align: left;
}

body.pdd .pdd-auth .pdd-auth__or::before,
body.pdd .pdd-auth .pdd-auth__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

body.pdd .pdd-auth .pdd-auth__social-row {
	display: flex;
	gap: var(--space-4);
	order: 0;
}

body.pdd .pdd-auth a.pdd-auth__social {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	height: 42px;
	font-size: var(--font-size-control);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	text-decoration: none;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-md);
}

body.pdd .pdd-auth a.pdd-auth__social:hover {
	border-color: var(--color-primary);
}

body.pdd .pdd-auth a.pdd-auth__social svg {
	flex: none;
	color: var(--color-primary);
}

body.pdd .pdd-auth .pdd-auth__legal {
	font-size: var(--font-size-micro);
	color: var(--color-text-muted);
}

body.pdd .pdd-auth .pdd-auth__legal a {
	color: var(--color-text-secondary);
	text-decoration: underline;
}

/* ------------------------------------------------------------
   Ответы сервера

   Движок раскрывает их slideDown/slideUp — inline display снова
   его, трогаем только вид.
   ------------------------------------------------------------ */
body.pdd .pdd-auth .modal-response-text {
	margin-top: var(--space-5);
	padding: var(--space-5) var(--space-6);
	font-size: var(--font-size-caption);
	border-radius: var(--radius-md);
}

/* Пока ответа нет, контейнер пуст — но фон и отступы уже рисуют полосу
   под кнопкой. Текст в него кладёт frontend.js, и с непустым :empty
   перестаёт совпадать, поэтому свой slideDown движка не ломается. */
body.pdd .pdd-auth .modal-response-text:empty {
	display: none;
}

body.pdd .pdd-auth .modal-response-text-error {
	color: var(--color-field-error);
	background: var(--color-surface-muted);
}

body.pdd .pdd-auth .modal-response-text-success {
	color: var(--color-primary);
	background: var(--color-primary-soft);
}

/* блок «Вы успешно зарегистрированы» дописывает frontend.js (стр. 1388)
   прямо в .oauth-wrapper — здесь он получает вид карточки */
body.pdd .pdd-auth .register-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-6);
	text-align: center;
	background: var(--color-primary-soft);
	border-radius: var(--radius-lg);
	order: 0;
}

body.pdd .pdd-auth .register-success-text-1 {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

body.pdd .pdd-auth .register-success-text-2 {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
}

body.pdd .pdd-auth .register-success a {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------
   390 px — карточка во всю ширину, поля крупнее не нужны
   ------------------------------------------------------------ */
@media (max-width: 480px) {

	body.pdd .pdd-auth .pdd-auth__body-wrap {
		padding: 20px 16px;
	}

	body.pdd .pdd-auth .pdd-auth__social-row {
		flex-direction: column;
	}
}

/* ---- Поля модалки входа на сенсорных — 16px ----

   Порог автозума Safari на iOS: при фокусе в поле мельче 16px страница
   масштабируется и обратно не отматывается. Разбор — раздел 26
   в listing.css. Модалка лежит в подвале каждой страницы, так что без
   этого блока зум ловится не только на листинге. */
@media (pointer: coarse) {

	body.pdd .pdd-auth input.pdd-auth__input {
		font-size: 16px;
	}
}