/* ═══════════════════════════════════════════════════════════════════════════ reg.css — professional registration, steps 1 and 2 Implements Claude Design turn 20 ("Pro registration — step 1, every screen"), mobile 390 (20b, 18 screens) and desktop 1440 (20c, 7 screens), plus turn 21 ("Pro registration — step 2, location and service area"), mobile 390 (21a, screens 2.1–2.11) and desktop 1440 (21b, three full-width screens). Everything is scoped under .rg so it cannot leak into the Tailwind pages that share this document (step 3 still uses its original markup). COLOUR CONTRACT — from 20a, and it is load-bearing, not decoration: green var(--xw-green, #15803d) verified, selected, saved, safe to proceed amber #f59e0b rate-limited, under review, get this right red #dc2626 this attempt is dead and needs a new one ink #111111 neutral progress and the primary action Colour is never the only signal — every state also carries words. ═══════════════════════════════════════════════════════════════════════════ */ .rg { /* base ramp */ --rg-ink:#111111; --rg-body:#374151; --rg-muted:#6b7280; --rg-soft:#9ca3af; --rg-line:#e5e7eb; --rg-line-soft:#f3f4f6; --rg-surf:#f8f9fa; --rg-disabled:#e5e7eb; /* photo wells + their initial fallback */ --rg-photo:var(--xw-photo, #eef0e9); --rg-photo-ink:var(--xw-text-mute, #9ca3af); --rg-initial-bg:var(--xw-ink-tint, #f8f9fa); --rg-initial-ink:var(--xw-line, #e5e7eb); /* semantic */ --rg-green:var(--xw-green, #15803d); --rg-green-bg:#f0fdf4; --rg-green-line:#bbf7d0; --rg-green-ink:#15803d; --rg-green-chip:var(--xw-green-tint, #f0fdf4); --rg-amber:#f59e0b; --rg-amber-bg:var(--xw-amber-tint, #fffbeb); --rg-amber-line:#fde68a; --rg-amber-ink:#92400e; --rg-red:#dc2626; --rg-red-bg:#fef2f2; --rg-red-line:#fecaca; --rg-red-ink:#b91c1c; /* One control height for the whole page. Buttons used to size themselves from padding + the font shorthand's `normal` line-height (~23px on Inter), which made every button 7px taller than the field beside it. Everything that sits on a control row now takes this instead of computing its own height. */ --rg-control:46px; --rg-display:'Manrope','Inter',system-ui,-apple-system,sans-serif; --rg-ui:'Inter',system-ui,-apple-system,sans-serif; --rg-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; background:#fff; color:var(--rg-ink); font-family:var(--rg-ui); -webkit-font-smoothing:antialiased; } .rg *, .rg *::before, .rg *::after { box-sizing:border-box; } /* Reset ONLY the font and margin. `background`, `border` and `color` are deliberately left alone: `.rg button` (0,1,1) outranks `.rg-btn` (0,1,0), so resetting any of them here strips that property off every button no matter what order the rules appear in — it cost the fill first, then the label. */ .rg button { font:inherit; margin:0; } /* ── Hero band: title left, step rail right ──────────────────────────────── */ .rg-hero { padding:18px 16px 16px; border-bottom:1px solid var(--rg-line-soft); background:#fff; } .rg-hero-in { max-width:1120px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } /* Language sits on its own row, hard right — the top nav above already carries the brand, so putting it beside the title fought the H1 for the same corner. */ .rg-hero-top { display:flex; justify-content:flex-end; } .rg-hero-main { display:flex; flex-direction:column; gap:16px; } .rg-h1 { font:600 21px/1.2 var(--rg-display); letter-spacing:-.7px; color:var(--rg-ink); margin:0; } .rg-hsub { font:400 11px/1.55 var(--rg-ui); color:var(--rg-muted); margin:4px 0 0; } /* Step rail. Circles are buttons — backwards only, enforced in JS. */ .rg-rail { display:flex; align-items:flex-start; } .rg-step { flex:none; width:64px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:default; padding:0; text-align:center; background:none; border:0; } .rg-step.is-done { cursor:pointer; } .rg-dot { width:28px; height:28px; border-radius:50%; background:#fff; border:1.5px solid var(--rg-line); color:var(--rg-soft); font:600 11.5px var(--rg-ui); display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s, color .25s; } .rg-slab { font:500 10px var(--rg-ui); color:var(--rg-soft); transition:color .25s; } .rg-step.is-active .rg-dot { background:var(--rg-ink); border-color:var(--rg-ink); color:#fff; } .rg-step.is-active .rg-slab { font-weight:600; color:var(--rg-ink); } .rg-step.is-done .rg-dot { background:var(--rg-green); border-color:var(--rg-green); color:#fff; } .rg-step.is-done .rg-slab { color:var(--rg-green-ink); } .rg-bar { flex:1; height:2px; background:var(--rg-line); margin:13px 4px 0; transition:background .35s; } .rg-bar.is-done { background:var(--rg-green); } /* ── Body: form column + sidebar ─────────────────────────────────────────── */ .rg-body { padding:16px; background:#fff; } .rg-grid { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:20px; align-items:start; } .rg-col { display:flex; flex-direction:column; gap:14px; min-width:0; } .rg-side { display:flex; flex-direction:column; gap:14px; min-width:0; } /* ── Cards and panels ────────────────────────────────────────────────────── */ .rg-card { border:1px solid var(--rg-line); border-radius:12px; background:#fff; overflow:hidden; } .rg-card.is-err { border-color:var(--rg-red-line); } .rg-card.is-ok { border-color:var(--rg-green-line); } .rg-in { padding:16px; display:flex; flex-direction:column; gap:13px; } .rg-panel { border:1px solid var(--rg-line); border-radius:12px; background:var(--rg-surf); overflow:hidden; } .rg-eyebrow { font:500 9.5px var(--rg-mono); letter-spacing:.08em; color:var(--rg-soft); text-transform:uppercase; } .rg-note { font:400 10px/1.55 var(--rg-ui); color:var(--rg-muted); } .rg-hr { height:1px; background:var(--rg-line-soft); border:0; margin:0; } .rg-h2 { font:600 17px/1.2 var(--rg-display); letter-spacing:-.6px; color:var(--rg-ink); margin:0; } .rg-h3 { font:600 15px/1.2 var(--rg-display); letter-spacing:-.6px; color:var(--rg-ink); margin:0; } /* ── Controls ────────────────────────────────────────────────────────────── */ .rg-field { display:flex; flex-direction:column; gap:6px; } .rg-row { display:flex; gap:8px; } .rg-cc { flex:none; width:48px; height:var(--rg-control); background:var(--rg-surf); border:1px solid var(--rg-line); border-radius:8px; display:flex; align-items:center; justify-content:center; font:500 12px var(--rg-ui); color:var(--rg-muted); } .rg-row .rg-inp { flex:1; width:auto; min-width:0; } .rg-row .rg-btn { flex:none; } /* The phone number itself. Tabular figures so the ten digits sit on an even rhythm and a typo is easy to spot when checking the number before sending — the same numeral treatment the OTP boxes and the prices already use. */ .rg-inp.is-num { font-size:15px; letter-spacing:.04em; font-variant-numeric:tabular-nums; } .rg-inp.is-num::placeholder { font-size:13px; letter-spacing:normal; } /* flex:1 belongs ONLY to the input sitting in the horizontal +91 row. Applied globally it also hit the inputs inside .rg-field (a COLUMN flex container), where flex-grow runs vertically — the box collapsed from 46px to its 18px content height and read as a rounded rule instead of a field. */ .rg-inp { flex:none; width:100%; height:var(--rg-control); border:1px solid var(--rg-line); border-radius:8px; padding:0 13px; font:400 13px var(--rg-ui); color:var(--rg-ink); background:#fff; outline:none; transition:border-color .15s; -webkit-appearance:none; appearance:none; } .rg-inp::placeholder { color:var(--rg-soft); } .rg-inp:focus { border-color:var(--rg-ink); } .rg-inp.is-err { border-color:var(--rg-red); } .rg-inp:disabled { background:var(--rg-surf); color:var(--rg-soft); } .rg-btn { display:inline-flex; align-items:center; justify-content:center; background:var(--rg-ink); border:1px solid var(--rg-ink); border-radius:8px; height:var(--rg-control); padding:0 18px; font:600 12.5px/1 var(--rg-ui); color:#fff; white-space:nowrap; cursor:pointer; transition:opacity .15s, background .15s, border-color .15s; } /* The retry card's button is a secondary action inside a panel, so it sits a notch below the control height rather than filling it. */ .rg-btn.is-sm { height:38px; padding:0 16px; font-size:11.5px; } .rg-btn.is-green { background:var(--rg-green); border-color:var(--rg-green); } .rg-btn.is-ghost { background:#fff; border-color:var(--rg-line); color:var(--rg-ink); font-weight:600; } .rg-btn.is-block { width:100%; } .rg-btn:disabled, .rg-btn[disabled] { background:var(--rg-disabled); border-color:var(--rg-disabled); color:var(--rg-soft); cursor:default; } @media (hover:hover) { .rg-btn:not(:disabled):hover { opacity:.9; } } /* Inline field error — a bullet plus words, never colour alone */ .rg-err { display:flex; align-items:flex-start; gap:7px; font:500 10.5px/1.5 var(--rg-ui); color:var(--rg-red-ink); } .rg-err::before { content:'\25CF'; flex:none; margin-top:1px; } /* WhatsApp opt-in. Real checkbox, styled — it must stay keyboard reachable. */ .rg-check { display:flex; align-items:flex-start; gap:9px; cursor:pointer; } .rg-check input { position:absolute; opacity:0; width:0; height:0; } .rg-box { flex:none; width:17px; height:17px; border-radius:4px; border:1.5px solid var(--rg-line); background:#fff; margin-top:1px; display:flex; align-items:center; justify-content:center; color:#fff; font:400 10px var(--rg-ui); transition:background .15s, border-color .15s; } .rg-check input:checked + .rg-box { background:var(--rg-green); border-color:var(--rg-green); } .rg-check input:focus-visible + .rg-box { outline:2px solid var(--rg-ink); outline-offset:2px; } .rg-check-t { flex:1; font:400 11px/1.5 var(--rg-ui); color:var(--rg-body); } .rg-check-t .m { color:var(--rg-muted); } .rg-check-t strong { color:var(--rg-green-ink); font-weight:600; } /* ── Status blocks ───────────────────────────────────────────────────────── */ /* Confirm bar — the one green line the whole mobile card collapses into */ .rg-ok { display:flex; align-items:center; gap:8px; background:var(--rg-green-bg); border:1px solid var(--rg-green-line); border-radius:8px; padding:12px 13px; } .rg-ok-i { flex:none; width:18px; height:18px; border-radius:50%; background:var(--rg-green); color:#fff; font:400 10px var(--rg-ui); display:flex; align-items:center; justify-content:center; } .rg-ok-t { flex:1; font:600 12px var(--rg-ui); color:var(--rg-green-ink); } /* Banner — left rule, tinted. Carries an eyebrow (what happened) + the message. */ .rg-ban { border-left:3px solid var(--rg-ink); background:var(--rg-surf); border-radius:0 8px 8px 0; padding:12px 13px; display:flex; flex-direction:column; gap:5px; } .rg-ban-l { font:500 9.5px var(--rg-mono); letter-spacing:.08em; text-transform:uppercase; } .rg-ban-t { font:400 11px/1.6 var(--rg-ui); } .rg-ban.is-red { border-left-color:var(--rg-red); background:var(--rg-red-bg); } .rg-ban.is-red .rg-ban-l, .rg-ban.is-red .rg-ban-t { color:var(--rg-red-ink); } .rg-ban.is-amber { border-left-color:var(--rg-amber); background:var(--rg-amber-bg); } .rg-ban.is-amber .rg-ban-l, .rg-ban.is-amber .rg-ban-t { color:var(--rg-amber-ink); } .rg-ban.is-green { border-left-color:var(--rg-green); background:var(--rg-green-bg); } .rg-ban.is-green .rg-ban-l, .rg-ban.is-green .rg-ban-t { color:var(--rg-green-ink); } .rg-ban code { font-family:var(--rg-mono); font-weight:700; } /* ── OTP: six boxes ──────────────────────────────────────────────────────── */ .rg-otp-wrap { display:flex; flex-direction:column; gap:12px; } .rg-otp-col { display:flex; flex-direction:column; gap:8px; min-width:0; } .rg-otp { display:flex; gap:6px; } .rg-otp input { flex:1; min-width:0; height:48px; border:1px solid var(--rg-line); border-radius:8px; text-align:center; font:600 16px var(--rg-mono); color:var(--rg-ink); background:#fff; outline:none; padding:0; transition:border-color .15s; -webkit-appearance:none; appearance:none; } .rg-otp input:focus { border-color:var(--rg-ink); } .rg-otp.is-err input { border-color:var(--rg-red); } .rg-otp.is-ok input { border-color:var(--rg-green); } .rg-otp-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--rg-line-soft); padding-top:11px; } .rg-otp-foot .a { font:500 10.5px var(--rg-ui); color:var(--rg-soft); } .rg-otp-foot .b { font:500 10.5px var(--rg-ui); color:var(--rg-muted); text-align:right; } .rg-resend { font:500 10.5px var(--rg-ui); color:var(--rg-ink); text-decoration:underline; cursor:pointer; padding:0; background:none; border:0; } .rg-resend:disabled { color:var(--rg-soft); text-decoration:none; cursor:default; } /* ── Consent + legal ─────────────────────────────────────────────────────── */ .rg-legal { border-top:1px solid var(--rg-line-soft); padding-top:11px; font:400 10px/1.55 var(--rg-ui); color:var(--rg-muted); } .rg-legal a { color:var(--rg-muted); text-decoration:underline; } @media (hover:hover) { .rg-legal a:hover { color:var(--rg-ink); } } /* ── Trade tiles (single select) ─────────────────────────────────────────── */ .rg-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } /* The card's children are spans, so the column flow has to be declared or they lay out inline — which made a two-line trade name shrink its own photo well and knocked the whole row out of alignment. */ .rg-tile { display:flex; flex-direction:column; border:1px solid var(--rg-line); border-radius:10px; overflow:hidden; background:#fff; cursor:pointer; text-align:left; padding:0; transition:border-color .15s, transform .12s; } .rg-tile:active { transform:scale(.98); } @media (hover:hover) { .rg-tile:hover { border-color:var(--rg-ink); } } .rg-tile-ph { position:relative; flex:none; height:56px; background:var(--rg-photo); border-bottom:1px solid var(--rg-line); display:flex; align-items:center; justify-content:center; } .rg-tile-ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .rg-tile-ph .ini { font:600 26px var(--rg-display); color:var(--rg-initial-ink); } .rg-tile-ph.no-photo { background:var(--rg-initial-bg); border-bottom:0; } /* flex:1 + centring keeps a one-line and a two-line trade name on the same baseline grid instead of leaving ragged card heights across the row. */ .rg-tile-n { display:flex; flex:1; align-items:center; justify-content:center; padding:8px 6px; text-align:center; font:500 10.5px/1.3 var(--rg-ui); color:var(--rg-ink); } /* ── Selectable photo cards: subcategories and services ──────────────────── */ .rg-cards { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .rg-pick { position:relative; display:flex; flex-direction:column; border:1.5px solid var(--rg-line); border-radius:10px; overflow:hidden; background:#fff; cursor:pointer; text-align:left; padding:0; transition:border-color .15s, background .15s, transform .12s; } .rg-pick:active { transform:scale(.98); } @media (hover:hover) { .rg-pick:hover { border-color:var(--rg-ink); } } .rg-pick.is-on { border-color:var(--rg-green); background:var(--rg-green-bg); } .rg-pick-ck { position:absolute; top:7px; right:7px; width:20px; height:20px; border-radius:50%; z-index:1; background:rgba(255,255,255,.9); border:1.5px solid var(--rg-line); color:transparent; font:400 10px var(--rg-ui); display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s, color .15s; } .rg-pick.is-on .rg-pick-ck { background:var(--rg-green); border-color:var(--rg-green); color:#fff; } .rg-pick-ph { position:relative; flex:none; height:62px; background:var(--rg-photo); border-bottom:1px solid var(--rg-line); display:flex; align-items:center; justify-content:center; } .rg-pick-ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .rg-pick-ph .ini { font:600 22px var(--rg-display); color:var(--rg-initial-ink); } .rg-pick-b { flex:1; padding:9px 10px; display:flex; flex-direction:column; gap:2px; justify-content:center; } .rg-pick-t { font:600 11px/1.3 var(--rg-ui); color:var(--rg-ink); } .rg-pick-s { font:400 9.5px var(--rg-ui); color:var(--rg-muted); } /* Prices are numerals — mono, and green because money is the good news here */ .rg-price { font:600 9.5px var(--rg-mono); color:var(--rg-green-ink); font-variant-numeric:tabular-nums; } /* Service cards sit one notch smaller than subcategory cards */ .rg-cards.is-svc .rg-pick-ph { height:48px; } .rg-cards.is-svc .rg-pick-ck { top:6px; right:6px; width:18px; height:18px; font-size:9px; } .rg-cards.is-svc .rg-pick-b { padding:8px 9px; } .rg-cards.is-svc .rg-pick-t { font-weight:500; font-size:10.5px; } /* ── Pills ───────────────────────────────────────────────────────────────── */ .rg-pill { display:inline-flex; align-items:center; background:var(--rg-surf); border:1px solid var(--rg-line); border-radius:999px; padding:5px 11px; font:500 10.5px var(--rg-ui); color:var(--rg-body); white-space:nowrap; } .rg-pill.is-green { background:var(--rg-green-bg); border-color:var(--rg-green-line); color:var(--rg-green-ink); font-weight:600; } .rg-pill.is-ink { background:var(--rg-ink); border-color:var(--rg-ink); color:#fff; font-weight:600; } /* ── Back row above the subcategory / service pickers ────────────────────── */ .rg-back { display:flex; align-items:center; gap:9px; } .rg-back-b { flex:none; font:400 15px var(--rg-ui); color:var(--rg-ink); cursor:pointer; padding:4px 6px; border-radius:6px; line-height:1; background:none; border:0; } @media (hover:hover) { .rg-back-b:hover { background:var(--rg-line-soft); } } .rg-back-t { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .rg-back-t .k { font:500 10.5px var(--rg-ui); color:var(--rg-muted); } .rg-back-t .k b { color:var(--rg-ink); font-weight:600; } /* ── Loading + retry ─────────────────────────────────────────────────────── */ .rg-load { padding:26px; display:flex; flex-direction:column; align-items:center; gap:10px; } .rg-spin { width:22px; height:22px; border:2.5px solid var(--rg-line); border-top-color:var(--rg-ink); border-radius:50%; animation:rgSpin .7s linear infinite; } @keyframes rgSpin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .rg-spin { animation-duration:2.4s; } } .rg-load-t { font:400 11px/1.55 var(--rg-ui); color:var(--rg-muted); } .rg-retry { padding:22px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; } .rg-retry-i { width:34px; height:34px; border-radius:50%; background:var(--rg-surf); border:1px solid var(--rg-line); color:var(--rg-muted); display:flex; align-items:center; justify-content:center; font:600 14px var(--rg-ui); } .rg-retry-t { font:600 13px var(--rg-display); color:var(--rg-ink); } .rg-retry-s { font:400 10.5px/1.55 var(--rg-ui); color:var(--rg-muted); } /* ── Key/value summary rows (server-side recap, saved recap) ─────────────── */ .rg-kv { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .rg-kv .k { font:400 10.5px var(--rg-ui); color:var(--rg-muted); } .rg-kv .v { font:500 10.5px var(--rg-ui); color:var(--rg-ink); text-align:right; } /* ── Resume routing cards ────────────────────────────────────────────────── */ .rg-route { display:flex; flex-direction:column; gap:9px; } .rg-rt { background:var(--rg-surf); border:1px solid var(--rg-line); border-radius:8px; padding:11px 12px; display:flex; flex-direction:column; gap:5px; } .rg-rt-h { display:flex; align-items:center; justify-content:space-between; gap:10px; } .rg-rt-h .n { font:600 10.5px var(--rg-ui); color:var(--rg-ink); } .rg-rt-h .g { font:600 9.5px var(--rg-mono); color:var(--rg-ink); } .rg-rt-b { font:400 10.5px/1.5 var(--rg-ui); color:var(--rg-body); } .rg-rt.is-green { background:var(--rg-green-bg); border-color:var(--rg-green-line); } .rg-rt.is-green .n, .rg-rt.is-green .g { color:var(--rg-green-ink); } .rg-rt.is-amber { background:var(--rg-amber-bg); border-color:var(--rg-amber-line); } .rg-rt.is-amber .n, .rg-rt.is-amber .g { color:var(--rg-amber-ink); } .rg-rt.is-red { background:var(--rg-red-bg); border-color:var(--rg-red-line); } .rg-rt.is-red .n, .rg-rt.is-red .g { color:var(--rg-red-ink); } /* ── Locked referral ─────────────────────────────────────────────────────── */ .rg-locked { display:flex; align-items:center; gap:9px; background:var(--rg-green-bg); border:1px solid var(--rg-green-line); border-radius:8px; padding:12px 13px; } .rg-locked .c { flex:1; font:600 12px var(--rg-mono); color:var(--rg-green-ink); } .rg-locked .l { font:500 9.5px var(--rg-mono); color:var(--rg-green-ink); letter-spacing:.06em; } /* ── Sidebar / below-form block ──────────────────────────────────────────── */ .rg-side-t { font:500 9.5px var(--rg-mono); letter-spacing:.08em; color:var(--rg-soft); text-transform:uppercase; } .rg-li { display:flex; gap:9px; align-items:flex-start; } .rg-li-i { flex:none; width:16px; height:16px; border-radius:50%; background:var(--rg-line-soft); color:var(--rg-muted); font:400 9px var(--rg-ui); margin-top:1px; display:flex; align-items:center; justify-content:center; } .rg-li-i.is-green { background:var(--rg-green-chip); color:var(--rg-green-ink); } .rg-li-t { flex:1; font:500 11.5px/1.45 var(--rg-ui); color:var(--rg-ink); } .rg-li-t.is-body { font-weight:400; color:var(--rg-body); } .rg-chips { display:flex; flex-wrap:wrap; gap:7px; } /* Native details — no JS needed */ .rg-q { border-top:1px solid var(--rg-line); } .rg-q:last-of-type { border-bottom:1px solid var(--rg-line); } .rg-q > summary { list-style:none; cursor:pointer; padding:12px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; font:600 11.5px var(--rg-ui); color:var(--rg-ink); } .rg-q > summary::-webkit-details-marker { display:none; } .rg-q > summary::after { content:'+'; font:400 13px var(--rg-ui); color:var(--rg-soft); flex:none; } .rg-q[open] > summary::after { content:'\2013'; } .rg-q-a { font:400 10.5px/1.6 var(--rg-ui); color:var(--rg-muted); padding:0 0 12px; margin:0; } /* ── Language toggle (segmented) ─────────────────────────────────────────── */ .rg-lang { display:inline-flex; background:var(--rg-surf); border:1px solid var(--rg-line); border-radius:999px; padding:2px; } .rg-lang a { padding:4px 9px; border-radius:999px; font:500 9.5px var(--rg-ui); color:var(--rg-muted); text-decoration:none; } .rg-lang a.is-on { background:#fff; color:var(--rg-ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.05); } /* ═══════════════════════════════════════════════════════════════════════════ STEP 2 — location and service area (turn 21) The colour contract above still holds: green = picked and saved, amber = a wait rather than a failure, red = this attempt is dead. Screens 2.5 and 2.9 are built entirely from .rg-ban, so the four GPS outcomes and the server rejections inherit that grammar rather than inventing a second one. ═══════════════════════════════════════════════════════════════════════════ */ /* The location card is the one card whose content is allowed to escape it: the results list is anchored to the field and has to hang past the card's bottom edge (2.2). .rg-card's overflow:hidden clips it to three rows otherwise, and the two results below the fold are silently unreachable. Safe here because this card has no photo wells relying on the radius clip. */ .rg-card.is-dd { overflow:visible; } /* Card head: tinted glyph well + title + one line of why (2.1) */ .rg-sec { display:flex; align-items:center; gap:11px; } .rg-ic { flex:none; width:36px; height:36px; border-radius:10px; background:var(--rg-green-bg); border:1px solid var(--rg-green-line); color:var(--rg-green-ink); display:flex; align-items:center; justify-content:center; font:400 15px var(--rg-ui); } .rg-sec-t { min-width:0; display:flex; flex-direction:column; gap:2px; } .rg-sec-t .h { font:600 15px/1.2 var(--rg-display); letter-spacing:-.4px; color:var(--rg-ink); } .rg-sec-t .s { font:400 11px/1.4 var(--rg-ui); color:var(--rg-muted); } /* Search field with a leading glyph. The glyph is decorative, so it never takes pointer events — tapping it must still focus the field under it. */ .rg-search { position:relative; } .rg-search .rg-inp { padding-left:34px; } .rg-search-i { position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--rg-soft); font:400 12px var(--rg-ui); } /* OR divider between the two ways of answering the same question (2.1) */ .rg-or { display:flex; align-items:center; gap:11px; } .rg-or::before, .rg-or::after { content:''; flex:1; height:1px; background:var(--rg-line); } .rg-or span { flex:none; font:500 9.5px var(--rg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--rg-soft); } /* ── Autocomplete dropdown (2.2) ────────────────────────────────────────────── Anchored to the field rather than the card so it overlays the OR divider and the GPS button instead of pushing them down the page mid-type. */ .rg-dd { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 5px); background:#fff; border:1px solid var(--rg-line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.10); overflow:hidden; } .rg-dd-i { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 13px; background:#fff; border:0; border-bottom:1px solid var(--rg-line-soft); font:400 12px/1.4 var(--rg-ui); color:var(--rg-ink); cursor:pointer; } .rg-dd-i:last-of-type { border-bottom:0; } .rg-dd-i .p { flex:none; color:var(--rg-soft); font-size:11px; } @media (hover:hover) { .rg-dd-i:hover { background:var(--rg-surf); } } .rg-dd-i:focus-visible { outline:2px solid var(--rg-ink); outline-offset:-2px; } /* "Up to 5 results" — a footer, not a row, so it is never mistaken for a place */ .rg-dd-f { padding:9px 13px; background:var(--rg-surf); border-top:1px solid var(--rg-line-soft); font:400 10px var(--rg-ui); color:var(--rg-muted); } /* Nothing found (2.3). Neutral, not red: a spelling miss is not a failure. */ .rg-empty { border:1px solid var(--rg-line); border-radius:10px; background:var(--rg-surf); padding:18px 14px; text-align:center; display:flex; flex-direction:column; gap:4px; } .rg-empty .h { font:600 12px var(--rg-ui); color:var(--rg-ink); } .rg-empty .s { font:400 10.5px/1.5 var(--rg-ui); color:var(--rg-muted); } /* ── The picked location (2.6, 2.7, 2.11) ───────────────────────────────────── Coordinates are mono and to five decimals: it is the one value a support agent reads back over the phone, so it must not be a proportional blur. */ .rg-loc { display:flex; align-items:flex-start; gap:10px; background:var(--rg-green-bg); border:1px solid var(--rg-green-line); border-radius:10px; padding:12px 13px; } .rg-loc.is-partial { background:var(--rg-amber-bg); border-color:var(--rg-amber-line); } .rg-loc-i { flex:none; width:22px; height:22px; border-radius:50%; background:var(--rg-green); color:#fff; font:400 11px var(--rg-ui); display:flex; align-items:center; justify-content:center; } .rg-loc.is-partial .rg-loc-i { background:var(--rg-amber); } .rg-loc-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .rg-loc-l { font:500 9.5px var(--rg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--rg-green-ink); } .rg-loc.is-partial .rg-loc-l { color:var(--rg-amber-ink); } /* A full Google address can run to six lines and swallow the card, so it is held at two and opened on tap. Clamped rather than truncated with an ellipsis alone: the pro must be able to read the WHOLE thing to check it, just not by default. */ .rg-loc-a { font:600 12.5px/1.45 var(--rg-ui); color:var(--rg-ink); overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .rg-loc.is-open .rg-loc-a { -webkit-line-clamp:unset; overflow:visible; } /* Only the clamped state is interactive — offering "more" on a one-line address is a control that does nothing. */ .rg-loc.is-clamped .rg-loc-b { cursor:pointer; } .rg-loc-more { display:none; align-self:flex-start; margin-top:1px; background:none; border:0; padding:0; font:500 9.5px var(--rg-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--rg-green-ink); cursor:pointer; } .rg-loc.is-clamped .rg-loc-more { display:inline-block; } .rg-loc.is-partial .rg-loc-more { color:var(--rg-amber-ink); } .rg-loc-b:focus-visible { outline:2px solid var(--rg-ink); outline-offset:3px; border-radius:4px; } .rg-loc-c { font:500 10.5px var(--rg-mono); color:var(--rg-green-ink); font-variant-numeric:tabular-nums; } .rg-loc.is-partial .rg-loc-c { color:var(--rg-amber-ink); } /* The × clears the coordinates AND the stored address parts — 2.10's data rule */ .rg-loc-x { flex:none; width:26px; height:26px; border-radius:6px; background:none; border:0; color:var(--rg-muted); font:400 13px var(--rg-ui); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } @media (hover:hover) { .rg-loc-x:hover { background:rgba(0,0,0,.05); color:var(--rg-ink); } } .rg-loc-x:focus-visible { outline:2px solid var(--rg-ink); outline-offset:1px; } /* ── Radius (2.1, 2.8) ──────────────────────────────────────────────────────── The number is the loud element, not the label: the pro is choosing a distance, and the km figure is what they compare against their own travel tolerance. */ .rg-rad-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .rg-rad-h .k { font:500 13px var(--rg-ui); color:var(--rg-ink); } .rg-rad-h .v { font:700 15px var(--rg-ui); color:var(--rg-ink); font-variant-numeric:tabular-nums; } .rg-rad-s { display:flex; align-items:center; justify-content:space-between; font:500 9.5px var(--rg-mono); letter-spacing:.06em; color:var(--rg-soft); text-transform:uppercase; } /* The filled portion is painted with a gradient driven by --p (set in JS) rather than a second element, so the track stays one box for the native thumb to ride. Both vendor thumbs are styled: unprefixed selectors invalidate the whole rule in the other engine, so they cannot be merged into one list. */ .rg-rng { -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; padding:0; margin:0; } .rg-rng::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:linear-gradient(to right, var(--rg-ink) var(--p,16%), var(--rg-line) var(--p,16%)); } .rg-rng::-moz-range-track { height:6px; border-radius:999px; background:linear-gradient(to right, var(--rg-ink) var(--p,16%), var(--rg-line) var(--p,16%)); } .rg-rng::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#fff; border:1.5px solid var(--rg-line); box-shadow:0 1px 3px rgba(0,0,0,.18); } .rg-rng::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fff; border:1.5px solid var(--rg-line); box-shadow:0 1px 3px rgba(0,0,0,.18); } .rg-rng:focus-visible::-webkit-slider-thumb { border-color:var(--rg-ink); } .rg-rng:focus-visible::-moz-range-thumb { border-color:var(--rg-ink); } /* ── Saved recap (2.11) ─────────────────────────────────────────────────────── What actually landed in the row, named with the column names, because this is the screen a pro is looking at when they ring up to say their area is wrong. */ .rg-stored { border:1px solid var(--rg-line); border-radius:10px; background:var(--rg-surf); padding:13px; display:flex; flex-direction:column; gap:8px; } .rg-stored .rg-kv .v { font-family:var(--rg-mono); font-weight:500; } /* ── Desktop side panels (21b) ──────────────────────────────────────────────── Hidden below 1024 on purpose: 21a never shows them, because on a 390 phone they push Continue below the fold and the pro has to hunt for it. */ .rg-aside { display:none; } .rg-dem { display:flex; flex-direction:column; gap:9px; } .rg-dem-r { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--rg-line-soft); } .rg-dem-r:last-child { border-bottom:0; padding-bottom:0; } .rg-dem-r .k { font:500 11px var(--rg-ui); color:var(--rg-muted); } .rg-dem-r .v { font:700 15px var(--rg-ui); color:var(--rg-ink); font-variant-numeric:tabular-nums; } .rg-dem-r.is-on .k { color:var(--rg-ink); font-weight:600; } .rg-hide { display:none !important; } /* ═══ Desktop 1440 (20c) ═══════════════════════════════════════════════════ The layout is settled by 1024: a 1120px column, form 7fr / sidebar 4fr. Below that the sidebar drops under the form, which is exactly the mobile "permanent block below the form" screen (1.18). */ @media (min-width:1024px) { .rg-hero { padding:34px 40px 26px; } .rg-hero-main { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; } .rg-h1 { font-size:38px; letter-spacing:-1.3px; } .rg-hsub { font-size:13.5px; line-height:1.6; margin-top:9px; } .rg-rail { max-width:440px; } .rg-step { width:76px; gap:6px; } .rg-dot { width:32px; height:32px; font-size:12.5px; } .rg-slab { font-size:11px; } .rg-bar { margin:15px 6px 0; } .rg-body { padding:32px 40px 44px; } .rg-grid { grid-template-columns:7fr 4fr; gap:40px; } .rg-col { gap:16px; } .rg-in { padding:24px; gap:16px; } .rg-panel .rg-in { padding:20px; } .rg-h2 { font-size:26px; letter-spacing:-.9px; } .rg-h3 { font-size:22px; letter-spacing:-.7px; } .rg-note { font-size:10.5px; line-height:1.6; } .rg { --rg-control:48px; } .rg-row { gap:10px; } .rg-cc { width:56px; font-size:13px; } .rg-inp { padding:0 14px; font-size:13.5px; } .rg-inp.is-num { font-size:15.5px; } .rg-btn { padding:0 22px; } .rg-locked { height:var(--rg-control); padding:0 14px; } .rg-ok { gap:9px; padding:13px 15px; } .rg-ok-i { width:19px; height:19px; } .rg-ok-t { font-size:12.5px; } .rg-ban { padding:13px 15px; } .rg-ban-t { font-size:11.5px; } .rg-check-t { font-size:11.5px; line-height:1.55; } /* 20c: the boxes and Verify share one baseline, so Verify takes the box height (54) rather than the 48 control height used everywhere else. */ .rg-otp-wrap { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:end; } .rg-otp-wrap .rg-btn { width:auto; height:54px; padding:0 30px; font-size:13px; } .rg-otp { gap:8px; } .rg-otp input { height:54px; max-width:60px; font-size:18px; } .rg-otp-foot { padding-top:14px; } .rg-otp-foot .a, .rg-otp-foot .b, .rg-resend { font-size:11.5px; } .rg-tiles { grid-template-columns:repeat(4,1fr); gap:16px; } .rg-tile-ph { height:104px; } .rg-tile-ph .ini { font-size:40px; } .rg-tile-n { padding:12px 8px; font-size:12px; } .rg-cards { grid-template-columns:repeat(4,1fr); gap:16px; } .rg-pick-ph { height:96px; } .rg-pick-ck { top:9px; right:9px; width:22px; height:22px; } .rg-pick-b { padding:12px 13px; gap:3px; } .rg-pick-t { font-size:12.5px; } .rg-pick-s { font-size:10.5px; } .rg-cards.is-svc { gap:14px; } .rg-cards.is-svc .rg-pick-ph { height:78px; } .rg-cards.is-svc .rg-pick-ck { top:8px; right:8px; width:20px; height:20px; } .rg-cards.is-svc .rg-pick-b { padding:11px 12px; } .rg-cards.is-svc .rg-pick-t { font-size:11.5px; } .rg-price { font-size:10.5px; } .rg-back-t .k { font-size:11.5px; } .rg-route { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .rg-rt { border-radius:10px; padding:16px; gap:7px; } .rg-rt-h .n { font-size:11.5px; } .rg-rt-h .g { font-size:10px; } .rg-rt-b { font-size:11px; line-height:1.55; } .rg-kv .k, .rg-kv .v { font-size:11px; } .rg-li-t { font-size:11.5px; } .rg-side-t, .rg-eyebrow { font-size:9.5px; } /* The sidebar's questions list is compact — hairlines between, not around */ .rg-side .rg-q { border-top:1px solid var(--rg-line-soft); } .rg-side .rg-q:first-of-type { border-top:0; } .rg-side .rg-q:last-of-type { border-bottom:0; } .rg-side .rg-q > summary { padding:9px 0; font-size:11px; } /* A footer action row: button left, the explanation beside it */ .rg-act { display:flex; align-items:center; gap:14px; border-top:1px solid var(--rg-line-soft); padding-top:18px; } .rg-act .rg-btn { padding:14px 26px; font-size:13px; } .rg-act .rg-note { flex:1; } } @media (max-width:1023px) { /* Mobile keeps the button full-width and the note under it */ .rg-act { display:flex; flex-direction:column; gap:10px; } .rg-act .rg-btn { width:100%; } } /* ── Phones: Send OTP drops to its own line ─────────────────────────────────── DELIBERATE DEPARTURE from screen 1.1, which keeps +91 / field / button on one row at 390. Measured, that leaves the number field 140px wide — the ten digits only just fit and the placeholder is clipped, on the device almost every pro signs up from. Splitting the row gives the number the full width and turns the button into a full-width tap target. Same chip, same field, same black button; only the wrap changes, and one row is restored as soon as there is room. */ @media (max-width:639px) { .rg-row { flex-wrap:wrap; } .rg-row .rg-inp { flex:1 1 auto; } .rg-row .rg-btn { flex:1 0 100%; width:100%; } } /* ═══ Step 2 on desktop 1440 (21b) ═════════════════════════════════════════ Same two cards, wider. The right rail carries what 21a could not fit on a 390 phone without pushing Continue under the fold: why the radius matters, the live demand bands, and what step 3 will ask for. */ @media (min-width:1024px) { .rg-aside { display:flex; flex-direction:column; gap:14px; } .rg-aside.rg-hide { display:none !important; } .rg-ic { width:40px; height:40px; border-radius:11px; font-size:17px; } .rg-sec { gap:13px; } .rg-sec-t .h { font-size:17px; letter-spacing:-.5px; } .rg-sec-t .s { font-size:12px; } .rg-search .rg-inp { padding-left:38px; } .rg-search-i { left:14px; font-size:13px; } .rg-dd-i { padding:12px 15px; font-size:12.5px; } .rg-dd-f { padding:10px 15px; font-size:10.5px; } .rg-empty { padding:22px 16px; } .rg-empty .h { font-size:13px; } .rg-empty .s { font-size:11px; } .rg-loc { padding:14px 15px; gap:11px; } .rg-loc-a { font-size:13.5px; } .rg-loc-c { font-size:11px; } .rg-rad-h .k { font-size:14px; } .rg-rad-h .v { font-size:17px; } .rg-rad-s { font-size:10px; } .rg-stored { padding:16px; gap:9px; } } /* Secondary line inside a summary value — the coordinates under the address on the step-2 recap. Quiet enough not to compete with the address a pro reads. */ .rg-fine { display:inline-block; margin-top:2px; font:400 10px var(--rg-mono); color:var(--rg-soft); font-variant-numeric:tabular-nums; } /* ── Map preview + radius bands (21a 2.7/2.8, 21b) ──────────────────────────── The circle is the point of this control. A pro cannot picture "12 km" but can see a ring twice the size of another one, so the radius is chosen spatially and the number confirms it. Diameter = well × 0.333 × √km, fitted to the three sizes the design draws (1 km → 28px, 5 km → 64px, 25 km → 150px in an 84px well); the √ keeps the top of the range from running away entirely. The band recolours the number, the track, the thumb and the ring together: tight 1–3 km ink a deliberate, small patch — not a warning good 4–15 km green the range most pros should sit in wide 16–25 km amber reachable, but that is an hour of Delhi traffic */ /* Set on the STEP, not on the slider card, so the confirmed-location ring picks up the same colour as the radius ring — two drawings of one number should never disagree about what colour that number is. */ .rg-rad, .rg { --rad-c:var(--rg-ink); --rad-tint:rgba(17,17,17,.06); } [data-band="tight"] { --rad-c:var(--rg-ink); --rad-tint:rgba(17,17,17,.06); } [data-band="good"] { --rad-c:var(--rg-green); --rad-tint:rgba(22,163,74,.08); } [data-band="wide"] { --rad-c:var(--rg-amber-ink); --rad-tint:rgba(245,158,11,.12); } .rg-rad .rg-rad-h .v { color:var(--rad-c); transition:color .25s; } .rg-rad .rg-rng::-webkit-slider-runnable-track { background:linear-gradient(to right, var(--rad-c) var(--p,16%), var(--rg-line) var(--p,16%)); } .rg-rad .rg-rng::-moz-range-track { background:linear-gradient(to right, var(--rad-c) var(--p,16%), var(--rg-line) var(--p,16%)); } .rg-rad .rg-rng::-webkit-slider-thumb { border-color:var(--rad-c); } .rg-rad .rg-rng::-moz-range-thumb { border-color:var(--rad-c); } .rg-map { position:relative; height:120px; border-radius:8px; border:1px solid var(--rg-line); background:var(--rg-photo); overflow:hidden; } /* On a phone the empty preview is dead weight above the fold — 2.1 does not draw it, 2.7 does. The desktop column has the room, so it keeps the placeholder. */ .rg-map.is-empty { display:none; } .rg-map-c { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:0; height:0; border:2px dashed var(--rad-c,var(--rg-ink)); background:var(--rad-tint,rgba(22,163,74,.08)); border-radius:50%; transition:width .3s cubic-bezier(.22,.61,.36,1), height .3s cubic-bezier(.22,.61,.36,1), border-color .25s, background-color .25s; } .rg-map-p { position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%; background:var(--rg-ink); transform:translate(-50%,-50%); box-shadow:0 0 0 3px #fff; } .rg-map-chip { position:absolute; left:10px; bottom:10px; background:#fff; border:1px solid var(--rg-line); border-radius:6px; padding:5px 9px; font:500 9.5px var(--rg-mono); color:var(--rg-muted); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } @media (prefers-reduced-motion:reduce) { .rg-map-c { transition:none; } } /* Controls left, preview right — one card, two columns (21b). Stacks on a phone. */ .rg-split { display:flex; flex-direction:column; gap:14px; } .rg-cap { font:400 10.5px/1.55 var(--rg-ui); color:var(--rg-muted); margin:0; } @media (min-width:1024px) { .rg-split { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; } .rg-map { height:196px; } .rg-map.is-empty { display:block; } .rg-cap { font-size:11px; } } /* ── Live map (Leaflet on OSM tiles) ────────────────────────────────────────── Only mounted once a location exists, so the page still paints fast for a pro who has not picked yet. The dashed ring above stays underneath as the fallback for data-saver, 2G and a blocked CDN — .is-live simply hides it. */ .rg-map.is-live { height:220px; } .rg-leaflet { position:absolute; inset:0; z-index:1; display:none; } .rg-map.is-live .rg-leaflet { display:block; } .rg-map.is-live .rg-map-c, .rg-map.is-live .rg-map-p, .rg-map.is-live .rg-map-chip { display:none; } /* Leaflet's own controls sit at z-index 800–1000, so the hint has to clear them. */ .rg-map-hint { position:absolute; left:10px; bottom:10px; z-index:1001; pointer-events:none; background:rgba(255,255,255,.94); border:1px solid var(--rg-line); border-radius:6px; padding:5px 9px; font:500 9.5px var(--rg-mono); color:var(--rg-muted); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .rg-map .leaflet-container { background:var(--rg-photo); font:400 10px var(--rg-ui); } .rg-map .leaflet-control-attribution { font-size:9px; background:rgba(255,255,255,.8); } .rg-map .leaflet-bar a { width:26px; height:26px; line-height:26px; } @media (min-width:1024px) { .rg-map.is-live { height:300px; } } /* ── Step 2 layout: two-up, map beneath ─────────────────────────────────────── DESKTOP ONLY, as asked. Location left, radius right, map full width below, Continue last. The radius starts locked so the order is enforced by the layout rather than by an error message after the fact: a radius with no centre is not a decision anyone can make. PHONE keeps a much simpler rule — no locking, no dimming, no two-up. The cards are re-ordered to location → map → radius, and the radius is simply not there until a location exists. Sequence on a phone is scroll order; a greyed-out card the pro has to scroll past is just an obstacle. */ .rg-s2 { display:flex; flex-direction:column; gap:14px; } #s2-back { order:0; } #card-loc { order:1; } #card-map { order:2; } #card-radius{ order:3; } #s2-cta { order:4; } /* Phone: the radius is absent until there is a point to measure from. */ #card-radius.is-locked { display:none; } #card-map .rg-map { border:0; border-radius:0; } /* The location card, once answered: quieter, but the ✕ stays live so it can be undone. Dimming the whole card would trap them in a decision they cannot exit. */ #card-loc.is-done .rg-sec { opacity:.5; } #card-loc.is-done .rg-in { gap:11px; } .rg-done-tag { display:none; align-items:center; gap:6px; font:500 9.5px var(--rg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--rg-green-ink); } #card-loc.is-done .rg-done-tag { display:inline-flex; } .rg-lock-h { display:flex; align-items:center; justify-content:space-between; gap:10px; } .rg-lock { display:none; background:var(--rg-surf); border:1px solid var(--rg-line); border-radius:999px; padding:4px 10px; font:500 9px var(--rg-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--rg-soft); white-space:nowrap; } @media (min-width:1024px) { .rg-s2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; grid-template-areas:"back back" "loc rad" "map map" "cta cta"; } #s2-back { grid-area:back; } #card-loc { grid-area:loc; } #card-radius { grid-area:rad; } #card-map { grid-area:map; } #s2-cta { grid-area:cta; } /* Locked, not hidden: on a wide screen the pro can see what is coming next and why it is not available yet, which a hidden card cannot tell them. */ #card-radius.is-locked { display:block; opacity:.45; pointer-events:none; user-select:none; } #card-radius.is-locked .rg-lock { display:inline-block; } #card-map .rg-map { border:0; border-radius:0; } #card-map .rg-map.is-live { height:340px; } } /* The map card is absent on a phone until a location exists (see the order rules above); on a wide screen it always shows, carrying the Delhi example first. */ #card-map.is-empty { display:none; } @media (min-width:1024px) { #card-map.is-empty { display:block; } } /* ── Summary lists ──────────────────────────────────────────────────────────── A label column and a value column, both left-aligned. The old row pushed the value to the far right with a gulf in the middle, so four related facts read as four unrelated fragments. */ .rg-sum { display:grid; grid-template-columns:auto 1fr; gap:7px 18px; align-items:baseline; margin:0; } .rg-sum dt { font:500 9.5px var(--rg-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--rg-soft); white-space:nowrap; } .rg-sum dd { margin:0; font:500 12px/1.5 var(--rg-ui); color:var(--rg-ink); overflow-wrap:anywhere; } .rg-sum dd .rg-fine { display:block; } /* ── Collapsible reference panels ───────────────────────────────────────────── Closed on a phone: three always-open panels pushed the form itself off the screen. A script opens them on wide screens, where the sidebar has the room. */ .rg-acc { border:1px solid var(--rg-line); border-radius:12px; background:#fff; overflow:hidden; } .rg-acc > summary { list-style:none; cursor:pointer; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; font:500 9.5px var(--rg-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--rg-soft); } .rg-acc > summary::-webkit-details-marker { display:none; } .rg-acc > summary::after { content:'+'; font:400 14px var(--rg-ui); color:var(--rg-soft); } .rg-acc[open] > summary::after { content:'\2013'; } .rg-acc[open] > summary { border-bottom:1px solid var(--rg-line-soft); } .rg-acc-b { padding:14px 16px; display:flex; flex-direction:column; gap:10px; } .rg-acc-b .rg-q:first-of-type { border-top:0; } .rg-acc-b .rg-q:last-of-type { border-bottom:0; } @media (min-width:1024px) { /* Open and un-clickable on desktop — it is a panel again, not a control. */ .rg-acc > summary { cursor:default; pointer-events:none; padding:16px 20px 10px; } .rg-acc > summary::after { content:''; } .rg-acc[open] > summary { border-bottom:0; } .rg-acc-b { padding:0 20px 18px; } } /* ── Step 2 on a laptop: both cards, the map and Continue in one screen ─────── Measured at 759px for the step alone, which put the map and the button below the fold on a 900px laptop — the two decisions and their result have to be visible together or the map is not doing its job. */ @media (min-width:1024px) { .rg-hero { padding:26px 40px 20px; } .rg-body { padding:24px 40px 30px; } .rg-s2 { gap:12px; } #card-loc .rg-in, #card-radius .rg-in { padding:18px; gap:12px; } #card-map .rg-map.is-live { height:240px; } #card-radius .rg-ban { padding:10px 12px; } #card-radius .rg-ban-t { font-size:11px; line-height:1.5; } } /* ── Step 3: KYC documents (turn 22) ────────────────────────────────────────── Each card owns its own state, so a slow PAN never blocks starting the selfie, and a failure reason sits INSIDE the card that failed with Try again beside it — a page-level banner would leave the pro hunting across three identical cards. */ .rg-kyc-h { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .rg-kyc-t { display:flex; flex-direction:column; gap:3px; min-width:0; } .rg-kyc-t b { font:600 15px/1.2 var(--rg-display); letter-spacing:-.3px; color:var(--rg-ink); } .rg-kyc-t .s { font:400 10.5px/1.55 var(--rg-ui); color:var(--rg-muted); } .rg-kyc-t .lk { color:var(--rg-green-ink); } .rg-kyc-n { flex:none; background:var(--rg-surf); border:1px solid var(--rg-line); border-radius:999px; padding:5px 12px; font:700 11.5px var(--rg-mono); color:var(--rg-ink); } .rg-kyc-n.is-all { background:var(--rg-green-bg); border-color:var(--rg-green-line); color:var(--rg-green-ink); } .rg-kyc-bars { display:flex; gap:7px; } .rg-kyc-bars span { flex:1; height:5px; border-radius:999px; background:var(--rg-line); transition:background .25s; } .rg-kyc-bars span.is-on { background:var(--rg-green); } .rg-doc-h { display:flex; gap:11px; align-items:flex-start; } .rg-doc-b { flex:none; width:30px; height:30px; border-radius:8px; background:var(--rg-surf); border:1px solid var(--rg-line); color:var(--rg-ink); display:flex; align-items:center; justify-content:center; font:600 10px var(--rg-mono); } .rg-doc-b.is-green { background:var(--rg-green-bg); border-color:var(--rg-green-line); color:var(--rg-green-ink); font-size:13px; } .rg-doc-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .rg-doc-t b { font:600 12.5px var(--rg-ui); color:var(--rg-ink); } .rg-doc-t .m { font:400 10px/1.55 var(--rg-ui); color:var(--rg-muted); } .rg-doc-t .m i { color:var(--rg-line); font-style:normal; } .rg-doc-t .m2 { font:400 10px/1.55 var(--rg-ui); color:var(--rg-muted); } /* The whole zone is the control — a 20px "browse" link is not a tap target. */ .rg-drop { display:block; cursor:pointer; } .rg-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .rg-zone { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; border:1.5px dashed #d1d5db; border-radius:8px; padding:20px; transition:border-color .15s, background .15s; } .rg-zone b { font:600 11.5px var(--rg-ui); color:var(--rg-ink); } .rg-zone .s { font:400 10px/1.55 var(--rg-ui); color:var(--rg-muted); } .rg-zone-ic { width:26px; height:26px; border-radius:7px; background:var(--xw-ink-tint, #f8f9fa); } @media (hover:hover) { .rg-drop:hover .rg-zone { border-color:var(--rg-ink); } } /* done / busy / failed — the card border echoes the zone so the state reads at a glance from the card outline alone, before any text is parsed. */ .rg-zone.is-done { flex-direction:row; align-items:center; gap:11px; text-align:left; border:1.5px solid var(--rg-green); background:var(--rg-green-bg); padding:13px; } .rg-card.is-done { border-color:var(--rg-green-line); } .rg-zone.is-busy { border-style:dashed; gap:8px; } .rg-zone.is-bad { border:1.5px solid var(--rg-red); background:var(--rg-red-bg); align-items:flex-start; text-align:left; gap:8px; padding:13px; } .rg-card.is-bad { border-color:var(--rg-red-line); } .rg-zone-tick { flex:none; width:20px; height:20px; border-radius:50%; background:var(--rg-green); color:#fff; font:400 10px var(--rg-ui); display:flex; align-items:center; justify-content:center; } .rg-zone-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .rg-zone-b .t { font:600 11.5px var(--rg-ui); color:var(--rg-green-ink); } .rg-zone-m { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .rg-zone-m .sz { font:600 10.5px var(--rg-mono); color:var(--rg-ink); font-variant-numeric:tabular-nums; } .rg-save { background:var(--rg-green-chip); border:1px solid var(--rg-green-line); border-radius:999px; padding:2px 8px; font:600 9.5px var(--rg-ui); color:var(--rg-green-ink); white-space:nowrap; } .rg-zone-err { display:flex; align-items:flex-start; gap:7px; font:500 10.5px/1.5 var(--rg-ui); color:var(--rg-red-ink); } .rg-zone-err::before { content:'\25CF'; flex:none; margin-top:1px; } .rg-retry-s2 { align-self:flex-start; background:#fff; border:1px solid var(--rg-red-line); border-radius:7px; padding:8px 14px; font:600 11px var(--rg-ui); color:var(--rg-red); cursor:pointer; } /* Submitting — one bar, because the three files go up together. */ .rg-busy { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--rg-line); border-radius:8px; padding:15px; font:600 12.5px var(--rg-ui); color:var(--rg-muted); } /* 3.8 / 3.9 — the end of registration */ .rg-final { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:14px 0 2px; } .rg-final-i { width:48px; height:48px; border-radius:50%; background:var(--rg-green-chip); color:var(--rg-green-ink); font:400 20px var(--rg-ui); display:flex; align-items:center; justify-content:center; } .rg-final-t { font:600 20px/1.2 var(--rg-display); letter-spacing:-.6px; color:var(--rg-ink); margin:0; } .rg-final-s { font:400 12.5px/1.6 var(--rg-ui); color:var(--rg-body); margin:0; max-width:44ch; } @media (min-width:1024px) { .rg-kyc-t b { font-size:16px; } .rg-zone { padding:24px; } .rg-final-t { font-size:24px; } } /* SVG icons replace the text glyphs everywhere. currentColor lets each context set the tint, and the icon boxes centre their child rather than relying on a font's own baseline — which is what made ✓ sit low on some Android builds. */ .rg .rg-ok-i svg, .rg .rg-li-i svg, .rg .rg-loc-i svg, .rg .rg-zone-tick svg, .rg .rg-final-i svg, .rg .rg-ic svg, .rg .rg-doc-b svg, .rg .rg-search-i svg, .rg .rg-back-b svg, .rg .rg-loc-x svg, .rg .rg-done-tag svg, .rg .rg-kyc-t .lk svg, .rg .rg-zone-ic svg { display:block; } .rg-zone-ic { display:flex; align-items:center; justify-content:center; background:var(--rg-surf); border:1px solid var(--rg-line); color:var(--rg-soft); } .rg-search-i { display:flex; } .rg-back-b, .rg-loc-x { display:inline-flex; align-items:center; justify-content:center; } .rg-done-tag svg { margin-right:2px; } .rg-kyc-t .lk { display:inline-flex; vertical-align:-2px; } /* The completion recap replaces the whole step, spanning both columns. */ #phase2-done { order:5; } @media (min-width:1024px) { .rg-s2 { grid-template-areas:"back back" "loc rad" "map map" "cta cta" "done done"; } #phase2-done { grid-area:done; } } .rg .rg-dot svg { display:block; } .rg .rg-box svg { display:block; }