/* Page group c: settings, alerts, integrations, staff, profile (panel redesign) */

/* ---------- Settings / Meta: one card with tabs, a header and the form ---------- */
.pgc-card{min-width:0}
.pgc-card>.tabs{padding:0 14px;border-bottom:1px solid var(--line)}
.pgc-card>.tabs a{font-size:13.5px;padding:14px 12px}
.pgc-card>.ea-card-h{padding:20px 22px 6px}
.pgc-fs{border:0;margin:0;padding:0;min-width:0}
.pgc-card .panel-b{padding:16px 22px 22px}
.pgc-card .field>label{display:block}
.pgc-card .form-grid{gap:16px 20px}
.pgc-card .field .help{line-height:1.45}
.pgc-card textarea.input{line-height:1.5}
.pgc-card .choice{gap:10px}
.pgc-card .choice label{border-radius:12px;padding:14px 16px}
.pgc-card .choice label:has(input:checked){border-color:var(--brand-line)}
.pgc-choice-in{margin-top:8px}
.pgc-foot{justify-content:flex-start}
.pgc-acct{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.pgc-acct .input{background:#fff}
.pgc-card .gw-card{border-radius:14px;padding:18px 20px;background:var(--surface-2)}
.pgc-card .gw-h{margin-bottom:14px;gap:10px;flex-wrap:wrap}
.pgc-card .copyrow{background:#fff;flex-wrap:wrap}
.pgc-card input[type=file].input{height:auto;padding:9px 12px}
.pgc-tests{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:6px 22px 22px}
.pgc-tests form{margin:0}
.pgc-tests-err{padding:0 22px 20px}

/* Meta (Facebook) leads */
.meta-hero.ea-card{background:linear-gradient(180deg,var(--surface-2),#fff 70%);padding:44px 24px;gap:14px}
.meta-hero .link-btn{color:var(--bad);text-decoration:none}
.meta-hero .btn-lg{max-width:100%;white-space:normal;height:auto;min-height:50px;padding:10px 24px}
.meta-hero .mh-page{max-width:100%}
.meta-hero .mh-page b{overflow-wrap:anywhere}
.ea-card>.list .row{padding:14px 22px;flex-wrap:wrap}
.ea-card>.list .row .grow{min-width:200px}
.ea-card>.list .row small{display:block;overflow-wrap:anywhere}

/* ---------- Email alerts ---------- */
.pgc-test-form{grid-template-columns:minmax(0,1fr);padding-bottom:6px}
.pgc-test-form .ea-f{max-width:640px}
.pgc-test-btns{border-top:0;padding:0;justify-content:flex-start}
.pgc-test .ea-card-f.pgc-test-btns{gap:10px}
#t-form .ea-card-f{grid-column:1/-1}
.pgc-t>.table-wrap{border-top:1px solid var(--line)}
.pgc-t .table-wrap td small{overflow-wrap:anywhere}
.pgc-t>.tfoot{border-top:1px solid var(--line)}
.pgc-t>.empty{padding:36px 18px}
.ea-two{align-items:stretch}
.ea-two>.ea-help{height:100%}

/* ---------- WhatsApp alerts ---------- */
.pgc-wa-tool{gap:10px;padding:16px 22px}
.pgc-wa-tool .input{height:38px;width:auto;flex:0 1 auto}
.pgc-wa-tool input[type=search]{flex:1 1 220px;max-width:340px}
.pgc-wa-tool .checks{font-size:13px}
.pgc-wa-tool .btn{min-height:38px}
.wh-list .wh-row{padding:16px 22px}
#wh-drawer .drawer-f{flex-wrap:wrap}
#wh-drawer .drawer-f .btn{flex:1 1 auto}
#wh-drawer .drawer-f .btn:last-child{margin-left:0}

/* ---------- Staff & roles ---------- */
.pgc-split{align-items:start}
.pgc-top{align-content:start}
.pgc-team .row{flex-wrap:wrap}
.pgc-team .row .grow{min-width:200px}
.pgc-team .row small{display:block;overflow-wrap:anywhere}
.pgc-role{text-decoration:none;color:inherit}
.pgc-role:hover{background:var(--surface-2)}
.pgc-role.is-on{background:var(--brand-soft)}
.pgc-new{display:flex!important;align-items:center;gap:8px;color:var(--brand)}
.pgc-new svg{width:16px;height:16px}
.pgc-role-form{min-width:0}
.pgc-role-name{gap:12px;flex-wrap:wrap}
.pgc-role-name .input{width:220px;max-width:100%;height:40px}
.pgc-perm{min-width:560px}
.pgc-perm th:not(:first-child),.pgc-perm td:not(:first-child){text-align:center}
.pgc-cb{accent-color:var(--brand);width:18px;height:18px;cursor:pointer}
.pgc-role-form .ea-card-f{border-top:1px solid var(--line)}
.pgc-role-form .table-wrap{border-top:1px solid var(--line)}

/* ---------- Profile ---------- */
.pgc-profile{display:flex;flex-direction:column;gap:22px}
.pgc-profile-grid{align-items:start}
.pgc-save{display:flex}

/* ---------- Popup / drawer fit ---------- */
#em-modal .modal-foot{padding:14px 22px;gap:10px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pgc-profile-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
  .pgc-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pgc-card>.tabs{padding:0 8px}
  .pgc-card>.ea-card-h{padding:16px 16px 4px}
  .pgc-card .panel-b{padding:14px 16px 18px}
  .pgc-tests{padding:4px 16px 18px}
  .pgc-tests-err{padding:0 16px 16px}
  .wh-list .wh-row{padding:14px 16px}
  .ea-card>.list .row{padding:12px 16px}
}
@media (max-width:640px){
  .pgc-card .gw-card{padding:14px}
  .pgc-acct{padding:14px}
  .pgc-tests form,.pgc-tests .btn{width:100%}
  .pgc-wa-tool{padding:14px 16px}
  .pgc-wa-tool .input,.pgc-wa-tool input[type=search]{width:100%;max-width:none;flex:1 1 100%}
  .pgc-wa-tool .btn{width:100%}
  .pgc-role-name{width:100%;margin-left:0}
  .pgc-role-name .input{width:100%}
  .pgc-test-btns .btn{flex:1 1 100%}
  .pgc-card .ea-h-right{margin-left:0;width:100%}
  .pgc-foot .btn,.pgc-save .btn{width:100%}
  .ea-card-f{padding:14px 16px}
  .ea-card-h{padding:16px}
  .ea-form{padding:6px 16px 18px}
  .ea-tiles{padding:6px 16px 18px}
  .meta-hero.ea-card{padding:30px 16px}
  #wh-drawer .drawer-h,#wh-drawer .drawer-b,#wh-drawer .drawer-f{padding-left:16px;padding-right:16px}
}

/* Email / WhatsApp alert tabs: keep five tabs on one line on laptops */
.ea-tabs a{padding:13px 12px;gap:6px;font-size:13.5px}
.ea-tabs{gap:2px 4px}
.pgc-perm td{padding-top:10px;padding-bottom:10px}
.pgc-perm th:not(:first-child),.pgc-perm td:not(:first-child){padding-left:10px;padding-right:10px}

/* ===== W5: partner sign-up e-mail verification, chatbot builder, customer e-mail, bulk select ===== */

/* E-mail verification on the sign-up form */
.otp-row{display:flex;gap:8px;align-items:stretch}
.otp-row .input{flex:1 1 auto;min-width:0}
.otp-row .otp-btn{flex:none;min-width:92px;white-space:nowrap}
.otp-code{margin-top:8px}
.otp-code .input{letter-spacing:.3em;font-weight:700;font-size:16px;max-width:240px}
.otp-msg{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--mute)}
.otp-msg[data-ok]{color:var(--ok);font-weight:600}
.otp-msg[data-bad]{color:var(--bad);font-weight:600}
.otp input[readonly]{background:var(--ok-soft);border-color:#b7e0c8}
@media (max-width:480px){.otp-row .otp-btn{min-width:84px;padding-left:12px;padding-right:12px}.otp-code .input{max-width:none}}

/* Chatbot builder */
.cb-list{border-top:1px solid var(--line)}
.cb-row{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.cb-row:last-child{border-bottom:0}
.cb-row.is-off .cb-main{opacity:.6}
.cb-main{min-width:0;flex:1 1 auto}
.cb-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cb-t b{font-size:14.5px;color:var(--ink)}
.cb-kw{display:block;margin-top:3px;color:var(--mute);overflow-wrap:anywhere}
.cb-ans{margin:6px 0 0;color:var(--text);line-height:1.45;overflow-wrap:anywhere}
.cb-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cb-tags .tag{display:inline-flex;align-items:center;gap:5px}
.cb-tags .tag svg{width:13px;height:13px}
.cb-act{display:flex;gap:6px;align-items:center;flex:none;flex-wrap:wrap;justify-content:flex-end}
.cb-act form{margin:0}
.cb-act .icon-btn:disabled{opacity:.35;cursor:not-allowed}
.cb-foot{justify-content:flex-start}
.cb-modal .panel-b textarea.input{line-height:1.5}
.cb-modal .field .help{display:block;margin-top:4px;line-height:1.45}
@media (max-width:640px){
  .cb-row{flex-direction:column;padding:14px 16px}
  .cb-act{width:100%;justify-content:flex-start}
}

/* Bulk select bar and checkbox column (Leads, Customers) */
.w5-sel{margin:0}
.w5-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 22px;background:var(--brand-soft);border-bottom:1px solid var(--brand-line);position:sticky;top:0;z-index:3}
.w5-bar[hidden]{display:none}
.w5-bar b{color:var(--brand);margin-right:4px}
.w5-bar .input{height:34px;width:auto;min-width:130px;max-width:100%}
.w5-bar .w5-grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.w5-bar .w5-sp{flex:1}
.w5-bar .btn-danger{color:var(--bad);border-color:#f0c6c1;background:#fff}
.w5-bar .btn-danger:hover{background:var(--bad-soft)}
th.sel,td.sel{width:40px;padding-right:0;cursor:pointer}
th.sel input,td.sel input{width:17px;height:17px;accent-color:var(--brand-2);cursor:pointer;vertical-align:middle}
tr.is-picked td{background:var(--brand-soft)}
.lcard.is-picked{outline:2px solid var(--brand-2)}
@media (max-width:640px){
  .w5-bar{padding:10px 16px;gap:8px}
  .w5-bar .w5-grp{width:100%}
  .w5-bar .w5-grp .input{flex:1 1 140px}
  .w5-bar .w5-sp{display:none}
}

/* Customer e-mail pop-ups */
.w5-modal .panel-b{padding-top:14px}
.w5-modal code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 4px;font-size:12px}
.w5-modal .w5-count{height:42px;display:flex;align-items:center;font-size:14px}
.w5-modal .w5-count b{font-size:20px;color:var(--ink);margin-right:6px}
.w5-barline{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.w5-barline i{display:block;height:100%;width:0;background:var(--brand-2);transition:width .25s}
.w5-prog small{display:block;margin-top:6px;color:var(--mute)}
.w5-sum{display:flex;gap:8px;flex-wrap:wrap}
.w5-result ul{margin:10px 0 0;padding-left:18px;max-height:180px;overflow:auto;color:var(--text);font-size:13px}
.w5-result li{margin:2px 0}
.w5-modal .modal-foot{flex-wrap:wrap}
@media (max-width:640px){
  .w5-modal .modal-foot .btn{flex:1 1 100%}
}

/* ===== W8: Chatbot page (Admin -> Chatbot): tabs, step-by-step builder, phone preview ===== */
.cbf-tabs{margin:0}
.cbf-tabs a svg{width:16px;height:16px}
.cbf-note{margin:0;align-items:flex-start}
.cbf-note svg{flex:none;width:18px;height:18px;margin-top:1px}
.cbf-moved .ea-card-h{padding:18px 22px}
.cbf-moved .ea-card-h>div:not(.ea-h-right){flex:1 1 240px;min-width:0}

.cbf-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:44px 24px}
.cbf-empty h2{font-size:20px}
.cbf-empty p{max-width:54ch;margin:0;color:var(--mute)}
.cbf-status{display:flex;align-items:center;gap:14px;padding:16px 22px;flex-wrap:wrap}
.cbf-st-t{flex:1 1 260px;min-width:0}
.cbf-st-t h2{font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cbf-st-t p{margin:2px 0 0;color:var(--mute);font-size:13px}
.cbf-count{margin-left:6px;font-weight:600;color:var(--text);white-space:nowrap}

.cbf-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.cbf-form{min-width:0;margin:0}
.cbf-default{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;border:0;padding:0;margin:0}
.cbf-ed{min-width:0}
.cbf-ed .pgc-fs{display:grid;gap:16px;padding-bottom:18px}

/* You are here: Welcome > Pricing > DSC */
.cbf-bc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:14px 22px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mute);background:var(--surface-2);border-radius:14px 14px 0 0}
.cbf-bc-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
.cbf-bc a{color:var(--brand-2);font-weight:600;text-decoration:none}
.cbf-bc a:hover{text-decoration:underline}
.cbf-bc b{color:var(--ink);overflow-wrap:anywhere}
.cbf-sep{color:#9fb0aa;font-weight:700}
.cbf-top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:18px 22px 4px}
.cbf-top h2{font-size:21px;overflow-wrap:anywhere}
.cbf-top .help{margin:4px 0 0;max-width:60ch}

.cbf-msg,.cbf-btn-h,.cbf-rows,.cbf-add,.cbf-none{margin:0 22px}
.cbf-msg>label,.cbf-btn-h>label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink)}
.cbf-step-no{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center;flex:none}
.cbf-msg textarea.input{height:auto;min-height:120px;padding:12px;line-height:1.5;font-size:15px}
.cbf-btn-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.cbf-btn-h .opt{font-weight:400;color:var(--mute);font-size:13px}
.cbf-none{padding:18px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--mute)}

/* One button */
.cbf-rows{display:grid;gap:12px}
.cbf-rows:empty{display:none}
.cbf-row{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:14px 16px;display:grid;gap:12px;min-width:0}
.cbf-row.is-new{border-color:var(--brand-2);box-shadow:0 0 0 4px var(--brand-soft)}
/* A button the server could not save as typed: red edge, and its own message under the box (see data-srv in button-row) */
.cbf-row.has-err{border-color:var(--bad);background:#fff7f6;box-shadow:0 0 0 3px rgb(192 57 43/.12)}
.cbf-row.has-err .cbf-n{background:var(--bad)}
.cbf-ed .fmt-err{display:block;margin-top:6px;font-size:13px;line-height:1.4;font-weight:600;color:var(--bad)}
.cbf-ed .input.is-bad,.cbf-ed .input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgb(192 57 43/.14)}
/* Failed save on this page (the form carries data-err): keep the red banner on screen while the page jumps to the box
   that needs fixing. It lets go (data-quiet, set by cbflow.js) as soon as the visitor starts typing. */
body:has(#cbf-form[data-err]:not([data-err=""]):not([data-quiet])) #content>.alert-bad{position:sticky;top:76px;z-index:30;max-height:34vh;overflow:auto;box-shadow:0 8px 24px rgb(192 57 43/.22);border:1px solid rgb(192 57 43/.35)}
@media (max-width:1023px){
  body:has(#cbf-form[data-err]:not([data-err=""]):not([data-quiet])) #content>.alert-bad{top:64px}
}
.cbf-row-h{display:grid;grid-template-columns:28px minmax(0,1.1fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.cbf-n{width:28px;height:28px;border-radius:50%;background:var(--brand-2);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;margin-bottom:8px}
.cbf-row .field>label{font-size:12.5px}
.cbf-row .input{background:#fff}
.cbf-row textarea.input{height:auto;padding:10px 12px;line-height:1.5}
.cbf-row input[type=file].input{height:auto;padding:9px 12px}
.cbf-tools{display:flex;gap:6px;align-items:center;padding-bottom:6px}
.cbf-tools .icon-btn{font-size:15px;font-weight:700;color:var(--ink)}
.cbf-tools .icon-btn:disabled{opacity:.35;cursor:not-allowed}
.cbf-tools .icon-btn:last-child{color:var(--bad)}
.cbf-opts{display:grid;gap:12px;border-top:1px dashed var(--brand-line);padding-top:12px}
.cbf-opts:not(:has(.cbf-opt:not([hidden]))){display:none}
.cbf-opt{display:grid;gap:12px;min-width:0}
.cbf-opt[hidden]{display:none}
.cbf-opt-f{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cbf-opt-f:empty{display:none}
.cbf-warn{display:inline-flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:6px 10px;line-height:1.4}
.cbf-warn svg{width:14px;height:14px;flex:none;margin-top:2px}
.cbf-warn-i{color:var(--bad);font-weight:600}
.cbf-fixed{display:flex;gap:8px;align-items:flex-start;margin:0;color:var(--text);line-height:1.5}
.cbf-fixed svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--brand-2)}
.cbf-cur{margin:0}
.cbf-opt a,.cbf-ed .help a{color:var(--brand-2);font-weight:600}

/* Big "Add a button" */
.cbf-add-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border:2px dashed var(--brand-2);border-radius:14px;background:var(--brand-soft);color:var(--brand);font-size:16.5px;font-weight:800;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.cbf-add-btn svg{width:20px;height:20px}
.cbf-add-btn:hover:not(:disabled){background:#d8eee7;border-color:var(--brand);transform:translateY(-1px)}
.cbf-add-btn:disabled{opacity:.5;cursor:not-allowed}
.cbf-foot{justify-content:flex-start;gap:12px}
.cbf-foot .btn-bad{margin-left:auto}

/* Phone preview */
.cbf-side{position:sticky;top:84px;display:grid;gap:10px;justify-items:center;min-width:0}
.cbf-prev-h{display:flex;flex-direction:column;align-items:center;text-align:center}
.cbf-prev-h small{color:var(--mute)}
.cbf-prev-n{margin:0;text-align:center;max-width:280px}
.cbf-prev-n a{color:var(--brand-2);font-weight:600}
.cbf-phone{width:300px;max-width:100%;height:min(560px,calc(100vh - 210px));min-height:440px;border:9px solid #14201c;border-radius:34px;background:#fff;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.cbf-ph-head{display:flex;align-items:center;gap:10px;padding:14px;background:linear-gradient(125deg,#06221d,#10473c 55%,#1a7c63);color:#fff}
.cbf-ph-head div{min-width:0}
.cbf-ph-head b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbf-ph-head small{display:block;font-size:11.5px;color:#bfe3d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbf-ph-av{width:34px;height:34px;border-radius:50%;background:rgb(255 255 255/.16);display:grid;place-items:center;font-weight:800;flex:none}
.cbf-ph-body{flex:1;overflow-y:auto;padding:14px 12px;background:linear-gradient(180deg,#f4f8f6,#fff 120px)}
.cbf-pv-me{display:flex;justify-content:flex-end;margin-bottom:8px}
.cbf-pv-me span{background:linear-gradient(135deg,#176f5b,#10473c);color:#fff;border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:13px;max-width:82%;overflow-wrap:anywhere}
.cbf-pv-b{display:inline-block;max-width:92%;background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:13.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.cbf-pv-b p{margin:0 0 6px}
.cbf-pv-b p:last-child{margin:0}
.cbf-pv-b ul{margin:4px 0;padding-left:18px}
.cbf-pv-empty{color:var(--mute);font-style:italic}
.cbf-pv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cbf-chip{border:1.5px solid #cfe0d9;background:#fff;color:#10473c;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.cbf-chip.is-off{border-style:dashed;opacity:.5}
.cbf-chip.cbf-nav{background:#f4f8f6;color:var(--mute);border-color:var(--line);font-weight:500}
.cbf-chip[data-t="whatsapp"]::before{content:"\1F4AC  "}
.cbf-chip[data-t="call"]::before{content:"\1F4DE  "}
.cbf-chip[data-t="document"]::before{content:"\1F4C4  "}
.cbf-chip[data-t="collect"]::before{content:"\1F4DD  "}
.cbf-chip[data-t="link"]::after{content:"  \2197"}
.cbf-chip[data-t="next"]::after{content:"  \203A"}
.cbf-ph-in{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);color:#9aa8a4;font-size:12.5px}
.cbf-ph-in i{font-style:normal;color:var(--brand-2)}

@media (max-width:1180px){
  .cbf-grid{grid-template-columns:minmax(0,1fr) 300px}
  .cbf-phone{width:270px}
}
@media (max-width:1023px){
  .cbf-grid{grid-template-columns:minmax(0,1fr)}
  .cbf-side{position:static}
  .cbf-phone{width:320px;height:520px}
}
@media (max-width:640px){
  .cbf-status{padding:14px 16px}
  .cbf-status .btn{width:100%}
  .cbf-bc{padding:12px 16px}
  .cbf-top{padding:16px 16px 4px}
  .cbf-top .btn{width:100%}
  .cbf-msg,.cbf-btn-h,.cbf-rows,.cbf-add,.cbf-none{margin:0 16px}
  .cbf-row{padding:12px}
  .cbf-row-h{grid-template-columns:28px minmax(0,1fr)}
  .cbf-f-act,.cbf-tools{grid-column:1/-1}
  .cbf-tools{justify-content:flex-end;padding-bottom:0}
  .cbf-foot{flex-direction:column;align-items:stretch}
  .cbf-foot .btn{width:100%}
  .cbf-foot .btn-bad{margin-left:0}
  .cbf-moved .ea-card-h{padding:16px}
  .cbf-phone{width:100%;max-width:340px;height:500px}
}

/* ---- W17: invoice settings (bank details, terms, signature), E-mail invoice window ---- */
.w17-sec{display:flex;flex-direction:column;gap:2px;padding-top:6px;border-top:1px solid var(--line)}
.w17-sec:first-child,.form-grid>.field+.w17-sec{margin-top:4px}
.w17-sec b{font-size:14px;color:var(--ink,#0f1f1b)}
.w17-sec span{font-size:12.5px;color:var(--mute,#64756f)}
.w17-sig-cur{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.w17-sig-cur img{max-width:220px;max-height:90px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px}
.w17-mailoff{margin:0}
@media (max-width:640px){
  .w17-sig-cur img{max-width:100%}
}

/* ================= W15 (wallet task S1c): money tiles, refunds guard, roles help, order notes. Only rendered while wallet.live is on. ================= */
/* dashboard */
.w15-banner{margin-bottom:16px;align-items:center}
.w15-banner>div{min-width:0}
.w15-banner small{display:block;font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.w15-banner .link{font-weight:700;text-decoration:underline;color:inherit}
.w15-kpis .kpi .v.down{color:var(--bad)}
.w15-kpis .kpi .v.up{color:var(--ok)}
.w15-kpis .kpi.w15-due{border-color:var(--gold);box-shadow:inset 0 3px 0 var(--gold),var(--shadow)}
.w15-kpis .kpi.w15-adv{background:var(--ok-soft);border-color:#b8e0c8}
.w15-kpis .kpi.w15-adv .l i{background:#fff}
/* refunds: review dialog */
.w15-rf{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.w15-rf[hidden]{display:none}
.w15-rf-nums{display:flex;flex-wrap:wrap;gap:8px}
.w15-rf-chip{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 12px;min-width:92px}
.w15-rf-chip small{font-size:11px;color:var(--mute);font-weight:600}
.w15-rf-chip.is-key{border-color:var(--brand-2);box-shadow:inset 0 2px 0 var(--brand-2)}
.w15-rf-lines{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.w15-rf-lines:empty{display:none}
.w15-rf-how{font-size:13px;color:var(--mute)}
.w15-rf-how summary{cursor:pointer;font-weight:600;color:var(--brand)}
.w15-rf-how ol{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.w15-rf-cash{display:block;color:var(--mute)}
.w15-rf-2nd{display:block;color:var(--gold-ink);font-weight:700}
#process-refund [data-rf-approve][disabled]{opacity:.5;cursor:not-allowed}
/* staff & roles: what each tick lets a person do */
.w15-help{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:3px;font-size:12px;font-weight:400;color:var(--mute);white-space:normal;max-width:430px}
.w15-help b{color:var(--ink);font-weight:700;margin-right:4px}
/* order page: the one-line money status under the steps, cancel / reject notes */
.w15-status{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.w15-status .pill{flex:none}
.w15-status b{font-weight:700}
.w15-note{display:block;line-height:1.5}
.w15-note b{display:inline;margin-right:4px}
.w15-cancel-help{margin:6px 0 0;max-width:330px}
/* END W15 */

/* ================= W15b (wallet task S1c, after the merge): HYBRID payment on the team's screens (wallet part held + the rest paid directly), the note under ACCEPT in the
   order rows, the Wallet card of the new-order forms when the wallet is short. Only rendered while wallet.live is on. ================= */
/* order page: the two figures of a hybrid order (Approval card, payment part) */
.w15-hy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.w15-hy>div{display:flex;flex-direction:column;gap:2px;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.w15-hy small{font-size:11.5px;color:var(--mute);font-weight:600}
.w15-hy b{font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.w15-hy b.down{color:var(--bad)}
/* order rows: what is still to pay, and the one-line note under ACCEPT */
.w16-table .w15-left{color:var(--bad);font-weight:700}
.w16-act small.w15-act{display:block;font-size:11.5px;line-height:1.35;color:var(--mute);margin:-2px 2px 0}
.w16-act small.w15-act.is-ready{color:var(--ok);font-weight:600}
/* new-order forms: the Wallet card on a short wallet (wallet + the rest paid directly) */
.w10-pay .w15-hmsg{display:block;margin-top:6px;color:var(--brand-2,#176f5b);font-weight:600;line-height:1.4}
.w10-pay .w15-hmsg b{display:inline;color:inherit}
.w10-pay .w15-hmsg[hidden]{display:none}
.w10-pay label.w15-hybrid{border-color:var(--gold,#f4b529)}
.w10-pay label.w15-hybrid:has(input:checked){border-color:var(--brand-2);background:var(--brand-soft)}
/* referrals: the one-line footnote under the KPI strip */
.w15-foot{margin:-4px 0 14px}
@media (max-width:760px){
  .w15-hy{grid-template-columns:minmax(0,1fr)}
  .w16-act small.w15-act{flex:1 1 100%;margin:0}
}
/* END W15b */