/* ===== Wallet pass preview component =====
   The on-screen twin of the installed Apple Wallet pass. It is deliberately
   NOT styled with the AccessPass brand: its only job is to predict what lands
   in the customer's phone, so it uses Apple's system font (SF), the
   merchant's own colors, and the exact stamp-grid breakpoints that the server
   strip renderer mirrors (index.js STAMP_PER_ROW <-> .hl-card__stampsList_count_N).
   Sizes are in rem against a 10px root (brand.css sets font-size: 62.5%). */

:root {
  --pass-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
}

/* ---------- Phone frame: iPhone 17 Pro ----------
   Drawn from measured proportions instead of a picture: a 402 x 874 pt
   display where 1 pt = 25.6rem / 402. Layers, outside in: brushed titanium
   band, glass edge, black bezel, display; side buttons on the band; a faint
   glass glint over the screen; contact shadow built from doubling layers.
   Inside the display sits the Wallet pass view (status bar, "•••" button,
   home indicator), so the pass is seen exactly where the customer sees it. */
.ap-phone {
  --pt: calc(25.6rem / 402);
  position: relative; width: 28.4rem; height: 58.5rem; border-radius: 5.3rem; padding: 0;
  background: linear-gradient(135deg, #a1a1a6 0%, #48484c 14%, #242427 40%, #1c1c1f 60%, #46464a 86%, #a8a8ad 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .1),
    0 8px 16px rgba(0, 0, 0, .08), 0 16px 32px rgba(0, 0, 0, .07), 0 32px 64px rgba(20, 22, 43, .08);
}
.ap-phone::before {
  content: ""; position: absolute; inset: .32rem; border-radius: 5rem; background: #040405;
  box-shadow: inset 0 0 0 .08rem rgba(255, 255, 255, .16), inset 0 .12rem .24rem rgba(255, 255, 255, .06);
}
.ap-phone__btn { position: absolute; width: .3rem; border-radius: .2rem; background: linear-gradient(90deg, #58585c, #b4b4b9 55%, #6a6a6e); }
.ap-phone__btn--action { left: -.26rem; top: 10.4rem; height: 2.4rem; }
.ap-phone__btn--volup { left: -.26rem; top: 15rem; height: 4.6rem; }
.ap-phone__btn--voldown { left: -.26rem; top: 20.6rem; height: 4.6rem; }
.ap-phone__btn--power { right: -.26rem; top: 16.8rem; height: 7.4rem; background: linear-gradient(270deg, #58585c, #b4b4b9 55%, #6a6a6e); }
.ap-phone__btn--camera { right: -.2rem; top: 33rem; height: 4rem; width: .24rem; background: linear-gradient(270deg, #3a3a3e, #8c8c91 50%, #3a3a3e); }

.ap-phone__screen {
  position: absolute; inset: 1.4rem; border-radius: 3.94rem; background: #F2F2F7; overflow: hidden;
  padding: calc(116 * var(--pt)) 1.1rem 0;
}
.ap-phone__glass {
  position: absolute; inset: 1.4rem; border-radius: 3.94rem; pointer-events: none; z-index: 6;
  /* Soft light across the glass, no hard edge: a visible glint line reads as fake. */
  background: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%);
}
.ap-phone__island {
  position: absolute; top: calc(11 * var(--pt)); left: 50%; transform: translateX(-50%); z-index: 4;
  width: calc(126 * var(--pt)); height: calc(37 * var(--pt)); border-radius: 99rem; background: #000;
}
.ap-phone__status {
  position: absolute; top: 0; left: 0; right: 0; height: calc(54 * var(--pt)); z-index: 3;
  display: grid; grid-template-columns: calc(138 * var(--pt)) 1fr calc(138 * var(--pt)); align-items: center;
  font-family: var(--pass-font); font-size: calc(17 * var(--pt)); font-weight: 590; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: #000; pointer-events: none;
}
.ap-phone__time { justify-self: center; padding-left: calc(6 * var(--pt)); }
.ap-phone__icons { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.ap-phone__icons svg { display: block; height: calc(12 * var(--pt)); width: auto; }
.ap-phone__icons--android { display: none; }
/* Wallet pass view nav, as on a real iPhone: "Done" left, outlined "•••" right. */
.ap-phone__done {
  position: absolute; top: calc(60 * var(--pt)); left: calc(20 * var(--pt)); z-index: 3; height: calc(30 * var(--pt));
  display: flex; align-items: center; font-family: var(--pass-font); font-size: calc(17 * var(--pt));
  font-weight: 600; letter-spacing: -.01em; color: #000;
}
.ap-phone__more {
  position: absolute; top: calc(60 * var(--pt)); right: calc(18 * var(--pt)); z-index: 3;
  width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 50%; display: grid; place-items: center;
  color: #000; border: calc(1.7 * var(--pt)) solid currentColor; padding: 0; background: none; cursor: pointer;
}
.ap-phone__more svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); display: block; }
.ap-phone__home {
  position: absolute; left: 50%; bottom: calc(8 * var(--pt)); transform: translateX(-50%); z-index: 4;
  width: calc(144 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 99rem; background: #000; opacity: .92;
}
.ap-phone__content { position: relative; }
.ap-phone--bare .ap-phone__more, .ap-phone--bare .ap-phone__done { display: none; }

/* Android: Pixel-style flat frame, even bezel, punch-hole camera. */
.ap-phone--android { border-radius: 4rem; background: linear-gradient(135deg, #7a7a7f 0%, #2e2e31 22%, #1d1d1f 60%, #58585c 100%); }
.ap-phone--android::before { border-radius: 3.7rem; }
.ap-phone--android .ap-phone__btn--action,
.ap-phone--android .ap-phone__btn--volup,
.ap-phone--android .ap-phone__btn--voldown,
.ap-phone--android .ap-phone__btn--camera { display: none; }
.ap-phone--android .ap-phone__btn--power { top: 13rem; height: 5rem; }
.ap-phone--android .ap-phone__screen,
.ap-phone--android .ap-phone__glass { inset: 1.1rem; border-radius: 3rem; }
.ap-phone--android .ap-phone__screen { padding: calc(96 * var(--pt)) 1.4rem 0; background: #fff; }
.ap-phone--android .ap-phone__island { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); top: calc(14 * var(--pt)); }
.ap-phone--android .ap-phone__status { grid-template-columns: 1fr 1fr; padding: 0 calc(28 * var(--pt)); font-family: Roboto, var(--pass-font); font-weight: 500; font-size: calc(15 * var(--pt)); }
.ap-phone--android .ap-phone__time { justify-self: start; padding: 0; }
.ap-phone--android .ap-phone__icons { grid-column: 2; justify-self: end; }
.ap-phone--android .ap-phone__icons--ios { display: none; }
.ap-phone--android .ap-phone__icons--android { display: flex; }
.ap-phone--android .ap-phone__more, .ap-phone--android .ap-phone__done { display: none; }
.ap-phone--android .ap-phone__home { width: calc(108 * var(--pt)); height: calc(4 * var(--pt)); opacity: .7; }

.ap-phone__screen .hl-card { margin: 0 auto; box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .12); }

/* Scale wrapper: reserves the scaled footprint so layout doesn't jump. */
.ap-phone-wrap { --s: 1; width: calc(28.4rem * var(--s)); height: calc(58.5rem * var(--s)); position: relative; flex: none; }
.ap-phone-wrap > .ap-phone { position: absolute; top: 0; left: 0; transform: scale(var(--s)); transform-origin: top left; }

/* ---------- The pass ---------- */
.hl-card {
  font-family: var(--pass-font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
  background: #fff; color: #1f1e1f;
  border-radius: .7rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; overflow: hidden; width: 23.4rem;
  text-align: left; line-height: normal;
}

.hl-card__header { display: flex; justify-content: space-between; height: 4.6rem; padding: .5rem .7rem .9rem; }
.hl-card__name { display: flex; align-items: center; min-width: 0; max-width: 100%; height: 3.5rem; font-size: 1.2rem; font-weight: 600; }
.hl-card__name > div { white-space: nowrap; text-overflow: ellipsis; min-width: 0; max-width: 100%; overflow: hidden; }
/* Wallet logo box: 160 x 50 pt on a 320 pt pass. */
.hl-card__headerLogo { width: auto; height: auto; max-height: 3.2rem; max-width: 8rem; object-fit: contain; margin-right: .5rem; flex: none; }
.hl-card__headerLogo--alone { max-width: 11.7rem; margin-right: 0; }

.hl-card__section { position: relative; }

.hl-card__stamps,
.hl-card__background {
  background-color: #f6f6f6; background-position: 50%; background-repeat: no-repeat; background-size: cover;
  height: 8.8rem; position: relative;
}
.hl-card__stamps { padding: .2rem .25rem; }

.hl-card__stampsList { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; }
.hl-card__stampsList .hl-card__stamp { flex: 1; }

/* Stamp count sizing (1-30). Server strip renderer mirrors these wraps. */
.hl-card__stampsList_count_1 .hl-card__stamp > div,
.hl-card__stampsList_count_2 .hl-card__stamp > div { width: 7.5rem; height: 7.5rem; }
.hl-card__stampsList_count_2 .hl-card__stamp { flex: none; width: 8.2rem; }
.hl-card__stampsList_count_3 .hl-card__stamp { flex: 0 0 33.333%; }
.hl-card__stampsList_count_3 .hl-card__stamp > div { width: 6.8rem; height: 6.8rem; }
.hl-card__stampsList_count_4 .hl-card__stamp { flex: 0 0 25%; }
.hl-card__stampsList_count_4 .hl-card__stamp > div { width: 4.9rem; height: 4.9rem; }
.hl-card__stampsList_count_5 .hl-card__stamp { flex: 0 0 20%; }
.hl-card__stampsList_count_5 .hl-card__stamp > div { width: 3.8rem; height: 3.8rem; }
.hl-card__stampsList_count_6 { padding: 0 1.3rem; }
.hl-card__stampsList_count_6 .hl-card__stamp { flex: 0 0 33.333%; }
.hl-card__stampsList_count_6 .hl-card__stamp > div { width: 3.4rem; height: 3.4rem; }
.hl-card__stampsList_count_7, .hl-card__stampsList_count_8 { padding: .1rem .7rem; }
.hl-card__stampsList_count_7 .hl-card__stamp, .hl-card__stampsList_count_8 .hl-card__stamp { flex: 0 0 25%; }
.hl-card__stampsList_count_7 .hl-card__stamp > div, .hl-card__stampsList_count_8 .hl-card__stamp > div { width: 3.2rem; height: 3.2rem; }
.hl-card__stampsList_count_9, .hl-card__stampsList_count_10 { padding: .1rem .3rem; }
.hl-card__stampsList_count_9 .hl-card__stamp, .hl-card__stampsList_count_10 .hl-card__stamp { flex: 0 0 20%; }
.hl-card__stampsList_count_9 .hl-card__stamp > div, .hl-card__stampsList_count_10 .hl-card__stamp > div { width: 3.2rem; height: 3.2rem; }
.hl-card__stampsList_count_11, .hl-card__stampsList_count_12 { padding: .2rem 0; }
.hl-card__stampsList_count_11 .hl-card__stamp, .hl-card__stampsList_count_12 .hl-card__stamp { flex: 0 0 16.6667%; }
.hl-card__stampsList_count_11 .hl-card__stamp > div, .hl-card__stampsList_count_12 .hl-card__stamp > div { width: 3rem; height: 3rem; }
.hl-card__stampsList_count_13, .hl-card__stampsList_count_14 { padding: .4rem 0; }
.hl-card__stampsList_count_13 .hl-card__stamp, .hl-card__stampsList_count_14 .hl-card__stamp { flex: 0 0 14.2857%; }
.hl-card__stampsList_count_13 .hl-card__stamp > div, .hl-card__stampsList_count_14 .hl-card__stamp > div { width: 2.6rem; height: 2.6rem; }
.hl-card__stampsList_count_15 { padding: 0 .7rem; }
.hl-card__stampsList_count_15 .hl-card__stamp { flex: 0 0 20%; }
.hl-card__stampsList_count_15 .hl-card__stamp > div { width: 2.2rem; height: 2.2rem; }
.hl-card__stampsList_count_16, .hl-card__stampsList_count_17, .hl-card__stampsList_count_18 { padding: 0 .35rem; }
.hl-card__stampsList_count_16 .hl-card__stamp, .hl-card__stampsList_count_17 .hl-card__stamp, .hl-card__stampsList_count_18 .hl-card__stamp { flex: 0 0 16.6667%; }
.hl-card__stampsList_count_16 .hl-card__stamp > div, .hl-card__stampsList_count_17 .hl-card__stamp > div, .hl-card__stampsList_count_18 .hl-card__stamp > div { width: 2.2rem; height: 2.2rem; }
.hl-card__stampsList_count_19, .hl-card__stampsList_count_20, .hl-card__stampsList_count_21 { padding: 0 .2rem; }
.hl-card__stampsList_count_19 .hl-card__stamp, .hl-card__stampsList_count_20 .hl-card__stamp, .hl-card__stampsList_count_21 .hl-card__stamp { flex: 0 0 14.2857%; }
.hl-card__stampsList_count_19 .hl-card__stamp > div, .hl-card__stampsList_count_20 .hl-card__stamp > div, .hl-card__stampsList_count_21 .hl-card__stamp > div { width: 2rem; height: 2rem; }
.hl-card__stampsList_count_22, .hl-card__stampsList_count_23, .hl-card__stampsList_count_24 { padding: .1rem; }
.hl-card__stampsList_count_22 .hl-card__stamp, .hl-card__stampsList_count_23 .hl-card__stamp, .hl-card__stampsList_count_24 .hl-card__stamp { flex: 0 0 12.5%; }
.hl-card__stampsList_count_22 .hl-card__stamp > div, .hl-card__stampsList_count_23 .hl-card__stamp > div, .hl-card__stampsList_count_24 .hl-card__stamp > div { width: 1.8rem; height: 1.8rem; }
.hl-card__stampsList_count_25, .hl-card__stampsList_count_26, .hl-card__stampsList_count_27 { padding: .2rem .1rem; }
.hl-card__stampsList_count_25 .hl-card__stamp, .hl-card__stampsList_count_26 .hl-card__stamp, .hl-card__stampsList_count_27 .hl-card__stamp { flex: 0 0 11.1111%; }
.hl-card__stampsList_count_25 .hl-card__stamp > div, .hl-card__stampsList_count_26 .hl-card__stamp > div, .hl-card__stampsList_count_27 .hl-card__stamp > div { width: 1.8rem; height: 1.8rem; }
.hl-card__stampsList_count_28, .hl-card__stampsList_count_29, .hl-card__stampsList_count_30 { padding: .5rem 0; }
.hl-card__stampsList_count_28 .hl-card__stamp, .hl-card__stampsList_count_29 .hl-card__stamp, .hl-card__stampsList_count_30 .hl-card__stamp { flex: 0 0 10%; }
.hl-card__stampsList_count_28 .hl-card__stamp > div, .hl-card__stampsList_count_29 .hl-card__stamp > div, .hl-card__stampsList_count_30 .hl-card__stamp > div { width: 1.8rem; height: 1.8rem; }

.hl-card__stamp { display: flex; justify-content: center; align-items: center; width: 100%; overflow: hidden; }
.hl-card__stamp > div {
  background-color: #eaeaed; border: .1rem solid transparent; border-radius: 50%; position: relative;
  transition: background-color .3s ease, color .3s ease;
}
.hl-card__stamp > div > span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62%; height: 62%; display: flex; align-items: center; justify-content: center;
}
.hl-card__stamp > div > span svg { width: 100%; height: 100%; display: block; }
.hl-card__stamp > .hl-card__stampImg { background: transparent !important; border: 0; border-radius: 0; }
.hl-card__stampImg img { width: 100%; height: 100%; object-fit: contain; display: block; flex: none; }
.hl-card__stamp--img, .hl-card__stamp > .hl-card__stampImg { overflow: visible; }
.hl-card__stampImg { display: flex; align-items: center; justify-content: center; }

.hl-card__body { padding: .7rem; }
.hl-card__row { display: flex; justify-content: space-between; margin-left: -1rem; }
.hl-card__property { white-space: nowrap; flex: 1; min-width: 0; max-width: 50%; padding-left: 1rem; line-height: 1.3; }
.hl-card__property:not(:first-child):last-child { text-align: right; }
/* Apple Wallet field label: SF, small uppercase, regular weight, light tracking. */
.hl-card__propertyLabel { text-transform: uppercase; text-overflow: ellipsis; overflow: hidden; font-size: .85rem; font-weight: 400; letter-spacing: .02em; opacity: .62; }
/* Apple Wallet field value: SF, ~13pt, medium. */
.hl-card__propertyValue { text-overflow: ellipsis; overflow: hidden; font-size: 1.55rem; font-weight: 500; letter-spacing: -.01em; }

.hl-card__footer { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; height: 16rem; padding: 0 .7rem 2rem; }
.hl-card__code { background: #fff; text-align: center; border-radius: .7rem; max-width: 16rem; margin: 0 auto; padding: .8rem; }
.hl-card__code canvas { display: block; margin: 0 auto; max-width: 14rem; max-height: 9rem; }
/* PDF417 in Wallet: a wide white panel across almost the whole pass, near the
   bottom (not a small centered square like QR/Aztec). Rows stretch
   vertically without losing data, so the canvas is scaled to ~4:1. */
.hl-card__footer--pdf417 { justify-content: flex-end; padding-bottom: 1.5rem; }
.hl-card__code--pdf417 { width: 88%; max-width: none; padding: .9rem 1rem .6rem; border-radius: .6rem; }
.hl-card__code--pdf417 canvas { width: 100%; max-width: none; height: 4.9rem; max-height: none; image-rendering: pixelated; }
/* Tapping it opens the back of the pass, like Wallet's "..." button. */
.hl-card__info { display: block; width: 100%; margin-top: .4rem; padding: 0; border: 0; background: none; font: inherit; font-size: .95rem; color: #000; opacity: .72; text-align: center; white-space: nowrap; cursor: pointer; }
.hl-card__info:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: .3rem; }

/* Back of the pass (Wallet back fields) */
.hl-back__header { display: flex; align-items: center; gap: .8rem; padding: 1rem .9rem; }
.hl-back__logo { width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 1.2rem; font-weight: 600; }
.hl-back__logo img { width: 100%; height: 100%; object-fit: contain; }
.hl-back__company { font-size: 1.3rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-back__divider { height: .1rem; background: currentColor; opacity: .12; margin: 0 .9rem; }
.hl-back__rows { max-height: 25rem; overflow: hidden; }
.hl-back__row { padding: .8rem .9rem .6rem; }
.hl-back__label { text-transform: uppercase; font-size: .85rem; font-weight: 400; opacity: .62; letter-spacing: .02em; }
.hl-back__value { font-size: 1.2rem; line-height: 1.45; overflow-wrap: break-word; }
.hl-back__value--empty { opacity: .4; font-style: italic; }

/* Editable proof: text the merchant can correct in place. The mark reads like
   a proofreader's dashed underline, only while pointing or editing. */
.hl-card [data-edit] { cursor: text; border-radius: .3rem; outline: 1px dashed transparent; outline-offset: .15rem; transition: outline-color .15s; }
.hl-card [data-edit]:hover, .hl-card [data-edit]:focus { outline-color: rgba(84, 87, 230, .85); }
.hl-card [data-edit][contenteditable="true"] { outline: 1.5px solid #5457E6; background: rgba(84, 87, 230, .08); text-overflow: clip; }
.hl-card [data-zone] { cursor: pointer; }

/* A stamp that was just earned "develops" in: one continuous emergence. */
@keyframes ap-develop {
  0% { filter: blur(6px) saturate(0); transform: scale(.72); opacity: .2; }
  60% { filter: blur(1px) saturate(.6); opacity: 1; }
  100% { filter: none; transform: none; opacity: 1; }
}
.hl-card__stamp.is-new > div { animation: ap-develop .9s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .hl-card__stamp.is-new > div { animation: none; }
}

/* Wallet pocket used by APPass.landInWallet (publish / add-to-Wallet moment). */
.ap-pocket {
  position: absolute; left: -3%; right: -3%; bottom: -8%; height: 56%; z-index: 4; pointer-events: none;
  border-radius: 1.4rem 1.4rem 1.8rem 1.8rem;
  background: linear-gradient(180deg, #2B2C44 0%, #15162B 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -.6rem 1.8rem rgba(0, 0, 0, .25);
}
.ap-pocket::before { content: ""; position: absolute; left: 6%; right: 6%; top: .9rem; border-top: 1.5px dashed rgba(255, 255, 255, .22); }
.ap-pocket::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.2rem 0 0 -1.6rem; border-radius: 50%;
  background: #5457E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat;
}