/* BookFlip section - all rules are scoped to .bookflip so they cannot affect the host page. */
.bookflip {
  --bf-bg: #1b1d24; --bf-bg2: #2b2f3a; --bf-accent: #e8590c; --bf-text: #f1f3f5;
  --bf-radius: 16px; --bf-height: min(88vh, 820px);
  position: relative; display: flex; flex-direction: column; box-sizing: border-box;
  width: 100%; height: var(--bf-height); min-height: 440px; margin: 0 auto; overflow: hidden;
  border-radius: var(--bf-radius);
  background: radial-gradient(circle at 50% 30%, var(--bf-bg2) 0%, var(--bf-bg) 70%);
  color: var(--bf-text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.4;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline: none;
}
.bookflip *, .bookflip *::before, .bookflip *::after { box-sizing: border-box; }

.bookflip .bf-head { flex: none; text-align: center; padding: 14px 12px 4px; }
.bookflip .bf-title { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: .3px; color: var(--bf-text); }
.bookflip .bf-hint { margin: 3px 0 0; font-size: .82rem; opacity: .65; }

/* Stage that holds the flip book. pan-y = the visitor can still scroll the page vertically over it */
.bookflip .bf-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; touch-action: pan-y; }
.bookflip .bf-book { visibility: hidden; filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
.bookflip .bf-book.bf-ready { visibility: visible; }
.bookflip .bf-book.bf-anim { transition: transform .7s cubic-bezier(.4,.1,.2,1); }
.bookflip .bf-page { background: #fff; overflow: hidden; }
.bookflip .bf-page img { width: 100%; height: 100%; display: block; max-width: none; margin: 0; pointer-events: none; -webkit-user-drag: none; }

/* phone "go back" swing */
.bookflip .bf-flipback { position: absolute; perspective: 1600px; pointer-events: none; z-index: 5; }
.bookflip .bf-flipback .bf-dim { position: absolute; inset: 0; background: #000; opacity: 0; }
.bookflip .bf-flipback .bf-leaf { position: absolute; inset: 0; background-size: 100% 100%; background-color: #fff;
  transform-origin: left center; backface-visibility: hidden; box-shadow: 0 0 30px rgba(0,0,0,.45); }

/* built-in "buy the book" last page */
.bookflip .bf-buypage { background: linear-gradient(160deg, #fff, #fff3e8); }
.bookflip .bf-bp { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12%; color: #1f2a44; font-family: system-ui, sans-serif; }
.bookflip .bf-bp .bf-lock { font-size: 2.6em; margin-bottom: .3em; line-height: 1; }
.bookflip .bf-bp .bf-bp-title { margin: 0 0 .6em; font-size: 1.7em; font-weight: 700; line-height: 1.2; color: #1f2a44; }
.bookflip .bf-bp .bf-bp-text { margin: 0; font-size: 1em; line-height: 1.55; color: #555; }

/* loader / error */
.bookflip .bf-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.bookflip .bf-spin { width: 42px; height: 42px; border: 4px solid #444; border-top-color: var(--bf-accent); border-radius: 50%; animation: bf-spin 1s linear infinite; }
@keyframes bf-spin { to { transform: rotate(360deg); } }
.bookflip .bf-status.bf-error { color: #ffb4a2; line-height: 1.5; }
.bookflip .bf-status.bf-error .bf-spin { display: none; }

/* controls */
.bookflip .bf-controls { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 10px 10px 14px; }
.bookflip .bf-nav { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; background: #2d313c; color: var(--bf-text); border: 0; width: 46px; height: 46px; border-radius: 50%; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s, opacity .2s; }
.bookflip .bf-nav:hover:not(:disabled) { background: #3b4050; }
.bookflip .bf-nav:disabled { opacity: .3; cursor: default; }
.bookflip .bf-counter { min-width: 70px; text-align: center; font-size: .9rem; opacity: .8; white-space: nowrap; }
.bookflip .bf-buy { display: none; background: var(--bf-accent); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 24px; border-radius: 30px; font-size: 1rem; box-shadow: 0 6px 18px rgba(232,89,12,.45); animation: bf-pop .5s ease; }
.bookflip .bf-buy.bf-show { display: inline-block; flex-basis: 100%; max-width: 280px; text-align: center; }
@keyframes bf-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-height: 520px) and (orientation: landscape) {
  .bookflip .bf-head { padding: 6px 12px 0; } .bookflip .bf-hint { display: none; } .bookflip .bf-title { font-size: 1rem; }
  .bookflip .bf-controls { padding: 4px 10px 6px; gap: 10px; }
  .bookflip .bf-nav { width: 40px; height: 40px; }
  .bookflip .bf-buy.bf-show { flex-basis: auto; padding: 9px 18px; font-size: .9rem; }
  .bookflip .bf-stage { padding: 4px; }
}