/* Карта в стиле 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 / var(--strip-h, 144); background-size: cover;
  background-position: center var(--strip-y, 50%); }
.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; }
/* виды прогресса чашек (design.cups_style); .dots — общий контейнер */
.prog-bar { display: block; width: 110px; height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--pass-fg) 22%, transparent); margin-top: 7px; }
.prog-bar i { display: block; height: 100%; width: 0; border: 0; border-radius: 3px; background: var(--pass-fg); opacity: 1; }
.pass-row .pass-field:last-child:not(:first-child) .prog-bar, .pass-head .prog-bar { margin-left: auto; }
.pass-head .dots, .pass-boarding-main .big.end .dots { justify-content: flex-end; }
.prog-segments { gap: 3px; }
.prog-segments i { width: 18px; height: 6px; border-radius: 2px; border: 0;
  background: color-mix(in srgb, var(--pass-fg) 22%, transparent); opacity: 1; }
.prog-segments i.on { background: var(--pass-fg); }
.prog-cups, .prog-beans { gap: 2px; }
.prog-cups i, .prog-beans i { width: auto; height: auto; border: 0; border-radius: 0; background: none; opacity: .4; display: block; }
.prog-cups i.on, .prog-beans i.on { opacity: 1; background: none; }
.prog-cups svg, .prog-beans svg { display: block; stroke: var(--pass-fg); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.prog-cups i.on svg path:first-child, .prog-beans i.on svg ellipse { fill: var(--pass-fg); }
.prog-beans i.on svg path { stroke: var(--pass-bg-solid, #000); }
.prog-ring svg { display: block; }
.prog-ring .track { fill: none; stroke: color-mix(in srgb, var(--pass-fg) 22%, transparent); stroke-width: 3; }
.prog-ring .fill { fill: none; stroke: var(--pass-fg); stroke-width: 3; stroke-linecap: round; }
.prog-ring text { fill: var(--pass-fg); font: 600 8px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
  text-anchor: middle; dominant-baseline: middle; }

.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; }

/* «На весь экран»: контейнер карты задаёт высоту, полоса забирает свободное место */
.pass-fill { display: flex; flex-direction: column; }
.pass-fill > .pass, .pass-fill > .pass-card { flex: 1 0 auto; display: flex; flex-direction: column; }
.pass-fill .pass-inner { flex: 1 0 auto; display: flex; flex-direction: column; }
.pass-fill .pass-front { flex: 1 0 auto; display: flex; flex-direction: column; }
.pass-fill .pass-strip { flex: 1 0 auto; }

/* Двусторонняя карта: переворот вокруг вертикальной оси */
.pass-card { perspective: 1400px; }
.pass-inner { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.pass-inner.flipped { transform: rotateY(180deg); }
.pass-front, .pass-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pass-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; }
.pass-back-body { flex: 1; overflow-y: auto; padding: 18px 16px 56px; -webkit-overflow-scrolling: touch; }
.pass-back-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.pass-back-text { font-size: 15px; line-height: 1.45; white-space: pre-line; opacity: .92; }
.pass-back-field { padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--pass-fg) 18%, transparent); }
.pass-back-text + .pass-back-field, .pass-back-title + .pass-back-field { margin-top: 12px; }
.pass-back-field .l { color: var(--pass-label); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pass-back-field .v { font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; }
.pass-back-field a { color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--pass-fg) 45%, transparent); }

.pass-flip-btn { position: absolute; bottom: 10px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--pass-fg);
  background: color-mix(in srgb, var(--pass-fg) 16%, transparent); -webkit-tap-highlight-color: transparent; }
.pass-flip-btn.left { left: 10px; }
.pass-flip-btn.right { right: 10px; }
.pass-flip-btn:active { transform: scale(.92); }
.pass-flip-btn.text { width: auto; height: 30px; max-width: 60%; padding: 0 13px; border-radius: 15px;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pass-flip-btn img { width: 22px; height: 22px; object-fit: contain; display: block; }
/* на лицевой стороне кнопка не должна наезжать на подсказку под штрихкодом */
.pass-front .pass-code { padding-bottom: 24px; }
.pass-front .pass-code:not(:has(.pass-footer)) { padding-bottom: 52px; }
.pass-front .pass-footer { padding: 0 40px; }
.pass-front.flip-text .pass-code { padding-bottom: 50px; }

/* ===== Шаблоны раскладки (design.layout) ===== */
.pass-tear { height: 0; margin: 16px 22px 0; border-top: 2px dashed color-mix(in srgb, var(--pass-fg) 35%, transparent); }

/* Google Wallet: скругление побольше, логотип в круге, крупное значение, картинка внизу */
.pass-google { border-radius: 24px; font-family: "Google Sans", Roboto, -apple-system, "Segoe UI", sans-serif; }
.pass-google .pass-head { padding: 16px 18px 4px; min-height: 0; }
.pass-google .pass-logo { gap: 12px; }
.pass-google .pass-logo img { width: 40px; height: 40px; max-width: none; border-radius: 50%; object-fit: cover; }
.pass-logo-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 18px; font-weight: 700; background: color-mix(in srgb, var(--pass-fg) 22%, transparent); }
.pass-google .pass-logo-text { font-size: 15px; font-weight: 500; }
.pass-google .pass-field .l { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; }
.pass-google-big { padding: 14px 18px 2px; }
.pass-google-big .v { font-size: 34px; font-weight: 500; line-height: 1.15; }
.pass-google-row { padding: 12px 18px 2px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pass-google-row .pass-field:last-child:not(:first-child) { text-align: left; }
.pass-google-row .pass-field:last-child:not(:first-child) .dots { justify-content: flex-start; }
.pass-google .pass-code-box { border-radius: 16px; }
.pass-google .pass-strip { margin-top: 2px; }

/* Купон: зубчатые края сверху и снизу, линия отрыва перед штрихкодом */
.pass-coupon { border-radius: 2px; box-shadow: none;
  -webkit-mask: radial-gradient(circle 6px at 50% 0, #0000 95%, #000) top / 16px 51% repeat-x,
                radial-gradient(circle 6px at 50% 100%, #0000 95%, #000) bottom / 16px 51% repeat-x;
  mask: radial-gradient(circle 6px at 50% 0, #0000 95%, #000) top / 16px 51% repeat-x,
        radial-gradient(circle 6px at 50% 100%, #0000 95%, #000) bottom / 16px 51% repeat-x; }
.pass-coupon .pass-head { padding-top: 18px; }
.pass-coupon .pass-code { padding-bottom: 22px; }

/* Проездной и посадочный: круглые вырезы по краям на уровне линии отрыва */
.pass-ticket, .pass-boarding { border-radius: 16px; box-shadow: none;
  -webkit-mask: radial-gradient(circle 12px at 0 var(--notch-y, -30px), #0000 95%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 12px at 100% var(--notch-y, -30px), #0000 95%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 var(--notch-y, -30px), #0000 95%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 12px at 100% var(--notch-y, -30px), #0000 95%, #000) right / 51% 100% no-repeat; }
.pass-ticket .pass-logo-text { text-transform: uppercase; letter-spacing: .1em; font-size: 15px; }
.pass-ticket .pass-head { border-bottom: 1px solid color-mix(in srgb, var(--pass-fg) 18%, transparent); }

/* Посадочный талон: два крупных поля и самолёт между ними */
.pass-boarding-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 8px 16px 4px; }
.pass-boarding-main .big { min-width: 0; }
.pass-boarding-main .big .v { font-size: 30px; font-weight: 300; line-height: 1.1; white-space: nowrap; }
.pass-boarding-main .big.end { text-align: right; }
.pass-boarding-main .big.end .dots { justify-content: flex-end; }
.pass-boarding-icon { flex: none; opacity: .85; padding-bottom: 6px; }
.pass-boarding .pass-strip { margin-top: 12px; }

/* Простые карты кошелька: сертификат, билет */
.pass-simple .pass-primary .v { font-size: 34px; font-weight: 500; }
.pass-simple .pass-strip.empty .pass-primary { padding-top: 10px; }
.pass-stamp { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: 6px 16px; border: 3px solid currentColor; border-radius: 8px; color: #ff6b5a;
  font: 800 24px/1 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .12em; opacity: .9; pointer-events: none; }
.pass-simple.pass-ticket .pass-primary .v { font-size: 24px; font-weight: 600; line-height: 1.15; }
.pass-simple.pass-coupon .pass-primary .v { font-size: 28px; line-height: 1.1; }
.pass-simple .pass-boarding-main .big.end { min-width: 0; }
.pass-simple .pass-boarding-main .big.end .v { overflow: hidden; text-overflow: ellipsis; }
/* открытка сертификата без штрихкода (до получения): подсказка внизу, место под кнопку переворота */
.pass .pass-footer.pass-footer-solo { margin: 0; padding: 6px 56px 22px 14px; text-align: left; }
.pass-simple .pass-strip.empty + .pass-row { padding-top: 0; }
/* поздравление на обороте сертификата — открыткой над условиями */
.pass-back-lead { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--pass-fg) 12%, transparent); }
.pass-back-lead .l { color: var(--pass-label); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pass-back-lead .v { font-size: 17px; line-height: 1.45; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; }