/**
 * @file
 * Styles of the PDF document viewer. Every rule is scoped under .pdv.
 */

.pdv {
  --pdv-height: 600px;
  --pdv-book-w: 0px;
  --pdv-book-h: 0px;
  --pdv-view-w: var(--pdv-book-w);
  --pdv-shift: 0px;
  /* Bands of the stage that hold the floating controls (read by pdv.js):
     the book is fitted between them so no control covers a page. */
  --pdv-band-top: 52px;
  --pdv-band-bottom: 52px;
  --pdv-focus: #0b5cad;
  position: relative;
  width: 100%;
  min-height: 200px;
  margin: 0 0 1.5rem;
  background: #fff;
  /* Keep the toolbar clear of the theme's fixed menu when the viewer is
     scrolled into view by focus or by an anchor (90px below xl, 130px from xl, plus a gap). */
  scroll-margin-top: 100px;
}

@media (min-width: 1200px) {
  .pdv {
    scroll-margin-top: 150px;
  }
}

.pdv [hidden] {
  display: none !important;
}

.pdv:focus-visible,
.pdv :focus-visible {
  outline: 2px solid var(--pdv-focus);
  outline-offset: 2px;
}

/* Loading and error states. */
.pdv__loading {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: calc(var(--pdv-height) / 2 - 40px) 0 0;
  text-align: center;
  pointer-events: none;
}

.pdv__loading::before {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.5rem;
  content: "";
  background: url("../images/preloader.gif") center no-repeat;
}

.pdv[data-pdv-state="ready"] .pdv__loading,
.pdv[data-pdv-state="error"] .pdv__loading {
  display: none;
}

.pdv[data-pdv-state="loading"] .pdv__stage {
  visibility: hidden;
}

.pdv__error {
  padding: 1rem;
  border: 1px solid #b00020;
  background: #fff5f5;
}

.pdv__error p {
  margin: 0 0 0.5rem;
}

/* Stage, book and pages (original: #fcfcfc canvas, 20px page shadow). */
.pdv__stage {
  position: relative;
  overflow: hidden;
  height: var(--pdv-stage-h, var(--pdv-height));
  background: #fcfcfc;
  touch-action: pan-y;
}

.pdv__viewport {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--pdv-band-top) 0 var(--pdv-band-bottom);
  transform-origin: 0 0;
}

/* The host, not the page-flip block: the library owns the block transform. */
.pdv__book {
  transform: translateX(var(--pdv-shift));
}

.pdv[data-pdv-state="ready"] .pdv__book {
  transition: transform 0.4s ease;
}

.pdv .stf__wrapper {
  height: 100%;
  padding-bottom: 0 !important;
}

.pdv__page {
  overflow: hidden;
  background: #fff url("../images/loader.gif") center no-repeat;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  user-select: none;
}

.pdv__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Spine shading of a double spread (original .gradient of odd/even pages). */
.pdv[data-pdv-display="double"] .pdv__page::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  pointer-events: none;
}

.pdv[data-pdv-display="double"] .pdv__page--odd::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.15) 100%);
}

.pdv[data-pdv-display="double"] .pdv__page--even::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
}

.pdv[data-pdv-zoom="1"] .pdv__page {
  cursor: zoom-in;
}

.pdv__zoom-layer {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.pdv__tip {
  position: absolute;
  z-index: 6;
  top: 10px;
  left: 50%;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 0 1rem;
  transform: translateX(-50%);
  color: #fff;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  font: 12px/30px Arial, sans-serif;
  white-space: nowrap;
}

/* Buttons. */
.pdv__btn {
  display: inline-block;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}

.pdv__btn:disabled {
  cursor: default;
  opacity: 0.4;
}

/* Floating toolbar (original .controls-pdf): translucent white pill. */
.pdv__toolbar {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 49px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}

.pdv__btn--prev {
  width: 29px;
  height: 26px;
  background-image: url("../images/btn-prev.png");
}

.pdv__btn--next {
  width: 29px;
  height: 26px;
  background-image: url("../images/btn-next.png");
}

.pdv__btn--fullscreen {
  width: 24px;
  height: 24px;
  background-image: url("../images/btn-fullscreen.png");
}

.pdv__btn--zoom {
  width: 22px;
  height: 22px;
  background-image: url("../images/icon-zoom.png");
  background-position: 0 0;
  background-size: 88px 22px;
}

.pdv__btn--zoom:hover {
  background-position: -22px 0;
}

.pdv__btn--zoom[aria-pressed="true"] {
  background-position: -44px 0;
}

.pdv__btn--zoom[aria-pressed="true"]:hover {
  background-position: -66px 0;
}

.pdv__zoombar {
  position: absolute;
  z-index: 5;
  top: calc(var(--pdv-band-top) + 6px);
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdv__btn--zoomin,
.pdv__btn--zoomout {
  width: 32px;
  height: 32px;
}

.pdv__btn--zoomin {
  background-image: url("../images/btn-zoom-in.png");
}

.pdv__btn--zoomout {
  background-image: url("../images/btn-zoom-out.png");
}

/* Side buttons, attached to the edges of the visible pages. */
.pdv__side {
  position: absolute;
  z-index: 2;
  top: calc(var(--pdv-band-top) + (100% - var(--pdv-band-top) - var(--pdv-band-bottom) - var(--pdv-book-h)) / 2);
  width: 22px;
  height: var(--pdv-book-h);
  background-repeat: no-repeat;
}

.pdv__side--prev {
  left: max(0px, calc(50% - var(--pdv-view-w) / 2 - 22px));
  border-radius: 15px 0 0 15px;
}

.pdv__side--next {
  right: max(0px, calc(50% - var(--pdv-view-w) / 2 - 22px));
  border-radius: 0 15px 15px 0;
}

.pdv__side--prev:hover,
.pdv__side--prev:focus-visible {
  background-color: rgba(0, 0, 0, 0.2);
  background-image: url("../images/side-prev-hover.png");
  background-position: -4px center;
}

.pdv__side--next:hover,
.pdv__side--next:focus-visible {
  background-color: rgba(0, 0, 0, 0.2);
  background-image: url("../images/side-next-hover.png");
  background-position: -38px center;
}

.pdv__side:active {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Bottom band floating inside the stage (original .bottom): slider under
   the pages and the go-to panel on the right. */
.pdv__bar {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--pdv-band-bottom);
  pointer-events: none;
}

.pdv__bar > * {
  pointer-events: auto;
}

.pdv[data-pdv-zoom="2"] .pdv__slider-wrap {
  visibility: hidden;
}

.pdv__slider-wrap {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: min(var(--pdv-view-w), 100%);
  height: 8px;
  transform: translateX(-50%);
}

/* Slider (original jQuery UI turnjs-slider): 8px track rgba(0,0,0,.2),
   80px handle, black at 0.2 / 0.4 hover / 1 active, 1px white border. */
.pdv__slider {
  display: block;
  width: 100%;
  height: 8px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.pdv__slider::-webkit-slider-thumb {
  width: 82px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
  appearance: none;
}

.pdv__slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 82px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.pdv__slider::-moz-range-track {
  height: 8px;
  border-radius: 5px;
  background: transparent;
}

.pdv__slider:hover::-webkit-slider-thumb {
  background: rgba(0, 0, 0, 0.4);
}

.pdv__slider:hover::-moz-range-thumb {
  background: rgba(0, 0, 0, 0.4);
}

.pdv__slider:active::-webkit-slider-thumb,
.pdv__slider:focus-visible::-webkit-slider-thumb {
  background: #000;
}

.pdv__slider:active::-moz-range-thumb,
.pdv__slider:focus-visible::-moz-range-thumb {
  background: #000;
}

.pdv__thumb {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 8px);
  padding: 7px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
}

.pdv__thumb canvas {
  display: block;
  width: 100px;
  height: auto;
  background: #fff;
}

.pdv__thumb span {
  color: #fff;
  font: bold 12px/20px Arial, sans-serif;
}

/* Go-to panel (original .firstlast): bottom 16px, right 80px. */
.pdv__panel {
  position: absolute;
  right: 80px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdv__btn--first,
.pdv__btn--last {
  width: 17px;
  height: 25px;
}

.pdv__btn--prevgo {
  margin-right: 5px;
}

.pdv__btn--nextgo {
  margin-left: 4px;
}

.pdv__btn--prevgo,
.pdv__btn--nextgo {
  width: 17px;
  height: 25px;
}

.pdv__btn--first {
  background-image: url("../images/btn-first.png");
}

.pdv__btn--last {
  background-image: url("../images/btn-last.png");
}

.pdv__btn--prevgo {
  background-image: url("../images/btn-prev-go.png");
}

.pdv__btn--nextgo {
  background-image: url("../images/btn-next-go.png");
}

.pdv__indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000;
  font: 16px/25px Arial, sans-serif;
  white-space: nowrap;
}

/* Page field (original #pageFld): 42x25, lightgray, 2px black, radius 5. */
.pdv__page-field {
  box-sizing: border-box;
  width: 42px;
  height: 25px;
  margin: 0;
  padding: 0 2px;
  text-align: center;
  color: #000;
  border: 2px solid #000;
  border-radius: 5px;
  background: #d3d3d3;
  font: 16px/1 Arial, sans-serif;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdv__page-field::-webkit-inner-spin-button,
.pdv__page-field::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Visually hidden helpers (never display:none: they must stay readable). */
.pdv__status,
.pdv__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fullscreen on the viewer element. */
.pdv:fullscreen {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fcfcfc;
}

.pdv:fullscreen .pdv__stage {
  flex: 1 1 auto;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pdv * {
    transition: none !important;
    animation: none !important;
  }
}

@media only screen and (max-width: 750px) {
  .pdv__btn--zoom {
    display: none;
  }

  .pdv__toolbar {
    right: 20px;
  }
}

/* Narrow stages (original max-width 600px): full-width slider and the
   panel centered right above it. */
@media only screen and (max-width: 600px) {
  .pdv__slider-wrap {
    width: 100%;
  }

  .pdv__panel {
    right: 0;
    left: 0;
    justify-content: center;
  }
}