/* ZelfDutch install bar (Android) and Add-to-Home-Screen steps (iPhone) — pwa.js builds the markup */
.zd-pwa{position:fixed;z-index:99999;box-sizing:border-box;background:#FFFCF6;color:#1F3352;border:1px solid #EADFCB;
  font-family:'IBM Plex Sans Thai Looped','Noto Sans Thai',system-ui,sans-serif;font-size:15px;line-height:1.5;
  display:flex;flex-direction:column;gap:12px;animation:zd-pwa-in .25s ease-out}
.zd-pwa *{box-sizing:border-box}
.zd-pwa-bar{left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));border-radius:16px;
  box-shadow:0 8px 28px rgba(31,51,82,.22);padding:14px 14px 14px 16px}
.zd-pwa-sheet{left:0;right:0;bottom:0;border-radius:20px 20px 0 0;border-width:1px 0 0;
  box-shadow:0 -8px 28px rgba(31,51,82,.18);padding:20px 20px calc(18px + env(safe-area-inset-bottom))}
.zd-pwa-top{display:flex;align-items:flex-start;gap:8px}
.zd-pwa-head{flex:1;display:flex;gap:12px;align-items:center}
.zd-pwa-icon{width:48px;height:48px;flex:none;border-radius:12px;overflow:hidden;border:1px solid #EADFCB}
.zd-pwa-icon img{display:block;width:100%;height:100%}
.zd-pwa-text{display:flex;flex-direction:column;gap:2px}
.zd-pwa-text strong{font-family:Mitr,'IBM Plex Sans Thai Looped',system-ui,sans-serif;font-weight:500;font-size:17px;line-height:1.35}
.zd-pwa-text span{font-size:14px;color:#6E6A60;line-height:1.45}
.zd-pwa button{font-family:Mitr,'IBM Plex Sans Thai Looped',system-ui,sans-serif;font-size:15px;min-height:44px;
  border-radius:999px;cursor:pointer;margin:0;line-height:1.2;text-transform:none;letter-spacing:0;box-shadow:none}
.zd-pwa-btns{display:flex;gap:10px;justify-content:flex-end}
.zd-pwa .zd-pwa-later{padding:0 16px;border:0;background:transparent;color:#1F3352}
.zd-pwa .zd-pwa-go{padding:0 22px;border:0;background:#B4501C;color:#fff;font-weight:500}
.zd-pwa .zd-pwa-x{width:44px;height:44px;padding:0;margin:-8px -8px 0 0;border:0;background:transparent;color:#6E6A60;
  display:grid;place-items:center;flex:none}
.zd-pwa .zd-pwa-ok{border:1px solid #EADFCB;background:transparent;color:#1F3352;width:100%}
.zd-pwa .zd-pwa-later:hover,.zd-pwa .zd-pwa-ok:hover,.zd-pwa .zd-pwa-x:hover{background:#FBF3E6;color:#1F3352}
.zd-pwa .zd-pwa-go:hover{background:#9A4316;color:#fff}
.zd-pwa button:focus-visible{outline:3px solid #E2702A;outline-offset:2px}
.zd-pwa-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.zd-pwa-steps li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0}
.zd-pwa-steps small{color:#6E6A60;font-size:13px}
.zd-pwa-n{width:28px;height:28px;flex:none;border-radius:50%;background:#FBE2CF;display:grid;place-items:center;
  font-family:Mitr,system-ui,sans-serif;font-weight:600}
.zd-pwa-note{margin:0;background:#FBE2CF;border-radius:12px;padding:12px 14px}
@keyframes zd-pwa-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.zd-pwa{animation:none}}
@media print{.zd-pwa{display:none}}
/* round 2 (2569-10-29): LINE on Android — video button, bouncing arrow at the ⋮ menu, floating how-to video */
.zd-pwa .zd-pwa-play{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;border:0;
  background:#1F3352;color:#fff;font-weight:500;font-size:16px}
.zd-pwa .zd-pwa-play:hover{background:#2A4468;color:#fff}
.zd-pwa-point{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:-4px 0 -10px;color:#B4501C;
  font-family:Mitr,'IBM Plex Sans Thai Looped',system-ui,sans-serif;font-weight:500;font-size:15px}
.zd-pwa-point svg{margin-right:-4px;animation:zd-pwa-bob 1s ease-in-out infinite}
@keyframes zd-pwa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.zd-pwa-video{position:fixed;inset:0;z-index:100000;background:rgba(20,28,44,.93);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:16px;box-sizing:border-box;
  font-family:'IBM Plex Sans Thai Looped','Noto Sans Thai',system-ui,sans-serif;color:#fff}
.zd-pwa-video-top{width:min(320px,100%);display:flex;justify-content:space-between;align-items:center}
.zd-pwa-video-top strong{font-family:Mitr,system-ui,sans-serif;font-weight:500;font-size:17px}
.zd-pwa-video .zd-pwa-video-x{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.18);
  color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:none}
.zd-pwa-video .zd-pwa-video-x:focus-visible{outline:3px solid #E2702A;outline-offset:2px}
.zd-pwa-video video{width:min(320px,100%);max-height:calc(100vh - 140px);aspect-ratio:9/16;border-radius:18px;
  background:#FBF3E6;box-shadow:0 16px 40px rgba(0,0,0,.4);object-fit:contain}
.zd-pwa-video p{margin:0;font-size:14px;opacity:.85}
@media (prefers-reduced-motion:reduce){.zd-pwa-point svg{animation:none}}
/* round 3 (2569-10-29): one-tap "open in Safari / Chrome" from LINE (openExternalBrowser=1) */
.zd-pwa-lead{margin:0;font-size:16px;line-height:1.5}
.zd-pwa .zd-pwa-ext{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;
  background:#B4501C;color:#fff;font-family:Mitr,'IBM Plex Sans Thai Looped',system-ui,sans-serif;font-weight:500;font-size:17px;
  text-decoration:none}
.zd-pwa .zd-pwa-ext:hover,.zd-pwa .zd-pwa-ext:focus{background:#9A4316;color:#fff}
.zd-pwa .zd-pwa-ext:focus-visible{outline:3px solid #E2702A;outline-offset:2px}
.zd-pwa-sheet .zd-pwa-note{font-size:14px;padding:10px 12px}
/* /app/ — install page (approved mockup round 4); pwa.js sets is-android | is-iphone | is-line | is-installed | is-desktop */
.zd-app{max-width:640px;margin:0 auto;padding:28px 20px 48px;display:flex;flex-direction:column;gap:18px}
.zd-app-head{display:flex;gap:14px;align-items:center}
.zd-app-logo{width:64px;height:64px;flex:none;border-radius:16px;background:#FBF3E6;border:1px solid #EADFCB;display:grid;place-items:center;box-shadow:0 2px 10px rgba(31,51,82,.12)}
.zd-app h1{margin:0;font-family:Mitr,'IBM Plex Sans Thai Looped',system-ui,sans-serif;font-weight:600;font-size:clamp(24px,5vw,36px);line-height:1.3;color:#1F3352}
.zd-app h2{margin:10px 0 0;font-family:Mitr,'IBM Plex Sans Thai Looped',system-ui,sans-serif;font-weight:500;font-size:20px;color:#1F3352}
.zd-app-lead{margin:0;font-size:17px;line-height:1.65}
.zd-app [data-for]{display:none}
.zd-app:not([class*="is-"]) [data-for]:not([data-for="pending"]),
.zd-app.is-android [data-for="android"],.zd-app.is-iphone [data-for="iphone"],.zd-app.is-line [data-for="line"],
.zd-app.is-installed [data-for="installed"],.zd-app.is-pending [data-for="pending"],.zd-app.is-desktop [data-for="desktop"]{display:flex}
.zd-app-card{background:#FFFCF6;border:1px solid #EADFCB;border-radius:16px;padding:20px;flex-direction:column;gap:14px}
.zd-app-card p{margin:0;font-size:16px;line-height:1.6}
.zd-app-tag{font-size:14px;color:#6E6A60}
.zd-app-hint{font-size:14px!important;color:#6E6A60}
.zd-app-hint b{color:#1F3352}
.zd-app .zd-app-install,.zd-app .zd-app-ext{display:flex;align-items:center;min-height:54px;font-size:18px;justify-content:center;text-align:center}
.zd-app .zd-app-install[hidden],.zd-app .zd-app-video[hidden]{display:none}
.zd-app .zd-app-video{min-height:48px;border:0;border-radius:999px;background:#1F3352;color:#fff;font-family:Mitr,system-ui,sans-serif;font-weight:500;font-size:16px;cursor:pointer}
.zd-app-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5}
.zd-app-steps li{display:flex;gap:12px;align-items:center;margin:0}
.zd-app-n{width:30px;height:30px;flex:none;border-radius:50%;background:#FBE2CF;display:grid;place-items:center;font-family:Mitr,system-ui,sans-serif;font-weight:600}
.zd-app-done{display:flex;gap:12px;align-items:center;font-family:Mitr,system-ui,sans-serif;font-weight:500;font-size:18px}
.zd-app-check{width:40px;height:40px;flex:none;border-radius:50%;background:#4F7F62;display:grid;place-items:center}
.zd-app-desk{flex-direction:row!important;align-items:center;gap:28px!important}
.zd-app-qr{width:200px;height:200px;flex:none;border-radius:12px;border:1px solid #EADFCB;background:#fff}
.zd-app-help{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.6}
.zd-app-help > div{background:#FFFCF6;border:1px solid #EADFCB;border-radius:14px;padding:14px 16px}
@media (max-width:560px){.zd-app-desk{flex-direction:column!important}}
.zd-app-check.is-wait{background:#E2702A}
/* round 5 (2569-10-29): small bar first, "วิธีติดตั้ง" opens the sheet over a dimmed page; closing = this visit only */
.zd-pwa.zd-pwa-mini{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));flex-direction:row;align-items:center;gap:10px;
  padding:8px 6px 8px 10px;border:0;border-radius:14px;background:#1F3352;color:#fff;box-shadow:0 8px 24px rgba(31,51,82,.3)}
.zd-pwa-mini-icon{width:34px;height:34px;flex:none;border-radius:9px;overflow:hidden;background:#FBF3E6}
.zd-pwa-mini-icon img{display:block;width:100%;height:100%}
.zd-pwa-mini-t{flex:1;min-width:0;font-size:14px;line-height:1.35}
.zd-pwa .zd-pwa-mini-go{min-height:40px;padding:0 14px;border:0;background:#E2702A;color:#fff;font-weight:500;font-size:14px;flex:none}
.zd-pwa .zd-pwa-mini-go:hover{background:#C9601F;color:#fff}
.zd-pwa .zd-pwa-mini-x{width:40px;height:40px;min-height:40px;padding:0;border:0;background:transparent;color:#fff;display:grid;place-items:center;flex:none}
.zd-pwa .zd-pwa-mini-x:hover{background:rgba(255,255,255,.12);color:#fff}
.zd-pwa-dim{position:fixed;inset:0;z-index:99998;background:rgba(20,28,44,.35)}
.zd-pwa-sheet{max-height:calc(100vh - 40px);overflow-y:auto}