/* =====================================================================
   หน้าเข้าสู่ระบบ / สมัครร้าน / ลืมรหัสผ่าน / ตั้งรหัสผ่านใหม่
   ธีมเดียวกับ cleantaxth.com: ครีมอุ่น ทอง น้ำตาลเข้ม (ใช้ตัวแปรสีจาก app.css)
   โครง: จอใหญ่แบ่งซ้าย (แบรนด์ + จุดเด่น) ขวา (การ์ดฟอร์มกลางจอ) / จอเล็กเหลือการ์ดเดียวพร้อมโลโก้
   ===================================================================== */
#auth-root{height:100dvh;overflow:auto;background:var(--ivory)}
.auth{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* ---------- ฝั่งแบรนด์ (ซ้าย) ---------- */
.auth-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding:48px clamp(40px,5vw,88px);border-right:1px solid var(--line);
  background:radial-gradient(900px 600px at -10% -10%,#FFFBEF 0,transparent 60%),radial-gradient(700px 520px at 110% 110%,#F1DFB4 0,transparent 60%),linear-gradient(160deg,#FCF7EC 0,#F5E9CC 100%)}
.auth-side::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(176,138,62,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(176,138,62,.07) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse at 30% 40%,#000 0,transparent 75%)}
.auth-side>*{position:relative;z-index:1}
.as-logo{display:block;width:176px;height:auto}
.as-body{max-width:520px;display:flex;flex-direction:column;gap:18px}
.as-body h2{font-size:clamp(30px,2.6vw,42px);line-height:1.18;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.as-body h2 .gold{background:linear-gradient(180deg,#C29A4B,#8A6420);-webkit-background-clip:text;background-clip:text;color:transparent}
.as-body>p{font-size:16px;line-height:1.75;color:var(--ink-2);max-width:34em}
.as-features{list-style:none;display:grid;gap:12px;margin-top:10px}
.as-features li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;
  background:rgba(255,253,248,.72);border:1px solid rgba(237,228,211,.9);backdrop-filter:blur(2px)}
.as-features .fi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--gold-ink);
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border:1px solid rgba(176,138,62,.45);box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.as-features .fi .i{width:21px;height:21px}
.as-features b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.35}
.as-features span{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}
.as-preview{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:6px}
.as-preview .cap{font-size:13px;color:var(--muted)}
.as-preview .slip{margin:0;max-width:330px;border-color:#EADDBC;border-radius:14px;box-shadow:0 1px 2px rgba(74,53,16,.06),0 26px 50px -28px rgba(74,53,16,.45)}
.as-foot{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.as-foot a{color:var(--brass-deep);text-decoration:none;font-weight:600}
.as-foot a:hover{text-decoration:underline}

/* ---------- ฝั่งฟอร์ม (ขวา) ---------- */
.auth-main{display:flex;align-items:center;justify-content:center;padding:32px 32px;
  background:radial-gradient(700px 420px at 100% 0,#FFF8E8 0,transparent 65%),var(--ivory)}
.auth-card{width:100%;max-width:448px;display:flex;flex-direction:column;gap:18px;padding:36px 40px 32px;
  background:var(--paper);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 1px 2px rgba(74,53,16,.05),0 36px 70px -40px rgba(74,53,16,.40)}
.auth-card.wide{max-width:680px}
.auth-logo{display:none;width:150px;height:auto;margin:0 auto 4px}

/* หัวการ์ด */
.ac-head{display:flex;flex-direction:column;gap:8px}
.ac-head h1{font-size:28px;line-height:1.25;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.ac-head .lead{font-size:15px;line-height:1.65;color:var(--muted)}
.ac-badge{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:6px;color:var(--gold-ink);
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border:1px solid var(--gold-edge);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 10px 20px -14px rgba(94,71,32,.75)}
.ac-badge .i{width:26px;height:26px}

/* ช่องกรอก */
.ac-form{display:flex;flex-direction:column;gap:14px}
.af{display:flex;flex-direction:column;gap:7px;min-width:0}
.af-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.af-top label{font-size:14px;font-weight:600;color:var(--ink-2)}
.af small{font-size:12.5px;color:var(--muted);line-height:1.5}
.af-box{position:relative}
.auth .input,.auth select.input{height:48px;border-radius:14px;font-size:15.5px;padding:0 14px;background:#FFFEFB;border:1px solid var(--line)}
.auth textarea.input{height:auto;min-height:84px;padding:12px 14px;border-radius:14px;line-height:1.6}
.auth .input::placeholder{color:#B9AE97}
.auth .input:hover{border-color:#DCCDAA}
.auth .input:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 4px rgba(176,138,62,.16);background:#fff}
.af-box.has-ic .input{padding-left:46px}
.af-box.has-eye .input{padding-right:52px}
.af-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#B3A27C;display:grid;pointer-events:none}
.af-ic .i{width:19px;height:19px}
.af-box:focus-within .af-ic{color:var(--brass-deep)}
.af-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#9A8C71}
.af-eye:hover{background:var(--brass-wash);color:var(--brass-deep)}
.af-eye .i{width:19px;height:19px}
.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* สวิตช์ในกรอบ */
.ac-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#FFFEFB;cursor:pointer}
.ac-opt:hover{border-color:#DCCDAA}
.ac-opt b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.ac-opt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.ac-opt input{flex:none}

/* ปุ่ม */
.auth .btn{height:50px;border-radius:16px;font-size:16px;font-weight:700;gap:10px}
.auth .btn .i{width:19px;height:19px}
.auth .btn.primary .i{transition:transform .15s}
.auth .btn.primary:hover .i.go{transform:translateX(3px)}
.auth .btn.outline{background:var(--paper);border:1px solid var(--gold-edge);color:var(--brass-deep);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 18px -16px rgba(94,71,32,.8)}
.auth .btn.outline:hover{background:#FFF9EC;border-color:#9C7A32;color:var(--gold-ink)}
.auth .btn.quiet{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.auth .btn.quiet:hover{background:#FFF9EC;border-color:#DCCDAA}
.btn-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--brass-deep);background:var(--brass-wash);border:1px solid #E9D9B1;white-space:nowrap}
.btn-chip:hover{background:#EFE0BC;border-color:var(--gold-edge);color:var(--gold-ink)}
.ac-actions{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.ac-row{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:4px}
.ac-row .btn.quiet{padding:0 20px}
.ac-or{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);margin:2px 0}
.ac-or::before,.ac-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* กล่องข้อความ */
.ac-info{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#FBF4E3;border:1px solid #EFDFB8;font-size:14px;color:var(--ink-2);line-height:1.6}
.ac-info .i{width:19px;height:19px;color:var(--brass-deep);margin-top:2px}
.ac-info b{color:var(--ink)}

/* ขั้นตอนสมัคร */
.ac-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:s}
.ac-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12.5px;color:var(--muted);font-weight:500}
.ac-steps li::before{content:"";position:absolute;top:15px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;border-radius:2px;background:var(--line)}
.ac-steps li:first-child::before{display:none}
.ac-steps li.on::before,.ac-steps li.done::before{background:linear-gradient(90deg,var(--gold-2),var(--brass))}
.ac-steps .dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:700;background:var(--paper);border:1.5px solid var(--line);color:var(--muted)}
.ac-steps .dot .i{width:16px;height:16px;stroke-width:2.6}
.ac-steps li.on{color:var(--ink);font-weight:700}
.ac-steps li.on .dot{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-color:var(--gold-edge);color:var(--gold-ink);box-shadow:0 0 0 4px rgba(176,138,62,.14)}
.ac-steps li.done{color:var(--brass-deep)}
.ac-steps li.done .dot{background:var(--brass);border-color:var(--brass);color:#fff}

/* เลือกประเภทธุรกิจ */
.biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* การ์ดประเภทธุรกิจ: ไอคอน + ชื่อแถวบน คำอธิบายเต็มความกว้างด้านล่าง (ไม่บีบตัวอักษรเป็นคอลัมน์แคบ) */
.biz{position:relative;text-align:left;display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:8px;align-items:center;
  padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#FFFEFB;transition:border-color .15s,box-shadow .15s,background .15s}
.biz:last-child:nth-child(odd){grid-column:1/-1}
.biz:hover{border-color:#DCCDAA;box-shadow:0 10px 24px -20px rgba(74,53,16,.6)}
.biz .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brass-wash);color:var(--brass-deep)}
.biz .ic .i{width:20px;height:20px}
.biz b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3;padding-right:30px}
.biz small{grid-column:1/-1;font-size:12.5px;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.biz .tick{position:absolute;top:22px;right:16px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;background:var(--paper)}
.biz .tick .i{width:13px;height:13px;stroke-width:3}
.biz.on{border-color:var(--gold-edge);background:#FFF9EC;box-shadow:0 0 0 3px rgba(176,138,62,.14)}
.biz.on .ic{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-ink)}
.biz.on .tick{background:var(--brass);border-color:var(--brass);color:#fff}

/* ---------- จอเล็ก ---------- */
@media (max-width:1100px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{padding:32px 18px 40px;align-items:flex-start}
  .auth-logo{display:block}
  .auth-card{margin-top:2vh}
}
@media (max-width:560px){
  .auth-card{padding:26px 20px 24px;border-radius:20px;gap:18px}
  .ac-head{text-align:center;align-items:center}
  .ac-head h1{font-size:24px}
  .ac-grid,.biz-grid{grid-template-columns:1fr}
  .ac-steps li{font-size:11.5px}
  .ac-row{grid-template-columns:1fr 2fr}
}
@media (max-height:760px) and (min-width:1101px){
  .auth-side{padding-top:32px;padding-bottom:28px;gap:24px}
  .as-features{gap:8px}
  .as-features li{padding:9px 12px}
  .as-body>p{display:none}
}

/* ป้ายกำกับทอง (ตัวพิมพ์ใหญ่ภาษาอังกฤษเท่านั้น ภาษาไทยไม่ยืดระยะตัวอักษร) */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-deep)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brass)}
.auth .toggle input:checked{background:var(--brass)}
.auth .btn[disabled]{opacity:.5}

/* การ์ดกว้าง (ขั้นตอนสมัคร): กระชับขึ้น และปุ่มย้อนกลับ/ถัดไปติดขอบล่างเสมอ ไม่ต้องเลื่อนหาปุ่ม */
.auth-card.wide{gap:16px;padding-bottom:0}
.auth-card.wide .ac-form{gap:12px}
.auth-card.wide textarea.input{min-height:64px}
.auth-card.wide .ac-opt{padding:11px 16px}
.auth-card.wide .ac-row{position:sticky;bottom:0;z-index:2;margin:4px -40px 0;padding:14px 40px 24px;border-radius:0 0 24px 24px;
  background:linear-gradient(180deg,rgba(255,253,248,0) 0,var(--paper) 22%)}
@media (max-width:560px){.auth-card.wide .ac-row{margin:4px -20px 0;padding:14px 20px 20px;border-radius:0 0 20px 20px}}
/* ฝั่งแบรนด์สูงเต็มจอเสมอ แม้ฝั่งฟอร์มยาวกว่าจอ */
@media (min-width:1101px){.auth-side{position:sticky;top:0;height:100dvh;align-self:start}}