body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

/* New wrapper to center everything */
.flipbook-outer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between flipbook and buttons */
}

.flipbook-container {
    /* Changed from column to flex, as controls are now inline */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flipbook {
    /* A4 Landscape Dimensions (approx 297mm x 210mm) */
    width: 674px;
    height: 476px;

    perspective: 1500px;
    position: relative;
    /* Margin to separate from controls, if placed below */
    margin-bottom: 20px;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s; /* 1 second transition time */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    transform-origin: left center;
}

/* Base Layering (Higher Z-index = more forward) */
/* Extended for all 26 pages */
#page-1 { z-index: 26; } /* Changed from 8 to 26 for consistency */
#page-2 { z-index: 25; }
#page-3 { z-index: 24; }
#page-4 { z-index: 23; }
#page-5 { z-index: 22; }
#page-6 { z-index: 21; }
#page-7 { z-index: 20; }
#page-8 { z-index: 19; }
#page-9 { z-index: 18; }
#page-10 { z-index: 17; }
#page-11 { z-index: 16; }
#page-12 { z-index: 15; }
#page-13 { z-index: 14; }
#page-14 { z-index: 13; }
#page-15 { z-index: 12; }
#page-16 { z-index: 11; }
#page-17 { z-index: 10; }
#page-18 { z-index: 9; }
#page-19 { z-index: 8; }
#page-20 { z-index: 7; }
#page-21 { z-index: 6; }
#page-22 { z-index: 5; }
#page-23 { z-index: 4; }
#page-24 { z-index: 3; }
#page-25 { z-index: 2; }
#page-26 { z-index: 1; }


.flipped {
    /* FIX: Reverted to negative rotation. This should make the page swing
       away from the viewer and toward the right. */
    transform: rotateY(-180deg);
    /* Set to 0 to make the page underneath become the cover */
    z-index: 0;
}

.page-front, .page-back {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
}

.page-front {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;
    background-color: white;
    padding: 10px;
}

.page-back {
    background-color: white;
    transform: rotateY(180deg);
}

/* Image constraints and styling */
.page-front img {
    max-width: 100%;
    max-height: 100%; /* Use full height since instructions are off-page */
    height: auto;
    object-fit: contain;
}

/* NEW: Inline Button Layout */
.controls {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

#next-btn, #prev-btn {
    padding: 10px 20px;
    cursor: pointer;
}

/* Remove instruction text styling since it's removed from the page */
.flip-instruction {
    display: none;
}