/* WhatsApp Flow phone preview (wa-flow-preview.js). Scoped under .wfp. */
.wfp{max-width:320px;margin:0 auto}
.wfp-toggle{display:flex;background:#eef2ff;border-radius:10px;padding:3px;width:fit-content;margin:0 auto 12px}
.wfp-toggle button{border:none;background:none;padding:6px 16px;border-radius:8px;font-size:12px;font-weight:600;color:#4f46e5;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px}
.wfp-toggle button.active{background:#fff;color:#1e293b;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.wfp-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.wfp-tab{border:1px solid #e5e7eb;background:#f8fafc;border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit;color:#334155}
.wfp-tab.active{background:#008069;border-color:#008069;color:#fff}
.wfp-phone{background:#000;border-radius:36px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.wfp-inner{background:#fff;border-radius:28px;overflow:hidden;position:relative}
.wfp-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:20px;background:#000;border-radius:0 0 14px 14px;z-index:2}
.wfp-header{background:#008069;color:#fff;padding:32px 14px 12px;display:flex;align-items:center;gap:12px}
.wfp-back{font-size:16px;cursor:pointer}
.wfp-biz{flex:1;min-width:0}
.wfp-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfp-sub{font-size:11px;opacity:.85}
.wfp-screen{display:flex;flex-direction:column;min-height:460px;max-height:540px}
.wfp-body{flex:1;overflow:auto;padding:16px}
.wfp-footer{padding:10px 16px 14px;border-top:1px solid #f1f5f9}
.wfp-btn{width:100%;background:#008069;color:#fff;border:none;border-radius:22px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.wfp-btn:disabled{background:#b2dfcc;cursor:not-allowed}
.wfp-h1{font-size:20px;font-weight:700;color:#111b21;margin:0 0 10px;line-height:1.3}
.wfp-h2{font-size:16px;font-weight:700;color:#111b21;margin:0 0 8px}
.wfp-p{font-size:14px;color:#111b21;margin:0 0 12px;line-height:1.45;white-space:pre-wrap}
.wfp-cap{font-size:12px;color:#667781;margin:0 0 12px;line-height:1.4;white-space:pre-wrap}
.wfp-link{display:inline-block;font-size:14px;color:#027eb5;margin:0 0 12px;text-decoration:none}
.wfp-img{width:100%;border-radius:8px;margin:0 0 12px}
.wfp-img-ph{height:110px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;margin:0 0 12px}
.wfp-field{margin-bottom:16px}
.wfp-label{font-size:13px;color:#111b21;font-weight:600;margin-bottom:6px}
.wfp-opt{font-weight:400;color:#8696a0}
.wfp-helper{font-size:11px;color:#667781;margin-top:4px}
.wfp-input,.wfp-live{width:100%;box-sizing:border-box;border:1px solid #d1d7db;border-radius:6px;padding:10px 12px;font-size:14px;color:#111b21;background:#fff;font-family:inherit}
.wfp-input.ph{color:#9aa3a8}
.wfp-ta,textarea.wfp-live{min-height:60px}
.wfp-select::after{content:"\25BE";float:right;color:#667781}
.wfp-live:focus{outline:none;border-color:#008069;box-shadow:0 0 0 1px #008069}
.wfp-opts{display:flex;flex-direction:column}
.wfp-opt-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #f1f5f9;cursor:pointer}
.wfp-opt-row:last-child{border-bottom:none}
.wfp-opt-row input{width:18px;height:18px;margin:1px 0 0;accent-color:#008069;flex:none}
.wfp-opt-text{flex:1;min-width:0}
.wfp-opt-title{font-size:14px;color:#111b21}
.wfp-opt-desc{font-size:12px;color:#667781;margin-top:2px;line-height:1.35}
.wfp-opt-meta{font-size:12px;color:#111b21;font-weight:600;white-space:nowrap}
.wfp-bx{width:18px;height:18px;border:1.5px solid #8696a0;border-radius:3px;flex:none;margin-top:1px;box-sizing:border-box}
.wfp-bx.rd{border-radius:50%}
.wfp-optin{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#111b21;margin-bottom:14px;line-height:1.4}
.wfp-optin input{width:18px;height:18px;margin:1px 0 0;accent-color:#008069;flex:none}
.wfp-done{text-align:center;padding:20px 4px}
.wfp-done-ic{width:56px;height:56px;border-radius:50%;background:#dcf8e8;color:#008069;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 10px}
.wfp-done-t{font-size:17px;font-weight:700;color:#111b21}
.wfp-done-s{font-size:12px;color:#667781;margin:6px 0 10px}
.wfp-done-json{text-align:left;background:#0f172a;color:#e2e8f0;border-radius:8px;padding:10px;font-size:11px;line-height:1.5;overflow:auto;max-height:260px;margin:0;white-space:pre-wrap;word-break:break-word}
@media (max-width:400px){.wfp-phone{border-radius:28px;padding:6px}.wfp-inner{border-radius:22px}}