/* yod-lead.css — ประตู 3 ทางบนหน้าการตลาด (ก้อน A · _SELF-SERVE-FUNNEL-SPEC.md §2.1/§3.1) + แผ่นฟอร์ม "ให้ทีมติดต่อกลับ"
 * ใช้คู่ assets/js/yod-lead.js · ลิงก์จาก yodpos-landing.html + index.html
 * ภาษาภาพ = Liquid Glass ของหน้าการตลาด (เหมือน yod-aisales.css): กระจกใส tint teal ไม่ขุ่นขาว · backdrop-filter คู่ -webkit- + พื้นทึบสำรองนอก @supports
 * น้ำหนัก 400/600 เท่านั้น · ตระกูลเดียวกับหน้า (inherit) · ไม่มีตัวเลขเงิน · เป้ากด ≥44px
 * มือถือ ≤560px: แผ่น = bottom sheet · ขอบใน 16px · ไม่มีเลื่อนแนวนอน · ลดการเคลื่อนไหว/ลดความโปร่งใส = ไม่มีแอนิเมชัน พื้นทึบ
 */

/* ── แถวทางเลือกรองใต้ปุ่มหลัก (ดูคลิป · ให้ทีมติดต่อกลับ) — ลิงก์เบา ไม่แย่งปุ่มสมัคร ── */
.ylead-alt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:14px 0 0;padding:0;list-style:none}
.ylead-alt--c{justify-content:center}
.ylead-alt__a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:600;color:inherit;opacity:.9;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:currentColor}
.ylead-alt__a:hover{opacity:1}
.ylead-alt__a:focus-visible{outline:2px solid #9BE0C9;outline-offset:3px;border-radius:6px}
.ylead-alt__a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── แผ่นฟอร์ม ── */
.ylead{--yl-tx:var(--ygm-tx,#EEF8F5);--yl-tx-2:var(--ygm-tx-2,#C3DBD3);--yl-tx-3:var(--ygm-tx-3,#B5D0C8);--yl-mint:var(--ygm-mint,#9BE0C9);
  --yl-line:var(--ygm-line,rgba(238,248,245,.12));--yl-line-2:var(--ygm-line-2,rgba(238,248,245,.22));--yl-solid:var(--ygm-fallback,#10302A);
  --yl-out:var(--ygm-out,cubic-bezier(.2,.9,.25,1));
  position:fixed;inset:0;z-index:2147483100;display:flex;align-items:center;justify-content:center;padding:16px;
  font-family:inherit;font-size:15px;line-height:1.55;color:var(--yl-tx);text-align:left;-webkit-text-size-adjust:100%}
.ylead[hidden]{display:none}
.ylead *,.ylead *::before,.ylead *::after{box-sizing:border-box}
.ylead button,.ylead input{font:inherit;color:inherit}
.ylead :focus-visible{outline:2px solid var(--yl-mint);outline-offset:2px}
.ylead__scrim{position:absolute;inset:0;background:rgba(2,14,11,.62);animation:yl-fade .25s ease both}
.ylead__panel{position:relative;width:min(460px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;border-radius:26px;background:var(--yl-solid);padding:22px 22px 0;scroll-padding:24px 0 140px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 1px rgba(0,0,0,.14),0 24px 48px -20px rgba(0,0,0,.6),0 60px 90px -44px rgba(0,0,0,.5);
  animation:yl-in .42s var(--yl-out) both}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html:not(.ygm-lite) .ylead__panel{background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%),rgba(3,24,20,.86);
    -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%)}
}
@keyframes yl-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes yl-fade{from{opacity:0}to{opacity:1}}

.ylead__head{display:flex;align-items:flex-start;gap:12px;margin:0 0 4px}
.ylead__t{flex:1;min-width:0;margin:0;font-size:1.2rem;font-weight:600;line-height:1.35;color:var(--yl-tx)}
.ylead__x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-8px -10px 0 0;border:0;border-radius:50%;background:transparent;color:var(--yl-tx-2);cursor:pointer}
.ylead__x:hover{background:rgba(255,255,255,.08);color:var(--yl-tx)}
.ylead__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ylead__sub{margin:0 0 16px;color:var(--yl-tx-3);font-size:.9rem}

.ylead__form{display:flex;flex-direction:column;gap:14px}
.ylead__f{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.ylead__l{font-size:.85rem;color:var(--yl-tx-2);padding:0}
.ylead__opt{color:var(--yl-tx-3);font-size:.8rem}
.ylead__i{width:100%;min-height:46px;padding:10px 14px;border:0;border-radius:14px;background:rgba(0,0,0,.24);color:var(--yl-tx);
  box-shadow:inset 0 0 0 1px var(--yl-line-2);-webkit-appearance:none;appearance:none;font-size:16px}
.ylead__i::placeholder{color:var(--yl-tx-3);opacity:.8}
.ylead__i:focus{outline:none;box-shadow:inset 0 0 0 2px var(--yl-mint)}
.ylead__i[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #FF9A7A}

/* ชิปเลือกแบบเดียว (role=radio) — สั่งทำ ไม่ใช่ radio ดิบ */
.ylead__chips{display:flex;flex-wrap:wrap;gap:8px}
.ylead__chip{min-height:44px;padding:9px 16px;border:0;border-radius:999px;cursor:pointer;font-size:.92rem;color:var(--yl-tx);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--yl-line-2);transition:background .2s,box-shadow .2s}
.ylead__chip:hover{background:rgba(155,224,201,.12)}
.ylead__chip[aria-checked="true"]{background:linear-gradient(180deg,rgba(60,199,165,.2),rgba(60,199,165,0) 55%),#1F7461;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(155,224,201,.45)}

/* ช่องติ๊ก (ต้องการเครื่อง · ยินยอม) — checkbox จริงซ่อนไว้ใต้กล่องวาดเอง (ยังกดด้วยคีย์บอร์ด/โปรแกรมอ่านจอได้) */
.ylead__chk{position:relative;display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.9rem;color:var(--yl-tx-2);line-height:1.5;min-height:44px;padding-top:2px}
.ylead__chk input{position:absolute;opacity:0;width:24px;height:24px;margin:0;left:0;top:0;cursor:pointer}
.ylead__box{flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--yl-line-2);background:rgba(0,0,0,.18);
  display:grid;place-items:center;transition:background .2s}
.ylead__chk input:checked+.ylead__box{background:#1F7461;box-shadow:inset 0 0 0 1.5px rgba(155,224,201,.7)}
.ylead__chk input:checked+.ylead__box::after{content:"";width:10px;height:5px;margin-top:-3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.ylead__chk input:focus-visible+.ylead__box{outline:2px solid var(--yl-mint);outline-offset:2px}
.ylead__chk--consent{font-size:.82rem;color:var(--yl-tx-3)}

/* ข้อมูลเพิ่มเติม (ไม่บังคับ) — ปุ่มเปิด/ปิด */
.ylead__more{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--yl-mint);font-size:.9rem;font-weight:600}
.ylead__more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--yl-out)}
.ylead__more[aria-expanded="true"] svg{transform:rotate(180deg)}
.ylead__extra{display:flex;flex-direction:column;gap:14px}
.ylead__extra[hidden]{display:none}

.ylead__priv{align-self:flex-start;margin:-6px 0 0 34px;font-size:.8rem;color:var(--yl-mint);text-decoration:underline;text-underline-offset:2px}
.ylead__ts:empty{display:none}
.ylead__err{margin:0;font-size:.88rem;line-height:1.45;color:#FFB59E}
.ylead__err:empty{display:none}
/* ท้ายแผ่นติดล่าง (18 ต.ค. 69 · รูป funnel-2026-10-18: ที่ 375 ปุ่มส่งตกขอบจอ ข้อความผิดอยู่ใต้สุดมองไม่เห็น)
   ข้อความผิดอยู่เหนือปุ่มในแถบเดียวกัน ⇒ ไม่มีอะไรทับกัน · พื้นทึบ+เฟดขอบบน กันช่องที่เลื่อนผ่านใต้แถบอ่านซ้อน
   ขยายเต็มกว้างแผ่น (ลบ padding ข้าง) · ขอบล่างเผื่อ safe-area (iPhone แถบโฮม) */
.ylead__foot{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;display:flex;flex-direction:column;gap:10px;
  margin:2px -22px 0;padding:14px 22px 20px;
  background:linear-gradient(180deg,rgba(3,24,20,0),var(--yl-solid) 14px);
  box-shadow:0 -1px 0 var(--yl-line)}
.ylead__go{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:12px 18px;border:0;border-radius:999px;cursor:pointer;
  font-weight:600;font-size:1rem;color:#fff;background:linear-gradient(180deg,rgba(60,199,165,.2),rgba(60,199,165,0) 55%),#1F7461;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px -12px rgba(15,181,166,.45)}
.ylead__go:hover{background:linear-gradient(180deg,rgba(60,199,165,.28),rgba(60,199,165,0) 55%),#22806B}
.ylead__go[disabled]{opacity:.6;cursor:progress}
.ylead__done{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px 0 max(22px,min(env(safe-area-inset-bottom),48px))}
.ylead__done svg{width:44px;height:44px;fill:none;stroke:var(--yl-mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ylead__done p{margin:0}
.ylead__done .ylead__t{font-size:1.15rem}
.ylead__close2{min-height:46px;padding:10px 20px;border:0;border-radius:999px;cursor:pointer;font-weight:600;color:var(--yl-tx);
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--yl-line-2)}
html.ylead-lock,html.ylead-lock body{overflow:hidden}

@media (max-width:560px){
  .ylead{align-items:flex-end;padding:0}
  .ylead__panel{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:24px 24px 0 0;
    padding:18px 16px 0}
  .ylead__foot{margin:2px -16px 0;padding:12px 16px max(16px,min(env(safe-area-inset-bottom),48px))}
}
@media (prefers-reduced-motion:reduce){.ylead__panel,.ylead__scrim{animation:none}.ylead__more svg{transition:none}}
@media (prefers-reduced-transparency:reduce){html .ylead__panel{background:var(--yl-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}