/* * Dedicated styles for the /registerv2 and /register-info-v2 pages only. * Scoped under .register-v2-page so nothing here leaks into /login, * /loginv2, /register, the dashboard, or any other page. This file is only * ever linked from those two standalone pages, so the bare `html` selector * below only ever touches the one element on whichever of those two * pages loaded it. */ /* `overflow:hidden` set directly on (below) gets propagated to the viewport by the UA instead of clipping at body's own box — a spec'd HTML quirk. Without this, the decorative :before/:after shapes (each wider than the viewport on narrow screens) inflate document.body.scrollWidth past the viewport width under RTL, which can shift/clip the whole page on real narrow/mobile browsers. This restores the clip at the root. */ html{ overflow-x:hidden; } .register-v2-page, .register-v2-page *{ box-sizing:border-box; } .register-v2-page{ min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:24px; font-family:'Segoe UI',Tahoma,Arial,sans-serif; background: radial-gradient(circle at 15% 20%,rgba(0,214,255,.35),transparent 34%), radial-gradient(circle at 85% 25%,rgba(39,93,255,.45),transparent 40%), radial-gradient(circle at 18% 90%,rgba(0,76,190,.45),transparent 40%), linear-gradient(135deg,#0e9eea 0%,#087ee8 45%,#0759df 100%); } /* position:fixed (not absolute): see login-v2.css for the full explanation * of the actual root cause (the html{overflow-x:hidden} above only masked * document.documentElement.scrollWidth, not document.body.scrollWidth — * this removes the inflated scrollable-overflow contribution at the * source, at every viewport, with no visual change since .register-v2-page * fills the viewport exactly). */ .register-v2-page:before{ content:"";position:fixed;width:850px;height:850px;top:-300px; border-radius:45%;background:rgba(255,255,255,.06);transform:rotate(12deg); inset-inline-end:-180px; } .register-v2-page:after{ content:"";position:fixed;width:900px;height:450px;bottom:-220px; border-radius:50%;background:rgba(0,43,150,.22);transform:rotate(-15deg); inset-inline-start:-180px; } .register-v2-card{ width:480px; max-width:100%; background:#fff; border-radius:30px; padding:27px 24px 25px; position:relative; z-index:2; box-shadow:0 25px 60px rgba(0,36,120,.20); } /* Top-right logo, matching login-v2's placement: a flex row with no justify-content override defaults to main-start, which is the physical right edge under this page's RTL direction. */ .register-v2-logo{ display:flex; align-items:center; margin-bottom:15px; } .register-v2-logo img{ max-height:36px; width:auto; } .register-v2-card h1{ color:#414957; font-size:37px; line-height:1.25; font-weight:800; margin-bottom:22px; } .register-v2-avatar{ width:112px; height:112px; border-radius:50%; margin:0 auto 25px; background: radial-gradient(circle at 52% 48%,#07133e 0 37%,#172a65 38% 57%,transparent 58%), conic-gradient(#56cde0 0 25%,#ff7474 25% 42%,#68dfa7 42% 70%,#2569f2 70% 100%); border:7px solid #fff; box-shadow:0 1px 7px rgba(0,0,0,.08); } .register-v2-alert{ background:#fff3cd; border:1px solid #ffe69c; color:#664d03; border-radius:14px; padding:12px 16px; font-size:14px; margin-bottom:20px; } .register-v2-field{ margin-bottom:22px; } .register-v2-field label{ display:block; text-align:right; font-size:15px; line-height:1.5; font-weight:700; color:#293244; margin:0 0 7px; } .register-v2-field input, .register-v2-field select, .register-v2-field textarea{ width:100%; border:1px solid #c9d5e5; border-radius:24px; height:48px; outline:0; background:#fff; color:#46536a; font-size:16px; font-weight:500; font-family:inherit; text-align:right; direction:rtl; padding:0 17px; transition:border-color .2s,box-shadow .2s; } .register-v2-field input:focus, .register-v2-field select:focus, .register-v2-field textarea:focus{ border-color:#1764e8; box-shadow:0 0 0 3px rgba(23,100,232,.10); } .register-v2-field input::placeholder, .register-v2-field textarea::placeholder{ color:#8a94a6; } .register-v2-field input[type="tel"]{ direction:ltr; text-align:right; } .register-v2-field textarea{ height:168px; resize:none; padding:13px 17px; } /* Icon-bearing inputs (name/phone/email/password on registerv2). The shared default puts the icon at the input's physical RIGHT edge (used by name/email/password-lock); phone is the one exception, scoped back to the physical LEFT below. Deliberately `left`/`right`, never inset-inline-start/end, so no position can flip under RTL. */ .register-v2-input-wrapper{ position:relative; } .register-v2-input-wrapper input{ padding-left:17px; padding-right:48px; } .register-v2-input-icon{ position:absolute; right:17px; left:auto; top:50%; transform:translateY(-50%); z-index:3; color:#52627a; font-size:22px; pointer-events:none; } .register-v2-input-icon svg{ display:block; } /* Password: eye toggle fixed at the physical LEFT, lock icon at the physical RIGHT (already the shared default above, so no icon-position override is needed here) — the one field with an icon on each side. Deliberately `left`/`right`, never inset-inline-start/end, so neither can flip under this page's RTL direction. */ #registerv2-password{ padding-left:45px; padding-right:48px; } .register-v2-password-toggle{ position:absolute; left:11px; right:auto; top:50%; transform:translateY(-50%); z-index:4; border:0; background:transparent; color:#8a97ad; cursor:pointer; font-size:16px; padding:4px 6px; line-height:1; } .register-v2-password-toggle:hover{ color:#52627a; } /* Password strength meter: a sibling of .register-v2-input-wrapper (not a child), so it stacks directly below the password input in normal block flow — never inside it, never affecting its height. Its width matches the input's automatically since both are plain block children of the same .register-v2-field. The fill bar is a plain unfloated block with explicit width/margin, so it always renders flush against the physical LEFT edge of the track and grows rightward, regardless of the page's RTL direction. */ .register-v2-strength{ margin-top:10px; } .register-v2-strength-track{ width:100%; height:6px; border-radius:999px; background:#e7ecf3; overflow:hidden; /* A plain in-flow block box with leftover width anchors to its container's "start" edge, and start=right under this page's inherited direction:rtl — which put the fill on the right, growing leftward. Forcing ltr here makes start=left so the fill deterministically anchors and grows from the physical left, matching the required visual, regardless of page direction. */ direction:ltr; } .register-v2-strength-fill{ height:100%; width:0%; margin:0; border-radius:999px; background:#dc3545; transition:width .3s ease,background-color .3s ease; } .register-v2-strength-fill[data-level="very-weak"]{background:#dc3545;} .register-v2-strength-fill[data-level="weak"]{background:#fd7e14;} .register-v2-strength-fill[data-level="medium"]{background:#ffc107;} .register-v2-strength-fill[data-level="strong"]{background:#8bc34a;} .register-v2-strength-fill[data-level="very-strong"]{background:#16a34a;} .register-v2-strength-label{ display:block; min-height:16px; margin-top:6px; font-size:13px; font-weight:600; text-align:right; color:#52627a; transition:color .3s ease; } /* Phone: no icon on this field — just the local-number input and the flag+dial-code selector pinned to the physical RIGHT. Explicit left/right, never logical properties, so nothing can flip under RTL. The plain 17px left padding matches the non-icon side of the other inputs; the 86px right padding is only what the selector actually needs (8px right offset + its 70px width + an 8px gap) so the number never overlaps it. text-align:right/direction:rtl here override the shared `input[type="tel"]` rule above (which sets direction:ltr) so the digits start from the RIGHT edge of this padded box and grow toward the left; #id beats that rule's higher (class+element+attribute) specificity regardless of source order. */ .register-v2-phone-wrapper input{ padding-left:17px; padding-right:86px; } #registerv2-phone{ text-align:right; direction:rtl; } .register-v2-phone-wrapper .register-v2-phone-country{ position:absolute; right:4px; left:auto; top:6px; width:70px; height:36px; z-index:3; border:0; border-radius:20px; background-color:#eef2f9; color:#293244; font-size:12px; font-weight:700; font-family:inherit; direction:ltr; text-align:center; padding:0 18px 0 8px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2352627a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:10px 6px; cursor:pointer; outline:0; } .register-v2-phone-wrapper .register-v2-phone-country:focus{ box-shadow:0 0 0 3px rgba(23,100,232,.15); } /* Native select arrow, mirrored to the RTL start (physical left) edge so it never collides with RTL text, with room reserved via padding. */ .register-v2-field select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-left:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2352627a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 17px center; } .register-v2-field select:invalid{ color:#8a94a6; } .register-v2-error{ color:#dc3545; font-size:13px; font-weight:600; margin-top:6px; margin-bottom:0; text-align:right; } .register-v2-btn{ width:100%; height:49px; border:0; border-radius:25px; background:#075cff; color:#fff; font-size:17px; font-weight:700; cursor:pointer; margin-top:9px; display:flex; align-items:center; justify-content:center; gap:9px; transition:.2s; } .register-v2-btn:hover{ background:#0758ed; transform:translateY(-1px); box-shadow:0 8px 20px rgba(8,96,255,.25); } .register-v2-btn i{ font-size:15px; } .register-v2-footer{ text-align:center; margin-top:20px; color:#515866; font-size:15px; font-weight:600; } .register-v2-footer a{ color:#0064ff; font-weight:800; text-decoration:underline; } @media (max-width:600px){ .register-v2-page{padding:20px;} .register-v2-card{width:100%;max-width:480px;border-radius:26px;padding:24px 18px 22px;} .register-v2-card h1{font-size:31px;margin-bottom:20px;} .register-v2-avatar{width:98px;height:98px;} .register-v2-field{margin-bottom:20px;} .register-v2-field input, .register-v2-field select, .register-v2-field textarea{font-size:14px;} } @media (max-width:380px){ .register-v2-page{padding:12px;} .register-v2-card{padding:22px 16px;} .register-v2-card h1{font-size:28px;} }