/*common-star-rating.css*/
.star-rating {
  display: inline-flex;
  font-size: 2rem;
  color: #ccc;
}

.star {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  transition: transform 0.2s ease;
}

/* 星ホバー時に全体を拡大する（星単位） */
.star:hover {
  transform: scale(1.3);
  z-index: 2;
}

/* 半星を星内に配置 */
.half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/* 左半星（左に配置） */
.half.left {
  left: 0;
}

/* 右半星（右に配置し反転） */
.half.right {
  right: 0;
  transform: scaleX(-1);
}

/* 星の実際の記号を配置 */
.half::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
}

/* 選択・ホバー時の色 */
.half.hovered::before,
.half.selected::before {
  color: #FFD700;
}

/* 通常の星の色 */
.half::before {
  color: #ccc;
}

/* 一時的に選択解除された星をグレーに戻す */
.half.selected-temp-remove::before {
  color: #ccc ;
}