<div class="woocommerce-notices-wrapper"></div>

<!-- Toaster مدرن برای پیام‌های جاوااسکریپت -->
<div class="toaster">
    <div class="popdismiss"><i class="fas fa-times"></i></div>
    <div id="message" class="msg_tel"></div>  
</div>

<div class="cui-login-page" dir="rtl">
    
    <!-- دایره‌های رنگی پس‌زمینه گوشه‌ها -->
    <div class="cui-bg-blob cui-bg-blob--1"></div>
    <div class="cui-bg-blob cui-bg-blob--2"></div>

    <div class="cui-login-container">
        <div class="cui-card cui-login-card">
            
            <!-- بخش راست: 60 درصد - فرم‌ها (تب‌ها) -->
            <div class="cui-login-form-side">
                
                <div class="cui-login-header-brand">
                    <a href="https://classinar.ir/">
                        <img src="https://app.classinar.ir/wp-content/uploads/2021/08/logo-classinar.webp" alt="کلاسینار" class="cui-login-logo">
                    </a>
                </div>

                <!-- ================== TAB 1: PHONE NUMBER ================== -->
                <div id="tab-phone" class="tabcontent_login">
                    <div id="get-phone-form">
                        <div class="cui-login-header-brand">
                            <h2>ثبت‌نام / ورود</h2>
                            <p>جهت ورود یا ثبت‌نام، شماره موبایل خود را وارد کنید.</p>
                        </div>
                        
                        <div class="cui-form arianlogin-phone">
                            <div class="cui-field">
                                <label for="get-phone-form-lbl">شماره موبایل</label>
                                <div class="cui-control">
                                    <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-mobile-alt"></i></span>
                                    <input id="get-phone-form-lbl" type="tel" class="cui-input input-text" name="billing_phone" placeholder="مثال: 09123456789" value=""/>
                                </div>
                            </div>

                            <div class="cui-form-actions" style="margin-top: 24px;">
                                <button id="get-phone-form-btn" class="cui-btn cui-btn--primary" name="code" value="g">ارسال شماره</button>
                            </div>
                            <input type="hidden" id="get-phone-form-nonce" name="get-phone-form-nonce" value="9b2f6c3c55" /><input type="hidden" name="_wp_http_referer" value="/app/wp/v2/pages/6907" />                        </div>
                    </div> 
                </div>

                <!-- ================== TAB 2: LOGIN (PASSWORD & OTP) ================== -->
                <div id="tab-login" class="tabcontent_login">
                    <div class="my-woo-login">
                        <div class="cui-login-header-brand">
                            <h2>ورود به حساب</h2>
                            <p>رمز عبور خود را وارد کنید یا با پیامک یکبارمصرف وارد شوید.</p>
                        </div>

                        <form class="myloginform cui-form" method="post">
                            
                            <div id="username_div" class="cui-field form-row">
                                <label for="username">نام کاربری یا ایمیل&nbsp;<span class="required">*</span></label>
                                <div class="cui-control">
                                    <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-user"></i></span>
                                    <input type="text" class="cui-input input-text" name="username" id="username" autocomplete="username" placeholder="نام کاربری یا ایمیل" value="" />
                                </div>
                            </div>

                            <div id="myloginform-pass" class="cui-field form-row">
                                <label for="password">گذرواژه را وارد نمایید&nbsp;<span class="required">*</span></label> 
                                <div class="cui-control">
                                    <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-lock"></i></span>
                                    <input class="cui-input input-text" placeholder="رمز عبور" type="password" name="password" id="password" autocomplete="current-password" />
                                </div>
                            </div>

                            
                            <div class="cui-row cui-row--between cui-login-options">
                                <label class="cui-checkbox-label" for="rememberme">
                                    <input name="rememberme" type="checkbox" id="rememberme" value="forever" checked/>
                                    <span>مرا به خاطر بسپار</span>
                                </label>
                                <a href="https://app.classinar.ir/reset-password" class="cui-forgot-link">بازنشانی رمز عبور</a>
                            </div>

                            <div class="cui-form-actions">
                                <button id="my-login-btn" type="submit" class="cui-btn cui-btn--primary" name="login" value="ورود">ورود به حساب</button>
                            </div>
                            
                            <div class="cui-login-divider">
                                <span>یا</span>
                            </div>

                            <div class="cui-form-actions cui-otp-actions">
                                <p id="countdowntimer" class="cui-countdown"></p>
                                <button id="onepass" name="onepass" class="cui-btn cui-btn--soft">ورود با رمز یکبار مصرف (پیامک)</button>
                            </div>

                            <div style="margin-top: 15px; text-align: center;">
                                <button id="get-back" class="cui-btn cui-btn--outline" type="button" name="get-back" value=""><i class="fas fa-arrow-right"></i> تغییر شماره</button>
                            </div>

                                                    </form>
                    </div>  
                </div>

                <!-- ================== TAB 3: REGISTER ================== -->
                <div id="tab-register" class="tabcontent_login">
                    <div class="my-woo-register">
                        <div class="cui-login-header-brand">
                            <h2>تکمیل ثبت‌نام</h2>
                            <p>برای تکمیل ثبت‌نام، مشخصات زیر را وارد کنید.</p>
                        </div>

                        <form method="post" class="myregisterform cui-form register" >
                            
                            <input type="hidden" id="login_type" name="login_type" value="password" >

                            <div class="cui-field form-row">
                                <label for="billing_phone_code">کد پیامک ارسال شده</label>
                                <div class="cui-control">
                                    <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-envelope-open-text"></i></span>
                                    <input type="tel" class="cui-input input-text" name="billing_phone_code" id="billing_phone_code" required placeholder="کد 5 رقمی پیامک شده"/>
                                </div>
                            </div>

                            <div class="cui-row cui-row--gap">
                                <div class="cui-field form-row" style="flex: 1;">
                                    <label for="billing_first_name">نام</label>
                                    <div class="cui-control">
                                        <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-user"></i></span>
                                        <input type="text" class="cui-input input-text" name="billing_first_name" id="billing_first_name" required placeholder="نام شما" />
                                    </div>
                                </div>
                                <div class="cui-field form-row" style="flex: 1;">
                                    <label for="billing_last_name">نام خانوادگی</label>
                                    <div class="cui-control">
                                        <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-user"></i></span>
                                        <input type="text" class="cui-input input-text" name="billing_last_name" id="billing_last_name" required placeholder="نام خانوادگی شما" />
                                    </div>
                                </div>
                            </div>

                            <div class="cui-field form-row">
                                <label for="reg_email">آدرس ایمیل</label>
                                <div class="cui-control">
                                    <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-at"></i></span>
                                    <input type="email" class="cui-input input-text" name="email" id="reg_email" placeholder="example@mail.com" required autocomplete="email" value="" />
                                </div>
                            </div>

                            
                                                            <div class="cui-field form-row">
                                    <label for="reg_password">رمز عبور</label>
                                    <div class="cui-control">
                                        <span class="cui-control__icon" aria-hidden="true"><i class="fas fa-lock"></i></span>
                                        <input type="password" class="cui-input input-text" placeholder="رمز عبور قوی انتخاب کنید" required name="password" id="reg_password" autocomplete="new-password" />
                                    </div>
                                </div>
                            
                            <wc-order-attribution-inputs></wc-order-attribution-inputs><div class="woocommerce-privacy-policy-text"></div>
                            <div class="cui-form-actions" style="margin-top: 20px;">
                                <button id="register-btn" type="submit" class="cui-btn cui-btn--primary" name="register" value="تکمیل ثبت‌نام">تکمیل ثبت‌نام</button>
                            </div>

                            <div style="margin-top: 15px; text-align: center;">
                                <button id="get-back2" class="cui-btn cui-btn--outline" type="button" name="get-back" value=""><i class="fas fa-arrow-right"></i> انصراف و تغییر شماره</button>
                            </div>

                                                    </form>
                    </div>
                </div>

            </div>

            <!-- بخش چپ: 40 درصد - اطلاعات و راهنما -->
            <div class="cui-login-info-side">
                <div class="cui-login-info-content">
                    <div class="cui-login-info-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>نکات ضروری امنیت حساب</h3>
                    <ul class="cui-security-list">
                        <li><i class="fas fa-check-circle"></i><span>برای ورود از مرورگرهای امن و به‌روز مانند کروم و فایرفاکس استفاده کنید.</span></li>
                        <li><i class="fas fa-check-circle"></i><span>از پرداخت و خرید محصولات برای دیگران جداً خودداری فرمایید.</span></li>
                        <li><i class="fas fa-check-circle"></i><span>جهت امنیت بیشتر، از کلمات عبور ترکیبی و قوی استفاده نمایید.</span></li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="cui-login-footer-back">
            <a href="https://classinar.ir"><i class="fas fa-arrow-right"></i> رفتن به صفحه اصلی کلاسینار</a>
        </div>
    </div>
</div>

<!-- استایل‌های ترکیب‌شده صفحه ورود و ثبت‌نام هماهنگ با CUI و اسکریپت اصلی -->
<style>
/* Reset & Fonts (مستثنی کردن آیکون‌های FontAwesome و Dashicons از فونت ایران‌سنس) */
.cui-login-page, 
.cui-login-page *:not(.fas):not(.far):not(.fab):not(.dashicons) {
    font-family: "iransans", Tahoma, Arial, sans-serif !important;
    box-sizing: border-box;
}

.cui-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4f9, #e4ecf7) !important;
    padding: 15px;
    direction: rtl;
    position: relative;
    overflow: visible !important;
    border-radius:20px;
}

/* Tab Logic */
.tabcontent_login {
    display: none;
    animation: fadeEffect 0.4s;
}
@keyframes fadeEffect {
    from {opacity: 0; transform: translateY(5px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Background Blobs */
.cui-bg-blob {
    position: fixed !important;
    border-radius: 50% !important;
    filter: blur(80px) !important;
    z-index: 0 !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
}
.cui-bg-blob--1 { width: 450px !important; height: 450px !important; background: rgba(175, 205, 250, 0.7) !important; top: -80px !important; right: -80px !important; }
.cui-bg-blob--2 { width: 500px !important; height: 500px !important; background: rgba(190, 215, 255, 0.6) !important; bottom: -100px !important; left: -100px !important; }

/* Grid Card 60/40 */
.cui-login-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.cui-login-card {
    display: grid;
    grid-template-columns: 60% 40% !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid rgba(230, 235, 245, 0.9) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 45px rgba(15, 36, 87, 0.08) !important;
}

/* Right Side - Forms */
.cui-login-form-side {
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cui-login-header-brand {
    text-align: center;
    margin-bottom: 20px;
}
.cui-login-logo {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}
.cui-login-header-brand h2 {
    margin: 0;
    color: #0f2457;
    font-size: 20px;
    font-weight: 900;
}
.cui-login-header-brand p {
    margin: 6px 0 0;
    color: #7d899f;
    font-size: 12.5px;
    font-weight: 400;
}

/* Form Elements */
.cui-field { margin-bottom: 14px; }
.cui-field label {
    display: block;
    margin-bottom: 5px;
    color: #0f2457;
    font-size: 12.5px;
    font-weight: 700;
}
.cui-control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.cui-control__icon {
    position: absolute;
    right: 14px;
    color: #1769e0;
    font-size: 14px;
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cui-input {
    width: 100% !important;
    height: 42px !important;
    padding: 6px 36px 6px 14px !important;
    color: #142342 !important;
    background: #fff7f7 !important;
    border: 1px solid #d8e1ed !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s;
    text-align: center !important;
}
.cui-input:focus {
    border-color: #1769e0 !important;
    box-shadow: 0 0 0 4px rgba(23, 105, 224, 0.08) !important;
}
.cui-input:-webkit-autofill,
.cui-input:-webkit-autofill:hover, 
.cui-input:-webkit-autofill:focus, 
.cui-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #142342 !important;
    transition: background-color 5000s ease-in-out 0s;
}
.cui-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cui-row--gap {
    gap: 15px;
}
.cui-login-options {
    margin: 10px 0 16px;
    font-size: 12px;
}

/* Checkbox */
.cui-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #142342;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    z-index: 100;
    pointer-events: auto !important;
}
.cui-checkbox-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    position: relative !important;
    opacity: 1 !important;
    z-index: 101 !important;
    margin: 0 !important;
}

/* Links & Buttons */
.cui-forgot-link {
    color: #1769e0;
    font-weight: 700;
    text-decoration: none;
    z-index: 100;
}
.cui-forgot-link:hover { text-decoration: underline; }

.cui-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 6px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    border: none !important;
    width: 100%;
}
.cui-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #1769e0, #1257be) !important;
    box-shadow: 0 4px 12px rgba(23, 105, 224, 0.2) !important;
}
.cui-btn--primary:hover { box-shadow: 0 6px 16px rgba(23, 105, 224, 0.27) !important; }
.cui-btn--soft {
    color: #1769e0 !important;
    background: #edf4ff !important;
    border: 1px solid #dce9fb !important;
}
.cui-btn--soft:hover { background: #e3effd !important; }
.cui-btn--outline {
    background: transparent !important;
    color: #7d899f !important;
    border: 1px solid #d8e1ed !important;
}
.cui-btn--outline:hover { background: #f4f7fb !important; color: #142342 !important; }

/* Divider */
.cui-login-divider {
    position: relative;
    text-align: center;
    margin: 16px 0;
}
.cui-login-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e6ebf2;
}
.cui-login-divider span {
    position: relative;
    background: #fff;
    padding: 0 12px;
    color: #7d899f;
    font-size: 11.5px;
    font-weight: 700;
}

/* Left Column Info */
.cui-login-info-side {
    background: linear-gradient(135deg, #0f2457, #1769e0) !important;
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius:10px;
}
.cui-login-info-content h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    margin: 14px 0 10px;
}
.cui-login-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 12px;
    font-size: 18px;
}
.cui-security-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cui-security-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(238, 245, 255, 0.85);
}
.cui-security-list li i { color: #34d399; margin-top: 3px; }

/* Toaster Alerts */
.toaster {
    z-index: 9999999;
    direction: rtl;
    position: fixed;
    display: none;
    bottom: 20px;
    left: 20px;
    min-width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 16px 20px;
    border-right: 4px solid #1769e0;
    font-family: "iransans", Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
.toaster.arian_error {
    border-right-color: #dc3158;
    background: #fff0f3;
    color: #dc3158;
}
.toaster.arian_updated {
    border-right-color: #34d399;
    background: #ecfdf5;
    color: #059669;
}
.toaster .popdismiss {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.6;
}
.toaster .popdismiss:hover { opacity: 1; }
.toaster .msg_tel { margin-left: 20px; }
.error_notif { border: 1px solid #dc3158 !important; }

/* Utilities */
.cui-countdown { 
    text-align: center; 
    margin-bottom: 8px; 
    margin-top: 0;
    font-size: 12px; 
    color: #7d899f; 
    font-weight: 700; 
    min-height: 18px;
}
.cui-auto-pass-msg { font-size: 12px; color: #7d899f; margin-bottom: 15px; text-align: center; }
.cui-login-footer-back { text-align: center; margin-top: 14px; position: relative; z-index: 5; }
.cui-login-footer-back a { color: #7d899f; font-size: 12.5px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cui-login-footer-back a:hover { color: #1769e0; }

@media (max-width: 860px) {
    .cui-login-card { grid-template-columns: 1fr !important; }
    .cui-login-info-side { display: none; }
    .cui-login-form-side { padding: 24px; }
    .cui-row--gap { flex-direction: column; gap: 0; }
}
</style>

{"id":6907,"date":"2021-10-15T19:01:27","date_gmt":"2021-10-15T19:01:27","guid":{"rendered":"https:\/\/classinar.ir\/vclass\/?page_id=6907"},"modified":"2022-05-28T13:08:35","modified_gmt":"2022-05-28T13:08:35","slug":"register","status":"publish","type":"page","link":"https:\/\/app.classinar.ir\/register\/","title":{"rendered":"arianlogin"},"content":{"rendered":"\n","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-6907","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/app.classinar.ir\/app\/wp\/v2\/pages\/6907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.classinar.ir\/app\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.classinar.ir\/app\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.classinar.ir\/app\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.classinar.ir\/app\/wp\/v2\/comments?post=6907"}],"version-history":[{"count":0,"href":"https:\/\/app.classinar.ir\/app\/wp\/v2\/pages\/6907\/revisions"}],"wp:attachment":[{"href":"https:\/\/app.classinar.ir\/app\/wp\/v2\/media?parent=6907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}