/* The Wallet pass preview: an iPhone with the merchant's own card inside it.
   Shared rather than duplicated — the signup shows it to say what is being
   bought, the card designer and the onboarding show it while it is being
   designed, and the admin shows it to read a shop's setup. All four link this
   sheet, so all four render the same thing.

   Drawn from a real Poinçon pass in Apple Wallet. Every colour the pass sets
   arrives inline as a custom property — background, --pass-ink, --pass-label —
   so this file needs no palette of its own and works under either layout. */

/* ---------- The phone ---------- */
.iphone { width: 300px; margin: 0 auto; background: linear-gradient(155deg, #3A3A40, #101013 45%, #26262B); border-radius: 52px; padding: 12px; box-shadow: 0 34px 70px rgba(15,14,20,.42), 0 6px 16px rgba(15,14,20,.28), inset 0 1px 1px rgba(255,255,255,.22); position: relative; }
/* Shown beside a form rather than as the subject of the page — the client's
   own card next to their record. Zoom rather than a second set of sizes: the
   whole mockup, screen ratio and all, scales as one. */
.iphone.compact { zoom: .62; }
.iphone::before { content: ""; position: absolute; right: -2.5px; top: 176px; width: 3px; height: 62px; background: #47474D; border-radius: 2px; }
.iphone::after { content: ""; position: absolute; left: -2.5px; top: 140px; width: 3px; height: 84px; background: linear-gradient(#47474D 0 34px, transparent 34px 50px, #47474D 50px 84px); border-radius: 2px; }
/* Wallet's pass view is light grey, not black — the card has to sit on
   something for its own colour to read. */
/* A real phone's screen, not one whose height the content decides: 9:19.5 is
   the iPhone ratio, and anything shorter reads as a squashed mockup. */
.iphone-screen { background: #F2F2F7; border-radius: 41px; position: relative; overflow: hidden;
                 aspect-ratio: 9 / 19.5; display: flex; flex-direction: column;
                 box-shadow: inset 0 0 0 2px #1B1B1F; }
.iphone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 98px; height: 27px; background: #000; border-radius: 0 0 16px 16px; z-index: 5; }
.iphone-status { display: flex; justify-content: space-between; align-items: center; color: #000000; font-size: .76rem; font-weight: 600; padding: 12px 18px 0; }
.iphone-status .num { letter-spacing: .01em; }
.iphone-status-icons { display: inline-flex; gap: 5px; align-items: center; }
.iphone-battery { width: 23px; height: 12px; border-radius: 3.5px; background: #000000; color: #FFFFFF; display: grid; place-items: center; position: relative; }
.iphone-battery i { font-style: normal; font-size: .5rem; font-weight: 700; letter-spacing: -.02em; }
.iphone-battery::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: rgba(0,0,0,.35); }

/* ---------- The pass ---------- */
/* The class sets display, so the attribute alone cannot hide a face. */
.wpass[hidden] { display: none; }

/* The card turns over rather than cutting: Wallet flips the real pass when the
   customer taps the info button, and the merchant needs to see which face they
   are looking at. Applied by script on the face being revealed, so the two
   faces never animate on load. */
@keyframes wpass-turn { from { transform: perspective(900px) rotateY(-92deg); opacity: .2; }
                        to   { transform: perspective(900px) rotateY(0);      opacity: 1; } }
.wpass.turning, .wpass-back.turning { animation: wpass-turn .38s cubic-bezier(.22,.7,.3,1); transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .wpass.turning, .wpass-back.turning { animation: none; } }
.wpass { flex: 1; margin: 14px 12px 26px; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
         color: var(--pass-ink, #F4F2EA); padding-bottom: 16px;
         box-shadow: 0 10px 26px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06); }
.wpass-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 13px 15px 0; }
.wpass-logo-zone { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Wallet draws logo.png as it comes — transparency kept, no frame, no white
   tile — inside a 160 x 50 pt box. Proportional to this card's width so the
   preview shows the same crop the phone will. */
.wpass-logo { max-width: 42%; max-height: 30px; width: auto; height: auto;
              object-fit: contain; object-position: left center; display: block; flex: none; }
.wpass-monogram { width: 34px; height: 34px; border-radius: 6px; background: #FFFFFF; color: #22212B; flex: none;
                  display: grid; place-items: center; font-family: ui-serif, Georgia, serif; font-size: 1.2rem; font-weight: 600; }
.wpass-brand { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wallet's labelColor and foregroundColor, both derived from the background
   by PassAppearance and handed to the preview as custom properties — the card
   on screen and the card in the pocket read from one rule. */
.wpass-field label { display: block; font-size: .53rem; letter-spacing: .07em; text-transform: uppercase; color: var(--pass-label, #E86A4E); font-weight: 600; margin-bottom: 1px; }
.wpass-field b { font-size: .92rem; font-weight: 500; overflow-wrap: anywhere; display: block; }
.wpass-field.r { text-align: right; }
.wpass-header .wpass-field b { font-size: 1.12rem; font-weight: 400; }

/* The stamp row: the generated strip when there is a shop to generate it for,
   the same circles in CSS when there is not. */
.wpass-strip { width: 100%; height: 74px; object-fit: cover; display: block; margin: 22px 0 0; }
.wpass-stamps { display: flex; gap: 4px; padding: 0 12px; margin: 26px 0 4px; }
.wpass-stamps i { flex: 1 1 0; min-width: 0; aspect-ratio: 1; max-width: 24px; border-radius: 50%;
                  border: 1.5px solid currentColor; opacity: .55; overflow: hidden;
                  display: grid; place-items: center; font-style: normal; font-size: .54rem; font-weight: 700;
                  font-family: ui-monospace, Menlo, monospace; }
.wpass-stamps i.reward { border-width: 2.5px; opacity: .92; }
.wpass-stamps i.f { background: currentColor; border-color: currentColor; opacity: 1; }
.wpass-stamps i.f svg { width: 58%; height: 58%; }

.wpass-fields { display: flex; justify-content: space-between; gap: 12px; padding: 26px 15px 0; }
.wpass-fields .wpass-field { min-width: 0; }

.wpass-qr { background: #FFFFFF; border-radius: 11px; margin: auto auto 0; width: 122px; height: 122px; padding: 9px; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.wpass-qr svg { width: 100%; height: 100%; display: block; }

/* ---------- The rest of the wallet, peeking underneath ---------- */
/* The negative bottom margin is the point: the last card has to run off the
   screen and be clipped by it, or it floats above the bezel. */
.wpass-stack { margin: 0 12px -22px; }
.wpass-stack-peek { display: block; height: 7px; border-radius: 9px 9px 0 0; }
.wpass-stack-peek.far { margin: 0 15px; background: #2E7D4F; }
.wpass-stack-peek.near { margin: 0 7px 0; background: #3B54D6; }
.wpass-stack-card { background: #FFFFFF; border-radius: 14px 14px 0 0; padding: 12px 14px 34px; display: flex; justify-content: space-between; align-items: center; gap: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,.07); }
.wpass-stack-brand { font-weight: 700; font-size: .95rem; color: #22212B; }
.wpass-stack-greet { text-align: right; font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: #8E8E93; line-height: 1.2; }
.wpass-stack-greet b { display: block; font-size: .95rem; letter-spacing: 0; text-transform: none; color: #3B54D6; font-weight: 600; }

/* Clamped to the phone's own width: in a grid column sized on its content,
   a longer caption widens the column and shifts the phone from one step to
   the next. */
.iphone-note { text-align: center; margin: 22px auto 0; max-width: 300px; }

@media (max-width: 560px) {
  .iphone { width: 100%; max-width: 300px; }
}

/* ---------- The back of the pass ----------
   Wallet does not flip the card over: it opens an iOS settings screen. Grey
   ground, a thumbnail of the card, then white grouped lists. The last group
   holds the fields PassBuilder#back_fields ships; the two above are Wallet's
   own, drawn here so the preview matches what the customer actually opens. */
.wpass-back { flex: 1; overflow: hidden; padding: 0 12px 8px; display: flex; flex-direction: column; }
.wpass-back[hidden] { display: none; }
.wback-nav { padding: 4px 0 2px; }
.wback-chevron { width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; color: #3C3C43;
                 display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wback-chevron svg { width: 15px; height: 15px; }

/* The card itself, shrunk to a stamp at the top of the screen. */
.wback-thumb { width: 62%; margin: 4px auto 0; border-radius: 7px; padding: 6px 7px 5px;
               color: #F4F2EA; display: grid; gap: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.wback-thumb-head, .wback-thumb-foot { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.wback-thumb-brand { font-size: .5rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wback-thumb-count { font-size: .5rem; flex: none; }
.wback-thumb-foot { font-size: .42rem; opacity: .92; }
.wback-thumb-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wback-thumb-foot span:last-child { text-align: right; }
.wback-thumb-dots { display: flex; gap: 2px; justify-content: space-between; }
.wback-thumb-dots i { flex: 1 1 0; min-width: 0; max-width: 7px; aspect-ratio: 1; border-radius: 50%;
                      border: 1px solid currentColor; opacity: .55; }
.wback-thumb-dots i.f { background: currentColor; border-color: currentColor; opacity: 1; }

.wback-title { color: #000000; font-family: system-ui, -apple-system, sans-serif; font-size: .76rem;
               font-weight: 700; text-align: center; margin: 12px 6px 2px; line-height: 1.25; }
.wback-updated { color: #8E8E93; font-size: .62rem; text-align: center; margin: 0 0 14px; }

/* iOS grouped lists: white blocks, hairline dividers, generous radius. */
.wback-group { background: #FFFFFF; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.wback-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
             padding: 9px 12px; color: #000000; font-size: .68rem; }
.wback-row + .wback-row, .wback-field + .wback-field { border-top: .5px solid rgba(60,60,67,.2); }
.wback-row.danger { color: #FF3B30; }
.wback-switch { width: 30px; height: 18px; border-radius: 999px; background: #34C759; position: relative; flex: none; }
.wback-switch::after { content: ""; position: absolute; top: 1.5px; right: 1.5px; width: 15px; height: 15px;
                       border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.28); }

/* A field whose value is too long for its row: label above, value below. */
.wback-field { display: grid; gap: 2px; padding: 9px 12px; }
.wback-field[hidden] { display: none; }
.wback-label { color: #000000; font-size: .68rem; }
.wback-value { color: #8E8E93; font-size: .66rem; line-height: 1.35; }
.wback-value.link { color: #007AFF; }

/* Logo alone: the image is drawn identically, it simply gets the room the
   name was taking. */
.wpass-logo-zone.logo-only .wpass-logo { max-width: 100%; max-height: 34px; }
.wpass-brand[hidden] { display: none; }