/*
  Бонусы: «Войти» и «Регистрация» в шапке, зелёная полоса «Получать бонусы и скидки» под плитками
  и окно с регистрацией, входом и баллами. Подключается вместе с assets/js/account.js
  на основном сайте (index.html, с 04.10.2026).
  Мир сайта без изменений: белый, мятный, зелёный, текст #1D201D, угол 8px, линии 2px, без теней.
  Ошибки формы того же красного, что плашка «Хит» (--hit).
  С 06.10.2026 в окне «Ваши баллы» есть последние операции и удаление аккаунта.
*/
.header-end [hidden], .auth-dialog [hidden] { display: none !important; }
/* У кнопки-элемента свой серый фон браузера. :where не добавляет веса, поэтому заливка при наведении
   из .btn--line:hover продолжает работать. */
:where(.header-end, .auth-dialog) button.btn--line { background: transparent; }

/* ---------- Шапка ---------- */
.header-end { gap: 8px; }
.acc-short { display: none; }

/* ---------- Зелёная полоса под плитками (по референсу владельца) ---------- */
.bonus {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  width: 100%; max-width: 1360px; min-height: 88px; margin: 16px auto 0;
  padding: 18px 22px 18px 24px;
  border: 0; border-radius: var(--r); background: var(--block); color: var(--white);
  text-align: left; cursor: pointer;
  transition: transform .45s var(--ease), background-color .25s var(--ease);
}
/* Подъём при наведении как у плиток над ней; только для мыши, чтобы на телефоне не залипал после касания */
@media (hover: hover) {
  .bonus:hover { transform: translateY(-4px); }
  .bonus:hover .bonus-go { transform: translateX(3px); }
}
.bonus:active { transform: translateY(1px); }
.bonus-icon { width: 36px; height: auto; }
.bonus-text { display: grid; gap: 4px; min-width: 0; }
.bonus-title { font: 400 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: .005em; }
.bonus-sub { font: 400 15px/1.4 var(--text); color: var(--mint); }
.bonus-go { width: 22px; height: 22px; transition: transform .25s var(--ease); }

/* ---------- Окно ---------- */
html.has-dialog { overflow: hidden; scrollbar-gutter: stable; }   /* страница под окном не листается и не сдвигается */
.auth-dialog {
  width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 2px solid var(--ink); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  overflow: auto; overscroll-behavior: contain;
}
.auth-dialog::backdrop { background: rgba(29, 32, 29, .5); }
.auth-dialog:not([open]) { display: none; }   /* браузеры без <dialog>: закрытое окно не видно */
.auth-box { padding: 20px 24px 24px; }
.auth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.auth-title { font: 400 32px/1.05 var(--display); letter-spacing: -.005em; }
.auth-close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.auth-close:hover { background: var(--mint); }
.auth-close .icon { width: 22px; height: 22px; }

/* Появление окна: только короткое проявление 0,2 с; при «меньше движения» его нет */
@media (prefers-reduced-motion: no-preference) {
  .auth-dialog[open], .auth-dialog[open]::backdrop { animation: auth-in .2s var(--ease) both; }
}
@keyframes auth-in { from { opacity: 0; } }

/* ---------- Форма регистрации и входа ---------- */
.auth { display: grid; gap: 16px; }
.auth-rule { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.auth-tabs button {
  height: 44px; border: 2px solid var(--line-2); border-radius: var(--r); background: var(--white);
  font: 500 14.5px/1 var(--text); color: var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.auth-tabs button:hover { border-color: var(--block); }
.auth-tabs button[aria-pressed="true"] { background: var(--block); border-color: var(--block); color: var(--white); }

.field { display: grid; gap: 6px; }
.field label { font: 500 14px/1.2 var(--text); }
.field input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 2px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink);
  font: 400 16px/1.2 var(--text); caret-color: var(--block);
  transition: border-color .2s var(--ease);
}
.field input:hover { border-color: rgba(29, 32, 29, .4); }
.field input:focus { border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: var(--hit); }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--white) inset; -webkit-text-fill-color: var(--ink); }
.field-hint { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.field-err { font: 500 13.5px/1.4 var(--text); color: var(--hit); }

.pass { position: relative; }
.pass input { padding-right: 108px; }
.pass-toggle {
  position: absolute; top: 4px; right: 4px; height: 40px; padding: 0 12px;
  border: 0; border-radius: var(--r); background: transparent; cursor: pointer;
  font: 500 14px/1 var(--text); color: var(--green-text);
  transition: background-color .2s var(--ease);
}
.pass-toggle:hover { background: var(--mint); }

.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
/* Своя галочка: рамка 2px как у полей, отмеченная заливается зелёным с белой галкой.
   Угол 6px, как у кнопок порций: 8px на квадрате 22px выглядел бы почти кругом. */
.check input {
  appearance: none; -webkit-appearance: none;
  display: grid; place-content: center;
  width: 22px; height: 22px; margin: 1px 0 0;
  border: 2px solid var(--line-2); border-radius: 6px; background: var(--white); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.check input::before {
  content: ""; width: 10px; height: 5px; margin-top: -2px;
  border: solid var(--white); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
  opacity: 0;
}
.check input:hover, .check input:focus-visible { border-color: var(--ink); }
.check input:checked { background: var(--block); border-color: var(--block); }
.check input:checked::before { opacity: 1; }
.check input[aria-invalid="true"] { border-color: var(--hit); }
.check label { font-size: 14px; line-height: 1.45; cursor: pointer; }
.check label a { color: var(--green-text); text-underline-offset: 3px; }
.check .field-err { grid-column: 2; }

.auth-error { padding: 12px 14px; border: 2px solid var(--hit); border-radius: var(--r); font: 500 14px/1.45 var(--text); }
.auth-note { padding: 12px 14px; border-radius: var(--r); background: var(--mint); font: 500 14px/1.45 var(--text); }
.auth-submit { width: 100%; margin-top: 2px; }
.auth-submit:disabled { cursor: progress; opacity: .75; }

/* ---------- Баллы после входа ---------- */
.auth-me { display: grid; gap: 12px; }
.me-points {
  display: flex; align-items: baseline; gap: 10px;
  font: 300 72px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.me-unit { font: 400 26px/1 var(--display); letter-spacing: 0; }
.me-card { font: 600 17px/1.35 var(--text); font-variant-numeric: tabular-nums; }

/* QR-код карты (07.10.2026): мятная плашка, слева белый квадрат с кодом, справа номер.
   Белое поле в 4 модуля входит в сам рисунок, поэтому камера кассы видит край кода на любом фоне. */
.me-qr {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 14px; border-radius: var(--r); background: var(--mint);
}
.me-qr-code { width: 152px; border-radius: 6px; overflow: hidden; color: var(--ink); line-height: 0; }
.me-qr-code svg { display: block; width: 100%; height: auto; }
.me-qr-text { display: grid; gap: 4px; min-width: 0; }
.me-qr-label { font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.me-qr-no { font: 400 36px/1 var(--display); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-qr-hint { margin-top: 6px; font-size: 14px; line-height: 1.45; }
.me-rule { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.me-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.me-actions .btn { flex: 1 1 auto; }

/* Последние операции: строки через линию 2px, баллы справа зелёным */
.me-ops { margin-top: 12px; padding-top: 16px; border-top: 2px solid var(--line); }
.me-ops-title { margin-bottom: 4px; font: 400 22px/1.1 var(--display); letter-spacing: .005em; }
.me-ops-list { list-style: none; margin: 0; padding: 0; }
.me-op { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 10px 0; }
.me-op + .me-op { border-top: 2px solid var(--line); }
.me-op-what { font: 600 15px/1.35 var(--text); font-variant-numeric: tabular-nums; }
.me-op-pts {
  grid-row: span 2; align-self: center;
  font: 400 26px/1 var(--display); color: var(--green-text); font-variant-numeric: tabular-nums;
}
.me-op-when { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.me-ops-empty { padding: 6px 0 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* Удаление аккаунта: тихая ссылка внизу, чтобы не нажали случайно */
.me-delete {
  justify-self: start; margin-top: 2px; padding: 10px 0;
  border: 0; background: none; cursor: pointer;
  font: 500 14px/1.2 var(--text); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.me-delete:hover { color: var(--ink); }
.del-text { font-size: 15px; line-height: 1.5; }

/* ---------- Телефон: окно на весь экран ----------
   Кнопок шапки на телефоне с 08.10.2026 нет: они в меню за тремя полосками (Остальное/style.css). */
@media (max-width: 720px) {
  .bonus { min-height: 76px; margin-top: 14px; padding: 14px 14px 14px 16px; gap: 12px; }
  .bonus-icon { width: 30px; }
  .bonus-title { font-size: 21px; }
  .bonus-sub { font-size: 13.5px; }

  .auth-dialog {
    width: 100%; max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0;
  }
  .auth-box { padding: 0 16px 28px; }
  .auth-head { position: sticky; top: 0; z-index: 1; margin: 0 -16px 10px; padding: 10px 16px; background: var(--white); }
  .me-points { font-size: 64px; }
}
@media (max-width: 380px) {
  .me-qr { gap: 14px; padding: 12px; }
  .me-qr-code { width: 124px; }
  .me-qr-no { font-size: 30px; }
  .bonus { gap: 10px; padding: 12px 12px 12px 14px; }
  .bonus-icon { width: 26px; }
  .bonus-title { font-size: 19px; }
  .bonus-sub { font-size: 13px; }
}