/* Winner Google Reviews — frontend (ทุก selector ขึ้นต้น .wngr กันชนธีม/Elementor) */
.wngr {
	--wngr-star: #f6bb06;
	--wngr-card: #f4f4f4;
	--wngr-ink: #111;
	--wngr-muted: #7a7a7a;
	--wngr-gap: 16px;
	--wngr-per: 3;
	--wngr-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.6 7.2.9-5.3 5 1.4 7.2L12 17.7l-6.4 3.6L7 14.1l-5.3-5 7.2-.9z'/%3E%3C/svg%3E");
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	color: var(--wngr-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-indent: 0;
	text-align: left;
	white-space: normal;
	display: block;
	min-width: 0;
}
.wngr *, .wngr *::before, .wngr *::after { box-sizing: border-box; }

/* ---------- ความกว้าง: ห้ามดันหน้าเว็บให้ล้นจอ ----------
   ถ้า widget ไปอยู่ในกล่อง flex ที่กว้างตามเนื้อหา (เช่น HTML ของหน้ามีแท็กค้าง) ความกว้าง "ขั้นต่ำ" ของแถวการ์ด
   คือการ์ดทุกใบเรียงต่อกัน (~2,300px) → หน้าเว็บล้นจอบนมือถือ
   .wngr-body: ไม่ส่งความกว้างของการ์ดขึ้นไปหาพ่อแม่เลย (width:0 + min-width:100% = เต็มพ่อแม่ แต่ขั้นต่ำเป็น 0)
   .wngr::after: บรรทัดล่องหนที่ "อยากกว้างมาก แต่หดได้ถึง 1 ตัวอักษร" → widget ยังขยายเต็มพื้นที่ที่มี ไม่หดเหลือแค่หัวข้อ */
.wngr .wngr-body { width: 0; min-width: 100%; max-width: 100%; }
.wngr:not(.wngr--badge)::after {
	content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-size: 16px;
	line-height: 0;
	word-spacing: 40px;
	white-space: normal;
	pointer-events: none;
}

/* ---------- ดาว ---------- */
.wngr .wngr-stars {
	position: relative;
	display: inline-block;
	width: 5.5em;
	height: 1.1em;
	font-size: 17px;
	background: #d9d9d9;
	-webkit-mask: var(--wngr-star-mask) repeat-x 0 0 / 1.1em 1.1em;
	mask: var(--wngr-star-mask) repeat-x 0 0 / 1.1em 1.1em;
	vertical-align: middle;
	flex: none;
}
.wngr .wngr-stars > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--wngr-star); }
.wngr .wngr-stars--lg { font-size: 30px; }

/* ---------- ส่วนหัว ---------- */
.wngr .wngr-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 22px; text-align: center; }
.wngr .wngr-based { font-size: 14px; font-weight: 400; color: var(--wngr-ink); }
.wngr .wngr-based strong { font-weight: 700; }
.wngr .wngr-glink { text-decoration: none !important; border: 0 !important; box-shadow: none !important; }
.wngr .wngr-wordmark { display: inline-block; font-family: "Product Sans", "Google Sans", Futura, "Century Gothic", Arial, sans-serif; font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.wngr .wngr-wordmark i { font-style: normal; }

/* ---------- การ์ด ---------- */
.wngr .wngr-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 20px;
	background: var(--wngr-card);
	border-radius: 14px;
}
.wngr .wngr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wngr .wngr-avatar {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 19px;
	line-height: 1;
}
.wngr .wngr-avatar b { font-weight: 500; }
.wngr .wngr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 50%; margin: 0; padding: 0; border: 0; box-shadow: none; }
.wngr .wngr-who { flex: 1 1 auto; min-width: 0; }
.wngr .wngr-name { font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wngr .wngr-date { font-size: 13px; font-weight: 400; font-style: normal; color: var(--wngr-muted); line-height: 1.3; }
.wngr .wngr-gicon { flex: none; width: 20px; height: 20px; align-self: flex-start; }
.wngr .wngr-rate { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wngr .wngr-verified { width: 15px; height: 15px; flex: none; }
.wngr .wngr-text {
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.45;
	color: var(--wngr-ink);
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow-wrap: anywhere;
}
.wngr .wngr-card.is-open .wngr-text { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.wngr .wngr-more {
	align-self: flex-start;
	margin: 6px 0 0;
	padding: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wngr-muted) !important;
	font: inherit;
	font-size: 13px;
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
	min-height: 0;
	width: auto;
}
.wngr .wngr-more[hidden] { display: none; }

/* ---------- Slider ---------- */
.wngr .wngr-body { position: relative; }
.wngr--slider .wngr-track {
	display: flex;
	gap: var(--wngr-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 2px;
}
.wngr--slider .wngr-track::-webkit-scrollbar { display: none; }
.wngr--slider .wngr-card {
	flex: 0 0 calc((100% - (var(--wngr-per) - 1) * var(--wngr-gap)) / var(--wngr-per));
	scroll-snap-align: start;
}
.wngr .wngr-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 34px;
	height: 34px;
	min-height: 0;
	margin: -17px 0 0;
	padding: 7px;
	border-radius: 50% !important;
	border: 1px solid #e3e3e3 !important;
	background: #fff !important;
	color: #333 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s, transform .2s;
}
.wngr .wngr-nav:hover { transform: scale(1.08); }
.wngr .wngr-nav svg { width: 100%; height: 100%; display: block; }
.wngr .wngr-prev { left: -14px; }
.wngr .wngr-next { right: -14px; }
.wngr .wngr-nav[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Grid ---------- */
.wngr--grid .wngr-track { display: grid; grid-template-columns: repeat(var(--wngr-per), minmax(0, 1fr)); gap: var(--wngr-gap); }

/* ---------- List (พื้นใส คั่นด้วยเส้น) ---------- */
.wngr--list .wngr-track { display: flex; flex-direction: column; }
.wngr--list .wngr-card { background: transparent; border-radius: 0; padding: 18px 2px; border-bottom: 1px solid #e6e6e6; }
.wngr--list .wngr-card:last-child { border-bottom: 0; }

/* ---------- List พื้นหลัง ---------- */
.wngr--list_bg .wngr-track { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Badge ---------- */
.wngr--badge { width: auto; display: inline-block; }
.wngr .wngr-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	color: var(--wngr-ink) !important;
	text-decoration: none !important;
}
.wngr .wngr-badge .wngr-gicon { width: 34px; height: 34px; align-self: center; }
.wngr .wngr-badge-main { display: flex; flex-direction: column; gap: 2px; }
.wngr .wngr-badge-row { display: flex; align-items: center; gap: 8px; }
.wngr .wngr-badge-num { font-size: 20px; font-weight: 800; line-height: 1; }
.wngr .wngr-badge .wngr-based { font-size: 12.5px; color: var(--wngr-muted); }

.wngr.wngr-empty { padding: 14px 16px; border: 1px dashed #c9c9c9; border-radius: 10px; font-size: 14px; color: #555; background: #fafafa; }

/* fallback ก่อน JS ทำงาน — JS จะตั้ง --wngr-per ตามความกว้างจริงของกล่อง (ไม่ใช่ความกว้างจอ) */
@media (max-width: 1024px) { .wngr { --wngr-per: 2; } }
@media (max-width: 640px) {
	.wngr { --wngr-per: 1; --wngr-gap: 12px; }
	.wngr .wngr-prev { left: -6px; }
	.wngr .wngr-next { right: -6px; }
	.wngr .wngr-card { padding: 16px; }
	.wngr .wngr-head { margin-bottom: 16px; }
	.wngr .wngr-wordmark { font-size: 30px; }
	.wngr .wngr-stars--lg { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .wngr--slider .wngr-track { scroll-behavior: auto; } }