/* ==========================================================================
   WC PDF 3D Flipbook — Mobile Responsive Override (Kiro fix)
   Loaded AFTER frontend.css so these rules always win.
   Requirements:
     1. Edge-to-Edge Display (max-width: 768px)
     2. Auto-Adjust Dimensions
     3. Mode Integrity (Single portrait / Double landscape)
     4. UI/Toolbar cleanup — never shrinks or overlaps reading area
   ========================================================================== */

@media (max-width: 768px) {
    /* ── 1. Edge-to-Edge: kill every side margin/padding + break out of parents ── */
    .wcfb-viewer,
    .wcfb-modal .wcfb-viewer,
    .wcfb-context-inline,
    .wcfb-context-modal,
    .wcfb-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        z-index: 99999 !important;
    }

    /* Stage: 0 side padding, dynamic top/bottom padding sized to toolbars only */
    .wcfb-stage,
    .wcfb-viewer[data-wcfb-mode="double"] .wcfb-stage,
    .wcfb-viewer[data-wcfb-mode="single"] .wcfb-stage {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
        /* Bottom padding = toolbar height (44px) + toolbar bottom offset (10px)
           + safe-area — guarantees reading area is never covered/shrunk. */
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: auto !important;
    }

    /* Book: fills the full stage width */
    .wcfb-book {
        max-width: 100vw !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* ── 2. Auto-Adjust Dimensions: pages scale to viewport aspect ratio ── */
    /* Canvas is width:100% height:auto — allow it to scale inside pageElement */
    .wcfb-page {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        max-height: 100% !important;
    }
    .wcfb-page canvas {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Kill decorative side borders that create visible whitespace */
    .wcfb-page {
        border-left-width: 0 !important;
        border-right-width: 0 !important;
    }

    /* ── 3. Mode Integrity ────────────────────────────────────────────── */
    /* Facing pages must have IDENTICAL height so the spine looks correct.
       align-items: stretch on the book makes both pages match the tallest;
       min-height:0 on pages prevents flex from over-inflating any single one. */
    .wcfb-book {
        align-items: stretch !important;
        min-height: 0 !important;
    }
    .wcfb-page {
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Portrait: single page fills the screen edge-to-edge */
    @media (orientation: portrait) {
        .wcfb-mode-single .wcfb-page {
            flex: 1 1 100% !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        /* Double-page in portrait: each page = 50%; sum = 100% (no overflow) */
        .wcfb-mode-double .wcfb-page {
            flex: 0 1 auto !important;
            width: auto !important;
            max-width: 50% !important;
        }
        /* First / Last page (edge pages) should be full width (100%) in portrait */
        .wcfb-mode-double .wcfb-page:only-child {
            flex: 1 1 100% !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        /* Portrait canvas: uniform height, edge-to-edge, no clipping */
        .wcfb-mode-single .wcfb-page canvas,
        .wcfb-mode-double .wcfb-page canvas {
            width: 100% !important;
            height: auto !important;
            max-height: 100% !important;
            object-fit: contain !important;
            display: block !important;
            margin: 0 auto !important;
        }
    }

    /* Landscape: proper two-page spread edge-to-edge */
    @media (orientation: landscape) {
        .wcfb-mode-double .wcfb-page {
            flex: 0 1 auto !important;
            width: auto !important;
            max-width: 50% !important;
        }
        .wcfb-mode-single .wcfb-page {
            flex: 0 1 auto !important;
            max-height: 100% !important;
            width: auto !important;
        }
        .wcfb-mode-single .wcfb-page canvas,
        .wcfb-mode-double .wcfb-page canvas {
            width: 100% !important;
            height: auto !important;
            max-height: 100% !important;
            object-fit: contain !important;
        }
    }

    /* Navigation arrows: overlay, never steal horizontal space from the book */
    .wcfb-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        opacity: 0.9 !important;
        z-index: 60 !important;
    }
    .wcfb-nav-prev { left: 6px !important; }
    .wcfb-nav-next { right: 6px !important; }

    /* Touch: pan-x + pan-y + pinch-zoom — enables native pinch-to-zoom AND
       double-tap zoom on pages. The flipbook JS listens for gestures via its
       own hammer/swipe logic; giving the browser both axes lets pinch/pan work
       naturally. Horizontal swipe for page flip still works because the
       flipbook binds to touchstart/touchend, not touchmove pan cancellation. */
    .wcfb-stage         { touch-action: pan-x pan-y pinch-zoom !important; }
    .wcfb-book          { touch-action: pan-x pan-y pinch-zoom !important; }
    .wcfb-page          { touch-action: pan-x pan-y pinch-zoom !important; }
    .wcfb-page canvas   { touch-action: pan-x pan-y pinch-zoom !important; }

    /* Double-tap zoom: some browsers disable it when a click handler is bound.
       Restore native double-tap-zoom for pages (not for toolbar/nav). */
    .wcfb-page, .wcfb-page canvas {
        -ms-touch-action: manipulation;
    }

    /* ── 4. Toolbar cleanup: pinned + floating, does NOT overlap reading area ── */
    .wcfb-toolbar {
        top: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: calc(100vw - 16px) !important;
        padding: 5px 8px !important;
        z-index: 70 !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .wcfb-toolbar.toolbar-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .wcfb-mobile-toolbar-toggle {
        display: none;
    }

    @media (max-width: 820px) {
        .wcfb-mobile-toolbar-toggle {
            display: flex !important;
            position: fixed !important;
            right: 16px !important;
            bottom: 16px !important;
            width: 44px !important;
            height: 44px !important;
            background: var(--wcfb-accent, #c79a3b) !important;
            color: #fff !important;
            border: 0 !important;
            border-radius: 50% !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
            z-index: 99999 !important;
            cursor: pointer !important;
            opacity: 0.85 !important;
            transition: transform 0.2s, opacity 0.2s, visibility 0.2s !important;
        }
        .wcfb-mobile-toolbar-toggle svg {
            width: 24px !important;
            height: 24px !important;
            fill: currentColor !important;
        }
        .wcfb-mobile-toolbar-toggle:active {
            transform: scale(0.92) !important;
            opacity: 1 !important;
        }
        .wcfb-viewer:not(.toolbar-hidden) .wcfb-mobile-toolbar-toggle {
            opacity: 0 !important;
            pointer-events: none !important;
            visibility: hidden !important;
            transform: scale(0.8) !important;
        }
    }

    /* Close buttons: sit above content, never inside reading area */
    .wcfb-viewer-close,
    .wcfb-modal-close {
        position: fixed !important;
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        right: calc(8px + env(safe-area-inset-right, 0px)) !important;
        opacity: 1 !important;
        z-index: 100 !important;
    }

    /* Prevent horizontal page overflow on the whole document while viewer is open */
    html.wcfb-modal-is-open,
    html.wcfb-modal-is-open body {
        overflow-x: hidden !important;
    }
}

/* Extra breakpoint: very narrow phones (<= 420px) — remove all extra chrome */
@media (max-width: 420px) {
    .wcfb-page-count { min-width: 44px !important; padding-right: 6px !important; font-size: 12px !important; }
    .wcfb-toolbar button,
    .wcfb-toolbar-button { min-width: 34px !important; height: 34px !important; padding: 0 4px !important; }
}