/* PhyNotes secure viewer — front-end */
.pdfv-block { margin: 14px 0; }
/* Button styling is SCOPED to the shortcode block only (.pdfv-block). A page-builder button
   that merely carries the "pdfv-open"/"pdfv-popup" class as a JS trigger keeps its OWN design
   — we must not restyle it (that was making Elementor buttons stretch to full width). */
.pdfv-block .pdfv-open {
  display: block; width: 100%; max-width: 520px; margin: 0 auto;
  padding: 14px 18px; background: #1a73e8; color: #fff; border: 0;
  border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1.6; text-align: center;
}
.pdfv-block .pdfv-open:hover { background: #1667d4; }
.pdfv-block .pdfv-open small { display: block; font-size: 12px; opacity: .85; margin-top: 4px; }
.pdfv-block .pdfv-open.pdfv-loading { opacity: .7; cursor: progress; }

.pdfv-panel { display: none; margin-top: 14px; }
.pdfv-panel.on { display: block; }

/* overflow:hidden clips the rotated, drifting watermark so it can never push the page
   into horizontal scrolling. max-width keeps the block itself inside the viewport. */
.pdfv-frame { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.pdfv-frame:fullscreen { background: #3a3f45; }
/* CSS "fake fullscreen" — fills the viewport by toggling the .pdfv-fs class instead of calling
   the native Fullscreen API, which on mobile pops a "swipe down to exit full screen" system
   toast that can't be styled or removed. Same look, no toast. */
.pdfv-frame.pdfv-fs {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  /* 100dvh tracks the VISIBLE viewport (shrinks when the mobile address bar shows), so the
     bottom bar can't be pushed off-screen the way plain 100vh (large viewport) does. */
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; margin: 0;
  background: #3a3f45; border-radius: 0;
}
html.pdfv-fs-lock, html.pdfv-fs-lock body { overflow: hidden !important; }
.pdfv-frame:fullscreen .pdfv-stage,
.pdfv-frame.pdfv-fs .pdfv-stage {
  height: 100vh !important; height: 100dvh !important; aspect-ratio: auto !important; max-height: none !important; border-radius: 0;
}

.pdfv-stage {
  width: 100%; background: #3a3f45; aspect-ratio: 1 / 1.3; max-height: 85vh;
  touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 8px;
}
.pdfv-stage canvas { touch-action: none; }

/* One-finger vertical swipe scrolls the WHOLE PAGE when the document is fitted and we're not
   in fullscreen (toggled by updateTouch() in viewer.js). `pan-y` hands vertical scrolling to
   the browser, while a two-finger pinch still reaches OpenSeadragon to zoom. The class is
   removed the moment the reader zooms in, so one finger then pans the page for reading. */
.pdfv-frame.pdfv-pagescroll .pdfv-stage,
.pdfv-frame.pdfv-pagescroll .pdfv-stage * { touch-action: pan-y !important; }

/* Moving watermark over the page — screenshots carry the session code + date. */
.pdfv-wm {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: rgba(120,120,120,.18); font-weight: 700;
  letter-spacing: 2px; transform: rotate(-24deg);
  text-shadow: 0 0 1px rgba(255,255,255,.2);
  animation: pdfvDrift 9s ease-in-out infinite alternate;
  white-space: nowrap; overflow: hidden;
}
@keyframes pdfvDrift {
  from { transform: rotate(-24deg) translate(-6%, -4%); }
  to   { transform: rotate(-24deg) translate(6%, 4%); }
}

/* Controls: below the page normally; floating at the bottom inside fullscreen. */
.pdfv-bar {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 8px 2px 0;
}
.pdfv-bar button {
  font-size: 13px; padding: 6px 11px; border: 1px solid #d8dbe0;
  background: #fff; color: #222; border-radius: 6px; cursor: pointer;
}
.pdfv-bar button:hover { background: #f3f5f8; }
.pdfv-bar button:disabled { opacity: .4; cursor: default; }
.pdfv-count { font-size: 13px; color: #556; min-width: 74px; text-align: center; }

.pdfv-frame:fullscreen .pdfv-bar,
.pdfv-frame.pdfv-fs .pdfv-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  /* extra bottom room so the bar never touches the screen edge / gesture nav bar */
  padding: 10px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(20,22,25,.92), rgba(20,22,25,.5) 70%, transparent);
}
.pdfv-frame:fullscreen .pdfv-bar button,
.pdfv-frame.pdfv-fs .pdfv-bar button {
  border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.14); color: #fff;
}
.pdfv-frame:fullscreen .pdfv-bar .pdfv-count,
.pdfv-frame.pdfv-fs .pdfv-bar .pdfv-count { color: #fff; }

/* Inline viewer injected right below a tagged Elementor/raw button (default mode). */
.pdfv-block.pdfv-inline { margin-top: 10px; }

/* ── Popup (modal) for bare buttons — Elementor / ElementsKit / raw HTML ──────────────
   Any tagged button opens the secure viewer in this fullscreen overlay. It wraps the same
   .pdfv-block, so all the block styles above still apply inside it. */
html.pdfv-modal-lock { overflow: hidden; }           /* freeze the page behind the popup */
.pdfv-modal {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 14, 17, .86); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s ease; padding: 14px;
}
.pdfv-modal.on { opacity: 1; }
.pdfv-modal-box {
  position: relative; width: 100%; max-width: 1000px;
  display: flex; flex-direction: column; justify-content: center;
}
.pdfv-modal .pdfv-block { margin: 0; width: 100%; }
.pdfv-modal .pdfv-panel { display: block; margin: 0; }
.pdfv-modal .pdfv-stage { max-height: 84vh; aspect-ratio: 1 / 1.3; }
.pdfv-modal .pdfv-bar { padding-top: 10px; }
.pdfv-modal .pdfv-bar button {
  border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.14); color: #fff;
}
.pdfv-modal .pdfv-bar .pdfv-count { color: #eee; }
.pdfv-modal-close {
  position: absolute; top: -6px; right: -6px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 17px; line-height: 40px;
}
.pdfv-modal-close:hover { background: rgba(255,255,255,.30); }
@media (max-width: 640px) {
  .pdfv-modal { padding: 0; }
  .pdfv-modal .pdfv-stage { max-height: 88vh; border-radius: 0; }
  .pdfv-modal-close { top: 6px; right: 8px; background: rgba(0,0,0,.45); }
}