/* =====================================
   純星星組件 (Star)
   對應 star.html

   尺寸：52.86×10
   用途：詳情頁、卡片等需要純星星顯示的地方
   ===================================== */

/* 星星容器 */
.star {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 數字與星星之間的間距 */
  height: 10px;
}

/* 評分數字（可選） */
.star__number {
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #E42112; /* 紅色 */
  font-weight: 400;
  flex-shrink: 0;
}

/* 星星包裝器 */
.star__wrapper {
  position: relative;
  width: 52.86px;
  height: 10px;
}

/* 背景星星（灰色）*/
.star__bg {
  display: block;
  width: 52.86px;
  height: 10px;
}

/* 前景星星（黃色，使用 CSS mask） */
.star__fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 52.86px;
  height: 10px;
  background: #F5BA08; /* 黃色填充 */
  /* 使用灰色星星圖片作為 mask */
  -webkit-mask-image: url('../../images/rating/stars_grey.svg');
  -webkit-mask-size: 52.86px 10px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-image: url('../../images/rating/stars_grey.svg');
  mask-size: 52.86px 10px;
  mask-repeat: no-repeat;
  mask-position: 0 0;
}

.star__fg-img {
  display: none; /* 不再使用 img 標籤 */
}

/* 動態寬度 class（根據評分設定寬度） */
.star__fg[data-score="10.0"] { width: 52.86px; } /* 5.0 星 */
.star__fg[data-score="9.9"] { width: 52.33px; }
.star__fg[data-score="9.8"] { width: 51.80px; }
.star__fg[data-score="9.7"] { width: 51.27px; }
.star__fg[data-score="9.6"] { width: 50.75px; }
.star__fg[data-score="9.5"] { width: 50.22px; }
.star__fg[data-score="9.4"] { width: 49.69px; }
.star__fg[data-score="9.3"] { width: 49.16px; }
.star__fg[data-score="9.2"] { width: 48.63px; }
.star__fg[data-score="9.1"] { width: 48.10px; }
.star__fg[data-score="9.0"] { width: 47.57px; } /* 4.5 星 */
.star__fg[data-score="8.9"] { width: 47.04px; }
.star__fg[data-score="8.8"] { width: 46.52px; }
.star__fg[data-score="8.7"] { width: 45.99px; }
.star__fg[data-score="8.6"] { width: 45.46px; }
.star__fg[data-score="8.5"] { width: 44.93px; }
.star__fg[data-score="8.4"] { width: 44.40px; }
.star__fg[data-score="8.3"] { width: 43.87px; }
.star__fg[data-score="8.2"] { width: 43.34px; }
.star__fg[data-score="8.1"] { width: 45.36px; } /* Figma 實際值 */
.star__fg[data-score="8.0"] { width: 42.29px; } /* 4.0 星 */
.star__fg[data-score="7.9"] { width: 41.76px; }
.star__fg[data-score="7.8"] { width: 41.23px; }
.star__fg[data-score="7.7"] { width: 40.70px; }
.star__fg[data-score="7.6"] { width: 40.17px; }
.star__fg[data-score="7.5"] { width: 39.65px; }
.star__fg[data-score="7.4"] { width: 39.12px; }
.star__fg[data-score="7.3"] { width: 38.59px; }
.star__fg[data-score="7.2"] { width: 38.06px; }
.star__fg[data-score="7.1"] { width: 37.53px; }
.star__fg[data-score="7.0"] { width: 37.00px; } /* 3.5 星 */
/* 更低分數可以繼續添加... */

/* JavaScript 動態計算寬度的備用方案 */
/* width = (score / 10) * 52.86 */