/* ============================================================================
   KG Medi News — Flipbook Viewer styles
   Stack: PDF.js (page rendering) + StPageFlip (page-turn animation)
   Scope: everything below is namespaced under #kgfbRoot so it never leaks
   into the rest of the site, which continues to use assets/css/allinonestyles.css
   for the header, footer and page chrome.
   ============================================================================ */

#kgfbRoot {
  --kgfb-toolbar-bg-1: #3d3d40;
  --kgfb-toolbar-bg-2: #2b2b2e;
  --kgfb-icon: #e9e9ec;
  --kgfb-icon-hover: rgba(255,255,255,.14);
  --kgfb-icon-active: rgba(255,255,255,.24);
  --kgfb-stage-bg: #f1f1f4;
  --kgfb-panel-bg: #ffffff;
  --kgfb-panel-border: rgba(54,44,106,.12);
  --kgfb-text: #0f0d22;
  --kgfb-text-soft: #7a74a8;
  --kgfb-accent: #362C6A;
  color-scheme: light;
}

#kgfbRoot.kgfb-dark {
  --kgfb-toolbar-bg-1: #202023;
  --kgfb-toolbar-bg-2: #111113;
  --kgfb-stage-bg: #16161a;
  --kgfb-panel-bg: #1e1e22;
  --kgfb-panel-border: rgba(255,255,255,.1);
  --kgfb-text: #f1f0f5;
  --kgfb-text-soft: #a7a2c4;
  color-scheme: dark;
}

#kgfbRoot { position: relative; max-width: 1280px; margin: -40px auto 0; padding: 0 5% 40px; z-index: 2; }
#kgfbRoot * { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Toolbar
   ------------------------------------------------------------------------- */
.kgfb-toolbar {
  display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap;
  background: linear-gradient(var(--kgfb-toolbar-bg-1), var(--kgfb-toolbar-bg-2));
  border-radius: 8px 8px 0 0; padding: 8px 10px;
}
.kgfb-icon {
  width: 34px; height: 34px; border-radius: 6px; border: none; background: transparent;
  color: var(--kgfb-icon); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; text-decoration: none; padding: 0; flex-shrink: 0;
}
.kgfb-icon svg { width: 18px; height: 18px; }
.kgfb-icon:hover:not(:disabled) { background: var(--kgfb-icon-hover); }
.kgfb-icon:disabled { opacity: .3; cursor: default; }
.kgfb-icon.active { background: var(--kgfb-icon-active); }
.kgfb-sep { width: 1px; height: 22px; background: rgba(255,255,255,.18); margin: 0 6px; flex-shrink: 0; }
.kgfb-pagebox {
  display: flex; align-items: center; background: #fff; border-radius: 5px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 700; color: #333; gap: 2px; white-space: nowrap;
}
.kgfb-pagebox input { width: 24px; border: none; background: transparent; font: inherit; font-weight: 700; text-align: right; padding: 0; color: #333; }
.kgfb-pagebox input:focus { outline: none; }
.kgfb-pagebox .kgfb-total { color: #888; margin-left: 2px; }
.kgfb-zoom-pct { font-size: 11px; font-weight: 700; color: var(--kgfb-icon); min-width: 36px; text-align: center; }

/* ---------------------------------------------------------------------------
   Reading progress bar
   ------------------------------------------------------------------------- */
.kgfb-progress-track { height: 3px; background: rgba(0,0,0,.08); }
#kgfbRoot.kgfb-dark .kgfb-progress-track { background: rgba(255,255,255,.08); }
.kgfb-progress-bar { height: 100%; width: 0%; background: var(--kgfb-accent); transition: width .3s ease; }

/* ---------------------------------------------------------------------------
   Stage + book
   ------------------------------------------------------------------------- */
.kgfb-stage {
  position: relative; background: var(--kgfb-stage-bg); padding: 34px 3%;
  display: flex; align-items: center; justify-content: center; min-height: 320px;
  overflow: hidden; transition: background .2s;
}
.kgfb-book-outer {
  position: relative; width: 100%; max-width: 1000px;
  /* .kgfb-stage is display:flex, and flex items default to min-width:auto,
     which means they refuse to shrink below their content's natural size —
     overriding max-width entirely. Once the StPageFlip canvas has real
     content, that default was forcing this box (and the whole page above
     it) wider than the viewport, clipping everything at the same edge.
     min-width:0 is the standard fix: it lets this flex item actually
     shrink to fit, so max-width is respected. */
  min-width: 0;
}
/* #kgfbBook is intentionally left empty of authored markup — StPageFlip
   builds its own internal page/image structure inside it once
   `loadFromImages()` runs, and sizes/fits each page itself. */
.kgfb-book { margin: 0 auto; transition: transform .2s ease; transform-origin: center top; }

/* ---------------------------------------------------------------------------
   StPageFlip internal elements (root cause of "PDF not fit the page")
   ------------------------------------------------------------------------- *
   StPageFlip creates this markup itself at runtime — a `.stf__wrapper` div
   holding a single `<canvas>` that EVERY page is drawn onto — and it ships a
   stylesheet with the sizing rules that canvas needs. But the CDN "browser"
   build we load (page-flip.browser.js) does not include or auto-inject that
   CSS (the npm package's dist/ only contains .js files, no .css), and the
   library's own source stylesheet even has a typo (`.sft__wrapper` instead
   of `.stf__wrapper`) that would stop its wrapper rule from ever matching.
   Without `.stf__parent canvas { width:100%; height:100% }` the canvas has
   no CSS size at all, so the browser gives it a canvas element's default
   300x150px box — and CanvasUI's own resize routine reads that computed
   size and locks the canvas's actual drawing surface to 300x150px. Every
   page StPageFlip renders then gets crammed into that tiny fixed box
   instead of filling the ~700-1000px stage — exactly "PDF not fit the
   page". These three rules are the library's intended CSS, restored here
   with the class-name typo fixed. */
#kgfbBook.stf__parent { position: relative; display: block; box-sizing: border-box; }
#kgfbBook .stf__wrapper { position: relative; width: 100%; box-sizing: border-box; }
#kgfbBook.stf__parent canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

.kgfb-stage-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; color: var(--kgfb-accent); font-size: 18px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.22); z-index: 20; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.kgfb-stage-arrow:hover:not(:disabled) { background: #fff; }
.kgfb-stage-arrow:disabled { opacity: 0; pointer-events: none; }
.kgfb-stage-arrow.prev { left: 10px; }
.kgfb-stage-arrow.next { right: 10px; }

/* ---------------------------------------------------------------------------
   Loading / error states
   ------------------------------------------------------------------------- */
.kgfb-loading, .kgfb-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 70px 20px; color: var(--kgfb-text-soft); font-size: 13.5px; text-align: center;
}
.kgfb-spinner {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(54,44,106,.15);
  border-top-color: var(--kgfb-accent); animation: kgfb-spin .8s linear infinite;
}
@keyframes kgfb-spin { to { transform: rotate(360deg); } }
.kgfb-error { color: #b3413a; }

/* ---------------------------------------------------------------------------
   Footer strip (below the stage): hint text + status
   ------------------------------------------------------------------------- */
.kgfb-hint {
  text-align: center; font-size: 11.5px; color: var(--kgfb-text-soft); padding: 12px 5% 0;
  border-top: 1px solid var(--kgfb-panel-border); background: var(--kgfb-panel-bg);
}
.kgfb-toast { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--kgfb-accent); min-height: 18px; background: var(--kgfb-panel-bg); padding: 0 5% 12px; }

/* ---------------------------------------------------------------------------
   Sidebar drawer (Thumbnails / Table of Contents / Search)
   ------------------------------------------------------------------------- */
.kgfb-drawer {
  position: absolute; top: 0; left: 0; height: 100%; width: 280px; max-width: 84vw;
  background: var(--kgfb-panel-bg); border-right: 1px solid var(--kgfb-panel-border);
  transform: translateX(-100%); transition: transform .25s ease; z-index: 30;
  display: flex; flex-direction: column; box-shadow: 8px 0 24px rgba(0,0,0,.12);
}
.kgfb-drawer.open { transform: translateX(0); }
.kgfb-drawer-tabs { display: flex; border-bottom: 1px solid var(--kgfb-panel-border); flex-shrink: 0; }
.kgfb-drawer-tab {
  flex: 1; border: none; background: none; padding: 12px 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--kgfb-text-soft); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.kgfb-drawer-tab.active { color: var(--kgfb-accent); border-bottom-color: var(--kgfb-accent); }
.kgfb-drawer-close {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.06); color: var(--kgfb-text-soft); cursor: pointer; font-size: 15px; z-index: 2;
}
.kgfb-drawer-panels { flex: 1; overflow-y: auto; position: relative; }
.kgfb-drawer-panel { display: none; padding: 14px; }
.kgfb-drawer-panel.active { display: block; }

.kgfb-thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kgfb-thumb {
  border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; background: none; padding: 0;
  display: flex; flex-direction: column; gap: 4px; text-align: center;
}
.kgfb-thumb img { width: 100%; aspect-ratio: 1000/1413; object-fit: cover; display: block; border-radius: 3px; border: 1px solid var(--kgfb-panel-border); }
.kgfb-thumb span { font-size: 10.5px; color: var(--kgfb-text-soft); font-weight: 700; }
.kgfb-thumb.active img { border-color: var(--kgfb-accent); }
.kgfb-thumb.active span { color: var(--kgfb-accent); }

.kgfb-toc-list { list-style: none; margin: 0; padding: 0; }
.kgfb-toc-list li { border-bottom: 1px solid var(--kgfb-panel-border); }
.kgfb-toc-list button { width: 100%; text-align: left; background: none; border: none; padding: 12px 4px; cursor: pointer; display: flex; gap: 10px; font-family: inherit; }
.kgfb-toc-list button:hover { background: rgba(54,44,106,.06); }
.kgfb-toc-page { background: var(--kgfb-accent); color: #fff; font-size: 10px; font-weight: 800; border-radius: 3px; padding: 2px 7px; height: fit-content; flex-shrink: 0; white-space: nowrap; }
.kgfb-toc-text h5 { font-size: 12.5px; font-weight: 700; color: var(--kgfb-text); line-height: 1.4; margin: 0 0 2px; }
.kgfb-toc-text p { font-size: 11px; color: var(--kgfb-text-soft); margin: 0; }

.kgfb-search-form { display: flex; gap: 6px; margin-bottom: 12px; }
.kgfb-search-form input {
  flex: 1; padding: 8px 10px; border: 1.5px solid var(--kgfb-panel-border); border-radius: 5px;
  font-size: 13px; font-family: inherit; background: var(--kgfb-panel-bg); color: var(--kgfb-text);
}
.kgfb-search-form input:focus { outline: none; border-color: var(--kgfb-accent); }
.kgfb-search-form button { border: none; background: var(--kgfb-accent); color: #fff; border-radius: 5px; padding: 0 14px; font-weight: 700; cursor: pointer; font-size: 13px; }
.kgfb-search-status { font-size: 11.5px; color: var(--kgfb-text-soft); margin-bottom: 8px; }
.kgfb-search-results { list-style: none; margin: 0; padding: 0; }
.kgfb-search-results li button { width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--kgfb-panel-border); padding: 10px 4px; cursor: pointer; font-family: inherit; }
.kgfb-search-results li button:hover { background: rgba(54,44,106,.06); }
.kgfb-search-results mark { background: #ffe58a; color: inherit; border-radius: 2px; }

/* ---------------------------------------------------------------------------
   Fullscreen
   ------------------------------------------------------------------------- */
#kgfbRoot:fullscreen, #kgfbRoot:-webkit-full-screen {
  max-width: none; padding: 0; margin: 0; display: flex; flex-direction: column; background: var(--kgfb-stage-bg);
}
#kgfbRoot:fullscreen .kgfb-stage, #kgfbRoot:-webkit-full-screen .kgfb-stage { flex: 1; }
#kgfbRoot:fullscreen .kgfb-hint, #kgfbRoot:-webkit-full-screen .kgfb-hint { display: none; }

/* ---------------------------------------------------------------------------
   Print (used only by the "print current page" feature's popup window,
   this block also hides UI chrome if the whole document is ever printed)
   ------------------------------------------------------------------------- */
@media print {
  #header, #footer, .page-header-bar, .mn-hero, .kgfb-toolbar, .kgfb-hint, .kgfb-toast,
  .kgfb-drawer, .kgfb-stage-arrow, #back-to-top { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .kgfb-thumb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #kgfbRoot { padding: 0 4% 32px; }
  .kgfb-icon { width: 30px; height: 30px; }
  .kgfb-icon svg { width: 16px; height: 16px; }
  .kgfb-sep { margin: 0 3px; }
  .kgfb-stage { padding: 20px 2%; }
  .kgfb-drawer { width: 240px; }
}