/* ============================================
   組件：好評推薦（reviews）
   Locofy 匯出轉寫；卡片正常流 + RWD。跨多頁共用、全站載入。BEM 前綴：.review-
   ============================================ */

.reviews {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 41px;
}

/* 標頭已抽為共用 .comp-header（components/shared.css）。 */
.reviews__empty {
  margin: 0;
  padding: 32px 0;
  font-size: 16px;
  color: #999;
}

/* 好評卡輪播：一頁 3 張（桌機）／2（平板）／2（手機），可拖曳；分頁點由 JS 跟隨。
   捲動/拖曳機制已抽為共用（components/shared.css）；此處只保留 flex 排版與卡片尺寸。
   --gap 卡間距、--cols 每頁張數（卡寬與 JS 計算共用）。 */
.reviews__cards {
  --gap: 44px;
  --cols: 3;
  --pad-x: 16px;   /* 左右留白：卡片陰影不被容器邊緣裁切 */
  --pad-y: 16px;   /* 上下留白：同上 */
  /* 內容寬維持 1150（外加左右 padding），卡片尺寸不變 */
  max-width: calc(1150px + var(--pad-x) * 2);
  display: flex;
  gap: var(--gap);
}
.review-card {
  /* 每張寬＝(內容寬 − 每頁間距總和) ÷ 每頁張數（精準填滿，不留縫隙 → 不露下一張） */
  flex: 0 0
    calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;    /* 允許收縮到 flex-basis，避免長內容把卡片撐寬 */
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 335px;
  padding: 35px;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #fff;
  /* 陰影：擴散(第4值)減為 0、模糊縮小 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
/* 5 星評等（CSS 星形，橘 #ee6e00 / 灰底） */
.review-card__rating {
  display: flex;
  gap: 8px;
}
/* 星等圖示：實心金星（選中）／空心灰星（未選），改用設計稿 SVG */
.review-card__star {
  width: 24px;
  height: 23px;
  background: url("../../images/components/reviews/review-form__rating-solid.svg")
    center / contain no-repeat;
}
.review-card__star--off {
  background: url("../../images/components/reviews/review-form__rating-hollow.svg")
    center / contain no-repeat;
}
.review-card__text {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #000;
}
/* 評論縮圖（最多 5 張，71×71，超過換行） */
.review-card__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.review-card__thumb {
  width: 71px;
  height: 71px;
  border-radius: 4px;
  object-fit: cover;
  cursor: zoom-in; /* 可點擊放大預覽 */
}

/* ===== 圖片預覽 Lightbox（好評縮圖點擊放大，全站共用） ===== */
.rv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.8);
}
.rv-lightbox.is-open {
  display: flex;
}
.rv-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.rv-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.rv-lightbox__close:hover {
  background: #fff;
}
.review-card__divider {
  border-top: 1px solid #a6a6a6;
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: 13px;
}
.review-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.review-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.review-card__author-name {
  font-size: 16px;
  color: #000;
}
.review-card__author-handle {
  font-size: 14px;
  color: #888;
}

/* 好評卡文字上不顯示輪播的「抓取」游標（grab 由 .reviews__cards 繼承而來） */
.review-card__text,
.review-card__author-name,
.review-card__author-handle {
  cursor: auto;
}

/* 送出結果訊息（感謝／錯誤） */
.review-form__status {
  width: 100%;
  max-width: 1142px;
  margin: 0 0 16px;
  padding: 14px 20px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}
.review-form__status--success {
  background: #eaf7ee;
  border: 1px solid #1a7d3c;
  color: #1a7d3c;
}
.review-form__status--error {
  background: #fdecec;
  border: 1px solid #e31717;
  color: #c81e1e;
}

/* ===== 投稿表單 ===== */
.review-form {
  position: relative;
  width: 100%;
  max-width: 1142px;
  padding: 28px 34px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #a3a3a3;
  background: #fff;
}
.review-form__title {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 500;
  color: #000;
}
.review-form__fields {
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.review-form__field {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-form__field--full {
  align-items: flex-start;
}
.review-form__label {
  flex-shrink: 0;
  font-size: 16px;
  color: #000;
}
.review-form__req {
  color: #e31717;
}
.review-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 47px;
}
.review-form__input {
  height: 33px;
  width: 154px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 16px;
}
.review-form__input--wide {
  width: 239px;
}
.review-form__textarea {
  flex: 1;
  min-height: 101px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  resize: vertical;
}
/* 內容欄：標題左、右側為 content-col（textarea + 預覽 + 底列，直向堆疊） */
.review-form__field--full {
  align-items: flex-start;
}
.review-form__field--full .review-form__label {
  align-self: flex-start;
  padding-top: 6px;
}
/* 右側欄：撐滿剩餘寬，textarea／預覽／底列上下排，皆與訊息框同寬 */
.review-form__content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-form__content-col .review-form__textarea {
  width: 100%;
}
/* 底列：上傳圖片（左）｜同意勾選 + 發布（右），同一列；與訊息框同寬 */
.review-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 20px;
  margin-top: 4px;
}
/* 上傳圖片：藍色小字 + icon（靠左） */
.review-form__upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #004dff;
  cursor: pointer;
}
/* 同意勾選推到右側、發布緊接其後 */
.review-form__footer .review-form__consent {
  margin-left: auto;
  margin-top: 0;
}
.review-form__footer .review-form__actions {
  margin-top: 0;
}
.review-form__upload-icon {
  width: 18px;
  height: 15px;
  object-fit: contain;
}
.review-form__upload-label {
  cursor: pointer;
}
/* 已選圖片預覽（縮圖 + 移除鈕） */
.review-form__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.review-form__previews:empty {
  margin-top: 0;
}
.review-form__preview {
  position: relative;
  width: 71px;
  height: 71px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #d9d9d9;
}
.review-form__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 移除鈕（右上角小 ×） */
.review-form__preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}
.review-form__preview-remove:hover {
  background: rgba(0, 0, 0, 0.8);
}
/* 投稿星等（可點選，預設全亮） */
.review-form__rating {
  display: inline-flex;
  gap: 8px;
}
/* 投稿星等：預設空心灰星，選中（.is-on）顯示實心金星 */
.review-form__star {
  width: 24px;
  height: 23px;
  background: url("../../images/components/reviews/review-form__rating-hollow.svg")
    center / contain no-repeat;
  cursor: pointer;
}
.review-form__star.is-on {
  background-image: url("../../images/components/reviews/review-form__rating-solid.svg");
}
.review-form__consent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 12px;
  color: #000;
  cursor: pointer;
}
.review-form__actions {
  margin-top: 18px;
  text-align: right;
}
.review-form__publish {
  min-width: 138px;
  height: 44px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(180.23deg, #41220e, #ab7a44);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

/* ===== RWD ===== */
/* 平板：一頁 2 張 */
@media (max-width: 1024px) {
  .reviews__cards {
    --cols: 2;
    --gap: 28px;
  }
}
@media (max-width: 640px) {
  /* 好評卡：一頁 2 張（兩欄）、卡寬 150 / 間距加大至 24 */
  .reviews {
    gap: 24px;
  }
  .reviews__cards {
    --gap: 24px;   /* 手機卡片間距加大（16 → 24），三輪播統一 */
  }
  .review-card {
    /* 卡寬依 --cols 填滿螢幕（每頁 2 張），非固定寬（沿用基礎 calc） */
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    min-height: 0;
    padding: 16px;
    gap: 10px;
    border: none;
  }
  .review-card__star {
    width: 15px;
    height: 14px;
  }
  .review-card__rating {
    gap: 4px;
  }
  .review-card__text {
    font-size: 13px;
    line-height: 20px;
  }
  /* 兩欄較窄：縮圖平分卡寬、頭像縮小以塞進卡片 */
  .review-card__thumbs {
    gap: 4px;
  }
  .review-card__thumb {
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }
  .review-card__author {
    gap: 8px;
  }
  .review-card__avatar {
    width: 24px;
    height: 24px;
  }
  .review-card__author-name {
    font-size: 13px;
  }
  .review-card__author-handle {
    font-size: 11px;
  }
  /* 投稿表單：13px、欄位直向堆疊、發布鈕滿寬 */
  .review-form {
    padding: 24px 20px;
  }
  .review-form__title {
    margin-bottom: 18px;
    font-size: 15px;
  }
  .review-form__fields {
    gap: 16px;
  }
  .review-form__field {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .review-form__label {
    font-size: 13px;
  }
  /* 姓名 / 信箱：手機仍並排（各佔一半），其餘欄位單欄 */
  .review-form__row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .review-form__row .review-form__field {
    flex: 1 1 0;
    min-width: 0;
  }
  .review-form__input,
  .review-form__input--wide {
    width: 100%;
    height: 36px;
    font-size: 13px;
  }
  .review-form__textarea {
    width: 100%;
    min-height: 90px;
    font-size: 13px;
  }
  .review-form__star {
    width: 22px;
    height: 21px;
  }
  .review-form__consent {
    font-size: 11px;
  }
  /* 底列手機直向堆疊；同意勾選不再靠右、發布滿寬 */
  .review-form__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .review-form__footer .review-form__consent {
    margin-left: 0;
  }
  .review-form__actions {
    text-align: center;
  }
  .review-form__publish {
    width: 100%;
    font-size: 14px;
  }
}