/* ──────────────────────────────────────────────────────────────── Omnis Payment Gateway — design tokens Brand primary: orange (#FF6B1A). Typography: Manrope. See docs/handoff: omnis/project/payment.css ──────────────────────────────────────────────────────────────── */ :root { --omnis-orange: #ff6b1a; --omnis-orange-soft: #fff1e8; --omnis-orange-deep: #e5560a; --omnis-ink: #14181f; --omnis-ink-2: #4a5260; --omnis-ink-3: #8a93a3; --omnis-line: #e8eaee; --omnis-line-2: #f1f2f5; --omnis-bg: #fafafb; --omnis-surface: #ffffff; --omnis-success: #2e8f5a; --omnis-success-soft: #e6f4ec; --omnis-danger: #d9483b; --omnis-info: #2d6ce3; --omnis-info-soft: #eaf1ff; --omnis-radius: 18px; --omnis-radius-sm: 10px; --omnis-shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 8px 28px -10px rgba(20, 24, 31, 0.1); } /* Iframe-blend mode: transparent surface, no shadow, inherit parent typography. Add `data-mount="iframe"` to or the .card wrapper to activate. */ [data-mount="iframe"] { --omnis-bg: transparent; --omnis-shadow: none; --omnis-surface: transparent; --omnis-line: rgba(20, 24, 31, 0.08); --omnis-line-2: rgba(20, 24, 31, 0.04); } * { box-sizing: border-box; } body { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--omnis-bg); color: var(--omnis-ink); padding: 24px 16px; margin: 0; -webkit-font-smoothing: antialiased; } body[data-mount="iframe"] { background: transparent; padding: 0; } /* The payment-shell IS the card. The stepper sits at the top (persistent), and below it the swap area renders whichever section is active. `overflow: visible` is intentional — the stepper inside is `position: sticky`, and any clipped ancestor (overflow: hidden/auto/scroll) would constrain it and prevent it from sticking to the viewport on scroll. */ .payment-shell { max-width: 460px; margin: auto; background: var(--omnis-surface); border-radius: var(--omnis-radius); box-shadow: var(--omnis-shadow); position: relative; overflow: visible; } body[data-mount="iframe"] .payment-shell { background: transparent; box-shadow: none; border: 1px solid var(--omnis-line); } /* .card and inline-modal contents inside the shell are content-only — no standalone card chrome (the shell provides it). */ .payment-shell .card, .payment-shell .modal-inline > .modal-content { max-width: 100%; margin: 0; background: transparent; box-shadow: none; border: none; border-radius: 0; padding: 0; overflow: visible; } /* Match step 1's footer spacing: #cryptoSection has no bottom padding so the "Pay with QR" button sits tight against the "Secured by Omnis Solutio" footer. The default .modal-body adds 20px padding-bottom which would otherwise create a visible extra gap on the QR / Confirm Payment screen above the footer. Drop it here so both screens look identical. */ .payment-shell .modal-inline > .modal-content > .modal-body { padding-bottom: 0; } /* Legacy .card outside the shell (just in case anything else uses it) */ .card { max-width: 460px; margin: auto; background: var(--omnis-surface); padding: 0; border-radius: var(--omnis-radius); box-shadow: var(--omnis-shadow); position: relative; overflow: hidden; } body[data-mount="iframe"] .card { background: transparent; box-shadow: none; border: 1px solid var(--omnis-line); } h2 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; text-align: left; color: var(--omnis-ink); } .hidden { display: none !important; } /* ── Stepper ── */ .stepper { display: flex; align-items: center; gap: 0; padding: 18px 20px 12px; /* Sticky so the user always sees the current step (Method → Pay → Confirm → Done) while scrolling through long screens like the QR payment view with the Important Tips at the bottom. */ position: sticky; top: 0; z-index: 5; background: var(--omnis-surface); border-top-left-radius: var(--omnis-radius); border-top-right-radius: var(--omnis-radius); } body[data-mount="iframe"] .stepper { background: var(--omnis-bg, transparent); } .stepper-item { display: flex; align-items: center; flex: 1; min-width: 0; } .stepper-item:last-child { flex: 0 0 auto; } .stepper-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--omnis-line); color: var(--omnis-ink-3); display: grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .stepper-dot.is-active { background: var(--omnis-orange); color: #fff; box-shadow: 0 0 0 4px var(--omnis-orange-soft); } .stepper-dot.is-done { background: var(--omnis-orange); color: #fff; } .stepper-label { font-size: 11px; font-weight: 600; color: var(--omnis-ink-3); margin-left: 8px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; transition: color 0.3s; } .stepper-dot.is-active ~ .stepper-label, .stepper-dot.is-done ~ .stepper-label { color: var(--omnis-ink); } .stepper-line { flex: 1; height: 2px; background: var(--omnis-line); margin: 0 10px; border-radius: 2px; overflow: hidden; position: relative; } .stepper-line::after { content: ""; position: absolute; inset: 0; background: var(--omnis-orange); transform-origin: left; transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .stepper-line.is-done::after { transform: scaleX(1); } /* Data-step driven state — set `data-step="N"` on .stepper to highlight step N (0=Method, 1=Pay, 2=Confirm, 3=Done). Earlier steps render as done (check icon, no halo); the matching step is active (orange halo, number visible); later steps are pending. At step 3 (terminal Done) all four steps render as done so the user gets the visual confirmation of payment complete. */ /* Active step — orange halo, number visible. Not applied at step 3 (Done), where the 4th dot is rendered as done instead. */ .stepper[data-step="0"] .stepper-item:nth-child(1) .stepper-dot, .stepper[data-step="1"] .stepper-item:nth-child(2) .stepper-dot, .stepper[data-step="2"] .stepper-item:nth-child(3) .stepper-dot { background: var(--omnis-orange); color: #fff; box-shadow: 0 0 0 4px var(--omnis-orange-soft); } /* Done step — orange fill, no halo. The .dot-num is hidden and the inline shows in its place. At data-step="3" the 4th "Done" dot is also marked done. */ .stepper[data-step="1"] .stepper-item:nth-child(1) .stepper-dot, .stepper[data-step="2"] .stepper-item:nth-child(-n + 2) .stepper-dot, .stepper[data-step="3"] .stepper-item:nth-child(-n + 4) .stepper-dot { background: var(--omnis-orange); color: #fff; box-shadow: none; } /* Animate the orange line-fill via ::after transform (left-to-right scale). The line track stays grey; the ::after fills in as the user advances. */ .stepper[data-step="1"] .stepper-item:nth-child(1) .stepper-line::after, .stepper[data-step="2"] .stepper-item:nth-child(-n + 2) .stepper-line::after, .stepper[data-step="3"] .stepper-item:nth-child(-n + 3) .stepper-line::after { transform: scaleX(1); } /* Label color: dark for active + done steps; muted for pending. */ .stepper[data-step="0"] .stepper-item:nth-child(1) .stepper-label, .stepper[data-step="1"] .stepper-item:nth-child(-n + 2) .stepper-label, .stepper[data-step="2"] .stepper-item:nth-child(-n + 3) .stepper-label, .stepper[data-step="3"] .stepper-item:nth-child(-n + 4) .stepper-label { color: var(--omnis-ink); } /* Stack the number and check SVG in the same grid cell so they overlap; `place-items: center` on the parent .stepper-dot centers each in place. */ .stepper-dot .dot-num, .stepper-dot .dot-check { grid-area: 1 / 1; } .stepper-dot .dot-check { width: 12px; height: 12px; display: none; } /* Show the check on done dots and hide the number. */ .stepper[data-step="1"] .stepper-item:nth-child(1) .stepper-dot .dot-num, .stepper[data-step="2"] .stepper-item:nth-child(-n + 2) .stepper-dot .dot-num, .stepper[data-step="3"] .stepper-item:nth-child(-n + 4) .stepper-dot .dot-num { display: none; } .stepper[data-step="1"] .stepper-item:nth-child(1) .stepper-dot .dot-check, .stepper[data-step="2"] .stepper-item:nth-child(-n + 2) .stepper-dot .dot-check, .stepper[data-step="3"] .stepper-item:nth-child(-n + 4) .stepper-dot .dot-check { display: block; } /* Screen wrapper inside card — drives cross-fade between states */ .screen { animation: screenIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 20px 20px; } @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Amount tile (Amount Due) ── */ .quote-display { background: linear-gradient(180deg, var(--omnis-orange-soft), transparent 140%); border: 1px solid var(--omnis-line); border-radius: 14px; padding: 22px 20px; text-align: center; /* Top spacing comes from .card-header's bottom padding (14px) so the gap stays consistent on every viewport. */ margin: 0 0 18px; position: relative; overflow: hidden; } .quote-display::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--omnis-orange); } .quote-amount { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--omnis-ink); line-height: 1.1; } .quote-label { font-size: 0.78rem; color: var(--omnis-ink-3); margin-top: 4px; letter-spacing: 0.02em; } /* ── Section heading ── */ .section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--omnis-ink-3); margin: 6px 0 10px; } /* ── Crypto asset grid ── */ .crypto-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; } .crypto-chip { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid var(--omnis-line); border-radius: 12px; background: var(--omnis-surface); cursor: pointer; transition: all 0.18s; font-size: 0.84rem; width: auto; min-width: 0; font-family: inherit; color: var(--omnis-ink); position: relative; } body[data-mount="iframe"] .crypto-chip { background: transparent; } .crypto-chip:hover { border-color: var(--omnis-ink-3); background: var(--omnis-surface); } .crypto-chip.selected { border-color: var(--omnis-orange); background: var(--omnis-orange-soft); box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.12); } .logo-container { position: relative; display: inline-block; flex-shrink: 0; } .logo-container img.main-logo { display: block; border-radius: 50%; } .logo-container .chain-badge { position: absolute; bottom: -2px; right: -2px; border-radius: 50%; border: 1.5px solid #fff; background: #fff; } .crypto-chip .logo-container { width: 26px; height: 26px; } .crypto-chip .logo-container img.main-logo { width: 26px; height: 26px; } .crypto-chip .logo-container .chain-badge { width: 12px; height: 12px; } .crypto-chip .symbol { font-weight: 700; color: var(--omnis-ink); font-size: 0.82rem; } .crypto-chip .network-tag { font-size: 0.62rem; color: var(--omnis-ink-2); background: var(--omnis-line-2); padding: 2px 6px; border-radius: 5px; margin-left: auto; letter-spacing: 0.02em; font-weight: 700; text-transform: uppercase; } .crypto-chip.selected .network-tag { background: rgba(255, 107, 26, 0.12); color: var(--omnis-orange-deep); } /* Expected payment / quote tile */ .expected-payment { background: #f7f9fa; border-radius: 12px; padding: 14px; margin: 6px 0 16px; display: grid; gap: 10px; } body[data-mount="iframe"] .expected-payment { background: transparent; border: 1px solid var(--omnis-line); } .expected-label { font-size: 0.82rem; color: var(--omnis-ink-2); } .quote-timer { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--omnis-ink-3); font-variant-numeric: tabular-nums; } .quote-timer img { width: 12px; height: 12px; } .quote-timer.warning { color: var(--omnis-orange-deep); } .expected-amount { display: flex; align-items: center; gap: 8px; } .expected-amount .logo-container { width: 22px; height: 22px; } .expected-amount .logo-container img.main-logo { width: 22px; height: 22px; } .expected-amount .logo-container .chain-badge { width: 11px; height: 11px; } .expected-amount .value { font-size: 0.95rem; font-weight: 700; color: var(--omnis-ink); font-variant-numeric: tabular-nums; } .expected-amount .currency { font-size: 0.75rem; color: var(--omnis-ink-2); font-weight: 600; } .header-expiry { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; white-space: nowrap; } .header-expiry-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--omnis-ink); } .header-expiry-value { color: var(--omnis-orange); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ── Payment Method section ── */ .payment-method-section { border-top: none; padding-top: 4px; margin-top: 0; } .view-address-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 16px; background: var(--omnis-orange); border: none; border-radius: 12px; cursor: pointer; transition: transform 0.12s, background 0.18s, box-shadow 0.18s; text-align: center; box-shadow: 0 6px 16px -6px rgba(255, 107, 26, 0.55); position: relative; overflow: hidden; font-family: inherit; } .view-address-btn::after { display: none; } .view-address-btn:hover:not(:disabled) { background: var(--omnis-orange-deep); transform: none; box-shadow: 0 10px 22px -8px rgba(255, 107, 26, 0.65); } .view-address-btn:active:not(:disabled) { transform: translateY(1px); } .view-address-btn:not(:disabled) { animation: none; } .view-address-btn .left { display: flex; align-items: center; gap: 8px; } .view-address-btn .text { font-weight: 700; font-size: 0.92rem; color: #fff; letter-spacing: 0.01em; } .view-address-btn .subtext { font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); } .view-address-btn .icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #fff; } .view-address-btn .arrow { display: none; } .view-address-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ── Loading / error / success screens ── */ .loading { text-align: center; padding: 48px 24px; color: var(--omnis-ink-2); font-size: 0.9rem; } .spinner { border: 3px solid var(--omnis-line); border-top: 3px solid var(--omnis-orange); border-radius: 50%; width: 30px; height: 30px; animation: spin 0.9s linear infinite; margin: 0 auto 16px; } .redirect-notice { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 6px 0 0; font-size: 0.78rem; color: var(--omnis-ink-3); } .redirect-notice .redirect-spinner { border: 2px solid var(--omnis-line); border-top: 2px solid var(--omnis-orange); border-radius: 50%; width: 14px; height: 14px; animation: spin 0.9s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } .error-screen, .success-screen { text-align: center; padding: 12px 20px 24px; } .error-screen { padding-top: 32px; } /* Pop-in status icon shared by error/success */ .error-icon, .success-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-size: 2rem; animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .success-icon { background: var(--omnis-success-soft); color: var(--omnis-success); } .error-icon { background: var(--omnis-orange-soft); color: var(--omnis-orange); } .error-title { font-size: 1.15rem; font-weight: 700; color: var(--omnis-danger); margin: 4px 0 6px; } .success-title { font-size: 1.2rem; font-weight: 700; color: var(--omnis-success); margin: 0 0 12px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; } /* Success illustration. Spans the full width of the success-screen content so it visually aligns with the Order Details box below. The takes over once cps/public/icons/success-badge.png exists; until then the inline fallback renders. The sibling rule hides the SVG while the IMG is in the DOM — when the IMG errors (file missing), its onerror removes it, the rule no longer matches, the SVG appears. */ .success-badge { display: block; margin: 4px 0 16px; } .success-badge .badge-photo, .success-badge .badge-svg { width: 100%; height: auto; display: block; border-radius: 14px; } .success-badge .badge-photo + .badge-svg { display: none; } .error-message { color: var(--omnis-ink-2); font-size: 0.85rem; margin: 0 12px; line-height: 1.5; } /* ── Inline "modal" (Confirm Payment / Wallet Tx) ── These were popups in the legacy gateway; the redesign treats them as inline screens of the same stepper card. They render as a card replacement (the main .card is hidden by JS when these are shown). */ .modal-inline { display: block; max-width: 460px; margin: 0 auto; padding: 0; position: relative; animation: screenIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .modal-inline.hidden { display: none !important; } .modal-inline > .modal-content { background: var(--omnis-surface); border-radius: var(--omnis-radius); box-shadow: var(--omnis-shadow); position: relative; overflow: hidden; max-height: none; width: 100%; } body[data-mount="iframe"] .modal-inline > .modal-content { background: transparent; box-shadow: none; border: 1px solid var(--omnis-line); } /* True overlay popup (kept for #metamaskDeepLinkModal) */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14, 17, 23, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background: var(--omnis-surface); border-radius: var(--omnis-radius); max-width: 460px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px -10px rgba(14, 17, 23, 0.35); animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-inline > .modal-content { /* override the popup shadow/animation for inline use */ box-shadow: var(--omnis-shadow); animation: none; } @keyframes modalIn { from { transform: scale(0.94) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .modal-header { padding: 18px 20px 8px; border-bottom: none; display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--omnis-ink); } /* Title row groups the back arrow + title together on the left side of the modal header (replaces the right-side close [X] for the Confirm Payment screen — the back arrow returns the user to the Method step). */ .modal-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .modal-back { background: transparent; border: none; padding: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--omnis-ink-2); cursor: pointer; border-radius: 8px; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .modal-back:hover { background: var(--omnis-line-2); color: var(--omnis-ink); } .modal-close { background: transparent; border: none; font-size: 1.25rem; color: var(--omnis-ink-3); cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.15s, color 0.15s; padding: 0; line-height: 1; } .modal-close:hover { background: var(--omnis-line-2); color: var(--omnis-ink); } .modal-body { padding: 8px 20px 20px; } /* ── Confirm / alarm dialog ── */ .confirm-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14, 17, 23, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; animation: fadeIn 0.2s ease-out; } .confirm-dialog-content { background: var(--omnis-surface); border-radius: 14px; padding: 22px 20px 18px; max-width: 380px; width: 100%; text-align: center; animation: modalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .confirm-icon { width: 48px; height: 48px; background: var(--omnis-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.5rem; color: #fff; font-weight: 800; } .confirm-title { font-size: 1rem; font-weight: 700; color: var(--omnis-ink); margin-bottom: 6px; } .confirm-message { color: var(--omnis-ink-2); font-size: 0.85rem; margin-bottom: 16px; line-height: 1.5; } .confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .confirm-btn { flex: 1; padding: 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.18s; border: none; font-family: inherit; } .confirm-btn-secondary { background: transparent; color: var(--omnis-ink); border: 1px solid var(--omnis-line); } .confirm-btn-secondary:hover { border-color: var(--omnis-ink-3); background: var(--omnis-line-2); } .confirm-btn-primary { background: var(--omnis-orange); color: #fff; } .confirm-btn-primary:hover { background: var(--omnis-orange-deep); } /* ── Kebab menu ── */ .kebab-menu-wrapper { position: relative; } .kebab-btn { background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 4px 8px; color: var(--omnis-ink-3); border-radius: 8px; line-height: 1; letter-spacing: 2px; transition: background 0.15s, color 0.15s; } .kebab-btn:hover { background: var(--omnis-line-2); color: var(--omnis-ink); } .kebab-dropdown { position: absolute; top: 100%; right: 0; background: var(--omnis-surface); border: 1px solid var(--omnis-line); border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(20, 24, 31, 0.18); min-width: 160px; z-index: 100; overflow: hidden; padding: 4px; animation: menuIn 0.15s ease-out; } @keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .kebab-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.85rem; font-weight: 600; color: var(--omnis-danger); cursor: pointer; border: none; background: none; width: 100%; text-align: left; border-radius: 6px; font-family: inherit; } .kebab-dropdown-item:hover { background: var(--omnis-line-2); } /* ── Progress bar (payment progress) ── */ .progress-section { margin-top: 16px; padding-top: 4px; } .progress-section > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .progress-section > div:first-child > span:first-child { font-size: 0.86rem; font-weight: 700; color: var(--omnis-ink); } .progress-bar-container { background: var(--omnis-line); border-radius: 999px; height: 8px; overflow: hidden; margin-top: 8px; position: relative; } .progress-bar { background: linear-gradient(90deg, var(--omnis-orange), #ff8e55); height: 100%; width: 0%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 999px; position: relative; } .progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent ); animation: shimmer 1.6s linear infinite; border-radius: 999px; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Success state when fully paid */ .progress-bar.is-success { background: linear-gradient(90deg, var(--omnis-success), #54b57e); } .progress-text { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--omnis-ink-2); margin-top: 7px; font-variant-numeric: tabular-nums; } .progress-text b, .progress-text span > span { color: var(--omnis-ink); font-weight: 700; } .status-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .status-pending { background: var(--omnis-orange-soft); color: var(--omnis-orange-deep); } .status-partial { background: var(--omnis-info-soft); color: var(--omnis-info); } .status-paid { background: var(--omnis-success-soft); color: var(--omnis-success); } .status-expired { background: #fde7e5; color: var(--omnis-danger); } /* Banner under progress */ .payment-info { background: var(--omnis-success-soft); color: var(--omnis-success); padding: 10px 12px; border-radius: 10px; margin-top: 10px; font-size: 0.78rem; line-height: 1.45; } .payment-info.partial { background: var(--omnis-orange-soft); color: var(--omnis-orange-deep); } /* ── Copy button ── */ .copy-btn { background: var(--omnis-surface); color: var(--omnis-ink-2); border: 1px solid var(--omnis-line); padding: 5px 10px; font-size: 0.74rem; font-weight: 600; border-radius: 7px; cursor: pointer; transition: all 0.15s; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; } body[data-mount="iframe"] .copy-btn { background: transparent; } .copy-btn:hover { color: var(--omnis-orange); border-color: var(--omnis-orange); background: var(--omnis-surface); } .copy-btn .copied-text { display: none; color: var(--omnis-success); font-weight: 700; } .copy-btn.copied { background: var(--omnis-success-soft); border-color: var(--omnis-success); color: var(--omnis-success); pointer-events: none; } .copy-btn.copied .copy-default { display: none; } .copy-btn.copied .copied-text { display: inline-flex; align-items: center; } /* Icon-only variant — compact square button with the copy / check SVG centered. */ .copy-btn.copy-btn-icon { padding: 4px; width: 26px; height: 26px; justify-content: center; flex-shrink: 0; } .copy-btn.copy-btn-icon .copy-default, .copy-btn.copy-btn-icon .copied-text { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .copy-btn.copy-btn-icon .copied-text { display: none; } .copy-btn.copy-btn-icon.copied .copy-default { display: none; } .copy-btn.copy-btn-icon.copied .copied-text { display: inline-flex; } /* Button loading state */ .btn-loading { position: relative; pointer-events: none; opacity: 0.6; } /* ── Error toast ── */ .error-toast-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14, 17, 23, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 3000; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } .error-toast-overlay.show { opacity: 1; visibility: visible; } .error-toast { background: var(--omnis-surface); border-radius: 14px; max-width: 380px; width: 100%; padding: 22px 20px 18px; text-align: center; transform: scale(0.92); transition: transform 0.2s; box-shadow: 0 20px 60px -10px rgba(14, 17, 23, 0.35); } .error-toast-overlay.show .error-toast { transform: scale(1); } .error-toast-icon { width: 48px; height: 48px; background: var(--omnis-orange-soft); color: var(--omnis-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.5rem; animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .error-toast-title { font-size: 1rem; font-weight: 700; color: var(--omnis-ink); margin-bottom: 6px; } .error-toast-message { color: var(--omnis-ink-2); font-size: 0.82rem; line-height: 1.5; margin-bottom: 16px; word-break: break-word; } .error-toast-btn { background: var(--omnis-orange); color: #fff; border: none; padding: 12px 28px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.18s, box-shadow 0.18s; box-shadow: 0 6px 16px -6px rgba(255, 107, 26, 0.55); } .error-toast-btn:hover { background: var(--omnis-orange-deep); } /* ── Price skeleton (during refresh) ── */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .price-skeleton { background: linear-gradient( 90deg, var(--omnis-line) 25%, var(--omnis-line-2) 50%, var(--omnis-line) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 4px; color: transparent !important; min-width: 80px; display: inline-block; } /* ── KYC modal ── */ .kyc-overlay { display: none; position: fixed; inset: 0; background: rgba(14, 17, 23, 0.55); backdrop-filter: blur(2px); z-index: 9999; justify-content: center; align-items: center; } .kyc-overlay.active { display: flex; } .kyc-modal { background: var(--omnis-surface); border-radius: var(--omnis-radius); width: 95%; max-width: 460px; max-height: 92vh; overflow: auto; position: relative; animation: modalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .kyc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--omnis-line); } .kyc-modal-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; } .kyc-close-btn { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--omnis-ink-3); padding: 0 4px; } #sumsub-websdk-container { min-height: 400px; } /* ── OTP modal ── */ .otp-overlay { display: none; position: fixed; inset: 0; background: rgba(14, 17, 23, 0.55); backdrop-filter: blur(2px); z-index: 9999; justify-content: center; align-items: center; } .otp-overlay.active { display: flex; } .otp-modal { background: var(--omnis-surface); border-radius: var(--omnis-radius); width: 95%; max-width: 460px; max-height: 92vh; overflow: hidden; position: relative; padding: 24px 22px; text-align: center; animation: modalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .otp-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .otp-modal-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; } .otp-close-btn { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--omnis-ink-3); padding: 0 4px; } .otp-phone-display { color: var(--omnis-ink); font-size: 0.85rem; margin: 0 0 14px; font-weight: 500; } .otp-phone-display span { font-weight: 700; color: var(--omnis-orange); } #otpIframe { width: 100%; height: 500px; border: none; border-radius: 10px; } .otp-iframe-loading { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--omnis-ink-3); font-size: 0.85rem; } .otp-login-btn { display: inline-block; background: var(--omnis-orange); color: #fff; border: none; border-radius: 10px; padding: 12px 26px; font-size: 0.92rem; font-weight: 700; cursor: pointer; margin-bottom: 14px; font-family: inherit; box-shadow: 0 6px 16px -6px rgba(255, 107, 26, 0.55); } .otp-login-btn:hover { background: var(--omnis-orange-deep); } .otp-status { font-size: 0.8rem; color: var(--omnis-ink-3); } .otp-status.success { color: var(--omnis-success); font-weight: 700; } /* ── Wallet section (legacy / shared) ── */ .wallet-section { margin-bottom: 18px; } .wallet-section-title { font-size: 0.85rem; font-weight: 700; color: var(--omnis-ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .wallet-connect-btn { width: 100%; padding: 13px 18px; border-radius: 12px; border: 1px solid var(--omnis-line); background: var(--omnis-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: var(--omnis-ink); transition: all 0.18s; font-family: inherit; } .wallet-connect-btn:hover { border-color: var(--omnis-orange); background: var(--omnis-orange-soft); color: var(--omnis-orange); } .wallet-connect-btn:disabled { opacity: 0.5; cursor: not-allowed; } .wallet-connect-btn.connected { border-color: var(--omnis-success); background: var(--omnis-success-soft); } .wallet-pay-btn { width: 100%; padding: 14px 18px; border-radius: 12px; border: none; background: var(--omnis-orange); color: #fff; cursor: pointer; font-size: 0.95rem; font-weight: 700; transition: all 0.18s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; box-shadow: 0 6px 16px -6px rgba(255, 107, 26, 0.55); font-family: inherit; } .wallet-pay-btn:hover { background: var(--omnis-orange-deep); } .wallet-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .wallet-connected-info { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--omnis-success-soft); border: 1px solid #c4e6cf; border-radius: 10px; margin-top: 8px; font-size: 0.8rem; } .wallet-connected-info .wallet-addr { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--omnis-ink); font-weight: 600; } .wallet-disconnect-btn { background: none; border: none; color: var(--omnis-danger); cursor: pointer; font-size: 0.78rem; font-weight: 600; padding: 2px 6px; border-radius: 6px; font-family: inherit; } .wallet-disconnect-btn:hover { background: rgba(217, 72, 59, 0.08); } .wallet-tx-status { padding: 12px; border-radius: 10px; margin-top: 10px; font-size: 0.85rem; text-align: center; } .wallet-tx-status.sending { background: var(--omnis-orange-soft); border: 1px solid #ffd1b3; color: var(--omnis-orange-deep); } .wallet-tx-status.submitted { background: var(--omnis-success-soft); border: 1px solid #b7e0c4; color: var(--omnis-success); } .wallet-tx-status.error { background: #fde7e5; border: 1px solid #efb2ab; color: var(--omnis-danger); } .wallet-tx-link { display: inline-block; margin-top: 6px; color: var(--omnis-orange); text-decoration: none; font-weight: 600; font-size: 0.82rem; } .wallet-tx-link:hover { text-decoration: underline; } .wallet-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--omnis-ink-3); font-size: 0.78rem; } .wallet-divider::before, .wallet-divider::after { content: ""; flex: 1; height: 1px; background: var(--omnis-line); } .wallet-icon-svg { width: 18px; height: 18px; } @keyframes wallet-spin { to { transform: rotate(360deg); } } .wallet-spinner { width: 18px; height: 18px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: wallet-spin 0.8s linear infinite; display: inline-block; } .wallet-spinner.dark { border-color: var(--omnis-orange); border-top-color: transparent; } /* ── Card header (wallet pill on select screen) ── */ .card-header { display: flex; align-items: center; justify-content: space-between; /* Consistent 20px horizontal inset (matches .quote-display below it) and a balanced 14px gap to the amount-due tile on all screen sizes. */ padding: 16px 20px 14px; min-height: 40px; } .card-header > .wallet-connect-group { margin-left: auto; } /* Compact wallet pill in the card header (right side). */ .wallet-cta-wrap { position: relative; } .wallet-header-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px 10px 15px; border: 1px solid var(--omnis-line); border-radius: 999px; background: var(--omnis-surface); cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--omnis-ink); transition: all 0.18s; font-family: inherit; white-space: nowrap; } .wallet-header-btn:hover { border-color: var(--omnis-orange); color: var(--omnis-ink); background: var(--omnis-surface); box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.12); } .wallet-header-btn.connected { border-color: var(--omnis-orange); background: var(--omnis-surface); color: #020202; box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.12); } .wallet-header-btn .wallet-header-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--omnis-orange); flex-shrink: 0; } .wallet-header-btn .wallet-header-addr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; font-weight: 600; color: inherit; } .wallet-header-btn .wallet-header-copy { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.6; transition: opacity 0.18s, color 0.18s; color: inherit; padding: 2px; flex-shrink: 0; } .wallet-header-btn .wallet-header-copy:hover { opacity: 1; color: var(--omnis-orange); } /* Overlapping wallet provider logos inside the pill — sized for the compact header button. Hidden once the wallet is connected so the address pill takes over. */ .wallet-logo-stack { display: inline-flex; align-items: center; flex-shrink: 0; } .wallet-logo-stack img { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--omnis-surface); background: var(--omnis-surface); display: block; } .wallet-logo-stack img + img { margin-left: -6px; } .wallet-logo-more { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--omnis-surface); background: var(--omnis-ink); color: #fff; font-size: 0.55rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; letter-spacing: -0.02em; } .wallet-header-btn.connected .wallet-logo-stack { display: none; } /* ── Wallet popover ── */ .wallet-popover-overlay { position: fixed; inset: 0; z-index: 4000; } .wallet-popover { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--omnis-ink); border-radius: 14px; padding: 10px 10px 8px; min-width: 200px; box-shadow: 0 18px 40px -8px rgba(20, 24, 31, 0.45); z-index: 4001; text-align: center; color: #fff; } .wallet-popover-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--omnis-orange), #ffa866); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; } .wallet-popover-avatar svg { width: 26px; height: 26px; stroke: #fff; } .wallet-popover-address { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; } .wallet-popover-address .copy-icon { cursor: pointer; opacity: 0.6; transition: opacity 0.18s; } .wallet-popover-address .copy-icon:hover { opacity: 1; } .wallet-popover-balance { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 14px; } .wallet-popover-chain { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.08); border-radius: 10px; margin-bottom: 6px; font-size: 0.82rem; font-weight: 500; text-align: left; } .wallet-popover-chain-icon { width: 26px; height: 26px; border-radius: 50%; } .wallet-popover-disconnect { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: none; border-radius: 10px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); width: 100%; transition: background 0.18s; font-family: inherit; } .wallet-popover-disconnect:hover { background: rgba(255, 255, 255, 0.08); color: #ff8a7a; } .wallet-popover-disconnect svg { width: 18px; height: 18px; } /* ── QR frame (inside #qr container) — used by qr-code-styling ── */ #qr { display: grid; place-items: center; padding: 16px; background: var(--omnis-line-2); border-radius: 14px; margin: 6px 0 14px; position: relative; } body[data-mount="iframe"] #qr { background: transparent; border: 1px solid var(--omnis-line); } #qr > div, #qr canvas, #qr svg { background: #fff; padding: 10px; border-radius: 12px; position: relative; box-shadow: 0 4px 16px -6px rgba(20, 24, 31, 0.18); } /* Scanning line animation overlay */ #qr::after { content: ""; position: absolute; left: 28px; right: 28px; height: 3px; background: linear-gradient( 90deg, transparent, var(--omnis-orange), transparent ); border-radius: 3px; animation: scan 2.4s ease-in-out infinite; pointer-events: none; } @keyframes scan { 0%, 100% { top: 22px; opacity: 0; } 10% { opacity: 1; } 50% { top: calc(100% - 26px); opacity: 1; } 90% { opacity: 0; } } /* ── Order details card (success screen) ── */ #orderDetails { background: var(--omnis-line-2) !important; border: 1px solid var(--omnis-line) !important; border-radius: 12px !important; padding: 4px 14px !important; margin-top: 16px !important; } #orderDetails > div:first-child { font-weight: 700 !important; color: var(--omnis-ink-2) !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 0 4px; } #orderDetails > div:nth-child(2) { background: transparent !important; padding: 0 !important; } #orderDetails > div:nth-child(2) > div { border-bottom-color: var(--omnis-line) !important; } #orderDetails > div:nth-child(2) > div:last-child { border-bottom: none !important; } /* Surplus / refund notices keep their inline orange tint but use brand color */ #surplusNotice { background: var(--omnis-orange-soft) !important; border-color: #ffd1b3 !important; } /* ── Brand footer (Secured by Omnis) ── */ .omnis-brand-foot { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 20px 0 18px; font-size: 0.68rem; color: var(--omnis-ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } .omnis-brand-foot__row { display: flex; align-items: center; justify-content: center; gap: 8px; } .omnis-brand-foot .brand-lock { color: var(--omnis-orange); flex-shrink: 0; margin-top: -1px; } .omnis-brand-foot__logo { height: 20px; width: auto; display: block; opacity: 0.85; } /* ── Responsive ── */ @media (max-width: 768px) { body { padding: 16px 12px; } } @media (max-width: 480px) { body { padding: 10px 8px; } .card { border-radius: 14px; } .modal-body { padding: 8px 16px 16px; } .modal-header { padding: 14px 16px 6px; } .modal-title { font-size: 1rem; } .quote-amount { font-size: 1.6rem; } .quote-display { padding: 18px 16px; margin-bottom: 14px; } .crypto-chips { gap: 6px; } .crypto-chip { padding: 10px 11px; font-size: 0.78rem; } .crypto-chip .logo-container { width: 22px; height: 22px; } .crypto-chip .logo-container img.main-logo { width: 22px; height: 22px; } .crypto-chip .network-tag { font-size: 0.58rem; padding: 1px 5px; } .expected-payment { padding: 12px; } .view-address-btn { padding: 13px 16px; } .view-address-btn .text { font-size: 0.88rem; } .stepper { padding: 16px 16px 4px; } .stepper-label { font-size: 10px; margin-left: 6px; } .stepper-line { margin: 0 6px; } .screen { padding: 0 16px 16px; } .card-header { padding: 14px 20px 14px; } .confirm-dialog-content { padding: 20px 16px 16px; } .wallet-header-btn { padding: 8px 10px 8px 12px; font-size: 0.78rem; } .wallet-logo-stack img { width: 16px; height: 16px; } .wallet-logo-stack img + img { margin-left: -5px; } .wallet-logo-more { width: 16px; height: 16px; margin-left: -5px; font-size: 0.5rem; } .wallet-popover { min-width: 220px; padding: 18px 14px 12px; } .kyc-modal, .otp-modal { width: 98%; padding: 20px 16px; } #otpIframe { height: 400px; } } @media (max-width: 360px) { .quote-amount { font-size: 1.4rem; } .stepper-label { display: none; } .crypto-chip { padding: 9px 10px; font-size: 0.74rem; } }