/* New whole-screen flexbox container */
.whole-screen {
    display: flex;
    flex-direction: column; /* Column layout */
    justify-content: space-between;
    height: 100vh; /* Full viewport height */
    width: 100%;
}

/* book-top flexbox with collapse icon */
.book-top {
    width: 100%;
    padding: 10px; /* Adjusted padding */
    background-color: #f5f5f5; /* Example background color */
    display: flex;
    justify-content: flex-end; /* Align collapse icon to the right */
    position: relative;
}

/* Styling for collapse icon */
.collapse-icon {
    font-size: 1.5rem;
    color: #333;
    text-decoration: none;
    padding-right: 10px; /* Adjust padding */
}

/* Hover effect for collapse icon */
.collapse-icon:hover {
    color: #007bff; /* Change color on hover */
}

/* Book container with pages inside whole-screen */
.book-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    height: 100%; /* 90 Adjust height to accommodate TTS container */
    margin: 0 auto;
    position: relative;
}

/* Individual page styling for desktop/tablet */
.page {
    position: relative;
    width: 50%; /* Paired pages take 50% of the width each for desktop/tablet */
    height: 100%; /* Full height of the book container */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 1px; /* Adjusted padding */
    box-sizing: border-box;
    overflow: hidden; /* Ensure overflow content stays within bounds */
}

/* Content inside each page */
.page-content {
    height: calc(100% - 3%); /* Deduct height for the page number */
    overflow-y: auto; /* Enable scrolling if content exceeds page height */
    word-wrap: break-word; /* Prevent long words from overflowing */
}

/* Navigation arrows closer to the edge */
.book-nav-left, .book-nav-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    cursor: pointer;
    color: #f0c14b; /* Yellow arrows */
    padding: 5px; /* Adjusted padding for navigation arrows */
}

/* Left arrow positioning closer to the left edge */
.book-nav-left {
    left: -20px; /* Move closer to the edge */
}

/* Right arrow positioning closer to the right edge */
.book-nav-right {
    right: -20px; /* Move closer to the edge */
}

/* Disabled arrows (when at first or last page) */
.book-nav-left.disabled, .book-nav-right.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Page number styling within book.css */
.page-number {
    font-size: 0.8rem; /* Increase the font size to 1rem */
    text-align: center; /* Center-align the text */
    color: #333; /* Set text color, adjust if needed */
    width: 20px; /* Set a fixed width */
    height: 20px; /* Set a fixed height */
    line-height: 40px; /* Align text vertically */
    background-color: #ADD8E6; /* Light blue background */
    border-radius: 50%; /* Make it circular */
    position: absolute; /* Position absolutely within the parent */
    bottom: -2%; /* Place it near the bottom of the parent */
    right: 50%; /* Place it near the right of the parent */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

}

/* Page number container styling within book.css */
.page-number-container {
    position: absolute;
    width: 100%; /* Full width for proper centering */
 /* Positioned near the bottom */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center; /* Center horizontally */
}


/* Mobile-specific layout */
@media (max-width: 768px) {
    .book-container {
        flex-direction: column;
        height: 90vh; /* Adjust to 90% of the viewport */
        width: 100%; /* Ensure full width for mobile */
    }

    .page {
        width: 100%; /* Full width for single-page layout on mobile */
        height: 95%; /* Page takes 95% of the screen height */
    }

    .tts-container {
        height: 10%; /* TTS container takes 10% of the screen height for mobile */
        width: 100%; /* Ensure TTS container is the same width as the page */
    }
}

/* TTS container moved out of book-container into whole-screen */
.tts-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;   /* Full width */
    height: 10vh; /* TTS container takes 10% of the viewport height */
    background-color: blue; /* Blue background for TTS container */
}

/* Wrapper for the TTS button */
.tts-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: yellow; /* Yellow background for the TTS button */
}

/* Styling the play/pause button */
.tts-button {
    font-size: 2rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: white;
}

/* Play/pause icon styling */
.tts-button i {
    font-size: 3rem;
    color: white;
}

/* Slightly enlarge icon when playing */
.tts-button i.playing {
    transform: scale(1.2);
}