/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pagination Styling Enhancements */
.pagination {
  /* Enhanced spacing and visual hierarchy */
  display: inline-flex;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.pagination a,
.pagination span {
  /* Smooth transitions for all pagination elements */
  transition: all 0.2s ease-in-out;
  border: 1px solid rgb(209 213 219);
  font-weight: 500;
}

.pagination a:hover {
  /* Enhanced hover states */
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: var(--color-primary-300, rgb(147 197 253));
}

.pagination .current {
  /* Current page styling with primary brand colors */
  background: linear-gradient(135deg, var(--color-primary-600, rgb(37 99 235)) 0%, var(--color-primary-700, rgb(29 78 216)) 100%);
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39);
  transform: translateY(-1px);
}

.pagination a:focus,
.pagination span:focus {
  /* Enhanced focus states for accessibility */
  outline: 2px solid var(--color-primary-600, rgb(37 99 235));
  outline-offset: 2px;
  z-index: 10;
}

/* Loading state for pagination (optional enhancement) */

/* Gradient Animation for "What is AI Score?" Button */
@keyframes gradient-x {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 3s ease infinite;
}
.pagination.loading {
  opacity: 0.7;
  pointer-events: none;
}

.pagination.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid var(--color-primary-600, rgb(37 99 235));
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile-specific pagination improvements */
@media (max-width: 640px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }
  
  .pagination a,
  .pagination span {
    min-width: 2.5rem;
    text-align: center;
  }
}