/* ========== Global shell ========== */
html,
body {
  margin: 0;
  overflow: hidden;
}

:root {
  /* tune this number if you want them bigger/smaller later */
  --cover-thumb-max: 340px;
}

#app {
  display: flex;
  height: 100%;
  min-height: 90dvh;
  touch-action: pinch-zoom pan-x pan-y;
}

#viewer-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#viewer-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 110px);
  justify-content: center;
}

/* Main viewer stage */
#viewer {
  flex-grow: 1;
  background: #e9e3e3;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center; /* center the spread horizontally */
  align-items: flex-start; /* stick to the top */
  height: auto;
  touch-action: pinch-zoom pan-x pan-y;
}

/* When zoomed, allow scrolling (esp. iPad) */
#viewer.zoomed {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* What JS scales */
.spreadWrapper {
  transform-origin: top left;
  transition: transform 0.2s ease;
  margin: 0; /* no extra vertical gaps */
}

/* phones: lift the bar and respect the safe area */
@media (hover: none) and (pointer: coarse) {
  :root {
    --nav-lift: 40px;
  } /* tweak this gap */

  #navigation {
    bottom: calc(env(safe-area-inset-bottom) + var(--nav-lift));
    border-radius: 10px 10px 0 0; /* optional: floating look */
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    max-width: 1224px; /* keep your existing max width */
  }
}

/* ========== Spread / pages ========== */

/* This is the “crop frame” the JS scales.
   Height MUST match a page height to avoid top/bottom strips. */
.pageWrapperContainer {
  display: flex;
  gap: 0;
  width: 1224px; /* spread width in your current single-iframe design */
  height: 792px; /* <-- match page height exactly */
  aspect-ratio: auto;
  position: relative; /* anchor for absolutely positioned children */
}

/* A single page slot */
.pageWrapper {
  width: 1224px;
  height: 792px;
  position: relative; /* anchor for overlays if you need them */
  background: white;
  overflow: hidden;
}

/* ========== Iframe that renders the page ========== */
/* Make the iframe fill its page exactly, and behave like a block. */
.pageFrame {
  position: absolute; /* anchor to the page box, not the viewport */
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: auto;
  user-select: text;
  display: block; /* kills inline baseline gaps */
  background: transparent;
}

/* ========== Navigation bar ========== */
#navigation {
  width: 100%;
  max-width: 1224px;
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  background: #1f252d;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}

#goto {
  white-space: nowrap;
  min-width: 70px;
}
#pageInput {
  width: 150px;
}

/* ========== Viewer container ========== */
#viewer-container {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding-bottom: 110px;
}

/* ========== Sidebar / thumbnails (unchanged) ========== */
#sidebarOffcanvas {
  width: 40vw;
  max-width: 800px;
}
.thumbContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
.thumbContainer .thumbImages {
  display: flex;
  gap: 6px;
}
.thumbContainer img {
  width: 50%;
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}
#thumbnailGrid img:hover {
  border-color: #007bff;
}
.thumbLabel {
  margin-top: 4px;
  text-align: center;
}
#textSearch {
  max-width: 95%;
  margin: 0 auto;
}

/* Slider thumbs */
.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb,
.custom-range::-ms-thumb {
  background: gray;
}

/* ========== Page nav arrows ========== */
/* Keep them above the iframe; anchor them to the spread box. */
.pageWrapperContainer .nav-page-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 120px;
  font-weight: 700;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.2);
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
  z-index: 20; /* over the iframe */
}
.pageWrapperContainer .nav-page-btn:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.pageWrapperContainer .nav-page-btn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.pageWrapperContainer #back {
  left: 10px;
}
.pageWrapperContainer #next {
  right: 10px;
}

/* Center single-side thumbnails (front/back covers) */
.thumbContainer .thumbImages.single {
  justify-content: center;
}

.thumbContainer .thumbImages.single img {
  width: clamp(180px, 65%, var(--cover-thumb-max));
  height: auto;
}

/* ========== HIDE SCROLLBARS (viewer + sidebar only) ========== */

/* hide scrollbars inside main viewer area */
#viewer,
#viewer-container,
#viewer-wrapper {
  overflow: hidden; /* prevents visible bars */
}

/* hide scrollbars inside the sidebar offcanvas (Bootstrap's one) */
#sidebarOffcanvas {
  overflow: hidden !important; /* remove any inner scroll */
}

/* keep scrollable content but hide scrollbar appearance */
#sidebarOffcanvas::-webkit-scrollbar,
#viewer::-webkit-scrollbar {
  display: none;
}

/* Firefox support */
#sidebarOffcanvas,
#viewer {
  scrollbar-width: none; /* hides scrollbar but still allows scroll */
}

/* Legacy IE/Edge */
#sidebarOffcanvas,
#viewer {
  -ms-overflow-style: none;
}