/**
 * 無限スクロール共通スタイル
 */

/* ページラッパー */
.listitempage {
  margin-bottom: 20px;
}

/* ローディングインジケーター */
.loading-indicator {
  display: none !important;
  text-align: center;
  padding: 40px 20px;
  margin: 20px 0;
  position: relative;
  width: 100%;
  min-height: 80px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.loading-indicator.show {
  display: block !important;
}

.loading-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #E94B08;
  border-radius: 50%;
  animation: infiniteScrollSpin 1s linear infinite;
  margin-bottom: 10px;
}

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

.loading-indicator p {
  color: #666;
  font-size: 14px;
  margin: 0;
  font-weight: 500;
}

/* ページネーションリンク */
.pagination-links {
  text-align: center;
  margin: 40px 0;
  padding: 20px 0;
  width: 100%;
  position: relative;
  min-height: 60px;
}

.pagination-links.hidden {
  display: none !important;
}

.next-page-link {
  display: inline-block;
  padding: 12px 24px;
  background: #E94B08;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 700;
  margin-bottom: 20px;
  transition: background 0.3s;
}

.next-page-link:hover {
  background: #d43f00;
}

.page-numbers {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.page-number {
  display: inline-block;
  padding: 8px 12px;
  color: #1C1A10;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s;
}

.page-number:hover {
  background: #f5f5f5;
}

.page-number.active {
  background: #1C1A10;
  color: #fff;
  border-color: #1C1A10;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .page-numbers {
    gap: 4px;
  }
  
  .page-number {
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .next-page-link {
    width: 100%;
    max-width: 300px;
  }
}