/* เข้าสู่ระบบ / สมัครสมาชิก (EPIC-012 · ออกแบบใหม่ตามแบบเจ้าของ 2026-10-20) — การ์ดซ้าย-ขวา ธีมสว่างของหน้าร้าน
   ใช้ที่เดียว = modal (.au-overlay · auth/_overlay): popup ทับหน้าทุกหน้า + /login /register เปิดค้าง (data-page)
   เมนูบัญชีบนหัวเว็บ (.sf-account) อยู่ท้ายไฟล์ */

/* ── modal ── */
.au-overlay {
  position: fixed; inset: 0; z-index: 1000;   /* สูงกว่า header (800) แถบขั้นตอน (700) ปุ่ม LINE (900) · ต่ำกว่าตัวโหลดกลางจอ (2000) */
  display: grid; place-items: center; padding: 16px;
  background: rgba(20, 16, 31, .55);
  overflow-y: auto;
}
.au-overlay[hidden] { display: none; }
.au-overlay .au-card { box-shadow: var(--shadow-lg); }

.au-page { min-height: 60vh; }   /* หน้า /login /register: ที่ว่างหลังฉากมืด */

/* ── การ์ด ── */
.au-card {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  width: 100%; max-width: 1000px; margin-inline: auto;
  background: #fff; border-radius: 28px; overflow: hidden;
}

/* ── ซ้าย: แบนเนอร์ + ข้อความ + สิทธิประโยชน์ ──
   รูปเป็นตัวแปร --au-art (ตั้งใน _card) · เคลือบม่วงเข้มด้านบนให้ตัวหนังสือขาวอ่านชัด (ขาวบน #5B18F2 ≈ 6.9:1) จางลงจนเห็นรูปตรงกลาง */
.au-side {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 36px 30px 28px; color: #fff;
  background: #B58EF0 var(--au-art, none) center bottom / cover no-repeat;   /* สีเดียวกับรูป — ระหว่างรูปยังโหลด */
}
.au-side::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(91, 24, 242, .94) 0%, rgba(104, 44, 240, .82) 26%, rgba(140, 90, 240, 0) 54%);
}
.au-hero-title { margin: 0 0 12px; font-size: 34px; line-height: 1.25; font-weight: 800; text-shadow: 0 2px 14px rgba(40, 10, 110, .35); }
.au-hl {
  display: inline-block; padding: 0 .25em; border-radius: .25em; transform: rotate(-1.5deg);
  background: var(--sf-lime, #D4FF1A); color: var(--sf-ink, #14101F); text-shadow: none;
}
.au-hero-sub { margin: 0; max-width: 34ch; text-wrap: balance; font-size: 15px; line-height: 1.5; text-shadow: 0 1px 8px rgba(40, 10, 110, .3); }

.au-perks-title {
  display: inline-block; margin: 0 0 -10px 14px; padding: 5px 14px; position: relative; z-index: 1;
  border-radius: 999px; background: var(--sf-pink-dk, #E0127A); color: #fff; font-size: 13px; font-weight: 700;
}
.au-perks {
  list-style: none; margin: 0; padding: 22px 12px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  border-radius: 22px; background: rgba(255, 255, 255, .92); color: var(--sf-ink, #14101F); backdrop-filter: blur(6px);
}
.au-perk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; background: var(--purple-lt, #F1ECFF); text-align: center; }
.au-perk .icon { width: 26px; height: 26px; color: var(--purple, #5B18F2); }
.au-perk b { font-size: 13.5px; line-height: 1.3; }
.au-perk small { font-size: 12px; line-height: 1.35; color: var(--ink-soft, #4A4658); }

/* ── ขวา: โลโก้ + ฟอร์ม ── */
.au-main { position: relative; padding: 28px 40px 26px; display: flex; flex-direction: column; justify-content: center; }
.au-logo { display: block; height: 40px; width: auto; margin: 0 auto 10px; }   /* โลโก้ของเรา กลางช่องขวา เหนือหัวข้อ · 2026-10-27 logo.svg ครอปชิดแล้ว — 40px = ขนาดที่เห็นเท่าเดิม (ไฟล์เก่า 64px มีขอบใส ~37%) */
.au-main section { padding-block: 0; }   /* theme.css ใส่ section { padding-block: 56px } ทั่วเว็บ — ในการ์ดไม่ต้องการ */
.au-main h2 { margin: 0; font-size: 26px; line-height: 1.25; text-align: center; color: var(--sf-ink, #14101F); }
.au-sub { margin: 6px 0 18px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-soft, #4A4658); }
.au-sub[hidden] { display: none; }
/* ลิงก์สลับ เข้าสู่ระบบ ↔ สมัครสมาชิก — กลางล่างของฟอร์ม · ลิงก์ชมพูเข้มขีดเส้นใต้ (--sf-pink-dk อ่านชัดบนพื้นขาว) */
.au-foot { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--ink-soft, #4A4658); }
.au-foot a { color: var(--sf-pink-dk, #E0127A); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.au-close {
  position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: none; font-size: 26px; line-height: 1; color: var(--ink-mute, #7C7889); cursor: pointer;
}
.au-close:hover { background: var(--purple-lt); }
/* โหมด "ชวน login" (ไม่บังคับ · 2026-10-19) — ไม่มีกากบาท · ปิดได้ทางเดียวคือการ์ด .au-skip */
.au-overlay.is-optional .au-close { display: none; }

/* การ์ด "ดำเนินการต่อโดยไม่เข้าสู่ระบบ" (ตามแบบเจ้าของ 2026-10-20 · ปรับให้เด่นขึ้น) — พื้นไล่สีม่วงอ่อน + ขอบ + เงาบาง มุมมน · ไอคอนคนไม่มีวงกลม · ลูกศรชิดขวา
   ไม่เด่นเท่าปุ่มชมพู (ไม่มีสีทึบ) แต่เห็นชัดว่าเป็นทางเลือกที่กดได้ · ตัวหนังสือเข้มบนม่วงอ่อน ≈ 8:1 (AA)
   ทั้งการ์ดเป็นปุ่มเดียว (กดได้ทั้งแถบ · สูง ≥ 64px · WCAG 2.2 Target Size) · โฟกัสคีย์บอร์ดมีเส้นขอบเห็นชัด · ลูกศรขยับเมื่อชี้ (ปิดเมื่อผู้ใช้ตั้งลดการเคลื่อนไหว) */
.au-skip {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px; padding: 14px 20px; min-height: 64px;
  border: 1.5px solid #D9CCFA; border-radius: 22px; font: inherit; text-align: left;
  background: linear-gradient(135deg, #F6F1FF 0%, #EBE2FF 100%);
  box-shadow: 0 2px 10px rgba(91, 24, 242, .10);
  color: var(--sf-ink, #14101F); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.au-skip[hidden] { display: none; }
.au-skip:hover { border-color: #B9A2F7; box-shadow: 0 4px 14px rgba(91, 24, 242, .16); }
.au-skip:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.au-skip-ico { flex: none; display: grid; place-items: center; color: var(--purple, #5B18F2); }
.au-skip-ico .icon { width: 30px; height: 30px; stroke-width: 1.6; }
.au-skip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.au-skip-text b { font-size: 15.5px; font-weight: 700; }
.au-skip-text small { font-size: 13.5px; color: var(--ink-soft, #4A4658); }
.au-skip-go { flex: none; width: 20px; height: 20px; color: var(--purple, #5B18F2); transition: transform .15s; }
.au-skip:hover .au-skip-go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .au-skip, .au-skip-go { transition: none; } .au-skip:hover .au-skip-go { transform: none; } }
/* ── ฟอร์ม ── */
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-field { position: relative; margin-bottom: 12px; }
.au-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--sf-ink, #14101F); }
.au-input { position: relative; }
.au-input > .icon {
  position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  color: var(--ink-mute, #7C7889); pointer-events: none;
}
.au-input input[type="text"], .au-input input[type="email"], .au-input input[type="password"] {
  width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 15px;
  color: var(--sf-ink, #14101F); background: #fff;
  border: 1.5px solid var(--line, #E4E2EB); border-radius: 12px;
}
.au-input.has-icon input { padding-left: 42px; }
.au-input input::placeholder { color: var(--ink-mute, #7C7889); }
.au-input input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(91, 24, 242, .14); }
.au-input:has(.au-eye) input { padding-right: 46px; }
.au-eye {
  position: absolute; top: 0; right: 0; width: 46px; height: 46px; border: 0; background: none;
  display: grid; place-items: center; color: var(--ink-mute, #7C7889); cursor: pointer;
}
.au-eye svg { width: 20px; height: 20px; }
.au-err { margin: 4px 2px 0; min-height: 0; font-size: 13px; color: var(--danger, #B91C1C); }
.au-err:empty { display: none; }
.au-general { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--danger, #B91C1C); background: var(--danger-bg, #FEE2E2); }
.au-general[hidden] { display: none; }

.au-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 16px; font-size: 14px; color: var(--ink-soft, #4A4658); cursor: pointer; }
.au-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--purple); flex: none; }
.au-check small { display: block; color: var(--ink-mute, #7C7889); font-size: 12.5px; }
.au-field > .au-check { margin-bottom: 0; }
/* แถว "จดจำฉันไว้" (ซ้าย) + "ลืมรหัสผ่าน?" (ขวา) — ลิงก์ตัวดำหนาขีดเส้นใต้ตามแบบเจ้าของ 2026-10-20 */
.au-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.au-opts .au-check { margin: 0; }
.au-forgot { font-size: 14px; font-weight: 700; color: var(--sf-ink, #14101F); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.au-forgot:hover { color: var(--purple, #5B18F2); }
.au-forgot:focus-visible, .au-linkbtn:focus-visible { outline: 2px solid var(--purple, #5B18F2); outline-offset: 2px; border-radius: 4px; }

/* ช่องกรอก OTP 6 หลัก — ช่องเดียว ตัวเลขใหญ่ เว้นระยะ กลางช่อง */
.au-input input.au-code { height: 56px; padding: 0 14px; text-align: center; font-size: 28px; font-weight: 700; letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums; }
.au-input input.au-code::placeholder { letter-spacing: .3em; font-weight: 400; }
.au-resend { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--ink-soft, #4A4658); }
.au-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--sf-pink-dk, #E0127A); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-linkbtn:disabled { color: var(--ink-mute, #7C7889); text-decoration: none; cursor: default; font-weight: 500; }

/* ข้อความสำเร็จ (เช่น ตั้งรหัสผ่านใหม่แล้ว · ส่งรหัสใหม่แล้ว) — คู่กับ .au-general ที่เป็นสีแดง */
.au-ok { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; text-align: center; color: var(--success, #166534); background: var(--success-bg, #DCFCE7); }
.au-ok[hidden] { display: none; }

/* ปุ่มหลัก: ข้อความกลาง + ลูกศรชิดขวาในปุ่ม (ตามแบบ) */
.au-submit { position: relative; width: 100%; height: 50px; margin-top: 4px; display: flex; align-items: center; justify-content: center; }
.au-submit .icon { position: absolute; right: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); }
.au-submit:disabled { opacity: .6; cursor: wait; }

@media (max-width: 860px) {
  .au-card { grid-template-columns: 1fr; border-radius: 18px; }
  .au-side { display: none; }   /* มือถือ/จอแคบ: ซ่อนฝั่งแบนเนอร์ ให้ฟอร์มได้พื้นที่เต็ม */
  .au-main { padding: 30px 22px 24px; }
  .au-main h2 { font-size: 24px; }
  .au-logo { height: 36px; }
}

/* ── เมนูบัญชีบนหัวเว็บ: วงกลมโปรไฟล์ (ตัวอักษรแรกของชื่อ) + เมนูออกจากระบบ ── */
.sf-account { position: relative; display: inline-grid; place-items: center; }
.sf-avatar {
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, #F7A9C4 0%, #EC7BA2 100%);
  color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 1;
}
.sf-avatar:hover { filter: brightness(1.04); }
.sf-account-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 280px; max-width: calc(100vw - 24px);
  padding: 14px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg);
}
.sf-account-pop[hidden] { display: none; }
.sf-account-name { margin: 0; font-weight: 700; color: var(--sf-ink, #14101F); overflow-wrap: anywhere; }
.sf-account-mail { display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; font-size: 13px; color: var(--ink-mute, #7C7889); overflow-wrap: anywhere; }
.sf-account-google { flex: none; }   /* โลโก้ G ไม่ถูกบีบ/ไม่ตกบรรทัด — ข้อความอีเมลเป็นฝ่ายตัดบรรทัดแทน */
.sf-account-out {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; color: var(--sf-ink, #14101F); cursor: pointer;
}
.sf-account-out:hover { background: var(--purple-lt); }

/* แถบข้อความเหตุที่ popup เด้งขึ้นมา (เช่น ออกแบบครบสิทธิ์ต่อวัน) — อยู่บนสุดของฝั่งฟอร์ม */
.au-notice {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.45; text-align: center;
  color: var(--warn, #8A5A00); background: var(--warn-bg, #FFF7E0); border: 1px solid #F1DDA0;
}
.au-notice[hidden] { display: none; }
/* โหมดชวน login = ข้อความชวนเฉยๆ ไม่ใช่คำเตือน → โทนม่วงอ่อนตามธีม แทนกล่องเหลือง */
.au-notice.is-soft { font-weight: 500; color: var(--sf-ink, #14101F); background: var(--purple-lt, #F1EAFE); border-color: transparent; }

/* ลิงก์ในเมนูบัญชี (TASK-250 · ที่อยู่ของฉัน) — หน้าตาเดียวกับปุ่มออกจากระบบ วางเหนือปุ่ม */
.sf-account-link {
  display: block; margin-bottom: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-size: 14px; text-align: center; color: var(--sf-ink, #14101F); text-decoration: none;
}
.sf-account-link:hover { background: var(--purple-lt); }

/* ไอคอนหน้ารายการเมนูบัญชี (history · address · logout) — จัดชิดซ้าย ไอคอน 18px สีตามตัวอักษร */
.sf-account-link, .sf-account-out { display: flex; align-items: center; gap: 10px; text-align: left; }
.sf-account-link .icon, .sf-account-out .icon { width: 18px; height: 18px; flex: none; vertical-align: 0; color: var(--purple, #5B18F2); }

/* ปุ่มเข้าสู่ระบบ/สมัครด้วย Google (auth/_google) */
.au-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; font-size: 13px; color: var(--ink-mute, #7C7889); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line, #E4E2EB); }
.au-social {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px;
  border: 1px solid var(--line, #E4E2EB); border-radius: 999px; background: #fff;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-soft, #4A4658);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.au-social:hover { background: var(--bg-soft, #F7F6FA); border-color: #CFCBDA; }
.au-social:focus-visible { outline: 2px solid var(--purple, #5B18F2); outline-offset: 2px; }
/* ข้อความแจ้งเงื่อนไขท้ายการ์ดสมัคร (แทนช่องติ๊ก · 2026-10-26) — เหนือ "มีบัญชีอยู่แล้ว?" */
.au-terms-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; text-align: center; color: var(--ink-mute, #7C7889); }
.au-terms-note a { color: var(--ink-soft, #4A4658); text-decoration: underline; text-underline-offset: 2px; }
.au-terms-note a:hover { color: var(--sf-violet, #5B18F2); }

/* ── เช็กลิสต์รหัสผ่าน (auth/_pw-rules · pw-rules.js) — ใต้ช่องรหัสใหม่ในสมัคร/ตั้งรหัสใหม่/เปลี่ยนรหัสผ่าน ── */
.pw-rules { display: grid; gap: 8px; margin: 4px 0 16px; padding: 0; list-style: none; font-size: 14px; color: var(--ink-mute); }
.pw-rules li { display: flex; align-items: center; gap: 9px; transition: color .15s; }
.pw-rules li.is-ok { color: var(--success, #1E7A46); }
.pw-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff center / 11px no-repeat; transition: background-color .15s, border-color .15s; }
.pw-rules li.is-ok .pw-dot { border-color: var(--success, #1E7A46); background-color: var(--success, #1E7A46); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }