:root{--fb-maxw:850px;--fb-maxh:550px;--fb-bg:#fff;}
body{margin:0;font-family:Arial,Helvetica,sans-serif;}
.fb-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;}
.fb-controls{width:min(1100px, 96vw);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:12px 8px;}
.fb-controls button,.fb-controls input[type=range],.fb-controls select{font-size:14px;}
.fb-controls button{padding:8px 12px;border:1px solid #cfcfcf;background:#f7f7f7;border-radius:8px;cursor:pointer;}
.fb-controls button:hover{background:#efefef;}
.fb-stage{width:100%;display:flex;justify-content:center;align-items:center;padding:8px;box-sizing:border-box;}
.fb-bg{width:100%;display:flex;justify-content:center;align-items:center;padding:18px;box-sizing:border-box;}
.fb-bg.repeat{background-repeat:repeat;}
.fb-bg.stretch{background-repeat:no-repeat;background-size:cover;background-position:center;}
#book-container{width:var(--fb-maxw);height:var(--fb-maxh);max-width:96vw;max-height:70vh;position:relative;}
#book{width:100%;height:100%;position:relative;}

/* Page visuals */
.fb-page{background:#fff;box-sizing:border-box;overflow:hidden;width:100%;height:100%;}
.fb-page .page-inner{width:100%;height:100%;position:relative;}
.fb-page img.page-img{width:100%;height:100%;object-fit:cover;display:block;}
.fb-page .page-pad{padding:18px;}

/* Paper tone */
.fb-page{background:linear-gradient(90deg,#faf9f6 0%, #fff 8%, #fff 92%, #f3f2ee 100%);} 

/* Seam shadows */
.fb-page.seam-left{box-shadow: inset -18px 0 18px rgba(0,0,0,0.08);} 
.fb-page.seam-right{box-shadow: inset 18px 0 18px rgba(0,0,0,0.08);} 

/* ================================
   HARD COVER – FINAL CORRECT FIX
   ================================ */

.fb-page.cover{
  background:#333;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Inner frame that defines the true book face */
.fb-page.cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:#333;
}

/* Cover image */
.fb-page.cover .cover-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
}

/* Hardcover shadows */
.fb-page.cover.hard-left{
  box-shadow:
    inset -10px 0 20px rgba(0,0,0,0.25),
    0 10px 30px rgba(0,0,0,0.25);
}
.fb-page.cover.hard-right{
  box-shadow:
    inset 10px 0 20px rgba(0,0,0,0.25),
    0 10px 30px rgba(0,0,0,0.25);
}

/* Modal comments */
.fb-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:9999;padding:12px;}
.fb-modal.open{display:flex;}
.fb-modal .box{width:min(700px, 96vw);max-height:min(var(--fb-maxh), 80vh);background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.35);display:flex;flex-direction:column;overflow:hidden;}
.fb-modal .hdr{padding:10px 12px;border-bottom:1px solid #e6e6e6;display:flex;gap:10px;align-items:center;justify-content:space-between;}
.fb-modal .hdr h3{margin:0;font-size:16px;}
.fb-modal .body{padding:12px;overflow:auto;}
.fb-modal .ftr{padding:10px 12px;border-top:1px solid #e6e6e6;}
.fb-modal textarea{width:100%;min-height:70px;resize:vertical;}
.fb-comment{border:1px solid #e9e9e9;border-radius:10px;padding:10px;margin:10px 0;background:#fafafa;}
.fb-comment .meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#444;}
.fb-comment .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.fb-comment .actions button{padding:5px 8px;border-radius:8px;font-size:12px;}
.fb-reply{margin-left:18px;border-left:3px solid #e0e0e0;padding-left:10px;}

@media (max-width:700px){
  #book-container{max-height:62vh;}
}
/* =====================================================
   COVER EDGE FIX (RIGHT SIDE LOOKS SHORT)
   Works with flipbook_fix1 (.fb-page.cover + hard-left/right)
   Paste at VERY BOTTOM of flipbook.css
   ===================================================== */

.fb-page.cover{
  position: relative;          /* required for absolute img */
  overflow: hidden;            /* keep clean edges */
}

/* Make cover image truly fill the cover face (no layout shrink) */
.fb-page.cover .cover-img{
  position: absolute !important;
  inset: 0 !important;         /* top/right/bottom/left = 0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

/* Compensate for the "hard-right" inset shadow stealing visible width */
.fb-page.cover.hard-right .cover-img{
  right: -12px !important;     /* pushes image under the shadow */
}

/* Optional: keep left cover symmetrical */
.fb-page.cover.hard-left .cover-img{
  left: -12px !important;
}
/* =====================================================
   PERFECT FIT COVERS (FORCE STRETCH — NO CROP, NO BARS)
   Put at VERY BOTTOM of flipbook.css
   ===================================================== */

.fb-page.cover{
  position: relative;
  overflow: hidden;
}

/* Force the cover image to exactly match the cover size */
.fb-page.cover .cover-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* THIS is the "perfect fit" rule */
  object-fit: fill !important;

  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}
/* =====================================================
   REMOVE RIGHT-SIDE DARK EDGE ON COVERS
   (Keeps image perfectly flush to edge)
   ===================================================== */

/* Remove inset shadow that causes right edge darkness */
.fb-page.cover.hard-right{
  box-shadow: none !important;
}

/* Optional: keep left side clean too */
.fb-page.cover.hard-left{
  box-shadow: none !important;
}
/* =====================================================
   NUCLEAR COVER EDGE CLEANUP
   Removes ANY right-side dark band on covers
   (seam shadows + hard shadows + PageFlip shadows + image filter)
   ===================================================== */

/* 1) Kill any cover box-shadows (hard-left/right) */
.fb-page.cover,
.fb-page.cover.hard-left,
.fb-page.cover.hard-right{
  box-shadow: none !important;
}

/* 2) Kill seam shadows if they accidentally land on the cover */
.fb-page.cover.seam-left,
.fb-page.cover.seam-right{
  box-shadow: none !important;
}

/* 3) Ensure cover background is flat (no gradients leaking in) */
.fb-page.cover{
  background: #000 !important;   /* or #333 if you prefer */
  background-image: none !important;
}

/* 4) Remove the cover image filter that can darken edges */
.fb-page.cover .cover-img{
  filter: none !important;
}

/* 5) PageFlip library shadows (common class names) */
.stf__shadow,
.stf__hardShadow,
.stf__outerShadow,
.stf__innerShadow{
  display: none !important;
  opacity: 0 !important;
}

/* Some builds use generic shadow elements inside the flipbook */
#book-container [class*="shadow"],
#book [class*="shadow"]{
  box-shadow: none !important;
}