/* =========================================================
   FLIPBOOK VIEWER  –  Issuu-like full-screen reader
   ========================================================= */

/* ── Reset overrides for the viewer page ─────────────────── */
body.fb-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #1a1a2e;
}

/* Hide site nav & footer inside the flipbook page */
body.fb-page .navbar,
body.fb-page nav.navbar,
body.fb-page .site-nav,
body.fb-page header:not(.fb-topbar),
body.fb-page footer.footer,
body.fb-page .footer,
body.fb-page .chat-widget,
body.fb-page .chat-button,
body.fb-page #chatWidget {
    display: none !important;
}

/* Ensure content takes full height */
body.fb-page #main-content,
body.fb-page main,
body.fb-page .content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.fb-wrapper {
    display: flex;
    flex-direction: column;
    /* Use the CSS custom property set by the resize handler as a precise
       fallback on iOS Safari where 100dvh can still jump when the address
       bar animates. Falls back to 100dvh → 100vh → 100% in order. */
    height: var(--fb-vh, 100dvh);
    width: 100%;
    background: #1a1a2e;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    /* Contain layout repaints to this element */
    contain: layout style;
}

/* ── Top bar ─────────────────────────────────────────────── */
.fb-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 54px;
    background: rgba(15,15,30,.95);
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    z-index: 20;
}

.fb-back {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.65);
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}
.fb-back:hover { color: #fff; text-decoration: none; }
.fb-back i { font-size: .7rem; }

.fb-title {
    flex: 1;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.fb-topbar-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Icon buttons (shared) ───────────────────────────────── */
.fb-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s;
    padding: 0;
    line-height: 1;
}
.fb-icon-btn:hover  { background: rgba(255,255,255,.14); color: #fff; }
.fb-icon-btn:active { transform: scale(.92); }
.fb-icon-btn.active { background: rgba(201,162,39,.25); border-color: rgba(201,162,39,.5); color: #c9a227; }

/* ── Stage (book + side arrows) ─────────────────────────── */
.fb-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 0;
    /* Prevent browser-level pinch-zoom / overscroll interfering with our
       custom pinch handler. The JS touchmove handler calls preventDefault
       only when needed (pinch or pan), so this is safe. */
    touch-action: none;
}

/* ── Book outer wrapper (for zoom transform) ─────────────── */
/* NOTE: transition is controlled dynamically in JS –         */
/* animated on button-click zoom, instant during drag/pan.   */
.fb-zoom-wrap {
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

/* ── Pan overlay ─────────────────────────────────────────── */
/* Transparent layer that sits above the book (z 8) but      */
/* below arrows (10) and controls (20). Shown only when      */
/* zoom > 1; intercepts all pointer/touch events so           */
/* StPageFlip never receives drag gestures while zoomed.     */
#fbPanOverlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: none;          /* hidden at zoom ≤ 1            */
    cursor: grab;
    touch-action: none;     /* let JS handle all touch moves */
    /* no background – fully transparent */
}
#fbPanOverlay.active {
    display: block;
}
#fbPanOverlay.grabbing,
#fbPanOverlay.grabbing * {
    cursor: grabbing !important;
}

/* StPageFlip renders the book inside this element */
#fb-book {
    /* PageFlip sets width/height itself */
    position: relative;
    outline: none;
}

/* ── Page element (individual leaf) ─────────────────────── */
.fb-page-leaf {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.fb-page-leaf img {
    width: 100%;
    height: 100%;
    /* Use fill (no aspect-ratio cropping) – pages are rendered at the exact
       page ratio so cover/contain are equivalent here, but fill avoids any
       fractional-pixel crop that could soften edges. */
    object-fit: fill;
    display: block;
    /* Ask the GPU compositor to use the best-quality downscaling/upscaling
       algorithm when the CSS transform zoom changes. */
    image-rendering: -webkit-optimize-contrast; /* Safari */
    image-rendering: high-quality;              /* Chrome/Firefox */
    will-change: transform;                     /* promote to own compositing layer */
}

.fb-page-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    gap: 10px;
    color: #aaa;
    font-size: .85rem;
}

.fb-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0,0,0,.1);
    border-top-color: #c9a227;
    border-radius: 50%;
    animation: fb-spin .8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* ── Side arrows ─────────────────────────────────────────── */
.fb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all .25s ease;
}
.fb-arrow:hover  { background: #c9a227; border-color: #c9a227; color: #0a1628; box-shadow: 0 6px 20px rgba(201,162,39,.4); }
.fb-arrow:active { transform: translateY(-50%) scale(.93); }
.fb-arrow-prev { left: 14px; }
.fb-arrow-next { right: 14px; }
.fb-arrow:disabled { opacity: .3; pointer-events: none; }

/* ── Bottom controls bar ─────────────────────────────────── */
.fb-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 50px;
    background: rgba(15,15,30,.95);
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    gap: 12px;
    z-index: 20;
}

.fb-controls-left,
.fb-controls-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}
.fb-controls-right { justify-content: flex-end; }

.fb-controls-center {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-page-num {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    min-width: 68px;
    text-align: center;
    letter-spacing: .5px;
}

.fb-page-input {
    width: 42px;
    text-align: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    color: #fff;
    font-size: .82rem;
    padding: 4px 6px;
    outline: none;
}
.fb-page-input:focus { border-color: rgba(201,162,39,.6); }

/* ── Thumbnail strip ─────────────────────────────────────── */
.fb-thumbstrip {
    position: absolute;
    bottom: 50px;           /* sits on top of the bottom controls */
    left: 0;
    right: 0;
    height: 120px;
    background: rgba(10,10,22,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,162,39,.4) transparent;
    z-index: 15;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.fb-thumbstrip::-webkit-scrollbar       { height: 4px; }
.fb-thumbstrip::-webkit-scrollbar-track { background: transparent; }
.fb-thumbstrip::-webkit-scrollbar-thumb { background: rgba(201,162,39,.4); border-radius: 2px; }

.fb-thumbstrip.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.fb-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 98px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: border-color .2s, transform .2s;
    background: #333;
}
.fb-thumb:hover   { transform: translateY(-3px); border-color: rgba(201,162,39,.5); }
.fb-thumb.active  { border-color: #c9a227; box-shadow: 0 0 0 2px rgba(201,162,39,.3); }
.fb-thumb img     { width: 100%; height: 100%; object-fit: cover; }

.fb-thumb-num {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: .6rem;
    color: rgba(255,255,255,.7);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* ── Processing / failed overlay ─────────────────────────── */
.fb-status-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255,255,255,.8);
    font-size: 1rem;
    text-align: center;
    padding: 24px;
}
.fb-status-overlay .fb-spinner { width: 48px; height: 48px; border-width: 4px; }
.fb-status-overlay h3  { color: #fff; font-size: 1.3rem; margin: 0; }
.fb-status-overlay p   { margin: 0; color: rgba(255,255,255,.6); max-width: 380px; }

.fb-status-overlay a.fb-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #c9a227, #e6c44d);
    border-radius: 50px;
    color: #0a1628;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.fb-status-overlay a.fb-pdf-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,162,39,.4); text-decoration: none; }

/* ── Fullscreen mode adjustments ─────────────────────────── */
:fullscreen .fb-wrapper,
:-webkit-full-screen .fb-wrapper { height: 100vh; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .fb-topbar    { height: 48px; padding: 0 10px; }
    .fb-title     { font-size: .8rem; }
    .fb-controls  { height: 46px; padding: 0 8px; }
    .fb-icon-btn  { width: 32px; height: 32px; font-size: .78rem; }
    .fb-arrow     { width: 38px; height: 38px; font-size: .85rem; }
    .fb-arrow-prev { left: 6px; }
    .fb-arrow-next { right: 6px; }
    .fb-thumbstrip { height: 100px; }
    .fb-thumb { width: 58px; height: 82px; }
}