/* ============================================================
   cssflipbook.css — drop-in PDF flipbook widget styles
   Usage:
     <link rel="stylesheet" href="cssflipbook.css">
     <script src="cssflipbook.js"></script>
     <div class="cssflipbook" source="/path/to/file.pdf"></div>
   All styles are scoped under .cssflipbook — safe to include
   on any page without affecting other elements.
   ============================================================ */

.cssflipbook{
  position:relative;
  width:100%;
  background:radial-gradient(ellipse at top,#1E293B,#0F172A 75%);
  border-radius:12px;
  overflow:hidden;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.cssflipbook,.cssflipbook *{box-sizing:border-box}

/* ---------- loading / error message ---------- */
.cssflipbook .cfb-msg{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  color:#94A3B8;font-size:14px;line-height:1.6;padding:20px;z-index:60;
}
.cssflipbook .cfb-msg code{color:#FBBF24;word-break:break-all;font-size:12px}
.cssflipbook .cfb-bar{
  width:220px;height:6px;border-radius:3px;background:rgba(255,255,255,.1);
  overflow:hidden;margin-top:14px;
}
.cssflipbook .cfb-bar i{
  display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,#2563EB,#FBBF24);
  animation:cfb-slide 1.1s infinite;
}
@keyframes cfb-slide{0%{margin-left:-40%}100%{margin-left:100%}}

/* ---------- book ---------- */
.cssflipbook .cfb-book{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  perspective:2600px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.5));
}
.cssflipbook .cfb-spine{
  position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-1px);
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55),rgba(0,0,0,.35));
  z-index:5;pointer-events:none;
}
.cssflipbook .cfb-book.cfb-single .cfb-spine{display:none}

.cssflipbook .cfb-sheet{
  position:absolute;top:0;right:0;height:100%;width:50%;
  transform-style:preserve-3d;transform-origin:left center;
  transition:transform .9s cubic-bezier(.3,.1,.25,1);will-change:transform;
}
.cssflipbook .cfb-book.cfb-single .cfb-sheet{width:100%;transition-duration:.65s}
.cssflipbook .cfb-sheet.cfb-flipped{transform:rotateY(-180deg)}
.cssflipbook .cfb-sheet.cfb-gone{visibility:hidden}

.cssflipbook .cfb-face{
  position:absolute;inset:0;background:#fff;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.cssflipbook .cfb-front{border-radius:0 6px 6px 0}
.cssflipbook .cfb-back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
.cssflipbook .cfb-book.cfb-single .cfb-front,
.cssflipbook .cfb-book.cfb-single .cfb-back{border-radius:6px}
.cssflipbook .cfb-front::after,
.cssflipbook .cfb-back::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,0) 12%);
}
.cssflipbook .cfb-book.cfb-single .cfb-front::after{background:none}
.cssflipbook .cfb-back::after{background:linear-gradient(-90deg,rgba(0,0,0,.12),rgba(0,0,0,0) 12%)}
.cssflipbook .cfb-face canvas{width:100%;height:100%;display:block}
.cssflipbook .cfb-blank{
  background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 12px,#f1f5f9 12px,#f1f5f9 24px);
}

/* ---------- click zones ---------- */
.cssflipbook .cfb-zone{position:absolute;top:0;height:100%;width:22%;z-index:40;cursor:pointer}
.cssflipbook .cfb-zone-prev{left:0}
.cssflipbook .cfb-zone-next{right:0}

/* ---------- arrows ---------- */
.cssflipbook .cfb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(30,41,59,.85);border:1px solid rgba(255,255,255,.15);
  color:#E2E8F0;font-size:18px;line-height:1;cursor:pointer;z-index:45;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,opacity .15s;padding:0;
}
.cssflipbook .cfb-arrow:hover{background:#2563EB;color:#fff}
.cssflipbook .cfb-arrow:disabled{opacity:.2;cursor:not-allowed}
.cssflipbook .cfb-prev{left:10px}
.cssflipbook .cfb-next{right:10px}

/* ---------- page badge + fullscreen ---------- */
.cssflipbook .cfb-badge{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:rgba(15,23,42,.8);color:#E2E8F0;font-size:12px;
  padding:4px 12px;border-radius:999px;z-index:50;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cssflipbook .cfb-badge b{color:#FBBF24;font-weight:600}
.cssflipbook .cfb-fs{
  position:absolute;top:10px;right:10px;z-index:50;
  background:rgba(30,41,59,.85);border:1px solid rgba(255,255,255,.15);
  color:#E2E8F0;border-radius:8px;padding:5px 9px;font-size:13px;cursor:pointer;
}
.cssflipbook .cfb-fs:hover{border-color:#FBBF24;color:#FBBF24}
.cssflipbook .cfb-title{
  position:absolute;top:10px;left:10px;z-index:50;max-width:60%;
  background:rgba(15,23,42,.8);color:#E2E8F0;font-size:12px;font-weight:600;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

/* ---------- small containers / phones ---------- */
@media (max-width:700px){
  .cssflipbook{border-radius:8px}
  .cssflipbook .cfb-arrow{width:34px;height:34px;font-size:15px;background:rgba(30,41,59,.65)}
  .cssflipbook .cfb-prev{left:4px}
  .cssflipbook .cfb-next{right:4px}
  .cssflipbook .cfb-zone{width:26%}
}