.ticket-pass-panel { margin-block: 1rem; }
.ticket-pass-dialog { background: #fff; color: #111; border: 2px solid #482060; border-radius: 1.25rem; width: min(38rem, 94vw); box-sizing: border-box; max-height: 92dvh; overflow: auto; padding: 1.25rem; text-align: center; }
.ticket-pass-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.ticket-pass-dialog canvas { display: block; width: min(100%, 32rem); height: auto; margin: 1rem auto; background: #fff; image-rendering: pixelated; }
.ticket-pass-dialog .form-actions { justify-content: center; gap: 1rem; flex-wrap: wrap; }
.ticket-pass-dialog button { min-height: 44px; }
.ticket-pass-offline { border: 2px solid #714600; padding: .75rem; font-weight: 700; }
#ticket-offline-passes { margin-block: 2rem; }
#ticket-offline-passes article { border: 1px solid currentColor; padding: 1rem; margin-block: 1rem; }

.ticket-google-wallet-button { display: inline-flex; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.ticket-google-wallet-button img { display: block; height: 55px; width: auto; }
.ticket-google-wallet-button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.ticket-google-wallet-button:disabled { cursor: wait; }

/* The artwork stays outside the QR canvas and its encoded quiet zone. */
.ticket-pass-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, 34%); align-items: center; gap: .75rem; padding: 1rem; border-radius: .75rem; background: #fff; border: 2px solid #f1d960; text-align: left; }
.ticket-pass-brand-copy { min-width: 0; }
.ticket-pass-brand p, .ticket-pass-brand h2 { margin: 0; }
.ticket-pass-event { color: #482060; font-size: 1.05rem; font-weight: 800; }
.ticket-pass-year { color: #482060; font-size: 2.75rem; line-height: 1.1; font-weight: 900; }
.ticket-pass-brand h2 { font-size: 1rem; margin-block: .4rem; }
.ticket-pass-dates { font-size: .9rem; }
.ticket-pass-riko { display: block; width: 100%; height: auto; }
.ticket-pass-holder { padding-block: 1rem .25rem; overflow-wrap: anywhere; }
.ticket-pass-name { margin: 0; font-size: 1.35rem; font-weight: 800; }
.ticket-pass-role { margin: .35rem 0 0; color: #482060; font-weight: 700; }
@media (max-width: 420px) { .ticket-pass-dialog { padding: .75rem; } .ticket-pass-brand { padding: .75rem; } .ticket-pass-year { font-size: 2.25rem; } }