/**
 * WaenWeb PDPA Cookie Consent — สไตล์แบนเนอร์ / modal / ปุ่มลอย
 *
 * ตัวแปร (--ww-*) ถูกฉีดแบบ inline จากการตั้งค่าในแอดมิน:
 *   --ww-primary / --ww-btn-text       สีปุ่มยอมรับ + ตัวอักษร
 *   --ww-reject-bg / --ww-reject-text  สีปุ่มปฏิเสธ + ตัวอักษร
 *   --ww-bg / --ww-text                สีพื้น + ตัวอักษร
 *   --ww-font-size                     ขนาดฟอนต์ฐาน
 *   --ww-radius / --ww-btn-radius      ความโค้งมุม กล่อง / ปุ่ม
 */

.waenweb-pdpa {
	--ww-primary: #1a73e8;
	--ww-bg: #ffffff;
	--ww-text: #1f2937;
	--ww-btn-text: #ffffff;
	--ww-reject-bg: #1a73e8;
	--ww-reject-text: #ffffff;
	--ww-font-size: 15px;
	--ww-radius: 12px;
	--ww-btn-radius: 8px;
	--ww-shadow: 0 10px 40px rgba( 0, 0, 0, 0.18 );
	--ww-anim-dur: 0.35s;
	--ww-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
	font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", "Sarabun", Tahoma, sans-serif;
	font-size: var( --ww-font-size );
	line-height: 1.6;
}

.waenweb-pdpa[data-theme="dark"] {
	--ww-bg: #1f2430;
	--ww-text: #e8eaed;
}

.ww-no-scroll {
	overflow: hidden;
}

*[hidden] {
	display: none !important;
}

/* ===================================================================
 * แบนเนอร์
 * =================================================================== */

.ww-banner {
	position: fixed;
	z-index: 999999;
	background: var( --ww-bg );
	color: var( --ww-text );
	box-shadow: var( --ww-shadow );
	box-sizing: border-box;
	opacity: 0;
	transition: opacity var( --ww-anim-dur ) var( --ww-ease ),
		transform var( --ww-anim-dur ) var( --ww-ease );
	will-change: opacity, transform;
}

.ww-banner.is-visible {
	opacity: 1;
	transform: none;
}

.ww-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px;
}

.ww-banner__content {
	flex: 1 1 360px;
	min-width: 240px;
}

.ww-banner__title {
	margin: 0 0 6px;
	font-size: 1.2em;
	font-weight: 700;
	color: var( --ww-text );
}

.ww-banner__text {
	margin: 0;
	color: var( --ww-text );
	font-size: 0.95em;
}

.ww-banner__links {
	display: inline-block;
	margin-top: 4px;
}

.ww-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* --- ตำแหน่ง: bar (แถบล่าง) --- */
.waenweb-pdpa[data-position="bar"] .ww-banner {
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY( 100% );
}

/* --- ตำแหน่ง: box (กล่องมุมจอ) --- */
.waenweb-pdpa[data-position="box"] .ww-banner {
	right: 20px;
	bottom: 20px;
	max-width: 420px;
	border-radius: var( --ww-radius );
	transform: translateY( 24px ) scale( 0.98 );
}
.waenweb-pdpa[data-position="box"] .ww-banner__inner {
	flex-direction: column;
	align-items: stretch;
	padding: 20px;
}
.waenweb-pdpa[data-position="box"] .ww-banner__actions {
	justify-content: stretch;
}
.waenweb-pdpa[data-position="box"] .ww-banner__actions .ww-btn {
	flex: 1 1 auto;
}

/* --- ตำแหน่ง: modal (กลางจอ) --- */
.waenweb-pdpa[data-position="modal"] .ww-banner {
	top: 50%;
	left: 50%;
	max-width: 520px;
	width: calc( 100% - 40px );
	border-radius: var( --ww-radius );
	transform: translate( -50%, -50% ) scale( 0.92 );
}
.waenweb-pdpa[data-position="modal"] .ww-banner.is-visible {
	transform: translate( -50%, -50% ) scale( 1 );
}
.waenweb-pdpa[data-position="modal"] .ww-banner__inner {
	flex-direction: column;
	align-items: stretch;
}
.waenweb-pdpa[data-position="modal"] .ww-banner::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba( 0, 0, 0, 0.5 );
}
.waenweb-pdpa[data-position="modal"][data-blur="on"] .ww-banner::before {
	backdrop-filter: blur( 5px );
	-webkit-backdrop-filter: blur( 5px );
}

/* --- รูปแบบอนิเมชัน --- */
.waenweb-pdpa[data-animation="fade"] .ww-banner {
	transform: none !important;
}
.waenweb-pdpa[data-animation="fade"][data-position="modal"] .ww-banner {
	transform: translate( -50%, -50% ) !important;
}
.waenweb-pdpa[data-animation="none"] .ww-banner,
.waenweb-pdpa[data-animation="none"] .ww-modal-overlay,
.waenweb-pdpa[data-animation="none"] .ww-modal {
	transition: none !important;
	transform: none !important;
}
.waenweb-pdpa[data-animation="none"][data-position="modal"] .ww-banner {
	transform: translate( -50%, -50% ) !important;
}

/* ===================================================================
 * ปุ่ม
 * PDPA: ปุ่ม "ยอมรับ" และ "ปฏิเสธ" มีขนาด/น้ำหนัก/รัศมีเท่ากันทุกประการ
 * ต่างกันได้แค่ "สี" (ตามที่ผู้ใช้ตั้ง) เพื่อไม่ให้เป็น dark pattern
 * =================================================================== */

.ww-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	border: 2px solid transparent;
	border-radius: var( --ww-btn-radius );
	cursor: pointer;
	min-width: 130px;
	box-sizing: border-box;
	transition: transform 0.12s ease, opacity 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.ww-btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.15 );
}
.ww-btn:active {
	transform: translateY( 0 );
}
.ww-btn:focus-visible {
	outline: 3px solid var( --ww-primary );
	outline-offset: 2px;
}

.ww-btn-primary {
	background: var( --ww-primary );
	color: var( --ww-btn-text );
	border-color: var( --ww-primary );
}
.ww-btn-primary:hover {
	filter: brightness( 0.94 );
}

/* ปุ่มปฏิเสธ — ใช้สีของตัวเอง แต่ขนาด/น้ำหนักเท่าปุ่มยอมรับ */
.ww-btn-reject {
	background: var( --ww-reject-bg );
	color: var( --ww-reject-text );
	border-color: var( --ww-reject-bg );
}

.ww-btn-secondary {
	background: transparent;
	color: var( --ww-text );
	border-color: currentColor;
	min-width: 110px;
}
.ww-btn-secondary:hover {
	opacity: 0.75;
}

.ww-link {
	color: var( --ww-primary );
	text-decoration: underline;
}

/* ===================================================================
 * หน้าต่างตั้งค่า (preferences modal)
 * =================================================================== */

.ww-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba( 0, 0, 0, 0.5 );
	box-sizing: border-box;
	opacity: 0;
	transition: opacity var( --ww-anim-dur ) var( --ww-ease );
}
.ww-modal-overlay.is-visible {
	opacity: 1;
}
.waenweb-pdpa[data-blur="on"] .ww-modal-overlay {
	backdrop-filter: blur( 5px );
	-webkit-backdrop-filter: blur( 5px );
}

.ww-modal {
	background: var( --ww-bg );
	color: var( --ww-text );
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	border-radius: var( --ww-radius );
	box-shadow: var( --ww-shadow );
	overflow: hidden;
	transform: translateY( 16px ) scale( 0.96 );
	opacity: 0;
	transition: transform var( --ww-anim-dur ) var( --ww-ease ),
		opacity var( --ww-anim-dur ) var( --ww-ease );
}
.ww-modal-overlay.is-visible .ww-modal {
	transform: none;
	opacity: 1;
}

.ww-modal__header,
.ww-modal__footer {
	padding: 18px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ww-modal__header {
	border-bottom: 1px solid rgba( 128, 128, 128, 0.25 );
	justify-content: space-between;
}

.ww-modal__title {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
}

.ww-modal__close {
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var( --ww-text );
	padding: 0 6px;
	border-radius: 6px;
	transition: background 0.15s ease;
}
.ww-modal__close:hover {
	background: rgba( 128, 128, 128, 0.15 );
}

.ww-modal__body {
	padding: 20px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ww-modal__intro {
	margin: 0 0 16px;
}

.ww-modal__footer {
	border-top: 1px solid rgba( 128, 128, 128, 0.25 );
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* --- หมวดในหน้าตั้งค่า --- */
.ww-cat {
	padding: 16px 0;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.2 );
}
.ww-cat:last-child {
	border-bottom: none;
}

.ww-cat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.ww-cat__name {
	font-weight: 700;
	font-size: 1.05em;
}

.ww-cat__badge {
	font-size: 0.78em;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba( 128, 128, 128, 0.18 );
	color: var( --ww-text );
}

.ww-cat__desc {
	margin: 0;
	font-size: 0.92em;
	opacity: 0.9;
}

/* --- toggle switch --- */
.ww-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
	flex: 0 0 auto;
}
.ww-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.ww-switch__slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: #c4c4c4;
	border-radius: 26px;
	transition: background 0.25s ease;
}
.ww-switch__slider::before {
	content: "";
	position: absolute;
	height: 20px;
	width: 20px;
	left: 3px;
	bottom: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.25s var( --ww-ease );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
}
.ww-switch input:checked + .ww-switch__slider {
	background: var( --ww-primary );
}
.ww-switch input:checked + .ww-switch__slider::before {
	transform: translateX( 20px );
}
.ww-switch input:disabled + .ww-switch__slider {
	opacity: 0.6;
	cursor: not-allowed;
}
.ww-switch input:focus-visible + .ww-switch__slider {
	outline: 3px solid var( --ww-primary );
	outline-offset: 2px;
}

/* --- ตารางคุกกี้ --- */
.ww-cookies {
	margin-top: 10px;
}
.ww-cookies__summary {
	cursor: pointer;
	font-size: 0.86em;
	color: var( --ww-primary );
}
.ww-cookies__table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	font-size: 0.85em;
}
.ww-cookies__table th,
.ww-cookies__table td {
	border: 1px solid rgba( 128, 128, 128, 0.25 );
	padding: 6px 8px;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

/* ===================================================================
 * ปุ่มลอย
 * =================================================================== */

.ww-floating {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 999998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var( --ww-primary );
	color: var( --ww-btn-text );
	border: none;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.18s var( --ww-ease ), box-shadow 0.18s ease;
	animation: ww-pop 0.4s var( --ww-ease ) both;
}
.ww-floating:hover {
	transform: translateY( -2px ) scale( 1.03 );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.28 );
}
.ww-floating__icon {
	font-size: 1.15em;
	line-height: 1;
}

@keyframes ww-pop {
	from { opacity: 0; transform: translateY( 12px ) scale( 0.9 ); }
	to   { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}

/* ===================================================================
 * Responsive
 * =================================================================== */

/* แท็บเล็ต */
@media ( max-width: 782px ) {
	.ww-banner__inner {
		padding: 18px 18px;
	}
	.ww-banner__actions {
		width: 100%;
	}
	.ww-banner__actions .ww-btn {
		flex: 1 1 calc( 50% - 5px );
	}
}

/* มือถือ */
@media ( max-width: 560px ) {
	/* box/modal → กลายเป็น bottom sheet เต็มความกว้าง */
	.waenweb-pdpa[data-position="box"] .ww-banner,
	.waenweb-pdpa[data-position="modal"] .ww-banner {
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-width: none;
		transform: translateY( 100% );
		border-radius: var( --ww-radius ) var( --ww-radius ) 0 0;
	}
	.waenweb-pdpa[data-position="modal"] .ww-banner.is-visible {
		transform: translateY( 0 );
	}

	.ww-banner__actions {
		flex-direction: column;
	}
	.ww-banner__actions .ww-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	/* preferences → bottom sheet */
	.ww-modal-overlay {
		padding: 0;
		align-items: flex-end;
	}
	.ww-modal {
		max-width: none;
		max-height: 92vh;
		border-radius: var( --ww-radius ) var( --ww-radius ) 0 0;
		transform: translateY( 100% );
	}
	.ww-modal-overlay.is-visible .ww-modal {
		transform: translateY( 0 );
	}
	.ww-modal__footer {
		flex-direction: column-reverse;
	}
	.ww-modal__footer .ww-btn {
		width: 100%;
	}

	.ww-floating__label {
		display: none;
	}
	.ww-floating {
		padding: 12px;
		left: 14px;
		bottom: 14px;
	}

	/* ตารางคุกกี้เลื่อนแนวนอนได้บนจอเล็ก */
	.ww-cookies {
		overflow-x: auto;
	}
}

/* จอเล็กมาก */
@media ( max-width: 360px ) {
	.ww-banner__inner,
	.ww-modal__body {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* เคารพการตั้งค่าลดการเคลื่อนไหวของระบบ */
@media ( prefers-reduced-motion: reduce ) {
	.waenweb-pdpa *,
	.waenweb-pdpa *::before {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}