/* Patient-facing image viewer */
html.vs-photo-open, html.vs-photo-open body { overflow: hidden; overscroll-behavior: none; }
[data-vs-photo], [data-vs-photo-image] { cursor: zoom-in; }
[data-vs-photo-image]:focus-visible { outline: 3px solid #346b91; outline-offset: -3px; }
dialog.vs-photo { position: fixed; inset: 0; width: min(94vw, 1100px); height: min(92vh, 940px); height: min(92dvh, 940px); max-width: 100%; max-height: 100%; margin: auto; padding: 0; border: 1px solid #50565c; border-radius: 16px; color: #f7f8f9; background: #171a1d; box-sizing: border-box; box-shadow: 0 18px 80px #0008; overflow: hidden; }
dialog.vs-photo[open] { display: flex; flex-direction: column; }
.vs-photo::backdrop { background: rgb(14 18 22 / 80%); }
.vs-photo .vs-photo-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; margin: 0; border-bottom: 1px solid #41474c; }
.vs-photo .vs-photo-title { color: #f7f8f9; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-photo button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #565d63; border-radius: 8px; color: #fff; background: #282e33; font: inherit; font-size: 14px; cursor: pointer; }
.vs-photo button:hover:enabled { background: #3c454c; }
.vs-photo button:disabled { opacity: .4; cursor: default; }
.vs-photo :focus-visible { outline: 2px solid #98d8ff; outline-offset: 2px; }
.vs-photo .vs-photo-symbol { font-size: 22px; font-weight: 400; line-height: 1; }
.vs-photo .vs-photo-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; user-select: none; background: #101214; }
.vs-photo .vs-photo-stage img { display: block; position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; padding: 0; object-fit: contain; box-shadow: none; transform-origin: center; -webkit-user-drag: none; cursor: zoom-in; }
.vs-photo .vs-photo-stage.is-zoomed img { cursor: grab; }
.vs-photo .vs-photo-stage.is-zoomed:active img { cursor: grabbing; }
.vs-photo .vs-photo-message { position: absolute; top: 48%; left: 0; right: 0; margin: 0; text-align: center; font-size: 15px; color: #e4e9ec; pointer-events: none; }
.vs-photo .vs-photo-tools { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #41474c; }
.vs-photo .vs-photo-amount { min-width: 50px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; color: #fff; }
.popup-carousel-footer a[data-popup-related] { align-self: center; color: inherit; font: inherit; font-size: 13px; text-underline-offset: 3px; text-decoration: underline; white-space: nowrap; }
.popup-carousel-footer a[data-popup-related][hidden] { display: none; }
@media (max-width: 600px) {
  dialog.vs-photo { width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .vs-photo .vs-photo-bar { padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .vs-photo .vs-photo-tools { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .popup-carousel-footer:has([data-popup-related]:not([hidden])) { flex-wrap: wrap; gap: 5px 10px; }
}