/* ============================================================
   totp.css — ระบบยืนยันตัวตนแบบสองขั้นตอน (TOTP 2FA) visual system
   ใช้ร่วมกันทุกหน้า: enroll / verify / recovery / recovery codes / re-enroll
   Shared by all TOTP pages so the whole flow reads as one design.
   ============================================================ */

/* โทนสีอิงอินโฟกราฟิกขั้นตอน 2FA (2FA_Flow ฉบับปรับปรุง — โทนแดงเลือดหมู/แดงเข้ม ส้ม และเขียว) ใช้ร่วมกับ logintotp.html / login2factor*.html
   Palette sampled from the updated 2FA_Flow infographic (maroon/crimson, orange flow arrows, green success),
   shared with logintotp.html and login2factor*.html:
   - brand  #9C1B2A  แดงเข้ม (crimson) — ปุ่มหลัก หัวเรื่อง หมายเลขขั้นตอน / primary buttons, titles, step numbers
   - deep   #6E0F1A  แดงเลือดหมู (maroon) — ปลาย gradient และจุดเน้น / gradient ends, emphasis
   - accent #F26A10  ส้ม (ลูกศรขั้นตอน) — เส้นคาดและจุดรับแสง / flow-arrow orange keyline accents
   - soft   #FCF1EE  ครีมอมชมพู (พื้นหลังอินโฟกราฟิก) / warm blush panels, as the infographic background
   - warn   #F5821F / #FFF7EE — โทนส้มเดียวกับ .nr-alert ของหน้า login / orange alert family matching login's .nr-alert
   - danger #dc4a38 — site red (deep = darkened for text contrast)
   - ok     #12862A — เขียว "2FA Verified Successfully" จากอินโฟกราฟิก — ใช้เฉพาะสถานะสำเร็จ / infographic green, success only
   - neutrals #555 / #707070 / #ddd — site text, .text-muted, borders */
:root {
	--totp-brand: #9C1B2A;
	--totp-brand-deep: #6E0F1A;
	--totp-brand-top: #B8323F;
	--totp-brand-soft: #FCF1EE;
	--totp-accent: #F26A10;
	--totp-brand-line: #EED3CE;
	--totp-ink: #555555;
	--totp-slate: #707070;
	--totp-line: #dddddd;
	--totp-warn: #F5821F;
	--totp-warn-deep: #B35A00;
	--totp-warn-soft: #FFF7EE;
	--totp-paper: #ffffff;
	--totp-danger: #dc4a38;
	--totp-danger-deep: #a8362a;
	--totp-danger-soft: #fdeeec;
	--totp-ok: #12862A;
	--totp-ok-soft: #EAF5EC;
	--totp-radius: 12px;
}

/* ---------- shell & card ---------- */

.totp-shell {
	max-width: 560px;
	margin: 24px auto 40px;
	padding: 0 16px;
}

.totp-shell--wide {
	max-width: 640px;
}

.totp-card {
	position: relative;
	background: var(--totp-paper);
	border: 1px solid var(--totp-line);
	border-radius: var(--totp-radius);
	box-shadow: 0 10px 30px rgba(110, 15, 26, 0.12), 0 2px 6px rgba(110, 15, 26, 0.07);
	overflow: hidden;
}

/* แถบคาดบน แดงเข้ม-ส้ม ตามอินโฟกราฟิก 2FA_Flow / crimson-orange keyline shared by the set, per the 2FA_Flow infographic */
.totp-card::before {
	content: "";
	display: block;
	height: 5px;
	background: linear-gradient(90deg, var(--totp-brand) 0%, var(--totp-brand) 62%, var(--totp-accent) 62%, var(--totp-accent) 78%, var(--totp-brand) 78%);
}

.totp-card-inner {
	padding: clamp(22px, 5vw, 40px);
	background:
		radial-gradient(1200px 300px at 50% -120px, rgba(156, 27, 42, 0.06), rgba(156, 27, 42, 0) 70%),
		var(--totp-paper);
}

/* ---------- header ---------- */

.totp-head {
	text-align: center;
	margin-bottom: 22px;
}

.totp-badge {
	width: 58px;
	height: 58px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--totp-brand-soft);
	border: 1px solid var(--totp-line);
	color: var(--totp-brand);
	font-size: 24px;
	line-height: 56px;
	text-align: center;
}

.totp-badge--ok {
	background: var(--totp-ok-soft);
	color: var(--totp-ok);
}

.totp-title {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: var(--totp-brand);
	line-height: 1.25;
	margin: 0;
}

.totp-title-en {
	display: block;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--totp-slate);
	margin-top: 2px;
}

.totp-head-rule {
	width: 52px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--totp-brand), var(--totp-accent));
}

/* ---------- bilingual text pattern: ไทยนำ อังกฤษรอง ---------- */

.t-th {
	display: block;
	color: var(--totp-ink);
	font-size: 15px;
	line-height: 1.55;
}

.t-en {
	display: block;
	color: var(--totp-slate);
	font-size: 13px;
	line-height: 1.5;
}

/* ---------- stepper ---------- */

.totp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.totp-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 0 0 26px 0;
}

/* เส้นเชื่อมระหว่างหมายเลขขั้นตอน / connector between step numbers */
.totp-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 38px;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--totp-line), rgba(221, 221, 221, 0.35));
}

.totp-step:last-child {
	padding-bottom: 0;
}

.totp-step-num {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--totp-brand);
	background: var(--totp-paper);
	color: var(--totp-brand);
	font-size: 17px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.totp-step-body {
	flex: 1;
	min-width: 0;
	padding-left: 14px;
}

.totp-step-title .t-th {
	font-weight: 700;
	font-size: 16px;
}

.totp-step-title .t-en {
	font-size: 13px;
}

.totp-step-desc {
	margin-top: 4px;
}

/* ---------- QR frame ---------- */

.totp-qr-wrap {
	text-align: center;
	margin: 16px 0 6px;
}

.totp-qr-frame {
	position: relative;
	display: inline-block;
	background: #ffffff;
	padding: 16px;
	max-width: 232px;
	border: 1px solid var(--totp-line);
	border-radius: 10px;
}

/* มุมกรอบสแกน / scan-target corner brackets */
.totp-qr-frame i.tc {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 3px solid var(--totp-brand);
	border-radius: 2px;
	animation: totp-scan 2.4s ease-in-out infinite;
}

.totp-qr-frame i.tc-tl { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.totp-qr-frame i.tc-tr { top: -4px; right: -4px; border-left: 0; border-bottom: 0; }
.totp-qr-frame i.tc-bl { bottom: -4px; left: -4px; border-right: 0; border-top: 0; }
.totp-qr-frame i.tc-br { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

@keyframes totp-scan {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

.totp-qr-frame svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- manual key chip ---------- */

.totp-key-block {
	margin-top: 14px;
	text-align: center;
}

.totp-key-label {
	font-size: 13px;
	color: var(--totp-slate);
	display: block;
	margin-bottom: 6px;
}

.totp-key-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	background: #f7f7f7;
	border: 1px dashed #cbcbcb;
	border-radius: 8px;
	padding: 7px 10px;
}

.totp-key-chip code {
	font-size: 14px;
	color: var(--totp-brand);
	word-break: break-all;
	background: transparent;
	padding: 0;
}

.totp-copy {
	flex: 0 0 auto;
	border: 1px solid var(--totp-line);
	background: #ffffff;
	color: var(--totp-slate);
	border-radius: 6px;
	font-size: 12px;
	line-height: 1;
	padding: 6px 8px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.totp-copy:hover {
	color: var(--totp-brand);
	border-color: var(--totp-brand);
}

.totp-copy.copied {
	color: var(--totp-ok);
	border-color: var(--totp-ok);
}

.totp-meta {
	margin-top: 8px;
	font-size: 12px;
	color: var(--totp-slate);
}

/* ---------- code input ---------- */

.totp-input-label {
	display: block;
	margin: 4px 0 8px;
}

.totp-input-label .t-th {
	font-weight: 700;
}

input.totp-input {
	display: block;
	width: 100%;
	font-family: Consolas, "Courier New", monospace;
	font-size: 30px;
	letter-spacing: 0.45em;
	text-indent: 0.45em; /* ชดเชย letter-spacing ให้ตัวเลขกึ่งกลางจริง / recenter */
	text-align: center;
	color: var(--totp-ink);
	background: #f9f9f9;
	border: 1.5px solid var(--totp-line);
	border-radius: 10px;
	padding: 10px 8px;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input.totp-input::placeholder {
	color: #cbcbcb;
}

input.totp-input:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--totp-brand);
	box-shadow: 0 0 0 4px rgba(156, 27, 42, 0.14);
}

/* ช่องกรอกทั่วไปของหน้าชุดนี้ (username/password) / standard field, same focus language */
input.totp-field {
	display: block;
	width: 100%;
	font-size: 18px;
	color: var(--totp-ink);
	background: #f9f9f9;
	border: 1.5px solid var(--totp-line);
	border-radius: 10px;
	padding: 10px 14px;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input.totp-field:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--totp-brand);
	box-shadow: 0 0 0 4px rgba(156, 27, 42, 0.14);
}

/* ---------- buttons ---------- */

.btn-totp-primary {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 19px;
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(180deg, var(--totp-brand-top), var(--totp-brand) 55%, var(--totp-brand-deep));
	box-shadow: 0 6px 16px rgba(110, 15, 26, 0.28);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
	text-align: center;
}

.btn-totp-primary:hover,
.btn-totp-primary:focus {
	color: #ffffff;
	filter: brightness(1.07);
	box-shadow: 0 8px 20px rgba(110, 15, 26, 0.34);
	text-decoration: none;
}

.btn-totp-primary:active {
	transform: translateY(1px);
	box-shadow: 0 3px 8px rgba(110, 15, 26, 0.30);
}

.btn-totp-primary:disabled {
	filter: grayscale(.35) brightness(1.12);
	box-shadow: none;
	cursor: default;
}

.btn-totp-primary .t-en-inline {
	font-weight: 400;
	font-size: 15px;
	opacity: .85;
}

.btn-totp-ghost {
	display: block;
	width: 100%;
	border: 1.5px solid var(--totp-line);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 19px;
	font-weight: 700;
	color: var(--totp-slate);
	background: #ffffff;
	transition: color .12s ease, border-color .12s ease;
	text-align: center;
}

.btn-totp-ghost:hover,
.btn-totp-ghost:focus {
	color: var(--totp-brand);
	border-color: var(--totp-brand);
	text-decoration: none;
}

.btn-totp-ghost .t-en-inline {
	font-weight: 400;
	font-size: 15px;
	opacity: .85;
}

.totp-actions {
	margin-top: 22px;
}

.totp-actions--split {
	display: flex;
	gap: 12px;
}

.totp-actions--split > * {
	flex: 1;
}

/* ---------- secondary links ---------- */

.totp-links {
	margin-top: 22px;
	text-align: center;
}

.totp-links a {
	display: inline-block;
	color: var(--totp-slate);
	font-size: 14px;
	margin: 4px 10px;
	transition: color .12s ease;
}

.totp-links a:hover {
	color: var(--totp-brand);
	text-decoration: none;
}

.totp-links a i {
	margin-right: 4px;
}

/* ---------- callouts ---------- */

.totp-callout {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-radius: 10px;
	padding: 13px 15px;
	margin-bottom: 18px;
}

.totp-callout > i {
	flex: 0 0 auto;
	font-size: 17px;
	margin-top: 2px;
}

/* กรอบเส้นบาง พื้นอ่อนกว่า .totp-error (ซึ่งเป็นพื้นทึบ) — ในโทนแดงทั้งชุด ข้อมูลกับข้อผิดพลาดต้องแยกกันออก
   outlined and lighter than the filled .totp-error, so info never reads as an error in the all-red palette */
.totp-callout--info {
	background: #FDF8F6;
	border: 1px solid var(--totp-brand-line);
	border-left: 4px solid var(--totp-brand-deep);
}

.totp-callout--info > i {
	color: var(--totp-brand);
}

/* โทนเดียวกับ .nr-alert ของหน้า login ทั้งกรอบและสีตัวอักษร / full border and ink match login's .nr-alert */
.totp-callout--warn {
	background: var(--totp-warn-soft);
	border: 1px solid #FBD9B5;
	border-left: 4px solid var(--totp-warn);
}

.totp-callout--warn > i {
	color: var(--totp-warn-deep);
}

.totp-callout--warn .t-th,
.totp-callout--warn .t-en {
	color: #7A4A12;
}

.totp-callout--warn .t-th b,
.totp-callout--warn .t-en b {
	color: var(--totp-warn-deep);
}

/* คงคลาส .err ไว้ให้สคริปต์ shake เดิมอ้างถึงได้ / keep .err hook for shake script */
.totp-error {
	background: var(--totp-danger-soft);
	border-left: 4px solid var(--totp-danger);
	border-radius: 10px;
	padding: 13px 15px;
	margin-bottom: 18px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.totp-error > i {
	flex: 0 0 auto;
	color: var(--totp-danger);
	font-size: 17px;
	margin-top: 2px;
}

.totp-error .t-th,
.totp-error .t-en {
	color: var(--totp-danger-deep);
}

.totp-error .t-en {
	opacity: .85;
}

/* ---------- recovery codes "ticket" ----------
   ตัวรหัสเป็นเนื้อหา ไม่ใช่คำเตือน — ใช้โทนครีมอมชมพูให้เข้าชุดการ์ด ส่วนคำเตือนอยู่ที่ callout ด้านบนแล้ว
   the codes are content, not a warning — warm blush to match the card; the warning lives in the callout above */

.totp-ticket {
	background: #FDF7F5;
	border: 1.5px dashed rgba(156, 27, 42, 0.35);
	border-radius: 12px;
	padding: 18px 14px;
	margin: 4px 0 6px;
}

.totp-ticket-head {
	text-align: center;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--totp-brand-deep);
	text-transform: uppercase;
	margin-bottom: 10px;
}

.totp-codes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
}

.totp-code {
	font-family: Consolas, "Courier New", monospace;
	font-size: 17px;
	letter-spacing: .08em;
	color: var(--totp-brand-deep);
	background: #ffffff;
	border: 1px solid var(--totp-brand-line);
	border-radius: 8px;
	padding: 8px 6px;
	text-align: center;
}

.totp-footnote {
	margin-top: 16px;
	text-align: center;
}

.totp-footnote .t-th,
.totp-footnote .t-en {
	font-size: 12.5px;
	color: var(--totp-slate);
}

/* ---------- entrance motion (staged, subtle) ---------- */

.totp-rise {
	opacity: 0;
	animation: totp-rise .45s ease-out forwards;
	animation-delay: var(--d, 0ms);
}

@keyframes totp-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ปิด entrance animation เมื่อหน้าแสดง error — ไม่ให้ animationend ของลูกไปตัด shake ของกล่อง
   (no entrance animation on error renders, so child animationend cannot cut the shake short) */
.totp-noanim .totp-rise {
	animation: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.totp-rise {
		animation: none;
		opacity: 1;
	}
	.totp-qr-frame i.tc {
		animation: none;
	}
	.btn-totp-primary,
	.btn-totp-ghost {
		transition: none;
	}
}

/* ---------- responsive ---------- */

@media (max-width: 420px) {
	.totp-title { font-size: 22px; }
	.totp-codes-grid { grid-template-columns: 1fr; }
	.totp-actions--split { flex-direction: column; }
	input.totp-input { font-size: 26px; letter-spacing: .35em; text-indent: .35em; }
}

/* ---------- print: พิมพ์เฉพาะรหัสกู้คืน / print only the recovery codes ---------- */

.totp-print-head {
	display: none;
}

@media print {
	body * {
		visibility: hidden !important;
	}
	/* ยกเลิก positioning/clipping ของการ์ด ให้พื้นที่พิมพ์อ้างอิงกับหน้ากระดาษจริง
	   (unanchor the card so the print area positions against the page, not the card) */
	.totp-card,
	.totp-card-inner {
		position: static !important;
		overflow: visible !important;
		box-shadow: none !important;
	}
	.totp-rise {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	#totp-print-area,
	#totp-print-area * {
		visibility: visible !important;
	}
	#totp-print-area {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	.totp-print-head {
		display: block;
		text-align: center;
		margin-bottom: 14px;
		color: #000;
	}
	.totp-ticket {
		background: #ffffff;
		border-color: #999;
	}
	.totp-code {
		border-color: #bbb;
	}
}