/* ── WRM Boarding Pass v42-28 ─────────────────────────────────────────
   Single portrait card built ON the uploaded glass frame image.
   Frame PNG (assets/img/bp-frame.png, 1024x1536) supplies a thin glass
   edge with no perforation notches — the card is a single continuous
   panel now, not a torn-ticket stub. CSS injects the frosted colour
   fill (or a background photo, blurred behind the glass), iridescence
   and emboss/deboss content on top.

   The card is locked to the frame's native 2:3 aspect ratio, so at any
   width its height is 150cqw — shorter than a standard phone screen.
   Content (header, passenger-profile/class boxes, journey highlights,
   experience-awaits, couple name) is sized to fit inside that ratio.
   If content ever runs long the card still grows rather than clipping.

   Sizing is in container units (cqw) so the whole card scales as one
   proportional unit at any width and always matches the frame. The
   stub (barcode + pass number, centred) is pinned near the bottom
   (top:89.9%) so it always sits below the main content.

   Fonts: Unica One (headings/emboss) · Advent Pro (body).
   Themes: 4 default colours + glass/holo + admin-addable custom.
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@300;400;500;600&display=swap');
/* Guest Profile card template's display serif — fixed to this face
   regardless of the admin's --bp-font-heading typography choice, since
   this template's whole identity is this look. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

@font-face {
  font-family: 'Unica One';
  src: url('../fonts/UnicaOne-Regular.woff2') format('woff2'),
       url('../fonts/UnicaOne-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bp-font-heading: 'Unica One','Arial Narrow',sans-serif;
  --bp-font-body: 'Advent Pro','Avenir Next','Segoe UI',system-ui,sans-serif;
  --bp-gold: #C9A84C;
  --bp-gold-dark: #b07e2a;
  /* Cool frosted-white interior to harmonise with the blue glass edge */
  --bp-surf: linear-gradient(158deg,#eef2f8 0%,#e6ebf2 55%,#dae0ea 100%);
  --bp-surf-m: #eef1f7;
  --bp-ink: #3a4048;
  --bp-inks: #6b7280;
  --bp-line: rgba(60,72,92,.17);
  --bp-eh: rgba(255,255,255,.98);
  --bp-eh2: rgba(255,255,255,.60);
  --bp-el: rgba(70,86,112,.44);
  --bp-el2: rgba(52,66,94,.28);
  --bp-eao: rgba(52,66,94,.18);
  --bp-fill: linear-gradient(90deg,#a7bdd8,#e2ecf6 52%,#b3c7de);
  --bp-track: rgba(70,86,112,.13);
  --bp-gbl: soft-light;
  --bp-glass-tint: rgba(210,224,244,.20);
  --bp-glass-edge: rgba(255,255,255,.60);
  --bp-glass-shadow-inner: rgba(60,74,104,.16);
  --bp-glass-depth: rgba(200,214,238,.24);
  --bp-glass-corner: rgba(200,220,248,.22);
  /* Holo intensity is no longer admin-configurable — fixed at its old
     default (68%) so removing the per-couple override doesn't change
     how any existing card looks. */
  --bp-holo-opacity: 0.68;
}

/* ════════════════ 4 DEFAULT COLOUR THEMES (interior fill) ════════════════ */
[data-bp-theme="blush"] {
  --bp-surf: linear-gradient(158deg,#f1e3de 0%,#ebdbd5 55%,#dccbc5 100%);
  --bp-surf-m:#f2e6e1; --bp-ink:#563630; --bp-inks:#89605a; --bp-line:rgba(112,65,58,.19);
  --bp-eh:rgba(255,248,245,.96); --bp-eh2:rgba(255,248,245,.58);
  --bp-el:rgba(122,72,62,.42); --bp-el2:rgba(102,56,48,.27); --bp-eao:rgba(102,56,48,.17);
  --bp-fill:linear-gradient(90deg,#cf9683,#f2d8ca 52%,#dba892); --bp-track:rgba(122,72,62,.12);
  --bp-gbl:multiply;
  --bp-glass-tint:rgba(224,172,162,.16); --bp-glass-edge:rgba(255,242,238,.66);
  --bp-glass-shadow-inner:rgba(102,44,34,.15); --bp-glass-depth:rgba(210,158,150,.22);
  --bp-glass-corner:rgba(235,180,170,.20);
}
[data-bp-theme="midnight"] {
  --bp-surf: linear-gradient(158deg,#2e3750 0%,#28324a 55%,#1c2334 100%);
  --bp-surf-m:#2f3852; --bp-ink:#dce0ea; --bp-inks:#a2aabe; --bp-line:rgba(182,194,222,.16);
  --bp-eh:rgba(168,186,226,.68); --bp-eh2:rgba(168,186,226,.36);
  --bp-el:rgba(4,7,16,.82); --bp-el2:rgba(4,7,16,.52); --bp-eao:rgba(4,7,16,.34);
  --bp-fill:linear-gradient(90deg,#5f80b4,#aecbec 52%,#7194c6); --bp-track:rgba(202,214,242,.10);
  --bp-gbl:soft-light;
  --bp-glass-tint:rgba(98,120,200,.18); --bp-glass-edge:rgba(164,184,244,.55);
  --bp-glass-shadow-inner:rgba(0,0,8,.42); --bp-glass-depth:rgba(78,98,160,.30);
  --bp-glass-corner:rgba(120,140,210,.18);
}
[data-bp-theme="sage"] {
  --bp-surf: linear-gradient(158deg,#ccd5c2 0%,#c2ccb6 55%,#abb697 100%);
  --bp-surf-m:#ccd5c3; --bp-ink:#2f3526; --bp-inks:#535942; --bp-line:rgba(45,55,32,.19);
  --bp-eh:rgba(246,250,240,.92); --bp-eh2:rgba(246,250,240,.50);
  --bp-el:rgba(46,60,30,.44); --bp-el2:rgba(36,48,24,.28); --bp-eao:rgba(36,48,24,.17);
  --bp-fill:linear-gradient(90deg,#94a074,#d4dcbc 52%,#a3ae82); --bp-track:rgba(48,60,34,.12);
  --bp-gbl:multiply;
  --bp-glass-tint:rgba(138,168,108,.14); --bp-glass-edge:rgba(236,246,224,.64);
  --bp-glass-shadow-inner:rgba(24,36,14,.16); --bp-glass-depth:rgba(158,178,128,.24);
  --bp-glass-corner:rgba(180,200,150,.18);
}
[data-bp-theme="charcoal"] {
  --bp-surf: linear-gradient(158deg,#292c33 0%,#25272d 55%,#1a1c20 100%);
  --bp-surf-m:#292a30; --bp-ink:#d4d6dc; --bp-inks:#969aa4; --bp-line:rgba(212,217,230,.12);
  --bp-eh:rgba(132,136,152,.58); --bp-eh2:rgba(132,136,152,.30);
  --bp-el:rgba(0,0,0,.84); --bp-el2:rgba(0,0,0,.56); --bp-eao:rgba(0,0,0,.38);
  --bp-fill:linear-gradient(90deg,#9296a0,#d2d6de 52%,#a0a4ae); --bp-track:rgba(212,217,230,.08);
  --bp-gbl:soft-light;
  --bp-glass-tint:rgba(78,84,100,.22); --bp-glass-edge:rgba(120,126,146,.52);
  --bp-glass-shadow-inner:rgba(0,0,0,.52); --bp-glass-depth:rgba(48,54,70,.35);
  --bp-glass-corner:rgba(70,76,94,.20);
}

/* ════════════════ PAGE WRAPPER ════════════════ */
.wrm-bp-wrap {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:16px 12px 24px; box-sizing:border-box; width:100%;
  font-family:var(--bp-font-body);
}
.wrm-bp__above-label { text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.wrm-bp__above-label span { font-size:12px; letter-spacing:.22em; color:#9A8370; text-transform:uppercase; font-family:var(--bp-font-body); }
.wrm-bp__above-rule { width:36px; height:1px; background:var(--bp-gold); }

/* ════════════════ CARD — PORTRAIT GLASS FRAME ════════════════
   Layer stack (back → front): fill (frosted body, shaped to the glass
   outer outline) → frame image (glass rim on top of the fill) → glass
   iridescence → content. The card is locked to the frame's native 2:3
   ratio (1024x1536) so it never exceeds a phone screen; content grows
   the card only in the overflow case (never clips). cqw drives all
   internal sizing. */
.wrm-bp {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1024 / 1536;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  margin-top: 50px;
  margin-bottom: 50px;
  filter: drop-shadow(0 4cqw 8cqw rgba(70,84,110,.26)) drop-shadow(0 1cqw 3cqw rgba(70,84,110,.16));
}

/* Frosted body colour — sized to the glass OUTER outline, behind the rim.
   Smooth glassy gradient (no grain). Radial masks cut the two side notches
   at the perforation line so they read as true cut-outs, matched to the
   notches drawn in the frame PNG (centre 86.5% of the fill = 87.1% of the
   card, i.e. exactly the frame's notch centre). */
.wrm-bp__fill {
  position: absolute;
  left: 2.4%; right: 2.4%; top: 0px; bottom: 0px;
  z-index: 0; pointer-events: none;
  border-radius: 11cqw;
}

/* Background photo — full-bleed behind the fill, blurred so it reads as
   "through the frosted glass" rather than a sharp photo. Scaled up slightly
   so the blur never reveals a hard edge. Only present when the couple has
   chosen a background (admin standard picks or their own upload). */
.wrm-bp__bgimage {
  position: absolute; left: 2.4%; right: 2.4%; top: 1.8%; bottom: 1.4%; z-index: -1; pointer-events: none;
  border-radius: 11cqw; overflow: hidden;
  background-image: var(--bp-bg-image, none);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  filter: blur(var(--bp-bg-blur, 6cqw)) saturate(var(--bp-bg-saturate, 1.4)) brightness(var(--bp-bg-brightness, 0.9));
}

/* With a background photo set, the frosted fill becomes a translucent tint
   instead of an opaque surface colour, so the photo shows through the
   glass. The theme's own gradient still tints the frost, just at much
   lower opacity. */
.wrm-bp[data-bp-has-bg="1"] .wrm-bp__fill {
  background: var(--bp-surf);
  opacity: var(--bp-fill-opacity, 0.42);
}
.wrm-bp[data-bp-has-bg="1"] .wrm-bp__glass {
  opacity: 0.85;
}

/* Glass frame image on top of the fill */
.wrm-bp__frameimg {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background: var(--bp-frame, none) center / 100% 100% no-repeat;
}

/* Interior glass layer: specular catch, corner bleed, holo iridescence.
   Inset to the glass interior; bottom stops above the perforation. */
.wrm-bp__glass {
  position: absolute;
  left: 2.4%; right: 2.4%; top: 1%; bottom: 1%;
  pointer-events: none; z-index: 2;
  border-radius: 11cqw;
  background:
    linear-gradient(135deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.30) 6%, rgba(255,255,255,.10) 18%, transparent 36%),
    radial-gradient(ellipse 42% 30% at 96% 3%, var(--bp-glass-corner,rgba(200,220,248,.20)), transparent 62%),
    radial-gradient(ellipse 46% 34% at 4% 97%, var(--bp-glass-corner,rgba(200,220,248,.20)), transparent 64%),
    linear-gradient(165deg, var(--bp-glass-tint,rgba(210,224,244,.18)) 0%, transparent 58%, var(--bp-glass-depth,rgba(200,214,238,.22)) 100%);
}
[data-bp-theme="holo"] .wrm-bp__glass,
.wrm-bp:not([data-bp-theme]) .wrm-bp__glass {
  background:
    linear-gradient(92deg, transparent 46%, hsla(178,50%,80%,.26) 60%, hsla(206,54%,80%,.28) 70%, hsla(262,42%,82%,.24) 79%, hsla(318,48%,82%,.26) 87%, hsla(32,58%,82%,.22) 95%, transparent 100%),
    radial-gradient(ellipse 56% 42% at 82% 84%, hsla(24,60%,80%,.24), transparent 64%),
    radial-gradient(ellipse 50% 40% at 80% 22%, hsla(202,54%,82%,.20), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.14) 14%, transparent 34%);
  background-size: 220% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 100% 50%, 0 0, 0 0, 0 0;
  mix-blend-mode: soft-light;
  opacity: var(--bp-holo-opacity, 0.9);
  animation: bpHoloDrift 12s ease-in-out infinite alternate;
}
@keyframes bpHoloDrift {
  0%   { background-position: 100% 50%, 0 0, 0 0, 0 0; }
  100% { background-position: 64% 50%,  0 0, 0 0, 0 0; }
}
@media print, (prefers-reduced-motion: reduce) {
  [data-bp-theme="holo"] .wrm-bp__glass,
  .wrm-bp:not([data-bp-theme]) .wrm-bp__glass { animation: none !important; }
}

/* ════════════════ HEADINGS (flat colour) ════════════════
   Previously a raised-emboss effect (transparent fill + a stack of offset
   text-shadows simulating pressed-glass relief). It read fine live, but
   html2canvas has no way to reproduce a transparent fill lit only by
   shadows — the capture-mode override swapped the fill to solid but left
   the shadow stack in place, so every export showed the now-opaque text
   duplicated/smeared under its own relief shadows. Flat colour avoids the
   mismatch entirely: what you see is exactly what gets shared. */
.wrm-bp__status-title,
.wrm-bp__field-value,
.wrm-bp__couple-name-text,
.wrm-bp__admit {
  color: var(--bp-ink);
}

/* ════════════════ DEBOSS ENGINE (pressed into the glass) ════════════════
   Inverse lighting of the emboss engine: with the light top-left, a
   recess shadows its near (top-left) wall and catches light on its far
   (bottom-right) wall. Flat --bp-ink so the mark reads even before the
   relief kicks in.

   Previously used color-mix(in srgb, ...) for a subtler tonal blend, but
   Chrome can serialise a color-mix() result via the CSS Color 4 color()
   function in getComputedStyle, which html2canvas 1.4.1's color parser
   doesn't recognise ("Attempting to parse an unsupported color function
   'color'") — it threw on every single capture, so Share silently never
   produced an image. Flat --bp-ink avoids that parser entirely. */
.wrm-bp__stamp-ring,
.wrm-bp__botanical-svg {
  color: var(--bp-ink);
  filter:
    drop-shadow(-0.26cqw -0.30cqw 0.16cqw var(--bp-el))
    drop-shadow(-0.5cqw  -0.58cqw 1.05cqw var(--bp-el2))
    drop-shadow(0.30cqw  0.34cqw 0.18cqw var(--bp-eh))
    drop-shadow(0.55cqw  0.62cqw 0.95cqw var(--bp-eh2))
    drop-shadow(0 0 0.42cqw var(--bp-eao));
}

/* ════════════════ MAIN CONTENT (above perf) ════════════════ */
.wrm-bp__main {
  position: relative; z-index: 3;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 11.5cqw 12cqw 26cqw;
  min-width: 0;
}


/* ── Header: passenger pill · big name · subtitle · flight code · photo ── */
.wrm-bp__header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:2.2cqw; margin-bottom:1.6cqw; }
.wrm-bp__header-text { flex:1; min-width:0; }
.wrm-bp__status-pill {
  display:inline-flex; align-items:center; gap:1.4cqw;
  border:0.23cqw solid var(--bp-line); border-radius:7cqw; padding:0.5cqw 2cqw; margin-bottom:1cqw;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0.23cqw 0 rgba(255,255,255,.42);
}
.wrm-bp__status-dot { width:1.1cqw; height:1.1cqw; border-radius:50%; background:var(--bp-inks); }
.wrm-bp__status-label { font-size:2cqw; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bp-ink); font-family:var(--bp-font-body); text-shadow:0 1px 2px rgba(255,255,255,.5); }
.wrm-bp__status-title { font-family:var(--bp-font-heading); font-size:6.2cqw; letter-spacing:.02em; line-height:1.0; text-transform:uppercase; }
.wrm-bp__status-sub { font-size:2.1cqw; letter-spacing:.14em; text-transform:uppercase; color:#ffffff; margin-top:0.5cqw; font-family:var(--bp-font-body); font-weight:700; text-shadow:0 0px 2px rgba(255,255,255,.5); }
.wrm-bp__header-rule { width:8cqw; height:1px; background:var(--bp-gold); margin:1cqw 0; }

.wrm-bp__flight-badge { display:flex; align-items:center; gap:1.4cqw; }
.wrm-bp__flight-badge-svg { width:2.6cqw; height:2.6cqw; color:var(--bp-gold); fill:var(--bp-gold); }
.wrm-bp__flight-badge-num { font-family:var(--bp-font-heading); font-size:2.6cqw; letter-spacing:.08em; color:var(--bp-ink); }

.wrm-bp__photo-wrap { position:relative; flex:none; }
.wrm-bp__photo { width:13cqw; height:13cqw; border-radius:50%; overflow:hidden; border:0.34cqw solid rgba(255,255,255,.6); background:rgba(255,255,255,.15); box-shadow:0 0.6cqw 1.4cqw rgba(0,0,0,.18); }
.wrm-bp__photo img { width:100%; height:100%; object-fit:cover; }
.wrm-bp__monogram {
  position:absolute; right:-1.4cqw; top:-1.4cqw;
  width:5.6cqw; height:5.6cqw; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#e8c97a,var(--bp-gold-dark));
  border:0.26cqw solid rgba(255,255,255,.75);
  box-shadow:0 0.4cqw 0.9cqw rgba(0,0,0,.22);
  overflow:hidden;
}
.wrm-bp__monogram img { width:100%; height:100%; object-fit:cover; }
.wrm-bp__monogram span { font-family:var(--bp-font-heading); font-size:2.3cqw; color:#3a2a10; letter-spacing:.03em; }

/* ── Shared section label ── */
.wrm-bp__box-label { font-size:1.8cqw; letter-spacing:.16em; text-transform:uppercase; color:#ffffff; margin-bottom:0.9cqw; font-family:var(--bp-font-body); font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.wrm-bp__box-label--center { text-align:center; color:var(--bp-ink); text-shadow:0 1px 2px rgba(255,255,255,.5); }

/* ── Two-column info row: Passenger Profile · Class/Status ── */
.wrm-bp__info-row { display:flex; gap:1.8cqw; margin-bottom:1.6cqw; align-items:stretch; }
.wrm-bp__profile-box,
.wrm-bp__class-box {
  border-radius:3cqw; padding:1.8cqw 2cqw;
  background: var(--bp-box-bg, #0000005c);
  border: 0.14cqw solid rgba(255,255,255,.22);
  box-shadow: inset 0 0.23cqw 0 rgba(255,255,255,.1), 0 0.4cqw 1cqw rgba(0,0,0,.25);
  min-width:0;
}
.wrm-bp__profile-box { flex: 3 3 0%; }
.wrm-bp__class-box   { flex: 2 2 0%; }
.wrm-bp__stats-list { display:flex; flex-direction:column; gap:0.9cqw; }
.wrm-bp__stat-row { display:flex; align-items:center; gap:1.2cqw; }
.wrm-bp__stat-icon { width:3cqw; height:3cqw; flex:none; color:var(--bp-gold); filter: drop-shadow(0 0.15cqw 0.3cqw rgba(0,0,0,.35)); }
.wrm-bp__stat-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.wrm-bp__stat-name { font-size:1.6cqw; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#ffffff; font-family:var(--bp-font-body); text-shadow:0 1px 3px rgba(0,0,0,.5); }
.wrm-bp__stat-value { font-family:var(--bp-font-heading); font-size:2.4cqw; letter-spacing:.03em; text-transform:uppercase; color:#ffffff; line-height:1.1; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.wrm-bp__dots { display:flex; gap:0.6cqw; flex:none; }
.wrm-bp__dot { width:1.3cqw; height:1.3cqw; border-radius:50%; background:rgba(255,255,255,.28); border:0.12cqw solid rgba(255,255,255,.4); }
.wrm-bp__dot.is-filled { background:var(--bp-gold); border-color:var(--bp-gold-dark); }

.wrm-bp__prediction {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0.7cqw;
  margin-top:1.4cqw; padding-top:1.2cqw; border-top:1px solid rgba(255,255,255,.2);
  font-size:1.7cqw; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#ffffff; font-family:var(--bp-font-body);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.wrm-bp__prediction-icon { color:#e08080; font-size:1.9cqw; }
.wrm-bp__prediction-label { font-weight:700; }
.wrm-bp__prediction-text { font-family:var(--bp-font-heading); font-size:2.1cqw; letter-spacing:.02em; color:#ffffff; text-transform:none; flex-basis:100%; text-shadow:0 1px 3px rgba(0,0,0,.5); }

.wrm-bp__class-box { display:flex; flex-direction:column; justify-content:space-between; gap:1.2cqw; }
.wrm-bp__class-item .wrm-bp__box-label { margin-bottom:0.4cqw; }
.wrm-bp__field-value { font-family:var(--bp-font-heading); font-size:2.9cqw; letter-spacing:.03em; text-transform:uppercase; line-height:1.1; color:#ffffff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.wrm-bp__status-confirmed { display:flex; align-items:center; gap:0.9cqw; font-family:var(--bp-font-heading); font-size:2.9cqw; letter-spacing:.03em; text-transform:uppercase; color:#ffffff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.wrm-bp__status-confirmed-dot { width:1.4cqw; height:1.4cqw; border-radius:50%; background:#8ab06a; box-shadow:0 0 0 0.3cqw rgba(138,176,106,.25); }

/* ── Journey highlights — simple circular icons + two-line caption ── */
.wrm-bp__highlights { margin-bottom:1.6cqw; }
.wrm-bp__highlights-grid { display:flex; gap:1.4cqw; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.wrm-bp__highlight { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:0.7cqw; }
.wrm-bp__highlight-icon {
  width:8.6cqw; height:8.6cqw; display:block;
  filter: drop-shadow(0 0.3cqw 0.6cqw rgba(20,16,8,.28));
}
.wrm-bp__highlight-label {
  font-size:1.6cqw; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bp-ink); font-family:var(--bp-font-body); text-align:center; line-height:1.3;
  text-shadow: 0 1px 2px rgba(255,255,255,.6), 0 1px 5px rgba(0,0,0,.18);
}

/* ── Experience awaits ── */
.wrm-bp__experience {
  display:flex; align-items:center; justify-content:space-between; gap:1.6cqw;
  border-radius:3cqw; padding:1.8cqw 2cqw; margin-bottom:1.6cqw;
  background: var(--bp-box-bg, #0000005c);
  border: 0.14cqw solid rgba(255,255,255,.2);
}
.wrm-bp__experience-text { flex:1; min-width:0; }
.wrm-bp__tagline { font-size:2.2cqw; line-height:1.3; letter-spacing:.02em; text-transform:uppercase; font-family:var(--bp-font-heading); color:#ffffff; margin-bottom:0.5cqw; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.wrm-bp__motto { font-size:1.7cqw; letter-spacing:.04em; color:#ffffff; font-family:var(--bp-font-body); font-weight:700; text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.wrm-bp__experience-icon { width:8cqw; height:auto; flex:none; opacity:.75; color:#ffffff; }

/* Couple name + date — pinned just above the perforation; margin-top:auto
   absorbs any slack the flexible main column has left over. Nothing in
   .wrm-bp__main sits below it, so it's structurally guaranteed to land
   above the perforation as long as the main column's own bottom padding
   keeps clearance from the dash band, which it does. */
.wrm-bp__couple-name { margin-top:auto; text-align:center; }
.wrm-bp__couple-name-text { font-family:var(--bp-font-heading); font-size:6.8cqw; letter-spacing:.05em; text-transform:uppercase; line-height:1; }
.wrm-bp__couple-date { margin-top:0.8cqw; font-size:2cqw; letter-spacing:.16em; color:var(--bp-ink); font-family:var(--bp-font-body); font-weight:700; text-shadow:0 1px 2px rgba(255,255,255,.5); }

/* ════════════════ STUB (below perf) ════════════════
   The frame's dash band sits at 87.24%-87.76% of card height (measured
   off bp-frame.png), with the side notches centred at 87.14%. The stub
   starts at 89.9% — a clean ~2.1% clearance below the dashes — and the
   main content's 26cqw (~17.3%) bottom padding stops it by ~82.7%, a
   ~4.5% clearance above them. Nothing sits on the perforation.
   The easter-egg passenger ID lives in .wrm-bp__stub-left (not in
   .wrm-bp__main), stacked under the pass number — that placement is
   what actually guarantees it's always below the line, rather than
   hoping margins never let it drift there. */
.wrm-bp__stub {
  position: absolute; left:0; right:0; top:89.9%; bottom:0;
  z-index: 3;
  display: flex; flex-direction:column; align-items: center; justify-content: center; gap: 0.6cqw;
  padding: 0.6cqw 12cqw 1.8cqw;
  box-sizing: border-box;
  text-align: center;
}
.wrm-bp__stub-left { display:flex; flex-direction:column; align-items:center; gap:0.5cqw; min-width:0; }
.wrm-bp__bar-plate {
  background: rgba(255,255,255,.72);
  border-radius: 0.9cqw; padding: 0.6cqw 1.2cqw;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 0.23cqw 0.46cqw rgba(0,0,0,.08);
}
.wrm-bp__bar-canvas { display:block; width:34cqw; height:4.6cqw; margin:0 auto; }
.wrm-bp__pass-no { font-size:1.9cqw; color:var(--bp-inks); letter-spacing:.1em; font-family:var(--bp-font-body); }
.wrm-bp__easter-id { font-size:1.5cqw; letter-spacing:.1em; color:var(--bp-inks); font-style:italic; opacity:.6; font-family:var(--bp-font-body); }
.wrm-bp__stub-right { text-align:center; flex:none; }
.wrm-bp__stub-label { display:none; }
.wrm-bp__admit { display:none; }

/* ════════════════ ACTIONS + PRIVACY PILL ════════════════ */
.wrm-bp__privacy-pill {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.45); border-radius:20px; padding:6px 14px;
  border:1px solid rgba(201,168,76,.3); max-width:560px; width:100%; box-sizing:border-box;
}
.wrm-bp__privacy-pill-text { font-size:11px; color:#9A8370; letter-spacing:.04em; font-family:var(--bp-font-body); }
.wrm-bp__actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wrm-bp__btn {
  padding:13px 30px; border-radius:999px; border:1.5px solid; cursor:pointer;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transition:all .2s; font-family:var(--bp-font-body);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; white-space:nowrap;
}
.wrm-bp__btn--primary { background:var(--bp-gold); border-color:var(--bp-gold); color:#0a0a0a; }
.wrm-bp__btn--primary:hover { background:#e8c97a; border-color:#e8c97a; }
.wrm-bp__btn:disabled { opacity:.65; cursor:not-allowed; }

@media print {
  .wrm-bp__actions,.wrm-bp__above-label,.wrm-bp__privacy-pill { display:none!important; }
  .wrm-bp { filter:none; }
}

/* ════════════════ CAPTURE MODE ════════════════
   html2canvas cannot render CSS masks, mix-blend-mode, or shadows cast
   from transparent-filled text, so .wrm-bp--capturing (added for the
   duration of the export) swaps in equivalents it CAN render:
   · fill mask off — the notches are punched into the bitmap afterwards
   · holo glass → normal blend at reduced opacity (static approximation)
   · embossed headings → surface-tone fill; the glyph body then matches
     the frost (as the transparent fill does on screen) and html2canvas
     renders the unchanged text-shadow stack around it, so the relief
     survives. The debossed SVGs (stamps, watermark) are rasterised by
     the browser itself in JS before capture, so nothing to do here. */
.wrm-bp--capturing .wrm-bp__glass { animation:none!important; }

/* The fill has no background at all for cards without a photo (the live
   page's own background shows through, by design). An exported PNG has
   nothing behind it, though — those regions would come out genuinely
   transparent, which read as odd dot/checker artifacts once saved and
   viewed outside the page. Give captures their own opaque backing. */
.wrm-bp--capturing:not([data-bp-has-bg="1"]) .wrm-bp__fill {
  background: var(--bp-surf) !important;
  opacity: 1 !important;
}
.wrm-bp--capturing[data-bp-theme="holo"] .wrm-bp__glass,
.wrm-bp--capturing:not([data-bp-theme]) .wrm-bp__glass {
  mix-blend-mode:normal!important;
  opacity:calc(var(--bp-holo-opacity, 0.9) * 0.35)!important;
}
/* ════════════════ GUEST PROFILE CARD CONTENT ════════════════
   Reuses .wrm-bp / .wrm-bp__fill / .wrm-bp__frameimg / .wrm-bp__glass
   from the ticket layout above unchanged — same glass container, same
   frame PNG, same aspect ratio, and now the same theme too: the card
   is rendered with data-bp-theme="holo", the exact translucent/iridescent
   glass already built for the ticket layout, rather than a bespoke opaque
   colour. Only .wrm-bp__gc-main (in place of .wrm-bp__main) and its
   children differ. */
.wrm-bp__gc-main {
  position: relative; z-index: 3;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 6.4cqw 9cqw 5.6cqw;
  min-width: 0;
  font-family: var(--bp-font-body);
}

/* Each direct child of .wrm-bp__gc-main is one visual section. Keeping
   them as discrete flex items (rather than one long flow) means
   justify-content:space-between distributes leftover vertical space
   *between* sections — so a guest whose title, prediction, etc. are
   short doesn't leave one big awkward gap pinned above the footer;
   the whole card breathes evenly instead, regardless of how long any
   one guest's text happens to be. */
.wrm-bp__gc-block { flex: none; }

.wrm-bp__gc-rule { border: none; border-top: 1px solid var(--bp-line); margin: 0 0 3.6cqw; width: 100%; }

.wrm-bp__gc-eyebrow {
  font-size: 1.7cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bp-ink); font-family: var(--bp-font-body);
}
.wrm-bp__gc-eyebrow--center { text-align: center; margin-bottom: 2.8cqw; }
.wrm-bp__gc-eyebrow--dotted { display:flex; align-items:center; justify-content:center; gap:.6cqw; }
.wrm-bp__gc-eyebrow-dot { color: var(--bp-gold); font-size: 1.1cqw; }

/* ── Header: eyebrow / name / tier badge, photo top-right ── */
.wrm-bp__gc-header { display:flex; align-items:flex-start; justify-content:space-between; gap:2.6cqw; }
.wrm-bp__gc-header-text { flex:1; min-width:0; padding-top: .26cqw; }
.wrm-bp__gc-name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 7.2cqw; line-height: .98; letter-spacing: .01em;
  text-transform: uppercase; color: var(--bp-ink);
  margin: 2.2cqw 0 1.8cqw;
}
.wrm-bp__gc-tier {
  display:flex; align-items:center; gap:0.85cqw;
  font-size: 1.85cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bp-gold-dark); font-family: var(--bp-font-body);
}
.wrm-bp__gc-tier svg { width: 1.45cqw; height: 1.45cqw; flex: none; }

.wrm-bp__gc-photo-wrap { position: relative; flex: none; margin-top: .17cqw; }
.wrm-bp__gc-photo {
  width: 18.5cqw; height: 18.5cqw; border-radius: 50%; overflow: hidden;
  border: .34cqw solid rgba(255,255,255,.85);
  box-shadow: 0 .69cqw 1.56cqw rgba(30,34,44,.20);
  background: rgba(255,255,255,.4);
}
.wrm-bp__gc-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.wrm-bp__gc-monogram {
  position: absolute; right: -1.4cqw; top: -1.4cqw;
  width: 7.6cqw; height: 7.6cqw; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.55);
  border: .28cqw solid rgba(255,255,255,.85);
  box-shadow: 0 .26cqw .26cqw rgba(30,34,44,.08), 0 .52cqw 1.04cqw rgba(30,34,44,.16);
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.wrm-bp__gc-monogram img { width:100%; height:100%; object-fit:cover; }
.wrm-bp__gc-monogram span {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight:600;
  font-size: 2.9cqw; color: var(--bp-gold-dark); letter-spacing: .03em;
}

/* ── The Vibes: 3-stat row, each with its own accent colour + bar ── */
.wrm-bp__gc-stats-row { display:flex; align-items: stretch; }
.wrm-bp__gc-stat {
  flex: 1 1 0%; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 0 1.4cqw;
}
.wrm-bp__gc-stat + .wrm-bp__gc-stat { border-left: 1px solid var(--bp-line); }
.wrm-bp__gc-stat-icon { width: 6.6cqw; height: 6.6cqw; color: var(--gc-accent, var(--bp-gold)); margin-bottom: 1.5cqw; }
.wrm-bp__gc-stat-label {
  font-size: 1.45cqw; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bp-ink); margin-bottom: 1.3cqw; white-space: nowrap;
}
.wrm-bp__gc-stat-value {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 7.6cqw; line-height: 1; color: var(--gc-accent, var(--bp-ink));
}
.wrm-bp__gc-stat-value small { font-size: .55em; font-weight: 500; }
.wrm-bp__gc-stat-track {
  width: 100%; max-width: 15cqw; height: 1cqw; border-radius: 999px; margin-top: 1.9cqw;
  background: var(--gc-accent-track, rgba(120,120,120,.16)); overflow: hidden;
}
.wrm-bp__gc-stat-fill { height: 100%; border-radius: 999px; background: var(--gc-accent, var(--bp-gold)); }
/* Three accent colours — muted jewel tones that read clearly against the
   glass without fighting the gold used everywhere else on the card. */
.wrm-bp__gc-stat--violet { --gc-accent: #6C63A6; --gc-accent-track: rgba(108,99,166,.16); }
.wrm-bp__gc-stat--green  { --gc-accent: #4C8C6C; --gc-accent-track: rgba(76,140,108,.16); }
.wrm-bp__gc-stat--rose   { --gc-accent: #B85C79; --gc-accent-track: rgba(184,92,121,.16); }

/* ── Your Title: laurels flanking a centred title ── */
.wrm-bp__gc-title-row { display:flex; align-items:center; justify-content:center; gap: 2.1cqw; }
.wrm-bp__gc-laurel { width: 7cqw; height: auto; flex: none; color: var(--bp-gold); opacity: .85; }
.wrm-bp__gc-laurel--r { transform: scaleX(-1); }
.wrm-bp__gc-title-text {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 4.7cqw; line-height: 1.08; letter-spacing: .03em; text-transform: uppercase;
  color: var(--bp-ink); text-align:center; flex: 1 1 auto; min-width: 0;
}

/* ── Most Likely To ── */
.wrm-bp__gc-predict {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 4.2cqw; line-height: 1.22; color: var(--bp-ink); text-align: center;
}

/* ── Rare collectible + collectible no. ── */
.wrm-bp__gc-collectible-row { display:flex; align-items:center; gap: 2.2cqw; }
.wrm-bp__gc-seal { width: 12.2cqw; height: 12.2cqw; flex: none; color: var(--bp-gold-dark); }
.wrm-bp__gc-seal text { font-family: var(--bp-font-body); }
.wrm-bp__gc-collectible-divider { width:1px; align-self: stretch; background: var(--bp-line); }
.wrm-bp__gc-collectible-text { flex: 1 1 auto; min-width: 0; }
.wrm-bp__gc-collectible-label {
  font-size: 1.6cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bp-ink); margin-bottom: .65cqw;
}
.wrm-bp__gc-collectible-no {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 4.6cqw; letter-spacing: .04em; color: var(--bp-gold-dark);
}

/* ── Couple name + code ── */
.wrm-bp__gc-footer { text-align:center; }
.wrm-bp__gc-couple-name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 3.9cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--bp-ink);
}
.wrm-bp__gc-code {
  margin-top: 0.9cqw; font-size: 1.3cqw; letter-spacing: .14em; color: var(--bp-inks);
  font-family: var(--bp-font-body);
}