/* Karty Apple Wallet / Google Wallet – vzhľad pre galériu aj editor (kreslí js/wallet-designs.js) */
.pass{width:100%;color:var(--fg);background:var(--bg);cursor:pointer;user-select:none;-webkit-user-select:none;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.pass:active{transform:scale(.985)}
.pass svg{display:block}
.pass .qr{width:100%;height:auto}

/* Apple Wallet – store card */
.apple{border-radius:13px;font-family:var(--sf);box-shadow:0 1px 1px rgba(0,0,0,.08),0 14px 34px -14px rgba(0,0,0,.35)}
.ap-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px 10px;min-height:52px}
.logo{display:flex;align-items:center;gap:8px;min-width:0}
.mark{width:30px;height:30px;flex:none;border-radius:50%;background:var(--sbg);color:var(--sink);display:grid;place-items:center}
.mark svg{width:21px;height:21px}
.wordmark{font-size:17px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.hf{text-align:right;flex:none}
.lbl{display:block;font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--lb);line-height:1.3}
.val{display:block;font-size:17px;font-weight:400;line-height:1.2;color:var(--fg)}
.hf .val{font-size:19px;font-variant-numeric:tabular-nums}
.strip svg{width:100%;height:auto}
.ap-fields{display:flex;justify-content:space-between;gap:12px;padding:10px 13px 0}
.ap-fields .r{text-align:right}
.ap-fields .val{font-size:15px}
.ap-code{display:flex;justify-content:center;padding:20px 0 18px}
.qrbox{background:#fff;border-radius:7px;padding:9px 9px 5px;width:132px;text-align:center}
.qrbox span{display:block;font:500 10px/1.4 var(--sf);color:#111;letter-spacing:.03em;margin-top:2px}

/* Google Wallet – loyalty */
.google{border-radius:24px;font-family:var(--gs);box-shadow:0 1px 2px rgba(0,0,0,.1),0 10px 30px -14px rgba(0,0,0,.35)}
.g-head{display:flex;align-items:center;gap:10px;padding:16px 18px 13px;border-bottom:1px solid var(--div)}
.g-head .mark{width:34px;height:34px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.g-head .mark .mk{color:var(--logoInk)}
.g-head .mark svg{width:24px;height:24px}
.g-issuer{font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-title{font-size:23px;font-weight:500;line-height:1.2;padding:14px 18px 2px;letter-spacing:-.005em}
.g-fields{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:12px 18px 0}
.g-fields .gl{display:block;font-size:12px;opacity:.78}
.g-fields .gv{display:block;font-size:15.5px;font-weight:500;line-height:1.3}
.g-code{display:flex;flex-direction:column;align-items:center;gap:7px;padding:20px 0 18px}
.gqr{background:#fff;border-radius:16px;padding:12px;width:150px}
.g-code span{font-size:12.5px;opacity:.85;letter-spacing:.02em}
.g-hero svg{width:100%;height:auto}

/* ilustrácie: jeden zdroj, dva režimy (farebná nálepka / jednofarebná pečiatka) */
.m *{stroke:var(--k);stroke-width:var(--sw);stroke-linejoin:round;stroke-linecap:round}
.m .fa{fill:var(--a)}.m .fb{fill:var(--b)}.m .fc{fill:var(--c)}.m .fd{fill:var(--d)}
.m .fw{fill:#fff}.m .fk{fill:var(--k)}.m .fh{fill:var(--hole)}.m .ln{fill:none}
.m .ns{stroke:none}
.m .hl{fill:none;stroke:rgba(255,255,255,.7)}
.m .sa{fill:none;stroke:var(--a);stroke-width:calc(var(--sw)*2.4)}
.m .sc{fill:none;stroke:var(--c);stroke-width:calc(var(--sw)*1.3)}
.m .thick{stroke-width:calc(var(--sw)*2)}
.mk{--a:transparent;--b:transparent;--c:transparent;--d:transparent;--hole:transparent;--k:currentColor;--sw:6.5}
.mk .fw,.mk .fk{fill:currentColor}
.mk .hl,.mk .ns{display:none}
.mk .sa{stroke:currentColor;stroke-width:6.5}
.mk .sc{stroke:currentColor;stroke-width:5}

.pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1.9) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0)}}
.pass.won .strip,.pass.won .g-hero{animation:glow 1.2s ease}
@keyframes glow{30%{filter:brightness(1.18) saturate(1.2)}}

.mark.pro{background:none!important;box-shadow:none!important}
.mark.pro>svg{width:100%!important;height:100%!important}
.ap-fields>div{min-width:0}
.ap-hfs{display:flex;gap:12px;flex:none}
.ap-fields.many{gap:8px}
.ap-fields.many .val{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-fields.many .lbl{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}