{"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:06:24","modified_gmt":"2026-05-31T06:06:24","slug":"support","status":"publish","type":"page","link":"https:\/\/mutualafricapay.com\/mg\/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 \/* \u2500\u2500 RESET & BASE \u2500\u2500 *\/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: ‘Space Grotesk’, sans-serif; background: #F4F6FA; color: #0D1B3E; -webkit-font-smoothing: antialiased; min-height: 100vh; } \/* \u2500\u2500 LAYOUT \u2500\u2500 *\/ .sec { padding: clamp(64px,10vw,112px) clamp(20px,6%,80px); position: relative; overflow: hidden; } .bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .bg-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(13,27,62,0.06) 1px, transparent 1px); background-size: 30px 30px; } .bg-glow { position: absolute; border-radius: 50%; } \/* \u2500\u2500 TYPE \u2500\u2500 *\/ .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; } .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; } .etxt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #2E9E44; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @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)} } @keyframes spin { to { transform: rotate(360deg); } } \/* \u2500\u2500 BUTTONS \u2500\u2500 *\/ .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%; } @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);}} .btn-green:active:not(:disabled){transform:scale(0.97)!important;} .btn-green:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; } \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/ #s-hero { background: #FFFFFF; padding-bottom: 0; min-height: auto; padding-top: clamp(72px,10vw,120px); } .hero-inner { position: relative; z-index: 2; max-width: 700px; animation: fadeUp 0.55s cubic-bezier(0.23,1,0.32,1) both; } .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; } .hero-inner h1 span { color: #2E9E44; } .hero-inner p { font-size: 1rem; color: #0D1B3E; line-height: 1.74; max-width: 560px; opacity: 0.7; } \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 QUICK HELP CARDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/ #s-quick { background: #F4F6FA; padding-top: clamp(40px,6vw,64px); padding-bottom: clamp(48px,7vw,80px); } .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; } .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; } @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)}} .quick-card:active{transform:scale(0.97)!important} .quick-ico { font-size: 1.5rem; margin-bottom: 12px; } .quick-title { font-size: 0.92rem; font-weight: 600; color: #0D1B3E; margin-bottom: 6px; } .quick-desc { font-size: 0.8rem; color: #0D1B3E; opacity: 0.6; line-height: 1.55; } \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 MAIN LAYOUT \u2014 FORM + SIDEBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/ #s-form { background: #F4F6FA; } .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; } \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 TICKET FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/ .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; } .ticket-box h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #0D1B3E; margin-bottom: 6px; } .ticket-box > p { font-size: 0.875rem; color: #0D1B3E; opacity: 0.6; margin-bottom: 28px; line-height: 1.6; } \/* Category tabs *\/ .category-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 28px; } .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; } .cat-tab:hover { opacity: 1; border-color: rgba(46,158,68,0.4); background: rgba(46,158,68,0.05); } .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; } .cat-tab .cat-ico { font-size: 1.1rem; display: block; margin-bottom: 5px; } \/* Priority selector *\/ .priority-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 4px; } .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; } .pri-btn:hover { opacity: 1; border-color: rgba(13,27,62,0.25); } .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; } .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; } .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; } .pri-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .pri-dot.low { background: #2E9E44; } .pri-dot.medium { background: #EAB308; } .pri-dot.high { background: #EF4444; } \/* Form fields *\/ .field { margin-bottom: 20px; } .field label { display: block; font-size: 0.8rem; font-weight: 600; color: #0D1B3E; opacity: 0.75; margin-bottom: 8px; letter-spacing: 0.01em; } .field label span.req { color: #2E9E44; margin-left: 2px; } .field input, .field select, .field textarea { width: 100%; background: #F4F6FA; border: 1px solid rgba(13,27,62,0.15); border-radius: 8px; padding: 12px 14px; font-family: inherit; font-size: 0.88rem; color: #0D1B3E; outline: none; transition: border-color 150ms, background 150ms; appearance: none; -webkit-appearance: none; } .field input::placeholder, .field textarea::placeholder { color: rgba(13,27,62,0.35); } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(46,158,68,0.55); background: rgba(46,158,68,0.03); } .field input.error, .field select.error, .field textarea.error { border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.03); } .field textarea { resize: vertical; min-height: 120px; line-height: 1.6; } .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; } .field select option { background: #FFFFFF; color: #0D1B3E; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field-hint { font-size: 0.75rem; color: #0D1B3E; opacity: 0.45; margin-top: 6px; } .field-error { font-size: 0.75rem; color: #EF4444; margin-top: 6px; display: none; } .field-error.show { display: block; } \/* Section labels inside form *\/ .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; } .form-section-label:first-child { margin-top: 0; } \/* File upload *\/ .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; } .file-drop:hover, .file-drop.drag { border-color: rgba(46,158,68,0.4); background: rgba(46,158,68,0.04); } .file-drop input[type=”file”] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .file-drop-ico { font-size: 1.4rem; margin-bottom: 8px; } .file-drop-text { font-size: 0.82rem; color: #0D1B3E; opacity: 0.55; } .file-drop-text strong { color: #2E9E44; opacity: 1; } .file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .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; } .file-item button { background: none; border: none; color:<\/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\/mg\/wp-json\/wp\/v2\/pages\/820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mutualafricapay.com\/mg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mutualafricapay.com\/mg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mutualafricapay.com\/mg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mutualafricapay.com\/mg\/wp-json\/wp\/v2\/comments?post=820"}],"version-history":[{"count":0,"href":"https:\/\/mutualafricapay.com\/mg\/wp-json\/wp\/v2\/pages\/820\/revisions"}],"wp:attachment":[{"href":"https:\/\/mutualafricapay.com\/mg\/wp-json\/wp\/v2\/media?parent=820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}