/*
 * RU: Стили раздела «Карта лояльности» (БП3, подписка для бизнеса) нового кабинета /biz/app/. Правила — внутри body.bt-page и на
 *     токенах сайта (--k-*), без литералов цвета (храповик check:theme). Файл свой у каждой фазы — потоки не правят один файл.
 * EN: Styles of the "Карта лояльности" section (БП3, business subscription) of the new /biz/app/ cabinet. Rules sit inside
 *     body.bt-page and use site tokens (--k-*), no colour literals (the check:theme ratchet). One file per phase.
 */

/* RU: Код штампа — крупно и моноширинно: кассир показывает экран клиенту, а тот переписывает код с расстояния вытянутой руки.
   EN: The stamp code — large and monospace: the cashier shows the screen to the customer, who copies it from arm's length. */
body.bt-page .lo-code-wrap {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--k-s-4); margin: var(--k-s-3) 0;}
/* RU: Единственное отступление от шкалы П1 (docs/UI-RULES.md), разрешённое ведущей сессией: 40/48 — код читают с расстояния
       вытянутой руки. Начертание — 600 (700 — только знак бренда).
   EN: The single П1 scale exception allowed by the lead session: 40/48 — the code is read from arm's length. Weight 600
       (700 is for the brand mark only). */
body.bt-page .lo-code {font-family: var(--k-font-mono); font-size: 40px; line-height: 48px; font-weight: var(--k-fw-600);
  letter-spacing: 0.08em; padding: var(--k-s-3) var(--k-s-4); border-radius: var(--k-r-3); background: var(--k-brand-soft); color: var(--k-brand-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;}
/* RU: QR — на светлой подложке: камера должна прочесть его и в тёмной теме. EN: The QR on a light backing for dark theme cameras. */
body.bt-page .lo-qr {display: inline-grid; place-items: center; padding: var(--k-s-2); border-radius: var(--k-r-2); background: var(--k-surface); border: 1px solid var(--k-border);}
body.bt-page .lo-qr img, body.bt-page .lo-qr canvas {max-width: 100%; height: auto;}

/* RU: Состояние кода: ждём — спокойно, засчитан — зелёным, истёк — предупреждением. EN: The code state tones. */
body.bt-page .lo-status {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--k-s-2); font-weight: var(--k-fw-600);}
body.bt-page .lo-status.is-used {color: var(--k-ok);}
body.bt-page .lo-status.is-expired {color: var(--k-warn);}
body.bt-page .lo-status b {font-variant-numeric: tabular-nums;}

/* RU: Поле кода награды: заглавными, как код на экране клиента. EN: The reward code field: upper case, as on the customer's screen. */
body.bt-page .lo-reward {flex-wrap: wrap;}
body.bt-page .lo-reward .inp {min-width: 0; text-transform: uppercase; font-family: var(--k-font-mono);}

/* RU: Превью карты клиента: кружки штампов, закрашенный — поставлен. EN: The customer card preview: stamp dots. */
body.bt-page .lo-preview {background: var(--k-surface-2);}
body.bt-page .lo-dots {display: flex; flex-wrap: wrap; gap: 8px; margin: var(--k-s-3) 0;}
body.bt-page .lo-dots i {width: 24px; height: 24px; border-radius: var(--k-r-pill); border: 2px solid var(--k-brand); background: var(--k-surface);}
body.bt-page .lo-dots i.is-on {background: var(--k-brand);}
body.bt-page .lo-limit {margin-bottom: var(--k-s-3);}

@media (max-width: 640px) {
  body.bt-page .lo-code {padding: var(--k-s-2) var(--k-s-3);}
  body.bt-page .lo-reward .btn {flex: 1 1 100%;}
}

/* RU: П4: на телефоне цели касания — не меньше 40 px (маленькие кнопки кабинета рассчитаны на мышь). EN: П4: 40 px touch targets. */
@media (pointer: coarse), (max-width: 640px) {
  body.bt-page .sc-loyalty .btn.is-sm, body.bt-page .sc-loyalty .inp {min-height: 40px;}
}