/**
 * "Studio Light" — Pro-exclusive skin for the bundled 3dflipbook viewer.
 *
 * Targets the template the library actually renders (the one embedded in
 * vendor/3dflipbook/js/simple-jquery-pdf.js: .main > .widControls .tbox
 * .widToolbar, .float-wnd > .head/.body), not the static
 * templates/default-book-view.html file sitting next to it, which uses a
 * different, older structure (.ctrl .fnavbar) and is never loaded.
 *
 * Layered over the vendor's short-black base skin: the free plugin's
 * frontend.js always builds the skin URL from its own vendor directory, so a
 * Pro skin can't be handed over as the skin file itself — see
 * Frontend_Hooks::filter_frontend_localize_data(). Selectors are prefixed
 * `body ` so they outrank the base skin, which the library injects as a
 * <style> after this file's <link>.
 *
 * The toolbar itself is replaced wholesale by assets/js/flipa-toolbar.js and
 * styled in flipa-toolbar.css; what remains here is the surrounding chrome —
 * the stage, the floating panels and the loading state.
 */

/* ================================================================ stage == */

/* A column flex layout, not the vendor's default (.main{position:relative;
   height:100%}, .view{height:100%}, .tbox{position:absolute;bottom:10px}) —
   that combination puts the toolbar directly on top of the book, since .tbox
   floats over a .view that already claims the full height.

   .view and .widControls are wrapped in a new .pdfev-fx-stage
   (flipa-toolbar.js's build(), before it builds the bar) rather than left as
   direct children of .main: .ctrls .prev/.next (the side-arrow circles) are
   position:absolute with top:50%, resolved against the nearest
   position:relative ancestor. If that stayed .main once the bar is a real
   flex sibling below, .main's height would cover the book AND the bar
   together, so 50% would center the arrows below the book's true middle by
   roughly half the bar's height. Giving .view + .widControls their own
   position:relative wrapper, sized to just the book's own area, keeps that
   50% scoped to the book regardless of how tall the bar underneath ends up
   being.

   position:relative on .main is kept: .float-wnd (TOC/Share/loading) panels
   are position:absolute and still need .main as their containing block, and
   an absolutely-positioned element is excluded from flex layout entirely, so
   they're unaffected by any of this either way. */
body .main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  /* Lets flipa-toolbar.css's toolbar collapse itself with a @container
     query keyed to this flipbook's own box (its embed width), not the page
     viewport — a hero-demo-sized embed on an otherwise-wide desktop page
     needs the compact layout just as much as an actually-narrow phone
     screen does, and a plain @media query can't tell those apart. */
  container-type: inline-size;
}

/* Its own card, not just a flex region that happens to sit above the bar —
   a real background + rounded corners + overflow:hidden, separated from
   the toolbar below by .main's gap rather than sharing an edge with it.
   overflow:hidden also contains the book itself to this card: the vendor
   renders page text as real (CSS3D-transformed) DOM, not only canvas, and a
   page whose natural framing is taller/wider than the stage would otherwise
   paint past this box's edges instead of stopping at them. */
/* No padding here (reverted — see git history): the vendor sizes its
   WebGL/CSS3D renderer, AND maps drag/flip pointer coordinates, off this
   box's own measured size (VisualWorld's sizing + Drag.setCoordsFromEvent
   in flip-book.js). Padding shrinks the book to leave room, which also
   shrinks the actual corner-drag hit area — traded a "book touches the
   stage edge" cosmetic issue for real page-turn interaction reliability,
   which matters more. If headroom is wanted again, it needs to come from
   the outer container's own aspect-ratio height (pdf-embed-viewer's
   .pdfev-3dbook-container), not from squeezing .view's own box. */
body .main .pdfev-fx-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 12px;
  background: var(--fx-chrome-bg, transparent);
  /* No border by default (was a hardcoded 1px var(--fx-line)) — controllable
     from the admin's Stage Border setting; see the --fx-stage-border inline
     override in flipa-toolbar.js's build(). */
  border: var(--fx-stage-border, none);
}

/* Rounding + clipping live here (the book's actual content wrapper), not on
   .pdfev-fx-stage above: a rounded box that both draws a border AND clips
   an edge-to-edge, real-3D (CSS3D-transformed, GPU-composited) child is a
   known cross-browser sore spot — the child's own compositing layer can
   bleed a sub-pixel past the parent's clip on one side, painting straight
   over that side's border (reported as the right border going missing once
   a border color was set — the same class of bug already fixed the same
   way for pdf-embed-viewer's .pdfev-3dbook-container). Splitting the two
   responsibilities avoids the fight — the border on .pdfev-fx-stage is
   never clipped by anything, so it always paints on all four sides. */
body .main .view {
  height: 100%;
  text-align: center;
  overflow: hidden;
  border-radius: inherit;
}

/* .widControls sits after .view in plain block flow inside .pdfev-fx-stage
   (not itself display:flex) — it collapses to ~0px on its own regardless,
   since .prev/.next/.tbox, its only children, are each position:absolute
   and don't contribute to its height. Its children still resolve that
   position against .pdfev-fx-stage correctly either way, since that's the
   nearest position:relative ancestor, not .widControls itself. */

/* ============================================== floating panels (light) == */

body .float-wnd {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 20px 45px -16px rgba(17, 24, 39, 0.18);
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body .float-wnd .head {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
}

body .float-wnd .head .close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #9ca3af;
  cursor: pointer;
}

body .float-wnd .head .close:hover {
  color: #111827;
}

body .float-wnd .body {
  background: #ffffff;
  border-radius: 0 0 12px 12px;
}

/* Tab row inside the table-of-contents panel. */
body .h-menu.widTocMenu {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  border-bottom: 1px solid #e5e7eb;
}

body .h-menu.widTocMenu li {
  margin: 0;
}

body .h-menu.widTocMenu a {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

body .h-menu.widTocMenu a:hover {
  background: #f3f4f6;
  color: #111827;
}

body .h-menu.widTocMenu .active a,
body .h-menu.widTocMenu a.active {
  background: #eff4ff;
  color: #2563eb;
}

body .tocview {
  padding: 10px;
  max-height: 70vh;
  overflow-y: auto;
  color: #111827;
}

body .tocview a {
  color: #111827;
  text-decoration: none;
}

body .tocview::-webkit-scrollbar {
  width: 8px;
}

body .tocview::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

body .tocview::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ================================================================ share == */

body .widShare .txtShareLink {
  word-break: break-all;
}

body .widShare .btns .btn {
  color: #111827;
  text-decoration: none;
}

/* ============================================================== loading == */

body .loading-progress .caption,
body .txtLoadingProgress {
  padding: 7px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-style: normal;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
}

body .user-message {
  padding: 8px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13px;
}

/* The vendor keeps this container permanently in the DOM (it only ever
   toggles the text inside it, never removes/hides the wrapper itself) — so
   with no error message queued, it's an empty element that the rule above
   still paints as a solid white rounded box, sitting wherever the vendor
   positions it over the page. Suppress it whenever it has no actual message
   to show. */
body .user-message:empty {
  display: none;
}

/* The plain white box during loading and page turns: the vendor's own
   ::after-based spinner (background-image: url('../images/...-loader.gif'))
   points at files the bundle doesn't ship, 404ing every time — but the actual
   template swaps that out for the free plugin's own animated book preloader
   (.pdfev-preloader > .book-frame, styled in frontend.css under
   `.pdfev-embed-viewer .pdfev-preloader`). That ancestor class lives on the
   wrapper OUTSIDE the iframe the library renders everything into, so inside
   the iframe those rules never match — the preloader's divs render with no
   size or color at all, i.e. nothing, while the vendor's own ::after still
   generates its (now blank) box behind them. Suppress the vendor ::after
   outright and restyle the real preloader here, ancestor-free, to match this
   skin. */
body .loading-progress .progress::after,
body .page-loading::after {
  content: none;
}

/* .page-loading is the vendor's PER-PAGE (mid-read) loading indicator, a
   separate element from .loading-progress (the initial book-open one) but
   sharing the same .pdfev-preloader mini book-flip animation. It can sit
   anywhere on the page — wherever the reader's viewport/cursor happens to
   be — and its "hidden" class doesn't always stick, so it can appear as an
   unexplained white box mid-page. The initial-load spinner is wanted; this
   one reads as a stray artifact, so it's suppressed outright. */
body .page-loading {
  display: none !important;
}

body .pdfev-preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

body .pdfev-preloader .book-frame {
  width: 60px;
  height: 50px;
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: transparent;
  perspective: 400px;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
}

body .pdfev-preloader .book-frame .left-page,
body .pdfev-preloader .book-frame .right-page {
  width: 50%;
  height: 100%;
  background: #f9fafb;
  position: absolute;
  top: 0;
}

body .pdfev-preloader .book-frame .left-page {
  left: 0;
  border-right: 1px solid #e5e7eb;
}

body .pdfev-preloader .book-frame .right-page {
  right: 0;
  border-left: 1px solid #e5e7eb;
}

body .pdfev-preloader .book-frame .flipping-page {
  width: 50%;
  height: 100%;
  background: #ffffff;
  border-left: 1px solid #2563eb;
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: left center;
  box-shadow: -2px 0 5px rgba(37, 99, 235, 0.12);
  animation: pdfev-fx-book-flip 1.5s ease-in-out infinite;
}

body .pdfev-preloader .book-frame .page-2 {
  animation-delay: 0.3s;
}

body .pdfev-preloader .book-frame .page-3 {
  animation-delay: 0.6s;
}

@keyframes pdfev-fx-book-flip {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: rotateY(-150deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}