/* Login/registration (OTP) page — matches reera-auth.html. Real backend: shirini-customer-auth's sca_request_otp / sca_verify_otp AJAX actions. This is the theme's one fully standalone page — no header/footer/ .home-frame at all (page-my-account.php's guest branch builds its own bare instead of calling get_header()/get_footer()), a plain white page with everything centered both ways. */ body.reera-auth-standalone{ background:var(--surface); } .auth-main{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-8); padding:var(--sp-12) var(--sp-6); } .auth-logo{ display:flex; align-items:center; justify-content:center; } .auth-logo img{ height:80px; width:auto; display:block; } /* دیگر یک "کارت" (بدون border/background/shadow/padding) نیست — فقط عرض فرم را محدود می‌کند، طبق درخواست کاربر که چهارچوب کارت حذف شود؛ id به‌جای کلاس چون auth-page.js با getElementById('authCard') و success-mode.classList همین المان را پیدا/تغییر می‌دهد. */ #authCard{ width:100%; max-width:400px; } /* پیام اختصاصی کمپین (?utm_campaign=...، مثلاً QR کد بسته‌بندی) — بالای فرم ورود، همون رنگ‌های "highlight" که در خلاصه‌ی سبد خرید برای ردیف تخفیف/کیف‌پول استفاده می‌شود (base.css: .summary-row--highlight). */ .auth-campaign-banner{ width:100%; max-width:400px; background:var(--olive-container); border:1px solid var(--olive); color:var(--on-olive-container); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); font-size:13px; font-weight:600; text-align:center; line-height:1.7; margin-bottom:var(--sp-2); } .auth-sub{ font-size:13px; color:var(--on-surface-variant); text-align:center; margin-top:6px; } .auth-message{ font-size:13px; text-align:center; min-height:18px; margin-top:var(--sp-4); font-weight:600; } .auth-message.error{ color:var(--error); } .auth-message.success{ color:var(--success); } .auth-field{ margin-top:var(--sp-6); display:flex; flex-direction:column; gap:6px; } .auth-field label{ font-size:13px; font-weight:600; } .auth-field input[type=tel]{ border:1.5px solid var(--outline); border-radius:var(--r-sm); padding:13px 14px; font-size:16px; background:var(--surface); color:var(--on-surface); direction:ltr; text-align:center; letter-spacing:1px; } .auth-field input[type=tel]:focus{ border-color:var(--primary); outline:none; } .auth-field input.invalid{ border-color:var(--error); } .auth-toggle{ margin-top:var(--sp-4); font-size:12.5px; color:var(--primary); font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; background:none; border:none; padding:0; } .auth-toggle svg{ width:14px; height:14px; transition:transform .2s ease; } .auth-toggle.open svg{ transform:rotate(180deg); } .auth-referral{ display:none; margin-top:var(--sp-3); } .auth-referral.open{ display:block; } .auth-referral input[type=text]{ width:100%; border:1.5px solid var(--outline); border-radius:var(--r-sm); padding:11px 14px; font-size:14px; background:var(--surface); color:var(--on-surface); } .auth-referral input[type=text]:focus{ border-color:var(--primary); outline:none; } .auth-referral-chip{ display:none; align-items:center; gap:6px; background:var(--caramel-container); color:var(--on-caramel-container); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:var(--r-sm); margin-top:var(--sp-3); } .auth-referral-chip svg{ width:15px; height:15px; flex:none; } .auth-submit{ margin-top:var(--sp-6); } .auth-submit .btn{ width:100%; } /* step 2: code */ .auth-step[data-step="code"]{ display:none; } .auth-phone-display{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:14.5px; font-weight:700; margin-top:var(--sp-2); direction:ltr; } .auth-edit-phone{ font-size:12.5px; font-weight:600; color:var(--primary); background:none; border:none; cursor:pointer; padding:0; direction:rtl; } .otp-boxes{ display:flex; gap:8px; justify-content:center; direction:ltr; margin-top:var(--sp-6); } .otp-boxes input{ width:42px; height:50px; text-align:center; font-size:19px; font-weight:700; border:1.5px solid var(--outline); border-radius:var(--r-sm); background:var(--surface); color:var(--on-surface); padding:0; } .otp-boxes input:focus{ border-color:var(--primary); outline:none; } .otp-boxes input.invalid{ border-color:var(--error); } @media (max-width:380px){ .otp-boxes{ gap:6px; } .otp-boxes input{ width:38px; height:46px; font-size:17px; } } .auth-resend{ text-align:center; font-size:12.5px; color:var(--on-surface-variant); margin-top:var(--sp-4); } .auth-resend button{ color:var(--primary); font-weight:700; background:none; border:none; cursor:pointer; padding:0; font-size:inherit; font-family:inherit; } .auth-resend button:disabled{ color:var(--on-surface-variant); cursor:not-allowed; } /* success state */ .auth-success{ display:none; flex-direction:column; align-items:center; gap:12px; text-align:center; } .auth-success.showing{ display:flex; } .auth-success .check{ width:56px; height:56px; border-radius:50%; background:var(--caramel-container); display:flex; align-items:center; justify-content:center; } .auth-success .check svg{ width:28px; height:28px; color:var(--success); } .auth-success h2{ font-size:18px; } .auth-success p{ font-size:13px; color:var(--on-surface-variant); } #authCard.success-mode .auth-step, #authCard.success-mode .auth-sub{ display:none; }