/* Media Queries */
@media screen and (max-width: 1024px) {
    #flipbook {
        height: 88vh;
        margin: 5px auto;
    }
}


@media screen and (max-width: 768px) {
    #flipbook {
        height: 90vh; /* Increased from 95vh */
    }


    .cover, .left-page, .right-page {
        height: 100%; /* Ensure full height */
        overflow: visible; /* Allow content to expand */
    }

    .inner-page {
        height: auto; /* Allow height to adjust to content */
        min-height: calc(100% - 20px); /* Minimum height */
        max-height: none; /* Remove max-height restriction */
        overflow-y: auto;
    }

    .cover-overlay-content,
    .left-overlay-content,
    .right-overlay-content {
        height: auto; /* Allow height to adjust to content */
        min-height: 100%; /* Ensure minimum height */
        overflow-y: auto;
        padding-bottom: 30px; /* Add more bottom padding for content */
    }

    /* Ensure content is visible */
    .page-content {
        min-height: 100%;
        padding-bottom: 30px; /* Add more bottom padding */
    }
    #button-wrapper {
        padding: 5px; /* Reduced padding */
    }

    /* Reduce font sizes slightly to fit more content */
    p, ul li {
        font-size: clamp(0.9rem, 1.2vw, 1.2rem);
        line-height: 1.2;
    }

}


/* Additional mobile optimization */
@media screen and (max-width: 480px) {
    #flipbook {
        height: 92vh; /* Increased from 98vh */
        margin: 2px auto;
        width: 99%;
    }


    /* Adjust padding and margins for better space usage */
    .inner-page {
        padding: 8px;
        margin: 3px;
        height: auto; /* Allow content to determine height */
        min-height: calc(100% - 16px); /* Account for reduced padding */
    }

    .cover-overlay-content,
    .left-overlay-content,
    .right-overlay-content {
        padding: 5%;
        padding-bottom: 40px; /* Extra padding at bottom for small screens */
    }

    /* Reduce font sizes slightly to fit more content */
    p, ul li {
        font-size: clamp(0.6rem,1vw, 0.8rem);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(0.85rem, 2.2vw, 1.3rem);
        margin-top: 6px;
        margin-bottom: 6px;
    }
    #button-wrapper {
        padding: 3px;
    }

}

/* Touch Device Optimization */
@media (hover: none) {
    #button-wrapper button:hover {
        transform: none;
    }

    .inner-page {
        -webkit-tap-highlight-color: transparent;
    }
}