/* ============================================================================
   PAGE CONTROLS COMPONENT
   ============================================================================
   
   Footer navigation controls for document viewer.
   Includes previous/next buttons, page indicator, and jump-to-page input.
   
   ============================================================================ */

/* ============================================================================
   VIEWER FOOTER
   ============================================================================ */

.viewer-footer {
    margin-top: 20px;
}


/* ============================================================================
   PAGE CONTROLS CONTAINER
   ============================================================================ */

.page-controls {
    background: var(--color-white);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}


/* ============================================================================
   NAVIGATION BUTTONS
   ============================================================================ */

.nav-button {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--font-primary);
}

.nav-button:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.nav-button:disabled {
    background: #bdc3c7;  /* TODO: Add --color-nav-button-disabled to variables */
    cursor: not-allowed;
}


/* ============================================================================
   PAGE INFO
   ============================================================================ */

.page-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-indicator {
    font-size: 1.125rem;
    direction: rtl;
}


/* ============================================================================
   PAGE JUMP (Jump-to-page input)
   ============================================================================ */

.page-jump {
    display: flex;
    gap: 10px;
}

.page-jump input {
    width: 80px;
    padding: 8px;
    border: 1px solid #bdc3c7;  /* TODO: Add --color-input-border to variables */
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
}

.page-jump button {
    background: var(--color-goldenrod);
    color: var(--color-white);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-primary);
}

.page-jump button:hover {
    background: var(--color-primary);
}