/* avatar_zoom.css — click any profile photo to see it larger.
   Loaded globally (admin + customer) via inject_pwa_tags. Theme-agnostic: the
   lightbox is a dark backdrop with the image centred, so it looks right on every
   theme. Paired with avatar_zoom.js. */

/* The photo avatars that open the lightbox get a zoom cursor. (The tiny 16px
   filter-pill avatar is deliberately excluded — it's a control, not a photo.) */
img.admin-avatar__img,
img.member-row-avatar--img,
img.member-spend-avatar--img,
img.avatar--img,
img.profile-photo__avatar,
img[data-avatar-zoom] {
    cursor: zoom-in;
}

.vm-avz-overlay {
    display        : none;
    position       : fixed;
    inset          : 0;
    z-index        : 10050;
    background     : rgba(0, 0, 0, 0.82);
    align-items    : center;
    justify-content: center;
    padding        : 24px;
    cursor         : zoom-out;
}
.vm-avz-overlay.is-open { display: flex; }

.vm-avz-img {
    max-width    : 90vw;
    max-height   : 90vh;
    border-radius: 12px;
    box-shadow   : 0 20px 60px rgba(0, 0, 0, 0.6);
    object-fit   : contain;
}

.vm-avz-close {
    position     : fixed;
    top          : 18px;
    right        : 22px;
    width        : 40px;
    height       : 40px;
    border-radius: 50%;
    border       : none;
    background   : rgba(255, 255, 255, 0.14);
    color        : #fff;
    font-size    : 1.5rem;
    line-height  : 1;
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    justify-content: center;
}
.vm-avz-close:hover { background: rgba(255, 255, 255, 0.28); }