/* Annotated support screenshots open in a native, keyboard accessible lightbox. */
.support-article-body figure.support-annotated-screenshot {
  cursor: zoom-in;
}

.support-article-body figure.support-annotated-screenshot:focus-visible {
  outline: 3px solid var(--blue-dark, #234f8c);
  outline-offset: 5px;
}

html.support-image-viewer-open { overflow: hidden; }

.support-image-viewer {
  width: min(96vw, 1440px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: var(--text, #182238);
  background: var(--white, #fff);
  box-shadow: 0 24px 80px rgba(13, 29, 58, .35);
  overflow: hidden;
}

.support-image-viewer::backdrop { background: rgba(8, 20, 42, .78); }

.support-image-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  color: var(--white, #fff);
  background: var(--blue-dark, #123a70);
}

.support-image-viewer__title { margin: 0; font-size: .95rem; font-weight: 700; }
.support-image-viewer__actions { display: flex; align-items: center; gap: .5rem; }
.support-image-viewer__zoom { border: 0; border-radius: 999px; padding: .4rem .75rem; color: inherit; background: rgba(255,255,255,.14); cursor: pointer; }
.support-image-viewer__zoom:hover, .support-image-viewer__zoom:focus-visible { background: rgba(255,255,255,.28); }
.support-image-viewer__close {
  border: 0;
  border-radius: 999px;
  padding: .4rem .75rem;
  color: inherit;
  background: rgba(255,255,255,.14);
  cursor: pointer;
}
.support-image-viewer__close:hover, .support-image-viewer__close:focus-visible { background: rgba(255,255,255,.28); }
.support-image-viewer__stage { max-height: calc(94vh - 58px); overflow: auto; padding: 1rem; background: #f2f5fa; }
.support-image-viewer__stage figure { position: relative; width: max-content; max-width: 100%; margin: 0 auto; }
.support-image-viewer__stage img { display: block; width: auto; max-width: 100%; height: auto; }
.support-image-viewer__stage.is-natural figure { max-width: none; }
.support-image-viewer__stage.is-natural img { max-width: none; }
.support-image-viewer__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Keep motion on annotation shapes only; the screenshot itself never animates. */
.support-image-viewer[open] .support-annotated-screenshot svg rect,
.support-image-viewer[open] .support-annotated-screenshot svg circle,
.support-image-viewer[open] .support-annotated-screenshot svg path,
.support-image-viewer[open] .support-annotated-screenshot svg polygon,
.support-image-viewer[open] .support-annotated-screenshot svg line,
.support-image-viewer[open] .support-annotated-screenshot svg polyline,
.support-image-viewer[open] .support-annotated-screenshot svg ellipse {
  animation: support-annotation-pulse 3s ease-in-out 1;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes support-annotation-pulse {
  0%, 100% { opacity: 1; stroke-width: 1.5px; filter: drop-shadow(0 0 .5px rgba(229, 35, 54, .0875)); }
  50% { opacity: 1; stroke-width: 3px; filter: drop-shadow(0 0 3px rgba(229, 35, 54, .225)); }
}
@media (prefers-reduced-motion: reduce) {
  .support-image-viewer[open] .support-annotated-screenshot svg rect,
  .support-image-viewer[open] .support-annotated-screenshot svg circle,
  .support-image-viewer[open] .support-annotated-screenshot svg path,
  .support-image-viewer[open] .support-annotated-screenshot svg polygon,
  .support-image-viewer[open] .support-annotated-screenshot svg line,
  .support-image-viewer[open] .support-annotated-screenshot svg polyline,
  .support-image-viewer[open] .support-annotated-screenshot svg ellipse { animation: none; }
}