/* ==========================================================================
   會員中心評論 UI（片 pc-product-reviews T21；member-reviews-ui.js）。
   三處掛載：訂單詳情（按鈕在明細列內尾端 .ec-rv-mr；表單／查看面板在明細列之後的 li.ec-rv-mr-panel）、
   訂單列表卡片（既有操作按鈕列之後 .ec-rv-card）、會員首頁頂端提示列（.ec-rv-home）。class 前綴 ec-rv-（disposition T21-G6）。
   撰寫／編輯表單本體樣式在 product-reviews.css（.ec-review-form，T20 共用表單）。
   ⚠️ 前台「全域直角」：按鈕 border-radius 0。字級下限 14px。
   ⚠️ 色值一律以 CSS 變數定義在根，規則引用變數（⛔ 在規則裡直接寫色碼）。
   ========================================================================== */

.ec-rv-mr,
.ec-rv-mr-panel,
.ec-rv-card,
.ec-rv-home {
    --ec-mr-text: #303133;
    --ec-mr-muted: #606266;
    --ec-mr-subtle: #909399;
    --ec-mr-line: #E4E7ED;
    --ec-mr-star: #E6A23C;
    --ec-mr-brand: #303133;
    --ec-mr-brand-on: #fff;
    --ec-mr-warn: #E6A23C;
    --ec-mr-surface: #fff;
    --ec-mr-soft: #F5F7FA;
}

.ec-rv-mr[hidden],
.ec-rv-mr-panel[hidden],
.ec-rv-card[hidden],
.ec-rv-home[hidden],
.ec-rv-mr [hidden],
.ec-rv-mr-panel [hidden] { display: none !important; }

/* 明細列：宿主 li 是不換行的 flex（⛔ 不改它的 flex-wrap，長品名會被換行判斷打散）。
   按鈕只是尾端的一個小 flex 子項；表單／面板是 li 之後的兄弟列，與明細列同寬。 */
.ec-rv-mr { flex: 0 0 auto; align-self: center; max-width: 45%; }
.ec-rv-mr:empty { display: none; }
.ec-rv-mr-panel { list-style: none; margin: 0; padding: 0 0 12px; box-sizing: border-box; border-bottom: 1px solid var(--ec-mr-line); }
.ec-rv-mr-panel:empty { display: none; }
/* 面板打開時錨點列不畫底線（原型），分隔線只由面板列畫；面板是最後一列時不畫（宿主對最後一列本來就不畫底線） */
.member-order-show__item[data-ec-mr-open] { border-bottom: 0; }
.ec-rv-mr-panel:last-child { border-bottom: 0; }

.ec-rv-mr__btn {
    height: 40px; padding: 0 20px; border: 1px solid var(--ec-mr-line); border-radius: 0;
    background: var(--ec-mr-surface); color: var(--ec-mr-text); font-size: 14px; font-weight: 500; cursor: pointer;
}

.ec-rv-mr__link {
    padding: 0; border: 0; background: none; color: var(--ec-mr-muted); font-size: 14px; text-decoration: underline; cursor: pointer; text-align: right;
}

/* 手機：按鈕縮小，少擠宿主明細列（⛔ 不動宿主 li 的 flex-wrap 與其子項） */
@media (max-width: 767px) {
    .ec-rv-mr__btn { height: 36px; padding: 0 10px; }
}

.ec-rv-mr__panel { margin-top: 0; padding: 16px; background: var(--ec-mr-soft); border: 1px solid var(--ec-mr-line); }
.ec-rv-mr__panel-head { display: flex; align-items: center; gap: 12px; }
.ec-rv-mr__stars { color: var(--ec-mr-star); letter-spacing: 2px; }
.ec-rv-mr__status { font-size: 14px; color: var(--ec-mr-muted); }
.ec-rv-mr__meta { margin-top: 6px; font-size: 14px; color: var(--ec-mr-subtle); display: flex; gap: 8px; }
.ec-rv-mr__content { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--ec-mr-text); white-space: pre-line; overflow-wrap: anywhere; }
.ec-rv-mr__edit-row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ec-rv-mr__editable { font-size: 14px; color: var(--ec-mr-muted); }
.ec-rv-mr-panel .ec-review-form { margin-top: 0; }

.ec-rv-card { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ec-mr-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ec-rv-card__badge { font-size: 14px; color: var(--ec-mr-warn); }
.ec-rv-card__link {
    display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 1px solid var(--ec-mr-line); border-radius: 0;
    background: var(--ec-mr-surface); color: var(--ec-mr-text); font-size: 14px; font-weight: 500; text-decoration: none;
}
.ec-rv-home__link {
    display: inline-flex; align-items: center; flex: none; white-space: nowrap; height: 40px; padding: 0 20px; border-radius: 0;
    background: var(--ec-mr-brand); color: var(--ec-mr-brand-on); font-size: 14px; font-weight: 500; text-decoration: none;
}

.ec-rv-home { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--ec-mr-soft); border: 1px solid var(--ec-mr-line); }
.ec-rv-home__text { font-size: 15px; color: var(--ec-mr-text); }