/* 星評価コンポーネントのスタイル */

/* 星ボタンのアニメーション */
.star-rating-button {
  position: relative;
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: all 150ms ease;
  cursor: pointer;
}

.star-rating-button:hover {
  transform: scale(1.1);
}

.star-rating-button:focus {
  outline: 2px solid #facc15;
  outline-offset: 2px;
}

/* 星アイコンのスタイル */
.star-icon {
  font-size: 1.875rem;
  line-height: 1;
  transition: all 150ms ease;
  display: inline-block;
}

/* Tailwindクラスの直接定義（強制適用） */
.star-icon.text-yellow-400 {
  color: #FBBF24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.star-icon.text-gray-300 {
  color: #D1D5DB !important;
}

/* アクティブな星（選択済み） */
.star-icon.active {
  color: #facc15;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
  animation: star-pulse 0.3s ease;
}

/* 非アクティブな星 */
.star-icon.inactive {
  color: #d1d5db;
}

/* ホバー時の星 */
.star-icon.hover {
  color: #fbbf24;
  transform: scale(1.15);
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
}

/* 星が選択されたときのアニメーション */
@keyframes star-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 評価値表示のスタイル */
.rating-display {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: #fef3c7;
  border-radius: 0.375rem;
  font-weight: 700;
  color: #92400e;
  margin-left: 0.5rem;
  transition: all 150ms ease;
}

.rating-display.updating {
  animation: display-fade 0.2s ease;
}

@keyframes display-fade {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 星評価コンテナ */
.star-rating-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ヘルプテキスト */
.star-rating-help {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
  font-style: italic;
}

/* フォーカス時のハイライト */
.star-rating-container:focus-within {
  border-radius: 0.5rem;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .star-icon {
    font-size: 1.5rem;
  }
  
  .star-rating-button {
    padding: 0.125rem;
  }
}