/* === form-star-rating.css === */

/* デモ内の星コンポーネントのスタイル */
.star-rating-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 星を横並びにして、コンテナへのイベント委譲でまとめて制御する */
.star-rating {
  display: flex;
  gap: 4px;
  cursor: pointer;
}

.star {
  font-size: 40px;
  color: #D0D7E0;
  user-select: none;
  line-height: 1;
  transition: color 0.1s;
}

/* filled: 確定済みの評価 / hover: ホバー中の仮プレビュー */
.star.filled,
.star.hover {
  color: #F5C518;
}

.star-rating-label {
  font-size: 14px;
  color: #8A9BAE;
  margin: 0;
}

.star-clear-btn {
  padding: 6px 20px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, border-color 0.15s;
}

.star-clear-btn:hover:not(:disabled) {
  background: #F4F6F9;
  border-color: #9AA5B4;
}

/* 未選択時はクリアボタンを薄くして操作不能にする */
.star-clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .star { font-size: 32px; }
}