/* ความยินยอมคุกกี้ (PDPA) — สีปุ่มหลัก --cz-a / --cz-o จาก PHP
   ทุกชิ้น fixed หรือ <dialog> = CLS 0 · selector ขึ้นต้น .cz-c ชนะสไตล์ปุ่มของธีม (ไม่ใช้ !important นอกจาก [hidden]) */
.cz-c [hidden] { display: none !important; }
.cz-c, .cz-c * { box-sizing: border-box; }
.cz-c__bar, .cz-c__dlg, .cz-c__float { font-family: inherit; font-size: 15px; line-height: 1.6; color: #1a1a1a; }

.cz-c__bar {
	position: fixed; z-index: 2147483000; left: 16px; right: 16px; bottom: 16px;
	max-width: 1040px; margin: 0 auto; padding: 20px 24px;
	display: grid; grid-template-columns: minmax(0, 1fr) fit-content(60%); gap: 16px 32px; align-items: center;
	background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
}
.cz-c__t { margin: 0 0 4px; font-weight: 600; font-size: 16px; }
.cz-c__b, .cz-c__d, .cz-c__id { margin: 0; color: #444; }
.cz-c a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.cz-c__acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
/* หน้าต่าง: ยอมรับ/ปฏิเสธกว้างเท่ากัน · บันทึกเต็มแถว · minmax(0,1fr) = ข้อความยาวไม่ทำให้คอลัมน์ไม่เท่า */
.cz-c__dlg .cz-c__acts { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cz-c__dlg .cz-c__btn--s { grid-column: 1 / -1; }
.cz-c__bar:focus { outline: none; }
.cz-c__pl { margin: 16px 0 0; font-size: 14px; }
.cz-c .cz-c__btn {
	margin: 0; min-height: 44px; padding: 10px 18px; border-radius: var(--cz-r, 8px); border: 1px solid var(--cz-a);
	font: inherit; font-weight: 600; font-size: 15px; line-height: 1.3; text-transform: none; letter-spacing: 0;
	cursor: pointer; box-shadow: none; text-shadow: none; overflow-wrap: anywhere;
}
/* ยอมรับ = ปฏิเสธ: สไตล์เดียวกันทุกอย่าง (ไม่มี dark pattern) */
.cz-c .cz-c__btn--p, .cz-c .cz-c__btn--p:hover, .cz-c .cz-c__btn--p:focus { background: var(--cz-a); color: var(--cz-o); }
.cz-c .cz-c__btn--s, .cz-c .cz-c__btn--s:hover, .cz-c .cz-c__btn--s:focus { background: #fff; color: #1a1a1a; border-color: #bdbdbd; }
.cz-c .cz-c__btn:hover { filter: brightness(.92); }
.cz-c button:focus-visible, .cz-c a:focus-visible, .cz-c input:focus-visible { outline: 3px solid var(--cz-a); outline-offset: 2px; }

/* มุมขวาล่าง (ข้อ 11): กล่องแคบ ข้อความเรียงบนลงล่าง */
.cz-c--corner .cz-c__bar { left: auto; right: 16px; bottom: 16px; width: calc(100% - 32px); max-width: var(--cz-w); grid-template-columns: minmax(0, 1fr); }
/* เนื้อหาบล็อก (ข้อ 6): คอลัมน์เดียว · แถบ/มุมขวาใช้ padding ของแถบเอง */
.cz-c__bar--b:not(dialog) { grid-template-columns: minmax(0, 1fr); }
.cz-c__bar--b:not(dialog) > .cz-c__in { padding: 0; }
/* ข้อ 4-5: ล็อกปุ่ม */
#cz-consent .cz-c__bar--b :has(> .cz-c__acts--b), #cz-consent .cz-c__bar--b .cz-c__acts--b, #cz-consent .cz-c__bar--b .cz-c__acts--b .cz-c__btn { visibility: visible !important; opacity: 1 !important; transform: none !important; scale: none !important; translate: none !important; zoom: 1 !important; clip-path: none !important; filter: none !important; }
#cz-consent .cz-c__bar--b .cz-c__acts--b { display: flex !important; position: static !important; overflow: visible !important; height: auto !important; max-height: none !important; }
#cz-consent .cz-c__bar--b .cz-c__acts--b .cz-c__btn { display: block !important; position: static !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; min-height: 44px !important; overflow: visible !important; font-size: var(--cz-fs) !important; font-weight: var(--cz-fw) !important; padding: 10px 18px !important; text-indent: 0 !important; border: 1px solid var(--cz-pr) !important; background: var(--cz-pb) !important; color: var(--cz-pc) !important; }
#cz-consent .cz-c__bar--b .cz-c__acts--b .cz-c__btn--p { flex: 1 1 0 !important; min-width: min(6em, 50% - var(--cz-g)) !important; }
#cz-consent .cz-c__bar--b .cz-c__acts--b .cz-c__btn--s { border-color: var(--cz-sr) !important; background: var(--cz-sb) !important; color: var(--cz-sc) !important; }
#cz-consent .cz-c__bar--b .cz-c__acts--b[data-dir=column] .cz-c__btn { flex: none !important; }
/* กลางจอ: <dialog> · × = ปฏิเสธ (ข้อ 14) · บล็อก: เว้นที่ให้ × */
dialog.cz-c__bar { padding: 0; width: calc(100% - 32px); max-width: var(--cz-w); max-height: calc(100% - 32px); overflow: auto; display: block; position: fixed; inset: 0; height: fit-content; margin: auto; }
dialog.cz-c__bar:not([open]) { display: none; }
dialog.cz-c__bar::backdrop { background: rgba(0, 0, 0, .45); }
.cz-c__in { padding: 24px; display: grid; gap: 16px; isolation: isolate; }
dialog.cz-c__bar--b > .cz-c__in { padding-top: 48px; }
.cz-c__bar--m .cz-c__x { position: absolute; top: 8px; right: 8px; }
.cz-c__bar--m .cz-c__t { padding-right: 32px; }
/* สำรองเมื่อไม่มีสคริปต์: ไม่ใช่ modal จริง แสดงเป็นกล่องล่างจอ */
dialog.cz-c__bar:not([hidden]):not([open]) { display: block; inset: auto 16px 16px; height: auto; margin: 0 auto; }
dialog.cz-c__bar[open] { animation: cz-f .2s ease-out; }
@keyframes cz-f { from { opacity: 0; } }

/* บล็อกปุ่ม (ข้อ 4 · 18): ยอมรับ = ปฏิเสธ กฎเดียว · สีผ่าน contrast จาก PHP */
.cz-c .cz-c__acts--b { display: flex; flex-wrap: wrap; gap: var(--cz-g); width: fit-content; max-width: 100%; margin: 0 0 0 auto; }
.cz-c .cz-c__acts--b[data-align=start] { margin: 0 auto 0 0; }
.cz-c .cz-c__acts--b[data-align=center] { margin: 0 auto; }
.cz-c .cz-c__acts--b[data-align=stretch] { width: auto; margin: 0; }
.cz-c .cz-c__acts--b[data-dir=column] { flex-direction: column; }
.cz-c .cz-c__acts--b .cz-c__btn { min-width: 0; font-size: var(--cz-fs); font-weight: var(--cz-fw); }
.cz-c .cz-c__acts--b .cz-c__btn--p, .cz-c .cz-c__acts--b .cz-c__btn--p:hover, .cz-c .cz-c__acts--b .cz-c__btn--p:focus { flex: 1 1 0; background: var(--cz-pb); color: var(--cz-pc); border-color: var(--cz-pr); }
.cz-c .cz-c__acts--b .cz-c__btn--s, .cz-c .cz-c__acts--b .cz-c__btn--s:hover, .cz-c .cz-c__acts--b .cz-c__btn--s:focus { background: var(--cz-sb); color: var(--cz-sc); border-color: var(--cz-sr); }
.cz-c .cz-c__acts--b[data-align=stretch] .cz-c__btn--s { flex: 1 1 auto; }
.cz-c .cz-c__acts--b[data-dir=column] .cz-c__btn { flex: none; }

/* หน้าต่างตั้งค่า */
.cz-c__dlg {
	width: calc(100% - 32px); max-width: 560px; max-height: calc(100% - 32px); overflow: auto;
	padding: 24px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.cz-c__dlg::backdrop { background: rgba(0, 0, 0, .45); }
.cz-c__hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.cz-c .cz-c__dt { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: #1a1a1a; }
.cz-c .cz-c__x {
	margin: 0; width: 40px; height: 40px; padding: 0; flex: none; border: 0; border-radius: 8px;
	background: transparent; color: #1a1a1a; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: none;
}
.cz-c .cz-c__x:hover { background: #f2f2f2; color: #1a1a1a; }
.cz-c__cat { padding: 14px 0; border-bottom: 1px solid #ececec; }
.cz-c__sw { display: flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; }
.cz-c__d { margin-top: 4px; font-size: 14px; }
.cz-c__id { margin: 16px 0; font-size: 13px; word-break: break-all; }
.cz-c__id span { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* สวิตช์ (checkbox จริง — คีย์บอร์ด/โปรแกรมอ่านจอใช้ได้ตามปกติ) */
.cz-c__sw input {
	appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
	width: 44px; height: 26px; border-radius: 13px; background: #c4c4c4; cursor: pointer; transition: background .15s;
}
.cz-c__sw input::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s;
}
.cz-c__sw input:checked { background: var(--cz-a); }
.cz-c__sw input:checked::after { transform: translateX(18px); }
.cz-c__sw input:disabled { opacity: .55; cursor: not-allowed; }

/* ปุ่มลอยมุมซ้ายล่าง */
.cz-c .cz-c__float {
	position: fixed; z-index: 2147482999; left: 16px; bottom: 16px; margin: 0;
	padding: 8px 14px; min-height: 36px; border: 1px solid #d6d6d6; border-radius: 999px;
	background: #fff; color: #1a1a1a; font-size: 13px; font-weight: 600; line-height: 1.2;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12); cursor: pointer; text-transform: none;
}
.cz-c .cz-c__float:hover { background: #f5f5f5; color: #1a1a1a; }

@media (max-width: 599px) {
	.cz-c--corner .cz-c__bar { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: 1040px; }
}
@media (max-width: 760px) {
	.cz-c__bar { grid-template-columns: minmax(0, 1fr); left: 8px; right: 8px; bottom: 8px; padding: 16px; gap: 12px; }
	.cz-c__b { font-size: 14px; }
	.cz-c__acts { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.cz-c__acts .cz-c__btn--s { grid-column: 1 / -1; }
	.cz-c .cz-c__btn { padding: 10px 12px; }
	.cz-c__dlg { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.cz-c__sw input, .cz-c__sw input::after { transition: none; }
	dialog.cz-c__bar[open] { animation: none; }
}