/* ЧИТАЕМОСТЬ ФОРМ ВХОДА И РЕГИСТРАЦИИ.
   На 412px почти весь вспомогательный текст этих трёх экранов шёл
   12-13px - счётчик символов, «Показать» у пароля, «Запомнить меня», «или»,
   «Ещё нет аккаунта?», ссылки на политику. Аудитория сайта 40-65+, для неё
   это нечитаемо, а экран регистрации - вход в магазин: не прочитал, не завёл
   аккаунт. Всё поднято до 14px.

   ЦВЕТ - ФИРМЕННЫЙ #01A572, не тёмный --zd-brand-ink: узнаваемость марки
   важнее порога 4.5:1 (так же, как у оранжевой кнопки «В корзину»). Не
   перекрашивать без нового запроса.
   */

/* На страницах login/registration делаем страницу строго в высоту экрана:
   header (80) сверху, main растягивается, footer внизу. Без вертикального скролла. */
body:has(#loginForm),
body:has(#registrationForm),
body.recovery-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(#loginForm) main,
body:has(#registrationForm) main,
body.recovery-page main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ОДИНАКОВЫЙ ВОЗДУХ СВЕРХУ И СНИЗУ. Сверху к нему
     прибавляется высота шапки - она position: fixed и накрывает main, так что
     80px без неё означали «впритык под шапкой». Число берём токеном: на узких
     экранах шапка ниже (68px), и своя константа разошлась бы.
     */
  padding: calc(var(--zd-header-h) + 40px) 20px 40px;
  min-height: 0;
  box-sizing: border-box;
}

.wrapper {
  max-width: 560px;          /* было grid 2-колонки; теперь только форма */
  background: white;
  border-radius: 20px;
  margin: 0 auto;
  width: 100%;
}

.right {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #01A572;
  border-radius: 20px;
  background: white;
}

.right h1 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 16px;
  text-align: center;
  color: #1f1f1f;
}

/* Форма */
.form {
  width: 100%;
}

/* padding-bottom резервирует место под .error-message ВСЕГДА, даже когда
   его ещё нет в DOM (js/form-errors.js вставляет/убирает узел целиком). Без
   резерва появление текста «Заполните это поле» раздвигало соседние поля
   вниз одним рывком.
   Сообщение позиционируется внутри этого резерва абсолютно (см.
   .error-message ниже), поэтому его размер больше не влияет на высоту
   .field.
   */
.field {
  position: relative;
  margin-bottom: 8px;
  padding-bottom: 16px;
}

.label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 4px;
}

.label {
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.required {
  color: #ef4444;
  margin-left: 3px;
}

.char-counter {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  /* Поимённо вместо `all` (DESIGN.md, «Движение»): счётчик символов меняет
     только цвет по мере приближения к лимиту. */
  transition: color var(--zd-dur-fast) var(--zd-ease);
  white-space: nowrap;
}

.char-counter.warning {
  color: #f59e0b;
}

.char-counter.error {
  color: #ef4444;
}

.char-counter.success {
  color: #01A572;
}

/* Поля ввода. Без рамки в покое, поля побольше - чтобы не промахиваться.
   Граница заменена
   заливкой, поле остаётся заметным без контура. Рамка/кольцо возвращаются на
   фокусе и у валидных/невалидных состояний - это не декор, а сигнал "где я
   сейчас"/"что не так", убирать нельзя. Высота выросла с 42px до 46px,
   padding с 8px/12px до 10px/14px - крупнее тап-зона, но без перебора.
   Радиус (border-radius) НЕ трогаем - только рамка/заливка/размер.
   */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  background: #F3F4F6;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  min-height: 46px;
  cursor: text;
  touch-action: manipulation;
}

.input-wrapper .country-selector {
  cursor: pointer;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text;
}

.input-wrapper:hover {
  background: #ECEEF1;
}

.input-wrapper:focus-within {
  background: #fff;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/*
 * ДВОЙНАЯ РАМКА: фокус-кольцо на самой обёртке выше уже достаточный
 * индикатор (WCAG 2.4.7 соблюдён), а main.css отдельно рисует СВОЙ
 * focus-visible бордер+тень прямо на <input> для полей БЕЗ обёртки
 * (:where(input...):focus-visible, специфичность (0,1,0) - см. main.css
 * "ФОКУС ТЕКСТОВЫХ ПОЛЕЙ"). У полей внутри .input-wrapper это давало два
 * вложенных кольца разом: внешнее на плашке и маленькое тесное на самом
 * input внутри нее. Глушим внутреннее ЗДЕСЬ (специфичность класс+тег бьёт
 * :where), полагаясь на внешнее кольцо обёртки как единственный сигнал.
 */
.input-wrapper input:focus-visible,
.input-wrapper select:focus-visible,
.input-wrapper textarea:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.input-wrapper.valid {
  border-color: #10b981;
}

.input-wrapper.invalid {
  border-color: #ef4444;
  background: #fef2f2;
}

.input-wrapper.warning {
  border-color: #f59e0b;
}

/* Точка-индикатор скрыта на всех экранах: рамка+заливка .input-wrapper.invalid уже
   говорит "тут ошибка", текст под полем говорит что именно не так; точка
   дублировала первый сигнал, ничего не добавляя. Раньше это уже было решено
   для мобилы отдельным правилом ниже (.validation-dot{display:none} в
   @media) — теперь то же самое действует и на десктопе. Разметку/JS не
   трогаю: .validation-dot остаётся в DOM (used by JS to toggle valid/
   invalid state никак не завязан на видимость), просто не рендерится.
   */
.validation-dot {
  display: none;
}

.input-wrapper.valid .validation-dot {
  background: #10b981;
}

.input-wrapper.invalid .validation-dot {
  background: #ef4444;
}

.input-wrapper.warning .validation-dot {
  background: #f59e0b;
}

/* Поле телефона */
.phone-input-container {
  display: flex;
  gap: 8px;
  /* stretch, а не center: внутри стоит селектор кода страны, который обязан
     доставать до краёв поля. При center контейнер съёживался до высоты
     текста (замер: 19px), и селектор вместе с ним выходил 39px - ниже
     порога 44px, ради которого правка и делалась. */
  align-items: stretch;
  align-self: stretch;
  width: 100%;
}

.whatsapp {
  color: #01A572;
  padding-left: 3px;
  font-weight: 600;
  white-space: nowrap;
}

/* padding вертикально - 0: собственный 8px/8px паддинг селектора страны СВЕРХ паддинга .input-wrapper
   делал строку телефона на 10px выше строки имени/почты. Вертикальное
   центрирование теперь только от align-items:center родителя, как у обычного
   <input>.
   */
/* СЕЛЕКТОР КОДА СТРАНЫ - СВОЯ ШИРОКАЯ ЗОНА. Был узкой полоской в 90px без
   своей высоты: нажимать приходилось точно по надписи «kz +7», а промах
   открывал клавиатуру номера вместо списка стран. Теперь селектор занимает
   всю высоту поля, шире, и отделён от номера чертой - видно, что это
   отдельный орган управления, а не часть номера.
   */
.country-selector {
  flex-shrink: 0;
  min-width: 104px;
  /* height: auto вместе с align-self - иначе select держит собственную
     высоту строки и растяжение до краёв поля не срабатывает: замер давал
     39px вместо 52, то есть ниже порога 44px. */
  align-self: stretch;
  height: auto;
  margin: -10px 0 -10px -14px;
  border: none;
  border-right: 1px solid #DCE0E6;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  padding: 0 26px 0 14px;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 10px center;
}

.country-selector:hover { background-color: #E7EAEE; }
.country-selector:focus {
  background-color: #f1f5f9;
}

.phone-input {
  border: none;
  outline: none;
  font-size: 16px;
  flex-grow: 1;
  min-width: 150px;
  padding: 0 8px 0 12px;
  background: transparent;
  color: #1e293b;
  width: 100%;
}

.phone-input::placeholder {
  color: #64748b;
}

/* Пароль */
.password-input-container {
  display: flex;
  /* stretch - чтобы кнопка «Показать» доставала до краёв поля. При center
     контейнер сжимался до высоты текста (21px), и кнопка выходила 41px
     вместо 46 - меньше порога 44px. То же самое чинилось у телефона. */
  align-items: stretch;
  align-self: stretch;
  width: 100%;
}

.password-input {
  border: none;
  outline: none;
  font-size: 16px;
  flex-grow: 1;
  background: transparent;
  color: #1e293b;
  width: 100%;
}

/* Кнопка показать/скрыть пароль — статичный размер, без скейла.
   Высота 24px (была 32px) - при 46px-обёртке и её 10px паддинге сверху/
   снизу остаётся ровно 26px контента; 32px кнопка раздувала строку пароля
   выше строки имени/почты.
   */
.show-password {
  background: transparent;
  border: none;
  color: #52607A;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* КНОПКА ВО ВСЮ ВЫСОТУ ПОЛЯ, чтобы удобней нажимать. Было 72x24 - при поле высотой
     46px нажимаемая зона занимала чуть больше половины его высоты, а по
     правилу проекта для аудитории 40-65+ минимум 44px. Отрицательные
     вертикальные отступы съедают padding поля, поэтому кнопка дотягивается до
     его краёв, а не висит островком посередине.
     */
  width: auto;
  min-width: 92px;
  align-self: stretch;
  /* -14px справа - ровно padding поля, чтобы кнопка доходила ДО КРАЯ, а не
     останавливалась в паре пикселей от него. Радиус справа повторяет радиус
     поля, слева скруглён меньше - кнопка читается как часть поля, а не как
     наклейка поверх.
     */
  margin: -10px -14px -10px 0;
  padding: 0 16px;
  border-radius: 8px 10px 10px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  outline: none;
}
.show-password:hover,
.show-password:focus-visible { color: #01A572; background: rgba(1, 165, 114, 0.08); }
.show-password:active        { background: rgba(1, 165, 114, 0.16); }
.show-password.is-shown      { color: #01A572; }

.input-style {
  border: none;
  outline: none;
  font-size: 16px;
  flex-grow: 1;
  background: transparent;
  width: 100%;
  color: #1e293b;
}

/* Сообщения об ошибках. Базовый класс — обычный поток (нужен
   .form-error-message, баннер вверху формы вставляется js/form-errors.js
   ПЕРВЫМ ребёнком <form>, не внутри .field - абсолютное позиционирование
   относительно .field ему не подходит и уводило текст на дно страницы,
   поверх футера). */
.error-message {
  font-size: 14px;
  line-height: 14px;
  color: #ef4444;
  padding-left: 4px;
  margin-bottom: 8px;
  animation: slideDown 0.2s ease-out;
}

/* Только ошибка ПОД ПОЛЕМ — абсолютно, внутри padding-bottom резерва
   .field (position: relative там же). bottom:0, а не top:100% - текст
   всегда прижат к низу поля, независимо от реальной высоты
   .input-wrapper. */
.field > .error-message {
  position: absolute;
  left: 4px;
  bottom: 0;
  margin-bottom: 0;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Спрятать от глаз, но не от скринридера - стандартный приём (не display:
   none/visibility:hidden, те убирают элемент и из accessibility-дерева). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Чекбоксы */
.checkbox-group {
  /* Высоту 44px держит САМА рамка, а не строка внутри неё. Когда min-height
     стоял на .checkbox-label, он складывался с отступами группы: блок вырастал
     до 62px при тексте в 21px, причём неровно - 15px сверху и 25px снизу.
     Теперь отступы задаёт один блок, и содержимое стоит по центру.
     */
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #c2c8ce;
  transition: border-color 0.2s;
}

/* Только рамка - без заливки фона: красной рамки достаточно, текст не нужен -
   красная заливка вокруг чекбокса и ссылок на политику была лишней, рамки
   уже хватает как сигнала "тут нужно действие".
   */
.checkbox-group.invalid {
  border-color: #ef4444;
}

/* СОГЛАСИЯ: крупная отметка и нажимаемая строка целиком.
   Было 16x16 с текстовым символом «галочка» внутри - мелко для аудитории
   40-65+ (правило проекта: 44px), и сам знак зависел от системного шрифта,
   поэтому на разных телефонах выглядел по-разному. Теперь отметка 22px, а
   строка тянется на 44px в высоту: нажать можно и по тексту, и мимо
   квадрата - label это уже умеет, не хватало только размера. */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  font-size: 15px;
  color: #475569;
  line-height: 1.45;
}

.checkbox-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  border: 2px solid #C7CDD4;
  background: #fff;
  cursor: pointer;
  transition: background-color var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease);
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
}

.checkbox-label input[type="checkbox"]:checked {
  background-color: #01A572;
  border-color: #01A572;
}

/* Птичка нарисована двумя гранями рамки, а не текстовым символом: символ
   брался из системного шрифта и на части телефонов выходил то жирнее, то
   мельче соседнего. Иконочного глифа «галочка» в шрифте проекта нет. */
.checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:hover { border-color: #01A572; }
.checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid #01A572;
  outline-offset: 2px;
}

.checkbox-label a {
  color: #01A572;
  text-decoration: none;
  font-weight: 500;
}

.checkbox-label a:hover {
  text-decoration: underline;
}

/* Кнопка */
.submit-btn {
  width: 100%;
  padding: 12px;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  margin-top: 4px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.submit-btn:hover {
  background: #0da271;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Строка с чекбоксом "Запомнить меня" и ссылкой "Забыли пароль?" */
.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 20px 0;
  padding: 0 4px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
}

.remember-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid #C7CDD4;
  background: #fff;
  cursor: pointer;
  transition: background-color var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease);
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}

.remember-checkbox:checked {
  background-color: #01A572;
  border-color: #01A572;
}

/* Птичка гранями рамки - как у согласий на регистрации (см. выше). */
.remember-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.remember-checkbox:hover { border-color: #01A572; }
.remember-checkbox:focus-visible { outline: 2px solid #01A572; outline-offset: 2px; }

.remember-label {
  font-size: 15px;
  color: #475569;
  cursor: pointer;
  font-weight: 500;
}

.forgot-password {
  font-size: 14px;
}

.forgot-password a {
  color: #01A572;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--zd-dur-fast) var(--zd-ease),
              background var(--zd-dur-fast) var(--zd-ease);
  padding: 4px 8px;
  border-radius: 6px;
}

.forgot-password a:hover {
  text-decoration: underline;
}

/* Разделитель */
.divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: #64748b;
  font-size: 14px;
  white-space: nowrap;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.divider::before {
  margin-right: 12px;
}

.divider::after {
  margin-left: 12px;
}

/* Ссылка на регистрацию */
/* «Ещё нет аккаунта? Создать» / «Уже есть аккаунт? Войти» — единственный
   переход между входом и регистрацией, а был мельче всего остального на
   странице (14px, полужирность 500) и терялся под кнопкой.
   */
.login-link {
  text-align: center;
  font-size: 16px;
  color: #64748b;
}

.login-link a {
  color: #01A572;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.login-link a:hover {
  text-decoration: underline;
}

/* Футер — добавляем только отступ снизу под мобильный таб-бар */
footer {
  background: white;
  width: 100%;
}
@media (max-width: 1024px) {
  footer { padding-bottom: calc(90px + var(--zd-nav-lift)); }
}

.footer {
  text-align: center;
  padding: 24px 20px;
  font-size: 14px;
  color: #64748b;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  border-radius: 0;
  border: 0;
  /* Серая плашка #FBFBFB приезжала из общего .footer в main.css: рамку и
     скругление здесь уже сбрасывали, а фон пропустили — и на белой странице
     входа внизу висел серый прямоугольник ни к чему.
     */
  background: transparent;
}

.contact-link {
  color: #01A572;
  text-decoration: none;
  padding: 0;
}

.contact-link:hover {
  text-decoration: underline;
}

.footer-bottom {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Прогресс-бар для пароля */
.password-strength {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}

.strength-bar {
  height: 100%;
  width: 0%;
  background: #10b981;
  border-radius: 2px;
  /* Полоса надёжности пароля реально растёт в ширину - её и анимируем; цвет
     меняется вместе с уровнем. */
  transition: width var(--zd-dur) var(--zd-ease),
              background var(--zd-dur) var(--zd-ease);
}

/* Анимация для ошибок */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Планшеты (горизонтальные) 1024px - 1199px */
@media (max-width: 1199px) {
  /* Базовые правила для input ВНУТРИ ФОРМЫ логина/регистрации (.form):
     - font-size: 16px предотвращает iOS-зум при фокусе
     - touch-action: manipulation убирает 300ms задержку
     Скоупим селектором .form чтобы НЕ затрагивать input в шапке сайта. */
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form input[type="number"],
  .form input[type="password"],
  .form input[type="url"],
  .form textarea,
  .form select {
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-text-size-adjust: 100%;
  }

  .form select {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
  }

}

/* Планшеты (вертикальные) 768px - 1023px */
@media (max-width: 1023px) {
  .right {
    border-radius: 20px;
    padding: 32px 32px;
  }
}

/* Мобильные устройства (576px - 767px) */
@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  .right {
    padding: 24px 20px;
  }
  
  .right h1 {
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 0;
  }

  /* КОД СТРАНЫ И НОМЕР - В ОДНУ СТРОКУ и на телефоне.
Здесь стоял flex-direction: column - селектор кода растягивался на всю
ширину, номер уезжал под него, и внутри одной рамки получалось два этажа:
поле читалось как сломанное. На 375px селектор занимает 90px, номеру
остаётся больше 250px - строка помещается свободно (замер в браузере).

Тот же вид, что у телефона в корзине - одна пара «код + номер» на всех
формах сайта.
*/
  /* 84px здесь противоречило основному правилу (104px): на деле ширину
     задаёт содержимое «kz +7», но оставлять два разных числа - значит
     однажды получить разъехавшийся селектор. */
  .country-selector {
    min-width: 96px;
  }
  
  .checkbox-group {
    padding: 12px;
  }
  
  .submit-btn {
    padding: 12px;
    font-size: 16px;
  }
  
  /* «Запомнить меня» и «Забыли пароль?» - ОДНОЙ строкой по краям.
     Столбиком они читались как два несвязанных пункта посреди формы, а
     ссылка по центру - как заголовок следующего блока. В строку они
     помещаются с запасом после того, как текст ссылки сократили с
     «Забыли пароль? Нажмите для восстановления» до «Забыли пароль?». */
  .remember-forgot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 18px 0;
  }

  .forgot-password {
    text-align: right;
  }
  
  .footer {
    padding: 16px 16px;
    font-size: 14px;
  }
  
  .footer-bottom {
    font-size: 14px;
  }
}

/* Маленькие мобильные устройства (до 575px) */
@media (max-width: 575px) {
  .wrapper {
    margin-bottom: 20px;
    border-radius: 16px;
    max-width: 100%;
  }
  /* Верхний отступ = высота шапки (--zd-header-h), а не 0. Шапка -
     position:fixed, и «без лишнего скролла» когда-то писалось для
     нефиксированной шапки: main начинался сразу под ней в потоке, и 0 сверху
     было верно. Теперь фиксированная шапка просто НАКРЫВАЕТ main - заголовок
     «Вход в аккаунт» рисовался под ней и был не виден целиком. Токен, а не
     число: на ≤425px шапка ниже (68px), и число разошлось бы так же, как уже
     разошлось у планки фильтров каталога (--zd-header-h в tokens.css).
     */
  body:has(#loginForm) main,
  body.recovery-page main {
    /* Высота шапки + воздух, а не впритык: с чистым --zd-header-h карточка
       касалась шапки верхним краем.
       */
    padding: calc(var(--zd-header-h) + 40px) 12px 40px;
  }
  /* Запас под ФИКСИРОВАННОЕ нижнее меню телефона. Регистрации в этом списке
     не было, и её кнопка «Готово!» на длинной форме уходила прямо под панель
     «Магазин / Каталог / Избранное…» - нажать по ней было нечем, пока не
     доскроллишь до самого низа. Найдено снимком всей страницы: панель легла
     поверх кнопки отправки.

     Отступ нужен ИМЕННО ПОД ФОРМОЙ, а не только под футером: на регистрации
     кнопка отправки стоит внутри main, и запас у футера её не спасал - замер
     показывал перекрытие в 30px даже с ним.
     */
  body:has(#loginForm) footer,
  body:has(#registrationForm) footer,
  body.recovery-page footer { padding-bottom: calc(70px + var(--zd-nav-lift)); }

  /* Регистрация: сверху шапка плюс тот же воздух, что у входа, по бокам
     тоже как у входа. Снизу больше - там стоит ФИКСИРОВАННОЕ нижнее меню,
     и «одинаково сверху и снизу» для глаза означает равный зазор до
     видимых краёв, а не равные числа в padding. */
  body:has(#registrationForm) main {
    padding: calc(var(--zd-header-h) + 40px) 12px 76px;
  }
  /* Своего верхнего отступа у карточки больше нет: он прибавлялся к padding
     главного блока и делал зазор сверху заметно больше нижнего. */
  .wrapper:has(#registrationForm) { margin-top: 0; }

  /* ФОРМА - СОБРАННАЯ КАРТОЧКА, А НЕ ПОЛЯ НА БЕЛОМ ЛИСТЕ.
     Здесь стояло `border: none; border-radius: 0` - задумывалось «как в
     приложении», а на деле форма теряла границы: белые поля на белом фоне без
     единой опоры для глаза, и между ними и футером зияла пустота. Возвращаем
     контур - но мягкий, серой рамкой и лёгкой тенью, а не зелёной рамкой
     десктопа: она на телефоне во всю ширину читается как рамка ошибки.
     */
  .right {
    padding: 24px 20px 28px;
    border: 1px solid #E8EAED;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .right h1 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
    margin-bottom: 24px;
    text-align: left;        /* iOS/Android — заголовок слева */
    letter-spacing: -0.3px;
  }
  
  /* === МОБИЛЬНЫЕ ИНПУТЫ в стиле приложения ===
     Большие тач-таргеты (52px), мягкие скругления, светлый фон,
     лейблы крупнее, единый ритм между полями. */
  .field { margin-bottom: 14px; }
  .label-wrapper { margin-bottom: 6px; }
  .label {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.1px;
  }
  .input-wrapper {
    min-height: 52px;
    border-radius: 16px;
    border-color: transparent;
    background: #F3F4F6;
    padding: 12px 16px;
  }
  .input-wrapper:focus-within {
    background: #fff;
    border-color: #01A572;
    box-shadow: 0 0 0 4px rgba(1, 165, 114, 0.12);
  }
  .input-wrapper input,
  .input-wrapper select,
  .input-wrapper textarea {
    font-size: 16px;          /* предотвращает iOS-зум */
  }
  /* Скрываем декоративную точку валидации — лишний шум на мобиле */
  .validation-dot { display: none; }
  
  .char-counter {
    font-size: 14px;
  }
  
  /* 15px, а не 14: согласие - юридически значимый текст, и по правилу
     проекта для аудитории 40-65+ мельче 15px на телефоне не опускаемся. */
  .checkbox-label {
    font-size: 15px;
    line-height: 1.35;
  }
  
  .divider {
    margin: 20px 0;
    font-size: 14px;
  }
  
  .login-link {
    font-size: 14px;
  }
  
  .footer {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .submit-btn {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    padding: 16px;
    border-radius: 16px;
    margin-top: 4px;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 14px rgba(1, 165, 114, 0.18);
  }
  .submit-btn:active { transform: scale(0.98); }
  
  .remember-label,
  .forgot-password {
    font-size: 14px;
  }
  
  .phone-input,
  .password-input,
  .input-style {
    font-size: 14px;
  }
  
  /* ЗОНЫ НАЖАТИЯ 44px У ТЕКСТОВЫХ ДЕЙСТВИЙ.
     Замер на 412px: «Показать» 24px, «Забыли пароль?» 26px, «Создать» 19px -
     втрое меньше нормы. Это не декор, а действия, по которым надо попасть
     пальцем, причём аудитории 40-65+. Растёт ТОЛЬКО зона: кегль и цвет те
     же, внешне ничего не меняется - тот же приём, что у точек баннера. */
  .show-password {
    font-size: 14px;
    min-width: 64px;
    min-height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .forgot-password a,
  .login-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }

  /* Чекбокс «Запомнить меня» - попадание по всей подписи, а не по квадратику. */
  .remember-me {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .remember-label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-left: 8px;
  }
}

/* Очень маленькие устройства (до 360px) */
@media (max-width: 360px) {
  .forgot-password a {
    font-size: 14px;
  }
  
  .right h1 {
    font-size: 22px;
  }

  /* ОТСТУПЫ ВНУТРИ КАРТОЧКИ НЕ ОБНУЛЯЕМ.
     Здесь стояло padding: 0 - и на экранах уже 360px поля упирались в края
     карточки: замер на 320px давал 1px слева и справа. Отступы просто МЕНЬШЕ,
     чем на 375px (16 вместо 20), а не нулевые: рамка карточки без внутреннего
     поля читается как обрезанная вёрстка.
     */
  .right {
    padding: 20px 16px 24px;
    margin: 0 auto;
  }

  /* padding: 8px со всех сторон ломал бы разметку селектора: справа нужен
     запас под стрелку, иначе она наезжает на «kz +7». */
  .country-selector {
    font-size: 14px;
    padding: 0 22px 0 12px;
    min-width: 90px;
  }
  
  .submit-btn {
    font-size: 14px;
    padding: 12px;
  }
  
  .footer {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ЭКРАН НЕВЫСОКИЙ - ЖМЁМ ВТОРОСТЕПЕННОЕ, А НЕ ГЛАВНОЕ.
   На 360x640 форма входа не помещалась вовсе: карточка 534px при доступных
   472px - низ уезжал под нижнее меню, и до кнопки «Войти» надо было
   доскроллить. Ужимаем то, что можно ужать без потери: заголовок, воздух
   между полями и служебные подписи.

   ЧЕГО НЕ ТРОГАЕМ: высоту полей, кнопок и отметок - 44px это правило для
   аудитории 40-65+, и «сделать поменьше» здесь означало бы «сделать
   непопадаемым». Размер текста в полях тоже остаётся 16px: меньше - и iOS
   начинает зумить страницу при фокусе.
   */
@media (max-height: 740px) and (orientation: portrait) {
  /* Своего отступа снизу у карточки больше нет: он складывался с padding
     главного блока и сбивал равенство зазоров - замер давал 16px сверху
     против 35px снизу. Воздух снизу задаёт один блок, см. правило в конце
     этого медиазапроса. */
  .wrapper {
    margin-bottom: 0;
  }

  .right {
    padding: 18px 16px 20px;
  }

  .right h1 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 14px;
  }

  /* Воздух между полями: 24px суммарно превращаются в 14px. */
  .field {
    margin-bottom: 4px;
    padding-bottom: 10px;
  }

  /* «Запомнить меня» и «Забыли пароль?» ложились в две строки каждая и
     съедали 24px. При 14px обе помещаются в одну. */
  .remember-label,
  .forgot-password a {
    font-size: 14px;
  }
  .remember-forgot {
    margin: 4px 0 12px;
  }

  /* Разделитель «или» и строка «Ещё нет аккаунта» - служебные: им хватает
     половины прежнего воздуха. */
  .divider {
    margin: 12px 0;
  }
  .login-link {
    margin-top: 8px;
  }

  .footer {
    padding: 12px 16px;
  }

  /* РАВНЫЙ ВОЗДУХ СВЕРХУ И СНИЗУ НА НЕВЫСОКОМ ЭКРАНЕ.
     На 360x640 выходило 40px от шапки и 11px до нижнего меню: карточка
     заметно прижималась вниз. Считаем от ВИДИМЫХ краёв - сверху шапка,
     снизу фиксированное меню (~60px), - поэтому числа в padding разные, а
     зазор одинаковый: по 16px. Больше на таком экране не выделить, иначе
     форма снова перестанет помещаться целиком. */
  body:has(#loginForm) main,
  body:has(#registrationForm) main,
  body.recovery-page main {
    padding-top: calc(var(--zd-header-h) + 24px);
    /* 65px подобраны ЗАМЕРОМ, а не выведены формулой: нижнее меню
       position: fixed и накрывает нижнюю часть main, поэтому padding здесь
       не равен видимому зазору. С 76px выходило 16px сверху против 35px
       снизу; с этими числами - 24 и 24 на 360x640. */
    padding-bottom: calc(65px + var(--zd-nav-lift));
  }
}

/* Ландшафтные мобильные устройства */
@media (max-height: 500px) and (orientation: landscape) {
  .right {
    padding: 16px 20px;
  }
  
  .right h1 {
    margin-bottom: 16px;
    margin-top: 0;
    font-size: 22px;
  }
  
  .input-wrapper {
    min-height: 42px;
  }
  
  .submit-btn {
    padding: 12px;
    font-size: 16px;
  }
  
  .footer {
    padding: 8px 16px;
  }
}

/* ============================================================
   Оверлей восстановления пароля
   ============================================================ */
.recover-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: recoverFadeIn 0.2s ease;
}

.recover-overlay.is-open {
  display: flex;
}

@keyframes recoverFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.recover-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  padding: 32px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  animation: recoverSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes recoverSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.recover-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s, color 0.15s;
}

.recover-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.recover-modal h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1f1f1f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px 0;
  padding-right: 32px;
}

/* Плашка объясняет, ЧЕМ восстанавливают пароль - её читают, а не нажимают.
   Фон фирменный #01A572: белый текст на нём даёт 3.2:1, ниже нормы 4.5:1, и
   06.09 фон был затемнён до --zd-brand-ink. Не затемнять снова.
   */
.recover-notice {
  background: #01A572;
  color: #fff;
  padding: 16px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}

.recover-notice.success {
  background: #0d8f60;
}

.recover-field {
  margin-bottom: 16px;
}

.recover-field .label {
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 8px;
  display: block;
}

.recover-submit {
  background: #01A572;
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.recover-submit:hover {
  background: #0d8f60;
  transform: translateY(-1px);
}

.recover-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.recover-view { display: none; }
.recover-view.is-active { display: block; }

@media (max-width: 540px) {
  .recover-modal {
    padding: 24px 20px;
    border-radius: 12px;
  }
  .recover-modal h2 { font-size: 18px; }
  .recover-notice { font-size: 14px; padding: 12px 14px; }
}

/* ============================================================
   Двухколоночная сетка имени и email (только регистрация, десктоп)
   ============================================================ */
@media (min-width: 900px) {
  #registrationForm .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  #registrationForm .field-row > .field {
    margin-bottom: 8px;
    /* ПОЛЯ В РЯДУ ВЫРАВНИВАЮТСЯ ПО НИЗУ, а не по верху.
Подпись «Электронная почта» с пометкой «по желанию» и счётчиком не
помещается в одну строку и переносится - строка меток становится 43px
против 21px у соседа, и само поле уезжало на 22px ниже поля «Ваше имя»
(замер в браузере).

Тянем input вниз колонки: подписи остаются каждая своей высоты, а сами
поля стоят на одной линии при любой длине подписи и на любом языке.
Жёсткая min-height у подписи сломалась бы на первом же переводе.
*/
    display: flex;
    flex-direction: column;
  }
  #registrationForm .field-row > .field > .input-wrapper {
    margin-top: auto;
  }
}
/* Пометка «по желанию» у необязательного поля. Красная звёздочка .required
   означает «обязательно»; для обратного случая нужен свой, спокойный знак,
   иначе поле без звёздочки читается просто как «забыли пометить». */
.label-optional {
  margin-left: 8px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

/* Переключатель «Вход | Регистрация» вместо ссылки внизу формы. */
.zd-auth-switch { display: flex; background: #F2F2F2; border-radius: 14px; padding: 3px; margin: 0 0 18px; }
.zd-auth-switch a { flex: 1; min-height: 44px; display: grid; place-items: center; border-radius: 11px; font-size: 15px; font-weight: 700; color: #4B5563; text-decoration: none; }
.zd-auth-switch a.is-active { background: #fff; color: #01704F; box-shadow: 0 1px 4px rgba(17, 24, 39, .15); }
.zd-auth-switch a:focus-visible { outline: 3px solid #01A572; outline-offset: -3px; }
.zd-auth-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ввод кода из WhatsApp: крупные цифры, кнопка не ниже 52px на любом телефоне, «Отправить ещё раз» одной строкой.
   В конце файла намеренно: выше правила узких экранов уменьшают .submit-btn. */
#codeForm #codeInput {
  height: 60px;
  padding: 0 12px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .35em;
  text-indent: .35em; /* интервал после последней цифры иначе сдвигает код влево */
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#codeForm #codeInput::placeholder { color: #9aa5a0; letter-spacing: .35em; }
#codeForm .submit-btn { min-height: 52px; font-size: 16px; }
.login-link.code-resend { font-size: 14px; line-height: 1.4; }
.login-link.code-resend a { display: inline-block; padding: 12px 0; white-space: nowrap; }