/* --- Container for the navigation buttons --- */
.page-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
}

/* --- Bigger buttons with a light orange theme --- */
.nav-button {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px; 
    border-radius: 4px;
    
    /* --- New Color Scheme --- */
    background-color: #FEF5EC; 
    border: 2px solid #F9A873; 
    color: #000000;            

    /* --- Font Style --- */
    font-size: 16px; 

    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* --- Updated hover effect --- */
.nav-button:hover {
    background-color: #F26E21; /* On hover, fill with the original vibrant orange */
    border-color: #F26E21;     /* Make the border match for a solid look */
    color: #ffffff;            /* Text becomes white */
}

/* --- Arrow styling (adjusts automatically to new font size) --- */
.nav-button .arrow {
    font-size: 1.2em;
    line-height: 1;
}

.prev-button .arrow {
    margin-right: 12px; /* A little extra space for the larger size */
}

.next-button .arrow {
    margin-left: 12px;
}

/* --- Styling for a disabled button (updated for new colors) --- */
.nav-button.disabled {
    background-color: #f5f5f5;
    border-color: #ccc;
    color: #aaa;
    pointer-events: none;
    cursor: default;
}