/* Quick Review — การ์ดรีวิว (includes/review.php)
   โหลดเฉพาะหน้าที่มี block + editor canvas
   สีตรงกับ token ธีม (WindPress) — override ได้ผ่านตัวแปรบน .tpqo-reviews */

.tpqo-reviews {
  --tpqo-review-bg: #fcfaf6; /* --color-bg */
  --tpqo-review-stroke: #e7d7b7; /* --color-stroke */
  --tpqo-review-name: #7c5f24; /* --color-primary-text */
  --tpqo-review-text: #6b6b6b; /* --color-text-main */
  --tpqo-star: #ace000; /* ไม่มี token ในธีม — สีดาวตาม design */

  /* ใช้ฟอนต์รอบๆ — ใน editor style พื้นฐานถูก WindPress ตัดใน common-block จนตกเป็น serif */
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tpqo-review {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 16px;
  border: 1px solid var(--tpqo-review-stroke);
  border-radius: 8px;
  background: var(--tpqo-review-bg);
}

/* ธีม/editor ใส่ margin ให้ <p> — การ์ดคุมระยะเอง */
.tpqo-review p {
  margin: 0;
}

.tpqo-review-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.tpqo-review .tpqo-review-avatar {
  flex-shrink: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #323232;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 100%;
}

/* แถวรูปประกอบใต้ข้อความ — ตาม Figma: แถวแนวนอน padding ซ้ายขวา 10px, gap 4px
   ห่างข้อความ 10px (การ์ดมี gap 1.25rem เลยดึงขึ้น) · รูปเยอะขึ้นบรรทัดใหม่ */
.tpqo-review .tpqo-review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: calc(10px - 1.25rem);
  padding: 0 10px;
}

/* ลิงก์ครอบรูป — กดแล้วเปิด lightbox (assets/tpqo-review.js) */
.tpqo-review .tpqo-review-photo {
  display: block;
  flex: none;
  line-height: 0;
  border-radius: 4px;
  cursor: zoom-in;
  transition: opacity 0.15s;
}

.tpqo-review .tpqo-review-photo:hover {
  opacity: 0.85;
}

.tpqo-review .tpqo-review-photo:focus-visible {
  outline: 2px solid var(--tpqo-review-name);
  outline-offset: 2px;
}

/* รูปละ 60×60 มุม 4px ครอปให้เต็มกรอบ
   2 class — ต้องชนะ img{height:auto;max-width:100%} ของ editor/ธีม ไม่งั้นรูปยืด */
.tpqo-review .tpqo-review-image {
  flex: none;
  width: 60px;
  height: 60px;
  max-width: none;
  border-radius: 4px;
  object-fit: cover;
}

.tpqo-review .tpqo-review-name {
  color: var(--tpqo-review-name);
  font-size: 20px;
  font-weight: 700;
  line-height: 120%;
}

.tpqo-review .tpqo-review-stars {
  color: var(--tpqo-star);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.4;
}

.tpqo-review-stars-off {
  color: var(--tpqo-review-stroke);
}

.tpqo-review .tpqo-review-text {
  color: var(--tpqo-review-text);
  padding: 0 10px;
}

/* ── Lightbox รูปประกอบรีวิว (assets/tpqo-review.js) ──
   <dialog> อยู่ท้าย <body> นอก .tpqo-reviews — ตั้งค่าเองทั้งหมด ไม่พึ่งตัวแปรของการ์ด */
.tpqo-review-lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: rgba(0, 0, 0, 0.88);
  box-sizing: border-box;
}

.tpqo-review-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tpqo-review-lightbox::backdrop {
  background: transparent;
}

.tpqo-review-lightbox img {
  display: block;
  max-width: min(100%, 960px);
  max-height: calc(100dvh - 32px);
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.tpqo-review-lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.tpqo-review-lightbox button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.tpqo-review-lightbox button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tpqo-review-lb-close {
  top: 16px;
  right: 16px;
}

.tpqo-review-lb-nav {
  top: 50%;
  transform: translateY(-50%);
}

.tpqo-review-lb-prev {
  left: 16px;
}

.tpqo-review-lb-next {
  right: 16px;
}

/* รูปเดียว — ไม่ต้องมีลูกศร */
.tpqo-review-lightbox:not(.is-multi) .tpqo-review-lb-nav {
  display: none;
}

/* เปิด lightbox อยู่ — หน้าหลังไม่เลื่อน */
.tpqo-review-lb-open {
  overflow: hidden;
}

/* ── Quick Views — ยอดคนดูจาก GA4 (includes/views.php) ──
   อยู่ไฟล์นี้เพราะ handle tpqo-review-common-block เข้า editor canvas ได้แล้ว (ดู includes/review.php) */
.tpqo-views {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #6b6b6b; /* --color-text-main */
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.tpqo-views svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.tpqo-views span {
  text-decoration: underline;
}