/* ==========================================================================
   Вход / регистрация / восстановление «как приложение» (29.09.2026).
   Layout layouts/auth (корень body.auth) + pages/auth/login, register,
   register-code, register-data, forgot, forgot-code, forgot-reset.
   Подключается в layouts/auth ПОСЛЕ auth-new.css (и второй ссылки на
   vars.css с версией).

   Телефон (≤768) — экраны авторизации приложения:
   lib/features/auth/widgets/auth_widgets.dart (AuthScaffold, AuthInput,
   AuthButton, AuthError, AuthDescription, AuthAlternateLink,
   AuthRegisterBlock, AuthConsentNote), code_input.dart (CodeInput),
   screens/register_data_screen.dart (_RoleSwitch),
   shared/widgets/option_picker.dart (AuthSelectField, лист выбора).
   Экран белый, «назад» 44 слева сверху, логотип над светлой карточкой,
   под карточкой — блок «Нет аккаунта?» / строка согласия.
   ПК (≥769) — та же карточка 400 по центру: фон страницы light, карточка
   белая r24 p40 (логотип внутри), поля — заливка light без рамки.

   Логика не тронута: .input-phone, .input-password, .code-digit,
   .code-inputs, .role-fields/.role-private/.role-store, .auth-form-input,
   .auth-form-button, .auth-password-visible, .icon-show/.icon-hide,
   .error, .active, .disabled — как были (auth-new.js, select.js).

   Карточка нарисована псевдоэлементом .auth-inner::before: .auth-inner —
   сетка из строк logo / title / body / below, подложка ::before занимает
   строки title…body (на ПК logo…body). Так логотип (он внутри .auth-inner
   в layout) оказывается над карточкой, а .au-below — под ней, без
   перестройки layout.
   ========================================================================== */

body.auth {
	--au-ease: cubic-bezier(0.22, 1, 0.36, 1); /* _kAuthCurve */
	--au-card: var(--light); /* .auth-inner: light */
	--au-field: var(--white); /* поля на светлой карточке — белые */
	--au-field-border: var(--light-gray);
	--au-ring: color-mix(in srgb, var(--accent) 12%, transparent); /* 0 0 0 4px accent 12 % */
	--au-err-bg: color-mix(in srgb, var(--red) 5%, transparent); /* 0x0DE62058 */
	--au-block: var(--light); /* AuthRegisterBlock */
	--au-seg: var(--white); /* _RoleSwitch: подложка */
	--au-seg-active: var(--light); /* _RoleSwitch: активный сегмент */
	background: var(--white); /* Scaffold backgroundColor: white */
}

/* --------------------------------------------------------------------------
   Каркас: «назад», колонка по центру, логотип, карточка
   -------------------------------------------------------------------------- */

/* _BackButton: 44×44, light, r12, стрелка 24 чёрная; Padding(16, 14, 16, 0) */
body.auth .au-back {
	position: absolute;
	top: calc(14px + env(safe-area-inset-top));
	left: max(16px, env(safe-area-inset-left));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--light);
	color: var(--black);
	transition: color 0.2s ease, background-color 0.2s ease;
}

body.auth .au-back svg {
	width: 24px;
	height: 24px;
}

body.auth .au-back:hover {
	color: var(--accent);
}

/* строка «назад» (14 + 44) сверху, остальное — по центру оставшейся высоты */
body.auth {
	padding-top: calc(58px + env(safe-area-inset-top));
}

/* SingleChildScrollView padding 15 / 10 / 15 / 22 */
body.auth .auth-layout {
	margin: 0 auto;
	padding: 10px max(15px, env(safe-area-inset-right)) 22px max(15px, env(safe-area-inset-left));
}

body.auth .auth-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"logo"
		"title"
		"body"
		"below";
	padding: 0;
	border-radius: 0;
	background: none;
	isolation: isolate; /* подложка ::before (z-index -1) — внутри */
}

/* подложка карточки: light, r20 */
body.auth .auth-inner::before {
	content: "";
	grid-column: 1;
	grid-row: title-start / body-end;
	z-index: -1;
	border-radius: 20px;
	background: var(--au-card);
}

/* логотип 40 по центру над карточкой, зазор 10 */
body.auth .auth-logo {
	grid-area: logo;
	justify-self: center;
	margin: 0 0 10px;
}

body.auth .auth-logo img {
	height: 40px;
}

/* заголовок 22/500, lh 1.2, по центру, снизу 24; карточка p30 */
body.auth .auth-inner > h1 {
	grid-area: title;
	margin: 0;
	padding: 30px 30px 24px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--black);
}

/* остаток слайдера форм — одна колонка */
body.auth .auth-block {
	grid-area: body;
	grid-template-columns: 100%;
	gap: 0;
	padding: 0 30px 30px;
}

body.auth .au-below {
	grid-area: below;
}

/* --------------------------------------------------------------------------
   Тексты: пояснение, ошибка
   -------------------------------------------------------------------------- */

/* AuthDescription: 15/500, gray, lh 1.5, по центру, снизу 16 */
body.auth .auth-descr {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: var(--gray);
}

/* AuthError: 15px, lh 1.3, red, значок 15 (сверху 2), зазор 5; снизу 8, слева 2 */
body.auth .auth-error {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin: 0 0 8px 2px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--red);
}

body.auth .auth-error svg {
	width: 15px;
	height: 15px;
	margin-top: 2px;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Поля (AuthInput): h56, r14, снизу 16, белые с рамкой lightGray;
   фокус — рамка accent 1.5 + кольцо 4px accent 12 %; ошибка — red + фон 5 %
   -------------------------------------------------------------------------- */

body.auth .auth-form-input {
	height: 56px;
	margin-bottom: 16px;
	padding: 0 18px;
	border: 1px solid var(--au-field-border);
	border-radius: 14px;
	background: var(--au-field);
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
	caret-color: var(--accent);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body.auth .auth-form-input::placeholder {
	font-weight: 400;
	color: var(--gray);
	opacity: 1;
}

body.auth .auth-form-input:focus {
	border-color: var(--accent);
	background: var(--white);
	/* рамка 1.5 = 1 + внутренние 0.5, без сдвига текста */
	box-shadow: inset 0 0 0 0.5px var(--accent), 0 0 0 4px var(--au-ring);
}

body.auth .auth-form-input.error {
	border-color: var(--red);
	background: var(--au-err-bg);
	box-shadow: none;
}

/* пароль: «глаз» 48 справа, значок 22 gray */
body.auth .input-password {
	padding-right: 50px;
}

body.auth .auth-password-visible {
	right: 1px;
	width: 48px;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 14px;
	color: var(--gray);
}

body.auth .auth-password-visible svg {
	width: 22px;
	height: 22px;
}

body.auth .auth-password-visible:hover {
	color: var(--black);
}

/* «Не помню пароль»: слева, 15px accent, цель 40 в высоту, снизу 8 */
body.auth .forgot-password-link {
	display: flex;
	align-items: center;
	width: 100%;
	height: 40px;
	margin: 0 0 8px;
	padding-left: 3px;
	font-size: 15px;
	line-height: 1.2;
	color: var(--accent);
}

body.auth .forgot-password-link:hover {
	color: var(--accent-alternate);
}

/* --------------------------------------------------------------------------
   Кнопка (AuthButton): h56, r14, градиент accent → pink, 18/500 белым;
   нажатие — scale 0.985; занята («Ожидайте...», disabled) — opacity 0.6
   -------------------------------------------------------------------------- */

body.auth .auth-form-button {
	display: block;
	height: 56px;
	border-radius: 14px;
	background: var(--accent);
	background: linear-gradient(90deg, var(--accent), var(--pink));
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: var(--white);
	transition: transform 0.09s ease, opacity 0.2s ease;
}

body.auth .auth-form-button:hover {
	background: var(--accent-alternate);
	background: linear-gradient(90deg, var(--accent-alternate), var(--pink-alternate));
}

body.auth .auth-form-button:active {
	transform: scale(0.985);
}

body.auth .auth-form-button:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* AuthAlternateLink («Вход», «Назад»): 16/500 accent, по центру, h44, сверху 8 */
body.auth .alternate-auth-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin-top: 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--accent);
}

body.auth .alternate-auth-link:hover {
	color: var(--accent-alternate);
}

/* --------------------------------------------------------------------------
   Код из SMS (CodeInput): клетки 56×56, r14, зазор 10, снизу 30, цифра 20;
   белые с рамкой lightGray; активная — accent 1.5; ошибка — red + фон 5 %
   -------------------------------------------------------------------------- */

body.auth .code-inputs {
	grid-template-columns: repeat(4, 56px);
	gap: 10px;
	margin-bottom: 30px;
}

body.auth .code-inputs input {
	height: 56px;
	border: 1px solid var(--au-field-border);
	border-radius: 14px;
	background: var(--au-field);
	font-size: 20px;
	color: var(--black);
	caret-color: var(--accent);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body.auth .code-inputs input:focus {
	border-color: var(--accent);
	background: var(--white);
	box-shadow: inset 0 0 0 0.5px var(--accent);
}

body.auth .code-inputs.error input {
	border-color: var(--red);
	background: var(--au-err-bg);
}

body.auth .code-inputs.error input:focus {
	box-shadow: inset 0 0 0 0.5px var(--red);
}

/* «Неверный код» прячется вместе с красной рамкой (Backspace снимает .error) */
body.auth .code-inputs:not(.error) + .auth-error {
	display: none;
}

/* --------------------------------------------------------------------------
   Данные регистрации: переключатель ролей, списки
   -------------------------------------------------------------------------- */

/* _RoleSwitch: h40, белый, рамка lightGray, r12, p3, снизу 20;
   активный сегмент — light, r9; подпись 16 чёрным */
body.auth .role-switch {
	height: 40px;
	margin-bottom: 20px;
	border: 1px solid var(--au-field-border);
	border-radius: 12px;
	background: var(--au-seg);
}

body.auth .role-switch label {
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--black);
}

body.auth .role-switch label .radio-checkmark {
	transition: background-color 0.2s ease; /* inset 3 внутри рамки — из auth-new.css */
}

body.auth .role-switch label input:checked + .radio-checkmark {
	background: var(--au-seg-active);
}

/* AuthSelectField: h50, r12, отступы 20, стрелка keyboard_arrow_down 22 gray */
body.auth .select .auth-form-input {
	height: 50px;
	padding: 0 48px 0 20px;
	border-radius: 12px;
}

body.auth .select::before {
	right: 20px;
	width: 22px;
	height: 22px;
	background: var(--gray);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

/* «Город» до выбора региона (.disabled от инлайн-скрипта) — enabled: false, opacity 0.6 */
body.auth .select.disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* Пустой список: скрипт отправки ставит .error на скрытое поле значения —
   подсвечиваем видимое поле, пока в нём ничего не выбрано. */
body.auth .select:has(.select-input-value.error) .select-input:placeholder-shown {
	border-color: var(--red);
	background: var(--au-err-bg);
}

/* выпадающий список — белая карточка r16 с тенью */
body.auth .select-popup {
	top: calc(100% + 6px);
	padding: 6px 0;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgb(22 14 24 / 12%); /* black 12 % */
}

body.auth .select-button {
	padding: 10px 44px 10px 16px;
	font-size: 15px;
	line-height: 1.35;
}

body.auth .select-button:hover {
	background: var(--light);
}

body.auth .select-button.selected {
	font-weight: 600;
	background: none;
}

/* галочка выбранного — accent (Icons.check) */
body.auth .select-button.selected::after {
	right: 16px;
	width: 20px;
	height: 20px;
	background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m4 9 3.5 3.5L14 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m4 9 3.5 3.5L14 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

body.auth .select .no-results {
	padding: 10px 16px;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Под карточкой: «Нет аккаунта?» (вход), строка согласия (регистрация)
   -------------------------------------------------------------------------- */

/* AuthRegisterBlock: сверху 16, p 18/20, light, r20; «Нет аккаунта?»
   16/600 lh 1.2; подпись 14 gray lh 1.35 (зазор 4); стрелка 22 accent */
body.auth .alternate-auth-link.au-register {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	height: auto;
	margin-top: 16px;
	padding: 18px 20px;
	border-radius: 20px;
	background: var(--au-block);
	text-align: left;
	color: var(--black);
	transition: background-color 0.2s ease;
}

body.auth .au-register__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

body.auth .au-register__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--black);
}

body.auth .au-register__sub {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--gray);
}

body.auth .au-register__arrow {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--accent);
	transition: transform 0.2s ease;
}

body.auth .au-register:hover .au-register__arrow {
	transform: translateX(3px);
}

/* AuthConsentNote: сверху 16, 13/1.4 gray по центру, документы — accent */
body.auth .au-consent {
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	color: var(--gray);
}

body.auth .au-consent a {
	color: var(--accent);
}

body.auth .au-consent a:hover {
	color: var(--accent-alternate);
}

/* --------------------------------------------------------------------------
   ТЕЛЕФОН: «Категория товаров» — лист снизу (showOptionPicker: белый,
   r20 сверху, 60 % высоты, заголовок 18/700, строки 56, выбранная — жирная
   с галочкой accent). Регион и город (.select-search — поиск вводом в само
   поле) остаются выпадающим списком: лист снизу закрыла бы клавиатура.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* затемнение — на .role-store (вне .select): тап по нему закрывает список
	   штатным кодом select.js («клик вне селекта») */
	body.auth .role-store:has(> .select:not(.select-search) .select-popup.active)::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 590;
		background: rgb(22 14 24 / 50%); /* black 50 % */
	}

	body.auth .role-store > .select:not(.select-search) .select-popup {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 600;
		width: auto;
		height: 60vh;
		height: 60dvh;
		max-height: none;
		padding: 0 0 env(safe-area-inset-bottom);
		border-radius: 20px 20px 0 0;
		background: var(--white);
		box-shadow: none;
		transform: translateY(101%);
		transform-origin: center bottom;
	}

	body.auth .role-store > .select:not(.select-search) .select-popup.active {
		transform: translateY(0);
	}

	body.auth .role-store > .select:not(.select-search) .select-popup::before {
		content: "Категория товаров";
		flex-shrink: 0;
		padding: 20px 20px 10px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--black);
	}

	body.auth .role-store > .select:not(.select-search) .select-popup-wrap {
		flex: 1;
		min-height: 0;
	}

	body.auth .role-store > .select:not(.select-search) .select-button {
		display: flex;
		align-items: center;
		min-height: 56px;
		padding: 8px 52px 8px 16px;
		font-size: 16px;
		line-height: 1.3;
	}

	body.auth .role-store > .select:not(.select-search) .select-button.selected {
		font-weight: 700;
	}
}

/* --------------------------------------------------------------------------
   ПК (≥769): фон страницы light, карточка белая r24 p40 с логотипом внутри,
   поля — заливка light без рамки (фокус — белые + кольцо), кнопка градиентом
   -------------------------------------------------------------------------- */

@media (min-width: 769px) {
	body.auth {
		--au-card: var(--white);
		--au-field: var(--light);
		--au-field-border: transparent;
		--au-block: var(--white);
		--au-seg: var(--light);
		--au-seg-active: var(--white);
		padding-top: 0;
		background: var(--light);
	}

	body.auth .au-back {
		top: 24px;
		left: 24px;
		background: var(--white);
	}

	/* карточка 400 + поля страницы 15 */
	body.auth .auth-layout {
		max-width: 430px;
		padding: 40px 15px;
	}

	body.auth .auth-inner::before {
		grid-row: logo-start / body-end;
		border-radius: 24px;
	}

	body.auth .auth-logo {
		margin: 40px 0 16px;
	}

	body.auth .auth-inner > h1 {
		padding: 0 40px 24px;
	}

	body.auth .auth-block {
		padding: 0 40px 40px;
	}
}

/* --------------------------------------------------------------------------
   Появление (AuthScaffold, кривая cubic-bezier(.22,1,.36,1)): логотип
   «ведёт» (крупный, ниже — на место), карточка всплывает (снизу 28,
   scale 0.97), содержимое каскадом (подъём 14, шаг 40 мс). Тайминги
   сжаты против приложения (2 с → ~1.2 с): на сайте форма нужна сразу.
   Только fill-mode backwards — после анимации transform не остаётся
   (иначе лист «Категория» стал бы привязан к карточке).
   «Уменьшить движение» — без анимации (и без тряски кода).
   -------------------------------------------------------------------------- */

@keyframes au-logo {
	from {
		opacity: 0;
		transform: translateY(60px) scale(1.8);
	}
}

@keyframes au-card {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.97);
	}
}

@keyframes au-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	body.auth .auth-logo {
		animation: au-logo 0.7s var(--au-ease) backwards;
	}

	body.auth .auth-inner::before {
		animation: au-card 0.6s var(--au-ease) 0.2s backwards;
	}

	body.auth .auth-inner > h1,
	body.auth .auth-form form > *,
	body.auth .au-below {
		animation: au-rise 0.45s var(--au-ease) calc(0.35s + var(--au-i, 0) * 40ms) backwards;
	}

	body.auth .auth-form form > :nth-child(1) { --au-i: 1; }
	body.auth .auth-form form > :nth-child(2) { --au-i: 2; }
	body.auth .auth-form form > :nth-child(3) { --au-i: 3; }
	body.auth .auth-form form > :nth-child(4) { --au-i: 4; }
	body.auth .auth-form form > :nth-child(5) { --au-i: 5; }
	body.auth .auth-form form > :nth-child(6) { --au-i: 6; }
	body.auth .auth-form form > :nth-child(7) { --au-i: 7; }
	body.auth .auth-form form > :nth-child(8) { --au-i: 8; }
	body.auth .auth-form form > :nth-child(n + 9) { --au-i: 9; }
	body.auth .au-below { --au-i: 10; }

	/* ошибка кода: сначала появление, потом тряска codeError из auth-new.css */
	body.auth .auth-form form > .code-inputs.error {
		animation:
			au-rise 0.45s var(--au-ease) calc(0.35s + var(--au-i, 0) * 40ms) backwards,
			codeError 0.5s ease-in-out calc(0.8s + var(--au-i, 0) * 40ms);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.auth .code-inputs.error {
		animation: none;
	}
}