/* หน้าเข้าสู่ระบบ / สมัครสมาชิก (views/auth/login.php, register.php) · prefix au- · ไม่พึ่ง style.css / bootstrap */
@font-face { font-family: prompt; src: url(../fonts/Prompt/Prompt-Regular.ttf); }
:root {
	--au-bg-1: #12002b;
	--au-bg-2: #2a0a52;
	--au-violet: #7b2ff7;
	--au-gold-1: #ffe27a;
	--au-gold-2: #f5a623;
	--au-muted: #b9a8d8;
	--au-line: rgba(255, 255, 255, 0.12);
	--au-card: rgba(255, 255, 255, 0.06);
	--au-field: rgba(8, 0, 24, 0.55);
	--au-ok: #34d399;
	--au-bad: #ff6b8a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.au-body {
	font-family: prompt, sans-serif;
	color: #fff;
	min-height: 100vh;
	background:
		radial-gradient(60% 45% at 85% 0%, rgba(123, 47, 247, 0.55) 0%, transparent 70%),
		radial-gradient(50% 40% at 0% 30%, rgba(245, 166, 35, 0.18) 0%, transparent 70%),
		radial-gradient(70% 50% at 50% 100%, rgba(90, 20, 196, 0.6) 0%, transparent 70%),
		linear-gradient(180deg, var(--au-bg-2) 0%, var(--au-bg-1) 100%);
	background-color: var(--au-bg-1);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}
.au-wrap { max-width: 440px; margin: 0 auto; padding: 22px 18px 34px; }

.au-logo { display: block; margin: 0 auto 6px; width: 132px; filter: drop-shadow(0 8px 24px rgba(123, 47, 247, 0.55)); }
.au-logo--sm { width: 96px; }
.au-title { text-align: center; font-size: 1.45rem; font-weight: 700; margin: 4px 0 2px; letter-spacing: 0.2px; }
.au-sub { text-align: center; color: var(--au-muted); font-size: 0.9rem; margin: 0 0 18px; }
.au-card { background: var(--au-card); border: 1px solid var(--au-line); border-radius: 22px; padding: 20px 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* ช่องกรอก */
.au-field { margin-bottom: 14px; }
.au-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; color: #e9defc; margin: 0 2px 6px; }
.au-label small { color: var(--au-gold-1); font-size: 0.74rem; }
.au-input { position: relative; display: flex; align-items: center; background: var(--au-field); border: 1.5px solid var(--au-line); border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s; }
.au-input:focus-within { border-color: var(--au-violet); box-shadow: 0 0 0 4px rgba(123, 47, 247, 0.22); }
.au-input.ok { border-color: rgba(52, 211, 153, 0.6); }
.au-input.bad { border-color: var(--au-bad); box-shadow: 0 0 0 4px rgba(255, 107, 138, 0.15); }
.au-input > i:first-child { width: 44px; text-align: center; color: var(--au-muted); font-size: 0.95rem; flex: none; }
.au-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 1.02rem; padding: 13px 12px 13px 0; letter-spacing: 0.3px; }
.au-input input::placeholder { color: #7f6f9f; }
.au-eye { border: 0; background: transparent; color: var(--au-muted); width: 44px; height: 44px; cursor: pointer; font-size: 0.95rem; flex: none; }
.au-state { width: 34px; text-align: center; font-size: 0.95rem; flex: none; }
.au-input.ok .au-state::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--au-ok); }
.au-msg { font-size: 0.78rem; color: var(--au-bad); margin: 5px 4px 0; display: none; }
.au-msg.show { display: block; }

/* ปุ่ม */
.au-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; border-radius: 14px; padding: 14px; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: transform 0.1s, filter 0.2s; }
.au-btn:active { transform: translateY(1px) scale(0.99); }
.au-btn--gold { background: linear-gradient(180deg, var(--au-gold-1) 0%, var(--au-gold-2) 100%); color: #3a1d00 !important; box-shadow: 0 10px 24px rgba(245, 166, 35, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.au-btn--gold:hover { filter: brightness(1.05); }
.au-btn--ghost { background: rgba(123, 47, 247, 0.16); color: #fff !important; border: 1.5px solid rgba(166, 120, 255, 0.55); }
.au-btn--ghost:hover { background: rgba(123, 47, 247, 0.26); }
.au-btn:disabled { opacity: 0.6; cursor: wait; }

.au-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; margin: -2px 2px 16px; color: var(--au-muted); }
.au-check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.au-check input { accent-color: var(--au-violet); width: 16px; height: 16px; }
.au-divider { display: flex; align-items: center; gap: 10px; color: var(--au-muted); font-size: 0.82rem; margin: 18px 0 12px; }
.au-divider::before, .au-divider::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }

.au-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; }
.au-perk { text-align: center; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.74rem; color: #e9defc; line-height: 1.35; }
.au-perk i { display: block; font-size: 1.05rem; color: var(--au-gold-1); margin-bottom: 5px; }
.au-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 0; padding: 9px 18px; width: fit-content; border-radius: 30px; background: rgba(6, 199, 85, 0.14); border: 1px solid rgba(6, 199, 85, 0.45); color: #c9f7dc !important; font-size: 0.9rem; text-decoration: none !important; }
.au-line img { width: 22px; height: 22px; }
.au-certs { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; opacity: 0.65; }
.au-certs img { height: 22px; max-width: 22%; object-fit: contain; }
.au-foot { text-align: center; color: var(--au-muted); font-size: 0.86rem; margin-top: 18px; }
.au-foot a { color: var(--au-gold-1); text-decoration: none; font-weight: 600; }

/* สมัคร: ขั้นตอน */
.au-steps { display: flex; align-items: center; gap: 8px; margin: 0 4px 16px; }
.au-step { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--au-muted); white-space: nowrap; }
.au-step b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--au-line); font-size: 0.8rem; }
.au-step.on { color: #fff; }
.au-step.on b { background: var(--au-violet); border-color: var(--au-violet); box-shadow: 0 0 0 4px rgba(123, 47, 247, 0.25); }
.au-step.done b { background: var(--au-ok); border-color: var(--au-ok); color: #04301f; }
.au-step-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--au-line); overflow: hidden; }
.au-step-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--au-violet), var(--au-gold-2)); transition: width 0.35s; }
.au-pane { display: none; }
.au-pane.on { display: block; animation: au-in 0.3s ease; }
@keyframes au-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.au-sec-title { font-size: 1.05rem; font-weight: 700; margin: 0 2px 4px; }
.au-sec-sub { font-size: 0.8rem; color: var(--au-muted); margin: 0 2px 14px; }

/* ความแข็งแรงรหัสผ่าน */
.au-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 4px 0; }
.au-meter i { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); transition: background 0.2s; }
.au-meter[data-lv="1"] i:nth-child(-n+1) { background: var(--au-bad); }
.au-meter[data-lv="2"] i:nth-child(-n+2) { background: var(--au-gold-2); }
.au-meter[data-lv="3"] i:nth-child(-n+3) { background: #a3e635; }
.au-meter[data-lv="4"] i { background: var(--au-ok); }

/* หมายเหตุเบอร์โทร = เบอร์ TrueMoney Wallet */
.au-tw { display: flex; gap: 10px; align-items: center; margin: 8px 0 0; padding: 9px 11px; border-radius: 12px; background: rgba(255, 128, 0, 0.1); border: 1px solid rgba(255, 140, 0, 0.4); font-size: 0.78rem; line-height: 1.5; color: #ffe2c2; }
.au-tw img { width: 34px; height: 34px; border-radius: 8px; background: #fff; object-fit: contain; flex: none; }
.au-tw b { color: #ffb15c; }

/* เลือกธนาคาร (ตารางโลโก้) */
.au-banks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.au-bank { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 14px; background: var(--au-field); border: 1.5px solid var(--au-line); cursor: pointer; color: #e9defc; font: inherit; font-size: 0.68rem; line-height: 1.2; text-align: center; transition: border-color 0.15s, transform 0.1s, background 0.15s; }
.au-bank:hover { border-color: rgba(166, 120, 255, 0.6); }
.au-bank:active { transform: scale(0.97); }
.au-bank img, .au-bank .au-bank-ph { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
.au-bank .au-bank-ph { display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: var(--au-muted); }
.au-bank.on { border-color: var(--au-gold-2); background: rgba(245, 166, 35, 0.12); color: #fff; }
.au-bank.on::after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--au-gold-2); color: #3a1d00; font-size: 0.62rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.au-banks.bad .au-bank { border-color: rgba(255, 107, 138, 0.5); }
.au-bank-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; min-height: 2.4em; }

/* การ์ดตัวอย่างบัญชี */
.au-acc { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(123, 47, 247, 0.55), rgba(42, 10, 82, 0.9)); border: 1px solid rgba(166, 120, 255, 0.45); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); }
.au-acc-logo { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: var(--au-muted); overflow: hidden; }
.au-acc-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.au-acc-t { min-width: 0; }
.au-acc-bank { font-size: 0.78rem; color: #d9c9fb; }
.au-acc-no { font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; }
.au-acc-name { font-size: 0.82rem; color: #efe6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-two > * { min-width: 0; }
.au-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 6px; }
.au-actions .au-btn--ghost { padding-left: 16px; padding-right: 16px; }
.au-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 0.78rem; color: #ffe9b0; background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.35); border-radius: 12px; padding: 9px 11px; margin-bottom: 14px; line-height: 1.5; }
.au-warn i { color: var(--au-gold-1); margin-top: 2px; }

/* สมัครสำเร็จ */
.au-done { text-align: center; padding: 10px 0 4px; }
.au-done-ico { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: rgba(52, 211, 153, 0.15); color: var(--au-ok); font-size: 2rem; box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.07); }
@media (prefers-reduced-motion: reduce) { .au-pane.on { animation: none; } }