{"id":1492,"date":"2026-04-07T10:00:16","date_gmt":"2026-04-07T10:00:16","guid":{"rendered":"https:\/\/sgss.org.sa\/sgss-join\/"},"modified":"2026-07-20T13:06:23","modified_gmt":"2026-07-20T13:06:23","slug":"sgss-join","status":"publish","type":"page","link":"https:\/\/sgss.org.sa\/en\/sgss-join\/","title":{"rendered":"\u0627\u0646\u0636\u0645 \u0644\u0644\u062c\u0645\u0639\u064a\u0629"},"content":{"rendered":"\n<style>\n    :root {\n        --primary-gradient: linear-gradient(135deg, #52225e 0%, #7e3af2 100%);\n        --secondary-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);\n        --glass-bg: rgba(255, 255, 255, 0.95);\n        --accent-purple: #52225e;\n        --soft-gray: #f8fafc;\n        --border-color: #e2e8f0;\n        --text-dark: #1e293b;\n        --text-muted: #64748b;\n    }\n\n    .sgss-join-scope {\n        font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;\n        background: #fbfcfe;\n        width: 100%;\n        direction:\n            ltr        ;\n        text-align:\n            left        ;\n        color: var(--text-dark);\n        line-height: 1.6;\n    }\n\n    \/* Premium Hero Section *\/\n    .sgss-hero {\n        height: 400px;\n        background-image: url('https:\/\/sgss.org.sa\/wp-content\/plugins\/sgss-platform\/image\/4a6ba50f966fdb76a329e00aeba8149398f5dafe.jpg');\n        background-size: cover;\n        background-position: center;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #fff;\n        margin-bottom: -100px;\n    }\n\n    .sgss-hero-overlay {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(to bottom, rgba(82, 34, 94, 0.85), rgba(82, 34, 94, 0.4));\n        backdrop-filter: blur(2px);\n    }\n\n    .sgss-hero-content {\n        position: relative;\n        z-index: 10;\n        text-align: center;\n        max-width: 800px;\n        padding: 0 20px;\n    }\n\n    .sgss-hero h1 {\n        font-size: 3.5rem;\n        font-weight: 900;\n        margin: 0 0 1rem;\n        color: #fff !important;\n        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n        letter-spacing: -0.02em;\n    }\n\n    .sgss-hero p {\n        font-size: 1.25rem;\n        margin: 0;\n        color: rgba(255, 255, 255, 0.9);\n        font-weight: 500;\n    }\n\n    \/* Container & Layout *\/\n    .sgss-container {\n        max-width: 1000px;\n        margin: 0 auto;\n        padding: 0 20px 6rem;\n        position: relative;\n        z-index: 20;\n    }\n\n    .sgss-card-box {\n        background: var(--glass-bg);\n        border-radius: 24px;\n        padding: 4rem;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);\n        border: 1px solid rgba(255, 255, 255, 0.3);\n        backdrop-filter: blur(10px);\n    }\n\n    \/* Section Titles *\/\n    .sgss-section-title {\n        font-size: 1.75rem;\n        font-weight: 800;\n        color: var(--accent-purple);\n        margin: 3rem 0 1.5rem;\n        padding-bottom: 1rem;\n        border-bottom: 2px solid #f1f5f9;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n\n    .sgss-section-title::before {\n        content: \"\";\n        width: 6px;\n        height: 24px;\n        background: var(--primary-gradient);\n        border-radius: 4px;\n    }\n\n    \/* Form Grids & Inputs *\/\n    .sgss-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 2rem;\n    }\n\n    .f-group {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .sgss-label {\n        font-weight: 700;\n        font-size: 0.95rem;\n        color: #475569;\n    }\n\n    .sgss-input,\n    input[type=\"text\"],\n    input[type=\"email\"],\n    input[type=\"password\"],\n    input[type=\"tel\"] {\n        width: 100%;\n        padding: 1rem 1.25rem !important;\n        border: 2px solid #e2e8f0 !important;\n        border-radius: 12px !important;\n        font-size: 1rem !important;\n        transition: all 0.3s ease !important;\n        background: #fff !important;\n        color: var(--text-dark) !important;\n    }\n\n    .sgss-input:focus,\n    input:focus {\n        border-color: #52225e !important;\n        box-shadow: 0 0 0 4px rgba(82, 34, 94, 0.1) !important;\n        outline: none !important;\n    }\n\n    \/* Premium Membership Tiers *\/\n    .tier-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n        gap: 2rem;\n        margin-top: 2rem;\n    }\n\n    .tier-card {\n        background: #fff;\n        border: 2px solid #e2e8f0;\n        border-radius: 24px;\n        padding: 3rem 2rem;\n        text-align: center;\n        cursor: pointer;\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        position: relative;\n        overflow: hidden;\n    }\n\n    .tier-card:hover {\n        transform: translateY(-8px);\n        border-color: #52225e;\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);\n    }\n\n    .tier-card.selected {\n        border-color: #52225e;\n        background: #fff;\n        box-shadow: 0 25px 50px rgba(82, 34, 94, 0.15);\n        transform: scale(1.02);\n    }\n\n    .tier-card.selected::after {\n        content: \"\u2713\";\n        position: absolute;\n        top: 20px;\n        right        : 25px;\n        background: var(--primary-gradient);\n        color: #fff;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: bold;\n        box-shadow: 0 4px 10px rgba(82, 34, 94, 0.3);\n    }\n\n    .tier-price {\n        font-size: 2.5rem;\n        font-weight: 900;\n        color: var(--accent-purple);\n        margin: 1rem 0;\n    }\n\n    .tier-price span {\n        font-size: 1rem;\n        color: var(--text-muted);\n        font-weight: 500;\n    }\n\n    .tier-base-price {\n        color: #7c8494;\n        font-size: 1rem;\n        font-weight: 700;\n        margin: .7rem 0 -0.7rem;\n        text-decoration: line-through;\n    }\n\n    .tier-offer-badge {\n        display: inline-block;\n        background: #ecfdf5;\n        border: 1px solid #86efac;\n        color: #166534;\n        border-radius: 999px;\n        font-size: .78rem;\n        font-weight: 800;\n        line-height: 1.4;\n        margin-top: -.4rem;\n        padding: .35rem .65rem;\n    }\n\n    .tier-features {\n        list-style: none;\n        padding: 0;\n        margin: 1.5rem 0;\n        color: var(--text-muted);\n        font-size: 0.95rem;\n    }\n\n    .tier-features li {\n        margin-bottom: 0.75rem;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        justify-content: center;\n    }\n\n    \/* Enhanced File Upload *\/\n    .file-drop {\n        border: 2px dashed #cbd5e1;\n        border-radius: 16px;\n        padding: 2.5rem;\n        text-align: center;\n        color: var(--text-muted);\n        cursor: pointer;\n        background: #f8fafc;\n        transition: all 0.3s ease;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 10px;\n    }\n\n    .file-drop:hover {\n        border-color: #52225e;\n        background: #f1f5f9;\n        color: var(--accent-purple);\n    }\n\n    .file-drop i {\n        font-size: 2.5rem;\n        margin-bottom: 0.5rem;\n    }\n\n    \/* Success\/Payment Gateway *\/\n    #pro-payment-gateway {\n        display: none;\n        background: #f8fafc;\n        border: 2px solid #e2e8f0;\n        padding: 3rem;\n        border-radius: 24px;\n        margin-top: 3rem;\n        opacity: 0;\n        transform: translateY(30px);\n        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n        box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1);\n    }\n\n    #pro-payment-gateway.visible {\n        display: block !important;\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n    \/* Buttons *\/\n    .btn-submit {\n        background: var(--primary-gradient) !important;\n        color: #fff !important;\n        width: 100%;\n        padding: 1.25rem;\n        border: none;\n        border-radius: 16px;\n        font-size: 1.25rem;\n        font-weight: 800;\n        cursor: pointer;\n        margin-top: 3rem;\n        transition: all 0.4s ease;\n        box-shadow: 0 10px 25px rgba(82, 34, 94, 0.25);\n    }\n\n    .btn-submit:hover {\n        transform: translateY(-4px) scale(1.01);\n        box-shadow: 0 15px 35px rgba(82, 34, 94, 0.35);\n    }\n\n    .btn-submit:active {\n        transform: translateY(0);\n    }\n\n    @media(max-width: 992px) {\n        .sgss-card-box {\n            padding: 2.5rem;\n        }\n\n        .sgss-hero h1 {\n            font-size: 2.75rem;\n        }\n    }\n\n    @media(max-width: 768px) {\n        .sgss-hero {\n            height: 320px;\n        }\n\n        .sgss-hero h1 {\n            font-size: 2.25rem;\n        }\n\n        .sgss-container {\n            margin-top: -60px;\n        }\n\n        .sgss-card-box {\n            padding: 2rem 1.5rem;\n        }\n\n        .sgss-grid,\n        .tier-grid {\n            grid-template-columns: 1fr;\n            gap: 1.5rem;\n        }\n\n        .sgss-section-title {\n            font-size: 1.4rem;\n        }\n\n        .btn-submit {\n            font-size: 1.1rem;\n            padding: 1.1rem;\n        }\n    }\n<\/style>\n\n<div class=\"sgss-join-scope\">\n    <div class=\"sgss-hero\">\n        <div class=\"sgss-hero-overlay\"><\/div>\n        <div class=\"sgss-hero-content\">\n            <h1>\n                Apply for Membership            <\/h1>\n            <p>\n                Please provide your information to start the application process            <\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"sgss-container\">\n        <div class=\"sgss-card-box\">\n            \n            <form method=\"POST\" enctype=\"multipart\/form-data\">\n                <input type=\"hidden\" id=\"join_nonce\" name=\"join_nonce\" value=\"ff6ecdba3b\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/1492\" \/>                <input type=\"hidden\" name=\"sgss_language\" value=\"en\">\n                \n                <div class=\"sgss-section-title\">\n                    Personal Information                <\/div>\n                <div class=\"sgss-grid\">\n                    <div><label class=\"sgss-label\">\n                            Name in Arabic                        <\/label><input type=\"text\" name=\"name_ar\" class=\"sgss-input\"\n                            value=\"\" required><\/div>\n                    <div><label class=\"sgss-label\">\n                            Name in English                        <\/label><input type=\"text\" name=\"name_en\" class=\"sgss-input\"\n                            value=\"\" required><\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">\n                            National ID \/ Iqama                        <\/label><input type=\"text\" name=\"national_id\" class=\"sgss-input\"\n                            value=\"\" required><\/div>\n                    <div><label class=\"sgss-label\">\n                            Email Address                        <\/label><input type=\"email\" name=\"email\" id=\"email\" class=\"sgss-input\"\n                            value=\"\" required ><\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">\n                            Phone Number                        <\/label><input type=\"tel\" name=\"phone\" class=\"sgss-input\"\n                            value=\"\" required><\/div>\n                    <div><label class=\"sgss-label\">\n                            Current Position                        <\/label><input type=\"text\" name=\"job_title\" class=\"sgss-input\"\n                            value=\"\" required><\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">\n                            Current Workplace                        <\/label><input type=\"text\" name=\"workplace\" class=\"sgss-input\"\n                            value=\"\" required><\/div>\n                    <div><label class=\"sgss-label\">\n                            City                        <\/label><input type=\"text\" name=\"city\" class=\"sgss-input\"\n                            value=\"\" required><\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">Gender<\/label>\n                        <select name=\"gender\" class=\"sgss-input\" required>\n                            <option value=\"\">--<\/option>\n                            <option value=\"Male\" >Male<\/option>\n                            <option value=\"Female\" >Female<\/option>\n                        <\/select>\n                    <\/div>\n                    <div><label class=\"sgss-label\">Birth Date<\/label>\n                        <input type=\"date\" name=\"birth_date\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">Place of Birth<\/label>\n                        <input type=\"text\" name=\"place_of_birth\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                    <div><label class=\"sgss-label\">Nationality<\/label>\n                        <input type=\"text\" name=\"nationality\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">ID \/ Passport Number<\/label>\n                        <input type=\"text\" name=\"id_number\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                    <div><label class=\"sgss-label\">Qualification<\/label>\n                        <input type=\"text\" name=\"qualification\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">Specialty<\/label>\n                        <input type=\"text\" name=\"specialty\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                    <div><label class=\"sgss-label\">Do you have a certificate in General Surgery? Please mention<\/label>\n                        <input type=\"text\" name=\"gen_surgery_cert\" class=\"sgss-input\" value=\"\">\n                    <\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">Graduation Date<\/label>\n                        <input type=\"date\" name=\"graduation_date\" class=\"sgss-input\" value=\"\">\n                    <\/div>\n                    <div><label class=\"sgss-label\">School \/ University<\/label>\n                        <input type=\"text\" name=\"university\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">Additional Qualification<\/label>\n                        <input type=\"text\" name=\"additional_qualification\" class=\"sgss-input\" value=\"\">\n                    <\/div>\n                    <div><label class=\"sgss-label\">Present Position<\/label>\n                        <select name=\"present_position\" class=\"sgss-input\" required>\n                            <option value=\"\">--<\/option>\n                            <option value=\"Consultant\" >Consultant<\/option>\n                            <option value=\"Specialist\" >Specialist<\/option>\n                            <option value=\"Resident\" >Resident<\/option>\n                            <option value=\"Intern\" >Intern<\/option>\n                            <option value=\"Student\" >Student<\/option>\n                            <option value=\"Other\" >Other<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n                <div class=\"sgss-grid\" style=\"margin-top:1.5rem;\">\n                    <div><label class=\"sgss-label\">Place of Work<\/label>\n                        <input type=\"text\" name=\"place_of_work\" class=\"sgss-input\" value=\"\" required>\n                    <\/div>\n                                            <div><label class=\"sgss-label\">\n                                Password                            <\/label><input type=\"password\" name=\"password\" class=\"sgss-input\" required><\/div>\n                                    <\/div>\n\n                <div class=\"sgss-section-title\">\n                    Membership Type                <\/div>\n                <div class=\"tier-grid\">\n                                            <div class=\"tier-card\"\n                            onclick=\"selectTier('active', 600, false, this)\">\n                            <div class=\"tier-title\">\n                                Active Membership                            <\/div>\n                                                        <div class=\"tier-price\">\n                                600 SAR                            <\/div>\n                                                        <div class=\"tier-features\">\n                                Upload Video<br \/>\r\nLibrary Access<br \/>\r\nVoting                            <\/div>\n                        <\/div>\n                                            <div class=\"tier-card\"\n                            onclick=\"selectTier('affiliation', 300, false, this)\">\n                            <div class=\"tier-title\">\n                                Affiliation Membership                            <\/div>\n                                                        <div class=\"tier-price\">\n                                300 SAR                            <\/div>\n                                                        <div class=\"tier-features\">\n                                Library Access<br \/>\r\nEvent Discounts                            <\/div>\n                        <\/div>\n                                    <\/div>\n                <input type=\"hidden\" name=\"membership_type\" id=\"membership_type\" value=\"\">\n                <input type=\"hidden\" name=\"final_price\" id=\"final_price\" value=\"\">\n                <input type=\"hidden\" name=\"coupon_code\" id=\"coupon_code_input\" value=\"\">\n\n                <div class=\"sgss-section-title\">\n                    Attachments & Photo                <\/div>\n                <div style=\"margin-bottom:1rem; font-weight:600; color:#4b5563;\">\n                    Personal Photo (Optional)                <\/div>\n                <div class=\"file-drop\" onclick=\"document.getElementById('avatar_up').click()\"\n                    style=\"margin-bottom:2rem;\">\n                    <div style=\"font-size:2rem; color:#cbd5e1; margin-bottom:0.5rem;\">\ud83d\udc64<\/div>\n                    <div>\n                        Drag your photo here or click to browse                    <\/div>\n                    <input type=\"file\" name=\"avatar\" id=\"avatar_up\" style=\"display:none\" accept=\"image\/*\">\n                    <div id=\"avatar_up_feedback\" class=\"file-feedback\"><\/div>\n                <\/div>\n                <div style=\"margin-bottom:1rem; font-weight:600; color:#4b5563;\">\n                    Upload SCFHS Certificate (\n                    Optional)\n                <\/div>\n                <div class=\"file-drop\" onclick=\"document.getElementById('c_up').click()\" style=\"margin-bottom:2rem;\">\n                    <div style=\"font-size:2rem; color:#cbd5e1; margin-bottom:0.5rem;\">\u2601\ufe0f<\/div>\n                    <div>\n                        Drag file here or click to browse                    <\/div>\n                    <input type=\"file\" name=\"certificate[]\" id=\"c_up\" style=\"display:none\" multiple>\n                    <div id=\"c_up_feedback\" class=\"file-feedback\"><\/div>\n                <\/div>\n                <div style=\"margin-bottom:1rem; font-weight:600; color:#4b5563;\">\n                    Upload ID Card (\n                    Optional)\n                <\/div>\n                <div class=\"file-drop\" onclick=\"document.getElementById('id_up').click()\">\n                    <div style=\"font-size:2rem; color:#cbd5e1; margin-bottom:0.5rem;\">\u2601\ufe0f<\/div>\n                    <div>\n                        Drag file here or click to browse                    <\/div>\n                    <input type=\"file\" name=\"id_card[]\" id=\"id_up\" style=\"display:none\" multiple>\n                    <div id=\"id_up_feedback\" class=\"file-feedback\"><\/div>\n                <\/div>\n\n                <div id=\"pro-payment-gateway\">\n                    <!-- Coupon Section -->\n                    <div id=\"membership-coupon-section\"\n                        style=\"background:#fff; border:1px solid #ddd; padding:15px; border-radius:8px; margin-bottom:15px; display:flex; gap:10px; align-items:center;\">\n                        <input type=\"text\" id=\"user_coupon\"\n                            placeholder=\"Discount Code\"\n                            style=\"flex:1; padding:8px; border:1px solid #ccc; border-radius:4px;\">\n                        <button type=\"button\" onclick=\"applyCoupon()\"\n                            style=\"background:#333; color:#fff; border:none; padding:8px 15px; border-radius:4px; cursor:pointer;\">\n                            Apply                        <\/button>\n                    <\/div>\n                    <div id=\"coupon-msg\" style=\"margin-bottom:10px; font-weight:bold;\"><\/div>\n                    <div id=\"temporary-offer-msg\" style=\"display:none; margin-bottom:10px; font-weight:700; color:#166534;\"><\/div>\n\n                    <!-- Moyasar Form (Hidden Temporarily) -->\n                    <div id=\"sgss-membership-payment-note\" style=\"display:none; margin:0 0 12px; padding:12px; border-radius:10px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:13px; line-height:1.6; text-align:center;\"><\/div>\n                    <div class=\"mysr-form\" style=\"display:none;\"><\/div>\n                    <input type=\"hidden\" name=\"moyasar_token\" id=\"moyasar_token\">\n                <\/div>\n\n\n\n                <button type=\"button\" class=\"btn-submit\" id=\"main-submit\">\n                    Complete Registration                <\/button>\n            <\/form>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Moyasar Settings -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.moyasar.com\/mpf\/1.16.0\/moyasar.css\">\n<script src=\"https:\/\/cdn.moyasar.com\/mpf\/1.16.0\/moyasar.js\"><\/script>\n\n\n<script>\n    \/\/ \u062f\u0627\u0644\u0629 \u0639\u0631\u0636 Popup \u0628\u062f\u0644\u0627\u064b \u0645\u0646 alert\n    function showPopup(message, type = 'info') {\n        jQuery('#sgss-custom-popup').remove();\n\n        let iconColor, bgColor, icon;\n        if (type === 'error') {\n            iconColor = '#991b1b';\n            bgColor = '#fee2e2';\n            icon = '\u26a0\ufe0f';\n        } else if (type === 'success') {\n            iconColor = '#166534';\n            bgColor = '#dcfce7';\n            icon = '\u2713';\n        } else {\n            iconColor = '#1e40af';\n            bgColor = '#dbeafe';\n            icon = '\u2139\ufe0f';\n        }\n\n        let popup = `\n        <div id=\"sgss-custom-popup\" style=\"position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999999; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.2s;\">\n            <div style=\"background:white; padding:30px; border-radius:16px; max-width:400px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:slideUp 0.3s;\">\n                <div style=\"width:60px; height:60px; background:${bgColor}; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:30px; color:${iconColor};\">\n                    ${icon}\n                <\/div>\n                <p style=\"color:#1e293b; font-size:16px; line-height:1.6; margin:0;\">${message}<\/p>\n                <button onclick=\"jQuery('#sgss-custom-popup').fadeOut(200, function(){ jQuery(this).remove(); });\" style=\"margin-top:20px; background:#52225e; color:white; border:none; padding:12px 30px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer;\">\n                    OK                <\/button>\n            <\/div>\n        <\/div>\n        <style>\n            @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }\n            @keyframes slideUp { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }\n        <\/style>\n    `;\n\n        jQuery('body').append(popup);\n    }\n\n    function showExistingAccountPopup(email, message) {\n        jQuery('#sgss-custom-popup').remove();\n\n        const loginUrl = new URL(\"https:\\\/\\\/sgss.org.sa\\\/en\\\/sgss-login\", window.location.origin);\n        loginUrl.searchParams.set('email', email || '');\n\n        const resetUrl = new URL(loginUrl.toString());\n        resetUrl.searchParams.set('forgot', '1');\n\n        const popup = jQuery(`\n            <div id=\"sgss-custom-popup\" style=\"position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:999999; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn 0.2s;\">\n                <div style=\"background:white; padding:30px; border-radius:16px; width:100%; max-width:440px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:slideUp 0.3s;\">\n                    <div style=\"width:60px; height:60px; background:#fff7ed; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:30px; color:#9a3412;\">\ud83d\udd10<\/div>\n                    <p class=\"sgss-existing-account-message\" style=\"color:#1e293b; font-size:16px; line-height:1.7; margin:0 0 20px;\"><\/p>\n                    <div style=\"display:grid; gap:10px;\">\n                        <a class=\"sgss-existing-login\" href=\"#\" style=\"display:block; background:#52225e; color:#fff; padding:13px 18px; border-radius:8px; font-weight:700; text-decoration:none;\">Sign in<\/a>\n                        <a class=\"sgss-existing-reset\" href=\"#\" style=\"display:block; background:#fff; color:#52225e; padding:12px 18px; border:1px solid #52225e; border-radius:8px; font-weight:700; text-decoration:none;\">Reset password<\/a>\n                        <button type=\"button\" class=\"sgss-existing-close\" style=\"background:transparent; color:#64748b; border:0; padding:9px; cursor:pointer; font-weight:600;\">Use another email<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        `);\n\n        popup.find('.sgss-existing-account-message').text(message);\n        popup.find('.sgss-existing-login').attr('href', loginUrl.toString());\n        popup.find('.sgss-existing-reset').attr('href', resetUrl.toString());\n        popup.find('.sgss-existing-close').on('click', function () {\n            popup.fadeOut(200, function () {\n                popup.remove();\n                const emailField = document.getElementById('email');\n                if (emailField) {\n                    emailField.focus();\n                    emailField.select();\n                }\n            });\n        });\n\n        jQuery('body').append(popup);\n    }\n\n    function setupFileFeedback(inputId, feedbackId) {\n        const input = document.getElementById(inputId);\n        const feedback = document.getElementById(feedbackId);\n        if (!input || !feedback) return;\n        input.addEventListener('change', function () {\n            if (this.files && this.files.length > 0) {\n                feedback.innerHTML = '';\n                for (let i = 0; i < this.files.length; i++) {\n                    const file = this.files[i];\n                    const fileId = 'file_' + Date.now() + '_' + i;\n                    const fileDiv = document.createElement('div');\n                    fileDiv.className = 'file-item';\n                    fileDiv.id = fileId;\n                    fileDiv.innerHTML = `\n                   <span class=\"dashicons dashicons-yes\"><\/span>\n                   <span>${file.name}<\/span>\n                   <span style=\"font-size:0.8rem; color:#666\">(${(file.size \/ 1024 \/ 1024).toFixed(2)} MB)<\/span>\n                   <button type=\"button\" onclick=\"removeFile('${fileId}', '${inputId}')\" style=\"background:#ef4444; color:#fff; border:none; padding:4px 8px; border-radius:4px; cursor:pointer; margin-left:auto;\">Remove<\/button>\n               `;\n                    feedback.appendChild(fileDiv);\n                }\n            }\n        });\n    }\n    function removeFile(fileId, inputId) { const fileDiv = document.getElementById(fileId); if (fileDiv) fileDiv.remove(); }\n    setupFileFeedback('c_up', 'c_up_feedback');\n    setupFileFeedback('id_up', 'id_up_feedback');\n    setupFileFeedback('avatar_up', 'avatar_up_feedback');\n\n    let originalPrice = 0;\n    let currentTotal = 0;\n\n    function selectTier(type, price, hasTemporaryDiscount, elem) {\n        document.getElementById('membership_type').value = type;\n        document.querySelectorAll('.tier-card').forEach(e => e.classList.remove('selected'));\n        elem.classList.add('selected');\n\n        var payBox = document.getElementById('pro-payment-gateway');\n        var btn = document.getElementById('main-submit');\n\n        document.getElementById('user_coupon').value = '';\n        document.getElementById('coupon_code_input').value = '';\n        document.getElementById('coupon-msg').innerHTML = '';\n\n        var couponSection = document.getElementById('membership-coupon-section');\n        var offerMessage = document.getElementById('temporary-offer-msg');\n        if (hasTemporaryDiscount) {\n            couponSection.style.display = 'none';\n            offerMessage.style.display = 'block';\n            offerMessage.textContent = 'The displayed temporary offer is already applied. Discount codes cannot be combined with it.';\n        } else {\n            couponSection.style.display = 'flex';\n            offerMessage.style.display = 'none';\n            offerMessage.textContent = '';\n        }\n\n        originalPrice = parseFloat(price);\n        currentTotal = originalPrice;\n        document.getElementById('final_price').value = currentTotal;\n\n        if (originalPrice > 0) {\n            btn.style.display = 'block';\n            payBox.classList.remove('visible');\n            btn.innerHTML = 'Register & Proceed to Payment (%s SAR)'.replace('%s', currentTotal);\n            updateTotalDisplay();\n        }\n    }\n\n    function updateTotalDisplay() {\n        let txt = 'Total: ' + currentTotal + ' SAR';\n        let displayEl = document.getElementById('display-total');\n        if (displayEl) {\n            displayEl.innerText = txt;\n        }\n    }\n\n    jQuery(document).ready(function ($) {\n        $('#main-submit').on('click', function (e) {\n            e.preventDefault();\n            let btn = $(this);\n            let form = $(this).closest('form')[0];\n            let price = parseFloat($('#final_price').val()) || 0;\n            let type = $('#membership_type').val();\n\n            if (!form.checkValidity()) {\n                form.reportValidity();\n                return;\n            }\n\n            if (!type) {\n                showPopup('Please select membership type', 'error');\n                return;\n            }\n\n            let originalText = btn.html();\n            btn.prop('disabled', true).html('Sending...');\n\n            let formData = new FormData(form);\n            formData.append('action', 'sgss_register_pending_member');\n\n            \/\/ 1. Upload files first (No user created yet)\n            $.ajax({\n                url: 'https:\/\/sgss.org.sa\/wp-admin\/admin-ajax.php',\n                type: 'POST',\n                data: formData,\n                processData: false,\n                contentType: false,\n                success: function (res) {\n                    if (res.success) {\n                        \/\/ Store form data + uploaded file URLs in session\n                        let regData = {};\n                        formData.forEach((value, key) => { regData[key] = value; });\n                        regData['uploaded_files'] = res.data.uploaded_files;\n                        regData['temp_id'] = res.data.temp_id;\n                        sessionStorage.setItem('sgss_pending_registration', JSON.stringify(regData));\n                        localStorage.setItem('sgss_pending_registration_backup', JSON.stringify(regData)); \/\/ \ud83d\udee1\ufe0f \u062d\u0645\u0627\u064a\u0629 \u062f\u0627\u0626\u0645\u0629 \u0644\u0644\u0645\u0633\u062a\u0646\u062f\u0627\u062a\n\n                        if (price > 0) {\n                            \/\/ \ud83d\ude80 \u0625\u0638\u0647\u0627\u0631 \u0645\u0648\u064a\u0633\u0631 \u0628\u0639\u062f \u0646\u062c\u0627\u062d \u062d\u0641\u0638 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0641\u064a \u0627\u0644\u0633\u064a\u0631\u0641\u0631\n                            $('#pro-payment-gateway').addClass('visible');\n                            $('#main-submit').hide();\n                            currentTotal = parseFloat(res.data.expected_amount);\n                            $('#final_price').val(currentTotal);\n                            updateTotalDisplay();\n                            setupMoyasar(currentTotal, res.data.temp_id);\n                        } else {\n                            \/\/ Coupon 100% - Complete Immediately\n                            let code = $('#user_coupon').val();\n                            completePaidRegistration('coupon_' + code, JSON.stringify(regData));\n                        }\n                    } else {\n                        btn.prop('disabled', false).html(originalText);\n                        if (res.data && typeof res.data === 'object' && res.data.code === 'email_exists') {\n                            showExistingAccountPopup($('#email').val(), res.data.message);\n                        } else {\n                            let errorMessage = res.data && typeof res.data === 'object' ? res.data.message : res.data;\n                            showPopup(errorMessage || 'Error', 'error');\n                        }\n                    }\n                },\n                error: function () {\n                    btn.prop('disabled', false).html(originalText);\n                    showPopup('Connection error', 'error');\n                }\n            });\n        });\n\n        function setupMoyasar(amount, tempId) {\n            $('.mysr-form').empty();\n            $('.mysr-form').show();\n            let amountHalala = Math.round(amount * 100);\n            const configuredApplePayDomains = [\"sgss.org.sa\",\"sgss.skhaa.sa\"];\n            const applePayDomainReady = configuredApplePayDomains.includes(window.location.hostname.toLowerCase());\n            let applePayDeviceReady = false;\n            try {\n                applePayDeviceReady = typeof window.ApplePaySession !== 'undefined'\n                    && window.ApplePaySession.canMakePayments();\n            } catch (e) {\n                applePayDeviceReady = false;\n            }\n            const applePayReady = applePayDomainReady && applePayDeviceReady;\n            const paymentMethods = applePayReady ? ['creditcard', 'applepay'] : ['creditcard'];\n\n            if (!applePayDomainReady) {\n                $('#sgss-membership-payment-note').text('Apple Pay is disabled on this test hostname. Card payment remains available below.').show();\n            } else if (!applePayDeviceReady) {\n                $('#sgss-membership-payment-note').text('Apple Pay is not available in this browser or device. Card payment remains available below.').show();\n            } else {\n                $('#sgss-membership-payment-note').hide().empty();\n            }\n            \/\/ Preserve renew=1 (and the language path) so the authenticated\n            \/\/ callback is not redirected away before server verification.\n            const callbackUrl = new URL(window.location.href);\n            callbackUrl.searchParams.delete('id');\n            callbackUrl.searchParams.delete('payment_id');\n            callbackUrl.searchParams.set('status', 'paid');\n            Moyasar.init({\n                element: '.mysr-form',\n                amount: amountHalala,\n                currency: 'SAR',\n                language: 'en',\n                description: 'SGSS Membership',\n                callback_url: callbackUrl.toString(),\n                publishable_api_key: 'pk_live_gyc3NghuwKpaVUPgzf8vVn5MEdE4659FsembWS8p',\n                supported_networks: ['mada', 'visa', 'mastercard'],\n                methods: paymentMethods,\n                apple_pay: {\n                    country: 'SA',\n                    label: 'SGSS',\n                    validate_merchant_url: 'https:\/\/api.moyasar.com\/v1\/applepay\/initiate'\n                },\n                on_failure: function(error) {\n                    console.error('Moyasar payment failed:', error);\n                    showPopup('Apple Pay could not start. Please try again. If the problem continues, verify the exact website domain under Apple Pay Domains in Moyasar.', 'error');\n                },\n                metadata: { \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 \u062a\u064f\u0631\u0633\u0644 \u0644\u0644\u0628\u0648\u0627\u0628\u0629\n                    'system': 'sgss_platform',\n                    'operation': 'membership',\n                    'email': document.getElementById('email') ? document.getElementById('email').value : '',\n                    'membership_type': document.getElementById('membership_type') ? document.getElementById('membership_type').value : '',\n                    'coupon_code': document.getElementById('coupon_code_input') ? document.getElementById('coupon_code_input').value : '',\n                    'temp_id': tempId\n                }\n            });\n        }\n\n        function completePaidRegistration(paymentId, formDataStr) {\n            showPopup('Finalizing your membership...', 'success');\n\n            const requestData = {\n                action: 'sgss_complete_paid_registration',\n                payment_id: paymentId,\n                payment_nonce: 'e1a761a897'\n            };\n            if (formDataStr) requestData.form_data = formDataStr;\n\n            jQuery.post('https:\/\/sgss.org.sa\/wp-admin\/admin-ajax.php', requestData, function (res) {\n                if (res.success) {\n                    sessionStorage.removeItem('sgss_pending_registration');\n                    localStorage.removeItem('sgss_pending_registration_backup'); \/\/ \u062a\u0646\u0638\u064a\u0641 \u0628\u0639\u062f \u0627\u0644\u0646\u062c\u0627\u062d\n                    showPopup('Success! Redirecting...', 'success');\n                    setTimeout(() => {\n                        window.location.href = 'https:\/\/sgss.org.sa\/en\/en\/sgss-profile';\n                    }, 1000);\n                } else {\n                    showPopup(res.data || 'Error finalizing registration', 'error');\n                    jQuery('#main-submit').prop('disabled', false).fadeIn();\n                }\n            });\n        }\n\n        window.sgssProcessFreeRegistration = function () {\n            let overlay = jQuery('<div id=\"sgss-sim-overlay\" style=\"position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:99999; display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; font-family:inherit; backdrop-filter:blur(5px);\"><div id=\"sgss-sim-loader\" style=\"width:60px; height:60px; border:5px solid rgba(255,255,255,0.2); border-top-color:#16a34a; border-radius:50%; animation:sgss-spin 1s linear infinite; margin-bottom:20px;\"><\/div><h3 id=\"sgss-sim-title\" style=\"margin:0; font-size:24px; font-weight:800;\">Processing...<\/h3><p id=\"sgss-sim-desc\" style=\"margin:10px 0 0; opacity:0.8; font-size:16px;\">Securing your registration and documents<\/p><style>@keyframes sgss-spin { to { transform: rotate(360deg); } }<\/style><\/div>');\n            jQuery('body').append(overlay);\n\n            setTimeout(function () {\n                overlay.find('#sgss-sim-title').text('Completed Successfully!');\n                overlay.find('#sgss-sim-desc').text('Forwarding to finalization...');\n                overlay.find('#sgss-sim-loader').css({ 'animation': 'none', 'border-color': '#16a34a', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center' }).html('<span style=\"font-size:35px;color:#16a34a;font-weight:bold;\">\u2713<\/span>');\n\n                setTimeout(function () {\n                    jQuery('#main-submit').click();\n                }, 1200);\n            }, 2000);\n        };\n\n        window.applyCoupon = function () {\n            if (document.getElementById('membership-coupon-section').style.display === 'none') {\n                return;\n            }\n            let code = $('#user_coupon').val();\n            if (!code) return;\n\n            $('#coupon-msg').css('color', '#666').text('Checking...');\n\n            $.post('https:\/\/sgss.org.sa\/wp-admin\/admin-ajax.php', {\n                action: 'sgss_check_coupon',\n                code: code,\n                amount: originalPrice,\n                context: 'membership'\n            }, function (res) {\n                if (res.success) {\n                    $('#coupon-msg').css('color', 'green').text(res.data.message);\n                    currentTotal = res.data.new_total;\n                    $('#coupon_code_input').val(code);\n                    $('#final_price').val(currentTotal);\n                    updateTotalDisplay();\n\n                    if (parseFloat(currentTotal) === 0) {\n                        $('#pro-payment-gateway').addClass('visible');\n                        $('.mysr-form').html('<div style=\"background:#f0fdf4; border:2px dashed #16a34a; padding:25px; border-radius:12px; text-align:center; margin:20px 0;\"><span style=\"font-size:40px; display:block; margin-bottom:10px;\">\ud83c\udf81<\/span><h3 style=\"color:#166534; margin:0; font-weight:800;\">100% Discount Applied<\/h3><p style=\"color:#15803d; margin:10px 0 20px;\">Membership is now free. Click the button below to complete activation.<\/p><button type=\"button\" onclick=\"sgssProcessFreeRegistration()\" style=\"background:#16a34a; color:white; border:none; padding:15px 30px; border-radius:8px; font-weight:800; cursor:pointer; font-size:16px; width:100%; box-shadow:0 10px 20px rgba(22,163,74,0.2);\">Confirm & Activate Registration<\/button><\/div>');\n                        $('#main-submit').hide(); \/\/ Hide the old button to use the inner one uniformly\n                    } else if ($('#pro-payment-gateway').hasClass('visible')) {\n                        let pendingDataStr = sessionStorage.getItem('sgss_pending_registration') || localStorage.getItem('sgss_pending_registration_backup');\n                        let pendingTempId = '';\n                        if (pendingDataStr) {\n                            try {\n                                let pendingObj = JSON.parse(pendingDataStr);\n                                pendingTempId = pendingObj.temp_id || '';\n                            } catch (e) { }\n                        }\n                        setupMoyasar(currentTotal, pendingTempId);\n                    }\n                } else {\n                    $('#coupon-msg').css('color', 'red').text(res.data.message);\n                }\n            });\n        };\n\n        const urlParams = new URLSearchParams(window.location.search);\n        const paymentStatus = urlParams.get('status');\n        if (paymentStatus === 'paid' || paymentStatus === 'paid_verified') {\n            let paymentId = urlParams.get('id') || urlParams.get('payment_id');\n            \/\/ \ud83d\udee1\ufe0f \u0627\u0644\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0645\u0632\u062f\u0648\u062c\u0629: \u0645\u062d\u0627\u0648\u0644\u0629 \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0645\u0646 \u0627\u0644\u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u0645\u0624\u0642\u062a\u0629\u060c \u0648\u0625\u0630\u0627 \u0633\u0642\u0637\u062a \u0646\u0623\u062e\u0630\u0647\u0627 \u0645\u0646 \u0627\u0644\u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u062f\u0627\u0626\u0645\u0629\n            let pendingData = sessionStorage.getItem('sgss_pending_registration') || localStorage.getItem('sgss_pending_registration_backup');\n\n            if (paymentId) {\n                \/\/ Overlay\n                jQuery('body').append('<div id=\"sgss-pay-overlay\" style=\"position:fixed; inset:0; background:rgba(255,255,255,0.95); z-index:9999; display:flex; align-items:center; justify-content:center;\"><div style=\"text-align:center;\"><div style=\"width:50px; height:50px; border:4px solid #52225e; border-top-color:transparent; border-radius:50%; margin:0 auto 20px; animation:sgssSpin 1s linear infinite;\"><\/div><h3 style=\"color:#52225e; margin:0;\">Verifying & Creating Account...<\/h3><\/div><\/div>');\n\n                completePaidRegistration(paymentId, pendingData);\n            }\n        }\n    });\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":23,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1492","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages\/1492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/comments?post=1492"}],"version-history":[{"count":1,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages\/1492\/revisions"}],"predecessor-version":[{"id":1818,"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/pages\/1492\/revisions\/1818"}],"wp:attachment":[{"href":"https:\/\/sgss.org.sa\/en\/wp-json\/wp\/v2\/media?parent=1492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}