/* Minimal reader CSS derived from provided SCSS spec */
body.reader-active {
  background-color: #000;
  overflow: hidden;
}

/* Try to hide common header/footer wrappers from themes */
body.reader-active header,
body.reader-active .site-header,
body.reader-active #masthead,
body.reader-active footer,
body.reader-active .site-footer {
  display: none !important;
}

.reader-body {
  background-color: #000;
  color: #fff;
  height: 100vh;
  height: 100dvh; /* Use dynamic viewport height on mobile */
  width: 100vw;
  width: 100dvw; /* Use dynamic viewport width on mobile */
  overflow: hidden;
  position: fixed; /* ensure overlay */
  inset: 0;
  z-index: 999999; /* above theme chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Prevent mobile zoom/scroll */
  touch-action: manipulation;
}

/* Enhanced mobile viewport handling */
@media (max-width: 1024px) {
  .reader-body {
    /* Force full screen on mobile */
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    /* Prevent any scrolling */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
}

.reader-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reader-page {
  box-shadow: none;
  border: none;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.reader-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; /* no gutter between pages */
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: stretch; /* let children control alignment */
}

/* Remove visual gutter by pushing each page to the inner edge of its column */
.reader-spread .reader-page:nth-child(1) { justify-self: end; }
.reader-spread .reader-page:nth-child(2) { justify-self: start; }

.chapter-index {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 240px;
  padding: 16px 12px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.92);
  transform: translateX(-100%); /* hidden by default */
  transition: transform 160ms ease-out, opacity 160ms ease-out;
  opacity: 0;
  z-index: 2;
}
.chapter-index h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #bbb;
}
.chapter-index a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 6px 4px;
  border-radius: 4px;
}
.chapter-index a:hover {
  color: #EC2024; /* theme red override as hex fallback */
  background: rgba(255,255,255,0.06);
}

.reader-content {
  width: 100%;
  height: 100%;
}

/* Add comfortable vertical breathing room for novel formats */
.reader-body.pdf-mode .reader-content,
.reader-body.epub-mode .reader-content {
  padding-top: 56px;
  padding-bottom: 88px;
}

@media (max-width: 960px) {
  .reader-body.pdf-mode .reader-content,
  .reader-body.epub-mode .reader-content {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .reader-body {
    align-items: stretch;
  }
}

@media (max-width: 960px) {
  .chapter-index { width: 200px; }
}
@media (max-width: 720px) {
  /* On smaller screens, sidebar remains visible per spec */
  .chapter-index { width: 160px; font-size: 14px; }
}

.nav-controls {
  position: absolute;
  bottom: 24px;
  right: 28px;
  transform: none;
  color: #fff;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 16px;
  user-select: none;
}

/* Move navigation to bottom-right on mobile */
@media (max-width: 768px) {
  .nav-controls {
    right: 12px;
    bottom: 16px;
  }
}
.nav-controls button {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  width: 36px;
  height: 32px;
  cursor: pointer;
}
.nav-controls button:hover { background: rgba(255,255,255,0.08); }

.tap-zone-left,
.tap-zone-right {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  cursor: pointer;
  background: none !important
}
.tap-zone-left { left: 0; }
.tap-zone-right { right: 0; }

.reader-close {
  position: fixed !important;
  top: 8px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  color: #fff;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  z-index: 10000;
  transform: none !important;
  margin: 0 !important;
  align-self: flex-start !important;
  justify-self: flex-end !important;
  width: auto !important;
}
.reader-close:hover { opacity: 1; }

/* Override mobile button styles for reader close button */
@media (max-width: 768px) {
  .reader-close {
    width: auto !important;
    padding: 0 !important;
  }
}

/* Sidebar open state */
.reader-body.sidebar-open .chapter-index {
  transform: translateX(0);
  opacity: 1;
}

/* Icon buttons: ensure all reader icons share the same style as the chapter menu */
.reader-menu-btn,
.reader-bookmark-btn,
.reader-help-btn,
.reader-back-btn {
  position: absolute;
  bottom: 16px;
  z-index: 3;
  width: 36px;
  height: 32px;
  border: none;
  color: #fff;
  background: transparent;
  border-radius: 4px; /* harmless even without bg/border; keeps hit area consistent */
  cursor: pointer;
  display: grid;
  place-items: center;
}
.reader-menu-btn:hover,
.reader-bookmark-btn:hover,
.reader-help-btn:hover,
.reader-back-btn:hover { background: transparent; }

/* Ensure inline SVG icons inherit the white color and size consistently */
.reader-menu-btn svg,
.reader-bookmark-btn svg,
.reader-help-btn svg,
.reader-back-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* Per-button positioning (left offsets) */
.reader-menu-btn { left: 14px; }
.reader-bookmark-btn { left: 56px; }

.reader-body.bookmark-saved .reader-bookmark-btn { box-shadow: 0 0 0 2px #EC2024 inset; }

.reader-help-btn { left: 98px; }

/* Move help button to upper-left corner */
.reader-help-btn {
  left: 12px;
  top: 8px;
  bottom: auto;
}

.reader-back-btn { left: 140px; }

/* Help overlay */
.reader-help {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  z-index: 4;
}
.reader-help.visible { display: flex; }
.reader-help .help-card {
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 20px 24px;
  border-radius: 10px;
  max-width: 640px;
  width: 90%;
}
.reader-help .help-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.reader-help .help-header h3 { margin: 0; font-size: 18px; }
.reader-help .help-close { background: transparent; color:#fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; width:32px; height:28px; cursor:pointer; }
.reader-help .help-list { list-style:none; margin:0; padding:0; }
.reader-help .help-list li { display:flex; align-items:center; gap:8px; margin:6px 0; }
.reader-help .help-list .i { width: 20px; display:inline-block; text-align:center; }
.reader-help .help-list .i svg { width: 18px; height: 18px; fill: currentColor; display:block; }

/* How-to overlay (first-page tap hint) */
.reader-howto {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.9);
  z-index: 5;
}
.reader-howto.visible { display: flex; }
.reader-howto .howto-card {
  position: relative;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 10px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
}
.reader-howto .howto-content img { max-width: 100%; max-height: 84vh; height: auto; display:block; }
.reader-howto .howto-text { color:#fff; padding: 16px; max-width: 78vw; }
.reader-howto .howto-text h3 { margin: 0 0 8px 0; font-size: 18px; }
.reader-howto .howto-text p { margin: 0; line-height: 1.45; }
.reader-howto .howto-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer;
}

/* Paywall overlay */
.reader-paywall {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  z-index: 4;
  text-align: center;
  padding: 24px;
}
.reader-paywall.visible { display: flex; }
.reader-paywall .paywall-card {
  background: rgba(0,0,0,0.85); 
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 20px 24px;
  border-radius: 10px;
  max-width: 560px;
}
.reader-paywall .paywall-actions { margin-top: 12px; display: flex; gap: 10px; justify-content: center; }
.reader-paywall .paywall-btn { border: 1px solid #000000; color:#fff; background: transparent; padding: 8px 14px; border-radius: 6px; cursor:pointer; }
.reader-paywall .paywall-btn.primary { background: #EC2024; border-color: #fff; }
.reader-paywall .paywall-btn:hover { background: rgba(255,255,255,0.08); }

/* Ensure images are centered without borders/padding */
.reader-image-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}