/* ===== PAGINATION COMPONENT STYLES ===== */

/* ===== PAGINATION VARIABLES ===== */
:root {
  --pagination-gap: 1.5rem;
  --pagination-margin-top: 3rem;
  --pagination-padding: 1.5rem 0;
}

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--pagination-gap);
  margin-top: var(--pagination-margin-top);
  padding: var(--pagination-padding);
}

.pagination-btn {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-normal);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.pagination-btn:disabled {
  background: var(--color-gray-300);
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination-info {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}