/* =====================================
   評分組件 (Rating)
   對應 Figma node-id=2-310
   ===================================== */

/* 評分容器 */
.rating {
  display: flex;
  align-items: center; /* 垂直置中對齊 */
  width: 134px;
  height: 30px;
}

/* 左側：評分數字區塊 */
.rating__score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: 66px;
  height: 30px;
  padding: 0 4.92px 0 8px;
  background: #E42112;
  border-radius: 100px 0 0 100px; /* 左側圓角 */
  box-sizing: border-box;
}

/* 星星圖示 */
.rating__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
}

/* 評分數字 */
.rating__number {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.67em; /* 30px */
  color: #FFFFFF;
  text-align: center;
}

/* 右側：星星評級區塊 */
.rating__stars {
  position: relative;
  width: 68px;
  height: 30px;
  padding-left: 6px;
  background: #FFFFFF;
  border-radius: 0 100px 100px 0; /* 右側圓角 */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* 星星容器 */
.rating__stars-wrapper {
  position: relative;
  width: 56px;
  height: 10px;
  padding-right: 3.14px;
}

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

/* 前景星星（黃色，使用 CSS mask） */
.rating__stars-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;
}

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

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

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