/* ============================================================
   vp-ui.css — shared COMPONENT overrides (single source).
   Linked AFTER vp-tokens.css so it wins the cascade. CSS-only:
   it never touches markup or JS, and deletes nothing, so it
   can't break behaviour. Change a component look here once and
   it updates everywhere the component appears.
   ============================================================ */

/* --- Pagination · prev / next -----------------------------------
   One look for stepping through a sequence. Was two styles:
   the iteration walkthrough (transparent outline, 4px) and the
   image modal (white-tint fill, 6px, bold). Unified to a single
   ghost button on the family's 8px radius. Layout untouched. */
.vp-iter-walk-nav-btn,
.vp-img-modal-navbtn {
  background: transparent;
  border: 1px solid var(--vp-line-2, rgba(237,233,225,0.18));
  color: var(--vp-ink-dim, #C8C2B5);
  border-radius: var(--r-base, 8px);
  padding: 10px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.vp-iter-walk-nav-btn:hover:not(:disabled),
.vp-img-modal-navbtn:hover:not(:disabled) {
  border-color: var(--vp-highlight, #E5B068);
  color: var(--vp-ink, #EDE9E1);
  background: rgba(229,176,104,0.06);
}
.vp-iter-walk-nav-btn:disabled,
.vp-img-modal-navbtn:disabled {
  opacity: 0.35;
  cursor: default;
}
.vp-iter-walk-nav-btn:focus-visible,
.vp-img-modal-navbtn:focus-visible {
  outline: 2px solid var(--vp-highlight, #E5B068);
  outline-offset: 3px;
}