/* WDT Member — โทนครีม ทอง น้ำตาล */
.wdt-wrap,
.wdt-overlay,
.wdt-hello,
.wdt-open {
	--wdt-accent: #8A5A2B;
	font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
	box-sizing: border-box;
}
.wdt-wrap *,
.wdt-overlay *,
.wdt-wrap *::before,
.wdt-overlay *::before {
	box-sizing: border-box;
}

.wdt-wrap {
	max-width: 440px;
	margin: 0 auto;
	padding: 64px 16px 24px;
}

/* ---------- การ์ด ---------- */
.wdt-card {
	position: relative;
	width: 100%;
	background: #FFFCF6;
	border: 1.5px solid #D9B98A;
	border-radius: 28px;
	padding: 76px 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: #4A3520;
	text-align: left;
	box-shadow: 0 12px 32px rgba(107, 65, 32, 0.24), inset 0 0 0 5px #FFF8EC, inset 0 0 0 6px #EBD5AE;
}
.wdt-card[hidden] { display: none; }

/* ---------- ป้ายหัวเรื่อง ---------- */
.wdt-head {
	position: absolute;
	top: -46px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}
.wdt-orn { display: flex; align-items: flex-end; gap: 10px; }
.wdt-line { display: block; width: 70px; height: 1.5px; background: #C9A367; margin-bottom: 10px; }
.wdt-title {
	margin-top: -4px;
	padding: 10px 36px;
	border-radius: 24px;
	border: 1.5px solid #D9B98A;
	background-image: linear-gradient(180deg, #F8EAD6, #EBD3B1);
	box-shadow: 0 4px 10px rgba(107, 65, 32, 0.18), inset 0 1px 0 #FFF6E6;
}
.wdt-card .wdt-title h2 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	color: #6B4120;
	white-space: nowrap;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- ฟอร์ม ---------- */
.wdt-card .wdt-form { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.wdt-field { display: flex; flex-direction: column; gap: 6px; }
.wdt-card .wdt-field label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: #6B4120;
}
.wdt-req { color: #C0392B; }
.wdt-opt { font-size: 14px; font-weight: 400; color: #7A6A58; }

.wdt-card .wdt-input {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 20px;
	border: 1.5px solid #E2C9A0;
	border-radius: 25px;
	background: #FFFFFF;
	box-shadow: none;
	font-family: inherit;
	font-size: 17px;
	line-height: normal;
	color: #2B1D10;
}
.wdt-card .wdt-input:focus { outline: 2px solid var(--wdt-accent); outline-offset: 2px; border-color: #D9B98A; }

.wdt-pass { position: relative; }
.wdt-pass .wdt-input { padding-right: 56px; }
.wdt-card .wdt-eye {
	position: absolute;
	right: 8px;
	top: 5px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.wdt-card .wdt-eye:focus-visible { outline: 2px solid var(--wdt-accent); }
.wdt-eye .wdt-eye-on { display: none; }
.wdt-eye.is-shown .wdt-eye-on { display: block; }
.wdt-eye.is-shown .wdt-eye-off { display: none; }

.wdt-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.wdt-check { display: flex; align-items: center; gap: 10px; }
.wdt-card .wdt-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--wdt-accent); }
.wdt-card .wdt-check label { margin: 0; font-size: 16px; color: #4A3520; }

.wdt-note { margin: 0; font-size: 14px; color: #7A6A58; }

.wdt-card .wdt-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 28px;
	background-color: var(--wdt-accent);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.14));
	box-shadow: 0 6px 14px rgba(107, 65, 32, 0.32);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 21px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}
.wdt-card .wdt-submit:hover { filter: brightness(1.06); }
.wdt-card .wdt-submit:focus-visible { outline: 2px solid var(--wdt-accent); outline-offset: 2px; }

/* ---------- ลิงก์ ---------- */
.wdt-card .wdt-link,
.wdt-hello .wdt-link,
.wdt-already .wdt-link {
	color: #5A3416;
	font-weight: 500;
	text-decoration: underline;
}
.wdt-card .wdt-link:hover { color: #2E1A0A; }
.wdt-card .wdt-linkbtn {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	cursor: pointer;
}
.wdt-card .wdt-row .wdt-link { font-size: 16px; }

.wdt-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wdt-foot p { margin: 0; text-align: center; font-size: 16px; color: #4A3520; }
.wdt-divider { display: flex; align-items: center; gap: 10px; width: 100%; }
.wdt-divider span { flex: 1; height: 1.5px; background: #E2C9A0; }

/* ---------- ข้อความแจ้งเตือน ---------- */
.wdt-msg { padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.wdt-msg-error { background: #FDEDEB; color: #8A1C13; border: 1px solid #F2C4BF; }
.wdt-msg-ok { background: #E8F4EA; color: #1F5C2E; border: 1px solid #BFDCC5; }

/* ---------- ป๊อปอัปแจ้งผลหลังเข้าสู่ระบบ ---------- */
.wdt-card.wdt-welcome { align-items: center; text-align: center; gap: 8px; }
.wdt-welcome p { margin: 0; }
.wdt-welcome svg { margin-bottom: 4px; }
.wdt-welcome .wdt-hello-line { font-size: 18px; color: #6B4120; }
.wdt-welcome .wdt-who { font-size: 28px; font-weight: 700; line-height: 1.3; color: #4A3520; word-break: break-word; }
.wdt-welcome .wdt-as { font-size: 16px; color: #4A3520; }
.wdt-role {
	display: inline-block;
	margin-left: 4px;
	padding: 3px 16px;
	border: 1px solid #D9B98A;
	border-radius: 16px;
	background: #F3E4CB;
	color: #6B4120;
	font-weight: 600;
}
.wdt-welcome .wdt-msgtext { font-size: 17px; line-height: 1.6; color: #4A3520; }
.wdt-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 14px; }
.wdt-card a.wdt-submit-link { color: #FFFFFF; text-decoration: none; }
.wdt-card a.wdt-submit-link:hover { color: #FFFFFF; }
.wdt-card .wdt-submit.wdt-ghost {
	background-color: #FFFFFF;
	background-image: none;
	border: 1.5px solid #D9B98A;
	box-shadow: none;
	color: #6B4120;
}

/* ช่องหลอกบอท ซ่อนจากคนจริง */
.wdt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- ปุ่มเปิดป๊อปอัป / ข้อความทักทาย ---------- */
.wdt-open,
.wdt-open:hover,
.wdt-open:focus {
	text-decoration: none;
}
button.wdt-open {
	margin: 0;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-transform: none;
	box-shadow: 0 6px 14px rgba(107, 65, 32, 0.28);
}
.wdt-open {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 24px;
	background-color: var(--wdt-accent);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.14));
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.wdt-open:hover { color: #FFFFFF; filter: brightness(1.06); }
.wdt-hello { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 16px; color: #4A3520; }
.wdt-hello-name { font-weight: 600; }
.wdt-already { text-align: center; font-size: 17px; color: #4A3520; }

/* ---------- ป๊อปอัป ---------- */
.wdt-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow-y: auto;
	padding: 24px 16px;
	background: rgba(40, 25, 10, 0.62);
}
.wdt-overlay[hidden] { display: none; }
.wdt-dialog { position: relative; width: 100%; max-width: 440px; margin: auto; padding-top: 56px; }
.wdt-close {
	position: absolute;
	top: 66px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 0 4px;
	border: 0;
	border-radius: 20px;
	background: transparent;
	box-shadow: none;
	color: #6B4120;
	font-family: inherit;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.wdt-close:hover { background: #F3E4CB; }
.wdt-close:focus-visible { outline: 2px solid var(--wdt-accent); }
body.wdt-lock { overflow: hidden; }

@media (max-width: 480px) {
	.wdt-card { padding: 76px 20px 24px; }
	.wdt-line { width: 36px; }
	.wdt-title { padding: 10px 24px; }
	.wdt-card .wdt-title h2 { font-size: 23px; }
}