/* ========== 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-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  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,.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;         /* same as spread width */
  margin: 0 auto;
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f8f9fa;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  flex-shrink: 0;
}

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

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

/* ========== 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;
}