/* ============================================
   FLIPBOOK GADGET – Styles for turn.js
   ============================================ */

/* ── Variables ────────────────────────────────────────────────────── */
.flipbook-gadget {
  --fb-w:      860px;
  --fb-bg:     #ede8e0;
  --fb-page:   #faf7f2;
  --fb-ink:    #4a4640;
  --fb-border: rgba(0,0,0,.10);
  --fb-shadow: rgba(0,0,0,.22);

  position: relative;
  width: 100%;
  max-width: var(--fb-w);
  margin: 2rem auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Wrapper ──────────────────────────────────────────────────────── */
.flipbook-gadget .fb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Stage ────────────────────────────────────────────────────────── */
.flipbook-gadget .fb-stage {
  width: 100%;
  max-width: var(--fb-w);
  aspect-ratio: 860 / 560;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fb-bg);
  border-radius: 8px;
  border: 1px solid var(--fb-border);
  box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 14px 40px var(--fb-shadow);
  overflow: hidden;
  position: relative;
}

/* ── The turn.js book container ───────────────────────────────────── */
.flipbook-gadget .fb-book {
  position: relative;
  margin: 0 auto;
}

/* ── Individual pages (inside turn.js) ────────────────────────────── */
.flipbook-gadget .fb-page {
  background: var(--fb-page);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hard covers (first and last page) */
.flipbook-gadget .fb-page.hard {
  background: var(--fb-page);
}

/* Page image — fills the page area */
.flipbook-gadget .fb-page-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.flipbook-gadget .fb-page-img.fb-loaded {
  opacity: 1;
}

/* Tiny spinner shown while a page renders */
.flipbook-gadget .fb-page-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.flipbook-gadget .fb-page-img.fb-loaded ~ .fb-page-loader {
  display: none;
}
.flipbook-gadget .fb-spin {
  width: 22px; height: 22px;
  border: 2px solid rgba(74,70,64,.12);
  border-top-color: var(--fb-ink);
  border-radius: 50%;
  animation: fb-spin .7s linear infinite;
}

/* turn.js adds .page class — we style it */
.flipbook-gadget .page {
  background: var(--fb-page);
  box-shadow: inset 0 0 4px rgba(0,0,0,.05);
}

/* turn.js page wrapper overflow (needed for the fold effect) */
.flipbook-gadget .page-wrapper {
  /* turn.js sets inline styles, we just make sure nothing leaks */
}

/* Subtle page border */
.flipbook-gadget .even .page {
  border-left: 1px solid rgba(0,0,0,.06);
}
.flipbook-gadget .odd .page {
  border-right: 1px solid rgba(0,0,0,.06);
}

/* ── Controls ────────────────────────────────────────────────────── */
.flipbook-gadget .fb-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 0 2px;
  flex-wrap: wrap;
}

.flipbook-gadget .fb-btn {
  background: none;
  border: 1.5px solid #c5bdb4;
  color: var(--fb-ink);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  transition: all .18s ease;
}
.flipbook-gadget .fb-btn:hover:not(:disabled) {
  border-color: #8a7f76;
  color: #1a1614;
  background: rgba(0,0,0,.04);
  transform: scale(1.08);
}
.flipbook-gadget .fb-btn:disabled { opacity: .22; cursor: not-allowed; }

.flipbook-gadget .fb-info {
  font-size: 12px; color: #9a9088;
  min-width: 148px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Static screens (loading / empty / error) ────────────────────── */
.flipbook-gadget .fb-static {
  width: 100%; max-width: var(--fb-w);
  aspect-ratio: 860 / 560;
  background: var(--fb-bg);
  border-radius: 8px;
  border: 1px solid var(--fb-border);
  box-shadow: 0 14px 40px var(--fb-shadow);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--fb-ink); gap: 0;
  padding: 2rem; text-align: center;
}
.flipbook-gadget .fb-spinner {
  width: 34px; height: 34px;
  border: 2.5px solid rgba(74,70,64,.14);
  border-top-color: var(--fb-ink);
  border-radius: 50%;
  animation: fb-spin .8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
.flipbook-gadget .fb-load-text { margin-top: 12px; font-size: 13px; opacity: .65; }
.flipbook-gadget .fb-prog-bar {
  width: 160px; height: 3px;
  background: rgba(74,70,64,.12);
  border-radius: 2px; margin-top: 12px; overflow: hidden;
}
.flipbook-gadget .fb-prog-fill {
  height: 100%; width: 0%;
  background: var(--fb-ink);
  border-radius: 2px; transition: width .3s ease;
}
.flipbook-gadget .fb-static-icon { font-size: 42px; opacity: .4; margin-bottom: 12px; }
.flipbook-gadget .fb-static-msg { font-size: 14px; line-height: 1.65; color: #6e6860; }
.flipbook-gadget .fb-static-msg code {
  background: rgba(0,0,0,.07);
  padding: 1px 5px; border-radius: 3px; font-size: .88em;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .flipbook-gadget { --fb-w: 100%; }
  .flipbook-gadget .fb-stage { aspect-ratio: 4/3; border-radius: 4px; }
  .flipbook-gadget .fb-btn   { width: 32px; height: 32px; font-size: 14px; }
  .flipbook-gadget .fb-info  { font-size: 11px; min-width: 110px; }
  .flipbook-gadget .fb-controls { gap: 5px; }
}