/**
 * Studio viewer chrome — styles for the Pro toolbar built by
 * assets/js/flipa-toolbar.js.
 *
 * The vendor toolbar stays in the DOM (its anchors are what actually run the
 * commands) but is visually removed, and the new bar is rendered in its
 * place. Scoped under .pdfev-fx-ready, which the script only adds once it has
 * successfully built the replacement — so if it ever bails, the original
 * toolbar is still visible and usable rather than the viewer losing its
 * controls entirely.
 */

.pdfev-fx-ready {
  --fx-surface: #ffffff;
  --fx-ink: #111827;
  --fx-muted: #6b7280;
  --fx-line: #e5e7eb;
  --fx-hover: #f3f4f6;
  --fx-accent: #2563eb;
  /* Book stage + toolbar bar background — separate from --fx-hover (which
     stays the button/menu-item resting/hover feedback color) so setting one
     doesn't wash out the other. Transparent by default; the admin "Toolbar &
     Panel Background" setting overrides this inline when set. */
  --fx-chrome-bg: transparent;
  /* A button's own resting background, distinct from --fx-hover (its hover
     state) — in light mode --fx-hover (#f3f4f6) was too close to the page's
     own off-white background for a button to read as a button at rest;
     white gives it real contrast. */
  --fx-btn-bg: #ffffff;
}

/* Hide the vendor toolbar's own buttons, but keep them measurable/clickable:
   display:none would stop .click() reaching some of them in older jQuery
   paths, so take them out of flow instead. */
.pdfev-fx-ready .widToolbar > .buttons {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* The .buttons rule above only clips the button list — the .widToolbar
   wrapper around it still carries the vendor skin's own background/border,
   so it collapses to a small but visible dark box (the "dot" below the
   stage) instead of disappearing with its children. Strip its own paint
   without touching layout/clickability. */
.pdfev-fx-ready .widToolbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The moved page inputs must stay interactive inside the new bar. */
.pdfev-fx-ready .pdfev-fx-pages {
  pointer-events: auto;
}

/* ============================================================== the bar == */

/* .tbox itself is now only ever home to the vendor's own hidden toolbar —
   the real bar moved out to be a plain sibling of .view (see build() in
   flipa-toolbar.js and the .main flex layout in premium-book-view.css), so
   it no longer overlaps the book. This full-bleed sizing stays for whatever
   of the vendor's own markup is still in there. */
.pdfev-fx-ready .tbox {
  left: 0;
  right: 0;
  bottom: 0;
}
/* A plain flex-flow sibling of .view now (appended to .main itself in
   flipa-toolbar.js's build(), not into the vendor's absolutely-positioned
   .tbox) — flex:none keeps it sized to its own content rather than
   stretching or shrinking along .main's column axis. pointer-events:all is
   no longer strictly required now that it's outside .tbox's
   pointer-events:none subtree, but costs nothing to keep as a second
   guarantee.

   Its own detached card — corners on every side, not just border-top —
   since .main's flex gap (premium-book-view.css) now puts real space
   between this and the book stage above it, rather than the two sharing an
   edge. Left on .main's default align-items:stretch (no align-self/width
   override) so it matches .pdfev-fx-stage's own width exactly — the two
   cards need to line up edge-to-edge, not have the bar shrink to its own
   button row while the stage stays full width. Background matches
   --fx-chrome-bg, the exact token .pdfev-fx-stage's own background uses
   (premium-book-view.css), so the two cards read as the same surface rather
   than two different tones; no border of its own for the same reason — the
   stage keeps its border, this one relies on the gap between them for
   separation instead. */
.pdfev-fx-bar {
  flex: none;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: var(--fx-chrome-bg);
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pdfev-fx-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}

.pdfev-fx-divider {
  width: 1px;
  height: 22px;
  margin: 0 8px;
  background: var(--fx-line);
}

/* ============================================================== buttons == */

/* A visible resting background on every icon button, not just on hover — so
   the whole row reads as one consistent set of controls (first/prev/next/
   last, single/spread, thumbnails, zoom, fullscreen, overflow) rather than
   the pagination cluster looking finished and everything else looking bare. */
.pdfev-fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border: 0;
  border-radius: 10px;
  background: var(--fx-btn-bg);
  color: var(--fx-ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pdfev-fx-btn:hover {
  background: var(--fx-line);
}

.pdfev-fx-btn:focus-visible {
  outline: 2px solid var(--fx-accent);
  outline-offset: 1px;
}

.pdfev-fx-btn.is-active {
  background: var(--fx-hover);
  color: var(--fx-accent);
}

.pdfev-fx-btn.is-disabled {
  color: #c9ced6;
  cursor: default;
}

.pdfev-fx-btn.is-disabled:hover {
  background: var(--fx-hover);
}

.pdfev-fx-btn.is-gone,
.pdfev-fx-menu-item.is-gone {
  display: none;
}

.pdfev-fx-pagebtn.is-disabled {
  opacity: 0.45;
}

/* ========================================================= page controls == */

.pdfev-fx-pages {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
}

.pdfev-fx-ready .pdfev-fx-pages .pages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
}

.pdfev-fx-ready .pdfev-fx-pages .inpPage {
  width: 44px;
  height: 30px;
  padding: 0 16px 0 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  /* !important on color + background: the vendor's base skin has its own
     same-specificity ".ctrl .pages .number, .ctrl .pages .amount" rule
     (three classes, same as ours) fixing color:#000/background-color:#ccc
     on BOTH page-number inputs, injected into the iframe as a <style>
     AFTER this stylesheet's <link> — same specificity + later wins, so
     without this it silently overrode ours. Only showed up visibly in dark
     mode: our light --fx-ink text landed on the vendor's pale fixed
     background instead of our dark --fx-surface, unreadable. */
  color: var(--fx-ink) !important;
  background: var(--fx-surface) !important;
  border: 1px solid var(--fx-line);
  border-radius: 7px;
  /* The vendor's base skin puts its own inset box-shadow on .number inputs
     (a class this one keeps) — harmless here since our own opaque
     background/border already cover it, but reset for a clean edge. */
  box-shadow: none;
  /* The same vendor rule also transitions background-color — on a plain
     page load that's a harmless 150ms fade, but the vendor's own JS
     rewrites this input's value on every page turn, and if that touches it
     again before the fade finishes the color can end up visibly stuck
     mid-transition rather than settled on our --fx-surface. Not a fade we
     need on our own repaint anyway. */
  transition: none !important;
}

.pdfev-fx-ready .pdfev-fx-pages .inpPage:focus {
  outline: none;
  border-color: var(--fx-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* The vendor's page box is type="text", so it has no native number-input
   spinner — this pair (added in pageInputs(), flipa-toolbar.js) sits over
   its right edge, each button driving goToPage() rather than the input. */
.pdfev-fx-spin {
  display: inline-flex;
  flex-direction: column;
  margin-left: -18px;
  width: 14px;
}

.pdfev-fx-spin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 15px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fx-muted);
  cursor: pointer;
}

.pdfev-fx-spin-btn:hover {
  color: var(--fx-accent);
}

.pdfev-fx-spin-btn svg {
  width: 10px;
  height: 10px;
}

.pdfev-fx-sep {
  color: #9ca3af;
  font-size: 13px;
}

/* An explicit width, not `auto`: a bare text input keeps its default size
   (~177px) under `auto`, which left a long empty box trailing the total.
   box-shadow/border-radius reset too: the vendor's base skin styles its own
   .amount inputs (a class this input keeps) with an inset shadow and a
   rounded right edge meant for a spinner-style box — background:none/
   border:0 above don't touch box-shadow, so it was still painting a faint
   ghost box behind the total-pages number. */
.pdfev-fx-ready .pdfev-fx-pages .inpPages {
  width: 34px;
  padding: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  /* !important: same same-specificity/later-wins fight with the vendor's
     ".ctrl .pages .amount" color:#000/background-color as .inpPage above —
     a skin-generated inline <style> also sets ".pages .amount"'s own
     background (inherited from the shared ".pages .number, .pages .amount"
     rule), so background needs the same override, not just color. */
  color: var(--fx-ink) !important;
  background: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none !important;
  pointer-events: none;
}

/* ============================================================== slider === */

.pdfev-fx-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 640px;
  height: 4px;
  margin: 0 auto;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--fx-accent) 0,
    var(--fx-accent) var(--pdfev-fx-progress, 0%),
    #d5d9e0 var(--pdfev-fx-progress, 0%),
    #d5d9e0 100%
  );
  cursor: pointer;
}

.pdfev-fx-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--fx-accent);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.3);
  cursor: grab;
}

.pdfev-fx-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--fx-accent);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.3);
  cursor: grab;
}

.pdfev-fx-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

/* ================================================================ menus == */

.pdfev-fx-zoom,
.pdfev-fx-overflow {
  position: relative;
  display: inline-flex;
}

.pdfev-fx-zoom-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--fx-ink);
}

.pdfev-fx-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 200px;
  padding: 6px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: 12px;
  box-shadow: 0 16px 40px -10px rgba(17, 24, 39, 0.22);
}

.pdfev-fx-menu[hidden] {
  display: none;
}

.pdfev-fx-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fx-ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.pdfev-fx-menu-item:hover {
  background: var(--fx-hover);
}

.pdfev-fx-check,
.pdfev-fx-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--fx-muted);
}

.pdfev-fx-menu-item.is-checked .pdfev-fx-check {
  color: var(--fx-ink);
}

.pdfev-fx-zoom-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--fx-line);
}

.pdfev-fx-zoom-num {
  font-size: 14px;
  color: var(--fx-ink);
}

/* ========================================================= side buttons == */

/* The page-turn buttons floating over the book. The vendor's own anchor and
   the button added next to it are styled through one rule so the pair reads
   as a set, and matches the toolbar's own buttons. */
.pdfev-fx-ready .pdfev-fx-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.pdfev-fx-ready .pdfev-fx-side > a,
.pdfev-fx-ready .pdfev-fx-side > .pdfev-fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fx-line);
  border-radius: 50%;
  background: var(--fx-surface);
  color: var(--fx-ink);
  box-shadow: 0 6px 18px -6px rgba(17, 24, 39, 0.22);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pdfev-fx-ready .pdfev-fx-side > a:hover,
.pdfev-fx-ready .pdfev-fx-side > .pdfev-fx-btn:hover {
  background: var(--fx-hover);
  color: var(--fx-ink);
}

.pdfev-fx-ready .pdfev-fx-side > .pdfev-fx-btn.is-disabled,
.pdfev-fx-ready .pdfev-fx-side > a.disabled {
  color: #c9ced6;
  box-shadow: none;
}

/* The vendor anchor carries a FontAwesome glyph; size it to match the SVGs. */
.pdfev-fx-ready .pdfev-fx-side > a .fa {
  font-size: 18px;
  line-height: 1;
}

/* =============================================== thumbnails / toc panel == */

/* Docked to a side, full height, not a centered popup — the panel shares
   the book's own space rather than covering it. Which side depends on
   reading direction: LTR docks left (this block's default), RTL docks
   right (the .pdfev-fx-rtl override below) — flipa-toolbar.js sets that
   class by reading the data-pdfev-rtl attribute the free plugin already
   stamps on .pdfev-3dbook-viewer (shortcode_view() in functions.php) off
   the frame element in the parent page, since that flag lives outside
   this iframe. top:0/bottom:0 resolve against .main (the nearest
   position:relative ancestor), which is the full viewer including the
   toolbar bar below the stage — matches the panel's original (pre-modal)
   sizing, just restyled. */
/* Height comes from top:0 + bottom:0 alone, not an explicit height — an
   absolutely positioned box with both top and bottom set derives its
   height directly from the containing block's own box, a more reliable
   calculation than percentage-height resolution (which needs every
   ancestor up the chain to have a definite, non-auto height to resolve
   against, and can silently come up "auto" instead for some embeds/page
   sizes). An explicit height:100% here was fighting that and would win
   per spec (over-constrained: top+bottom+height together makes bottom the
   one that gets recomputed) — on any embed where that 100% resolved to
   auto instead, .body/.tocview below had no real box to flex against, so
   flex:1 had nothing to constrain to and overflow-y:auto never kicked in
   — the thumbnail grid just grew with its content, spilling out past the
   panel's own bottom edge instead of scrolling inside it. */
.pdfev-fx-ready .widFloatWnd {
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  transform: none;
  width: clamp(260px, 30%, 420px);
  max-height: none;
  display: flex;
  flex-direction: column;
  border-radius: 0 16px 16px 0;
  border: 1px solid var(--fx-line);
  border-left: none;
  background: var(--fx-surface);
  box-shadow: 8px 0 24px -16px rgba(17, 24, 39, 0.28);
}

.pdfev-fx-ready.pdfev-fx-rtl .widFloatWnd {
  left: auto;
  right: 0;
  border-radius: 16px 0 0 16px;
  border-left: 1px solid var(--fx-line);
  border-right: none;
  box-shadow: -8px 0 24px -16px rgba(17, 24, 39, 0.28);
}

/* The close button is taken out of flow (position:absolute) rather than
   flexed as a second item — a flex row with only the title left in normal
   flow centers on the row's own full width, not "whatever's left after the
   close button", which is what space-between (or a fixed-width close
   column) would give instead. Top corners match the panel's own outer-edge
   rounding (see .widFloatWnd above) — square on the edge flush against the
   book, rounded on the outer edge, LTR or RTL. */
.pdfev-fx-ready .widFloatWnd .head {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 12px 44px;
  border-bottom: 1px solid var(--fx-line);
  border-radius: 0 16px 0 0;
  background: var(--fx-surface);
  color: var(--fx-ink);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.pdfev-fx-ready.pdfev-fx-rtl .widFloatWnd .head {
  border-radius: 16px 0 0 0;
}

.pdfev-fx-ready .widFloatWnd .head .cmd.close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--fx-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pdfev-fx-ready .widFloatWnd .head .cmd.close:hover {
  background: var(--fx-hover);
  color: var(--fx-ink);
}

.pdfev-fx-ready .widFloatWnd .head .cmd.close .fa {
  font-size: 14px;
}

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

.pdfev-fx-ready .widShare {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 380px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--fx-line);
  border-radius: 14px;
  background: var(--fx-surface);
  box-shadow: 0 24px 60px -16px rgba(17, 24, 39, 0.32);
}

.pdfev-fx-ready .widShare .head {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 14px 46px;
  border-bottom: 1px solid var(--fx-line);
  color: var(--fx-ink);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.pdfev-fx-ready .widShare .head .cmd.close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--fx-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pdfev-fx-ready .widShare .head .cmd.close:hover {
  background: var(--fx-hover);
  color: var(--fx-ink);
}

.pdfev-fx-ready .widShare .head .cmd.close .fa {
  font-size: 14px;
}

.pdfev-fx-ready .widShare .body {
  padding: 16px;
}

.pdfev-fx-ready .widShare .txtShareLink {
  padding: 9px 11px;
  margin-bottom: 12px;
  border: 1px solid var(--fx-line);
  border-radius: 8px;
  background: #f9fafb;
  color: var(--fx-muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdfev-fx-ready .widShare .btns {
  display: flex;
  gap: 8px;
}

.pdfev-fx-ready .widShare .btns .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 1px solid var(--fx-line);
  border-radius: 8px;
  background: var(--fx-surface);
  color: var(--fx-ink);
}

.pdfev-fx-ready .widShare .btns .btn:hover {
  background: var(--fx-hover);
}

/* ================================================================ dark == */

/* A second token set, swapped in by .pdfev-fx-dark (toggled from the sun/
   moon button, persisted per-visitor in localStorage — see buildThemeToggle
   in flipa-toolbar.js). Every rule elsewhere already reads --fx-* variables,
   so redefining them here is the whole theme. */
.pdfev-fx-ready.pdfev-fx-dark {
  --fx-surface: #1f2430;
  --fx-ink: #f3f4f6;
  --fx-muted: #9ca3af;
  --fx-line: #333a4a;
  --fx-hover: #2a3040;
  --fx-accent: #60a5fa;
  --fx-btn-bg: #2a3040;
}

/* .inpPage/.inpPages (the page-number box + total) keep losing fights with
   the vendor's own skin over color/background even with !important — the
   vendor's JS rewrites these specific inputs' value on every page turn,
   which appears to occasionally re-assert its own inline-ish styling after
   ours has already applied. Rather than keep chasing that, invert them in
   dark mode instead: whatever light-on-light (or dark-on-light) result the
   cascade war lands on on any given render, inverting flips it to a
   readable dark-on-dark result regardless of which side "won". hue-rotate
   compensates so the blue focus ring doesn't come out orange. */
.pdfev-fx-ready.pdfev-fx-dark .pdfev-fx-pages .inpPage,
.pdfev-fx-ready.pdfev-fx-dark .pdfev-fx-pages .inpPages {
  filter: invert(1) hue-rotate(180deg);
}

.pdfev-fx-theme-toggle {
  display: inline-flex;
}

.pdfev-fx-theme-toggle .is-gone {
  display: none;
}

/* ============================================================ auto-hide == */


/* ===================================================== side arrows === */

/* Toggled from buildSideArrowsToggle() in flipa-toolbar.js. The circles
   themselves stay in the DOM either way — this only hides them, so nothing
   about their click-proxying or MutationObserver mirroring has to be torn
   down and rebuilt when they're shown again. */
.pdfev-fx-ready.pdfev-fx-hide-side .pdfev-fx-side {
  display: none;
}

/* ===================================================== TOC panel tabs === */

/* Burger-triggered dropdown instead of an always-visible row: the button
   itself is built in flipa-toolbar.js (build()) and inserted right before
   this list; toggling .pdfev-fx-toc-menu-open on the list itself (not on
   .widFloatWnd — that element's class attribute is watched by
   watchTocPanel() to detect the whole panel opening/closing) is what shows
   it. */
.pdfev-fx-toc-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 8px 0 0 8px;
  border-radius: 8px;
  color: var(--fx-muted);
  background: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pdfev-fx-toc-burger:hover {
  background: var(--fx-hover);
  color: var(--fx-ink);
}

.pdfev-fx-ready .h-menu.widTocMenu {
  display: none;
  position: absolute;
  top: 44px;
  left: 8px;
  z-index: 5;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 6px;
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: 10px;
  box-shadow: 0 16px 36px -12px rgba(17, 24, 39, 0.28);
}

.pdfev-fx-ready .h-menu.widTocMenu.pdfev-fx-toc-menu-open {
  display: flex;
}

.pdfev-fx-ready .h-menu.widTocMenu li {
  list-style: none;
}

.pdfev-fx-ready .h-menu.widTocMenu a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fx-muted);
  cursor: pointer;
}

.pdfev-fx-ready .h-menu.widTocMenu a:hover {
  background: var(--fx-hover);
  color: var(--fx-ink);
}

.pdfev-fx-ready .h-menu.widTocMenu li.active a,
.pdfev-fx-ready .h-menu.widTocMenu a.active {
  background: var(--fx-accent);
  color: #ffffff;
}

.pdfev-fx-ready .tocview {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 6px 10px;
  overflow-y: auto;
}

/* ======================================================== bookmarks === */

.pdfev-fx-ready .widBookmarks .bookmarks .level-0 {
  padding: 4px;
}

.pdfev-fx-ready .widBookmarks .bookmarks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pdfev-fx-ready .widBookmarks .bookmarks .item > .bookmarks {
  margin-left: 18px;
  border-left: 1px solid var(--fx-line);
}

.pdfev-fx-ready .widBookmarks .area {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.pdfev-fx-ready .widBookmarks .area:hover {
  background: var(--fx-hover);
}

.pdfev-fx-ready .widBookmarks .area a.cmd {
  color: var(--fx-ink);
  font-size: 13.5px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdfev-fx-ready .widBookmarks .area .togle,
.pdfev-fx-ready .widBookmarks .area .white-space {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--fx-muted);
  transition: transform 0.15s ease;
}

.pdfev-fx-ready .widBookmarks .area .togle:not(.minimized) {
  transform: rotate(90deg);
}

/* ======================================================= thumbnails === */

/* gap and padding share the same value on purpose: the space between two
   items should read the same as the space between an edge item and the
   panel's own edge, on all four sides. */
.pdfev-fx-ready .widThumbnails .thumbnails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

/* !important on display/width: the vendor's own base skin CSS
   (.ctrl .thumbnails .item { display:inline-block; width:128px }) has the
   same specificity as this rule and loads after it, so it otherwise wins
   and pins every item back to a fixed 128px column no matter what this
   file's own flex/grid layout says. */
.pdfev-fx-ready .widThumbnails .item {
  position: relative;
  cursor: pointer;
  display: block !important;
  width: 100% !important;
  min-width: 0;
}

/* The vendor's own base skin CSS also puts a dark hover background right
   on .item itself (.ctrl .thumbnails .item:hover { background-color:#444;
   border:1px solid #555 }), same specificity/later-loaded story as above
   — neutralized here so hover reads as just the accent border below, not
   a background flash. */
.pdfev-fx-ready .widThumbnails .item:hover {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* padding-top here is a fallback, not a hardcoded final size — the vendor
   still sets its own per-page percentage inline once that page's real
   dimensions are known, and (being inline) it always wins over this rule
   regardless of specificity. Without a fallback the box collapses to 0
   height (width:100%; height:0 with no padding-top at all) until that
   inline style lands, which is what made freshly opened panels look like
   their items were different, inconsistent sizes for a moment — some
   items already had their real inline value, others were still flat. This
   fallback keeps every item a sensible, uniform size from the first frame,
   then quietly settles to each page's real proportions as they load in. */
.pdfev-fx-ready .widThumbnails .thumbnail {
  width: 100%;
  height: 0;
  padding-top: 129%;
  border-radius: 10px;
  border: 2px solid transparent;
  background-color: var(--fx-hover);
  background-size: cover;
  background-position: center;
  transition: border-color 0.15s ease;
}

.pdfev-fx-ready .widThumbnails .thumbnail.loading {
  background: linear-gradient(100deg, var(--fx-hover) 30%, var(--fx-line) 50%, var(--fx-hover) 70%);
  background-size: 200% 100%;
  animation: pdfev-fx-shimmer 1.4s ease-in-out infinite;
}

@keyframes pdfev-fx-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.pdfev-fx-ready .widThumbnails .item:hover .thumbnail {
  border-color: var(--fx-accent);
}

/* Current-page marker: the vendor Thumbnails controller has no concept of
   this at all — it's watchActiveThumbnail() in flipa-toolbar.js polling the
   page input and toggling this class. */
.pdfev-fx-ready .widThumbnails .item.is-current .thumbnail {
  border-color: var(--fx-accent);
}

/* The page-number badge sits absolutely inside .item (not below the image
   in normal flow), so it overlays the thumbnail's own bottom-left corner
   instead of taking up a separate row underneath it. */
.pdfev-fx-ready .widThumbnails .heading {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
}

.pdfev-fx-ready .widThumbnails .heading a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(17, 24, 39, 0.72);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.pdfev-fx-ready .widThumbnails .item.is-current .heading a {
  background: var(--fx-accent);
}

/* =========================================================== search === */

.pdfev-fx-ready .widSearch .search {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pdfev-fx-ready .widSearch .query {
  padding: 6px;
}

.pdfev-fx-ready .widSearch .inpQuery {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--fx-line);
  border-radius: 8px;
  background: var(--fx-surface);
  color: var(--fx-ink);
  font-size: 13.5px;
}

.pdfev-fx-ready .widSearch .inpQuery:focus {
  outline: none;
  border-color: var(--fx-accent);
}

.pdfev-fx-ready .widSearch .results {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px;
}

.pdfev-fx-ready .widSearch .result {
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fx-muted);
}

.pdfev-fx-ready .widSearch .result:hover {
  background: var(--fx-hover);
}

.pdfev-fx-ready .widSearch .result a {
  text-decoration: none;
  color: inherit;
}

.pdfev-fx-ready .widSearch .result mark {
  background: rgba(37, 99, 235, 0.18);
  color: var(--fx-accent);
  border-radius: 3px;
  padding: 0 1px;
}

.pdfev-fx-ready.pdfev-fx-dark .widSearch .result mark {
  background: rgba(96, 165, 250, 0.25);
}

.pdfev-fx-ready .widSearch .status {
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--fx-muted);
  border-top: 1px solid var(--fx-line);
}

/* Rounded-corner clipping for .head/.body's own square corners — no
   resize:both any more (dropped along with the side-drawer layout it was
   built for: a user-resizable *centered* modal grows away from its own
   center as its box changes, since the recentering transform only reacts
   to the box's current size, not a place a drag handle chose). */
.pdfev-fx-ready .widFloatWnd {
  overflow: hidden;
}

/* background explicit here, not just inherited from .widFloatWnd: an older
   premium-book-view.css rule (body .float-wnd .body { background:#ffffff })
   predates dark mode and has no --fx-surface token to react to, and since
   this rule (unlike .head just above) never used to set its own background
   at all, that older unconditional white rule was the only one painting
   anything here — right in dark mode too, since it doesn't know dark mode
   exists. */
.pdfev-fx-ready .widFloatWnd .body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--fx-surface);
}

/* =========================================================== responsive == */

@media (max-width: 640px) {
  .pdfev-fx-row {
    gap: 0;
  }

  .pdfev-fx-divider {
    margin: 0 4px;
  }

  .pdfev-fx-ready .pdfev-fx-side > a {
    width: 38px;
    height: 38px;
  }

  /* .widFloatWnd's own width (above) is already container-relative via
     clamp() -- no page-viewport override needed here on top of it. */

  .pdfev-fx-ready .widShare {
    width: calc(100% - 32px);
  }
}

/* ==================================================== compact toolbar === */

/* Hidden by default -- these only matter once the @container rule below
   has already hidden the matching standalone .pdfev-fx-collapsible control
   next to them, at which point they're how that action stays reachable. */
.pdfev-fx-menu-item--compact-only {
  display: none;
}

.pdfev-fx-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--fx-line);
}

/* Keyed to .main's own box (container-type:inline-size is set there, in
   premium-book-view.css), not the page viewport: a hero-demo-sized embed
   sitting on an otherwise-wide desktop page needs this same collapse, and
   a plain @media query has no way to see that -- it only ever sees the
   viewport, never this element's own rendered width. */
@container (max-width: 680px) {
  .pdfev-fx-collapsible {
    display: none !important;
  }

  .pdfev-fx-menu-item--compact-only {
    display: flex;
  }
}