/**
 * Форма входа по коду.
 *
 * Размеры, цвета и шрифты не задаём — приходят из настроек Woodmart. Строки
 * размечены штатными form-row, поэтому вертикальный ритм тоже задаёт тема.
 *
 * Главное правило файла — прятать поля логина и пароля, которые рисует тема,
 * пока человек входит по коду. Наш блок вставлен первым элементом формы
 * (woocommerce_login_form_start), а поля темы идут следом соседями, поэтому
 * прячем их комбинатором `~`. Своей разметки для чужих полей не заводим и
 * ничего не удаляем из DOM: тема поменяет классы строк — поля просто станут
 * видны, форма продолжит работать. Это деградация, а не поломка.
 *
 * СОВМЕСТИМОСТЬ. Файл уходит в браузер как есть, без сборщика и автопрефиксера,
 * поэтому синтаксис держим на уровне 2021 года. Сознательно не используем:
 *   :has()      — в Firefox только с 121 (декабрь 2023);
 *   вложенность — Chrome 112 / Firefox 117 (2023), причём непонятый браузером
 *                 вложенный блок отбрасывается целиком, а тут на таких блоках
 *                 держится скрытие полей пароля;
 *   color-mix() — Firefox 113 (2023), а в custom property невалидное значение
 *                 даёт не запасной цвет, а пустой фон.
 * Логические свойства (margin-block, padding-inline) оставлены: они в браузерах
 * с 2020 года и без них пришлось бы дублировать правила под RTL.
 */

.ari-otp {
	/* --wd-gap-* объявлены внутри grid-контейнеров темы и снаружи недоступны,
	   поэтому берём значение темы как запасное */
	--ari-otp-gap: var(--wd-gap-lg, 20px);
	--ari-otp-surface: rgba(0, 0, 0, .04);
}

.ari-otp .ari-otp__step[hidden] {
	display: none;
}

.ari-otp .ari-otp__notice {
	margin-block-end: var(--ari-otp-gap);
	padding-block: calc(var(--ari-otp-gap) / 2);
	padding-inline: calc(var(--ari-otp-gap) * .7);
	border-inline-start: 3px solid var(--wd-primary-color);
	border-radius: var(--wd-brd-radius);
	background: var(--ari-otp-surface);
}

.ari-otp .ari-otp__notice--error {
	border-inline-start-color: #c9356c;
}

/* Код читают по одной цифре — моноширинный шрифт и разрядка.
   Размер относительно базового текста темы, не в пикселях */
.ari-otp .ari-otp__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.4em;
	letter-spacing: .4em;
	text-align: center;
}

.ari-otp .ari-otp__sent {
	margin-block-end: var(--ari-otp-gap);
}

/* Подсказка объясняет непривычный вход без пароля — читается наравне
   с формой, поэтому размер не уменьшаем, только приглушаем цвет */
.ari-otp .ari-otp__hint {
	margin-block-start: calc(var(--ari-otp-gap) / 2);
	opacity: .85;
}

/* Акцентная рамка, а не только подложка: человек, не нашедший письмо во
   «Входящих», должен зацепиться за этот блок взглядом, а не вычитать его */
.ari-otp .ari-otp__spam {
	display: flex;
	gap: calc(var(--ari-otp-gap) / 2);
	align-items: flex-start;
	margin-block-start: var(--ari-otp-gap);
	padding-block: calc(var(--ari-otp-gap) / 2);
	padding-inline: calc(var(--ari-otp-gap) * .7);
	border-inline-start: 3px solid var(--wd-primary-color);
	border-radius: var(--wd-brd-radius);
	background: var(--ari-otp-surface);
}

.ari-otp .ari-otp__spam-icon {
	flex: 0 0 auto;
	margin-block-start: .15em;
	color: var(--wd-primary-color);
}

.ari-otp .ari-otp__resend {
	margin-block-start: calc(var(--ari-otp-gap) / 2);
	min-height: 1.5em;
}

.ari-otp .ari-otp__fallback {
	margin-block: calc(var(--ari-otp-gap) * 1.25) 0;
	padding-block-start: var(--ari-otp-gap);
	border-block-start: 1px solid var(--wd-form-brd-color);
}

/* Кнопка, выглядящая ссылкой: семантика кнопки, вид ссылки темы.
   Специфичность выше одного класса — иначе тема оформит её как обычную кнопку */
.ari-otp .ari-otp__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wd-link-color, inherit);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ari-otp .ari-otp__link:hover {
	color: var(--wd-link-color-hover, inherit);
}

.ari-otp .ari-otp__link[disabled] {
	opacity: .55;
	text-decoration: none;
	cursor: default;
}

/* Переключатель режима — не сноска мелким шрифтом: человек должен видеть, что
   вход по паролю никуда не делся, иначе он ищет его и уходит.

   Размер в rem, а не в токене темы. 1rem у Woodmart — это «Text font size» из
   Theme Settings (woodmart/css/style.css: html { font-size: var(--wd-text-font-size) }),
   и у него своё значение на каждом устройстве. Замер 14.08.2026:
   десктоп — база 15px, кнопка формы 14px; мобильный 390px — база 18px, кнопка 15px.
   Токен --wd-widget-title-font-size тут не годится: он фиксирован на 16px и
   мобильного значения не имеет, из-за чего переключатель оказывался мельче
   основного текста ровно на телефоне. 1.1rem даёт 16.5px и 19.8px — всегда
   крупнее и кнопки, и абзаца, причём без единого медиазапроса */
.ari-otp .ari-otp__fallback .ari-otp__link {
	font-size: 1.1rem;
	font-weight: 600;
}

/* Пока идёт вход по коду, поля темы не нужны — прячем их, не трогая разметку.
   Работает одинаково на странице аккаунта, в боковой панели и на чекауте:
   везде наш блок — первый ребёнок формы, а поля темы его соседи.
   Список закрыт: и разметка Woodmart (form-row-btn, login-form-footer),
   и штатный шаблон WooCommerce (LostPassword и «запомнить меня» лежат
   в форме отдельными элементами) */
.ari-otp:not([data-password]) ~ .form-row-username,
.ari-otp:not([data-password]) ~ .form-row-password,
.ari-otp:not([data-password]) ~ .form-row-btn,
.ari-otp:not([data-password]) ~ .login-form-footer,
.ari-otp:not([data-password]) ~ .woocommerce-LostPassword,
.ari-otp:not([data-password]) ~ .woocommerce-form-login__rememberme {
	display: none;
}

/* Открыли вход по паролю — шаги кода уходят, поля темы возвращаются */
.ari-otp[data-password] .ari-otp__step {
	display: none;
}

/* Ниже нашего блока идут поля темы: даём им воздух, когда они раскрыты */
.ari-otp[data-password] {
	margin-block-end: var(--ari-otp-gap);
}

/* Боковая панель темы предлагает отдельную регистрацию — её больше нет:
   аккаунт создаётся сам при первом входе по коду, и ссылка вела бы в тупик.
   Файл подключается только там, где блок отрисован, поэтому условие
   «есть ли блок в панели» не нужно */
.login-form-side .create-account-question {
	display: none;
}