/* --- EXISTING CSS from index.php --- */

body{margin:0;font-family:Arial;background:#f0f0f0}

/* TOP BAR */
/* --- Desktop/Default Styles --- */
.top-bar {
    background: #d0fab9;
    color: #080808;
    padding: 10px 10px;
    display: flex; 
    justify-content: space-between;
    align-items: center;
}


.top-bar .message-container {
    /* Ensure the fallback message doesn't stretch the desktop layout */
    max-width: 400px;
    margin-bottom: 5px;
}

.header-logo {
    /* Desktop/Default Fixed Sizes */
    width: 380px;
    height: 100px;
    padding-left: 10px;
    max-width: none; /* Resetting any previous max-width to use the 380px on desktop */
    max-height: none;
}

.form-class {
        /* 3. Date picker */
        padding: 10px; /* Adjust margin for mobile stacking */
        text-align: center; /* Ensure form content is centered */
    }

/* --- Responsive/Mobile Styles (Screen width 600px or less) --- */
@media (max-width: 600px) {
    .top-bar {
        /* Mobile Layout: Stack items vertically */
        flex-direction: column;
        /* Center all items horizontally */
        align-items: center; 
        /* padding: 10px;  */
        /* Adjust padding for smaller screens */
    }

    .header-logo {
        /* 1. Image in the first part */
        width: 85%; /* Make the logo take up 85% of the screen width */
        height: auto; /* CRUCIAL: Maintain aspect ratio */
        max-width: 300px; /* Prevent it from getting too big on small tablets */
    }

    .top-bar .message-container {
        /* 2. Fallback message (if present) */
        width: 85%; /* Match the logo width */
        margin-bottom: 2px; /* Space below the message */
    }

    .form-class {
        /* 3. Date picker */
        margin: 2px 0 0 0; /* Adjust margin for mobile stacking */
        text-align: center; /* Ensure form content is centered */
    }
}

/* MAIN */
.main{
    max-width:auto;
    margin:auto;
    background:#fff;
    padding:15px;
    text-align:center
    
}

@media (max-width: 600px) {
    .main{
    max-width:auto;
    margin:auto;
    background:#fff;
    padding:2px;
    text-align:center
    
}
}


/* FLIP CONTAINER */
#paper-wrapper{
    perspective:1200px;
    display:inline-block;
}

#paper-view{
    transition:transform .6s ease, opacity .6s ease;
    /* Default: Flips from left for "next" page */
    transform-origin:left center; 
}

/* Class for flipping to the next page (Default behavior) */
#paper-view.flip{
    transform:rotateY(-90deg);
    opacity:0;
} 

/* *** NEW CLASS: Flips from right for "previous" page *** */
#paper-view.flip-reverse{
    /* Override transform-origin to right for a "backwards" flip */
    transform-origin:right center; 
    /* Use positive rotation to achieve the opposite effect */
    transform:rotateY(90deg);
    opacity:0;
} 

#paper-view img{max-width:100%}

/* ... (Keep all existing styles, including the @media query) ... */

/* THUMBNAILS */
.bottom-bar{
    display:flex;
    overflow-x:auto;
    background:#fff;
    padding:5px;
    border-top:2px solid #007bff;
    align-items:center
}

@media (max-width: 600px) {
.bottom-bar{
    display:flex;
    overflow-x:auto;
    background:#fff;
    border-top:2px solid #007bff;
    align-items:center
}

.bottom-text {
    text-align: right; 
    font-size: 1.2rem;
    margin: 5px; 
    display: block;
    color: #080808;
}

.site-footer{
    background:#d0fab9;
    color:#080808;
    text-align:center;
    padding:5px;
}
}


.thumb{text-align:center;margin-right:10px;color:#080808;border:2px solid transparent;padding:3px;cursor:pointer}
.thumb img{width:60px;height:100px;object-fit:cover}
.thumb.active{border-color:#007bff;background:#e6f0ff}

/* FOOTER */
.bottom-text {
    text-align: right; 
    font-size: 1.2rem;
    margin: 5px; 
    display: block;
    color: #080808;
}

.site-footer{
    background:#d0fab9;
    color:#080808;
    text-align:center;
    padding:5px;
}

/* --- NEW FLOATING BUTTON STYLES --- */

/* Container for relative positioning */
#paper-wrapper {
    position: relative; 
    /* Add padding to prevent content from hiding behind buttons */
    padding: 0 40px; 
}

/* Base style for floating buttons */
.floating-nav-btn {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    width: 30px; /* Size of the circle */
    height: 30px;
    border-radius: 50%; /* Make it a circle */
    background-color: #e50914; /* Red circle */
    border: none;
    cursor: pointer;
    z-index: 100; /* Ensure it stays above other content */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Position for the right button */
.right-side {
    right: 3px; 
}

/* Position for the left button */
.left-side {
    left: 3px; 
}

/* Arrow styling (white chevron) */
.arrow {
    border: solid white;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
}

.right-arrow {
    transform: rotate(-45deg); /* Points right */
    margin-left: 2px;
}

.left-arrow {
    transform: rotate(135deg); /* Points left */
    margin-right: 2px;
}

/* Utility class to hide the button */
.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disables click interactions when hidden */
}