/* Product Review Styler v1.2.20 (CSS)
   修复点：
   1) 评论层右上角关闭按钮：去掉背景/边框，靠右贴边，更美观；并确保在遮罩之上可点击
   2) 配合 JS：避免在第 5 颗星右侧空白区误触高亮（增加 last-child 右外距归零，减小“空白热点”）
   其余已存在功能保持：头部/列表对齐、移动端堆叠、评论三列、去斜体等
*/

/* ===== 变量（保持原有） ===== */
:root{
  --prs-star-size:22px;
  --prs-box-size:60px;
  --prs-box-radius:5px;
  --prs-border:1px solid rgba(0,0,0,.12);
  --prs-text-muted:#6b7280;
  --prs-divider:1px solid #e5e7eb;
  --prs-anim:180ms ease;

  --prs-avatar-size:60px;
  --prs-namecol:240px;
  --prs-col-gap:20px;

  --prs-review-extra-gap:10px;
}
@media (max-width: 767.98px){
  :root{
    --prs-box-size:50px;
    --prs-avatar-size:48px;
    --prs-col-gap:12px;
    --prs-namecol:1fr;
    --prs-review-extra-gap:0px;
  }
}

/* ===== 头部（省略，保持原样） ===== */
#reviews .prs-headerwrap,
.woocommerce-Tabs-panel--reviews .prs-headerwrap{ margin:16px 0 14px; padding-bottom:14px; border-bottom:var(--prs-divider) }
#reviews .prs-header,
.woocommerce-Tabs-panel--reviews .prs-header{
  display:grid;
  grid-template-columns: minmax(0, calc(var(--prs-avatar-size) + var(--prs-col-gap) + var(--prs-namecol))) 1fr;
  column-gap:28px; align-items:flex-start;
}
@media (max-width: 920px){
  #reviews .prs-header,
  .woocommerce-Tabs-panel--reviews .prs-header{ grid-template-columns:1fr; row-gap:14px; justify-items:center }
  .prs-leftcol, .prs-rightcol{ grid-column:1 !important; width:100% }
  .prs-rateboxes{ justify-content:center }
}
.prs-col{min-width:280px; flex:1 1 340px}
.prs-leftcol{grid-column:1}
.prs-rightcol{grid-column:2}
.prs-block-title{font-weight:800; font-size:18px; margin:0 0 12px}
.prs-leftgrid{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px}
@media (max-width: 767.98px){ .prs-leftgrid{justify-content:center} }
.prs-leftscore{font-weight:800; font-size:44px; line-height:1}
.prs-leftstack{display:flex; flex-direction:column; align-items:flex-start}
@media (max-width: 767.98px){ .prs-leftstack{align-items:center; text-align:center} }
.prs-reviews-count{color:var(--prs-text-muted); font-size:14px; margin-top:6px}

/* 左列小数星（双层裁切） */
.prs-stars-avg{display:inline-grid; grid-auto-flow:row; line-height:0; vertical-align:middle; white-space:nowrap; box-sizing:content-box}
.prs-stars-row{display:inline-flex; gap:4px; align-items:center; grid-area:1 / 1}
.prs-star svg{display:block; width:var(--prs-star-size); height:var(--prs-star-size); shape-rendering:geometricPrecision}
.prs-stars-base .fill{stroke:var(--prs-left-star,#f5a623) !important; fill:transparent; stroke-width:1.5}
.prs-stars-base .solid{display:none}
.prs-stars-fill{overflow:hidden; width:var(--prs-left-fill,0%); will-change:width; transform:translateZ(0)}
.prs-stars-fill .solid{fill:var(--prs-left-star,#f5a623) !important; opacity:1 !important}
.prs-stars-fill .fill{display:none}

/* ===== 右列交互星（DIV 模式） ===== */
.prs-rightcol{max-width:680px}
.prs-rateboxes{display:flex; align-items:flex-start; justify-content:flex-start; flex-wrap:nowrap; gap:0}
@media (max-width: 767.98px){ .prs-rateboxes{ justify-content:center } }
.prs-ratebox{flex:0 0 var(--prs-box-size); width:var(--prs-box-size); height:var(--prs-box-size); box-sizing:border-box; margin:0 5px 5px 0}
.prs-ratebox:last-child{ margin-right:0 } /* 减少最后一颗右侧“空白热点” */
.prs-cell{display:grid; place-content:center; width:100%; height:100%; border:1px solid var(--prs-star-color); border-radius:var(--prs-box-radius); background:#fff; transition:border-color var(--prs-anim), background-color var(--prs-anim); cursor:pointer; user-select:none}
.prs-scaler{width:100%; height:100%; transition:transform 400ms ease, color 200ms ease; transform:scale(1) rotate(0deg); display:flex; align-items:center; justify-content:center}
.prs-rateboxes .prs-star svg .fill{fill:transparent; stroke:var(--prs-star-color,#0ea5b7); stroke-width:1.5}
.prs-rateboxes .prs-star svg .solid{fill:transparent; opacity:1}
/* 高亮：底色/边框=主色；星=白色；旋转放大 */
.prs-ratebox.is-on .prs-cell{ background:var(--prs-star-color); border-color:var(--prs-star-color) }
.prs-ratebox.is-on .prs-scaler{ transform:rotate(72deg) scale(1.3) }
.prs-ratebox.is-on .prs-star svg .solid{ fill:#fff; opacity:1 }
.prs-ratebox.is-on .prs-star svg .fill{ stroke:#fff }

.prs-hintline{margin-top:12px; font-size:15px}
.prs-hintline .prs-hint-strong{font-weight:800;color:#00b9cd;}


/* ===== 弹层：遮罩与层级 ===== */
.prs-modal{position:fixed; inset:0; z-index:9999}
.prs-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity 260ms ease; z-index:1; cursor:pointer }
.prs-modal.is-active .prs-modal__overlay{ opacity:1 }
.prs-modal__dialog{
  position:relative; z-index:2;
  margin:5vh auto; background:#fff; max-width:720px; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:20px 20px 24px; max-height:90vh; overflow:auto;
}
@media (max-width: 767.98px){
  .prs-modal__dialog{
    position:absolute; left:0; right:0; bottom:0; margin:0; width:100%; height:65vh; max-height:65vh;
    border-radius:14px 14px 0 0; transform:translateY(100%); opacity:0; transition:transform 260ms ease, opacity 260ms ease
  }
  .prs-modal.is-active .prs-modal__dialog{ transform:translateY(0); opacity:1 }
}

/* 关闭按钮：去背景/边框，靠右贴边；增大可点区域，但不喧宾夺主 */
.prs-modal__close{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0px) + 8px);
  right:0px;
  z-index:3;
  width:36px; height:36px;
  display:grid; place-items:center;
  border:none; background:transparent; box-shadow:none;
  font-size:22px; line-height:1; color:#111;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.prs-modal__close:hover{ color:#000 }
.prs-modal__close:focus-visible{ outline:2px solid rgba(0,0,0,.35); outline-offset:2px }
.prs-modal__close:active{ transform:scale(.96) }

.prs-modal__header{margin:6px 0 14px}
body.prs-modal-open{overflow:hidden}
#prs-modal .prs-rateboxes{justify-content:center}
#prs-modal .prs-modal__content .comment-reply-title,
#prs-modal .prs-modal__content .comment-form-rating label,
#prs-modal .prs-modal__content .comment-form-rating .stars,
#prs-modal .prs-modal__content .stars{display:none !important}
#reviews #review_form_wrapper{display:none !important}
#prs-modal .prs-modal__content #review_form_wrapper{display:block !important}
#prs-modal .prs-modal__content .has-border{ border:0 !important; box-shadow:none !important; outline:0 !important; padding:0 !important }

/* ===== 评论列表（三列）与额外间隙（沿用前版） ===== */
#reviews .commentlist .comment_container{ display:grid; grid-template-columns:auto var(--prs-namecol) 1fr; column-gap:var(--prs-col-gap); row-gap:10px; align-items:flex-start }
#reviews .commentlist .comment_container > .flex-col:first-child{ grid-column:1 }
#reviews .commentlist img.avatar{ width:var(--prs-avatar-size); height:var(--prs-avatar-size); object-fit:cover; border-radius:50% }
#reviews .commentlist .comment-text{ grid-column:2 / span 2; display:grid; grid-template-columns:var(--prs-namecol) 1fr; grid-template-rows:auto auto; column-gap:var(--prs-col-gap) }
#reviews .commentlist .comment-text .meta{ grid-column:1; grid-row:1 / span 2; margin:0; font-style:normal }
#reviews .commentlist .meta .woocommerce-review__author{ display:block; font-weight:700; font-size:15px; line-height:1.35; color:#111827 }
#reviews .commentlist .meta .woocommerce-review__published-date{ display:block; margin-top:4px; font-size:12px; color:#9ca3af }
#reviews .commentlist .meta .woocommerce-review__dash{ display:none !important }
#reviews .commentlist .comment-text .star-rating{ grid-column:2; grid-row:1; margin:0 0 8px !important; line-height:1; font-style:normal !important }
#reviews .commentlist .comment-text .description{ grid-column:2; grid-row:2; font-size:16px; line-height:1.7; color:#111827; font-style:normal }
#reviews .commentlist .comment-text,
#reviews .commentlist .comment-text em,
#reviews .commentlist .comment-text i,
#reviews .commentlist .description em,
#reviews .commentlist .description i{ font-style:normal !important }
#reviews .commentlist .comment-text .description a{ text-decoration:underline; font-weight:600 }
#reviews .commentlist > li{ position:relative }
#reviews .commentlist > li:not(:first-child)::before{ content:""; display:block; height:var(--prs-review-extra-gap) }

@media (max-width: 767.98px){
  #reviews .commentlist .comment_container{ grid-template-columns:var(--prs-avatar-size) 1fr; column-gap:var(--prs-col-gap) }
  #reviews .commentlist .comment-text{ grid-column:2 / span 1; display:grid; grid-template-columns:1fr; grid-auto-rows:auto; row-gap:6px }
  #reviews .commentlist .comment-text .star-rating{ grid-column:1; grid-row:auto }
  #reviews .commentlist .comment-text .description{ grid-column:1; grid-row:auto }
  #reviews .commentlist .comment-text .meta{ grid-column:1; grid-row:auto }
}

/* ===== 全宽兜底 ===== */
#reviews.woocommerce-Reviews, .woocommerce-Tabs-panel--reviews{contain:content}
#reviews .row, #reviews .col, #reviews [class*="large-"], #reviews [class*="medium-"], #reviews [class*="small-"]{max-width:none; width:auto; margin:0; padding:0}
#reviews .flex-row, #reviews .flex-grow, #reviews .col-inner{all:unset}
#tab-reviews, .woocommerce-Tabs-panel--reviews, #reviews{max-width:none !important; width:100%}
html.prs-fw-edge .woocommerce-Tabs-panel--reviews, html.prs-fw-edge #tab-reviews{
  position:relative; left:calc(50% - 50vw); right:calc(50% - 50vw); width:100vw; max-width:100vw;
  padding-left:var(--prs-fw-safety,16px); padding-right:var(--prs-fw-safety,16px)
}
