/* ============================================================
   Google評論（新版整合封包）前台樣式
   移植自 ihairtransplantclinic assets/css/custom/reviews.css
   - 全部限定在 .rvpk 底下，不影響站上其他頁面
   - 配色改用本站主色：#8b776d（棕）／#f3e9df（米）
   ============================================================ */
.rvpk{
  --rvpk-card:#ffffff;
  --rvpk-ink:#3d3430;
  --rvpk-ink-soft:#7a6c64;
  --rvpk-line:#ede4db;
  --rvpk-main:#8b776d;
  --rvpk-main-soft:#c9b5a8;
  --rvpk-beige:#f3e9df;
  --rvpk-star:#e6a817;
  --rvpk-hl:#fff0a0;            /* 螢光筆預設底色（同 charmihair）*/
  --rvpk-reply-bg:#faf6f1;
  --rvpk-shadow:0 14px 40px -18px rgba(90,70,60,.28);
  --rvpk-radius:20px;
}
.rvpk *,
.rvpk *::before,
.rvpk *::after{box-sizing:border-box;}
/* 站上全域字距/字級不套進卡片（數值以 ihairtransplantclinic 為準） */
.rvpk .rvpk-card,
.rvpk .rvpk-card *{letter-spacing:normal !important;text-transform:none;}
.rvpk .rvpk-name{letter-spacing:.5px !important;}
.rvpk .rvpk-stars{letter-spacing:2px !important;}
.rvpk .rvpk-photos-title,.rvpk .rvpk-lb-counter{letter-spacing:.02em !important;}

/* ====== 外層容器：1200px、置中、RWD ====== */
.rvpk-list{
  max-width:1200px;
  margin:0 auto 5%;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.rvpk-empty{text-align:center;color:#999;padding:40px 0;}

/* ====== 單則評論卡片 ====== */
.rvpk-card{
  background:var(--rvpk-card);
  border:1px solid var(--rvpk-line);
  border-radius:var(--rvpk-radius);
  box-shadow:var(--rvpk-shadow);
  padding:30px 34px 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  color:var(--rvpk-ink);
  transition:transform .35s ease, box-shadow .35s ease;
}
.rvpk-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,var(--rvpk-main-soft),var(--rvpk-main));
  opacity:.9;
}
.rvpk-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px -18px rgba(90,70,60,.35);
}

/* ---- 卡片頭：頭像 + 名稱 + 星等 ---- */
.rvpk-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.rvpk-reviewer{display:flex;align-items:center;gap:13px;}
.rvpk-avatar{
  width:50px;height:50px;border-radius:50%;
  flex-shrink:0;
  background:linear-gradient(145deg,var(--rvpk-main-soft),var(--rvpk-main));
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
}
.rvpk-avatar.alt{background:linear-gradient(145deg,var(--rvpk-beige),var(--rvpk-main-soft));}
.rvpk-avatar svg{width:38px;height:38px;display:block;}
.rvpk-name{font-weight:700;font-size:21px !important;letter-spacing:.5px;}
.rvpk-stars{color:var(--rvpk-star);font-size:24px !important;letter-spacing:2px;white-space:nowrap;line-height:1 !important;}

/* ---- 重點標籤 ---- */
.rvpk-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:18px;
}
.rvpk-tag{
  font-size:16.8px !important;
  font-weight:500;
  color:var(--rvpk-main);
  background:var(--rvpk-beige);
  border:1px solid #e6d6c6;
  padding:5px 12px;
  border-radius:999px;
  transition:background .25s ease;
}
.rvpk-tag:hover{background:#ecdccd;}

/* ---- 評論內文 ---- */
/* 站上外層樣式會蓋掉段落行高/間距，關鍵值以 !important 鎖定（字級以 ihair 根字級 20px 換算 rem） */
.rvpk .rvpk-body,
.rvpk .rvpk-body p{font-size:19.4px !important;color:#3a352e !important;line-height:29px !important;}
.rvpk .rvpk-body p{margin:0 0 14px !important;padding:0 !important;}
.rvpk .rvpk-body p:last-child{margin-bottom:0 !important;}
/* 螢光筆重點：下半截底色＋粗體（後台指定的顏色由 helper 轉成 --rvpk-hl 變數） */
.rvpk mark{
  display:inline !important;
  background:linear-gradient(transparent 55%,var(--rvpk-hl) 55%) !important;
  padding:0 2px !important;color:inherit !important;font-weight:800 !important;
  font-size:inherit !important;line-height:inherit !important;border-radius:0 !important;
}
.rvpk mark strong,
.rvpk mark b{font-weight:800 !important;}
.rvpk .rvpk-body strong,
.rvpk .rvpk-body b{font-weight:800 !important;color:inherit;}

/* ---- 照片區塊 ---- */
.rvpk-photos{margin-top:18px;}
.rvpk-photos-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.rvpk-photos-title{font-size:13.5px !important;font-weight:600;color:var(--rvpk-ink-soft);letter-spacing:.02em;}
.rvpk-expand{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--rvpk-line);background:#fff;color:var(--rvpk-ink-soft);
  font-size:12.5px !important;padding:5px 11px;border-radius:999px;
  cursor:pointer;transition:background .15s ease,color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.rvpk-expand:hover{background:var(--rvpk-beige);color:var(--rvpk-main);}
.rvpk-expand svg{width:14px;height:14px;}

/* 正方形縮圖網格：不同尺寸的照片一律裁切成正方形 */
.rvpk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:8px;
}
.rvpk-thumb{
  position:relative;display:block;width:100%;
  padding:0 0 100%;              /* 正方形（相容不支援 aspect-ratio 的瀏覽器） */
  border:0;border-radius:10px;
  overflow:hidden;cursor:pointer;background:var(--rvpk-beige);
  -webkit-tap-highlight-color:transparent;
}
.rvpk-thumb img{
  position:absolute;left:0;top:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;transition:transform .25s ease;
}
.rvpk-thumb:hover img{transform:scale(1.05);}

/* ---- 業主回覆（預設收合，點擊展開）---- */
.rvpk-reply{
  margin-top:20px;
  background:var(--rvpk-reply-bg);
  border:1px solid #efe5da;
  border-left:4px solid var(--rvpk-main);
  border-radius:12px;
  padding:16px 18px;
}
.rvpk-reply-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
}
.rvpk-reply-title{font-family:"Noto Serif TC","PMingLiU",serif;font-weight:700;font-size:19px !important;color:#6e5c53;}
.rvpk-reply-toggle{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--rvpk-main);
  border-radius:999px;padding:5px 12px;
  font-size:14px !important;font-weight:700;color:var(--rvpk-main);
  cursor:pointer;flex:0 0 auto;
  transition:background .25s ease,color .25s ease;
}
.rvpk-reply-toggle:hover{background:var(--rvpk-main);color:#fff;}
.rvpk-reply-icon{width:14px;height:14px;transition:transform .3s ease;}
.rvpk-reply.open .rvpk-reply-icon{transform:rotate(180deg);}
/* 收合時約兩行；展開高度由 JS 以 scrollHeight 量測 */
.rvpk-reply-body{
  position:relative;overflow:hidden;
  max-height:3.4em;margin-top:8px;
  transition:max-height .3s ease;
}
.rvpk-reply-body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.2em;
  background:linear-gradient(180deg,rgba(250,246,241,0),var(--rvpk-reply-bg));
  pointer-events:none;
  transition:opacity .3s ease;
}
.rvpk-reply.open .rvpk-reply-body::after{opacity:0;}
.rvpk .rvpk-reply-body p{margin:0 0 8px !important;padding:0 !important;font-size:18.4px !important;color:#5a5347 !important;line-height:1.7 !important;}
.rvpk .rvpk-reply-body p:last-child{margin-bottom:0 !important;}
.rvpk-reply-body strong{color:#000;}

/* ---- 查看評論按鈕 ---- */
.rvpk-btn{
  margin-top:22px;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  font-size:18.4px !important;font-weight:700;
  color:var(--rvpk-ink);
  background:#fff;
  border:1.5px solid var(--rvpk-line);
  padding:11px 20px;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  transition:all .28s ease;
}
.rvpk-btn:hover{
  color:var(--rvpk-main);
  border-color:var(--rvpk-main);
  background:linear-gradient(90deg,var(--rvpk-beige),#fff);
  box-shadow:0 6px 16px -6px rgba(139,119,109,.5);
  transform:translateY(-1px);
  text-decoration:none;
}
.rvpk-btn svg{width:17px;height:17px;}

/* ====== 燈箱 Lightbox（整頁一個）====== */
.rvpk-lb[hidden]{display:none;}
.rvpk-lb{
  position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
}
.rvpk-lb-backdrop{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background:rgba(10,12,16,.92);
}
.rvpk-lb-stage{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  max-width:92vw;max-height:86vh;
}
.rvpk-lb-img{
  max-width:92vw;max-height:86vh;
  object-fit:contain;
  border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);
  -webkit-user-select:none;user-select:none;cursor:zoom-in;
}
.rvpk-lb.zoom-on .rvpk-lb-stage{overflow:auto;max-width:100vw;max-height:100vh;}
.rvpk-lb-img.zoomed{max-width:none;max-height:none;cursor:zoom-out;border-radius:0;}
.rvpk-lb-close,.rvpk-lb-prev,.rvpk-lb-next{
  position:absolute;z-index:2;
  background:rgba(255,255,255,.14);border:0;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;-webkit-tap-highlight-color:transparent;
}
.rvpk-lb-close{top:16px;right:16px;width:44px;height:44px;border-radius:50%;font-size:24px !important;line-height:1 !important;}
.rvpk-lb-prev,.rvpk-lb-next{top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;font-size:30px !important;line-height:1 !important;}
.rvpk-lb-prev{left:16px;}
.rvpk-lb-next{right:16px;}
.rvpk-lb-close:hover,.rvpk-lb-prev:hover,.rvpk-lb-next:hover{background:rgba(255,255,255,.28);}
.rvpk-lb-counter{
  position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px !important;letter-spacing:.05em;
  background:rgba(0,0,0,.42);padding:5px 12px;border-radius:999px;
}

/* ====== 首頁區塊：橫向卡片列 ====== */
.rvpk-index-row{
  display:flex;gap:20px;
  overflow-x:auto;
  padding:6px 4px 18px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.rvpk-index-row .rvpk-card{
  flex:0 0 calc((100% - 40px) / 3);
  scroll-snap-align:start;
  padding:24px 24px 22px;
}
.rvpk-index-row .rvpk-card:hover{transform:none;}
.rvpk-index-row .rvpk-body{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;
}
.rvpk-index-row .rvpk-body p{font-size:15px !important;line-height:26px !important;margin-bottom:8px;}
.rvpk-index-row .rvpk-btn{margin-top:auto;}
.rvpk-index-row .rvpk-body + .rvpk-btn{margin-top:18px;}

/* ====== RWD ====== */
@media (max-width:991px){
  .rvpk-index-row .rvpk-card{flex-basis:calc((100% - 20px) / 2);}
}
@media (max-width:560px){
  .rvpk-reply-toggle{padding:4px 10px;font-size:12px !important;}
}
@media (max-width:480px){
  .rvpk-card{padding:24px 20px 22px;margin:0 4%;}
  .rvpk .rvpk-stars{font-size:19px !important;}
  .rvpk-head{flex-direction:column;align-items:flex-start;}
  .rvpk .rvpk-name{font-size:18px !important;}
  .rvpk .rvpk-tag{font-size:14px !important;}
  .rvpk .rvpk-body,
  .rvpk .rvpk-body p{font-size:16px !important;line-height:26px !important;}
  .rvpk .rvpk-reply-title{font-size:16px !important;}
  .rvpk .rvpk-reply-body p{font-size:15px !important;}
  .rvpk .rvpk-btn{font-size:15px !important;}
  .rvpk-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .rvpk-lb-img{max-width:96vw;max-height:80vh;}
  .rvpk-lb-prev,.rvpk-lb-next{width:40px;height:40px;font-size:26px !important;}
  .rvpk-lb-prev{left:8px;}
  .rvpk-lb-next{right:8px;}
  .rvpk-lb-close{top:10px;right:10px;width:40px;height:40px;}
  .rvpk-lb-counter{bottom:12px;}
  .rvpk-index-row .rvpk-card{flex-basis:86%;margin:0;}
}
@media (prefers-reduced-motion:reduce){
  .rvpk-reply-body,
  .rvpk-reply-body::after,
  .rvpk-reply-toggle,
  .rvpk-reply-icon{transition:none;}
}