{"id":820,"date":"2026-05-31T06:06:24","date_gmt":"2026-05-31T06:06:24","guid":{"rendered":"https:\/\/mutualafricapay.com\/zw\/?page_id=820"},"modified":"2026-05-31T06:12:38","modified_gmt":"2026-05-31T06:12:38","slug":"support","status":"publish","type":"page","link":"https:\/\/mutualafricapay.com\/zw\/support\/","title":{"rendered":"Support"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nSupport \u2014 Mutual Africa Pay<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* \u2500\u2500 RESET & BASE \u2500\u2500 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nbody { font-family: 'Space Grotesk', sans-serif; background: #F4F6FA; color: #0D1B3E; -webkit-font-smoothing: antialiased; min-height: 100vh; }\r\n\r\n\/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\r\n.sec { padding: clamp(64px,10vw,112px) clamp(20px,6%,80px); position: relative; overflow: hidden; }\r\n.bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }\r\n.bg-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(13,27,62,0.06) 1px, transparent 1px); background-size: 30px 30px; }\r\n.bg-glow { position: absolute; border-radius: 50%; }\r\n\r\n\/* \u2500\u2500 TYPE \u2500\u2500 *\/\r\n.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }\r\n.edot { width: 6px; height: 6px; border-radius: 50%; background: #2E9E44; box-shadow: 0 0 8px rgba(46,158,68,0.7); animation: pulsedot 2.5s ease infinite; }\r\n.etxt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2E9E44; }\r\n\r\n@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\r\n@keyframes pulsedot { 0%,100%{opacity:1;box-shadow:0 0 8px rgba(46,158,68,0.7)}50%{opacity:0.4;box-shadow:0 0 3px rgba(46,158,68,0.3)} }\r\n@keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n\/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\r\n.btn-green { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#2E9E44;color:#FFFFFF;padding:13px 28px;border-radius:7px;font-size:.92rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background 150ms,transform 150ms,box-shadow 150ms;font-family:inherit;width:100%; }\r\n@media(hover:hover)and(pointer:fine){.btn-green:hover:not(:disabled){background:#38B850;transform:translateY(-2px);box-shadow:0 8px 24px rgba(46,158,68,.35);}}\r\n.btn-green:active:not(:disabled){transform:scale(0.97)!important;}\r\n.btn-green:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n HERO\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#s-hero { background: #FFFFFF; padding-bottom: 0; min-height: auto; padding-top: clamp(72px,10vw,120px); }\r\n.hero-inner { position: relative; z-index: 2; max-width: 700px; animation: fadeUp 0.55s cubic-bezier(0.23,1,0.32,1) both; }\r\n.hero-inner h1 { font-size: clamp(2.4rem,4.5vw,4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; color: #0D1B3E; margin-bottom: 18px; }\r\n.hero-inner h1 span { color: #2E9E44; }\r\n.hero-inner p { font-size: 1rem; color: #0D1B3E; line-height: 1.74; max-width: 560px; opacity: 0.7; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n QUICK HELP CARDS\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#s-quick { background: #F4F6FA; padding-top: clamp(40px,6vw,64px); padding-bottom: clamp(48px,7vw,80px); }\r\n.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; position: relative; z-index: 2; animation: fadeUp 0.5s 0.1s cubic-bezier(0.23,1,0.32,1) both; }\r\n.quick-card { background: #FFFFFF; border: 1px solid rgba(13,27,62,0.1); border-radius: 14px; padding: 24px 20px; text-decoration: none; color: inherit; transition: border-color 160ms, box-shadow 200ms, transform 180ms cubic-bezier(0.23,1,0.32,1); display: block; }\r\n@media(hover:hover)and(pointer:fine){.quick-card:hover{border-color:rgba(46,158,68,0.45);box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-3px)}}\r\n.quick-card:active{transform:scale(0.97)!important}\r\n.quick-ico { font-size: 1.5rem; margin-bottom: 12px; }\r\n.quick-title { font-size: 0.92rem; font-weight: 600; color: #0D1B3E; margin-bottom: 6px; }\r\n.quick-desc { font-size: 0.8rem; color: #0D1B3E; opacity: 0.6; line-height: 1.55; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n MAIN LAYOUT \u2014 FORM + SIDEBAR\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#s-form { background: #F4F6FA; }\r\n.form-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; position: relative; z-index: 2; align-items: start; animation: fadeUp 0.5s 0.05s cubic-bezier(0.23,1,0.32,1) both; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n TICKET FORM\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.ticket-box { background: #FFFFFF; border: 1px solid rgba(13,27,62,0.1); box-shadow: 0 4px 24px rgba(0,0,0,0.07); border-radius: 18px; padding: 36px; }\r\n.ticket-box h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #0D1B3E; margin-bottom: 6px; }\r\n.ticket-box > p { font-size: 0.875rem; color: #0D1B3E; opacity: 0.6; margin-bottom: 28px; line-height: 1.6; }\r\n\r\n\/* Category tabs *\/\r\n.category-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 28px; }\r\n.cat-tab { background: #F4F6FA; border: 1px solid rgba(13,27,62,0.12); border-radius: 8px; padding: 10px 8px; text-align: center; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 500; color: #0D1B3E; opacity: 0.75; transition: all 140ms; }\r\n.cat-tab:hover { opacity: 1; border-color: rgba(46,158,68,0.4); background: rgba(46,158,68,0.05); }\r\n.cat-tab.active { background: rgba(46,158,68,0.12); border-color: rgba(46,158,68,0.45); color: #2E9E44; opacity: 1; font-weight: 600; }\r\n.cat-tab .cat-ico { font-size: 1.1rem; display: block; margin-bottom: 5px; }\r\n\r\n\/* Priority selector *\/\r\n.priority-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 4px; }\r\n.pri-btn { background: #F4F6FA; border: 1px solid rgba(13,27,62,0.12); border-radius: 8px; padding: 9px 8px; text-align: center; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 500; color: #0D1B3E; opacity: 0.75; transition: all 140ms; display: flex; align-items: center; justify-content: center; gap: 6px; }\r\n.pri-btn:hover { opacity: 1; border-color: rgba(13,27,62,0.25); }\r\n.pri-btn.active.low { background: rgba(46,158,68,0.12); border-color: rgba(46,158,68,0.45); color: #2E9E44; opacity: 1; font-weight: 600; }\r\n.pri-btn.active.medium { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.45); color: #EAB308; opacity: 1; font-weight: 600; }\r\n.pri-btn.active.high { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.45); color: #EF4444; opacity: 1; font-weight: 600; }\r\n.pri-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }\r\n.pri-dot.low { background: #2E9E44; }\r\n.pri-dot.medium { background: #EAB308; }\r\n.pri-dot.high { background: #EF4444; }\r\n\r\n\/* Form fields *\/\r\n.field { margin-bottom: 20px; }\r\n.field label { display: block; font-size: 0.8rem; font-weight: 600; color: #0D1B3E; opacity: 0.75; margin-bottom: 8px; letter-spacing: 0.01em; }\r\n.field label span.req { color: #2E9E44; margin-left: 2px; }\r\n.field input, .field select, .field textarea {\r\n width: 100%; background: #F4F6FA; border: 1px solid rgba(13,27,62,0.15);\r\n border-radius: 8px; padding: 12px 14px; font-family: inherit; font-size: 0.88rem;\r\n color: #0D1B3E; outline: none; transition: border-color 150ms, background 150ms;\r\n appearance: none; -webkit-appearance: none;\r\n}\r\n.field input::placeholder, .field textarea::placeholder { color: rgba(13,27,62,0.35); }\r\n.field input:focus, .field select:focus, .field textarea:focus {\r\n border-color: rgba(46,158,68,0.55); background: rgba(46,158,68,0.03);\r\n}\r\n.field input.error, .field select.error, .field textarea.error {\r\n border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.03);\r\n}\r\n.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }\r\n.field select { background-image: url(\"data:image\/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(13,27,62,0.45)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }\r\n.field select option { background: #FFFFFF; color: #0D1B3E; }\r\n.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\r\n.field-hint { font-size: 0.75rem; color: #0D1B3E; opacity: 0.45; margin-top: 6px; }\r\n.field-error { font-size: 0.75rem; color: #EF4444; margin-top: 6px; display: none; }\r\n.field-error.show { display: block; }\r\n\r\n\/* Section labels inside form *\/\r\n.form-section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2E9E44; margin-bottom: 10px; margin-top: 28px; }\r\n.form-section-label:first-child { margin-top: 0; }\r\n\r\n\/* File upload *\/\r\n.file-drop { border: 1px dashed rgba(13,27,62,0.2); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 150ms, background 150ms; position: relative; }\r\n.file-drop:hover, .file-drop.drag { border-color: rgba(46,158,68,0.4); background: rgba(46,158,68,0.04); }\r\n.file-drop input[type=\"file\"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }\r\n.file-drop-ico { font-size: 1.4rem; margin-bottom: 8px; }\r\n.file-drop-text { font-size: 0.82rem; color: #0D1B3E; opacity: 0.55; }\r\n.file-drop-text strong { color: #2E9E44; opacity: 1; }\r\n.file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }\r\n.file-item { display: flex; align-items: center; justify-content: space-between; background: rgba(46,158,68,0.08); border: 1px solid rgba(46,158,68,0.2); border-radius: 6px; padding: 7px 10px; font-size: 0.78rem; color: #FFFFFF; }\r\n.file-item button { background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; transition: color 150ms; }\r\n.file-item button:hover { color: #EF4444; }\r\n\r\n\/* Submit area *\/\r\n.submit-area { margin-top: 28px; }\r\n.submit-note { font-size: 0.78rem; color: #0D1B3E; opacity: 0.45; text-align: center; margin-top: 12px; line-height: 1.5; }\r\n\r\n\/* Loading spinner *\/\r\n.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #FFFFFF; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }\r\n\r\n\/* \u2500\u2500 SUCCESS STATE \u2500\u2500 *\/\r\n.success-state { display: none; text-align: center; padding: 48px 24px; }\r\n.success-state.show { display: block; }\r\n.success-ico { font-size: 3.5rem; margin-bottom: 20px; }\r\n.success-state h3 { font-size: 1.5rem; font-weight: 700; color: #0D1B3E; margin-bottom: 12px; }\r\n.success-state p { font-size: 0.92rem; color: #0D1B3E; opacity: 0.65; line-height: 1.7; max-width: 400px; margin: 0 auto 24px; }\r\n.ticket-ref { display: inline-flex; align-items: center; gap: 8px; background: rgba(46,158,68,0.1); border: 1px solid rgba(46,158,68,0.3); border-radius: 8px; padding: 10px 18px; font-size: 0.88rem; font-weight: 600; color: #2E9E44; margin-bottom: 24px; }\r\n.btn-ghost-sm { background: transparent; border: 1px solid rgba(13,27,62,0.2); border-radius: 7px; padding: 10px 20px; font-family: inherit; font-size: 0.85rem; font-weight: 500; color: #0D1B3E; cursor: pointer; transition: border-color 150ms; }\r\n@media(hover:hover)and(pointer:fine){.btn-ghost-sm:hover{border-color:rgba(13,27,62,0.4);}}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n SIDEBAR\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sidebar { display: flex; flex-direction: column; gap: 16px; }\r\n.sidebar-card { background: #FFFFFF; border: 1px solid rgba(13,27,62,0.1); box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-radius: 14px; padding: 24px; }\r\n.sidebar-card h3 { font-size: 0.92rem; font-weight: 600; color: #0D1B3E; margin-bottom: 14px; }\r\n.sidebar-card p { font-size: 0.82rem; color: #0D1B3E; opacity: 0.65; line-height: 1.62; margin-bottom: 14px; }\r\n\r\n\/* Status badge *\/\r\n.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 600; }\r\n.status-badge.green { background: rgba(46,158,68,0.12); border: 1px solid rgba(46,158,68,0.28); color: #2E9E44; }\r\n.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulsedot 2s ease infinite; }\r\n\r\n\/* SLA table *\/\r\n.sla-table { width: 100%; border-collapse: collapse; }\r\n.sla-table tr { border-bottom: 1px solid rgba(13,27,62,0.08); }\r\n.sla-table tr:last-child { border-bottom: none; }\r\n.sla-table td { padding: 8px 0; font-size: 0.78rem; color: #0D1B3E; }\r\n.sla-table td:first-child { opacity: 0.6; }\r\n.sla-table td:last-child { text-align: right; font-weight: 500; }\r\n.sla-table td .pri-badge { display: inline-flex; align-items: center; gap: 5px; }\r\n.sla-low { color: #2E9E44; }\r\n.sla-med { color: #EAB308; }\r\n.sla-high { color: #EF4444; }\r\n\r\n\/* Contact options *\/\r\n.contact-opt { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(13,27,62,0.08); }\r\n.contact-opt:last-child { border-bottom: none; }\r\n.contact-ico-wrap { width: 34px; height: 34px; border-radius: 8px; background: rgba(46,158,68,0.1); border: 1px solid rgba(46,158,68,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; }\r\n.contact-opt-info { flex: 1; min-width: 0; }\r\n.contact-opt-label { font-size: 0.78rem; font-weight: 600; color: #0D1B3E; margin-bottom: 2px; }\r\n.contact-opt-val { font-size: 0.75rem; color: #0D1B3E; opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\na.contact-opt { text-decoration: none; transition: background 150ms; border-radius: 8px; padding: 8px; margin: -8px; }\r\na.contact-opt:hover { background: rgba(13,27,62,0.03); }\r\n\r\n\/* FAQ accordion *\/\r\n.faq-item { border-bottom: 1px solid rgba(13,27,62,0.08); }\r\n.faq-item:last-child { border-bottom: none; }\r\n.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; cursor: pointer; font-size: 0.82rem; font-weight: 500; color: #0D1B3E; background: none; border: none; font-family: inherit; width: 100%; text-align: left; transition: color 150ms; }\r\n.faq-q:hover { color: #2E9E44; }\r\n.faq-chevron { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.4; transition: transform 200ms, opacity 150ms; }\r\n.faq-q[aria-expanded=\"true\"] .faq-chevron { transform: rotate(180deg); opacity: 1; }\r\n.faq-q[aria-expanded=\"true\"] { color: #2E9E44; }\r\n.faq-a { font-size: 0.8rem; color: #0D1B3E; opacity: 0.65; line-height: 1.65; padding-bottom: 12px; display: none; }\r\n.faq-a.open { display: block; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n RESPONSIVE\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@media(max-width:1024px){ .form-layout { grid-template-columns: 1fr; } .sidebar { display: grid; grid-template-columns: 1fr 1fr; } }\r\n@media(max-width:800px){ .quick-grid { grid-template-columns: repeat(2,1fr); } .category-tabs { grid-template-columns: repeat(2,1fr); } }\r\n@media(max-width:640px){ .field-row { grid-template-columns: 1fr; } .priority-row { grid-template-columns: repeat(3,1fr); } .sidebar { grid-template-columns: 1fr; } .ticket-box { padding: 24px 20px; } }\r\n@media(max-width:480px){ .quick-grid { grid-template-columns: 1fr 1fr; } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2501\u2501\u2501 HERO \u2501\u2501\u2501 -->\r\n<section class=\"sec\" id=\"s-hero\">\r\n <div class=\"bg\">\r\n <div class=\"bg-dots\"><\/div>\r\n <div class=\"bg-glow\" style=\"top:-80px;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(46,158,68,0.09) 0%,transparent 65%)\"><\/div>\r\n <\/div>\r\n <div class=\"hero-inner\">\r\n <div class=\"eyebrow\"><span class=\"edot\"><\/span><span class=\"etxt\">Support Centre<\/span><\/div>\r\n <h1>How can we <span>help you today?<\/span><\/h1>\r\n <p>Submit a support ticket and our team will get back to you. Average first response within 4 business hours for standard priority requests.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2501\u2501\u2501 QUICK HELP \u2501\u2501\u2501 -->\r\n<section class=\"sec\" id=\"s-quick\">\r\n <div class=\"bg\"><div class=\"bg-dots\"><\/div><\/div>\r\n <div class=\"quick-grid\">\r\n <a href=\"https:\/\/mutualafricapay.com\/help-centre\/\" class=\"quick-card\">\r\n <div class=\"quick-ico\">\ud83d\udcd6<\/div>\r\n <div class=\"quick-title\">Help Centre<\/div>\r\n <p class=\"quick-desc\">Browse all guides, how-to articles, and troubleshooting across every Mutual Africa Pay feature.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/mutualafricapay.com\/help-centre\/getting-started\/\" class=\"quick-card\">\r\n <div class=\"quick-ico\">\ud83d\ude80<\/div>\r\n <div class=\"quick-title\">Getting Started<\/div>\r\n <p class=\"quick-desc\">Set up your account, invite your team, and connect your bank.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/mutualafricapay.com\/help-centre\/account-billing\/\" class=\"quick-card\">\r\n <div class=\"quick-ico\">\ud83d\udcb3<\/div>\r\n <div class=\"quick-title\">Account & Billing<\/div>\r\n <p class=\"quick-desc\">Plan changes, subscription invoices, payment methods, and cancellation.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/mutualafricapay.com\/help-centre\/business-operations\/\" class=\"quick-card\">\r\n <div class=\"quick-ico\">\u2699\ufe0f<\/div>\r\n <div class=\"quick-title\">Business Operations<\/div>\r\n <p class=\"quick-desc\">Clients, suppliers, inventory, purchase orders, quotes, projects, and point of sale.<\/p>\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- \u2501\u2501\u2501 FORM + SIDEBAR \u2501\u2501\u2501 -->\r\n<section class=\"sec\" id=\"s-form\">\r\n <div class=\"bg\"><div class=\"bg-dots\"><\/div><\/div>\r\n\r\n <div class=\"form-layout\">\r\n\r\n <!-- \u2500\u2500 TICKET FORM \u2500\u2500 -->\r\n <div class=\"ticket-box\">\r\n\r\n <!-- Success state (hidden until submission) -->\r\n <div class=\"success-state\" id=\"success-state\">\r\n <div class=\"success-ico\">\u2705<\/div>\r\n <h3>Ticket submitted successfully<\/h3>\r\n <p>We've received your request and sent a confirmation to your email address. Our team will be in touch shortly.<\/p>\r\n <div class=\"ticket-ref\" id=\"ticket-ref-display\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M7 1.167A5.833 5.833 0 107 12.833 5.833 5.833 0 007 1.167z\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><path d=\"M7 4.667v2.916L8.75 9.333\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/><\/svg>\r\n <span id=\"ticket-ref-text\">Ticket #MAP-00000<\/span>\r\n <\/div>\r\n <br>\r\n <button class=\"btn-ghost-sm\" onclick=\"resetForm()\">Submit another ticket<\/button>\r\n <\/div>\r\n\r\n <!-- Form state -->\r\n <div id=\"form-state\">\r\n <h2>Submit a support ticket<\/h2>\r\n <p>Fill in the details below and we'll get back to you as quickly as possible.<\/p>\r\n\r\n <!-- Category -->\r\n <div class=\"form-section-label\">Category<\/div>\r\n <div class=\"category-tabs\" id=\"category-tabs\">\r\n <button class=\"cat-tab active\" data-cat=\"billing\" type=\"button\" onclick=\"selectCat(this)\">\r\n <span class=\"cat-ico\">\ud83d\udcb3<\/span>Billing & Payments\r\n <\/button>\r\n <button class=\"cat-tab\" data-cat=\"technical\" type=\"button\" onclick=\"selectCat(this)\">\r\n <span class=\"cat-ico\">\u2699\ufe0f<\/span>Technical\r\n <\/button>\r\n <button class=\"cat-tab\" data-cat=\"account\" type=\"button\" onclick=\"selectCat(this)\">\r\n <span class=\"cat-ico\">\ud83d\udc64<\/span>Account\r\n <\/button>\r\n <button class=\"cat-tab\" data-cat=\"general\" type=\"button\" onclick=\"selectCat(this)\">\r\n <span class=\"cat-ico\">\ud83d\udcac<\/span>General\r\n <\/button>\r\n <\/div>\r\n <input type=\"hidden\" id=\"selected-category\" value=\"billing\">\r\n\r\n <!-- Priority -->\r\n <div class=\"form-section-label\">Priority<\/div>\r\n <div class=\"priority-row\">\r\n <button class=\"pri-btn low active\" data-pri=\"low\" type=\"button\" onclick=\"selectPri(this)\">\r\n <span class=\"pri-dot low\"><\/span>Low\r\n <\/button>\r\n <button class=\"pri-btn medium\" data-pri=\"medium\" type=\"button\" onclick=\"selectPri(this)\">\r\n <span class=\"pri-dot medium\"><\/span>Medium\r\n <\/button>\r\n <button class=\"pri-btn high\" data-pri=\"high\" type=\"button\" onclick=\"selectPri(this)\">\r\n <span class=\"pri-dot high\"><\/span>High \/ Urgent\r\n <\/button>\r\n <\/div>\r\n <p class=\"field-hint\" style=\"margin-bottom:4px\">High priority is for issues impacting active business operations.<\/p>\r\n <input type=\"hidden\" id=\"selected-priority\" value=\"low\">\r\n\r\n <!-- Contact info -->\r\n <div class=\"form-section-label\" style=\"margin-top:24px\">Your Details<\/div>\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label for=\"full-name\">Full Name <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"full-name\" placeholder=\"Jane Mwangi\" autocomplete=\"name\">\r\n <div class=\"field-error\" id=\"err-name\">Please enter your full name.<\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"email\">Email Address <span class=\"req\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"jane@company.co.ke\" autocomplete=\"email\">\r\n <div class=\"field-error\" id=\"err-email\">Please enter a valid email address.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label for=\"company\">Company \/ Organisation<\/label>\r\n <input type=\"text\" id=\"company\" placeholder=\"Acme Trading Ltd\" autocomplete=\"organization\">\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"plan\">Your Plan<\/label>\r\n <select id=\"plan\">\r\n <option value=\"\">Select plan\u2026<\/option>\r\n <option value=\"solopreneur\">Solopreneur (Free)<\/option>\r\n <option value=\"growth\">Growth<\/option>\r\n <option value=\"summit\">Summit<\/option>\r\n <option value=\"enterprise\">Enterprise<\/option>\r\n <option value=\"unsure\">Not sure<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Issue details -->\r\n <div class=\"form-section-label\">Issue Details<\/div>\r\n <div class=\"field\">\r\n <label for=\"subject\">Subject <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"subject\" placeholder=\"Brief description of the issue\">\r\n <div class=\"field-error\" id=\"err-subject\">Please enter a subject.<\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"description\">Full Description <span class=\"req\">*<\/span><\/label>\r\n <textarea id=\"description\" placeholder=\"Please describe the issue in as much detail as possible \u2014 what you were doing, what you expected to happen, and what actually happened. Include any error messages you received.\"><\/textarea>\r\n <div class=\"field-error\" id=\"err-description\">Please describe your issue.<\/div>\r\n <\/div>\r\n\r\n <!-- Feature area -->\r\n <div class=\"field\">\r\n <label for=\"feature-area\">Which feature area does this relate to?<\/label>\r\n <select id=\"feature-area\">\r\n <option value=\"\">Select area\u2026<\/option>\r\n <option value=\"invoicing\">Invoicing & Billing<\/option>\r\n <option value=\"expenses\">Expense Tracking<\/option>\r\n <option value=\"pl\">P&L Reporting<\/option>\r\n <option value=\"vat\">VAT \/ Tax Reporting<\/option>\r\n <option value=\"payments\">Payments & Payment Links<\/option>\r\n <option value=\"banking\">Bank Reconciliation \/ Open Banking<\/option>\r\n <option value=\"payroll\">Payroll<\/option>\r\n <option value=\"inventory\">Inventory Management<\/option>\r\n <option value=\"pos\">Point of Sale<\/option>\r\n <option value=\"integrations\">Integrations (Shopify, WooCommerce, etc.)<\/option>\r\n <option value=\"mobile\">Mobile App<\/option>\r\n <option value=\"account\">Account & Billing<\/option>\r\n <option value=\"other\">Other<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <!-- Attachments -->\r\n <div class=\"field\">\r\n <label>Attachments <span style=\"opacity:0.4;font-weight:400\">(optional)<\/span><\/label>\r\n <div class=\"file-drop\" id=\"file-drop\"\r\n ondragover=\"event.preventDefault();this.classList.add('drag')\"\r\n ondragleave=\"this.classList.remove('drag')\"\r\n ondrop=\"handleDrop(event)\">\r\n <input type=\"file\" id=\"file-input\" multiple accept=\"image\/*,.pdf,.csv,.xlsx,.txt\" onchange=\"handleFiles(this.files)\">\r\n <div class=\"file-drop-ico\">\ud83d\udcce<\/div>\r\n <p class=\"file-drop-text\"><strong>Click to attach<\/strong> or drag files here<br>PNG, JPG, PDF, CSV, XLSX \u2014 max 10 MB each<\/p>\r\n <\/div>\r\n <div class=\"file-list\" id=\"file-list\"><\/div>\r\n <\/div>\r\n\r\n <!-- Submit -->\r\n <div class=\"submit-area\">\r\n <button class=\"btn-green\" id=\"submit-btn\" type=\"button\" onclick=\"submitTicket()\">\r\n <span id=\"btn-text\">Submit Ticket<\/span>\r\n <\/button>\r\n <p class=\"submit-note\">By submitting you agree to our <a href=\"https:\/\/mutualafricapay.com\/privacy\" style=\"color:#2E9E44;text-decoration:underline;opacity:1\">Privacy Policy<\/a>. We'll never share your information with third parties.<\/p>\r\n <\/div>\r\n\r\n <!-- Error banner -->\r\n <div id=\"submit-error\" style=\"display:none;margin-top:16px;background:rgba(239,68,68,0.07);border:1px solid rgba(239,68,68,0.25);border-radius:8px;padding:14px 16px;font-size:0.84rem;color:#DC2626;line-height:1.55;\"><\/div>\r\n <\/div><!-- \/form-state -->\r\n\r\n <\/div><!-- \/ticket-box -->\r\n\r\n <!-- \u2500\u2500 SIDEBAR \u2500\u2500 -->\r\n <div class=\"sidebar\">\r\n\r\n <!-- System Status -->\r\n <div class=\"sidebar-card\">\r\n <h3>System Status<\/h3>\r\n <div style=\"display:flex;align-items:center;gap:10px;margin-bottom:10px\">\r\n <span class=\"status-badge green\"><span class=\"status-dot\"><\/span>All systems operational<\/span>\r\n <\/div>\r\n <p>Payments, banking, and all core features are running normally.<\/p>\r\n <a href=\"https:\/\/status.mutualafricapay.com\" style=\"font-size:0.78rem;color:#2E9E44;text-decoration:none\">View status page \u2192<\/a>\r\n <\/div>\r\n\r\n <!-- Response SLAs -->\r\n <div class=\"sidebar-card\">\r\n <h3>Response Times<\/h3>\r\n <table class=\"sla-table\">\r\n <tr>\r\n <td><span class=\"pri-badge\"><span class=\"pri-dot high\" style=\"width:6px;height:6px;border-radius:50%;background:#EF4444;display:inline-block\"><\/span> High \/ Urgent<\/span><\/td>\r\n <td class=\"sla-high\">Within 2 hrs<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><span class=\"pri-badge\"><span class=\"pri-dot medium\" style=\"width:6px;height:6px;border-radius:50%;background:#EAB308;display:inline-block\"><\/span> Medium<\/span><\/td>\r\n <td class=\"sla-med\">Within 8 hrs<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><span class=\"pri-badge\"><span class=\"pri-dot low\" style=\"width:6px;height:6px;border-radius:50%;background:#2E9E44;display:inline-block\"><\/span> Low<\/span><\/td>\r\n <td class=\"sla-low\">Within 24 hrs<\/td>\r\n <\/tr>\r\n <\/table>\r\n <p style=\"margin-top:10px;margin-bottom:0;font-size:0.75rem;opacity:0.45\">Business hours: Mon\u2013Fri 08:00\u201318:00 SAST<\/p>\r\n <\/div>\r\n\r\n <!-- Contact options -->\r\n <div class=\"sidebar-card\">\r\n <h3>Other Ways to Reach Us<\/h3>\r\n <a href=\"mailto:support@mutualafricapay.com\" class=\"contact-opt\">\r\n <div class=\"contact-ico-wrap\">\u2709\ufe0f<\/div>\r\n <div class=\"contact-opt-info\">\r\n <div class=\"contact-opt-label\">Email<\/div>\r\n <div class=\"contact-opt-val\">support@mutualafricapay.com<\/div>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/27872654009\" class=\"contact-opt\" target=\"_blank\" rel=\"noopener\">\r\n <div class=\"contact-ico-wrap\">\ud83d\udcac<\/div>\r\n <div class=\"contact-opt-info\">\r\n <div class=\"contact-opt-label\">WhatsApp<\/div>\r\n <div class=\"contact-opt-val\">+27 87 265 4009<\/div>\r\n <\/div>\r\n <\/a>\r\n <a href=\"tel:+27872654009\" class=\"contact-opt\">\r\n <div class=\"contact-ico-wrap\">\ud83d\udcde<\/div>\r\n <div class=\"contact-opt-info\">\r\n <div class=\"contact-opt-label\">Phone<\/div>\r\n <div class=\"contact-opt-val\">+27 87 265 4009<\/div>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Mini FAQ -->\r\n <div class=\"sidebar-card\">\r\n <h3>Common Questions<\/h3>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\" onclick=\"toggleFaq(this)\">\r\n How do I reset my password?\r\n <svg class=\"faq-chevron\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 4.5l5 5 5-5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-a\">Go to the login page and click \"Forgot password\". A reset link will be sent to your registered email address within a few minutes.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\" onclick=\"toggleFaq(this)\">\r\n How do I upgrade my plan?\r\n <svg class=\"faq-chevron\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 4.5l5 5 5-5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-a\">Go to Settings \u2192 Billing in your Mutual Africa Pay account. Select the plan you want to upgrade to and follow the payment steps. Changes take effect immediately.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\" onclick=\"toggleFaq(this)\">\r\n How do I connect my bank account?\r\n <svg class=\"faq-chevron\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 4.5l5 5 5-5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-a\">Go to Banking \u2192 Open Banking Connections and follow the steps to authorise your bank. The connection is secure and read-only \u2014 we never access your banking credentials directly.<\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <button class=\"faq-q\" aria-expanded=\"false\" onclick=\"toggleFaq(this)\">\r\n Can I cancel my subscription?\r\n <svg class=\"faq-chevron\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 4.5l5 5 5-5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-a\">Yes. Go to Settings \u2192 Billing \u2192 Cancel Subscription. Your account remains active until the end of the current billing period. Your data is retained for 90 days after cancellation.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/sidebar -->\r\n <\/div><!-- \/form-layout -->\r\n<\/section>\r\n\r\n<script>\r\n\/\/ \u2500\u2500\u2500 CONFIGURATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst SUPABASE_URL = 'https:\/\/oenvfyuaryptrtjamcjo.supabase.co';\r\nconst SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9lbnZmeXVhcnlwdHJ0amFtY2pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMwNTQ3MDcsImV4cCI6MjA4ODYzMDcwN30.dMNfvvU0jog5y-bkCgGbS9rYDgbxFddO2j4fXysppYY';\r\nconst SEND_EMAIL_FUNCTION = `${SUPABASE_URL}\/functions\/v1\/send-support-confirmation`;\r\n\r\n\/\/ \u2500\u2500\u2500 STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nlet attachedFiles = [];\r\n\r\n\/\/ \u2500\u2500\u2500 CATEGORY \/ PRIORITY SELECTORS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction selectCat(el) {\r\n document.querySelectorAll('.cat-tab').forEach(t => t.classList.remove('active'));\r\n el.classList.add('active');\r\n document.getElementById('selected-category').value = el.dataset.cat;\r\n}\r\n\r\nfunction selectPri(el) {\r\n document.querySelectorAll('.pri-btn').forEach(b => b.classList.remove('active'));\r\n el.classList.add('active');\r\n document.getElementById('selected-priority').value = el.dataset.pri;\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 FILE HANDLING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction handleFiles(files) {\r\n Array.from(files).forEach(f => {\r\n if (f.size > 10 * 1024 * 1024) { alert(`${f.name} exceeds 10 MB limit.`); return; }\r\n if (attachedFiles.find(x => x.name === f.name)) return;\r\n attachedFiles.push(f);\r\n });\r\n renderFileList();\r\n}\r\n\r\nfunction handleDrop(e) {\r\n e.preventDefault();\r\n document.getElementById('file-drop').classList.remove('drag');\r\n handleFiles(e.dataTransfer.files);\r\n}\r\n\r\nfunction renderFileList() {\r\n const list = document.getElementById('file-list');\r\n list.innerHTML = attachedFiles.map((f, i) => `\r\n <div class=\"file-item\">\r\n <span>\ud83d\udcc4 ${f.name} <span style=\"opacity:0.4\">(${(f.size\/1024).toFixed(0)} KB)<\/span><\/span>\r\n <button type=\"button\" onclick=\"removeFile(${i})\" title=\"Remove\">\u2715<\/button>\r\n <\/div>`).join('');\r\n}\r\n\r\nfunction removeFile(i) {\r\n attachedFiles.splice(i, 1);\r\n renderFileList();\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 VALIDATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction validate() {\r\n let ok = true;\r\n const rules = [\r\n { id: 'full-name', err: 'err-name', check: v => v.trim().length >= 2 },\r\n { id: 'email', err: 'err-email', check: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v.trim()) },\r\n { id: 'subject', err: 'err-subject', check: v => v.trim().length >= 3 },\r\n { id: 'description', err: 'err-description', check: v => v.trim().length >= 20 },\r\n ];\r\n rules.forEach(r => {\r\n const el = document.getElementById(r.id);\r\n const errEl = document.getElementById(r.err);\r\n if (!r.check(el.value)) {\r\n el.classList.add('error');\r\n errEl.classList.add('show');\r\n ok = false;\r\n } else {\r\n el.classList.remove('error');\r\n errEl.classList.remove('show');\r\n }\r\n });\r\n return ok;\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 TICKET REF GENERATOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction generateRef() {\r\n const ts = Date.now().toString(36).toUpperCase();\r\n const rand = Math.random().toString(36).substring(2, 5).toUpperCase();\r\n return `MAP-${ts}-${rand}`;\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 SUBMIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nasync function submitTicket() {\r\n document.getElementById('submit-error').style.display = 'none';\r\n if (!validate()) return;\r\n\r\n const btn = document.getElementById('submit-btn');\r\n btn.disabled = true;\r\n btn.innerHTML = '<div class=\"spinner\"><\/div><span>Submitting\u2026<\/span>';\r\n\r\n const ticketRef = generateRef();\r\n const now = new Date().toISOString();\r\n\r\n const payload = {\r\n ticket_ref: ticketRef,\r\n category: document.getElementById('selected-category').value,\r\n priority: document.getElementById('selected-priority').value,\r\n full_name: document.getElementById('full-name').value.trim(),\r\n email: document.getElementById('email').value.trim().toLowerCase(),\r\n company: document.getElementById('company').value.trim() || null,\r\n plan: document.getElementById('plan').value || null,\r\n subject: document.getElementById('subject').value.trim(),\r\n description: document.getElementById('description').value.trim(),\r\n feature_area: document.getElementById('feature-area').value || null,\r\n attachment_count: attachedFiles.length,\r\n status: 'open',\r\n created_at: now,\r\n };\r\n\r\n try {\r\n \/\/ 1. Save to Supabase\r\n const res = await fetch(`${SUPABASE_URL}\/rest\/v1\/support_tickets`, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'apikey': SUPABASE_ANON_KEY,\r\n 'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,\r\n 'Prefer': 'return=minimal',\r\n },\r\n body: JSON.stringify(payload),\r\n });\r\n\r\n if (!res.ok) {\r\n const errText = await res.text();\r\n throw new Error(`Database error: ${res.status} \u2014 ${errText}`);\r\n }\r\n\r\n \/\/ 2. Send confirmation email via Edge Function\r\n try {\r\n await fetch(SEND_EMAIL_FUNCTION, {\r\n method: 'POST',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,\r\n },\r\n body: JSON.stringify({\r\n to: payload.email,\r\n name: payload.full_name,\r\n ticket_ref: ticketRef,\r\n subject: payload.subject,\r\n category: payload.category,\r\n priority: payload.priority,\r\n }),\r\n });\r\n } catch (emailErr) {\r\n \/\/ Email failure non-blocking \u2014 ticket is saved\r\n console.warn('Email send failed (non-blocking):', emailErr);\r\n }\r\n\r\n \/\/ 3. Show success\r\n document.getElementById('ticket-ref-text').textContent = `Ticket ${ticketRef}`;\r\n document.getElementById('form-state').style.display = 'none';\r\n document.getElementById('success-state').style.display = 'block';\r\n window.scrollTo({ top: document.getElementById('s-form').offsetTop - 32, behavior: 'smooth' });\r\n\r\n } catch (err) {\r\n const errBanner = document.getElementById('submit-error');\r\n errBanner.style.display = 'block';\r\n errBanner.textContent = `Something went wrong: ${err.message}. Please try again or email us directly at support@mutualafricapay.com`;\r\n btn.disabled = false;\r\n btn.innerHTML = '<span id=\"btn-text\">Submit Ticket<\/span>';\r\n }\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 RESET \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction resetForm() {\r\n document.getElementById('success-state').style.display = 'none';\r\n document.getElementById('form-state').style.display = 'block';\r\n ['full-name','email','company','subject','description'].forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el) el.value = '';\r\n });\r\n document.getElementById('plan').value = '';\r\n document.getElementById('feature-area').value = '';\r\n attachedFiles = [];\r\n renderFileList();\r\n \/\/ Reset tabs\r\n document.querySelectorAll('.cat-tab').forEach((t,i) => t.classList.toggle('active', i===0));\r\n document.getElementById('selected-category').value = 'billing';\r\n document.querySelectorAll('.pri-btn').forEach((b,i) => b.classList.toggle('active', i===0));\r\n document.getElementById('selected-priority').value = 'low';\r\n document.getElementById('submit-btn').disabled = false;\r\n document.getElementById('submit-btn').innerHTML = '<span id=\"btn-text\">Submit Ticket<\/span>';\r\n document.getElementById('submit-error').style.display = 'none';\r\n window.scrollTo({ top: document.getElementById('s-form').offsetTop - 32, behavior: 'smooth' });\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 FAQ ACCORDION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction toggleFaq(btn) {\r\n const answer = btn.nextElementSibling;\r\n const expanded = btn.getAttribute('aria-expanded') === 'true';\r\n btn.setAttribute('aria-expanded', !expanded);\r\n answer.classList.toggle('open', !expanded);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 LIVE VALIDATION (on blur) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n['full-name','email','subject','description'].forEach(id => {\r\n document.getElementById(id)?.addEventListener('blur', () => {\r\n validate();\r\n });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Support \u2014 Mutual Africa Pay Support Centre How can we help you today? Submit a support ticket and our team will get back to you. Average first response within 4 business hours for standard priority requests. \ud83d\udcd6 Help Centre Browse all guides, how-to articles, and troubleshooting across every Mutual Africa Pay feature. \ud83d\ude80 Getting Started Set up your account, invite your team, and connect your bank. \ud83d\udcb3 Account & Billing Plan changes, subscription invoices, payment methods, and cancellation. \u2699\ufe0f Business Operations Clients, suppliers, inventory, purchase orders, quotes, projects, and point of sale. \u2705 Ticket submitted successfully We’ve received your request and sent a confirmation to your email address. Our team will be in touch shortly. Ticket #MAP-00000 Submit another ticket Submit a support ticket Fill in the details below and we’ll get back to you as quickly as possible. Category \ud83d\udcb3Billing & Payments \u2699\ufe0fTechnical \ud83d\udc64Account \ud83d\udcacGeneral Priority Low Medium High \/ Urgent High priority is for issues impacting active business operations. Your Details Full Name * Please enter your full name. Email Address * Please enter a valid email address. Company \/ Organisation Your Plan Select plan\u2026Solopreneur (Free)GrowthSummitEnterpriseNot sure Issue Details Subject * Please enter a subject. Full Description * Please describe your issue. Which feature area does this relate to? Select area\u2026Invoicing & BillingExpense TrackingP&L ReportingVAT \/ Tax ReportingPayments & Payment LinksBank Reconciliation \/ Open BankingPayrollInventory ManagementPoint of SaleIntegrations (Shopify, WooCommerce, etc.)Mobile AppAccount & BillingOther Attachments (optional) \ud83d\udcce Click to attach or drag files herePNG, JPG, PDF, CSV, XLSX \u2014 max 10 MB each Submit Ticket By submitting you agree to our Privacy Policy. We’ll never share your information with third parties. System Status All systems operational Payments, banking, and all core features are running normally. View status page \u2192 Response Times High \/ Urgent Within 2 hrs Medium Within 8 hrs Low Within 24 hrs Business hours: Mon\u2013Fri 08:00\u201318:00 SAST Other Ways to Reach Us \u2709\ufe0f Email support@mutualafricapay.com \ud83d\udcac WhatsApp +27 87 265 4009 \ud83d\udcde Phone +27 87 265 4009 Common Questions How do I reset my password? Go to the login page and click “Forgot password”. A reset link will be sent to your registered email address within a few minutes. How do I upgrade my plan? Go to Settings \u2192 Billing in your Mutual Africa Pay account. Select the plan you want to upgrade to and follow the payment steps. Changes take effect immediately. How do I connect my bank account? Go to Banking \u2192 Open Banking Connections and follow the steps to authorise your bank. The connection is secure and read-only \u2014 we never access your banking credentials directly. Can I cancel my subscription? Yes. Go to Settings \u2192 Billing \u2192 Cancel Subscription. Your account remains active until the end of the current billing period. Your data is retained for 90 days after cancellation.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-820","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/pages\/820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/comments?post=820"}],"version-history":[{"count":7,"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/pages\/820\/revisions"}],"predecessor-version":[{"id":831,"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/pages\/820\/revisions\/831"}],"wp:attachment":[{"href":"https:\/\/mutualafricapay.com\/zw\/wp-json\/wp\/v2\/media?parent=820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}