/* =========================================================
   Reviews Carousel 前台樣式
   寫法：
   1) Mobile-first（預設＝手機），桌機另用 @media (min-width:768px) 覆蓋。
   2) 防汙染隔離：在 .rvc 內先做 scoped reset，並對圖片/按鈕/卡片等
      最易被佈景主題全域 CSS 汙染的元素加 !important 護欄，
      讓小工具在任何主題下外觀一致，不受其他 HTML/CSS 影響。
   ========================================================= */

/* ---------- 變數 & 容器字型（不受 reset 影響的先放這） ---------- */
.rvc{
  --rvc-gold:#fbbc04;
  --rvc-blue:#4285f4;
  --rvc-ink:#1f2328;
  --rvc-sub:#5f6368;
  --rvc-line:#eceef1;
  --rvc-card:#ffffff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  color:var(--rvc-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- Scoped Reset：擋掉主題對子元素的全域樣式 ---------- */
.rvc, .rvc *, .rvc *::before, .rvc *::after{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
  border:0 none !important;
  outline:0 !important;
  background:transparent none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  word-spacing:normal !important;
  text-align:left !important;
  list-style:none !important;
  float:none !important;
  vertical-align:baseline !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  font-style:normal !important;
  line-height:1.5 !important;
  animation:none !important;
}
/* 容器外距在 reset 之後重新宣告 */
.rvc{ margin:10px 0 !important; display:block !important; }

/* ---------- 多色 Google G（SVG 背景，共用） ---------- */
.rvc-g,.rvc-src{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important;
  font-size:0; color:transparent; text-indent:-9999px; flex:0 0 auto;
}

/* ---------- 標頭 ---------- */
.rvc-head{ display:flex !important; align-items:center; gap:12px; margin:0 4px 10px !important; }
.rvc-g{ width:40px !important; height:40px !important; }
.rvc-head-main{ flex:1 1 auto; min-width:0; }
.rvc-title{ font-size:19px; font-weight:800; line-height:1.2 !important; }
.rvc-agg{ display:flex !important; align-items:center; gap:7px; margin-top:3px !important; flex-wrap:wrap; }
.rvc-score{ font-weight:800; color:#e8710a; font-size:16px; }
.rvc-count{ color:var(--rvc-sub); font-size:13px; }

.rvc-stars-row{ display:inline-flex !important; gap:1px; }
.rvc-star{ color:#dcdfe3; font-size:16px; line-height:1 !important; }
.rvc-star.on{ color:var(--rvc-gold); }

/* ---------- 箭頭（button）：手機隱藏、桌機顯示；強制去除主題按鈕樣式 ---------- */
.rvc-nav{ display:none; gap:10px; }
.rvc-arrow{
  -webkit-appearance:none !important; appearance:none !important;
  width:40px !important; height:40px !important; border-radius:50% !important;
  border:1px solid #dcdfe3 !important; background:#fff !important;
  color:var(--rvc-sub); font-size:20px; line-height:1 !important; cursor:pointer;
  display:flex !important; align-items:center; justify-content:center;
  box-shadow:none !important; transition:transform .15s,box-shadow .15s,background .15s;
}
.rvc-arrow:hover{ background:#f1f3f4 !important; color:var(--rvc-ink); box-shadow:0 2px 8px rgba(0,0,0,.12) !important; }
.rvc-arrow:active{ transform:scale(.94); }
.rvc-arrow:disabled{ opacity:.3; cursor:default; box-shadow:none !important; }

/* ---------- 捲動軌道 ---------- */
.rvc-track{
  display:flex !important; gap:14px; overflow-x:auto;
  scroll-behavior:smooth; scroll-snap-type:x mandatory;
  scroll-padding-left:16px; padding:6px 16px 12px !important;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.rvc-track::-webkit-scrollbar{ display:none; }

/* ---------- 評論卡（手機：接近滿版、露出下一張邊角） ---------- */
.rvc-card{
  flex:0 0 auto; width:86%; scroll-snap-align:center;
  background:var(--rvc-card) !important; border:1px solid var(--rvc-line) !important;
  border-radius:18px !important; padding:18px 18px 16px !important; position:relative;
  box-shadow:0 4px 16px rgba(20,23,28,.06) !important; overflow:hidden;
}
.rvc-card::before{
  content:"\201C" !important; position:absolute; top:6px; right:16px;
  font-family:Georgia,serif; font-size:56px; line-height:1 !important; color:#eef1f6; pointer-events:none;
}
.rvc-card-head{ display:flex !important; align-items:center; gap:12px; margin-bottom:10px !important; position:relative; z-index:1; }
.rvc-avatar{
  display:block !important; flex:0 0 auto; width:46px !important; height:46px !important;
  border-radius:50% !important; object-fit:cover !important;
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--rvc-line) !important;
}
.rvc-avatar-txt{ display:flex !important; align-items:center; justify-content:center; background:linear-gradient(135deg,#e8f0fe,#d2e3fc) !important; color:var(--rvc-blue); font-weight:800; font-size:20px; box-shadow:none !important; }
.rvc-meta{ flex:1 1 auto; min-width:0; }
.rvc-name{ font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rvc-date{ color:var(--rvc-sub); font-size:12.5px; margin-top:1px !important; }
.rvc-src{ width:20px !important; height:20px !important; }

.rvc-stars{ margin-bottom:8px !important; }
.rvc-stars .rvc-star{ font-size:15px; }
.rvc-text{
  font-size:14.5px; line-height:1.75 !important; color:#3c4043;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
}

.rvc-foot{ text-align:right !important; color:#9aa0a6; font-size:12px; margin:8px 8px 0 !important; }

/* =========================================================
   桌機版（≥768px）：多張並排、顯示箭頭、hover 浮起
   ========================================================= */
@media (min-width:768px){
  .rvc{ max-width:1100px !important; margin:28px auto !important; }
  .rvc-head{ margin:0 2px 18px !important; gap:14px; }
  .rvc-g{ width:44px !important; height:44px !important; }
  .rvc-title{ font-size:22px; }
  .rvc-score{ font-size:17px; }
  .rvc-count{ font-size:14px; }

  .rvc-nav{ display:flex !important; margin-left:auto; }

  .rvc-track{ gap:18px; padding:8px 4px 16px !important; scroll-padding-left:4px; }
  .rvc-card{
    width:326px; scroll-snap-align:start;
    padding:22px 22px 18px !important; transition:transform .18s ease,box-shadow .18s ease;
  }
  .rvc-card:hover{ transform:translateY(-6px); box-shadow:0 14px 32px rgba(20,23,28,.13) !important; border-color:#e3e6ea !important; }
  .rvc-text{ -webkit-line-clamp:7; }
  .rvc-foot{ margin-right:2px !important; }
}

/* 尊重「減少動態」偏好 */
@media (prefers-reduced-motion:reduce){
  .rvc-track{ scroll-behavior:auto; }
  .rvc-card{ transition:none; }
}