.pfv-container button,
.pfv-modal button { -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; font-family: inherit !important; line-height: 1 !important; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
.pfv-container svg,
.pfv-modal svg { fill: none !important; stroke: currentColor !important; display: block; pointer-events: none; }

/* ===== PDF Flipbook Viewer — Inline ===== */
.pfv-container { --pfv-accent: #1c2b6b; --pfv-accent-2: #f2b705; --pfv-border: #e2e2e8; max-width: 900px; margin: 2rem auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; overflow: hidden; background: var(--pfv-bg, transparent); }
.pfv-viewer { display: flex; align-items: center; gap: 10px; background: rgb(115, 0, 120); padding: 8px 12px; }

.pfv-canvas-wrap { position: relative; flex: 1; min-width: 0; height: var(--pfv-height, 650px); background: transparent; border: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pfv-canvas-wrap canvas { max-width: 100%; max-height: 100%; box-shadow: 0 6px 24px rgba(0,0,0,0.35); opacity: 1; transition: opacity .18s ease, transform .18s ease; }
.pfv-canvas-wrap canvas.pfv-fading { opacity: 0; transform: scale(0.98); }
.pfv-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ddd; font-size: 14px; }

.pfv-nav-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; transition: opacity .25s ease; }
.pfv-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.25) !important; background: rgba(0,0,0,0.55) !important; color: #fff !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .15s ease, transform .1s ease; }
.pfv-btn-sm { width: 30px !important; height: 30px !important; opacity: 0.85; }
.pfv-btn:hover { background: rgba(0,0,0,0.75) !important; }
.pfv-btn:active { transform: scale(0.94); }
.pfv-page-indicator { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 20px; z-index: 5; }
.pfv-expand-btn { position: absolute !important; bottom: 10px; right: 10px; width: 38px; height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.75); color: #fff !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; z-index: 10; opacity: 1; visibility: visible; }
.pfv-expand-btn svg { display: block; }
.pfv-expand-btn:hover { background: rgba(0,0,0,0.95); }
.pfv-footer { display: flex; justify-content: space-between; background: #0319aa; margin-top: 16px;}
.pfv-footer button { flex: 1; border: none; background: transparent; color: #fff; font-size: 14px; font-weight: 600; padding: 14px 10px; cursor: pointer; }
.pfv-footer button:hover { background: rgba(255,255,255,0.1); }
.pfv-footer button + button { border-left: 1px solid rgba(255,255,255,0.2); }

/* ===== Auto-hide of prev/next controls (inline + modal) ===== */
.pfv-ui-hidden .pfv-nav-stack,
.pfv-ui-hidden .pfv-nav-stack-modal { opacity: 0; pointer-events: none; }
/* Hit-area stays active so hover/touch brings them back (handled in JS via mousemove/touchstart). */

/* ===== Fullscreen Modal ===== */
.pfv-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; background: rgb(115, 0, 120); z-index: 999999; display: none; flex-direction: column; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; min-height: 0; box-sizing: border-box; overscroll-behavior: contain; touch-action: manipulation; }
.pfv-modal.pfv-open { display: flex; }
.pfv-modal:fullscreen { width: 100vw; height: 100vh; }
.pfv-modal:-webkit-full-screen { width: 100vw; height: 100vh; }

.pfv-modal-toolbar { display: flex; align-items: center; justify-content: space-between; background: #0319aa; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); flex: 0 0 auto; }
.pfv-modal-title { font-size: 14px; font-weight: 600; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.pfv-modal-actions { display: flex; gap: 6px; align-items: center; }
.pfv-modal-toolbar button { width: 36px !important; height: 36px !important; border-radius: 6px !important; border: none !important; background: transparent !important; color: #fff !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px; }
.pfv-modal-toolbar button:hover { background: rgba(255,255,255,0.15) !important; }
.pfv-modal-close { font-size: 22px !important; }
.pfv-modal-search-bar { display: flex; flex-direction: column; background: #fff; color: #222; padding: 10px 16px; flex: 0 0 auto; }
.pfv-modal-search-bar[hidden] { display: none; }
.pfv-modal-search-bar input { padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 16px; width: 100%; max-width: 400px; box-sizing: border-box; }
.pfv-search-results { margin-top: 8px; max-height: 160px; overflow-y: auto; }
.pfv-search-result-item { padding: 8px 10px; border-bottom: 1px solid #eee; cursor: pointer; font-size: 13px; }
.pfv-search-result-item:hover { background: #f2f2f2; }
.pfv-search-result-item b { color: #d21; }
.pfv-search-empty { padding: 8px 10px; font-size: 13px; color: #888; }

.pfv-modal-body { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; gap: 16px; padding: 16px 24px; overflow: hidden; position: relative; min-height: 0; }
.pfv-modal-canvas-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; }
.pfv-modal-canvas-wrap canvas { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 4px 30px rgba(0,0,0,0.6); opacity: 1; transition: opacity .18s ease, transform .18s ease; }
.pfv-modal-canvas-wrap canvas.pfv-fading { opacity: 0; transform: scale(0.98); }

.pfv-nav-stack-modal { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 14px; flex: 0 0 auto; transition: opacity .25s ease; }
.pfv-modal-prev,
.pfv-modal-next { width: 46px !important; height: 46px !important; border-radius: 50% !important; border: none !important; background: rgba(255,255,255,0.12) !important; color: #fff !important; cursor: pointer; flex: 0 0 auto; display: flex !important; align-items: center !important; justify-content: center !important; }
.pfv-modal-first,
.pfv-modal-last { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: none !important; background: rgba(255,255,255,0.06) !important; color: #fff !important; opacity: 0.75; cursor: pointer; flex: 0 0 auto; display: flex !important; align-items: center !important; justify-content: center !important; }
.pfv-modal-prev:hover, .pfv-modal-next:hover,
.pfv-modal-first:hover, .pfv-modal-last:hover { background: rgba(255,255,255,0.25) !important; opacity: 1; }
.pfv-modal-footer { flex: 0 0 auto; text-align: center; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 13px; background: #0319aa; }
.pfv-share-toast { position: absolute; top: 16px; right: 24px; background: rgba(0,0,0,0.85); color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 20px; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 5; }
.pfv-share-toast-visible { opacity: 1; transform: translateY(0); }

/* ===== Narrow layouts (class set by JS from the element's own width) ===== */

/* Inline viewer: page fills the width, arrows overlay the page, controls sit under it */
.pfv-container.pfv-narrow .pfv-viewer { position: relative; padding: 8px 0; gap: 0; }
.pfv-container.pfv-narrow .pfv-canvas-wrap { height: auto; min-height: 220px; padding-bottom: 56px; box-sizing: border-box; align-items: flex-start; }
.pfv-container.pfv-narrow .pfv-btn-sm { display: none !important; }
.pfv-container.pfv-narrow .pfv-nav-stack { position: absolute; top: calc(50% - 28px); transform: translateY(-50%); z-index: 6; }
.pfv-container.pfv-narrow .pfv-viewer > .pfv-nav-stack:first-child { left: 6px; }
.pfv-container.pfv-narrow .pfv-viewer > .pfv-nav-stack:last-child { right: 6px; }
.pfv-container.pfv-narrow .pfv-btn { width: 38px !important; height: 38px !important; }

/* Modal: page uses the full width; nav buttons overlay the page edges */
.pfv-modal.pfv-narrow .pfv-modal-title { display: none; }
.pfv-modal.pfv-narrow .pfv-modal-body { padding: 8px; gap: 0; }
.pfv-modal.pfv-narrow .pfv-modal-canvas-wrap { width: 100%; }
.pfv-modal.pfv-narrow .pfv-nav-stack-modal { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; gap: 10px; align-self: auto; }
.pfv-modal.pfv-narrow .pfv-nav-left { left: calc(6px + env(safe-area-inset-left, 0px)); }
.pfv-modal.pfv-narrow .pfv-nav-right { right: calc(6px + env(safe-area-inset-right, 0px)); }
.pfv-modal.pfv-narrow .pfv-modal-prev,
.pfv-modal.pfv-narrow .pfv-modal-next { width: 42px !important; height: 42px !important; background: rgba(0,0,0,0.55) !important; }
.pfv-modal.pfv-narrow .pfv-modal-first,
.pfv-modal.pfv-narrow .pfv-modal-last { width: 32px !important; height: 32px !important; background: rgba(0,0,0,0.45) !important; }
.pfv-modal.pfv-narrow .pfv-share-toast { right: 12px; }