/* ============================================================================ Every Sky — Traveler Registration redesign (Design 4 · Sidebar Stepper) ---------------------------------------------------------------------------- ALL rules are scoped under `.rr` (added on of the registration layout only) so nothing leaks to portal/admin pages. Loaded AFTER theme-override.css so scoped overrides win without !important. This file restyles the EXISTING markup/classes used by the register templates (.es-input, .es-select, .es-label, .es-section-eyebrow, .es-card, .es-btn-*, Bootstrap grid, the autocomplete .position-relative containers, #rg-dropzone) and adds the NEW shell/sidebar/auth/OTP components. NO field name, id, data-required, datepicker class, or JS hook is referenced for behavior here — presentation only. ========================================================================== */ /* ---- scope tokens -------------------------------------------------------- */ .rr{ --sky:#0ea5e9; --sky-d:#0284c7; --sky-dd:#0369a1; --sky-l:#38bdf8; --sky-t:#e0f2fe; --sky-tt:#f0f9ff; --ink:#0f172a; --ink2:#1e293b; --ink3:#334155; --ink4:#475569; --muted:#64748b; --faint:#94a3b8; --ok:#059669; --ok2:#10b981; --ok-t:#ecfdf5; --warn:#d97706; --warn2:#f59e0b; --dan:#dc2626; --dan2:#ef4444; --page:#F6F8FA; --card:#ffffff; --soft:#f8fbff; --bd:#e2e8f0; --bd2:#d7e6f3; --grad:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%); --grad-navy:linear-gradient(135deg,#0B3A5B,#0B8ABF); --sh-card:0 12px 34px rgba(15,23,42,0.06); --sh-glow:0 10px 24px rgba(14,165,233,0.25); --r-card:18px; --r-field:11px; } /* ---- base ---------------------------------------------------------------- */ body.rr{ margin:0; padding:0; min-height:100vh; background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; } .rr .mono{ font-family:'DM Mono',ui-monospace,monospace; } /* ---- wordmark ------------------------------------------------------------ */ .rr .rr-wordmark{ display:flex; align-items:center; gap:9px; } .rr .rr-wordmark .plane{ width:34px; height:34px; border-radius:10px; background:var(--grad); display:grid; place-items:center; color:#fff; font-size:17px; box-shadow:var(--sh-glow); transform:rotate(-2deg); } .rr .rr-wordmark .wt{ display:flex; flex-direction:column; line-height:1.05; } .rr .rr-wordmark .wt b{ font-size:15px; font-weight:700; letter-spacing:.16em; color:var(--ink); } .rr .rr-wordmark .wt span{ font-size:9px; font-weight:600; letter-spacing:.22em; color:var(--sky-d); } /* ============================================================================ APP SHELL (sidebar + main) — used when reg_layout == 'app' ========================================================================== */ .rr .rr-shell{ display:flex; min-height:100vh; } .rr .rr-sidebar{ width:312px; flex-shrink:0; background:#fff; border-right:1px solid var(--bd); padding:26px 22px 28px; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; } .rr .rr-main{ flex:1; padding:34px 40px 60px; min-width:0; } .rr .rr-main-inner{ max-width:760px; margin:0 auto; } .rr .rr-topstep{ display:none; } /* sidebar head + completion ring */ .rr .sb-head{ padding-bottom:22px; border-bottom:1px solid var(--bd); margin-bottom:22px; } .rr .ring-wrap{ display:flex; align-items:center; gap:15px; margin-top:22px; } .rr .ring{ position:relative; width:74px; height:74px; flex-shrink:0; } .rr .ring svg{ transform:rotate(-90deg); } .rr .ring .pct{ position:absolute; inset:0; display:grid; place-items:center; } .rr .ring .pct b{ font-size:18px; font-weight:700; color:var(--ink); } .rr .ring-meta b{ display:block; font-size:13.5px; color:var(--ink2); font-weight:600; } .rr .ring-meta span{ font-size:11.5px; color:var(--muted); } /* mini summary */ .rr .mini-sum{ margin-top:16px; background:var(--sky-tt); border:1px solid var(--bd2); border-radius:12px; padding:11px 13px; display:flex; align-items:center; gap:10px; } .rr .mini-sum .ava{ width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex-shrink:0; } .rr .mini-sum .mt b{ display:block; font-size:12.5px; color:var(--ink2); font-weight:600; line-height:1.2; } .rr .mini-sum .mt span{ font-size:10.5px; color:var(--muted); word-break:break-all; } /* steps list (li > a rows — valid + accessible) */ .rr .sb-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; flex:1; } .rr .sb-steps a{ display:flex; align-items:center; gap:13px; padding:12px 13px; border-radius:13px; border:1px solid transparent; transition:.16s; position:relative; text-decoration:none; } .rr .sb-steps a:hover{ background:var(--soft); } .rr .sb-steps a .ic{ width:36px; height:36px; border-radius:11px; flex-shrink:0; display:grid; place-items:center; font-size:16px; border:1.5px solid var(--bd); color:var(--muted); background:#fff; transition:.16s; } .rr .sb-steps a .lab{ flex:1; min-width:0; } .rr .sb-steps a .lab b{ display:block; font-size:13px; font-weight:600; color:var(--ink3); } .rr .sb-steps a .lab span{ font-size:11px; color:var(--faint); display:flex; align-items:center; gap:5px; } .rr .sb-steps a.complete .ic{ background:var(--ok-t); border-color:#a7f3d0; color:var(--ok); } .rr .sb-steps a.complete .lab span{ color:var(--ok); } .rr .sb-steps a.attention .ic{ background:#fef2f2; border-color:#fecaca; color:var(--dan); } .rr .sb-steps a.attention .lab span{ color:var(--dan); } .rr .sb-steps a.partial .ic{ background:#fffbeb; border-color:#fde68a; color:var(--warn); } .rr .sb-steps a.partial .lab span{ color:var(--warn); } .rr .sb-steps a.active{ background:linear-gradient(135deg,#f0f9ff,#e0f2fe); border-color:var(--bd2); } .rr .sb-steps a.active .ic{ background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--sh-glow); } .rr .sb-steps a.active .lab b{ color:var(--sky-dd); } .rr .sb-steps a.active .lab span{ color:var(--sky-d); font-weight:600; } .rr .sb-steps a.active::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--grad); } .rr .sb-steps a .done-mark{ color:var(--ok); font-size:16px; } .rr .sb-steps a .attn-mark{ color:var(--dan); font-size:16px; } .rr .sb-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--bd); font-size:11px; color:var(--faint); display:flex; align-items:flex-start; gap:7px; line-height:1.45; } .rr .sb-foot i{ color:var(--sky-d); font-size:14px; flex-shrink:0; } /* mobile top stepper */ .rr .rr-topstep .ts-item{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9999px; border:1.5px solid var(--bd); font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; text-decoration:none; flex-shrink:0; } .rr .rr-topstep .ts-item .ts-n{ width:20px; height:20px; border-radius:50%; background:#e2e8f0; color:var(--muted); display:grid; place-items:center; font-size:10px; } .rr .rr-topstep .ts-item.active{ border-color:var(--sky); color:var(--sky-dd); background:var(--sky-tt); } .rr .rr-topstep .ts-item.active .ts-n{ background:var(--grad); color:#fff; } .rr .rr-topstep .ts-item.complete{ color:var(--ok); border-color:#a7f3d0; background:var(--ok-t); } .rr .rr-topstep .ts-item.complete .ts-n{ background:var(--ok); color:#fff; } .rr .rr-topstep .ts-item.attention{ color:var(--dan); border-color:#fecaca; background:#fef2f2; } .rr .rr-topstep .ts-item.attention .ts-n{ background:var(--dan); color:#fff; } .rr .rr-topstep .ts-item.partial{ color:var(--warn); border-color:#fde68a; background:#fffbeb; } .rr .rr-topstep .ts-item.partial .ts-n{ background:var(--warn); color:#fff; } /* ============================================================================ PAGE HEAD ========================================================================== */ .rr .rr-page-head{ margin-bottom:24px; } .rr .rr-page-head .ey{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--sky-d); margin-bottom:9px; display:inline-flex; align-items:center; gap:7px; background:var(--sky-t); padding:5px 11px; border-radius:9999px; text-transform:uppercase; } .rr .rr-page-head h1{ font-size:25px; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin:0; } .rr .rr-page-head p{ font-size:14px; color:var(--muted); margin:7px 0 0; max-width:560px; } /* ============================================================================ PANEL — restyle the form .es-card to the mockup panel ========================================================================== */ .rr .es-card.es-card-elevated{ background:var(--card); border:1px solid var(--bd); border-radius:var(--r-card); box-shadow:var(--sh-card); } .rr .es-card .es-card-body{ padding:26px 28px; } .rr .es-card + .es-card{ margin-top:18px; } /* group titles (restyle .es-section-eyebrow into mockup .grp-title) */ .rr .es-section-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--ink4); text-transform:uppercase; margin:6px 0 16px; display:flex; align-items:center; gap:9px; } .rr .es-section-eyebrow::after{ content:""; flex:1; height:1px; background:var(--bd); } .rr .es-section-eyebrow i{ color:var(--sky-d); font-size:15px; } .rr .es-section-eyebrow + .es-section-eyebrow, .rr .row + .es-section-eyebrow{ margin-top:26px; } /* the mockup separates groups with the grp-title rule, not

*/ .rr .es-card hr{ display:none; } /* ============================================================================ FIELDS — restyle existing .es-label / .es-input / .es-select / textarea ========================================================================== */ .rr .es-label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink3); margin-bottom:7px; } .rr .es-label .opt, .rr .es-label .es-text-muted{ color:var(--faint); font-weight:400; font-size:11px; } .rr .es-input, .rr .es-select, .rr textarea.es-input, .rr .form-select, .rr input.form-control{ width:100%; font-family:inherit; font-size:13.5px !important; color:var(--ink) !important; background-color:#fff !important; border:1.5px solid var(--bd) !important; border-radius:var(--r-field) !important; padding:11px 13px !important; transition:.15s !important; outline:none; box-shadow:none !important; } .rr .es-input::placeholder, .rr textarea.es-input::placeholder{ color:var(--faint); } .rr .es-input:focus, .rr .es-select:focus, .rr textarea.es-input:focus, .rr .form-select:focus, .rr input.form-control:focus{ border-color:var(--sky) !important; box-shadow:0 0 0 4px rgba(14,165,233,.12) !important; outline:none !important; } .rr textarea.es-input{ resize:vertical; min-height:84px; } .rr .es-select, .rr .form-select{ appearance:none !important; -webkit-appearance:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 13px center !important; padding-right:36px !important; } /* helper text (current .form-text + small notes) */ .rr .form-text, .rr .rr-helper{ font-size:11.5px; color:var(--muted); margin-top:6px; display:flex; gap:6px; align-items:flex-start; line-height:1.4; } .rr .form-text i, .rr .rr-helper i{ color:var(--sky-d); font-size:13px; margin-top:1px; flex-shrink:0; } /* ---- field icons (pixel-parity) ----------------------------------------- */ /* Leading icon lives as an absolute sibling so the autocomplete .position-relative dropdown context is preserved. The input just gets left padding. */ .rr .rr-ic{ position:relative; } .rr .rr-ic > .rr-fic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:15px; pointer-events:none; z-index:2; } .rr .rr-ic > .es-input, .rr .rr-ic > .es-datepicker-dob, .rr .rr-ic > .es-datepicker-future, .rr .rr-ic > input.es-input{ padding-left:38px !important; } /* autocomplete: search field is the FIRST input inside .position-relative.rr-ic */ .rr .position-relative.rr-ic > input[type="text"]{ padding-left:38px !important; padding-right:36px !important; } .rr .rr-ic > .rr-fic-r{ position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--sky-d); font-size:14px; pointer-events:none; z-index:2; } /* phone combo (code + number under one label) */ .rr .rr-phone-combo{ display:grid; grid-template-columns:110px 1fr; gap:9px; align-items:start; } .rr .rr-phone-combo .position-relative{ min-width:0; } /* the country-code dropdown popup needs more room than its narrow cell */ .rr .rr-phone-combo [id$="Dropdown"]{ min-width:248px; } /* ============================================================================ BANNERS — restyle .es-alert-info + add lock variant ========================================================================== */ .rr .es-alert{ display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border-radius:13px; font-size:13px; margin-bottom:22px; line-height:1.45; border:1px solid var(--bd2); } .rr .es-alert i{ font-size:17px; flex-shrink:0; margin-top:1px; } .rr .es-alert-info{ background:var(--sky-tt); border-color:var(--bd2); color:var(--ink3); } .rr .es-alert-info i{ color:var(--sky-d); } .rr .es-alert-info strong{ color:var(--ink2); } .rr .es-alert.rr-lock{ background:#f8fafc; border-color:var(--bd); color:var(--ink4); } .rr .es-alert.rr-lock i{ color:var(--muted); } /* ============================================================================ BUTTONS — restyle .es-btn-* + ghost variant ========================================================================== */ .rr .es-btn{ font-family:inherit; font-size:14px; font-weight:600; border-radius:11px; padding:12px 22px; cursor:pointer; border:1.5px solid transparent; transition:.16s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; } .rr .es-btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--sh-glow); border-color:transparent; } .rr .es-btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 14px 30px rgba(14,165,233,.34); color:#fff; } .rr .es-btn-secondary{ background:#fff; color:var(--ink3); border-color:var(--bd2); } .rr .es-btn-secondary:hover{ background:var(--soft); border-color:var(--sky-l); color:var(--sky-dd); } .rr .es-btn-ghost{ background:transparent; color:var(--muted); border-color:transparent; } .rr .es-btn-ghost:hover{ color:var(--ink3); background:#f1f5f9; } .rr .es-btn-sm{ padding:8px 14px; font-size:12.5px; } .rr .es-btn-block{ width:100%; justify-content:center; } .rr .es-btn-danger{ background:#fff; color:var(--dan); border-color:#fecaca; } .rr .es-btn-danger:hover{ background:#fef2f2; } .rr .es-btn:disabled{ opacity:.45; cursor:not-allowed; } /* wizard nav row (replaces the old nav .es-card) */ .rr .rr-navbar{ display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; } .rr .rr-navbar .spacer{ flex:1; } /* shield note (start page footer) */ .rr .rr-shield{ margin-top:22px; background:var(--soft); border:1px solid var(--bd2); border-radius:13px; padding:13px 16px; display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:var(--ink4); line-height:1.5; } .rr .rr-shield i{ color:var(--ok); font-size:18px; flex-shrink:0; margin-top:1px; } /* ============================================================================ CENTERED AUTH (start / verify) — reg_layout == 'auth' ========================================================================== */ .rr .rr-center{ min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:46px 20px 60px; background:radial-gradient(900px 420px at 50% -120px, rgba(14,165,233,.10), transparent 60%), var(--page); } .rr .rr-center-card{ width:100%; max-width:520px; } .rr .rr-center-brand{ display:flex; justify-content:center; margin-bottom:26px; } .rr .auth-panel{ background:#fff; border:1px solid var(--bd); border-radius:22px; box-shadow:var(--sh-card); overflow:hidden; } .rr .auth-top{ background:var(--grad-navy); padding:26px 30px 24px; color:#fff; position:relative; overflow:hidden; } .rr .auth-top::after{ content:"\F5B0"; font-family:"bootstrap-icons"; position:absolute; right:-12px; bottom:-22px; font-size:120px; color:rgba(255,255,255,.07); transform:rotate(-12deg); } .rr .auth-top .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#bae6fd; margin-bottom:10px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); padding:5px 11px; border-radius:9999px; } .rr .auth-top h1{ font-size:23px; font-weight:700; letter-spacing:-.01em; margin:0; } .rr .auth-top p{ font-size:13.5px; color:rgba(255,255,255,.82); margin:8px 0 0; max-width:380px; } .rr .auth-body{ padding:26px 30px 28px; } .rr .auth-prog{ display:flex; align-items:center; gap:8px; margin-bottom:22px; } .rr .auth-prog .seg{ height:5px; flex:1; border-radius:9999px; background:var(--bd); } .rr .auth-prog .seg.on{ background:var(--grad); } .rr .auth-foot-link{ text-align:center; margin-top:18px; font-size:13px; color:var(--muted); } .rr .auth-foot-link a{ color:var(--sky-d); font-weight:600; text-decoration:none; } .rr .auth-foot-link a:hover{ text-decoration:underline; } /* OTP — 6 visible boxes drive a hidden name="otp_code" */ .rr .otp-row{ display:flex; gap:11px; justify-content:center; margin:6px 0 4px; } .rr .otp-box{ width:54px; height:62px; border:1.5px solid var(--bd2); border-radius:13px; background:var(--soft); text-align:center; font-size:24px; font-weight:600; color:var(--ink); font-family:inherit; transition:.15s; outline:none; padding:0; } .rr .otp-box:focus{ border-color:var(--sky); background:#fff; box-shadow:0 0 0 4px rgba(14,165,233,.12); } .rr .otp-box.fill{ border-color:var(--sky-l); background:#fff; } .rr .otp-label{ font-size:12.5px; font-weight:600; color:var(--ink3); text-align:center; margin-bottom:14px; } .rr .otp-resend{ text-align:center; margin-top:16px; font-size:13px; color:var(--muted); } .rr .otp-resend button{ color:var(--sky-d); font-weight:600; background:none; border:none; cursor:pointer; padding:0; } .rr .otp-resend button:hover{ text-decoration:underline; } /* ============================================================================ TOGGLE — restyle the wheelchair .form-switch into the mockup switch ========================================================================== */ .rr .rr-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1.5px solid var(--bd); border-radius:13px; background:var(--soft); } .rr .rr-toggle-row .tl b{ display:block; font-size:13px; font-weight:600; color:var(--ink2); } .rr .rr-toggle-row .tl span{ font-size:11.5px; color:var(--muted); } .rr .rr-toggle-row .form-check{ padding:0; margin:0; min-height:0; display:flex; align-items:center; } .rr .rr-toggle-row .form-check-input{ width:46px; height:26px; margin:0; border-radius:9999px; background-color:#cbd5e1; border:none; background-image:none; cursor:pointer; transition:.18s; flex-shrink:0; position:relative; box-shadow:none; } .rr .rr-toggle-row .form-check-input::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.18s; } .rr .rr-toggle-row .form-check-input:checked{ background-color:transparent; background-image:var(--grad); } .rr .rr-toggle-row .form-check-input:checked::after{ left:23px; } .rr .rr-toggle-row .form-check-input:focus{ box-shadow:0 0 0 4px rgba(14,165,233,.12); } .rr .rr-toggle-row .form-check-label{ display:none; } /* ============================================================================ DOCUMENTS (step 5) — restyle dropzone / rows / uploaded pills (#rg-dropzone, .rg-doc-row, .doc-type-select, ... ids/classes preserved) ========================================================================== */ .rr #rg-dropzone.rg-dropzone{ border:2px dashed var(--bd2); border-radius:16px; background:linear-gradient(180deg,var(--sky-tt),#fff); padding:38px 24px; text-align:center; cursor:pointer; transition:.16s; margin-bottom:0; } .rr #rg-dropzone.rg-dropzone:hover{ border-color:var(--sky); background:linear-gradient(180deg,#e0f2fe,#fff); } .rr #rg-dropzone.rg-dropzone.dragover{ border-color:var(--sky-d); background:#e0f2fe; box-shadow:0 0 0 4px rgba(2,132,199,.12); } .rr #rg-dropzone .rg-dropzone-icon{ width:60px; height:60px; border-radius:16px; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:26px; margin:0 auto 14px; box-shadow:var(--sh-glow); } .rr #rg-dropzone .rg-dropzone-title{ font-size:15px; color:var(--ink2); font-weight:600; } .rr #rg-dropzone .rg-dropzone-sub{ font-size:12.5px; color:var(--muted); margin-top:5px; } .rr #rg-dropzone.is-busy{ pointer-events:none; opacity:.85; } .rr #rg-dropzone.is-error{ border-color:var(--dan2); background:#fef2f2; } .rr #rg-dropzone.is-error .rg-dropzone-icon{ background:#fee2e2; color:var(--dan); } .rr .rg-doc-row{ border:1.5px solid var(--bd) !important; border-radius:14px !important; padding:18px 20px !important; margin-top:18px; background:var(--soft) !important; } /* uploaded-file pill (already-uploaded docs grid) */ .rr .rr-file-pill{ display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--bd2); border-radius:11px; padding:9px 13px; font-size:13px; } .rr .rr-file-pill .fp-ic{ width:30px; height:30px; border-radius:8px; background:#fee2e2; color:var(--dan); display:grid; place-items:center; font-size:15px; flex-shrink:0; } .rr .rr-note-line{ font-size:12px; color:var(--muted); margin-top:16px; display:flex; gap:7px; align-items:flex-start; line-height:1.45; } .rr .rr-note-line i{ color:var(--sky-d); font-size:14px; margin-top:1px; } /* ============================================================================ PORTAL single-page WIZARD (profile + dependent form). Reuses .rr-sidebar / ring / .sb-steps, but the sidebar is a bounded card inside the portal content (not the full-height registration shell). Built client-side by portal-form-wizard.js over the existing Bootstrap-tab form. ========================================================================== */ .rr .rr-portal-wizard{ display:flex; gap:22px; align-items:flex-start; } .rr .rr-portal-wizard > .rr-sidebar{ position:sticky; top:14px; width:300px; flex-shrink:0; height:auto; max-height:calc(100vh - 28px); overflow-y:auto; border:1px solid var(--bd); border-radius:var(--r-card); background:#fff; box-shadow:var(--sh-card); padding:22px 18px; } html[dir="rtl"] .rr .rr-portal-wizard > .rr-sidebar{ border-left:1px solid var(--bd); } .rr .rr-portal-wizard > .rr-main{ flex:1; min-width:0; padding:0; } .rr .rr-portal-wizard .es-nav-tabs{ display:none !important; } .rr .rr-portal-wizard .rr-main .es-card .es-card-body{ padding:0; } .rr .rr-portal-wizard .tab-content{ padding:24px 26px; } .rr .rr-portal-wizard .sb-head{ margin-bottom:18px; padding-bottom:18px; } .rr .rr-portal-wizard .ring-wrap{ margin-top:0; } .rr .rr-portal-wizard .rr-navbar{ margin-top:16px; } @media (max-width:1100px){ .rr .rr-portal-wizard{ flex-direction:column; } .rr .rr-portal-wizard > .rr-sidebar{ position:static; width:auto; max-height:none; } } /* ============================================================================ RESPONSIVE ========================================================================== */ @media (max-width:960px){ .rr .rr-sidebar{ display:none; } .rr .rr-shell{ flex-direction:column; } .rr .rr-main{ padding:22px 18px 50px; } .rr .rr-topstep{ display:flex; gap:8px; overflow-x:auto; padding:14px 16px; background:#fff; border-bottom:1px solid var(--bd); position:sticky; top:0; z-index:50; scrollbar-width:none; } .rr .rr-topstep::-webkit-scrollbar{ display:none; } .rr .rr-phone-combo{ grid-template-columns:96px 1fr; } .rr .es-card .es-card-body{ padding:20px 18px; } } @media (max-width:430px){ .rr .rr-page-head h1{ font-size:21px; } .rr .otp-box{ width:42px; height:52px; font-size:20px; } .rr .otp-row{ gap:7px; } .rr .auth-body, .rr .auth-top{ padding-left:20px; padding-right:20px; } } /* ============================================================================ RTL (Arabic) mirrors — full pass in Phase 7 ========================================================================== */ html[dir="rtl"] .rr .rr-sidebar{ border-right:none; border-left:1px solid var(--bd); } html[dir="rtl"] .rr .sb-steps li.active::before{ left:auto; right:0; } html[dir="rtl"] .rr .rr-ic > .rr-fic{ left:auto; right:13px; } html[dir="rtl"] .rr .position-relative.rr-ic > input[type="text"]{ padding-left:36px !important; padding-right:38px !important; } html[dir="rtl"] .rr .rr-ic > .rr-fic-r{ right:auto; left:13px; } html[dir="rtl"] .rr .rr-ic > .es-input, html[dir="rtl"] .rr .rr-ic > input.es-input{ padding-left:13px !important; padding-right:38px !important; } html[dir="rtl"] .rr .es-select, html[dir="rtl"] .rr .form-select{ background-position:left 13px center !important; padding-right:13px !important; padding-left:36px !important; } html[dir="rtl"] .rr .auth-top::after{ right:auto; left:-12px; transform:rotate(12deg) scaleX(-1); } html[dir="rtl"] .rr .rr-toggle-row .form-check-input::after{ left:auto; right:3px; } html[dir="rtl"] .rr .rr-toggle-row .form-check-input:checked::after{ right:23px; left:auto; } /* codes/OTP read left-to-right even on RTL pages */ .rr .otp-row{ direction:ltr; } /* nav arrows point the natural way in RTL */ html[dir="rtl"] .rr .rr-navbar .bi-arrow-right{ transform:scaleX(-1); } html[dir="rtl"] .rr .rr-navbar .bi-arrow-left{ transform:scaleX(-1); } html[dir="rtl"] .rr .auth-foot-link, html[dir="rtl"] .rr .otp-resend{ direction:rtl; }