/* AI-12291 (ADR-198): invoice photo viewer over wizard steps 2–5. */

/* Header button: icon + short word; the full name is its aria-label. */
.flow-photos-btn { margin-left: auto; gap: 6px; padding: 8px 12px; }
.flow-photos-btn[hidden] { display: none; }

html.pv-open, html.pv-open body { overflow: hidden; }

.pv {
  --pv-dim: 1;
  position: fixed; inset: 0; z-index: 9500;
  background: rgb(14 14 14 / var(--pv-dim));
  color: #fff;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

.pv-stage {
  position: absolute;
  inset: calc(56px + var(--safe-top)) 0 calc(8px + var(--safe-bottom)) 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.pv-img {
  /* sized and centred by JS (left/top/width/height of the fitted photo) */
  position: absolute; left: 0; top: 0;
  margin: 0;
  transform-origin: center center;
  will-change: transform;
  max-width: none;
  cursor: zoom-in;
  -webkit-user-drag: none;
}
.pv.is-zoomed .pv-img { cursor: grab; }
.pv-img.pv-anim { transition: transform var(--dur, 200ms) var(--ease, ease-out); }
.pv-img[hidden] { display: none; }

.pv-bar {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(56px + var(--safe-top));
  padding: var(--safe-top) var(--sp-4, 16px) 0;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 2;
}
.pv-counter {
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: var(--r-full, 999px);
  background: rgb(255 255 255 / 0.14);
}
.pv-counter:empty { visibility: hidden; }

.pv-btn {
  border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--r-full, 999px);
  /* dark, not white-translucent: arrows and zoom lie over white paper */
  background: rgb(30 30 30 / 0.62); color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.pv-btn:hover { background: rgb(30 30 30 / 0.82); }
.pv-btn:focus-visible { outline: 2px solid var(--accent, #d97757); outline-offset: 2px; }
.pv-btn[hidden] { display: none; }

.pv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
}
.pv-prev { left: 6px; }
.pv-next { right: 6px; }

/* Zoom buttons only where there is no pinch: a mouse/trackpad. */
.pv-zoom {
  position: absolute; right: var(--sp-4, 16px); bottom: calc(var(--sp-4, 16px) + var(--safe-bottom));
  display: none; gap: 8px; z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .pv-zoom { display: flex; }
  .pv-prev { left: var(--sp-4, 16px); }
  .pv-next { right: var(--sp-4, 16px); }
}

.pv-spinner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pv-spinner .spinner { width: 28px; height: 28px; border-width: 3px; margin: 0; color: rgb(255 255 255 / 0.8); }
.pv-spinner[hidden] { display: none; }

.pv-msg {
  max-width: 320px; margin: 0 56px;  /* clear of the 44 px page arrows */
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  border-radius: var(--r-lg, 14px);
  background: rgb(255 255 255 / 0.1);
  font-size: 15px; line-height: 1.45; text-align: center;
}
.pv-msg[hidden] { display: none; }

.pv-hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sp-6, 24px) + var(--safe-bottom));
  padding: 8px 14px; border-radius: var(--r-full, 999px);
  background: rgb(0 0 0 / 0.6);
  font-size: 13px; white-space: nowrap;
  pointer-events: none;
  transition: opacity 400ms ease;
  z-index: 2;
}
.pv-hint.is-gone { opacity: 0; }
.pv-hint[hidden] { display: none; }