/* ===============================
   CHAPTER PAGE STYLES — FINAL (FLOAT VERSION)
   - Footer tanpa container
   - Tombol besar, tebal, jelas
   - Responsif, tema-aware, safe-area aware
================================ */

/* -------- Header Chapter: floating pill center -------- */
.chapter-header{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.25));
  z-index: 9999;
  pointer-events: auto;
}

.chapter-title-text{
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: var(--text);
}

/* Tema kecil untuk nuansa header (opsional) */
html[data-theme='dark']  .chapter-header{ background:#1f1f1f; border-color:#2c2c2c; }
html[data-theme='light'] .chapter-header{ background:#f7f7f7; border-color:#d1d5db; }

/* -------- Footer Chapter: tombol melayang, tanpa bar -------- */
.chapter-footer{
  position: fixed;
  left: 0; right: 0;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px)); /* ✅ Naik jadi 20px */
  background: transparent;
  border: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  z-index: 9999;
  transition: bottom .25s ease, opacity .2s ease;
  pointer-events: none; /* area kosong tidak menutupi klik konten */
}

/* Tombol bulat & tebal */
.chapter-footer button{
  pointer-events: auto;
  background: var(--accent);
  color: var(--on-accent, #0b0f12);
  border: none;
  border-radius: 50%;
  width: clamp(48px, 7.2vw, 56px);
  height: clamp(48px, 7.2vw, 56px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  outline: none;
  touch-action: manipulation; /* kurangi delay tap */
}

/* Icon (SVG/IMG) di tombol */
.chapter-footer button img.icon,
.chapter-footer button .icon{
  width: 22px; height: 22px;
  display: inline-block;
}

/* Hover/active/focus */
.chapter-footer button:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.chapter-footer button:active{ transform: scale(0.96); }
.chapter-footer button:focus-visible{
  box-shadow: 0 0 0 3px var(--accent-contrast, rgba(0,0,0,.25));
}

/* Jika Next/Prev tidak ada (inline style), pastikan hidden */
.chapter-footer button[style*="display:none"]{
  display: none !important;
}

/* -------- Konten gambar -------- */
.chapter-images{
  height: 100vh;
  overflow-y: auto;
  margin: 0; padding: 0;
  /* ruang bawah agar tidak ketutup tombol */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  /* optional: smooth scroll anchoring */
  scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.chapter-img{
  width: 100%;
  display: block;
  margin: 0;
  border: 0;
}

/* Global reset untuk halaman baca */
html, body{
  margin: 0; padding: 0; height: 100%;
  overflow-x: hidden;
}

/* Pastikan teks tombol kontras di kedua tema */
html[data-theme='dark']  .chapter-footer button{ color: var(--on-accent, #0b0f12); }
html[data-theme='light'] .chapter-footer button{ color: var(--on-accent, #0b0f12); }

/* Reader UI di atas elemen floater lain */
.chapter-header,
.chapter-footer{ z-index: 9999; }

/* -------- Patch: sembunyikan "Back to Top" dkk saat reading-mode -------- */
body.reading-mode #back-to-top,
body.reading-mode .back-to-top,
body.reading-mode a.back-to-top,
body.reading-mode .go-to-top,
body.reading-mode .scroll-to-top,
body.reading-mode [id*="back-to-top"],
body.reading-mode [class*="back-to-top"],
body.reading-mode [class*="go-to-top"],
body.reading-mode [class*="scroll-to-top"],
/* plugin populer */
body.reading-mode #scrollUp,
body.reading-mode .scrollUp,
body.reading-mode .scroll-up,
body.reading-mode #toTop,
body.reading-mode .wpfront-scroll-top-container{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(200%) !important;
}

/* -------- Preferensi Motion -------- */
@media (prefers-reduced-motion: reduce){
  .chapter-footer,
  .chapter-footer button{
    transition: none !important;
  }
}