/* CS FlipBook — Viewer v1.3 */

/* -----------------------------------------------------------------------
   Wrapper: width fills column, height is set by JS after PDF loads.
   No fixed heights anywhere in this file — JS owns vertical sizing.
----------------------------------------------------------------------- */
.csfb-viewer-wrap {
    --csfb-accent: #E8431A;
    --csfb-tb-h:   50px;
    --csfb-th-h:   72px;   /* thumbnail strip height */
    background: #1a1a1a;
    position: relative;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    width: 100%;
    min-height: 120px;   /* shows dark area while loading */
    box-sizing: border-box;
}

/* ---- Toolbar ---- */
.csfb-toolbar {
    height: var(--csfb-tb-h);
    background: #0d0d0d;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px;
    position: relative; z-index: 10;
    border-bottom: 1px solid #2a2a2a;
    box-sizing: border-box;
}
.csfb-toolbar-left,
.csfb-toolbar-right { display: flex; align-items: center; gap: 2px; }
.csfb-toolbar-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    max-width: 44%; text-align: center; pointer-events: none;
}
.csfb-book-title {
    color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .05em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.csfb-tb-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 5px;
    color: rgba(255,255,255,.45); cursor: pointer;
    transition: color .12s, background .12s; text-decoration: none; flex-shrink: 0;
}
.csfb-tb-btn svg { width: 17px; height: 17px; display: block; }
.csfb-tb-btn:hover  { color: #fff; background: rgba(255,255,255,.09); }
.csfb-tb-btn:active { transform: scale(.9); }
.csfb-tb-btn:disabled { opacity: .2; pointer-events: none; }
.csfb-page-info {
    color: rgba(255,255,255,.5); font-size: 12px;
    padding: 0 4px; min-width: 52px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---- Stage: height set by JS = rendered page height + vertical padding ---- */
.csfb-stage {
    background: #111;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.csfb-stage::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.28) 100%);
}

/* ---- Book: exact pixel size set by JS ---- */
.csfb-book {
    display: flex; align-items: stretch;
    position: relative; z-index: 1;
    perspective: 2400px;
    flex-shrink: 0;
}

/* ---- Pages: exact pixel size set by JS ---- */
.csfb-page {
    position: relative; background: #fff; overflow: hidden; flex-shrink: 0;
}
.csfb-page-left {
    transform-origin: right center;
    border-top: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000;
}
.csfb-page-right {
    transform-origin: left center;
    border-top: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000;
}
.csfb-page-inner { position: relative; width: 100%; height: 100%; }
.csfb-canvas     { display: block; width: 100%; height: 100%; }

/* Loading placeholder inside page */
.csfb-page-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; background: #f4f4f0;
}
.csfb-page-loading.csfb-hidden { display: none; }
.csfb-spinner {
    width: 22px; height: 22px;
    border: 2px solid rgba(0,0,0,.08); border-top-color: var(--csfb-accent);
    border-radius: 50%; animation: csfb-spin .7s linear infinite;
}
@keyframes csfb-spin { to { transform: rotate(360deg); } }

/* Page numbers */
.csfb-page-number {
    position: absolute; bottom: 8px;
    font-size: 10px; color: rgba(0,0,0,.25); letter-spacing: .04em; pointer-events: none;
}
.csfb-pn-left  { right: 10px; }
.csfb-pn-right { left: 10px; }

/* ---- Spine: 1px black line ---- */
.csfb-spine { width: 1px; background: #000; flex-shrink: 0; align-self: stretch; z-index: 2; }

/* ---- Flip animations ---- */
.csfb-page-left.csfb-flip-out  { animation: csfb-flip-left-out  .46s cubic-bezier(.4,0,.2,1) forwards; }
.csfb-page-left.csfb-flip-in   { animation: csfb-flip-left-in   .46s cubic-bezier(.4,0,.2,1) forwards; }
.csfb-page-right.csfb-flip-out { animation: csfb-flip-right-out .46s cubic-bezier(.4,0,.2,1) forwards; }
.csfb-page-right.csfb-flip-in  { animation: csfb-flip-right-in  .46s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes csfb-flip-right-out {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(-88deg) scaleX(.88); }
    100% { transform: rotateY(-180deg); opacity: 0; }
}
@keyframes csfb-flip-right-in {
    0%   { transform: rotateY(180deg); opacity: 0; }
    50%  { transform: rotateY(88deg) scaleX(.88); opacity: 1; }
    100% { transform: rotateY(0); }
}
@keyframes csfb-flip-left-out {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(88deg) scaleX(.88); }
    100% { transform: rotateY(180deg); opacity: 0; }
}
@keyframes csfb-flip-left-in {
    0%   { transform: rotateY(-180deg); opacity: 0; }
    50%  { transform: rotateY(-88deg) scaleX(.88); opacity: 1; }
    100% { transform: rotateY(0); }
}

/* ---- Edge click zones + hover arrows ---- */
.csfb-click-zone {
    position: absolute; top: 0; bottom: 0; width: 14%; z-index: 5;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.csfb-click-prev { left: 0; }
.csfb-click-next { right: 0; }
.csfb-edge-arrow {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,.58);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.75); transition: opacity .15s, transform .15s;
    pointer-events: none; flex-shrink: 0;
}
.csfb-edge-arrow svg { width: 17px; height: 17px; display: block; }
.csfb-click-zone:hover       .csfb-edge-arrow { opacity: 1; transform: scale(1); }
.csfb-click-zone:focus-visible .csfb-edge-arrow { opacity: 1; transform: scale(1); }
.csfb-click-zone.csfb-disabled { cursor: default; pointer-events: none; }
.csfb-click-zone.csfb-disabled .csfb-edge-arrow { display: none; }

/* ---- Loading overlay (covers stage while PDF initialises) ---- */
.csfb-loading-overlay {
    position: absolute; inset: 0; background: #111;
    display: flex; align-items: center; justify-content: center;
    z-index: 20; transition: opacity .3s;
}
.csfb-loading-overlay.csfb-hidden { opacity: 0; pointer-events: none; }
.csfb-loading-inner { text-align: center; }
.csfb-loading-inner p { color: rgba(255,255,255,.3); font-size: 12px; margin: 12px 0 0; }
.csfb-book-loader { display: flex; align-items: flex-end; gap: 4px; justify-content: center; height: 32px; }
.csfb-book-page-anim {
    width: 10px; background: rgba(255,255,255,.1); border-radius: 1px;
    animation: csfb-page-anim 1s ease-in-out infinite;
}
.csfb-book-page-anim:nth-child(1) { height: 22px; }
.csfb-book-page-anim:nth-child(2) { height: 32px; animation-delay: .15s; }
.csfb-book-page-anim:nth-child(3) { height: 22px; animation-delay: .3s; }
@keyframes csfb-page-anim {
    0%,100% { opacity: .15; transform: scaleY(.8); }
    50%     { opacity: .6;  transform: scaleY(1); }
}

/* ---- Thumbnail strip ---- */
.csfb-thumbnails {
    height: var(--csfb-th-h);
    display: flex; align-items: center; gap: 0;
    padding: 0 10px;
    background: #0d0d0d;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; scrollbar-color: #2e2e2e transparent;
    border-top: 1px solid #1e1e1e;
    box-sizing: border-box;
}
.csfb-thumbnails::-webkit-scrollbar { height: 3px; }
.csfb-thumbnails::-webkit-scrollbar-thumb { background: #333; }

/* Spread pair in thumbnails */
.csfb-thumb-pair {
    display: flex; align-items: center; flex-shrink: 0;
    margin-right: 6px; cursor: pointer;
    opacity: .4; transition: opacity .14s;
    border: 1px solid transparent; box-sizing: border-box;
}
.csfb-thumb-pair:last-child { margin-right: 0; }
.csfb-thumb-pair:hover      { opacity: .75; }
.csfb-thumb-pair.csfb-thumb-active { opacity: 1; border-color: var(--csfb-accent); }

/* Individual page thumbnail — width/height set by JS from page aspect ratio */
.csfb-thumb { overflow: hidden; flex-shrink: 0; background: #1e1e1e; display: block; }
.csfb-thumb canvas { display: block; }

/* 1px spine divider between left/right thumb in a pair */
.csfb-thumb-spine { width: 1px; background: #000; align-self: stretch; flex-shrink: 0; }

/* ---- Single-page mode: cover and back cover ---- */
.csfb-book.csfb-single .csfb-page-left { display: none; }
.csfb-book.csfb-single .csfb-spine     { display: none; }
.csfb-book.csfb-single .csfb-page-right { border: 1px solid #000; }

/* ---- Swipe hint (mobile) ---- */
.csfb-swipe-hint {
    display: none; text-align: center; padding: 4px;
    background: #0d0d0d; color: rgba(255,255,255,.22);
    font-size: 10px; letter-spacing: .05em;
}

/* ---- Fullscreen ---- */
/* In fullscreen the wrap fills the screen; JS re-computes and resizes everything */
.csfb-viewer-wrap:fullscreen,
.csfb-viewer-wrap:-webkit-full-screen {
    width: 100vw !important;
    display: flex; flex-direction: column;
}
.csfb-viewer-wrap:fullscreen .csfb-stage,
.csfb-viewer-wrap:-webkit-full-screen .csfb-stage {
    flex: 1;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .csfb-book-title { display: none; }
    .csfb-swipe-hint { display: block; }
    .csfb-click-zone { width: 18%; }
    .csfb-thumbnails { height: 58px; }
}