/* ==========================================================================
   Smooth Badge Slider — Frontend styles
   ตัวแปร CSS (--sswb-*) ถูกตั้งค่าแบบ inline โดย PHP ตามค่าที่แอดมินกำหนด
   ========================================================================== */

.sswb-slider-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;

	/* ค่าเริ่มต้น เผื่อไม่มี inline style ส่งมา */
	--sswb-desktop-speed: 23s;
	--sswb-mobile-speed: 16s;
	--sswb-gap: 2px;
	--sswb-badge-bg: #232323;
	--sswb-badge-color: #ffffff;
	--sswb-dot-color: #20bd27;
	--sswb-slide-w-desktop: 220px;
	--sswb-slide-h-desktop: 140px;
	--sswb-slide-w-tablet: 180px;
	--sswb-slide-h-tablet: 115px;
	--sswb-slide-w-mobile: 140px;
	--sswb-slide-h-mobile: 90px;

	/* ตัวแปร "ที่ใช้งานจริง" — ค่าเริ่มต้นคือขนาดเดสก์ท็อป แล้วถูกสลับค่าตาม breakpoint ด้านล่าง */
	--sswb-slide-w: var(--sswb-slide-w-desktop);
	--sswb-slide-h: var(--sswb-slide-h-desktop);
}

@media (max-width: 1024px) {
	.sswb-slider-wrap {
		--sswb-slide-w: var(--sswb-slide-w-tablet);
		--sswb-slide-h: var(--sswb-slide-h-tablet);
	}
}

@media (max-width: 767px) {
	.sswb-slider-wrap {
		--sswb-slide-w: var(--sswb-slide-w-mobile);
		--sswb-slide-h: var(--sswb-slide-h-mobile);
	}
}

.sswb-slider-wrap * {
	box-sizing: border-box;
}

.sswb-slider-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.sswb-slider-track {
	position: relative;
	left: 0;

	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;

	width: max-content;
	min-width: max-content;

	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;

	animation: sswbLoop var(--sswb-desktop-speed) linear infinite;
}

.sswb-slide {
	position: relative;
	left: auto;

	flex: 0 0 auto;
	transform: none;

	width: var(--sswb-slide-w);
	margin: 0 var(--sswb-gap) 0 0;

	backface-visibility: hidden;
}

.sswb-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	transform: translateZ(0);
	backface-visibility: hidden;

	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* เลื่อนครบ 1 ชุด (สไลด์ถูกทำซ้ำ 2 ชุดใน HTML เพื่อให้ลูปเนียน) */
@keyframes sswbLoop {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* วางเมาส์แล้วหยุด (ปิดได้จากหลังบ้าน ผ่านคลาส sswb-no-hover-pause) */
.sswb-slider-wrap:not(.sswb-no-hover-pause):hover .sswb-slider-track {
	animation-play-state: paused;
}

/* มือถือ: ใช้ความเร็วแยก */
@media (max-width: 767px) {
	.sswb-slider-track {
		animation-duration: var(--sswb-mobile-speed);
	}
}

/* ผู้ใช้ตั้งค่าระบบให้ลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
	.sswb-slider-track {
		animation: none;
		transform: translate3d(0, 0, 0);
	}
}

/* ==========================================================================
   ป้าย (Badge)
   ========================================================================== */

.sswb-img-inner {
	position: relative;
	overflow: hidden;
	height: var(--sswb-slide-h);
}

.sswb-badge {
	position: absolute;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;

	width: max-content;
	max-width: calc(100% - 12px);
	padding: 5px 10px;

	background: var(--sswb-badge-bg);
	border-radius: 30px;

	color: var(--sswb-badge-color);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;

	z-index: 20;
	pointer-events: none;

	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* ตำแหน่งป้าย — เลือกได้จากหลังบ้าน ใช้ทีละคลาสเดียวต่อป้าย */
.sswb-badge-pos-tl {
	top: 8px;
	left: 8px;
}
.sswb-badge-pos-tc {
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
}
.sswb-badge-pos-tr {
	top: 8px;
	right: 8px;
}
.sswb-badge-pos-bl {
	bottom: 8px;
	left: 8px;
}
.sswb-badge-pos-bc {
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
}
.sswb-badge-pos-br {
	bottom: 8px;
	right: 8px;
}

.sswb-badge-dot {
	display: block;
	width: 8px;
	height: 8px;
	flex: 0 0 8px;

	border-radius: 50%;
	background: var(--sswb-dot-color);
	box-shadow: 0 0 6px var(--sswb-dot-color);

	animation: sswbPulse 1.3s ease-in-out infinite;
}

.sswb-badge-value {
	display: inline-block;
	min-width: 45px;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes sswbPulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.5;
		transform: scale(0.8);
	}
}

/* ปรับขนาดบนมือถือ */
@media (max-width: 767px) {
	.sswb-badge {
		padding: 4px 7px;
		gap: 3px;
		font-size: 9px;
	}

	.sswb-badge-pos-tl,
	.sswb-badge-pos-tc,
	.sswb-badge-pos-tr {
		top: 5px;
	}
	.sswb-badge-pos-bl,
	.sswb-badge-pos-bc,
	.sswb-badge-pos-br {
		bottom: 5px;
	}
	.sswb-badge-pos-tl,
	.sswb-badge-pos-bl {
		left: 5px;
	}
	.sswb-badge-pos-tr,
	.sswb-badge-pos-br {
		right: 5px;
	}

	.sswb-badge-dot {
		width: 6px;
		height: 6px;
		flex-basis: 6px;
	}

	.sswb-badge-value {
		min-width: 35px;
	}
}