/* 279 — Viewing Pass: broker photo replaces the "Broker Viewing Portal" text in the header (v561). Roll back: remove this <link> + js/279. */
.vrm-pass-brand.has-bphoto{top:calc(28*var(--u));right:calc(36*var(--u))}
.vrm-pass-brand.has-bphoto .vrm-pass-brand-tagline{display:none}
.vrm-pass-bphoto{
  position:relative;box-sizing:border-box;
  width:max(48px,calc(100*var(--u)));height:max(48px,calc(100*var(--u)));
  border-radius:50%;overflow:hidden;background:#E9E4DA;
  border:max(2px,calc(3.5*var(--u))) solid #D4B07F;
  box-shadow:0 0 0 max(2px,calc(4*var(--u))) rgba(6,43,96,.92),0 calc(8*var(--u)) calc(18*var(--u)) rgba(6,43,96,.28);
}
.vrm-pass-bphoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;-webkit-user-drag:none;user-select:none}
/* phone layout: the text tagline is hidden there, the photo sits in the top-right corner of the header */
@media screen and (max-width:899px){
  .vrm-pass-brand.has-bphoto{display:block;position:absolute;top:calc(16*var(--m));right:calc(18*var(--m));z-index:3}
  .vrm-pass-bphoto{width:calc(54*var(--m));height:calc(54*var(--m));min-width:40px;min-height:40px;border-width:max(2px,calc(2.4*var(--m)));box-shadow:0 0 0 max(1.5px,calc(2.4*var(--m))) rgba(6,43,96,.92),0 calc(5*var(--m)) calc(10*var(--m)) rgba(0,0,0,.25)}
}
@media print{ .vrm-pass-bphoto{-webkit-print-color-adjust:exact;print-color-adjust:exact} }

/* v563: no BROKERHUB corner watermark (.al-wm from js/00h-image-protection.js) anywhere on the Viewing Pass (header, body, stub).
   Site photos elsewhere keep their watermark. */
.vrm-pass .al-wm,.vrm-pass-ticket .al-wm,.vrm-pass-stub .al-wm,[class^="vrm-"] .al-wm,[class*=" vrm-"] .al-wm{display:none!important}

/* v568 — bigger, better framed photo (reception must recognise who is coming) + tap to enlarge */
.vrm-pass-brand.has-bphoto{top:calc(10*var(--u));right:calc(30*var(--u))}
.vrm-pass-bphoto{
  width:max(64px,calc(132*var(--u)));height:max(64px,calc(132*var(--u)));cursor:zoom-in;background:#16294A;
  border:max(2.5px,calc(4.5*var(--u))) solid #D4B07F;
  box-shadow:0 0 0 max(2px,calc(4*var(--u))) rgba(6,43,96,.95),0 0 0 max(4px,calc(8*var(--u))) rgba(212,176,127,.28),0 calc(10*var(--u)) calc(22*var(--u)) rgba(6,43,96,.35);
  opacity:1;
}
.vrm-pass-bphoto img{object-position:50% 22%}
@keyframes bhpIn{to{opacity:1;transform:none}}
.vrm-pass-bphoto img{opacity:0}
.vrm-pass-bphoto.is-ready img{opacity:1}   /* v647h: ring is drawn with the pass; the picture shows the moment it is decoded - no pop-in animation */
@media screen and (max-width:899px){
  .vrm-pass-brand.has-bphoto{top:calc(12*var(--m));right:calc(16*var(--m))}
  .vrm-pass-bphoto{width:calc(68*var(--m));height:calc(68*var(--m));min-width:52px;min-height:52px}
}
@media(prefers-reduced-motion:reduce){.vrm-pass-bphoto.is-ready{animation:none;opacity:1;transform:none}}
/* enlarge view */
.bhp-zoom{position:fixed;inset:0;z-index:2147483600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:rgba(6,16,34,.82);backdrop-filter:blur(4px);cursor:zoom-out;animation:bhpFade .18s ease-out}
.bhp-zoom img{width:min(78vw,420px);height:min(78vw,420px);max-height:70vh;object-fit:cover;object-position:50% 22%;border-radius:50%;border:6px solid #D4B07F;box-shadow:0 0 0 6px rgba(6,43,96,.9),0 24px 60px rgba(0,0,0,.5)}
.bhp-zoom p{margin:0;text-align:center;color:#fff;font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bhp-zoom p small{display:block;margin-top:4px;color:#D4B07F;font-size:13px;font-weight:600;letter-spacing:.14em}
@keyframes bhpFade{from{opacity:0}to{opacity:1}}
@media print{.bhp-zoom{display:none!important}}

/* v569 — the line under VIEWING PASS reacts to the pass status (text from js/50 + core bundle; colour here) */
.vrm-pass-title span[data-st]{transition:color .3s ease}
.vrm-pass-title span[data-st="pending"],.vrm-pass-title span[data-st="editing"]{color:#F6CF7A}
.vrm-pass-title span[data-st="confirmed"]{color:#8FE3B8}
.vrm-pass-title span[data-st="done"],.vrm-pass-title span[data-st="documents"],.vrm-pass-title span[data-st="contract"],.vrm-pass-title span[data-st="finalized"]{color:#E8C98F}
.vrm-pass-title span[data-st="rejected"],.vrm-pass-title span[data-st="cancelled"]{color:#FFA39B}

/* v571 — photo centred in its own spot: the light triangle at the right end of the header (right of the gold diagonal).
   Header is 151u tall -> centre y = 75.5u; the free area at that height spans x ~1058u..1223u -> centre x ~ 1153u. Size 112u + rings stays clear of the diagonal and the edge. */
.vrm-pass-brand.has-bphoto{top:calc(19.5*var(--u));right:calc(14*var(--u));line-height:0}
.vrm-pass-bphoto{width:max(56px,calc(112*var(--u)));height:max(56px,calc(112*var(--u)))}
@media screen and (max-width:899px){
  .vrm-pass-brand.has-bphoto{top:calc(12*var(--m));right:calc(16*var(--m))}
}

/* v572 — the status line ("Confirmed · Expect this broker" etc.) is always centred under the VIEWING PASS title, whatever its length/status.
   padding-left = the letter-spacing, so the trailing gap after the last letter does not push the text off-centre. */
.vrm-pass-title,.vrm-pass-title b,.vrm-pass-title span{text-align:center}
.vrm-pass-title span{box-sizing:border-box;padding-left:.3em}
.vrm-pass-title span.is-long{padding-left:.11em}
@media screen and (max-width:899px){
  .vrm-pass-title span{padding-left:.22em}
  .vrm-pass-title span.is-long{padding-left:.12em}
}

/* v574 — phone / portrait: the photo lives in the REFERENCE row, in the empty space to the right of the reference number + status
   (left edge ~266u of 366u, the status+PDF end at ~183u), vertically centred in that row. It no longer sits over the logo or the title. */
@media screen and (max-width:899px){
  .vrm-pass-ref-row>.vrm-pass-bphoto{
    position:absolute;top:0;bottom:0;margin:auto 0;right:calc(26*var(--m));z-index:3;
    width:calc(84*var(--m));height:calc(84*var(--m));min-width:56px;min-height:56px;
    border-width:max(2.5px,calc(3.5*var(--m)));
    box-shadow:0 0 0 max(1.5px,calc(2.5*var(--m))) rgba(6,43,96,.95),0 0 0 max(3px,calc(5*var(--m))) rgba(212,176,127,.28),0 calc(6*var(--m)) calc(12*var(--m)) rgba(6,43,96,.28)
  }
}

/* v575 — phone / portrait: smaller and quieter. The photo is level with the reference number (top aligned with the REFERENCE label),
   its right edge lines up with the end of the gold divider, thin gold hairline border + very soft shadow (no heavy navy ring). */
@media screen and (max-width:899px){
  .vrm-pass-ref-row>.vrm-pass-bphoto{
    top:calc(18*var(--m));bottom:auto;margin:0;right:calc(20*var(--m));
    width:calc(60*var(--m));height:calc(60*var(--m));min-width:44px;min-height:44px;
    border:max(1.5px,calc(2*var(--m))) solid #D4B07F;
    box-shadow:0 0 0 max(1px,calc(2*var(--m))) rgba(212,176,127,.28),0 calc(3*var(--m)) calc(8*var(--m)) rgba(6,43,96,.16)
  }
}