/* ============================================ StudyOwner Login — extra styles (OTP step) Layered over login-style.css (shared login design) ============================================ */ /* Prevent horizontal panning from the decorative gradient blobs defined in login-style.css (body::before / body::after). Must clip both html and body, otherwise the body overflow propagates up to the root and creates a horizontal scrollbar. */ html, body { overflow-x: hidden; overflow-x: clip; } /* RTL pages put the vertical scrollbar on the LEFT, which pushes the centered content ~12px right and makes the logo/card look off-center. Moving the vertical scroll to the ROOT (html) and making it LTR puts the scrollbar on the RIGHT (symmetric), while body stays full-width and the visible content remains RTL via . */ html { direction: ltr; overflow-y: scroll; scrollbar-gutter: stable; } body { direction: rtl; overflow-y: clip; } /* Light page background (user preference) — a soft indigo/lavender gradient instead of the shared dark-purple one in login-style.css. Keeps the dark brand logo naturally visible without a white chip. */ body { background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 55%, #fdf4ff 100%); } /* Decorative blobs restyled for the light background */ body::before { background: rgba(99, 102, 241, 0.10); } body::after { background: rgba(168, 85, 247, 0.12); } /* Brand logo above the card — centered with logical margins */ .login-logo { display: block; margin-inline: auto; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(79, 70, 229, 0.20)); } /* The login card sits in a Bootstrap .row whose negative gutter margins (margin-right/left: calc(-.5 * --bs-gutter-x)) shift it ~12px to the RIGHT in RTL, so the card ended up off-center while the logo above it was dead-centered. Zeroing the row's horizontal margins makes the card center exactly under the logo. */ .login-container .row { margin-left: 0; margin-right: 0; } /* OTP recipient line (mobile number shown in step 2) */ .otp-recipient { padding: 0.75rem 1rem; background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 0.8rem; } /* Terms acceptance line under the mobile input (step 1) */ .terms-acceptance { margin-top: 0.75rem; font-size: 0.8rem; line-height: 1.7; color: #64748b; text-align: center; } .terms-acceptance a { color: #4f46e5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .terms-acceptance a:hover { color: #4338ca; } /* OTP boxes — fill from LEFT to RIGHT: Code1 is the leftmost box. The group is forced to LTR even inside the RTL page so the first digit goes into the leftmost box and typing proceeds rightwards. */ .otp-group { display: flex; flex-direction: row; direction: ltr; justify-content: center; gap: 0.75rem; } /* Center the "کد ۴ رقمی" label above the centered OTP boxes */ #step2Form .form-label { justify-content: center; } .code-input { width: 3.25rem; height: 3.75rem; font-size: 1.6rem; text-align: center; border: 1.5px solid #e6ebf2; border-radius: 0.8rem !important; background-color: #f8fafc; caret-color: #4f46e5; transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .code-input:focus { border-color: #4f46e5; background-color: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14); outline: none; } /* Back / change-number link */ .login-body .btn-link { font-size: 0.9rem; } /* Small screens */ @media (max-width: 576px) { .login-logo { max-width: 120px; } .code-input { width: 3rem; height: 3.4rem; font-size: 1.4rem; } .otp-group { gap: 0.55rem; } } /* Dark mode: shared login-style.css turns the card/form dark, but this page intentionally keeps a light theme (user preference). Re-apply the light colors so the page stays coherent in dark mode too. */ @media (prefers-color-scheme: dark) { .login-card { background: #fff; box-shadow: 0 20px 60px rgba(79, 70, 229, 0.18); } .login-body .form-control { background-color: #f8fafc; border-color: #e6ebf2; color: #1f2937; } .login-body .form-control:focus { background-color: #fff; border-color: #4f46e5; } .login-body .form-label { color: #333; } .login-body .form-label i { color: #4f46e5; } .login-footer { background: #f8f9fa; border-top-color: #e0e0e0; color: #666; } .otp-recipient { background: #f8fafc; border-color: #e2e8f0; } .code-input { background-color: #f8fafc; border-color: #e6ebf2; color: #1f2937; } .code-input:focus { background-color: #fff; border-color: #4f46e5; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .code-input, .login-card { transition: none !important; animation: none !important; } }