/** * Passwordless auth-flow styles (the #vra-auth-flow card + the 3 screens + the * body-mounted modal). Scoped + isolated like the gate. * * COLORS ARE THEME-ADAPTIVE: every text color and surface fill resolves through the * same var(--vra-*) tokens the gate uses (emitted per-screen via VRA_Gate::vars_for), * with a neutral literal only as a FALLBACK. This is what lets a merchant give the * Sign in / Code / Account screens a dark card without the text going invisible. The * one exception is the signature pad: it stays a white "paper" surface because the * drawn ink is a fixed dark color (vra-sign.js #0b1320) and must always be legible. */ #vra-auth-flow{ max-width:440px;margin:0 auto;padding:28px 26px; background:var(--vra-card,#fff);border:1px solid rgba(128,128,128,0.22);border-radius:18px; font-family:var(--vra-font,inherit);color:var(--vra-text,#1F2937);text-align:center; box-shadow:0 18px 50px -24px rgba(8,32,64,.30); } #vra-auth-flow *{box-sizing:border-box;} /* Logo/wordmark centering — bulletproof against host-theme bleed. Mirrors the gate's guard (#vra-gate .vra-gate-logo): a host theme that paints img{display:block} (very common) turns the logo into a block box, and the card's inherited text-align:center no longer centers it (it pinned left — the reported bug). Force block + auto side margins on the img so it centers regardless; text-align:center on the wrapper centers the inline-block wordmark; and the wordmark also carries text-align:center so it stays centered even if a theme forces it block. */ #vra-auth-flow .vra-authp-logo{margin:0 0 14px;text-align:center!important;} #vra-auth-flow .vra-authp-logo img{display:block!important;float:none!important;margin-left:auto!important;margin-right:auto!important;max-width:150px;height:auto;} #vra-auth-flow .vra-wordmark{display:inline-block;float:none!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;font-size:20px;font-weight:800;color:var(--vra-text,#1F2937);letter-spacing:-0.3px;} #vra-auth-flow h2{font-size:22px;font-weight:800;margin:0 0 6px;color:var(--vra-text,#1F2937);letter-spacing:-0.4px;} #vra-auth-flow .vra-authp-sub{font-size:14px;color:var(--vra-muted,#64748B);margin:0 0 18px;} #vra-auth-flow .vra-authp-label{display:block;text-align:left;font-size:13px;font-weight:600;color:var(--vra-text,#334155);margin:10px 0 6px;} #vra-auth-flow .vra-authp-label span{font-weight:400;color:var(--vra-muted,#94A3B8);} #vra-auth-flow .vra-authp-input{ width:100%;padding:13px 14px;border:1px solid rgba(128,128,128,0.35);border-radius:11px;font-size:15px; color:var(--vra-text,#1F2937);background:var(--vra-card,#fff);margin:0 0 6px;font-family:inherit; } #vra-auth-flow .vra-authp-input:focus{outline:none;border-color:var(--vra-accent,#0EA5E9);box-shadow:0 0 0 3px rgba(128,128,128,.22);} #vra-auth-flow select.vra-authp-input{appearance:auto;} /* iOS Safari sizes input[type=date] to its own intrinsic width and ignores width:100%, so the DOB field overflows the card and breaks the mobile layout. Resetting the native appearance makes it honour width:100% + box-sizing like a normal field; min-width:0 stops the control's default min size. */ #vra-auth-flow input[type="date"].vra-authp-input{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;} #vra-auth-flow input[type="date"].vra-authp-input::-webkit-date-and-time-value{text-align:left;margin:0;} #vra-auth-flow input[type="date"].vra-authp-input::-webkit-calendar-picker-indicator{margin-left:auto;} /* Theme-bleed guard. The account card ALWAYS sits on a light card background, but a host theme's global typography (e.g. a dark theme that paints h2/label/inputs near-white) can override our variable-based colors and wash the text out — especially the TYPED input text. Force the card's text dark with !important while KEEPING the branding variables, so merchant Branding colors still apply but no host theme can render the text invisible. Works on every theme. */ #vra-auth-flow h2, #vra-auth-flow .vra-wordmark{color:var(--vra-text,#111827)!important;} #vra-auth-flow .vra-authp-sub{color:var(--vra-muted,#475569)!important;} #vra-auth-flow .vra-authp-label{color:var(--vra-text,#334155)!important;} #vra-auth-flow .vra-authp-input, #vra-auth-flow .vra-auth-digit{color:var(--vra-text,#111827)!important;background:var(--vra-card,#fff)!important;-webkit-text-fill-color:var(--vra-text,#111827);} #vra-auth-flow .vra-authp-input::placeholder{color:var(--vra-muted,#94A3B8)!important;opacity:1;} #vra-auth-flow .vra-authp-btn{ width:100%;margin:16px 0 0;padding:15px;border:0;border-radius:100px;cursor:pointer; background:linear-gradient(135deg,var(--vra-accent2,#38BDF8) 0%,var(--vra-accent,#0EA5E9) 100%); color:#fff;font-size:15px;font-weight:800;font-family:inherit;line-height:1; display:flex;align-items:center;justify-content:center;gap:9px; box-shadow:0 12px 28px rgba(0,0,0,.18);transition:transform .15s,box-shadow .2s,opacity .2s; } #vra-auth-flow .vra-authp-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.24);} #vra-auth-flow .vra-authp-btn:active{transform:translateY(0) scale(.99);} #vra-auth-flow .vra-authp-fine{font-size:11.5px;line-height:1.5;color:var(--vra-fine,#94A3B8);margin:14px 0 0;} #vra-auth-flow .vra-authp-fine a{color:var(--vra-accent,#0284C7);} #vra-auth-flow .vra-authp-hint{font-size:12.5px;color:var(--vra-muted,#94A3B8);margin:12px 0 6px;} #vra-auth-flow .vra-authp-resend{font-size:12.5px;color:var(--vra-muted,#64748B);margin:6px 0;min-height:16px;} #vra-auth-flow .vra-auth-link{background:none;border:none;color:var(--vra-accent,#0284C7);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:underline;} #vra-auth-flow .vra-auth-err{color:#DC2626;font-size:13px;min-height:18px;text-align:left;margin:4px 0;} #vra-auth-flow .vra-auth-code-boxes{display:flex;gap:8px;justify-content:center;margin:8px 0;} #vra-auth-flow .vra-auth-digit{ width:46px;height:56px;text-align:center;font-size:24px;font-weight:700; border:1px solid rgba(128,128,128,0.35);border-radius:12px;background:var(--vra-card,#fff);color:var(--vra-text,#1F2937);font-family:inherit; } #vra-auth-flow .vra-auth-digit:focus{outline:none;border-color:var(--vra-accent,#0EA5E9);box-shadow:0 0 0 3px rgba(128,128,128,.22);} #vra-auth-flow .vra-auth-signingin{text-align:center;padding:40px 12px;font-size:15px;color:var(--vra-muted,#475569);} @media (max-width:480px){ #vra-auth-flow .vra-auth-digit{width:42px;height:52px;font-size:22px;} } /* Checkout wall wrapper */ .vra-checkout-wall{max-width:480px;margin:0 auto;padding:8px 0 24px;} .vra-checkout-wall-head{text-align:center;margin:0 0 18px;} .vra-checkout-wall-head h2{font-size:22px;font-weight:800;color:var(--vra-text,#1F2937);margin:0 0 6px;letter-spacing:-0.4px;} .vra-checkout-wall-head p{font-size:14px;color:var(--vra-muted,#64748B);margin:0;} /* Body-mounted modal */ .vra-auth-modal{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;padding:20px;} .vra-auth-modal[hidden]{display:none;} .vra-auth-modal-backdrop{position:absolute;inset:0;background:rgba(8,32,64,.55);} .vra-auth-modal-panel{position:relative;z-index:1;width:100%;max-width:460px;} .vra-auth-modal-x{position:absolute;top:-14px;right:-6px;z-index:2;background:#fff;border:1px solid #E5EAF0;width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;color:#64748B;cursor:pointer;} /* Signed attestation — drawn signature pad + typed fallback. The statements/consent text follow the theme tokens; the pad + canvas stay a white signing surface so the fixed dark ink (vra-sign.js) is always legible on any theme. */ .vra-sign-block{margin:14px 0 4px;text-align:left;} .vra-sign-statements{margin:4px 0 10px;padding-left:18px;font-size:12.5px;line-height:1.45;color:var(--vra-muted,#64748B);} .vra-sign-statements li{margin:0 0 4px;} .vra-sign-pad{border:1px solid rgba(128,128,128,0.22);border-radius:12px;background:#fff;padding:8px;} .vra-sign-canvas{display:block;width:100%;height:160px;border-radius:8px;background:#fff;touch-action:none;cursor:crosshair;border:1px dashed rgba(128,128,128,0.45);} .vra-sign-canvas[hidden]{display:none;} /* ID-scoped so it beats #vra-auth-flow .vra-authp-input: the typed signature is a white signing surface with the same dark ink as the drawn pad, on any theme. */ #vra-auth-flow .vra-sign-typed{margin:0;font-family:'Segoe Script','Snell Roundhand',cursive;font-size:22px;color:#0b1320;background:#fff;border:1px solid rgba(128,128,128,0.35);} .vra-sign-typed[hidden]{display:none;} .vra-sign-bar{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--vra-fine,#94A3B8);} .vra-sign-hint{flex:1 1 auto;min-width:0;} /* Wrap (don't flex-shrink:0) so the Clear / Type-instead / Draw-instead links never run off the right edge of the card on a narrow phone — they drop to the next line instead. */ .vra-sign-tools{display:flex;gap:8px 14px;flex-wrap:wrap;} #vra-auth-flow .vra-sign-bar .vra-auth-link{white-space:nowrap;} /* The pad's tool links (Clear / "Can't draw?") sit on the fixed-white pad, so they must use the fixed dark ink — NOT the theme accent, which would be unreadable on white with a light accent. */ #vra-auth-flow .vra-sign-bar .vra-auth-link{color:#0b1320;text-decoration-color:rgba(11,19,32,.5);} .vra-sign-consent{display:flex;align-items:flex-start;gap:8px;margin:12px 0 2px;font-size:12.5px;line-height:1.45;color:var(--vra-text,#1f2937);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(128,128,128,0.16);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;} .vra-sign-consent:active{opacity:0.88;} /* Theme-bleed guard for the e-signature consent — it is legally load-bearing and MUST stay readable. Without !important a dark host theme (e.g. Flow Money) overrode this text to a faint gray. Force the dark card ink (this card is always light) so it can never wash out; links stay a readable accent. */ #vra-auth-flow .vra-sign-consent, #vra-auth-flow .vra-sign-consent span{color:var(--vra-text,#1f2937)!important;-webkit-text-fill-color:var(--vra-text,#1f2937);} #vra-auth-flow .vra-sign-consent a{color:var(--vra-accent2,#0284C7)!important;-webkit-text-fill-color:var(--vra-accent2,#0284C7);} /* Native, fully-tappable checkbox — no pointer-events:none (it caused an iOS first-tap-does-nothing bug); a plain