/*
 * PDF Protect - page layout (continuous single page / two-page spread).
 * See pdfprotect_pagelayout.js.
 */

/* -- Toolbar toggle button (same look as the fullscreen button) --------- */
.toolbarButton.pageLayoutToggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbarButton.pageLayoutToggle::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  /* Icon shows the layout you will switch TO. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='4' width='9' height='16' rx='1.2' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='1.8'/%3E%3Crect x='12.5' y='4' width='9' height='16' rx='1.2' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  top: -1px;
  left: unset !important;
  transform: unset;
}

.toolbarButton.pageLayoutToggle.pp-pagelayout-active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='3' width='10' height='18' rx='1.5' fill='none' stroke='white' stroke-opacity='0.85' stroke-width='1.8'/%3E%3C/svg%3E");
}

.toolbarButton.pageLayoutToggle #pageLayoutToggleLabel {
  display: none;
}

/* -- Two-page (spread) layout ------------------------------------------- */
/*
 * #viewer normally stacks .page divs top-to-bottom, each centred with
 * "margin: auto". In spread mode it becomes a wrapping flex row; the
 * zero-height break markers inserted by pdfprotect_pagelayout.js (after
 * page 1, 3, 5, ...) group pages as [1], [2,3], [4,5], ... - the usual
 * "cover alone, then facing pages" book layout.
 */
.pdfViewer.pp-spread-mode {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.pdfViewer.pp-spread-mode .page {
  margin: 6px 4px;
  flex: 0 0 auto;
}

.pp-spread-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}