/* PDF Flipbook Viewer */
body.sdv-pdf-fs-lock {
    overflow: hidden;
}

.pdf-flipbook-wrapper {
    background: var(--bg-body, #f5f5f5);
    border-radius: var(--radius-md, 1rem);
    padding: var(--spacing-md, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm, 1rem);
    /* Containing block for the absolutely-positioned batch loader. */
    position: relative;
}

.pdf-flipbook-wrapper.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #1a1a1a;
    justify-content: flex-start;
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    padding: 16px;
}

.pdf-flipbook {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.pdf-flipbook-wrapper.is-fullscreen .pdf-flipbook {
    flex: 1 1 auto;
    min-height: 0;
}

.pdf-flipbook-loading {
    text-align: center;
    padding: 60px 0;
}

.pdf-flip-progress-text {
    margin-top: 10px;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.pdf-flip-error {
    color: #c0392b;
}

/* Shown while a further batch of pages is being rasterized on demand. */
.pdf-flip-batch-loader {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.78rem;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
}

.pdf-flip-batch-loader.is-visible {
    display: inline-flex;
}

.pdf-flip-batch-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pdf-flip-batch-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes pdf-flip-batch-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdf-flip-batch-spinner {
        animation-duration: 2.4s;
    }
}

.pdf-flipbook-pages {
    margin: 0 auto;
}

.pdf-flip-page {
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.pdf-flip-page canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* RTL page order.
   Deliberately NO CSS mirror here. Mirroring the container did produce the
   right page positions, but it also mirrored the rendered page content —
   the counter-mirror meant to cancel that out proved unreliable in real
   browsers, because the library merges its own .stf__item class onto the
   very element we hand it and writes inline transforms there during
   animation, which a stylesheet rule cannot reliably beat.
   Instead the order comes purely from the order of the array handed to the
   library (see displayPages() in pdf-flipbook.js): each pair is swapped, so
   p1 lands right, p2 left, p3 right, p4 left. Content is therefore never
   transformed at all, and page turns animate in the library's natural
   direction (next grabs the right edge and moves left). */

/* Blank slots: the partner beside a single cover page, and the padding
   slot used when the page count doesn't divide evenly. Deliberately flat
   and shadowless so a cover reads as one standalone page rather than half
   of a spread. */
.pdf-flip-page-blank {
    background: transparent;
    box-shadow: none;
}

/* Magnifier loupe — a circle that floats beside the cursor (offset, never
   directly under it, so it doesn't hide the detail being inspected).
   Samples the page's own high-resolution canvas, so it shows genuine extra
   detail rather than an upscale of the screen.
   Positioned via transform: the JS writes translate() on every pointer
   move, which composites on the GPU instead of forcing layout, and lets
   the follow be eased for a floating feel. Toggled with opacity/visibility
   rather than display so that easing can actually run — a display change
   would jump straight to the new spot. */
.pdf-flip-magnifier {
    position: absolute;
    top: 0;
    left: 0;
    /* Fallback only — the JS sets the real diameter from MAG_SIZE so the
       constant and the positioning maths stay in sync. */
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    will-change: transform;
    transform: translate(-9999px, -9999px);
    /* No easing on transform: the lens must sit exactly MAG_GAP from the
       cursor at all times. Any transition makes it trail behind while the
       pointer moves, which reads as a far larger gap than is configured. */
    transition: opacity 0.15s ease, visibility 0.15s;
}

.pdf-flip-magnifier.is-visible {
    opacity: 1;
    visibility: visible;
}

.pdf-flip-magnifier canvas {
    display: block;
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .pdf-flip-magnifier {
        transition: none;
    }
}

/* The loupe is a pointer affordance; hide it where there's no cursor. */
@media (hover: none) {
    .pdf-flip-magnifier {
        display: none !important;
    }
}

.pdf-flipbook-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 1rem);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.pdf-flip-prev,
.pdf-flip-next,
.pdf-flip-fullscreen {
    background: var(--primary-color);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    position: relative;
    z-index: 2;
}

.pdf-flip-prev:hover,
.pdf-flip-next:hover,
.pdf-flip-fullscreen:hover {
    background: var(--primary-dark, var(--primary-color));
}

.pdf-flip-page-indicator {
    font-size: 0.9rem;
    color: var(--text-muted);
    min-width: 70px;
    text-align: center;
}

.pdf-flipbook-wrapper.is-fullscreen .pdf-flip-page-indicator {
    color: #eee;
}

.pdf-flip-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.pdf-flip-download:hover {
    background: var(--primary-color);
    color: #fff;
}

@media (max-width: 768px) {
    .pdf-flipbook-wrapper {
        padding: var(--spacing-sm, 1rem);
    }

    .pdf-flipbook-wrapper.is-fullscreen {
        padding: 8px;
    }
}

body.dark-mode .pdf-flipbook-wrapper {
    background: #222;
}

body.dark-mode .pdf-flipbook-wrapper.is-fullscreen {
    background: #111;
}