/* Карта в стиле Apple Wallet (store card). Цвета задаются переменными из дизайна. */
.pass {
  --pass-bg: #2a1610; --pass-fg: #fff; --pass-label: #f3c9a8;
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--pass-bg); color: var(--pass-fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 14px 34px rgba(0, 0, 0, .28);
  -webkit-font-smoothing: antialiased;
}
.pass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; min-height: 58px; }
.pass-logo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pass-logo img { max-height: 34px; max-width: 130px; object-fit: contain; display: block; }
.pass-logo-text { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-head .pass-field { text-align: right; flex: 0 1 auto; max-width: 48%; }
.pass-logo { flex: 1 1 auto; }

.pass-field { min-width: 0; }
.pass-field .l { color: var(--pass-label); font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-field .v { font-size: 17px; line-height: 1.25; margin-top: 1px; overflow-wrap: anywhere; }

.pass-strip { position: relative; aspect-ratio: 375 / 144; background-size: cover; background-position: center; }
.pass-strip.empty { aspect-ratio: auto; }
.pass-strip::before { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--strip-dim, 0); }
.pass-strip.empty::before { display: none; }
.pass-primary { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.pass-strip.empty .pass-primary { position: static; padding: 4px 14px 10px; }
.pass-primary .v { font-size: 46px; font-weight: 300; line-height: 1.05; margin: 0; }
.pass-primary .l { font-size: 12px; }

.pass-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px 4px; }
.f-number .v { white-space: nowrap; font-size: 15px; letter-spacing: -.01em; }
.pass-row .pass-field:last-child:not(:first-child) { text-align: right; }
.pass-row .pass-field:last-child:not(:first-child) .dots { justify-content: flex-end; }
.dots { display: flex; gap: 5px; margin-top: 5px; align-items: center; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--pass-fg); opacity: .55; }
.dots i.on { background: var(--pass-fg); opacity: 1; }
.dots b { font-size: 13px; line-height: 1; margin-left: 1px; }

.pass-code { padding: 14px 14px 18px; display: flex; flex-direction: column; align-items: center; }
.pass-code-box { background: #fff; border-radius: 8px; padding: 10px 12px 7px; text-align: center;
  width: 100%; max-width: 290px; }
.pass-code-box.qr { width: auto; padding: 10px; }
.pass-code-box svg { display: block; width: 100%; height: 72px; }
.pass-code-box.qr svg, .pass-code-box.qr img { width: 150px; height: 150px; margin: 0 auto; display: block; }
.pass-code-num { color: #111; font: 500 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; margin-top: 7px; }
.pass-footer { color: var(--pass-label); font-size: 12px; margin-top: 10px; text-align: center; }