/**
 * Cookie Consent (PDPA) — สไตล์ให้เข้ากับธีม CKNAKA
 * ใช้ CSS variables ของธีมหลัก (มี fallback เผื่อโหลดก่อน)
 */

.ck-cc,
.ck-cc * { box-sizing: border-box; }

/* ---------- แถบแจ้งเตือน (banner) ---------- */
.ck-cc-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	max-width: 460px;
	background: var(--paper, #fff);
	color: var(--ink, #14161b);
	border: 1.5px solid var(--line-2, #d7d4cd);
	border-radius: var(--radius-lg, 12px);
	box-shadow: 0 18px 50px rgba(20, 22, 27, .22);
	padding: 22px 22px 20px;
	font-size: 14.5px;
	line-height: 1.65;
	animation: ck-cc-in .35s ease;
}
@keyframes ck-cc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ck-cc-banner[hidden],
.ck-cc-modal[hidden] { display: none; }

.ck-cc-banner h3 {
	font-family: var(--display, 'Chakra Petch', sans-serif);
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--ink, #14161b);
}
.ck-cc-banner p { margin: 0 0 16px; color: var(--slate, #5b606e); }
.ck-cc-banner a { color: var(--pink, #ED2B6E); text-decoration: underline; }

.ck-cc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ck-cc-actions .ck-cc-btn { flex: 1 1 auto; }

/* ---------- ปุ่ม ---------- */
.ck-cc-btn {
	font-family: var(--display, 'Chakra Petch', sans-serif);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	padding: 11px 18px;
	border-radius: var(--radius, 6px);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: .15s;
	white-space: nowrap;
	background: none;
}
.ck-cc-btn-primary {
	background: var(--pink, #ED2B6E);
	color: #fff;
	box-shadow: 0 6px 18px rgba(237, 43, 110, .32);
}
.ck-cc-btn-primary:hover { background: var(--pink-600, #cf1c5b); box-shadow: 0 10px 26px rgba(237, 43, 110, .4); }
.ck-cc-btn-ghost {
	background: transparent;
	color: var(--ink, #14161b);
	border-color: var(--line-2, #d7d4cd);
}
.ck-cc-btn-ghost:hover { border-color: var(--ink, #14161b); }

/* ---------- Modal ตั้งค่า ---------- */
.ck-cc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ck-cc-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 22, 27, .55);
	backdrop-filter: blur(2px);
	animation: ck-cc-fade .25s ease;
}
@keyframes ck-cc-fade { from { opacity: 0; } to { opacity: 1; } }

.ck-cc-modal-box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--paper, #fff);
	border-radius: var(--radius-lg, 12px);
	box-shadow: 0 30px 70px rgba(20, 22, 27, .4);
	padding: 30px 30px 26px;
	animation: ck-cc-in .3s ease;
}
.ck-cc-modal-box h2 {
	font-family: var(--display, 'Chakra Petch', sans-serif);
	font-size: 23px;
	margin: 0 0 10px;
}
.ck-cc-modal-box .ck-cc-intro { color: var(--slate, #5b606e); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; }
.ck-cc-modal-box .ck-cc-intro a { color: var(--pink, #ED2B6E); text-decoration: underline; }

.ck-cc-cat {
	border: 1.5px solid var(--line, #e6e4df);
	border-radius: var(--radius, 6px);
	padding: 16px 18px;
	margin-bottom: 12px;
	background: var(--paper-2, #f6f5f2);
}
.ck-cc-cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.ck-cc-cat-head b {
	font-family: var(--display, 'Chakra Petch', sans-serif);
	font-size: 15.5px;
	color: var(--ink, #14161b);
}
.ck-cc-cat p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--slate, #5b606e); }

/* toggle switch */
.ck-cc-switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.ck-cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-cc-slider {
	position: absolute; inset: 0;
	background: var(--line-2, #d7d4cd);
	border-radius: 999px;
	transition: .2s;
}
.ck-cc-slider::before {
	content: '';
	position: absolute;
	left: 3px; top: 3px;
	width: 20px; height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: .2s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.ck-cc-switch input:checked + .ck-cc-slider { background: var(--pink, #ED2B6E); }
.ck-cc-switch input:checked + .ck-cc-slider::before { transform: translateX(20px); }
.ck-cc-switch input:disabled + .ck-cc-slider { background: var(--pink-100, #ffe3ee); cursor: not-allowed; }
.ck-cc-switch input:disabled + .ck-cc-slider::before { background: var(--pink, #ED2B6E); }

.ck-cc-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}
.ck-cc-modal-actions .ck-cc-btn { flex: 1 1 auto; }

.ck-cc-close {
	position: absolute;
	top: 14px; right: 14px;
	width: 34px; height: 34px;
	border: none; background: none; cursor: pointer;
	color: var(--muted, #8a8f9c);
	font-size: 24px; line-height: 1;
	border-radius: 50%;
}
.ck-cc-close:hover { background: var(--paper-3, #efece6); color: var(--ink, #14161b); }

/* ---------- Placeholder แผนที่ (consent-gated) ---------- */
.c-map.ck-cc-gate { position: relative; }
.ck-cc-gate-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	min-height: 260px;
	padding: 30px 24px;
	background: var(--paper-2, #f6f5f2);
	color: var(--slate, #5b606e);
	font-size: 14.5px;
	line-height: 1.6;
}
.ck-cc-gate-inner svg { color: var(--muted, #8a8f9c); }
.ck-cc-gate .ck-cc-gate-iframe { display: none; width: 100%; height: 260px; border: 0; }
.ck-cc-gate.is-loaded .ck-cc-gate-inner { display: none; }
.ck-cc-gate.is-loaded .ck-cc-gate-iframe { display: block; }

/* ---------- ลิงก์ตั้งค่าคุกกี้ใน footer ---------- */
.ck-cc-reopen { cursor: pointer; }

@media (max-width: 520px) {
	.ck-cc-banner { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 18px; }
	.ck-cc-actions .ck-cc-btn { flex: 1 1 100%; }
}