/* 頁籤內標題 */
.review .productRatingTitle  { padding: 8px 15px; background: #F2F2F2; margin-top: 20px; display: flex; align-items: center;}
.review .productRatingTitle .Title {font: bold 17px/20px var(--primary-font-family); color: #454545; }
.review .productRatingTitle .about{ display: inline-block; height: 20px; width: 15px; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_about_24x24.svg) no-repeat center center; background-size: contain; margin-left: 4px; cursor: pointer;}

/* 指標外容器 */
.review .productRatingBoard { background-color: #fff; padding: 30px; white-space: nowrap;}
.review .RatingBoardInner {display: flex; align-items: center; background-color: #fff; border-radius: 8px;}

/* 指標平均 */
.review .indicatorAvg {text-align: center; margin-right: 50px;}
.review .indicatorAvg .indicatorAvgVal { font: bold 30px/38px var(--primary-font-family); color: #D62872; font-weight: bolder;}

/* 指標 */
.review .indicatorWrapper {flex-grow: 0.65; padding-left: 50px; border-left: solid 1px #CCC;}
.review .indicator {display: flex; justify-content: flex-start; font: 15px/20px var(--primary-font-family); color: #454545;}
.review .indicator:not(:last-child) {margin-bottom: 10px;}
.review .indicator .indicatorTitle {min-width: 60px;}
.review .indicator .indicatorNumber {font-weight: bolder; margin: 0px 0px 0px 0px; width: 40px; text-align: center;}
.review .indicator .likeScale {min-width: 56px; text-align: right;}
.review .indicator .indicatorValue .indicatorValueBar  { display: block; border-radius: 50px; height: 100%; background-image: linear-gradient(to right,#D62872, #FF9100); }
/* 指標數值條 */
.review .indicator .indicatorValue {flex-grow: 1; max-width: 200px; margin: 4px 10px 4px 12px; background: #F2F2F2; border-radius: 50px;}
/* 
.review .indicator .indicatorValue::after { content: ''; display: block; border-radius: 50px; height: 100%; background-image: linear-gradient(to right,#D62872, #FF9100); }
*/
/*
.review .indicator .indicatorValue[data-star="5"]::after {width: 100%; }
.review .indicator .indicatorValue[data-star="4"]::after {width: 80%; }
.review .indicator .indicatorValue[data-star="3"]::after {width: 60%; }
.review .indicator .indicatorValue[data-star="2"]::after {width: 40%; }
.review .indicator .indicatorValue[data-star="1"]::after {width: 20%; }
.review .indicator .indicatorValue[data-star="0"]::after {width: 0%; }
*/
.review .indicator .indicatorValue[data-star="0~5"]::after{ --width: calc(var(--stars) * 20%); width: var(--width);
}
/* 篩選器外容器 */
.review .productRatingSelector { position: relative; z-index: 1; padding: 18px 15px; box-shadow: 0 10px 10px rgba(0,0,0,0.05); }
.review .productRatingSelector .SelectorInner {padding: 0px; display: flex; white-space: nowrap; gap: 12px;}
.review .productRatingSelector .SelectorOption { display: inline-flex; gap: 6px; text-align: center; font: 15px/18px var(--primary-font-family); color: #454545; cursor: pointer;}
.review .productRatingSelector .SelectorOption::before { display: inline-block; width: 18px; height: 18px; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/checkbox_01.svg) no-repeat center; background-size: 100% 100%; content: "";}
.review .productRatingSelector .SelectorOption.active::before { background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/checkbox_03.svg) no-repeat center; background-size: 100% 100%;}


/* 平均星星 */
.productRatingBoard .productRatingStarGroup {height: 24px;margin: 0;padding: 0;display: inline-block;vertical-align: middle;}
.productRatingBoard .productRatingStar {display: inline-block;width: 30px;height: 30px;vertical-align: middle;background-repeat: no-repeat;background-size: 30px 30px;background-position: center center;}
.productRatingBoard .productRatingStar.starOutline {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_outline_24x24.svg);}
.productRatingBoard .productRatingStar.starFull {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_full_24x24.svg);}
.productRatingBoard .productRatingStar.starHalf {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_half_24x24.svg);}





/* 評論卡片 */
.reviewCard { position: relative; background-color: #fff; padding: 20px; border-bottom: 1px solid #CCC;}
.reviewCard .reviewCardInner { display: grid; grid-gap: 12px;}

/* 評論人資訊 */
.InfoContainer {display: flex; width: 100%;}
.InfoContainer .InfoInner .Name { font: bolder 15px/20px var(--primary-font-family); color: #454545; width: 70px; padding: 0; margin-right: 20px; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;}

.InfoContainer .InfoInner {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.InfoContainer .InfoInner .Info {justify-self: flex-start; }
.InfoContainer .InfoInner .Info .Date { font: 13px/20px var(--primary-font-family); color: #888; }

.InfoContainer .InfoInner .RatingStarGroup { display: flex; flex-wrap: nowrap;}
.InfoContainer .InfoInner .RatingStarGroup .RatingStar {display: inline-block;width: 20px;height: 20px;background-repeat: no-repeat;background-size: 20px 20px;background-position: center center;}
.InfoContainer .InfoInner .RatingStarGroup .RatingStar.starFull {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_full_24x24.svg);}
.InfoContainer .InfoInner .RatingStarGroup .RatingStar.starHalf {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_half_24x24.svg);}
.InfoContainer .InfoInner .RatingStarGroup .RatingStar.starOutline {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_outline_24x24.svg);}

.InfoContainer .InfoInner .like-box { flex: 0 0 60px; margin-left: 20px; }
.InfoContainer .InfoInner .like-box .like-btn { display: flex; }
.InfoContainer .InfoInner .like-box .like-icon { display: inline-block; width: 18px; height: 18px; background-image: url(/ecm/img/cmm/mobile/goods/review/thumbs-up.svg); background-size: 85%; background-repeat: no-repeat; background-position: center; margin-right: 6px;}
.InfoContainer .InfoInner .like-box .like-icon.pink-like { background-image: url(/ecm/img/cmm/mobile/goods/review/solid-thumbs-up.svg); }
.InfoContainer .InfoInner .like-box .like-quantity { font-family: var(--primary-font-family); font-size: 13px; line-height: 18px; color: #888888; }

.Spec { padding-left: 12px; font: 13px/20px var(--primary-font-family); color: #888; flex-grow: 1;}
.Spec .SpecValue { overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical; }

/* 上傳圖片/影片 */
.PhotoContainer .PhotoItemBox { display: flex; flex-wrap: nowrap; overflow-x: auto; }
.PhotoContainer .PhotoItem {position: relative;  background-color: #000 ; border-radius: 4px; box-sizing: border-box; max-width: 80px; max-height: 80px; display: flex; justify-content: center; cursor: pointer;}
.PhotoContainer .PhotoItem:not(:last-child) { margin-right: 10px;}
.PhotoContainer .PhotoItem .PhotoItemInner { overflow: hidden;  border-radius: 4px; min-width: 80px; max-width: 80px; min-height: 80px; max-height: 80px; display: inline-flex; justify-content: center; align-items: center;}
.PhotoContainer .PhotoItem .PhotoItemInner img { max-width: 80px; max-height: 80px; }
.PhotoContainer .PhotoItem.VideoType::after  { background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/video_icon2.png) no-repeat center center; background-size: 20px 20px;; display: inline-block; height: 100%; width: 100%; border-radius: 0px; content: ''; position: absolute; right: 0; bottom: 0; }





/* 評論/回覆 */
.CommentContainer { position: relative; font: 15px/20px var(--primary-font-family); color: #454545;}
.CommentContainer .Comment { margin: 0; padding: 0; }
.CommentContainer .VireAllBtn { position: absolute; right: 0; bottom: 0; padding-left: 10px; background-image: linear-gradient(to right, rgba(255,255,255,0.35) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%); }
.CommentContainer .VireAllBtn span { color: #027BFF; }


/* 廠商回覆 */
.ReplyContainer { position: relative; padding: 12px; display: grid; grid-gap: 4px; background: #F2F2F2; border-radius: 8px; margin:6px 20px 0 20px; color: #454545; }
.ReplyContainer::before { content: ""; display: inline-block; width: 0; height: 0; border-width: 0 8px 10px 8px; border-style: solid; border-color: transparent transparent #F2F2F2 transparent; position: absolute; top: -10px; left: 30px;  }
.ReplyContainer .InfoInner .Reply { font: bold 15px/20px var(--primary-font-family);  }
.ReplyContainer .InfoInner .Date { font: 13px/20px var(--primary-font-family); color: #888; }


/* 尚無評價 */
.noData { display: flex; flex-direction: column; justify-content: center; align-items: center; font: 13px/20px var(--primary-font-family); color: #454545; min-height: 360px;}
.noData .momoco {display: inline-block; min-width: 110px; min-height: 110px; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/momoco_nonedata.png) no-repeat center center; background-size: cover; margin-bottom: 10px; }




/* 有外容器時 */
.review .productRating {display: inline-block;background-color: #fff; box-sizing: border-box;height: 30px;padding: 0; margin:0; position: relative;}
.review .productRating:after { content: ''; position: absolute;top: 0px;right: 0px; width: 0px;height: 0px; display: none; background: none}
.review .productRating .reviewCard {margin: 0px; background-color: #fff; border-radius: 0px; padding: 10px 0px 12px 0px; display: grid; grid-gap: 10px;}



/* 翻頁區 */
.review .pageArea {width:100%; height:42px; line-height:42px; overflow:hidden; display:inline-block}
.review .pageArea.topPage {height:35px; line-height:35px; border:0px}
.review .pageArea ul {display: flex; align-items:center; width:530px; margin:0px 0px 0px 10px; padding:0px}
.review .pageArea.topPage ul {display:none}
.review .pageArea li,
.review .pageArea dt,
.review .pageArea dd {height:24px; padding:0px; display:inline;}
.review .pageArea li a,
.review .pageArea dd a {font-family:Verdana; font-size:13px; color:#434343; padding:2px 5px 3px; border:1px solid #ABABAB; text-decoration:none}
.review .pageArea dl {float:right; width:400px; margin:0px; padding:0px; text-align:right}
.review .pageArea li a:hover,
.review .pageArea .selected,
.review .pageArea dd a {background-color:#4A9AE7; color:#FFFFFF}
.review .pageArea dd a:hover {background-color:#FFFFFF; color:#000000}
.review .pageArea dt,
.review .pageArea b {font-size:13px; font-family:Verdana; margin-left:5px}
.review .pageArea span {font:13px/43px Helvetica; color:#666666}
.review .pageArea dt .totalTxt {color:#666666; display:none}
.review .pageArea dt .totalTxt b {font:13px/43px Helvetica; margin:0px 5px}
.review .pageArea.topPage .totalTxt {display:inline-block}
.review .pageArea dt,
.review .pageArea dd {margin:0px 0px 0px 3px}



/* 浮層 */
.ratingImgFloat {display: none; place-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 1001;}
.ratingImgFloat .innerArea  {position: relative; height: 450px; width: 800px; background: #000;}
.ratingImgFloat .innerArea .closeBtn {position: absolute; width: 28px; height: 28px; top: 4px; right: 4px; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_fork_24x24.svg) no-repeat center; background-size: 100% 100%; cursor: pointer; z-index: 10;}
.ratingImgFloat .innerArea .bigImgblock { height: 100%; }
.ratingImgFloat .innerArea .bigImgblock .swiper-slide { position:relative; text-align: center; }
.ratingImgFloat .innerArea .bigImgblock .swiper-slide.video::before {content: "";  display: inline-block;position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/video_icon2.png) no-repeat center; background-size: 60px 60px;}
.ratingImgFloat .innerArea .bigImgblock .swiper-slide img { height: 100%; }

.ratingImgFloat .innerArea .imgList { padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; gap: 20px; width: 100%; justify-content: center; }
.ratingImgFloat .innerArea .imgList .imgListOption { display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; opacity: 1; height: 80px; width: 80px; border-radius: 4px; text-align: center; background: black;}
.ratingImgFloat .innerArea .imgList .imgListOption.video::before {content: "";  display: inline-block;position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/video_icon2.png) no-repeat center; background-size: 20px 20px;}

.ratingImgFloat .innerArea .imgList .imgListOption img { max-height: 100%; max-width:100%; }
.ratingImgFloat .innerArea .imgList .imgListOption.swiper-pagination-bullet-active { outline: 2px solid #D62872 ; }


