/* === TV3 Custom Pagination ============================================ */
.tv3-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 395px;
  padding-top: 56px;
  margin: auto;
  line-height: 1;
  color: var(--wp--preset--color--white);
}

.tv3-pagination__prev,
.tv3-pagination__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  text-decoration: none;
  color: var(--wp--preset--color--white);
}
.tv3-pagination__prev.is-disabled,
.tv3-pagination__next.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.tv3-pagination__numbers {
  display: inline-flex;
  align-items: center;
  gap: 40px;
}
.tv3-pagination__number,
.tv3-pagination__dots {
  font-size: 1rem;
  font-weight: 400;
  color: var(--wp--preset--color--white);
  text-decoration: none;
}
.tv3-pagination__number:hover {
  color: var(--wp--preset--color--accent);
}
.tv3-pagination__number.is-current {
  font-weight: 700;
  pointer-events: none;
}
.tv3-pagination__icon {
  display: block;
}

/* --- Chevron hover color (active) --- */
.tv3-pagination__prev:hover .tv3-pagination__icon path,
.tv3-pagination__next:hover .tv3-pagination__icon path {
  fill: var(--wp--preset--color--accent);
}

/* Smoothen the change */
.tv3-pagination__icon path {
  transition: fill 0.15s ease-in-out;
}

/* --- Disabled chevrons: show not-allowed on hover, keep color --- */
.tv3-pagination__prev.is-disabled,
.tv3-pagination__next.is-disabled {
  opacity: 0.35;
}

.tv3-pagination__prev.is-disabled .tv3-pagination__icon path,
.tv3-pagination__next.is-disabled .tv3-pagination__icon path {
  fill: var(--wp--preset--color--white); /* stays white */
}

@media (max-width: 781px) {
  .tv3-pagination {
    padding-top: 42px;
  }
  .tv3-pagination__numbers {
    gap: 32px;
  }
}