/*
 * Uthain News — หน้าล็อกอิน (wp-login.php)
 * ใช้แทนสไตล์ login ของ WordPress ทั้งหมด จึงไม่มีโลโก้ WordPress
 */

:root {
	--un-accent: #c62828;
	--un-on-accent: #fff;
	--un-font-body: "Sarabun", system-ui, sans-serif;
	--un-font-head: "Prompt", system-ui, sans-serif;

	--un-bg: #ffffff;
	--un-surface: #f4f3f1;
	--un-text: #1d1b19;
	--un-muted: #6c6862;
	--un-border: #e4e1dc;
	--un-ink: #141414;
	--un-on-ink: #f3f1ee;
	--un-on-ink-muted: #a9a59f;
	--un-radius: 6px;

	--ul-aside-w: min(44vw, 640px);
	--ul-ring: rgba(198, 40, 40, 0.18);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--ul-ring: color-mix(in srgb, var(--un-accent) 22%, transparent);
	}
}

:root[data-mode="dark"] {
	--un-bg: #1a1a1a;
	--un-surface: #111;
	--un-text: #ecebe8;
	--un-muted: #a09c96;
	--un-border: #2e2e2e;
	--un-ink: #0b0b0b;
	color-scheme: dark;
}

html {
	background: var(--un-surface);
}

body.login {
	margin: 0;
	min-height: 100vh;
	padding: 48px 24px 48px calc(var(--ul-aside-w) + 24px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--un-surface);
	color: var(--un-text);
	font-family: var(--un-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.login *,
body.login *::before,
body.login *::after {
	box-sizing: border-box;
}

body.login a {
	color: var(--un-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}

body.login a:hover {
	color: var(--un-text);
}

body.login a:focus-visible,
body.login button:focus-visible,
body.login input:focus-visible,
body.login select:focus-visible {
	outline: 2px solid var(--un-accent);
	outline-offset: 2px;
	box-shadow: none;
}

.screen-reader-text,
.screen-reader-text span {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------------------------------------------------------------
   แผงแบรนด์ด้านซ้าย
--------------------------------------------------------------- */
.uthain-login-aside {
	--ul-fg: var(--un-on-ink);
	--ul-fg-muted: var(--un-on-ink-muted);
	--ul-line: rgba(255, 255, 255, 0.12);
	--ul-dot: rgba(255, 255, 255, 0.08);
	--ul-stripe: var(--un-accent);
	--ul-pill-bg: var(--un-accent);
	--ul-pill-fg: var(--un-on-accent);
	--ul-cat: #ff8a80;

	position: fixed;
	inset: 0 auto 0 0;
	width: var(--ul-aside-w);
	z-index: 1;
	overflow: hidden auto;
	background-color: var(--un-ink);
	color: var(--ul-fg);
}

/* ลายจุดจาง ๆ ไล่หายลงด้านล่าง */
.ul-has-pattern .uthain-login-aside::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--ul-dot) 1.4px, transparent 1.8px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(160deg, #000 0%, transparent 70%);
	pointer-events: none;
}

/* รูปพื้นหลัง + ตัวหรี่แสง */
.ul-has-image .uthain-login-aside {
	background-image: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.88) 100%), var(--ul-image);
	background-size: cover;
	background-position: center;
}

/* แถบสีหลักด้านขวาของแผง เหมือนเส้นใต้แถบเมนู */
.uthain-login-aside::after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: calc(var(--ul-aside-w) - 4px);
	width: 4px;
	background: var(--ul-stripe);
}

.ul-panel-accent .uthain-login-aside {
	--ul-fg: var(--un-on-accent);
	--ul-fg-muted: var(--un-on-accent);
	--ul-line: rgba(255, 255, 255, 0.22);
	--ul-dot: rgba(255, 255, 255, 0.14);
	--ul-stripe: var(--un-ink);
	--ul-pill-bg: var(--un-ink);
	--ul-pill-fg: var(--un-on-ink);
	--ul-cat: var(--un-on-accent);
	background-color: var(--un-accent);
}

.ul-panel-accent .ul-tagline,
.ul-panel-accent .ul-news time,
.ul-panel-accent .ul-copy {
	opacity: 0.8;
}

.ul-panel-light .uthain-login-aside {
	--ul-fg: var(--un-text);
	--ul-fg-muted: var(--un-muted);
	--ul-line: var(--un-border);
	--ul-dot: rgba(0, 0, 0, 0.07);
	--ul-cat: var(--un-accent);
	background-color: var(--un-bg);
}

.ul-panel-light.ul-has-image .uthain-login-aside {
	--ul-fg: #fff;
	--ul-fg-muted: rgba(255, 255, 255, 0.72);
	--ul-line: rgba(255, 255, 255, 0.18);
	--ul-cat: #ff8a80;
}

.ul-aside-inner {
	position: relative;
	z-index: 1;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: clamp(36px, 6vh, 64px) clamp(32px, 5vw, 72px);
}

.ul-aside-top {
	flex: 1 1 auto;
}

.ul-brand {
	display: inline-block;
	color: var(--ul-fg) !important;
}

.ul-logo {
	display: block;
	max-width: min(320px, 100%);
	max-height: 96px;
	width: auto;
	height: auto;
}

.ul-title {
	display: inline-block;
	font-family: var(--un-font-head);
	font-size: clamp(34px, 3.4vw, 50px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.ul-title::after {
	content: "";
	display: inline-block;
	width: 0.22em;
	height: 0.22em;
	margin-left: 0.1em;
	border-radius: 50%;
	background: var(--un-accent);
}

.ul-panel-accent .ul-title::after {
	background: var(--un-on-accent);
}

.ul-tagline {
	margin: 10px 0 0;
	max-width: 30em;
	color: var(--ul-fg-muted);
	font-size: 17px;
}

.ul-intro {
	margin: 0;
	max-width: 26em;
	font-family: var(--un-font-head);
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 500;
	line-height: 1.45;
}

.ul-news-label {
	margin: 0 0 6px;
	border-bottom: 2px solid var(--ul-line);
	line-height: 0;
}

.ul-news-label span {
	display: inline-block;
	padding: 7px 14px 6px;
	border-radius: var(--un-radius) var(--un-radius) 0 0;
	background: var(--ul-pill-bg);
	color: var(--ul-pill-fg);
	font-family: var(--un-font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.ul-news ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ul-news li {
	display: grid;
	gap: 2px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ul-line);
}

.ul-news li:last-child {
	border-bottom: 0;
}

.ul-cat {
	color: var(--ul-cat);
	font-family: var(--un-font-head);
	font-size: 13px;
	font-weight: 600;
}

.ul-news a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ul-fg) !important;
	font-family: var(--un-font-head);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
}

.ul-news a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ul-news time,
.ul-copy {
	color: var(--ul-fg-muted);
	font-size: 13px;
}

.ul-copy {
	margin: 0;
}

/* ---------------------------------------------------------------
   กล่องฟอร์ม
--------------------------------------------------------------- */
#login {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 40px 40px 28px;
	background: var(--un-bg);
	border: 1px solid var(--un-border);
	border-top: 4px solid var(--un-accent);
	border-radius: var(--un-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 48px -18px rgba(0, 0, 0, 0.18);
}

/* โลโก้ของ WordPress: ซ่อน เพราะแผงซ้ายแสดงโลโก้ของเว็บแล้ว */
.login h1 a,
.login .wp-login-logo a {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	background: none !important;
}

.login h1 {
	margin: 0;
}

.ul-form-head {
	margin: 0 0 26px;
}

.ul-form-head h2 {
	margin: 0;
	font-family: var(--un-font-head);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--un-text);
}

.ul-form-head p {
	margin: 6px 0 0;
	color: var(--un-muted);
	font-size: 15px;
}

/* ข้อความแจ้งเตือน */
.login .message,
.login .notice,
.login .success,
.login #login_error {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 0;
	border-left: 4px solid #2271b1;
	border-radius: 0 var(--un-radius) var(--un-radius) 0;
	background: var(--un-surface);
	color: var(--un-text);
	font-size: 14px;
	line-height: 1.55;
	box-shadow: none;
	word-wrap: break-word;
}

.login .notice p,
.login .message p,
.login #login_error p {
	margin: 0;
}

.login .notice-success,
.login .success {
	border-left-color: #2e7d32;
}

.login .notice-error,
.login #login_error {
	border-left-color: var(--un-accent);
}

.login .notice-warning {
	border-left-color: #dba617;
}

/* ฟอร์ม */
.login form {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	overflow: visible;
	font-weight: 400;
}

.login form p {
	margin: 0 0 18px;
}

.login .user-pass-wrap {
	margin: 0 0 18px;
}

.login label {
	display: inline-block;
	margin: 0 0 6px;
	color: var(--un-text);
	font-family: var(--un-font-head);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	vertical-align: baseline;
}

body.login form .input,
body.login form input[type="text"],
body.login form input[type="email"],
body.login form input[type="password"],
body.login input[type="text"],
body.login input[type="password"] {
	display: block;
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--un-border);
	border-radius: var(--un-radius);
	background: var(--un-bg);
	color: var(--un-text);
	font-family: var(--un-font-body);
	font-size: 16px;
	line-height: 46px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.login form .input:hover,
body.login input[type="text"]:hover,
body.login input[type="password"]:hover {
	border-color: var(--un-muted);
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
	border-color: var(--un-accent);
	box-shadow: 0 0 0 4px var(--ul-ring);
	outline: 0;
}

body.login input::placeholder {
	color: var(--un-muted);
}

/* ช่องรหัสผ่าน + ปุ่มแสดงรหัส */
.login .wp-pwd {
	position: relative;
}

body.login .wp-pwd input.password-input,
body.login .wp-pwd #user_pass,
body.login .wp-pwd #pass1 {
	padding-right: 52px;
	font-family: var(--un-font-body);
}

body.login .button.wp-hide-pw {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: calc(var(--un-radius) - 2px);
	background: transparent;
	color: var(--un-muted);
	box-shadow: none;
	line-height: 1;
}

body.login .button.wp-hide-pw:hover {
	background: var(--un-surface);
	color: var(--un-text);
}

body.login .button.wp-hide-pw:focus {
	border: 0;
	box-shadow: 0 0 0 2px var(--un-accent);
	outline: 0;
}

/* ไอคอนรูปตา วาดเอง ไม่พึ่งฟอนต์ dashicons */
body.login .button.wp-hide-pw .dashicons {
	display: none;
}

body.login .button.wp-hide-pw::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--ul-eye) center / contain no-repeat;
	mask: var(--ul-eye) center / contain no-repeat;
	--ul-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

body.login .button.wp-hide-pw:has(.dashicons-hidden)::before {
	--ul-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.1A10 10 0 0 1 12 5c6.4 0 10 7 10 7a17 17 0 0 1-2.9 3.8M6.6 6.6A17 17 0 0 0 2 12s3.6 7 10 7a9.700 9.700 0 0 0 5.400-1.600'/%3E%3Cpath d='M9.900 9.900a3 3 0 0 0 4.200 4.200'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

.no-js .hide-if-no-js,
.js .hide-if-js {
	display: none !important;
}

/* จดจำฉัน */
.login .forgetmenot {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	margin: 0 0 22px;
}

.login .forgetmenot label {
	margin: 0;
	font-family: var(--un-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--un-text);
	cursor: pointer;
}

body.login input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin: 0;
	border: 1.5px solid var(--un-muted);
	border-radius: 4px;
	background: var(--un-bg) center / 14px no-repeat;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.login input[type="checkbox"]:checked {
	border-color: var(--un-accent);
	background-color: var(--un-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

body.login input[type="checkbox"]:checked::before {
	content: none;
}

body.login input[type="checkbox"]:focus {
	box-shadow: 0 0 0 4px var(--ul-ring);
	outline: 0;
}

/* ปุ่ม */
.login .submit,
.login p.submit {
	float: none;
	clear: both;
	margin: 0;
	padding: 0;
}

body.login .button-primary,
body.login.wp-core-ui .button-primary,
body.login .button.button-large.button-primary {
	display: block;
	float: none;
	width: 100%;
	height: 50px;
	min-height: 50px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--un-radius);
	background: var(--un-accent);
	color: var(--un-on-accent);
	font-family: var(--un-font-head);
	font-size: 16px;
	font-weight: 600;
	line-height: 50px;
	text-align: center;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--un-accent);
	color: var(--un-on-accent);
	filter: brightness(0.9);
	box-shadow: none;
}

body.login .button-primary:focus-visible {
	box-shadow: 0 0 0 4px var(--ul-ring);
	outline: 0;
}

body.login .button-primary:active {
	transform: translateY(1px);
}

body.login .button-secondary:not(.wp-hide-pw),
body.login .button:not(.button-primary):not(.wp-hide-pw) {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--un-border);
	border-radius: var(--un-radius);
	background: var(--un-bg);
	color: var(--un-text);
	font-family: var(--un-font-head);
	font-size: 14px;
	font-weight: 500;
	line-height: 38px;
	box-shadow: none;
}

body.login .button-secondary:not(.wp-hide-pw):hover,
body.login .button:not(.button-primary):not(.wp-hide-pw):hover {
	border-color: var(--un-text);
	background: var(--un-bg);
	color: var(--un-text);
}

/* ลิงก์ใต้ฟอร์ม */
.login #nav,
.login #backtoblog {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 14px;
}

.login #nav {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--un-border);
	color: var(--un-muted);
}

.login #backtoblog {
	margin-top: 8px;
}

.login #nav a,
.login #backtoblog a {
	color: var(--un-muted);
	font-weight: 500;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--un-accent);
}

.login .privacy-policy-page-link {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
}

/* ตั้งรหัสผ่านใหม่ */
.login .pw-weak {
	margin-bottom: 16px;
}

.login .pw-weak label {
	font-family: var(--un-font-body);
	font-weight: 400;
}

.login #pass-strength-result {
	width: 100%;
	margin: 8px 0 16px;
	padding: 8px 10px;
	border: 1px solid var(--un-border);
	border-radius: var(--un-radius);
	background: var(--un-surface);
	color: var(--un-text);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	opacity: 1;
}

.login #pass-strength-result.short {
	background: #fde8e8;
	border-color: #e65054;
	color: #8a1f1f;
}

.login #pass-strength-result.bad {
	background: #fef0e1;
	border-color: #f86368;
	color: #8a3b00;
}

.login #pass-strength-result.good {
	background: #fff6dc;
	border-color: #dba617;
	color: #6b5000;
}

.login #pass-strength-result.strong {
	background: #e5f5e7;
	border-color: #2e7d32;
	color: #1b5e20;
}

.login .description.indicator-hint {
	margin: 0 0 18px;
	color: var(--un-muted);
	font-size: 13px;
}

.login .reset-pass-submit {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.login .reset-pass-submit .button {
	flex: 1 1 auto;
	width: auto !important;
}

/* หน้ายืนยันอีเมลผู้ดูแล */
.login .admin-email-confirm-form .admin-email__heading {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-family: var(--un-font-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--un-text);
}

.login .admin-email-confirm-form .admin-email__details {
	color: var(--un-muted);
	font-size: 15px;
}

.login .admin-email__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.login .admin-email__actions-primary .button-primary {
	width: auto;
}

/* ตัวเลือกภาษา */
.language-switcher {
	width: 100%;
	max-width: 420px;
	margin: 18px 0 0;
}

.language-switcher form {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.language-switcher label .dashicons {
	color: var(--un-muted);
	vertical-align: middle;
}

body.login .language-switcher select {
	min-height: 36px;
	padding: 0 28px 0 10px;
	border: 1px solid var(--un-border);
	border-radius: var(--un-radius);
	background-color: var(--un-bg);
	color: var(--un-text);
	font-family: var(--un-font-body);
	font-size: 14px;
}

body.login .language-switcher .button {
	min-height: 36px !important;
	line-height: 34px !important;
}

.login .clear {
	clear: both;
}

/* หน้าล็อกอินแบบย่อในหลังบ้าน (เซสชันหมดอายุ) */
body.login.interim-login {
	padding: 24px 16px;
}

.interim-login #login {
	box-shadow: none;
}

.interim-login h1 a,
.interim-login .wp-login-logo a {
	position: static;
	width: auto;
	height: auto;
	clip-path: none;
	display: block;
	margin: 0 0 18px;
	color: var(--un-text);
	font-family: var(--un-font-head);
	font-size: 24px;
	font-weight: 700;
	text-indent: 0;
	text-align: center;
}

.interim-login h1.screen-reader-text {
	position: absolute;
}

/* ---------------------------------------------------------------
   แท็บเล็ตและมือถือ: แผงแบรนด์ย้ายไปอยู่ด้านบน
--------------------------------------------------------------- */
@media (max-width: 900px) {
	body.login {
		padding: 0 0 36px;
		justify-content: flex-start;
	}

	.uthain-login-aside {
		position: relative;
		inset: auto;
		width: 100%;
		overflow: hidden;
	}

	.uthain-login-aside::after {
		position: absolute;
		inset: auto 0 0 0;
		left: 0;
		width: auto;
		height: 4px;
	}

	.ul-aside-inner {
		min-height: 0;
		gap: 0;
		padding: 36px 20px 64px;
		text-align: center;
	}

	.ul-brand {
		display: inline-block;
	}

	.ul-logo {
		max-height: 64px;
		margin: 0 auto;
	}

	.ul-title {
		font-size: 34px;
	}

	.ul-tagline {
		margin: 6px auto 0;
		font-size: 15px;
	}

	.ul-intro,
	.ul-news,
	.ul-copy {
		display: none;
	}

	#login {
		width: calc(100% - 32px);
		margin: -40px 16px 0;
		padding: 30px 22px 22px;
		z-index: 2;
	}

	.ul-form-head h2 {
		font-size: 24px;
	}

	.language-switcher {
		width: calc(100% - 32px);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.login * {
		transition: none !important;
	}
}