/* ============================================================
   NOLIK.SU — пин-код покупателя: поля входа и раздел кабинета.

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ site.css
   -----------------------------------
   Витринный `site.css` правят несколько задач одновременно, а эти правила
   нужны РОВНО двум страницам: входу (`login.html`) и разделу кабинета
   «Вход и пин-код» (`account_pin.html`). Отдельный файл подключается
   только там (см. `<link … pin.css>` в этих шаблонах), поэтому на
   каталоге, карточке товара и в корзине не появляется ни одного лишнего
   правила.

   ЧТО ЗДЕСЬ ВАЖНО
   ---------------
   * **Крупное поле.** Пин-код набирают на телефоне, часто одной рукой:
     поле выше обычного и текст в нём крупнее, чтобы цифры были видны.
   * **Цифровая клавиатура.** Раскладку выбирает разметка (`inputmode`),
     а `type="password"` не даёт цифрам попасть в скриншот-подсказки
     браузера.
   * **Никаких зависимостей от JavaScript.** Всё, что ниже, — обычный CSS:
     скрипт (`static/js/pin.js`) только добавляет удобство.
   * **Видимый фокус.** Покупатель должен видеть, в какое поле он пишет:
     рамка фокуса задана явно, а не отдана на откуп браузеру.
   ============================================================ */

.pin-field {
  margin-bottom: 14px;
}

/* Одно большое поле на четыре цифры. Моноширинный шрифт и разрядка
   букв делают цифры различимыми: «1» и «7» не сливаются. */
.pin-input {
  width: 100%;
  max-width: 260px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, "Consolas", monospace;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 14px;
  text-align: center;
  color: var(--ink, #172235);
  background: #fff;
  border: 2px solid #c9d2e0;
  border-radius: 12px;
  /* Счётчик цифр не нужен: длина ограничена разметкой (maxlength). */
  caret-color: var(--brand, #1658e8);
}

.pin-input:focus {
  outline: none;
  border-color: var(--brand, #1658e8);
  box-shadow: 0 0 0 4px rgba(22, 88, 232, 0.16);
}

.pin-input::placeholder {
  letter-spacing: 14px;
}

/* Поле в состоянии отказа: рамка красная, но текст ошибки — рядом
   (текст, а не только цвет: цвет видит не каждый покупатель). */
.pin-input[aria-invalid="true"] {
  border-color: #c62828;
}

/* На телефоне поле занимает всю ширину карточки: так цифры крупнее
   и промахнуться по кнопке «Войти» труднее. */
@media (max-width: 560px) {
  .pin-input {
    max-width: 100%;
    font-size: 34px;
    letter-spacing: 12px;
  }
}

/* ------------------------------------------------------------
   Раздел кабинета «Вход и пин-код»
   ------------------------------------------------------------ */

.pin-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #f5f7fb;
  border: 1px solid #dfe5ef;
  border-radius: 12px;
}

.pin-state b {
  font-size: 18px;
}

.pin-form {
  max-width: 420px;
}

.pin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.pin-actions form {
  margin: 0;
}

/* Кнопка «Отключить пин-код» — не главное действие на странице,
   поэтому она вторичная, но заметная. */
.pin-disable {
  color: #8a1c1c;
  border-color: #e4bcbc;
}

.pin-tip {
  margin-top: 10px;
  font-size: 13px;
  color: #626f81;
}