{"id":1582,"date":"2026-01-25T17:09:48","date_gmt":"2026-01-25T15:09:48","guid":{"rendered":"https:\/\/captainm3ta.com\/?page_id=1582"},"modified":"2026-04-22T08:43:15","modified_gmt":"2026-04-22T06:43:15","slug":"quiz","status":"publish","type":"page","link":"https:\/\/captainm3ta.com\/ar\/quiz\/","title":{"rendered":"Quiz"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1582\" class=\"elementor elementor-1582\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94870ff e-flex e-con-boxed e-con e-parent\" data-id=\"94870ff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c18d30 elementor-widget elementor-widget-html\" data-id=\"4c18d30\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================\r\n   \ud83c\udfc6 CAPTAIN M3TA \"PROTOCOL V31\" (SECURE & OPTIMIZED)\r\n   ========================================= *\/\r\n:root { --gold-primary:#F59E0B; --gold-text:#dba64f; --brand-gold-gradient:linear-gradient(90deg,#dba64f 0%,#e9c582 50%,#c18931 100%); --text-color:#000000; --error-red:#ff4d4d; --transition:all 0.3s cubic-bezier(0.25,1,0.5,1); }\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Kufi+Arabic:wght@400;500;700&family=Poppins:wght@300;400;500;700&family=Roboto:wght@400;500&display=swap');\r\nbody { background:#000; background-image:radial-gradient(circle at center,#1a1a1a 0%,#000000 80%); background-size:cover; background-position:center; background-attachment:fixed; min-height:100vh; margin:0; overflow-x:hidden; }\r\n\r\n\/* LAYOUT & CONTAINER *\/\r\n#protocol-app { max-width:580px; margin:10vh auto 5vh auto; font-family:'Poppins',Helvetica,Arial,sans-serif; background:rgba(15,15,15,0.6); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:25px 35px 20px 35px; box-shadow:0 40px 80px rgba(0,0,0,0.9); color:white; position:relative; overflow:hidden; min-height:620px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; }\r\n\r\n\/* OVERLAYS *\/\r\n#welcome-back-overlay { display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(10,10,10,0.98); z-index:9999; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; box-sizing:border-box; }\r\n.wb-title { color:var(--gold-text); font-size:24px; font-weight:700; margin-bottom:10px; }\r\n.wb-text { color:#ccc; font-size:14px; margin-bottom:30px; line-height:1.6; }\r\n.wb-btn { background:var(--gold-primary); color:#000; border:none; padding:15px 30px; border-radius:30px; font-weight:700; cursor:pointer; font-size:16px; text-transform:uppercase; margin-bottom:20px; transition:transform 0.2s; will-change: transform; }\r\n.wb-btn:hover { transform:scale(1.05); }\r\n.wb-reset { color:#666; font-size:12px; cursor:pointer; text-decoration:underline; }\r\n\r\n\/* COACH HEADER *\/\r\n#protocol-app .coach-profile { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.05); opacity:0.98; min-height:50px; overflow:visible; }\r\n#protocol-app .coach-avatar { flex:0 0 52px !important; width:52px !important; height:40px !important; max-width:52px !important; max-height:40px !important; min-width:0 !important; min-height:0 !important; border-radius:0 !important; object-fit:contain !important; border:0 !important; box-shadow:none !important; filter:drop-shadow(0 0 8px rgba(245,158,11,0.24)); }\r\n#protocol-app .coach-info { display:flex; flex-direction:column; justify-content:center; text-align:left; min-width:0; position:relative; z-index:2; }\r\n#protocol-app .quiz-brand-title { display:block !important; position:relative; z-index:2; font-size:21px; font-weight:800; line-height:1; letter-spacing:0.2px; color:#e9c582; background:var(--brand-gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }\r\n\r\n\/* PROGRESS BAR *\/\r\n.protocol-track { width:100%; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; margin-bottom:25px; }\r\n.protocol-fill { height:100%; width:25%; background:linear-gradient(to right,#c17920,#d39029); border-radius:3px; box-shadow:0 0 10px rgba(193,121,32,0.5); transition:width 0.5s ease; will-change: width; }\r\n\r\n\/* STEPS HEADER *\/\r\n.protocol-header { text-align:center; margin-bottom:30px; }\r\n.protocol-badge { color:var(--gold-text); font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin-bottom:5px; display:block; opacity:0.8; }\r\n.protocol-title { font-size:26px; font-weight:800; margin:0; background:var(--brand-gold-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-bottom:5px; line-height:1.2; }\r\n\r\n\/* CARDS & GRIDS *\/\r\n.p-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; width:100%; }\r\n.p-grid-1 { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:20px; width:100%; }\r\n.p-card { background:linear-gradient(145deg,rgba(26,26,26,0.9),rgba(13,13,13,0.95)); border:1px solid #333; border-radius:12px; padding:20px; text-align:center; cursor:pointer; transition:var(--transition); display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; box-sizing:border-box; will-change: transform, border-color; }\r\n.p-card:hover { transform:translateY(-3px); border-color:#555; }\r\n.p-card.active-card { border-color:var(--gold-text); box-shadow:0 0 20px rgba(223,170,81,0.15); background:#111; }\r\n.p-card img:not(.p-model-img) { width:60px; height:60px; object-fit:contain; margin-bottom:15px; filter:grayscale(100%); transition:var(--transition); }\r\n.p-card.active-card img:not(.p-model-img) { filter:grayscale(0%) drop-shadow(0 0 5px var(--gold-text)); transform:scale(1.05); }\r\n.p-card span { display:block; font-size:15px; font-weight:500; color:#b0b0b0; transition:color 0.3s ease; }\r\n.p-card.active-card span { color:var(--gold-text); font-weight:bold; }\r\n.big-icon { width:100px !important; height:100px !important; margin-bottom:15px !important; }\r\n#protocol-app #grid-step-1 { gap:16px; align-items:stretch; margin-bottom:24px; overflow:visible; }\r\n#protocol-app .p-card--model { min-height:260px; padding:18px 12px 18px; justify-content:flex-end; position:relative; overflow:visible; isolation:isolate; border-radius:14px; }\r\n#protocol-app .p-card--model::before { content:\"\"; position:absolute; inset:0; border-radius:14px; background:radial-gradient(circle at 50% 28%,rgba(219,166,79,0.13),transparent 62%); opacity:0; transition:var(--transition); z-index:0; pointer-events:none; }\r\n#protocol-app .p-card--model:hover::before, #protocol-app .p-card--model.active-card::before { opacity:1; }\r\n#protocol-app .p-model-stage { width:100%; height:196px; display:grid; place-items:end center; margin-bottom:12px; position:relative; z-index:1; overflow:visible; }\r\n#protocol-app .p-model-stage::before { content:\"\"; position:absolute; left:-8%; right:-8%; bottom:8px; height:86%; border-radius:999px; background:radial-gradient(ellipse at center,rgba(233,197,130,0.32) 0%,rgba(193,121,32,0.18) 34%,rgba(193,121,32,0.06) 55%,transparent 76%); filter:blur(18px); opacity:0; transform:scale(0.82); transition:var(--transition); pointer-events:none; }\r\n#protocol-app .p-model-stage::after { content:\"\"; position:absolute; left:14%; right:14%; bottom:-1px; height:18px; border-radius:999px; background:radial-gradient(ellipse at center,rgba(0,0,0,0.78),transparent 72%); filter:blur(5px); pointer-events:none; }\r\n#protocol-app .p-model-img { position:relative; z-index:1; width:auto !important; height:178px !important; max-width:120% !important; object-fit:contain !important; margin:0 !important; filter:grayscale(100%) drop-shadow(0 16px 18px rgba(0,0,0,0.72)); transform:translateY(16px) scale(1.12); transform-origin:bottom center; transition:var(--transition); }\r\n#protocol-app .p-card--model:hover .p-model-stage::before, #protocol-app .p-card--model.active-card .p-model-stage::before { opacity:1; transform:scale(1); }\r\n#protocol-app .p-card--model:hover .p-model-img, #protocol-app .p-card--model.active-card .p-model-img { filter:grayscale(0%) drop-shadow(0 16px 20px rgba(0,0,0,0.74)); transform:translateY(10px) scale(1.2); }\r\n.p-model-label { position:relative; z-index:1; font-size:16px !important; font-weight:700 !important; }\r\n.p-model-fallback { width:86px; height:86px; border-radius:999px; display:grid !important; place-items:center; background:rgba(219,166,79,0.12); border:1px solid rgba(219,166,79,0.4); color:var(--gold-text) !important; font-size:34px !important; font-weight:800 !important; }\r\n\r\n\/* INPUTS & LABELS *\/\r\n.p-label { display:block; color:#b0b0b0; font-size:12px; font-weight:600; letter-spacing:1px; margin-bottom:8px; text-transform:uppercase; margin-top:25px; }\r\n.p-input { width:100%; background:#0f0f0f; border:1px solid #333; padding:18px; border-radius:8px; color:#e0e0e0; font-size:16px; font-family:'Poppins',sans-serif; outline:none; box-sizing:border-box; transition:var(--transition); }\r\n.p-input:focus { border-color:var(--gold-text); box-shadow:0 0 15px rgba(233,197,130,0.1); background:#151515; }\r\n.p-error-msg { color:var(--error-red); font-size:12px; margin-top:5px; display:none; font-weight:500; }\r\n.input-error { border-color:var(--error-red) !important; }\r\n\r\n\/* NAVIGATION BUTTONS *\/\r\n.p-btn-next { width:100%; padding:20px; margin-top:25px; background-image:linear-gradient(to right,#c17920,#d39029); color:#000; font-weight:700; border-radius:8px; border:none; cursor:pointer; font-size:18px; text-transform:uppercase; font-family:'Poppins',sans-serif; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:10px; animation:goldPulse 3s infinite ease-in-out; will-change: transform, box-shadow; }\r\n.p-btn-next:hover { background-image:linear-gradient(to right,#dfaa51,#e9c481); transform:scale(1.05); }\r\n.p-btn-back { width:100%; background:transparent !important; color:#666 !important; border:none !important; padding:15px; cursor:pointer; font-size:14px; margin-top:10px; font-family:'Poppins',sans-serif; transition:color 0.3s ease; }\r\n.p-btn-back:hover { color:var(--gold-text) !important; background:transparent !important; }\r\n.contact-note { background:rgba(223,170,81,0.1); border-left:3px solid var(--gold-text); padding:10px 15px; margin-top:10px; border-radius:4px; color:#e0e0e0; font-size:12px; line-height:1.5; display:flex; align-items:center; gap:10px; }\r\n\r\n\/* RESPONSIVE & ANIMATION *\/\r\n@media (max-width: 480px) {\r\n    #protocol-app { padding:20px 15px 15px 15px !important; min-height:auto !important; margin:8vh auto 5vh auto !important; }\r\n    #protocol-app .coach-profile { margin-bottom:16px; min-height:46px; gap:8px; }\r\n    #protocol-app .coach-avatar { flex-basis:46px !important; width:46px !important; height:35px !important; max-width:46px !important; max-height:35px !important; }\r\n    #protocol-app .quiz-brand-title { font-size:19px; }\r\n    .p-card { padding:15px 5px !important; }\r\n    .p-grid-2 { gap:10px !important; }\r\n    #protocol-app #grid-step-1 { gap:12px !important; }\r\n    #protocol-app .p-card--model { min-height:220px; padding:14px 8px 15px !important; }\r\n    #protocol-app .p-model-stage { height:164px; margin-bottom:10px; }\r\n    #protocol-app .p-model-img { height:150px !important; max-width:124% !important; transform:translateY(13px) scale(1.1); }\r\n    #protocol-app .p-card--model:hover .p-model-img, #protocol-app .p-card--model.active-card .p-model-img { transform:translateY(8px) scale(1.16); }\r\n    #protocol-app .p-model-label { font-size:15px !important; }\r\n    .big-icon { width:70px !important; height:70px !important; }\r\n}\r\n.p-hidden { display:none; }\r\n.p-fade-in { animation:pFadeIn 0.5s ease forwards; }\r\n@keyframes pFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }\r\n@keyframes goldPulse { 0% { box-shadow:0 0 0 0 rgba(223,170,81,0.4); } 50% { box-shadow:0 0 20px 10px rgba(223,170,81,0.2); } 100% { box-shadow:0 0 0 0 rgba(223,170,81,0.4); } }\r\n<\/style>\r\n\r\n<div id=\"protocol-app\">\r\n    <div id=\"welcome-back-overlay\">\r\n        <h2 class=\"wb-title\">Welcome Back!<\/h2>\r\n        <p class=\"wb-text\">Your plan is saved.<\/p>\r\n        <button class=\"wb-btn\" id=\"wb-go-btn\">\ud83d\ude80 Go to Checkout<\/button>\r\n        <span class=\"wb-reset\" onclick=\"resetQuiz()\">Restart Quiz<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"coach-profile\">\r\n        <img decoding=\"async\" id=\"coach-img\" src=\"\" class=\"coach-avatar\" alt=\"Ascension\" width=\"52\" height=\"40\" style=\"width:52px!important;height:40px!important;max-width:52px!important;max-height:40px!important;object-fit:contain!important;flex:0 0 52px!important;\">\r\n        <div class=\"coach-info\">\r\n            <span class=\"quiz-brand-title\" id=\"quiz-brand-title\">Ascension<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div style=\"flex-grow: 1;\">\r\n        <div class=\"protocol-track\"><div class=\"protocol-fill\" id=\"p-progress\"><\/div><\/div>\r\n\r\n        <div id=\"p-step-1\" class=\"p-fade-in\">\r\n            <div class=\"protocol-header\"><span class=\"protocol-badge\">Step 1 of 4<\/span><h2 class=\"protocol-title\" id=\"t1\">...<\/h2><\/div>\r\n            <div class=\"p-grid-2\" id=\"grid-step-1\"><\/div>\r\n            <div class=\"p-label\" id=\"l-age\">Age<\/div>\r\n            <input type=\"number\" id=\"p-age\" class=\"p-input\" placeholder=\"e.g. 25\" oninput=\"clearError('age'); saveInput('age', this.value)\">\r\n            <div class=\"p-error-msg\" id=\"err-age\">Enter valid age<\/div>\r\n            <div class=\"p-error-msg\" id=\"err-gender\">Select gender<\/div>\r\n            <button class=\"p-btn-next\" onclick=\"runProtocolStep(2)\">Next Step \u2794<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"p-step-2\" class=\"p-hidden\">\r\n            <div class=\"protocol-header\"><span class=\"protocol-badge\">Step 2 of 4<\/span><h2 class=\"protocol-title\" id=\"t2\">...<\/h2><\/div>\r\n            <div class=\"p-grid-1\" id=\"grid-step-2\" style=\"grid-template-columns: 1fr 1fr; gap:10px;\"><\/div>\r\n            <div class=\"p-error-msg\" id=\"err-goal\" style=\"text-align:center;\">Select a goal<\/div>\r\n            <button class=\"p-btn-next\" onclick=\"runProtocolStep(3)\">Next Step \u2794<\/button>\r\n            <button class=\"p-btn-back\" onclick=\"runProtocolStep(1)\">Back<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"p-step-3\" class=\"p-hidden\">\r\n            <div class=\"protocol-header\"><span class=\"protocol-badge\">Step 3 of 4<\/span><h2 class=\"protocol-title\" id=\"t3\">...<\/h2><\/div>\r\n            <div class=\"p-label\" id=\"l-struggle\">...<\/div>\r\n            <div class=\"p-grid-1\" id=\"grid-step-3\"><\/div>\r\n            <div class=\"p-error-msg\" id=\"err-struggle\" style=\"text-align:center;\">Select at least one obstacle<\/div>\r\n            \r\n            \r\n            <button class=\"p-btn-next\" onclick=\"runProtocolStep(4)\">Next Step \u2794<\/button>\r\n            <button class=\"p-btn-back\" onclick=\"runProtocolStep(2)\">Back<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"p-step-4\" class=\"p-hidden\">\r\n            <div class=\"protocol-header\"><span class=\"protocol-badge\">Step 4 of 4<\/span><h2 class=\"protocol-title\" id=\"t4\">...<\/h2><\/div>\r\n            <div class=\"p-label\">Name<\/div>\r\n            <input type=\"text\" id=\"p-name\" class=\"p-input\" placeholder=\"Your Name\" oninput=\"clearError('name'); saveInput('name', this.value)\">\r\n            <div class=\"p-error-msg\" id=\"err-name\">Enter name<\/div>\r\n            \r\n            <div class=\"p-label\">WhatsApp<\/div>\r\n            <input type=\"tel\" id=\"p-phone\" class=\"p-input\" placeholder=\"01xxxxxxxxx\" oninput=\"clearError('phone'); saveInput('phone', this.value)\">\r\n            <div class=\"p-error-msg\" id=\"err-phone\">Invalid number<\/div>\r\n            \r\n            <div class=\"contact-note\"><span class=\"contact-icon\">\ud83d\udcde<\/span><span>We will contact you on this number.<\/span><\/div>\r\n            <button class=\"p-btn-next\" onclick=\"sendProtocolData()\" id=\"btn-submit\">Submit & Checkout<\/button>\r\n            <button class=\"p-btn-back\" onclick=\"runProtocolStep(3)\">Back<\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <\/div>\r\n\r\n<script>\r\nconst CM = (typeof window.CM_MASTER !== 'undefined') ? window.CM_MASTER : {}; \r\nconst REDIRECT_URL = CM.media ? CM.media.redirect_url_after_quiz : \"\/checkout\/\";\r\nlet protocolData = { gender: \"\", age: \"\", goal: \"\", struggle: \"\", name: \"\", phone: \"\" };\r\n\r\n\/**\r\n * \ud83d\udd12 SECURITY: Anti-XSS Helper\r\n * Escapes potentially unsafe characters when rendering HTML from JSON\/Variables.\r\n *\/\r\nfunction escapeHTML(str) {\r\n    if (!str) return \"\";\r\n    return str.replace(\/[&<>\"']\/g, function(m) {\r\n        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#039;' }[m];\r\n    });\r\n}\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    if (!CM.quiz) { console.error(\"Config missing\"); return; }\r\n\r\n    \/\/ Load brand masthead (Safe Text Injection)\r\n    const media = CM.media || {};\r\n    const quizTitle = (CM.quiz.title || media.coach_title || 'Ascension').trim();\r\n    const brandLogo = media.site_logo_url || media.coach_avatar || '';\r\n    const brandLogoEl = document.getElementById('coach-img');\r\n    brandLogoEl.src = brandLogo;\r\n    brandLogoEl.style.display = brandLogo ? 'block' : 'none';\r\n    document.getElementById('quiz-brand-title').innerText = quizTitle || 'Ascension';\r\n    document.getElementById('wb-go-btn').onclick = function() { window.location.href = REDIRECT_URL; };\r\n\r\n    \/\/ Step 1: Gender\r\n    document.getElementById('t1').innerText = CM.quiz.step1.title;\r\n    document.getElementById('l-age').innerText = CM.quiz.step1.input_label;\r\n    let s1 = '';\r\n    CM.quiz.step1.cards.forEach(c => {\r\n        \/\/ SECURITY: escape user-controlled text\/URLs before injecting card markup.\r\n        const safeText = escapeHTML(c.text);\r\n        const safeId = escapeHTML(c.id);\r\n        const safeVal = escapeHTML(c.val);\r\n        const safeImg = escapeHTML(c.img);\r\n        const modelMedia = safeImg\r\n            ? `<img decoding=\"async\" src=\"${safeImg}\" class=\"p-model-img\" alt=\"${safeText} model\">`\r\n            : `<span class=\"p-model-fallback\">${safeText.charAt(0)}<\/span>`;\r\n        s1 += `<div class=\"p-card p-card--model\" id=\"card-${safeId}\" onclick=\"setChoice('gender', '${safeVal}', this)\">\r\n               <span class=\"p-model-stage\">${modelMedia}<\/span><span class=\"p-model-label\">${safeText}<\/span><\/div>`;\r\n    });\r\n    document.getElementById('grid-step-1').innerHTML = s1;\r\n\r\n    \/\/ Step 2: Goals\r\n    document.getElementById('t2').innerText = CM.quiz.step2.title;\r\n    let s2 = '';\r\n    const goalContainer = document.getElementById('grid-step-2');\r\n    if(CM.quiz.step2.cards.length > 2) {\r\n        goalContainer.style.gridTemplateColumns = \"1fr 1fr 1fr\";\r\n    }\r\n\r\n    CM.quiz.step2.cards.forEach(c => {\r\n        let imgStyle = (CM.quiz.step2.cards.length > 2) ? \"width:40px; margin-bottom:10px;\" : \"width:50px; margin-bottom:10px;\";\r\n        let cardStyle = (CM.quiz.step2.cards.length > 2) ? \"padding:10px; font-size:13px;\" : \"padding:20px;\";\r\n        \/\/ SECURITY: used escapeHTML on c.text\r\n        s2 += `<div class=\"p-card\" id=\"card-${c.id}\" style=\"${cardStyle}\" onclick=\"setChoice('goal', '${c.val}', this)\">\r\n               <img decoding=\"async\" src=\"${c.img}\" style=\"${imgStyle}\" alt=\"icon\"><span>${escapeHTML(c.text)}<\/span><\/div>`;\r\n    });\r\n    goalContainer.innerHTML = s2;\r\n\r\n    \/\/ Step 3: Struggles\r\n    document.getElementById('t3').innerText = CM.quiz.step3.title;\r\n    document.getElementById('l-struggle').innerText = CM.quiz.step3.subtitle_1;\r\n    let s3 = '';\r\n    CM.quiz.step3.cards.forEach(c => {\r\n        \/\/ SECURITY: used escapeHTML on c.text\r\n        s3 += `<div class=\"p-card\" id=\"card-${c.id}\" style=\"padding:15px;\" onclick=\"setChoice('struggle', '${c.val}', this)\">\r\n               <span>${escapeHTML(c.text)}<\/span><\/div>`;\r\n    });\r\n    document.getElementById('grid-step-3').innerHTML = s3;\r\n\r\n    \/\/ Step 4\r\n    document.getElementById('t4').innerText = CM.quiz.step4.title;\r\n    document.getElementById('btn-submit').innerText = CM.quiz.step4.btn_text;\r\n\r\n    if (localStorage.getItem('m3ta_quiz_completed') === 'true') {\r\n        document.getElementById('welcome-back-overlay').style.display = 'flex';\r\n    } else {\r\n        loadProgress();\r\n    }\r\n    \/\/ Language Setup Removed\r\n});\r\n\r\nfunction resetQuiz() {\r\n    localStorage.removeItem('m3ta_quiz_completed');\r\n    document.getElementById('welcome-back-overlay').style.display = 'none';\r\n    loadProgress();\r\n}\r\n\r\ndocument.getElementById('p-phone').addEventListener('input', function (e) {\r\n    this.value = this.value.replace(\/[^0-9+]\/g, '');\r\n    saveInput('phone', this.value);\r\n});\r\n\r\nfunction showError(id, msg) {\r\n    let el = document.getElementById('err-' + id); if(el) { el.innerText = msg; el.style.display = 'block'; }\r\n    let inp = document.getElementById('p-' + id); if(inp) { inp.classList.add('input-error'); setTimeout(() => inp.classList.remove('input-error'), 500); }\r\n}\r\nfunction clearError(id) {\r\n    let el = document.getElementById('err-' + id); if(el) el.style.display = 'none';\r\n    let inp = document.getElementById('p-' + id); if(inp) inp.classList.remove('input-error');\r\n}\r\n\r\nfunction saveInput(k, v) { protocolData[k] = v; localStorage.setItem('m3ta_' + k, v); }\r\nfunction setChoice(k, v, el) {\r\n    if (k === 'struggle') {\r\n        let current = protocolData[k] ? protocolData[k].split(' | ') : [];\r\n        let index = current.indexOf(v);\r\n        if (index > -1) {\r\n            current.splice(index, 1);\r\n            el.classList.remove('active-card');\r\n        } else {\r\n            current.push(v);\r\n            el.classList.add('active-card');\r\n        }\r\n        protocolData[k] = current.join(' | ');\r\n        localStorage.setItem('m3ta_' + k, protocolData[k]);\r\n        if (protocolData[k]) clearError(k);\r\n    } else {\r\n        protocolData[k] = v; localStorage.setItem('m3ta_' + k, v);\r\n        Array.from(el.parentElement.children).forEach(c => c.classList.remove('active-card'));\r\n        el.classList.add('active-card');\r\n        clearError(k);\r\n    }\r\n}\r\nfunction loadProgress() {\r\n    ['age', 'name', 'phone'].forEach(k => {\r\n        let v = localStorage.getItem('m3ta_' + k);\r\n        if(v) { document.getElementById('p-' + k).value = v; protocolData[k] = v; }\r\n    });\r\n    ['gender', 'goal'].forEach(k => {\r\n        let v = localStorage.getItem('m3ta_' + k);\r\n        if(v) {\r\n            protocolData[k] = v;\r\n            let el = document.getElementById('card-' + v);\r\n            if(el) {\r\n                Array.from(el.parentElement.children).forEach(c => c.classList.remove('active-card'));\r\n                el.classList.add('active-card');\r\n            }\r\n        }\r\n    });\r\n\r\n    let st = localStorage.getItem('m3ta_struggle');\r\n    if (st) {\r\n        protocolData.struggle = st;\r\n        let selected = st.split(' | ');\r\n        selected.forEach(val => {\r\n            let match = CM.quiz.step3.cards.find(c => c.val === val);\r\n            if (match) {\r\n                let el = document.getElementById('card-' + match.id);\r\n                if (el) el.classList.add('active-card');\r\n            }\r\n        });\r\n    }\r\n}\r\n\r\nfunction runProtocolStep(step) {\r\n    let valid = true;\r\n    if(step === 2) {\r\n        if(!protocolData.gender) { showError('gender', 'Select gender'); valid = false; }\r\n        let age = parseInt(document.getElementById('p-age').value);\r\n        if(!age || age < 10 || age > 80) { showError('age', 'Invalid Age'); valid = false; }\r\n    }\r\n    if(step === 3 && !protocolData.goal) { showError('goal', 'Select a goal'); valid = false; }\r\n    if(step === 4) {\r\n        if(!protocolData.struggle) { showError('struggle', 'Select at least one obstacle'); valid = false; }\r\n    }\r\n    if(!valid) return;\r\n\r\n    for(let i=1; i<=4; i++) document.getElementById('p-step-' + i).classList.add('p-hidden');\r\n    document.getElementById('p-step-' + step).classList.remove('p-hidden');\r\n    document.getElementById('p-step-' + step).classList.add('p-fade-in');\r\n    document.getElementById('p-progress').style.width = (step * 25) + \"%\";\r\n}\r\n\r\nasync function sendProtocolData() {\r\n    \/\/ \ud83d\udd12 SECURITY: Robust Sanitization\r\n    \/\/ We strip tags and remove potentially dangerous characters for the backend\r\n    const stripTags = (str) => {\r\n        if(!str) return \"\";\r\n        \/\/ Remove HTML tags\r\n        let clean = str.replace(\/<\\\/?[^>]+(>|$)\/g, \"\"); \r\n        \/\/ Remove characters often used in SQL\/XSS injections just in case\r\n        return clean.replace(\/['\";]\/g, \"\"); \r\n    };\r\n\r\n    const refreshNonce = async () => {\r\n        const refreshUrl = (CM.rest && CM.rest.nonce_refresh_url) ? CM.rest.nonce_refresh_url : '\/wp-json\/captain-m3ta\/v1\/rest-nonce';\r\n        try {\r\n            const response = await fetch(refreshUrl, { credentials: 'same-origin' });\r\n            if (!response.ok) {\r\n                throw new Error('Failed to refresh nonce');\r\n            }\r\n            const data = await response.json();\r\n            if (data && data.nonce) {\r\n                if (CM.rest) {\r\n                    CM.rest.nonce = data.nonce;\r\n                }\r\n                return data.nonce;\r\n            }\r\n        } catch (error) {\r\n            console.warn('Quiz nonce refresh failed:', error);\r\n        }\r\n        return CM.rest ? CM.rest.nonce : '';\r\n    };\r\n\r\n    protocolData.name = stripTags(document.getElementById('p-name').value);\r\n    protocolData.phone = stripTags(document.getElementById('p-phone').value.trim());\r\n\r\n    if(!protocolData.name) { showError('name', 'Required'); return; }\r\n    \r\n    \/\/ Strict Egypt Regex (Matches 010, 011, 012, 015 + 8 digits)\r\n    let egRegex = \/^(\\+20|20)?0?1[0125]\\d{8}$\/;\r\n    if(!egRegex.test(protocolData.phone)) { showError('phone', 'Invalid Number'); return; }\r\n\r\n    const btn = document.getElementById('btn-submit');\r\n    const org = btn.innerHTML;\r\n    btn.innerHTML = \"Processing...\";\r\n    \/\/ Prevent double clicking\r\n    btn.disabled = true;\r\n\r\n    const nonce = await refreshNonce();\r\n\r\n    try {\r\n        let res = await fetch('\/wp-json\/captain-m3ta\/v1\/submit', {\r\n            method: 'POST',\r\n            headers: { 'Content-Type': 'application\/json', 'X-WP-Nonce': nonce || (CM.rest ? CM.rest.nonce : '') },\r\n            body: JSON.stringify(protocolData)\r\n        });\r\n\r\n        if (res.status === 403 && !window.__nonceRefreshed) {\r\n            window.__nonceRefreshed = true;\r\n            const retryNonce = await refreshNonce();\r\n            if (retryNonce) {\r\n                res = await fetch('\/wp-json\/captain-m3ta\/v1\/submit', {\r\n                    method: 'POST',\r\n                    headers: { 'Content-Type': 'application\/json', 'X-WP-Nonce': retryNonce },\r\n                    body: JSON.stringify(protocolData)\r\n                });\r\n            }\r\n        }\r\n\r\n        if (res.status === 403) {\r\n            throw new Error(\"Session expired\");\r\n        }\r\n\r\n        const data = await res.json();\r\n        if(data.success) {\r\n            localStorage.setItem('m3ta_lead_id', data.lead_id);\r\n            localStorage.setItem('m3ta_quiz_completed', 'true');\r\n            window.location.href = REDIRECT_URL;\r\n        } else {\r\n            showError('phone', data.msg || \"Server Error\");\r\n            btn.innerHTML = org;\r\n            btn.disabled = false;\r\n        }\r\n    } catch (err) {\r\n        if (err.message !== \"Session expired\") {\r\n            showError('phone', \"Network Error\");\r\n            btn.innerHTML = org;\r\n            btn.disabled = false;\r\n        }\r\n    }\r\n}\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\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>Welcome Back! Your plan is saved. \ud83d\ude80 Go to Checkout Restart Quiz Ascension Step 1 of 4 &#8230; Age Enter valid age Select gender Next Step \u2794 Step 2 of 4 &#8230; Select a goal Next Step \u2794 Back Step 3 of 4 &#8230; &#8230; Select at least one obstacle Next Step \u2794 Back Step [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1582","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/pages\/1582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/comments?post=1582"}],"version-history":[{"count":180,"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/pages\/1582\/revisions"}],"predecessor-version":[{"id":3668,"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/pages\/1582\/revisions\/3668"}],"wp:attachment":[{"href":"https:\/\/captainm3ta.com\/ar\/wp-json\/wp\/v2\/media?parent=1582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}