/* Flipbook Viewer Styles */

/* Background themes */
.bg-dark {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.bg-light {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.bg-transparent {
    background: transparent;
}

.bg-transparent #flipbook-container {
    background: transparent !important;
}

/* Main container */
#flipbook-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Extra padding to accommodate nav arrows, book edges, and controls */
    padding: 20px 80px 80px 80px;
    /* Smooth background color transition for page-sync effect */
    transition: background-color 0.5s ease;
    /* Allow overflow for book edges */
    overflow: visible;
}

#flipbook {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    position: relative;
    /* Allow edge effects to extend outside the book */
    overflow: visible;
    /* Smooth transition for zoom and cover-to-spread slide */
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.35s ease-out,
                clip-path 0.35s ease-out;
}

/* Left-edge shadow for cover state (hidden by default, shown via on-cover) */
#flipbook::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.03) 40%,
        transparent 100%
    );
}

/* Zoomed state */
#flipbook-container.zoomed {
    cursor: default;
}

/* Book effects wrapper - positioned over the flipbook */
#book-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    border-radius: 4px;
    /* overflow: visible to allow edges to extend outside the book */
    overflow: visible;

    /* Dynamic edge width variables - updated by JavaScript based on reading progress */
    --left-edge-width: 2px;
    --right-edge-width: 25px;
    --max-edge-width: 25px;
}

/* Lower z-index during flip so spine shadow renders behind turning page */
#book-effects.flipping {
    z-index: 1;
}

/* Loading state */
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 100;
}

.bg-light .loading {
    color: #333;
}

.loading .spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

.bg-light .loading .spinner {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #333;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading.hidden {
    display: none;
}

/* Controls */
.controls {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.bg-light .controls {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.controls.minimal {
    padding: 8px 12px;
}

.controls.minimal .page-info {
    font-size: 12px;
}

.control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bg-light .control-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.bg-light .control-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.control-btn:active {
    transform: scale(0.95);
}

.control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.control-btn svg {
    width: 24px;
    height: 24px;
}

/* Side navigation arrows */
.nav-arrow {
    position: absolute;
    z-index: 1001;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.nav-arrow svg { width: 28px; height: 28px; }
.nav-arrow:hover { background: rgba(0, 0, 0, 0.7); transform: scale(1.08); }
.nav-arrow:active { transform: scale(0.95); }
.nav-arrow:disabled { opacity: 0.2; cursor: not-allowed; transform: none; }
.nav-arrow:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}
.bg-light .nav-arrow {
    background: rgba(0, 0, 0, 0.08);
    color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.bg-light .nav-arrow:hover { background: rgba(0, 0, 0, 0.15); }

/* Zoom controls container */
.zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.bg-light .zoom-controls {
    border-left-color: rgba(0, 0, 0, 0.1);
}

/* Zoom reset button highlight */
.zoom-reset {
    background: rgba(255, 165, 0, 0.3);
}

.zoom-reset:hover {
    background: rgba(255, 165, 0, 0.5);
}

.bg-light .zoom-reset {
    background: rgba(255, 165, 0, 0.2);
}

.bg-light .zoom-reset:hover {
    background: rgba(255, 165, 0, 0.4);
}

.page-info {
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
    text-align: center;
    user-select: none;
}

.bg-light .page-info {
    color: #333;
}

.page-info .separator {
    opacity: 0.5;
    margin: 0 4px;
}

/* Link overlays */
#link-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
}

.link-overlay {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(66, 133, 244, 0.1);
    border: 1px solid rgba(66, 133, 244, 0.3);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.link-overlay:hover {
    background: rgba(66, 133, 244, 0.3);
    border-color: rgba(66, 133, 244, 0.6);
}

/* Page styles for StPageFlip */
.stf__block {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
}

.stf__item {
    background: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Make wrapper transparent so container background shows through */
.stf__wrapper {
    background: transparent !important;
}

/* Reduce inner shadow opacity on pages during flip for solid paper feel */
.stf__innerShadow {
    opacity: 0.3 !important;
}

/* FlippingBook-style gradient overlays during page flip */
/* Shine/highlight gradient on the turning page (visible during flip) */
.stf__block {
    position: relative;
}

/* Gradient overlay on the page being turned - creates realistic paper shine */
.stf__item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.50) 0%,
        rgba(255, 255, 255, 0.18) 1%,
        rgba(255, 255, 255, 0.50) 5.5%,
        rgba(0, 0, 0, 0.22) 21%,
        rgba(0, 0, 0, 0.08) 40%,
        transparent 60%
    );
    z-index: 10;
}

/* Show gradient during active flip animation */
.stf__item--active::after,
.stf__block--active .stf__item::after {
    opacity: 1;
}

/* Shadow behind the turning page - adds depth */
.stf__wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to left,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.2) 10%,
        transparent 30%
    );
    z-index: 1;
}

/* Show shadow during flip */
.stf__wrapper--active::before {
    opacity: 0.6;
}

/* Enhanced page curl shadow - matches FlippingBook's asymmetric lighting */
.stf__outerShadow {
    opacity: 0.5 !important;
}

/* Left page gets subtle shadow from spine */
.stf__item:nth-child(odd)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 100%
    );
    z-index: 5;
}

/* Right page gets subtle shadow from spine */
.stf__item:nth-child(even)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.08) 0%,
        transparent 100%
    );
    z-index: 5;
}

/* Page wrapper solid background */
.page-wrapper {
    background: #fff;
}

.page-wrapper canvas {
    background: #fff;
}

/* Ensure PDF page canvas has solid background */
.pdf-page {
    background: #fff;
}

/* Book spine/fold effect - creates realistic center crease */
/* Asymmetric shadow simulates light from right (like FlippingBook) */
.book-spine {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(235, 236, 238, 0.3) 10%,
        rgba(235, 236, 238, 0.7) 40%,
        rgba(235, 236, 238, 0.9) 50%,
        rgba(235, 236, 238, 0.5) 60%,
        rgba(235, 236, 238, 0.2) 80%,
        transparent 100%
    );
    transition: opacity 0.35s ease-out;
}

/* Left reflex shadow - stronger shadow on left side of spine */
.book-reflex-left {
    position: absolute;
    top: 0;
    left: calc(50% - 25px);
    width: 25px;
    height: 100%;
    pointer-events: none;
    z-index: 11;
    background: linear-gradient(to left,
        rgba(235, 236, 238, 0.8) 0%,
        rgba(235, 236, 238, 0) 100%
    );
    transition: opacity 0.35s ease-out;
}

/* Right reflex shadow - lighter shadow on right side of spine */
.book-reflex-right {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12px;
    height: 100%;
    pointer-events: none;
    z-index: 11;
    background: linear-gradient(to right,
        rgba(235, 236, 238, 0.5) 0%,
        rgba(235, 236, 238, 0) 100%
    );
    transition: opacity 0.35s ease-out;
}

/* Hide spine shadows during active page flip animation */
#book-effects.flipping .book-spine,
#book-effects.flipping .book-reflex-left,
#book-effects.flipping .book-reflex-right {
    opacity: 0;
}

/* Hide spine/reflex shadows when on cover (book not open yet) */
#book-effects.on-cover .book-spine,
#book-effects.on-cover .book-reflex-left,
#book-effects.on-cover .book-reflex-right,
#book-effects.on-cover .page-shadow-inner-left,
#book-effects.on-cover .page-shadow-inner-right,
#book-effects.on-cover .book-edge-left {
    opacity: 0;
}

/* Hide StPageFlip library shadows when on cover */
body.on-cover:not(.flipping-from-cover) .stf__innerShadow,
body.on-cover:not(.flipping-from-cover) .stf__outerShadow {
    opacity: 0 !important;
}

body.on-cover:not(.flipping-from-cover) .stf__block {
    box-shadow: none !important;
}

html.is-embed body.on-cover:not(.flipping-from-cover) .stf__item::before {
    background: none !important;
}

/* Adjust flipbook shadow when on cover - soft shadow for depth */
body.on-cover:not(.mobile-view) #flipbook {
    box-shadow: 0 0 2px 1px rgba(130, 130, 130, 0.25);
    /* Clip left half but allow shadow to extend past cover's right edge */
    clip-path: inset(-10px -10px -10px calc(50% - 10px));
}

/* During cover flip animation, remove clip-path so the 3D turn is visible */
body.flipping-from-cover:not(.mobile-view) #flipbook {
    clip-path: none;
}

/* Suppress stf__block inset shadow during forward cover flip (left side exposed by clip-path removal) */
body.flipping-from-cover .stf__block {
    box-shadow: none !important;
}

/* Hide left-page spine pseudo-element during forward cover flip (no left page in cover spread) */
body.flipping-from-cover .stf__item:nth-child(odd)::before {
    background: none !important;
}

/* During backward flip to cover, show cover shadow (matches final cover state) */
body.flipping-to-cover:not(.mobile-view) #flipbook {
    box-shadow: 0 0 2px 1px rgba(130, 130, 130, 0.25);
}

/* During backward flip to cover, hide library shadows behind the cover curl */
body.flipping-to-cover .stf__wrapper::before {
    opacity: 0 !important;
}
body.flipping-to-cover .stf__outerShadow,
body.flipping-to-cover .stf__innerShadow {
    opacity: 0 !important;
}
body.flipping-to-cover .stf__item::before {
    background: none !important;
}
body.flipping-to-cover .stf__block {
    box-shadow: none !important;
}
/* Hide static left page during backward flip to cover (no left page in cover spread) */
body.flipping-to-cover .stf__item.--left {
    visibility: hidden !important;
    background: transparent !important;
}
/* Hide book-edge and page shadows during backward flip to cover (they'll stay hidden via on-cover after flip) */
body.flipping-to-cover .book-edge-left,
body.flipping-to-cover .page-shadow-inner-left {
    opacity: 0 !important;
}

body.on-cover:not(.mobile-view):not(.flipping-from-cover) #flipbook::before {
    opacity: 1;
}

/* Book edge shadows - simulates page thickness with dynamic width */
/* Positioned OUTSIDE the book pages to create stacked paper illusion */
.book-edge-left {
    position: absolute;
    top: 0;
    /* Position outside the left edge of the book */
    left: calc(-1 * var(--left-edge-width, 2px));
    width: var(--left-edge-width, 2px);
    height: 100%;
    pointer-events: none;
    z-index: 10;
    transition: width 0.3s ease-out, left 0.3s ease-out;

    /* Paper stripe texture - alternating grays simulating stacked page edges */
    background:
        repeating-linear-gradient(to right,
            #c8c8c8 0px, #c8c8c8 1px,
            #d8d8d8 1px, #d8d8d8 2px,
            #e0e0e0 2px, #e0e0e0 3px,
            #d2d2d2 3px, #d2d2d2 4px,
            #f0f0f0 4px, #f0f0f0 5px
        );
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        inset -3px 0 4px rgba(0, 0, 0, 0.1);
    border-radius: 1px 0 0 1px;
}

.book-edge-right {
    position: absolute;
    top: 0;
    /* Position outside the right edge of the book */
    right: calc(-1 * var(--right-edge-width, 25px));
    width: var(--right-edge-width, 25px);
    height: 100%;
    pointer-events: none;
    z-index: 10;
    transition: width 0.3s ease-out, right 0.3s ease-out;

    /* Paper stripe texture - alternating grays simulating stacked page edges (mirrored) */
    background:
        repeating-linear-gradient(to right,
            #c8c8c8 0px, #c8c8c8 1px,
            #d8d8d8 1px, #d8d8d8 2px,
            #e0e0e0 2px, #e0e0e0 3px,
            #d2d2d2 3px, #d2d2d2 4px,
            #f0f0f0 4px, #f0f0f0 5px
        );
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        inset 3px 0 4px rgba(0, 0, 0, 0.1);
    border-radius: 0 1px 1px 0;
}

/* Depth overlay - subtle shadows at outer and inner edges */
.book-edge-left::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    border-radius: 1px 0 0 1px;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.06) 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

.book-edge-right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    border-radius: 0 1px 1px 0;
    background: linear-gradient(to left,
        rgba(0, 0, 0, 0.06) 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.08) 100%
    );
}

/* Bottom shadow for 3D depth on edges - very subtle */
.book-edge-left::after,
.book-edge-right::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.05) 0%,
        transparent 100%
    );
    pointer-events: none;
}

/* Inner page shadows - gutter-only shading for depth */
/* Outer edges stay crisp; shadow concentrates at the center fold */
.page-shadow-inner-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to right,
        transparent 0%,
        transparent 80%,
        rgba(0, 0, 0, 0.08) 95%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

.page-shadow-inner-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to left,
        transparent 0%,
        transparent 80%,
        rgba(0, 0, 0, 0.08) 95%,
        rgba(0, 0, 0, 0.17) 100%
    );
}

/* Book container wrapper for proper effect positioning */
.book-wrapper {
    position: relative;
    display: inline-block;
}

/* Legacy page shadow classes (kept for compatibility) */
.page-shadow {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
}

.page-shadow-left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
}

.page-shadow-right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #flipbook-container {
        padding: 10px;
    }

    .nav-arrow {
        position: fixed;
        bottom: 10px;
        width: 44px;
        height: 44px;
        top: auto !important;
        left: auto !important;
    }
    .nav-arrow-prev { left: 10px !important; }
    .nav-arrow-next { right: 10px; }

    .controls {
        bottom: 10px;
        padding: 8px 12px;
        gap: 6px;
        max-width: calc(100% - 130px);
    }

    .control-btn {
        width: 36px;
        height: 36px;
    }

    .control-btn svg {
        width: 20px;
        height: 20px;
    }

    .page-info {
        font-size: 12px;
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .controls {
        width: calc(100% - 20px);
        justify-content: space-around;
    }
}

/* Fullscreen mode - applied to container element */
#flipbook-container:fullscreen,
#flipbook-container:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    padding: 40px 80px 80px 80px;
    background: #1a1a2e;
}

#flipbook-container:fullscreen #flipbook,
#flipbook-container:-webkit-full-screen #flipbook {
    max-width: none;
    max-height: none;
}

#flipbook-container:fullscreen .controls,
#flipbook-container:-webkit-full-screen .controls {
    bottom: 20px;
}

/* Simulated fullscreen (CSS-based fallback when native Fullscreen API is unavailable) */
#flipbook-container.simulated-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 40px 80px 80px 80px;
    background: #1a1a2e;
    z-index: 999999;
}

#flipbook-container.simulated-fullscreen #flipbook {
    max-width: none;
    max-height: none;
}

#flipbook-container.simulated-fullscreen .controls {
    bottom: 20px;
}

/* Tighter padding on mobile */
@media (max-width: 768px) {
    #flipbook-container.simulated-fullscreen {
        padding: 10px 10px 80px 10px;
    }
}

/* Print styles - hide controls */
@media print {
    .controls,
    #link-overlays {
        display: none !important;
    }
}

/* Accessibility - focus styles */
.control-btn:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

/* Animation for page flip hint */
@keyframes flipHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.flip-hint {
    animation: flipHint 1s ease-in-out 2;
}

/* ============================
   EMBED MODE STYLES
   ============================ */

/* Root embed mode setup with safe area CSS variables */
html.is-embed {
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Container: bottom alignment, clip overflow */
html.is-embed #flipbook-container {
    align-items: flex-end;           /* Bottom alignment instead of center */
    justify-content: center;
    padding: 10px 10px max(70px, calc(var(--safe-area-bottom) + 60px)) 10px;
    overflow: hidden;                 /* Clip lateral spill from book edges */
}

/* Flipbook: clip visible effects, transform from bottom */
html.is-embed #flipbook {
    overflow: hidden;                 /* Clip edge shadows in embed mode */
    transform-origin: bottom center;  /* Scale from bottom for embed fit */
}

/* Hide book edges in embed mode to prevent lateral overflow */
html.is-embed .book-edge-left,
html.is-embed .book-edge-right {
    display: none;
}

/* Reduce effects container overflow in embed mode */
html.is-embed #book-effects {
    overflow: hidden;
}

/* Nav arrows: absolute in embed mode */
html.is-embed .nav-arrow {
    position: absolute;
}

/* Controls: safe-area aware bottom padding in embed mode */
html.is-embed .controls {
    position: absolute;               /* Relative to container instead of fixed */
    bottom: max(10px, var(--safe-area-bottom));
}

/* Mobile responsive adjustments for embed mode */
@media (max-width: 768px) {
    html.is-embed #flipbook-container {
        align-items: center;
        padding: 0px 0px max(40px, calc(var(--safe-area-bottom) + 30px)) 0px;
    }

    html.is-embed #flipbook {
        transform-origin: center center;
        box-shadow: none;
        border-radius: 0;
    }

    html.is-embed .stf__block {
        box-shadow: none !important;
    }

    html.is-embed .controls {
        bottom: max(8px, var(--safe-area-bottom));
        padding: 6px 10px;
    }

    html.is-embed .nav-arrow {
        position: fixed;
    }
}

@media (max-width: 480px) {
    html.is-embed #flipbook-container {
        padding: 0px 0px max(40px, calc(var(--safe-area-bottom) + 30px)) 0px;
    }

    html.is-embed .controls {
        bottom: max(6px, var(--safe-area-bottom));
        width: calc(100% - 130px);
    }
}

/* Fullscreen in embed mode - restore normal behavior */
html.is-embed #flipbook-container:fullscreen,
html.is-embed #flipbook-container:-webkit-full-screen {
    align-items: center;              /* Center in fullscreen */
    overflow: visible;                /* Allow overflow in fullscreen */
    padding: 40px 60px 80px 60px;
}

html.is-embed #flipbook-container:fullscreen #flipbook,
html.is-embed #flipbook-container:-webkit-full-screen #flipbook {
    overflow: visible;
    transform-origin: center center;
}

html.is-embed #flipbook-container:fullscreen .book-edge-left,
html.is-embed #flipbook-container:fullscreen .book-edge-right,
html.is-embed #flipbook-container:-webkit-full-screen .book-edge-left,
html.is-embed #flipbook-container:-webkit-full-screen .book-edge-right {
    display: block;                   /* Show edges in fullscreen */
}

html.is-embed #flipbook-container:fullscreen #book-effects,
html.is-embed #flipbook-container:-webkit-full-screen #book-effects {
    overflow: visible;
}

html.is-embed #flipbook-container:fullscreen .controls,
html.is-embed #flipbook-container:-webkit-full-screen .controls {
    position: fixed;
    bottom: 20px;
}

html.is-embed #flipbook-container:fullscreen .nav-arrow,
html.is-embed #flipbook-container:-webkit-full-screen .nav-arrow {
    position: absolute;
}

/* Simulated fullscreen overrides for embed mode */
html.is-embed #flipbook-container.simulated-fullscreen {
    align-items: center;
    overflow: visible;
}

html.is-embed #flipbook-container.simulated-fullscreen #flipbook {
    overflow: visible;
    transform-origin: center center;
}

html.is-embed #flipbook-container.simulated-fullscreen .controls {
    position: fixed;
    bottom: 20px;
}

html.is-embed #flipbook-container.simulated-fullscreen .nav-arrow {
    position: fixed;
}

/* ============================
   MOBILE SINGLE-PAGE VIEW
   ============================ */

/* Hide spine shadows on mobile single-page view (no book fold visible) */
body.mobile-view .book-spine,
body.mobile-view .book-reflex-left,
body.mobile-view .book-reflex-right,
body.mobile-view .page-shadow-inner-left,
body.mobile-view .page-shadow-inner-right {
    display: none;
}

/* Also hide the odd/even page spine shadows from StPageFlip */
body.mobile-view .stf__item:nth-child(odd)::before,
body.mobile-view .stf__item:nth-child(even)::before {
    display: none;
}