{"id":1529,"date":"2026-06-08T10:17:32","date_gmt":"2026-06-08T06:47:32","guid":{"rendered":"https:\/\/commagp.ir\/?page_id=1529"},"modified":"2026-08-11T12:02:33","modified_gmt":"2026-08-11T08:32:33","slug":"login","status":"publish","type":"page","link":"https:\/\/commagp.ir\/?page_id=1529","title":{"rendered":"\u0648\u0631\u0648\u062f"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1529\" class=\"elementor elementor-1529\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a49b307 e-flex e-con-boxed e-con e-parent\" data-id=\"a49b307\" 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-588940b elementor-widget elementor-widget-shortcode\" data-id=\"588940b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"form-login form-login--standard form-login--sms comma-sms-auth\" style=\"\r\n        --sms-shadow:#fbe6ea;\r\n        --sms-color:#9d182b;\r\n        --sms-color-hover:#f2afbc;\r\n        --register-color:#9d182b;\r\n        --register-color-hover:#f2afbc;\r\n        --login-link-color:#9d182b;\r\n    \">\r\n        <div class=\"alertMessages\" aria-live=\"polite\"><\/div>\r\n\r\n                    <div class=\"auth-card\">\r\n\r\n                <div class=\"auth-progress\" id=\"auth_progress\" aria-hidden=\"true\">\r\n                    <span class=\"is-active\" data-step=\"1\"><\/span>\r\n                    <span data-step=\"2\"><\/span>\r\n                <\/div>\r\n\r\n                <form method=\"post\" action=\"\" id=\"form_sms\" class=\"auth-form\" novalidate>\r\n\r\n                    <div class=\"auth-steps-viewport\">\r\n                        <div class=\"auth-steps\" id=\"auth_steps\">\r\n\r\n                            <!-- \u06af\u0627\u0645 \u06f1 : \u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644 -->\r\n                            <div class=\"auth-step auth-step--phone\">\r\n                                <div class=\"auth-step__icon\">\r\n                                    <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                        <path d=\"M17 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V4a2 2 0 00-2-2z\"\r\n                                            stroke=\"currentColor\" stroke-width=\"1.8\" \/>\r\n                                        <path d=\"M11 18h2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" \/>\r\n                                    <\/svg>\r\n                                <\/div>\r\n                                <h3>\u0648\u0631\u0648\u062f \u0628\u0627 \u06a9\u062f \u067e\u06cc\u0627\u0645\u06a9\u06cc<\/h3>\r\n                                <p class=\"auth-form__hint\">\u0627\u0628\u062a\u062f\u0627 \u06a9\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f\u060c \u0633\u067e\u0633 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647 \u0648 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f.<\/p>\r\n\r\n                                <label class=\"auth-field\">\r\n                                    <span class=\"auth-field__label\">\u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644<\/span>\r\n                                    <div class=\"auth-field__control\">\r\n                                        <svg class=\"auth-field__icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z\"\r\n                                                stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\r\n                                                stroke-linejoin=\"round\" \/>\r\n                                        <\/svg>\r\n                                        <input class=\"c-text-val\" type=\"tel\" name=\"user_number\" id=\"user_number\"\r\n                                            placeholder=\"09123456789\" inputmode=\"tel\" autocomplete=\"tel\" dir=\"ltr\" required>\r\n                                    <\/div>\r\n                                <\/label>\r\n\r\n                                <button type=\"button\" class=\"btn-send btn-send--secondary\" id=\"btn_send_sms_code\">\r\n                                    <span class=\"btn-send__text\">\u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u062f \u067e\u06cc\u0627\u0645\u06a9<\/span>\r\n                                    <span class=\"btn-send__spinner\" aria-hidden=\"true\"><\/span>\r\n                                <\/button>\r\n\r\n                                <p class=\"auth-form__footer\">\r\n                                    <a href=\"https:\/\/commagp.ir\/?page_id=1529\">\u0648\u0631\u0648\u062f \u0628\u0627 \u0627\u06cc\u0645\u06cc\u0644 \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631<\/a>\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <!-- \u06af\u0627\u0645 \u06f2 : \u06a9\u062f \u067e\u06cc\u0627\u0645\u06a9 -->\r\n                            <div class=\"auth-step auth-step--code\">\r\n                                <button type=\"button\" class=\"auth-step__back\" id=\"btn_back_step\" aria-label=\"\u0628\u0627\u0632\u06af\u0634\u062a\">\r\n                                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\r\n                                    <\/svg>\r\n                                <\/button>\r\n\r\n                                <div class=\"auth-step__icon\">\r\n                                    <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z\"\r\n                                            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" \/>\r\n                                    <\/svg>\r\n                                <\/div>\r\n\r\n                                <h3>\u06a9\u062f \u062a\u0627\u06cc\u06cc\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/h3>\r\n                                <p class=\"auth-form__hint\">\u06a9\u062f \u0627\u0631\u0633\u0627\u0644\u06cc \u0628\u0647 \u0634\u0645\u0627\u0631\u0647 <bdi class=\"auth-phone-display\" id=\"phone_display\"\r\n                                        dir=\"ltr\"><\/bdi> \u0631\u0627 \u0648\u0627\u0631\u062f \u0646\u0645\u0627\u06cc\u06cc\u062f<\/p>\r\n\r\n                                <div class=\"otp-boxes\" dir=\"ltr\" id=\"otp_boxes\">\r\n                                    <input type=\"text\" class=\"otp-box\" inputmode=\"numeric\" maxlength=\"1\"\r\n                                        autocomplete=\"one-time-code\">\r\n                                    <input type=\"text\" class=\"otp-box\" inputmode=\"numeric\" maxlength=\"1\">\r\n                                    <input type=\"text\" class=\"otp-box\" inputmode=\"numeric\" maxlength=\"1\">\r\n                                    <input type=\"text\" class=\"otp-box\" inputmode=\"numeric\" maxlength=\"1\">\r\n                                    <input type=\"text\" class=\"otp-box\" inputmode=\"numeric\" maxlength=\"1\">\r\n                                <\/div>\r\n\r\n                                <label class=\"auth-field auth-sms-code-field\" style=\"display:none;\">\r\n                                    <span class=\"auth-field__label\">\u06a9\u062f \u067e\u06cc\u0627\u0645\u06a9<\/span>\r\n                                    <input class=\"c-text-val\" type=\"text\" name=\"send-sms\" id=\"send-sms\" placeholder=\"\u06a9\u062f \u06f5 \u0631\u0642\u0645\u06cc\"\r\n                                        inputmode=\"numeric\" autocomplete=\"one-time-code\" maxlength=\"5\" required>\r\n                                <\/label>\r\n\r\n                                <div class=\"auth-resend\">\r\n                                    <span id=\"resend_timer_text\">\u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f \u06a9\u062f \u062a\u0627 <b id=\"resend_timer\">\u06f0\u06f1:\u06f0\u06f0<\/b><\/span>\r\n                                    <button type=\"button\" id=\"btn_resend_code\" class=\"auth-resend__btn\" disabled>\u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f\r\n                                        \u06a9\u062f<\/button>\r\n                                <\/div>\r\n\r\n                                <input type=\"submit\" name=\"send\" class=\"btn-send auth-sms-submit\" value=\"\u062a\u0623\u06cc\u06cc\u062f \u0648 \u0648\u0631\u0648\u062f\"\r\n                                    style=\"display:none;\">\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/form>\r\n            <\/div>\r\n            <\/div>\r\n\r\n    <style>\r\n        .comma-sms-auth.form-login {\r\n            display: block !important;\r\n            width: 100%;\r\n            max-width: 400px;\r\n            margin: 2.5rem auto;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .comma-sms-auth,\r\n        .comma-sms-auth * {\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .comma-sms-auth {\r\n            max-width: 400px;\r\n            margin: 0 auto;\r\n            font-family: inherit;\r\n        }\r\n\r\n        .comma-sms-auth .alertMessages:empty {\r\n            display: none;\r\n        }\r\n\r\n        .comma-sms-auth .alertMessages {\r\n            margin-bottom: 14px;\r\n        }\r\n\r\n        .comma-sms-auth .auth-card {\r\n            position: relative;\r\n            background: #fff;\r\n            border-radius: 22px;\r\n            padding: 38px 28px 32px;\r\n            box-shadow: 0 14px 45px var(--sms-shadow, rgba(0, 0, 0, .06)), 0 2px 10px rgba(0, 0, 0, .04);\r\n            overflow: hidden;\r\n            text-align: center;\r\n            width: 100%;\r\n            animation: comma-fade-in .5s ease both;\r\n        }\r\n\r\n        @keyframes comma-fade-in {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(8px)\r\n            }\r\n\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0)\r\n            }\r\n        }\r\n\r\n        .comma-sms-auth .auth-progress {\r\n            display: flex;\r\n            flex-direction: row-reverse;\r\n            gap: 6px;\r\n            justify-content: center;\r\n            margin-bottom: 55px;\r\n        }\r\n\r\n        .comma-sms-auth .auth-progress span {\r\n            height: 4px;\r\n            width: 26px;\r\n            border-radius: 4px;\r\n            background: #e9ebf2;\r\n            transition: width .35s ease, background .35s ease;\r\n        }\r\n\r\n        .comma-sms-auth .auth-progress span.is-active {\r\n            background: var(--sms-color, #0054F7);\r\n            width: 38px;\r\n        }\r\n\r\n        .comma-sms-auth .auth-step__icon {\r\n            width: 56px;\r\n            height: 56px;\r\n            margin: 0 auto 16px;\r\n            border-radius: 16px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: var(--sms-color, #0054F7);\r\n            background: color-mix(in srgb, var(--sms-color, #0054F7) 10%, #fff);\r\n            animation: comma-pop .45s cubic-bezier(.34, 1.56, .64, 1) both;\r\n        }\r\n\r\n        .comma-sms-auth .auth-step__icon--success {\r\n            color: #16a34a;\r\n            background: rgba(22, 163, 74, .1);\r\n        }\r\n\r\n        @keyframes comma-pop {\r\n            from {\r\n                transform: scale(.6);\r\n                opacity: 0\r\n            }\r\n\r\n            to {\r\n                transform: scale(1);\r\n                opacity: 1\r\n            }\r\n        }\r\n\r\n        .comma-sms-auth h3 {\r\n            margin: 0 0 8px;\r\n            font-size: 19px;\r\n            font-weight: 800;\r\n            color: #1a1a1a;\r\n        }\r\n\r\n        .comma-sms-auth .auth-form__hint {\r\n            margin: 0 0 22px;\r\n            font-size: 13.5px;\r\n            color: #8a8f9b;\r\n            line-height: 1.8;\r\n        }\r\n\r\n        .comma-sms-auth .auth-phone-display {\r\n            color: var(--sms-color, #0054F7);\r\n            font-weight: 700;\r\n            unicode-bidi: plaintext;\r\n        }\r\n\r\n        .comma-sms-auth .auth-steps-viewport {\r\n            overflow: hidden;\r\n            width: 100%;\r\n            direction: ltr;\r\n        }\r\n\r\n        .comma-sms-auth .auth-steps {\r\n            display: flex;\r\n            width: 200%;\r\n            direction: ltr;\r\n            transition: transform .55s cubic-bezier(.65, 0, .35, 1);\r\n        }\r\n\r\n        .comma-sms-auth .auth-steps.is-step-2 {\r\n            transform: translateX(-50%);\r\n        }\r\n\r\n        .comma-sms-auth .auth-step {\r\n            width: 50%;\r\n            flex: 0 0 50%;\r\n            min-width: 50%;\r\n            padding: 0 3px;\r\n            position: relative;\r\n            box-sizing: border-box;\r\n            direction: rtl;\r\n        }\r\n\r\n        .comma-sms-auth .auth-step--code {\r\n            visibility: hidden;\r\n            transition: visibility 0s linear .55s;\r\n        }\r\n\r\n        .comma-sms-auth .auth-steps.is-step-2 .auth-step--code {\r\n            visibility: visible;\r\n            transition-delay: 0s;\r\n        }\r\n\r\n        .comma-sms-auth .auth-steps.is-step-2 .auth-step--phone {\r\n            visibility: hidden;\r\n            transition: visibility 0s linear .55s;\r\n        }\r\n\r\n        .comma-sms-auth .auth-step__back {\r\n            position: absolute;\r\n            top: 0;\r\n            inset-inline-end: 0;\r\n            width: 34px;\r\n            height: 34px;\r\n            border-radius: 10px;\r\n            border: 1px solid #ececf1;\r\n            background: #fff;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: #666;\r\n            cursor: pointer;\r\n            transition: .2s;\r\n        }\r\n\r\n        .comma-sms-auth .auth-step__back:hover {\r\n            background: #f5f6f9;\r\n            color: #1a1a1a;\r\n        }\r\n\r\n        .comma-sms-auth .auth-field {\r\n            display: block;\r\n            text-align: right;\r\n            margin-bottom: 18px;\r\n            border-bottom: none;\r\n        }\r\n\r\n        .comma-sms-auth .auth-field__label {\r\n            display: block;\r\n            font-size: 12.5px;\r\n            color: #6b7280;\r\n            margin-bottom: 7px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .comma-sms-auth .auth-field__control {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        .comma-sms-auth .auth-field__icon {\r\n            position: absolute;\r\n            inset-inline-start: 14px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color: #9ca3af;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .comma-sms-auth .c-text-val {\r\n            width: 100% !important;\r\n            box-sizing: border-box !important;\r\n            padding: 14px 14px 14px 16px !important;\r\n            border-radius: 14px !important;\r\n            border: 1.6px solid #e5e7eb !important;\r\n            font-size: 15px;\r\n            background: #fafafa;\r\n            transition: .2s;\r\n            outline: none !important;\r\n            text-align: center;\r\n            line-height: normal;\r\n            height: auto;\r\n        }\r\n\r\n        .comma-sms-auth .c-text-val:focus {\r\n            border-color: var(--sms-color, #0054F7) !important;\r\n            background: #fff;\r\n            box-shadow: 0 0 0 4px color-mix(in srgb, var(--sms-color, #0054F7) 12%, transparent) !important;\r\n        }\r\n\r\n        .comma-sms-auth #user_number.c-text-val {\r\n            text-align: center;\r\n            direction: ltr;\r\n        }\r\n\r\n        .comma-sms-auth .otp-boxes {\r\n            display: flex;\r\n            direction: ltr !important;\r\n            gap: 13px;\r\n            justify-content: center;\r\n            margin: 4px 0 18px;\r\n        }\r\n\r\n        .comma-sms-auth .otp-box {\r\n            width: 46px;\r\n            height: 54px;\r\n            text-align: center;\r\n            font-size: 20px;\r\n            font-weight: 800;\r\n            border-radius: 13px;\r\n            border: 1.6px solid #e5e7eb;\r\n            background: #fafafa;\r\n            transition: .18s;\r\n            outline: none;\r\n            color: #1a1a1a;\r\n        }\r\n\r\n        .comma-sms-auth .otp-box:focus {\r\n            border-color: var(--sms-color, #0054F7);\r\n            background: #fff;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 16px color-mix(in srgb, var(--sms-color, #0054F7) 20%, transparent);\r\n        }\r\n\r\n        .comma-sms-auth .otp-box.is-filled {\r\n            border-color: var(--sms-color, #0054F7);\r\n        }\r\n\r\n        .comma-sms-auth .otp-box.is-shake {\r\n            animation: comma-shake .4s;\r\n        }\r\n\r\n        @keyframes comma-shake {\r\n\r\n            20%,\r\n            60% {\r\n                transform: translateX(-4px)\r\n            }\r\n\r\n            40%,\r\n            80% {\r\n                transform: translateX(4px)\r\n            }\r\n        }\r\n\r\n        .comma-sms-auth .auth-resend {\r\n            margin-bottom: 20px;\r\n            font-size: 13px;\r\n            color: #9098a4;\r\n        }\r\n\r\n        .comma-sms-auth .auth-resend__btn {\r\n            background: none;\r\n            border: none;\r\n            font-size: 13px;\r\n            font-weight: 700;\r\n            color: var(--sms-color-hover, #226cff);\r\n            cursor: pointer;\r\n            padding: 0;\r\n            display: none;\r\n        }\r\n\r\n        .comma-sms-auth .auth-resend__btn:not([disabled]) {\r\n            display: inline;\r\n        }\r\n\r\n        #resend_timer_text.is-hidden {\r\n            display: none;\r\n        }\r\n\r\n        .comma-sms-auth.form-login .btn-send,\r\n        .comma-sms-auth.form-login .btn-send--secondary,\r\n        .comma-sms-auth.form-login .auth-sms-submit {\r\n            width: 100%;\r\n            box-sizing: border-box;\r\n            border: none;\r\n            border-radius: 14px;\r\n            padding: 14px 18px;\r\n            font-size: 15px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            color: #fff !important;\r\n            background: linear-gradient(135deg, var(--sms-color, #0054F7), var(--sms-color-hover, #226cff));\r\n            box-shadow: 0 8px 20px color-mix(in srgb, var(--sms-color, #0054F7) 30%, transparent);\r\n            transition: transform .15s ease, box-shadow .15s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 8px;\r\n        }\r\n\r\n        .comma-sms-auth .btn-send:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 12px 26px color-mix(in srgb, var(--sms-color, #0054F7) 38%, transparent);\r\n        }\r\n\r\n        .comma-sms-auth .btn-send:active {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .comma-sms-auth.form-login .btn-send--secondary {\r\n            background: linear-gradient(135deg, var(--register-color, #0054F7), var(--register-color-hover, #0054F7));\r\n        }\r\n\r\n        .comma-sms-auth.form-login .auth-logged-in .btn-send {\r\n            color: #fff !important;\r\n        }\r\n\r\n        .comma-sms-auth .btn-send__spinner {\r\n            width: 16px;\r\n            height: 16px;\r\n            border-radius: 50%;\r\n            border: 2.5px solid rgba(255, 255, 255, .4);\r\n            border-top-color: #fff;\r\n            display: none;\r\n            animation: comma-spin .7s linear infinite;\r\n        }\r\n\r\n        .comma-sms-auth .btn-send.is-loading .btn-send__spinner {\r\n            display: inline-block;\r\n        }\r\n\r\n        .comma-sms-auth .btn-send.is-loading .btn-send__text {\r\n            opacity: .85;\r\n        }\r\n\r\n        @keyframes comma-spin {\r\n            to {\r\n                transform: rotate(360deg)\r\n            }\r\n        }\r\n\r\n        .comma-sms-auth .auth-form__footer {\r\n            margin: 18px 0 0;\r\n            font-size: 13.5px;\r\n        }\r\n\r\n        .comma-sms-auth.form-login .auth-form__footer a {\r\n            color: var(--login-link-color, #0054F7) !important;\r\n            text-decoration: none;\r\n            font-weight: 700;\r\n            position: relative;\r\n        }\r\n\r\n        .comma-sms-auth .auth-form__footer a::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            right: 0;\r\n            bottom: -3px;\r\n            width: 0;\r\n            height: 1.5px;\r\n            background: currentColor;\r\n            transition: width .25s;\r\n        }\r\n\r\n        .comma-sms-auth .auth-form__footer a:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        .comma-sms-auth .auth-logged-in .btn-send {\r\n            margin-top: 6px;\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n        (function () {\r\n            var wrap = document.currentScript.closest('.comma-sms-auth') || document.querySelector('.comma-sms-auth');\r\n            if (!wrap) return;\r\n\r\n            var stepsEl = wrap.querySelector('#auth_steps');\r\n            var progress = wrap.querySelectorAll('#auth_progress span');\r\n            var phoneInput = wrap.querySelector('#user_number');\r\n            var phoneDisplay = wrap.querySelector('#phone_display');\r\n            var realCodeInput = wrap.querySelector('#send-sms');\r\n            var codeFieldLabel = wrap.querySelector('.auth-sms-code-field');\r\n            var submitBtn = wrap.querySelector('.auth-sms-submit');\r\n            var sendBtn = wrap.querySelector('#btn_send_sms_code');\r\n            var backBtn = wrap.querySelector('#btn_back_step');\r\n            var otpBoxes = wrap.querySelectorAll('.otp-box');\r\n            var resendBtn = wrap.querySelector('#btn_resend_code');\r\n            var resendTimerText = wrap.querySelector('#resend_timer_text');\r\n            var resendTimerEl = wrap.querySelector('#resend_timer');\r\n\r\n            if (!stepsEl) return;\r\n\r\n            function toPersianDigits(str) {\r\n                var fa = ['\u06f0', '\u06f1', '\u06f2', '\u06f3', '\u06f4', '\u06f5', '\u06f6', '\u06f7', '\u06f8', '\u06f9'];\r\n                return String(str).replace(\/[0-9]\/g, function (d) { return fa[d]; });\r\n            }\r\n\r\n            function goToStep2() {\r\n                if (phoneDisplay) phoneDisplay.textContent = phoneInput ? phoneInput.value : '';\r\n                stepsEl.classList.add('is-step-2');\r\n                progress[1] && progress[1].classList.add('is-active');\r\n                setTimeout(function () { otpBoxes[0] && otpBoxes[0].focus(); }, 300);\r\n                if (sendBtn) sendBtn.classList.remove('is-loading');\r\n                startResendCountdown();\r\n            }\r\n\r\n            function goToStep1() {\r\n                stepsEl.classList.remove('is-step-2');\r\n                progress[1] && progress[1].classList.remove('is-active');\r\n                alreadyMoved = false;\r\n                if (codeFieldLabel) codeFieldLabel.style.display = 'none';\r\n                if (submitBtn) submitBtn.style.display = 'none';\r\n            }\r\n\r\n            if (sendBtn) {\r\n                sendBtn.addEventListener('click', function () {\r\n                    sendBtn.classList.add('is-loading');\r\n                });\r\n            }\r\n\r\n            if (backBtn) {\r\n                backBtn.addEventListener('click', goToStep1);\r\n            }\r\n\r\n            function isVisible(el) {\r\n                if (!el) return false;\r\n                var style = el.getAttribute('style') || '';\r\n                return style.indexOf('display:none') === -1 && style.indexOf('display: none') === -1;\r\n            }\r\n            var alreadyMoved = false;\r\n            function checkVisibility() {\r\n                if (alreadyMoved) return;\r\n                if (isVisible(codeFieldLabel) || isVisible(submitBtn)) {\r\n                    alreadyMoved = true;\r\n                    goToStep2();\r\n                }\r\n            }\r\n            if (codeFieldLabel) {\r\n                new MutationObserver(checkVisibility).observe(codeFieldLabel, { attributes: true, attributeFilter: ['style', 'class'] });\r\n            }\r\n            if (submitBtn) {\r\n                new MutationObserver(checkVisibility).observe(submitBtn, { attributes: true, attributeFilter: ['style', 'class'] });\r\n            }\r\n\r\n            \/\/ --- \u0628\u0627\u06a9\u0633\u200c\u0647\u0627\u06cc \u06a9\u062f \u067e\u06cc\u0627\u0645\u06a9 ---\r\n            function syncOtpToRealInput() {\r\n                var val = '';\r\n                otpBoxes.forEach(function (b) { val += b.value; });\r\n                if (realCodeInput) realCodeInput.value = val;\r\n                return val;\r\n            }\r\n\r\n            otpBoxes.forEach(function (box, idx) {\r\n                box.addEventListener('input', function () {\r\n                    box.value = box.value.replace(\/[^0-9]\/g, '').slice(0, 1);\r\n                    box.classList.toggle('is-filled', box.value.length > 0);\r\n                    if (box.value && otpBoxes[idx + 1]) otpBoxes[idx + 1].focus();\r\n                    var full = syncOtpToRealInput();\r\n                    if (full.length === otpBoxes.length && submitBtn) {\r\n                        submitBtn.click();\r\n                    }\r\n                });\r\n                box.addEventListener('keydown', function (e) {\r\n                    if (e.key === 'Backspace' && !box.value && otpBoxes[idx - 1]) {\r\n                        otpBoxes[idx - 1].focus();\r\n                    }\r\n                });\r\n                box.addEventListener('paste', function (e) {\r\n                    e.preventDefault();\r\n                    var text = (e.clipboardData || window.clipboardData).getData('text').replace(\/[^0-9]\/g, '');\r\n                    text.split('').forEach(function (ch, i) {\r\n                        if (otpBoxes[i]) { otpBoxes[i].value = ch; otpBoxes[i].classList.add('is-filled'); }\r\n                    });\r\n                    var last = Math.min(text.length, otpBoxes.length) - 1;\r\n                    if (otpBoxes[last]) otpBoxes[last].focus();\r\n                    var full = syncOtpToRealInput();\r\n                    if (full.length === otpBoxes.length && submitBtn) { submitBtn.click(); }\r\n                });\r\n            });\r\n\r\n            \/\/ \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0633\u06cc\u0646\u06a9 \u0634\u062f\u0646 \u0645\u0642\u062f\u0627\u0631 \u0642\u0628\u0644 \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u0641\u0631\u0645\r\n            var formEl = wrap.querySelector('#form_sms');\r\n            if (formEl) {\r\n                formEl.addEventListener('submit', syncOtpToRealInput);\r\n            }\r\n\r\n            \/\/ --- \u062a\u0627\u06cc\u0645\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u062c\u062f\u062f ---\r\n            var countdownTimer = null;\r\n            function startResendCountdown() {\r\n                var seconds = 60;\r\n                if (resendBtn) resendBtn.setAttribute('disabled', 'disabled');\r\n                if (resendTimerText) resendTimerText.classList.remove('is-hidden');\r\n                clearInterval(countdownTimer);\r\n                countdownTimer = setInterval(function () {\r\n                    seconds--;\r\n                    var m = String(Math.floor(seconds \/ 60)).padStart(2, '0');\r\n                    var s = String(seconds % 60).padStart(2, '0');\r\n                    if (resendTimerEl) resendTimerEl.textContent = toPersianDigits(m + ':' + s);\r\n                    if (seconds <= 0) {\r\n                        clearInterval(countdownTimer);\r\n                        if (resendTimerText) resendTimerText.classList.add('is-hidden');\r\n                        if (resendBtn) resendBtn.removeAttribute('disabled');\r\n                    }\r\n                }, 1000);\r\n            }\r\n\r\n            if (resendBtn) {\r\n                resendBtn.addEventListener('click', function () {\r\n                    otpBoxes.forEach(function (b) { b.value = ''; b.classList.remove('is-filled'); });\r\n                    syncOtpToRealInput();\r\n                    if (sendBtn) { sendBtn.classList.add('is-loading'); sendBtn.click(); }\r\n                    startResendCountdown();\r\n                });\r\n            }\r\n        })();\r\n    <\/script><\/div>\n\t\t\t\t\t\t<\/div>\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1529","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/commagp.ir\/index.php?rest_route=\/wp\/v2\/pages\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/commagp.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/commagp.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/commagp.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/commagp.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1529"}],"version-history":[{"count":0,"href":"https:\/\/commagp.ir\/index.php?rest_route=\/wp\/v2\/pages\/1529\/revisions"}],"wp:attachment":[{"href":"https:\/\/commagp.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}