/* ===== PDF Flipbook ===== */

.detail-pdf-flipbook {
  width: 100%; background: #f5f5f5;
}
.flipbook-inline {
  position: relative; width: 100%; max-width: 900px;
  margin: 0 auto;
}

/* Two-page spread */
.flipbook-spread {
  display: flex; width: 100%;
  min-height: 400px; max-height: 70vh;
  background: #e5e5e5;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.flipbook-page-left,
.flipbook-page-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  min-height: 400px; max-height: 70vh;
}
.flipbook-page-left {
  border-right: 2px solid rgba(0,0,0,0.08);
}
.flipbook-page-left::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 40px; pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
}
.flipbook-page-right::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 40px; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
}
.flipbook-page-left canvas,
.flipbook-page-right canvas {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
.flipbook-page-left canvas { margin-left: auto; }
.flipbook-page-right canvas { margin-right: auto; }

/* Nav bar */
.flipbook-inline .flipbook-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 12px 0 8px;
}
.flipbook-nav button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #d1d5db; background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #374151; transition: all .2s;
}
.flipbook-nav button:hover { background: #f3f4f6; border-color: #9ca3af; }
.flipbook-nav button:disabled { opacity: .3; cursor: default; }
.flipbook-page-num {
  font-size: 13px; font-family: 'Inter', sans-serif;
  color: #6b7280; min-width: 60px; text-align: center;
}

/* Progress bar */
.flipbook-progress {
  width: 100%; height: 4px; background: #e5e7eb;
  border-radius: 2px; overflow: hidden; margin-bottom: 8px;
}
.flipbook-progress-fill {
  height: 100%; width: 0; background: #6366f1;
  border-radius: 2px; transition: width 0.2s ease;
}