body {
    /* min-height ensures the body spans the full viewport */
    min-height: 100vh; 
    width: 100%; /* Explicitly set width */
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
    /* Reverting to flex centering to focus the smaller book */
    display: flex;
    justify-content: center;
    align-items: center;
}
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap');

/* New wrapper to center everything - now responsible for the uniform border */
.flipbook-outer-wrapper {
    display: flex;
    flex-direction: column; /* Stack flipbook and controls vertically */
    justify-content: center;
    align-items: center;
    gap: 60px; /* Increased gap between flipbook and buttons (150% of controls height) */
    /* **NEW:** Apply uniform padding here to create an equal border on all sides */
    padding: 40px; 
}

.flipbook-container {
    /* Changed from column to flex, as controls are now inline */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Keeping sizes fixed, slightly larger than A4 Landscape (5% reduction) */
    width: 1007px; 
    height: 584px; 
    max-width: 100%;
    max-height: 100%;
}

.flipbook-container:fullscreen {
    background-color: white;
    display: flex;
    justify-content: center;
    width: 100%; 
    height: 100%;
}

.flipbook-container:-webkit-full-screen {
    background-color: white;
    display: flex;
    justify-content: center;
    width: 100%; 
    height: 100%;
}

.flipbook-container:-moz-full-screen {
    background-color: white;
    display: flex;
    justify-content: center;
    width: 100%; 
    height: 100%;
}

/* Setting Fullscreen size to a large, fixed proportion */
.flipbook-container:fullscreen .flipbook {
    width: 90vw; 
    height: 90vh; 
}

.flipbook-container:-webkit-full-screen .flipbook {
    width: 90vw;
    height: 90vh;
}

.flipbook-container:-moz-full-screen .flipbook {
    width: 90vw;
    height: 90vh;
}

.flipbook {
    /* Fixed size for the book to be only slightly larger than content (5% reduction) */
    width: 988px;
    height: 556px; 

    perspective: 1500px;
    position: relative;
    /* margin-bottom removed to centralize spacing control in the wrapper */
}

.page {
    width: 100%;
    height:100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1.6s;
    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) */
#page-1 { z-index: 20; }
#page-2 { z-index: 19; }
#page-3 { z-index: 18; }
#page-4 { z-index: 17; }
#page-5 { z-index: 16; }
#page-6 { z-index: 15; }
#page-7 { z-index: 14; }
#page-8 { z-index: 13; }
#page-9 { z-index: 12; }
#page-10 { z-index: 11; }
#page-11 { z-index: 10; }
#page-12 { z-index: 9; }
#page-13 { z-index: 8; }
#page-14 { z-index: 7; }
#page-15 { z-index: 6; }
#page-16 { z-index: 5; }
#page-17 { z-index: 4; }
#page-18 { z-index: 3; }
#page-19 { z-index: 2; }
#page-20 { z-index: 1; }


.flipped {
    transform: rotateY(-180deg);
    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; 
    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%;
    height: auto;
    object-fit: contain;
}

/* NEW: Inline Button Layout */
.controls {
    display: flex;
    gap: 15px;
    margin-top: 30px; /* NEW: Added to push controls down */
    align-items: center;
}
#page-counter {
    font-family: 'Barlow Condensed', sans-serif;
}

#next-btn, #prev-btn, #fullscreen-btn {
    padding: 8px 16px;
    cursor: pointer;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Barlow Condensed', sans-serif;
    transition: background-color 0.2s;
}

#next-btn:hover, #prev-btn:hover, #fullscreen-btn:hover {
    background-color: #f0f0f0;
}

#next-btn:disabled, #prev-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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