/* ==========================================================================
   產品詳情頁評論區（片 pc-product-reviews T20）。容器由 page-builder 範本 `tpl-product-reviews001` 提供外框與標題；
   本檔只管 JS 填進容器的內容與撰寫表單（review-form.js，T21 會員中心沿用）。
   ⚠️ 前台「全域直角」：卡片、按鈕 border-radius 0。字級下限 14px。
   ⚠️ 色值一律以 CSS 變數定義在根，規則引用變數（⛔ 在規則裡直接寫色碼）。
   ========================================================================== */

.ec-reviews,
.ec-review-form,
.ec-reviews__entry {
    --ec-review-text: #303133;
    --ec-review-muted: #606266;
    --ec-review-subtle: #909399;
    --ec-review-line: #E4E7ED;
    --ec-review-line-strong: #DCDFE6;
    --ec-review-star: #E6A23C;
    --ec-review-brand: #303133;
    --ec-review-brand-on: #fff;
    --ec-review-disabled: #C0C4CC;
    --ec-review-danger: #F56C6C;
    --ec-review-surface: #fff;
}

/* `hidden` 屬性必須勝過本檔對節點設的 display */
.ec-reviews [hidden],
.ec-review-form [hidden] {
    display: none !important;
}

.ec-reviews__bar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
/* 按鈕掛到範本標題旁掛點時 bar 為空 ⇒ 不留間距（按鈕在 .ec-reviews 之外，變數由 .ec-reviews__entry 自己定義） */
.ec-reviews__bar:empty { display: none; }
.ec-reviews__entry,
.ec-reviews__all,
.ec-review-form__btn {
    height: 44px; padding: 0 24px; border: 1px solid var(--ec-review-line-strong); border-radius: 0;
    background: var(--ec-review-surface); color: var(--ec-review-text); font-size: 14px; font-weight: 500; cursor: pointer;
}
.ec-reviews__entry { height: 40px; padding: 0 20px; }
.ec-reviews__all { margin-top: 24px; }
.ec-review-form__btn--primary { border-color: transparent; background: var(--ec-review-brand); color: var(--ec-review-brand-on); }
.ec-review-form__btn:disabled { background: var(--ec-review-line); color: var(--ec-review-disabled); cursor: not-allowed; border-color: transparent; }

.ec-reviews__empty { padding: 24px 0; border-top: 1px solid var(--ec-review-line-strong); color: var(--ec-review-subtle); font-size: 16px; }

.ec-reviews__summary { display: flex; gap: 40px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--ec-review-line-strong); }
.ec-reviews__avg { text-align: center; flex-shrink: 0; }
.ec-reviews__avg-num { font-size: 56px; font-weight: 300; line-height: 1; color: var(--ec-review-text); font-variant-numeric: tabular-nums; }
.ec-reviews__avg-stars,
.ec-review__stars { color: var(--ec-review-star); letter-spacing: 2px; }
.ec-reviews__avg-stars { margin-top: 6px; }
.ec-reviews__avg-star { display: inline-block; }
/* 半星：實心星只塗左半（原型 star_half）。不支援 background-clip:text 的環境留在下面的退路——整顆實心，仍看得見 */
.ec-reviews__avg-star.is-half { color: var(--ec-review-star); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ec-reviews__avg-star.is-half {
        background: linear-gradient(90deg, var(--ec-review-star) 50%, var(--ec-review-subtle, #c8c8c8) 50%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
    }
}
.ec-reviews__count { margin-top: 6px; font-size: 14px; color: var(--ec-review-subtle); }
.ec-reviews__bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ec-reviews__bar-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ec-review-muted); }
.ec-reviews__bar-star { width: 32px; text-align: right; flex-shrink: 0; }
.ec-reviews__bar-track { flex: 1; height: 6px; background: var(--ec-review-line); }
.ec-reviews__bar-fill { height: 6px; background: var(--ec-review-star); }
.ec-reviews__bar-pct { width: 40px; flex-shrink: 0; color: var(--ec-review-subtle); }

.ec-review { padding: 24px 0; border-bottom: 1px solid var(--ec-review-line); }
.ec-review__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 16px; }
.ec-review__name { font-size: 15px; font-weight: 500; color: var(--ec-review-text); }
.ec-review__spec,
.ec-review__date { font-size: 14px; color: var(--ec-review-subtle); }
.ec-review__spec { margin-top: 6px; }
.ec-review__stars { margin-bottom: 8px; }
.ec-review__content { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ec-review-muted); word-break: break-word; }
/* 收合：換行併為空格（white-space: normal）、最多 4 行；展開：保留換行（規格〈長評論收合〉） */
.ec-review__content.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.ec-review__content.is-open { display: block; white-space: pre-line; }
.ec-review__toggle { margin-top: 8px; padding: 0; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ec-review-text); }

.ec-review-form { border: 1px solid var(--ec-review-line-strong); background: var(--ec-review-surface); padding: 24px; margin: 0 0 24px; }
.ec-review-form__title { font-size: 15px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--ec-review-line); margin-bottom: 20px; color: var(--ec-review-text); }
.ec-review-form__row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ec-review-form__label { font-size: 14px; font-weight: 500; color: var(--ec-review-text); min-width: 64px; }
.ec-review-form__label--block { display: block; margin-bottom: 8px; }
.ec-review-form__stars { display: flex; gap: 2px; }
.ec-review-form__star { border: none; background: none; padding: 0 2px; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ec-review-star); }
.ec-review-form__hint,
.ec-review-form__spec { font-size: 14px; color: var(--ec-review-subtle); }
.ec-review-form__textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--ec-review-line-strong); border-radius: 0; padding: 12px 14px; font-size: 15px; line-height: 1.65; resize: vertical; color: var(--ec-review-text); background: var(--ec-review-surface); }
.ec-review-form__counter { text-align: right; font-size: 14px; color: var(--ec-review-subtle); margin-top: 6px; }
.ec-review-form__error { margin-top: 12px; font-size: 14px; color: var(--ec-review-danger); }
.ec-review-form__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }

@media (max-width: 767px) {
    .ec-reviews__summary { flex-direction: column; align-items: stretch; gap: 20px; }
    .ec-review-form { padding: 16px; }
}