/* ==========================================================================
   Poolabook NEW flip reader (read_books_flip) — self-contained styles.
   Namespaced with #flip* so it never collides with the legacy reader.
   --flip-chrome = vertical space taken by the site header + top toolbar + bottom bar.
   Tune it to the live template once integrated.
   ========================================================================== */
/* Full-screen overlay, exactly like the legacy reader (#readerCon) — escapes the template's
   700px content column and covers the site chrome, showing only the kept teal toolbar. */
/* This stylesheet only loads on the flip-reader page, so locking page scroll here is safe. */
html, body { overflow:hidden !important; }
#flipReaderCon { --flip-accent:#4f9cf9; --flip-audio:#99e3dd; --flip-bar:#222831; --flip-txt:#e8eaed; --flip-muted:#9aa3ad;
  position:fixed; inset:0; z-index:99999999; overflow:hidden;
  display:flex; flex-direction:column; background:#2b2f36; color:var(--flip-txt); }

/* the reused top toolbar must sit in the flex column (global CSS makes #header absolute) */
#flipReaderCon #header { position:relative; width:100%; flex:0 0 auto; z-index:20; }

/* forms/share/share_email.php leaks a stray <img class="close"> OUTSIDE its popup, which lands as a
   direct child here. In this flex column it renders full-size and crushes #flipStage to 0 height
   (blank page for logged-in users). The real close buttons live inside .popup, so neutralise only
   the stray direct-child one. */
#flipReaderCon > .close { display:none !important; }

/* reading stage fills the space between the toolbar and the bottom bar */
#flipStage { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; touch-action:none; }
#flipBookZoom { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform-origin:center center; transition:transform .05s linear; will-change:transform; }
#flipBook { width:100%; transition:transform .7s ease-in-out; }  /* full width so StPageFlip detects landscape; smooth cover (un)centering */
#flipBook .page { background:#fff; overflow:hidden; }
#flipBook .page-content { position:relative; width:100%; height:100%; overflow:hidden; }
/* object-fit lets a page whose aspect differs from the (uniform) page box letterbox instead of being
   cropped or leaving a blank half — e.g. a square cover inside a wide spread book. */
#flipBook .page-content canvas { display:block; width:100%; height:100%; object-fit:contain; }
#flipReaderCon.flip-theme-dark #flipBook .page-content canvas { filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.95); }

/* PDF.js text layer — transparent but selectable, over the canvas */
#flipBook .textLayer { position:absolute; inset:0; overflow:hidden; line-height:1; z-index:2; }
#flipBook .textLayer span { position:absolute; white-space:pre; transform-origin:0 0; color:transparent; cursor:text; }
#flipBook .textLayer ::selection { background:rgba(79,156,249,.45); }
#flipBook .userHighlight { position:absolute; background:rgba(255,214,0,.42); z-index:1; pointer-events:none; border-radius:2px; }
#flipBook .pageNum { position:absolute; bottom:5px; inset-inline:0; text-align:center; font-size:11px; color:#9a9a9a; z-index:3; pointer-events:none; }
/* placeholder spinner shown on a page that hasn't been rendered yet (lazy rendering) */
#flipBook .pageSpin { position:absolute; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; border:3px solid rgba(0,0,0,.10); border-top-color:rgba(0,0,0,.42);
  animation:flipSpin .8s linear infinite; z-index:2; }
#flipReaderCon.flip-theme-dark #flipBook .pageSpin { border-color:rgba(255,255,255,.14); border-top-color:rgba(255,255,255,.5); }

#flipLoader { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:7;
  display:flex; flex-direction:column; align-items:center; gap:16px; color:#cfd6de; font-size:15px; text-align:center; }
.flipSpinner { width:48px; height:48px; border-radius:50%; border:4px solid rgba(255,255,255,.15);
  border-top-color:var(--flip-accent); animation:flipSpin .8s linear infinite; }
@keyframes flipSpin { to { transform:rotate(360deg); } }
#flipLoaderText { opacity:.85; font-variant-numeric:tabular-nums; }
#flipPanOverlay { position:absolute; inset:0; display:none; cursor:grab; z-index:5; touch-action:none; }
#flipPanOverlay.grabbing { cursor:grabbing; }
#flipZoomBadge { position:absolute; top:8px; inset-inline-end:10px; background:rgba(0,0,0,.55); color:#fff;
  font-size:12px; padding:4px 9px; border-radius:12px; z-index:6; opacity:0; transition:opacity .2s; pointer-events:none; }
#flipZoomBadge.show { opacity:1; }

/* thumbnails strip */
#flipThumbs { display:none; gap:8px; padding:10px 12px; background:#191d23; overflow-x:auto; align-items:center; border-top:1px solid #2c333d; }
#flipThumbs.show { display:flex; }
#flipThumbs .tlabel { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--flip-muted); }
#flipThumbs canvas { height:90px; width:auto; border:2px solid transparent; border-radius:3px; cursor:pointer; background:#fff; flex:0 0 auto; }
#flipThumbs canvas:hover { border-color:var(--flip-accent); }

/* bottom control bar — minimal, grouped, icon-based */
#flipBottomBar { flex:0 0 auto; height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; background:rgba(24,28,34,.97); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.06); box-shadow:0 -2px 12px rgba(0,0,0,.45); }
.flipGrp { display:flex; align-items:center; gap:9px; }
.flipNav { gap:2px; }

/* round icon buttons (nav, thumbnails) */
.flipIcon { width:38px; height:38px; border-radius:50%; border:none; background:transparent; color:#cfd6de;
  font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  transition:background .15s, color .15s; }
.flipIcon:hover { background:rgba(255,255,255,.09); color:#fff; }
.flipIcon.active { color:var(--flip-accent); }
.flipIcon svg { width:18px; height:18px; fill:currentColor; }
#flipPageInfo { min-width:66px; text-align:center; font-size:13px; color:#aeb6bf; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate; }

/* background swatches (white / black) */
.flipSwatch { width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(255,255,255,.28); transition:transform .1s, border-color .15s, box-shadow .15s; }
.flipSwatch.light { background:#fff; } .flipSwatch.dark { background:#1c1c1c; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.flipSwatch:hover { transform:scale(1.14); }
.flipSwatch.active { border-color:var(--flip-accent); box-shadow:0 0 0 2px rgba(79,156,249,.35); }

/* search — just a magnifier until clicked, then the field slides open (integrated, no box) */
.flipSearch { display:flex; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid transparent; transition:border-color .15s; }
.flipSearch.open { border-bottom-color:rgba(79,156,249,.55); }
.flipSearch svg { width:18px; height:18px; fill:#cfd6de; cursor:pointer; flex:0 0 auto; transition:fill .15s; }
.flipSearch.open svg, .flipSearch svg:hover { fill:var(--flip-accent); }
.flipSearch input { background:transparent; border:none; outline:none; color:#e8eaed; font-size:13px;
  width:0; padding:0; opacity:0; transition:width .22s ease, opacity .18s, padding .22s; }
.flipSearch.open input { width:140px; padding:0 4px; opacity:1; }
.flipSearch input::placeholder { color:#7c8590; }
#flipSearchInfo { font-size:11px; color:#7c8590; min-width:0; transition:min-width .2s; }
.flipSearch.open #flipSearchInfo { min-width:30px; }

/* single / double page toggle — the active mode is a filled accent pill */
.flipViewGroup { display:inline-flex; align-items:center; gap:4px; }
.flipViewGroup .flipIcon { width:34px; height:34px; border-radius:8px; color:var(--flip-muted); }
.flipViewGroup .flipIcon svg { width:19px; height:19px; }
.flipViewGroup .flipIcon:hover { color:#fff; }
.flipViewGroup .flipIcon.active { background:var(--flip-accent); color:#06121f; }

@media (max-width:600px) {
  #flipBottomBar { padding:0 10px; gap:6px; }
  .flipSearch input { width:84px; }
  #flipPageInfo { min-width:52px; font-size:12px; }
  .flipIcon { width:34px; height:34px; }
}

/* highlight floating button */
#flipHlFloat { position:fixed; display:none; z-index:140; background:var(--flip-accent); color:#06121f; border:none;
  border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.5); }

/* first-use hint (body-level overlay so it composites above the flip layer) */
#flipHint { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; z-index:300; pointer-events:none; transition:opacity .5s; }
#flipHint.hide { opacity:0; }
#flipHint .hand { font-size:46px; animation:flipSwipeHand 1.7s ease-in-out infinite; }
#flipHint .card { background:rgba(18,22,28,.86); color:#fff; padding:14px 22px; border-radius:14px; font-size:15px;
  text-align:center; line-height:1.6; box-shadow:0 8px 34px rgba(0,0,0,.55); max-width:80vw; }
#flipHint .card small { color:var(--flip-muted); font-size:12px; }
@keyframes flipSwipeHand { 0%{transform:translateX(46px) rotate(10deg);opacity:.35}
  50%{transform:translateX(-46px) rotate(-10deg);opacity:1} 100%{transform:translateX(46px) rotate(10deg);opacity:.35} }

#flipToast { position:fixed; bottom:70px; inset-inline-start:50%; transform:translateX(50%); background:var(--flip-accent);
  color:#06121f; padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600; opacity:0; transition:opacity .2s;
  pointer-events:none; max-width:80vw; z-index:130; text-align:center; }
#flipToast.show { opacity:1; }

/* padded blank cover backing */
#flipBook .page.blank { background:#fff; }

/* single-page mode (custom slider — no StPageFlip) */
#flipBook.single-mode { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.singleStage { position:relative; overflow:hidden; }
.singlePage { position:absolute; inset:0; background:#fff; will-change:transform; }

/* share dropdown — the legacy bubble styling is scoped to the old reader, so give it a clean
   bubble + a caret on TOP pointing up at the share icon (was an unstyled, transparent box). */
#flipReaderCon #readerShareBox { background:#fff !important; border-radius:10px !important; padding:7px 14px !important;
  box-shadow:0 6px 22px rgba(0,0,0,.35) !important; z-index:60; }
#flipReaderCon #readerShareBox::after { content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #fff; }

/* On touch devices the text layer must not swallow swipes, or page-flipping needs many tries.
   (Text selection / text-anchored highlights stay a desktop feature.) */
@media (hover: none) and (pointer: coarse) {
  #flipBook .textLayer { pointer-events: none; }
}

/* in-book search: a box drawn from the match's real client-rect, over the canvas glyphs but under
   the (transparent) text layer. Absolute, so it tracks the exact rendered position in any direction. */
#flipBook .flipSearchHit { position:absolute; z-index:1; pointer-events:none; background:rgba(255,205,0,.5);
  border-radius:2px; }

/* ======================= AUDIO (restyle the legacy SimpleAudioPlayer to fit the reader) ======= */
/* toggle button — smaller icon inside the same-size hit area, clear of the bottom bar */
#flipReaderCon .show_audio { width:40px !important; height:40px !important; bottom:72px !important;
  inset-inline-start:16px !important; inset-inline-end:auto !important; right:auto !important; left:16px !important;
  background-size:56% !important; background-repeat:no-repeat !important; background-position:center !important;
  z-index:60 !important; cursor:pointer; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* the player — a centred, rounded dark panel floating above the control bar (no edge borders) */
#flipReaderCon .simpleAudioPlayer { display:none !important; position:fixed !important; left:50% !important; right:auto !important;
  bottom:66px !important; transform:translateX(-50%); width:min(720px,94vw) !important; max-width:720px; height:auto !important;
  background:#1d2229 !important; color:var(--flip-txt) !important; border:none !important; border-radius:14px !important;
  box-sizing:border-box; padding:14px 22px 12px !important; box-shadow:0 10px 34px rgba(0,0,0,.55); z-index:55 !important; }
#flipReaderCon .simpleAudioPlayer.show { display:block !important; }   /* visibility driven by .show → X closes it */
#flipReaderCon .simpleAudioPlayer * { border:none !important; background-image:none !important; }
#flipReaderCon .simpleAudioPlayer .containerTop { width:100% !important; max-width:none !important; margin:0 !important; background:transparent !important; }
#flipReaderCon .simpleAudioPlayer .waves, #flipReaderCon .simpleAudioPlayer .containerBottom, #flipReaderCon .simpleAudioPlayer .hide { display:none !important; }
#flipReaderCon .simpleAudioPlayer .progressBar { position:relative; height:5px; background:rgba(255,255,255,.14) !important;
  border-radius:3px; cursor:pointer; margin:2px 0 10px !important; }
#flipReaderCon .simpleAudioPlayer .progressBarInner { background:var(--flip-audio) !important; height:100% !important; border-radius:3px; }
#flipReaderCon .simpleAudioPlayer .progressIndicator { width:13px !important; height:13px !important; background:var(--flip-audio) !important;
  border-radius:50%; top:50% !important; margin-top:-6.5px !important; box-shadow:0 0 0 4px rgba(153,227,221,.22); }
#flipReaderCon .simpleAudioPlayer .trackInfo { display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  font-size:12px; color:var(--flip-muted) !important; }
#flipReaderCon .simpleAudioPlayer .trackTitle { color:var(--flip-txt) !important; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
#flipReaderCon .simpleAudioPlayer .progressTime, #flipReaderCon .simpleAudioPlayer .durationTime { font-variant-numeric:tabular-nums; direction:ltr; }
#flipReaderCon .simpleAudioPlayer .controls { display:flex !important; align-items:center; justify-content:center; gap:18px; margin-top:10px;
  direction:ltr; }   /* media transport is universally LTR: rewind ◀◀ left, play centre, fast-forward ▶▶ right */
#flipReaderCon .simpleAudioPlayer .controls .col { width:auto !important; float:none !important; padding:0 !important; margin:0 !important;
  cursor:pointer; color:#cfd6de; display:flex !important; align-items:center; justify-content:center; }
#flipReaderCon .simpleAudioPlayer .controls .menuToggle { display:none !important; }
/* the library toggles .hide on play/pause — must beat the .col display:flex above */
#flipReaderCon .simpleAudioPlayer .controls .col.hide { display:none !important; }
#flipReaderCon .simpleAudioPlayer .controls .play, #flipReaderCon .simpleAudioPlayer .controls .pause {
  width:46px !important; height:46px !important; border-radius:50%; background:var(--flip-audio) !important; }   /* header-strip teal */
#flipReaderCon .simpleAudioPlayer .controls .play:hover, #flipReaderCon .simpleAudioPlayer .controls .pause:hover { filter:brightness(.93); }
/* draw play/pause as crisp CSS shapes (the icon font glyph renders inconsistently). Use PHYSICAL
   margins so the glyph stays optically centred in the circle regardless of the page's RTL direction. */
#flipReaderCon .simpleAudioPlayer .controls .play .icon, #flipReaderCon .simpleAudioPlayer .controls .pause .icon { display:none !important; }
#flipReaderCon .simpleAudioPlayer .controls .play::before { content:''; width:0; height:0; border-style:solid;
  border-width:9px 0 9px 15px; border-color:transparent transparent transparent #11303a; margin-left:4px; }
#flipReaderCon .simpleAudioPlayer .controls .pause::before { content:''; width:5px; height:16px; background:#11303a;
  box-shadow:8px 0 0 #11303a; margin-left:-4px; }
/* skip-back / skip-forward (±10s) + stop — icon font isn't loaded, so draw them as shapes too.
   The .col is already flex-centred, so ::before + ::after sit centred side-by-side. */
#flipReaderCon .simpleAudioPlayer .controls .backward, #flipReaderCon .simpleAudioPlayer .controls .forward,
#flipReaderCon .simpleAudioPlayer .controls .stop { width:34px !important; height:34px !important; border-radius:50%; gap:2px; }
#flipReaderCon .simpleAudioPlayer .controls .backward .icon, #flipReaderCon .simpleAudioPlayer .controls .forward .icon,
#flipReaderCon .simpleAudioPlayer .controls .stop .icon { display:none !important; }
#flipReaderCon .simpleAudioPlayer .controls .forward::before, #flipReaderCon .simpleAudioPlayer .controls .forward::after {
  content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 9px; border-color:transparent transparent transparent #cfd6de; }
#flipReaderCon .simpleAudioPlayer .controls .backward::before, #flipReaderCon .simpleAudioPlayer .controls .backward::after {
  content:''; width:0; height:0; border-style:solid; border-width:6px 9px 6px 0; border-color:transparent #cfd6de transparent transparent; }
#flipReaderCon .simpleAudioPlayer .controls .stop::before { content:''; width:12px; height:12px; background:#cfd6de; border-radius:2px; }
#flipReaderCon .simpleAudioPlayer .controls .backward:hover, #flipReaderCon .simpleAudioPlayer .controls .forward:hover,
#flipReaderCon .simpleAudioPlayer .controls .stop:hover { background:rgba(255,255,255,.09) !important; }
#flipReaderCon .simpleAudioPlayer .controls .forward:hover::before, #flipReaderCon .simpleAudioPlayer .controls .forward:hover::after { border-left-color:#fff; }
#flipReaderCon .simpleAudioPlayer .controls .backward:hover::before, #flipReaderCon .simpleAudioPlayer .controls .backward:hover::after { border-right-color:#fff; }
#flipReaderCon .simpleAudioPlayer .controls .stop:hover::before { background:#fff; }