/* Damdala: мобильная форма у баннера в магазине. Без внешних шрифтов и CDN. */
:root {
  --bg: #f6f4ef; --card: #ffffff; --ink: #1d1b16; --muted: #6b675e; --line: #e3dfd5;
  --brand: #0f6b4f; --brand-ink: #ffffff; --error: #b3261e; --ok: #0f6b4f;
  --radius: 14px; font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.container { max-width: 28rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.brand { font-weight: 700; letter-spacing: .02em; margin: .25rem 0 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
p { margin: .5rem 0; }
.muted { color: var(--muted); font-size: .9rem; }
label { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
input[type=tel], input[type=text] {
  width: 100%; font: inherit; font-size: 1.2rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
input.otp { letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: .8rem 0; }
.check input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; }
.button {
  display: block; width: 100%; text-align: center; font: inherit; font-weight: 600; padding: .85rem 1rem; margin-top: 1rem;
  border: 0; border-radius: 10px; background: var(--brand); color: var(--brand-ink); text-decoration: none; cursor: pointer;
}
.button.secondary { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.linkbutton { background: none; border: 0; padding: 0; margin-top: .8rem; font: inherit; font-size: .9rem; color: var(--brand); text-decoration: underline; cursor: pointer; }
.alert { border-radius: 10px; padding: .7rem .9rem; margin: .75rem 0; font-size: .95rem; }
.alert.error { background: #fbeae9; color: var(--error); }
.alert.ok { background: #e7f3ee; color: var(--ok); }
.balance { font-size: 2.2rem; font-weight: 700; margin: .25rem 0 0; font-variant-numeric: tabular-nums; }
.row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.row span:first-child { color: var(--muted); }
.qr { display: block; width: 12rem; height: 12rem; margin: 1rem auto .25rem; }
.cardnumber { text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.status { display: flex; gap: .6rem; align-items: center; }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
/* Индикаторы htmx: стили из htmx выключены ради CSP. */
.htmx-indicator { opacity: 0; visibility: hidden; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; visibility: visible; transition: opacity 200ms ease-in; }
.htmx-request .button { opacity: .7; }

.marketing { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* Кнопки кошельков. Пока аккаунтов нет, они ведут на предпросмотр, но стоят там же и
   выглядят так же, как будут выглядеть с настоящими пасами. */
.walletbutton {
  display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%;
  padding: .85rem 1rem; margin-top: 1rem; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.walletbutton svg { width: 1.25rem; height: 1.25rem; flex: none; }
.walletbutton.apple { background: #000; color: #fff; }
.walletbutton.google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }

/* Предпросмотр паса: карта рисуется страницей, но по образцу кошелька — сверху полоса
   с названием, крупно баланс, внизу QR на белом поле. Поля те же, что уйдут в пас. */
.pass { border-radius: var(--radius); overflow: hidden; margin-top: 1rem; }
.passtop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.15rem; }
.passbrand { font-weight: 700; letter-spacing: .02em; }
.passlevel { font-weight: 600; font-variant-numeric: tabular-nums; }
.passbody { padding: 1.1rem 1.15rem 1.35rem; }
.passlabel { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.passbody .balance { margin-top: .1rem; }
.qrbox { background: #fff; border-radius: 12px; padding: .7rem; width: max-content; margin: 1.1rem auto .35rem; }
.qrbox .qr { margin: 0; }
.pass.apple { background: #1c1c1e; color: #fff; }
.pass.apple .passtop { background: #000; }
.pass.apple .passlabel { color: rgba(255, 255, 255, .55); }
.pass.apple .row { border-top-color: rgba(255, 255, 255, .14); }
.pass.apple .row span:first-child { color: rgba(255, 255, 255, .55); }
.pass.apple .cardnumber { color: rgba(255, 255, 255, .75); }
.pass.google { background: var(--card); border: 1px solid var(--line); }
.pass.google .passtop { background: var(--brand); color: var(--brand-ink); }
.pass.google .passlabel { color: var(--muted); }
.passback { margin-top: 1rem; }
.passback h2 { font-size: 1rem; margin: 0 0 .25rem; color: var(--muted); }
.alert.warn { background: #fff6e5; border-color: #f0c67a; }